From d16d10d94fddff86bdfd87113e7fd2cebe8b7cd7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 24 Jan 2024 18:15:06 +0800
Subject: [PATCH] 居民监管样式调整

---
 src/views/place/components/boxTitle.vue               |   13 
 src/views/propertySupervision/residentSupervision.vue | 2262 +++++++++++++++++++++++++++++-----------------------------
 2 files changed, 1,142 insertions(+), 1,133 deletions(-)

diff --git a/src/views/place/components/boxTitle.vue b/src/views/place/components/boxTitle.vue
index 507271a..2995eb8 100644
--- a/src/views/place/components/boxTitle.vue
+++ b/src/views/place/components/boxTitle.vue
@@ -10,7 +10,7 @@
     <div class="titleContent">
         <!-- <div class="title1" data-color="red"></div> -->
 
-        <div :class="'title title' + classVal">
+        <div :class="`title title${classVal} ${classStyle}`">
             {{ title }}</div>
     </div>
 </template>
@@ -26,7 +26,12 @@
 
         classVal: {
             type: Number,
-        }
+        },
+
+        classStyle: {
+            type: String,
+            default: ''
+        },
     }
 }
 </script>
@@ -50,6 +55,10 @@
     z-index: 0;
 }
 
+.echarts-title {
+    margin: 0 !important;
+}
+
 .title1 {
     padding-left: 15px;
 
diff --git a/src/views/propertySupervision/residentSupervision.vue b/src/views/propertySupervision/residentSupervision.vue
index c0f3677..156560e 100644
--- a/src/views/propertySupervision/residentSupervision.vue
+++ b/src/views/propertySupervision/residentSupervision.vue
@@ -1,1255 +1,1255 @@
 <template>
-  <el-row>
-    <el-col :span="24">
-      <basic-container>
-
-
-
-        <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="menuLeft">
-            <div class="echarts-wrap">
-
-              <div class="echarts-cell" v-for="(i, k) in labelCountList" :key="k">
-                <box-title :title="i.name"></box-title>
-                <div class="echarts-item">
-
-                </div>
-
-
-              </div>
-
+    <div class="cur-resident-supervision-page" v-loading="loading">
+        <div class="echarts-wrap">
+            <div class="echarts-cell" v-for="(i, k) in labelCountList" :key="k">
+                <box-title :title="i.name" :classVal="9" :classStyle="'echarts-title'"></box-title>
+                <div class="echarts-item"></div>
             </div>
-          </template>
+        </div>
 
-          <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="manageLabel(row)">标签
-            </el-button>
-          </template>
-          <template slot-scope="{row, size}" slot="phoneNumber">
-            <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneNumberflag')">
-              {{ textDispose(row, 'phoneNumberflag', 'phoneNumber') }}
-            </el-button>
-          </template>
-          <template slot-scope="{row, size}" slot="idCard">
-            <el-button :size="size" type="text" @click="showStringDispose(row, 'idCardflag')"
-              v-text="textDispose(row, 'idCardflag', 'idCard')"></el-button>
-          </template>
-          <template slot-scope="{row, size}" slot="householdLabelList">
-            {{ labelDispose(row.householdLabelList) }}
-          </template>
-        </avue-crud>
+        <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="manageLabel(row)">标签
+                    </el-button>
+                </template>
+                <template slot-scope="{row, size}" slot="phoneNumber">
+                    <el-button :size="size" type="text" @click="showStringDispose(row, 'phoneNumberflag')">
+                        {{ textDispose(row, 'phoneNumberflag', 'phoneNumber') }}
+                    </el-button>
+                </template>
+                <template slot-scope="{row, size}" slot="idCard">
+                    <el-button :size="size" type="text" @click="showStringDispose(row, 'idCardflag')"
+                        v-text="textDispose(row, 'idCardflag', 'idCard')"></el-button>
+                </template>
+                <template slot-scope="{row, size}" slot="householdLabelList">
+                    {{ labelDispose(row.householdLabelList) }}
+                </template>
+            </avue-crud>
+        </div>
+
         <el-dialog title="用户角色配置" append-to-body :visible.sync="roleBox" width="345px" center>
 
-          <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>
-            <div class="grid-container2">
-              <div class="grid-item" :style="{ backgroundColor: item2.color }" v-for="(item2, index2) in labelData"
-                @click="changLabel(item2)" :key="index2">
-                {{ item2.name }}
-              </div>
+            <div>
+                <div class="grid-container2">
+                    <div class="grid-item" :style="{ backgroundColor: item2.color }" v-for="(item2, index2) in labelData"
+                        @click="changLabel(item2)" :key="index2">
+                        {{ item2.name }}
+                    </div>
+                </div>
             </div>
-          </div>
 
         </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 size="small" 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 size="small" type="primary" @click="handleTemplate">
+                        点击下载<i class="el-icon-download el-icon--right"></i>
+                    </el-button>
+                </template>
+            </avue-form>
         </el-dialog>
-      </basic-container>
-    </el-col>
-  </el-row>
+    </div>
 </template>
 
 <script>
 import {
-  getKeynotePersonnelPage,
-  remove,
-  add,
-  update,
-  getDetatil,
-  getDetatils
+    getKeynotePersonnelPage,
+    remove,
+    add,
+    update,
+    getDetatil,
+    getDetatils
 } from "@/api/userHouse/list/houseHold.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 {
-  getToken
+    getToken
 } from '@/util/auth'
 import {
-  downloadXls,
-  findParentOrCur,
+    downloadXls,
+    findParentOrCur,
 } from "@/util/util"
 import {
-  dateNow
+    dateNow
 } from "@/util/date"
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 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: {
-    boxTitle
-  },
-  data() {
-    let isCardId = function (rule, value, callback) {
-      // 15位和18位身份证号码的正则表达式
-      var regIdCard =
-        /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
+    components: {
+        boxTitle
+    },
+    data () {
+        let isCardId = function (rule, value, callback) {
+            // 15位和18位身份证号码的正则表达式
+            var regIdCard =
+                /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
 
-      // 如果通过该验证,说明身份证格式正确,但准确性还需计算
-      if (regIdCard.test(value)) {
-        if (value.length == 18) {
-          var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
-            5, 8, 4, 2) // 将前17位加权因子保存在数组里
-          var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2) // 这是除以11后,可能产生的11位余数、验证码,也保存成数组
-          var idCardWiSum = 0 // 用来保存前17位各自乖以加权因子后的总和
-          for (var i = 0; i < 17; i++) {
-            idCardWiSum += value.substring(i, i + 1) * idCardWi[i]
-          }
+            // 如果通过该验证,说明身份证格式正确,但准确性还需计算
+            if (regIdCard.test(value)) {
+                if (value.length == 18) {
+                    var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
+                        5, 8, 4, 2) // 将前17位加权因子保存在数组里
+                    var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2) // 这是除以11后,可能产生的11位余数、验证码,也保存成数组
+                    var idCardWiSum = 0 // 用来保存前17位各自乖以加权因子后的总和
+                    for (var i = 0; i < 17; i++) {
+                        idCardWiSum += value.substring(i, i + 1) * idCardWi[i]
+                    }
 
-          var idCardMod = idCardWiSum % 11 // 计算出校验码所在数组的位置
-          var idCardLast = value.substring(17) // 得到最后一位身份证号码
+                    var idCardMod = idCardWiSum % 11 // 计算出校验码所在数组的位置
+                    var idCardLast = value.substring(17) // 得到最后一位身份证号码
 
-          // 如果等于2,则说明校验码是10,身份证号码最后一位应该是X
-          if (idCardMod == 2) {
-            if (idCardLast == "X" || idCardLast == "x") {
-              callback()
+                    // 如果等于2,则说明校验码是10,身份证号码最后一位应该是X
+                    if (idCardMod == 2) {
+                        if (idCardLast == "X" || idCardLast == "x") {
+                            callback()
+                        } else {
+                            callback(new Error("身份证号格式有误!"))
+                        }
+                    } else {
+                        // 用计算出的验证码与最后一位身份证号码匹配,如果一致,说明通过,否则是无效的身份证号码
+                        if (idCardLast == idCardY[idCardMod]) {
+                            callback()
+                        } else {
+                            callback(new Error("身份证号格式有误!"))
+                        }
+                    }
+                } else {
+                    callback()
+                }
             } else {
-              callback(new Error("身份证号格式有误!"))
+                //alert("身份证格式不正确!");
+                callback(new Error("身份证号格式有误!"))
             }
-          } else {
-            // 用计算出的验证码与最后一位身份证号码匹配,如果一致,说明通过,否则是无效的身份证号码
-            if (idCardLast == idCardY[idCardMod]) {
-              callback()
-            } else {
-              callback(new Error("身份证号格式有误!"))
+
+            callback()
+        }
+
+        //手机号格式校验
+        let validatorPhone = function (rule, value, callback) {
+            if (value) {
+                if (!/^1[3456789]\d{9}$/.test(value)) {
+                    callback(new Error('手机号格式有误!'))
+                } else {
+                    callback()
+                }
             }
-          }
-        } else {
-          callback()
+            callback()
         }
-      } else {
-        //alert("身份证格式不正确!");
-        callback(new Error("身份证号格式有误!"))
-      }
 
-      callback()
-    }
+        return {
+            labelData: [],
+            form: {},
+            search: {},
+            excelBox: false,
+            selectionList: [],
+            labelFlag: false,
+            editLabelFlge: false,
+            query: {},
+            loading: true,
+            page: {
+                pageSize: 10,
+                currentPage: 1,
+                total: 0
+            },
+            option: {
+                labelWidth: 144,
+                searchLabelWidth: 96,
+                searchShow: true,
+                searchMenuSpan: 3,
+                menuWidth: 280,
+                menu: false,
+                height: 'auto',
+                calcHeight: 80,
+                tip: false,
+                border: true,
+                index: true,
+                selection: true,
+                viewBtn: false,
+                addBtn: false,
+                delBtn: false,
+                editBtn: false,
+                dialogType: 'drawer',
+                dialogClickModal: false,
 
-    //手机号格式校验
-    let validatorPhone = function (rule, value, callback) {
-      if (value) {
-        if (!/^1[3456789]\d{9}$/.test(value)) {
-          callback(new Error('手机号格式有误!'))
-        } else {
-          callback()
-        }
-      }
-      callback()
-    }
+                column: [{
+                    label: "与业主关系",
+                    prop: "relationship",
+                    type: "select",
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=roleRelation",
+                    dataType: "number",
+                    hide: true,
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                    rules: [{
+                        required: true,
+                        message: "请选择与业主关系",
+                        trigger: "blur",
+                    }],
+                },
 
-    return {
-      labelData: [],
-      form: {},
-      search: {},
-      excelBox: false,
-      selectionList: [],
-      labelFlag: false,
-      editLabelFlge: false,
-      query: {},
-      loading: true,
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
-      option: {
-        labelWidth: 144,
-        searchLabelWidth: 96,
-        searchShow: true,
-        searchMenuSpan: 3,
-        menuWidth: 280,
-        menu: false,
-        height: 'auto',
-        calcHeight: 80,
-        tip: false,
-        border: true,
-        index: true,
-        selection: true,
-        viewBtn: false,
-        addBtn: false,
-        delBtn: false,
-        editBtn: false,
-        dialogType: 'drawer',
-        dialogClickModal: false,
-        menuFixed: 'right',
-        column: [{
-          label: "与业主关系",
-          prop: "relationship",
-          type: "select",
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=roleRelation",
-          dataType: "number",
-          hide: true,
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-          rules: [{
-            required: true,
-            message: "请选择与业主关系",
-            trigger: "blur",
-          }],
-        },
+                {
+                    width: 110,
+                    label: "姓名",
+                    prop: "name",
+                    searchSpan: 3,
+                    searchLabelWidth: 66,
+                    search: true,
+                    rules: [{
+                        required: true,
+                        message: "请输入姓名",
+                        trigger: "blur",
+                    }],
+                },
 
-        {
-          width: 110,
-          label: "姓名",
-          prop: "name",
-          searchSpan: 3,
-          searchLabelWidth: 66,
-          search: true,
-          rules: [{
-            required: true,
-            message: "请输入姓名",
-            trigger: "blur",
-          }],
-        },
+                {
+                    hide: true,
+                    label: "证件类型",
+                    prop: "cardType",
+                    type: "select",
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=cardType",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-        {
-          hide: true,
-          label: "证件类型",
-          prop: "cardType",
-          type: "select",
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=cardType",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
+                {
+                    width: 160,
+                    display: true,
+                    label: "身份证号",
+                    prop: "idCard",
+                    search: true,
+                    searchSpan: 4,
+                    slot: true,
+                    rules: [{
+                        validator: isCardId,
+                        trigger: 'blur'
+                    }],
+                },
 
-        {
-          width: 160,
-          display: true,
-          label: "身份证号",
-          prop: "idCard",
-          search: true,
-          searchSpan: 4,
-          slot: true,
-          rules: [{
-            validator: isCardId,
-            trigger: 'blur'
-          }],
-        },
+                {
+                    hide: true,
+                    display: false,
+                    width: 160,
+                    label: "证件号码",
+                    prop: "cardNo",
+                },
 
-        {
-          hide: true,
-          display: false,
-          width: 160,
-          label: "证件号码",
-          prop: "cardNo",
-        },
+                {
+                    label: "出生日期",
+                    prop: "birthday",
+                    type: "date",
+                    format: "yyyy-MM-dd",
+                    valueFormat: "yyyy-MM-dd",
+                    hide: true,
+                },
 
-        {
-          label: "出生日期",
-          prop: "birthday",
-          type: "date",
-          format: "yyyy-MM-dd",
-          valueFormat: "yyyy-MM-dd",
-          hide: true,
-        },
 
+                {
+                    width: 60,
+                    label: "性别",
+                    prop: "gender",
+                    type: "select",
+                    dicData: [{
+                        label: "男",
+                        value: 1
+                    },
+                    {
+                        label: "女",
+                        value: 0
+                    },
+                    {
+                        label: "未知",
+                        value: "3"
+                    }
+                    ],
+                },
 
-        {
-          width: 60,
-          label: "性别",
-          prop: "gender",
-          type: "select",
-          dicData: [{
-            label: "男",
-            value: 1
-          },
-          {
-            label: "女",
-            value: 0
-          },
-          {
-            label: "未知",
-            value: "3"
-          }
-          ],
-        },
+                {
+                    width: 120,
+                    label: "手机号码",
+                    prop: "phoneNumber",
+                    search: true,
+                    searchSpan: 4,
+                    slot: true,
+                    rules: [{
+                        required: true,
+                        message: "请输入手机号码",
+                        trigger: "blur",
+                    },
+                    {
+                        validator: validatorPhone,
+                        trigger: 'blur'
+                    }
+                    ],
+                },
 
-        {
-          width: 120,
-          label: "手机号码",
-          prop: "phoneNumber",
-          search: true,
-          searchSpan: 4,
-          slot: true,
-          rules: [{
-            required: true,
-            message: "请输入手机号码",
-            trigger: "blur",
-          },
-          {
-            validator: validatorPhone,
-            trigger: 'blur'
-          }
-          ],
-        },
+                {
+                    label: "居住情况",
+                    prop: "residentialStatus",
+                    type: "select",
+                    hide: true,
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=residentialStatusType",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-        {
-          label: "居住情况",
-          prop: "residentialStatus",
-          type: "select",
-          hide: true,
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=residentialStatusType",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
+                {
+                    label: "其他联系方式",
+                    prop: "otherContact",
+                    hide: true,
+                    rules: [{
+                        validator: validatorPhone,
+                        trigger: 'blur'
+                    }],
+                },
 
-        {
-          label: "其他联系方式",
-          prop: "otherContact",
-          hide: true,
-          rules: [{
-            validator: validatorPhone,
-            trigger: 'blur'
-          }],
-        },
+                {
+                    label: "是否主要联系人",
+                    prop: "isPrimaryContact",
+                    type: "select",
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=primaryContactType",
+                    dataType: "number",
+                    hide: true,
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-        {
-          label: "是否主要联系人",
-          prop: "isPrimaryContact",
-          type: "select",
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=primaryContactType",
-          dataType: "number",
-          hide: true,
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
+                // {
+                // label: "关系",
+                // prop: "roleType",
+                // type: "select",
+                // dicUrl: "/api/blade-system/dict-biz/dictionary?code=roleType",
+                // dataType: "number",
+                //     props: {
+                //         label: "dictValue",
+                //         value: "dictKey",
+                //     },
+                // },
 
-        // {
-        // label: "关系",
-        // prop: "roleType",
-        // type: "select",
-        // dicUrl: "/api/blade-system/dict-biz/dictionary?code=roleType",
-        // dataType: "number",
-        //     props: {
-        //         label: "dictValue",
-        //         value: "dictKey",
-        //     },
-        // },
+                {
+                    width: 220,
+                    overHidden: true,
+                    label: '小区名称',
+                    prop: "aoiName",
+                    search: true,
+                    searchSpan: 4,
+                    display: false
+                },
 
-        {
-          width: 220,
-          overHidden: true,
-          label: '小区名称',
-          prop: "aoiName",
-          search: true,
-          searchSpan: 4,
-          display: false
-        },
+                {
+                    width: 110,
+                    label: "所属街道",
+                    addDisplay: false,
+                    editDisplay: false,
+                    viewDisplay: false,
+                    prop: "townStreetName",
+                    search: true,
+                    searchSpan: 4
+                },
 
-        {
-          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
+                },
 
-        {
-          width: 156,
-          overHidden: true,
-          label: "所属社区",
-          addDisplay: false,
-          editDisplay: false,
-          viewDisplay: false,
-          prop: "neiName",
-          search: true,
-          searchSpan: 4
-        },
+                {
+                    width: 110,
+                    overHidden: true,
+                    label: "所属网格",
+                    addDisplay: false,
+                    editDisplay: false,
+                    viewDisplay: false,
+                    prop: "gridName",
+                },
 
-        {
-          width: 110,
-          overHidden: true,
-          label: "所属网格",
-          addDisplay: false,
-          editDisplay: false,
-          viewDisplay: false,
-          prop: "gridName",
-        },
+                {
+                    width: 156,
+                    overHidden: true,
+                    label: "地址",
+                    prop: "address",
+                    display: false
+                },
 
-        {
-          width: 156,
-          overHidden: true,
-          label: "地址",
-          prop: "address",
-          display: false
-        },
 
+                {
+                    hide: true,
+                    parent: false,
+                    width: 160,
+                    label: "籍贯地区",
+                    prop: "nativePlaceAdcode",
+                    type: "tree",
+                    typeformat (item, label, value) {
+                        return item.addressDetail
+                    },
+                    change: ({
+                        value,
+                        column,
+                        item,
+                        dic
+                    }) => {
+                        item.addressDetail = findParentOrCur(dic, item.id)
+                    },
+                    props: {
+                        label: 'name',
+                        value: 'id'
+                    },
+                    dicUrl: `/api/blade-system/region/getBaseTree`,
+                },
 
-        {
-          hide: true,
-          parent: false,
-          width: 160,
-          label: "籍贯地区",
-          prop: "nativePlaceAdcode",
-          type: "tree",
-          typeformat(item, label, value) {
-            return item.addressDetail
-          },
-          change: ({
-            value,
-            column,
-            item,
-            dic
-          }) => {
-            item.addressDetail = findParentOrCur(dic, item.id)
-          },
-          props: {
-            label: 'name',
-            value: 'id'
-          },
-          dicUrl: `/api/blade-system/region/getBaseTree`,
-        },
+                {
+                    hide: true,
+                    label: "户籍类型",
+                    prop: "residentType",
+                    type: "select",
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=residentType",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-        {
-          hide: true,
-          label: "户籍类型",
-          prop: "residentType",
-          type: "select",
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=residentType",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
+                {
+                    hide: true,
+                    parent: false,
+                    width: 160,
+                    label: "户籍地区",
+                    prop: "residentAdcode",
+                    type: "tree",
+                    typeformat (item, label, value) {
+                        return item.addressDetail
+                    },
+                    change: ({
+                        value,
+                        column,
+                        item,
+                        dic
+                    }) => {
+                        item.addressDetail = findParentOrCur(dic, item.id)
+                    },
+                    props: {
+                        label: 'name',
+                        value: 'id'
+                    },
+                    dicUrl: `/api/blade-system/region/getBaseTree`,
+                },
 
-        {
-          hide: true,
-          parent: false,
-          width: 160,
-          label: "户籍地区",
-          prop: "residentAdcode",
-          type: "tree",
-          typeformat(item, label, value) {
-            return item.addressDetail
-          },
-          change: ({
-            value,
-            column,
-            item,
-            dic
-          }) => {
-            item.addressDetail = findParentOrCur(dic, item.id)
-          },
-          props: {
-            label: 'name',
-            value: 'id'
-          },
-          dicUrl: `/api/blade-system/region/getBaseTree`,
-        },
+                {
+                    label: "户籍地址",
+                    prop: "hukouRegistration",
+                    hide: true,
+                },
 
-        {
-          label: "户籍地址",
-          prop: "hukouRegistration",
-          hide: true,
-        },
+                {
+                    disabled: false,
+                    label: "居住地区",
+                    prop: "homeAdcode",
+                    hide: true,
+                    type: 'select',
+                    props: {
+                        label: 'name',
+                        value: 'code'
+                    },
+                    dicUrl: `/api/blade-system/region/select?code=361102`,
+                },
 
-        {
-          disabled: false,
-          label: "居住地区",
-          prop: "homeAdcode",
-          hide: true,
-          type: 'select',
-          props: {
-            label: 'name',
-            value: 'code'
-          },
-          dicUrl: `/api/blade-system/region/select?code=361102`,
-        },
+                {
+                    disabled: false,
+                    label: "现居住地",
+                    prop: "currentAddress",
+                    hide: true,
+                },
 
-        {
-          disabled: false,
-          label: "现居住地",
-          prop: "currentAddress",
-          hide: true,
-        },
+                {
+                    overHidden: true,
+                    label: "标签",
+                    prop: "householdLabelList",
+                    display: false
+                },
 
-        {
-          width: 210,
-          overHidden: true,
-          label: "标签",
-          prop: "householdLabelList",
-          display: false
-        },
+                {
+                    label: "民族",
+                    prop: "ethnicity",
+                    type: "select",
+                    hide: true,
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=nationType",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-        {
-          label: "民族",
-          prop: "ethnicity",
-          type: "select",
-          hide: true,
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=nationType",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
-
-        {
-          label: "学历",
-          prop: "education",
-          type: "select",
-          hide: true,
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=educationType",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
-
-        {
-          hide: true,
-          width: 160,
-          label: "职业类别",
-          prop: "occupation"
-        },
-
-        {
-          label: "工作单位",
-          prop: "employer",
-          hide: true,
-        },
-
-        {
-          hide: true,
-          width: 160,
-          label: "工作单位地址",
-          prop: "cmpyRegAddr"
-        },
-
-        {
-          label: "工作状态",
-          prop: "workStatus",
-          type: "select",
-          hide: true,
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=workStatusType",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
-
-        {
-          label: "婚姻状态",
-          prop: "maritalStatus",
-          type: "select",
-          hide: true,
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=marriageStatusType",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
-
-        {
-          hide: true,
-          width: 160,
-          label: "宗教信仰",
-          prop: "religiousBelief",
-        },
-
-        {
-          hide: true,
-          label: "健康状态",
-          prop: "healthStatus",
-          type: "select",
-          dicUrl: "/api/blade-system/dict-biz/dictionary?code=healthStatus",
-          dataType: "number",
-          props: {
-            label: "dictValue",
-            value: "dictKey",
-          },
-        },
-
-        {
-          disabled: true,
-          hide: true,
-          width: 160,
-          label: "疾病名称",
-          prop: "diseaseName"
-        },
-
-        {
-          hide: true,
-          width: 160,
-          label: "外出去向",
-          prop: "goOutWhere"
-        },
-
-        {
-          hide: true,
-          width: 160,
-          label: "外出原因",
-          prop: "goOutReason"
-        },
-
-        {
-          hide: true,
-          label: "外出时间",
-          prop: "goOutTime",
-          type: "date",
-          format: "yyyy-MM-dd",
-          valueFormat: "yyyy-MM-dd",
-          width: 160,
-        },
-
-        {
-          hide: true,
-          width: 160,
-          label: "外出详址",
-          prop: "goOutAddr"
-        },
-
-        {
-          label: "车牌号",
-          prop: "cardNumber",
-          hide: true,
-        },
-        ]
-      },
-      data: [],
-
-      excelForm: {},
-      labelForm: {},
-      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'
-        }]
-      },
-      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,
-        }
-        ]
-      },
-      currentLabel: {},
-      currentRow: {},
-      householdLabelList: [],
-
-      labelCountList: []
-
-    }
-  },
-  watch: {
-    'form.source': {
-      handler(newData) {
-        let currentAddressColumn = this.findObject(
-          this.option.column,
-          'currentAddress'
-        )
-
-        let homeAdcodeColumn = this.findObject(
-          this.option.column,
-          'homeAdcode'
-        )
-
-        if (newData == 1) {
-          currentAddressColumn.disabled = true
-          homeAdcodeColumn.disabled = true
-        } else {
-          currentAddressColumn.disabled = false
-          homeAdcodeColumn.disabled = false
-        }
-      },
-    },
-
-    'form.cardType': {
-      handler(newData) {
-        let idCardColumn = this.findObject(
-          this.option.column,
-          'idCard'
-        )
-
-        let cardNoColumn = this.findObject(
-          this.option.column,
-          'cardNo'
-        )
-
-        if (newData == 111) {
-          idCardColumn.display = true
-          cardNoColumn.display = false
-        } else {
-          idCardColumn.display = false
-          cardNoColumn.display = true
-        }
-      },
-    },
-
-    'form.healthStatus': {
-      handler(newData) {
-        let diseaseNameColumn = this.findObject(
-          this.option.column,
-          'diseaseName'
-        )
+                {
+                    label: "学历",
+                    prop: "education",
+                    type: "select",
+                    hide: true,
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=educationType",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-        if (newData == 3) {
-          diseaseNameColumn.disabled = false
-        } else {
-          diseaseNameColumn.disabled = true
-        }
-      },
-    },
-  },
-  computed: {
-    ...mapGetters(["userInfo", "permission"]),
-    permissionList() {
-      return {
-        addBtn: this.vaildData(this.permission.household_add, false),
-        viewBtn: this.vaildData(this.permission.household_view, true),
-        delBtn: this.vaildData(this.permission.household_delete, true),
-        editBtn: this.vaildData(this.permission.household_edit, true)
-      }
-    },
+                {
+                    hide: true,
+                    width: 160,
+                    label: "职业类别",
+                    prop: "occupation"
+                },
 
-    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")
-          }
-        }
-      }
-    },
+                {
+                    label: "工作单位",
+                    prop: "employer",
+                    hide: true,
+                },
 
-    labelDispose() {
-      return (list) => {
-        return list.map(item => item.labelName).join(',')
-      }
-    }
-  },
-  mounted() {
-    this.getLabelCount();
+                {
+                    hide: true,
+                    width: 160,
+                    label: "工作单位地址",
+                    prop: "cmpyRegAddr"
+                },
 
-  },
-  methods: {
-    init(row) {
-      console.log(JSON.stringify(row))
-      this.query.regionCode = row.communityCode
-      // this.onLoad(this.page, this.query)
-    },
-    onsubmit() {
-      if (this.labelForm.color === '#EBEDF0') {
-        let params = {
-          householdId: this.currentRow.id,
-          labelId: this.currentLabel.id
-        }
-        removeHouseholdLabel(params).then(res => {
-          this.onLoad(this.page)
+                {
+                    label: "工作状态",
+                    prop: "workStatus",
+                    type: "select",
+                    hide: true,
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=workStatusType",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-          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 = 1
+                {
+                    label: "婚姻状态",
+                    prop: "maritalStatus",
+                    type: "select",
+                    hide: true,
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=marriageStatusType",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-        saveOrUpdateHouseholdLabel(this.labelForm).then(res => {
-          this.onLoad(this.page)
+                {
+                    hide: true,
+                    width: 160,
+                    label: "宗教信仰",
+                    prop: "religiousBelief",
+                },
 
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          })
-          this.editLabelFlge = false
-          this.manageLabel(this.currentRow)
-          this.loading = false
-        })
-      }
-    },
+                {
+                    hide: true,
+                    label: "健康状态",
+                    prop: "healthStatus",
+                    type: "select",
+                    dicUrl: "/api/blade-system/dict-biz/dictionary?code=healthStatus",
+                    dataType: "number",
+                    props: {
+                        label: "dictValue",
+                        value: "dictKey",
+                    },
+                },
 
-    changLabel(item) {
-      this.editLabelFlge = true
-      this.currentLabel = item
-      this.labelForm.color = item.color
-      this.labelForm.remark = item.remark
-    },
+                {
+                    disabled: true,
+                    hide: true,
+                    width: 160,
+                    label: "疾病名称",
+                    prop: "diseaseName"
+                },
 
-    manageLabel(item) {
-      this.loading = true
-      this.currentRow = item
-      this.labelFlag = true
-      let params = {
-        parentId: 103
-      }
-      // 查询标签
-      getLabelList(Object.assign(params)).then(res => {
-        const data = res.data.data
-        // this.labelData = data;
-        // 查询详情
-        getDetatils(item.id).then(res => {
-          this.householdLabelList = res.data.data.householdLabelList
-          // 将细类放到一起
-          data.forEach(e => {
-            e.children.forEach(f => {
-              if (this.householdLabelList.length > 0) {
-                this.householdLabelList.forEach(h => {
-                  if (Number(f.id) == h.labelId) {
-                    f['color'] = h.color
-                    f['remark'] = h.remark
-                  }
-                })
-              }
-            })
-          })
-          this.labelData = data
-          this.loading = false
-        })
-      })
-    },
-    rowSave(row, done, loading) {
-      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) {
-      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) {
-      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-household/household/export-household?${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)) {
-        getDetatils(this.form.id).then(res => {
-          this.form = res.data.data
-          done()
-        })
-      }
-      this.initFlag = true
-    },
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage
-    },
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query)
-    },
+                {
+                    hide: true,
+                    width: 160,
+                    label: "外出去向",
+                    prop: "goOutWhere"
+                },
 
-    onLoad(page, params = {}) {
-      this.query.parentId = 100
-      this.loading = true
-      getKeynotePersonnelPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-        const data = {
-          ...res.data.data,
-          records: res.data.data.records.map(item => {
-            return {
-              ...item,
-              'phoneNumberflag': false,
-              'idCardflag': false
-            }
-          })
-        }
-        this.page.total = data.total
-        this.data = data.records
-        this.loading = false
-        this.selectionClear()
-      })
-    },
+                {
+                    hide: true,
+                    width: 160,
+                    label: "外出原因",
+                    prop: "goOutReason"
+                },
 
-    showStringDispose(row, type) {
-      row[type] = !row[type]
-    },
+                {
+                    hide: true,
+                    label: "外出时间",
+                    prop: "goOutTime",
+                    type: "date",
+                    format: "yyyy-MM-dd",
+                    valueFormat: "yyyy-MM-dd",
+                    width: 160,
+                },
 
-    getLabelCount() {
-      getTreeList().then(res => {
-        const data = res.data.data
-        let list = data[0].children;
-        this.labelCountList = list;
-        this.$nextTick(() => {
-          this.setEchartsOption(list)
-        })
-      })
-    },
+                {
+                    hide: true,
+                    width: 160,
+                    label: "外出详址",
+                    prop: "goOutAddr"
+                },
 
-    setEchartsOption(data) {
-      let option = {
-        // title: {
-        //     text:"",
-        //     left: 'center',
-        //     top:20,
-        // },
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          orient: 'horizontal',
-          left: 'center',
-          top: 30,
-        },
-        labelLine: {
-          length: 15,
-          length2: 0,
-          maxSurfaceAngle: 80
-        },
-        series: [
-          {
-            type: 'pie',
-            center: '50%',
-            radius: '50%', //修改大小
-            top: 20,
+                {
+                    label: "车牌号",
+                    prop: "cardNumber",
+                    hide: true,
+                },
+                ]
+            },
             data: [],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      };
-      let myEchart = document.getElementsByClassName('echarts-item'); //获取类名
-      for (let i = 0, ii = data.length; i < ii; i++) {
-        let myCharts = echarts.init(myEchart[i]);
-        // option.title.text = data[i].name;
-        let series = [];
-        for (let k = 0, kk = data[i].children.length; k < kk; k++) {
-          series.push({
-            value: data[i].children[k].count,
-            name: data[i].children[k].name,
-            id: data[i].children[k].id,
-          })
-        }
-        option.legend.type = series.length > 4 ? "scroll" : "plain"
-        option.series[0].data = series;
-        option && myCharts.setOption(option);
-        myCharts.on('click', (params) => {
-          console.log(params)
-          this.query.labelId = params.data.id;
-          this.onLoad(this.page, this.query)
-        })
-      }
 
+            excelForm: {},
+            labelForm: {},
+            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'
+                }]
+            },
+            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,
+                }
+                ]
+            },
+            currentLabel: {},
+            currentRow: {},
+            householdLabelList: [],
+
+            labelCountList: []
+        }
+    },
+    watch: {
+        'form.source': {
+            handler (newData) {
+                let currentAddressColumn = this.findObject(
+                    this.option.column,
+                    'currentAddress'
+                )
+
+                let homeAdcodeColumn = this.findObject(
+                    this.option.column,
+                    'homeAdcode'
+                )
+
+                if (newData == 1) {
+                    currentAddressColumn.disabled = true
+                    homeAdcodeColumn.disabled = true
+                } else {
+                    currentAddressColumn.disabled = false
+                    homeAdcodeColumn.disabled = false
+                }
+            },
+        },
+
+        'form.cardType': {
+            handler (newData) {
+                let idCardColumn = this.findObject(
+                    this.option.column,
+                    'idCard'
+                )
+
+                let cardNoColumn = this.findObject(
+                    this.option.column,
+                    'cardNo'
+                )
+
+                if (newData == 111) {
+                    idCardColumn.display = true
+                    cardNoColumn.display = false
+                } else {
+                    idCardColumn.display = false
+                    cardNoColumn.display = true
+                }
+            },
+        },
+
+        'form.healthStatus': {
+            handler (newData) {
+                let diseaseNameColumn = this.findObject(
+                    this.option.column,
+                    'diseaseName'
+                )
+
+                if (newData == 3) {
+                    diseaseNameColumn.disabled = false
+                } else {
+                    diseaseNameColumn.disabled = true
+                }
+            },
+        },
+    },
+    computed: {
+        ...mapGetters(["userInfo", "permission"]),
+        permissionList () {
+            return {
+                addBtn: this.vaildData(this.permission.household_add, false),
+                viewBtn: this.vaildData(this.permission.household_view, true),
+                delBtn: this.vaildData(this.permission.household_delete, true),
+                editBtn: this.vaildData(this.permission.household_edit, true)
+            }
+        },
+
+        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()
+
+    },
+    methods: {
+        init (row) {
+            console.log(JSON.stringify(row))
+            this.query.regionCode = row.communityCode
+            // this.onLoad(this.page, this.query)
+        },
+        onsubmit () {
+            if (this.labelForm.color === '#EBEDF0') {
+                let params = {
+                    householdId: this.currentRow.id,
+                    labelId: this.currentLabel.id
+                }
+                removeHouseholdLabel(params).then(res => {
+                    this.onLoad(this.page)
+
+                    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 = 1
+
+                saveOrUpdateHouseholdLabel(this.labelForm).then(res => {
+                    this.onLoad(this.page)
+
+                    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: 103
+            }
+            // 查询标签
+            getLabelList(Object.assign(params)).then(res => {
+                const data = res.data.data
+                // this.labelData = data;
+                // 查询详情
+                getDetatils(item.id).then(res => {
+                    this.householdLabelList = res.data.data.householdLabelList
+                    // 将细类放到一起
+                    data.forEach(e => {
+                        e.children.forEach(f => {
+                            if (this.householdLabelList.length > 0) {
+                                this.householdLabelList.forEach(h => {
+                                    if (Number(f.id) == h.labelId) {
+                                        f['color'] = h.color
+                                        f['remark'] = h.remark
+                                    }
+                                })
+                            }
+                        })
+                    })
+                    this.labelData = data
+                    this.loading = false
+                })
+            })
+        },
+        rowSave (row, done, loading) {
+            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) {
+            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) {
+            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-household/household/export-household?${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)) {
+                getDetatils(this.form.id).then(res => {
+                    this.form = res.data.data
+                    done()
+                })
+            }
+            this.initFlag = true
+        },
+        currentChange (currentPage) {
+            this.page.currentPage = currentPage
+        },
+        sizeChange (pageSize) {
+            this.page.pageSize = pageSize
+        },
+        refreshChange () {
+            this.onLoad(this.page, this.query)
+        },
+
+        onLoad (page, params = {}) {
+            this.query.parentId = 100
+            this.loading = true
+            getKeynotePersonnelPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+                const data = {
+                    ...res.data.data,
+                    records: res.data.data.records.map(item => {
+                        return {
+                            ...item,
+                            'phoneNumberflag': false,
+                            'idCardflag': 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[0].children
+                this.labelCountList = list
+                this.$nextTick(() => {
+                    this.setEchartsOption(list)
+                })
+            })
+        },
+
+        setEchartsOption (data) {
+            let option = {
+                // title: {
+                //     text:"",
+                //     left: 'center',
+                //     top:20,
+                // },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'horizontal',
+                    padding: 20,
+                },
+                labelLine: {
+                    length: 15,
+                    length2: 0,
+                    maxSurfaceAngle: 80
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        center: '50%',
+                        radius: '40%', //修改大小
+                        data: [],
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ]
+            }
+            let myEchart = document.getElementsByClassName('echarts-item') //获取类名
+            for (let i = 0, ii = data.length; i < ii; i++) {
+                let myCharts = echarts.init(myEchart[i])
+                // option.title.text = data[i].name;
+                let series = []
+                for (let k = 0, kk = data[i].children.length; k < kk; k++) {
+                    series.push({
+                        value: data[i].children[k].count,
+                        name: data[i].children[k].name,
+                        id: data[i].children[k].id,
+                    })
+                }
+                option.legend.type = series.length > 4 ? "scroll" : "plain"
+                option.series[0].data = series
+                option && myCharts.setOption(option)
+                myCharts.on('click', (params) => {
+                    console.log(params)
+                    this.query.labelId = params.data.id
+                    this.onLoad(this.page, this.query)
+                })
+            }
+
+        }
     }
-  }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.cur-resident-supervision-page {
+    margin: 10px !important;
+    margin-top: 0 !important;
+    padding: 0 !important;
+}
+
 .box {
-  height: 800px;
+    height: 800px;
 }
 
 .grid-container2 {
-  /* display: grid;
+    /* display: grid;
     grid-template-columns: auto auto auto auto;
     grid-gap: 10px; */
-  display: flex;
-  flex-wrap: wrap;
-  padding-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 20px;
 }
 
 .grid-item {
-  padding: 8px 14px;
-  border: 1px solid #dcdfe6;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  border-radius: 20px;
+    padding: 8px 14px;
+    border: 1px solid #dcdfe6;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 20px;
 }
 
 .grid-item:hover {
-  background-color: #e8f4ff;
-  color: #017BFC;
-  cursor: pointer;
+    background-color: #e8f4ff;
+    color: #017BFC;
+    cursor: pointer;
 }
 
 .el-scrollbar {
-  height: 100%;
+    height: 100%;
 }
 
 .box .el-scrollbar__wrap {
-  overflow: scroll;
+    overflow: scroll;
 }
 
 .echarts-wrap {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-  justify-content: space-between;
+    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) - 5px);
+    }
+
+    .echarts-cell {
+        display: flex;
+        flex-direction: column;
+        background: #fff;
+
+        .echarts-item {
+            padding: 10px;
+            width: 100%;
+            height: 0;
+            flex: 1;
+        }
+    }
+
 }
 
-.echarts-cell {
-  /* width: 31%;
-  height: 460px; */
-  margin: 0 30px 30px 0;
-  border: 1px solid #999;
+.cur-from-box {
+    margin-top: 10px;
+    padding: 10px;
+    background: #fff;
 }
-
-.echarts-item {
-  width: 100%;
-  height: calc(100% - 52px);
-}
-
-.echarts-cell:nth-child(1),
-.echarts-cell:nth-child(2) {
-  width: 47%;
-  height:460px;
-}
-
-.echarts-cell:nth-child(3),
-.echarts-cell:nth-child(4),
-.echarts-cell:nth-child(5) {
-  width:22rem;
-  height: 380px;
-}</style>
\ No newline at end of file
+</style>
\ No newline at end of file

--
Gitblit v1.9.3