经开分局优化

linwe

2025-12-02 9a6fa83dd674c652229af19afda4f72b8445d3fc

经开分局优化

 src/api/site/index.js

@@ -37,6 +37,20 @@
}

/**
 * 风险隐患场所
 * @param {*} page 页数
 * @param {*} count 每页数量
 * @returns
 */
export const getRiskPage = (param) => {
  return request({
    url: "/api/blade-riskHazard/riskHazard/page",
    method: "get",
    params: param,
  })
}

/**
 * 获取阵地字典表
 * @param {*} page 页数
 * @param {*} count 每页数量

 src/components/map/components/placeBasePopup.vue

@@ -11,7 +11,32 @@
              <div class="b-b"></div>
              <div class="b-l"></div>
              <div class="arrow-rb"></div>
              <div class="label-wrap">
              <div class="label-wrap" v-if="placeBasePopupData.type && placeBasePopupData.type == 1">
                <div class="title">
                  风险隐患点信息
                  <div class="close" @click="closePopup" title="关闭"></div>
                </div>
                <div class="label-content">
                  <div class="item">
                    <div>风险隐患点名称:</div>
                    <div>{{ placeBasePopupData.placeName }}</div>
                  </div>
                  <div class="item">
                    <div>风险隐患点地址:</div>
                    <div>{{ placeBasePopupData.location }}</div>
                  </div>
                  <div class="item">
                    <div>联系人:</div>
                    <div>{{ placeBasePopupData.principal }}</div>
                  </div>
                  <div class="item">
                    <div>联系人电话:</div>
                    <div>{{ placeBasePopupData.principalPhone }}</div>
                  </div>
                </div>
              </div>

              <div class="label-wrap" v-else>
                <div class="title">
                  场所信息
                  <div class="details-btn" @click="siteClick" title="详情"></div>
@@ -36,6 +61,7 @@
                  </div>
                </div>
              </div>

            </div>
            <div class="b-t-l"></div>
            <div class="b-b-r"></div>

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

New file
@@ -0,0 +1,420 @@
<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="getRiskPage">搜索</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="riskHazardName" :show-overflow-tooltip="true" label="风险隐患点名称"></el-table-column>
          <el-table-column prop="riskHazardCategory" :show-overflow-tooltip="true" label="风险隐患类别"></el-table-column>
          <el-table-column prop="dataSource" :show-overflow-tooltip="true" label="数据来源"></el-table-column>
          <el-table-column prop="detailedAddress" :show-overflow-tooltip="true" label="详细地址"></el-table-column>
          <el-table-column prop="contactPerson" :show-overflow-tooltip="true" label="联系人"></el-table-column>
          <el-table-column prop="contactPhone" :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>
const typeTree = [
  {
    key: "1",
    url: `/img/icon/place_01.png`
  },
  {
    key: "2",
    url: `/img/icon/place_02.png`
  },
  {
    key: "10",
    url: `/img/icon/place_03.png`
  },
  {
    key: "11",
    url: `/img/icon/place_03.png`
  },
  {
    key: "12",
    url: `/img/icon/place_03.png`
  },
  {
    key: "13",
    url: `/img/icon/place_04.png`
  },
  {
    key: "14",
    url: `/img/icon/place_04.png`
  },
  {
    key: "15",
    url: `/img/icon/place_04.png`
  },
  {
    key: "5",
    url: `/img/icon/place_05.png`
  },
  {
    key: "6",
    url: `/img/icon/place_06.png`
  },
  {
    key: "7",
    url: `/img/icon/place_07.png`
  },
  {
    key: "8",
    url: `/img/icon/place_08.png`
  },
  {
    key: "9",
    url: `/img/icon/place_09.png`
  }
]

import {
  getNineTypeTree,
  getRiskPage,
} from "@/api/site/index.js"

export default {
  props: ["policeStaionID"],

  data () {
    return {
      type: null,
      isDanger: null,
      placeName: "",
      address: "",
      riskHazardCategory: "",
      typeValue: "",
      typeOptions: [],
      tableData: [],

      curLoading: false,
      landEmptyText: "",
      visible: false,
      title: "九小场所列表",
      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]

      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.getRiskPage()
    },
    // 切换登记类型
    typeChange (item) {
      this.pages.current = 1
      this.getRiskPage()
    },
    /**
     * @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
      // 获取九小场所隐患数量统计
      // this.getNineTypeTree(value)
      this.getRiskPage()
    },

    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.getRiskPage()
        } else {
          this.typeOptions = data
        }
      })
    },
    getRiskPage () {
      this.curLoading = true
      getRiskPage({
        current: this.pages.current,
        size: this.pages.pageSize,
        riskHazardType: 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.getRiskPage()
    },

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

    /**
     * @description: 现有小区详情弹窗分页
     * @param {*} currentPage 当前页数
     * @return {*}
     */
    handleCurrentChange (currentPage) {
      this.pages.current = currentPage
      this.getRiskPage()
    },
    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/leftContainer.vue

@@ -1,153 +1,148 @@
<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">
                        <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 id="houseEcharts" 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 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">
            <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 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>
          <div id="houseEcharts" 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 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'
@@ -181,1874 +176,1886 @@
const peopleColor2 = '#f26390'

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

    data () {
        return {
            placeNum: 0,
            otherPlaceNum: 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,
      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) {
          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)
        })

        // 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.data.id, 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 {
                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.data.id, 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()
                if (flag) {
                    this.placeNum = placeList.reduce((pre, cur) => {
                        return pre + cur.num
                    }, 0)
                    this.otherPlaceNum = otherList.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 {
                    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
                    },
                    // legend: {
                    //   orient: 'vertical',
                    //   top: 'middle',
                    //   right: '2%',
                    //   y: '1%',
                    //   itemGap: 15,
                    //   textStyle: {
                    //     color: '#fff'
                    //   },
                    //   align: 'left',
                    //   formatter: function (name) {
                    //     let data = dataArr
                    //     let tarValue
                    //     for (let i = 0; i < data.length; i++) {
                    //       if (data[i].name == name) {
                    //         tarValue = data[i].value
                    //       }
                    //     }
                    //     let v = tarValue
                    //     return `${name}  ${v} 人    `
                    //   },
                    // },
                    series: [
                        {

                            type: 'pie',
                            radius: [20, 50],
                            center: ['50%', '50%'],

                            data: dataArr,
                            label: {
                                normal: {
                                    formatter: function (params, ticket, callback) {
                                        let msg
                                        if (params.value > 10000) {
                                            msg = (params.value / 10000).toFixed(2) + '万人'
                                        } else {
                                            msg = params.value + '人'
                                        }
                                        return `{white|${params.name}}{yellow|${msg}}`
                                    },
                                    rich: {
                                        yellow: {
                                            color: "#ffc72b",
                                            fontSize: fontSize(12),
                                            padding: [5, 4],
                                            align: 'center'
                                        },
                                        total: {
                                            color: "#ffc72b",
                                            fontSize: fontSize(12),
                                            align: 'center'
                                        },
                                        white: {
                                            color: "#fff",
                                            align: 'center',
                                            fontSize: fontSize(12),
                                            padding: [21, 0]
                                        },
                                        blue: {
                                            color: '#49dff0',
                                            fontSize: fontSize(12),
                                            align: 'center'
                                        },
                                    }
                                },
                            },
                        }
                    ],
                    grid: {
                        x: 10,
                        y: 10,
                        x2: 10,
                        y2: 20
                    },
                }
            }

            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()
        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
          },
          // legend: {
          //   orient: 'vertical',
          //   top: 'middle',
          //   right: '2%',
          //   y: '1%',
          //   itemGap: 15,
          //   textStyle: {
          //     color: '#fff'
          //   },
          //   align: 'left',
          //   formatter: function (name) {
          //     let data = dataArr
          //     let tarValue
          //     for (let i = 0; i < data.length; i++) {
          //       if (data[i].name == name) {
          //         tarValue = data[i].value
          //       }
          //     }
          //     let v = tarValue
          //     return `${name}  ${v} 人    `
          //   },
          // },
          series: [
            {

              type: 'pie',
              radius: [20, 50],
              center: ['50%', '50%'],

              data: dataArr,
              label: {
                normal: {
                  formatter: function (params, ticket, callback) {
                    let msg
                    if (params.value > 10000) {
                      msg = (params.value / 10000).toFixed(2) + '万人'
                    } else {
                      msg = params.value + '人'
                    }
                    return `{white|${params.name}}{yellow|${msg}}`
                  },
                  rich: {
                    yellow: {
                      color: "#ffc72b",
                      fontSize: fontSize(12),
                      padding: [5, 4],
                      align: 'center'
                    },
                    total: {
                      color: "#ffc72b",
                      fontSize: fontSize(12),
                      align: 'center'
                    },
                    white: {
                      color: "#fff",
                      align: 'center',
                      fontSize: fontSize(12),
                      padding: [21, 0]
                    },
                    blue: {
                      color: '#49dff0',
                      fontSize: fontSize(12),
                      align: 'center'
                    },
                  }
                },
              },
            }
          ],
          grid: {
            x: 10,
            y: 10,
            x2: 10,
            y2: 20
          },
        }
      }

      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 => {
        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')
      }
    },


  },

  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;
    .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;
      color: #99cccc;

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

        background-image: url(/img/box/box-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .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;
            color: #99cccc;

            .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

@@ -27,31 +27,31 @@
    <scheduling-list ref="schedulingList"></scheduling-list>

    <!-- <div class="center-container" :class="{ 'show-home-center': !isShowHomeContent }">
      <div class="layers-control-btn area">
        <el-checkbox v-model="areaPolygonLayerShow" @change="areaPolygonChange">辖区</el-checkbox>
      </div>
       <div class="layers-control-btn car">
        <el-checkbox v-model="carLayerShow" @change="carChange">警车</el-checkbox>
      </div>
      <div class="layers-control-btn phone">
        <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
      </div>
    <div class="layers-control-btn area">
      <el-checkbox v-model="areaPolygonLayerShow" @change="areaPolygonChange">辖区</el-checkbox>
    </div>
     <div class="layers-control-btn car">
      <el-checkbox v-model="carLayerShow" @change="carChange">警车</el-checkbox>
    </div>
    <div class="layers-control-btn phone">
      <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
    </div>

      <div class="layers-control-btn phone">
        <el-checkbox v-model="handsetRadioLayerShow" @change="handsetRadioChange">手台</el-checkbox>
      </div>
    <div class="layers-control-btn phone">
      <el-checkbox v-model="handsetRadioLayerShow" @change="handsetRadioChange">手台</el-checkbox>
    </div>

      <div class="layers-control-btn phone">
        <el-checkbox v-model="bWCameraLayerShow" @change="bWCameraChange">执法记录仪</el-checkbox>
      </div>
    <div class="layers-control-btn phone">
      <el-checkbox v-model="bWCameraLayerShow" @change="bWCameraChange">执法记录仪</el-checkbox>
    </div>

       <div class="layers-control-btn panorama">
        <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
      </div>
      <div class="layers-control-btn police-situation">
        <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
      </div>
    </div> -->
     <div class="layers-control-btn panorama">
      <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
    </div>
    <div class="layers-control-btn police-situation">
      <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
    </div>
  </div> -->

    <div v-show="isShowHomeContent" ref="RegionSelect" style="left: 0;" class="region-select">
      <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
@@ -423,7 +423,7 @@
        <el-table-column :show-overflow-tooltip="true" prop="name" label="名称"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="bigType" label="大类名称"></el-table-column>
        <!-- <el-table-column :show-overflow-tooltip="true" prop="midType" label="中类名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="smallType" label="小类名称"></el-table-column> -->
              <el-table-column :show-overflow-tooltip="true" prop="smallType" label="小类名称"></el-table-column> -->
        <el-table-column :show-overflow-tooltip="true" prop="address" label="地址"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeman" label="包干民警"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policemanPhone" label="包干民警电话"></el-table-column>
@@ -484,15 +484,15 @@
        <el-table-column v-if="currentGzcsItemShow('attentionType')" :show-overflow-tooltip="true" prop="attentionType"
          label="关注类型"></el-table-column>
        <!-- <el-table-column v-if="currentGzcsItemShow('status')" :show-overflow-tooltip="true" prop="status"
                    label="状态"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('scale')" :show-overflow-tooltip="true" prop="scale"
                    label="规模"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('phteacherScaleone')" :show-overflow-tooltip="true"
                    prop="teacherScale" label="教师规模"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('studentScale')" :show-overflow-tooltip="true"
                    prop="studentScale" label="学生规模"></el-table-column>
                <el-table-column v-if="currentGzcsItemShow('officeArea')" :show-overflow-tooltip="true" prop="officeArea"
                    label="办公区域"></el-table-column> -->
                  label="状态"></el-table-column>
              <el-table-column v-if="currentGzcsItemShow('scale')" :show-overflow-tooltip="true" prop="scale"
                  label="规模"></el-table-column>
              <el-table-column v-if="currentGzcsItemShow('phteacherScaleone')" :show-overflow-tooltip="true"
                  prop="teacherScale" label="教师规模"></el-table-column>
              <el-table-column v-if="currentGzcsItemShow('studentScale')" :show-overflow-tooltip="true"
                  prop="studentScale" label="学生规模"></el-table-column>
              <el-table-column v-if="currentGzcsItemShow('officeArea')" :show-overflow-tooltip="true" prop="officeArea"
                  label="办公区域"></el-table-column> -->
        <el-table-column v-if="currentGzcsItemShow('officeMain')" :show-overflow-tooltip="true" prop="officeMain"
          label="办公主体"></el-table-column>
        <el-table-column v-if="currentGzcsItemShow('hazardousGoodsName')" :show-overflow-tooltip="true"
@@ -571,13 +571,13 @@
      element-loading-background="rgba(0, 0, 0, 0.5)">
      <div class="header">
        <!-- <div>
                    姓名：
                    <input type="text" v-model="zhuHuInfoName" placeholder="请输入住户名称" />
                </div>
                <div>
                    身份证号：
                    <input type="text" v-model="zhuHuInfoID" placeholder="请输入住户身份证号" />
                </div> -->
                  姓名：
                  <input type="text" v-model="zhuHuInfoName" placeholder="请输入住户名称" />
              </div>
              <div>
                  身份证号：
                  <input type="text" v-model="zhuHuInfoID" placeholder="请输入住户身份证号" />
              </div> -->
        <div>时间：</div>
        <div>
          <el-date-picker v-model="zhuHuInfoDate" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -608,12 +608,12 @@
          </template>
        </el-table-column>
        <!-- 
                <el-table-column :show-overflow-tooltip="true" prop="cyzjdm_dic" label="常用证件类型"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="lgmc" label="旅馆名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="xxrksj" label="信息入库时间"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="lddm" label="旅店代码"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="sjgajgjgdm_dic" label="市局公安机关机构名称"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="mzdm_dic" label="民族"></el-table-column> -->
              <el-table-column :show-overflow-tooltip="true" prop="cyzjdm_dic" label="常用证件类型"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="lgmc" label="旅馆名称"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="xxrksj" label="信息入库时间"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="lddm" label="旅店代码"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="sjgajgjgdm_dic" label="市局公安机关机构名称"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="mzdm_dic" label="民族"></el-table-column> -->
      </el-table>
      <div class="syld_page all-pagination-sty">
        <el-pagination background layout="prev, pager, next, total" :page-size="zhuHuInfoPage.pageSize"
@@ -630,6 +630,7 @@
    <area-details-box ref="areaDetailsBox" :policeStaionID="policeStaionID"></area-details-box>
    <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>

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

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

@@ -957,6 +959,7 @@
    countByDetailsBox,
    placeDetailsBox,
    otherPlaceDetailsBox,
    riskDetailsBox,
    areaDetailsBox,
    keyPersonBox
  },
@@ -2401,10 +2404,7 @@
              lat: center[1],
              alt: 0,
              text: `${item.name}`,
              outW: 20,
              setStyle: {
                disableDepthTestDistance: Number.POSITIVE_INFINITY
              }
              outW: 20
            },
            distanceDisplayCondition: { "near": 0, "far": 200000 }
          })
@@ -2496,22 +2496,19 @@
            })
          })

          const center = this.getRegionCenter(item.position)
          this.$EventBus.$emit('layerPointAdd', {
            layerName: 'areaPolygonLabel',
            type: 'label',
            params: {
              lng: center[0],
              lat: center[1],
              alt: 0,
              text: `${item.name}`,
              outW: 20,
              setStyle: {
                disableDepthTestDistance: Number.POSITIVE_INFINITY
              }
            },
            distanceDisplayCondition: { "near": 0, "far": 200000 }
          })
          // const center = this.getRegionCenter(item.position)
          // this.$EventBus.$emit('layerPointAdd', {
          //   layerName: 'areaPolygonLabel',
          //   type: 'label',
          //   params: {
          //     lng: center[0],
          //     lat: center[1],
          //     alt: 0,
          //     text: `${item.name}`,
          //     outW: 20
          //   },
          //   distanceDisplayCondition: { "near": 0, "far": 200000 }
          // })

        }

@@ -2827,8 +2824,11 @@
     * @return {*}
     */
    showplacedetail (id, name, isIncludeKeypeople, deptId) {
      console.log('showplacedetail', name)
      if (id == 1) {
        this.$refs.otherPlaceDetailsBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
      } else if (id == 2) {
        this.$refs.riskDetailsBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
      } else {
        this.$refs.placeDetailsBox.showplacedetail(id, name, isIncludeKeypeople, deptId)
      }

 src/views/intelligentSearch/index.vue

@@ -10,47 +10,47 @@
-->

<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <el-input size="small" clearable v-model="searchKey" @input="searchBtn"
                        placeholder="请输入(姓名、手机号、身份证号、住址)" style="cursor: pointer;"></el-input>
                </div>
            </div>

            <div v-show="tableData.length > 0" class="list police-info intelligent-table" ref="tableBox">
                <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="realName" :show-overflow-tooltip="true" label="姓名"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号"></el-table-column>
                    <el-table-column prop="cardNo" :show-overflow-tooltip="true" label="身份证号"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址"></el-table-column> -->
                    <el-table-column 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" style="padding-top:-15px">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize"
                        :total="pages.total" :pager-count="pages.total > 100000 ? 3 : 4"
                        :current-page="pages.currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
  <div class="police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <el-input size="small" clearable v-model="searchKey" @input="searchBtn" placeholder="请输入(姓名、手机号、身份证号、住址)"
            style="cursor: pointer;"></el-input>
        </div>
      </div>

        <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>
      <div v-show="tableData.length > 0" class="list police-info intelligent-table" ref="tableBox">
        <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
          :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
          :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
          :row-class-name="tableRowClassName" class="police-infor-table">
          <el-table-column prop="realName" :show-overflow-tooltip="true" label="姓名"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号"></el-table-column>
          <el-table-column prop="cardNo" :show-overflow-tooltip="true" label="身份证号"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址"></el-table-column> -->
          <el-table-column 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" style="padding-top:-15px">
          <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize" :total="pages.total"
            :pager-count="pages.total > 100000 ? 3 : 4" :current-page="pages.currentPage"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>

    <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>
  </div>
</template>

<script>
@@ -62,427 +62,427 @@
let JQSmychart = null

let positionColor = [
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 142, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 192, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 242, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(0, 185, 209, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(250, 84, 28, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(221, 255, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(51, 255, 0, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 255, 181, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 181, 252, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 129, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 236, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 184, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(97, 113, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(81, 252, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(126, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(168, 252, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(171, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 249, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(210, 97, 255, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 174, 58, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 176, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 155, 20),
    global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 155, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 142, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 192, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 242, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(0, 185, 209, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(250, 84, 28, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(221, 255, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(51, 255, 0, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(97, 255, 181, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(58, 181, 252, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 129, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 236, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(97, 184, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(97, 113, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(81, 252, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(126, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(168, 252, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(171, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 249, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(210, 97, 255, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 174, 58, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(255, 97, 176, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(58, 252, 155, 20),
  global.DC.Namespace.Cesium.Color.fromBytes(252, 58, 155, 20),
]
import { initMapPosition } from '@/utils/mapPositionInit'
import {
    getVillagePersonInfoBySearch,
  getVillagePersonInfoBySearch,
} from "@/api/dept/index.js"
import { getPoliceStationTree } from "@/api/home/index.js"
let loading = null

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

    data () {
        return {
            popupTile: '详情信息',
            searchKey: '',
            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],
            boxShow: false,
            pages: {
                total: 0,
                pageSize: 16,
                count: 0,
                currentPage: 1
            },
            policeStationOptions: []
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
            that.searchBtn()
        })
        this.getPoliceStationTree(1)
    },

    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')

            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },

    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: {
        // 加载首页下拉列表数据
        getPoliceStationTree (type, id = '') {
            var that = this
            getPoliceStationTree(type, id).then(res => {
                if (type == 1) {

                    this.policeStationOptions = res.data.data

                    this.policeStationOptions.unshift({
                        name: '全部',
                        id: 1
                    })

                    this.initPoliceStationLayer()
                }
            })
        },

        // 加载面数据的方法
        initPoliceStationLayer () {
            const that = this
            cylinderLayer = new global.DC.PrimitiveLayer('cylinderLayer')
            global.viewer.addLayer(cylinderLayer)

            DataSourcesArray.forEach(item => {
                global.viewer.dataSources.remove(item, true)
            })

            this.policeStationOptions.forEach((item, index) => {
                if (item.position && item.position.length > 0) {
                    item.position.forEach((sourceItem, sourceIndex) => {

                        const Json = { ...JSON.parse(sourceItem) }

                        global.DC.Namespace.Cesium.GeoJsonDataSource.load(Json, {
                            stroke: positionColor[index],
                            fill: positionColor[index], //注意：颜色必须大写，即不能为blue
                            strokeWidth: 0,
                            clampToGround: false
                        }).then(function (dataSource) {
                            let entities = dataSource.entities.values
                            //修改entity样式
                            for (let i = 0; i < entities.length; i++) {
                                let entity = entities[i]
                                entity.polyline = {
                                    positions: entity.polygon.hierarchy._value.positions,
                                    width: 4,
                                    material: global.DC.Namespace.Cesium.Color.fromCssColorString('#19298d'),
                                    clampToGround: true
                                }
                            }

                            DataSourcesArray.push(dataSource)
                            dataSource.show = true
                            global.viewer.dataSources.add(dataSource)
                        })

                    })
                }
            })
        },
        // 获取选中数据--暂时为测试数据
        getRowData (row) {
            let data = [
                {
                    label: '与户主关系',
                    prop: 'relation',
                    value: row.relation,
                    type: 'popup'
                },
                {
                    label: '名字',
                    prop: 'realName',
                    value: row.realName,
                    type: 'popup'
                },
                {
                    label: '身份证号',
                    prop: 'cardNo',
                    value: row.cardNo,
                    type: 'popup'
                },
                {
                    label: '人口类型',
                    prop: 'personType',
                    value: row.personType == 1 ? '户籍人口' : '实有人口',
                    type: 'popup'
                },
                {
                    label: '地址',
                    prop: 'address',
                    value: row.address,
                    type: 'popup'
                },
                {
                    label: '新地址',
                    prop: 'reAddress',
                    // value: row.reAddress.replace('江西省上饶', ''),
                    value: row.reAddress,
                    type: 'detail'
                },
                {
                    label: '审查状态',
                    prop: 'status',
                    value: row.status,
                    type: 'detail'
                },
                {
                    label: '审查时间',
                    prop: 'sctime',
                    value: row.sctime,
                    type: 'detail'
                },
                {
                    label: '社区局村委会',
                    prop: 'neightborhoood',
                    value: row.neightborhoood,
                    type: 'detail'
                },
                {
                    label: '重点人员细类',
                    prop: 'zdryxl',
                    value: row.zdryxl,
                    type: 'detail'
                }
            ]
            return data
        },

        // 点击详情
        goDetail (row) {
            let data = this.getRowData(row)
            this.$refs.detailsPopup.initOpen(data)
        },

        // 点击定位
        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.x,
                siteWd: row.y,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchAILayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: row.x,
                    lat: row.y,
                    alt: 1,
                    url: `/img/icon/location.png`
                },
            })

            let data = this.getRowData(row)

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

            this.$store.commit('SET_DIALOGDETAILPOPUPDATA', data)
            // 商业模拟数据
            var dialogDetailPopup = new global.DC.DivForms(global.viewer, {
                domId: 'dialogDetailPopup',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(row.x),
                            Number(row.y),
                            0
                        )
                    )
                ]
            })
        },

        // 清空按钮-图标图层清除
        clearRow (row) {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
        },

        // 获取列表
        getList () {
            this.loading()
            let params = {
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage,
                deptId: JSON.parse(sessionStorage.getItem("userInfo")).dept_id
            }
            getVillagePersonInfoBySearch(params).then(res => {
                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.status == 0) {
                            item.status = '未审查'
                        } else if (item.status == 1) {
                            item.status = '审查正常'
                        } else if (item.status == 2) {
                            item.status = '审查异常'
                        }
                    })
                }
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        searchBtn (e = '') {
            this.pages.currentPage = 1

            if (e == '') {
                this.tableData = []
                return
            }

            this.getList()
        },

        // 分页处理
        handleCurrentChange (currentPage) {
            this.pages.currentPage = currentPage
            this.getList()
        },


        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    },

    destroyed () {
        DataSourcesArray.forEach(item => {
            global.viewer.dataSources.remove(item, true)
        })

        DataSourcesArray = []

        if (cylinderLayer != null) {
            cylinderLayer.remove()
            cylinderLayer = null
        }

        loading && loading.close()

        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')

        this.clearRow()
  data () {
    return {
      popupTile: '详情信息',
      searchKey: '',
      realEmptyText: "",
      currentTableHeight: 0,
      tableData: [],
      boxShow: false,
      pages: {
        total: 0,
        pageSize: 16,
        count: 0,
        currentPage: 1
      },
      policeStationOptions: []
    }
  },

  created () {
    const that = this

    that.$nextTick(() => {
      initMapPosition()
      that.searchBtn()
    })
    this.getPoliceStationTree(1)
  },

  mounted () {
    this.$parent.$parent.resize('400px', true)

    this.$nextTick(() => {
      this.$EventBus.$emit('closeMxTileset')

      this.setTableHeight()
    })

    window.addEventListener('resize', this.setTableHeight)
  },

  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: {
    // 加载首页下拉列表数据
    getPoliceStationTree (type, id = '') {
      var that = this
      getPoliceStationTree(type, id).then(res => {
        if (type == 1) {

          this.policeStationOptions = res.data.data

          this.policeStationOptions.unshift({
            name: '全部',
            id: 1
          })

          this.initPoliceStationLayer()
        }
      })
    },

    // 加载面数据的方法
    initPoliceStationLayer () {
      const that = this
      cylinderLayer = new global.DC.PrimitiveLayer('cylinderLayer')
      global.viewer.addLayer(cylinderLayer)

      DataSourcesArray.forEach(item => {
        global.viewer.dataSources.remove(item, true)
      })

      this.policeStationOptions.forEach((item, index) => {
        if (item.position && item.position.length > 0) {
          item.position.forEach((sourceItem, sourceIndex) => {

            const Json = { ...JSON.parse(sourceItem) }

            global.DC.Namespace.Cesium.GeoJsonDataSource.load(Json, {
              stroke: positionColor[index],
              fill: positionColor[index], //注意：颜色必须大写，即不能为blue
              strokeWidth: 0,
              clampToGround: false
            }).then(function (dataSource) {
              let entities = dataSource.entities.values
              //修改entity样式
              for (let i = 0; i < entities.length; i++) {
                let entity = entities[i]
                entity.polyline = {
                  positions: entity.polygon.hierarchy._value.positions,
                  width: 4,
                  material: global.DC.Namespace.Cesium.Color.fromCssColorString('#19298d'),
                  clampToGround: true
                }
              }

              DataSourcesArray.push(dataSource)
              dataSource.show = true
              global.viewer.dataSources.add(dataSource)
            })

          })
        }
      })
    },
    // 获取选中数据--暂时为测试数据
    getRowData (row) {
      let data = [
        {
          label: '与户主关系',
          prop: 'relation',
          value: row.relation,
          type: 'popup'
        },
        {
          label: '名字',
          prop: 'realName',
          value: row.realName,
          type: 'popup'
        },
        {
          label: '身份证号',
          prop: 'cardNo',
          value: row.cardNo,
          type: 'popup'
        },
        {
          label: '人口类型',
          prop: 'personType',
          value: row.personType == 1 ? '户籍人口' : '实有人口',
          type: 'popup'
        },
        {
          label: '地址',
          prop: 'address',
          value: row.address,
          type: 'popup'
        },
        {
          label: '新地址',
          prop: 'reAddress',
          // value: row.reAddress.replace('江西省上饶', ''),
          value: row.reAddress,
          type: 'detail'
        },
        {
          label: '审查状态',
          prop: 'status',
          value: row.status,
          type: 'detail'
        },
        {
          label: '审查时间',
          prop: 'sctime',
          value: row.sctime,
          type: 'detail'
        },
        {
          label: '社区局村委会',
          prop: 'neightborhoood',
          value: row.neightborhoood,
          type: 'detail'
        },
        {
          label: '重点人员细类',
          prop: 'zdryxl',
          value: row.zdryxl,
          type: 'detail'
        }
      ]
      return data
    },

    // 点击详情
    goDetail (row) {
      let data = this.getRowData(row)
      this.$refs.detailsPopup.initOpen(data)
    },

    // 点击定位
    rowClick (row) {
      this.$EventBus.$emit('toPosition', {
        siteJd: row.x,
        siteWd: row.y,
        siteGd: 200
      })
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'searchAILayer',
        type: "billboard",
        params: {
          ...row,
          lng: row.x,
          lat: row.y,
          alt: 1,
          url: `/img/icon/location.png`
        },
      })

      let data = this.getRowData(row)

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

      this.$store.commit('SET_DIALOGDETAILPOPUPDATA', data)
      // 商业模拟数据
      var dialogDetailPopup = new global.DC.DivForms(global.viewer, {
        domId: 'dialogDetailPopup',
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(row.x),
              Number(row.y),
              0
            )
          )
        ]
      })
    },

    // 清空按钮-图标图层清除
    clearRow (row) {
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'searchAILayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
    },

    // 获取列表
    getList () {
      this.loading()
      let params = {
        searchKey: this.searchKey,
        size: this.pages.pageSize,
        current: this.pages.currentPage,
        deptId: JSON.parse(sessionStorage.getItem("userInfo")).dept_id
      }
      getVillagePersonInfoBySearch(params).then(res => {
        if (res.data.data.records.length > 0) {
          res.data.data.records.forEach(item => {
            if (item.status == 0) {
              item.status = '未审查'
            } else if (item.status == 1) {
              item.status = '审查正常'
            } else if (item.status == 2) {
              item.status = '审查异常'
            }
          })
        }
        this.tableData = res.data.data.records
        this.pages.total = res.data.data.total
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    searchBtn (e = '') {
      this.pages.currentPage = 1

      if (e == '') {
        this.tableData = []
        return
      }

      this.getList()
    },

    // 分页处理
    handleCurrentChange (currentPage) {
      this.pages.currentPage = currentPage
      this.getList()
    },


    loading () {
      loading = this.$loading({
        lock: true,
        text: '拼命加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
    },

    setTableHeight () {
      this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
    },

    // 大小重置
    boxResize (val) {
      this.boxShow = val
    },
  },

  destroyed () {
    DataSourcesArray.forEach(item => {
      global.viewer.dataSources.remove(item, true)
    })

    DataSourcesArray = []

    if (cylinderLayer != null) {
      cylinderLayer.remove()
      cylinderLayer = null
    }

    loading && loading.close()

    window.removeEventListener('resize', this.setTableHeight)

    this.$parent.$parent.resize('0px')

    this.clearRow()
  }
}
</script>

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

  &-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;
    }
    color: #fff;
    background: $bg-color;
  }
}

.list {
    height: calc(100% - 48px);
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;

  .pages {
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

    .pages {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .state-box {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #adadad;
  }

    .state-box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #adadad;
    }

    .online {
        background-color: #4ccc7d;
    }
  .online {
    background-color: #4ccc7d;
  }
}
</style>