reactor:预警列表展示方式更改+智能预警加载所有设备列表

src/views/components/tools/index.vue

@@ -7,8 +7,8 @@
         <div class="tool" :class="{ active: isClActive }" @click="toCl"><i class="iconfont icon-icon_xiaogongju_20_s" style="font-size: 20px"></i></div>
       </div>
       <div class="measuring-tool" :class="{ clToolHide: !measureShow }">
-        <div class="ranging" :class="{'active':rangingActive}" @click="toggleRanging">测距</div>
-        <div class="measureArea">测面</div>
+        <div class="ranging" :class="{ active: measureActive == 0 }" @click="measureRanging">测距</div>
+        <div class="measureArea" :class="{ active: measureActive == 1 }" @click="measureArea">测面</div>
       </div>
     </div>
     <Controls v-if="isMapActive" />
@@ -27,7 +27,7 @@ export default {
     return {
       toolsShow: false,
       isMapActive: false,
-      rangingActive:false,
+      measureActive: null,
       isClActive: false,
       measureShow: false,
       distanceMeasure: null, // 测距工具实例
@@ -65,27 +65,54 @@ export default {
     toCl() {
       this.isClActive = !this.isClActive
       this.measureShow = this.isClActive ? true : false
+      if (this.distanceMeasure) {
+        this.distanceMeasure.clear()
+      }
     },
-    toggleRanging() {
-        this.rangingActive = !this.rangingActive
-        if(this.rangingActive){
-            const graphic = this.distanceMeasure.distance({
-              showAddText: true,
-              label: {
-                // 自定义显示label的graphic类型
-                type: 'div',
-                updateText: function (text, graphic) {
-                  graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
-                },
-                // 下面是graphic对应类型本身的参数
-                html: `<div class="marsGreenGradientPnl" ></div>`,
-                horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
-                verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
-              }
-            })
-        }else{
-            this.distanceMeasure.clear()
+    measureRanging() {
+      this.rangingActive = this.rangingActive == 0 ? null : 0
+      if (this.rangingActive == 0) {
+        const graphic = this.distanceMeasure.distance({
+          showAddText: true,
+          label: {
+            // 自定义显示label的graphic类型
+            type: 'div',
+            updateText: function (text, graphic) {
+              graphic.html = `<div class="marsGreenGradientPnl" >${text}</div>`
+            },
+            // 下面是graphic对应类型本身的参数
+            html: `<div class="marsGreenGradientPnl" ></div>`,
+            horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+            verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
+          }
+        })
+      } else {
+        this.distanceMeasure.clear()
+      }
+    },
+    measureArea() {
+      this.rangingActive = this.rangingActive == 1 ? null : 1
+      if (this.rangingActive == 1) {
+        const graphic = this.distanceMeasure.area({
+          style: {
+            color: '#00fff2',
+            opacity: 0.4,
+            outline: true,
+            outlineColor: '#fafa5a',
+            outlineWidth: 1,
+            clampToGround: false //贴地
+          }
+        })
+
+        // 下面代码抬升面的高度到一个平面，来示意“水平”
+        if (window.map.scene.mode === this.Cesium.SceneMode.SCENE3D) {
+          const oldPositions = graphic.positionsShow
+          const rang = mars3d.PolyUtil.getHeightRangeByDepth(oldPositions, window.map.scene)
+          graphic.positions = mars3d.PointUtil.setPositionsHeight(oldPositions, rang.maxHeight)
         }
+      } else {
+        this.distanceMeasure.clear()
+      }
     }
   },
   destroyed() {
@@ -129,9 +156,10 @@ export default {
     div {
       padding: px-to-rem(10);
     }
-    .ranging.active,.measureArea.active{
-        background: rgba(79, 159, 255, .4);
-        color: #4f9fff;
+    .ranging.active,
+    .measureArea.active {
+      background: rgba(79, 159, 255, 0.4);
+      color: #4f9fff;
     }
   }
   .isHide,

src/views/comprehensive-overview/left.vue

@@ -43,7 +43,7 @@
                 <img src="@/assets/image/comprehensive/point1.png" class="img1" />
               </div>
               <div class="info">
-                <div class="left">发源：渭源县鸟鼠山 于：渭南市潼关县汇入黄河</div>
+                <div class="left">发源于渭源县鸟鼠山于渭南市潼关县汇入黄河</div>
                 <!-- <div class="right">于：渭南市潼关县</div> -->
               </div>
               <div class="base-info-card">

src/views/safety-inspection/addInspectionTask.vue

@@ -15,7 +15,7 @@
         <el-form-item label="巡查点">
           <div v-for="(item, index) in addTaskFrom.inspectionPoint" :key="index" class="ins-point">
             <el-select v-model="item.value" placeholder="请选择巡查点" :popper-append-to-body="false" popper-class="u-popper-select" @change="onPointSelect">
-              <el-option :label="opt.devName" :value="opt.deviceCode" v-for="opt in inspectionOptions" :key="opt.deviceCode"></el-option>
+              <el-option :label="opt.devName" :value="opt.deviceCode" :disabled="opt.disabled" v-for="opt in inspectionOptions" :key="opt.deviceCode"></el-option>
             </el-select>
             <img src="@/assets/image/safety-inspection/del.png" alt="" @click="removeOption(index)" v-if="isFirstItem()" />
             <img src="@/assets/image/safety-inspection/add.png" alt="" v-if="isLastItem(index)" @click="addOption" />
@@ -120,7 +120,6 @@ export default {
           Object.assign(point, obj[0])
         }
       })
-      console.info(this.addTaskFrom.inspectionPoint)
     },
     startInspection() {
       startPatrol(this.addTaskFrom).then((res)=>{
@@ -134,7 +133,10 @@ export default {
       }
       this.addTaskFrom.inspectionPoint.forEach((item, index) => {
         this.fetchUrl(item).then((res) => {
-          const url = res.data.streamUrl
+          let url = ''
+           if(res.code == 200){
+           url = res.data.streamUrl
+          }
           this.$set(this.addTaskFrom.inspectionPoint[index], 'url', url)
         })
       })
@@ -187,8 +189,7 @@ export default {
       },100)
     },
     playVideo(point) {
-      console.info(point)
-      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true ,type:'add'})
+        this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true ,type:'add'})
     },
     stopPatrol() {
       this.isPatrolling = false

src/views/safety-inspection/index.vue

@@ -38,19 +38,53 @@ export default {
       ]
     }
   },
-  mounted(){
-    this.$globalEventBus.$on('loadMap',()=>{
-        this.addInitialPoints()
-    })
+  mounted() {
+    this.getData()
   },
   methods: {
+    getData() {
+      window
+        .requestSDK(
+          '/ttdevice/ttview/device/queryDeviceInfoPage',
+          {
+            pageNum: 1,
+            pageSize: 10,
+            platFlag: '1',
+            operType: '0'
+          },
+          {},
+          'post'
+        )
+        .then(async (res) => {
+          this.formatData(res.rows)
+        })
+    },
+    formatData(data) {
+      this.inspectionOptions = data.map((item) => {
+        const result = {
+          latitude: item.latitude,
+          longitude: item.longitude,
+          devName: item.devName,
+          deviceCode: item.deviceCode,
+          channelCode: item.children && item.children.length > 0 ? item.children[0].channelCode : null
+        }
+        if (!item.children || item.children.length === 0) {
+          result.disabled = true
+        }
+        return result
+      })
+
+      this.addInitialPoints()
+    },
     refreshLeftList() {
       this.$refs.inspRef.getSecurityPatrolList()
     },
     // 添加初始点
     addInitialPoints() {
       this.inspectionOptions.forEach((point) => {
-        this.addPointToMap(point)
+        if(!point.disabled){
+          this.addPointToMap(point)
+        }
       })
     },
 
@@ -69,6 +103,9 @@ export default {
           horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
           verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
         },
+        attr: {
+          ...point
+        },
         label: {
           text: point.devName,
           font_size: 32,
@@ -83,7 +120,40 @@ export default {
       })
 
       graphicsLayer.addGraphic(graphic)
-    }
+      let that = this
+      graphic.on(this.mars3d.EventType.click, function () {
+        const pointData = graphic.attr
+         that.fetchUrl(pointData).then((res) => {
+          if(res.code == 4001){
+            that.$message.warning('设备离线')
+          }else{
+            const url = res.data.streamUrl
+            that.$set(pointData, 'url', url)
+            that.$globalEventBus.$emit('clickVideoPlay', {point: pointData, visible: true ,type:'click'})
+          }
+        })
+      })
+    },
+    fetchUrl(item) {
+      return new Promise((resolve, reject) => {
+        window
+          .requestSDK(
+            '/ttvideo/video/player/getVideoRealtimeUrl',
+            {
+              deviceCode: item.deviceCode,
+              channelCode: item.channelCode,
+              netType: '1',
+              protocolType: 5,
+              streamType: 1
+            },
+            {},
+            'post'
+          )
+          .then(async (res) => {
+            resolve(res)
+          })
+      })
+    },
   }
 }
 </script>

src/views/smart-early-warning/left.vue

@@ -1,27 +1,39 @@
 <template>
   <BasePanelLeft>
     <div class="num-area">
-      <div class="txt-num"><img src="@/assets/image/smart-early-warning/sxt.png" alt="">摄像机数量：3258</div>
-      <div class="txt-num"><img src="@/assets/image/smart-early-warning/td.png" alt="">通道数量：3258</div>
+      <div class="txt-num"><img src="@/assets/image/smart-early-warning/sxt.png" alt="" />摄像机数量：3258</div>
+      <div class="txt-num"><img src="@/assets/image/smart-early-warning/td.png" alt="" />通道数量：3258</div>
     </div>
     <div class="warning-container">
       <BaseMain title="预警列表">
         <template v-slot:mainArea>
           <div class="list-container">
             <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchVal"> </el-input>
-            <div class="list-content">
-              <div class="item" v-for="(item, index) in listItem" :key="index">
-                <div class="left">
-                  <img :src="item.img" alt="" />
-                </div>
-                <div class="right">
-                  <div class="title">{{ item.title }}</div>
-                  <div class="txt">{{ item.address }}</div>
-                  <div class="txt">{{ item.date }}</div>
-                  <div class="jzDate">{{ item.deadline }}</div>
-                </div>
-              </div>
-            </div>
+            <el-collapse v-model="activeNames"  class="v-collapse">
+              <template v-for="(item, index) in listItem">
+                <el-collapse-item :title="item.name" :name="index + 1" :key="index">
+                  <template slot="title">
+                    <div class="title-num">
+                      <div class="left">{{ item.name }}</div>
+                      <div class="right">{{ item.lists.length }}个</div>
+                    </div>
+                  </template>
+                  <div class="list-content">
+                    <div class="item" v-for="(item, index) in item.lists" :key="index">
+                      <div class="left">
+                        <img :src="item.img" alt="" />
+                      </div>
+                      <div class="right">
+                        <div class="title">{{ item.title }}</div>
+                        <div class="txt">{{ item.address }}</div>
+                        <div class="txt">{{ item.date }}</div>
+                        <div class="jzDate">{{ item.deadline }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </el-collapse-item>
+              </template>
+            </el-collapse>
             <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
@@ -50,76 +62,55 @@ export default {
       currentPage: 1,
       pageSize: 6,
       total: 0,
+      activeNames: [1, 2, 3, 4],
       listItem: [
         {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
+          name: '乱建预警',
+          lists: [
+            {
+              img: ImgUrl,
+              title: '乱建预警',
+              address: '咸阳兴平仪空村',
+              date: '2025-01-15 14:00:00',
+              deadline: '剩余0天 00:28:12'
+            }
+          ]
         },
         {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
+          name: '乱采预警',
+          lists: [
+            {
+              img: ImgUrl,
+              title: '乱采预警',
+              address: '咸阳兴平仪空村',
+              date: '2025-01-15 14:00:00',
+              deadline: '剩余0天 00:28:12'
+            }
+          ]
         },
         {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
+          name: '乱堆预警',
+          lists: [
+            {
+              img: ImgUrl,
+              title: '乱堆预警',
+              address: '咸阳兴平仪空村',
+              date: '2025-01-15 14:00:00',
+              deadline: '剩余0天 00:28:12'
+            }
+          ]
         },
         {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
-        },
-        {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
-        },
-        {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
-        },
-        {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
-        },
-        {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
-        },
-        {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
-        },
-        {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
+          name: '乱占预警',
+          lists: [
+            {
+              img: ImgUrl,
+              title: '乱占预警',
+              address: '咸阳兴平仪空村',
+              date: '2025-01-15 14:00:00',
+              deadline: '剩余0天 00:28:12'
+            }
+          ]
         }
       ]
     }
@@ -149,7 +140,8 @@ export default {
           'post'
         )
         .then(async (res) => {
-          console.info(res)
+          
+          // this.listItem = data.rows
         })
     },
     handleSizeChange() {},
@@ -159,21 +151,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.num-area{
+.num-area {
   position: absolute;
   top: px-to-rem(8);
   left: px-to-rem(130);
   z-index: 1;
   display: flex;
-  .txt-num{
+  .txt-num {
     display: flex;
     align-items: center;
     width: px-to-rem(180);
     font-weight: 400;
     font-size: px-to-rem(14);
-    color: #FFFFFF;
+    color: #ffffff;
     margin-right: px-to-rem(130);
-    img{
+    img {
       width: px-to-rem(30);
       margin-bottom: px-to-rem(7);
     }
@@ -202,8 +194,34 @@ export default {
       font-size: px-to-rem(14);
       color: #f5f5f5;
     }
+    .v-collapse {
+      border-top: 0;
+      border-bottom: 0;
+      margin-top: px-to-rem(11);
+      :deep(.el-collapse-item__header) {
+        background: #2c5789;
+        font-weight: 500;
+        font-size: px-to-rem(14);
+        color: #ffffff;
+        padding: px-to-rem(5) px-to-rem(11);
+        height: auto;
+        line-height: initial;
+        border-bottom: 0;
+      }
+      :deep(.el-collapse-item__wrap) {
+        background-color: transparent;
+        border-bottom: 0;
+      }
+      :deep(.el-collapse-item__content) {
+        padding: px-to-rem(12) px-to-rem(0);
+      }
+      .title-num {
+        width: 90%;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
     .list-content {
-      margin-top: px-to-rem(10);
       height: 87%;
       overflow: auto;
       scrollbar-width: none;
@@ -216,7 +234,6 @@ export default {
         border-radius: px-to-rem(4);
         border: px-to-rem(1) solid #4f9fff;
         padding: px-to-rem(7);
-        margin-bottom: px-to-rem(9);
         .left {
           img {
             width: px-to-rem(130);

src/views/video-play-popup/index.vue

@@ -74,12 +74,16 @@ export default {
       console.info(art)
     },
     openTsModal() {
-      this.tsModalVisible = true
+      if(this.type == 'click'){
+        this.visible = false
+      }else{
+        this.tsModalVisible = true
+      }
     },
     toNext() {
       if(this.type == 'add'){
         this.$globalEventBus.$emit('toPlayNextVideoAdd')
-      }else{
+      }else if(this.type == 'xc'){
         this.$globalEventBus.$emit('toPlayNextVideo')
       }
     },
@@ -87,7 +91,7 @@ export default {
       this.visible = false
       if(this.type == 'add'){
         this.$globalEventBus.$emit('closeVideoPlayAdd')
-      }else{
+      }else if(this.type == 'xc'){
         this.$globalEventBus.$emit('closeVideoPlay')
       }
     }
@@ -98,9 +102,9 @@ export default {
 <style scoped lang="scss">
 .video-player-container {
   position: absolute;
-  top: 50%;
+  top: 10%;
   left: 50%;
-  transform: translate(-50%, -80%);
+  transform: translate(-50%, 0%);
   width: 600px;
   z-index: 9999;
   .video-player-title {

src/views/water-station-popup/index.vue

@@ -104,6 +104,7 @@ export default {
   },
   destroyed() {
     this.$globalEventBus.$off('clickWaterStation')
+    this.graphicsLayer = null
   },
   methods: {
     search() {