公告，活动，投诉接口对接完成

src/views/workbench/components/HouseUser.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const searchFilterType = ['住户姓名', '住户编号', '手机号', '身份证号'];
+
+const SearchForm = ref({
+  searchFilter: 0,
+  searchText: ''
+});
+
+const Search = () => {
+  console.log(SearchForm.value);
+};
+const Reset = () => {
+  SearchForm.value = {
+    searchFilter: 0,
+    searchText: ''
+  };
+};
+
+// ! ==================================================
+const queryParams = ref({
+  pageSize: 10,
+  pageNum: 1
+});
+const userlist = Array.from({ length: 10 }).fill({
+  id: 1,
+  name: '张三',
+  phone: '13888888888',
+  type: '普通用户',
+  address: '湖北省武汉市武昌区',
+  status: '正常',
+  idcard: '420000000000000000'
+});
+const total = ref(100);
+const columns = [
+  {
+    prop: 'name',
+    label: '用户名称'
+  },
+  {
+    prop: 'type',
+    label: '用户类型'
+  },
+  {
+    prop: 'status',
+    label: '用户状态'
+  },
+  {
+    prop: 'idcard',
+    label: '身份证号',
+    width: 200
+  },
+  {
+    prop: 'phone',
+    label: '手机号'
+  },
+  {
+    prop: 'address',
+    label: '用户地址',
+    width: 200
+  }
+];
+function handleEdit(row: any) {
+  console.log(row);
+}
+function handleDelete(row: any) {
+  console.log(row);
+}
+function handleReview(row: any) {
+  console.log(row);
+}
+</script>
+
+<template>
+  <div class="houseUserBox w-full mt-4">
+    <div class="houseUserTitle">住户查询</div>
+    <div class="houseUserContent flex flex-col">
+      <div class="houserUser_SearchBox flex items-center mb-2">
+        <div class="flex-1 flex items-center">
+          <div class="min-w-20">精准查询</div>
+          <!-- 下拉筛选 -->
+          <el-select class="max-w-40" v-model="SearchForm.searchFilter" placeholder="请选择">
+            <el-option v-for="(item, index) in searchFilterType" :key="index" :label="item" :value="index"></el-option>
+          </el-select>
+          <!-- 搜索框 -->
+          <el-input style="flex: 0.5" class="ml-4" placeholder="请输入" v-model="SearchForm.searchText"></el-input>
+        </div>
+        <div>
+          <el-button class="SearchBtn" type="primary" @click="Search">搜索</el-button>
+          <el-button class="ml-4 ResetBtn" @click="Reset">重置</el-button>
+        </div>
+      </div>
+      <div class="houseUser_Search_ListBox flex-1">
+        <el-table :data="userlist">
+          <el-table-column type="index" width="80" />
+          <el-table-column prop="name" align="center" label="住户姓名" />
+          <el-table-column prop="name" align="center" label="类型" />
+          <el-table-column prop="name" align="center" label="状态" />
+          <el-table-column prop="name" align="center" label="证件号码" />
+          <el-table-column prop="name" align="center" label="手机号" />
+          <el-table-column prop="name" align="center" label="房间" />
+          <el-table-column label="操作" align="center" width="350">
+            <template #default="scope">
+              <el-button text>审核</el-button>
+              <el-button text>编辑</el-button>
+              <el-button text>删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.houseUserBox {
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  padding: 20px;
+  .houseUserTitle {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  .houseUserContent {
+    .houserUser_SearchBox {
+      justify-content: space-between;
+      .ResetBtn {
+        background-color: rgba(255, 255, 255, 1);
+        color: rgba(16, 16, 16, 1);
+      }
+    }
+    .houseUser_Search_ListBox {
+      margin-top: 10px;
+      height: 100%;
+      :deep(.el-table) {
+        height: calc(100% - 100px);
+      }
+    }
+  }
+}
+</style>

src/views/workbench/components/repairEcharts.vue

@@ -0,0 +1,55 @@
+<script name="repairEcharts" setup lang="ts">
+import { ref } from 'vue';
+import Echarts from '@/components/Echarts/index.vue';
+import { EChartsOption } from 'echarts';
+
+// 生成过去7天的日期
+const getLast7Days = (days = 7) => {
+  const dates = [];
+  for (let i = days - 1; i >= 0; i--) {
+    dates.push(new Date(new Date().getTime() - i * 24 * 60 * 60 * 1000).toLocaleDateString());
+  }
+  return dates;
+};
+const chartConfig = shallowRef<EChartsOption>({
+  grid: {
+    left: '1%',
+    right: '1%',
+    top: '3%',
+    bottom: '1%',
+    containLabel: true
+  },
+  xAxis: {
+    data: getLast7Days()
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: 'line',
+      areaStyle: {
+        color: '#d1e3ff'
+      },
+      lineStyle: {
+        color: '#1a75ff'
+      },
+      label: {
+        show: true,
+        color: '#3f8afc',
+        position: 'top'
+      }
+    }
+  ]
+});
+// 图表配置不应该被深度响应式劫持，会导致性能下降 + 类型错误。
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <Echarts :options="chartConfig" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>