九小场所、其它场所根据不同类型显示不同图标上图，点击图标可以显示popup弹窗

shuishen

2024-12-19 bbb668971ed43746a548145c74c7db9912d7df1f

九小场所、其它场所根据不同类型显示不同图标上图，点击图标可以显示popup弹窗

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

New file
@@ -0,0 +1,292 @@
<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" :before-close="landBeforeClose" :modal="true"
      :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box">
      <div class="header">
        <div>
          场所名称：
          <input type="text" v-model="placeName" placeholder="请输入场所名称" />
        </div>
        <el-button type="primary" icon="el-icon-search" @click="getNinePage">搜索</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="clearSearchValue">清空</el-button>
      </div>
      <div v-loading="curLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
          'text-align': 'center',
          'background-color': '#203c60',
          borderColor: '#324e75',
        }" :cell-style="{
          'text-align': 'center',
          borderColor: '#324e75',
          cursor: 'default',
        }">
          <template slot="empty">
            <div>{{ landEmptyText }}</div>
          </template>
          <el-table-column label="序号" type="index" align="center">
            <template slot-scope="scope">
              <span>{{
                (pages.current - 1) * pages.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="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, total" :total="pages.total" :page-size="pages.pageSize"
            :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

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

export default {
  props: ["policeStaionID"],

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

      curLoading: false,
      landEmptyText: "",
      visible: false,
      title: "九小场所列表",
      callPhone: "",
      pages: {
        total: 0,
        pageSize: 12,
        current: 1,
      },
      nineType: "",
      policeName: "",
      areaId: null
    }
  },
  computed: {
    positionColor () {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
          (row.lng && row.lng != 0) ||
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return "#1AFA29"
        } else {
          return "#ccc"
        }
      }
    },

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

      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.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,
      })

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

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

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

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

      // eslint-disable-next-line no-redeclare
      var popup = new global.DC.DivForms(global.viewer, {
        domId: 'PlaceBaseDivElementDom',
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(row.lng),
              Number(row.lat),
              0
            )
          )
        ]
      })
    },
    // 查看详情
    // goDetail (row) {
    //   this.$refs.SiteDialogPopup.initOpen(row)
    // },

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

    getNinePage () {
      this.curLoading = true
      getNinePage({
        current: this.pages.current,
        size: this.pages.pageSize,
        poiCode: this.poiCode,
        placeName: this.placeName,
        deptId: this.policeStaionID,
        areaId: this.areaId,
      }, false)
        .then((res) => {
          const data = res.data.data
          this.tableData = data.records
          this.pages.total = data.total
          setTimeout(() => {
            this.curLoading = false
          }, 300)
        })
        .catch((error) => {
          setTimeout(() => {
            this.curLoading = false
          }, 300)
        })
    },

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

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

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

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

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

@@ -80,10 +80,64 @@
</template>

<script>
const typeTree = [
  {
    key: "1",
    url: `/img/icon/place_01.png`
  },
  {
    key: "2",
    url: `/img/icon/place_02.png`
  },
  {
    key: "10",
    url: `/img/icon/place_03.png`
  },
  {
    key: "11",
    url: `/img/icon/place_03.png`
  },
  {
    key: "12",
    url: `/img/icon/place_03.png`
  },
  {
    key: "13",
    url: `/img/icon/place_04.png`
  },
  {
    key: "14",
    url: `/img/icon/place_04.png`
  },
  {
    key: "15",
    url: `/img/icon/place_04.png`
  },
  {
    key: "5",
    url: `/img/icon/place_05.png`
  },
  {
    key: "6",
    url: `/img/icon/place_06.png`
  },
  {
    key: "7",
    url: `/img/icon/place_07.png`
  },
  {
    key: "8",
    url: `/img/icon/place_08.png`
  },
  {
    key: "9",
    url: `/img/icon/place_09.png`
  }
]

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

export default {
@@ -97,12 +151,7 @@
      typeValue: "",
      typeOptions: [],
      tableData: [],
      yhcsNum: 0,
      yhNum: 0,
      yzgcsNum: 0,
      yzgyhNum: 0,
      wzgcsNum: 0,
      wzgyhNum: 0,

      curLoading: false,
      landEmptyText: "",
      visible: false,
@@ -118,6 +167,7 @@
      areaId: null
    }
  },

  computed: {
    positionColor () {
      return (row) => {
@@ -150,17 +200,51 @@
    },
  },
  methods: {
    // 点击定位
    rowClick (row) {
      this.landBeforeClose()

      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', {
      this.$EventBus.$emit("toPosition", {
        siteJd: lng,
        siteWd: lat,
        siteGd: 200
        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: [32, 32],
          url: typeTree.find(i => i.key == row.nineType).url,
        },
        incident: this.siteClick,
      })

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

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

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

@@ -172,8 +256,8 @@
        position: [
          global.DC.Transform.transformWGS84ToCartesian(
            new global.DC.Position(
              Number(lng),
              Number(lat),
              Number(row.lng),
              Number(row.lat),
              0
            )
          )
@@ -198,13 +282,11 @@
      this.$store.commit("SET_DIALOGDETAILPOPUP", false)
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },
    // 切换登记类型
    typeChange (item) {
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },
    /**
     * @description: 显示九小场所弹窗列表
@@ -221,26 +303,10 @@
      this.title = name
      this.pages.current = 1
      // 获取九小场所隐患数量统计
      this.getNineStatisticsNum()
      this.getNineTypeTree(value)
      // 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 (value) {
      getNineTypeTree().then((res) => {
        var data = res.data.data
@@ -320,6 +386,10 @@
    },
  },
  destroyed () {
    this.$EventBus.$emit("mapRemoveLayer", {
      layerName: "scanLayer",
      type: "VectorLayer",
    })
    this.$store.commit('SET_PLACEBASEPOPUP', false)
  }
}