From a90d446264955f2e6bcc5f898de9f3bc1e552741 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 24 Jan 2024 19:52:54 +0800
Subject: [PATCH] 居民监管、住房监管页面显示调整

---
 src/page/login/tenement.vue                            |    5 
 src/views/propertySupervision/houseHoldSupervision.vue | 1720 +++++++++++++++++++++++++++----------------------------
 src/styles/login.scss                                  |    4 
 src/styles/avue-ui.scss                                |   49 +
 src/views/propertySupervision/residentSupervision.vue  |   78 -
 5 files changed, 919 insertions(+), 937 deletions(-)

diff --git a/src/page/login/tenement.vue b/src/page/login/tenement.vue
index 523301a..052776a 100644
--- a/src/page/login/tenement.vue
+++ b/src/page/login/tenement.vue
@@ -12,7 +12,6 @@
                 <p class="title">上饶市智慧物业管理平台</p>
             </div>
             <div class="login-border">
-                <img class="img" src="/img/logo.png" alt="">
                 <div class="login-main">
 
                     <h4 class="login-title">
@@ -34,9 +33,7 @@
         </div>
 
         <div class="copyright-box">
-            版权所有:上饶市住房和城乡建设局
-            <br />
-            技术支持:上饶国控数字科技有限公司
+            <span>版权所有:上饶市住房和城乡建设局</span> <span>技术支持:上饶国控数字科技有限公司</span>
         </div>
     </div>
 </template>
diff --git a/src/styles/avue-ui.scss b/src/styles/avue-ui.scss
index d899fba..10ca041 100644
--- a/src/styles/avue-ui.scss
+++ b/src/styles/avue-ui.scss
@@ -55,4 +55,53 @@
     .avue-crud__left {
         flex: 1;
     }
+}
+
+.cur-resident-supervision-page,
+.cur-house-hold-supervision-page {
+    margin: 10px !important;
+    margin-top: 0 !important;
+    padding: 0 !important;
+
+    .echarts-wrap {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+        justify-content: space-between;
+
+
+        .echarts-cell:nth-child(1),
+        .echarts-cell:nth-child(2) {
+            height: 300px;
+            width: calc(50% - 5px);
+        }
+
+        .echarts-cell:nth-child(3),
+        .echarts-cell:nth-child(4),
+        .echarts-cell:nth-child(5) {
+            margin-top: 10px;
+            height: 300px;
+            width: calc((100% / 3) - 6.66px);
+        }
+
+        .echarts-cell {
+            display: flex;
+            flex-direction: column;
+            background: #fff;
+
+            .echarts-item {
+                padding: 10px;
+                width: 100%;
+                height: 0;
+                flex: 1;
+            }
+        }
+
+    }
+
+    .cur-from-box {
+        margin-top: 10px;
+        padding: 10px;
+        background: #fff;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/login.scss b/src/styles/login.scss
index ed6bdbe..5f398e9 100644
--- a/src/styles/login.scss
+++ b/src/styles/login.scss
@@ -17,6 +17,10 @@
         color: #fff;
         line-height: 24px;
         font-size: 14px;
+
+        span {
+            margin: 0 10px;
+        }
     }
 }
 
diff --git a/src/views/propertySupervision/houseHoldSupervision.vue b/src/views/propertySupervision/houseHoldSupervision.vue
index 8465b7a..a47c4e0 100644
--- a/src/views/propertySupervision/houseHoldSupervision.vue
+++ b/src/views/propertySupervision/houseHoldSupervision.vue
@@ -1,14 +1,25 @@
 <template>
-  <el-row>
-    <el-col :span="24">
-      <basic-container class="cur-house-hold-box">
-        <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud" v-model="form"
-          :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
-          :before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
-          @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
-          @refresh-change="refreshChange" @on-load="onLoad">
+    <div class="cur-house-hold-supervision-page" v-loading="loading">
+        <div class="echarts-wrap">
+            <div class="echarts-cell">
+                <box-title :title="'分类统计'" :classVal="9" :classStyle="'echarts-title'"></box-title>
+                <div class="echarts-item" id="echarts"></div>
+            </div>
 
-          <!--  <template slot-scope="{row, size}" slot="menu">
+            <div class="echarts-cell">
+                <box-title :title="'区域统计'" :classVal="9" :classStyle="'echarts-title'"></box-title>
+                <div class="echarts-item" id="bar-echarts"></div>
+            </div>
+        </div>
+
+        <div class="cur-from-box">
+            <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
+                v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
+                :before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
+                @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
+                @refresh-change="refreshChange" @on-load="onLoad">
+
+                <!--  <template slot-scope="{row, size}" slot="menu">
             <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.househould_manager"
               @click="handleHouseholdManager(row)">住户管理
             </el-button>
@@ -16,934 +27,899 @@
               @click="manageLabel(row)">标签
             </el-button>
           </template> -->
+                <template slot-scope="{row, size}" slot="phone">
+                    <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')">
+                        {{ textDispose(row, 'phoneflag', 'phone') }}
+                    </el-button>
+                </template>
 
-          <template slot="menuLeft">
-            <div class="echarts-wrap-box">
-              <div class="echarts-item-box" id="echarts"></div>
-              <div class="echarts-item-box" id="bar-echarts"></div>
-            </div>
-          </template>
-
-
-          <template slot-scope="{row, size}" slot="phone">
-            <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneflag')">
-              {{ textDispose(row, 'phoneflag', 'phone') }}
-            </el-button>
-          </template>
-
-          <template slot-scope="{row}" slot="userHouseLabelVOList">
-            {{ labelDispose(row.userHouseLabelVOList) }}
-          </template>
-        </avue-crud>
-
+                <template slot-scope="{row}" slot="userHouseLabelVOList">
+                    {{ labelDispose(row.userHouseLabelVOList) }}
+                </template>
+            </avue-crud>
+        </div>
 
         <el-dialog title="用户角色配置" append-to-body :visible.sync="roleBox" width="345px">
 
-          <el-tree :data="roleGrantList" show-checkbox check-strictly default-expand-all node-key="id" ref="treeRole"
-            :default-checked-keys="roleTreeObj" :props="props">
-          </el-tree>
+            <el-tree :data="roleGrantList" show-checkbox check-strictly default-expand-all node-key="id" ref="treeRole"
+                :default-checked-keys="roleTreeObj" :props="props">
+            </el-tree>
 
-          <span slot="footer" class="dialog-footer">
-            <el-button size="small" @click="roleBox = false">取 消</el-button>
-            <el-button size="small" type="primary" @click="submitRole">确 定</el-button>
-          </span>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="roleBox = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="submitRole">确 定</el-button>
+            </span>
         </el-dialog>
 
         <el-dialog title="标签管理" append-to-body :visible.sync="labelFlag" center width="600px">
-          <div id="" class="grid-container2">
-            <div class="grid-item" :style="{ backgroundColor: item.color }" v-for="(item, index) in labelData"
-              :key="index" @click="changLabel(item)">
-              {{ item.name }}
+            <div id="" class="grid-container2">
+                <div class="grid-item" :style="{ backgroundColor: item.color }" v-for="(item, index) in labelData"
+                    :key="index" @click="changLabel(item)">
+                    {{ item.name }}
+                </div>
             </div>
-          </div>
-          <!--  <span slot="footer" class="dialog-footer">
+            <!--  <span slot="footer" class="dialog-footer">
             <el-button @click="labelFlag = false">取 消</el-button>
             <el-button type="primary" @click="submitRole">确 定</el-button>
           </span> -->
         </el-dialog>
 
         <el-dialog :title="'编辑标签   ' + currentLabel.name" append-to-body :visible.sync="editLabelFlge" width="655px">
-          <avue-form :option="labelOption" v-model="labelForm" :submit="onsubmit">
-          </avue-form>
-          <span slot="footer" class="dialog-footer">
-            <el-button size="small" @click="editLabelFlge = false">取 消</el-button>
-            <el-button size="small" type="primary" @click="onsubmit">确 定</el-button>
-          </span>
+            <avue-form :option="labelOption" v-model="labelForm" :submit="onsubmit">
+            </avue-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="editLabelFlge = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="onsubmit">确 定</el-button>
+            </span>
         </el-dialog>
 
         <el-dialog title="用户数据导入" append-to-body :visible.sync="excelBox" width="555px">
-          <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
-            <template slot="excelTemplate">
-              <el-button type="primary" @click="handleTemplate">
-                点击下载<i class="el-icon-download el-icon--right"></i>
-              </el-button>
-            </template>
-          </avue-form>
+            <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
+                <template slot="excelTemplate">
+                    <el-button type="primary" @click="handleTemplate">
+                        点击下载<i class="el-icon-download el-icon--right"></i>
+                    </el-button>
+                </template>
+            </avue-form>
         </el-dialog>
 
         <el-dialog title="住户管理" append-to-body :visible.sync="householdManagerVisible" width="70%" height="60%">
-          <!-- <householdManager ref="householdManager" /> -->
+            <!-- <householdManager ref="householdManager" /> -->
         </el-dialog>
-
-
-      </basic-container>
-    </el-col>
-  </el-row>
+    </div>
 </template>
 
 <script>
 import {
-  getList,
-  remove,
-  add,
-  update,
-  getDetatil,
-  getDetatils
+    getList,
+    remove,
+    add,
+    update,
+    getDetatil,
+    getDetatils
 } from "@/api/userHouse/list/house.js"
 import {
-  removeHouseholdLabel,
-  saveOrUpdateHouseholdLabel
+    removeHouseholdLabel,
+    saveOrUpdateHouseholdLabel
 } from "@/api/userHouse/list/userHouseList.js"
 import {
-  getLabelList,
+    getLabelList,
 } from '@/api/label/label'
 import {
-  exportBlob
+    exportBlob
 } from "@/api/common"
 import {
-  mapGetters
+    mapGetters
 } from "vuex"
 import website from '@/config/website'
 import {
-  getToken
+    getToken
 } from '@/util/auth'
 import {
-  downloadXls
+    downloadXls
 } from "@/util/util"
 import {
-  dateNow
+    dateNow
 } from "@/util/date"
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import func from "@/util/func"
 // import householdManager from "./components/householdManager"
 import Qs from "qs"
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 import {
-  getTreeList
+    getTreeList
 } from '@/api/label/label'
+import boxTitle from "../place/components/boxTitle.vue"
 
 export default {
-  components: {
-    // householdManager
-  },
-  data() {
-
-    //手机号格式校验
-    let validatorPhone = function (rule, value, callback) {
-      if (value) {
-        if (!/^1[3456789]\d{9}$/.test(value)) {
-          callback(new Error('手机号格式有误!'))
-        } else {
-          callback()
-        }
-      }
-      callback()
-    }
-
-    return {
-      labelData: [],
-      labelForm: {},
-      userHouseLabelVOList: [],
-      currentLabel: {},
-      labelOption: {
-        submitBtn: false,
-        emptyBtn: false,
-        column: [{
-          label: '级别',
-          prop: 'color',
-          type: 'radio',
-          button: true,
-          row: true,
-          dicData: [{
-            label: '撤销',
-            value: '#EBEDF0'
-          }, {
-            label: '绿',
-            value: '#30D17C'
-          }, {
-            label: '黄',
-            value: '#FFB42B'
-          }, {
-            label: '红',
-            value: '#EA1F1F'
-          }],
-          rules: [{
-            required: true,
-            message: "请选择",
-            trigger: "blur"
-          }]
-        }, {
-          row: true,
-          label: '备注',
-          prop: 'remark',
-          type: 'input'
-        }]
-      },
-      editLabelFlge: false,
-      labelFlag: false,
-      householdManagerVisible: false,
-      form: {},
-      search: {},
-      excelBox: false,
-      selectionList: [],
-      query: {},
-      loading: true,
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
-      option: {
-        labelWidth: 120,
-        searchLabelWidth: 96,
-        searchShow: true,
-        searchMenuSpan: 3,
-        menuWidth: 350,
-        menu: false,
-        height: 'auto',
-        calcHeight: 80,
-        tip: false,
-        border: true,
-        index: true,
-        selection: true,
-        addBtn: false,
-        viewBtn: true,
-        dialogType: 'drawer',
-        dialogClickModal: false,
-        column: [{
-          label: "房屋编号",
-          prop: "houseCode",
-          width: 180,
-          hide: true,
-          display: false
-        },
-        // {
-        //   width: 156,
-        //   overHidden: true,
-        //   label: "地址",
-        //   prop: "address",
-        //   display: false,
-        // },
-        {
-          // hide: true,
-          width: 220,
-          overHidden: true,
-          label: '地址',
-          parent: false,
-          prop: "houseName",
-          searchSpan: 4,
-          display: false,
-          search: true,
-        },
-        {
-          hide: true,
-          parent: false,
-          label: "小区名称",
-          prop: "districtCode",
-          type: 'tree',
-          dicUrl: `/api/blade-district/district/getDistrictTree`,
-          props: {
-            label: "name",
-            value: "id"
-          },
-          defaultExpandedKeys: ["361102003"],
-          span: 12,
-          width: 220,
-          overHidden: true,
-        },
-
-        {
-          width: 220,
-          overHidden: true,
-          label: '小区名称',
-          parent: false,
-          prop: "districtName",
-          searchSpan: 4,
-          display: false,
-          search: true,
-        },
-
-        {
-          width: 110,
-          label: "所属街道",
-          addDisplay: false,
-          editDisplay: false,
-          viewDisplay: false,
-          prop: "townStreetName",
-          search: true,
-          searchSpan: 4
-        },
-
-        {
-          width: 156,
-          overHidden: true,
-          label: "所属社区",
-          addDisplay: false,
-          editDisplay: false,
-          viewDisplay: false,
-          prop: "neiName",
-          search: true,
-          searchSpan: 4,
-          rules: [{
-            required: true,
-            message: "请选择所属社区",
-            trigger: "blur",
-          }],
-        },
-
-        {
-          hide: true,
-          parent: false,
-          label: "所属社区",
-          prop: "neiCode",
-          search: false,
-          type: "tree",
-          dicUrl: "/api/blade-system/region/tree",
-          props: {
-            label: "name",
-            value: "id",
-          },
-          cascader: ["gridId"],
-          rules: [{
-            required: true,
-            message: "请选择所属社区",
-            trigger: "blur",
-          },],
-        },
-
-        {
-          width: 110,
-          overHidden: true,
-          label: "所属网格",
-          addDisplay: false,
-          editDisplay: false,
-          viewDisplay: false,
-          prop: "gridName",
-          rules: [{
-            required: true,
-            message: "请选择所属网格",
-            trigger: "blur",
-          }],
-        },
-
-        {
-          hide: true,
-          label: "所属网格",
-          prop: "gridId",
-          type: "tree",
-          cell: true,
-          props: {
-            label: "gridName",
-            value: "id",
-          },
-          dicUrl: "/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
-          rules: [{
-            required: true,
-            message: "请选择所属网格",
-            trigger: "blur",
-          },],
-        },
-
-        {
-          label: "房屋照片",
-          prop: "imageUrls",
-          width: 110,
-          type: "upload",
-          listType: "picture-card",
-          dataType: "string",
-          multiple: true,
-          action: "/api/blade-resource/oss/endpoint/put-file",
-          propsHttp: {
-            res: "data",
-            name: 'name',
-            url: "link",
-          },
-          span: 24,
-        },
-
-
-        {
-          width: 120,
-          label: "电话",
-          prop: "phone",
-          slot: true,
-          rules: [{
-            validator: validatorPhone,
-            trigger: 'blur'
-          }],
-        },
-
-        {
-          label: "幢",
-          prop: "building",
-        },
-        {
-          label: "单元",
-          prop: "unit",
-        },
-        {
-          label: "室",
-          prop: "room",
-        },
-        {
-          label: "楼层",
-          prop: "floor",
-          type: "number",
-          rules: [{
-            required: true,
-            message: "请输入楼层",
-            trigger: "blur",
-          },],
-        },
-        {
-          label: "面积",
-          prop: "area",
-          type: "number",
-        },
-        {
-          label: "物业费",
-          prop: "propertyPrice",
-          type: "number",
-        },
-        {
-          label: "服务到期",
-          prop: "serviceDue",
-          type: "datetime",
-          format: "yyyy-MM-dd",
-          valueFormat: "yyyy-MM-dd",
-        },
-        {
-          width: 210,
-          overHidden: true,
-          label: "标签",
-          prop: "userHouseLabelVOList",
-          display: false
-        },
-        ]
-      },
-      data: [],
-      excelForm: {},
-      excelOption: {
-        submitBtn: false,
-        emptyBtn: false,
-        column: [{
-          label: '模板上传',
-          prop: 'excelFile',
-          type: 'upload',
-          drag: true,
-          loadText: '模板上传中,请稍等',
-          span: 24,
-          propsHttp: {
-            res: 'data'
-          },
-          tip: '请上传 .xls,.xlsx 标准格式文件',
-          action: "/api/blade-system/user/import-user"
-        },
-        {
-          label: "数据覆盖",
-          prop: "isCovered",
-          type: "switch",
-          align: "center",
-          width: 80,
-          dicData: [{
-            label: "否",
-            value: 0
-          },
-          {
-            label: "是",
-            value: 1
-          }
-          ],
-          value: 0,
-          slot: true,
-          rules: [{
-            required: true,
-            message: "请选择是否覆盖",
-            trigger: "blur"
-          }]
-        },
-        {
-          label: '模板下载',
-          prop: 'excelTemplate',
-          formslot: true,
-          span: 24,
-        }
-        ],
-        labelCountList: []
-      }
-    }
-  },
-  watch: {},
-  computed: {
-    ...mapGetters(["userInfo", "permission"]),
-    permissionList() {
-      return {
-        addBtn: this.vaildData(this.permission.house_add, true),
-        viewBtn: this.vaildData(this.permission.house_view, true),
-        delBtn: this.vaildData(this.permission.house_delete, true),
-        editBtn: this.vaildData(this.permission.house_edit, true)
-      }
+    components: {
+        boxTitle
+        // householdManager
     },
+    data () {
 
-    textDispose() {
-      return (row, flag, type) => {
-        if (row[flag] || row[type] == null) {
-          return row[type]
-        } else {
-          if (type == 'idCard') {
-            return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
-          } else {
-            return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
-          }
-        }
-      }
-    },
-
-    labelDispose() {
-      return (list) => {
-        return list.map(item => item.labelName).join(',')
-      }
-    }
-  },
-  mounted() {
-    this.getLabelCount()
-    this.setBarEchartsOption();
-  },
-  methods: {
-
-    onsubmit() {
-      if (this.labelForm.color === '#EBEDF0') {
-        let params = {
-          householdId: this.currentRow.id,
-          labelId: this.currentLabel.id
-        }
-        removeHouseholdLabel(params).then(res => {
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          })
-          this.editLabelFlge = false
-          this.manageLabel(this.currentRow)
-          this.loading = false
-        })
-      } else {
-        this.labelForm.houseCode = this.currentRow.houseCode
-        this.labelForm.householdId = this.currentRow.id
-        this.labelForm.labelId = this.currentLabel.id
-        this.labelForm.lableType = 2
-        saveOrUpdateHouseholdLabel(this.labelForm).then(res => {
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          })
-          this.editLabelFlge = false
-          this.manageLabel(this.currentRow)
-          this.loading = false
-        })
-      }
-    },
-
-    changLabel(item) {
-      this.editLabelFlge = true
-      this.currentLabel = item
-      this.labelForm.color = item.color
-      this.labelForm.remark = item.remark
-    },
-    manageLabel(item) {
-      this.loading = true
-      this.currentRow = item
-      this.labelFlag = true
-      let params = {
-        parentId: 1001
-      }
-      // 查询标签
-      getLabelList(Object.assign(params)).then(res => {
-        const data = res.data.data
-        // 查询详情
-        getDetatils({
-          houseCode: item.houseCode
-        }).then(res => {
-          if (res.data.data) {
-            this.userHouseLabelVOList = res.data.data.userHouseLabelVOList
-            this.loading = false
-            // 将细类放到一起
-            data.forEach(f => {
-              if (this.userHouseLabelVOList.length > 0) {
-                this.userHouseLabelVOList.forEach(h => {
-                  if (Number(f.id) == h.labelId) {
-                    f['color'] = h.color
-                    f['remark'] = h.remark
-                  }
-                })
-              }
-            })
-          }
-          this.labelData = data
-          this.loading = false
-        })
-      })
-    },
-    handleHouseholdManager(row) {
-      var that = this
-      this.householdManagerVisible = true
-      this.$nextTick(() => {
-        that.$refs.householdManager.init(row)
-      })
-    },
-    rowSave(row, done, loading) {
-      if (row.imageUrls.length > 0) {
-        var urls = []
-        var split = row.imageUrls.split(",")
-        split.forEach(url => {
-          var names = url.split("jczz/")
-          urls.push(names[1])
-        })
-        row.imageUrls = urls.join(",")
-      }
-
-      add(row).then(() => {
-        this.initFlag = false
-        this.onLoad(this.page)
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        })
-        done()
-      }, error => {
-        window.console.log(error)
-        loading()
-      })
-    },
-    rowUpdate(row, index, done, loading) {
-      if (row.imageUrls.length > 0) {
-        var urls = []
-        var split = row.imageUrls.split(",")
-        split.forEach(url => {
-          var names = url.split("jczz/")
-          urls.push(names[1])
-        })
-        row.imageUrls = urls.join(",")
-      }
-
-      update(row).then(() => {
-        this.initFlag = false
-        this.onLoad(this.page)
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        })
-        done()
-      }, error => {
-        window.console.log(error)
-        loading()
-      })
-    },
-    rowDel(row) {
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(row.id)
-        })
-        .then(() => {
-          this.onLoad(this.page)
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          })
-        })
-    },
-    searchReset() {
-      this.query = {}
-      this.treeDeptId = ''
-      this.onLoad(this.page)
-    },
-    searchChange(params, done) {
-      this.query = params
-      this.page.currentPage = 1
-      this.onLoad(this.page, params)
-      done()
-    },
-    selectionChange(list) {
-      this.selectionList = list
-    },
-    selectionClear() {
-      this.selectionList = []
-      this.$refs.crud.toggleSelection()
-    },
-    handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning("请选择至少一条数据")
-        return
-      }
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(this.ids)
-        })
-        .then(() => {
-          this.onLoad(this.page)
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          })
-          this.$refs.crud.toggleSelection()
-        })
-    },
-    handleImport() {
-      this.excelBox = true
-    },
-    uploadAfter(res, done, loading, column) {
-      window.console.log(column)
-      this.excelBox = false
-      this.refreshChange()
-      done()
-    },
-    handleExport() {
-      this.$confirm("是否导出房屋数据?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        NProgress.start()
-        var data = {
-          ...this.query
-        }
-        data = Qs.stringify(data)
-        exportBlob(
-          `/api/blade-house/house/export-house?${this.website.tokenHeader}=${getToken()}&` + data
-        ).then(res => {
-          downloadXls(res.data, `房屋数据表${dateNow()}.xlsx`)
-          NProgress.done()
-        })
-      })
-    },
-    handleTemplate() {
-      exportBlob(`/api/blade-system/user/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
-        downloadXls(res.data, "房屋数据模板.xlsx")
-      })
-    },
-    beforeOpen(done, type) {
-      if (["edit", "view"].includes(type)) {
-        getDetatil({
-          id: this.form.id
-        }).then(res => {
-          this.form = res.data.data
-
-          if (this.form.imageUrls) {
-            if (this.form.imageUrls.length > 0) {
-              var urls = []
-              var names = this.form.imageUrls.split(",")
-              names.forEach(name => {
-                urls.push(website.minioUrl + name)
-              })
-              this.form.imageUrls = urls.join(",")
+        //手机号格式校验
+        let validatorPhone = function (rule, value, callback) {
+            if (value) {
+                if (!/^1[3456789]\d{9}$/.test(value)) {
+                    callback(new Error('手机号格式有误!'))
+                } else {
+                    callback()
+                }
             }
-          }
-        })
-      }
-      this.initFlag = true
-      done()
-    },
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage
-    },
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query)
-    },
-    onLoad(page, params = {}) {
-      this.loading = true
-      this.query.parentId = 1001
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-        const data = {
-          ...res.data.data,
-          records: res.data.data.records.map(item => {
-            if (item.imageUrls) {
-              if (item.imageUrls.length > 0) {
-                var urls = []
-                var names = item.imageUrls.split(",")
-                names.forEach(name => {
-                  urls.push(website.minioUrl + name)
-                })
-                item.imageUrls = urls.join(",")
-              }
-            }
-
-            return {
-              ...item,
-              'phoneflag': false,
-            }
-          })
+            callback()
         }
-        this.page.total = data.total
-        this.data = data.records
-        this.loading = false
-        this.selectionClear()
-      })
-    },
-    showStringDispose(row, type) {
-      row[type] = !row[type]
-    },
 
-    getLabelCount() {
-      getTreeList().then(res => {
-        const data = res.data.data
-        let list = data[1].children;
-        this.labelCountList = list;
-        this.$nextTick(() => {
-          this.setEchartsOption(list)
-        })
-      })
-    },
+        return {
+            labelData: [],
+            labelForm: {},
+            userHouseLabelVOList: [],
+            currentLabel: {},
+            labelOption: {
+                submitBtn: false,
+                emptyBtn: false,
+                column: [{
+                    label: '级别',
+                    prop: 'color',
+                    type: 'radio',
+                    button: true,
+                    row: true,
+                    dicData: [{
+                        label: '撤销',
+                        value: '#EBEDF0'
+                    }, {
+                        label: '绿',
+                        value: '#30D17C'
+                    }, {
+                        label: '黄',
+                        value: '#FFB42B'
+                    }, {
+                        label: '红',
+                        value: '#EA1F1F'
+                    }],
+                    rules: [{
+                        required: true,
+                        message: "请选择",
+                        trigger: "blur"
+                    }]
+                }, {
+                    row: true,
+                    label: '备注',
+                    prop: 'remark',
+                    type: 'input'
+                }]
+            },
+            editLabelFlge: false,
+            labelFlag: false,
+            householdManagerVisible: false,
+            form: {},
+            search: {},
+            excelBox: false,
+            selectionList: [],
+            query: {},
+            loading: true,
+            page: {
+                pageSize: 10,
+                currentPage: 1,
+                total: 0
+            },
+            option: {
+                labelWidth: 120,
+                searchLabelWidth: 96,
+                searchShow: true,
+                searchMenuSpan: 3,
+                menuWidth: 350,
+                menu: false,
+                height: 'auto',
+                calcHeight: 80,
+                tip: false,
+                border: true,
+                index: true,
+                selection: true,
+                addBtn: false,
+                viewBtn: true,
+                dialogType: 'drawer',
+                dialogClickModal: false,
 
-    setEchartsOption(data) {
-      let option = {
-        // title: {
-        //     text:"房屋",
-        //     left: 'center',
-        //     top:20,
-        // },
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          orient: 'horizontal',
-          left: 'center',
-          top: 'bottom',
-        },
-        //             labelLine: {
-        //   length: 15,
-        //   length2: 0,
-        //   maxSurfaceAngle: 80
-        // },
-        series: [
-          {
-            type: 'pie',
-            center: '50%',
-            radius: '50%', //修改大小
+                column: [{
+                    label: "房屋编号",
+                    prop: "houseCode",
+                    width: 180,
+                    hide: true,
+                    display: false
+                },
+                // {
+                //   width: 156,
+                //   overHidden: true,
+                //   label: "地址",
+                //   prop: "address",
+                //   display: false,
+                // },
+                {
+                    // hide: true,
+                    width: 220,
+                    overHidden: true,
+                    label: '地址',
+                    parent: false,
+                    prop: "houseName",
+                    searchSpan: 4,
+                    display: false,
+                    search: true,
+                },
+                {
+                    hide: true,
+                    parent: false,
+                    label: "小区名称",
+                    prop: "districtCode",
+                    type: 'tree',
+                    dicUrl: `/api/blade-district/district/getDistrictTree`,
+                    props: {
+                        label: "name",
+                        value: "id"
+                    },
+                    defaultExpandedKeys: ["361102003"],
+                    span: 12,
+                    width: 220,
+                    overHidden: true,
+                },
+
+                {
+                    width: 220,
+                    overHidden: true,
+                    label: '小区名称',
+                    parent: false,
+                    prop: "districtName",
+                    searchSpan: 4,
+                    display: false,
+                    search: true,
+                },
+
+                {
+                    width: 110,
+                    label: "所属街道",
+                    addDisplay: false,
+                    editDisplay: false,
+                    viewDisplay: false,
+                    prop: "townStreetName",
+                    search: true,
+                    searchSpan: 4
+                },
+
+                {
+                    width: 156,
+                    overHidden: true,
+                    label: "所属社区",
+                    addDisplay: false,
+                    editDisplay: false,
+                    viewDisplay: false,
+                    prop: "neiName",
+                    search: true,
+                    searchSpan: 4,
+                    rules: [{
+                        required: true,
+                        message: "请选择所属社区",
+                        trigger: "blur",
+                    }],
+                },
+
+                {
+                    hide: true,
+                    parent: false,
+                    label: "所属社区",
+                    prop: "neiCode",
+                    search: false,
+                    type: "tree",
+                    dicUrl: "/api/blade-system/region/tree",
+                    props: {
+                        label: "name",
+                        value: "id",
+                    },
+                    cascader: ["gridId"],
+                    rules: [{
+                        required: true,
+                        message: "请选择所属社区",
+                        trigger: "blur",
+                    },],
+                },
+
+                {
+                    width: 110,
+                    overHidden: true,
+                    label: "所属网格",
+                    addDisplay: false,
+                    editDisplay: false,
+                    viewDisplay: false,
+                    prop: "gridName",
+                    rules: [{
+                        required: true,
+                        message: "请选择所属网格",
+                        trigger: "blur",
+                    }],
+                },
+
+                {
+                    hide: true,
+                    label: "所属网格",
+                    prop: "gridId",
+                    type: "tree",
+                    cell: true,
+                    props: {
+                        label: "gridName",
+                        value: "id",
+                    },
+                    dicUrl: "/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
+                    rules: [{
+                        required: true,
+                        message: "请选择所属网格",
+                        trigger: "blur",
+                    },],
+                },
+
+                {
+                    label: "房屋照片",
+                    prop: "imageUrls",
+                    width: 110,
+                    type: "upload",
+                    listType: "picture-card",
+                    dataType: "string",
+                    multiple: true,
+                    action: "/api/blade-resource/oss/endpoint/put-file",
+                    propsHttp: {
+                        res: "data",
+                        name: 'name',
+                        url: "link",
+                    },
+                    span: 24,
+                },
+
+
+                {
+                    width: 120,
+                    label: "电话",
+                    prop: "phone",
+                    slot: true,
+                    rules: [{
+                        validator: validatorPhone,
+                        trigger: 'blur'
+                    }],
+                },
+
+                {
+                    label: "幢",
+                    prop: "building",
+                },
+                {
+                    label: "单元",
+                    prop: "unit",
+                },
+                {
+                    label: "室",
+                    prop: "room",
+                },
+                {
+                    label: "楼层",
+                    prop: "floor",
+                    type: "number",
+                    rules: [{
+                        required: true,
+                        message: "请输入楼层",
+                        trigger: "blur",
+                    },],
+                },
+                {
+                    label: "面积",
+                    prop: "area",
+                    type: "number",
+                },
+                {
+                    label: "物业费",
+                    prop: "propertyPrice",
+                    type: "number",
+                },
+                {
+                    label: "服务到期",
+                    prop: "serviceDue",
+                    type: "datetime",
+                    format: "yyyy-MM-dd",
+                    valueFormat: "yyyy-MM-dd",
+                },
+                {
+                    width: 210,
+                    overHidden: true,
+                    label: "标签",
+                    prop: "userHouseLabelVOList",
+                    display: false
+                },
+                ]
+            },
             data: [],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
+            excelForm: {},
+            excelOption: {
+                submitBtn: false,
+                emptyBtn: false,
+                column: [{
+                    label: '模板上传',
+                    prop: 'excelFile',
+                    type: 'upload',
+                    drag: true,
+                    loadText: '模板上传中,请稍等',
+                    span: 24,
+                    propsHttp: {
+                        res: 'data'
+                    },
+                    tip: '请上传 .xls,.xlsx 标准格式文件',
+                    action: "/api/blade-system/user/import-user"
+                },
+                {
+                    label: "数据覆盖",
+                    prop: "isCovered",
+                    type: "switch",
+                    align: "center",
+                    width: 80,
+                    dicData: [{
+                        label: "否",
+                        value: 0
+                    },
+                    {
+                        label: "是",
+                        value: 1
+                    }
+                    ],
+                    value: 0,
+                    slot: true,
+                    rules: [{
+                        required: true,
+                        message: "请选择是否覆盖",
+                        trigger: "blur"
+                    }]
+                },
+                {
+                    label: '模板下载',
+                    prop: 'excelTemplate',
+                    formslot: true,
+                    span: 24,
+                }
+                ],
+                labelCountList: []
             }
-          }
-        ]
-      };
-      let myEchart = document.getElementById('echarts'); //获取类名
-      let myCharts = echarts.init(myEchart);
-      for (let i = 0, ii = data.length; i < ii; i++) {
-        option.series[0].data.push({
-          name: data[i].name,
-          value: data[i].count,
-          id: data[i].id
-        });
-        option && myCharts.setOption(option);
-        myCharts.on('click', (params) => {
-          console.log(params)
-          this.query.labelId = params.data.id;
-          this.onLoad(this.page, this.query)
-        })
-      }
-
+        }
     },
-
-    setBarEchartsOption() {
-      var chartDom = document.getElementById('bar-echarts');
-      var myChart = echarts.init(chartDom);
-      var option;
-
-      option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisTick: {
-              alignWithLabel: true
+    watch: {},
+    computed: {
+        ...mapGetters(["userInfo", "permission"]),
+        permissionList () {
+            return {
+                addBtn: this.vaildData(this.permission.house_add, true),
+                viewBtn: this.vaildData(this.permission.house_view, true),
+                delBtn: this.vaildData(this.permission.house_delete, true),
+                editBtn: this.vaildData(this.permission.house_edit, true)
             }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value'
-          }
-        ],
-        series: [
-          {
-            name: 'Direct',
-            type: 'bar',
-            barWidth: '60%',
-            data: [10, 52, 200, 334, 390, 330, 220]
-          }
-        ]
-      };
+        },
 
-      option && myChart.setOption(option);
+        textDispose () {
+            return (row, flag, type) => {
+                if (row[flag] || row[type] == null) {
+                    return row[type]
+                } else {
+                    if (type == 'idCard') {
+                        return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
+                    } else {
+                        return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
+                    }
+                }
+            }
+        },
+
+        labelDispose () {
+            return (list) => {
+                return list.map(item => item.labelName).join(',')
+            }
+        }
+    },
+    mounted () {
+        this.getLabelCount()
+        this.setBarEchartsOption()
+    },
+    methods: {
+
+        onsubmit () {
+            if (this.labelForm.color === '#EBEDF0') {
+                let params = {
+                    householdId: this.currentRow.id,
+                    labelId: this.currentLabel.id
+                }
+                removeHouseholdLabel(params).then(res => {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                    this.editLabelFlge = false
+                    this.manageLabel(this.currentRow)
+                    this.loading = false
+                })
+            } else {
+                this.labelForm.houseCode = this.currentRow.houseCode
+                this.labelForm.householdId = this.currentRow.id
+                this.labelForm.labelId = this.currentLabel.id
+                this.labelForm.lableType = 2
+                saveOrUpdateHouseholdLabel(this.labelForm).then(res => {
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                    this.editLabelFlge = false
+                    this.manageLabel(this.currentRow)
+                    this.loading = false
+                })
+            }
+        },
+
+        changLabel (item) {
+            this.editLabelFlge = true
+            this.currentLabel = item
+            this.labelForm.color = item.color
+            this.labelForm.remark = item.remark
+        },
+        manageLabel (item) {
+            this.loading = true
+            this.currentRow = item
+            this.labelFlag = true
+            let params = {
+                parentId: 1001
+            }
+            // 查询标签
+            getLabelList(Object.assign(params)).then(res => {
+                const data = res.data.data
+                // 查询详情
+                getDetatils({
+                    houseCode: item.houseCode
+                }).then(res => {
+                    if (res.data.data) {
+                        this.userHouseLabelVOList = res.data.data.userHouseLabelVOList
+                        this.loading = false
+                        // 将细类放到一起
+                        data.forEach(f => {
+                            if (this.userHouseLabelVOList.length > 0) {
+                                this.userHouseLabelVOList.forEach(h => {
+                                    if (Number(f.id) == h.labelId) {
+                                        f['color'] = h.color
+                                        f['remark'] = h.remark
+                                    }
+                                })
+                            }
+                        })
+                    }
+                    this.labelData = data
+                    this.loading = false
+                })
+            })
+        },
+        handleHouseholdManager (row) {
+            var that = this
+            this.householdManagerVisible = true
+            this.$nextTick(() => {
+                that.$refs.householdManager.init(row)
+            })
+        },
+        rowSave (row, done, loading) {
+            if (row.imageUrls.length > 0) {
+                var urls = []
+                var split = row.imageUrls.split(",")
+                split.forEach(url => {
+                    var names = url.split("jczz/")
+                    urls.push(names[1])
+                })
+                row.imageUrls = urls.join(",")
+            }
+
+            add(row).then(() => {
+                this.initFlag = false
+                this.onLoad(this.page)
+                this.$message({
+                    type: "success",
+                    message: "操作成功!"
+                })
+                done()
+            }, error => {
+                window.console.log(error)
+                loading()
+            })
+        },
+        rowUpdate (row, index, done, loading) {
+            if (row.imageUrls.length > 0) {
+                var urls = []
+                var split = row.imageUrls.split(",")
+                split.forEach(url => {
+                    var names = url.split("jczz/")
+                    urls.push(names[1])
+                })
+                row.imageUrls = urls.join(",")
+            }
+
+            update(row).then(() => {
+                this.initFlag = false
+                this.onLoad(this.page)
+                this.$message({
+                    type: "success",
+                    message: "操作成功!"
+                })
+                done()
+            }, error => {
+                window.console.log(error)
+                loading()
+            })
+        },
+        rowDel (row) {
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return remove(row.id)
+                })
+                .then(() => {
+                    this.onLoad(this.page)
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                })
+        },
+        searchReset () {
+            this.query = {}
+            this.treeDeptId = ''
+            this.onLoad(this.page)
+        },
+        searchChange (params, done) {
+            this.query = params
+            this.page.currentPage = 1
+            this.onLoad(this.page, params)
+            done()
+        },
+        selectionChange (list) {
+            this.selectionList = list
+        },
+        selectionClear () {
+            this.selectionList = []
+            this.$refs.crud.toggleSelection()
+        },
+        handleDelete () {
+            if (this.selectionList.length === 0) {
+                this.$message.warning("请选择至少一条数据")
+                return
+            }
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return remove(this.ids)
+                })
+                .then(() => {
+                    this.onLoad(this.page)
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    })
+                    this.$refs.crud.toggleSelection()
+                })
+        },
+        handleImport () {
+            this.excelBox = true
+        },
+        uploadAfter (res, done, loading, column) {
+            window.console.log(column)
+            this.excelBox = false
+            this.refreshChange()
+            done()
+        },
+        handleExport () {
+            this.$confirm("是否导出房屋数据?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(() => {
+                NProgress.start()
+                var data = {
+                    ...this.query
+                }
+                data = Qs.stringify(data)
+                exportBlob(
+                    `/api/blade-house/house/export-house?${this.website.tokenHeader}=${getToken()}&` + data
+                ).then(res => {
+                    downloadXls(res.data, `房屋数据表${dateNow()}.xlsx`)
+                    NProgress.done()
+                })
+            })
+        },
+        handleTemplate () {
+            exportBlob(`/api/blade-system/user/export-template?${this.website.tokenHeader}=${getToken()}`).then(res => {
+                downloadXls(res.data, "房屋数据模板.xlsx")
+            })
+        },
+        beforeOpen (done, type) {
+            if (["edit", "view"].includes(type)) {
+                getDetatil({
+                    id: this.form.id
+                }).then(res => {
+                    this.form = res.data.data
+
+                    if (this.form.imageUrls) {
+                        if (this.form.imageUrls.length > 0) {
+                            var urls = []
+                            var names = this.form.imageUrls.split(",")
+                            names.forEach(name => {
+                                urls.push(website.minioUrl + name)
+                            })
+                            this.form.imageUrls = urls.join(",")
+                        }
+                    }
+                })
+            }
+            this.initFlag = true
+            done()
+        },
+        currentChange (currentPage) {
+            this.page.currentPage = currentPage
+        },
+        sizeChange (pageSize) {
+            this.page.pageSize = pageSize
+        },
+        refreshChange () {
+            this.onLoad(this.page, this.query)
+        },
+        onLoad (page, params = {}) {
+            this.loading = true
+            this.query.parentId = 1001
+            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+                const data = {
+                    ...res.data.data,
+                    records: res.data.data.records.map(item => {
+                        if (item.imageUrls) {
+                            if (item.imageUrls.length > 0) {
+                                var urls = []
+                                var names = item.imageUrls.split(",")
+                                names.forEach(name => {
+                                    urls.push(website.minioUrl + name)
+                                })
+                                item.imageUrls = urls.join(",")
+                            }
+                        }
+
+                        return {
+                            ...item,
+                            'phoneflag': false,
+                        }
+                    })
+                }
+                this.page.total = data.total
+                this.data = data.records
+                this.loading = false
+                this.selectionClear()
+            })
+        },
+        showStringDispose (row, type) {
+            row[type] = !row[type]
+        },
+
+        getLabelCount () {
+            getTreeList().then(res => {
+                const data = res.data.data
+                let list = data[1].children
+                this.labelCountList = list
+                this.$nextTick(() => {
+                    this.setEchartsOption(list)
+                })
+            })
+        },
+
+        setEchartsOption (data) {
+            let option = {
+                // title: {
+                //     text:"房屋",
+                //     left: 'center',
+                //     top:20,
+                // },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    right: 30,
+                    bottom: 10
+                },
+                //             labelLine: {
+                //   length: 15,
+                //   length2: 0,
+                //   maxSurfaceAngle: 80
+                // },
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['36%', '50%'],
+                        radius: '80%',  //修改大小
+                        data: [],
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            }
+            let myEchart = document.getElementById('echarts') //获取类名
+            let myCharts = echarts.init(myEchart)
+            for (let i = 0, ii = data.length; i < ii; i++) {
+                option.series[0].data.push({
+                    name: data[i].name,
+                    value: data[i].count,
+                    id: data[i].id
+                })
+                option && myCharts.setOption(option)
+                myCharts.on('click', (params) => {
+                    console.log(params)
+                    this.query.labelId = params.data.id
+                    this.onLoad(this.page, this.query)
+                })
+            }
+
+        },
+
+        setBarEchartsOption () {
+            var chartDom = document.getElementById('bar-echarts')
+            var myChart = echarts.init(chartDom)
+            var option
+
+            option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        name: 'Direct',
+                        type: 'bar',
+                        barWidth: '60%',
+                        data: [10, 52, 200, 334, 390, 330, 220]
+                    }
+                ]
+            }
+
+            option && myChart.setOption(option)
+
+
+        }
 
 
     }
-
-
-  }
 }
 </script>
 
-<style lang="scss" scoped>
-.box {
-  height: 800px;
-}
-
-.el-scrollbar {
-  height: 100%;
-}
-
-.box .el-scrollbar__wrap {
-  overflow: scroll;
-}
-
-.echarts-wrap-box {
-  display: flex;
-  justify-content: space-between;
-  padding: 0;
-  margin-bottom: 20px;
-
-  .echarts-item-box {
-    width: 48%;
-    height: 300px;
-    border: 1px solid #999;
-  }
-}
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/propertySupervision/residentSupervision.vue b/src/views/propertySupervision/residentSupervision.vue
index fd714b7..c74304a 100644
--- a/src/views/propertySupervision/residentSupervision.vue
+++ b/src/views/propertySupervision/residentSupervision.vue
@@ -1109,17 +1109,13 @@
 
         setEchartsOption (data) {
             let option = {
-                // title: {
-                //     text:"",
-                //     left: 'center',
-                //     top:20,
-                // },
                 tooltip: {
                     trigger: 'item'
                 },
                 legend: {
-                    orient: 'horizontal',
-                    padding: 20,
+                    orient: 'vertical',
+                    right: 30,
+                    bottom: 10
                 },
                 labelLine: {
                     length: 15,
@@ -1129,9 +1125,10 @@
                 series: [
                     {
                         type: 'pie',
-                        center: '50%',
-                        radius: '40%', //修改大小
+                        center: ['36%', '50%'],
+                        radius: '80%', //修改大小
                         data: [],
+
                         emphasis: {
                             itemStyle: {
                                 shadowBlur: 10,
@@ -1154,6 +1151,17 @@
                         id: data[i].children[k].id,
                     })
                 }
+
+                if (data[i].children.length > 10) {
+                    option.series[0].label = {
+                        show: false
+                    }
+                } else {
+                    option.series[0].label = {
+                        show: true
+                    }
+                }
+
                 option.legend.type = series.length > 4 ? "scroll" : "plain"
                 option.series[0].data = series
                 option && myCharts.setOption(option)
@@ -1170,16 +1178,6 @@
 </script>
 
 <style lang="scss" scoped>
-.cur-resident-supervision-page {
-    margin: 10px !important;
-    margin-top: 0 !important;
-    padding: 0 !important;
-}
-
-.box {
-    height: 800px;
-}
-
 .grid-container2 {
     /* display: grid;
     grid-template-columns: auto auto auto auto;
@@ -1209,47 +1207,5 @@
 
 .box .el-scrollbar__wrap {
     overflow: scroll;
-}
-
-.echarts-wrap {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0;
-    justify-content: space-between;
-
-
-    .echarts-cell:nth-child(1),
-    .echarts-cell:nth-child(2) {
-        height: 480px;
-        width: calc(50% - 5px);
-    }
-
-    .echarts-cell:nth-child(3),
-    .echarts-cell:nth-child(4),
-    .echarts-cell:nth-child(5) {
-        margin-top: 10px;
-        height: 280px;
-        width: calc((100% / 3) - 6.66px);
-    }
-
-    .echarts-cell {
-        display: flex;
-        flex-direction: column;
-        background: #fff;
-
-        .echarts-item {
-            padding: 10px;
-            width: 100%;
-            height: 0;
-            flex: 1;
-        }
-    }
-
-}
-
-.cur-from-box {
-    margin-top: 10px;
-    padding: 10px;
-    background: #fff;
 }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3