From 124affcb25e5e4859aebd801016ac76727a376c8 Mon Sep 17 00:00:00 2001
From: Zy <1448159279@qq.com>
Date: Mon, 27 Apr 2026 15:45:38 +0800
Subject: [PATCH] =?UTF-8?q?=20=E4=BA=BA=E5=91=98=E7=BC=B4=E8=B4=B9?=
 =?UTF-8?q?=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/statistics/Payment/index.vue | 511 +++++++++++++++++-
 .../system/statistics/Personnel/index.vue     | 473 +++++++++++++++-
 2 files changed, 976 insertions(+), 8 deletions(-)

diff --git a/src/views/system/statistics/Payment/index.vue b/src/views/system/statistics/Payment/index.vue
index ae6056c..37f1499 100644
--- a/src/views/system/statistics/Payment/index.vue
+++ b/src/views/system/statistics/Payment/index.vue
@@ -1,12 +1,515 @@
 <template>
-  <div class="p-2 h-full flex flex-col">
-    <Pageheader></Pageheader>
-    <div class="flex-1 color-gray flex h-full font-size-6 flex-center">系统还在维护中，敬请期待...</div>
+  <div class="personnel p-2 h-full flex flex-col">
+    <div class="flex flex-items-center searchBox">
+      <div class="searchLabel">选择日期</div>
+      <el-date-picker
+        v-model="date"
+        type="date"
+        placeholder="选择日期"
+        value-format="yyyy-MM-dd"
+        style="width: 400px; margin-right: 10px"
+      ></el-date-picker>
+      <el-button type="primary">查询</el-button>
+      <el-button>重置</el-button>
+    </div>
+
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <div class="cardbox">
+          <div>收入来源</div>
+          <div class="cardbody" style="height: 200px">
+            <div class="flex flex-col flex-items-center flex-1">
+              <Echarts :options="options"></Echarts>
+              <div>停车费</div>
+            </div>
+            <div class="flex flex-col flex-items-center flex-1">
+              <Echarts :options="options"></Echarts>
+              <div>物业费</div>
+            </div>
+            <div class="flex flex-col flex-items-center flex-1">
+              <Echarts :options="options"></Echarts>
+              <div>商铺租金</div>
+            </div>
+            <div class="flex flex-col flex-items-center flex-1">
+              <Echarts :options="options"></Echarts>
+              <div>水电费</div>
+            </div>
+            <div class="flex flex-col flex-items-center flex-1">
+              <Echarts :options="options"></Echarts>
+              <div>维修费</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="cardbox">
+          <div>缴费方式</div>
+          <div class="cardbody w-full" style="height: 150px">
+            <Echarts :options="options2"></Echarts>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="" style="height: 20px"></div>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <div class="cardbox w-full" style="height: 400px">
+          <Echarts :options="options3"></Echarts>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="cardbox w-full" style="height: 400px">
+          <div class="" style="height: 50px; margin-bottom: 20px">缴费方式</div>
+          <div flex flex-items-center justify-center>
+            <ul class="legendbox">
+              <li>小程序</li>
+              <li>物业缴费</li>
+              <li>手机APP</li>
+            </ul>
+            <ul class="circlebox">
+              <li>70%</li>
+              <li>20%</li>
+              <li>10%</li>
+            </ul>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="" style="height: 20px"></div>
+    <el-row>
+      <el-col :span="24">
+        <div class="cardbox w-full" style="height: 450px">
+          <Echarts :options="flowLineOption"></Echarts>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import Echarts from '@/components/Echarts/index.vue';
+import { EChartsOption } from 'echarts';
+import { getLast7Days, getLastNDays } from '@/utils/time';
+
+/** 入住情况 */
+const options = shallowRef<EChartsOption>({
+  tooltip: { show: false },
+  series: [
+    // 1. 底层细圆环（灰色底色）
+    {
+      type: 'pie',
+      radius: ['60%', '80%'], // 细一点
+      clockwise: true,
+      data: [100],
+      itemStyle: { color: '#ebeef5' },
+      emphasis: { disabled: true },
+      label: { show: false }
+    },
+    // 2. 上层粗圆环（进度条）
+    {
+      type: 'pie',
+      radius: ['60%', '85%'], // 粗一点
+      clockwise: true,
+      itemStyle: {
+        color: '#409eff',
+        borderRadius: 10
+      },
+      emphasis: { disabled: true },
+      label: {
+        show: true,
+        position: 'center',
+        fontSize: 20,
+        fontWeight: 'bold',
+        formatter: '85%'
+      },
+      data: [{ value: 85 }, { value: 15, itemStyle: { color: 'transparent' } }]
+    }
+  ]
+});
+
+/** 入住类型 */
+const options1 = shallowRef<EChartsOption>({
+  legend: {
+    top: 'center',
+    left: '0',
+    orient: 'vertical',
+    itemGap: 50
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['50%', '100%'],
+      avoidLabelOverlap: false,
+      left: '50%',
+      label: {
+        show: false,
+        position: 'center'
+      },
+      tooltip: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: 20,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 25, name: '业主', itemStyle: { color: '#0a74fe' } },
+        { value: 25, name: '租户', itemStyle: { color: '#fe3d4e' } },
+        { value: 25, name: '亲属', itemStyle: { color: '#00cf7f' } },
+        { value: 25, name: '其他', itemStyle: { color: '#f48e3b' } }
+      ]
+    }
+  ]
+});
+
+/** 缴费方式 */
+const options2 = shallowRef<EChartsOption>({
+  legend: {
+    top: 'center',
+    left: '0',
+    orient: 'vertical',
+    itemGap: 50
+  },
+  clockwise: true,
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      startAngle: 280,
+      radius: ['50%', '100%'],
+      avoidLabelOverlap: false,
+      left: '50%',
+      label: {
+        show: false,
+        position: 'center'
+      },
+      tooltip: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: 20,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 50, name: '支付宝', itemStyle: { color: '#0a74fe' } },
+        { value: 30, name: '微信', itemStyle: { color: '#f74043' } },
+        { value: 20, name: '线下', itemStyle: { color: '#fcd152' } }
+      ]
+    }
+  ]
+});
+
+// ! 年龄分布 -------------------------------------------------------------------------------------
+const agesX = ['6岁以下', '6-11岁', '11-14岁', '15-24岁', '25-30岁', '31-40岁', '41-50岁', '51-61岁', '61-65岁', '65-70岁', '70岁以上'];
+const agesData = [520, 680, 460, 750, 1350, 1860, 1420, 960, 630, 380, 210];
+// 🔥 关键：灰色背景数据 = 最大值 - 真实数据（互补100%）
+const maxValue = 2000; // 设定总高度（可自行调整）
+const middleHeight = 20;
+const barwidth = '10%';
+const bgData = agesData.map((item) => maxValue - item - middleHeight);
+const bgData2 = agesData.map((item) => middleHeight);
+/** 年龄分布 */
+const options3 = shallowRef<EChartsOption>({
+  title: {
+    text: '住户年龄分布',
+    left: '0',
+    top: '0',
+    textStyle: { fontSize: 16, fontWeight: 'bold' }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    top: '12%',
+    bottom: '8%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'item',
+    confine: true,
+    axisPointer: { type: 'shadow' }
+  },
+  // 鼠标悬浮高亮当前，其他隐藏
+
+  xAxis: { type: 'category', data: agesX, axisLabel: { interval: 0 } },
+  yAxis: {
+    type: 'value',
+    splitLine: { show: true, lineStyle: { color: '#eee' } }
+  },
+  series: [
+    // 蓝色真实数据
+    {
+      type: 'bar',
+      barWidth: barwidth,
+      data: agesData,
+      itemStyle: {
+        color: '#409eff',
+        borderRadius: [4, 4, 0, 0]
+      },
+      stack: 'total'
+    },
+    {
+      type: 'bar',
+      barWidth: barwidth,
+      data: bgData2,
+      tooltip: { show: false }, // 关键：不显示提示
+      itemStyle: {
+        color: '#fff'
+      },
+      stack: 'total'
+    },
+    {
+      type: 'bar',
+      barWidth: barwidth,
+      data: bgData,
+      tooltip: { show: false }, // 关键：不显示提示
+      itemStyle: {
+        color: 'rgba(180, 180, 180, 0.2)'
+      },
+      stack: 'total'
+    }
+  ]
+});
+// ! 年龄分布 -------------------------------------------------------------------------------------
+
+// ! 职业分布比例 -------------------------------------------------------------------------------------
+
+// ! 职业分布比例 -------------------------------------------------------------------------------------
+
+// ! 人员流动情况 -------------------------------------------------------------------------------------
+// 近10天日期
+const dayX = getLast7Days(10);
+
+// 小区真实规模：人员流入 / 流出 数据
+const inData = [97, 145, 63, 112, 88, 156, 74, 131, 102, 59];
+const outData = [121, 85, 142, 71, 135, 93, 116, 66, 148, 104];
+
+/** 进十日缴费数量情况 - 平滑折线图 */
+const flowLineOption = shallowRef<EChartsOption>({
+  title: {
+    text: '进十日缴费数量趋势',
+    left: 0,
+    top: 0,
+    textStyle: { fontSize: 14, fontWeight: 'normal' }
+  },
+  tooltip: {
+    trigger: 'axis',
+    confine: true
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    top: '12%',
+    bottom: '8%',
+    containLabel: true
+  },
+  legend: {
+    data: ['已缴费', '未缴费'],
+    right: 10,
+    top: 0
+  },
+  xAxis: {
+    type: 'category',
+    data: dayX,
+    boundaryGap: false,
+    axisLine: { lineStyle: { color: '#eee' } }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: true,
+      lineStyle: { color: '#eee' }
+    }
+  },
+  series: [
+    {
+      name: '已缴费',
+      type: 'line',
+      smooth: true, // 平滑折线 核心
+      data: inData,
+      symbol: 'circle',
+      symbolSize: 6,
+      itemStyle: { color: '#f94144' },
+      lineStyle: { width: 4 },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: '#fbd7d9' },
+            { offset: 1, color: '#fbd7d9' }
+          ]
+        }
+      }
+    },
+    {
+      name: '未缴费',
+      type: 'line',
+      smooth: true, // 平滑折线 核心
+      data: outData,
+      symbol: 'circle',
+      symbolSize: 6,
+      itemStyle: { color: '#f9c74f' },
+      lineStyle: { width: 4 },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: '#fcf2dc' },
+            { offset: 1, color: '#fcf2dc' }
+          ]
+        }
+      }
+    }
+  ]
+});
+// ! 人员流动情况 -------------------------------------------------------------------------------------
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.personnel {
+  background: linear-gradient(180deg, #deedff 0%, #f8f9fe 50%);
+  .el-button {
+    width: 80px;
+    height: 32px;
+    border-radius: 4px;
+  }
+  .searchBox {
+    margin-bottom: 20px;
+  }
+  .searchLabel {
+    width: 100px;
+    font-size: 0.8rem;
+  }
+  // 入住清空
+  .cardbox {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
+    border-radius: 16px 16px 16px 16px;
+    border: 2px solid #ffffff;
+    font-size: 20px;
+    padding: 20px;
+    min-height: 275px;
+    .cardbody {
+      padding: 0 30px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .card_leftbox {
+        text-align: center;
+        .labelbox {
+          font-size: 16px;
+        }
+        .valuebox {
+          font-weight: 600;
+          font-size: 36px;
+          color: #222222;
+        }
+      }
+      .echartsbox {
+        width: 400px;
+      }
+    }
+  }
+
+  .legendbox {
+    font-size: 0.8rem;
+    li {
+      margin-bottom: 20px;
+      position: relative;
+      width: 100px;
+      height: 50px;
+      line-height: 50px;
+      text-align: left;
+      padding-left: 30px;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        display: block;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: #c893fd;
+      }
+
+      &:first-of-type {
+        &::after {
+          background: #4a3aff;
+        }
+      }
+      &:last-of-type {
+        &::after {
+          background: #1e1b39;
+        }
+      }
+    }
+  }
+  .circlebox {
+    margin-left: 60px;
+    position: relative;
+    width: 300px;
+    height: 200px;
+    transform: translateY(-40px);
+    li {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 150px;
+      height: 150px;
+      border-radius: 50%;
+      background-color: #c893fd;
+      border: 3px solid white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 1.4rem;
+      font-weight: 450;
+      z-index: 10;
+      &:nth-child(1) {
+        width: 200px;
+        height: 200px;
+        right: inherit;
+        left: 0px;
+        font-size: 2rem;
+        top: 30px;
+        z-index: 9;
+        background-color: #4a3aff;
+      }
+      &:nth-child(3) {
+        width: 100px;
+        height: 100px;
+        left: inherit;
+        top: inherit;
+        right: 50px;
+        font-size: 1.1rem;
+        bottom: -20px;
+        z-index: 11;
+        background-color: #1e1b39;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/system/statistics/Personnel/index.vue b/src/views/system/statistics/Personnel/index.vue
index ae6056c..a3ba620 100644
--- a/src/views/system/statistics/Personnel/index.vue
+++ b/src/views/system/statistics/Personnel/index.vue
@@ -1,12 +1,477 @@
 <template>
-  <div class="p-2 h-full flex flex-col">
-    <Pageheader></Pageheader>
-    <div class="flex-1 color-gray flex h-full font-size-6 flex-center">系统还在维护中，敬请期待...</div>
+  <div class="personnel p-2 h-full flex flex-col">
+    <div class="flex flex-items-center searchBox">
+      <div class="searchLabel">选择日期</div>
+      <el-date-picker
+        v-model="date"
+        type="date"
+        placeholder="选择日期"
+        value-format="yyyy-MM-dd"
+        style="width: 400px; margin-right: 10px"
+      ></el-date-picker>
+      <el-button type="primary">查询</el-button>
+      <el-button>重置</el-button>
+    </div>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <div class="cardbox">
+          <div>入住情况</div>
+          <div class="cardbody" style="height: 200px">
+            <div class="card_leftbox">
+              <div class="valuebox">4889</div>
+              <div class="labelbox">入住人数</div>
+            </div>
+            <div class="echartsbox h-full">
+              <Echarts :options="options"></Echarts>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="cardbox">
+          <div>住户分析情况</div>
+          <div class="cardbody w-full" style="height: 150px">
+            <Echarts :options="options1"></Echarts>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="cardbox">
+          <div>男女比例</div>
+          <div class="cardbody w-full" style="height: 150px">
+            <Echarts :options="options2"></Echarts>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="" style="height: 20px"></div>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <div class="cardbox w-full" style="height: 400px">
+          <Echarts :options="options3"></Echarts>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="cardbox w-full" style="height: 400px">
+          <Echarts :options="options4"></Echarts>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="" style="height: 20px"></div>
+    <el-row>
+      <el-col :span="24">
+        <div class="cardbox w-full" style="height: 450px">
+          <Echarts :options="flowLineOption"></Echarts>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import Echarts from '@/components/Echarts/index.vue';
+import { EChartsOption } from 'echarts';
+import { getLast7Days, getLastNDays } from '@/utils/time';
+
+/** 入住情况 */
+const options = shallowRef<EChartsOption>({
+  tooltip: { show: false },
+  series: [
+    // 1. 底层细圆环（灰色底色）
+    {
+      type: 'pie',
+      radius: ['68%', '90%'], // 细一点
+      clockwise: true,
+      data: [100],
+      itemStyle: { color: '#ebeef5' },
+      emphasis: { disabled: true },
+      label: { show: false }
+    },
+    // 2. 上层粗圆环（进度条）
+    {
+      type: 'pie',
+      radius: ['65%', '98%'], // 粗一点
+      clockwise: true,
+      itemStyle: {
+        color: '#409eff',
+        borderRadius: 10
+      },
+      emphasis: { disabled: true },
+      label: {
+        show: true,
+        position: 'center',
+        fontSize: 20,
+        fontWeight: 'bold',
+        formatter: '  85% \n\n 入住率'
+      },
+      data: [{ value: 85 }, { value: 15, itemStyle: { color: 'transparent' } }]
+    }
+  ]
+});
+function getRingOption(percent) {
+  return {
+    tooltip: { show: false },
+    series: [
+      {
+        type: 'pie',
+        radius: ['78%', '88%'],
+        data: [100],
+        itemStyle: { color: '#ebeef5' },
+        emphasis: { disabled: true },
+        label: { show: false }
+      },
+      {
+        type: 'pie',
+        radius: ['75%', '90%'],
+        itemStyle: { color: '#409eff', borderRadius: 10 },
+        emphasis: { disabled: true },
+        label: {
+          show: true,
+          position: 'center',
+          fontSize: 18,
+          fontWeight: 'bold',
+          formatter: percent + '%'
+        },
+        data: [{ value: percent }, { value: 100 - percent, itemStyle: { color: 'transparent' } }]
+      }
+    ]
+  };
+}
+
+/** 入住类型 */
+const options1 = shallowRef<EChartsOption>({
+  legend: {
+    top: 'center',
+    left: '0',
+    orient: 'vertical',
+    itemGap: 50
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['50%', '100%'],
+      avoidLabelOverlap: false,
+      left: '50%',
+      label: {
+        show: false,
+        position: 'center'
+      },
+      tooltip: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: 20,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 25, name: '业主', itemStyle: { color: '#0a74fe' } },
+        { value: 25, name: '租户', itemStyle: { color: '#fe3d4e' } },
+        { value: 25, name: '亲属', itemStyle: { color: '#00cf7f' } },
+        { value: 25, name: '其他', itemStyle: { color: '#f48e3b' } }
+      ]
+    }
+  ]
+});
+
+/** 男女比例 */
+const options2 = shallowRef<EChartsOption>({
+  legend: {
+    top: 'center',
+    left: '0',
+    orient: 'vertical',
+    itemGap: 50
+  },
+  clockwise: true,
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      startAngle: 280,
+      radius: ['50%', '100%'],
+      avoidLabelOverlap: false,
+      left: '50%',
+      label: {
+        show: false,
+        position: 'center'
+      },
+      tooltip: {
+        show: false
+      },
+      emphasis: {
+        label: {
+          show: false,
+          fontSize: 20,
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 60, name: '男', itemStyle: { color: '#0a74fe' } },
+        { value: 40, name: '女', itemStyle: { color: '#f74043' } }
+      ]
+    }
+  ]
+});
+
+// ! 年龄分布 -------------------------------------------------------------------------------------
+const agesX = ['6岁以下', '6-11岁', '11-14岁', '15-24岁', '25-30岁', '31-40岁', '41-50岁', '51-61岁', '61-65岁', '65-70岁', '70岁以上'];
+const agesData = [520, 680, 460, 750, 1350, 1860, 1420, 960, 630, 380, 210];
+// 🔥 关键：灰色背景数据 = 最大值 - 真实数据（互补100%）
+const maxValue = 2000; // 设定总高度（可自行调整）
+const middleHeight = 20;
+const barwidth = '10%';
+const bgData = agesData.map((item) => maxValue - item - middleHeight);
+const bgData2 = agesData.map((item) => middleHeight);
+/** 年龄分布 */
+const options3 = shallowRef<EChartsOption>({
+  title: {
+    text: '住户年龄分布',
+    left: '0',
+    top: '0',
+    textStyle: { fontSize: 16, fontWeight: 'bold' }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    top: '12%',
+    bottom: '8%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'item',
+    confine: true,
+    axisPointer: { type: 'shadow' }
+  },
+  // 鼠标悬浮高亮当前，其他隐藏
+
+  xAxis: { type: 'category', data: agesX, axisLabel: { interval: 0 } },
+  yAxis: {
+    type: 'value',
+    splitLine: { show: true, lineStyle: { color: '#eee' } }
+  },
+  series: [
+    // 蓝色真实数据
+    {
+      type: 'bar',
+      barWidth: barwidth,
+      data: agesData,
+      itemStyle: {
+        color: '#409eff',
+        borderRadius: [4, 4, 0, 0]
+      },
+      stack: 'total'
+    },
+    {
+      type: 'bar',
+      barWidth: barwidth,
+      data: bgData2,
+      tooltip: { show: false }, // 关键：不显示提示
+      itemStyle: {
+        color: '#fff'
+      },
+      stack: 'total'
+    },
+    {
+      type: 'bar',
+      barWidth: barwidth,
+      data: bgData,
+      tooltip: { show: false }, // 关键：不显示提示
+      itemStyle: {
+        color: 'rgba(180, 180, 180, 0.2)'
+      },
+      stack: 'total'
+    }
+  ]
+});
+// ! 年龄分布 -------------------------------------------------------------------------------------
+// ! 职业分布比例 -------------------------------------------------------------------------------------
+// 真实小区职业分布数据（上班族最多，依次递减）
+const realData = [120, 260, 580, 620, 1480];
+const options4 = shallowRef<EChartsOption>({
+  title: {
+    text: '职业分布比例',
+    left: '0',
+    top: '0',
+    textStyle: { fontSize: 16, fontWeight: 'bold' }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  xAxis: {
+    type: 'value',
+    boundaryGap: [0, 0.01]
+  },
+  yAxis: {
+    type: 'category',
+    data: ['其他', '自由职业', '学生', '全职妈妈', '上班族']
+  },
+  series: [
+    {
+      name: '2011',
+      type: 'bar',
+      itemStyle: {
+        color: '#fe3d4e'
+      },
+      data: realData
+    }
+  ]
+});
+// ! 职业分布比例 -------------------------------------------------------------------------------------
+
+// ! 人员流动情况 -------------------------------------------------------------------------------------
+// 近10天日期
+const dayX = getLast7Days(10);
+
+// 小区真实规模：人员流入 / 流出 数据
+// 【全新打乱随机数据】小区人员流入 / 流出
+const inData = [132, 76, 158, 91, 125, 68, 143, 84, 107, 162];
+const outData = [95, 136, 72, 118, 83, 149, 65, 124, 101, 77];
+
+/** 近十天人员流入流出 - 平滑折线图 */
+const flowLineOption = shallowRef<EChartsOption>({
+  title: {
+    text: '近十日人员流动趋势',
+    left: 0,
+    top: 0,
+    textStyle: { fontSize: 14, fontWeight: 'normal' }
+  },
+  tooltip: {
+    trigger: 'axis',
+    confine: true
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    top: '12%',
+    bottom: '8%',
+    containLabel: true
+  },
+  legend: {
+    data: ['人员流入', '人员流出'],
+    right: 10,
+    top: 0
+  },
+  xAxis: {
+    type: 'category',
+    data: dayX,
+    boundaryGap: false,
+    axisLine: { lineStyle: { color: '#eee' } }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: true,
+      lineStyle: { color: '#eee' }
+    }
+  },
+  series: [
+    {
+      name: '人员流入',
+      type: 'line',
+      smooth: true, // 平滑折线 核心
+      data: inData,
+      symbol: 'circle',
+      symbolSize: 6,
+      itemStyle: { color: '#f94144' },
+      lineStyle: { width: 4 },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: '#fbd7d9' },
+            { offset: 1, color: '#fbd7d9' }
+          ]
+        }
+      }
+    },
+    {
+      name: '人员流出',
+      type: 'line',
+      smooth: true, // 平滑折线 核心
+      data: outData,
+      symbol: 'circle',
+      symbolSize: 6,
+      itemStyle: { color: '#f9c74f' },
+      lineStyle: { width: 4 },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: '#fcf2dc' },
+            { offset: 1, color: '#fcf2dc' }
+          ]
+        }
+      }
+    }
+  ]
+});
+// ! 人员流动情况 -------------------------------------------------------------------------------------
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.personnel {
+  background: linear-gradient(180deg, #deedff 0%, #f8f9fe 50%);
+  .el-button {
+    width: 80px;
+    height: 32px;
+    border-radius: 4px;
+  }
+  .searchBox {
+    margin-bottom: 20px;
+  }
+  .searchLabel {
+    width: 100px;
+    font-size: 0.8rem;
+  }
+  // 入住清空
+  .cardbox {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 70%);
+    border-radius: 16px 16px 16px 16px;
+    border: 2px solid #ffffff;
+    font-size: 20px;
+    padding: 20px;
+    min-height: 275px;
+    .cardbody {
+      padding: 0 30px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .card_leftbox {
+        text-align: center;
+        .labelbox {
+          font-size: 16px;
+        }
+        .valuebox {
+          font-weight: 600;
+          font-size: 36px;
+          color: #222222;
+        }
+      }
+      .echartsbox {
+        width: 400px;
+      }
+    }
+  }
+}
+</style>