经开分局优化------大改动

linwe

2025-12-25 6c9299aef226ea8899196a0f6bad644fa92b6b3b

经开分局优化------大改动

 src/components/map/index.vue

@@ -883,8 +883,8 @@
          window.TILESET_LABEL.forEach((item) => {
            this.addMxTileset(
              `sdTilesetLayer${item.name}`,
              // `./model/${item.name}/tileset.json`,
              `${tile3DUrl}/sf3d/361102/model/all/${item.name}/tileset.json`,
              `./model/${item.name}/tileset.json`,
              // `${tile3DUrl}/sf3d/361102/model/all/${item.name}/tileset.json`,
              item
            )
          })

 src/router/page/index.js

@@ -66,7 +66,7 @@
      {
        path: "site",
        meta: {
          title: "九小场所",
          title: "“九+N”小场所",
        },
        component: site,
      },

 src/styles/media/index.scss

@@ -2917,21 +2917,22 @@
        }

        .el-dialog__body {
            display: flex;
            flex-direction: column;
            padding: countSizeVh(10);
            padding-top: 0;
            height: calc(100% - countSizeVh(40));
            font-size: countSizeVh(16);

            
            .header {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: countSizeVh(10);
                padding-left: countSizeVh(10);
                height: countSizeVh(36);
                line-height: countSizeVh(36);
                line-height: countSizeVh(40);

                &>div {
                    height: countSizeVh(32);
                    line-height: countSizeVh(32);
                    margin: 4px 0;
                    margin-right: countSizeVw(10, 1920);

                    input {
@@ -2960,6 +2961,8 @@
                }

                .el-button {
                    margin: 4px 0;
                    margin-right: countSizeVw(10, 1920);
                    padding: 0 countSizeVw(12, 1920);
                    height: countSizeVh(32);
                    line-height: countSizeVh(32);
@@ -2968,7 +2971,8 @@
            }

            .body {
                height: calc(100% - countSizeVh(36));
                height: 0;
                flex: 1;

                .el-table {
                    margin-bottom: countSizeVh(10);

 src/views/home/components/dialog/areaDetailsBox.vue

@@ -4,16 +4,40 @@
    :modal-append-to-body="false" :close-on-click-modal="false" class="area-details-box">
    <div class="header">
      <div>
        人员名称：
        <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
        人员名称： <input type="text" v-model="peoplePoliceName" placeholder="请输入人员名称" />
      </div>
      <div>
        联系电话：
        <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
        联系电话： <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
      </div>
      <div>
        身份证号：
        <input type="text" v-model="peopleCardID" placeholder="请输入身份证号" />
        身份证号： <input type="text" v-model="peopleCardID" placeholder="请输入身份证号" />
      </div>
      <div>
        民警名称： <input type="text" v-model="policeName" placeholder="请输入民警名称" />
      </div>
      <div v-if="showPersonColumn">
        人员类型：
        <el-select v-model="zdryxl" clear placeholder="请输入人员类型">
          <el-option label="实有人口" value="0"></el-option>
          <el-option label="户籍人口" value="1"></el-option>
        </el-select>
      </div>
      <div v-if="showPersonTypeColumn">
        人口类型： <el-select v-model="personType" clear placeholder="请选择人口类型">
          <el-option label="宣传煽动危害国家安全的人员" value="1"></el-option>
          <el-option label="扬言报复社会他人的人员" value="2"></el-option>
          <el-option label="故意犯罪刑满释放不满五年人员" value="3"></el-option>
          <el-option label="吸毒人员" value="4"></el-option>
          <el-option label="被剥夺政治权利的罪犯" value="5"></el-option>
          <el-option label="家庭暴力加害人" value="6"></el-option>
          <el-option label="有严重不良行为未成年人" value="7"></el-option>
          <el-option label="肇事肇祸精神病人" value="8"></el-option>
          <el-option label="被取保候审人员" value="9"></el-option>
          <el-option label="被监视居住人员" value="10"></el-option>
          <el-option label="非正常访人员" value="11"></el-option>
          <el-option label="退役涉访人员" value="12"></el-option>
          <el-option label="其他规定人员" value="13"></el-option>
        </el-select>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
@@ -37,7 +61,11 @@
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personType" label="人口类型">
        <el-table-column :show-overflow-tooltip="true" prop="policeName" label="责任区民警"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policePhone" label="民警电话"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="zdryxl" label="人员类型"
          v-if="showPersonColumn"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="personType" label="人口类型" v-if="showPersonTypeColumn">
          <template slot-scope="scope">
            {{ scope.row.personType == 1 ? '户籍人口' : '实有人口' }}
          </template>
@@ -136,6 +164,10 @@
      peoplePoliceName: '',
      peopleCallPhone: '',
      peopleCardID: '',
      policePhone: '',
      policeName: '',
      zdryxl: '',
      personType: '',
      peopleInfoList: [],
      peoplePage: {
        total: 0,
@@ -151,6 +183,17 @@
  },

  computed: {
    showPersonTypeColumn () {
      // 根据 peopleTitle 来决定是否显示该列
      // 例如：当标题包含"人口"时显示，或者根据具体标题来判断
      return this.peopleTitle.includes('人口类型') || this.peopleTitle === '总人口列表'
    },
    showPersonColumn () {
      // 根据 peopleTitle 来决定是否显示该列
      // 例如：当标题包含"人口"时显示，或者根据具体标题来判断
      return this.peopleTitle.includes('人口类型') || this.peopleTitle === '重点人员列表'
    },

    positionColor () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
@@ -267,6 +310,10 @@
        realName: this.peoplePoliceName,
        phone: this.peopleCallPhone,
        cardNo: this.peopleCardID,
        policePhone: this.policePhone,
        policeName: this.policeName,
        zdryxl: this.zdryxl,
        personType: this.personType,
        current: this.peoplePage.currentPage,
        size: this.peoplePage.pageSize,
        communityCode: this.communityCode

 src/views/home/components/dialog/enterpriseInfoBox.vue

New file
@@ -0,0 +1,368 @@
<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" :before-close="landBeforeClose" :modal="true"
      :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box">
      <div class="header">
        <!-- <div>
        场所类型：
        <el-select
          clearable
          style="flex: 1"
          size="small"
          v-model="typeValue"
          @change="typeChange"
          placeholder="请选择场所类型"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.key"
            :label="item.title"
            :value="item.key"
          ></el-option>
        </el-select>
      </div> -->
        <div>
          标准地址：
          <input type="text" v-model="address" placeholder="请输入场所名称" />
        </div>
        <div>
          风险隐患类别：
          <input type="text" v-model="riskHazardCategory" placeholder="请输入场所名称" />
        </div>

        <el-button type="primary" icon="el-icon-search" @click="getNinePage">搜索</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="clearSearchValue">清空</el-button>
      </div>
      <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
          'text-align': 'center',
          'background-color': '#203c60',
          borderColor: '#324e75',
        }" :cell-style="{
  'text-align': 'center',
  borderColor: '#324e75',
  cursor: 'default',
}">
          <template slot="empty">
            <div>{{ landEmptyText }}</div>
          </template>
          <el-table-column label="序号" type="index" align="center">
            <template slot-scope="scope">
              <span>{{
                (pages.current - 1) * pages.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="companyName" width="200" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
          <el-table-column prop="standardAddress" :show-overflow-tooltip="true" label="标准地址"></el-table-column>
          <el-table-column prop="companyActualAddress" :show-overflow-tooltip="true" label="企业地址"></el-table-column>
          <el-table-column prop="companyContactPerson" :show-overflow-tooltip="true" label="企业负责人"></el-table-column>
          <el-table-column prop="companyContactPhone" :show-overflow-tooltip="true" label="企业负责电话"></el-table-column>
          <el-table-column prop="cadreContactPhone" :show-overflow-tooltip="true" label="证件号码"></el-table-column>
          <el-table-column prop="mainProducts" :show-overflow-tooltip="true" label="主营产品"></el-table-column>
          <el-table-column prop="responsiblePolice" :show-overflow-tooltip="true" label="责任民警"></el-table-column>
          <el-table-column prop="affiliatedOrganization" :show-overflow-tooltip="true" label="所属派出所"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="标准地址"></el-table-column> -->
          <!-- <el-table-column prop="nineName" :show-overflow-tooltip="true" label="场所类型"></el-table-column> -->
          <el-table-column width="80" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                @click="rowClick(scope.row)">
                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
              </el-button>
              <!-- <el-button
              type="text"
              size="small"
              title="详情"
              @click="goDetail(scope.row)"
            >
              <i class="el-icon-document" style="color: #66b1ff"></i>
            </el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="pages all-pagination-sty" ref="tablePagination">
          <el-pagination background layout="prev, pager, next, total" :total="pages.total" :page-size="pages.pageSize"
            :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNinePage,
} from "@/api/companyInfo/index.js"

export default {
  props: ["policeStaionID"],

  data () {
    return {
      type: null,
      isDanger: null,
      placeName: "",
      address: "",
      riskHazardCategory: "",
      typeValue: "",
      typeOptions: [],
      tableData: [],
      curLoading: false,
      landEmptyText: "",
      visible: false,
      title: "“九+N”小场所列表",
      callPhone: "",
      pages: {
        total: 0,
        pageSize: 12,
        current: 1,
      },
      nineType: "",
      policeName: "",
      areaId: null
    }
  },

  computed: {
    positionColor () {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
          (row.lng && row.lng != 0) ||
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return "#1AFA29"
        } else {
          return "#ccc"
        }
      }
    },

    positionDisabled () {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
          (row.lng && row.lng != 0) ||
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return false
        } else {
          return true
        }
      }
    },
  },
  methods: {
    // 点击定位
    rowClick (row) {
      this.landBeforeClose()

      // let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[0]
      // let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.x, row.y)[1]
      let lng = row.longitude
      let lat = row.latitude

      this.$EventBus.$emit("toPosition", {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000,
      })
      let rows = {
        placeName: row.riskHazardName,
        type: 1,
        location: row.address,
        principal: row.contactPerson,
        principalPhone: row.contactPhone,
      }

      this.$EventBus.$emit("mapClearLayer", {
        layerName: "scanLayer",
        type: "VectorLayer",
      })

      this.$EventBus.$emit("layerPointAdd", {
        layerName: "scanLayer",
        type: "billboard",
        params: {
          ...rows,
          lng: lng,
          lat: lat,
          alt: 1,
          size: [32, 32],
          // url: typeTree.find(i => i.key == row.nineType).url,
        },
        incident: this.siteClick,
      })

      this.siteClick({
        overlay: {
          attrParams: {
            ...rows,
            lng,
            lat,
          }
        }
      })
    },

    siteClick (e) {
      let row = e.overlay.attrParams

      this.$store.commit('SET_PLACEBASEPOPUP', true)

      this.$store.commit('SET_PLACEBASEPOPUPDATA', { ...row })

      // eslint-disable-next-line no-redeclare
      var popup = new global.DC.DivForms(global.viewer, {
        domId: 'PlaceBaseDivElementDom',
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(row.lng),
              Number(row.lat),
              0
            )
          )
        ]
      })
    },

    // 查看详情
    // goDetail (row) {
    //   this.$refs.SiteDialogPopup.initOpen(row)
    // },

    // 清空按钮-清除图标图层
    clearRow () {
      this.isDanger = null
      this.placeName = null
      this.typeValue = null
      this.$EventBus.$emit("mapClearLayer", {
        layerName: "scanLayer",
        type: "VectorLayer",
      })
      this.$store.commit("SET_DIALOGDETAILPOPUP", false)
      this.pages.current = 1
      this.getNinePage()
    },
    // 切换登记类型
    typeChange (item) {
      this.pages.current = 1
      this.getNinePage()
    },
    /**
     * @description: 显示九小场所弹窗列表
     * @param {*} name
     * @param {*} type
     * @param {*} id
     * @param {*} value 类型参数
     * @return {*}
     */
    showplacedetail (type, name, value, areaId) {
      this.type = type
      this.areaId = areaId
      this.typeValue = value
      this.visible = true
      this.title = name
      this.pages.current = 1
      console.log("this.typeValue", type, name, value, areaId)
      // 获取九小场所隐患数量统计
      // this.getNineTypeTree(value)
      this.getNinePage()
    },

    // getNineTypeTree (value) {
    //   getNineTypeTree().then((res) => {
    //     var data = res.data.data
    //     if (value) {
    //       var arr = []
    //       data.forEach((element) => {
    //         if (element.title == value) {
    //           arr.push({
    //             title: element.title,
    //             value: element.key,
    //           })
    //           this.typeValue = "" + element.key
    //         }
    //       })
    //       this.typeOptions = arr
    //       // 查询分页
    //       this.getNinePage()
    //     } else {
    //       this.typeOptions = data
    //     }
    //   })
    // },
    getNinePage () {
      this.curLoading = true
      getNinePage({
        current: this.pages.current,
        size: this.pages.pageSize,
        complianceType: this.typeValue,
        // riskHazardCategory: this.riskHazardCategory,
        address: this.address,
        isDanger: this.type == 1 ? 1 : "",
        deptId: this.policeStaionID,
        areaId: this.areaId
      })
        .then((res) => {
          const data = res.data.data
          this.tableData = data.records
          this.pages.total = data.total
          setTimeout(() => {
            this.curLoading = false
          }, 300)
        })
        .catch((error) => {
          setTimeout(() => {
            this.curLoading = false
          }, 300)
        })
    },

    /**
     * @description: 九小场所列表弹窗中搜索
     * @return {*}
     */
    searchCurent () {
      this.landPage.current = 1
      this.getNinePage()
    },

    clearSearchValue () {
      // this.isDanger = null;
      this.placeName = null
      // this.typeValue = null;
      this.pages.current = 1
      this.getNinePage()
    },

    /**
     * @description: 现有小区详情弹窗分页
     * @param {*} currentPage 当前页数
     * @return {*}
     */
    handleCurrentChange (currentPage) {
      this.pages.current = currentPage
      this.getNinePage()
    },
    landBeforeClose () {
      this.visible = false
    },
  },
  destroyed () {
    this.$EventBus.$emit("mapRemoveLayer", {
      layerName: "scanLayer",
      type: "VectorLayer",
    })
    this.$store.commit('SET_PLACEBASEPOPUP', false)
  }
}
</script>

<style lang="scss" scoped></style>

 src/views/home/components/dialog/keyPersonBox.vue

@@ -11,6 +11,36 @@
        联系电话：
        <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
      </div>
      <div>
        身份证号： <input type="text" v-model="peopleCardID" placeholder="请输入身份证号" />
      </div>
      <div>
        民警名称： <input type="text" v-model="policeName" placeholder="请输入民警名称" />
      </div>
      <div v-if="showPersonTypeColumn">
        人员类型：
        <el-select v-model="zdryxl" clear placeholder="请输入人员类型">
          <el-option label="实有人口" value="0"></el-option>
          <el-option label="户籍人口" value="1"></el-option>
        </el-select>
      </div>
      <!-- <div v-if="showPersonColumn">
        人口类型： <el-select v-model="personType" clear placeholder="请选择人口类型">
          <el-option label="宣传煽动危害国家安全的人员" value="1"></el-option>
          <el-option label="扬言报复社会他人的人员" value="2"></el-option>
          <el-option label="故意犯罪刑满释放不满五年人员" value="3"></el-option>
          <el-option label="吸毒人员" value="4"></el-option>
          <el-option label="被剥夺政治权利的罪犯" value="5"></el-option>  
          <el-option label="家庭暴力加害人" value="6"></el-option>
          <el-option label="有严重不良行为未成年人" value="7"></el-option>
          <el-option label="肇事肇祸精神病人" value="8"></el-option>
          <el-option label="被取保候审人员" value="9"></el-option>
          <el-option label="被监视居住人员" value="10"></el-option>  
          <el-option label="非正常访人员" value="11"></el-option>
          <el-option label="退役涉访人员" value="12"></el-option>
          <el-option label="其他规定人员" value="13"></el-option>
        </el-select>
      </div> -->
      <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
    </div>
@@ -28,12 +58,21 @@
            <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" min-width="240%"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区" ></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeName" label="民警名称"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policePhone" label="民警电话"></el-table-column> -->
        <el-table-column :show-overflow-tooltip="true" prop="realName" label="姓名"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="address" label="地址" min-width="240%"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="zdryzry" label="责任人"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeStationName" label="所属派出所"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeName" label="责任区民警"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policePhone" label="民警电话"></el-table-column>
        <!-- <el-table-column :show-overflow-tooltip="true" prop="zdryzry" label="责任人"></el-table-column> -->
        <!-- <el-table-column :show-overflow-tooltip="true" prop="zdrtjdld" label="街道责任领导"></el-table-column> -->
        <!-- <el-table-column :show-overflow-tooltip="true" prop="zdryxl" label="重点人员类型"></el-table-column> -->
        <el-table-column :show-overflow-tooltip="true" prop="zdryxl" label="重点人员类型"></el-table-column>
        <el-table-column prop="isCardMaking" label="二维码">
          <template slot-scope="scope">
            <img v-if="scope.row.address" :src="'http://47.217.32.232/qrcode_image/' + scope.row.picName" alt="二维码"
@@ -93,6 +132,30 @@
  },

  computed: {
    showPersonTypeColumn () {
      // 根据 peopleTitle 来决定是否显示该列
      // 例如：当标题包含"人口"时显示，或者根据具体标题来判断
      return this.keyPersonTitle.includes('人口类型') || this.keyPersonTitle === '总人口列表'
    },
    showPersonColumn () {
      // 根据 peopleTitle 来决定是否显示该列
      // 例如：当标题包含"人口"时显示，或者根据具体标题来判断
      return this.keyPersonTitle.includes('人口类型') ||
        this.keyPersonTitle === '重点人员列表' ||
        this.keyPersonTitle === '宣传煽动危害国家安全的人员' ||
        this.keyPersonTitle === '扬言报复社会他人的人员' ||
        this.keyPersonTitle === '故意犯罪刑满释放不满五年人员' ||
        this.keyPersonTitle === '吸毒人员' ||
        this.keyPersonTitle === '被剥夺政治权利的罪犯' ||
        this.keyPersonTitle === '家庭暴力加害人' ||
        this.keyPersonTitle === '有严重不良行为未成年人' ||
        this.keyPersonTitle === '肇事肇祸精神病人' ||
        this.keyPersonTitle === '被取保候审人员' ||
        this.keyPersonTitle === '被监视居住人员' ||
        this.keyPersonTitle === '非正常访人员' ||
        this.keyPersonTitle === '退役涉访人员' ||
        this.keyPersonTitle === '其他规定人员'
    },
    positionColor () {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {

 src/views/home/components/dialog/otherPlaceDetailsBox.vue

@@ -86,7 +86,7 @@
      curLoading: false,
      landEmptyText: "",
      visible: false,
      title: "九小场所列表",
      title: "“九+N”小场所列表",
      callPhone: "",
      pages: {
        total: 0,

 src/views/home/components/dialog/placeDetailsBox.vue

@@ -35,10 +35,10 @@
          'background-color': '#203c60',
          borderColor: '#324e75',
        }" :cell-style="{
          'text-align': 'center',
          borderColor: '#324e75',
          cursor: 'default',
        }">
  'text-align': 'center',
  borderColor: '#324e75',
  cursor: 'default',
}">
          <template slot="empty">
            <div>{{ landEmptyText }}</div>
          </template>
@@ -155,7 +155,7 @@
      curLoading: false,
      landEmptyText: "",
      visible: false,
      title: "九小场所列表",
      title: "“九+N”小场所列表",
      callPhone: "",
      pages: {
        total: 0,

 src/views/home/components/dialog/riskDetailsBox.vue

@@ -39,10 +39,10 @@
          'background-color': '#203c60',
          borderColor: '#324e75',
        }" :cell-style="{
          'text-align': 'center',
          borderColor: '#324e75',
          cursor: 'default',
        }">
  'text-align': 'center',
  borderColor: '#324e75',
  cursor: 'default',
}">
          <template slot="empty">
            <div>{{ landEmptyText }}</div>
          </template>
@@ -169,7 +169,7 @@
      curLoading: false,
      landEmptyText: "",
      visible: false,
      title: "九小场所列表",
      title: "“九+N”小场所列表",
      callPhone: "",
      pages: {
        total: 0,

 src/views/home/components/leftContainer.vue

@@ -1,165 +1,156 @@
<template>
    <div class="container">
        <div class="person-box" style="position: relative;">
            <div class="box">
                <div class="title">
                    <div class="title-tab">
                        <span :class="{ choosed: peopletype == 0 }">现有人员</span>
                    </div>
                </div>
                <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab" v-show="peopletype == 0">
                        <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                            <div class="tab-title-small">人口总数:</div>
                            <div class="tab-title-small">
                                {{
                                    personAll.total ? personAll.total : 0
                                }}人
                            </div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                            <div class="tab-title-small">重点人员:</div>
                            <div class="tab-title-small">
                                {{
                                    personAll.emphasisNum ? personAll.emphasisNum : 0
                                }}人
                            </div>
                        </div>
                    </div>

                    <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
                        <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
                    </div>
                </el-main>

                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin">
                </div>
  <div class="container">
    <div class="person-box" style="position: relative;">
      <div class="box">
        <div class="title">
          <div class="title-tab">
            <span :class="{ choosed: peopletype == 0 }">现有人员</span>
          </div>
        </div>
        <el-main v-loading="personEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
          <div class="sub-tab" v-show="peopletype == 0">
            <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
              <div class="tab-title-small">人口总数:</div>
              <div class="tab-title-small">
                {{
                  personAll.total ? personAll.total : 0
                }}人
              </div>
            </div>
            <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
              <div class="tab-title-small">重点人员:</div>
              <div class="tab-title-small">
                {{
                  personAll.emphasisNum ? personAll.emphasisNum : 0
                }}人
              </div>
            </div>
          </div>

            <svg class="border-svg">
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
          <div class="echarts-box" style="overflow-y: auto;" ref="REFPERSONECHARTS">
            <div id="PersonEcharts" :style="{ height: personEchartsHeight }"></div>
          </div>
        </el-main>

        <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack" @click="backBegin">
        </div>
      </div>

      <svg class="border-svg">
        <defs>
          <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
            d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
          <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#fff" stop-opacity="1" />
            <stop offset="100%" stop-color="#fff" stop-opacity="0" />
          </radialGradient>
          <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
            <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
              <animateMotion dur="8s"
                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                                c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                                c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                                c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                                c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite" />
                        </circle>
                    </mask>
                </defs>
                rotate="auto" repeatCount="indefinite" />
            </circle>
          </mask>
        </defs>

                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <div class="house-box" style="position: relative;">
            <div class="box">
                <div class="title">场所信息</div>
                <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab house-sub-tab">
                        <div class="sub-child-tab">
                            <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                                <div class="tab-title-small">九小场所:</div>
                                <div class="tab-title-small">{{ placeNum }}</div>
                            </div>
                            <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                                <div class="tab-title-small">重点场所:</div>
                                <div class="tab-title-small">{{ otherPlaceNum }}</div>
                            </div>
                        </div>
                        <div class="sub-child-tab">
                            <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 2 }" @click="houseTabClick(2)">
                                <div class="tab-title-small">风险隐患场所:</div>
                                <div class="tab-title-small">{{ riskNum }}</div>
                            </div>
                            <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 3 }" @click="houseTabClick(2)">
                                <div class="tab-title-small">企业信息:</div>
                                <div class="tab-title-small">{{ riskNum }}</div>
                            </div>
                        </div>
                    </div>
                    <div id="houseEcharts" class="echarts-box house-echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <div class="land-box" style="position: relative;">
            <div class="box">
                <div class="title">现有院落</div>
                <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)"
                    style="height: calc(100% - 17.6%);">
                    <div class="sub-tab" v-show="isAllPoliceStation">
                        <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                            <div class="tab-title-small">院落:</div>
                            <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
                        </div>
                        <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                            <div class="tab-title-small">责任区:</div>
                            <div class="tab-title-small">{{ areaNum ? areaNum : 0 }}个</div>
                        </div>
                    </div>
                    <div class="sub-tab" v-show="!isAllPoliceStation">
                        <div class="tab1 select-on-tab">
                            <div class="tab-title-small">小区:</div>
                            <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
                        </div>
                    </div>
                    <div id="landEcharts" class="echarts-box"></div>
                </el-main>
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                </use>
            </svg>
        </div>
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
        </use>
      </svg>
    </div>
    <div class="house-box" style="position: relative;">
      <div class="box">
        <div class="title">场所信息</div>
        <el-main v-loading="houseEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
          <div class="sub-tab house-sub-tab">
            <div class="sub-child-tab">
              <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                <div class="tab-title-small">“九+N”小场所:</div>
                <div class="tab-title-small">{{ placeNum }}</div>
              </div>
              <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                <div class="tab-title-small">重点场所:</div>
                <div class="tab-title-small">{{ otherPlaceNum }}</div>
              </div>
            </div>
            <div class="sub-child-tab">
              <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 2 }" @click="houseTabClick(2)">
                <div class="tab-title-small">风险隐患场所:</div>
                <div class="tab-title-small">{{ riskNum }}</div>
              </div>
              <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 3 }" @click="houseTabClick(3)">
                <div class="tab-title-small">企业信息:</div>
                <div class="tab-title-small">{{ enterpriseInfoNum }}</div>
              </div>
            </div>
          </div>
          <div id="houseEcharts" class="echarts-box house-echarts-box"></div>
        </el-main>
      </div>

      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
        </use>
      </svg>
    </div>
    <div class="land-box" style="position: relative;">
      <div class="box">
        <div class="title">现有院落</div>
        <el-main v-loading="landEchartsLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)" style="height: calc(100% - 17.6%);">
          <div class="sub-tab" v-show="isAllPoliceStation">
            <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
              <div class="tab-title-small">院落:</div>
              <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
            </div>
            <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
              <div class="tab-title-small">责任区:</div>
              <div class="tab-title-small">{{ areaNum ? areaNum : 0 }}个</div>
            </div>
          </div>
          <div class="sub-tab" v-show="!isAllPoliceStation">
            <div class="tab1 select-on-tab">
              <div class="tab-title-small">小区:</div>
              <div class="tab-title-small">{{ villageNum ? villageNum : 0 }}个</div>
            </div>
          </div>
          <div id="landEcharts" class="echarts-box"></div>
        </el-main>
      </div>

      <svg class="border-svg">
        <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
          mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
          <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s" repeatCount="indefinite" />
        </use>
      </svg>
    </div>
  </div>
</template>

<script>
import { fontSize } from '@/utils/fontSize.js'
import {
    getAreaStatisticInfo,
    getVillageStatisticData,
    getVillageStatisticDetail,
    getPlaceOfConcernStatisticData,
    getPlaceOfConcernStatisticDetail,
    getVillageDetailAndPlaceStatisticNumber,
    getNineStatistics
  getAreaStatisticInfo,
  getVillageStatisticData,
  getVillageStatisticDetail,
  getPlaceOfConcernStatisticData,
  getPlaceOfConcernStatisticDetail,
  getVillageDetailAndPlaceStatisticNumber,
  getNineStatistics
} from "@/api/home/index.js"
import { schoolJSON } from '../homeleft/school'
import { hospitalJSON } from '../homeleft/hospital'
@@ -193,1878 +184,1786 @@
const peopleColor2 = '#f26390'

export default {
    inject: ['userInfo'],
  inject: ['userInfo'],

    data () {
        return {
            placeNum: 0,
            otherPlaceNum: 0,
            riskNum: 0,
            tabType: 0,
            personEchartsLoading: false,
            houseEchartsLoading: false,
            landEchartsLoading: false,
            peopletype: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
            peopleTitle: '',
            peopleVisible: false,
            dataDeep: 1,
            keyPersonOption: {},
            keyPersonSelectSaveArr: [],
            areaNum: '',
            villageNum: '',
            policeVillageNum: '',
            policeStationPersonInfo: {},
            villagePersonStatisticInfoList: [],
            showBack: true,
            isAllPoliceStation: true,
            realHouseNum: '',
            keyPlaceNum: '',
            personAll: '',
            // 记录当前选中派出所的ID
            policeStaionID: '',
            peopleLoading: false,
            personEchartsHeight: '100%',
            syldBigType: '',
            syldName: '',
            gzcsType: '',
            gzcsUnitName: '',
            gzcsPerson: '',
            gzcsPhone: '',
            isFirstMounted: true,
            clickPoliceStationId: '',
            areaId: null,
        }
  data () {
    return {
      placeNum: 0,
      otherPlaceNum: 0,
      riskNum: 0,
      enterpriseInfoNum: 0,
      tabType: 0,
      personEchartsLoading: false,
      houseEchartsLoading: false,
      landEchartsLoading: false,
      peopletype: 0,
      tabTypeTwo: 0,
      tabTypeThree: 0,
      peopleTitle: '',
      peopleVisible: false,
      dataDeep: 1,
      keyPersonOption: {},
      keyPersonSelectSaveArr: [],
      areaNum: '',
      villageNum: '',
      policeVillageNum: '',
      policeStationPersonInfo: {},
      villagePersonStatisticInfoList: [],
      showBack: true,
      isAllPoliceStation: true,
      realHouseNum: '',
      keyPlaceNum: '',
      personAll: '',
      // 记录当前选中派出所的ID
      policeStaionID: '',
      peopleLoading: false,
      personEchartsHeight: '100%',
      syldBigType: '',
      syldName: '',
      gzcsType: '',
      gzcsUnitName: '',
      gzcsPerson: '',
      gzcsPhone: '',
      isFirstMounted: true,
      clickPoliceStationId: '',
      areaId: null,
    }
  },

  mounted () {
    // 获取所有数据并加载
    this.getHomeAllData()

    if (this.userInfo.dept_id != '1123598813738675201') {
      // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
      this.showBack = false
      this.isAllPoliceStation = false
    }

    this.$nextTick(() => {
      window.addEventListener("resize", this.echartsResize)
    })

    // this.getVillageDetailAndPlaceStatisticNumber({ deptId: this.userInfo.dept_id })
  },

  methods: {
    // 酒店列表
    getHotelList () {
      getHotelList({ deptId: this.$parent.areaChangeValue, orderName: 'hotel_name', hotelName: this.$parent.zhuSuName, orderRule: 'asc', size: this.$parent.zhuSuPage.pageSize, current: this.$parent.zhuSuPage.currentPage }).then(res => {
        console.log(res.data.data.records, 'getHotelList-1234')
        this.$parent.zhuSuPage.total = res.data.data.total
        this.$parent.zhuSuArr = res.data.data.records
        setTimeout(() => {
          this.$parent.zhuSuLoading = false
        }, 500)
      })
    },

    mounted () {
        // 获取所有数据并加载
        this.getHomeAllData()
    // 设备饼图轮播
    keyPeopleEchartsCarousel () {
      let curIndex = 0
      if (timer) {
        clearInterval(timer)
      }

        if (this.userInfo.dept_id != '1123598813738675201') {
            // console.log(this.userInfo.dept_id,'茅家岭派出所',1596020515064381442);
            this.showBack = false
            this.isAllPoliceStation = false
      timer = setInterval(() => {
        keyPersonmyChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
        curIndex = (curIndex + 1) % keyPeopleDataLength
        keyPersonmyChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
        keyPersonmyChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
      }, 1000)

      keyPersonmyChart.on("mouseover", function (param) {
        clearInterval(timer)
        keyPersonmyChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
        keyPersonmyChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        })
        keyPersonmyChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: curIndex,
        })
        curIndex = param.dataIndex
      })

      keyPersonmyChart.on("mouseout", function (param) {
        curIndex = param.dataIndex
        if (timer) {
          clearInterval(timer)
        }
        timer = setInterval(() => {
          keyPersonmyChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: curIndex,
          })
          curIndex = (curIndex + 1) % keyPeopleDataLength
          keyPersonmyChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: curIndex,
          })
          keyPersonmyChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: curIndex,
          })
        }, 1000)
      })
    },
    /**
     * 责任区查询
     * @param {*} areaId 
     */
    getHomeAllDataByAreaId (policeStationId, areaId) {
      // if(areaId){
      this.policeStaionID = policeStationId
      this.areaId = areaId
      this.getNineStatistics(true)
      // }
    },

    /**
     * @description: 获取首页的所有数据
     * @return {*}
     */
    getHomeAllData (id = '') {
      this.areaId = null
      this.policeStaionID = id
      this.clickPoliceStationId = id

      this.isFirstMounted = true
      if (id != '') {
        this.showBack = false
        this.isAllPoliceStation = false

        this.tabTypeThree = 0
      } else {
        this.showBack = true
        this.isAllPoliceStation = true
      }
      this.tabType = 0//解决下拉选择派出所重点人员显示bug
      this.personTabClick(this.tabType)

      this.getNineStatistics(true)
      this.houseTabClick(this.tabTypeTwo)

      this.landTabClick(this.tabTypeThree)

      if (leftTiming != null) {
        clearInterval(leftTiming)
        leftTiming = null
      }

      leftTiming = setInterval(async () => {
        this.houseTabClick(this.tabTypeTwo)

        this.landTabClick(this.tabTypeThree)
      }, 600000)
    },

    /**
     * @description: 户籍人口和重点人员切换
     * @param {*} type
     * @return {*}
     */
    personTabClick (type) {
      console.log('type', type, 'this.tabType', this.tabType, 'this.isFirstMounted', this.isFirstMounted)
      if (type == 0) {
        if (this.tabType == 0 && !this.isFirstMounted) {
          console.log('再次点击人口总数', this.isFirstMounted)
          this.$emit('showpeopledetail', '', '总人口列表', 'includeKeypeople', this.clickPoliceStationId)
          return
        }
        this.isFirstMounted = false
        this.dataDeep = 1
        this.disposeEchart()
        this.personEchartsLoading = true
        this.personEchartsHeight = '100%'
        if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {

          this.getPoliceStationInfo()

        } else {
          this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
        }

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
      } else if (type == 1) {
        if (this.tabType == 1 && !this.isFirstMounted) {
          console.log('再次点击重点人口')
          this.$emit('showpeopledetail', this.clickPoliceStationId, '重点人员列表', 'onlyKeypeople')
          return
        }
        this.dataDeep = 1
        this.disposeEchart()
        this.personEchartsLoading = true
        this.initkeyPersonEcharts()
      }
      this.tabType = type
    },

    /**
     * @description: 获取分局户籍人口数据
     * @return {*}
     */
    getPoliceStationInfo () {
      getVillagePersonStatisticInfo().then(res => {
        if (res.data.code == 200) {
          this.disposeEchart()
          curSubofficeData = res.data.data
          this.personAll = res.data.data
          console.log('getPoliceStationInfo', res.data.data)
          this.policeStationPersonInfo = res.data.data
          //异步，因此放进接口方法内部
          this.initPersonEcharts()
          this.clickPeopleChart()
          setTimeout(() => {
            this.personEchartsLoading = false
          }, 500)
        }
      }).catch(res => {
        setTimeout(() => {
          this.personEchartsLoading = false
        }, 500)
      })
    },

    /**
     * @description: 获取派出所户籍人口数据
     * @param {*} policeStationId
     * @param {*} name
     * @return {*}
     */
    getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
      getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
        if (res.data.code == 200) {
          this.disposeEchart()
          var chartDom = document.getElementById('PersonEcharts')
          homePersonmyChart = this.$echarts.init(chartDom)
          this.personAll = res.data.data
          console.log('this.personAll', this.personAll)

          if (this.userInfo.dept_id == '1596020515064381442') {
            this.personAll.emphasisNum = 23
          }

          this.villagePersonStatisticInfoList = res.data.data
          var xDate = [], yDate1 = [], yDate2 = []

          if (this.villagePersonStatisticInfoList.data.length > 0) {
            this.villagePersonStatisticInfoList.data.forEach(e => {
              xDate.push(e.name.replace('居民委员会', ''))
              yDate1.push({
                value: e.hjnum,
                name: e.name,
                id: e.id,
                communityCode: e.communityCode
              })
              yDate2.push({
                value: e.synum,
                name: e.name,
                id: e.id,
                communityCode: e.communityCode
              })
            })
          }
          homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
          this.clickPeopleChart()

          setTimeout(() => {
            this.dataDeep = 2
            this.personEchartsLoading = false
          }, 1000)

        }
      }).catch(res => {
        setTimeout(() => {
          this.personEchartsLoading = false
        }, 500)
      })
    },

    /**
     * @description: 初始化现有人图表
     * @return {*}
     */
    initPersonEcharts () {
      var chartDom = document.getElementById('PersonEcharts')
      homePersonmyChart = this.$echarts.init(chartDom)

      var xDate = [], yDate1 = [], yDate2 = []
      //传入x,y轴数据

      if (this.policeStationPersonInfo.data.length > 0) {
        this.policeStationPersonInfo.data.forEach(e => {
          xDate.push(e.name.replace('派出所', ''))
          yDate1.push({
            value: e.hjnum,
            id: e.id,
            type: 'policeStation',
            name: e.name
          })
          yDate2.push({
            value: e.synum,
            id: e.id,
            type: 'policeStation',
            name: e.name
          })
        })
      }

      homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2))
    },

    /**
     * @description: 图表数据处理
     * @param {*} xDate
     * @param {*} yDate
     * @param {*} colors
     * @return {*}
     */
    initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
      let options

      if (xDate.length == 0) {
        options = {
          title: {
            text: '暂无数据1',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: fontSize(14)
            }
          }
        }
      } else {
        options = {
          tooltip: {
            trigger: 'item',
            formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
            backgroundColor: 'rgba(8, 56, 185, 0.9)',
            borderColor: 'rgba(8, 56, 185, 0.9)',
            textStyle: {
              color: '#fff',
              fontSize: fontSize(12)
            }
          },
          xAxis: {
            type: 'category',
            data: xDate,

            axisLabel: {
              color: "#fff",
              interval: 0,
              rotate: 45,
              fontSize: fontSize(10)
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            max: Math.floor(Math.max(...yDate1.map(i => i.value), ...yDate2.map(i => i.value)) * 1.5),
            splitLine: {
              show: false
            },
            axisLabel: {
              color: "#fff",
              fontSize: fontSize(12)
            }
          },
          legend: {
            itemWidth: 15,
            itemHeight: 15,
            data: ['户籍人口', '实有人口'],
            textStyle: {
              color: '#fff'
            },
            formatter: function (name) {
              var data = []
              if (name == '户籍人口') {
                data = options.series[0].data
              } else {
                data = options.series[1].data
              }
              var total = 0
              for (var i = 0; i < data.length; i++) {
                total += data[i].value
              }
              return `${name} (${total}人)`
            }
          },
          series: [
            {
              name: '户籍人口',
              data: yDate1,
              type: 'bar',
              barWidth: '40%',
              stack: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              itemStyle: {
                normal: {
                  color: colors1
                  // color: function (params) {
                  //     return new global.echarts.graphic.LinearGradient(
                  //         0, 0, 0, 1,
                  //         [
                  //             { offset: 0, color: colors1[0] },
                  //             { offset: 0.5, color: colors1[1] },
                  //             { offset: 1, color: colors1[2] },
                  //         ]
                  //     )
                  // }
                },
                emphasis: {
                  color: colors1
                  // color: function (params) {
                  //     return new global.echarts.graphic.LinearGradient(
                  //         0, 0, 0, 1,
                  //         [
                  //             { offset: 0, color: colors1[2] },
                  //             { offset: 0.7, color: colors1[1] },
                  //             { offset: 1, color: colors1[0] }
                  //         ]
                  //     )
                  // }
                }
              },
            },
            {
              name: '实有人口',
              data: yDate2,
              type: 'bar',
              barWidth: '40%',
              stack: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              itemStyle: {
                normal: {
                  color: colors2
                  // color: function (params) {
                  //     return new global.echarts.graphic.LinearGradient(
                  //         0, 0, 0, 1,
                  //         [
                  //             { offset: 0, color: colors2[2] },
                  //             { offset: 0.5, color: colors2[1] },
                  //             { offset: 1, color: colors2[0] },
                  //         ]
                  //     )
                  // }
                },
                emphasis: {
                  color: colors2
                  // color: function (params) {
                  //     return new global.echarts.graphic.LinearGradient(
                  //         0, 0, 0, 1,
                  //         [
                  //             { offset: 0, color: colors2[0] },
                  //             { offset: 0.7, color: colors2[1] },
                  //             { offset: 1, color: colors2[2] }
                  //         ]
                  //     )
                  // }
                }
              },
            },

          ],
          grid: {
            top: '4%',
            left: '2%',
            right: '2%',
            bottom: '1%',
            containLabel: true
          },
        }
      }

      return options

    },

    /**
     * @description: 现有人图表中的返回按钮
     * @return {*}
     */
    backBegin () {
      this.clickPoliceStationId = this.userInfo.dept_id
      this.personAll = curSubofficeData
      this.dataDeep = 1
      this.initPersonEcharts()
      this.$parent.getAllPoliceStationCenter()
    },

    // 现有住宅和关注场所统计总数
    getVillageDetailAndPlaceStatisticNumber (params) {
      getVillageDetailAndPlaceStatisticNumber(params).then(res => {
        if (res.data.data.length > 0) {
          res.data.data.forEach(item => {
            if (item.typeName == 'gzcs') {
              this.keyPlaceNum = item.number
            } else if (item.typeName == 'syld') {
              this.realHouseNum = item.number
            }
          })
        }
        // 茅家岭单独判断
        if (this.userInfo.dept_id == '1596020515064381442') {
          this.keyPlaceNum = 54
          this.realHouseNum = 205
        }
      })
    },

    // 实有住宅统计
    getVillageStatisticData (params) {
      getVillageStatisticData(params).then(res => {
        this.disposeHouseEchart()
        let xDate = []
        let yDate = []
        res.data.data.forEach(item => {
          xDate.push(item.typeName)
          yDate.push(item.number)
        })
        // 茅家岭单独判断
        if (this.userInfo.dept_id == '1596020515064381442') {
          xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
          yDate = [34, 2, 33, 11, 22, 30, 14]
        }

        this.inithouseEcharts(xDate, yDate)
        // 点击事件
        this.clickHouseChart('实有住宅')
        setTimeout(() => {
          this.houseEchartsLoading = false
        }, 500)
      }).catch(res => {
        setTimeout(() => {
          this.houseEchartsLoading = false
        }, 500)
      })
    },

    // 实有住宅详情
    getVillageStatisticDetail () {
      getVillageStatisticDetail({ deptId: this.userInfo.dept_id, bigType: this.syldBigType, name: this.syldName, current: this.$parent.syldPage.currentPage, size: this.$parent.syldPage.pageSize }).then(res => {
        console.log('getVillageStatisticDetail', res, res.data.data.records)
        this.$parent.syldPage.total = res.data.data.total
        this.$parent.syldArr = res.data.data.records
        setTimeout(() => {
          this.$parent.syldLoading = false
        }, 500)
      })
    },

    // 关注场所统计
    getPlaceOfConcernStatisticData (params) {
      getPlaceOfConcernStatisticData(params).then(res => {
        this.disposeHouseEchart()
        let xDate = []
        let yDate = []
        res.data.data.forEach(item => {
          xDate.push(item.typeName)
          yDate.push(item.number)
        })

        // this.getVillageDetailAndPlaceStatisticNumber({ deptId: this.userInfo.dept_id })
        // 茅家岭单独判断
        if (this.userInfo.dept_id == '1596020515064381442') {
          xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
          yDate = [14, 13, 10, 17]
        }

        this.inithouseEcharts(xDate, yDate)
        // 点击事件
        this.clickHouseChart('关注场所')
        setTimeout(() => {
          this.houseEchartsLoading = false
        }, 500)
      }).catch(res => {
        setTimeout(() => {
          this.houseEchartsLoading = false
        }, 500)
      })
    },

    methods: {
        // 酒店列表
        getHotelList () {
            getHotelList({ deptId: this.$parent.areaChangeValue, orderName: 'hotel_name', hotelName: this.$parent.zhuSuName, orderRule: 'asc', size: this.$parent.zhuSuPage.pageSize, current: this.$parent.zhuSuPage.currentPage }).then(res => {
                console.log(res.data.data.records, 'getHotelList-1234')
                this.$parent.zhuSuPage.total = res.data.data.total
                this.$parent.zhuSuArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.zhuSuLoading = false
                }, 500)
            })
        },

        // 设备饼图轮播
        keyPeopleEchartsCarousel () {
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % keyPeopleDataLength
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            keyPersonmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                keyPersonmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex,
                })
                keyPersonmyChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = param.dataIndex
            })

            keyPersonmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    keyPersonmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % keyPeopleDataLength
                    keyPersonmyChart.dispatchAction({
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    keyPersonmyChart.dispatchAction({
                        type: "showTip",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
        },
        /**
         * 责任区查询
         * @param {*} areaId 
         */
        getHomeAllDataByAreaId (policeStationId, areaId) {
            // if(areaId){
            this.policeStaionID = policeStationId
            this.areaId = areaId
            this.getNineStatistics(true)
            // }
        },

        /**
         * @description: 获取首页的所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
            this.areaId = null
            this.policeStaionID = id
            this.clickPoliceStationId = id

            this.isFirstMounted = true
            if (id != '') {
                this.showBack = false
                this.isAllPoliceStation = false

                this.tabTypeThree = 0
    // 关注场所详情
    getPlaceOfConcernStatisticDetail () {
      getPlaceOfConcernStatisticDetail({ deptId: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.$parent.gzcsPage.currentPage, size: this.$parent.gzcsPage.pageSize }).then(res => {
        console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
        this.$parent.gzcsPage.total = res.data.data.total
        this.$parent.gzcsArr = res.data.data.records
        setTimeout(() => {
          this.$parent.gzcsLoading = false
        }, 500)
      })
    },
    // 九小场所echarts
    initPlaceEcharts (xDate, yDate, type) {
      var chartDom = document.getElementById('houseEcharts')
      houseMyChart = this.$echarts.init(chartDom)
      houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
      // 圆柱点击事件
      this.clickPlaceChart(type)
    },
    // 场所图表点击事件
    clickPlaceChart (type) {
      this.tabTypeThree = type
      this.houseEchartsLoading = true
      houseMyChart.on('click', params => {
        console.log(type, 1122)
        if (type == 1) {
          this.$emit('showplacedetail', type, '重点场所列表', params.name, this.areaId)
        } else if (type == 2) {
          this.$emit('showplacedetail', type, '风险隐患场所列表', params.name, this.areaId)
        } else if (type == 3) {
          this.$emit('showplacedetail', type, '企业信息列表', params.name, this.areaId)
        } else {
          this.$emit('showplacedetail', type, '九小场所列表', params.name, this.areaId)
        }
      })
    },
    // 九小场所
    initPlaceOptions (xDate, y1Date) {
      const that = this
      return {
        tooltip: {
          trigger: 'item',
          formatter: params => {
            let msg
            if (params.value > 10000) {
              msg = (params.value / 10000).toFixed(2)
            } else {
                this.showBack = true
                this.isAllPoliceStation = true
            }
            this.tabType = 0//解决下拉选择派出所重点人员显示bug
            this.personTabClick(this.tabType)

            this.getNineStatistics(true)
            this.houseTabClick(this.tabTypeTwo)

            this.landTabClick(this.tabTypeThree)

            if (leftTiming != null) {
                clearInterval(leftTiming)
                leftTiming = null
              msg = params.value
            }

            leftTiming = setInterval(async () => {
                this.houseTabClick(this.tabTypeTwo)

                this.landTabClick(this.tabTypeThree)
            }, 600000)
            msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
            return msg
          },
          backgroundColor: 'rgba(8, 56, 185, 0.9)',
          borderColor: 'rgba(8, 56, 185, 0.9)',
          textStyle: {
            color: '#fff',
            fontSize: fontSize(12)
          }
        },

        /**
         * @description: 户籍人口和重点人员切换
         * @param {*} type
         * @return {*}
         */
        personTabClick (type) {
            console.log('type', type, 'this.tabType', this.tabType, 'this.isFirstMounted', this.isFirstMounted)
            if (type == 0) {
                if (this.tabType == 0 && !this.isFirstMounted) {
                    console.log('再次点击人口总数', this.isFirstMounted)
                    this.$emit('showpeopledetail', '', '总人口列表', 'includeKeypeople', this.clickPoliceStationId)
                    return
        color: myColor,
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false
          },
        },
        yAxis: {
          type: 'category',
          data: xDate,
          axisLine: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            fontSize: fontSize(14)
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            data: y1Date,
            type: 'bar',
            barWidth: '50%',
            barCategoryGap: '80%',
            zlevel: 2,
            cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
            itemStyle: {
              normal: {
                color: '#ed7c2f',
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: '#ed7c2f',
                    fontSize: 10
                  }
                }
                this.isFirstMounted = false
                this.dataDeep = 1
                this.disposeEchart()
                this.personEchartsLoading = true
                this.personEchartsHeight = '100%'
                if (this.userInfo.dept_id == '1123598813738675201' && this.policeStaionID == '') {

                    this.getPoliceStationInfo()

                } else {
                    this.getVillagePersonStatisticInfoByPoliceStationId(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id)
                }

            } else if (type == 1) {
                if (this.tabType == 1 && !this.isFirstMounted) {
                    console.log('再次点击重点人口')
                    this.$emit('showpeopledetail', this.clickPoliceStationId, '重点人员列表', 'onlyKeypeople')
                    return
                }
                this.dataDeep = 1
                this.disposeEchart()
                this.personEchartsLoading = true
                this.initkeyPersonEcharts()
            }
            this.tabType = type
              }
            },
          },
        ],
        grid: {
          top: '2%',
          left: '2%',
          // right: '-1%',
          right: '10%',
          bottom: '2%',
          containLabel: true
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 4,
            minValueSpan: 8,
            maxValueSpan: 8,
            yAxisIndex: [0],
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          },
          {
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 4,
            width: '3.5',
            height: '90%',
            yAxisIndex: [0], // 控制y轴滚动
            // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
            fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)",
            backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
            handleSize: 0, // 两边手柄尺寸
            showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: '1%',
            right: '5',
          }

        /**
         * @description: 获取分局户籍人口数据
         * @return {*}
         */
        getPoliceStationInfo () {
            getVillagePersonStatisticInfo().then(res => {
                if (res.data.code == 200) {
                    this.disposeEchart()
                    curSubofficeData = res.data.data
                    this.personAll = res.data.data
                    console.log('getPoliceStationInfo', res.data.data)
                    this.policeStationPersonInfo = res.data.data
                    //异步，因此放进接口方法内部
                    this.initPersonEcharts()
                    this.clickPeopleChart()
                    setTimeout(() => {
                        this.personEchartsLoading = false
                    }, 500)
                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 获取派出所户籍人口数据
         * @param {*} policeStationId
         * @param {*} name
         * @return {*}
         */
        getVillagePersonStatisticInfoByPoliceStationId (policeStationId, name) {
            getVillagePersonStatisticInfoByPoliceStationId(policeStationId, name).then(res => {
                if (res.data.code == 200) {
                    console.log(res, 'getVillagePersonStatisticInfoByPoliceStationId')
                    this.disposeEchart()
                    var chartDom = document.getElementById('PersonEcharts')
                    homePersonmyChart = this.$echarts.init(chartDom)
                    this.personAll = res.data.data
                    console.log('this.personAll', this.personAll)

                    if (this.userInfo.dept_id == '1596020515064381442') {
                        this.personAll.emphasisNum = 23
                    }

                    this.villagePersonStatisticInfoList = res.data.data
                    var xDate = [], yDate1 = [], yDate2 = []

                    if (this.villagePersonStatisticInfoList.data.length > 0) {
                        this.villagePersonStatisticInfoList.data.forEach(e => {
                            xDate.push(e.name.replace('居民委员会', ''))
                            yDate1.push({
                                value: e.hjnum,
                                name: e.name,
                                id: e.id,
                                communityCode: e.communityCode
                            })
                            yDate2.push({
                                value: e.synum,
                                name: e.name,
                                id: e.id,
                                communityCode: e.communityCode
                            })
                        })
                    }
                    homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2), true)
                    this.clickPeopleChart()

                    setTimeout(() => {
                        this.dataDeep = 2
                        this.personEchartsLoading = false
                    }, 1000)

                }
            }).catch(res => {
                setTimeout(() => {
                    this.personEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 初始化现有人图表
         * @return {*}
         */
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            homePersonmyChart = this.$echarts.init(chartDom)

            var xDate = [], yDate1 = [], yDate2 = []
            //传入x,y轴数据

            if (this.policeStationPersonInfo.data.length > 0) {
                this.policeStationPersonInfo.data.forEach(e => {
                    xDate.push(e.name.replace('派出所', ''))
                    yDate1.push({
                        value: e.hjnum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                    yDate2.push({
                        value: e.synum,
                        id: e.id,
                        type: 'policeStation',
                        name: e.name
                    })
                })
            }

            homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate1, yDate2, peopleColor1, peopleColor2))
        },

        /**
         * @description: 图表数据处理
         * @param {*} xDate
         * @param {*} yDate
         * @param {*} colors
         * @return {*}
         */
        initPersonOptions (xDate, yDate1, yDate2, colors1, colors2) {
            let options

            if (xDate.length == 0) {
                options = {
                    title: {
                        text: '暂无数据1',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px">{c0}人</strong>',
                        backgroundColor: 'rgba(8, 56, 185, 0.9)',
                        borderColor: 'rgba(8, 56, 185, 0.9)',
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(12)
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: xDate,

                        axisLabel: {
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(10)
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        max: Math.floor(Math.max(...yDate1.map(i => i.value), ...yDate2.map(i => i.value)) * 1.5),
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(12)
                        }
                    },
                    legend: {
                        itemWidth: 15,
                        itemHeight: 15,
                        data: ['户籍人口', '实有人口'],
                        textStyle: {
                            color: '#fff'
                        },
                        formatter: function (name) {
                            var data = []
                            if (name == '户籍人口') {
                                data = options.series[0].data
                            } else {
                                data = options.series[1].data
                            }
                            var total = 0
                            for (var i = 0; i < data.length; i++) {
                                total += data[i].value
                            }
                            return `${name} (${total}人)`
                        }
                    },
                    series: [
                        {
                            name: '户籍人口',
                            data: yDate1,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: colors1
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[0] },
                                    //             { offset: 0.5, color: colors1[1] },
                                    //             { offset: 1, color: colors1[2] },
                                    //         ]
                                    //     )
                                    // }
                                },
                                emphasis: {
                                    color: colors1
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors1[2] },
                                    //             { offset: 0.7, color: colors1[1] },
                                    //             { offset: 1, color: colors1[0] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        },
                        {
                            name: '实有人口',
                            data: yDate2,
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: colors2
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[2] },
                                    //             { offset: 0.5, color: colors2[1] },
                                    //             { offset: 1, color: colors2[0] },
                                    //         ]
                                    //     )
                                    // }
                                },
                                emphasis: {
                                    color: colors2
                                    // color: function (params) {
                                    //     return new global.echarts.graphic.LinearGradient(
                                    //         0, 0, 0, 1,
                                    //         [
                                    //             { offset: 0, color: colors2[0] },
                                    //             { offset: 0.7, color: colors2[1] },
                                    //             { offset: 1, color: colors2[2] }
                                    //         ]
                                    //     )
                                    // }
                                }
                            },
                        },

                    ],
                    grid: {
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
                    },
                }
            }

            return options

        },

        /**
         * @description: 现有人图表中的返回按钮
         * @return {*}
         */
        backBegin () {
            this.clickPoliceStationId = this.userInfo.dept_id
            this.personAll = curSubofficeData
            this.dataDeep = 1
            this.initPersonEcharts()
            this.$parent.getAllPoliceStationCenter()
        },

        // 现有住宅和关注场所统计总数
        getVillageDetailAndPlaceStatisticNumber (params) {
            getVillageDetailAndPlaceStatisticNumber(params).then(res => {
                if (res.data.data.length > 0) {
                    res.data.data.forEach(item => {
                        if (item.typeName == 'gzcs') {
                            this.keyPlaceNum = item.number
                        } else if (item.typeName == 'syld') {
                            this.realHouseNum = item.number
                        }
                    })
                }
                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    this.keyPlaceNum = 54
                    this.realHouseNum = 205
                }
            })
        },

        // 实有住宅统计
        getVillageStatisticData (params) {
            getVillageStatisticData(params).then(res => {
                this.disposeHouseEchart()
                let xDate = []
                let yDate = []
                res.data.data.forEach(item => {
                    xDate.push(item.typeName)
                    yDate.push(item.number)
                })
                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
                    yDate = [34, 2, 33, 11, 22, 30, 14]
                }

                this.inithouseEcharts(xDate, yDate)
                // 点击事件
                this.clickHouseChart('实有住宅')
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 实有住宅详情
        getVillageStatisticDetail () {
            getVillageStatisticDetail({ deptId: this.userInfo.dept_id, bigType: this.syldBigType, name: this.syldName, current: this.$parent.syldPage.currentPage, size: this.$parent.syldPage.pageSize }).then(res => {
                console.log('getVillageStatisticDetail', res, res.data.data.records)
                this.$parent.syldPage.total = res.data.data.total
                this.$parent.syldArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.syldLoading = false
                }, 500)
            })
        },

        // 关注场所统计
        getPlaceOfConcernStatisticData (params) {
            getPlaceOfConcernStatisticData(params).then(res => {
                this.disposeHouseEchart()
                let xDate = []
                let yDate = []
                res.data.data.forEach(item => {
                    xDate.push(item.typeName)
                    yDate.push(item.number)
                })

                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
                    yDate = [14, 13, 10, 17]
                }

                this.inithouseEcharts(xDate, yDate)
                // 点击事件
                this.clickHouseChart('关注场所')
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        // 关注场所详情
        getPlaceOfConcernStatisticDetail () {
            getPlaceOfConcernStatisticDetail({ deptId: this.userInfo.dept_id, type: this.gzcsType, unitName: this.gzcsUnitName, person: this.gzcsPerson, phone: this.gzcsPhone, current: this.$parent.gzcsPage.currentPage, size: this.$parent.gzcsPage.pageSize }).then(res => {
                console.log('getPlaceOfConcernStatisticDetail', res, res.data.data.records)
                this.$parent.gzcsPage.total = res.data.data.total
                this.$parent.gzcsArr = res.data.data.records
                setTimeout(() => {
                    this.$parent.gzcsLoading = false
                }, 500)
            })
        },
        // 九小场所echarts
        initPlaceEcharts (xDate, yDate, type) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initPlaceOptions(xDate, yDate))
            // 圆柱点击事件
            this.clickPlaceChart(type)
        },
        // 场所图表点击事件
        clickPlaceChart (type) {
            this.tabTypeThree = type
            this.houseEchartsLoading = true
            houseMyChart.on('click', params => {
                console.log(type, 1122)
                if (type == 1) {
                    this.$emit('showplacedetail', type, '重点场所列表', params.name, this.areaId)
                } else if (type == 2) {
                    this.$emit('showplacedetail', type, '风险隐患场所列表', params.name, this.areaId)
                } else {
                    this.$emit('showplacedetail', type, '九小场所列表', params.name, this.areaId)
                }
            })
        },
        // 九小场所
        initPlaceOptions (xDate, y1Date) {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2)
                        } else {
                            msg = params.value
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: xDate,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: y1Date,
                        type: 'bar',
                        barWidth: '50%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                color: '#ed7c2f',
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ed7c2f',
                                        fontSize: 10
                                    }
                                }
                            }
                        },
                    },
                ],
                grid: {
                    top: '2%',
                    left: '2%',
                    // right: '-1%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: "inside",
                        startValue: 0,
                        endValue: 4,
                        minValueSpan: 8,
                        maxValueSpan: 8,
                        yAxisIndex: [0],
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                    },
                    {
                        type: 'slider',
                        realtime: true,
                        startValue: 0,
                        endValue: 4,
                        width: '3.5',
                        height: '90%',
                        yAxisIndex: [0], // 控制y轴滚动
                        // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                        fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
                        handleSize: 0, // 两边手柄尺寸
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top: '1%',
                        right: '5',
                    }

                ]
            }
        },
        // 房屋
        inithouseEcharts (xDate, yDate) {
            var chartDom = document.getElementById('houseEcharts')
            houseMyChart = this.$echarts.init(chartDom)
            houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
        },

        initHouseOptions (xDate, y1Date, y2Date) {
            const that = this
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        let msg
                        if (params.value > 10000) {
                            msg = (params.value / 10000).toFixed(2) + '万栋'
                        } else {
                            msg = params.value + '栋'
                        }

                        msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
                        return msg
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                color: myColor,
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: xDate,
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(14)
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: y1Date,
                        type: 'bar',
                        barWidth: '50%',
                        barCategoryGap: '80%',
                        zlevel: 2,
                        cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
                        itemStyle: {
                            normal: {
                                // barBorderRadius: [0, 30, 30, 0],
                                //     color: function (params) {
                                //     var num = myColor.length
                                //     return myColor[params.dataIndex % num]
                                // },
                                color: '#ed7c2f',
                                label: {
                                    show: true, //开启显示
                                    position: 'right', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#ed7c2f',
                                        fontSize: 10
                                    }
                                }
                            }
                        },
                    },
                    // {
                    //     data: y2Date,
                    //     show: true,
                    //     type: 'bar',
                    //     barGap: '-100%',
                    //     barWidth: '35%', //统计条宽度
                    //     itemStyle: {
                    //         normal: {
                    //             color: 'rgba(102, 102, 102,0.5)'
                    //         },
                    //     },
                    //     z: 1,
                    // }
                ],
                grid: {
                    top: '2%',
                    left: '2%',
                    // right: '-1%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: "inside",
                        startValue: 0,
                        endValue: 4,
                        minValueSpan: 8,
                        maxValueSpan: 8,
                        yAxisIndex: [0],
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                    },
                    {
                        type: 'slider',
                        realtime: true,
                        startValue: 0,
                        endValue: 4,
                        width: '3.5',
                        height: '90%',
                        yAxisIndex: [0], // 控制y轴滚动
                        // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
                        fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
                        handleSize: 0, // 两边手柄尺寸
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        top: '1%',
                        right: '5',
                    }

                ]
            }
        },

        houseTabClick (type) {
            this.tabTypeTwo = type

            this.houseEchartsLoading = true

            this.disposeHouseEchart()

            this.getNineStatistics()

            // 其它场所
            // this.getHouseStatisticInfo(2)

            // 场所数量
            // this.getHouseStatisticInfo(1)
        },

        getNineStatistics (flag = false) {
            getNineStatistics({
                deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
                areaId: this.areaId
            }).then(res => {
                console.log("九小", res)
                let xDate = []
                let yDate = []

                this.realHouseNum = res.data.data.count

                let otherList = res.data.data.otherList.reverse()
                let placeList = res.data.data.placeList.reverse()
                let riskHazardList = res.data.data.riskHazardList.reverse()
                if (flag) {
                    this.placeNum = placeList.reduce((pre, cur) => {
                        return pre + cur.num
                    }, 0)
                    this.otherPlaceNum = otherList.reduce((pre, cur) => {
                        return pre + cur.num
                    }, 0)
                    this.riskNum = riskHazardList.reduce((pre, cur) => {
                        return pre + cur.num
                    }, 0)

                    return
                }

                if (this.tabTypeTwo == 1) {
                    otherList.forEach(item => {
                        xDate.push(item.nineTypeName)
                        yDate.push({
                            value: item.num,
                            id: item.id
                        })
                    })
                } else if (this.tabTypeTwo == 2) {
                    riskHazardList.forEach(item => {
                        xDate.push(item.nineTypeName)
                        yDate.push(item.num)
                    })
                } else {
                    placeList.forEach(item => {
                        xDate.push(item.nineTypeName)
                        yDate.push(item.num)
                    })
                }

                this.initPlaceEcharts(xDate, yDate, this.tabTypeTwo)

                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        /**
        * @description: 获取现有住宅信息
        * @param {*} deptld
        * @param {*} isFollow
        * @return {*}
        */
        getHouseStatisticInfo (isFollow) {
            getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
                this.disposeHouseEchart()

                let xDate = []
                let yDate = []
                if (isFollow == 1) {
                    this.keyPlaceNum = res.data.data.count
                } else {
                    this.realHouseNum = res.data.data.count
                }
                res.data.data.data.forEach(item => {
                    xDate.push(item.name)
                    yDate.push(item.num)
                })
                if (this.userInfo.dept_id == '1596020515064381442') {
                    this.keyPlaceNum = 28
                    this.realHouseNum = 205
                    if (isFollow == 2) {
                        xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
                        yDate = [34, 2, 33, 11, 22, 30, 14]
                        this.inithouseEcharts(xDate, yDate)
                    } else {
                        xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
                        yDate = [14, 13, 10, 17]
                        this.inithouseEcharts(xDate, yDate)
                    }

                    this.clickHouseChart()
                } else {
                    this.inithouseEcharts(xDate, yDate)
                }
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            }).catch(res => {
                setTimeout(() => {
                    this.houseEchartsLoading = false
                }, 500)
            })
        },

        initLandOptions (xDate, yDate) {
            return {
                color: ['#0532ff'],
                grid: {
                    top: '4%',
                    left: '12%',
                    right: '4%',
                    bottom: '28%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        return `${params.marker} ${params.name}: ${params.value} 个`
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fontSize(12)
                    }
                },
                xAxis: {
                    type: 'category',
                    data: xDate,
                    axisLabel: {
                        color: "#fff",
                        interval: 0,
                        rotate: 45,
                        fontSize: fontSize(10)
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: fontSize(12)
                    }
                },
                series: [
                    {
                        data: yDate,
                        type: 'bar',
                        barWidth: '24%',
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 0, 0],
                                // color: function (params) {
                                //     var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
                                //     return myLandColors[params.dataIndex % num]
                                // },
                            }
                        },
                    }
                ],
                // zoomData: [  // 有滚动条 平移
                // dataZoom: [  // 有滚动条 平移
                //     {
                //         type: 'slider',
                //         show: true,
                //         realtime: true,
                //         start: 0,
                //         end: 40,  // 初始展示40%
                //         height: 4,
                //         backgroundColor: 'rgba(47,69,84,0.2)',
                //         fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
                //         borderColor: "rgba(17, 100, 210, 0.12)",
                //         handleSize: 0, // 两边手柄尺寸
                //         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                //         top: '96%',
                //     },
                //     {
                //         type: "inside",  // 支持内部鼠标滚动平移
                //         start: 0,
                //         end: 40,
                //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
                //         moveOnMouseWheel: true, // 开启滚轮平移
                //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                //     }
                // ]
            }
        },

        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                if (params.data.type == 'policeStation') {
                    const center = this.$parent.getPoliceStationCenter(params.data.id)
                    this.$EventBus.$emit('toPosition', {
                        layerName: 'carLayers',
                        siteJd: center[0],
                        siteWd: center[1],
                        siteGd: 32000
                    })
                    this.personEchartsLoading = true
                    this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
                    this.clickPoliceStationId = params.data.id
                } else {
                    console.log(params, '------1------')

                    this.$emit('showpeopledetail', params.data.id, params.data.name, params.data.communityCode)
                }
            })
        },

        clickHouseChart (type) {
            houseMyChart.on('click', params => {
                console.log(params, 'clickHouseChart')
                // 茅家岭单独判断
                if (this.userInfo.dept_id == '1596020515064381442') {
                    this.mjlClick(params)
                    return
                }

                if (type == '实有住宅') {
                    if (params.name == '住宿服务') {
                        this.$parent.zhuSuPage.currentPage = 1
                        this.$parent.zhuSuPopupShow = true
                        this.$parent.zhuSuLoading = true
                        this.getHotelList()

                    } else {
                        this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
                        this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
                            layerName: "jiudianLayer",
                            type: "VectorLayer",
                        })
                        this.$parent.syldPage.currentPage = 1
                        this.$parent.syldPopupTitle = params.name
                        this.syldBigType = params.name
                        this.syldName = ''
                        this.$parent.syldArr = []
                        this.$parent.syldPopupShow = true
                        this.$parent.syldLoading = true
                        this.getVillageStatisticDetail()
                    }

                } else {
                    console.log('关注场所')
                    this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
                    this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
                        layerName: "jiudianLayer",
                        type: "VectorLayer",
                    })
                    this.$parent.gzcsPage.currentPage = 1
                    this.gzcsType = params.name
                    this.gzcsUnitName = ''
                    this.gzcsPerson = ''
                    this.gzcsPhone = ''
                    this.$parent.gzcsArr = []
                    this.$parent.gzcsPopupShow = true
                    this.$parent.gzcsLoading = true
                    this.getPlaceOfConcernStatisticDetail()
                }
            })
        },

        // 茅家岭账号点击现有住宅
        mjlClick (params) {
            console.log('params', params)
            this.$parent.architectureTitle = params.name
            if (params.name == '学校') {
                this.$parent.xxPopupShow = true
                this.$parent.houseArr = []
                this.$parent.houseLoading = true
                setTimeout(() => {
                    this.$parent.houseLoading = false
                    this.$parent.houseArr = schoolJSON
                }, 1000)
            } else {
                this.$parent.architectureShow = true
                this.$parent.architectureTable = []
                this.$parent.architectureLoad = true

                if (params.name == '医院') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = hospitalJSON
                    }, 1000)
                }

                if (params.name == '宾馆酒店') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = hotelJSON
                    }, 1000)
                }

                if (params.name == '数字经济') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = digitalJSON
                    }, 1000)
                }

                if (params.name == '房屋建筑业') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = housingJSON
                    }, 1000)
                }

                if (params.name == '批发业') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = wholesaleJSON
                    }, 1000)
                }

                if (params.name == '零售业') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = retailJSON
                    }, 1000)
                }

                if (params.name == '反恐重点目标') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = antiTerroristJSON
                    }, 1000)
                }

                if (params.name == '危爆品') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = dExplosionJSON
                    }, 1000)
                }

                if (params.name == '重点服务对象') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = serviceObjJSON
                    }, 1000)
                }

                if (params.name == '困难儿童') {
                    setTimeout(() => {
                        this.$parent.architectureLoad = false
                        this.$parent.architectureTable = difficultyJSON
                    }, 1000)
                }
            }
        },

        /**
         * @description: 初始化重点人员饼状图
         * @return {*}
         */
        async initkeyPersonEcharts () {
            this.disposeEchart()

            let personInfo = await this.getPersonInfo()
            console.log('personInfo', personInfo)
            keyPeopleDataLength = personInfo.length
            if (this.userInfo.dept_id == '1596020515064381442') {
                personInfo = [
                    { count: 3, name: '非涉法涉诉重点个访人员', value: 7 },
                    { count: 1, name: '楼盘业主维权群体', value: 1 },
                    { count: 1, name: '欠薪讨债群体', value: 1 },
                    { count: 4, name: '涉法涉诉重点个访人员', value: 4 },
                    { count: 11, name: '征地拆迁群体', value: 11 },
                ]
            }

            const high = this.$refs.REFPERSONECHARTS.offsetHeight

            // if (personInfo.length * (high / 7) > high) {
            //   this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
            // } else {
            this.personEchartsHeight = '100%'
            // }

            this.$nextTick(() => {
                var chartDom = document.getElementById('PersonEcharts')
                keyPersonmyChart = this.$echarts.init(chartDom)
                keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))

                this.clickkeyPersonChart()
                if (personInfo.length > 1) {
                    this.keyPeopleEchartsCarousel()
                } else {
                    clearInterval(timer)
                    keyPersonmyChart.off("mouseover")
                    keyPersonmyChart.off("mouseout")
                }
            })


            setTimeout(() => {
                this.personEchartsLoading = false
            }, 500)
        },

        /**
         * @description: 调用接口获取重点人员数据
         * @return {*}
         */
        getPersonInfo () {
            const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                console.log('getPersonInfo', { deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id })

                res.data = res.data.map(item => {
                    item = {
                        ...item,
                        name: item.zdryxl,
                        value: item.count
                    }

                    return item
                })

                return res.data
            })

            return data
        },

        /**
         * @description: 重点人员饼状图渲染的options
         * @param {*} dataArr
         * @return {*}
         */
        initkeyPersonOption (dataArr) {
            let options

            if (dataArr.length == 0) {
                options = {
                    title: {
                        text: '暂无重点人员数据',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: fontSize(14)
                        }
                    }
                }
            } else {
                options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: params => {
                            let msg
                            if (params.value > 10000) {
                                msg = (params.value / 10000).toFixed(2) + '万人'
                            } else {
                                msg = params.value + '人'
                            }
                            msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
                            return msg
                        },
                        backgroundColor: "rgba(8, 56, 185, 0.9)",
                        borderColor: "rgba(8, 56, 185, 0.9)",
                        textStyle: {
                            fontSize: fontSize(12)
                        },
                        confine: true
                    },
                    xAxis: {
                        type: 'category',
                        data: dataArr.map(item => item.name),

                        axisLabel: {
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(10),
                            formatter: function (params) {
                                var val = ""
                                if (params.length > 4) {
                                    val = params.substr(0, 4) + '...'
                                    return val
                                } else {
                                    return params
                                }
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        max: Math.floor(Math.max(...dataArr.map(item => item.value)) * 1.5),
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(12)
                        }
                    },
                    series: [
                        {
                            data: dataArr.map(item => item.value),
                            type: 'bar',
                            barWidth: '40%',
                            stack: true,
                            emphasis: {
                                disabled: true,
                                focus: 'none'
                            },
                            itemStyle: {
                                normal: {
                                    color: '#ed7c2f'
                                },
                            },
                        },
                    ],
                    grid: {
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '1%',
                        containLabel: true
                    },
                }
            }

            return options
        },

        /**
         * @description: 重点人员饼状图的点击事件
         * @return {*}
         */
        async clickkeyPersonChart () {
            keyPersonmyChart.on('click', async params => {
                this.$emit('showkeypersondetail', params.name)
            })
        },

        /**
         * @description: 现有小区切换
         * @param {*} type
         * @return {*}
         */
        landTabClick (type) {
            this.tabTypeThree = type
            this.landEchartsLoading = true

            this.disposeLandEchart()
            if (type == 0) {
                this.getAreaStatisticInfo(2)
            } else if (type == 1) {
                this.getAreaStatisticInfo(1)
            }
        },

        /**
         * @description: 获取现有小区数据
         * @param {*} type
         * @param {*} deptId
         * @return {*}
         */
        getAreaStatisticInfo (type) {
            getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
                this.disposeLandEchart()

                let landData = []
                if (type == 2) {
                    this.areaNum = res.data.data.areaNum
                    this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name.replace('派出所', '').replace('居民委员会', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    landData = [nameArr, countArr]
                } else if (type == 1) {
                    // this.areaNum = res.data.data.areaNum
                    // this.villageNum = res.data.data.villageNum
                    let nameArr = []
                    let countArr = []
                    res.data.data.data.forEach(item => {
                        nameArr.push(item.name.replace('派出所', ''))
                        countArr.push({ value: item.count, id: item.id })
                    })
                    landData = [nameArr, countArr]
                }
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)
                console.log("landData1", landData)
                this.initLandEcharts(landData)
            }).catch(res => {
                setTimeout(() => {
                    this.landEchartsLoading = false
                }, 500)
            })
        },

        /**
         * @description: 现有小区图表渲染
         * @param {*} landData
         * @return {*}
         */
        initLandEcharts (landData) {
            this.disposeLandEchart()
            var chartDom = document.getElementById('landEcharts')
            console.log("chartDom", chartDom)
            landMyChart = this.$echarts.init(chartDom)
            console.log("landMyChart", landMyChart)
            landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
            console.log("setOption", landData[0])
            this.clickLandChart()
        },

        /**
         * @description: 现有小区图表点击事件
         * @return {*}
         */
        clickLandChart () {
            landMyChart.on('click', params => {
                console.log('clickLandChart')
                if (this.tabTypeThree == 0) {
                    this.$emit('showlanddetail', params.name, 2, params.data.id)
                } else {
                    this.$emit('showlanddetail', params.name, 1, params.data.id)
                }
            })
        },

        /**
         * @description: 视图窗口改变时，echarts图表重置
         * @return {*}
         */
        echartsResize () {
            homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
            landMyChart && landMyChart != null && landMyChart.resize()
            keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
            houseMyChart && houseMyChart != null && houseMyChart.resize()
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeEchart () {
            if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
                homePersonmyChart.dispose()
                homePersonmyChart.off('click')
            }

            if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
                keyPersonmyChart.dispose()
                keyPersonmyChart.off('click')
            }
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeHouseEchart () {
            if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
                houseMyChart.clear()
                houseMyChart.dispose()
                houseMyChart.off('click')
            }
        },

        /**
         * @description: 销毁所有echarts实例，解绑点击事件
         * @return {*}
         */
        disposeLandEchart () {
            if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
                landMyChart.dispose()
                landMyChart.off('click')
            }
        },


        ]
      }
    },
    // 房屋
    inithouseEcharts (xDate, yDate) {
      var chartDom = document.getElementById('houseEcharts')
      houseMyChart = this.$echarts.init(chartDom)
      houseMyChart.setOption(this.initHouseOptions(xDate, yDate))
    },

    destroyed () {
        window.removeEventListener("resize", this.echartsResize)
        this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
        this.disposeEchart()
    initHouseOptions (xDate, y1Date, y2Date) {
      const that = this
      return {
        tooltip: {
          trigger: 'item',
          formatter: params => {
            let msg
            if (params.value > 10000) {
              msg = (params.value / 10000).toFixed(2) + '万栋'
            } else {
              msg = params.value + '栋'
            }

            msg = `${params.marker}${params.name}<strong style="margin-left:10px">${msg}</strong>`
            return msg
          },
          backgroundColor: 'rgba(8, 56, 185, 0.9)',
          borderColor: 'rgba(8, 56, 185, 0.9)',
          textStyle: {
            color: '#fff',
            fontSize: fontSize(12)
          }
        },
        color: myColor,
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false
          },
        },
        yAxis: {
          type: 'category',
          data: xDate,
          axisLine: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            fontSize: fontSize(14)
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            data: y1Date,
            type: 'bar',
            barWidth: '50%',
            barCategoryGap: '80%',
            zlevel: 2,
            cursor: that.userInfo.dept_id != '1596020515064381442' ? 'default' : 'pointer',
            itemStyle: {
              normal: {
                // barBorderRadius: [0, 30, 30, 0],
                //     color: function (params) {
                //     var num = myColor.length
                //     return myColor[params.dataIndex % num]
                // },
                color: '#ed7c2f',
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: { //数值样式
                    color: '#ed7c2f',
                    fontSize: 10
                  }
                }
              }
            },
          },
          // {
          //     data: y2Date,
          //     show: true,
          //     type: 'bar',
          //     barGap: '-100%',
          //     barWidth: '35%', //统计条宽度
          //     itemStyle: {
          //         normal: {
          //             color: 'rgba(102, 102, 102,0.5)'
          //         },
          //     },
          //     z: 1,
          // }
        ],
        grid: {
          top: '2%',
          left: '2%',
          // right: '-1%',
          right: '10%',
          bottom: '2%',
          containLabel: true
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 4,
            minValueSpan: 8,
            maxValueSpan: 8,
            yAxisIndex: [0],
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          },
          {
            type: 'slider',
            realtime: true,
            startValue: 0,
            endValue: 4,
            width: '3.5',
            height: '90%',
            yAxisIndex: [0], // 控制y轴滚动
            // fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
            fillerColor: "rgba(11, 19, 145, 0.5)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)",
            backgroundColor: 'transparent',//两边未选中的滑动条区域的颜色
            handleSize: 0, // 两边手柄尺寸
            showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: '1%',
            right: '5',
          }

        ]
      }
    },

    houseTabClick (type) {
      this.tabTypeTwo = type

      this.houseEchartsLoading = true

      this.disposeHouseEchart()

      this.getNineStatistics()

      // 其它场所
      // this.getHouseStatisticInfo(2)

      // 场所数量
      // this.getHouseStatisticInfo(1)
    },

    getNineStatistics (flag = false) {
      getNineStatistics({
        deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id,
        areaId: this.areaId
      }).then(res => {
        console.log("九小", res)
        let xDate = []
        let yDate = []

        this.realHouseNum = res.data.data.count

        let otherList = res.data.data.otherList.reverse()
        let placeList = res.data.data.placeList.reverse()
        let riskHazardList = res.data.data.riskHazardList.reverse()
        let enterpriseInfoList = res.data.data.enterpriseInfoList.reverse()
        if (flag) {
          this.placeNum = placeList.reduce((pre, cur) => {
            return pre + cur.num
          }, 0)
          this.otherPlaceNum = otherList.reduce((pre, cur) => {
            return pre + cur.num
          }, 0)
          this.riskNum = riskHazardList.reduce((pre, cur) => {
            return pre + cur.num
          }, 0)
          this.enterpriseInfoNum = enterpriseInfoList.reduce((pre, cur) => {
            return pre + cur.num
          }, 0)

          return
        }

        if (this.tabTypeTwo == 1) {
          otherList.forEach(item => {
            xDate.push(item.nineTypeName)
            yDate.push({
              value: item.num,
              id: item.id
            })
          })
        } else if (this.tabTypeTwo == 2) {
          riskHazardList.forEach(item => {
            xDate.push(item.nineTypeName)
            yDate.push(item.num)
          })
        } else if (this.tabTypeTwo == 3) {
          enterpriseInfoList.forEach(item => {
            xDate.push(item.nineTypeName)
            yDate.push(item.num)
          })
        } else {
          placeList.forEach(item => {
            xDate.push(item.nineTypeName)
            yDate.push(item.num)
          })
        }

        this.initPlaceEcharts(xDate, yDate, this.tabTypeTwo)

        setTimeout(() => {
          this.houseEchartsLoading = false
        }, 500)
      })
    },

    /**
    * @description: 获取现有住宅信息
    * @param {*} deptld
    * @param {*} isFollow
    * @return {*}
    */
    getHouseStatisticInfo (isFollow) {
      getHouseStatisticInfo(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, isFollow).then(res => {
        this.disposeHouseEchart()

        let xDate = []
        let yDate = []
        if (isFollow == 1) {
          this.keyPlaceNum = res.data.data.count
        } else {
          this.realHouseNum = res.data.data.count
        }
        res.data.data.data.forEach(item => {
          xDate.push(item.name)
          yDate.push(item.num)
        })
        if (this.userInfo.dept_id == '1596020515064381442') {
          this.keyPlaceNum = 28
          this.realHouseNum = 205
          if (isFollow == 2) {
            xDate = ['学校', '医院', '宾馆酒店', '房屋建筑业', '数字经济', '批发业', '零售业']
            yDate = [34, 2, 33, 11, 22, 30, 14]
            this.inithouseEcharts(xDate, yDate)
          } else {
            xDate = ['反恐重点目标', '危爆品', '重点服务对象', '困难儿童']
            yDate = [14, 13, 10, 17]
            this.inithouseEcharts(xDate, yDate)
          }

          this.clickHouseChart()
        } else {
          this.inithouseEcharts(xDate, yDate)
        }
        setTimeout(() => {
          this.houseEchartsLoading = false
        }, 500)
      }).catch(res => {
        setTimeout(() => {
          this.houseEchartsLoading = false
        }, 500)
      })
    },

    initLandOptions (xDate, yDate) {
      return {
        color: ['#0532ff'],
        grid: {
          top: '4%',
          left: '12%',
          right: '4%',
          bottom: '28%'
        },
        tooltip: {
          trigger: 'item',
          formatter: params => {
            return `${params.marker} ${params.name}: ${params.value} 个`
          },
          backgroundColor: 'rgba(8, 56, 185, 0.9)',
          borderColor: 'rgba(8, 56, 185, 0.9)',
          textStyle: {
            color: '#fff',
            fontSize: fontSize(12)
          }
        },
        xAxis: {
          type: 'category',
          data: xDate,
          axisLabel: {
            color: "#fff",
            interval: 0,
            rotate: 45,
            fontSize: fontSize(10)
          },
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitLine: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            fontSize: fontSize(12)
          }
        },
        series: [
          {
            data: yDate,
            type: 'bar',
            barWidth: '24%',
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 0, 0],
                // color: function (params) {
                //     var num = Math.floor(Math.random() * (myLandColors.length - 1) + 1)
                //     return myLandColors[params.dataIndex % num]
                // },
              }
            },
          }
        ],
        // zoomData: [  // 有滚动条 平移
        // dataZoom: [  // 有滚动条 平移
        //     {
        //         type: 'slider',
        //         show: true,
        //         realtime: true,
        //         start: 0,
        //         end: 40,  // 初始展示40%
        //         height: 4,
        //         backgroundColor: 'rgba(47,69,84,0.2)',
        //         fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
        //         borderColor: "rgba(17, 100, 210, 0.12)",
        //         handleSize: 0, // 两边手柄尺寸
        //         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
        //         top: '96%',
        //     },
        //     {
        //         type: "inside",  // 支持内部鼠标滚动平移
        //         start: 0,
        //         end: 40,
        //         zoomOnMouseWheel: false,  // 关闭滚轮缩放
        //         moveOnMouseWheel: true, // 开启滚轮平移
        //         moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
        //     }
        // ]
      }
    },

    clickPeopleChart () {
      homePersonmyChart.on('click', params => {
        if (params.data.type == 'policeStation') {
          const center = this.$parent.getPoliceStationCenter(params.data.id)
          this.$EventBus.$emit('toPosition', {
            layerName: 'carLayers',
            siteJd: center[0],
            siteWd: center[1],
            siteGd: 32000
          })
          this.personEchartsLoading = true
          this.getVillagePersonStatisticInfoByPoliceStationId(params.data.id)
          this.clickPoliceStationId = params.data.id
        } else {
          this.$emit('showpeopledetail', params.data.id, params.data.name, params.data.communityCode)
        }
      })
    },

    clickHouseChart (type) {
      houseMyChart.on('click', params => {
        console.log(params, 'clickHouseChart')


        if (type == '实有住宅') {
          if (params.name == '住宿服务') {
            this.$parent.zhuSuPage.currentPage = 1
            this.$parent.zhuSuPopupShow = true
            this.$parent.zhuSuLoading = true
            this.getHotelList()

          } else {
            this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
            this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
              layerName: "jiudianLayer",
              type: "VectorLayer",
            })
            this.$parent.syldPage.currentPage = 1
            this.$parent.syldPopupTitle = params.name
            this.syldBigType = params.name
            this.syldName = ''
            this.$parent.syldArr = []
            this.$parent.syldPopupShow = true
            this.$parent.syldLoading = true
            this.getVillageStatisticDetail()
          }

        } else {
          console.log('关注场所')
          this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
          this.$EventBus.$emit("mapClearLayer", {//清除酒店地图图标
            layerName: "jiudianLayer",
            type: "VectorLayer",
          })
          this.$parent.gzcsPage.currentPage = 1
          this.gzcsType = params.name
          this.gzcsUnitName = ''
          this.gzcsPerson = ''
          this.gzcsPhone = ''
          this.$parent.gzcsArr = []
          this.$parent.gzcsPopupShow = true
          this.$parent.gzcsLoading = true
          this.getPlaceOfConcernStatisticDetail()
        }
      })
    },



    /**
     * @description: 初始化重点人员饼状图
     * @return {*}
     */
    async initkeyPersonEcharts () {
      this.disposeEchart()

      let personInfo = await this.getPersonInfo()
      console.log('personInfo', personInfo)
      keyPeopleDataLength = personInfo.length

      const high = this.$refs.REFPERSONECHARTS.offsetHeight

      // if (personInfo.length * (high / 7) > high) {
      //   this.personEchartsHeight = personInfo.length * (high / 7) + 'px'
      // } else {
      this.personEchartsHeight = '100%'
      // }

      this.$nextTick(() => {
        var chartDom = document.getElementById('PersonEcharts')
        keyPersonmyChart = this.$echarts.init(chartDom)
        keyPersonmyChart.setOption(this.initkeyPersonOption(personInfo))

        this.clickkeyPersonChart()
        if (personInfo.length > 1) {
          this.keyPeopleEchartsCarousel()
        } else {
          clearInterval(timer)
          keyPersonmyChart.off("mouseover")
          keyPersonmyChart.off("mouseout")
        }
      })


      setTimeout(() => {
        this.personEchartsLoading = false
      }, 500)
    },

    /**
     * @description: 调用接口获取重点人员数据
     * @return {*}
     */
    getPersonInfo () {
      const data = getPersonInfo({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
        console.log('getPersonInfo', { deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id })

        res.data = res.data.map(item => {
          item = {
            ...item,
            name: item.zdryxl,
            value: item.count
          }

          return item
        })

        return res.data
      })

      return data
    },

    /**
     * @description: 重点人员饼状图渲染的options
     * @param {*} dataArr
     * @return {*}
     */
    initkeyPersonOption (dataArr) {
      let options

      if (dataArr.length == 0) {
        options = {
          title: {
            text: '暂无重点人员数据',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: fontSize(14)
            }
          }
        }
      } else {
        options = {
          tooltip: {
            trigger: 'item',
            formatter: params => {
              let msg
              if (params.value > 10000) {
                msg = (params.value / 10000).toFixed(2) + '万人'
              } else {
                msg = params.value + '人'
              }
              msg = `<div style="color: #FFF;">${params.marker} ${params.name}：<strong style="margin-left:10px">${msg}</strong></div>`
              return msg
            },
            backgroundColor: "rgba(8, 56, 185, 0.9)",
            borderColor: "rgba(8, 56, 185, 0.9)",
            textStyle: {
              fontSize: fontSize(12)
            },
            confine: true
          },
          xAxis: {
            type: 'category',
            data: dataArr.map(item => item.name),

            axisLabel: {
              color: "#fff",
              interval: 0,
              rotate: 45,
              fontSize: fontSize(10),
              formatter: function (params) {
                var val = ""
                if (params.length > 4) {
                  val = params.substr(0, 4) + '...'
                  return val
                } else {
                  return params
                }
              }
            },
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            max: Math.floor(Math.max(...dataArr.map(item => item.value)) * 1.5),
            splitLine: {
              show: false
            },
            axisLabel: {
              color: "#fff",
              fontSize: fontSize(12)
            }
          },
          series: [
            {
              data: dataArr.map(item => item.value),
              type: 'bar',
              barWidth: '40%',
              stack: true,
              emphasis: {
                disabled: true,
                focus: 'none'
              },
              itemStyle: {
                normal: {
                  color: '#ed7c2f'
                },
              },
            },
          ],
          grid: {
            top: '4%',
            left: '2%',
            right: '2%',
            bottom: '1%',
            containLabel: true
          },
        }
      }

      return options
    },

    /**
     * @description: 重点人员饼状图的点击事件
     * @return {*}
     */
    async clickkeyPersonChart () {
      keyPersonmyChart.on('click', async params => {
        this.$emit('showkeypersondetail', params.name)
      })
    },

    /**
     * @description: 现有小区切换
     * @param {*} type
     * @return {*}
     */
    landTabClick (type) {
      this.tabTypeThree = type
      this.landEchartsLoading = true

      this.disposeLandEchart()
      if (type == 0) {
        this.getAreaStatisticInfo(2)
      } else if (type == 1) {
        this.getAreaStatisticInfo(1)
      }
    },

    /**
     * @description: 获取现有小区数据
     * @param {*} type
     * @param {*} deptId
     * @return {*}
     */
    getAreaStatisticInfo (type) {
      getAreaStatisticInfo(type, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
        this.disposeLandEchart()

        if (leftTiming != null) {
            clearInterval(leftTiming)
            leftTiming = null
        let landData = []
        if (type == 2) {
          this.areaNum = res.data.data.areaNum
          this.villageNum = res.data.data.villageNum
          let nameArr = []
          let countArr = []
          res.data.data.data.forEach(item => {
            nameArr.push(item.name.replace('派出所', '').replace('居民委员会', ''))
            countArr.push({ value: item.count, id: item.id })
          })
          landData = [nameArr, countArr]
        } else if (type == 1) {
          // this.areaNum = res.data.data.areaNum
          // this.villageNum = res.data.data.villageNum
          let nameArr = []
          let countArr = []
          res.data.data.data.forEach(item => {
            nameArr.push(item.name.replace('派出所', ''))
            countArr.push({ value: item.count, id: item.id })
          })
          landData = [nameArr, countArr]
        }
        setTimeout(() => {
          this.landEchartsLoading = false
        }, 500)
        console.log("landData1", landData)
        this.initLandEcharts(landData)
      }).catch(res => {
        setTimeout(() => {
          this.landEchartsLoading = false
        }, 500)
      })
    },

    /**
     * @description: 现有小区图表渲染
     * @param {*} landData
     * @return {*}
     */
    initLandEcharts (landData) {
      this.disposeLandEchart()
      var chartDom = document.getElementById('landEcharts')
      console.log("chartDom", chartDom)
      landMyChart = this.$echarts.init(chartDom)
      console.log("landMyChart", landMyChart)
      landMyChart.setOption(this.initLandOptions(landData[0], landData[1]))
      console.log("setOption", landData[0])
      this.clickLandChart()
    },

    /**
     * @description: 现有小区图表点击事件
     * @return {*}
     */
    clickLandChart () {
      landMyChart.on('click', params => {
        if (this.tabTypeThree == 0) {
          this.$emit('showlanddetail', params.name, 2, params.data.id)
        } else {
          this.$emit('showlanddetail', params.name, 1, params.data.id)
        }
      })
    },

    /**
     * @description: 视图窗口改变时，echarts图表重置
     * @return {*}
     */
    echartsResize () {
      homePersonmyChart && homePersonmyChart != null && homePersonmyChart.resize()
      landMyChart && landMyChart != null && landMyChart.resize()
      keyPersonmyChart && keyPersonmyChart != null && keyPersonmyChart.resize()
      houseMyChart && houseMyChart != null && houseMyChart.resize()
    },

    /**
     * @description: 销毁所有echarts实例，解绑点击事件
     * @return {*}
     */
    disposeEchart () {
      if (homePersonmyChart != null && homePersonmyChart != '' && homePersonmyChart != undefined) {
        homePersonmyChart.dispose()
        homePersonmyChart.off('click')
      }

      if (keyPersonmyChart != null && keyPersonmyChart != '' && keyPersonmyChart != undefined) {
        keyPersonmyChart.dispose()
        keyPersonmyChart.off('click')
      }
    },

    /**
     * @description: 销毁所有echarts实例，解绑点击事件
     * @return {*}
     */
    disposeHouseEchart () {
      if (houseMyChart != null && houseMyChart != '' && houseMyChart != undefined) {
        houseMyChart.clear()
        houseMyChart.dispose()
        houseMyChart.off('click')
      }
    },

    /**
     * @description: 销毁所有echarts实例，解绑点击事件
     * @return {*}
     */
    disposeLandEchart () {
      if (landMyChart != null && landMyChart != '' && landMyChart != undefined) {
        landMyChart.dispose()
        landMyChart.off('click')
      }
    },


  },

  destroyed () {
    window.removeEventListener("resize", this.echartsResize)
    this.$store.commit('SET_HOTELPOPUP', false)//关闭酒店地图详情弹窗
    this.disposeEchart()
    this.disposeHouseEchart()
    this.disposeLandEchart()

    if (leftTiming != null) {
      clearInterval(leftTiming)
      leftTiming = null
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;

  .person-box {
    .word {
      color: #fff;
      font-size: 14px;
    }

    .before {
      margin-left: 108px;
    }

    .back {
      color: #fff;
      position: absolute;
      top: 96px;
      right: 16px;
      width: 20px;
      height: 20px;
      font-size: 20px;
      cursor: pointer;
    }

    .back:hover {
      color: #43bafe;
    }

    .back::after {
      font-family: element-icons;
      content: '\e6ea';
    }
  }

  .person-box,
  .house-box,
  .land-box {
    margin: 8px;
    flex: 1;
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-direction: column;
    // background: $bg-color;

    .person-box {
        .word {
            color: #fff;
            font-size: 14px;
        }
    background-image: url(/img/box/box-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

        .before {
            margin-left: 108px;
        }

        .back {
            color: #fff;
            position: absolute;
            top: 96px;
            right: 16px;
            width: 20px;
            height: 20px;
            font-size: 20px;
            cursor: pointer;
        }

        .back:hover {
            color: #43bafe;
        }

        .back::after {
            font-family: element-icons;
            content: '\e6ea';
        }
    .box {
      display: flex;
      position: absolute;
      flex-direction: column;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 11;
    }

    .person-box,
    .house-box,
    .land-box {
        margin: 8px;
        flex: 1;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 0 18px 0 18px;
      position: relative;
      font-size: 16px;

      font-weight: bold;
      font-style: oblique;
      letter-spacing: 2px;
      color: #fff;

      .title-tab {
        span {
          color: #99cccc;
          cursor: pointer;
        }

        span.choosed {
          color: #fff;
        }
      }

      .title-num {
        color: #fff;

        span {
          color: #99cccc;
        }

        span.choosed {
          color: #fff;
        }
      }

      .choosed {
        color: #fff;
      }

      &>div:nth-of-type(2) {
        font-size: 14px;
      }
    }

    // .sub-title {
    //     display: flex;
    //     justify-content: space-between;
    //     height: 36px;
    // }

    .sub-tab {
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      color: #99cccc;

      .sub-child-tab {
        width: 100%;
        display: flex;
        flex-direction: column;
        // background: $bg-color;
      }

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      .tab,
      .tab3 {
        margin: 0 10px;
        flex: 1;
        background: $sub-tab-bg-color;
        border-radius: 8px;
        cursor: pointer;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;

        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        &>div {
          height: 22px;
          line-height: 22px;
          white-space: nowrap;
        }
      }

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
      .tab {
        display: flex;
        justify-content: center;
      }

            padding: 0 18px 0 18px;
            position: relative;
            font-size: 16px;

            font-weight: bold;
            font-style: oblique;
            letter-spacing: 2px;
            color: #fff;

            .title-tab {
                span {
                    color: #99cccc;
                    cursor: pointer;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .title-num {
                color: #fff;

                span {
                    color: #99cccc;
                }

                span.choosed {
                    color: #fff;
                }
            }

            .choosed {
                color: #fff;
            }

            &>div:nth-of-type(2) {
                font-size: 14px;
            }
        }

        // .sub-title {
        //     display: flex;
        //     justify-content: space-between;
        //     height: 36px;
        // }

        .sub-tab {
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            color: #99cccc;

            .sub-child-tab {
                width: 100%;
                display: flex;
            }

            .tab,
            .tab3 {
                margin: 0 10px;
                flex: 1;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
                justify-content: center;

                &>div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;
                }
            }

            .tab {
                display: flex;
                justify-content: center;
            }

            .tab1 {
                width: 50%;
                margin-left: 25% !important;
                display: flex;
                justify-content: center;
                margin: 0 10px;
                background: $sub-tab-bg-color;
                border-radius: 8px;
                cursor: pointer;
                height: 22px;
                display: flex;
                align-items: center;
            }
        }

        :deep(.el-main) {
            padding: 0;
        }

        .echarts-box {
            padding: 12px;
            padding-top: 0;
            flex: 1;
            width: 100%;
            // height: 100%;
        }
      .tab1 {
        width: 50%;
        margin-left: 25% !important;
        display: flex;
        justify-content: center;
        margin: 0 10px;
        background: $sub-tab-bg-color;
        border-radius: 8px;
        cursor: pointer;
        height: 22px;
        display: flex;
        align-items: center;
      }
    }

    .house-box {
        margin-top: 0;
        margin-bottom: 0;

        .title {
            height: 54px;
            line-height: 54px;
        }
    :deep(.el-main) {
      padding: 0;
    }

    :deep(.el-table__body-wrapper) {
        overflow-x: hidden !important;
    .echarts-box {
      padding: 12px;
      padding-top: 0;
      flex: 1;
      width: 100%;
      // height: 100%;
    }
  }

  .house-box {
    margin-top: 0;
    margin-bottom: 0;

    .title {
      height: 54px;
      line-height: 54px;
    }
  }

  :deep(.el-table__body-wrapper) {
    overflow-x: hidden !important;
  }
}

.border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mypath {
    stroke: rgba(33, 150, 243, 1);
    stroke-width: 2;
    stroke-dasharray: 888;
    // stroke-dashoffset: 888;
    fill: none;
    animation: go 6s linear infinite forwards;
  stroke: rgba(33, 150, 243, 1);
  stroke-width: 2;
  stroke-dasharray: 888;
  // stroke-dashoffset: 888;
  fill: none;
  animation: go 6s linear infinite forwards;
}

@keyframes go {
    0% {
        stroke-dashoffset: 0;
    }
  0% {
    stroke-dashoffset: 0;
  }

    100% {
        stroke-dashoffset: 888;
    }
  100% {
    stroke-dashoffset: 888;
  }
}
</style>

 src/views/home/index.vue

@@ -631,6 +631,7 @@
    <place-details-box ref="placeDetailsBox" :policeStaionID="policeStaionID"></place-details-box>
    <other-place-details-box ref="otherPlaceDetailsBox" :policeStaionID="policeStaionID"></other-place-details-box>
    <risk-details-box ref="riskDetailsBox" :policeStaionID="policeStaionID"></risk-details-box>
    <enterprise-info-box ref="enterpriseInfoBox" :policeStaionID="policeStaionID"></enterprise-info-box>

    <key-person-box ref="keyPersonBox" :policeStaionID="policeStaionID"></key-person-box>
  </div>
@@ -713,6 +714,7 @@
import placeDetailsBox from './components/dialog/placeDetailsBox.vue'
import otherPlaceDetailsBox from './components/dialog/otherPlaceDetailsBox.vue'
import riskDetailsBox from './components/dialog/riskDetailsBox.vue'
import enterpriseInfoBox from './components/dialog/enterpriseInfoBox.vue'

import keyPersonBox from './components/dialog/keyPersonBox.vue'

@@ -898,6 +900,7 @@
    placeDetailsBox,
    otherPlaceDetailsBox,
    riskDetailsBox,
    enterpriseInfoBox,
    areaDetailsBox,
    keyPersonBox
  },
@@ -968,7 +971,7 @@
    this.monitoringList = monitoringList
    this.historyArr = historyArr
    this.underwayArr = underwayArr
    this.getPanoramaList()
    // this.getPanoramaList()
    // this.getResidentialQuartersList('361102')

    this.$EventBus.$on('policeSituationSiteClick', (params) => {
@@ -2768,6 +2771,8 @@
        this.$refs.otherPlaceDetailsBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
      } else if (id == 2) {
        this.$refs.riskDetailsBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
      } else if (id == 3) {
        this.$refs.enterpriseInfoBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
      } else {
        this.$refs.placeDetailsBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
      }
@@ -2780,6 +2785,7 @@
     * @return {*}
     */
    showpeopledetail (id, name, isIncludeKeypeople, deptId) {
      console.log('showpeopledetail', id, name, isIncludeKeypeople, deptId)
      this.$refs.areaDetailsBox.showpeopledetail(id, name, isIncludeKeypeople, deptId)
    },

@@ -2789,6 +2795,7 @@
     * @return {*}
     */
    showkeypersondetail (name) {
      console.log('showkeypersondetail', name)
      this.$refs.keyPersonBox.showkeypersondetail(name)
    },


 src/views/house/index.vue

@@ -813,9 +813,9 @@
          <el-table-column prop="isNonage" label="是否未成年">
            <template slot-scope="scope">{{ scope.row.isNonage == 1 ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column label="户室">
          <!-- <el-table-column label="户室">
            <template slot-scope="scope">{{ scope.row.reAddress.split(villageInfo.name)[1] }}</template>
          </el-table-column>
          </el-table-column> -->
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="policeStationName" label="所属派出所"></el-table-column>
          <el-table-column prop="areaName" label="所属责任区"></el-table-column>
@@ -917,6 +917,7 @@
  data () {
    return {
      buildInfoList: {},
      buildHeight: 0,
      currentVillageId: '',
      isShowPayInfo: false,
      isShowHouseInfoBox: true,
@@ -1181,7 +1182,7 @@
        //   isHover: true,
        // },
        {
          label: "九小场所",
          label: "“九+N”小场所",
          value: 11,
          isHover: true,
        },
@@ -1786,8 +1787,8 @@
        // 小区楼栋数据
        if (res.data.result[0].children_infos && res.data.result[0].children_infos.length) {
          console.log('search---building', res.data.result[0].children_infos)
          console.log('search---building', res.data.result[0].children_infos[0].exttype == 'building')
          if (res.data.result[0].children_infos[0].exttype == 'building') {
          console.log('search---building', res.data.result[0].children_infos[0]?.exttype == 'building')
          if (res.data.result[0].children_infos[0]?.exttype == 'building') {
            this.isShowBuildListBox = true
            let buildData = res.data.result[0].children_infos
            buildData.forEach((item) => {
@@ -1816,7 +1817,7 @@
            }, 500)

            // this.buildingClick(this.buildingList[0])
          } else if (res.data.result[0].children_infos[0].exttype == 'unit') {
          } else if (res.data.result[0].children_infos[0]?.exttype == 'unit') {
            console.log('search---unit')
            this.isShowHouseBox = true
            this.isShowBuildListBox = false
@@ -1845,7 +1846,7 @@
              this.floorInfo.house_num = houseCount
              this.isHaveResidentData = true
            })
          } else if (res.data.result[0].children_infos[0].exttype == 'floor') {
          } else if (res.data.result[0].children_infos[0]?.exttype == 'floor') {
            let houseUintList = res.data.result[0]
            this.isShowHouseBox = true
            this.isShowBuildListBox = false
@@ -1938,8 +1939,8 @@
            this.residentDetailsClick(houseUintList)
            return
          }
          console.log(houseUintList.children_infos, houseUintList.children_infos[0].exttype, "unit**********************")
          if (houseUintList.children_infos.length >= 1 && houseUintList.children_infos[0].exttype == 'unit') {
          console.log(houseUintList.children_infos, houseUintList.children_infos[0]?.exttype, "unit**********************")
          if (houseUintList.children_infos.length >= 1 && houseUintList.children_infos[0]?.exttype == 'unit') {
            this.isShowUnitChoose = true
            this.unitOptions = []
            this.unitValue = 1
@@ -1964,7 +1965,7 @@
            } else {
              this.unitChoosedArr = this.unitAllArr.children_infos[0].children_infos
            }
          } else if (houseUintList.children_infos.length >= 1 && houseUintList.children_infos[0].exttype == 'floor') {
          } else if (houseUintList.children_infos.length >= 1 && houseUintList.children_infos[0]?.exttype == 'floor') {
            this.isShowUnitChoose = false
            this.unitChoosedArr = this.unitAllArr.children_infos
            console.log(this.unitAllArr.children_infos, 'search---floor')
@@ -2001,12 +2002,18 @@
      getHouses(build_std_addr_id, adcode).then((res) => {
        let houseData = res.data.data.properties
        console.log('getHouses3DData--then', res)
        let maxHeight = 0
        if (res.data.data?.properties?.hwtxa?.features?.[0]?.properties?.mbfdr) {
          maxHeight = res.data.data.properties.hwtxa.features[0].properties.mbfdr
        } else {
          maxHeight = this.buildHeight // 或其他默认值
        }
        then.$EventBus.$emit("showThreeDimensions", {
          positions: houseData.kmj3a,
          minHeight: 0,
          // res.data.data.properties.hwtxa.features[0].properties.yjpca,
          // maxHeight: res.data.data.properties.hwtxa.features[0].properties.mbfdr,
          maxHeight: res.data.data.properties.hwtxa.features[0].properties.mbfdr,
          maxHeight: maxHeight,
        })
        then.unitChoosed3DList = houseData.nwwqd.features
        then.curHousingHWTXAYjpca = 0
@@ -2887,7 +2894,9 @@
        let bgId = result.data.data.properties.bg_buildid

        const getCurHouseDetails = await this.someEventHandler(result.data.data.properties.build_id, e.wgs84Position.lng, e.wgs84Position.lat)

        if (getCurHouseDetails.data.data) {
          this.buildHeight = getCurHouseDetails.data.data.height
        }
        getSearchExtensively(
          "81503dad589f42bf9a9e5ea5e017f329",
          "361121",