BUG 28556 28553

project/shandong10086/apps/shandong/monitor/AppMonitorManage/AppMonitorManage.vue

@@ -1,6 +1,7 @@
 <template>
   <section class="AppMonitorManage">
-    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict" @treeCommand="handleSliderOption" @select="handleSelectMonitor"
+    <device-slider :permissions="permissions" :show.sync="slider" :ins="instance" :dict="dict"
+                   @treeCommand="handleSliderOption" @select="handleSelectMonitor"
                    :render-item="renderTreeItem" ref="DeviceSlider"/>
     <div class="monitorPane">
       <div class="headerBar">
@@ -12,13 +13,13 @@
       </div>
       <div class="videoList">
         <div
-          class="videoBox"
-          v-for="(m,i) in monitors"
-          :key="m.id"
-          @mouseenter.stop="m.isShowPlayBtn = true"
-          @mouseleave.stop="m.isShowPlayBtn = false"
-          :style="currentSplitStyle">
-            <AiMonitor :src="m.url" type="slw"></AiMonitor>
+            class="videoBox"
+            v-for="(m,i) in monitors"
+            :key="m.id"
+            @mouseenter.stop="m.isShowPlayBtn = true"
+            @mouseleave.stop="m.isShowPlayBtn = false"
+            :style="currentSplitStyle">
+          <AiMonitor :src="m.url" type="slw"></AiMonitor>
           <span>{{ m.name }}</span>
           <div class="videoBox-close" @click="removeMonitor(i)" v-if="m.isShowPlayBtn">
             <i class="el-icon-circle-close"></i>
@@ -36,181 +37,182 @@
       </el-form>
     </ai-dialog>
     <locate-dialog v-model="locate" :ins="instance" :latlng="latlng" @confirm="v=>handleLocate(selected,v)"/>
-    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId" :instance="instance" ref="BindArea"
+    <ai-area custom-clicker :input-clicker="false" :hideLevel="disabledLevel" v-model="selected.areaId"
+             :instance="instance" ref="BindArea"
              @change="handleSubmit(selected)"/>
   </section>
 </template>
 
 <script>
-  import { mapState } from 'vuex'
-  import DeviceSlider from "../components/deviceSlider";
-  import LocateDialog from "../components/locateDialog";
-  import AiMonitor from "../../../../../dvui/components/AiMonitor/AiMonitor";
+import {mapState} from 'vuex'
+import DeviceSlider from "../components/deviceSlider";
+import LocateDialog from "../components/locateDialog";
+import AiMonitor from "../../../../../dvui/components/AiMonitor/AiMonitor";
 
-  export default {
-    name: "AppMonitorManage",
-    components: {LocateDialog, DeviceSlider, AiMonitor},
-    label: "监控实况",
-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function
+export default {
+  name: "AppMonitorManage",
+  components: {LocateDialog, DeviceSlider, AiMonitor},
+  label: "监控实况",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    splitOps() {
+      return [
+        {label: "单分屏", value: 1, per: "100%"},
+        {label: "四分屏", value: 4, per: "49%"},
+        {label: "九分屏", value: 9, per: "32%"}
+      ]
     },
-    computed: {
-      splitOps() {
-        return [
-          {label: "单分屏", value: 1, per: "100%"},
-          {label: "四分屏", value: 4, per: "49%"},
-          {label: "九分屏", value: 9, per: "32%"}
-        ]
-      },
-      currentSplitStyle() {
-        let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
-        return {width: per, height: per}
-      },
-      ...mapState(['user'])
+    currentSplitStyle() {
+      let per = this.splitOps.find(e => e.value == this.splitScreen)?.per || "100%"
+      return {width: per, height: per}
     },
+    ...mapState(['user'])
+  },
 
-    data() {
-      return {
-        slider: true,
-        fullscreen: false,
-        splitScreen: 1,
-        monitors: [],
-        dialog: false,
-        locate: false,
-        selected: {
-          areaId: ''
-        },
-        videoUrl: '',
-        latlng: null,
-        disabledLevel: 0,
-        rules: {
-          name: [{required: true, message: "请填写 设备名称"}]
-        }
+  data() {
+    return {
+      slider: true,
+      fullscreen: false,
+      splitScreen: 1,
+      monitors: [],
+      dialog: false,
+      locate: false,
+      selected: {
+        areaId: ''
+      },
+      videoUrl: '',
+      latlng: null,
+      disabledLevel: 0,
+      rules: {
+        name: [{required: true, message: "请填写 设备名称"}]
+      }
+    }
+  },
+
+  created() {
+    this.selected.areaId = this.user.info.areaId
+    this.disabledLevel = this.user.info.areaList.length - 1
+  },
+
+  methods: {
+    handleFullscreen() {
+      this.fullscreen = !this.fullscreen
+      this.$fullscreen(this.fullscreen)
+    },
+    handleSelectMonitor(monitor) {
+      if (monitor.type !== '1') return
+
+      let {id} = monitor,
+          index = this.monitors.findIndex(e => e.id == id)
+      if (index > -1) {
+        this.$message.error('该监控视频已存在')
+      } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
+        this.$message.error("可分屏监控已满,请先取消其他的监控")
+      } else {
+        this.showMonitor(monitor)
       }
     },
 
-    created () {
-      this.selected.areaId = this.user.info.areaId
-      this.disabledLevel = this.user.info.areaList.length - 1
+    onChange(e) {
+      if (e === 1 && this.monitors.length) {
+        this.monitors = [this.monitors[0]]
+      }
     },
 
-    methods: {
-      handleFullscreen() {
-        this.fullscreen = !this.fullscreen
-        this.$fullscreen(this.fullscreen)
-      },
-      handleSelectMonitor(monitor) {
-        if (monitor.type !== '1') return
+    removeMonitor(i) {
+      this.monitors.splice(i, 1)
+    },
 
-        let {id} = monitor,
-            index = this.monitors.findIndex(e => e.id == id)
-        if (index > -1) {
-          this.$message.error('该监控视频已存在')
-        } else if (this.monitors.length >= this.splitScreen && this.splitScreen > 1) {
-          this.$message.error("可分屏监控已满,请先取消其他的监控")
-        } else {
-          this.showMonitor(monitor)
-        }
-      },
-
-      onChange (e) {
-        if (e === 1 && this.monitors.length) {
-          this.monitors = [this.monitors[0]]
-        }
-      },
-
-      removeMonitor (i) {
-        this.monitors.splice(i, 1)
-      },
-
-      showMonitor(monitor, refresh = false) {
-        let {id: deviceId} = monitor
-        deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
-          params: {deviceId}
-        }).then(res => {
-          if (res?.data) {
-            this.videoUrl = res.data
-            let data = {
-              url: res.data,
-              isShowPlayBtn: false
-            }
-            if (refresh) {
-              monitor.url = data.url
-            } else if (this.splitScreen == 1) {
-              this.monitors = [{...monitor, ...data}]
-            } else {
-              if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
-                this.monitors.push({...monitor, ...data})
-              }
+    showMonitor(monitor, refresh = false) {
+      let {id: deviceId} = monitor
+      deviceId && this.instance.post("/app/appzyvideoequipment/getWebSdkUrl", null, {
+        params: {deviceId}
+      }).then(res => {
+        if (res?.data) {
+          this.videoUrl = res.data
+          let data = {
+            url: res.data,
+            isShowPlayBtn: false
+          }
+          if (refresh) {
+            monitor.url = data.url
+          } else if (this.splitScreen == 1) {
+            this.monitors = [{...monitor, ...data}]
+          } else {
+            if (this.monitors.findIndex(e => e.id == monitor.id) === -1 && this.monitors.length <= this.splitScreen) {
+              this.monitors.push({...monitor, ...data})
             }
           }
-        })
-      },
-      renderTreeItem: function (h, {node, data}) {
-        let show = data.deviceStatus==1 ? 'show' : ''
-        if (node.isLeaf) {
-          return (
-              <div class="flexRow">
-                <i class={['iconfont', 'iconshipinjiankong', show]}/>
-                <div>{node.label}</div>
-              </div>
-          )
-        } else return (
+        }
+      })
+    },
+    renderTreeItem: function (h, {node, data}) {
+      let show = data.deviceStatus == 1 ? 'show' : ''
+      if (node.isLeaf) {
+        return (
             <div class="flexRow">
+              <i class={['iconfont', 'iconshipinjiankong', show]}/>
               <div>{node.label}</div>
-              {data.id != 'no_area' ? <div class="sta">
-                    <p>{data.online || 0}</p>/{data.sum || 0}
-                  </div>
-                  : <div/>}
             </div>
         )
-      },
-      handleSliderOption(e) {
-        console.log(e)
-        this.selected = {
-          command: e.type,
-          ...e.node
-        }
-        this.selected.areaId = e.node.areaId || this.user.info.areaId
-        if (e.type == "edit") {//修改名称
-          this.dialog = true
-        } else if (e.type  == "area") {//绑定areaId
-          this.$refs.BindArea?.chooseArea()
-        } else if (e.type  == "locate") {//地图标绘
-          this.latlng = e.node.lat && e.node.lng ? {
-            lat: e.node.lat,
-            lng: e.node.lng
-          } : ''
-          this.locate = true
-        }
-      },
-      handleSubmit(row) {
-        delete row.createTime
-        return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
-          ...row
-        }).then(res => {
-          if (res?.code == 0) {
-            this.$message.success("提交成功!")
-            this.dialog = false
-            this.$refs.DeviceSlider?.getDevices()
-          }
-        })
-      },
-      handleLocate(row, locate) {
-        if (locate) {
-          let {lat, lng} = locate.location
-          this.handleSubmit({...row, lat, lng}).then(() => {
-            this.locate = false
-          })
-        }
+      } else return (
+          <div class="flexRow">
+            <div>{node.label}</div>
+            {data.id != 'no_area' ? <div class="sta">
+                  <p>{data.online || 0}</p>/{data.sum || 0}
+                </div>
+                : <div/>}
+          </div>
+      )
+    },
+    handleSliderOption(e) {
+      console.log(e)
+      this.selected = {
+        command: e.type,
+        ...e.node
+      }
+      this.selected.areaId = e.node.areaId || this.user.info.areaId
+      if (e.type == "edit") {//修改名称
+        this.dialog = true
+      } else if (e.type == "area") {//绑定areaId
+        this.$refs.BindArea?.chooseArea()
+      } else if (e.type == "locate") {//地图标绘
+        this.latlng = e.node.lat && e.node.lng ? {
+          lat: e.node.lat,
+          lng: e.node.lng
+        } : ''
+        this.locate = true
       }
     },
-    beforeDestroy() {
-      this.monitors = []
+    handleSubmit(row) {
+      delete row.createTime
+      return this.instance.post("/app/appzyvideoequipment/addOrUpdate", {
+        ...row
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message.success("提交成功!")
+          this.dialog = false
+          this.$refs.DeviceSlider?.getDevices()
+        }
+      })
+    },
+    handleLocate(row, locate) {
+      if (locate) {
+        let {lat, lng} = locate.location
+        this.handleSubmit({...row, lat, lng}).then(() => {
+          this.locate = false
+        })
+      }
     }
+  },
+  beforeDestroy() {
+    this.monitors = []
   }
+}
 </script>
 
 <style lang="scss" scoped>

project/shandong10086/apps/shandong/monitor/components/deviceSlider.vue

@@ -15,26 +15,27 @@
                      :label="op.dictName"/>
         </el-select>
         <el-input
-          v-model="search.name"
-          size="mini"
-          placeholder="设备名称"
-          v-throttle="handleTreeFilter"
-          prefix-icon="el-icon-search"
-          @clear="search.name = '', handleTreeFilter()" clearable/>
+            v-model="search.name"
+            size="mini"
+            placeholder="设备名称"
+            v-throttle="handleTreeFilter"
+            prefix-icon="el-icon-search"
+            @clear="search.name = '', handleTreeFilter()" clearable/>
       </div>
       <div title>设备列表</div>
       <div fill class="deviceList">
-          <el-tree ref="deviceTree" :render-content="renderItem" :data="treeData" :props="propsConfig" @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
-                   :filter-node-method="handleFilter"/>
-          <ul
-              v-if="isShowMenu && menuInfo.node.type === '1'"
-              class="el-dropdown-menu el-popper"
-              :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
-              x-placement="top-end">
-            <li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改名称</li>
-            <!-- <li class="el-dropdown-menu__item" @click="handleTreeCommand('area', menuInfo.node)">行政地区</li> -->
-            <li class="el-dropdown-menu__item" @click="handleTreeCommand('locate', menuInfo.node)">地图标绘</li>
-          </ul>
+        <el-tree ref="deviceTree" :render-content="renderItem" :data="treeData" :props="propsConfig"
+                 @node-click="handleNodeClick" @node-contextmenu="nodeContextmenu"
+                 :filter-node-method="handleFilter"/>
+        <ul
+            v-if="isShowMenu && menuInfo.node.type==1"
+            class="el-dropdown-menu el-popper"
+            :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
+            x-placement="top-end">
+          <li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改名称</li>
+          <!-- <li class="el-dropdown-menu__item" @click="handleTreeCommand('area', menuInfo.node)">行政地区</li> -->
+          <li class="el-dropdown-menu__item" @click="handleTreeCommand('locate', menuInfo.node)">地图标绘</li>
+        </ul>
       </div>
     </div>
     <div class="rightBtn" :class="{show}" @click="handleShow">
@@ -122,7 +123,7 @@ export default {
       })
     },
 
-    handleTreeCommand (e, node) {
+    handleTreeCommand(e, node) {
       this.$emit('treeCommand', {
         type: e,
         node
@@ -149,13 +150,13 @@ export default {
         return !this.search.bind ? true : data.deviceStatus === this.search.bind
       }
 
-      return data?.name?.indexOf(v) > -1  && (!this.search.bind ? true : data.deviceStatus === this.search.bind)
+      return data?.name?.indexOf(v) > -1 && (!this.search.bind ? true : data.deviceStatus === this.search.bind)
     },
     handleTreeFilter() {
       this.$refs.deviceTree?.filter(this.search.name)
     },
 
-    onChange () {
+    onChange() {
       this.$refs.deviceTree?.filter(this.search.name)
     }
   },
@@ -164,7 +165,7 @@ export default {
     this.getDevices()
   },
 
-  mounted () {
+  mounted() {
     document.querySelector('html').addEventListener('click', this.bindEvent)
   }
 }
@@ -192,14 +193,17 @@ export default {
       width: fit-content;
       min-width: 100%;
     }
+
     &::-webkit-scrollbar {
-      width : 10px;
+      width: 10px;
       height: 15px;
     }
+
     &::-webkit-scrollbar-thumb {
       box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
       background: #535353;
     }
+
     &::-webkit-scrollbar-track {
       box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
       background: #fff;

project/shandong10086/apps/shandong/monitor/components/locateDialog.vue

@@ -3,9 +3,14 @@
     <ai-dialog :visible.sync="dialog" title="标绘" @closed="$emit('visible',false),selected={}"
                @opened="$nextTick(()=>initMap())"
                @onConfirm="handleConfirm">
-      <div id="amap" v-if="dialog"/>
+      <ai-t-map :map.sync="map" :lib.sync="TMap"/>
       <div class="poi">
-        <el-input ref="poiInput" v-model="search" size="small" clearable v-throttle="handleSearch" placeholder="请输入地点"/>
+        <el-autocomplete ref="poiInput" v-model="search" size="small" clearable :fetch-suggestions="handleSearch"
+                         placeholder="请输入地点" @select="handleSelect" :trigger-on-focus="false">
+          <template slot-scope="{item}">
+            <span style="direction: rtl" v-text="`${item.title}(${item.address})`"/>
+          </template>
+        </el-autocomplete>
       </div>
       <el-form class="selected" v-if="!!selected.location" id="result" size="mini" label-suffix="："
                label-position="left">
@@ -22,7 +27,7 @@
 </template>
 
 <script>
-import AMapLoader from '@amap/amap-jsapi-loader'
+import {mapState} from "vuex";
 
 export default {
   name: "locateDialog",
@@ -35,66 +40,54 @@ export default {
     return {
       dialog: false,
       search: "",
-      poi: null,
       map: null,
-      AMap: null,
       selected: {},
-      geo: null
+      TMap: null
     }
   },
+  computed: {
+    ...mapState(['user'])
+  },
   watch: {
     visible(v) {
       this.dialog = v
     }
   },
   methods: {
-    initMap() {
-      AMapLoader.load({
-        key: "b553334ba34f7ac3cd09df9bc8b539dc",
-        version: '2.0',
-        plugins: ['AMap.PlaceSearch', 'AMap.Marker', 'AMap.Geolocation'],
-      }).then(AMap => {
-        this.AMap = AMap
-        this.map = new AMap.Map('amap', {
-          zoom: 14,
-          center: this.latlng ? [this.latlng.lng, this.latlng.lat] : ''
-        }).on('click', res => {
-          this.map.clearMap()
-          this.selected = {location: res.lnglat}
-          this.poi?.searchNearBy('', res.lnglat, 100)
-        });
-        if (this.latlng) {
-          let marker = new AMap.Marker({
-            position: [this.latlng.lng, this.latlng.lat]
-          })
-          this.map.add(marker)
+    initMap(count = 0) {
+      let {map, TMap} = this
+      if (map) {
+        if (!!this.latlng?.lat) {
+          let position = new TMap.LatLng(this.latlng.lat, this.latlng.lng)
+          map.setCenter(position)
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position}]})
         }
-        this.poi = new AMap.PlaceSearch().on('complete', ({poiList}) => {
-          this.map.clearMap()
-          if (poiList?.length > 0) {
-            poiList?.pois?.map(e => {
-              let marker = new AMap.Marker({
-                position: e.location,
-              }).on('click', () => this.selected = e)
-              this.map.add(marker)
-            })
-          } else {
-            let marker = new AMap.Marker({
-              position: this.selected.location,
-            })
-            this.map.add(marker)
-          }
+        map.on('click', res => {
+          let {poi, latLng: location} = res, name = poi?.name || ""
+          this.selected.marker?.setMap(null)
+          this.selected = {location, name}
+          this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
         })
-        this.geo = new AMap.Geolocation({
-          enableHighAccuracy: true,//是否使用高精度定位
-          zoomToAccuracy: true//定位成功后是否自动调整地图视野到定位点
-        })
-        this.map.addControl(this.geo)
-      })
+      } else {
+        if (count < 5) {
+          count++
+          setTimeout(() => this.initMap(count), 500)
+        } else {
+          console.error("地图渲染失败")
+        }
+      }
     },
-    handleSearch() {
-      if (this.search) {
-        this.poi.searchNearBy(this.search, this.map.getCenter(), 50000)
+    handleSearch(keyword, cb) {
+      let {TMap} = this
+      if (keyword && TMap) {
+        let poi = new TMap.service.Search({pageSize: 10})
+        poi.searchRegion({
+          keyword, radius: 5000, cityName: this.user.info?.areaId?.substring(0, 6) || ""
+        }).then(res => {
+          if (res?.data?.length > 0) {
+            cb(res.data)
+          } else this.$message.error("未查到有效地点")
+        })
       }
     },
     handleConfirm() {
@@ -103,7 +96,16 @@ export default {
       } else {
         this.$message.error('请先选择坐标位置')
       }
-
+    },
+    handleSelect(res) {
+      let {map, TMap} = this
+      if (map) {
+        let {title: name, location} = res
+        this.selected.marker?.setMap(null)
+        this.selected = {location, name}
+        this.selected.marker = new TMap.MultiMarker({map, geometries: [{position: location}]})
+        map.setCenter(location)
+      }
     }
   },
   created() {
@@ -114,6 +116,10 @@ export default {
 
 <style lang="scss" scoped>
 .locateDialog {
+  .color-999 {
+    color: #999;
+  }
+
   ::v-deep .el-dialog__body {
     padding: 0;
     height: 480px;
@@ -123,20 +129,6 @@ export default {
       padding: 0 !important;
     }
 
-    #amap {
-      width: 100%;
-      height: 480px;
-
-      .amap-logo, .amap-copyright {
-        display: none !important;
-      }
-
-      .amap-marker-label {
-        border-color: transparent;
-        box-shadow: 1px 1px 0 0 rgba(#999, .2);
-      }
-    }
-
     .poi {
       position: absolute;
       left: 10px;
@@ -144,6 +136,8 @@ export default {
       display: flex;
       height: 32px;
       flex-direction: column;
+      z-index: 202203281016;
+      width: 400px;
 
       div {
         flex-shrink: 0;
@@ -178,4 +172,6 @@ export default {
     }
   }
 }
+
+
 </style>