物业之前，新工作台

src/views/workbench/components/repairEcharts.vue

@@ -1,5 +1,4 @@
 <script name="repairEcharts" setup lang="ts">
-import { ref } from 'vue';
 import Echarts from '@/components/Echarts/index.vue';
 import { EChartsOption } from 'echarts';
 
@@ -15,7 +14,7 @@ const chartConfig = shallowRef<EChartsOption>({
   grid: {
     left: '1%',
     right: '1%',
-    top: '3%',
+    top: '10%',
     bottom: '1%',
     containLabel: true
   },
@@ -27,10 +26,21 @@ const chartConfig = shallowRef<EChartsOption>({
   },
   series: [
     {
-      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      data: [5, 92, 12, 34, 120, 10, 120],
       type: 'line',
+      smooth: true,
       areaStyle: {
-        color: '#d1e3ff'
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1, // 从上到下渐变
+          colorStops: [
+            { offset: 0, color: '#e2edff' }, // 顶部：半透明蓝色
+            { offset: 1, color: '#f2f9ff' } // 底部：极浅蓝/透明
+          ]
+        }
       },
       lineStyle: {
         color: '#1a75ff'
@@ -40,10 +50,30 @@ const chartConfig = shallowRef<EChartsOption>({
         color: '#3f8afc',
         position: 'top'
       }
+    },
+    {
+      data: [5, 92, 12, 34, 120, 10, 120].reverse(),
+      type: 'line',
+      smooth: true,
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1, // 从上到下渐变
+          colorStops: [
+            { offset: 0, color: '#e2edff' }, // 顶部：半透明蓝色
+            { offset: 1, color: '#f2f9ff' } // 底部：极浅蓝/透明
+          ]
+        }
+      },
+      lineStyle: {
+        color: '#ffc800'
+      }
     }
   ]
 });
-// 图表配置不应该被深度响应式劫持，会导致性能下降 + 类型错误。
 </script>
 
 <template>

src/views/workbench/index.vue

@@ -2,8 +2,9 @@
   <div class="home">
     <div class="navbar flex flex-items-center">
       <svg-icon icon-class="viliageIcon" />
-      <span class="ml-2">北境碧桂园小区</span>
+      <span class="ml-2">{{ villageinfo.villageName }}</span>
     </div>
+
     <el-row class="mt-20px">
       <el-col :span="24">
         <div class="viliageBox">
@@ -57,6 +58,7 @@
         </div>
       </el-col>
     </el-row>
+
     <el-row :gutter="20" class="mt-20px">
       <el-col :span="9">
         <el-card>
@@ -105,7 +107,7 @@
               <div class="quick_item" v-for="(item, index) in quickBox" @click="handleRouter(item.url)" :key="index">
                 {{ item.name }}
               </div>
-              <div class="quick_item quick_add">+ 添加</div>
+              <!-- <div class="quick_item quick_add">+ 添加</div> -->
             </div>
           </div>
         </el-card>
@@ -196,6 +198,22 @@
 <script setup name="Index" lang="ts">
 import repairEcharts from './components/repairEcharts.vue';
 import HouseUser from './components/HouseUser.vue';
+import { getVillageByIdAPI } from '@/api/system/community';
+import { useHouseStore } from '@/store/modules/house';
+const houseStore = useHouseStore();
+const villageinfo = ref({
+  'villageId': null,
+  'villageName': ''
+});
+// 获取小区
+function getVillageinfo() {
+  const id = Number(localStorage.getItem('villageid'));
+  getVillageByIdAPI(id).then((res) => {
+    villageinfo.value = res.data;
+    houseStore.updateVilageinfo(res.data);
+  });
+}
+getVillageinfo();
 // ! 快捷入口
 const quickBox = ref([
   {
@@ -250,9 +268,6 @@ const echartTypeChange = (type: number) => {
   currentEchartType.value = type;
 };
 // ! 切换echarts
-
-// 获取小区
-function getViliage() {}
 </script>
 
 <style lang="scss" scoped>

src/views/workbench/index2.vue

@@ -0,0 +1,670 @@
+<template>
+  <div class="w-full h-full workBenchBox">
+    <el-row>
+      <el-col :span="18">
+        <div class="villageBox">
+          <div class="title">小区概况</div>
+          <div class="villageBody">
+            <div class="village_items" v-for="(item, index) in list" :key="index">
+              <div class="icon"></div>
+              <div class="infobox">
+                <div class="infoTitle">{{ item.name }}</div>
+                <div class="infoNum">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="echartsbox flex flex-items-center">
+          <div class="echarts">
+            <div class="nav flex flex-items-center justify-between">
+              <div>
+                <span class="ecarts_title">近一周报修量趋势</span>
+                <span class="echarts_units">单位（个）</span>
+              </div>
+              <div class="flex flex-items-center justify-center">
+                <span class="echarts_all_baoxiu">全部保修</span>
+                <i class="echarts_all_arrow"></i>
+              </div>
+            </div>
+            <div class="echartsbody">
+              <repairEcharts />
+            </div>
+          </div>
+          <div class="echarts">
+            <div class="nav flex flex-items-center justify-between">
+              <div>
+                <span class="ecarts_title">近一周收入支出趋势</span>
+                <span class="echarts_units">单位（个）</span>
+              </div>
+              <div class="flex flex-items-center justify-center">
+                <div
+                  class="actions"
+                  @click="changeActive_index(index)"
+                  :class="{ active: active_index === index }"
+                  v-for="(item, index) in actions"
+                  :key="index"
+                >
+                  {{ item.name }}
+                </div>
+              </div>
+            </div>
+            <div class="echartsbody">
+              <repairEcharts />
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div class="villageInfoBox">
+          <div class="iconbox">
+            <el-image :src="summicon"></el-image>
+          </div>
+          <div class="villageinfo">
+            <div class="villagename">北境碧桂园小区</div>
+            <div class="week">2025-08-20 星期三</div>
+          </div>
+        </div>
+        <div class="tabsbox">
+          <div class="topbox">
+            <div
+              :class="{
+                active: Sideactive === 1
+              }"
+              @click="handleSelect(1)"
+            >
+              <span>快捷入口</span>
+              <i></i>
+            </div>
+            <div
+              :class="{
+                active: Sideactive === 2
+              }"
+              @click="handleSelect(2)"
+            >
+              <span>创建办事记录</span>
+              <i class="righti"></i>
+            </div>
+          </div>
+          <div class="body">
+            <div class="quicly_box" v-if="Sideactive === 1">
+              <div class="quickly_item" v-for="(item, index) in quickBox" :key="index">
+                <div class="quickly_item_icon"></div>
+                <div class="quickly_item_content">{{ item.name }}</div>
+              </div>
+              <div class="quickly_item add">
+                <el-icon><Plus /></el-icon>
+                <span>添加</span>
+              </div>
+            </div>
+            <div v-else></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row class="mt-20px">
+      <el-col>
+        <div class="userBox">
+          <div class="title">住户查询</div>
+          <div class="searbox">
+            <div>精准查询</div>
+            <el-select v-model="value" placeholder="住户姓名" style="width: 240px">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <el-input placeholder="请输入">
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+            <el-button type="primary">查询 </el-button>
+            <el-button>重置</el-button>
+          </div>
+          <div class="tablebox">
+            <el-table :data="tableData" stripe style="width: 100%">
+              <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
+              <el-table-column prop="date" align="center" label="姓名" width="180" />
+              <el-table-column prop="date" align="center" label="类型" width="180" />
+              <el-table-column prop="date" align="center" label="状态" width="180" />
+              <el-table-column prop="date" align="center" label="证件号码" />
+              <el-table-column prop="date" align="center" label="手机号" />
+              <el-table-column prop="name" align="center" label="房间" />
+              <el-table-column prop="address" align="center" label="操作">
+                <template #default>
+                  <el-button type="primary" text> 审核</el-button>
+                  <el-button type="primary" text> 编辑</el-button>
+                  <el-button type="primary" 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"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script lang="ts" setup>
+import summicon from '@/assets/images/index/summer.png';
+import repairEcharts from './components/repairEcharts.vue';
+
+const list = ref([
+  {
+    name: '住户总数量',
+    value: 10000
+  },
+  {
+    name: '房屋总数量',
+    value: 458
+  },
+  {
+    name: '车位总数量',
+    value: 2539
+  },
+  {
+    name: '设备总数量',
+    value: 22
+  },
+  {
+    name: '物料总数量',
+    value: 458
+  },
+  {
+    name: '投诉总数量',
+    value: 458
+  }
+]);
+const active_index = ref(0);
+const actions = ref([
+  {
+    name: '全部'
+  },
+  {
+    name: '收入'
+  },
+  {
+    name: '支出'
+  }
+]);
+function changeActive_index(val: number) {
+  active_index.value = val;
+}
+// ! 侧边栏
+const Sideactive = ref(1);
+function handleSelect(val: number) {
+  Sideactive.value = val;
+  console.log(Sideactive.value);
+}
+
+// ! 快捷入口
+const quickBox = ref([
+  {
+    name: '新建用户',
+    url: '/house/resident'
+  },
+  {
+    name: '车位管理',
+    url: '/carArea/parking'
+  },
+  {
+    name: '新建月卡',
+    url: '/carArea/monthCard'
+  },
+  {
+    name: '新建报修',
+    url: '/repair/repairlist'
+  },
+  {
+    name: '访客记录',
+    url: '/repair/visitorList'
+  },
+  {
+    name: '账单管理',
+    url: '/repair/visitorList'
+  }
+]);
+
+const router = useRouter();
+function handleRouter(val: string) {
+  router.push({
+    path: val
+  });
+}
+// ! table
+const value = ref('');
+const loading = ref(true);
+
+const total = ref(100);
+const data = reactive({
+  queryParams: {
+    villageId: Number(localStorage.getItem('villageid')),
+    pageNum: 1,
+    pageSize: 10
+  }
+});
+const { queryParams } = toRefs(data);
+// 核心：计算连续序号
+const indexMethod = (index) => {
+  return (queryParams.value.pageNum - 1) * queryParams.value.pageSize + index + 1;
+};
+const options = [
+  {
+    value: 'Option1',
+    label: '住户姓名'
+  },
+  {
+    value: 'Option2',
+    label: '住户手机号'
+  },
+  {
+    value: 'Option3',
+    label: '住户身份证'
+  }
+];
+function getList() {}
+const tableData = ref([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+]);
+</script>
+<style scoped lang="scss">
+.workBenchBox {
+  padding: 20px;
+  background-color: #eaf2ff;
+  // 小区概况
+  .villageBox {
+    height: 198px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
+    border-radius: 16px 16px 16px 16px;
+    border: 2px solid #ffffff;
+    padding: 20px;
+    margin-bottom: 20px;
+    .title {
+      height: 25px;
+      font-weight: 500;
+      font-size: 20px;
+      color: #303133;
+      line-height: 25px;
+      margin-bottom: 20px;
+    }
+    .villageBody {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      .village_items {
+        margin-right: 20px;
+        min-width: 185px;
+        height: 109px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
+        box-shadow: 0px 4px 8px 0px rgba(0, 104, 255, 0.06);
+        border-radius: 8px 8px 8px 8px;
+        border: 1px solid #ffffff;
+        padding: 30px 20px;
+        display: flex;
+        align-items: center;
+        .icon {
+          width: 40px;
+          height: 46px;
+          background: #f4f0ff;
+          box-shadow: inset 0px 0px 20px 0px #ffffff;
+          border-radius: 10px 10px 10px 10px;
+          border: 1px solid #ffffff;
+          margin-right: 15px;
+        }
+        .infobox {
+          margin-right: 20px;
+          .infoTitle {
+            width: 70px;
+            height: 18px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #4e5969;
+            line-height: 18px;
+          }
+          .infoNum {
+            width: 87px;
+            height: 35px;
+            font-weight: 600;
+            font-size: 28px;
+            color: #303133;
+            line-height: 39px;
+          }
+        }
+      }
+    }
+  }
+
+  // echarts
+  .echartsbox {
+    .echarts {
+      margin-right: 20px;
+      flex: 1;
+      height: 425px;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
+      border: 2px solid #ffffff;
+      border-radius: 12px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      &:last-child {
+        margin-right: 0;
+      }
+      .nav {
+        .ecarts_title {
+          font-weight: 500;
+          font-size: 20px;
+          color: #303133;
+          line-height: 25px;
+        }
+        .echarts_units {
+          margin-left: 10px;
+          font-weight: 400;
+          font-size: 12px;
+          color: #98a4b2;
+          line-height: 15px;
+          text-align: left;
+        }
+        .echarts_all_baoxiu {
+          height: 18px;
+          font-weight: 400;
+          font-size: 14px;
+          color: #98a4b2;
+          line-height: 18px;
+          margin-right: 7px;
+        }
+        .echarts_all_arrow {
+          display: block;
+          width: 10px;
+          height: 10px;
+          border: 1px solid #ccc;
+          transform: rotateZ(45deg);
+          border-bottom-color: transparent;
+          border-left-color: transparent;
+        }
+
+        .actions {
+          width: 60px;
+          height: 22px;
+          border-radius: 4px 4px 4px 4px;
+          background-color: #f6f7fb;
+          color: #99a5b3;
+          text-align: center;
+          line-height: 22px;
+          font-size: 14px;
+          cursor: pointer;
+          margin-right: 10px;
+          &:hover {
+            color: #036aff;
+            background-color: #036cff25;
+          }
+        }
+        .actions.active {
+          color: white;
+          background-color: #036aff;
+        }
+      }
+      .echartsbody {
+        flex: 1;
+        margin-top: 20px;
+      }
+    }
+  }
+
+  // 小区
+  .villageInfoBox {
+    height: 127px;
+    margin-left: 20px;
+    display: flex;
+    align-items: center;
+    padding: 0 35px;
+    background: #036aff;
+    border-radius: 16px 16px 16px 16px;
+    margin-bottom: 20px;
+    .iconbox {
+      width: 70px;
+      height: 70px;
+    }
+    .villageinfo {
+      margin-left: 30px;
+      .villagename {
+        height: 30px;
+        font-weight: 500;
+        font-size: 24px;
+        color: #ffffff;
+        line-height: 30px;
+      }
+      .week {
+        margin-top: 5px;
+        height: 23px;
+        font-weight: 400;
+        font-size: 18px;
+        color: #ffffff;
+        line-height: 23px;
+      }
+    }
+  }
+
+  // tabs
+  .tabsbox {
+    margin-left: 20px;
+    height: 497px;
+    border: 2px solid;
+    background: linear-gradient(180deg, #ebf4ff 0%, rgba(247, 252, 255, 0.5) 21.14%);
+    border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
+    .topbox {
+      display: flex;
+      align-items: center;
+      div {
+        flex: 1;
+        border-bottom: 2px solid #fff;
+        border-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)) 100% 1;
+        text-align: center;
+        padding: 14px;
+        cursor: pointer;
+        color: #98a4b2;
+        &.active {
+          border-bottom-color: transparent;
+          border-image: none;
+          position: relative;
+          color: #000;
+
+          $width: 8px;
+          $greePer: 60%;
+          & i {
+            display: block;
+            position: absolute;
+            right: 10px;
+            top: 0;
+            width: $width / 2;
+            height: 100%;
+            transform: skew(30deg);
+            background: white;
+            transition: all 0.3s;
+            z-index: 10;
+            &::after {
+              content: '';
+              display: block;
+              width: $width;
+              height: $width;
+              background: radial-gradient(circle at bottom left, #ecf4fe $greePer, #ffffff (1 - $greePer));
+              position: absolute;
+              left: -$width;
+              top: 0;
+            }
+            &::before {
+              content: '';
+              display: block;
+              width: $width;
+              height: $width;
+              background: radial-gradient(circle at top right, #ecf4fe $greePer, #ffffff (1 - $greePer));
+              position: absolute;
+              right: -$width;
+              bottom: 0;
+            }
+          }
+          & i.righti {
+            display: block;
+            position: absolute;
+            left: 10px;
+            top: 0;
+            width: $width / 2;
+            height: 100%;
+            transform: skew(-30deg);
+            background: white;
+            z-index: 10;
+            &::after {
+              content: '';
+              display: block;
+              width: $width;
+              height: $width;
+              background: radial-gradient(circle at bottom right, #ecf4fe $greePer, #ffffff (1 - $greePer));
+              position: absolute;
+              right: -$width;
+              left: initial;
+              top: 0;
+            }
+            &::before {
+              content: '';
+              display: block;
+              width: $width;
+              height: $width;
+              background: radial-gradient(circle at top left, #ecf4fe $greePer, #ffffff (1 - $greePer));
+              position: absolute;
+              left: -$width;
+              right: none;
+              bottom: 0;
+            }
+          }
+
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            width: 24px;
+            height: 4px;
+            background: #036aff;
+            border-radius: 3px 3px 3px 3px;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+    .body {
+      font-size: 16px;
+      color: #222222;
+      padding: 30px;
+      .quicly_box {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        .quickly_item {
+          width: 125px;
+          margin-bottom: 20px;
+          height: 56px;
+          background: #ffffff;
+          border-radius: 12px 12px 12px 12px;
+          border: 1px solid #c0daff;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .quickly_item_content {
+            margin-left: 5px;
+            width: 64px;
+            height: 23px;
+            font-weight: 500;
+            font-size: 16px;
+            color: #222222;
+            line-height: 23px;
+          }
+
+          &.add {
+            text-align: center;
+            color: #036aff;
+            vertical-align: baseline;
+            span {
+              margin-left: 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 住户查询
+  .userBox {
+    border-radius: 10px;
+    padding: 20px;
+    height: 550px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
+    border: 2px solid #ffffff;
+    display: flex;
+    flex-direction: column;
+    .title {
+      margin-bottom: 15px;
+    }
+    .searbox {
+      height: 35px;
+      line-height: 35px;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 30px;
+      div {
+        width: 70px;
+        margin-right: 20px;
+      }
+      .el-select {
+        width: 160px;
+        margin-right: 10px;
+      }
+      .el-input {
+        flex: 0.3;
+      }
+      .el-button {
+        color: #0083ff;
+        border-color: #0083ff;
+        width: 60px;
+        height: 25px;
+        border-radius: 5px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 18px;
+        text-align: left;
+
+        &.el-button--primary {
+          color: #fff;
+        }
+      }
+    }
+    .tablebox {
+      flex: 1;
+      .el-table {
+        height: calc(100% - 60px);
+      }
+    }
+  }
+}
+</style>