点击定位关闭列表弹窗

shuishen

2024-12-10 477de1f0f6a4866ac968806f9bfcef80547973ec

点击定位关闭列表弹窗

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

@@ -1,14 +1,7 @@
<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"
    >
    <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>
        场所类型：
@@ -32,37 +25,20 @@
          场所名称：
          <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
        >
        <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',
          }"
        >
      <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>
@@ -73,34 +49,14 @@
              }}</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 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 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"
@@ -115,14 +71,8 @@
        </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>
          <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>
@@ -135,12 +85,12 @@
  getNineTypeTree,
  getNinePage,
  getNineStatisticsNum,
} from "@/api/site/index.js";
} from "@/api/site/index.js"

export default {
  props: ["policeStaionID"],

  data() {
  data () {
    return {
      type: null,
      isDanger: null,
@@ -166,11 +116,11 @@
      },
      nineType: "",
      policeName: "",
      areaId:null
    };
      areaId: null
    }
  },
  computed: {
    positionColor() {
    positionColor () {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
@@ -178,14 +128,14 @@
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return "#1AFA29";
          return "#1AFA29"
        } else {
          return "#ccc";
          return "#ccc"
        }
      };
      }
    },

    positionDisabled() {
    positionDisabled () {
      return (row) => {
        if (
          (row.X && row.X != 0) ||
@@ -193,29 +143,32 @@
          (row.longitude && row.longitude != 0) ||
          (row.x && row.x != 0)
        ) {
          return false;
          return false
        } else {
          return true;
          return true
        }
      };
      }
    },
  },
  methods: {
    // 点击定位
    rowClick(row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0];
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1];
    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",
@@ -228,36 +181,36 @@
          url: `/img/icon/site.png`,
        },
        incident: this.siteClick,
      });
      })
    },
    // 查看详情
    goDetail(row) {
      this.$refs.SiteDialogPopup.initOpen(row);
    goDetail (row) {
      this.$refs.SiteDialogPopup.initOpen(row)
    },

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

    // 清空按钮-清除图标图层
    clearRow() {
      this.isDanger = null;
      this.placeName = null;
      this.typeValue = null;
    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();
      })
      this.$store.commit("SET_DIALOGDETAILPOPUP", false)
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },
    // 切换登记类型
    typeChange(item) {
      this.pages.current = 1;
      this.getNinePage();
      this.getNineStatisticsNum();
    typeChange (item) {
      this.pages.current = 1
      this.getNinePage()
      this.getNineStatisticsNum()
    },
    /**
     * @description: 显示九小场所弹窗列表
@@ -267,96 +220,96 @@
     * @param {*} value 类型参数
     * @return {*}
     */
    showplacedetail(type, name, value,areaId) {
      this.type = type;
    showplacedetail (type, name, value, areaId) {
      this.type = type
      this.areaId = areaId
      this.visible = true;
      this.title = name;
      this.pages.current = 1;
      this.visible = true
      this.title = name
      this.pages.current = 1
      // 获取九小场所隐患数量统计
      this.getNineStatisticsNum();
      this.getNineTypeTree(value);
      this.getNineStatisticsNum()
      this.getNineTypeTree(value)
      // this.getNinePage();
    },
    // 获取九小场所隐患数量统计
    getNineStatisticsNum() {
      var that = this;
    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;
      });
        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 (value) {
      getNineTypeTree().then((res) => {
        var data = res.data.data;
        var data = res.data.data
        if (value) {
          var arr = [];
          var arr = []
          data.forEach((element) => {
            if (element.title == value) {
              arr.push({
                title: element.title,
                value: element.key,
              });
              this.typeValue = "" + element.key;
              })
              this.typeValue = "" + element.key
            }
          });
          this.typeOptions = arr;
          })
          this.typeOptions = arr
          // 查询分页
          this.getNinePage();
          this.getNinePage()
        } else {
          this.typeOptions = data;
          this.typeOptions = data
        }
      });
      })
    },
    getNinePage() {
      this.curLoading = true;
    getNinePage () {
      this.curLoading = true
      getNinePage({
        current: this.pages.current,
        size: this.pages.pageSize,
        nineType: this.typeValue,
        placeName: this.placeName,
        isDanger: this.type==1?1:"",
        isDanger: this.type == 1 ? 1 : "",
        deptId: this.policeStaionID,
        areaId:this.areaId
        areaId: this.areaId
      })
        .then((res) => {
          const data = res.data.data;
          this.tableData = data.records;
          this.pages.total = data.total;
          const data = res.data.data
          this.tableData = data.records
          this.pages.total = data.total
          setTimeout(() => {
            this.curLoading = false;
          }, 300);
            this.curLoading = false
          }, 300)
        })
        .catch((error) => {
          setTimeout(() => {
            this.curLoading = false;
          }, 300);
        });
            this.curLoading = false
          }, 300)
        })
    },

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

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

    /**
@@ -364,21 +317,21 @@
     * @param {*} currentPage 当前页数
     * @return {*}
     */
    handleCurrentChange(currentPage) {
      this.pages.current = currentPage;
      this.getNinePage();
    handleCurrentChange (currentPage) {
      this.pages.current = currentPage
      this.getNinePage()
    },
    landBeforeClose() {
      this.visible = false;
    landBeforeClose () {
      this.visible = false
    },
  },
  destroyed () {
    this.$EventBus.$emit("mapRemoveLayer", {
        layerName: "scanLayer",
        type: "VectorLayer",
      });
      layerName: "scanLayer",
      type: "VectorLayer",
    })
  }
};
}
</script>

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