From 5558db3d9ed676f0698fc757df391413b2a87bae Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Thu, 21 Apr 2022 17:20:07 +0800
Subject: [PATCH 1/6] 11

---
 src/views/modules/base/community/buildTable.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/modules/base/community/buildTable.vue b/src/views/modules/base/community/buildTable.vue
index 4edc6b48..dc67bf6a 100644
--- a/src/views/modules/base/community/buildTable.vue
+++ b/src/views/modules/base/community/buildTable.vue
@@ -92,6 +92,9 @@
         <el-table-column prop="totalFloorNum"
                          label="层数">
         </el-table-column>
+        <el-table-column prop="realTotalHouseNum"
+                         label="实际录入总数">
+        </el-table-column>
         <el-table-column prop="totalHouseNum"
                          label="总户数">
         </el-table-column>

From 0b355cccb2b5a6140915cc2480b0068fd0f10554 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Fri, 22 Apr 2022 11:00:02 +0800
Subject: [PATCH 2/6] 111

---
 src/router/index.js                           |    5 +
 .../visual/basicinfo/basicInfoCommunity.vue   |    3 +
 .../basicinfo/houseStatic/houseStatic.vue     | 1099 +++++++++++++++++
 .../visual/basicinfo/houseStatic/options.js   |  176 +++
 4 files changed, 1283 insertions(+)
 create mode 100644 src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
 create mode 100644 src/views/modules/visual/basicinfo/houseStatic/options.js

diff --git a/src/router/index.js b/src/router/index.js
index 866ee5f0..a39738d7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -239,6 +239,11 @@ router.beforeEach((to, from, next) => {
           name: "人员类别分析",
           id: "5fwaefwaefawef5",
         },
+        {
+          url: "/visual/basicinfo/houseStatic/houseStatic",
+          name: "人房概览统计",
+          id: "5fwaefwaefawef6",
+        },
       ],
     },
     {
diff --git a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue
index 7cd5384b..4cc2f402 100644
--- a/src/views/modules/visual/basicinfo/basicInfoCommunity.vue
+++ b/src/views/modules/visual/basicinfo/basicInfoCommunity.vue
@@ -184,6 +184,8 @@ export default {
       if (this.selBuildingId) {
         await this.loadRoom()
 
+      } else {
+        this.roomArray = []
       }
 
     },
@@ -250,6 +252,7 @@ export default {
 
     //点击用户
     handleClickUser (userId) {
+      this.handleCloseAllUser()
       this.$emit('toSubAgency', 'people', userId, "")
     },
     //获取右侧infolist数据
diff --git a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
new file mode 100644
index 00000000..d4fe6613
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
@@ -0,0 +1,1099 @@
+<template>
+  <div class="warning-box">
+    <cpt-card>
+      <div class="card-title">
+        <img class="title-icon"
+             src="@/assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          人房概览统计&nbsp;&nbsp;
+          <el-cascader v-model="selectAgency"
+                       :options="propTree"
+                       :props="{ checkStrictly: true }"
+                       :show-all-levels="false"
+                       :getCheckedNodes="getCheckedNodes"
+                       clearable
+                       @change="handleCascader">
+          </el-cascader>
+        </div>
+      </div>
+      <div class="card-echart">
+        <div class="card-left">
+          <div class="card-left-title">党员年龄统计</div>
+          <div class="card-flex">
+            <div class="echart-wr">
+              <!-- <div class="echart-cicle"></div>  -->
+              <screen-echarts-frame class="echart-org"
+                                    @myChartMethod="pieInitOk"
+                                    ref="ageChart"></screen-echarts-frame>
+              <!-- <div id="echartOrg" class="echart-org"></div> -->
+            </div>
+            <div class="echarts-tips echarts-tips-wd50">
+              <div class="tips-lists">
+                <div v-for="(item, index) in ageItem"
+                     :key="index"
+                     class="tips-items">
+                  <div class="tips-items-title"
+                       :class="'tips-items-title' + item.code">
+                    {{ item.name }}
+                  </div>
+                  <div class="tips-items-num">
+                    <div class="tips-item-count">{{item.value}}</div>
+                    <div class="tips-item-has">{{ item.radio }}</div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+          <div class="ecahrts-button">
+            <el-button type="warning"
+                       size="small"
+                       @click="handleExport('age')">导出</el-button>
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table :headerList="headerList"
+                          :tableData="ageList"
+                          :headerStyle="headerStyle"
+                          :tableContentStyle="headerStyle"
+                          :visibleLoading="visibleAgeLoading"
+                          :operate="false"
+                          @row="handleClickRow"></screen-table>
+            <div class="pagination">
+              <el-pagination :current-page="agePageNo"
+                             :page-size="agePageSize"
+                             background
+                             layout="prev, pager, next"
+                             @size-change="pageSizeChangeHandleAge"
+                             @current-change="pageCurrentChangeHandleAge"
+                             :total="ageTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+        <div class="card-left">
+          <div class="card-left-title">党员学历统计</div>
+          <div class="card-flex">
+            <div class="echart-wr echart-wr100">
+              <!-- <div class="echart-cicle echart-cicle0"></div> -->
+              <!-- <div id="echartType" class="echart-org"></div> -->
+              <screen-echarts-frame class="echart-org"
+                                    @myChartMethod="pieInitOks"
+                                    ref="eduChart"></screen-echarts-frame>
+            </div>
+            <div v-if="false"
+                 class="echarts-tips">
+              <div class="tips-list">
+                <div v-for="item in eduItem"
+                     :key="item.value"
+                     class="tips-item">
+                  <div class="tips-item-icon"
+                       :style="'background:' + item.color"></div>
+                  <div class="tips-item-text">{{item.name}}</div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+          <div class="ecahrts-button">
+            <el-button type="warning"
+                       size="small"
+                       @click="handleExport('edu')">导出</el-button>
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table :headerList="headerEduList"
+                          :tableData="eduList"
+                          :headerStyle="headerStyle"
+                          :tableContentStyle="headerStyle"
+                          :visibleLoading="visibleLoading"
+                          :operate="false"
+                          @row="handleClickRow"></screen-table>
+            <div class="pagination">
+              <el-pagination :current-page="pageNo"
+                             :page-size="pageSize"
+                             background
+                             layout="prev, pager, next"
+                             @size-change="pageSizeChangeHandleNew"
+                             @current-change="pageCurrentChangeHandleNew"
+                             :total="total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+import screenEchartsFrame from "../../components/screen-echarts-frame";
+import { pieOption } from './options'
+
+import * as echarts from 'echarts';
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+    screenEchartsFrame
+  },
+  data () {
+    return {
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "姓名", coulmn: 'name' },
+        { title: "年龄", coulmn: 'age' },
+        { title: "手机号码", coulmn: 'mobile' }
+      ],
+      headerStyle: [
+        {
+          width: '50px'
+        },
+        {
+          'min-width': '100px'
+        },
+        {
+          'min-width': '100px'
+        },
+        {
+          'min-width': '160px'
+        }
+      ],
+      headerEduList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "姓名", coulmn: 'name' },
+        { title: "学历", coulmn: 'education' },
+        { title: "手机号码", coulmn: 'mobile' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      noInit: false,
+      noEduInit: false,
+      selectAgency: null,
+      ageTotalCount: 0,
+      eduTotalCount: 0,
+      propTree: [],
+      value2: '',
+      visibleAgeLoading: true,
+      visibleLoading: true,
+      agencyId: '',
+      orgType: '',
+      ageCode: '',
+      eduCode: '',
+      pageNo: 1,
+      pageSize: 10,
+      agePageNo: 1,
+      agePageSize: 10,
+      total: 0,
+      ageTotal: 0,
+      eduItem: [
+        {
+          name: '小学',
+          value: 0,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '初中',
+          value: 1,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '高中',
+          value: 2,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '中专',
+          value: 3,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '大专',
+          value: 4,
+          color: 'rgba(255, 186, 0, 1)'
+        }, {
+          name: '本科',
+          value: 5,
+          color: 'rgba(22, 215, 131, 1)'
+        }, {
+          name: '硕士',
+          value: 6,
+          color: 'rgba(42, 0, 255, 1)'
+        }, {
+          name: '博士',
+          value: 7,
+          color: 'rgba(198, 0, 255, 1)'
+        }, {
+          name: '其他',
+          value: 8,
+          color: 'rgba(255, 42, 0, 1)'
+        }
+      ],
+      ageItem: [
+        {
+          name: '50岁以下',
+          value: 1,
+          color: 'rgba(27, 81, 255, 1)'
+        }, {
+          name: '50-59岁',
+          value: 2,
+          color: 'rgba(0, 229, 237, 1)'
+        }, {
+          name: '60-69岁',
+          value: 3,
+          color: 'rgba(120, 0, 255, 1)'
+        }, {
+          name: '70-79岁',
+          value: 4,
+          color: 'rgba(255, 120, 0, 1)'
+        }, {
+          name: '80岁以上',
+          value: 5,
+          color: 'rgba(255, 186, 0, 1)'
+        }
+      ],
+      ageList: [],
+      eduList: [],
+      pieAgeChartS: null,
+      pieEduChartSs: null,
+      pieAgeOptions: null,
+      pieEduOptions: null
+    };
+  },
+  async mounted () {
+    await nextTick(100);
+    await this.getAgencyList()
+    this.getAgeCount(this.$store.state.user.agencyId, 'agency')
+    this.getEduCount(this.$store.state.user.agencyId, 'agency')
+    // this.initAgeCharts()
+    // this.initEduCharts()
+    this.getAgeList(this.$store.state.user.agencyId, 'agency')
+    this.getEduList(this.$store.state.user.agencyId, 'agency')
+    // this.initChartType()
+  },
+  methods: {
+    pieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.pieAgeChartS = dom
+      // this.pieInitState = true
+
+    },
+    pieInitOks (dom) {
+      console.log('pies准备好了', dom)
+      this.pieEduChartS = dom
+      // this.pieInitState = true
+
+    },
+    initAgeCharts () {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
+      let option = {
+
+      }
+      this.pieAgeOptions = pieOption(this.pieAgeChartS)
+      this.clickAgePie(0)
+      let fun = params => {
+        this.clickAgePie(params.dataIndex)
+      }
+      this.$refs.ageChart.handleClick(fun)
+      // option && this.$refs.pieChart.setOption(option);
+
+    },
+    initEduCharts () {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
+      let option = {
+
+      }
+      let legend = {
+        show: true,
+        orient: 'vertical',
+        top: '20%',
+        right: 0,
+        textStyle: {
+          width: 90,
+          color: '#fff',
+          rich: {
+            a: {
+              width: 90
+            }
+          }
+        },
+        formatter: name => {
+          for (let a = 0; a < this.eduItem.length; a++) {
+            // this.data  这个数据中有名称和次数
+            if (this.eduItem[a].name === name) {
+              //两个名称进行对比，取出对应的次数
+              let params1 = name + "\n"; //然后return你需要的legend格式即可
+              console.log(params1);
+              let tmp = params1.split("\n");
+              let res = "" + params1;
+              for (let i in tmp) {
+                res = res.replace(tmp[i], "");
+              }
+              return res + params1;
+            }
+          }
+        }
+      }
+      this.pieEduOptions = pieOption(this.pieEduChartS)
+      this.pieEduOptions.legend = { ...legend }
+      // this.pieEduOptions.series[1].width = 400
+      this.clickEduPie(0)
+      let fun = params => {
+        this.clickEduPie(params.dataIndex)
+      }
+      this.$refs.eduChart.handleClick(fun)
+      // this.noInit = true
+      // option && this.$refs.pieChart.setOption(option);
+
+    },
+    initChartType () {
+      const eId = document.getElementById('echartType')
+      let _charts = echarts.init(eId)
+
+      let option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          show: true,
+          orient: 'vertical',
+          top: '20%',
+          right: 0,
+          textStyle: {
+            width: 90,
+            color: '#fff',
+            rich: {
+              a: {
+                width: 90
+              }
+            }
+          },
+          formatter: name => {
+            for (let a = 0; a < this.eduItem.length; a++) {
+              // this.data  这个数据中有名称和次数
+              if (this.eduItem[a].name === name) {
+                //两个名称进行对比，取出对应的次数
+                let params1 = name + "\n"; //然后return你需要的legend格式即可
+                console.log(params1);
+                let tmp = params1.split("\n");
+                let res = "" + params1;
+                for (let i in tmp) {
+                  res = res.replace(tmp[i], "");
+                }
+                return res + params1;
+              }
+            }
+          }
+        },
+        title: {
+          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          subtext: '总数',
+          left: 196,
+          top: "center",
+          textAlign: 'center',
+          textStyle: {
+            color: "#fff",
+            fontSize: 28,
+            align: "center"
+          },
+          subtextStyle: {
+            fontSize: 16,
+            color: '#fff',
+            align: 'center'
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            // center: ['50%', '50%'],
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: true,
+            // top: top + '%',
+            // height: '80%',
+            // left: 0,
+            width: 400,
+            label: {
+              position: 'outside',
+              alignTo: 'edge',
+              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+              minMargin: 5,
+              edgeDistance: 20,
+              lineHeight: 15,
+              color: '#fff',
+              fontSize: 15,
+              rich: {
+                name: {
+                  padding: [0, 6, 0, 6]
+                },
+                a: {
+                  fontSize: 15,
+                  color: '#fff',
+                  padding: [0, 6, 0, 6]
+                },
+                r: {
+                  backgroundColor: 'auto',
+                  borderRadius: 6,
+                  width: 6,
+                  height: 6,
+                  // padding: [3, 3, 0, -12]
+                }
+              }
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '14',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: true,
+              length: 20,
+              length2: 0,
+              maxSurfaceAngle: 80
+            },
+            labelLayout: function (params) {
+              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points
+              };
+            },
+            data: this.eduItem
+          }
+        ]
+      }
+      option && _charts.setOption(option);
+
+    },
+    clickAgePie (seriesIndex) {
+      let _code = ''
+      let isClick = false
+      console.log('seriesIndex---', seriesIndex)
+      this.ageItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          _code = element.code
+
+          if (!this.noInit) isClick = false
+          else {
+            element.isClick = !element.isClick
+            isClick = element.isClick
+          }
+
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm', element)
+        } else {
+          element.isClick = false
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.ageCode = isClick && _code || ''
+      this.pieAgeOptions.title.text = this.ageTotalCount
+      this.pieAgeOptions.series[1].data = this.ageItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.ageChart.setOption(this.pieAgeOptions)
+      if (this.noInit) {
+        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
+        console.log('zlcm---isClick', isClick)
+        this.agePageNo = 1
+        this.getAgeList(_arr[0], orgType, isClick && _code || '')
+      }
+      this.noInit = true
+
+    },
+    clickEduPie (seriesIndex) {
+      let _code = ''
+      let isClick = false
+      this.eduItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          _code = element.code
+
+          if (!this.noEduInit) isClick = false
+          else {
+            element.isClick = !element.isClick
+            isClick = element.isClick
+          }
+
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm')
+        } else {
+          element.isClick = false
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.eduCode = isClick && _code || ''
+      this.pieEduOptions.title.text = this.eduTotalCount
+      this.pieEduOptions.series[1].data = this.eduItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.eduChart.setOption(this.pieEduOptions)
+      if (this.noEduInit) {
+        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
+        this.pageNo = 1
+        this.getEduList(_arr[0], orgType, isClick && _code || '')
+      }
+      this.noEduInit = true
+
+
+    },
+    async getAgeCount (orgId, orgType) {
+      const url = "/epmetuser/icresiuser/partymemberagestatistics";
+      let params = {
+        orgId,
+        orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        const colorList = [
+          {
+            name: '50岁以下',
+            value: 1,
+            color: '#FAC126'
+          }, {
+            name: '50-59岁',
+            value: 2,
+            color: '#3DDA83'
+          }, {
+            name: '60-69岁',
+            value: 3,
+            color: '#A800FF'
+          }, {
+            name: '70-79岁',
+            value: 4,
+            color: '#2865FA'
+          }, {
+            name: '80岁以上',
+            value: 5,
+            color: '#00DAD2'
+          }
+        ]
+        this.ageItem = data.map((item, index) => {
+          return {
+            ...item,
+            name: item.label,
+            isClick: false,
+            itemStyle: {
+              color: colorList[index].color
+            }
+          }
+        })
+        this.ageTotalCount = 0
+        data.forEach(item => {
+          this.ageTotalCount += Number(item.value)
+        })
+        this.initAgeCharts()
+      } else {
+      }
+    },
+    async getEduCount (orgId, orgType) {
+      const url = "/epmetuser/icresiuser/partymembereducationstatistics";
+      let params = {
+        orgId,
+        orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.eduItem = data.map(item => {
+          return {
+            ...item,
+            name: item.label,
+            isClick: false
+          }
+        })
+        this.eduTotalCount = 0
+        data.forEach(item => {
+          this.eduTotalCount += Number(item.value)
+        })
+        this.initEduCharts()
+      } else {
+      }
+    },
+    async getAgeList (orgId, orgType, _code) {
+
+      this.visibleAgeLoading = true
+      const url = "/epmetuser/icresiuser/partymemberagelist";
+      let params = {
+        orgId,
+        orgType,
+        code: _code || '',
+        pageNo: this.agePageNo,
+        pageSize: this.agePageSize
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.ageList = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.ageTotal = data.total
+      } else {
+        this.$message.error(msg)
+      }
+      // if (_code == 0 || _code) this.noInit = true
+      this.visibleAgeLoading = false
+    },
+    async getEduList (orgId, orgType, _code) {
+      this.visibleLoading = true
+      const url = "/epmetuser/icresiuser/partymembereducationlist";
+      let params = {
+        orgId,
+        orgType,
+        code: _code || '',
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.eduList = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.total = data.total
+      } else {
+        this.$message.error(msg)
+      }
+      this.visibleLoading = false
+    },
+    async getAgencyList (node, resolve) {
+      // const url = "/gov/org/customeragency/staffinagencylist";
+      const url = '/gov/org/customeragency/agencygridtree'
+      // let params = {
+      //   agencyId: this.$store.state.user.agencyId,
+      // };
+      const { data, code, msg } = await requestPost(url);
+      if (code === 0) {
+        console.log('data-org----o', data)
+        this.selectAgency = [`${data.agencyId}-${data.level}`]
+        this.orgType = data.level
+        this.agencyId = data.agencyId
+        let arr = []
+        arr.push(data)
+        this.propTree = arr && this.getTreeData(arr)
+
+      } else {
+      }
+    },
+    getTreeData (data) {
+      if (!Array.isArray(data)) return []
+      let arr = data.map(item => {
+        let _item = {}
+        if (item.subAgencyList) {
+          if (item.subAgencyList.length === 0) {
+            _item = {
+              label: item.agencyName,
+              value: item.agencyId + '-' + item.level,
+              level: item.level,
+              children: undefined
+            }
+          } else _item = {
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+            children: this.getTreeData(item.subAgencyList)
+          }
+        } else {
+          _item = {
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+          }
+        }
+        return _item
+      })
+      return arr
+    },
+    handleClickRow (val) {
+      console.log('click-row----', val)
+      this.$router.push({
+        path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
+      });
+    },
+    handleCascader (val) {
+      console.log('val-vvv', val)
+      const _arr = val[val.length - 1].split('-')
+      const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
+      this.agencyId = _arr[0]
+      this.orgType = orgType
+      this.noInit = false
+      this.noEduInit = false
+      this.getAgeCount(_arr[0], orgType)
+      this.getEduCount(_arr[0], orgType)
+      this.getAgeList(_arr[0], orgType)
+      this.getEduList(_arr[0], orgType)
+    },
+    getCheckedNodes (val) {
+      console.log('val-nnn', val)
+    },
+    lazyLoad (node, resolve) {
+      setTimeout(() => {
+        this.getAgeList(node, resolve)
+      }, 500)
+    },
+    pageSizeChangeHandleAge (val) {
+      this.agePageNo = 1
+      this.agePageSize = val
+      this.getAgeList(this.agencyId, this.orgType, this.ageCode)
+    },
+    pageCurrentChangeHandleAge (val) {
+      this.agePageNo = val
+      this.getAgeList(this.agencyId, this.orgType, this.ageCode)
+    },
+    pageSizeChangeHandleNew (val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+      this.getEduList(this.agencyId, this.orgType, this.eduCode)
+    },
+    pageCurrentChangeHandleNew (val) {
+      this.pageNo = val;
+      this.getEduList(this.agencyId, this.orgType, this.eduCode)
+    },
+    async handleExport (type) {
+      const urls = {
+        age: '/epmetuser/icresiuser/partymemberagelist/export',
+        edu: '/epmetuser/icresiuser/partymembereducationlist/export'
+      }
+      const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+      const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
+      let params = {
+        orgId: _arr[0],
+        orgType: orgType,
+        code: type == 'age' ? this.ageCode : this.eduCode,
+      }
+      // .post('epmetuser/icresiuser/exportExcel', params)
+      await this.$http({
+        method: 'POST',
+        url: urls[type],
+        responseType: 'blob',
+        data: params
+      })
+        .then(res => {
+          console.log('resllll', res)
+          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+          console.log('filename', fileName)
+          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+          var url = window.URL.createObjectURL(blob)
+          var aLink = document.createElement('a')
+          aLink.style.display = 'none'
+          aLink.href = url
+          aLink.setAttribute('download', fileName)
+          document.body.appendChild(aLink)
+          aLink.click()
+          document.body.removeChild(aLink) //下载完成移除元素
+          window.URL.revokeObjectURL(url) //释放掉blob对象
+        })
+        .catch((err) => {
+          console.log('获取导出失败', err)
+          return this.$message.error('网络错误')
+        })
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+    }
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        // font-weight: 800;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+        content: "\e790";
+      }
+    }
+  }
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex: 1;
+    // display: flex;
+    height: 100%;
+    .card-flex {
+      width: 100%;
+      display: flex;
+    }
+  }
+}
+.card-left-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-left-title::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-top: -6px;
+  background: #2865fa;
+  border-radius: 50%;
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+  .echart-cicle0 {
+    left: 80px;
+    margin-left: 0;
+  }
+}
+.echart-wr100 {
+  width: 70%;
+}
+.echarts-tips {
+  width: 40%;
+  // flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.echarts-tips-wd50 {
+  width: 320px;
+}
+.tips-list,
+.tips-item,
+.tips-lists,
+.tips-items-num {
+  display: flex;
+  align-items: center;
+}
+.tips-list {
+  // width: 100%;
+  // height: 100%;
+  flex-wrap: wrap;
+  // justify-content: center;
+  .tips-item {
+    // flex: 1;
+    width: 50%;
+    margin-top: 20px;
+    // margin-right: 40px;
+    cursor: pointer;
+    .tips-item-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 8px;
+      background: #1b51ff;
+      border-radius: 2px;
+    }
+    .tips-item-text {
+      font-size: 16px;
+      color: #d2e7ff;
+    }
+  }
+}
+.tips-lists {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 30px 0 0 30px;
+  flex-wrap: wrap;
+  .tips-items {
+    margin-bottom: 30px;
+    margin-right: 40px;
+    // width: 50%;
+    cursor: pointer;
+    .tips-items-title {
+      position: relative;
+      width: 100px;
+      height: 26px;
+      box-sizing: border-box;
+      padding-left: 6px;
+      font-size: 16px;
+      color: #eff0f1;
+      background: url("../../../../../assets/img/shuju/measure/huang@2x.png")
+        no-repeat left bottom;
+      &1 {
+        background: url("../../../../../assets/img/shuju/measure/lv@2x.png")
+          no-repeat left bottom;
+      }
+      &2 {
+        background: url("../../../../../assets/img/shuju/measure/zi@2x.png")
+          no-repeat left bottom;
+      }
+      &3 {
+        background: url("../../../../../assets/img/shuju/measure/lan@2x.png")
+          no-repeat left bottom;
+      }
+      &4 {
+        background: url("../../../../../assets/img/shuju/measure/lanlv@2x.png")
+          no-repeat left bottom;
+      }
+    }
+    .tips-items-num {
+      justify-content: space-between;
+      box-sizing: border-box;
+      margin-top: 10px;
+      // padding-right: 30px;
+      font-size: 20px;
+      .tips-item-has {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.warning-box-bottom {
+  height: calc(100% - 500px);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 30px;
+  // overflow-y: scroll;
+}
+.ecahrts-button {
+  width: 100%;
+  padding-right: 30px;
+  text-align: right;
+  ::v-deep .el-button--warning {
+    background: linear-gradient(90deg, #0863ea, #3b9ffc);
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/modules/visual/basicinfo/houseStatic/options.js b/src/views/modules/visual/basicinfo/houseStatic/options.js
new file mode 100644
index 00000000..ba0ddd33
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/houseStatic/options.js
@@ -0,0 +1,176 @@
+
+export function pieOption (_charts) {
+  const center= ['50%', '50%']
+    return {
+      title: {
+        text: '0',
+        top: 125,
+        left: 196,
+        textAlign: 'center',
+        textStyle: {
+          width: '100%',
+          fontSize: 32,
+          color: '#FFFFFF',
+          fontWeight: 400,
+          align: 'center'
+        },
+        itemGap: 5,
+        subtext: '总数',
+        subtextStyle: {
+          fontSize: 16,
+          color: '#fff',
+          fontWeight: 400,
+          align: 'center'
+        }
+      },
+      tooltip: {
+        show: false
+      },
+      legend: {
+        top: 500,
+        bottom: 0,
+        itemWidth: 20,
+        itemHeight: 10,
+        textStyle: {
+          color: '#D2E7FF',
+          fontSize: 16,
+          lineHeight: 20,
+        },
+      
+      },
+      series: [
+        // 外侧圆环
+        {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 90,
+          hoverAnimation: false,
+          // tooltip: {
+          // },
+          center: center,
+          left: 'left',
+          radius: ['60%', '70%'],
+          width: 400,
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          data: [{
+            value: 480,
+            itemStyle: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+          ]
+        },
+  
+        // 突出的
+        {
+          hoverAnimation: false,
+          type: 'pie',
+          center: center,
+          radius: ['40%', '60%'],
+          avoidLabelOverlap: false,
+          selectedMode: 'single',
+          left: 'left',
+          width: 400,
+          startAngle: 90,
+          label: {
+            // show: false,
+            position: 'outside',
+            alignTo: 'edge',
+            // formatter: '{a|{c}}\n\n{name|{b}}',
+            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            minMargin: 5,
+            edgeDistance: 1,
+            lineHeight: 15,
+            color: '#fff',
+            fontSize: 12,
+            // distanceToLabelLine: -60,
+            rich: {
+              name: {
+                padding: [0, 6, 0, 6]
+              },
+              a: {
+                fontSize: 30,
+                color: '#fff',
+                padding: [0, 6, 6, 6]
+              },
+              r: {
+                backgroundColor: 'auto',
+                borderRadius: 6,
+                width: 6,
+                height: 6,
+                // padding: [3, 3, 0, -12]
+              }
+            }
+          },
+          labelLine: {
+            show: false,
+            smooth: 0.2,
+            length: 30,
+            length2: 0,
+            maxSurfaceAngle: 80
+          },
+          labelLayout: function (params) {
+            
+            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+            const points = params.labelLinePoints;
+            // Update the end point.
+            if (points) {
+              points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            }
+            
+            return {
+              labelLinePoints: points
+            };
+          },
+          itemStyle: {
+            
+          },
+          data: [],
+  
+        },
+           // 中间圆环
+           {
+            type: 'pie',
+            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+            startAngle: 90,
+            hoverAnimation: false,
+            center: center,
+            left: 'left',
+            width: 400,
+            // tooltip: {
+            // },
+            radius: ['0%', '25%'],
+            label: {
+            
+                show: false
+             
+            },
+            labelLine: {
+                show: false
+            
+            },
+            data: [
+              {
+                value: 360,
+                itemStyle: {
+                  color: 'rgba(8, 37, 134, 1)',
+                }
+              }
+            ]
+          },
+      ]
+  
+    }
+  }
+  
\ No newline at end of file

From d67d1fc3c5fa45370a994a8293fd7cb15b7dffdd Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Sun, 24 Apr 2022 15:50:33 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/rangeInput.vue | 115 +++++++++++++++++++++++
 src/views/components/resiSearch.vue | 141 ++++++++++++++++++++++------
 src/views/modules/base/resi.vue     | 137 ++++++++++++++++++++++++---
 3 files changed, 349 insertions(+), 44 deletions(-)
 create mode 100644 src/views/components/rangeInput.vue

diff --git a/src/views/components/rangeInput.vue b/src/views/components/rangeInput.vue
new file mode 100644
index 00000000..99afe0d0
--- /dev/null
+++ b/src/views/components/rangeInput.vue
@@ -0,0 +1,115 @@
+<template>
+<el-form :model="inputForm" :rules="rules" class="demo-form-inline">
+  <div class="flex-div">
+    <el-form-item prop="start">
+      <el-input
+        v-model="inputForm.start"
+        class="wd50"
+        size="small"
+        :type="inputType"
+        clearable
+        placeholder="请输入内容"
+        @change="handleChange"
+      />
+    </el-form-item>
+    <div>-</div>
+    <el-form-item prop="end">
+      <el-input
+        v-model="inputForm.end"
+        class="wd50"
+        size="small"
+        :type="inputType"
+        clearable
+        placeholder="请输入内容"
+        @change="handleChange"
+        @blur="handleBlur"
+      />
+    </el-form-item>
+  </div>
+  
+</el-form>
+</template>
+
+<script>
+export default {
+  name: 'inputRange',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => { 
+        return {
+          start: '',
+          end: ''
+        }
+       }
+    },
+    type: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    let checkAge = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入内容'))
+      } else {
+        if (value < this.inputForm.start) {
+          callback(new Error('结束值不能小于开始值'))
+        }
+        callback()
+      }
+    }
+    return {
+      inputForm: {...this.value},
+      rules: {
+        end: [
+            { validator: checkAge, trigger: 'blur' }
+          ],
+      }
+    }
+  },
+  computed: {
+    inputType() {
+      if (this.type == 'num') return 'number'
+    }
+  },
+  watch: {
+    'value.start'(val) {
+      this.inputForm.start = val
+    },
+    'value.end'(val) {
+      this.inputForm.end = val
+    },
+  },
+  methods: {
+    handleChange(val) {
+      // if ()
+      this.$emit('change', { ...this.inputForm})
+    },
+    handleBlur() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-div {
+  display: flex;
+  align-items: center;
+}
+.wd50 {
+  // width: 45%;
+}
+.demo-form-inline {
+  ::v-deep .el-form-item {
+    width: 40%;
+    margin: 0;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/components/resiSearch.vue b/src/views/components/resiSearch.vue
index 6cc4a41a..ef2b7fa6 100644
--- a/src/views/components/resiSearch.vue
+++ b/src/views/components/resiSearch.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="resi-container">
-    <el-card class="resi-card">
-      <el-row class="resi-row-box" :class="openSearch && 'resi-row-more'">
-        <el-row class="resi-row">
+    <!-- <el-card class="resi-card"> -->
+      <el-row class="resi-row-box" :class="!isArrow && 'resi-row-more'">
+        <el-row v-if="showGrid" class="resi-row">
           <el-col :span="6">
             <div class="resi-cell">
               <div class="resi-cell-label">所属网格</div>
@@ -107,13 +107,13 @@
           </el-col>
         </el-row>
         <el-row
-          v-for="(item, index) in sliceList(formList, 4)"
+          v-for="(item, index) in sliceList(itemList, 4)"
           :key="index"
           class="resi-row"
         >
-          <el-col v-for="n in item" :key="n.id" :span="6">
+          <el-col v-for="n in item" :key="n.id" :span="computdSpan(item.length)">
             <div class="resi-cell">
-              <div class="resi-cell-label">{{ n.label }}</div>
+              <div class="resi-cell-label" :class="item.length != 4 && 'resi-cell-label1'">{{ n.label }}</div>
               <div
                 class="resi-cell-value"
                 :class="n.itemType === 'radio' && 'resi-cell-value-radio'"
@@ -127,6 +127,16 @@
                   placeholder="请输入内容"
                 >
                 </el-input>
+                <template v-else-if="n.itemType == 'inputRange'">
+                  <!-- <el-input
+                    v-model.trim="form[n.columnName]"
+                    class="resi-cell-input"
+                    size="small"
+                    clearable
+                    placeholder="请输入内容"
+                  /> -->
+                  <inputRange v-model="form[n.columnName]" :type="n.validType" @change="handleAgeChange" />
+                </template>
                 <template v-else-if="n.itemType === 'datepicker'">
                   <el-date-picker
                     v-if="n.queryType === 'daterange'"
@@ -182,12 +192,18 @@
                   class="resi-cell-select"
                 >
                 </el-cascader>
+                <template v-else-if="n.itemType === 'checkbox'">
+                  <el-checkbox-group v-model="form[n.columnName]">
+                    <el-checkbox v-for="ns in n.options" :key="ns.value" :label="ns.value">{{ns.label}}</el-checkbox>
+                    <!-- <el-checkbox label="n.la"></el-checkbox> -->
+                  </el-checkbox-group>
+                </template>
               </div>
             </div>
           </el-col>
         </el-row>
       </el-row>
-      <el-row class="resi-search">
+      <el-row v-if="isArrow" class="resi-search">
         <!-- <el-col :span="20">
           <el-button type="primary" size="mini">查询</el-button>
         </el-col> -->
@@ -196,17 +212,21 @@
           <el-button class="diy-button--reset" size="small" @click="resetForm">重置</el-button>
         </el-col>
       </el-row>
-      <div class="resi-down" @click="handleOpenSearch">
+      <!-- <div v-if="isArrow" class="resi-down" @click="handleOpenSearch">
         <img v-if="openSearch" src="../../assets/img/arrow-up.png" />
         <img v-else src="../../assets/img/arrow-down.png" />
-      </div>
-    </el-card>
+      </div> -->
+    <!-- </el-card> -->
   </div>
 </template>
 
 <script>
+import inputRange from './rangeInput.vue'
 export default {
   name: 'ResiSearch',
+  components: {
+    inputRange
+  },
   props: {
     formList: {
       type: Array,
@@ -215,6 +235,14 @@ export default {
     columnName: {
       type: String,
       default: ''
+    },
+    showGrid: {
+      type: Boolean,
+      default: false
+    },
+    isArrow: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -226,13 +254,23 @@ export default {
       //   return _form
       // }
       arr.forEach((item) => {
-        if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
+        if (item.itemType == 'checkbox') _form[item.columnName] = []
+        else if (columnName && columnName === item.columnName) _form[item.columnName] = '1'
+        else if (item.itemType == 'inputRange') _form[item.columnName] = { start: '', end: ''}
         else _form[item.columnName] = ''
       })
       return _form
     }
-    let form = initForm(this.formList, this.columnName)
-    let tempFormList = this.formList.map(item => {
+    let itemList = this.formList.map(item => {
+      if (item.itemType == 'inputRange' && item.funType == 'agetoyear') {
+        item.columnName = 'age'
+      }
+      return {
+        ...item
+      }
+    })
+    let form = initForm(itemList, this.columnName)
+    let tempFormList = itemList.map(item => {
       
       return {
         ...item,
@@ -256,6 +294,7 @@ export default {
       optionsD: [],
       optionsG: [],
       value: '',
+      itemList,
       fixedList: [],
       fixedForm: {
         GRID_ID: '',
@@ -332,7 +371,7 @@ export default {
     },
     changeDDisabled() {
       return !this.form.UNIT_ID
-    }
+    },
   },
   watch: {
     form: {
@@ -352,6 +391,7 @@ export default {
   created() {
     // this.initForm()
     // console.log('formcccc---', this.form)
+
     this.getGridList()
     this.getValiheList()
     if (this.columnName) this.handleChangeForm(this.columnName)
@@ -363,6 +403,9 @@ export default {
       })
       console.log('formcccc---', this.form)
     },
+    computdSpan(len) {
+      return len == 1 ? 24 : 6
+    },
     handleClearVillage() {
       this.form.BUILD_ID = ''
       this.form.HOME_ID = ''
@@ -378,28 +421,37 @@ export default {
     },
     resetForm(formName) {
       for(const n in this.form) {
-        this.form[n] = ''
+        if (n == 'age') {
+          this.form.age = {
+            start: '',
+            end: ''
+          }
+        } else if (typeof this.form[n] == 'object') this.form[n] = []
+        else this.form[n] = ''
+        
       }
-      this.handleSearch()
+      // let arr3 = [...arr1, ...arr]
+      this.$emit('search', [])
+      // this.handleSearch()
     },
     handleSearch() {
       // console.log('formmmmm---', this.form)
-      const itemTypes = ['daterange', 'timerange']
-      let arr = this.tempFormList
-        .filter((n) => n.isChange)
-        .map((item) => {
+      const itemTypes = ['daterange', 'timerange', 'checkbox']
+      let a = this.tempFormList.filter(item => item.itemType != 'inputRange')
+      let arr = a.filter((n) => n.isChange).map((item) => {
           return {
             queryType: item.queryType,
             tableName: item.tableName,
             columnName: item.columnName,
             // columnValue: []
-            columnValue:
-              itemTypes.includes(item.queryType) ||
+            columnValue: this.form[item.columnName] && 
+              (itemTypes.includes(item.queryType) ||
               itemTypes.includes(item.itemType)
                 ? this.form[item.columnName]
-                : [this.form[item.columnName].toString()]
+                : [this.form[item.columnName].toString()])
           }
         })
+      const arr2 = arr.filter(item => item.columnValue.length > 0)
       let arr1 = this.fixedList
         .filter((n) => n.columnValue.length > 0)
         .map((item) => {
@@ -407,12 +459,21 @@ export default {
             ...item
           }
         })
-      let arr3 = [...arr1, ...arr]
+      let arr3 = [...arr1, ...arr2]
       this.$emit('search', arr3)
+      return arr3
     },
     handleOpenSearch() {
       this.openSearch = !this.openSearch
     },
+    handleAgeChange(val) {
+      console.log('val----age---', val)
+      if (val.end) {
+        const s = this.computedBirth(val.end)
+        const e = this.computedBirth(val.start)
+        this.form.BIRTHDAY = [s, e]
+      }
+    },
     handleChangeGrid(val) {
       console.log('val', val)
       this.form.VILLAGE_ID = ''
@@ -563,16 +624,35 @@ export default {
         .catch(() => {
           return this.$message.error('网络错误')
         })
+    },
+    computedBirth(age) {
+      let now = new Date(); 
+      let nowYear = now.getFullYear(); 
+      let nowMonth = now.getMonth()+1; 
+      let nowDay = now.getDate(); // 按照减法原理，先day相减，不够向month借；然后month相减，不够向year借；最后year相减。 
+      let subYear = nowYear - age
+      if(nowMonth < 10){
+        nowMonth = '0'+ nowMonth
+      }
+      if(nowDay < 10){
+        nowDay = '0' + nowDay
+      }
+      console.log(subYear+'-'+nowMonth+'-'+nowDay);
+      return subYear + '-' + nowMonth + '-' + nowDay
     }
   }
 }
 </script>
 
 <style lang="scss" scope>
-.resi-container .resi-card {
-  position: relative;
-  overflow: visible;
-}
+// .resi-container {
+//   position: relative;
+//   overflow: visible;
+// }
+// .resi-container .resi-card {
+//   position: relative;
+//   overflow: visible;
+// }
 .resi-down {
   position: absolute;
   left: 50%;
@@ -614,12 +694,15 @@ export default {
   align-items: center;
   .resi-cell-label {
     flex-shrink: 0;
-    width: 70px;
+    min-width: 70px;
     box-sizing: border-box;
     margin-right: 15px;
     text-align: right;
     // line-height: 32;
   }
+  .resi-cell-label1 {
+    width: max-content;
+  }
   .resi-cell-value-radio {
     display: flex;
     align-items: center;
diff --git a/src/views/modules/base/resi.vue b/src/views/modules/base/resi.vue
index 979d2997..88ea5f0d 100644
--- a/src/views/modules/base/resi.vue
+++ b/src/views/modules/base/resi.vue
@@ -1,10 +1,39 @@
 <template>
   <div class="resi-container">
-    <resi-search v-if="searchList.length > 0"
-                 ref="resiSearch"
-                 :form-list="searchList"
-                 :column-name="defaultCategotyKey"
-                 @search="handleSearch" />
+    <el-card class="resi-card">
+      <el-collapse v-if="openSearch" v-model="activeNames">
+        <el-collapse-item v-for="item in searchList" :key="item.itemGroupId" 
+          :title="item.groupName" :name="item.itemGroupId">
+          <resi-search v-if="searchList.length > 0"
+                  :ref="'resiSearch' + item.itemGroupId"
+                  :form-list="item.queryItemList"
+                  :column-name="defaultCategotyKey"
+                  :show-grid="item.groupName == '基础信息'"
+                  />
+        </el-collapse-item>
+      </el-collapse>
+      <template v-else>
+        <resi-search v-if="searchList.length > 0"
+                  ref="resiSearch"
+                  :form-list="searchList[0].queryItemList"
+                  :column-name="defaultCategotyKey"
+                  :is-arrow="true"
+                  @search="handleSearch" />
+      </template>
+      <el-row v-if="openSearch" class="resi-search">
+        <!-- <el-col :span="20">
+          <el-button type="primary" size="mini">查询</el-button>
+        </el-col> -->
+        <el-col :span="24">
+          <el-button type="primary" size="small" @click="handleSearchFrom">查询</el-button>
+          <el-button class="diy-button--reset" size="small" @click="resetSearchForm">重置</el-button>
+        </el-col>
+      </el-row>
+      <div class="resi-down" @click="handleOpenSearch">
+        <img v-if="openSearch" src="../../../assets/img/arrow-up.png" />
+        <img v-else src="../../../assets/img/arrow-down.png" />
+      </div>
+    </el-card>
     <el-card class="resi-card-table">
       <div class="resi-row-btn">
         <el-button size="small"
@@ -277,6 +306,7 @@ import { mapGetters } from 'vuex'
 import resiTransfer from '../../components/resiTransfer.vue'
 import resiChangeRecord from '../../components/resiChangeRecord.vue'
 import peopleMore from "@/views/modules/shequ/cpts/people-more";
+import { listen } from 'ol/events'
 
 export default {
   components: {
@@ -289,6 +319,8 @@ export default {
   },
   data () {
     return {
+      activeNames: ['1'],
+      openSearch: false,
       exportBtn: false,
       exportBtnTitle: '导出',
       importBtnTitle: '导入',
@@ -342,11 +374,12 @@ export default {
 
   },
   async activated () {
-    if (this.$route.query) {
+    console.log('this.$route.query---', this.$route.query)
+    if (this.$route.query && this.$route.query.columnName) {
       this.searchList = []
       let query = this.$route.query
       this.defaultCategotyKey = query.columnName
-      console.log(this.defaultCategotyKey)
+      console.log('defaultCategotyKey----', this.defaultCategotyKey)
       await this.getSearchList()
       this.$refs.resiSearch.handleSearch()
     }
@@ -419,6 +452,9 @@ export default {
       this.tranferShow = false
       this.getTableData()
     },
+    handleOpenSearch() {
+      this.openSearch = !this.openSearch
+    },
     computedWidth (label, type) {
       
       let wd = ''
@@ -514,12 +550,39 @@ export default {
       
       return _val || row[item.columnName]
     },
+    handleSearchFrom() {
+      let arr = []
+      this.searchList.forEach(item => {
+        const arr1 = this.$refs[`resiSearch${item.itemGroupId}`][0].handleSearch()
+        arr = arr.concat(arr1)
+        // console.log('search-----refs', this.$refs[`resiSearch${item.itemGroupId}`])
+      })
+      console.log('search-----refs', this.$refs)
+
+      console.log('search-----arr', arr)
+      this.currentPage = 1
+      this.conditions = arr
+      this.getTableData()
+    },
     handleSearch (val) {
       console.log('searchhh--', val)
       this.currentPage = 1
       this.conditions = val
       this.getTableData()
     },
+    resetSearchForm(formName) {
+      // for(const n in this.form) {
+      //   this.form[n] = ''
+      // }
+      // this.handleSearch()
+      this.searchList.forEach(item => {
+        this.$refs[`resiSearch${item.itemGroupId}`][0].resetForm()
+        // console.log('search-----refs', this.$refs[`resiSearch${item.itemGroupId}`])
+      })
+      this.currentPage = 1
+      this.conditions = []
+      this.getTableData()
+    },
     async handleExportModule () {
       let url = "/epmetuser/icresiuser/import/download-template"
 
@@ -1055,8 +1118,9 @@ export default {
       return options
     },
     async getSearchList () {
+      //  /oper/customize/icform/conditionlist
       await this.$http
-        .post('/oper/customize/icform/conditionlist', {
+        .post('/oper/customize/icform/conditionlist-bygroup', {
           formCode: 'resi_base_info',
           dynamic: true
         })
@@ -1065,15 +1129,29 @@ export default {
             return this.$message.error(res.msg)
           } else {
             console.log('获取查询详情成功--sss', res)
-            this.searchList = res.data
+            
             res.data.forEach((item) => {
-              if (item.optionSourceType === 'remote') {
-                this.getOptionsList(item.optionSourceValue).then((res) => {
-                  item.options = res
-                })
-                // console.log('')
-              }
+              item.queryItemList.forEach(n => {
+                if (n.optionSourceType === 'remote') {
+                  this.getOptionsList(n.optionSourceValue).then((res) => {
+                    n.options = res
+                  })
+                  // console.log('')
+                } else if (n.itemType == 'radio' && n.options.length == 0) {
+                  n.options = [
+                      {
+                          label: "是",
+                          value: "1"
+                      },
+                      {
+                          label: "否",
+                          value: "0"
+                      }
+                    ]
+                }
+              })
             })
+            this.searchList = res.data
           }
         })
         .catch(() => {
@@ -1197,6 +1275,10 @@ export default {
     background: linear-gradient(90deg, #1a5afd, #26c4ff);
   }
 }
+.resi-container .resi-card {
+  position: relative;
+  overflow: visible;
+}
 .resi-container .resi-card-table {
   ::v-deep .el-table th {
     color: #fff;
@@ -1216,6 +1298,31 @@ export default {
     color: rgba(0, 167, 169, 1);
   }
 }
+.resi-search {
+  // padding-right: 20px;
+  margin-top: 10px;
+  .el-col {
+    text-align: right;
+  }
+}
+.resi-down {
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 46px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-left: -23rpx;
+  cursor: pointer;
+  background: #ffffff;
+  border-radius: 0 0 10px 10px;
+  img {
+    display: block;
+  }
+}
 </style>
 
 <style lang="scss" scoped>

From 1b93c20fefd57394ad8ad004df23a3be7e78c65b Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Sun, 24 Apr 2022 16:05:04 +0800
Subject: [PATCH 4/6] dd

---
 src/views/modules/base/resi.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/modules/base/resi.vue b/src/views/modules/base/resi.vue
index 88ea5f0d..5ffed18a 100644
--- a/src/views/modules/base/resi.vue
+++ b/src/views/modules/base/resi.vue
@@ -319,7 +319,7 @@ export default {
   },
   data () {
     return {
-      activeNames: ['1'],
+      activeNames: [],
       openSearch: false,
       exportBtn: false,
       exportBtnTitle: '导出',
@@ -453,7 +453,9 @@ export default {
       this.getTableData()
     },
     handleOpenSearch() {
+      if (!this.openSearch) this.activeNames = [this.searchList[0].itemGroupId]
       this.openSearch = !this.openSearch
+      
     },
     computedWidth (label, type) {
       

From 6c14ae5d890ac17d85ad6bce948cfb022feb8deb Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Sun, 24 Apr 2022 17:37:41 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E4=BA=BA=E6=88=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/shuju/logo1.png                |  Bin 0 -> 417 bytes
 .../scss/modules/visual/houseStatic.scss      |  324 ++++
 .../basicinfo/houseStatic/houseStatic.vue     | 1344 +++++------------
 .../visual/basicinfo/houseStatic/options.js   |   92 +-
 .../basicinfo/houseStatic/userOptions.js      |  182 +++
 .../visual/communityGovern/typeAnalyze.vue    |    4 +-
 6 files changed, 958 insertions(+), 988 deletions(-)
 create mode 100644 src/assets/img/shuju/logo1.png
 create mode 100644 src/assets/scss/modules/visual/houseStatic.scss
 create mode 100644 src/views/modules/visual/basicinfo/houseStatic/userOptions.js

diff --git a/src/assets/img/shuju/logo1.png b/src/assets/img/shuju/logo1.png
new file mode 100644
index 0000000000000000000000000000000000000000..1297692bc1014e52bd8d2be72fef9477560b6a85
GIT binary patch
literal 417
zcmV;S0bc%zP)<h;3K|Lk000e1NJLTq000yK000sQ1^@s6ThRUx00001b5ch_0Itp)
z=>Px$TS-JgR5(w?lRqfNK^(?EPbh`*XRsJ7lm&${kr>IJT~Z2@Nla`q%cMw@7|3R!
z-kB0v6ejF=^OC_=S2w)f`@2`aQf|C^?sLyQ_ne3fGaCZdfVx2P4lGOBNZP6*z$>6F
zvi>TmIxR2*^hSX9lA6*2Pl5gj@K#dGzXQ*Ku86~DNeyWo9s*+#;I*XoR6r;8)u{j`
zfGS`e_>y!KYe!;j%xuI1o`7#)#rJU<aC_>35=na@xBzHo$3Qc10yKK?iwD;NpTL99
zw^UMhK2&Drt~3i&`jcmX9bjLQgBA=k>j4IVdBC~6b5Q`h4tN1{Ml#uyG?l+*W(&Y-
zME~f377G}-l++ObT_nTNM=`UkziyJ|OwvFA+yW*ez^rrl=7aw;;0I71IWZ%tFL3A{
zY&@dR{g&a4q}BlFN<CUE!zEx2C<{b6U{TU`0CbMsTuq>NAK>5zn!Jo^12m%h00000
LNkvXXu0mjfdK9e5

literal 0
HcmV?d00001

diff --git a/src/assets/scss/modules/visual/houseStatic.scss b/src/assets/scss/modules/visual/houseStatic.scss
new file mode 100644
index 00000000..b2985d0a
--- /dev/null
+++ b/src/assets/scss/modules/visual/houseStatic.scss
@@ -0,0 +1,324 @@
+.card-title {
+  
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+    }
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        // font-weight: 800;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+        content: "\e790";
+      }
+    }
+  }
+}
+.card-left-title {
+  margin-top: 20px;
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-left-title::after {
+  content: "";
+  position: absolute;
+  top: 5%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+
+  background: #2865fa;
+  border-radius: 50%;
+}
+.card-echart {
+  min-height: 500px;
+  display: flex;
+  margin-top: 10px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex-grow:0;
+    flex-shrink:0;
+    width:50%;
+  
+    height: 100%;
+    .div-chart{
+      display: flex;
+      width: 100%;
+      .echart-wr{
+        flex-shrink: 0;
+        height: 420px;
+        width: 70%;
+      }
+      .div-tip{
+        flex-shrink: 0;
+        width: 30%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left:20px;
+        margin-top: -23px;
+
+        display: flex;
+        justify-content: center;
+    
+        .legend_item {
+          margin-top: 30px;
+          .item_name {
+            margin-left: 5px;
+            font-size: 10px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #eff0f1;
+          }
+         
+          > img {
+            margin-top: -10px;
+            width: 80px;
+            height: 10px;
+          }
+       
+        }      
+        
+      }
+
+      .div-tip2{
+        flex-shrink: 0;
+        width: 30%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left:20px;
+        margin-top: -23px;
+
+        display: flex;
+        justify-content: center;
+        .cz-tip{
+          display: flex;
+          justify-content: flex-start;
+          margin-top: 30px;
+
+          .cz-tip-dot {        
+            margin-top:2px;
+            width: 20px;
+            height: 10px;
+            background: #1B51FF;
+            border-radius: 4px;
+          } 
+
+          >span{
+            margin-left:10px;
+          }
+        }
+
+        .ld-tip{
+          display: flex;
+          justify-content: flex-start;
+          margin-top: 30px;
+
+          .ld-tip-dot{
+            margin-top:2px;
+            width: 20px;
+            height: 10px;
+            background: #00E5ED;
+            border-radius: 4px;
+          }
+          >span{
+            margin-left:10px;
+          }
+        }
+    
+   
+        
+      }
+    }
+
+    .pie-table{
+      margin-top:0px;
+      display: flex;
+      justify-content: center;
+      align-items:center;
+
+    
+    }
+  
+    .loading-status{
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      margin-top: 500px;
+    
+
+    }
+  }
+  
+}
+
+.card-table{
+  margin:37px 70px 0;
+
+  .table_item{
+    padding:31px 60px 36px 30px;
+
+    .item_name{
+     
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #FFFFFF;
+
+      >img{
+        width:25px;
+        height:14px;
+        padding-right: 10px;
+      }
+    }
+
+    .item_name:hover{
+      cursor: pointer;
+    }
+
+    .item_data{
+      margin-top:31px;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .item_left{
+      align-items: center;
+      display: flex;
+      justify-content: space-around;
+      
+    }
+    .item_right{
+      align-items: center;
+      display: flex;
+      justify-content: space-around;
+      // margin-left:250px;
+    }
+
+  }
+
+  .item_dark{
+    background: #082586;
+    opacity: 0.85;
+  }
+}
+
+.pie-table-total{
+  margin-left:60px;
+  .pie-table-total-count{
+    text-align: center;
+    font-size: 40px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #FFFFFF;
+  }
+
+  .zz{
+    font-size: 35px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #FAC126;
+  }
+
+  .cz{
+    font-size: 35px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #45D97F;
+  }
+
+  .xz{
+    font-size: 35px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #2865FA;
+  }
+
+  .pie-table-title{
+    margin-top:7px;
+    text-align: center;
+    font-size:10px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    min-width:62px;
+  }
+
+  .table-table-title{
+    margin-top:2px;
+  }
+}
+
+.pie-table-line{
+  margin-left:60px;
+  height:30px;
+  width:1px;
+  background-color: #1797FF;
+  opacity: 0.5;
+}
+
+.table-table-line{
+
+}
+
diff --git a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
index d4fe6613..4ca90aff 100644
--- a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
+++ b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
@@ -5,118 +5,160 @@
         <img class="title-icon"
              src="@/assets/img/shuju/title-tip.png" />
         <div class="title-label">
-          人房概览统计&nbsp;&nbsp;
-          <el-cascader v-model="selectAgency"
-                       :options="propTree"
-                       :props="{ checkStrictly: true }"
-                       :show-all-levels="false"
-                       :getCheckedNodes="getCheckedNodes"
-                       clearable
-                       @change="handleCascader">
-          </el-cascader>
+          人房概览统计
+
         </div>
       </div>
+      <div class="card-left-title">本级人房概览数据统计</div>
       <div class="card-echart">
+
         <div class="card-left">
-          <div class="card-left-title">党员年龄统计</div>
-          <div class="card-flex">
-            <div class="echart-wr">
-              <!-- <div class="echart-cicle"></div>  -->
-              <screen-echarts-frame class="echart-org"
-                                    @myChartMethod="pieInitOk"
-                                    ref="ageChart"></screen-echarts-frame>
-              <!-- <div id="echartOrg" class="echart-org"></div> -->
-            </div>
-            <div class="echarts-tips echarts-tips-wd50">
-              <div class="tips-lists">
-                <div v-for="(item, index) in ageItem"
-                     :key="index"
-                     class="tips-items">
-                  <div class="tips-items-title"
-                       :class="'tips-items-title' + item.code">
-                    {{ item.name }}
-                  </div>
-                  <div class="tips-items-num">
-                    <div class="tips-item-count">{{item.value}}</div>
-                    <div class="tips-item-has">{{ item.radio }}</div>
-                  </div>
-                </div>
+          <div v-if="!dataLoading"
+               class="div-chart">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="housePieInitOk"
+                                  ref="housePieChart"></screen-echarts-frame>
+
+            <div class="div-tip">
+              <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
+                   v-for="(item,index) in legendArray"
+                   :key="index">
+                <div class="item_name">{{item.name}}</div>
+                <img :src="item.url" />
 
               </div>
             </div>
 
           </div>
-          <div class="ecahrts-button">
-            <el-button type="warning"
-                       size="small"
-                       @click="handleExport('age')">导出</el-button>
-          </div>
-          <div class="warning-box-bottom">
-            <screen-table :headerList="headerList"
-                          :tableData="ageList"
-                          :headerStyle="headerStyle"
-                          :tableContentStyle="headerStyle"
-                          :visibleLoading="visibleAgeLoading"
-                          :operate="false"
-                          @row="handleClickRow"></screen-table>
-            <div class="pagination">
-              <el-pagination :current-page="agePageNo"
-                             :page-size="agePageSize"
-                             background
-                             layout="prev, pager, next"
-                             @size-change="pageSizeChangeHandleAge"
-                             @current-change="pageCurrentChangeHandleAge"
-                             :total="ageTotal">
-              </el-pagination>
+
+          <div v-if="!dataLoading"
+               class="pie-table">
+            <div class="pie-table-total">
+              <div class="pie-table-total-count">{{houseData.houseTotal}}</div>
+              <div class="pie-table-title">房屋总数</div>
+            </div>
+            <div class="pie-table-line"></div>
+            <div class="pie-table-total ">
+              <div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
+              <div class="pie-table-title">自住房屋数</div>
+            </div>
+            <div class="pie-table-total ">
+              <div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
+              <div class="pie-table-title">出租房屋数</div>
             </div>
+            <div class="pie-table-total ">
+              <div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
+              <div class="pie-table-title">闲置房屋数</div>
+            </div>
+          </div>
+
+          <div class="loading-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
           </div>
+
         </div>
+
         <div class="card-left">
-          <div class="card-left-title">党员学历统计</div>
-          <div class="card-flex">
-            <div class="echart-wr echart-wr100">
-              <!-- <div class="echart-cicle echart-cicle0"></div> -->
-              <!-- <div id="echartType" class="echart-org"></div> -->
-              <screen-echarts-frame class="echart-org"
-                                    @myChartMethod="pieInitOks"
-                                    ref="eduChart"></screen-echarts-frame>
+          <div v-if="!dataLoading"
+               class="div-chart">
+            <screen-echarts-frame class="echart-wr"
+                                  @myChartMethod="userPieInitOk"
+                                  ref="userPieChart"></screen-echarts-frame>
+
+            <div class="div-tip2">
+              <div class="cz-tip">
+                <div class="cz-tip-dot"></div>
+                <span>常住人口数</span>
+              </div>
+              <div class="ld-tip">
+                <div class="ld-tip-dot"></div>
+                <span>流动人口数</span>
+              </div>
             </div>
-            <div v-if="false"
-                 class="echarts-tips">
-              <div class="tips-list">
-                <div v-for="item in eduItem"
-                     :key="item.value"
-                     class="tips-item">
-                  <div class="tips-item-icon"
-                       :style="'background:' + item.color"></div>
-                  <div class="tips-item-text">{{item.name}}</div>
-                </div>
 
-              </div>
+          </div>
+
+          <div v-if="!dataLoading"
+               class="pie-table">
+            <div class="pie-table-total">
+              <div class="pie-table-total-count">{{userData.userTotal}}</div>
+              <div class="pie-table-title">居民总数</div>
+            </div>
+            <div class="pie-table-line"></div>
+            <div class="pie-table-total ">
+              <div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
+              <div class="pie-table-title">常住人口数</div>
             </div>
+            <div class="pie-table-total ">
+              <div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
+              <div class="pie-table-title">流动人口数</div>
+            </div>
+
           </div>
-          <div class="ecahrts-button">
-            <el-button type="warning"
-                       size="small"
-                       @click="handleExport('edu')">导出</el-button>
+
+          <div class="loading-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
           </div>
-          <div class="warning-box-bottom">
-            <screen-table :headerList="headerEduList"
-                          :tableData="eduList"
-                          :headerStyle="headerStyle"
-                          :tableContentStyle="headerStyle"
-                          :visibleLoading="visibleLoading"
-                          :operate="false"
-                          @row="handleClickRow"></screen-table>
-            <div class="pagination">
-              <el-pagination :current-page="pageNo"
-                             :page-size="pageSize"
-                             background
-                             layout="prev, pager, next"
-                             @size-change="pageSizeChangeHandleNew"
-                             @current-change="pageCurrentChangeHandleNew"
-                             :total="total">
-              </el-pagination>
+
+        </div>
+      </div>
+
+      <div v-if="subList.length>0"
+           class="card-left-title">下级人房概览数据统计</div>
+
+      <div v-if="subList.length>0"
+           class="card-table">
+        <div v-for="(item,index) in subList"
+             :key="index"
+             :class="['table_item',index%2 === 0?'item_dark':'']">
+          <div class="item_name"
+               @click="hancleToSubAgency(item)">
+            <img src="@/assets/img/shuju/logo1.png" />
+            <span>{{item.orgName}}</span>
+          </div>
+
+          <div class="item_data">
+            <div class="item_left">
+              <div class="pie-table-total">
+                <div class="pie-table-total-count">{{houseData.houseTotal}}</div>
+                <div class="pie-table-title">房屋总数</div>
+              </div>
+              <div class="pie-table-line"></div>
+              <div class="pie-table-total ">
+                <div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
+                <div class="pie-table-title table-table-title">0.0%</div>
+                <div class="pie-table-title table-table-title">自住房屋数</div>
+              </div>
+              <div class="pie-table-total ">
+                <div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
+                <div class="pie-table-title table-table-title">20%</div>
+                <div class="pie-table-title table-table-title">出租房屋数</div>
+              </div>
+              <div class="pie-table-total ">
+                <div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
+                <div class="pie-table-title table-table-title">99.0%</div>
+                <div class="pie-table-title table-table-title">闲置房屋数</div>
+              </div>
+            </div>
+            <div class="item_right">
+              <div class="pie-table-total">
+                <div class="pie-table-total-count">{{userData.userTotal}}</div>
+                <div class="pie-table-title">居民总数</div>
+              </div>
+              <div class="pie-table-line"></div>
+              <div class="pie-table-total ">
+                <div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
+                <div class="pie-table-title table-table-title">0.00%</div>
+                <div class="pie-table-title table-table-title">常住人口数</div>
+              </div>
+              <div class="pie-table-total ">
+                <div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
+                <div class="pie-table-title table-table-title">99.99%</div>
+                <div class="pie-table-title table-table-title">流动人口数</div>
+              </div>
+
             </div>
           </div>
         </div>
@@ -132,7 +174,9 @@ import screenTable from "../../components/screen-table/index";
 import cptCard from "@/views/modules/visual/cpts/card";
 import nextTick from "dai-js/tools/nextTick";
 import screenEchartsFrame from "../../components/screen-echarts-frame";
-import { pieOption } from './options'
+import ScreenLoading from "@/views/modules/visual/components/screen-loading";
+import { housePieOption } from './options'
+import { userPieOption } from './userOptions'
 
 import * as echarts from 'echarts';
 export default {
@@ -140,355 +184,280 @@ export default {
   components: {
     cptCard,
     screenTable,
-    screenEchartsFrame
+    screenEchartsFrame,
+    ScreenLoading
   },
   data () {
     return {
-      headerList: [
-        { title: "序号", coulmn: 'index' },
-        { title: "姓名", coulmn: 'name' },
-        { title: "年龄", coulmn: 'age' },
-        { title: "手机号码", coulmn: 'mobile' }
-      ],
-      headerStyle: [
-        {
-          width: '50px'
-        },
+      dataLoading: true,
+      orgId: '',
+      orgType: '',
+
+      housePieChartS: null,
+      housePieChart: '',
+      housePieOption: {},
+      housePieInitState: false,
+      houseData: {
+        orgId: '',//组织、网格、小区Id	
+        orgType: '',//组织、网格、小区类型 agency  grid   village	
+        houseTotal: 198000,//房屋总数	
+        zzHouseTotal: 2000,//房屋自住总数	
+        zzHouseRatio: '90%',//房屋自住总数占比（保留两位小数，带百分号的）	
+        czHouseTotal: 30,//房屋出租总数		
+        czHouseRatio: '5%',//房屋出租总数占比（保留两位小数，带百分号的）	
+        xzHouseTotal: 200,//房屋闲置总数		
+        xzHouseRatio: '70%',//房屋闲置总数占比（保留两位小数，带百分号的）	
+      },
+      houseColorArray: ['#FAC126', '#3DDA83', '#2865FA'],
+      housePieData: [],
+
+      legendArray: [
         {
-          'min-width': '100px'
+          name: '自住房屋数',
+          url: require('../../../../../assets/img/shuju/measure/huang@2x.png')
         },
         {
-          'min-width': '100px'
+          name: '出租房屋数',
+          url: require('../../../../../assets/img/shuju/measure/lv@2x.png')
         },
         {
-          'min-width': '160px'
+          name: '闲置房屋数',
+          url: require('../../../../../assets/img/shuju/measure/lan@2x.png')
         }
       ],
-      headerEduList: [
-        { title: "序号", coulmn: 'index' },
-        { title: "姓名", coulmn: 'name' },
-        { title: "学历", coulmn: 'education' },
-        { title: "手机号码", coulmn: 'mobile' }
-      ],
-      tableData: [
-        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
-      ],
-      noInit: false,
-      noEduInit: false,
-      selectAgency: null,
-      ageTotalCount: 0,
-      eduTotalCount: 0,
-      propTree: [],
-      value2: '',
-      visibleAgeLoading: true,
-      visibleLoading: true,
-      agencyId: '',
-      orgType: '',
-      ageCode: '',
-      eduCode: '',
-      pageNo: 1,
-      pageSize: 10,
-      agePageNo: 1,
-      agePageSize: 10,
-      total: 0,
-      ageTotal: 0,
-      eduItem: [
-        {
-          name: '小学',
-          value: 0,
-          color: 'rgba(27, 81, 255, 1)'
-        }, {
-          name: '初中',
-          value: 1,
-          color: 'rgba(0, 229, 237, 1)'
-        }, {
-          name: '高中',
-          value: 2,
-          color: 'rgba(120, 0, 255, 1)'
-        }, {
-          name: '中专',
-          value: 3,
-          color: 'rgba(255, 120, 0, 1)'
-        }, {
-          name: '大专',
-          value: 4,
-          color: 'rgba(255, 186, 0, 1)'
-        }, {
-          name: '本科',
-          value: 5,
-          color: 'rgba(22, 215, 131, 1)'
-        }, {
-          name: '硕士',
-          value: 6,
-          color: 'rgba(42, 0, 255, 1)'
-        }, {
-          name: '博士',
-          value: 7,
-          color: 'rgba(198, 0, 255, 1)'
-        }, {
-          name: '其他',
-          value: 8,
-          color: 'rgba(255, 42, 0, 1)'
-        }
-      ],
-      ageItem: [
+
+      userPieChartS: null,
+      userPieChart: '',
+      userPieOption: {},
+      userPieInitState: false,
+      userData: {
+        orgId: '',//组织、网格、小区Id	
+        orgType: '',//组织、网格、小区类型 agency  grid   village	
+        userTotal: 198000,//居民总数	
+        czUserTotal: 2000,//常住居民总数	
+        czUserRatio: '90%',//常住居民总数占比	
+        ldUserTotal: 30,//流动居民总数		
+        ldUserRatio: '5%',//流动居民总数占比	
+
+      },
+      userColorArray: ['#1B51FF', '#00E5ED'],
+      userPieData: [],
+
+      subList: [
         {
-          name: '50岁以下',
-          value: 1,
-          color: 'rgba(27, 81, 255, 1)'
-        }, {
-          name: '50-59岁',
-          value: 2,
-          color: 'rgba(0, 229, 237, 1)'
-        }, {
-          name: '60-69岁',
-          value: 3,
-          color: 'rgba(120, 0, 255, 1)'
-        }, {
-          name: '70-79岁',
-          value: 4,
-          color: 'rgba(255, 120, 0, 1)'
-        }, {
-          name: '80岁以上',
-          value: 5,
-          color: 'rgba(255, 186, 0, 1)'
+          orgId: '',
         }
-      ],
-      ageList: [],
-      eduList: [],
-      pieAgeChartS: null,
-      pieEduChartSs: null,
-      pieAgeOptions: null,
-      pieEduOptions: null
+      ]
+
     };
   },
   async mounted () {
-    await nextTick(100);
-    await this.getAgencyList()
-    this.getAgeCount(this.$store.state.user.agencyId, 'agency')
-    this.getEduCount(this.$store.state.user.agencyId, 'agency')
-    // this.initAgeCharts()
-    // this.initEduCharts()
-    this.getAgeList(this.$store.state.user.agencyId, 'agency')
-    this.getEduList(this.$store.state.user.agencyId, 'agency')
-    // this.initChartType()
+    this.dataLoading = true
+    await this.getApiData()
+    this.dataLoading = false
   },
   methods: {
-    pieInitOk (dom) {
+    async getApiData () {
+
+
+      await this.getHousechart()
+      await this.getUserchart()
+      await this.getSubuserhouselist()
+
+      this.getHousePie()
+      this.getUserPie()
+    },
+    housePieInitOk (dom) {
       console.log('pie准备好了', dom)
-      this.pieAgeChartS = dom
-      // this.pieInitState = true
+      this.housePieChartS = dom
+      this.housePieInitState = true
 
     },
-    pieInitOks (dom) {
-      console.log('pies准备好了', dom)
-      this.pieEduChartS = dom
-      // this.pieInitState = true
+    userPieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.userPieChartS = dom
+      this.userPieInitState = true
 
     },
-    initAgeCharts () {
-      // const eId = document.getElementById('echartOrg')
-      // let _charts = echarts.init(eId)
-      let option = {
 
+
+    async getHousechart (node, resolve) {
+      if (this.$refs.housePieChart) {
+        this.$refs.housePieChart.showLoading()
       }
-      this.pieAgeOptions = pieOption(this.pieAgeChartS)
-      this.clickAgePie(0)
-      let fun = params => {
-        this.clickAgePie(params.dataIndex)
-      }
-      this.$refs.ageChart.handleClick(fun)
-      // option && this.$refs.pieChart.setOption(option);
 
+      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart";
+      // const url = '/gov/org/house/housechart'
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        // this.houseData = data
+        if (this.$refs.housePieChart) {
+          this.$refs.housePieChart.hideLoading()
+        }
+
+
+      } else {
+        this.houseData = {}
+        this.$message.error(msg);
+      }
     },
-    initEduCharts () {
-      // const eId = document.getElementById('echartOrg')
-      // let _charts = echarts.init(eId)
-      let option = {
 
+    getHousePie () {
+      if (this.housePieInitState) {
+        this.assignHousePieChart()
+      } else {
+        setTimeout(() => {
+          this.getHousePie()
+        }, 500)
       }
-      let legend = {
-        show: true,
-        orient: 'vertical',
-        top: '20%',
-        right: 0,
-        textStyle: {
-          width: 90,
-          color: '#fff',
-          rich: {
-            a: {
-              width: 90
-            }
-          }
-        },
-        formatter: name => {
-          for (let a = 0; a < this.eduItem.length; a++) {
-            // this.data  这个数据中有名称和次数
-            if (this.eduItem[a].name === name) {
-              //两个名称进行对比，取出对应的次数
-              let params1 = name + "\n"; //然后return你需要的legend格式即可
-              console.log(params1);
-              let tmp = params1.split("\n");
-              let res = "" + params1;
-              for (let i in tmp) {
-                res = res.replace(tmp[i], "");
-              }
-              return res + params1;
-            }
+    },
+    assignHousePieChart () {
+
+      if (this.houseData) {
+        this.$refs.housePieChart.setNoData(false)
+        this.$refs.housePieChart.clear()
+        this.housePieData = []
+
+        const _that = this
+        // 获取pieChart配置
+        this.housePieOption = housePieOption(this.housePieChartS)
+        // let maxValue = this.housePieData[0].total
+        // let maxIndex = 0
+
+        let obj1 = {
+          name: '自住房屋数',
+          value: 20.1,
+          selected: true
+        }
+        let obj2 = {
+          name: '出租房屋数',
+          value: 20.3
+        }
+        let obj3 = {
+          name: '闲置房屋数',
+          value: 20
+        }
+
+        this.housePieData.push(obj1)
+        this.housePieData.push(obj2)
+        this.housePieData.push(obj3)
+
+        this.housePieOption.title.text = this.houseData.houseTotal
+        this.housePieOption.series[1].itemStyle = {
+          color: function (params) {
+            return _that.houseColorArray[params.dataIndex]
           }
         }
+
+        let fun = function (params) {
+          _that.clickHousePie(params.dataIndex)
+
+        }
+        this.$refs.housePieChart.handleClick(fun)
+        this.clickHousePie(0)
+      } else {
+        this.$refs.housePieChart.setNoData(true)
       }
-      this.pieEduOptions = pieOption(this.pieEduChartS)
-      this.pieEduOptions.legend = { ...legend }
-      // this.pieEduOptions.series[1].width = 400
-      this.clickEduPie(0)
-      let fun = params => {
-        this.clickEduPie(params.dataIndex)
+    },
+
+    async getUserchart (node, resolve) {
+      if (this.$refs.userPieChart) {
+        this.$refs.userPieChart.showLoading()
+      }
+      const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart";
+      // const url = '/epmetuser/icresiuser/userchart'
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        // this.userData = data
+        if (this.$refs.userPieChart) {
+          this.$refs.userPieChart.hideLoading()
+        }
+      } else {
+        this.userData = {}
+        this.$message.error(msg);
       }
-      this.$refs.eduChart.handleClick(fun)
-      // this.noInit = true
-      // option && this.$refs.pieChart.setOption(option);
+    },
 
+    getUserPie () {
+      if (this.userPieInitState) {
+        this.assignUserPieChart()
+      } else {
+        setTimeout(() => {
+          this.getUserPie()
+        }, 500)
+      }
     },
-    initChartType () {
-      const eId = document.getElementById('echartType')
-      let _charts = echarts.init(eId)
+    assignUserPieChart () {
+
+      if (this.userData) {
+        this.$refs.userPieChart.setNoData(false)
+        this.$refs.userPieChart.clear()
+        this.userPieData = []
+
+        const _that = this
+        // 获取pieChart配置
+        this.userPieOption = userPieOption(this.userPieChartS)
+        // let maxValue = this.userPieData[0].total
+        // let maxIndex = 0
+
+        let obj1 = {
+          name: '常住人口数',
+          value: 20.1,
+          selected: true
+        }
+        let obj2 = {
+          name: '流动人口树',
+          value: 20.3
+        }
 
-      let option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          show: true,
-          orient: 'vertical',
-          top: '20%',
-          right: 0,
-          textStyle: {
-            width: 90,
-            color: '#fff',
-            rich: {
-              a: {
-                width: 90
-              }
-            }
-          },
-          formatter: name => {
-            for (let a = 0; a < this.eduItem.length; a++) {
-              // this.data  这个数据中有名称和次数
-              if (this.eduItem[a].name === name) {
-                //两个名称进行对比，取出对应的次数
-                let params1 = name + "\n"; //然后return你需要的legend格式即可
-                console.log(params1);
-                let tmp = params1.split("\n");
-                let res = "" + params1;
-                for (let i in tmp) {
-                  res = res.replace(tmp[i], "");
-                }
-                return res + params1;
-              }
-            }
-          }
-        },
-        title: {
-          text: '12000',  //图形标题，配置在中间对应效果图的80%
-          subtext: '总数',
-          left: 196,
-          top: "center",
-          textAlign: 'center',
-          textStyle: {
-            color: "#fff",
-            fontSize: 28,
-            align: "center"
-          },
-          subtextStyle: {
-            fontSize: 16,
-            color: '#fff',
-            align: 'center'
-          }
-        },
-        series: [
-          {
-            // name: 'Access From',
-            type: 'pie',
-            // center: ['50%', '50%'],
-            radius: ['40%', '60%'],
-            avoidLabelOverlap: true,
-            // top: top + '%',
-            // height: '80%',
-            // left: 0,
-            width: 400,
-            label: {
-              position: 'outside',
-              alignTo: 'edge',
-              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
-              minMargin: 5,
-              edgeDistance: 20,
-              lineHeight: 15,
-              color: '#fff',
-              fontSize: 15,
-              rich: {
-                name: {
-                  padding: [0, 6, 0, 6]
-                },
-                a: {
-                  fontSize: 15,
-                  color: '#fff',
-                  padding: [0, 6, 0, 6]
-                },
-                r: {
-                  backgroundColor: 'auto',
-                  borderRadius: 6,
-                  width: 6,
-                  height: 6,
-                  // padding: [3, 3, 0, -12]
-                }
-              }
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '14',
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: true,
-              length: 20,
-              length2: 0,
-              maxSurfaceAngle: 80
-            },
-            labelLayout: function (params) {
-              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
-              const points = params.labelLinePoints;
-              // Update the end point.
-              points[2][0] = isLeft
-                ? params.labelRect.x
-                : params.labelRect.x + params.labelRect.width;
-              return {
-                labelLinePoints: points
-              };
-            },
-            data: this.eduItem
+        this.userPieData.push(obj1)
+        this.userPieData.push(obj2)
+
+        this.userPieOption.title.text = this.userData.userTotal
+        this.userPieOption.series[1].itemStyle = {
+          color: function (params) {
+            return _that.userColorArray[params.dataIndex]
           }
-        ]
-      }
-      option && _charts.setOption(option);
+        }
 
+        let fun = function (params) {
+          _that.clickUserPie(params.dataIndex)
+
+        }
+        this.$refs.userPieChart.handleClick(fun)
+        this.clickUserPie(0)
+      } else {
+        this.$refs.userPieChart.setNoData(true)
+      }
     },
-    clickAgePie (seriesIndex) {
-      let _code = ''
-      let isClick = false
-      console.log('seriesIndex---', seriesIndex)
-      this.ageItem.forEach((element, index) => {
-        if (index === seriesIndex) {
-          _code = element.code
 
-          if (!this.noInit) isClick = false
-          else {
-            element.isClick = !element.isClick
-            isClick = element.isClick
-          }
+    async getSubuserhouselist (node, resolve) {
+      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist";
+      // const url = '/gov/org/house/subuserhouselist'
+      let params = {
+        orgId: this.orgId,
+        orgType: this.orgType
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.subList = data
 
+
+      } else {
+      }
+    },
+
+    async clickHousePie (seriesIndex) {
+      this.housePieData.forEach((element, index) => {
+        if (index === seriesIndex) {
           element.label = {
             show: true,
 
@@ -500,9 +469,9 @@ export default {
             }
 
           };
-          console.log('zlcm', element)
+          console.log('zhilma')
+
         } else {
-          element.isClick = false
           element.label = {
             show: false,
 
@@ -518,34 +487,15 @@ export default {
 
         }
       });
-      this.ageCode = isClick && _code || ''
-      this.pieAgeOptions.title.text = this.ageTotalCount
-      this.pieAgeOptions.series[1].data = this.ageItem
-      // this.$refs.pieChart.hideLoading()
-      this.$refs.ageChart.setOption(this.pieAgeOptions)
-      if (this.noInit) {
-        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
-        const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
-        console.log('zlcm---isClick', isClick)
-        this.agePageNo = 1
-        this.getAgeList(_arr[0], orgType, isClick && _code || '')
-      }
-      this.noInit = true
+      this.housePieOption.series[1].data = this.housePieData
+      // this.$refs.housePieChart.hideLoading()
+      this.$refs.housePieChart.setOption(this.housePieOption)
+
 
     },
-    clickEduPie (seriesIndex) {
-      let _code = ''
-      let isClick = false
-      this.eduItem.forEach((element, index) => {
+    async clickUserPie (seriesIndex) {
+      this.userPieData.forEach((element, index) => {
         if (index === seriesIndex) {
-          _code = element.code
-
-          if (!this.noEduInit) isClick = false
-          else {
-            element.isClick = !element.isClick
-            isClick = element.isClick
-          }
-
           element.label = {
             show: true,
 
@@ -557,9 +507,9 @@ export default {
             }
 
           };
-          console.log('zlcm')
+          console.log('zhilma')
+
         } else {
-          element.isClick = false
           element.label = {
             show: false,
 
@@ -575,275 +525,23 @@ export default {
 
         }
       });
-      this.eduCode = isClick && _code || ''
-      this.pieEduOptions.title.text = this.eduTotalCount
-      this.pieEduOptions.series[1].data = this.eduItem
-      // this.$refs.pieChart.hideLoading()
-      this.$refs.eduChart.setOption(this.pieEduOptions)
-      if (this.noEduInit) {
-        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
-        const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
-        this.pageNo = 1
-        this.getEduList(_arr[0], orgType, isClick && _code || '')
-      }
-      this.noEduInit = true
+      this.userPieOption.series[1].data = this.userPieData
+      // this.$refs.userPieChart.hideLoading()
+      this.$refs.userPieChart.setOption(this.userPieOption)
 
-
-    },
-    async getAgeCount (orgId, orgType) {
-      const url = "/epmetuser/icresiuser/partymemberagestatistics";
-      let params = {
-        orgId,
-        orgType
-      };
-      const { data, code, msg } = await requestPost(url, params);
-      if (code === 0) {
-        const colorList = [
-          {
-            name: '50岁以下',
-            value: 1,
-            color: '#FAC126'
-          }, {
-            name: '50-59岁',
-            value: 2,
-            color: '#3DDA83'
-          }, {
-            name: '60-69岁',
-            value: 3,
-            color: '#A800FF'
-          }, {
-            name: '70-79岁',
-            value: 4,
-            color: '#2865FA'
-          }, {
-            name: '80岁以上',
-            value: 5,
-            color: '#00DAD2'
-          }
-        ]
-        this.ageItem = data.map((item, index) => {
-          return {
-            ...item,
-            name: item.label,
-            isClick: false,
-            itemStyle: {
-              color: colorList[index].color
-            }
-          }
-        })
-        this.ageTotalCount = 0
-        data.forEach(item => {
-          this.ageTotalCount += Number(item.value)
-        })
-        this.initAgeCharts()
-      } else {
-      }
-    },
-    async getEduCount (orgId, orgType) {
-      const url = "/epmetuser/icresiuser/partymembereducationstatistics";
-      let params = {
-        orgId,
-        orgType
-      };
-      const { data, code, msg } = await requestPost(url, params);
-      if (code === 0) {
-        this.eduItem = data.map(item => {
-          return {
-            ...item,
-            name: item.label,
-            isClick: false
-          }
-        })
-        this.eduTotalCount = 0
-        data.forEach(item => {
-          this.eduTotalCount += Number(item.value)
-        })
-        this.initEduCharts()
-      } else {
-      }
+      // this.getTable()
     },
-    async getAgeList (orgId, orgType, _code) {
 
-      this.visibleAgeLoading = true
-      const url = "/epmetuser/icresiuser/partymemberagelist";
-      let params = {
-        orgId,
-        orgType,
-        code: _code || '',
-        pageNo: this.agePageNo,
-        pageSize: this.agePageSize
-      };
-      const { data, code, msg } = await requestPost(url, params);
-      if (code === 0) {
-        this.ageList = data.list.map((item, index) => {
-          return {
-            ...item,
-            index: index + 1
-          }
-        })
-        this.ageTotal = data.total
-      } else {
-        this.$message.error(msg)
-      }
-      // if (_code == 0 || _code) this.noInit = true
-      this.visibleAgeLoading = false
-    },
-    async getEduList (orgId, orgType, _code) {
-      this.visibleLoading = true
-      const url = "/epmetuser/icresiuser/partymembereducationlist";
-      let params = {
-        orgId,
-        orgType,
-        code: _code || '',
-        pageNo: this.pageNo,
-        pageSize: this.pageSize
-      };
-      const { data, code, msg } = await requestPost(url, params);
-      if (code === 0) {
-        this.eduList = data.list.map((item, index) => {
-          return {
-            ...item,
-            index: index + 1
-          }
-        })
-        this.total = data.total
-      } else {
-        this.$message.error(msg)
-      }
-      this.visibleLoading = false
-    },
-    async getAgencyList (node, resolve) {
-      // const url = "/gov/org/customeragency/staffinagencylist";
-      const url = '/gov/org/customeragency/agencygridtree'
-      // let params = {
-      //   agencyId: this.$store.state.user.agencyId,
-      // };
-      const { data, code, msg } = await requestPost(url);
-      if (code === 0) {
-        console.log('data-org----o', data)
-        this.selectAgency = [`${data.agencyId}-${data.level}`]
-        this.orgType = data.level
-        this.agencyId = data.agencyId
-        let arr = []
-        arr.push(data)
-        this.propTree = arr && this.getTreeData(arr)
+    hancleToSubAgency (item) {
+
+      this.orgId = item.orgId
+      this.orgType = item.orgType
+      this.getApiData()
+
+    }
+
+
 
-      } else {
-      }
-    },
-    getTreeData (data) {
-      if (!Array.isArray(data)) return []
-      let arr = data.map(item => {
-        let _item = {}
-        if (item.subAgencyList) {
-          if (item.subAgencyList.length === 0) {
-            _item = {
-              label: item.agencyName,
-              value: item.agencyId + '-' + item.level,
-              level: item.level,
-              children: undefined
-            }
-          } else _item = {
-            label: item.agencyName,
-            value: item.agencyId + '-' + item.level,
-            level: item.level,
-            children: this.getTreeData(item.subAgencyList)
-          }
-        } else {
-          _item = {
-            label: item.agencyName,
-            value: item.agencyId + '-' + item.level,
-            level: item.level,
-          }
-        }
-        return _item
-      })
-      return arr
-    },
-    handleClickRow (val) {
-      console.log('click-row----', val)
-      this.$router.push({
-        path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
-      });
-    },
-    handleCascader (val) {
-      console.log('val-vvv', val)
-      const _arr = val[val.length - 1].split('-')
-      const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
-      this.agencyId = _arr[0]
-      this.orgType = orgType
-      this.noInit = false
-      this.noEduInit = false
-      this.getAgeCount(_arr[0], orgType)
-      this.getEduCount(_arr[0], orgType)
-      this.getAgeList(_arr[0], orgType)
-      this.getEduList(_arr[0], orgType)
-    },
-    getCheckedNodes (val) {
-      console.log('val-nnn', val)
-    },
-    lazyLoad (node, resolve) {
-      setTimeout(() => {
-        this.getAgeList(node, resolve)
-      }, 500)
-    },
-    pageSizeChangeHandleAge (val) {
-      this.agePageNo = 1
-      this.agePageSize = val
-      this.getAgeList(this.agencyId, this.orgType, this.ageCode)
-    },
-    pageCurrentChangeHandleAge (val) {
-      this.agePageNo = val
-      this.getAgeList(this.agencyId, this.orgType, this.ageCode)
-    },
-    pageSizeChangeHandleNew (val) {
-      this.pageNo = 1;
-      this.pageSize = val;
-      this.getEduList(this.agencyId, this.orgType, this.eduCode)
-    },
-    pageCurrentChangeHandleNew (val) {
-      this.pageNo = val;
-      this.getEduList(this.agencyId, this.orgType, this.eduCode)
-    },
-    async handleExport (type) {
-      const urls = {
-        age: '/epmetuser/icresiuser/partymemberagelist/export',
-        edu: '/epmetuser/icresiuser/partymembereducationlist/export'
-      }
-      const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
-      const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
-      let params = {
-        orgId: _arr[0],
-        orgType: orgType,
-        code: type == 'age' ? this.ageCode : this.eduCode,
-      }
-      // .post('epmetuser/icresiuser/exportExcel', params)
-      await this.$http({
-        method: 'POST',
-        url: urls[type],
-        responseType: 'blob',
-        data: params
-      })
-        .then(res => {
-          console.log('resllll', res)
-          let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
-          console.log('filename', fileName)
-          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
-          var url = window.URL.createObjectURL(blob)
-          var aLink = document.createElement('a')
-          aLink.style.display = 'none'
-          aLink.href = url
-          aLink.setAttribute('download', fileName)
-          document.body.appendChild(aLink)
-          aLink.click()
-          document.body.removeChild(aLink) //下载完成移除元素
-          window.URL.revokeObjectURL(url) //释放掉blob对象
-        })
-        .catch((err) => {
-          console.log('获取导出失败', err)
-          return this.$message.error('网络错误')
-        })
-    },
   },
 };
 </script>
@@ -853,247 +551,9 @@ export default {
   src="@/assets/scss/modules/visual/warning.scss"
   scoped
 ></style>
-<style lang="scss" scoped>
-.card-title {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  .title-icon {
-    display: block;
-    width: 46px;
-    height: 34px;
-    box-sizing: border-box;
-    margin-right: 6px;
-  }
-  ::v-deep .el-dropdown {
-    font-size: 18px;
-    color: #fff;
-    font-weight: 800;
-  }
-  .title-time {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    margin-left: 30px;
-    font-size: 14px;
-    color: #fff;
-    .title-time-label {
-      margin-right: 10px;
-    }
-    ::v-deep .el-date-editor--month {
-      width: 100px;
-      .el-input__inner {
-        width: 100px;
-        height: 24px;
-        box-sizing: border-box;
-        padding: 0;
-        font-size: 14px;
-        color: #fff;
-        line-height: 24px;
-        text-align: center;
-        background: #06186d;
-        border: 1px solid #1a64cc;
-        border-radius: 2px;
-      }
-      .el-input__prefix {
-        display: none;
-      }
-      .el-input__suffix {
-        right: 0;
-        .el-input__icon {
-          line-height: 24px;
-        }
-      }
-    }
-  }
-  .title-label {
-    font-size: 20px;
-    font-weight: 800;
-    ::v-deep .el-input {
-      width: 180px;
-      .el-input__inner {
-        font-size: 18px;
-        // font-weight: 800;
-        color: #fff;
-        background: #06186d;
-        border: 1px solid #1a64cc;
-      }
-      .el-icon-arrow-down::before {
-        content: "\e790";
-      }
-    }
-  }
-}
-.card-echart {
-  display: flex;
-  margin-top: 40px;
-  height: 100%;
-  .card-left {
-    position: relative;
-    flex: 1;
-    // display: flex;
-    height: 100%;
-    .card-flex {
-      width: 100%;
-      display: flex;
-    }
-  }
-}
-.card-left-title {
-  position: relative;
-  padding-left: 40px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #fff;
-}
-.card-left-title::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 20px;
-  width: 12px;
-  height: 12px;
-  box-sizing: border-box;
-  margin-top: -6px;
-  background: #2865fa;
-  border-radius: 50%;
-}
-.echart-wr {
-  position: relative;
-  flex-shrink: 0;
-  width: 50%;
-  height: 320px;
-  box-sizing: border-box;
-  .echart-org {
-    width: 100%;
-    height: 100%;
-  }
-  .echart-cicle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 240px;
-    height: 240px;
-    box-sizing: border-box;
-    margin-top: -120px;
-    margin-left: -120px;
-    border: 1px dashed rgba(0, 96, 240, 1);
-    border-radius: 50%;
-  }
-  .echart-cicle0 {
-    left: 80px;
-    margin-left: 0;
-  }
-}
-.echart-wr100 {
-  width: 70%;
-}
-.echarts-tips {
-  width: 40%;
-  // flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.echarts-tips-wd50 {
-  width: 320px;
-}
-.tips-list,
-.tips-item,
-.tips-lists,
-.tips-items-num {
-  display: flex;
-  align-items: center;
-}
-.tips-list {
-  // width: 100%;
-  // height: 100%;
-  flex-wrap: wrap;
-  // justify-content: center;
-  .tips-item {
-    // flex: 1;
-    width: 50%;
-    margin-top: 20px;
-    // margin-right: 40px;
-    cursor: pointer;
-    .tips-item-icon {
-      width: 20px;
-      height: 10px;
-      box-sizing: border-box;
-      margin-right: 8px;
-      background: #1b51ff;
-      border-radius: 2px;
-    }
-    .tips-item-text {
-      font-size: 16px;
-      color: #d2e7ff;
-    }
-  }
-}
-.tips-lists {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 30px 0 0 30px;
-  flex-wrap: wrap;
-  .tips-items {
-    margin-bottom: 30px;
-    margin-right: 40px;
-    // width: 50%;
-    cursor: pointer;
-    .tips-items-title {
-      position: relative;
-      width: 100px;
-      height: 26px;
-      box-sizing: border-box;
-      padding-left: 6px;
-      font-size: 16px;
-      color: #eff0f1;
-      background: url("../../../../../assets/img/shuju/measure/huang@2x.png")
-        no-repeat left bottom;
-      &1 {
-        background: url("../../../../../assets/img/shuju/measure/lv@2x.png")
-          no-repeat left bottom;
-      }
-      &2 {
-        background: url("../../../../../assets/img/shuju/measure/zi@2x.png")
-          no-repeat left bottom;
-      }
-      &3 {
-        background: url("../../../../../assets/img/shuju/measure/lan@2x.png")
-          no-repeat left bottom;
-      }
-      &4 {
-        background: url("../../../../../assets/img/shuju/measure/lanlv@2x.png")
-          no-repeat left bottom;
-      }
-    }
-    .tips-items-num {
-      justify-content: space-between;
-      box-sizing: border-box;
-      margin-top: 10px;
-      // padding-right: 30px;
-      font-size: 20px;
-      .tips-item-has {
-        font-size: 14px;
-      }
-    }
-  }
-}
-
-.warning-box-bottom {
-  height: calc(100% - 500px);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0 30px;
-  // overflow-y: scroll;
-}
-.ecahrts-button {
-  width: 100%;
-  padding-right: 30px;
-  text-align: right;
-  ::v-deep .el-button--warning {
-    background: linear-gradient(90deg, #0863ea, #3b9ffc);
-    border: 0;
-  }
-}
-</style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/houseStatic.scss"
+  scoped
+></style>
+
diff --git a/src/views/modules/visual/basicinfo/houseStatic/options.js b/src/views/modules/visual/basicinfo/houseStatic/options.js
index ba0ddd33..7b841c76 100644
--- a/src/views/modules/visual/basicinfo/houseStatic/options.js
+++ b/src/views/modules/visual/basicinfo/houseStatic/options.js
@@ -1,56 +1,51 @@
 
-export function pieOption (_charts) {
-  const center= ['50%', '50%']
+export function housePieOption (_charts) {
+  const center= ['50%', '200px']
     return {
       title: {
         text: '0',
-        top: 125,
-        left: 196,
-        textAlign: 'center',
+        top: 170,
+        left: 'center',
         textStyle: {
           width: '100%',
-          fontSize: 32,
+          fontSize: 30,
           color: '#FFFFFF',
-          fontWeight: 400,
-          align: 'center'
+          fontWeight: 400
         },
         itemGap: 5,
-        subtext: '总数',
+        subtext: '房屋总数',
         subtextStyle: {
-          fontSize: 16,
+          fontSize: 20,
           color: '#fff',
-          fontWeight: 400,
-          align: 'center'
+          fontWeight: 400
         }
       },
       tooltip: {
         show: false
       },
-      legend: {
-        top: 500,
-        bottom: 0,
-        itemWidth: 20,
-        itemHeight: 10,
-        textStyle: {
-          color: '#D2E7FF',
-          fontSize: 16,
-          lineHeight: 20,
-        },
+      // legend: {
+      //   top: 500,
+      //   bottom: 0,
+      //   itemWidth: 20,
+      //   itemHeight: 10,
+      //   textStyle: {
+      //     color: '#D2E7FF',
+      //     fontSize: 16,
+      //     lineHeight: 20,
+      //   },
       
-      },
+      // },
       series: [
         // 外侧圆环
         {
           type: 'pie',
           // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
-          startAngle: 90,
+          startAngle: 0,
           hoverAnimation: false,
           // tooltip: {
           // },
           center: center,
-          left: 'left',
-          radius: ['60%', '70%'],
-          width: 400,
+          radius: ['61%', '61.3%'],
           label: {
             show: false
           },
@@ -58,7 +53,7 @@ export function pieOption (_charts) {
             show: false
           },
           data: [{
-            value: 480,
+            value: 360,
             itemStyle: {
               color: 'rgba(40, 101, 250, 0)',
               width:0,
@@ -73,14 +68,16 @@ export function pieOption (_charts) {
         // 突出的
         {
           hoverAnimation: false,
+          // name: 'Access From',
           type: 'pie',
           center: center,
-          radius: ['40%', '60%'],
+          radius: ['40%', '54%'],
           avoidLabelOverlap: false,
+          // top: top + '%',
+          // height: '80%',
           selectedMode: 'single',
-          left: 'left',
-          width: 400,
-          startAngle: 90,
+          left: 'center',
+          width: 480,
           label: {
             // show: false,
             position: 'outside',
@@ -91,14 +88,14 @@ export function pieOption (_charts) {
             edgeDistance: 1,
             lineHeight: 15,
             color: '#fff',
-            fontSize: 12,
+            fontSize: 10,
             // distanceToLabelLine: -60,
             rich: {
               name: {
                 padding: [0, 6, 0, 6]
               },
               a: {
-                fontSize: 30,
+                fontSize: 25,
                 color: '#fff',
                 padding: [0, 6, 6, 6]
               },
@@ -114,7 +111,7 @@ export function pieOption (_charts) {
           labelLine: {
             show: false,
             smooth: 0.2,
-            length: 30,
+            length: 50,
             length2: 0,
             maxSurfaceAngle: 80
           },
@@ -134,7 +131,13 @@ export function pieOption (_charts) {
             };
           },
           itemStyle: {
-            
+            // color:function(params) {
+            // //自定义颜色
+            // var colorList = [          
+            //       '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
+            //   ];
+            //   return colorList[params.dataIndex]
+            // }
           },
           data: [],
   
@@ -143,30 +146,31 @@ export function pieOption (_charts) {
            {
             type: 'pie',
             // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
-            startAngle: 90,
+            startAngle: 0,
             hoverAnimation: false,
             center: center,
-            left: 'left',
-            width: 400,
             // tooltip: {
             // },
-            radius: ['0%', '25%'],
+            radius: ['0%', '27%'],
             label: {
             
                 show: false
              
             },
             labelLine: {
+             
                 show: false
             
             },
-            data: [
-              {
-                value: 360,
-                itemStyle: {
+            data: [{
+              value: 360,
+              itemStyle: {
+                normal: {
                   color: 'rgba(8, 37, 134, 1)',
+              
                 }
               }
+            }
             ]
           },
       ]
diff --git a/src/views/modules/visual/basicinfo/houseStatic/userOptions.js b/src/views/modules/visual/basicinfo/houseStatic/userOptions.js
new file mode 100644
index 00000000..f251cf4e
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/houseStatic/userOptions.js
@@ -0,0 +1,182 @@
+
+export function userPieOption (_charts) {
+  const center= ['50%', '200px']
+    return {
+      title: {
+        text: '0',
+        top: 170,
+        left: 'center',
+        textStyle: {
+          width: '100%',
+          fontSize: 30,
+          color: '#FFFFFF',
+          fontWeight: 400
+        },
+        itemGap: 5,
+        subtext: '房屋总数',
+        subtextStyle: {
+          fontSize: 20,
+          color: '#fff',
+          fontWeight: 400
+        }
+      },
+      tooltip: {
+        show: false
+      },
+      // legend: {
+      //   orient: 'vertical',
+      //   right: 0,
+      //   top: 200,
+      //   bottom: 20,
+      //   itemWidth: 20,
+      //   itemHeight: 10,
+      //   textStyle: {
+      //     color: '#D2E7FF',
+      //     fontSize: 16,
+      //     lineHeight: 20,
+      //   },
+      
+      // },
+      series: [
+        // 外侧圆环
+        {
+          type: 'pie',
+          // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+          startAngle: 0,
+          hoverAnimation: false,
+          // tooltip: {
+          // },
+          center: center,
+          radius: ['61%', '61.3%'],
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          data: [{
+            value: 360,
+            itemStyle: {
+              color: 'rgba(40, 101, 250, 0)',
+              width:0,
+              borderColor: 'rgba(40, 101, 250, 0.5)',
+              borderWidth: 1,
+              borderType: 'dotted'
+            }
+          }
+          ]
+        },
+  
+        // 突出的
+        {
+          hoverAnimation: false,
+          // name: 'Access From',
+          type: 'pie',
+          center: center,
+          radius: ['40%', '54%'],
+          avoidLabelOverlap: false,
+          // top: top + '%',
+          // height: '80%',
+          selectedMode: 'single',
+          left: 'center',
+          width: 480,
+          label: {
+            // show: false,
+            position: 'outside',
+            alignTo: 'edge',
+            // formatter: '{a|{c}}\n\n{name|{b}}',
+            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            minMargin: 5,
+            edgeDistance: 1,
+            lineHeight: 15,
+            color: '#fff',
+            fontSize: 10,
+            // distanceToLabelLine: -60,
+            rich: {
+              name: {
+                padding: [0, 6, 0, 6]
+              },
+              a: {
+                fontSize: 25,
+                color: '#fff',
+                padding: [0, 6, 6, 6]
+              },
+              r: {
+                backgroundColor: 'auto',
+                borderRadius: 6,
+                width: 6,
+                height: 6,
+                // padding: [3, 3, 0, -12]
+              }
+            }
+          },
+          labelLine: {
+            show: false,
+            smooth: 0.2,
+            length: 50,
+            length2: 0,
+            maxSurfaceAngle: 80
+          },
+          labelLayout: function (params) {
+            
+            const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+            const points = params.labelLinePoints;
+            // Update the end point.
+            if (points) {
+              points[2][0] = isLeft
+              ? params.labelRect.x
+              : params.labelRect.x + params.labelRect.width;
+            }
+            
+            return {
+              labelLinePoints: points
+            };
+          },
+          itemStyle: {
+            // color:function(params) {
+            // //自定义颜色
+            // var colorList = [          
+            //       '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
+            //   ];
+            //   return colorList[params.dataIndex]
+            // }
+          },
+          data: [],
+  
+        },
+           // 中间圆环
+           {
+            type: 'pie',
+            // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+            startAngle: 0,
+            hoverAnimation: false,
+            center: center,
+            // tooltip: {
+            // },
+            radius: ['0%', '27%'],
+            label: {
+            
+                show: false
+             
+            },
+            labelLine: {
+             
+                show: false
+            
+            },
+            data: [{
+              value: 360,
+              itemStyle: {
+                normal: {
+                  color: 'rgba(8, 37, 134, 1)',
+              
+                }
+              }
+            }
+            ]
+          },
+      ]
+  
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/views/modules/visual/communityGovern/typeAnalyze.vue b/src/views/modules/visual/communityGovern/typeAnalyze.vue
index 7466c3d5..d5ec1516 100644
--- a/src/views/modules/visual/communityGovern/typeAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/typeAnalyze.vue
@@ -76,7 +76,7 @@
 </template>
 
 <script>
-import { Loading } from "element-ui"; //引入Loading服务
+
 import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
@@ -84,7 +84,7 @@ import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts
 import projectInfo from "./cpt/project-info";
 import ScreenLoading from "@/views/modules/visual/components/screen-loading";
 import { pieOption } from './typePieOption.js'
-import nextTick from 'dai-js/tools/nextTick'
+
 
 export default {
   name: "HomeMap",

From b2d039a090ab8a84ec87904213b5e714d23aaf62 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Mon, 25 Apr 2022 11:05:49 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E4=BA=BA=E6=88=BF=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scss/modules/visual/houseStatic.scss      |  26 +++-
 .../basicinfo/houseStatic/houseStatic.vue     | 146 +++++++++++++-----
 .../visual/basicinfo/houseStatic/options.js   |   6 +-
 .../basicinfo/houseStatic/userOptions.js      |   6 +-
 4 files changed, 139 insertions(+), 45 deletions(-)

diff --git a/src/assets/scss/modules/visual/houseStatic.scss b/src/assets/scss/modules/visual/houseStatic.scss
index b2985d0a..4d9c6da6 100644
--- a/src/assets/scss/modules/visual/houseStatic.scss
+++ b/src/assets/scss/modules/visual/houseStatic.scss
@@ -1,3 +1,11 @@
+.warning-box{
+  padding: 0 21px 20px 24px
+}
+.no-data{
+  margin-top:50px;
+  display:flex;
+  justify-content: center;
+}
 .card-title {
   
   display: flex;
@@ -205,7 +213,7 @@
       width: 100%;
       display: flex;
       justify-content: center;
-      margin-top: 500px;
+      margin-top: 200px;
     
 
     }
@@ -247,12 +255,16 @@
       align-items: center;
       display: flex;
       justify-content: space-around;
+      flex-grow:0;
+      flex-shrink:0;
       
     }
     .item_right{
       align-items: center;
       display: flex;
       justify-content: space-around;
+      flex-grow:0;
+      flex-shrink:0;
       // margin-left:250px;
     }
 
@@ -265,8 +277,9 @@
 }
 
 .pie-table-total{
-  margin-left:60px;
+  margin-left:40px;
   .pie-table-total-count{
+    min-width: 98px;
     text-align: center;
     font-size: 40px;
     font-family: PingFang SC;
@@ -295,6 +308,13 @@
     color: #2865FA;
   }
 
+  .colorwhite{
+    font-size: 35px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #ffffff;
+  }
+
   .pie-table-title{
     margin-top:7px;
     text-align: center;
@@ -311,7 +331,7 @@
 }
 
 .pie-table-line{
-  margin-left:60px;
+  margin-left:40px;
   height:30px;
   width:1px;
   background-color: #1797FF;
diff --git a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
index 4ca90aff..85b3c7f9 100644
--- a/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
+++ b/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue
@@ -1,5 +1,17 @@
 <template>
   <div class="warning-box">
+    <!-- 组织路由 -->
+    <div class="div_top">
+      <div class="router_line"></div>
+      <div class="div_router">
+        <span class="router_parents"
+              v-for="(item,index) in runAgencyArray"
+              @click="handleClickAgency(index)"
+              :key="index">{{item.orgName}}<span class="arrow">></span></span>
+
+        <span class="router_child">{{orgName}}</span>
+      </div>
+    </div>
     <cpt-card>
       <div class="card-title">
         <img class="title-icon"
@@ -105,8 +117,7 @@
         </div>
       </div>
 
-      <div v-if="subList.length>0"
-           class="card-left-title">下级人房概览数据统计</div>
+      <div class="card-left-title">下级人房概览数据统计</div>
 
       <div v-if="subList.length>0"
            class="card-table">
@@ -114,7 +125,7 @@
              :key="index"
              :class="['table_item',index%2 === 0?'item_dark':'']">
           <div class="item_name"
-               @click="hancleToSubAgency(item)">
+               @click="handleToSubAgency(item)">
             <img src="@/assets/img/shuju/logo1.png" />
             <span>{{item.orgName}}</span>
           </div>
@@ -122,40 +133,40 @@
           <div class="item_data">
             <div class="item_left">
               <div class="pie-table-total">
-                <div class="pie-table-total-count">{{houseData.houseTotal}}</div>
+                <div class="pie-table-total-count">{{item.houseTotal}}</div>
                 <div class="pie-table-title">房屋总数</div>
               </div>
               <div class="pie-table-line"></div>
               <div class="pie-table-total ">
-                <div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
-                <div class="pie-table-title table-table-title">0.0%</div>
+                <div class="pie-table-total-count colorwhite">{{item.zzHouseTotal}}</div>
+                <div class="pie-table-title table-table-title">{{item.zzHouseRatio+'%'}}</div>
                 <div class="pie-table-title table-table-title">自住房屋数</div>
               </div>
               <div class="pie-table-total ">
-                <div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
-                <div class="pie-table-title table-table-title">20%</div>
+                <div class="pie-table-total-count colorwhite">{{item.czHouseTotal}}</div>
+                <div class="pie-table-title table-table-title">{{item.czHouseRatio+'%'}}</div>
                 <div class="pie-table-title table-table-title">出租房屋数</div>
               </div>
               <div class="pie-table-total ">
-                <div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
-                <div class="pie-table-title table-table-title">99.0%</div>
+                <div class="pie-table-total-count colorwhite">{{item.xzHouseTotal}}</div>
+                <div class="pie-table-title table-table-title">{{item.xzHouseRatio+'%'}}</div>
                 <div class="pie-table-title table-table-title">闲置房屋数</div>
               </div>
             </div>
             <div class="item_right">
               <div class="pie-table-total">
-                <div class="pie-table-total-count">{{userData.userTotal}}</div>
+                <div class="pie-table-total-count">{{item.userTotal}}</div>
                 <div class="pie-table-title">居民总数</div>
               </div>
               <div class="pie-table-line"></div>
               <div class="pie-table-total ">
-                <div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
-                <div class="pie-table-title table-table-title">0.00%</div>
+                <div class="pie-table-total-count colorwhite">{{item.czUserTotal}}</div>
+                <div class="pie-table-title table-table-title">{{item.czUserRatio+'%'}}</div>
                 <div class="pie-table-title table-table-title">常住人口数</div>
               </div>
               <div class="pie-table-total ">
-                <div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
-                <div class="pie-table-title table-table-title">99.99%</div>
+                <div class="pie-table-total-count colorwhite">{{item.ldUserTotal}}</div>
+                <div class="pie-table-title table-table-title">{{item.ldUserRatio+'%'}}</div>
                 <div class="pie-table-title table-table-title">流动人口数</div>
               </div>
 
@@ -164,6 +175,14 @@
         </div>
       </div>
 
+      <div v-if="subList.length===0"
+           class="no-data">
+
+        <img src="@/assets/img/modules/visual/noData.png"
+             class="no-data-img" />
+
+      </div>
+
     </cpt-card>
   </div>
 </template>
@@ -192,6 +211,9 @@ export default {
       dataLoading: true,
       orgId: '',
       orgType: '',
+      orgName: this.$store.state.user.agencyName,
+      // orgShowName: this.$store.state.user.agencyName,//面包屑显示当前组织名称
+
 
       housePieChartS: null,
       housePieChart: '',
@@ -243,11 +265,15 @@ export default {
       userColorArray: ['#1B51FF', '#00E5ED'],
       userPieData: [],
 
-      subList: [
-        {
-          orgId: '',
-        }
-      ]
+      subList: [],
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+      selUserId: '',
+      center: [],
+      zoom: null,
+      parentPolygon: [],
 
     };
   },
@@ -286,15 +312,15 @@ export default {
         this.$refs.housePieChart.showLoading()
       }
 
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart";
-      // const url = '/gov/org/house/housechart'
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart";
+      const url = '/gov/org/house/housechart'
       let params = {
         orgId: this.orgId,
         orgType: this.orgType
       };
       const { data, code, msg } = await requestPost(url, params);
       if (code === 0) {
-        // this.houseData = data
+        this.houseData = data
         if (this.$refs.housePieChart) {
           this.$refs.housePieChart.hideLoading()
         }
@@ -315,6 +341,7 @@ export default {
         }, 500)
       }
     },
+
     assignHousePieChart () {
 
       if (this.houseData) {
@@ -330,16 +357,16 @@ export default {
 
         let obj1 = {
           name: '自住房屋数',
-          value: 20.1,
+          value: this.houseData.zzHouseRatio,
           selected: true
         }
         let obj2 = {
           name: '出租房屋数',
-          value: 20.3
+          value: this.houseData.czHouseRatio
         }
         let obj3 = {
           name: '闲置房屋数',
-          value: 20
+          value: this.houseData.xzHouseRatio
         }
 
         this.housePieData.push(obj1)
@@ -368,15 +395,15 @@ export default {
       if (this.$refs.userPieChart) {
         this.$refs.userPieChart.showLoading()
       }
-      const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart";
-      // const url = '/epmetuser/icresiuser/userchart'
+      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart";
+      const url = '/epmetuser/icresiuser/userchart'
       let params = {
         orgId: this.orgId,
         orgType: this.orgType
       };
       const { data, code, msg } = await requestPost(url, params);
       if (code === 0) {
-        // this.userData = data
+        this.userData = data
         if (this.$refs.userPieChart) {
           this.$refs.userPieChart.hideLoading()
         }
@@ -395,6 +422,7 @@ export default {
         }, 500)
       }
     },
+
     assignUserPieChart () {
 
       if (this.userData) {
@@ -410,12 +438,12 @@ export default {
 
         let obj1 = {
           name: '常住人口数',
-          value: 20.1,
+          value: this.userData.czUserRatio,
           selected: true
         }
         let obj2 = {
           name: '流动人口树',
-          value: 20.3
+          value: this.userData.ldUserRatio
         }
 
         this.userPieData.push(obj1)
@@ -440,8 +468,8 @@ export default {
     },
 
     async getSubuserhouselist (node, resolve) {
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist";
-      // const url = '/gov/org/house/subuserhouselist'
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist";
+      const url = '/gov/org/house/subuserhouselist'
       let params = {
         orgId: this.orgId,
         orgType: this.orgType
@@ -493,6 +521,7 @@ export default {
 
 
     },
+
     async clickUserPie (seriesIndex) {
       this.userPieData.forEach((element, index) => {
         if (index === seriesIndex) {
@@ -532,15 +561,55 @@ export default {
       // this.getTable()
     },
 
-    hancleToSubAgency (item) {
+    handleToSubAgency (item) {
+
+      this.toSubAgency(item)
+
+
+      this.getApiData()
+
+    },
+
+    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）    people 点击详情
+    async toSubAgency (item) {
+
+      this.runNum++
+      let obj = {
+        orgId: this.orgId,
+        orgType: this.orgType,
+        orgName: this.orgName,
+      }
+
+      this.runAgencyArray.push(obj)
 
       this.orgId = item.orgId
       this.orgType = item.orgType
-      this.getApiData()
+      this.orgName = item.orgName
+
+
+    },
+
+
+    //返回所选组织
+    handleClickAgency (index) {
+
+      const cutNum = this.runAgencyArray.length - index//要减去的长度
+      this.runNum = this.runNum - cutNum
 
-    }
+      let orgData = this.runAgencyArray[index]
+
+      for (let i = 0; i < cutNum; i++) {
+        this.runAgencyArray.pop()
+      }
+
+      this.orgId = orgData.id
+      this.orgType = orgData.orgType
+      this.orgName = orgData.orgName
+
+      this.getApiData()
 
 
+    },
 
   },
 };
@@ -551,6 +620,11 @@ export default {
   src="@/assets/scss/modules/visual/warning.scss"
   scoped
 ></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
 <style
   lang="scss"
   src="@/assets/scss/modules/visual/houseStatic.scss"
diff --git a/src/views/modules/visual/basicinfo/houseStatic/options.js b/src/views/modules/visual/basicinfo/houseStatic/options.js
index 7b841c76..180d3b55 100644
--- a/src/views/modules/visual/basicinfo/houseStatic/options.js
+++ b/src/views/modules/visual/basicinfo/houseStatic/options.js
@@ -83,7 +83,7 @@ export function housePieOption (_charts) {
             position: 'outside',
             alignTo: 'edge',
             // formatter: '{a|{c}}\n\n{name|{b}}',
-            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            formatter: '{name|{b}}\n{r|}\n{a|{c}%}',
             minMargin: 5,
             edgeDistance: 1,
             lineHeight: 15,
@@ -95,9 +95,9 @@ export function housePieOption (_charts) {
                 padding: [0, 6, 0, 6]
               },
               a: {
-                fontSize: 25,
+                fontSize: 20,
                 color: '#fff',
-                padding: [0, 6, 6, 6]
+                padding: [16, 0, 6, 6]
               },
               r: {
                 backgroundColor: 'auto',
diff --git a/src/views/modules/visual/basicinfo/houseStatic/userOptions.js b/src/views/modules/visual/basicinfo/houseStatic/userOptions.js
index f251cf4e..ba1eab7f 100644
--- a/src/views/modules/visual/basicinfo/houseStatic/userOptions.js
+++ b/src/views/modules/visual/basicinfo/houseStatic/userOptions.js
@@ -85,7 +85,7 @@ export function userPieOption (_charts) {
             position: 'outside',
             alignTo: 'edge',
             // formatter: '{a|{c}}\n\n{name|{b}}',
-            formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+            formatter: '{name|{b}}\n{r|}\n{a|{c}%}',
             minMargin: 5,
             edgeDistance: 1,
             lineHeight: 15,
@@ -97,9 +97,9 @@ export function userPieOption (_charts) {
                 padding: [0, 6, 0, 6]
               },
               a: {
-                fontSize: 25,
+                fontSize: 20,
                 color: '#fff',
-                padding: [0, 6, 6, 6]
+                padding: [16, 0, 6, 6]
               },
               r: {
                 backgroundColor: 'auto',