fix: 文明创城场景视频标签改为单选，道路保洁中间地图的可查看详情，线索增加互动

2022-12-19 17:12:08 +08:00 · 2022-12-19 17:12:08 +08:00 · 51acd341f8
parent ad3128bb2e
commit 51acd341f8
6 changed files with 272 additions and 17 deletions
--- a/src/supermap/advance-init.js
+++ b/src/supermap/advance-init.js
@ -22,6 +22,7 @@ import {
    createSearchAddressTitlePop,
    createCameraDetailsPop,
    createRoadGovernancePop,
+    createRoadIssuePop,
    createEventListDetailsPop,
    createEventListDetailsPopNew,
    createImportantAreaPopNew,
@ -178,6 +179,18 @@ export function MapFun(mapObj) {
                // debugger
            L.popup({ className: 'roadGovernance-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
        }
+        /**
+         * 添加道路工地、渣土车等详情
+         * @private
+         */
+    const _openPopupRoadIssue = function(feature) {
+        // debugger;
+        const allMapObject = { mapObj: mapObj }
+        const elementHtml = createRoadIssuePop(feature, allMapObject)
+        console.log(allMapObject)
+            // debugger
+        L.popup({ className: 'roadIssue-popup' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
+    }
        /**
         * 根据图层名数组移除图层
         * @param layerNameArray {Array} 图层名
@ -2109,6 +2122,7 @@ export function MapFun(mapObj) {
        openPopupVideoSurveillance: _openPopupVideoSurveillance,
        openPopupEventDetailNew: _openPopupEventDetailNew,
        openPopupRoadGovernance: _openPopupRoadGovernance,
+        openPopupRoadIssue: _openPopupRoadIssue,
        closeAllPopup: _closeAllPopup,
        addMovingMarker: _addMovingMarker,
        addResourceOnMapWithoutSuperMapCluster: _addResourceOnMapWithoutSuperMapCluster,
--- a/src/supermap/createMarkerPopup.js
+++ b/src/supermap/createMarkerPopup.js
@ -30,6 +30,7 @@ import CameraDetailsPop from '@/views/pages/videoSurveillance/components/CameraD
 import SearchAddressTitlePop from '@/views/pages/videoSurveillance/components/SearchAddressTitlePop'
 import { selectByChannelCode } from '@/api/videoSurveillance/index.js'
 import RoadGovernancePop from '@/views/pages/roadGovernance/components/RoadGovernancePop'
+import RoadIssuePop from '@/views/pages/roadGovernance/components/RoadIssuePop'
 import EventListDetailsPop from '@/views/pages/civilizedCity/components/EventListDetailsPop'
 import EventListDetailsPopNew from '@/views/pages/civilizedCity/components/EventListDetailsPopNew'
 import SiteListPop from '@/views/pages/construction/components/SiteListPop'
@ -156,6 +157,28 @@ function createRoadGovernancePop(feature, allMapObject) {
    })
    return popupDom.initDom()
 }
+//道路污染渣土车工地等详情弹窗
+function createRoadIssuePop(feature, allMapObject) {
+    const popupDom = new Dom({
+        template: '<Road-Issue-pop :feature="feature" :allMapObject="allMapObject"></Road-Issue-pop>',
+        data() {
+            return {
+                feature: feature,
+                allMapObject: allMapObject,
+            }
+        },
+        created() {
+            // this.allMapObject = allMapObject
+            // console.log('allMapObject', this.allMapObject)
+            // console.log('allMapObject', allMapObject)
+            // debugger
+        },
+        components: {
+            RoadIssuePop
+        }
+    })
+    return popupDom.initDom()
+}
 // 隔离酒店弹窗
 function createIsolationHotelPop(feature) {
    const popupDom = new Dom({
@ -754,6 +777,7 @@ export {
    createCameraDetailsPop,
    createSearchAddressTitlePop,
    createRoadGovernancePop,
+    createRoadIssuePop,
    createEventListDetailsPop,
    createEventListDetailsPopNew,
    createSiteListPop,
--- a/src/views/pages/civilizedCity/index.vue
+++ b/src/views/pages/civilizedCity/index.vue
@ -550,6 +550,17 @@ export default {
      })
    },
    tabChange (item) {
+      if(this.checkboxGroup.length > 1 ) {
+        let originItem = this.checkboxGroup.shift()
+        this.hiMapFun.removeLayerByLayerName(originItem)
+        this.checkStatus = '2'
+        this.camreaTreeIsShow = true
+        getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
+          (res) => {
+            this.camreaTree = res.data.data
+          }
+        )
+      }
      if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
        if (item.labelName == '全部') {
          this.addResourceTomap('全部', this.cameraAllData)
--- a/src/views/pages/roadGovernance/components/CauseAnalysis.vue
+++ b/src/views/pages/roadGovernance/components/CauseAnalysis.vue
@ -26,7 +26,8 @@
                class="table"
                :data="buildingData"
                height="250"
-                :cell-style="{ color: '#fff', 'text-align': 'center' }"
+                @row-click="handleRowClick"
+                :cell-style="{ color: '#fff', 'text-align': 'center',cursor: 'pointer' }"
                :header-cell-style="{ color: '#fff', 'text-align': 'center' }"
              >
                <el-table-column width="60" label="序号" type="index">
@ -46,7 +47,8 @@
                class="table"
                :data="slagTruckData"
                height="250"
-                :cell-style="{ color: '#fff', 'text-align': 'center' }"
+                @row-click="handleRowClick"
+                :cell-style="{ color: '#fff', 'text-align': 'center',cursor: 'pointer' }"
                :header-cell-style="{ color: '#fff', 'text-align': 'center' }"
              >
                <el-table-column width="60" label="序号" type="index">
@ -62,7 +64,8 @@
                class="table"
                :data="sanitationTruckData"
                height="250"
-                :cell-style="{ color: '#fff', 'text-align': 'center' }"
+                @row-click="handleRowClick"
+                :cell-style="{ color: '#fff', 'text-align': 'center',cursor: 'pointer' }"
                :header-cell-style="{ color: '#fff', 'text-align': 'center' }"
              >
                <el-table-column width="60" label="序号" type="index">
@ -260,6 +263,26 @@ export default {
    },
    selectShowOnMap (type, selectStatus) {
      this.$emit('selectShowOnMap', type, selectStatus)
+    },
+    handleRowClick(data) {
+      let type = "";
+      let lat = 0
+      let lng = 0
+      if(this.tabsActiveName === '建筑工地') {
+        type = "construction"
+        lat = data.wd 
+        lng = data.jd
+      } else if(this.tabsActiveName === '渣土车') {
+        type = 'slagTruck'
+        lat = data.latitude 
+        lng = data.longitude
+      } else {
+        type = 'sanitationTruck'
+        lat = parseFloat(data.wd) 
+        lng = parseFloat(data.jd)
+      }
+      let postData = Object.assign(data, { type, lat, lng})
+      this.$emit('clueRowClick', postData)
    }
  },
  created () {},
@ -359,7 +382,9 @@ export default {
      .cell {
        font-size: 14px;
      }
-
+      .el-table--enable-row-hover .el-table__body tr:hover > td {
+        background-color: rgba($color: #66ffff, $alpha: 0.2) !important;
+      }
      .table-title-box {
        display: flex;
        .el-checkbox {
--- a/src/views/pages/roadGovernance/components/RoadIssuePop.vue
+++ b/src/views/pages/roadGovernance/components/RoadIssuePop.vue
@ -0,0 +1,154 @@
+<template>
+  <div class="pop-box">
+    <div class="details-pop">
+        <div class="title">详情信息</div>
+        <div>
+            <div class="top">
+              <template v-if="feature.data.type === 'slagTruck'">
+                <p><span>车牌号：</span><span>{{feature.data.simCardNum||''}}</span></p>
+                <p><span>所属单位：</span><span>{{feature.data.status||''}}</span></p>
+                <p><span>更新时间：</span><span>{{feature.data.updateTime||''}}</span></p>
+              </template>
+              <template v-else-if="feature.data.type === 'sanitationTruck'">
+                <p><span>车牌号：</span><span>{{feature.data.cph||''}}</span></p>
+                <p><span>作业类型：</span><span>清扫</span></p>
+              </template>
+              <template v-else-if="feature.data.type === 'construction'">
+                <p><span>项目名称：</span><span>{{feature.data.gdmc||''}}</span></p>
+                <p><span>位置：</span><span>{{feature.data.sgwz||''}}</span></p>
+                <p><span>所属地区：</span><span>{{feature.data.ssdq||''}}</span></p>
+              </template>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from '@/views/layout/bus'
+export default {
+  name: '',
+  components: {},
+  props: {
+    feature: {
+      type: Object,
+      default: () => {
+        return {
+        }
+      }
+    },
+    allMapObject: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  mounted () {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    analyse (data) {
+      console.log('线索分析', data)
+      bus.$emit('openCauseAnalysis', data)
+      // this.allMapObject.mapObj.map.closePopup();
+    }
+  }
+}
+</script>
+<style lang="scss">
+.leaflet-popup {
+  width: auto !important
+}
+.roadIssue-popup {
+  .leaflet-popup-content {
+    width: unset !important;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.details-pop {
+
+  width: 350px;
+  // height: 4200px;
+  color: black;
+  background: rgba(24,48,76,0.9);
+  position: relative;
+  .item {
+    width: 100%;
+    display: flex;
+  }
+  & > div:nth-of-type(2) {
+    // height: 110px;
+    overflow-y: scroll;
+    padding-bottom: 15px;
+  }
+  & > div:nth-of-type(2)::-webkit-scrollbar {
+    width: 0 !important;
+  }
+  .top {
+    padding: 0 10px;
+    display: flex;
+    flex-wrap: wrap;
+    p {
+      width: 100%;
+      display: flex;
+      margin:7px;
+      font-size: 20px;
+      span {
+        color: #fff;
+      }
+      span:nth-of-type(1) {
+        // width: 70px;
+        margin-left: 10px;
+        white-space: nowrap;
+      }
+    }
+    .pic {
+      span {
+        margin-left: 10px;
+      }
+      span:nth-of-type(1) {
+        margin-left: 10px;
+      }
+      span:nth-of-type(2) {
+        margin-left: 0;
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    margin: 20px 150px 30px;
+  }
+}
+.button {
+    width: 144px;
+    height: 50px;
+    background: url("~@/assets/img/roadGovernancePop.png") no-repeat;
+    color: #082d36;
+    margin:0 0 10px 100px;
+    line-height:10px;
+    text-align: center;
+    border: none;
+    cursor: pointer;
+}
+::v-deep .el-upload-list__item:first-child {
+  margin-top: -25px;
+}
+.title {
+  height: 50px;
+  padding: 0 10px;
+  line-height: 50px;
+  font-size: 20px;
+  color: #66ffff;
+  // background: #304c76;
+  position: relative;
+  background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px center;
+  span {
+    position: absolute;
+    right: 10px;
+  }
+}
+</style>
--- a/src/views/pages/roadGovernance/components/RoadMain.vue
+++ b/src/views/pages/roadGovernance/components/RoadMain.vue
@ -76,6 +76,7 @@
        :slagTruckData="slagTruckData"
        @close="close"
        @selectShowOnMap="selectShowOnMap"
+        @clueRowClick="handleClueRowClick"
      ></cause-analysis>
    </div>

@ -135,6 +136,7 @@ import {
 import TiledMap from '@/views/pages/mapHome/components/tiledMap'
 import {
  createRoadGovernancePop,
+  createRoadIssuePop,
  createCameraDetailsPop
 } from '@/supermap/createMarkerPopup'
 import CauseAnalysis from '@/views/pages/roadGovernance/components/CauseAnalysis'
@ -417,11 +419,13 @@ export default {
        const arr = [0, 0.0, '', '0', '0.0']
        if (arr.indexOf(item.wd) == -1) {
          dataEvent.push({
-            latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+            latLng: { lat: Number(item.wd), lng: Number(item.jd) },
+            type: "road",
+            data: Object.assign(item, { type: 'construction'})
          })
        }
      })
-      this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building')
+      this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building', createRoadIssuePop)
    },
    // 根据经纬度和半径查询渣土车
    async listSedimentTrailByPoints (data) {
@ -461,11 +465,13 @@ export default {
          latLng: {
            lat: Number(this.slagTruckData[key].latitude),
            lng: Number(this.slagTruckData[key].longitude)
-          }
+          },
+          type: 'road',
+          data: Object.assign(this.slagTruckData[key], { type: 'slagTruck'})
        })
      }
      // debugger
-      this.hiMapFun.addPointsToMap(dataEvent, 'slagTruck.png', 'slagTruck')
+      this.hiMapFun.addPointsToMap(dataEvent, 'slagTruck.png', 'slagTruck', createRoadIssuePop)
    },
    // 根据经纬度和半径查询环卫车
    async listTrailSanitationByPoints (data) {
@ -505,14 +511,17 @@ export default {
        const arr = [0, 0.0, '', '0', '0.0']
        if (arr.indexOf(item.wd) == -1) {
          dataEvent.push({
-            latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+            latLng: { lat: Number(item.wd), lng: Number(item.jd) },
+            type: 'road',
+            data: Object.assign(item, { type: 'sanitationTruck'})
          })
        }
      })
      this.hiMapFun.addPointsToMap(
        dataEvent,
        'sanitationTruck.png',
-        'sanitationTruck'
+        'sanitationTruck',
+        createRoadIssuePop
      )
    },
    // 根据经纬度和半径查询摄像头
@ -614,14 +623,17 @@ export default {
                    latLng: {
                      lat: Number(item.latitude),
                      lng: Number(item.longitude)
-                    }
+                    },
+                    type: 'road',
+                    data: Object.assign(item, { type: 'slagTruck'})
                  })
                }
              })
              this.hiMapFun.addPointsToMap(
                dataEvent,
                'slagTruck.png',
-                'slagTruckAll'
+                'slagTruckAll',
+                createRoadIssuePop
              )
            })
            break
@ -632,14 +644,17 @@ export default {
                const arr = [0, 0.0, '', '0', '0.0']
                if (arr.indexOf(item.wd) == -1) {
                  dataEvent.push({
-                    latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+                    latLng: { lat: Number(item.wd), lng: Number(item.jd)},
+                    type: 'road',
+                    data: Object.assign(item, { type: 'sanitationTruck'})
                  })
                }
              })
              this.hiMapFun.addPointsToMap(
                dataEvent,
                'sanitationTruck.png',
-                'sanitationTruckAll'
+                'sanitationTruckAll',
+                createRoadIssuePop
              )
            })
            break
@ -650,14 +665,17 @@ export default {
                const arr = [0, 0.0, '', '0', '0.0']
                if (arr.indexOf(item.wd) == -1) {
                  dataEvent.push({
-                    latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+                    latLng: { lat: Number(item.wd), lng: Number(item.jd) },
+                    type: 'road',
+                    data: Object.assign(item, { type: 'construction'})
                  })
                }
              })
              this.hiMapFun.addPointsToMap(
                dataEvent,
                'building.png',
-                'buildingAll'
+                'buildingAll',
+                createRoadIssuePop
              )
            })
            break
@ -720,7 +738,7 @@ export default {
              const arr = [0, 0.0, '', '0', '0.0']
              if (arr.indexOf(item.wd) == -1) {
                dataEvent.push({
-                  latLng: { lat: Number(item.wd), lng: Number(item.jd) }
+                  latLng: { lat: Number(item.wd), lng: Number(item.jd) },
                })
              }
            })
@ -751,6 +769,15 @@ export default {
          break
      }
    },
+    // 行点击线索
+    handleClueRowClick(data) {
+      this.hiMap.mapObj.map.flyTo({ lat: data.lat + 0.007, lng: data.lng }, 13)
+      const feature = {
+        latLng: { lat: data.lat, lng: data.lng },
+        data: data
+      }
+      this.hiMapFun.openPopupRoadIssue(feature)
+    },
    // 路网上图
    roadOnMap () {
      this.roadData.forEach((item) => {