扫码报警页面模型遮挡图标处理 默认显示影像+轻量处理 阵地管理页面模型遮挡图标处理 从业人员页面模型遮挡图标处理 群众上报页面模型遮挡图标处理 九小场...

shuishen

2024-12-09 d75e47f5a8d2df158a3dd33b7b598a97854ea1df

扫码报警页面模型遮挡图标处理
默认显示影像+轻量处理
阵地管理页面模型遮挡图标处理
从业人员页面模型遮挡图标处理
群众上报页面模型遮挡图标处理
九小场所页面模型遮挡图标处理

 src/components/map/index.vue

@@ -2,22 +2,15 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-06-21 16:37:19
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-08-21 21:38:56
 * @LastEditTime: 2024-12-09 19:48:35
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
  <div
    class="viewer-box"
    id="viewer-container"
    @click="showImgBtn = false"
  >
    <slot
      ref="mainContent"
      name="mainContent"
    ></slot>
  <div class="viewer-box" id="viewer-container" @click="showImgBtn = false">
    <slot ref="mainContent" name="mainContent"></slot>

    <slot name="copyrightText"></slot>

@@ -26,122 +19,52 @@
    <slot name="resetPopup"></slot>

    <div class="compass-btn">
      <el-tooltip
        content="指北针"
        placement="top"
        effect="dark"
      >
        <i
          id="COMPASSBTN"
          class="el-icon-compass-btn"
          style="vertical-align: middle; cursor: pointer"
          :style="{ transform: compassBtnTranslate }"
          @click="compassBtnClick"
        ></i>
      <el-tooltip content="指北针" placement="top" effect="dark">
        <i id="COMPASSBTN" class="el-icon-compass-btn" style="vertical-align: middle; cursor: pointer"
          :style="{ transform: compassBtnTranslate }" @click="compassBtnClick"></i>
      </el-tooltip>
    </div>

    <div class="over-look-btn">
      <el-tooltip
        content="一键俯视"
        placement="top"
        effect="dark"
      >
        <i
          class="fa fa-eye"
          style="vertical-align: middle; cursor: pointer"
          @click="overLookClick"
        ></i>
      <el-tooltip content="一键俯视" placement="top" effect="dark">
        <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
      </el-tooltip>
    </div>
    <!-- 全屏控制按钮 -->
    <div class="screen-full-btn">
      <el-tooltip
        v-if="!isShowHomeContentBtn && isFullscreen"
        content="缩放"
        placement="top"
        effect="dark"
      >
        <i
          class="fa fa-compress"
          style="vertical-align: middle; cursor: pointer"
          @click="fullscreenchange"
        ></i>
      <el-tooltip v-if="!isShowHomeContentBtn && isFullscreen" content="缩放" placement="top" effect="dark">
        <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
      </el-tooltip>

      <el-tooltip
        v-if="!isShowHomeContentBtn && !isFullscreen"
        content="全屏"
        placement="top"
        effect="dark"
      >
        <i
          class="fa fa-expand"
          style="vertical-align: middle; cursor: pointer"
          @click="fullscreenchange"
        ></i>
      <el-tooltip v-if="!isShowHomeContentBtn && !isFullscreen" content="全屏" placement="top" effect="dark">
        <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
      </el-tooltip>
      <el-tooltip
        v-if="isShowHomeContentBtn"
        content="显示/隐藏"
        placement="top"
        effect="dark"
      >
        <i
          class="fa fa-expand"
          style="vertical-align: middle; cursor: pointer"
          @click="switchShowHomeContent"
        ></i>
      <el-tooltip v-if="isShowHomeContentBtn" content="显示/隐藏" placement="top" effect="dark">
        <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="switchShowHomeContent"></i>
      </el-tooltip>
    </div>
    <!-- 切换矢量图按钮 -->
    <div class="image-switch-icon-btn">
      <el-tooltip
        content="图层、模型、视角"
        placement="top"
        effect="dark"
      >
        <div
          class="icon-box"
          @click.stop="showImgBtn = !showImgBtn"
        >
          <img
            src="/img/base_map.png"
            alt
          />
      <el-tooltip content="图层、模型、视角" placement="top" effect="dark">
        <div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
          <img src="/img/base_map.png" alt />
        </div>
      </el-tooltip>

      <div
        class="image-switch-img-btn"
        v-show="showImgBtn"
        @click.stop
      >
      <div class="image-switch-img-btn" v-show="showImgBtn" @click.stop>
        <div class="layer-change-box">
          <div class="title">
            底图
            <div
              class="close"
              @click.stop="showImgBtn = false"
            >
              <img
                src="/img/icon/close.png"
                alt
              />
            <div class="close" @click.stop="showImgBtn = false">
              <img src="/img/icon/close.png" alt />
            </div>
          </div>

          <div class="content">
            <div
              class="img"
              @click.stop="switchImg"
            >
            <div class="img" @click.stop="switchImg">
              <span :class="{ on: imgtype == 0 }">影像</span>
            </div>
            <div
              class="elec"
              @click.stop="switchElec"
            >
            <div class="elec" @click.stop="switchElec">
              <span :class="{ on: imgtype == 1 }">矢量</span>
            </div>
          </div>
@@ -149,26 +72,17 @@
        <div class="layer-change-box">
          <div class="title">模型</div>
          <div class="content">
            <div
              class="img light"
              @click.stop="highOrLightChange('light')"
            >
            <div class="img light" @click.stop="highOrLightChange('light')">
              <span :class="{ on: tilesetLayerType == 'light' }">轻量</span>
            </div>
            <div
              class="elec high"
              @click.stop="highOrLightChange('high')"
            >
            <div class="elec high" @click.stop="highOrLightChange('high')">
              <span :class="{ on: tilesetLayerType == 'high' }">高精</span>
            </div>
          </div>
        </div>
        <div class="angle-btn">
          是否锁定视角：
          <el-checkbox
            v-model="angleCheck"
            @change="angleChange"
          ></el-checkbox>
          <el-checkbox v-model="angleCheck" @change="angleChange"></el-checkbox>
        </div>
      </div>
    </div>
@@ -202,19 +116,19 @@
</template>

<script>
let tile3DUrl = "";
let tile3DUrl = ""

if (process.env.NODE_ENV == "development") {
  // 开发
  tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_TILEURL;
  tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_TILEURL
} else {
  // 部署
  tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_TILEURL;
  tile3DUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_TILEURL
}

let projectTerrain = null;
let projectTerrain = null

var siteEntitylayers = null;
var siteEntitylayers = null

let layersObjcect = {
  housingEstateLayer: null,
@@ -222,18 +136,18 @@
  handMachineLayer: null,
  monitoringLayer: null,
  panoramaLayer: null,
};
let polygonObj = {};
}
let polygonObj = {}

let tilesetLayer = null;
let tilesetLayer = null

let baseLayers = [];
let baseLayers = []

let tilesetObject = {
  sdTilesetLayer: null,
};
}

let curPolygon = null;
let curPolygon = null

const ysLabels = [
  "EPSG:4490_test:0",
@@ -259,23 +173,23 @@
  "EPSG:4490_test:20",
  "EPSG:4490_test:21",
  "EPSG:4490_test:22",
];
]

import mapPopup from "./components/mapPopup.vue";
import architecturePopup from "./components/architecturePopup.vue";
import activityPolicePopup from "./components/activityPolicePopup.vue";
import multipMapPopup from "./components/multipMapPopup.vue";
import videoListPopup from "./components/videoListPopup.vue";
import videoRowClickPopup from "./components/videoRowClickPopup.vue";
import mapSearchPopup from "./components/mapSearchPopup.vue";
import houseDeepDataPopup from "./components/houseDeepDataPopup.vue";
import hotelPopup from "./components/hotelPopup.vue";
import businessDataPopup from "./components/businessDataPopup.vue";
import dialogDetailPopup from "./components/dialogDetailPopup.vue";
import yToolTip from "./components/yToolTip.vue";
import createTools from "@/utils/tools/index";
import { mapGetters } from "vuex";
import { getLineSpeed } from "@/utils/turfPolygon";
import mapPopup from "./components/mapPopup.vue"
import architecturePopup from "./components/architecturePopup.vue"
import activityPolicePopup from "./components/activityPolicePopup.vue"
import multipMapPopup from "./components/multipMapPopup.vue"
import videoListPopup from "./components/videoListPopup.vue"
import videoRowClickPopup from "./components/videoRowClickPopup.vue"
import mapSearchPopup from "./components/mapSearchPopup.vue"
import houseDeepDataPopup from "./components/houseDeepDataPopup.vue"
import hotelPopup from "./components/hotelPopup.vue"
import businessDataPopup from "./components/businessDataPopup.vue"
import dialogDetailPopup from "./components/dialogDetailPopup.vue"
import yToolTip from "./components/yToolTip.vue"
import createTools from "@/utils/tools/index"
import { mapGetters } from "vuex"
import { getLineSpeed } from "@/utils/turfPolygon"

export default {
  name: "mapBox",
@@ -295,7 +209,7 @@
    videoRowClickPopup,
  },

  data() {
  data () {
    return {
      fullscreen: false,
      isFullscreen: false,
@@ -312,21 +226,21 @@
      tilesetLayerType: "",
      angleCheck: true,
      compassBtnTranslate: "rotate(0deg)",
    };
    }
  },

  computed: {
    ...mapGetters(["isShowHomeContentBtn"]),
  },

  mounted() {
  mounted () {
    if (global.viewer != null) {
      global.viewer = null;
      global.viewer = null
    }
    const that = this;
    const that = this

    // 初始化地图
    function initViewer() {
    function initViewer () {
      // new Viewer(new 地图)
      global.viewer = new global.DC.Viewer("viewer-container", {
        contextOptions: {
@@ -336,19 +250,19 @@
            preserveDrawingBuffer: true,
          },
        },
      });
      })

      global.viewer.scene.postRender.addEventListener(function () {
        var heading = global.viewer.scene.camera.heading;
        var x = -global.DC.Namespace.Cesium.Math.toDegrees(heading);
        that.compassBtnTranslate = "rotate(" + x + "deg)";
      });
        var heading = global.viewer.scene.camera.heading
        var x = -global.DC.Namespace.Cesium.Math.toDegrees(heading)
        that.compassBtnTranslate = "rotate(" + x + "deg)"
      })

      const curTools = createTools();
      const curTools = createTools()

      Object.keys(curTools).forEach((key) => {
        curTools[key].install(global.viewer);
      });
        curTools[key].install(global.viewer)
      })

      // let curTilesetLayer = new global.DC.TilesetLayer('curTilesetLayer')
      // global.viewer.addLayer(curTilesetLayer)
@@ -359,41 +273,41 @@
      // curTileset.setHeight(0)
      // curTilesetLayer.addOverlay(curTileset)

      global.viewer.setPitchRange(-90, -45);
      global.viewer.setPitchRange(-90, -45)

      global.viewer.scene.globe.depthTestAgainstTerrain = false;
      global.viewer.scene.globe.depthTestAgainstTerrain = false

      // 去除logo
      let primitiveArr = global.viewer.scene.primitives._primitives;
      global.viewer.scene.primitives.remove(primitiveArr[0]);
      let primitiveArr = global.viewer.scene.primitives._primitives
      global.viewer.scene.primitives.remove(primitiveArr[0])

      // 已声明的图层添加到地图上
      siteEntitylayers = new global.DC.VectorLayer("siteEntitylayers");
      global.viewer.addLayer(siteEntitylayers);
      siteEntitylayers = new global.DC.VectorLayer("siteEntitylayers")
      global.viewer.addLayer(siteEntitylayers)

      // 图层加入地图
      layersObjcect.housingEstateLayer = new global.DC.VectorLayer(
        "housingEstateLayer"
      );
      global.viewer.addLayer(layersObjcect.housingEstateLayer);
      )
      global.viewer.addLayer(layersObjcect.housingEstateLayer)
      layersObjcect.patrolWagonLayer = new global.DC.VectorLayer(
        "patrolWagonLayer"
      );
      global.viewer.addLayer(layersObjcect.patrolWagonLayer);
      )
      global.viewer.addLayer(layersObjcect.patrolWagonLayer)
      layersObjcect.handMachineLayer = new global.DC.VectorLayer(
        "handMachineLayer"
      );
      global.viewer.addLayer(layersObjcect.handMachineLayer);
      )
      global.viewer.addLayer(layersObjcect.handMachineLayer)
      layersObjcect.monitoringLayer = new global.DC.VectorLayer(
        "monitoringLayer"
      );
      global.viewer.addLayer(layersObjcect.monitoringLayer);
      layersObjcect.panoramaLayer = new global.DC.VectorLayer("panoramaLayer");
      global.viewer.addLayer(layersObjcect.panoramaLayer);
      )
      global.viewer.addLayer(layersObjcect.monitoringLayer)
      layersObjcect.panoramaLayer = new global.DC.VectorLayer("panoramaLayer")
      global.viewer.addLayer(layersObjcect.panoramaLayer)

      // 模型图层添加
      tilesetLayer = new global.DC.TilesetLayer("tilesetLayer");
      global.viewer.addLayer(tilesetLayer);
      tilesetLayer = new global.DC.TilesetLayer("tilesetLayer")
      global.viewer.addLayer(tilesetLayer)

      // 加载围栏
      // let layer = new global.DC.VectorLayer('layer')
@@ -420,7 +334,7 @@
      ) {
        global.viewer.setOptions({
          resolutionScale: window.devicePixelRatio,
        });
        })
      }

      // let terrain = global.DC.TerrainFactory.createUrlTerrain({
@@ -429,7 +343,8 @@
      // global.viewer.addTerrain(terrain)

      // 内网
      that.switchImg();
      that.switchImg()
      that.highOrLightChange('light')

      // 地形数据添加
      // that.addTerrain()
@@ -461,7 +376,7 @@
          pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
      });
      })

      let positions = [
        [117.951478782, 28.447896798, 0],
@@ -474,16 +389,16 @@
        [117.951834021, 28.447588427, 0],
        [117.951896863, 28.447789523, 0],
        [117.951478782, 28.447896798, 0],
      ];
      ]
      let MIN_F_H = positions.map((item) => {
        item[2] = 70;
        return item;
      });
        item[2] = 70
        return item
      })

      let MAN_F_H = positions.map((item) => {
        item[2] = 80;
        return item;
      });
        item[2] = 80
        return item
      })

      // 原生Cesium加载多边体
      // let floorPositions = positions.reduce((prev, curr, index, arr) => {
@@ -529,11 +444,11 @@

      // global.viewer.flyTo(sqTileset)

      global.viewer.use(new global.DC.Measure());
      global.viewer.use(new global.DC.Measure())

      // global.viewer.locationBar.enable = true
      // 缩放
      global.viewer.zoomController.enable = true;
      global.viewer.zoomController.enable = true
      // 比例尺
      // global.viewer.distanceLegend.enable = true

@@ -544,30 +459,30 @@
      // })
    }

    global.DC.ready(initViewer);
    global.DC.ready(initViewer)

    // global.viewer.scene.morphTo2D(1)

    // 清除控制台
    console.clear();
    console.clear()

    function isEleFullScreen() {
    function isEleFullScreen () {
      const fullScreenEle =
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
        document.webkitFullscreenElement
      if (fullScreenEle === null) {
        that.isFullscreen = false;
        return false;
        that.isFullscreen = false
        return false
      } else {
        return true;
        return true
      }
    }

    window.onresize = function () {
      console.log(isEleFullScreen());
    };
      console.log(isEleFullScreen())
    }

    // 注册事件

@@ -578,32 +493,32 @@
    // })

    this.$EventBus.$on("mapAddLayer", (params) => {
      that.mapAddLayer(params.layerName, params.type);
    });
      that.mapAddLayer(params.layerName, params.type)
    })

    this.$EventBus.$on("mapRemoveLayer", (params) => {
      that.mapRemoveLayer(params.layerName, params.type);
    });
      that.mapRemoveLayer(params.layerName, params.type)
    })

    this.$EventBus.$on("mapRemoveSiteLayer", (params) => {
      that.mapRemoveSiteLayer(params.layerName, params.siteId);
    });
      that.mapRemoveSiteLayer(params.layerName, params.siteId)
    })

    this.$EventBus.$on("mapRemovePolygonLayer", (params) => {
      that.mapRemovePolygonLayer(
        params.layerName,
        params.polygonName,
        params.type
      );
    });
      )
    })

    this.$EventBus.$on("mapRemovePolygon", (params) => {
      that.mapRemovePolygon(params.layerName, params.overlay, params.type);
    });
      that.mapRemovePolygon(params.layerName, params.overlay, params.type)
    })

    this.$EventBus.$on("mapClearLayer", (params) => {
      that.mapClearLayer(params.layerName, params.type);
    });
      that.mapClearLayer(params.layerName, params.type)
    })

    this.$EventBus.$on("layerPointAdd", (params) => {
      // eslint-disable-next-line no-unused-vars
@@ -617,8 +532,8 @@
        params.mouseOverIncident,
        params.mouseOutIncident,
        params.pointMouseMove
      );
    });
      )
    })

    this.$EventBus.$on("layerPolygonAdd", (params) => {
      if ("polygonName" in params) {
@@ -633,7 +548,7 @@
          params.mouseOverIncident,
          params.mouseOutIncident,
          params.setStyle
        );
        )
      } else {
        that.layerPolygonAdd(
          params.layerName,
@@ -646,9 +561,9 @@
          params.mouseOverIncident,
          params.mouseOutIncident,
          params.setStyle
        );
        )
      }
    });
    })

    this.$EventBus.$on("layerPolygonArrowsAdd", (params) => {
      that.layerPolygonArrowsAdd(
@@ -661,8 +576,8 @@
        params.mouseOverIncident,
        params.mouseOutIncident,
        params.setStyle
      );
    });
      )
    })

    this.$EventBus.$on("layerPolylineAdd", (params) => {
      that.layerPolylineAdd(
@@ -672,24 +587,24 @@
        params.width,
        params.params,
        params.incident
      );
    });
      )
    })

    this.$EventBus.$on("layerWallAdd", (params) => {
      that.layerWallAdd(params.layerName, params.positions);
    });
      that.layerWallAdd(params.layerName, params.positions)
    })

    this.$EventBus.$on("rowLayerWallAdd", (params) => {
      that.rowLayerWallAdd(params.layerName, params.positions);
    });
      that.rowLayerWallAdd(params.layerName, params.positions)
    })

    this.$EventBus.$on("getOverLayerID", (params) => {
      that.getOverLayerID(params.layerName, params.ids, params.cb);
    });
      that.getOverLayerID(params.layerName, params.ids, params.cb)
    })

    this.$EventBus.$on("layerShow", (params) => {
      that.layerShow(params.layerName, params.flag);
    });
      that.layerShow(params.layerName, params.flag)
    })

    this.$EventBus.$on("toPosition", (params) => {
      that.toPosition(
@@ -700,64 +615,64 @@
        params.sitePitch,
        params.siteRoll,
        params.time
      );
    });
      )
    })

    this.$EventBus.$on("highOrLightChange", (type, status) => {
      // eslint-disable-next-line no-unused-vars
      that.highOrLightChange(type, status);
    });
      that.highOrLightChange(type, status)
    })

    this.$EventBus.$on("addMxTileset", (params) => {
      // eslint-disable-next-line no-unused-vars
      that.addMxTileset(params.titlesetName, params.titlesetUrl, params);
    });
      that.addMxTileset(params.titlesetName, params.titlesetUrl, params)
    })

    this.$EventBus.$on("closeMxTileset", () => {
      // eslint-disable-next-line no-unused-vars
      that.closeMxTileset();
    });
      that.closeMxTileset()
    })

    this.$EventBus.$on("tilesetLayerFlag", (type, cb) => {
      // eslint-disable-next-line no-unused-vars
      that.tilesetLayerFlag(type, cb);
    });
      that.tilesetLayerFlag(type, cb)
    })

    this.$EventBus.$on("removeMxTileset", (params) => {
      // eslint-disable-next-line no-unused-vars
      that.removeMxTileset(params.titlesetName);
    });
      that.removeMxTileset(params.titlesetName)
    })

    this.$EventBus.$on("flytoLayer", (params) => {
      that.flytoLayer(params.polygonName, params.duration);
    });
      that.flytoLayer(params.polygonName, params.duration)
    })

    this.$EventBus.$on("showThreeDimensions", (params) => {
      that.showThreeDimensions(
        params.positions,
        params.minHeight,
        params.maxHeight
      );
    });
      )
    })

    this.$EventBus.$on("switchThreeDimensions", (params) => {
      that.switchThreeDimensions(params);
    });
      that.switchThreeDimensions(params)
    })

    this.$EventBus.$on("clearHouse3D", () => {
      that.clearHouse3D();
    });
      that.clearHouse3D()
    })

    this.$EventBus.$on("registerMxClick", (event) => {
      that.registerMxClick(event);
    });
      that.registerMxClick(event)
    })

    this.$EventBus.$on("unbindMxClick", (event) => {
      that.unbindMxClick(event);
    });
      that.unbindMxClick(event)
    })

    // 重写定位方法
    const homeCenter = [117.99311892441567, 28.46938164123123];
    const homeCenter = [117.99311892441567, 28.46938164123123]
    this.$nextTick(() => {
      // console.log('dc-zoom-controller', document.querySelector('.dc-zoom-controller'))
      // if (document.querySelector('.dc-zoom-controller') == null) return
@@ -772,37 +687,37 @@
      //         })
      //     }
      // document.querySelector('.dc-zoom-controller .refresh svg title').innerHTML = '初始化位置'
    });
    })
  },

  methods: {
    // 获取当前地图中心的经纬度
    getSceneCenterPosition(viewer) {
    getSceneCenterPosition (viewer) {
      let centerResult = viewer.camera.pickEllipsoid(
        new global.DC.Namespace.Cesium.Cartesian2(
          viewer.canvas.clientWidth / 2,
          viewer.canvas.clientHeight / 2
        )
      );
      )
      let curPosition =
        global.DC.Namespace.Cesium.Ellipsoid.WGS84.cartesianToCartographic(
          centerResult
        );
      let curLongitude = (curPosition.longitude * 180) / Math.PI;
      let curLatitude = (curPosition.latitude * 180) / Math.PI;
        )
      let curLongitude = (curPosition.longitude * 180) / Math.PI
      let curLatitude = (curPosition.latitude * 180) / Math.PI
      return {
        lon: curLongitude,
        lat: curLatitude,
      };
      }
    },
    compassBtnClick() {
      const degrees = global.viewer.camera.heading * (180 / Math.PI);
    compassBtnClick () {
      const degrees = global.viewer.camera.heading * (180 / Math.PI)
      if (degrees == 360) {
        return;
        return
      }
      const position = global.DC.Transform.transformCartesianToWGS84(
        global.viewer.camera.position
      );
      )

      global.viewer.camera.flyTo({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
@@ -823,17 +738,17 @@
          roll: global.viewer.camera.roll,
        },
        duration: 3,
      });
      })
    },

    overLookClick() {
      const degrees = global.viewer.camera.pitch * (180 / Math.PI);
    overLookClick () {
      const degrees = global.viewer.camera.pitch * (180 / Math.PI)

      if (degrees == -90) {
        return;
        return
      }

      const position = this.getSceneCenterPosition(global.viewer);
      const position = this.getSceneCenterPosition(global.viewer)

      global.viewer.camera.flyTo({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
@@ -851,10 +766,10 @@
          roll: global.viewer.camera.roll,
        },
        duration: 3,
      });
      })
    },

    angleChange(e) {
    angleChange (e) {
      if (e) {
        global.viewer.camera.flyTo({
          destination: global.viewer.camera.position,
@@ -864,20 +779,20 @@
            roll: global.viewer.camera.roll,
          },
          duration: 0.0,
        });
        })

        global.viewer.setPitchRange(-90, -45);
        global.viewer.setPitchRange(-90, -45)
      } else {
        global.viewer.setPitchRange(-90, 0);
        global.viewer.setPitchRange(-90, 0)
      }
    },

    closeMxTileset() {
    closeMxTileset () {
      window.TILESET_LABEL.forEach((item) => {
        this.removeMxTileset(`sdTilesetLayer${item.name}`);
      });
        this.removeMxTileset(`sdTilesetLayer${item.name}`)
      })

      this.tilesetLayerType = "";
      this.tilesetLayerType = ""
    },

    /**
@@ -885,67 +800,67 @@
     * @param {*} type
     * @return {*}
     */
    highOrLightChange(type, status = "") {
    highOrLightChange (type, status = "") {
      this.$EventBus.$emit("showHouseingTileset", {
        type: "remove",
      });
      })

      window.TILESET_LABEL.forEach((item) => {
        this.removeMxTileset(`sdTilesetLayer${item.name}`);
      });
        this.removeMxTileset(`sdTilesetLayer${item.name}`)
      })

      // this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`)
      // this.addMxTileset('sdTilesetLayer02', `https://tuan-gis.sit.fengtu.com.cn/361102/wanda/tileset.json`)
      // this.addMxTileset('sdTilesetLayer', `/mx/01/tileset.json`)

      if (this.tilesetLayerType == type && status == "") {
        this.tilesetLayerType = "";
        this.tilesetLayerType = ""
      } else {
        this.tilesetLayerType = type;
        this.tilesetLayerType = type

        type == "light"
          ? window.TILESET_LABEL.forEach((item) => {
              this.addMxTileset(
                `sdTilesetLayer${item.name}`,
                `${tile3DUrl}/sf3d/361102/model/all/${item.name}/tileset.json`,
                item
              );
            })
            this.addMxTileset(
              `sdTilesetLayer${item.name}`,
              `${tile3DUrl}/sf3d/361102/model/all/${item.name}/tileset.json`,
              item
            )
          })
          : window.TILESET_LABEL.forEach((item) => {
              this.addMxTileset(
                `sdTilesetLayer${item.name}`,
                `${tile3DUrl}/sf3d/361102/model/all1/${item.name}/tileset.json`,
                item
              );
            });
            this.addMxTileset(
              `sdTilesetLayer${item.name}`,
              `${tile3DUrl}/sf3d/361102/model/all1/${item.name}/tileset.json`,
              item
            )
          })

        if (this.$route.path == "/layout/house") {
          this.$EventBus.$emit("showHouseingTileset", {
            type: "add",
          });
          })
        }
      }
    },

    // 模型的点击事件
    tilesetClick(e) {
    tilesetClick (e) {
      if (this.$route.path != "/layout/house") {
        this.$router.push({
          path: "/layout/house",
          query: { searchName: "xxx小区" },
        });
        })
      }
    },

    switchImg() {
    switchImg () {
      // 天地图 影像
      this.imgtype = 0;
      this.imgtype = 0
      baseLayers.length &&
        baseLayers.forEach((item) => {
          item && global.viewer.imageryLayers.remove(item);
        });
          item && global.viewer.imageryLayers.remove(item)
        })

      baseLayers = [];
      baseLayers = []

      // const layer = global.viewer.imageryLayers.addImageryProvider(
      //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
@@ -964,21 +879,21 @@
        new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
          url: `/qp/{AZ}/{y}/{x}.png`,
          customTags: {
            AZ(imageryProvider, x, y, level) {
              return "Z" + level;
            AZ (imageryProvider, x, y, level) {
              return "Z" + level
            },
          },
          minimumLevel: 0,
          maximumLevel: 25,
        })
      );
      )

      qp.contrast = 0.8;
      qp.contrast = 0.8

      baseLayers.push(qp);
      baseLayers.push(qp)

      window.YX_LAYER_CONFIG.forEach((item) => {
        let rectangle = {};
        let rectangle = {}

        if (
          item.west != 0 &&
@@ -993,29 +908,29 @@
              Number(item.east),
              Number(item.north)
            ),
          };
          }
        } else {
          return;
          return
        }

        const layer = global.viewer.imageryLayers.addImageryProvider(
          new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/${item.name}/{AZ}/{y}/{x}.png`,
            customTags: {
              AZ(imageryProvider, x, y, level) {
                return "Z" + level;
              AZ (imageryProvider, x, y, level) {
                return "Z" + level
              },
            },
            minimumLevel: 0,
            maximumLevel: 25,
            ...rectangle,
          })
        );
        )

        layer.contrast = 0.8;
        layer.contrast = 0.8

        baseLayers.push(layer);
      });
        baseLayers.push(layer)
      })

      if (window.ADD_NEW_YX_LAYER_CONFIG.length > 0) {
        window.ADD_NEW_YX_LAYER_CONFIG.forEach((item) => {
@@ -1023,19 +938,19 @@
            new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
              url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_YX}/addlayer/${item.name}/{AZ}/{y}/{x}.png`,
              customTags: {
                AZ(imageryProvider, x, y, level) {
                  return "Z" + level;
                AZ (imageryProvider, x, y, level) {
                  return "Z" + level
                },
              },
              minimumLevel: 0,
              maximumLevel: 25,
            })
          );
          )

          layer.contrast = 0.8;
          layer.contrast = 0.8

          baseLayers.push(layer);
        });
          baseLayers.push(layer)
        })
      }

      // baseLayers = global.viewer.imageryLayers.addImageryProvider(
@@ -1051,16 +966,16 @@
      // )
    },

    switchElec() {
    switchElec () {
      // 天地图 矢量
      this.imgtype = 1;
      this.imgtype = 1

      baseLayers.length &&
        baseLayers.forEach((item) => {
          item && global.viewer.imageryLayers.remove(item);
        });
          item && global.viewer.imageryLayers.remove(item)
        })

      baseLayers = [];
      baseLayers = []

      baseLayers.push(
        global.viewer.imageryLayers.addImageryProvider(
@@ -1075,87 +990,87 @@
              new global.DC.Namespace.Cesium.GeographicTilingScheme(),
          })
        )
      );
      )

      baseLayers.contrast = 1.0;
      baseLayers.contrast = 1.0
    },

    addTerrain() {
    addTerrain () {
      projectTerrain = global.DC.TerrainFactory.createUrlTerrain({
        // url: `http://data.marsgis.cn/terrain`
        url: `${window.BASE_URL_CONFIG.VUE_APP_MAP_DX}`,
      });
      })

      global.viewer.addTerrain(projectTerrain);
      global.viewer.addTerrain(projectTerrain)
    },

    removeTerrain() {
      global.viewer.removeTerrain(projectTerrain);
    removeTerrain () {
      global.viewer.removeTerrain(projectTerrain)
    },

    /**
     * @description: 全屏控制
     * @return {*} 无返回值
     */
    fullscreenchange() {
    fullscreenchange () {
      // 最新写法
      const isFullScreen = document.fullscreenElement;
      const isFullScreen = document.fullscreenElement
      if (isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
          document.webkitCancelFullScreen()
        }
        this.isFullscreen = false;
        this.isFullscreen = false
      } else {
        var fullscreen = document.body; // 需要全屏的元素
        var fullscreen = document.body // 需要全屏的元素
        if (fullscreen.requestFullscreen) {
          fullscreen.requestFullscreen();
          fullscreen.requestFullscreen()
        } else if (fullscreen.mozRequestFullScreen) {
          fullscreen.mozRequestFullScreen();
          fullscreen.mozRequestFullScreen()
        } else if (fullscreen.webkitRequestFullscreen) {
          fullscreen.webkitRequestFullscreen();
          fullscreen.webkitRequestFullscreen()
        } else if (fullscreen.msRequestFullscreen) {
          fullscreen.msRequestFullscreen();
          fullscreen.msRequestFullscreen()
        }
        this.isFullscreen = true;
        this.isFullscreen = true
      }
    },

    // 切换首页显示隐藏
    switchShowHomeContent() {
    switchShowHomeContent () {
      this.$store.commit(
        "SET_ISSHOWHOMECONTENT",
        !this.$store.state.popupParams.isShowHomeContent
      );
      )
      if (this.$store.state.popupParams.isShowHomeContent) {
        // if (document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
        document
          .querySelector(".dc-container .dc-zoom-controller")
          .classList.add("homebottom");
        document.querySelector(".screen-full-btn").classList.add("homebottom");
        document.querySelector(".over-look-btn").classList.add("homebottom");
        document.querySelector(".compass-btn").classList.add("homebottom");
          .classList.add("homebottom")
        document.querySelector(".screen-full-btn").classList.add("homebottom")
        document.querySelector(".over-look-btn").classList.add("homebottom")
        document.querySelector(".compass-btn").classList.add("homebottom")
        document
          .querySelector(".image-switch-icon-btn")
          .classList.add("iconbottom");
          .classList.add("iconbottom")
      } else {
        // if (!document.querySelector('.dc-container .dc-zoom-controller').classList.contains('homebottom')) return
        document
          .querySelector(".dc-container .dc-zoom-controller")
          .classList.remove("homebottom");
          .classList.remove("homebottom")
        document
          .querySelector(".screen-full-btn")
          .classList.remove("homebottom");
        document.querySelector(".over-look-btn").classList.remove("homebottom");
        document.querySelector(".compass-btn").classList.remove("homebottom");
          .classList.remove("homebottom")
        document.querySelector(".over-look-btn").classList.remove("homebottom")
        document.querySelector(".compass-btn").classList.remove("homebottom")
        document
          .querySelector(".image-switch-icon-btn")
          .classList.remove("iconbottom");
          .classList.remove("iconbottom")
      }
    },

@@ -1164,14 +1079,14 @@
     * @param {*} item 图标
     * @param {*} url 图标地址
     */
    addSiteEntity(item, url) {
    addSiteEntity (item, url) {
      const billboard = new global.DC.Billboard(
        new global.DC.Position(Number(item.lng), Number(item.lat)),
        url
      );
      billboard.size = [20, 28];
      billboard.attrParams = item;
      siteEntitylayers.addOverlay(billboard);
      )
      billboard.size = [20, 28]
      billboard.attrParams = item
      siteEntitylayers.addOverlay(billboard)
    },

    /**
@@ -1179,19 +1094,19 @@
     * @param {*} layerName 图层名称
     * @param {*} type 图层类型
     */
    mapAddLayer(layerName, type, ClusterLayerType) {
    mapAddLayer (layerName, type, ClusterLayerType) {
      if (!layersObjcect[layerName]) {
        this.mapRemoveLayer(layerName, type);
        layersObjcect[layerName] = null;
        this.mapRemoveLayer(layerName, type)
        layersObjcect[layerName] = null
      }

      if (type == "VectorLayer") {
        layersObjcect[layerName] = new global.DC.VectorLayer(layerName);
        layersObjcect[layerName] = new global.DC.VectorLayer(layerName)
      } else if (type == "ClusterLayer") {
        layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, {
          pixelRange: 40,
          style: ClusterLayerType,
        });
        })
      } else if (type == "HeatLayer") {
        layersObjcect[layerName] = new global.DC.HeatLayer(layerName, {
          gradient: {
@@ -1203,10 +1118,10 @@
          radius: 100, // 半径
          useGround: false, //是否使用贴地模式
          classificationType: 2, //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者。贴地模式下生效
        });
        })
      }

      global.viewer.addLayer(layersObjcect[layerName]);
      global.viewer.addLayer(layersObjcect[layerName])
    },

    /**
@@ -1214,15 +1129,15 @@
     * @param {*} layerName 图层名称
     * @param {*} type 图层类型
     */
    mapRemoveLayer(layerName, type) {
    mapRemoveLayer (layerName, type) {
      if (
        type == "VectorLayer" ||
        type == "ClusterLayer" ||
        type == "HeatLayer"
      ) {
        if (layersObjcect[layerName] && layersObjcect[layerName] != null) {
          layersObjcect[layerName].remove();
          layersObjcect[layerName] = null;
          layersObjcect[layerName].remove()
          layersObjcect[layerName] = null
        }
      }
    },
@@ -1233,7 +1148,7 @@
     * @param {*} polygonName 面名称
     * @param {*} type 图层类型
     */
    mapRemovePolygonLayer(layerName, polygonName, type) {
    mapRemovePolygonLayer (layerName, polygonName, type) {
      if (
        type == "VectorLayer" ||
        type == "ClusterLayer" ||
@@ -1245,15 +1160,15 @@
          polygonObj[polygonName] &&
          polygonObj[polygonName] != null
        ) {
          layersObjcect[layerName].removeOverlay(polygonObj[polygonName]);
          layersObjcect[layerName].removeOverlay(polygonObj[polygonName])
        }
      }
    },

    mapRemovePolygon(layerName, overlay, type) {
    mapRemovePolygon (layerName, overlay, type) {
      if (type == "VectorLayer") {
        if (layersObjcect[layerName] && layersObjcect[layerName] != null) {
          layersObjcect[layerName].removeOverlay(overlay);
          layersObjcect[layerName].removeOverlay(overlay)
        }
      }
    },
@@ -1263,14 +1178,14 @@
     * @param {*} layerName 图层名称
     * @param {*} type 图层类型
     */
    mapClearLayer(layerName, type) {
    mapClearLayer (layerName, type) {
      if (
        type == "VectorLayer" ||
        type == "ClusterLayer" ||
        type == "HeatLayer"
      ) {
        if (layersObjcect[layerName] && layersObjcect[layerName] != null)
          layersObjcect[layerName].clear();
          layersObjcect[layerName].clear()
      }
    },

@@ -1282,7 +1197,7 @@
     * @param {*} incident 添加的点位事件
     */

    layerPointAdd(
    layerPointAdd (
      layerName,
      type,
      layerType = "VectorLayer",
@@ -1291,45 +1206,45 @@
        near: 0, //最近距离
        far: Number.MAX_VALUE, //最远距离
      },
      incident = (e) => {},
      mouseOverIncident = (e) => {},
      mouseOutIncident = (e) => {},
      pointMouseMove = (e) => {}
      incident = (e) => { },
      mouseOverIncident = (e) => { },
      mouseOutIncident = (e) => { },
      pointMouseMove = (e) => { }
    ) {
      if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
        this.mapAddLayer(layerName, layerType, params.ClusterLayerType);
        this.mapAddLayer(layerName, layerType, params.ClusterLayerType)
      }

      let pointElement;
      let labelElement;
      let pointElement
      let labelElement

      if (type == "billboard") {
        // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
        pointElement = new global.DC.Billboard(
          new global.DC.Position(Number(params.lng), Number(params.lat), 0),
          params.url
        );
        pointElement.setStyle(params.setStyle);
        pointElement.size = params.size || [32, 32];
        pointElement.style = "clustering";
        pointElement.attrParams = params;
        layersObjcect[layerName].addOverlay(pointElement);
        pointElement.on(global.DC.MouseEventType.CLICK, incident);
        pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident);
        pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident);
        pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove);
        )
        pointElement.setStyle(params.setStyle)
        pointElement.size = params.size || [32, 32]
        pointElement.style = "clustering"
        pointElement.attrParams = params
        layersObjcect[layerName].addOverlay(pointElement)
        pointElement.on(global.DC.MouseEventType.CLICK, incident)
        pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
        pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
        pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
      } else if (type == "label") {
        // labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
        labelElement = new global.DC.Label(
          new global.DC.Position(Number(params.lng), Number(params.lat), 0),
          params.text
        );
        )
        let fontColor =
          "fontColor" in params ? params.fontColor : global.DC.Color.CRIMSON;
          "fontColor" in params ? params.fontColor : global.DC.Color.CRIMSON
        let style =
          "fontColor" in params
            ? global.DC.Namespace.Cesium.LabelStyle.FILL
            : global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE;
            : global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE
        labelElement.setStyle({
          style: style,
          fillColor: fontColor,
@@ -1338,45 +1253,45 @@
          font: "16px sans-serif",
          pixelOffset: { x: 0, y: -30 },
          distanceDisplayCondition: distanceDisplayCondition,
        });
        labelElement.attrParams = params;
        layersObjcect[layerName].addOverlay(labelElement);
        labelElement.on(global.DC.MouseEventType.CLICK, incident);
        })
        labelElement.attrParams = params
        layersObjcect[layerName].addOverlay(labelElement)
        labelElement.on(global.DC.MouseEventType.CLICK, incident)
      } else if (type == "billboardOrLabel") {
        let allSite = layersObjcect[layerName].getOverlays();
        let allSite = layersObjcect[layerName].getOverlays()

        let flag = allSite.filter((item) => item.attrParams.id == params.id);
        let flag = allSite.filter((item) => item.attrParams.id == params.id)

        if (flag == true) {
          return;
          return
        }

        // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
        pointElement = new global.DC.Billboard(
          new global.DC.Position(Number(params.lng), Number(params.lat), 0),
          params.url
        );
        pointElement.setStyle(params.setStyle);
        pointElement.size = params.size || [32, 32];
        pointElement.style = "clustering";
        pointElement.attrParams = params;
        layersObjcect[layerName].addOverlay(pointElement);
        pointElement.on(global.DC.MouseEventType.CLICK, incident);
        pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident);
        pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident);
        pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove);
        )
        pointElement.setStyle(params.setStyle)
        pointElement.size = params.size || [32, 32]
        pointElement.style = "clustering"
        pointElement.attrParams = params
        layersObjcect[layerName].addOverlay(pointElement)
        pointElement.on(global.DC.MouseEventType.CLICK, incident)
        pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
        pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
        pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)

        // labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.text)
        labelElement = new global.DC.Label(
          new global.DC.Position(Number(params.lng), Number(params.lat), 0),
          String(params.text)
        );
        )
        let fontColor =
          "fontColor" in params ? params.fontColor : global.DC.Color.CRIMSON;
          "fontColor" in params ? params.fontColor : global.DC.Color.CRIMSON
        let style =
          "fontColor" in params
            ? global.DC.Namespace.Cesium.LabelStyle.FILL
            : global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE;
            : global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE
        labelElement.setStyle({
          style: style,
          fillColor: fontColor,
@@ -1386,27 +1301,27 @@
          pixelOffset: { x: 0, y: -30 },
          distanceDisplayCondition: distanceDisplayCondition,
          ...params.setStyle,
        });
        labelElement.attrParams = params;
        layersObjcect[layerName].addOverlay(labelElement);
        labelElement.on(global.DC.MouseEventType.CLICK, incident);
        })
        labelElement.attrParams = params
        layersObjcect[layerName].addOverlay(labelElement)
        labelElement.on(global.DC.MouseEventType.CLICK, incident)
      } else if (type == "HeatPoint") {
        layersObjcect[layerName].setPositions(params.positions);
        layersObjcect[layerName].setPositions(params.positions)
      } else if (type == "newBillboard") {
        // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
        pointElement = new global.DC.Billboard(
          new global.DC.Position(Number(params.lng), Number(params.lat), 0),
          params.url
        );
        pointElement.setStyle(params.setStyle);
        pointElement.size = params.size || [32, 32];
        pointElement.style = "clustering";
        pointElement.attrParams = params;
        layersObjcect[layerName].addOverlay(pointElement);
        pointElement.on(global.DC.MouseEventType.CLICK, incident);
        pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident);
        pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident);
        pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove);
        )
        pointElement.setStyle(params.setStyle)
        pointElement.size = params.size || [32, 32]
        pointElement.style = "clustering"
        pointElement.attrParams = params
        layersObjcect[layerName].addOverlay(pointElement)
        pointElement.on(global.DC.MouseEventType.CLICK, incident)
        pointElement.on(global.DC.MouseEventType.MOUSE_OVER, mouseOverIncident)
        pointElement.on(global.DC.MouseEventType.MOUSE_OUT, mouseOutIncident)
        pointElement.on(global.DC.MouseEventType.MOUSE_MOVE, pointMouseMove)
      }
    },

@@ -1415,13 +1330,13 @@
     * @param {*} layerName 图层名称
     * @param {*} siteId 点ID
     */
    mapRemoveSiteLayer(layerName, siteId) {
    mapRemoveSiteLayer (layerName, siteId) {
      if (layersObjcect[layerName]) {
        let allSite = layersObjcect[layerName].getOverlays();
        let allSite = layersObjcect[layerName].getOverlays()

        allSite
          .filter((item) => item.attrParams.id == siteId)
          .forEach((item) => layersObjcect[layerName].removeOverlay(item));
          .forEach((item) => layersObjcect[layerName].removeOverlay(item))
      }
    },

@@ -1432,45 +1347,45 @@
     * @param {*} material 颜色
     * @param {*} distanceDisplayCondition 可见距离
     */
    layerPolygonAdd(
    layerPolygonAdd (
      layerName,
      positions,
      material,
      distanceDisplayCondition,
      polygonName,
      params,
      incident = (e) => {},
      mouseOverIncident = (e) => {},
      mouseOutIncident = (e) => {},
      incident = (e) => { },
      mouseOverIncident = (e) => { },
      mouseOutIncident = (e) => { },
      setStyle = {}
    ) {
      if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
        this.mapAddLayer(layerName, "VectorLayer");
        this.mapAddLayer(layerName, "VectorLayer")

        layersObjcect[layerName].allowDrillPicking = true;
        layersObjcect[layerName].allowDrillPicking = true
      }
      // let polygon = new global.DC.Polygon(positions)
      // let polygonObj = {}//要在全局定义
      polygonObj[polygonName] = new global.DC.Polygon(positions);
      polygonObj[polygonName] = new global.DC.Polygon(positions)
      // polygon.setStyle({
      polygonObj[polygonName].setStyle({
        material: material,
        distanceDisplayCondition: distanceDisplayCondition,
        perPositionHeight: true,
        ...setStyle,
      });
      })
      // layersObjcect[layerName].addOverlay(polygon)
      polygonObj[polygonName].attrParams = params;
      polygonObj[polygonName].on(global.DC.MouseEventType.CLICK, incident);
      polygonObj[polygonName].attrParams = params
      polygonObj[polygonName].on(global.DC.MouseEventType.CLICK, incident)
      polygonObj[polygonName].on(
        global.DC.MouseEventType.MOUSE_OVER,
        mouseOverIncident
      );
      )
      polygonObj[polygonName].on(
        global.DC.MouseEventType.MOUSE_OUT,
        mouseOutIncident
      );
      layersObjcect[layerName].addOverlay(polygonObj[polygonName]);
      )
      layersObjcect[layerName].addOverlay(polygonObj[polygonName])
    },

    /**
@@ -1480,39 +1395,39 @@
     * @param {*} material 颜色
     * @param {*} distanceDisplayCondition 可见距离
     */
    layerPolygonArrowsAdd(
    layerPolygonArrowsAdd (
      layerName,
      positions,
      material,
      polygonName = "",
      params,
      incident = (e) => {},
      mouseOverIncident = (e) => {},
      mouseOutIncident = (e) => {},
      incident = (e) => { },
      mouseOverIncident = (e) => { },
      mouseOutIncident = (e) => { },
      setStyle = {}
    ) {
      if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
        this.mapAddLayer(layerName, "VectorLayer");
        this.mapAddLayer(layerName, "VectorLayer")

        layersObjcect[layerName].allowDrillPicking = true;
        layersObjcect[layerName].allowDrillPicking = true
      }

      if (polygonName == "") {
        polygonName = layerName + params.id;
        polygonName = layerName + params.id
      }

      polygonObj[polygonName] = new global.DC.Polyline(positions);
      polygonObj[polygonName] = new global.DC.Polyline(positions)

      let positionData = positions
        .split(";")
        .map((item) => {
          return [Number(item.split(",")[0]), Number(item.split(",")[1])];
          return [Number(item.split(",")[0]), Number(item.split(",")[1])]
        })
        .filter((item) => {
          return !item.some((it) => it == 0);
        });
          return !item.some((it) => it == 0)
        })

      console.log(params.width, 15);
      console.log(params.width, 15)

      polygonObj[polygonName].setStyle({
        width: params.width,
@@ -1531,10 +1446,10 @@
        },
        clampToGround: false,
        ...setStyle,
      });
      })

      polygonObj[polygonName].attrParams = params;
      layersObjcect[layerName].addOverlay(polygonObj[polygonName]);
      polygonObj[polygonName].attrParams = params
      layersObjcect[layerName].addOverlay(polygonObj[polygonName])
    },

    /**
@@ -1544,54 +1459,54 @@
     * @param {*} material 颜色
     * @param {*} width 宽度
     */
    layerPolylineAdd(
    layerPolylineAdd (
      layerName,
      positions,
      material,
      width,
      params,
      incident = (e) => {}
      incident = (e) => { }
    ) {
      if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
        this.mapAddLayer(layerName, "VectorLayer");
        this.mapAddLayer(layerName, "VectorLayer")

        layersObjcect[layerName].allowDrillPicking = true;
        layersObjcect[layerName].allowDrillPicking = true
      }

      let polyline = new global.DC.Polyline(positions);
      let polyline = new global.DC.Polyline(positions)

      polyline.setStyle({
        width: width,
        material: material,
        clampToGround: false,
      });
      polyline.attrParams = params;
      polyline.on(global.DC.MouseEventType.CLICK, incident);
      })
      polyline.attrParams = params
      polyline.on(global.DC.MouseEventType.CLICK, incident)

      layersObjcect[layerName].addOverlay(polyline);
      layersObjcect[layerName].addOverlay(polyline)
    },

    layerWallAdd(layerName, positions) {
    layerWallAdd (layerName, positions) {
      if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
        this.mapAddLayer(layerName, "VectorLayer");
        this.mapAddLayer(layerName, "VectorLayer")
      }

      let wall = new global.DC.Wall(positions);
      let wall = new global.DC.Wall(positions)
      wall.setStyle({
        material: new global.DC.WallTrailMaterialProperty({
          color: global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 180),
          speed: 10,
        }),
      });
      layersObjcect[layerName].addOverlay(wall);
      })
      layersObjcect[layerName].addOverlay(wall)
    },

    rowLayerWallAdd(layerName, positions) {
    rowLayerWallAdd (layerName, positions) {
      if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
        this.mapAddLayer(layerName, "VectorLayer");
        this.mapAddLayer(layerName, "VectorLayer")
      }

      let wall = new global.DC.Wall(positions);
      let wall = new global.DC.Wall(positions)
      wall.setStyle({
        material: new global.DC.WallImageTrailMaterialProperty({
          image: "/images/jjx.png",
@@ -1599,15 +1514,15 @@
          repeat: { x: 20, y: 1 },
          speed: 10,
        }),
      });
      layersObjcect[layerName].addOverlay(wall);
      })
      layersObjcect[layerName].addOverlay(wall)
    },

    /**
     * @description: 通过ID获取图层
     * @return {*}
     */
    getOverLayerID(layerName, ids = [], cb) {
    getOverLayerID (layerName, ids = [], cb) {
      const data = ids.reduce((pre, cur) => {
        if (
          layersObjcect[layerName].getOverlay(cur.overlayId) &&
@@ -1617,17 +1532,17 @@
        ) {
          pre.push(
            layersObjcect[layerName].getOverlay(cur.overlayId).attrParams
          );
          )
        } else {
          layersObjcect[layerName].eachOverlay((item) => {
            if (item.overlayId == cur.overlayId) pre.push(item.attrParams);
          });
            if (item.overlayId == cur.overlayId) pre.push(item.attrParams)
          })
        }

        return pre;
      }, []);
        return pre
      }, [])

      cb(data);
      cb(data)
    },

    /**
@@ -1635,8 +1550,8 @@
     * @param {*} layerName 图层名称
     * @param {*} flag 显示隐藏
     */
    layerShow(layerName, flag) {
      if (layersObjcect[layerName]) layersObjcect[layerName].show = flag;
    layerShow (layerName, flag) {
      if (layersObjcect[layerName]) layersObjcect[layerName].show = flag
    },

    /**
@@ -1649,7 +1564,7 @@
     * @param {*} siteRoll 翻转角度，默认0
     * @param {*} time 飞行时间，默认3秒
     */
    toPosition(
    toPosition (
      siteJd,
      siteWd,
      siteGd = 2000,
@@ -1667,9 +1582,9 @@
          Number(sitePitch),
          Number(siteRoll)
        ),
        function () {},
        function () { },
        time
      );
      )
    },
    // sdTilesetLayer

@@ -1678,8 +1593,8 @@
     * @param {*} polygonName 范围名称
     * @param {*} duration 时间
     */
    flytoLayer(polygonName, duration = 3) {
      global.viewer.flyTo(polygonObj[polygonName], duration);
    flytoLayer (polygonName, duration = 3) {
      global.viewer.flyTo(polygonObj[polygonName], duration)
    },

    /**
@@ -1688,8 +1603,8 @@
     * @param {*} titlesetUrl 模型地址
     * @param {*} incident 模型点击事件
     */
    addMxTileset(titlesetName, titlesetUrl, conf) {
      if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null;
    addMxTileset (titlesetName, titlesetUrl, conf) {
      if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null

      tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, {
        luminanceAtZenith: 0.4,
@@ -1698,40 +1613,40 @@
        // skipLevelOfDetail: false,
        maximumScreenSpaceError: conf.maximumScreenSpaceError || 16,
        shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED,
      });
      })

      // 地形数据添加
      tilesetObject[titlesetName].setHeight(-73);
      tilesetObject[titlesetName].setHeight(-73)

      tilesetLayer.addOverlay(tilesetObject[titlesetName]);
      tilesetLayer.addOverlay(tilesetObject[titlesetName])

      // global.viewer.flyTo(tilesetObject[titlesetName])removeMxTileset
    },

    tilesetLayerFlag(type, cb) {
    tilesetLayerFlag (type, cb) {
      if (type == 1) {
        if (this.tilesetLayerType != "") {
          this.$message({
            message: "请关闭模型再开始绘制",
            type: "warning",
          });
          })

          cb(false);
          return;
          cb(false)
          return
        }
      } else {
        if (this.tilesetLayerType == "") {
          this.$message({
            message: "请打开模型再开始绘制",
            type: "warning",
          });
          })

          cb(false);
          return;
          cb(false)
          return
        }
      }

      cb(true);
      cb(true)
    },

    /**
@@ -1739,10 +1654,10 @@
     * @param {*} titlesetName 图层名称
     * @param {*} incident 模型点击事件
     */
    removeMxTileset(titlesetName) {
    removeMxTileset (titlesetName) {
      if (tilesetObject[titlesetName] && tilesetObject[titlesetName] != null) {
        tilesetLayer.removeOverlay(tilesetObject[titlesetName]);
        tilesetObject[titlesetName] = null;
        tilesetLayer.removeOverlay(tilesetObject[titlesetName])
        tilesetObject[titlesetName] = null
      }
    },

@@ -1751,21 +1666,21 @@
     * @param {*} positions 建筑范围坐标
     * @param {*}
     */
    showThreeDimensions(positions, minHeight, maxHeight) {
      console.log("showThreeDimensions--map");
    showThreeDimensions (positions, minHeight, maxHeight) {
      console.log("showThreeDimensions--map")
      if (curPolygon != null) {
        global.viewer.scene.primitives.remove(curPolygon);
        curPolygon = null;
        global.viewer.scene.primitives.remove(curPolygon)
        curPolygon = null
      }

      let housePositions = JSON.parse(positions).coordinates[0];
      let housePositions = JSON.parse(positions).coordinates[0]

      let floorPositions = housePositions.reduce((prev, curr) => {
        prev.push(curr[0]);
        prev.push(curr[1]);
        prev.push(curr[0])
        prev.push(curr[1])

        return prev;
      }, []);
        return prev
      }, [])

      curPolygon = new global.DC.Namespace.Cesium.ClassificationPrimitive({
        geometryInstances: new global.DC.Namespace.Cesium.GeometryInstance({
@@ -1792,26 +1707,26 @@

        classificationType:
          global.DC.Namespace.Cesium.ClassificationType.CESIUM_3D_TILE,
      });
      })

      global.viewer.scene.primitives.add(curPolygon);
      global.viewer.scene.primitives.add(curPolygon)
    },

    // 建筑高亮切换显示隐藏
    switchThreeDimensions(boolean) {
      if (!curPolygon) return;
      curPolygon.show = boolean;
    switchThreeDimensions (boolean) {
      if (!curPolygon) return
      curPolygon.show = boolean
    },

    // 清除建筑3D
    clearHouse3D() {
      global.viewer.scene.primitives.remove(curPolygon);
    clearHouse3D () {
      global.viewer.scene.primitives.remove(curPolygon)

      curPolygon = null;
      curPolygon = null
    },

    registerMxClick(event) {
      this.unbindMxClick();
    registerMxClick (event) {
      this.unbindMxClick()
      window.TILESET_LABEL.forEach((item) => {
        if (
          tilesetObject[`sdTilesetLayer${item.name}`] &&
@@ -1820,12 +1735,12 @@
          tilesetObject[`sdTilesetLayer${item.name}`].on(
            global.DC.MouseEventType.CLICK,
            event
          );
          )
        }
      });
      })
    },

    unbindMxClick(event) {
    unbindMxClick (event) {
      window.TILESET_LABEL.forEach((item) => {
        if (
          tilesetObject[`sdTilesetLayer${item.name}`] &&
@@ -1834,41 +1749,41 @@
          tilesetObject[`sdTilesetLayer${item.name}`].off(
            global.DC.MouseEventType.CLICK,
            event
          );
          )
        }
      });
      })
    },
  },

  destroyed() {
    this.$EventBus.$off("mapAddLayer");
    this.$EventBus.$off("mapRemoveLayer");
    this.$EventBus.$off("mapRemovePolygonLayer");
    this.$EventBus.$off("mapRemoveSiteLayer");
    this.$EventBus.$off("mapRemovePolygon");
    this.$EventBus.$off("mapClearLayer");
    this.$EventBus.$off("layerPointAdd");
    this.$EventBus.$off("layerPolygonAdd");
    this.$EventBus.$off("layerPolygonArrowsAdd");
    this.$EventBus.$off("layerPolylineAdd");
    this.$EventBus.$off("layerWallAdd");
    this.$EventBus.$off("rowLayerWallAdd");
    this.$EventBus.$off("getOverLayerID");
    this.$EventBus.$off("layerShow");
    this.$EventBus.$off("toPosition");
    this.$EventBus.$off("highOrLightChange");
    this.$EventBus.$off("addMxTileset");
    this.$EventBus.$off("closeMxTileset");
    this.$EventBus.$off("tilesetLayerFlag");
    this.$EventBus.$off("removeMxTileset");
    this.$EventBus.$off("flytoLayer");
    this.$EventBus.$off("showThreeDimensions");
    this.$EventBus.$off("switchThreeDimensions");
    this.$EventBus.$off("clearHouse3D");
    this.$EventBus.$off("registerMxClick");
    this.$EventBus.$off("unbindMxClick");
  destroyed () {
    this.$EventBus.$off("mapAddLayer")
    this.$EventBus.$off("mapRemoveLayer")
    this.$EventBus.$off("mapRemovePolygonLayer")
    this.$EventBus.$off("mapRemoveSiteLayer")
    this.$EventBus.$off("mapRemovePolygon")
    this.$EventBus.$off("mapClearLayer")
    this.$EventBus.$off("layerPointAdd")
    this.$EventBus.$off("layerPolygonAdd")
    this.$EventBus.$off("layerPolygonArrowsAdd")
    this.$EventBus.$off("layerPolylineAdd")
    this.$EventBus.$off("layerWallAdd")
    this.$EventBus.$off("rowLayerWallAdd")
    this.$EventBus.$off("getOverLayerID")
    this.$EventBus.$off("layerShow")
    this.$EventBus.$off("toPosition")
    this.$EventBus.$off("highOrLightChange")
    this.$EventBus.$off("addMxTileset")
    this.$EventBus.$off("closeMxTileset")
    this.$EventBus.$off("tilesetLayerFlag")
    this.$EventBus.$off("removeMxTileset")
    this.$EventBus.$off("flytoLayer")
    this.$EventBus.$off("showThreeDimensions")
    this.$EventBus.$off("switchThreeDimensions")
    this.$EventBus.$off("clearHouse3D")
    this.$EventBus.$off("registerMxClick")
    this.$EventBus.$off("unbindMxClick")
  },
};
}
</script>

<style lang="scss" scope>

 src/views/policeAlarmRecordsManage/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-04-10 16:58:17
 * @LastEditTime: 2024-12-09 19:55:09
 * @FilePath: \srs-police-affairs\src\views\policeAlarmRecordsManage\index.vue
 * @Description: 辖区管理
 * 
@@ -10,348 +10,349 @@
-->

<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
  <div class="site-page-home police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>报警类型：</span>
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <span>报警类型：</span>

                    <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 class="search-item-box">
                    <span>报警内容：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入 报警内容" v-model="alarmDescribe"
                        @change="searchChange" clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(2)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">已处置（{{ ycz ? ycz :
            '0'
                        }}）</el-button>
                    <el-button @click="filterBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">未处置（{{ dcz ? dcz :
            '0'
                        }}）</el-button>
                    
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <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' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="pcsName" :show-overflow-tooltip="true" label="接警单位"></el-table-column>
                    <el-table-column prop="createTime" :show-overflow-tooltip="true" label="报警时间"></el-table-column>
                    <el-table-column prop="alarmTypeName" :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" :page-size="pages.size" :total="pages.total"
                        :pager-count="4" :current-page="pages.current"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </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>

        <PoliceDetailPopup ref="PoliceDetailPopup"></PoliceDetailPopup>
        <div class="search-item-box">
          <span>报警内容：</span>

          <el-input style="flex: 1;" size="small" placeholder="请输入 报警内容" v-model="alarmDescribe" @change="searchChange"
            clearable></el-input>
        </div>

        <div class="search-item-box" style="justify-content: center;">
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(2)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">已处置（{{ ycz
            ? ycz :
            '0'
            }}）</el-button>
          <el-button @click="filterBtn(1)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">未处置（{{ dcz
            ? dcz :
            '0'
            }}）</el-button>

        </div>
      </div>

      <div class="list police-info" ref="tableBox">
        <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' }"
          :row-class-name="tableRowClassName" class="police-infor-table">
          <el-table-column prop="pcsName" :show-overflow-tooltip="true" label="接警单位"></el-table-column>
          <el-table-column prop="createTime" :show-overflow-tooltip="true" label="报警时间"></el-table-column>
          <el-table-column prop="alarmTypeName" :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" :page-size="pages.size" :total="pages.total"
            :pager-count="4" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

    <PoliceDetailPopup ref="PoliceDetailPopup"></PoliceDetailPopup>
  </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { getList, getApplyAlarmType,getStatistic } from "@/api/policeAlarmRecordsManage/index.js"
import { getList, getApplyAlarmType, getStatistic } from "@/api/policeAlarmRecordsManage/index.js"

let loading = null

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

    data() {
        return {
            status:null,
            dcz:0,
            ycz:0,
            boxShow: false,
            alarmDescribe: '',
            typeValue: '',
            tableData: [],
            typeOptions: [],
            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
            scycNum: 0,
            criminalRecordFlag: '',
        }
    },

    created() {
        this.getApplyAlarmType()
        this.getStatistic()
        this.onLoad()
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
    },

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

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

    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: {
        filterBtn(status){
            this.status = status
            this.onLoad()
        },
        // 切换登记类型
        typeChange() {
            this.pages.current = 1
            this.onLoad()
            this.getStatistic()
        },

        // 搜索条件改变
        searchChange() {
            if (this.keyword.trim() == '') {
                this.pages.current = 1
                this.onLoad()
                this.getStatistic()
            }
        },

        // 点击搜索
        searchBtn() {
            this.pages.current = 1
            this.onLoad()
            this.getStatistic()
        },

        // 重置搜索
        resetSearch() {
            this.pages.current = 1
            this.alarmDescribe = ''
            this.typeValue = ''
            this.status = null;
            this.onLoad()
            this.getStatistic()
        },

        // 分页处理
        handleCurrentChange(current) {
            this.pages.current = current
            this.onLoad()
            this.getStatistic()
        },

        // 加载动画
        loading() {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },
        getStatistic(){
            var that = this;
            getStatistic({
                alarmDescribe: this.alarmDescribe,
                alarmType: this.typeValue
            }).then(res=>{
                that.dcz = res.data.data.dcz
                that.ycz = res.data.data.ycz
            })
        },

        // 获取列表数据
        onLoad() {
            this.loading()

            getList({
                status:this.status,
                current: this.pages.current,
                size: this.pages.size,
                alarmDescribe: this.alarmDescribe,
                alarmType: this.typeValue
            }).then(res => {
                const data = res.data.data
                this.tableData = data.records
                this.pages.total = data.total

                // 字典读取
                data.records.forEach(element => {
                    this.typeOptions.forEach(item => {
                        if (item.key == element.alarmType) {
                            element.alarmTypeName = item.title
                        }
                    })
                })

                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 点击定位
        rowClick(row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.longitude, row.latitude)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.longitude, row.latitude)[1]

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 2000
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`,
                },
                incident: this.siteClick
            })
        },

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

        // 点击图标
        siteClick(e) {
            this.$refs.PoliceDetailPopup.initOpen(e.overlay.attrParams)
        },

        getApplyAlarmType() {
            getApplyAlarmType().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 清空按钮-清除图标图层
        clearRow() {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
            this.resetSearch()//重置列表
        },

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

    destroyed() {
        loading && loading.close()

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

        this.clearRow()
  data () {
    return {
      status: null,
      dcz: 0,
      ycz: 0,
      boxShow: false,
      alarmDescribe: '',
      typeValue: '',
      tableData: [],
      typeOptions: [],
      pages: {
        current: 1,
        size: 22,
        total: 0,
        count: 0,
      },
      scycNum: 0,
      criminalRecordFlag: '',
    }
  },

  created () {
    this.getApplyAlarmType()
    this.getStatistic()
    this.onLoad()
    const that = this

    that.$nextTick(() => {
      initMapPosition()
    })
  },

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

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

  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: {
    filterBtn (status) {
      this.status = status
      this.onLoad()
    },
    // 切换登记类型
    typeChange () {
      this.pages.current = 1
      this.onLoad()
      this.getStatistic()
    },

    // 搜索条件改变
    searchChange () {
      if (this.keyword.trim() == '') {
        this.pages.current = 1
        this.onLoad()
        this.getStatistic()
      }
    },

    // 点击搜索
    searchBtn () {
      this.pages.current = 1
      this.onLoad()
      this.getStatistic()
    },

    // 重置搜索
    resetSearch () {
      this.pages.current = 1
      this.alarmDescribe = ''
      this.typeValue = ''
      this.status = null
      this.onLoad()
      this.getStatistic()
    },

    // 分页处理
    handleCurrentChange (current) {
      this.pages.current = current
      this.onLoad()
      this.getStatistic()
    },

    // 加载动画
    loading () {
      loading = this.$loading({
        lock: true,
        text: '拼命加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
    },
    getStatistic () {
      var that = this
      getStatistic({
        alarmDescribe: this.alarmDescribe,
        alarmType: this.typeValue
      }).then(res => {
        that.dcz = res.data.data.dcz
        that.ycz = res.data.data.ycz
      })
    },

    // 获取列表数据
    onLoad () {
      this.loading()

      getList({
        status: this.status,
        current: this.pages.current,
        size: this.pages.size,
        alarmDescribe: this.alarmDescribe,
        alarmType: this.typeValue
      }).then(res => {
        const data = res.data.data
        this.tableData = data.records
        this.pages.total = data.total

        // 字典读取
        data.records.forEach(element => {
          this.typeOptions.forEach(item => {
            if (item.key == element.alarmType) {
              element.alarmTypeName = item.title
            }
          })
        })

        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    // 点击定位
    rowClick (row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.longitude, row.latitude)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.longitude, row.latitude)[1]

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000
      })

      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'scanLayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          size: [25.8, 32.4],
          url: `/img/icon/site.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
        incident: this.siteClick
      })
    },

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

    // 点击图标
    siteClick (e) {
      this.$refs.PoliceDetailPopup.initOpen(e.overlay.attrParams)
    },

    getApplyAlarmType () {
      getApplyAlarmType().then(res => {
        this.typeOptions = res.data.data
      })
    },

    // 清空按钮-清除图标图层
    clearRow () {
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
      this.resetSearch()//重置列表
    },

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

  destroyed () {
    loading && loading.close()

    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 {
    display: flex;
    flex-direction: column;
  display: flex;
  flex-direction: column;

    .pages {
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .pages {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.isOneClick {
    color: #fcbd56 !important;
  color: #fcbd56 !important;
}
</style>

 src/views/positionManage/index.vue

@@ -10,65 +10,63 @@
-->

<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
  <div class="site-page-home police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>阵地类型：</span>
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <span>阵地类型：</span>

                    <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 class="search-item-box">
                    <span>场所名称：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入场所名称" v-model="placeName"
                        @change="searchChange" clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <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' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="placeName" :show-overflow-tooltip="true" label="场所名称"></el-table-column>
                    <el-table-column prop="location" :show-overflow-tooltip="true" label="场所地址"></el-table-column>
                    <el-table-column prop="frontName" :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" :page-size="pages.size" :total="pages.total"
                        :pager-count="4" :current-page="pages.current"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </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>

        <PomDialogPopup ref="PomDialogPopup"></PomDialogPopup>
        <div class="search-item-box">
          <span>场所名称：</span>

          <el-input style="flex: 1;" size="small" placeholder="请输入场所名称" v-model="placeName" @change="searchChange"
            clearable></el-input>
        </div>

        <div class="search-item-box" style="justify-content: center;">
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
      </div>

      <div class="list police-info" ref="tableBox">
        <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' }"
          :row-class-name="tableRowClassName" class="police-infor-table">
          <el-table-column prop="placeName" :show-overflow-tooltip="true" label="场所名称"></el-table-column>
          <el-table-column prop="location" :show-overflow-tooltip="true" label="场所地址"></el-table-column>
          <el-table-column prop="frontName" :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" :page-size="pages.size" :total="pages.total"
            :pager-count="4" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

    <PomDialogPopup ref="PomDialogPopup"></PomDialogPopup>
  </div>
</template>

<script>
@@ -78,235 +76,238 @@
let loading = null

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

    data () {
        return {
            boxShow: false,
  data () {
    return {
      boxShow: false,

            placeName: '',
            typeValue: '',
            typeOptions: [],
      placeName: '',
      typeValue: '',
      typeOptions: [],

            tableData: [],
      tableData: [],

            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
        }
    },

    created () {
        this.getFrontTypeTree()
        this.getFrontPage()
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
    },

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

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

    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: {
        getFrontTypeTree () {
            getFrontTypeTree().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 切换登记类型
        typeChange () {
            this.pages.current = 1
            this.getFrontPage()
        },

        searchChange () {
            if (this.placeName.trim() == '') {
                this.pages.current = 1
                this.getFrontPage()
            }
        },

        searchBtn () {
            this.pages.current = 1
            this.getFrontPage()
        },

        resetSearch () {
            this.pages.current = 1
            this.typeValue = ''
            this.placeName = ''
            this.getFrontPage()
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.getFrontPage()
        },

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

        getFrontPage () {
            this.loading()

            getFrontPage({
                current: this.pages.current,
                size: this.pages.size,
                frontType: this.typeValue,
                isFront: 1,
                placeName: this.placeName
            }).then(res => {
                const data = res.data.data
                data.records.forEach(element => {
                    this.typeOptions.forEach(item => {
                        if (item.key == element.frontType) {
                            element.frontName = item.title
                        }
                    })
                })
                this.tableData = data.records
                this.pages.total = data.total

                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 点击定位
        rowClick (row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 2000
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`,
                },
                incident: this.siteClick
            })
        },

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

        siteClick (e) {
            this.$refs.PomDialogPopup.initOpen(e.overlay.attrParams)
        },

        // 清空按钮-清除图标图层
        clearRow () {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
            this.resetSearch()//重置列表
        },

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

    destroyed () {
        loading && loading.close()

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

        this.clearRow()
      pages: {
        current: 1,
        size: 22,
        total: 0,
        count: 0,
      },
    }
  },

  created () {
    this.getFrontTypeTree()
    this.getFrontPage()
    const that = this

    that.$nextTick(() => {
      initMapPosition()
    })
  },

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

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

  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: {
    getFrontTypeTree () {
      getFrontTypeTree().then(res => {
        this.typeOptions = res.data.data
      })
    },

    // 切换登记类型
    typeChange () {
      this.pages.current = 1
      this.getFrontPage()
    },

    searchChange () {
      if (this.placeName.trim() == '') {
        this.pages.current = 1
        this.getFrontPage()
      }
    },

    searchBtn () {
      this.pages.current = 1
      this.getFrontPage()
    },

    resetSearch () {
      this.pages.current = 1
      this.typeValue = ''
      this.placeName = ''
      this.getFrontPage()
    },

    // 分页处理
    handleCurrentChange (current) {
      this.pages.current = current
      this.getFrontPage()
    },

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

    getFrontPage () {
      this.loading()

      getFrontPage({
        current: this.pages.current,
        size: this.pages.size,
        frontType: this.typeValue,
        isFront: 1,
        placeName: this.placeName
      }).then(res => {
        const data = res.data.data
        data.records.forEach(element => {
          this.typeOptions.forEach(item => {
            if (item.key == element.frontType) {
              element.frontName = item.title
            }
          })
        })
        this.tableData = data.records
        this.pages.total = data.total

        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    // 点击定位
    rowClick (row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000
      })

      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'scanLayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          size: [25.8, 32.4],
          url: `/img/icon/site.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
        incident: this.siteClick
      })
    },

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

    siteClick (e) {
      this.$refs.PomDialogPopup.initOpen(e.overlay.attrParams)
    },

    // 清空按钮-清除图标图层
    clearRow () {
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
      this.resetSearch()//重置列表
    },

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

  destroyed () {
    loading && loading.close()

    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 {
    display: flex;
    flex-direction: column;
  display: flex;
  flex-direction: column;

    .pages {
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .pages {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

 src/views/practitionersManage/index.vue

@@ -10,61 +10,60 @@
-->

<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
  <div class="site-page-home police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>关键字：</span>
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <span>关键字：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入（姓名、联系电话、工作场所）" v-model="keyword"
                        @change="searchChange" clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <div class="search-item-box" style="justify-content: flex-start;">
                    <el-button @click="filterBtn" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">有前科（{{ scycNum ? scycNum :
            '0'
                        }}）</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <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' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名"></el-table-column>
                    <el-table-column prop="telephone" :show-overflow-tooltip="true" label="联系电话"></el-table-column>
                    <el-table-column prop="placeName" :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" :page-size="pages.size" :total="pages.total"
                        :pager-count="4" :current-page="pages.current"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>

          <el-input style="flex: 1;" size="small" placeholder="请输入（姓名、联系电话、工作场所）" v-model="keyword"
            @change="searchChange" clearable></el-input>
        </div>

        <PrmDialogPopup ref="PrmDialogPopup"></PrmDialogPopup>
        <div class="search-item-box" style="justify-content: center;">
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
        <div class="search-item-box" style="justify-content: flex-start;">
          <el-button @click="filterBtn" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">有前科（{{ scycNum
            ? scycNum :
            '0'
            }}）</el-button>
        </div>
      </div>

      <div class="list police-info" ref="tableBox">
        <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' }"
          :row-class-name="tableRowClassName" class="police-infor-table">
          <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名"></el-table-column>
          <el-table-column prop="telephone" :show-overflow-tooltip="true" label="联系电话"></el-table-column>
          <el-table-column prop="placeName" :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" :page-size="pages.size" :total="pages.total"
            :pager-count="4" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

    <PrmDialogPopup ref="PrmDialogPopup"></PrmDialogPopup>
  </div>
</template>

<script>
@@ -74,241 +73,244 @@
let loading = null

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

    data () {
        return {
            boxShow: false,
            keyword: '',
            tableData: [],
            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
            scycNum: 0,
            criminalRecordFlag: '',
  data () {
    return {
      boxShow: false,
      keyword: '',
      tableData: [],
      pages: {
        current: 1,
        size: 22,
        total: 0,
        count: 0,
      },
      scycNum: 0,
      criminalRecordFlag: '',
    }
  },

  created () {
    this.getCountByType()
    this.getPlacePractitionerPage()
    const that = this

    that.$nextTick(() => {
      initMapPosition()
    })
  },

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

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

  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"
        }
      }
    },

    created () {
    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: {
    // 有前科筛选按钮
    filterBtn () {
      if (this.criminalRecordFlag == '1') {
        this.criminalRecordFlag = ''
      } else {
        this.criminalRecordFlag = 1
      }
      this.getPlacePractitionerPage()
    },

    // 搜索条件改变
    searchChange () {
      if (this.keyword.trim() == '') {
        this.pages.current = 1
        this.getCountByType()
        this.getPlacePractitionerPage()
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
      }
    },

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

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')
        })
    // 点击搜索
    searchBtn () {
      this.pages.current = 1
      this.getCountByType()
      this.getPlacePractitionerPage()
    },

    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
                }
            }
        },
    // 重置搜索
    resetSearch () {
      this.pages.current = 1
      this.keyword = ''
      this.criminalRecordFlag = ''
      this.getCountByType()
      this.getPlacePractitionerPage()
    },

    methods: {
        // 有前科筛选按钮
        filterBtn () {
            if (this.criminalRecordFlag == '1') {
                this.criminalRecordFlag = ''
            } else {
                this.criminalRecordFlag = 1
            }
            this.getPlacePractitionerPage()
        },

        // 搜索条件改变
        searchChange () {
            if (this.keyword.trim() == '') {
                this.pages.current = 1
                this.getCountByType()
                this.getPlacePractitionerPage()
            }
        },

        // 点击搜索
        searchBtn () {
            this.pages.current = 1
            this.getCountByType()
            this.getPlacePractitionerPage()
        },

        // 重置搜索
        resetSearch () {
            this.pages.current = 1
            this.keyword = ''
            this.criminalRecordFlag = ''
            this.getCountByType()
            this.getPlacePractitionerPage()
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.getPlacePractitionerPage()
        },

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

        // 获取有前科数量
        getCountByType () {
            getCountByType({ searchKey: this.keyword }).then(res => {
                this.scycNum = res.data.data.scycNum
            })
        },

        // 获取列表数据
        getPlacePractitionerPage () {
            this.loading()

            getPlacePractitionerPage({
                current: this.pages.current,
                size: this.pages.size,
                searchKey: this.keyword,
                criminalRecordFlag: this.criminalRecordFlag
            }).then(res => {
                const data = res.data.data
                this.tableData = data.records
                this.pages.total = data.total

                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 点击定位
        rowClick (row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 2000
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`,
                },
                incident: this.siteClick
            })
        },

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

        // 点击图标
        siteClick (e) {
            this.$refs.PrmDialogPopup.initOpen(e.overlay.attrParams)
        },

        // 清空按钮-清除图标图层
        clearRow () {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
            this.resetSearch()//重置列表
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    // 分页处理
    handleCurrentChange (current) {
      this.pages.current = current
      this.getPlacePractitionerPage()
    },

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

        this.$parent.$parent.resize('0px')
    // 获取有前科数量
    getCountByType () {
      getCountByType({ searchKey: this.keyword }).then(res => {
        this.scycNum = res.data.data.scycNum
      })
    },

        this.clearRow()
    }
    // 获取列表数据
    getPlacePractitionerPage () {
      this.loading()

      getPlacePractitionerPage({
        current: this.pages.current,
        size: this.pages.size,
        searchKey: this.keyword,
        criminalRecordFlag: this.criminalRecordFlag
      }).then(res => {
        const data = res.data.data
        this.tableData = data.records
        this.pages.total = data.total

        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    // 点击定位
    rowClick (row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000
      })

      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'scanLayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          size: [25.8, 32.4],
          url: `/img/icon/site.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
        incident: this.siteClick
      })
    },

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

    // 点击图标
    siteClick (e) {
      this.$refs.PrmDialogPopup.initOpen(e.overlay.attrParams)
    },

    // 清空按钮-清除图标图层
    clearRow () {
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
      this.resetSearch()//重置列表
    },

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

  destroyed () {
    loading && loading.close()

    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 {
    display: flex;
    flex-direction: column;
  display: flex;
  flex-direction: column;

    .pages {
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .pages {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.isOneClick {
    color: #fcbd56 !important;
  color: #fcbd56 !important;
}
</style>

 src/views/scanOrCode/index.vue

@@ -10,102 +10,100 @@
-->

<template>
    <div class="police-page container scan-or-code-page">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="time-select" ref="timeSelect">
  <div class="police-page container scan-or-code-page">
    <div v-show="boxShow" class="container-content" ref="containerContent">
      <div class="time-select" ref="timeSelect">

                <div class="search-item-box">
                    <span>登记类型：</span>
        <div class="search-item-box">
          <span>登记类型：</span>

                    <el-select style="flex: 1;" size="small" v-model="typeValue" @change="typeChange" placeholder="请选择">
                        <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </div>

                <div class="search-item-box">
                    <span>关键字：</span>

                    <el-input style="flex: 1;" size="small" :placeholder="placeholder" v-model="searchKey"
                        clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
            </div>

            <div class="list police-info" 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="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column> -->
                    <!-- 同住登记 -->
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>  -->
                    <!-- 信息登记 -->
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column>
                    <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column> -->
                    <!-- 企业登记 -->
                    <el-table-column prop="companyName" :show-overflow-tooltip="true" label="企业名称" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="empName" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="empIdCard" :show-overflow-tooltip="true" label="身份证" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="stdAddress" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 4"
                        :key="Math.random()"></el-table-column>
                    <!-- 扫码上报 -->
                    <el-table-column prop="reportName" :show-overflow-tooltip="true" label="上报人" v-if="typeValue == 5"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="exceptionTypeName" :show-overflow-tooltip="true" label="门牌异常类型"
                        v-if="typeValue == 5" :key="Math.random()"></el-table-column>
                    <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话" v-if="typeValue == 5"
                        :key="Math.random()"></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="4" :current-page="pages.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
          <el-select style="flex: 1;" size="small" v-model="typeValue" @change="typeChange" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>

        <div class="search-item-box">
          <span>关键字：</span>

          <el-input style="flex: 1;" size="small" :placeholder="placeholder" v-model="searchKey" clearable></el-input>
        </div>

        <div class="search-item-box" style="justify-content: center;">
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
      </div>

      <div class="list police-info" 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="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 1"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 1"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 1"
            :key="Math.random()"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 1"
                        :key="Math.random()"></el-table-column> -->
          <!-- 同住登记 -->
          <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 2"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 2"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="idCardNumber" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 2"
            :key="Math.random()"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 2"
                        :key="Math.random()"></el-table-column>  -->
          <!-- 信息登记 -->
          <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 3"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="手机号" v-if="typeValue == 3"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号" v-if="typeValue == 3"
            :key="Math.random()"></el-table-column>
          <!-- <el-table-column prop="address" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 3"
                        :key="Math.random()"></el-table-column> -->
          <!-- 企业登记 -->
          <el-table-column prop="companyName" :show-overflow-tooltip="true" label="企业名称" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="empName" :show-overflow-tooltip="true" label="姓名" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="empIdCard" :show-overflow-tooltip="true" label="身份证" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="stdAddress" :show-overflow-tooltip="true" label="住址" v-if="typeValue == 4"
            :key="Math.random()"></el-table-column>
          <!-- 扫码上报 -->
          <el-table-column prop="reportName" :show-overflow-tooltip="true" label="上报人" v-if="typeValue == 5"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="exceptionTypeName" :show-overflow-tooltip="true" label="门牌异常类型" v-if="typeValue == 5"
            :key="Math.random()"></el-table-column>
          <el-table-column prop="phone" :show-overflow-tooltip="true" label="联系电话" v-if="typeValue == 5"
            :key="Math.random()"></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="4" :current-page="pages.currentPage" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>
    <detailsPopup ref="detailsPopup" :popupTile="popupTile"></detailsPopup>
  </div>
</template>

<script>
@@ -115,734 +113,737 @@
let loading = null

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

    data () {
        return {
            placeholder: '请输入（姓名、手机号、身份证号、住址）',
            popupTile: '详情信息',
            searchKey: '',
            realEmptyText: "",
            currentTableHeight: 0,
            tableData: [],
  data () {
    return {
      placeholder: '请输入（姓名、手机号、身份证号、住址）',
      popupTile: '详情信息',
      searchKey: '',
      realEmptyText: "",
      currentTableHeight: 0,
      tableData: [],

            boxShow: false,
      boxShow: false,

            pages: {
                total: 0,
                pageSize: 22,
                count: 0,
                currentPage: 1
            },
      pages: {
        total: 0,
        pageSize: 22,
        count: 0,
        currentPage: 1
      },

            typeValue: '1',
            typeOptions: [
                {
                    value: '1',
                    label: '业主租客登记'
                },
                {
                    value: '2',
                    label: '同住登记'
                },
                {
                    value: '3',
                    label: '信息登记'
                },
                {
                    value: '4',
                    label: '企业登记'
                },
                {
                    value: '5',
                    label: '扫码上报'
                }
            ],
      typeValue: '1',
      typeOptions: [
        {
          value: '1',
          label: '业主租客登记'
        },
        {
          value: '2',
          label: '同住登记'
        },
        {
          value: '3',
          label: '信息登记'
        },
        {
          value: '4',
          label: '企业登记'
        },
        {
          value: '5',
          label: '扫码上报'
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
            that.getList()
        })
    },

    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: {
        // 根据类型获取数据--暂时为测试数据
        getRowData (row) {
            let data = []
            if (this.typeValue == 1) {
                data = [
                    {
                        label: '名字',
                        prop: 'name',
                        value: row.name,
                        type: 'popup'
                    },
                    {
                        label: '性别',
                        prop: 'gender',
                        value: row.gender == 1 ? '男' : '女',
                        type: 'popup'
                    },
                    {
                        label: '身份证号',
                        prop: 'idCardNumber',
                        value: row.idCardNumber,
                        type: 'popup'
                    },
                    {
                        label: '联系电话',
                        prop: 'phone',
                        value: row.phone,
                        type: 'popup'
                    },
                    {
                        label: '住户类型',
                        prop: 'type',
                        value: row.type == 1 ? '业主' : '租客',
                        type: 'popup'
                    },
                    {
                        label: '出生年月',
                        prop: 'birth',
                        value: row.birth,
                        type: 'detail'
                    },
                    {
                        label: '民族',
                        prop: 'nation',
                        value: row.nation,
                        type: 'detail'
                    },
                    {
                        label: '房屋地址',
                        prop: 'address',
                        value: row.address,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 2) {
                data = [
                    {
                        label: '名字',
                        prop: 'name',
                        value: row.name,
                        type: 'popup'
                    },
                    {
                        label: '性别',
                        prop: 'gender',
                        value: row.gender == 1 ? '男' : '女',
                        type: 'popup'
                    },
                    {
                        label: '身份证号',
                        prop: 'idCardNumber',
                        value: row.idCardNumber,
                        type: 'popup'
                    },
                    {
                        label: '联系电话',
                        prop: 'phone',
                        value: row.phone,
                        type: 'popup'
                    },
                    {
                        label: '住户类型',
                        prop: 'type',
                        value: row.type == 1 ? '业主' : '租客',
                        type: 'popup'
                    },
                    {
                        label: '是否成年',
                        prop: 'isAdult',
                        value: row.isAdult == 1 ? '是' : '否',
                        type: 'detail'
                    },
                    {
                        label: '出生年月',
                        prop: 'birth',
                        value: row.birth,
                        type: 'detail'
                    },
                    {
                        label: '民族',
                        prop: 'nation',
                        value: row.nation,
                        type: 'detail'
                    },
                    {
                        label: '房屋地址',
                        prop: 'address',
                        value: row.address,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 3) {
                data = [
                    {
                        label: '名字',
                        prop: 'name',
                        value: row.name,
                        type: 'popup'
                    },
                    {
                        label: '身份证号',
                        prop: 'idCard',
                        value: row.idCard,
                        type: 'popup'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone',
                        value: row.phone,
                        type: 'popup'
                    },
                    {
                        label: '常用地址',
                        prop: 'commonUseAddress',
                        value: row.commonUseAddress,
                        type: 'popup'
                    },
                    {
                        label: '户籍地址',
                        prop: 'domicileAddress',
                        value: row.domicileAddress,
                        type: 'detail'
                    },
                    {
                        label: '审核状态',
                        prop: 'auditStatus',
                        value: row.auditStatus,
                        type: 'detail'
                    },
                    {
                        label: '人员类型',
                        prop: 'personType',
                        value: row.personType,
                        type: 'popup'
                    },
                    {
                        label: '操作类型',
                        prop: 'operateType',
                        value: row.operateType == 1 ? '扫码录入' : '人工录入',
                        type: 'detail'
                    },
                    {
                        label: '审核时间',
                        prop: 'auditTime',
                        value: row.auditTime,
                        type: 'detail'
                    },
                    {
                        label: '文字描述',
                        prop: 'descriptionText',
                        value: row.descriptionText,
                        type: 'detail'
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        value: row.remark,
                        type: 'detail'
                    },
                    {
                        label: '登记人',
                        prop: 'createPerson',
                        value: row.createPerson,
                        type: 'detail'
                    },
                    {
                        label: '审核人',
                        prop: 'auditPerson',
                        value: row.auditPerson,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 4) {
                data = [
                    {
                        label: '企业名称',
                        prop: 'companyName',
                        value: row.companyName,
                        type: 'popup'
                    },
                    {
                        label: '岗位名称',
                        prop: 'position',
                        value: row.position,
                        type: 'popup'
                    },
                    {
                        label: '员工姓名',
                        prop: 'empName',
                        value: row.empName,
                        type: 'popup'
                    },
                    {
                        label: '员工性别',
                        prop: 'empSex',
                        value: row.empSex == 1 ? '女' : '男',
                        type: 'popup'
                    },
                    {
                        label: '员工身份证号',
                        prop: 'empIdCard',
                        value: row.empIdCard,
                        type: 'popup'
                    },
                    {
                        label: '员工联系电话',
                        prop: 'empPhone',
                        value: row.empPhone,
                        type: 'popup'
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        value: row.remark,
                        type: 'detail'
                    },
                    {
                        label: '创建时间',
                        prop: 'createTime',
                        value: row.createTime,
                        type: 'detail'
                    },
                    {
                        label: '创建人',
                        prop: 'createBy',
                        value: row.createBy,
                        type: 'detail'
                    },
                    {
                        label: '更新时间',
                        prop: 'updateTime',
                        value: row.updateTime,
                        type: 'detail'
                    },
                    {
                        label: '更新人',
                        prop: 'updateBy',
                        value: row.updateBy,
                        type: 'detail'
                    }
                ]
            } else if (this.typeValue == 5) {
                data = [
                    {
                        label: '异常类型',
                        prop: 'exception_type_name',
                        value: row.exceptionTypeName,
                        type: 'popup'
                    },
                    {
                        label: '异常描述',
                        prop: 'exception_description',
                        value: row.exceptionDescription,
                        type: 'popup'
                    },
                    {
                        label: '上报人名称',
                        prop: 'report_name',
                        value: row.reportName,
                        type: 'popup'
                    },
                    {
                        label: '上报用户类型',
                        prop: 'reportor_type_name',
                        value: row.reportorTypeName,
                        type: 'detail'
                    },
                    {
                        label: '上报时间',
                        prop: 'report_time',
                        value: row.reportTime,
                        type: 'popup'
                    },
                    {
                        label: '上报来源',
                        prop: 'report_source',
                        value: row.reportSource,
                        type: 'popup'
                    },
                    {
                        label: '联系电话',
                        prop: 'phone',
                        value: row.phone,
                        type: 'detail'
                    },
                    {
                        label: '地址',
                        prop: 'std_address',
                        value: row.stdAddress.replace('江西省上饶市', ''),
                        type: 'popup'
                    },
                    {
                        label: '处理人名称',
                        prop: 'resolve_by_name',
                        value: row.resolveByName,
                        type: 'detail'
                    },
                    {
                        label: '处理状态',
                        prop: 'resolve_status',
                        value: row.resolveStatus,
                        type: 'popup'
                    },
                    {
                        label: '处理时间',
                        prop: 'resolve_time',
                        value: row.resolveTime,
                        type: 'popup'
                    },
                    {
                        label: '处理意见',
                        prop: 'resolve_msg',
                        value: row.resolve_msg,
                        type: 'detail'
                    },
                    {
                        label: '采集经度',
                        prop: 'photo_lat',
                        value: row.x,
                        type: 'detail'
                    },
                    {
                        label: '采集纬度',
                        prop: 'photo_lng',
                        value: row.y,
                        type: 'detail'
                    },
                ]
            }
            return data
        },

        // 点击详情
        goDetail (row) {
            const typeLabel = this.typeOptions.find(e => e.value == this.typeValue).label
            this.popupTile = `详情信息（${typeLabel}）`
            let data = this.getRowData(row)
            this.$refs.detailsPopup.initOpen(data)
        },

        // 点击定位
        rowClick (row) {
            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
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    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(lng),
                            Number(lat),
                            0
                        )
                    )
                ]
            })
        },

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

        // 获取列表
        getList () {
            this.loading()
            let params = {
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }
            if (this.typeValue == 1) {//业主租客登记
                this.getAppOwerRenterRegistrantList(params)
            } else if (this.typeValue == 2) {//同住登记
                this.getAppOwerRenterRegistrantCohabitList(params)
            } else if (this.typeValue == 3) {//信息登记
                this.getAppRegisterInfoList(params)
            } else if (this.typeValue == 4) {//企业登记
                this.getAppEmploymentRegistrationList(params)
            } else if (this.typeValue == 5) {//扫码上报
                this.getAddressManageList(params)
            }
        },

        searchBtn () {
            this.pages.currentPage = 1
            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)'
            })
        },

        // 切换登记类型
        typeChange () {
            if (this.typeValue == 1 || this.typeValue == 2) {
                this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
            } else if (this.typeValue == 3) {
                this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
            } else if (this.typeValue == 4) {
                this.placeholder = '请输入（企业名称、姓名、身份证、住址）'
            } else if (this.typeValue == 5) {
                this.placeholder = '请输入（上报人、门牌异常类型、联系电话）'
            }
            this.pages.currentPage = 1
            this.getList()
            this.clearRow()
        },

        //业主租客登记列表数据
        getAppOwerRenterRegistrantList (params) {
            getAppOwerRenterRegistrantList(params).then(res => {
                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)
            })
        },

        //同住登记列表数据
        getAppOwerRenterRegistrantCohabitList (params) {
            getAppOwerRenterRegistrantCohabitList(params).then(res => {
                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)
            })
        },

        //信息登记列表数据
        getAppRegisterInfoList (params) {
            getAppRegisterInfoList(params).then(res => {
                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.auditStatus == 0) {
                            item.auditStatus = '未审核'
                        } else if (item.auditStatus == 1) {
                            item.auditStatus = '已通过'
                        } else if (item.auditStatus == 2) {
                            item.auditStatus = '已驳回'
                        }
                    })
                }
                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)
            })
        },

        //企业登记列表数据
        getAppEmploymentRegistrationList (params) {
            getAppEmploymentRegistrationList(params).then(res => {
                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)
            })
        },

        // 扫码上报列表数据
        getAddressManageList (params) {
            getAddressManageList(params).then(res => {
                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.resolveStatus == 0) {
                            item.resolveStatus = '待审核'
                        } else if (item.resolveStatus == 1) {
                            item.resolveStatus = '已通过'
                        } else if (item.resolveStatus == 2) {
                            item.resolveStatus = '已驳回'
                        }
                        if (item.reportSource == 1) {
                            item.reportSource = '扫码访问'
                        } else if (item.reportSource == 2) {
                            item.reportSource = '贴牌APP'
                        } else if (item.reportSource == 3) {
                            item.reportSource = '人工导入'
                        }
                    })
                }
                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)
            })
        },

        // 高度自适应
        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

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

    destroyed () {
        loading && loading.close()

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

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

        this.clearRow()
      ],
    }
  },

  created () {
    const that = this

    that.$nextTick(() => {
      initMapPosition()
      that.getList()
    })
  },

  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: {
    // 根据类型获取数据--暂时为测试数据
    getRowData (row) {
      let data = []
      if (this.typeValue == 1) {
        data = [
          {
            label: '名字',
            prop: 'name',
            value: row.name,
            type: 'popup'
          },
          {
            label: '性别',
            prop: 'gender',
            value: row.gender == 1 ? '男' : '女',
            type: 'popup'
          },
          {
            label: '身份证号',
            prop: 'idCardNumber',
            value: row.idCardNumber,
            type: 'popup'
          },
          {
            label: '联系电话',
            prop: 'phone',
            value: row.phone,
            type: 'popup'
          },
          {
            label: '住户类型',
            prop: 'type',
            value: row.type == 1 ? '业主' : '租客',
            type: 'popup'
          },
          {
            label: '出生年月',
            prop: 'birth',
            value: row.birth,
            type: 'detail'
          },
          {
            label: '民族',
            prop: 'nation',
            value: row.nation,
            type: 'detail'
          },
          {
            label: '房屋地址',
            prop: 'address',
            value: row.address,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 2) {
        data = [
          {
            label: '名字',
            prop: 'name',
            value: row.name,
            type: 'popup'
          },
          {
            label: '性别',
            prop: 'gender',
            value: row.gender == 1 ? '男' : '女',
            type: 'popup'
          },
          {
            label: '身份证号',
            prop: 'idCardNumber',
            value: row.idCardNumber,
            type: 'popup'
          },
          {
            label: '联系电话',
            prop: 'phone',
            value: row.phone,
            type: 'popup'
          },
          {
            label: '住户类型',
            prop: 'type',
            value: row.type == 1 ? '业主' : '租客',
            type: 'popup'
          },
          {
            label: '是否成年',
            prop: 'isAdult',
            value: row.isAdult == 1 ? '是' : '否',
            type: 'detail'
          },
          {
            label: '出生年月',
            prop: 'birth',
            value: row.birth,
            type: 'detail'
          },
          {
            label: '民族',
            prop: 'nation',
            value: row.nation,
            type: 'detail'
          },
          {
            label: '房屋地址',
            prop: 'address',
            value: row.address,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 3) {
        data = [
          {
            label: '名字',
            prop: 'name',
            value: row.name,
            type: 'popup'
          },
          {
            label: '身份证号',
            prop: 'idCard',
            value: row.idCard,
            type: 'popup'
          },
          {
            label: '联系方式',
            prop: 'phone',
            value: row.phone,
            type: 'popup'
          },
          {
            label: '常用地址',
            prop: 'commonUseAddress',
            value: row.commonUseAddress,
            type: 'popup'
          },
          {
            label: '户籍地址',
            prop: 'domicileAddress',
            value: row.domicileAddress,
            type: 'detail'
          },
          {
            label: '审核状态',
            prop: 'auditStatus',
            value: row.auditStatus,
            type: 'detail'
          },
          {
            label: '人员类型',
            prop: 'personType',
            value: row.personType,
            type: 'popup'
          },
          {
            label: '操作类型',
            prop: 'operateType',
            value: row.operateType == 1 ? '扫码录入' : '人工录入',
            type: 'detail'
          },
          {
            label: '审核时间',
            prop: 'auditTime',
            value: row.auditTime,
            type: 'detail'
          },
          {
            label: '文字描述',
            prop: 'descriptionText',
            value: row.descriptionText,
            type: 'detail'
          },
          {
            label: '备注',
            prop: 'remark',
            value: row.remark,
            type: 'detail'
          },
          {
            label: '登记人',
            prop: 'createPerson',
            value: row.createPerson,
            type: 'detail'
          },
          {
            label: '审核人',
            prop: 'auditPerson',
            value: row.auditPerson,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 4) {
        data = [
          {
            label: '企业名称',
            prop: 'companyName',
            value: row.companyName,
            type: 'popup'
          },
          {
            label: '岗位名称',
            prop: 'position',
            value: row.position,
            type: 'popup'
          },
          {
            label: '员工姓名',
            prop: 'empName',
            value: row.empName,
            type: 'popup'
          },
          {
            label: '员工性别',
            prop: 'empSex',
            value: row.empSex == 1 ? '女' : '男',
            type: 'popup'
          },
          {
            label: '员工身份证号',
            prop: 'empIdCard',
            value: row.empIdCard,
            type: 'popup'
          },
          {
            label: '员工联系电话',
            prop: 'empPhone',
            value: row.empPhone,
            type: 'popup'
          },
          {
            label: '备注',
            prop: 'remark',
            value: row.remark,
            type: 'detail'
          },
          {
            label: '创建时间',
            prop: 'createTime',
            value: row.createTime,
            type: 'detail'
          },
          {
            label: '创建人',
            prop: 'createBy',
            value: row.createBy,
            type: 'detail'
          },
          {
            label: '更新时间',
            prop: 'updateTime',
            value: row.updateTime,
            type: 'detail'
          },
          {
            label: '更新人',
            prop: 'updateBy',
            value: row.updateBy,
            type: 'detail'
          }
        ]
      } else if (this.typeValue == 5) {
        data = [
          {
            label: '异常类型',
            prop: 'exception_type_name',
            value: row.exceptionTypeName,
            type: 'popup'
          },
          {
            label: '异常描述',
            prop: 'exception_description',
            value: row.exceptionDescription,
            type: 'popup'
          },
          {
            label: '上报人名称',
            prop: 'report_name',
            value: row.reportName,
            type: 'popup'
          },
          {
            label: '上报用户类型',
            prop: 'reportor_type_name',
            value: row.reportorTypeName,
            type: 'detail'
          },
          {
            label: '上报时间',
            prop: 'report_time',
            value: row.reportTime,
            type: 'popup'
          },
          {
            label: '上报来源',
            prop: 'report_source',
            value: row.reportSource,
            type: 'popup'
          },
          {
            label: '联系电话',
            prop: 'phone',
            value: row.phone,
            type: 'detail'
          },
          {
            label: '地址',
            prop: 'std_address',
            value: row.stdAddress.replace('江西省上饶市', ''),
            type: 'popup'
          },
          {
            label: '处理人名称',
            prop: 'resolve_by_name',
            value: row.resolveByName,
            type: 'detail'
          },
          {
            label: '处理状态',
            prop: 'resolve_status',
            value: row.resolveStatus,
            type: 'popup'
          },
          {
            label: '处理时间',
            prop: 'resolve_time',
            value: row.resolveTime,
            type: 'popup'
          },
          {
            label: '处理意见',
            prop: 'resolve_msg',
            value: row.resolve_msg,
            type: 'detail'
          },
          {
            label: '采集经度',
            prop: 'photo_lat',
            value: row.x,
            type: 'detail'
          },
          {
            label: '采集纬度',
            prop: 'photo_lng',
            value: row.y,
            type: 'detail'
          },
        ]
      }
      return data
    },

    // 点击详情
    goDetail (row) {
      const typeLabel = this.typeOptions.find(e => e.value == this.typeValue).label
      this.popupTile = `详情信息（${typeLabel}）`
      let data = this.getRowData(row)
      this.$refs.detailsPopup.initOpen(data)
    },

    // 点击定位
    rowClick (row) {
      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
      })
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'scanLayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          url: `/img/icon/location.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
      })
      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(lng),
              Number(lat),
              0
            )
          )
        ]
      })
    },

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

    // 获取列表
    getList () {
      this.loading()
      let params = {
        searchKey: this.searchKey,
        size: this.pages.pageSize,
        current: this.pages.currentPage
      }
      if (this.typeValue == 1) {//业主租客登记
        this.getAppOwerRenterRegistrantList(params)
      } else if (this.typeValue == 2) {//同住登记
        this.getAppOwerRenterRegistrantCohabitList(params)
      } else if (this.typeValue == 3) {//信息登记
        this.getAppRegisterInfoList(params)
      } else if (this.typeValue == 4) {//企业登记
        this.getAppEmploymentRegistrationList(params)
      } else if (this.typeValue == 5) {//扫码上报
        this.getAddressManageList(params)
      }
    },

    searchBtn () {
      this.pages.currentPage = 1
      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)'
      })
    },

    // 切换登记类型
    typeChange () {
      if (this.typeValue == 1 || this.typeValue == 2) {
        this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
      } else if (this.typeValue == 3) {
        this.placeholder = '请输入（姓名、手机号、身份证号、住址）'
      } else if (this.typeValue == 4) {
        this.placeholder = '请输入（企业名称、姓名、身份证、住址）'
      } else if (this.typeValue == 5) {
        this.placeholder = '请输入（上报人、门牌异常类型、联系电话）'
      }
      this.pages.currentPage = 1
      this.getList()
      this.clearRow()
    },

    //业主租客登记列表数据
    getAppOwerRenterRegistrantList (params) {
      getAppOwerRenterRegistrantList(params).then(res => {
        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)
      })
    },

    //同住登记列表数据
    getAppOwerRenterRegistrantCohabitList (params) {
      getAppOwerRenterRegistrantCohabitList(params).then(res => {
        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)
      })
    },

    //信息登记列表数据
    getAppRegisterInfoList (params) {
      getAppRegisterInfoList(params).then(res => {
        if (res.data.data.records.length > 0) {
          res.data.data.records.forEach(item => {
            if (item.auditStatus == 0) {
              item.auditStatus = '未审核'
            } else if (item.auditStatus == 1) {
              item.auditStatus = '已通过'
            } else if (item.auditStatus == 2) {
              item.auditStatus = '已驳回'
            }
          })
        }
        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)
      })
    },

    //企业登记列表数据
    getAppEmploymentRegistrationList (params) {
      getAppEmploymentRegistrationList(params).then(res => {
        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)
      })
    },

    // 扫码上报列表数据
    getAddressManageList (params) {
      getAddressManageList(params).then(res => {
        if (res.data.data.records.length > 0) {
          res.data.data.records.forEach(item => {
            if (item.resolveStatus == 0) {
              item.resolveStatus = '待审核'
            } else if (item.resolveStatus == 1) {
              item.resolveStatus = '已通过'
            } else if (item.resolveStatus == 2) {
              item.resolveStatus = '已驳回'
            }
            if (item.reportSource == 1) {
              item.reportSource = '扫码访问'
            } else if (item.reportSource == 2) {
              item.reportSource = '贴牌APP'
            } else if (item.reportSource == 3) {
              item.reportSource = '人工导入'
            }
          })
        }
        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)
      })
    },

    // 高度自适应
    setTableHeight () {
      this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
    },

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

  destroyed () {
    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>

 src/views/site/index.vue

@@ -10,86 +10,84 @@
-->

<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">
  <div class="site-page-home police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>场所类型：</span>
      <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <span>场所类型：</span>

                    <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 class="search-item-box">
                    <span>场所名称：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入场所名称" v-model="placeName"
                        @change="searchChange" clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">有隐患场所（{{ yhcsNum ? yhcsNum :
            '0'
                        }}）隐患总数（{{ yhNum ? yhNum :
            '0' }}）</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(2)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">已整改场所（{{ yzgcsNum ? yzgcsNum :
            '0'
                        }}）已整改隐患（{{ yzgyhNum ? yzgyhNum :
            '0' }}）</el-button>
                </div>
                <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(3)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">未整改场所（{{ wzgcsNum ? wzgcsNum :
            '0'
                        }}）未整改隐患（{{ wzgyhNum ? wzgyhNum :
            '0' }}）</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <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' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="placeName" :show-overflow-tooltip="true" label="场所名称"></el-table-column>
                    <el-table-column prop="location" :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" :page-size="pages.size" :total="pages.total"
                        :pager-count="4" :current-page="pages.current"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </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>

        <SiteDialogPopup ref="SiteDialogPopup"></SiteDialogPopup>
        <div class="search-item-box">
          <span>场所名称：</span>

          <el-input style="flex: 1;" size="small" placeholder="请输入场所名称" v-model="placeName" @change="searchChange"
            clearable></el-input>
        </div>

        <div class="search-item-box" style="justify-content: center;">
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(1)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">有隐患场所（{{
            yhcsNum ? yhcsNum :
              '0'
          }}）隐患总数（{{ yhNum ? yhNum :
              '0' }}）</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(2)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">已整改场所（{{
            yzgcsNum ? yzgcsNum :
              '0'
          }}）已整改隐患（{{ yzgyhNum ? yzgyhNum :
              '0' }}）</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(3)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">未整改场所（{{
            wzgcsNum ? wzgcsNum :
              '0'
          }}）未整改隐患（{{ wzgyhNum ? wzgyhNum :
              '0' }}）</el-button>
        </div>
      </div>

      <div class="list police-info" ref="tableBox">
        <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' }"
          :row-class-name="tableRowClassName" class="police-infor-table">
          <el-table-column prop="placeName" :show-overflow-tooltip="true" label="场所名称"></el-table-column>
          <el-table-column prop="location" :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" :page-size="pages.size" :total="pages.total"
            :pager-count="4" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>

    </div>

    <SiteDialogPopup ref="SiteDialogPopup"></SiteDialogPopup>
  </div>
</template>

<script>
@@ -99,259 +97,262 @@
let loading = null

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

    data() {
        return {
            boxShow: false,
            isDanger:null,
            placeName: '',
            typeValue: '',
            typeOptions: [],
  data () {
    return {
      boxShow: false,
      isDanger: null,
      placeName: '',
      typeValue: '',
      typeOptions: [],

            tableData: [],
            yhcsNum: 0,
            yhNum: 0,
            yzgcsNum: 0,
            yzgyhNum: 0,
            wzgcsNum: 0,
            wzgyhNum: 0,
            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
        }
    },

    created() {
        // 获取九小场所隐患数量统计
        this.getNineStatisticsNum()
        this.getNineTypeTree()
        this.getNinePage()
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
    },

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

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

    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: {
        // 是否有隐患
        filterBtn(isDanger){
            this.isDanger = isDanger;
            this.getNinePage()
        },
        // 获取九小场所隐患数量统计
        getNineStatisticsNum() {
            var that = this;
            getNineStatisticsNum({
                nineType: this.typeValue,
                placeName: this.placeName
            }).then(res => {
                const data = res.data.data;
                that.yhcsNum = data[0].total;
                that.yhNum = data[0].patrolNum;
                that.yzgcsNum = data[1].total;
                that.yzgyhNum = data[1].patrolNum;
                that.wzgcsNum = data[2].total;
                that.wzgyhNum = data[2].patrolNum;
            })
        },
        getNineTypeTree() {
            getNineTypeTree().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 切换登记类型
        typeChange() {
            this.pages.current = 1
            this.getNinePage()
            this.getNineStatisticsNum()
        },

        searchChange() {
            if (this.placeName.trim() == '') {
                this.pages.current = 1
                this.getNinePage()
                this.getNineStatisticsNum()
            }
        },

        searchBtn() {
            this.pages.current = 1
            this.getNinePage()
            this.getNineStatisticsNum()
        },

        // 分页处理
        handleCurrentChange(current) {
            this.pages.current = current
            this.getNinePage()
            this.getNineStatisticsNum()
        },

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

        getNinePage() {
            this.loading()

            getNinePage({
                current: this.pages.current,
                size: this.pages.size,
                nineType: this.typeValue,
                placeName: this.placeName,
                isDanger:this.isDanger
            }).then(res => {
                const data = res.data.data

                this.tableData = data.records
                this.pages.total = data.total

                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 点击定位
        rowClick(row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 2000
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`,
                },
                incident: this.siteClick
            })
        },

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

        siteClick(e) {
            this.$refs.SiteDialogPopup.initOpen(e.overlay.attrParams)
        },

        // 清空按钮-清除图标图层
        clearRow() {
            this.isDanger = null
            this.placeName = null
            this.typeValue = null
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
            this.pages.current = 1
            this.getNinePage()
            this.getNineStatisticsNum()
        },

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

    destroyed() {
        loading && loading.close()

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

        this.clearRow()
      tableData: [],
      yhcsNum: 0,
      yhNum: 0,
      yzgcsNum: 0,
      yzgyhNum: 0,
      wzgcsNum: 0,
      wzgyhNum: 0,
      pages: {
        current: 1,
        size: 22,
        total: 0,
        count: 0,
      },
    }
  },

  created () {
    // 获取九小场所隐患数量统计
    this.getNineStatisticsNum()
    this.getNineTypeTree()
    this.getNinePage()
    const that = this

    that.$nextTick(() => {
      initMapPosition()
    })
  },

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

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

  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: {
    // 是否有隐患
    filterBtn (isDanger) {
      this.isDanger = isDanger
      this.getNinePage()
    },
    // 获取九小场所隐患数量统计
    getNineStatisticsNum () {
      var that = this
      getNineStatisticsNum({
        nineType: this.typeValue,
        placeName: this.placeName
      }).then(res => {
        const data = res.data.data
        that.yhcsNum = data[0].total
        that.yhNum = data[0].patrolNum
        that.yzgcsNum = data[1].total
        that.yzgyhNum = data[1].patrolNum
        that.wzgcsNum = data[2].total
        that.wzgyhNum = data[2].patrolNum
      })
    },
    getNineTypeTree () {
      getNineTypeTree().then(res => {
        this.typeOptions = res.data.data
      })
    },

    // 切换登记类型
    typeChange () {
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },

    searchChange () {
      if (this.placeName.trim() == '') {
        this.pages.current = 1
        this.getNinePage()
        this.getNineStatisticsNum()
      }
    },

    searchBtn () {
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },

    // 分页处理
    handleCurrentChange (current) {
      this.pages.current = current
      this.getNinePage()
      this.getNineStatisticsNum()
    },

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

    getNinePage () {
      this.loading()

      getNinePage({
        current: this.pages.current,
        size: this.pages.size,
        nineType: this.typeValue,
        placeName: this.placeName,
        isDanger: this.isDanger
      }).then(res => {
        const data = res.data.data

        this.tableData = data.records
        this.pages.total = data.total

        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    // 点击定位
    rowClick (row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000
      })

      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'scanLayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          size: [25.8, 32.4],
          url: `/img/icon/site.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
        incident: this.siteClick
      })
    },

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

    siteClick (e) {
      this.$refs.SiteDialogPopup.initOpen(e.overlay.attrParams)
    },

    // 清空按钮-清除图标图层
    clearRow () {
      this.isDanger = null
      this.placeName = null
      this.typeValue = null
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },

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

  destroyed () {
    loading && loading.close()

    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 {
    display: flex;
    flex-direction: column;
  display: flex;
  flex-direction: column;

    .pages {
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .pages {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>