初始化

packages/meta/AppResident/AppResident.vue

@@ -0,0 +1,193 @@
+<template>
+  <section class="AppResident">
+    <ai-list v-if="!showDetail" isTabs>
+      <ai-title slot="title" title="居民档案" :instance="instance" :hideLevel="hideLevel-1" isShowArea
+                v-model="areaId"/>
+      <template #tabs>
+        <el-tabs v-model="activeName">
+          <el-tab-pane v-for="op in tabs" :key="op.value" :name="op.value" :label="op.label">
+            <component v-if="op.value==activeName" :is="op.comp" :areaId="areaId" :active="activeName"/>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+    </ai-list>
+    <component v-else :is="detailComponent" :instance="instance" :dict="dict" :permissions="permissions"/>
+  </section>
+</template>
+<script>
+import {mapState} from "vuex";
+import localResident from "./localResident";
+import ListTpl from "./listTpl";
+import MobileResident from "./mobileResident";
+import ResidentSta from "./residentSta";
+
+export default {
+  name: "AppResident",
+  label: "居民档案",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
+  provide() {
+    return {
+      resident: this
+    }
+  },
+  components: {ResidentSta, MobileResident, ListTpl, localResident},
+  computed: {
+    ...mapState(["user"]),
+    tabs() {
+      let details = {
+        "本地居民": localResident,
+        "流动人员": MobileResident,
+      }
+      return [
+        ...this.dict.getDict('residentType').map(e => ({
+          label: e.dictName,
+          value: e.dictValue,
+          comp: ListTpl,
+          detail: details[e.dictName]
+        })),
+        {label: "居民统计", value: "3", comp: ResidentSta},
+      ]
+    },
+    hideLevel() {
+      return this.user.info.areaList?.length || 0
+    },
+    showDetail() {
+      this.activeName = this.activeName || this.$route.query?.type || 0
+      return !!this.$route.query?.type || !!this.$route.query?.id
+    },
+    detailComponent() {
+      return this.tabs.find(e => e.value == this.activeName)?.detail || ""
+    }
+  },
+  data() {
+    return {
+      areaId: '',
+      activeName: "0",
+    }
+  },
+  created() {
+    this.activeName = this.$route.query?.type
+    this.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
+    this.dict.load('residentType', "sex", "faithType", "fileStatus",
+        "legality",
+        "education",
+        "maritalStatus",
+        "politicsStatus",
+        "householdName",
+        "nation",
+        "liveReason",
+        "certificateType",
+        "job",
+        "militaryStatus",
+        "householdRelation",
+        "logoutReason",
+        "nation",
+        "registerStatus",
+        "residentTipType",
+        "liveCategory",
+        "livePeriod",
+        "language",
+        "nationality");
+  },
+}
+</script>
+<style lang="scss" scoped>
+.AppResident {
+  width: 100%;
+  height: 100%;
+  background: rgba(243, 246, 249, 1);
+
+  .iconfont {
+    cursor: pointer;
+  }
+
+  .tab-content-box {
+    padding: 16px 0;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #f3f6f9;
+    overflow-y: auto;
+  }
+
+  .list {
+    box-sizing: border-box;
+    background-color: #fff;
+    border-radius: 4px;
+    border: solid 1px #d8e0e8;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .searchBar {
+      padding: 8px 0;
+
+      .el-col {
+        margin-bottom: 8px;
+
+        span {
+          display: inline-block;
+          width: 100px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          font-size: 14px;
+          background-color: #f5f5f5;
+          border-radius: 2px;
+          border: solid 1px #d0d4dc;
+          border-right: none;
+          margin: 0;
+        }
+      }
+    }
+
+    .addClass {
+      height: 64px;
+    }
+  }
+
+  .dataStatistic {
+    width: 100%;
+    margin-top: 16px;
+    padding: 0 16px 16px 16px;
+    box-sizing: border-box;
+
+    .above {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .data-item {
+        width: 32%;
+        height: 380px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        padding: 16px;
+        box-sizing: border-box;
+        position: relative;
+
+        p {
+          position: absolute;
+          right: 16px;
+          top: 16px;
+          font-size: 14px;
+          font-weight: bold;
+
+          span:nth-of-type(1) {
+            color: #999999;
+          }
+
+          span:nth-of-type(2) {
+            color: #333333;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

packages/meta/AppResident/listTpl.vue

@@ -0,0 +1,350 @@
+<template>
+  <section class="listTpl">
+    <ai-list isTabs>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <ai-select placeholder="档案状态" v-model="search.fileStatus"
+                       :selectList="resident.dict.getDict('fileStatus')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="性别" v-model="search.sex"
+                       :selectList="resident.dict.getDict('sex')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="文化程度" v-model="search.education"
+                       :selectList="resident.dict.getDict('education')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="婚姻状况" v-model="search.maritalStatus"
+                       :selectList="resident.dict.getDict('maritalStatus')"
+                       @change="page.current=1,refreshTable()"/>
+            <ai-select placeholder="民族" v-model="search.nation"
+                       :selectList="resident.dict.getDict('nation')"
+                       @change="page.current=1,refreshTable()"/>
+            <el-date-picker
+                value-format="yyyy-MM-dd HH:mm:ss"
+                v-model="search.birthStart"
+                style="width:250px;border-radius:0;"
+                type="date"
+                size="small"
+                unlink-panels
+                placeholder="选择出生开始日期"
+                @change="page.current=1,refreshTable()"
+            />
+            <el-date-picker
+                value-format="yyyy-MM-dd HH:mm:ss"
+                v-model="search.birthEnd"
+                style="width:250px;border-radius:0;"
+                type="date"
+                size="small"
+                placeholder="选择出生结束日期"
+                unlink-panels
+                @change="page.current=1,refreshTable()"
+            />
+            <el-select
+                v-model="search.politicsStatus"
+                placeholder="政治面貌"
+                size="small"
+                @change="page.current=1,refreshTable()"
+                clearable
+            >
+              <el-option
+                  v-for="(item,i) in resident.dict.getDict('politicsStatus')"
+                  :key="i"
+                  :label="item.dictName"
+                  :value="item.dictValue"
+              ></el-option>
+            </el-select>
+            <el-select
+                v-model="search.householdName"
+                placeholder="是否户主"
+                size="small"
+                @change="page.current=1,refreshTable()"
+                clearable
+            >
+              <el-option
+                  v-for="(item,i) in resident.dict.getDict('householdName')"
+                  :key="i"
+                  :label="item.dictName"
+                  :value="item.dictValue"
+              ></el-option>
+            </el-select>
+            <el-select
+                v-model="search.faithType"
+                placeholder="宗教信仰"
+                @change="page.current=1,refreshTable()"
+                size="small"
+                clearable
+            >
+              <el-option
+                  v-for="(item,i) in resident.dict.getDict('faithType')"
+                  :key="i"
+                  :label="item.dictName"
+                  :value="item.dictValue"
+              ></el-option>
+            </el-select>
+          </template>
+          <template #right>
+            <el-input
+                size="small"
+                v-model="search.con"
+                placeholder="姓名/身份证/联系方式"
+                @keyup.enter.native="search.current = 1, refreshTable()"
+                @clear="search.current = 1, refreshTable()"
+                clearable
+                suffix-icon="iconfont iconSearch"/>
+          </template>
+        </ai-search-bar>
+        <ai-search-bar>
+          <template #left>
+            <el-button
+                size="small"
+                type="primary"
+                icon="iconfont iconAdd"
+                @click="gotoAdd()"
+                v-if="$permissions('app_appresident_edit')">
+              添加
+            </el-button>
+            <el-button
+                size="small"
+                icon="iconfont iconDelete"
+                :disabled="multipleSelection.length<=0"
+                @click="beforeDelete()"
+                v-if="$permissions('app_appresident_del')">
+              删除
+            </el-button>
+          </template>
+          <template #right>
+            <ai-import :instance="resident.instance" :dict="resident.dict" type="appresident" name="居民档案"
+                       :importParams="{residentType: active}" @success="refreshTable()">
+              <el-button icon="iconfont iconImport">导入</el-button>
+            </ai-import>
+            <ai-download :instance="resident.instance" :params="params" url="/app/appresident/export"
+                         fileName="居民档案"/>
+          </template>
+        </ai-search-bar>
+
+        <ai-table :tableData="tableData" :col-configs="colConfigs" :dict="resident.dict"
+                  :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                  @getList="refreshTable"
+                  @selection-change="handleSelectionChange">
+          <el-table-column slot="idNumber" label="身份证号" show-overflow-tooltip align="center">
+            <template slot-scope="{row}">
+              <ai-id mode="show" v-model="row.idNumber" :showEyes="false"/>
+            </template>
+          </el-table-column>
+          <el-table-column slot="fileStatus" label="档案状态" show-overflow-tooltip align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.fileStatus==0" style="color:rgba(46,162,34,1);">正常</span>
+              <span v-if="scope.row.fileStatus==1" style="color:rgba(153,153,153,1);">已注销</span>
+            </template>
+          </el-table-column>
+          <el-table-column slot="options" label="操作" show-overflow-tooltip align="center">
+            <template slot-scope="scope">
+              <div class="table-options">
+                <el-button
+                    title="详情"
+                    type="text"
+                    v-if="$permissions('app_appresident_detail')"
+                    @click="detailShow(scope.row)">
+                  详情
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "listTpl",
+  inject: ['resident'],
+  props: {
+    areaId: {default: ""},
+    active: {default: ""},//人员类型
+  },
+  computed: {
+    ...mapState(["user"]),
+    params() {
+      let params = {
+        residentType: this.active
+      }
+      //导出搜索条件
+      if (this.deleteIds.length) {
+        params = {
+          ...params,
+          areaId: this.areaId,
+          ids: this.deleteIds
+        }
+      } else {
+        params = {
+          areaId: this.areaId,
+          ...params,
+          ...this.search
+        }
+      }
+      return params
+    },
+    colConfigs() {
+      return [
+        {type: "selection"},
+        {label: "姓名", prop: "name", align: "center"},
+        {label: "性别", prop: "sex", dict: 'sex', align: "center"},
+        {slot: "idNumber"},
+        {label: "年龄", prop: "age", align: "center"},
+        {label: "民族", prop: "nation", align: "center", dict: "nation"},
+        {label: "文化程度", prop: "education", align: "center", dict: "education"},
+        {label: "政治面貌", prop: "politicsStatus", align: "center", dict: "politicsStatus"},
+        {slot: "fileStatus"},
+        {slot: "options"}
+      ]
+    }
+  },
+  watch: {
+    areaId(v) {
+      v && this.refreshTable()
+    }
+  },
+  data() {
+    return {
+      page: {current: 1, size: 10, total: 0},
+      search: {
+        fileStatus: "",
+        sex: "",
+        nation: "",
+        education: "",
+        politicsStatus: "",
+        birthStart: "",
+        birthEnd: "",
+        faithType: "",
+        householdName: "",
+        con: "",
+        maritalStatus: ""
+      },
+      style: {},
+      tableData: [],
+      multipleSelection: [],
+      deleteIds: [],
+    };
+  },
+  methods: {
+    handleClick() {
+      this.tableData = [];
+      this.multipleSelection = [];
+      this.searchInit()
+    },
+    searchInit() {
+      let tempAreaId = this.search.areaId;
+      this.search = {
+        fileStatus: "",
+        sex: "",
+        nation: "",
+        education: "",
+        politicsStatus: "",
+        birth: [],
+        faithType: "",
+        householdName: "",
+        areaId: "",
+        con: "",
+        maritalStatus: ""
+      };
+      this.search.areaId = tempAreaId;
+      this.page = {current: 1, size: 10, total: 0};
+      this.refreshTable()
+    },
+    handleSelectionChange(val) {
+      this.deleteIds = [];
+      this.multipleSelection = val;
+      this.multipleSelection.forEach(e => {
+        this.deleteIds.push(e.id);
+      });
+    },
+    exportrExcle() {
+      if (this.deleteIds.length == 0) {
+        if (this.search.birth) {
+          this.search.birth = this.search.birth.join(",");
+        }
+        this.resident.instance
+        .post(`/app/appresident/exportAll`, null, {
+          params: {
+            ...this.search,
+            ...this.page
+          }
+        })
+        .then(res => {
+          if (res && res.code == 0) {
+            this.$message.success(res.data);
+            if (typeof this.search.birth == "string") {
+              this.search.birth = this.search.birth.split(",");
+            }
+          }
+        });
+      } else {
+        this.resident.instance.post(`/app/appresident/exportByIds`, {
+          ids: this.deleteIds,
+          areaId: this.user.info.areaId
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success(res.data);
+          }
+        });
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val;
+      this.refreshTable()
+    },
+    detailShow(row) {
+      this.$router.push({query: {type: this.active, id: row.id}})
+    },
+    gotoAdd() {
+      this.$router.push({query: {type: this.active}})
+    },
+    refreshTable() {
+      this.resident.instance.post(`/app/appresident/list`, null, {
+        params: {...this.search, ...this.page, areaId: this.areaId, residentType: this.active}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    beforeDelete() {
+      this.$confirm("确定要执行删除操作吗？", {type: "error"})
+      .then(() => {
+        this.deletePersonFn();
+        this.deleteIds = [];
+      })
+      .catch(() => {
+      });
+    },
+    deletePersonFn() {
+      this.resident.instance.post(`/app/appresident/delete?ids=${this.deleteIds}`).then(res => {
+        if (res && res.code == 0) {
+          this.$message.success("删除成功");
+          if (
+              this.page.current == Math.ceil(this.page.total / this.page.size)
+          ) {
+            this.page.total = this.page.total - this.deleteIds.length;
+            this.page.current = Math.ceil(this.page.total / this.page.size);
+          }
+          this.refreshTable();
+        }
+      })
+    },
+  },
+  created() {
+    this.refreshTable()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.listTpl {
+  height: 100%;
+}
+</style>

packages/meta/AppResident/residentSta.vue

@@ -0,0 +1,445 @@
+<template>
+  <section class="residentSta">
+    <div class="dataStatistic">
+      <div class="above">
+        <div class="data-item">
+          <div id="LocalResident" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <h5 v-if="LocalResidentData">
+            更新时间:{{ statisticData.更新时间 }}
+          </h5>
+        </div>
+        <div class="data-item" style="width:66%;">
+          <div id="ResidentDistribution" v-if="showStatis"/>
+          <ai-empty v-else/>
+        </div>
+      </div>
+      <div class="above" style="margin-top:24px;">
+        <div class="data-item">
+          <div id="SexRatio" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <div rightTop><i v-html="'有效数据:'"/> {{ LocalResidentData }}</div>
+        </div>
+        <div class="data-item">
+          <div id="MaritalSta" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
+        </div>
+        <div class="data-item">
+          <div id="AgeDistribution" v-if="showStatis"/>
+          <ai-empty v-else/>
+          <div rightTop><i v-html="'有效数据:'"/>{{ LocalResidentData }}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "residentSta",
+  inject: ['resident'],
+  props: {
+    areaId: String
+  },
+  computed: {
+    LocalResidentData() {
+      return this.statisticData?.总人数 || 0
+    },
+    AgeDistributionData() {
+      return this.statisticData?.年龄层次 || []
+    },
+    MaritalStaData() {
+      return this.statisticData?.婚姻状况 || []
+    },
+    SexRatioData() {
+      return this.statisticData?.男女比例 || []
+    },
+    ResidentDistributionData() {
+      return this.statisticData?.人口分布 || []
+    }
+  },
+  data() {
+    return {
+      statisticData: {},
+      showStatis: true,
+    }
+  },
+  watch: {
+    areaId(v) {
+      v && this.getStaData()
+    }
+  },
+  methods: {
+    getStaData() {
+      this.resident.instance.post(`/app/appresident/queryCustInfoByAreaId`, null, {
+        params: {
+          areaId: this.areaId
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.statisticData = res.data;
+          this.showStatis = this.LocalResidentData > 0;
+          this.showLocalResident();
+          this.showSexRatio();
+          this.showAgeDistribution();
+          this.showResidentDistribution();
+          this.showMaritalSta();
+        }
+      })
+    },
+    showAgeDistribution() {
+      //年龄分布
+      let myChart = echarts.init(document.getElementById("AgeDistribution"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      myChart.setOption({
+        title: {
+          text: "年龄层次统计",
+          subtext: "",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          bottom: "bottom",
+          data: this.AgeDistributionData.map(e => e.v1)
+        },
+        series: [
+          {
+            name: "年龄层次统计",
+            type: "pie",
+            radius: ["40%", "55%"],
+            center: ["50%", "50%"],
+            data: this.AgeDistributionData.map(e => ({value: e.v2 * 1, name: e.v1})),
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  var colorList = [
+                    "#FB3C3C",
+                    "#fc5947",
+                    "#81E84F",
+                    "#3C76FF",
+                    "#6995FF",
+                    "#FFD500",
+                    "#FEF517",
+                    "#B1E598",
+                    "#81E84F",
+                    "#B1E598",
+                    "#FEBB8E"
+                  ];
+                  return colorList[params.dataIndex];
+                }
+              }
+            }
+          }
+        ]
+      });
+    },
+    showLocalResident() {
+      //本地居民
+      let myChart = echarts.init(document.getElementById("LocalResident"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      let option = {
+        title: {
+          text: "本地居民",
+          subtext: "",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)"
+        },
+        series: [
+          {
+            name: "本地居民",
+            type: "pie",
+            radius: ["50%", "65%"],
+            avoidLabelOverlap: false,
+            label: {
+              normal: {
+                show: true,
+                position: "center",
+                textStyle: {
+                  fontSize: "40",
+                  fontWeight: "normal",
+                  color: "#333333"
+                }
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: "40",
+                  fontWeight: "normal",
+                  color: "#333333"
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [{value: this.LocalResidentData, name: this.LocalResidentData}],
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  var colorList = ["#5088FF"];
+                  return colorList[params.dataIndex];
+                }
+              }
+            }
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    showMaritalSta() {
+      //婚姻状况
+      let myChart = echarts.init(document.getElementById("MaritalSta"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      let option = {
+        color: [
+          "#FB3C3C",
+          "#FC5947",
+          "#FE8B3F",
+          "#3C76FF",
+          "#6995FF",
+          "#FFD500",
+          "#FEF517",
+          "#B1E598",
+          "#81E84F",
+          "#B1E598",
+          "#FEBB8E"
+        ],
+        backgroundColor: "#FFFFFF",
+        title: {
+          text: "婚姻状况统计",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          bottom: "bottom",
+          width: "auto",
+          height: 50,
+          data: this.MaritalStaData.map(e => e.v1)
+        },
+        series: [
+          {
+            name: "婚姻状况",
+            type: "pie",
+            radius: ["40%", "55%"],
+            center: ["50%", "50%"],
+            data: this.MaritalStaData.map(e => ({value: e.v2 * 1, name: e.v1})),
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    showResidentDistribution() {
+      //人口分布/居民分布
+      let myChart = echarts.init(document.getElementById("ResidentDistribution"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      let option = {
+        title: {
+          text: "人口分布统计",
+          subtext: "",
+          x: "left"
+        },
+        color: ["#5088FF"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: "{a} <br/>{b} : {c} "
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.ResidentDistributionData.map(e => e.name),
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value"
+          }
+        ],
+        dataZoom: [
+          {
+            id: "dataZoomX",
+            type: "slider",
+            xAxisIndex: [0],
+            filterMode: "filter"
+          }
+        ],
+        series: [
+          {
+            name: "人口数量",
+            type: "bar",
+            barWidth: "16",
+            data: this.ResidentDistributionData.map(e => e.v1)
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    showSexRatio() {
+      //男女比例
+      let myChart = echarts.init(document.getElementById("SexRatio"));
+      if (!this.showStatis) {
+        return myChart.dispose();
+      }
+      myChart.setOption({
+        title: {
+          text: "男女比例统计",
+          subtext: "",
+          x: "left"
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        legend: {
+          orient: "vertical",
+          bottom: "bottom",
+          data: this.SexRatioData.map(e => e.v1)
+        },
+        series: [
+          {
+            name: "男女比例",
+            type: "pie",
+            radius: ["40%", "55%"],
+            center: ["50%", "50%"],
+            data: this.SexRatioData.map(e => ({value: e.v2 * 1, name: e.v1})),
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              },
+              normal: {
+                color: function (params) {
+                  //自定义颜色
+                  let colorList = [
+                    "#FB3C3C",
+                    "#3C76FF",
+                    "#3C76FF",
+                    "#FC5947",
+                    "#6995FF",
+                    "#FB3C3C",
+                    "#FE8B3F",
+                    "#B1E598",
+                    "#81E84F",
+                    "#FEBB8E"
+                  ];
+                  return colorList[params.dataIndex];
+                }
+              }
+            }
+          }
+        ]
+      });
+    },
+  },
+  created() {
+    this.getStaData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.residentSta {
+  height: 100%;
+
+  .dataStatistic {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    padding: 16px 0;
+    box-sizing: border-box;
+
+    .above {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .data-item {
+        width: 32%;
+        height: 380px;
+        background: rgba(255, 255, 255, 1);
+        border-radius: 4px;
+        padding: 16px;
+        box-sizing: border-box;
+        position: relative;
+
+        div[rightTop] {
+          position: absolute;
+          right: 16px;
+          top: 16px;
+          font-size: 14px;
+          font-weight: bold;
+          color: #333;
+
+          & > i {
+            font-style: normal;
+            color: #999;
+          }
+        }
+
+        & > h5 {
+          width: 100%;
+          color: #999;
+          text-align: center;
+          position: absolute;
+          bottom: 0;
+        }
+      }
+    }
+  }
+
+  #LocalResident, #MaritalSta, #ResidentDistribution, #SexRatio, #AgeDistribution {
+    width: 100%;
+    height: 95%
+  }
+}
+</style>