Merge branch 'dev' of http://git.dnzc.vip:3000/yangqishu/tmzn-weihe into dev

src/api/monitoringDataApi.js

@@ -44,4 +44,11 @@ export function getMonitoringStatistics(data) {
     url: '/api/monitoringData/statistics/'+data.stationId,
     method: 'POST',
   })
+}
+
+export function getMonitoringStatisticsByFlow(data) {
+  return request({
+    url: '/api/monitoringData/statisticsByFlow/'+data.stationId,
+    method: 'POST',
+  })
 }

src/api/securityPatrolApi.js

@@ -13,4 +13,21 @@ export function toAddSecurityPatrol(data){
     method: 'post',
     data
   })
+}
+//开始巡查
+export function startPatrol(data){
+    return request({
+    url: '/api/securityPatrol/startPatrol',
+    method: 'post',
+    data
+  })
+}
+
+//结束巡查
+export function endPatrol(data){
+    return request({
+    url: '/api/securityPatrol/endPatrol',
+    method: 'post',
+    data
+  })
 }

src/views/components/layerList/index.vue

@@ -27,7 +27,6 @@
 
 <script>
 import * as mars3d from 'mars3d'
-import { getHydrologicalList } from '@/api/hydrologicalStationApi'
 let layerCache = {}
 export default {
   name: 'LayerListView',
@@ -65,7 +64,7 @@ export default {
           label: '水文监测',
           children: [
             { id: '2-1', label: '水文监测点1', meta: { type: 'point', url: '/geojson/sw1.geojson' } },
-            { id: '2-2', label: '水文监测点2', meta: { type: 'point', url: '/geojson/sw2.geojson' } }
+            { id: '2-2', label: '水文监测点2', meta: { type: 'point', url: '/geojson/sw2.geojson' }}
           ]
         },
         {
@@ -94,7 +93,6 @@ export default {
   },
   created() {
     this.mainMenu = this.$route.params.menu
-    this.getHydrologicalList()
   },
   mounted() {
     this.$globalEventBus.$on('toggleLeftPanel', (val) => {
@@ -118,11 +116,6 @@ export default {
     }
   },
   methods: {
-    getHydrologicalList() {
-      getHydrologicalList().then((res) => {
-        console.info(res)
-      })
-    },
     //关闭防汛预案弹窗后取消选中
     cancelCheckNode(ids) {
       const currentCheckedKeys = this.$refs.treeRef.getCheckedKeys(true)
@@ -315,7 +308,6 @@ export default {
     },
     // 处理水文站数据
     handleData(isShow) {
-      console.log(isShow,11111111111)
       const nodeIds = ['2-1', '2-2']
       this.$nextTick(() => {
         nodeIds.forEach((id) => {

src/views/components/tools/index.vue

@@ -1,75 +1,170 @@
 <template>
-    <div>
-        <div class="tools-container">
-            <img src="@/assets/image/common/tools.png" alt="" @click="toOpenTools">
-            <div class="tools-menu" :class="{isHide:!toolsShow}">
-                <div class="tool" @click="toChangeMap" :class="{active:isMapActive}"><i class="iconfont icon-tongyong-gongjuxiang-ditukongzhi " style="font-size: 40px;"></i></div>
-                <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">测距</div>
-                <div class="measureArea">测面</div>
-            </div>
-        </div>
-        <Controls v-if="isMapActive"/>
+  <div>
+    <div class="tools-container">
+      <img src="@/assets/image/common/tools.png" alt="" @click="toOpenTools" />
+      <div class="tools-menu" :class="{ isHide: !toolsShow }">
+        <div class="tool" @click="toChangeMap" :class="{ active: isMapActive }"><i class="iconfont icon-tongyong-gongjuxiang-ditukongzhi" style="font-size: 40px"></i></div>
+        <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: measureActive == 0 }" @click="measureRanging">测距</div>
+        <div class="measureArea" :class="{ active: measureActive == 1 }" @click="measureArea">测面</div>
+      </div>
     </div>
+    <Controls v-if="isMapActive" />
+  </div>
 </template>
 
 <script>
 import Controls from './controls/control.vue'
+import * as mars3d from 'mars3d'
+import Vue from 'vue'
+Vue.prototype.mars3d = mars3d
+Vue.prototype.Cesium = mars3d.Cesium
 export default {
-    name:"MapTools",
-    data(){
-        return{
-            toolsShow:false,
-            isMapActive:false,
-            isClActive:false,
-            measureShow:false
-        }
+  name: 'MapTools',
+  data() {
+    return {
+      toolsShow: false,
+      isMapActive: false,
+      measureActive: null,
+      isClActive: false,
+      measureShow: false,
+      distanceMeasure: null, // 测距工具实例
+      isMeasuring: false, // 是否正在测量
+      measureResult: '' // 测量结果
+    }
+  },
+  components: {
+    Controls
+  },
+  mounted() {
+    this.$globalEventBus.$on('loadMap', () => {
+      console.info('我加入')
+      this.distanceMeasure = new mars3d.thing.Measure({
+        label: {
+          color: '#ffffff',
+          font_family: '楷体',
+          font_size: 20,
+          background: false
+        },
+        isAutoEditing: false
+      })
+
+      // 将测距工具添加到地图
+      window.map.addThing(this.distanceMeasure)
+    })
+  },
+  methods: {
+    toOpenTools() {
+      this.toolsShow = !this.toolsShow
     },
-    components:{
-        Controls
+    toChangeMap() {
+      this.isMapActive = !this.isMapActive
     },
-    methods:{
-        toOpenTools(){
-            this.toolsShow = !this.toolsShow
-        },
-        toChangeMap(){
-            this.isMapActive = !this.isMapActive
-        },
-        toCl(){
-            this.isClActive = !this.isClActive
-            this.measureShow = this.isClActive?true:false
+    toCl() {
+      this.isClActive = !this.isClActive
+      this.measureShow = this.isClActive ? true : false
+      if (this.distanceMeasure) {
+        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() {
+    this.$globalEventBus.$off('loadMap')
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-.tools-container{
-    position: absolute;
-    top: px-to-rem(45);
-    right: 4.2rem;
-    z-index: 41;
-    img{
-        width: px-to-rem(40);
-        height: px-to-rem(40);
+.tools-container {
+  position: absolute;
+  top: px-to-rem(45);
+  right: 4.2rem;
+  z-index: 41;
+  img {
+    width: px-to-rem(40);
+    height: px-to-rem(40);
+  }
+  .tools-menu {
+    background: #172536;
+    border-radius: px-to-rem(4);
+    padding-bottom: px-to-rem(10);
+    width: px-to-rem(40);
+    .tool {
+      text-align: center;
+      color: #fff;
     }
-    .tools-menu{
-        background: #172536;
-        border-radius: px-to-rem(4);
-        padding-bottom: px-to-rem(10);
-        width: px-to-rem(40);
-        .tool{
-            text-align: center;
-            color: #fff;
-        }
-        .tool.active{
-            color: #4f9fff;
-        }
+    .tool.active {
+      color: #4f9fff;
+    }
+  }
+  .measuring-tool {
+    position: absolute;
+    top: px-to-rem(95);
+    right: px-to-rem(43);
+    background-color: rgba(23, 37, 55, 0.9);
+    border-radius: px-to-rem(8);
+    color: #fff;
+    cursor: pointer;
+    width: px-to-rem(50);
+    div {
+      padding: px-to-rem(10);
     }
-    .isHide,.clToolHide{
-        display: none;
+    .ranging.active,
+    .measureArea.active {
+      background: rgba(79, 159, 255, 0.4);
+      color: #4f9fff;
     }
+  }
+  .isHide,
+  .clToolHide {
+    display: none;
+  }
 }
-</style>
+</style>

src/views/comprehensive-overview/left.vue

@@ -30,7 +30,7 @@
             </div>
           </template>
         </BaseMain>
-        <BaseMain title="渭河生态区基本概况">
+        <BaseMain title="概况">
           <template v-slot:mainArea>
             <div class="main-container">
               <div class="title-area">
@@ -43,8 +43,8 @@
                 <img src="@/assets/image/comprehensive/point1.png" class="img1" />
               </div>
               <div class="info">
-                <div class="left">发源：渭源县鸟鼠山</div>
-                <div class="right">止于：渭南市潼关县</div>
+                <div class="left">发源于渭源县鸟鼠山于渭南市潼关县汇入黄河</div>
+                <!-- <div class="right">于：渭南市潼关县</div> -->
               </div>
               <div class="base-info-card">
                 <div class="base-info-item">
@@ -62,7 +62,7 @@
               </div>
               <div class="base-info-card m0">
                 <div class="base-info-item">
-                  <span>陕西境内生态区面积</span>
+                  <span>生态区面积</span>
                   <span class="value green">1277.04<span>万k㎡</span></span>
                 </div>
                 <div class="base-info-item">

src/views/comprehensive-overview/right.vue

@@ -11,7 +11,7 @@
                         </div>
                         <div class="right">
                             <div class="icon-text">
-                                <div class="txt">水文</div>
+                                <div class="txt">水位</div>
                                 <div class="txt2">雨量</div>
                             </div>
                             <div class="icon-text">

src/views/hydrologic-info/left.vue

@@ -107,7 +107,6 @@ import iconUrl3 from '@/assets/image/hydrologic/icon4.png'
 import iconUrl4 from '@/assets/image/hydrologic/icon1.png'
 import iconUrl5 from '@/assets/image/hydrologic/icon3.png'
 import iconUrl6 from '@/assets/image/hydrologic/icon2.png'
-import {getAirNow} from '@/api/largeScreenApi'
 export default {
   data() {
     return {

src/views/hydrologic-info/line-chart/index.vue

@@ -7,8 +7,8 @@ import { echartMixin } from '@/mixins'
 export default {
   name: 'LineChart',
   mixins: [echartMixin],
-  props:{
-    option:Object
+  props: {
+    option: Object
   },
   data() {
     return {
@@ -22,7 +22,4 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.line-chart-container {
-}
-</style>
+<style lang="scss"></style>

src/views/hydrologic-info/right.vue

@@ -78,9 +78,13 @@
                   <el-option label="水位" value="0"></el-option>
                 </el-select>
               </div>
+              <div class="tabs">
+                <div class="tab-pane" :class="{ active: swActive }" @click="toChangeSwTab(true)">水位</div>
+                <div class="tab-pane" :class="{ active: !swActive }" @click="toChangeSwTab(false)">流量</div>
+              </div>
               <div class="right">更多</div>
             </div>
-            <LineChart style="height: 1.8rem" :option="swOption" v-if="chartShow"/>
+            <LineChart ref="vLineChart" style="height: 1.8rem" :option="swOption" v-if="chartShow" />
           </div>
         </template>
       </BaseMain>
@@ -94,11 +98,12 @@ import BaseMain from '@/components/base-main/base-main.vue'
 import LineChart from './line-chart/index.vue'
 import * as echarts from 'echarts'
 import { getHydrologicalList } from '@/api/hydrologicalStationApi'
-import { getMonitoringStatistics } from '@/api/monitoringDataApi'
+import { getMonitoringStatistics, getMonitoringStatisticsByFlow } from '@/api/monitoringDataApi'
 import moment from 'moment'
 export default {
   data() {
     return {
+      swActive: true,
       dateVal: 1,
       jcDateVal: 1,
       jcActive: true,
@@ -120,7 +125,7 @@ export default {
           val: '0'
         }
       ],
-      chartShow:false,
+      chartShow: false,
       selectedVal: '0',
       selectedVal1: '0',
       selectedVal2: '',
@@ -261,104 +266,212 @@ export default {
     },
     changeSwOpt(id) {
       this.chartShow = false
+      if (this.swActive) {
+        this.getMonitoringStatistics(id)
+      } else {
+        this.getMonitoringStatisticsByFlow(id)
+      }
+    },
+    getMonitoringStatistics(id) {
       getMonitoringStatistics({ stationId: id }).then((res) => {
-        if(res.data){
-        this.chartShow = true
-        const option = {
-          backgroundColor: 'transparent',
-          color: ['#66DC95'],
-          grid: {
-            left: 16,
-            right: 16,
-            top: 20,
-            bottom: 8,
-            containLabel: true
-          },
-          tooltip: {
-            trigger: 'axis',
+        if (res.data) {
+          this.chartShow = true
+          const option = {
             backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            borderWidth: 0,
-            extraCssText: 'box-shadow: none;',
-            formatter: function (params) {
-              let value = params[params.length - 1].value
-              let date = params[params.length - 1].name
-              return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
+            color: ['#66DC95'],
+            grid: {
+              left: 16,
+              right: 16,
+              top: 20,
+              bottom: 8,
+              containLabel: true
+            },
+            tooltip: {
+              trigger: 'axis',
+              backgroundColor: 'transparent',
+              borderColor: 'transparent',
+              borderWidth: 0,
+              extraCssText: 'box-shadow: none;',
+              formatter: function (params) {
+                let value = params[params.length - 1].value
+                let date = params[params.length - 1].name
+                return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
                         ${date}  高程${value}m
                    </div>`
-            }
-          },
-          xAxis: [
-            {
-              type: 'category',
-              boundaryGap: false,
-              data: res.data.statisticalArray,
-              axisLine: {
+              }
+            },
+            xAxis: [
+              {
+                type: 'category',
+                boundaryGap: false,
+                data: res.data.statisticalArray,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
+                },
+                axisTick: {
+                  show: false
+                },
                 lineStyle: {
                   color: '#374672',
-                  width: 1 //这里是为了突出显示加上的
+                  width: 1
+                },
+                axisLabel: {
+                  formatter: function (value) {
+                    return moment(value).format('MM/DD')
+                  }
                 }
-              },
-              axisTick: {
-                show: false
-              },
-              lineStyle: {
-                color: '#374672',
-                width: 1
-              },
-              axisLabel: {
-                formatter: function (value) {
-                  return moment(value).format('MM/DD');
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                splitLine: { show: false },
+                // min: 380,
+                // interval: 10,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
                 }
               }
-            }
-          ],
-          yAxis: [
-            {
-              type: 'value',
-              splitLine: { show: false },
-              // min: 380,
-              // interval: 10,
-              axisLine: {
+            ],
+            series: [
+              {
+                type: 'line',
+                smooth: true,
+                lineStyle: { width: 1, color: '#66DC95' },
+                symbol: 'circle',
+                symbolSize: 7,
+                itemStyle: {
+                  normal: {
+                    color: '#ffff', // 点颜色
+                    borderColor: '#66DC95', // 点的边框颜色
+                    borderWidth: 2 // 点的边框宽度
+                  },
+                  emphasis: {
+                    borderWidth: 4, // 鼠标悬停时边框加粗
+                    shadowBlur: 10, // 阴影模糊大小，实现放大的效果
+                    shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+                  }
+                },
+                areaStyle: {
+                  opacity: 0.8,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: 'rgba(102,220,149,0)' },
+                    { offset: 0, color: 'rgba(102,220,149,0.25)' }
+                  ])
+                },
+                data: res.data.realTimeElevation
+              }
+            ]
+          }
+          this.swOption = option
+        }
+      })
+    },
+    getMonitoringStatisticsByFlow(id) {
+      getMonitoringStatisticsByFlow({ stationId: id }).then((res) => {
+        if (res.data) {
+          this.chartShow = true
+          const option = {
+            backgroundColor: 'transparent',
+            color: ['#4487D7'],
+            grid: {
+              left: 16,
+              right: 16,
+              top: 20,
+              bottom: 8,
+              containLabel: true
+            },
+            tooltip: {
+              trigger: 'axis',
+              backgroundColor: 'transparent',
+              borderColor: 'transparent',
+              borderWidth: 0,
+              extraCssText: 'box-shadow: none;',
+              formatter: function (params) {
+                let value = params[params.length - 1].value
+                let date = params[params.length - 1].name
+                return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
+                        ${date}  流量${value}m³/s
+                   </div>`
+              }
+            },
+            xAxis: [
+              {
+                type: 'category',
+                boundaryGap: false,
+                data: res.data.statisticalArray,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
+                },
+                axisTick: {
+                  show: false
+                },
                 lineStyle: {
                   color: '#374672',
-                  width: 1 //这里是为了突出显示加上的
+                  width: 1
+                },
+                axisLabel: {
+                  formatter: function (value) {
+                    return moment(value).format('MM/DD')
+                  }
                 }
               }
-            }
-          ],
-          series: [
-            {
-              type: 'line',
-              smooth: true,
-              lineStyle: { width: 1, color: '#66DC95' },
-              symbol: 'circle',
-              symbolSize: 7,
-              itemStyle: {
-                normal: {
-                  color: '#ffff', // 点颜色
-                  borderColor: '#66DC95', // 点的边框颜色
-                  borderWidth: 2 // 点的边框宽度
-                },
-                emphasis: {
-                  borderWidth: 4, // 鼠标悬停时边框加粗
-                  shadowBlur: 10, // 阴影模糊大小，实现放大的效果
-                  shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                splitLine: { show: false },
+                // min: 380,
+                // interval: 10,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
                 }
-              },
-              areaStyle: {
-                opacity: 0.8,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 1, color: 'rgba(102,220,149,0)' },
-                  { offset: 0, color: 'rgba(102,220,149,0.25)' }
-                ])
-              },
-              data: res.data.maxElevationYesterday
-            }
-          ]
+              }
+            ],
+            series: [
+              {
+                type: 'line',
+                smooth: true,
+                lineStyle: { width: 1, color: '#4487D7' },
+                symbol: 'circle',
+                symbolSize: 7,
+                itemStyle: {
+                  normal: {
+                    color: '#ffff', // 点颜色
+                    borderColor: '#4487D7', // 点的边框颜色
+                    borderWidth: 2 // 点的边框宽度
+                  },
+                  emphasis: {
+                    borderWidth: 4, // 鼠标悬停时边框加粗
+                    shadowBlur: 10, // 阴影模糊大小，实现放大的效果
+                    shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+                  }
+                },
+                areaStyle: {
+                  opacity: 0.8,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: ' rgba(73,142,227,0)' },
+                    { offset: 0, color: 'rgba(73,142,227,0.25)' }
+                  ])
+                },
+                data: res.data.realtimeDischarge
+              }
+            ]
+          }
+          this.swOption = option
         }
-        this.swOption = option
-      }
       })
     },
     changeDate(val) {
@@ -366,6 +479,15 @@ export default {
     },
     toChangeTab(d) {
       this.jcActive = d
+    },
+    toChangeSwTab(a) {
+      this.swActive = a
+      this.chartShow = false
+      if (this.swActive) {
+        this.getMonitoringStatistics(this.selectedVal2)
+      } else {
+        this.getMonitoringStatisticsByFlow(this.selectedVal2)
+      }
     }
   }
 }
@@ -541,6 +663,20 @@ export default {
         color: #5e93c9;
       }
     }
+    .tabs {
+      display: flex;
+      align-items: center;
+      gap: px-to-rem(20);
+      .tab-pane {
+        font-weight: 400;
+        font-size: px-to-rem(16);
+        color: #f5f5f5;
+      }
+      .active {
+        color: #4488d9;
+        border-bottom: px-to-rem(1) solid #4488d9;
+      }
+    }
   }
 }
 </style>

src/views/index.vue

@@ -13,9 +13,7 @@
           <LayerListPanel v-if="mapLoaded"></LayerListPanel>
           <SandMonitorLeft v-if="mainMenu === 'sandMonitor'"></SandMonitorLeft>
           <SandMonitorRight v-if="mainMenu === 'sandMonitor'"></SandMonitorRight>
-          <SafetyInspectionLeft v-if="mainMenu === 'safetyInspection'"></SafetyInspectionLeft>
-          <SafetyInspectionRight v-if="mainMenu === 'safetyInspection'"></SafetyInspectionRight>
-          <AddInspectionTask />
+          <SafetyInspection v-if="mainMenu === 'safetyInspection'"></SafetyInspection>
           <ComprehensiveOverview v-if="mainMenu === 'comprehensiveOverview'"></ComprehensiveOverview>
           <HydrologicInfo v-if="mainMenu === 'hydrologicInfo'"></HydrologicInfo>
           <SmartEarlyWarning v-if="mainMenu === 'smartEarlyWarning'" />
@@ -35,12 +33,11 @@ import MapTools from '@/views/components/tools'
 import LayerListPanel from '@/views/components/layerList'
 import SandMonitorLeft from './sand-monitor/left.vue'
 import SandMonitorRight from './sand-monitor/right.vue'
-import SafetyInspectionLeft from './safety-inspection/left.vue'
-import SafetyInspectionRight from './safety-inspection/right.vue'
+import SafetyInspection from './safety-inspection/index.vue'
 import ComprehensiveOverview from '@/views/comprehensive-overview/index'
 import HydrologicInfo from '@/views/hydrologic-info/index'
 import WaterStationPopup from '@/views/water-station-popup'
-import AddInspectionTask from './safety-inspection/addInspectionTask.vue'
+
 import SmartEarlyWarning from '@/views/smart-early-warning/index'
 import PlanDialog from './components/layerList/planDialog.vue'
 import VideoPlay from './video-play-popup/index.vue'
@@ -54,12 +51,10 @@ export default {
     LayerListPanel,
     SandMonitorLeft,
     SandMonitorRight,
-    SafetyInspectionLeft,
+    SafetyInspection,
     ComprehensiveOverview,
-    SafetyInspectionRight,
     HydrologicInfo,
     WaterStationPopup,
-    AddInspectionTask,
     SmartEarlyWarning,
     PlanDialog,
     VideoPlay,
@@ -107,6 +102,7 @@ export default {
     // 地图加载回调优化
     async onMapload(map) {
       window.map = map
+      this.$globalEventBus.$emit('loadMap')
       this.mapLoaded = true
       map.hasTerrain = true
       this.addWaterSurface(map)

src/views/safety-inspection/addInspectionTask.vue

@@ -2,7 +2,7 @@
   <div class="add-inspection-task-container" v-if="visible">
     <div class="add-inspection-task-title">
       <span class="title-text">新增巡查任务</span>
-      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="visible = false" />
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
     </div>
     <div class="add-inspection-task-content">
       <el-form ref="addTaskFormRef" :model="addTaskFrom" label-width="0.8rem" size="mini">
@@ -15,16 +15,12 @@
         <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" />
           </div>
         </el-form-item>
-        <!-- <el-form-item label="巡查时长">
-          <el-input v-model="addTaskFrom.taskDuration" placeholder="请输入" style="width: 85%"></el-input>
-          <span style="color: #fff">&nbsp;&nbsp;min</span>
-        </el-form-item> -->
         <el-form-item label="责任人">
           <el-select v-model="addTaskFrom.responsiblePerson" placeholder="请选择责任人" style="width: 100%" :popper-append-to-body="false" popper-class="u-popper-select">
             <el-option :label="p.name" :value="p.name" v-for="(p,i) in personList" :key="i"></el-option>
@@ -32,7 +28,7 @@
         </el-form-item>
         <el-form-item>
           <div style="display: flex; justify-content: flex-end; margin-top: 0.22rem">
-            <el-button size="mini" plain @click="visible = false" class="cancelBtn">取消</el-button>
+            <el-button size="mini" plain @click="closeModal" class="cancelBtn">取消</el-button>
             <el-button size="mini" type="primary" @click="toSave">保存</el-button>
             <el-button size="mini" type="primary" @click="startInspection">开始巡查</el-button>
           </div>
@@ -46,16 +42,19 @@
 import 'mars3d/mars3d.css'
 import * as mars3d from 'mars3d'
 import Vue from 'vue'
-import { toAddSecurityPatrol } from '@/api/securityPatrolApi'
+import { toAddSecurityPatrol,endPatrol,startPatrol } from '@/api/securityPatrolApi'
+import moment from 'moment'
 // 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
 Vue.prototype.mars3d = mars3d
 Vue.prototype.Cesium = mars3d.Cesium
-let graphicsLayer = null
 export default {
   name: 'addInspectionTask',
+  props:{
+    visible:Boolean,
+    inspectionOptions:Array
+  },
   data() {
     return {
-      visible: false,
       addTaskFrom: {
         securityPatrolName: '',
         securityPatrolContext: '',
@@ -73,51 +72,42 @@ export default {
           name:'谢智宇'
         }
       ],
-      inspectionOptions: [
-        {
-          latitude: '28.189249',
-          longitude: '113.065505',
-          devName: '浏阳市中和丁字村无线机房_1"',
-          deviceCode: '43010000831327000018',
-          channelCode: '430100430000000021130000033'
-        },
-        {
-          latitude: '28.194911',
-          longitude: '113.066789',
-          devName: '长沙芙蓉区隆平路与望龙路交叉口-东瑞社区',
-          deviceCode: '43010000831327000019',
-          channelCode: '430100430000000021130000037'
-        }
-      ],
       isPatrolling: false,
       currentPatrolIndex: 0,
+      currentTime:"",
       patrolInterval: null,
-      countdown: 20
+      xcId:''
     }
   },
-  mounted() {
-    this.$globalEventBus.$on('clcikAddTask', () => {
-      this.addTaskFrom={
-        securityPatrolName: '',
-        securityPatrolContext: '',
-        inspectionPoint: [{ value: '' }],
-        responsiblePerson: ''
+  watch:{
+    visible(val){
+      if(val){
+        this.addTaskFrom={
+         securityPatrolName: '',
+         securityPatrolContext: '',
+         inspectionPoint: [{ value: '' }],
+         responsiblePerson: ''
+       }
       }
-      this.visible = true
-      this.addInitialPoints()
-    })
-  },
-  destroyed() {
-    this.$globalEventBus.$off('clcikAddTask')
-    this.stopPatrol()
+    }
+  },  
+  mounted(){
+     this.$globalEventBus.$on('closeVideoPlayAdd',()=>{
+        this.stopPatrol()
+     })
+     this.$globalEventBus.$on('toPlayNextVideoAdd',()=>{
+        this.goToNextPatrolPoint()
+     })
   },
   methods: {
+    closeModal(){
+      this.$emit('closeAddTask')
+    },
     toSave(){
       toAddSecurityPatrol(this.addTaskFrom).then((res)=>{
         if(res.data){
           this.$message.success('添加成功')
-          // this.$globalEventBus.$emit('refreshInspectList')
-          this.visible = false
+          this.closeModal()
         }else{
           this.$message.error('添加失败')
         }
@@ -132,13 +122,21 @@ export default {
       })
     },
     startInspection() {
+      startPatrol(this.addTaskFrom).then((res)=>{
+        this.xcId = res.data.newSercurity.id
+      })
+      this.$emit('closeAddTask')
+      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss'); 
       if (this.addTaskFrom.inspectionPoint === 0) {
         this.$message.warning('请先添加至少一个巡查点')
         return
       }
       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)
         })
       })
@@ -173,11 +171,15 @@ export default {
     // 切换到下一个巡查点
     goToNextPatrolPoint() {
       if (this.currentPatrolIndex >= this.addTaskFrom.inspectionPoint.length) {
+        const endTime = moment().format('YYYY-MM-DD HH:mm:ss')
         this.stopPatrol()
-        this.$globalEventBus.$emit('clickVideoPlay', { visible: false })
+        this.$globalEventBus.$emit('clickVideoPlay', { visible: false,type:'add' })
+        endPatrol({id:this.xcId,endTime:endTime,startTime:this.currentTime}).then((res)=>{ 
+          this.$emit('refreshData')
+        })
         return
       }
-      this.$globalEventBus.$emit('clickVideoPlay', { visible: false })
+      this.$globalEventBus.$emit('clickVideoPlay', { visible: false,type:"add" })
       setTimeout(()=>{
         const point = this.addTaskFrom.inspectionPoint[this.currentPatrolIndex]
         this.flyToPoint(point)
@@ -187,49 +189,12 @@ export default {
       },100)
     },
     playVideo(point) {
-      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true })
+        this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true ,type:'add'})
     },
     stopPatrol() {
       this.isPatrolling = false
       clearInterval(this.patrolInterval)
     },
-    // 添加初始点
-    addInitialPoints() {
-      this.inspectionOptions.forEach((point) => {
-        this.addPointToMap(point)
-      })
-    },
-
-    // 添加点到地图
-    addPointToMap(point) {
-      // if (graphicsLayer) {
-      //   window.map.removeLayer(graphicsLayer)
-      // }
-      graphicsLayer = new this.mars3d.layer.GraphicLayer()
-      window.map.addLayer(graphicsLayer)
-      const graphic = new mars3d.graphic.PointEntity({
-        position: [point.longitude, point.latitude],
-        billboard: {
-          image: require('./image/camera.png'),
-          scale: 1,
-          horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
-          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
-        },
-        label: {
-          text: point.devName,
-          font_size: 32,
-          color: '#red',
-          outline: true,
-          outlineColor: '#000000',
-          outlineWidth: 2,
-          horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,
-          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
-          pixelOffset: new this.Cesium.Cartesian2(15, 0)
-        }
-      })
-
-      graphicsLayer.addGraphic(graphic)
-    },
     // 定位到点
     flyToPoint(point) {
       window.map.flyToPoint([point.longitude, point.latitude], {
@@ -251,6 +216,10 @@ export default {
         this.addTaskFrom.inspectionPoint.splice(index, 1)
       }
     }
+  },
+  destroyed() {
+    this.stopPatrol()
+    this.$globalEventBus.$off('closeVideoPlayAdd');
   }
 }
 </script>

src/views/safety-inspection/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="container">
+    <Left ref="inspRef"></Left>
+    <Right @refreshLeftList="refreshLeftList" :inspectionOptions="inspectionOptions"></Right>
+  </div>
+</template>
+
+<script>
+import Left from './left.vue'
+import Right from './right.vue'
+import * as mars3d from 'mars3d'
+import Vue from 'vue'
+let graphicsLayer = null
+Vue.prototype.mars3d = mars3d
+Vue.prototype.Cesium = mars3d.Cesium
+export default {
+  components: {
+    Left,
+    Right
+  },
+  data() {
+    return {
+      inspectionOptions: [
+        {
+          latitude: '28.189249',
+          longitude: '113.065505',
+          devName: '浏阳市中和丁字村无线机房_1"',
+          deviceCode: '43010000831327000018',
+          channelCode: '430100430000000021130000033'
+        },
+        {
+          latitude: '28.194911',
+          longitude: '113.066789',
+          devName: '长沙芙蓉区隆平路与望龙路交叉口-东瑞社区',
+          deviceCode: '43010000831327000019',
+          channelCode: '430100430000000021130000037'
+        }
+      ]
+    }
+  },
+  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) => {
+        if(!point.disabled){
+          this.addPointToMap(point)
+        }
+      })
+    },
+
+    // 添加点到地图
+    addPointToMap(point) {
+      // if (graphicsLayer) {
+      //   window.map.removeLayer(graphicsLayer)
+      // }
+      graphicsLayer = new this.mars3d.layer.GraphicLayer()
+      window.map.addLayer(graphicsLayer)
+      const graphic = new mars3d.graphic.PointEntity({
+        position: [point.longitude, point.latitude],
+        billboard: {
+          image: require('./image/camera.png'),
+          scale: 1,
+          horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM
+        },
+        attr: {
+          ...point
+        },
+        label: {
+          text: point.devName,
+          font_size: 32,
+          color: '#red',
+          outline: true,
+          outlineColor: '#000000',
+          outlineWidth: 2,
+          horizontalOrigin: this.Cesium.HorizontalOrigin.LEFT,
+          verticalOrigin: this.Cesium.VerticalOrigin.BOTTOM,
+          pixelOffset: new this.Cesium.Cartesian2(15, 0)
+        }
+      })
+
+      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>
+
+<style></style>

src/views/safety-inspection/left.vue

@@ -6,25 +6,22 @@
         <ul class="record-list">
           <template v-if="recordList.length > 0">
             <li class="record-list-item" v-for="(item, index) in recordList" :key="index">
-              <div class="record-title">{{ item.title }}</div>
+              <div class="record-title">{{ item.securityPatrolName }}</div>
               <div class="record-content">
                 <div class="record-item">
-                  <span>巡查开始时间：</span><span>{{ item.startTime }}</span>
+                  <span>巡查开始时间：</span><span>{{ formatDate(item.startTime) }}</span>
                 </div>
                 <div class="record-item">
-                  <span>巡查结束时间：</span><span>{{ item.endTime }}</span>
+                  <span>巡查结束时间：</span><span>{{ formatDate(item.endTime) }}</span>
                 </div>
                 <div class="record-item" style="display: flex; justify-content: space-between">
                   <div>
                     <span>巡查点位数：</span><span>{{ item.countPatrolPoints }}个</span>
                   </div>
                   <div>
-                    <span>巡查时长：</span><span>{{ item.patrolTime }}</span>
+                     <span>巡查责任人：</span><span>{{ item.responsiblePerson }}</span>
                   </div>
                 </div>
-                <div class="record-item">
-                  <span>巡查责任人：</span><span>{{ item.responsiblePerson }}</span>
-                </div>
               </div>
             </li>
           </template>
@@ -43,6 +40,7 @@
 import BasePanelLeft from '@/components/base-panel/base-panel-left'
 import BaseHeader from '@/components/base-header/base-header'
 import { getSecurityPatrolList } from '@/api/securityPatrolApi'
+import moment from 'moment'
 export default {
   name: 'safetyInspectionLeft',
   components: { BasePanelLeft, BaseHeader },
@@ -51,13 +49,18 @@ export default {
       recordList: []
     }
   },
-
+  mounted(){
+    this.getSecurityPatrolList()
+  },
   methods: {
      getSecurityPatrolList() {
       getSecurityPatrolList({  finishedState: 1 }).then((res) => {
         this.recordList = res.data.records
       })
     },
+    formatDate(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+    }
   }
 }
 </script>
@@ -92,6 +95,11 @@ export default {
     display: flex;
     flex-direction: column;
     padding: px-to-rem(10);
+    height:100%;
+    overflow: auto;
+    &::-webkit-scrollbar {
+          display: none;
+        }
     .record-list-item {
       display: flex;
       flex-direction: column;
@@ -106,6 +114,7 @@ export default {
         display: flex;
         flex-direction: column;
         border-bottom: 1px solid #5a80b4;
+        padding-bottom:px-to-rem(20);
         .record-item {
           font-weight: 400;
           font-size: px-to-rem(14);

src/views/safety-inspection/right.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
   <base-panel-right>
     <div class="safety-inspection-right-container">
       <base-header title="一键巡河"></base-header>
@@ -20,7 +21,7 @@
               <li class="task-table-list-item" v-for="item in taskListData" :key="item.id">
                 <span>{{ item.securityPatrolName }}</span>
                 <span>{{ item.countPatrolPoints }}</span>
-                <span style="color: #498ee3; cursor: pointer" @click="toXc">巡查</span>
+                <span style="color: #498ee3; cursor: pointer" @click="toXc(item)">巡查</span>
               </li>
             </div>
           </ul>
@@ -58,19 +59,27 @@
       </div>
     </div>
   </base-panel-right>
+   <AddInspectionTask :visible="addTaskShow" :inspectionOptions="inspectionOptions" @closeAddTask="closeAddTask"/>
+</div>
 </template>
 <script>
 import BasePanelRight from '@/components/base-panel/base-panel-right'
 import BaseHeader from '@/components/base-header/base-header'
-import { getSecurityPatrolList } from '@/api/securityPatrolApi'
+import { getSecurityPatrolList,endPatrol } from '@/api/securityPatrolApi'
+import AddInspectionTask from './addInspectionTask.vue'
+import moment from 'moment'
 export default {
   name: 'sandMonitorRight',
-  components: { BasePanelRight, BaseHeader },
+  components: { BasePanelRight, BaseHeader,AddInspectionTask },
+  props:{
+    inspectionOptions:Array
+  },
   data() {
     return {
       securityPatrolName: '',
       taskListData: [],
       personStatus: '1',
+      addTaskShow:false,
       personName: '',
       personList: [
         {
@@ -101,19 +110,108 @@ export default {
           phone: '15319940131',
           remark: '生态区监管'
         }
-      ]
+      ],
+      currentTime : '',
+      isPatrolling: false,
+      currentPatrolIndex: 0,
+      patrolInterval: null,
+      inspectionPoint:[],
+      xcId:null
     }
   },
   mounted() {
     this.getSecurityPatrolList()
-    this.$globalEventBus.$on('refreshInspectList', () => {
-      this.getSecurityPatrolList()
+    this.$globalEventBus.$on('closeVideoPlay',()=>{
+      this.stopPatrol()
     })
+     this.$globalEventBus.$on('toPlayNextVideo',()=>{
+        this.goToNextPatrolPoint()
+     })
   },
   methods: {
-    toXc() {},
+    refreshData(){
+        this.getSecurityPatrolList()
+        this.$emit('refreshLeftList')
+    },
+    toXc(item) {
+      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss'); 
+      this.xcId = item.id
+      this.inspectionPoint = item.inspectionPoints
+      this.inspectionPoint.forEach((item, index) => {
+        this.fetchUrl(item).then((res) => {
+          const url = res.data.streamUrl
+          this.$set(this.inspectionPoint[index], 'url', url)
+        })
+      })
+      this.isPatrolling = true
+      this.currentPatrolIndex = 0
+      this.goToNextPatrolPoint()
+      // 设置定时器，每20秒切换到下一个点
+      this.patrolInterval = setInterval(() => {
+        this.goToNextPatrolPoint()
+      }, 20000)
+    },
+     // 切换到下一个巡查点
+    goToNextPatrolPoint() {
+      if (this.currentPatrolIndex >= this.inspectionPoint.length) {
+        this.stopPatrol()
+        this.$globalEventBus.$emit('clickVideoPlay', { visible: false ,type:"xc"})
+        const endTime = moment().format('YYYY-MM-DD HH:mm:ss')
+        endPatrol({id:this.xcId,endTime:endTime,startTime:this.currentTime}).then(()=>{
+          this.refreshData()
+        })
+        return
+      }
+      this.$globalEventBus.$emit('clickVideoPlay', { visible: false,type:'xc' })
+      setTimeout(()=>{
+        const point = this.inspectionPoint[this.currentPatrolIndex]
+        this.flyToPoint(point)
+        // 播放视频
+        this.playVideo(point)
+        this.currentPatrolIndex++
+      },100)
+    },
+    flyToPoint(point) {
+      window.map.flyToPoint([point.longitude, point.latitude], {
+        radius: 5000, // 飞行距离目标点的距离
+        duration: 2 // 飞行持续时间（秒）
+      })
+    },
+    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)
+          })
+      })
+    },
+    playVideo(point) {
+      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true,type:'xc' })
+    },
+    stopPatrol() {
+      this.isPatrolling = false
+      clearInterval(this.patrolInterval)
+    },
+    
     addTask() {
-      this.$globalEventBus.$emit('clcikAddTask')
+      this.addTaskShow = true
+    },
+    closeAddTask(){
+      this.addTaskShow = false
+      this.getSecurityPatrolList()
+      this.$emit('refreshLeftList')
     },
     getSecurityPatrolList() {
       getSecurityPatrolList({ securityPatrolName: this.securityPatrolName, finishedState: 0 }).then((res) => {
@@ -124,6 +222,9 @@ export default {
       this.securityPatrolName = name
       this.getSecurityPatrolList()
     }
+  },
+  destroyed(){
+    this.$globalEventBus.$off('closeVideoPlay')
   }
 }
 </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.imgUrl" alt="" />
+                      </div>
+                      <div class="right">
+                        <div class="title">{{ item.alarmBody }}</div>
+                        <div class="txt">{{ item.address }}</div>
+                        <div class="txt">{{ item.alarmTime }}</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,94 @@ 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: [
+            {
+              imgUrl: ImgUrl,
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
+            }
+          ]
         },
         {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
+          name: '乱采预警',
+          lists: [
+             {
+              img: ImgUrl,
+              title: '乱建预警',
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
+            }
+          ]
         },
         {
-          img: ImgUrl,
-          title: '乱建预警',
-          address: '咸阳兴平仪空村',
-          date: '2025-01-15 14:00:00',
-          deadline: '剩余0天 00:28:12'
+          name: '乱堆预警',
+          lists: [
+            {
+              img: ImgUrl,
+              title: '乱建预警',
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
+            }
+          ]
         },
         {
-          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: '乱建预警',
+              deviceCode:'43030400831327000100',
+              deviceName:'咸宁阳兴平仪空村综合机房',
+              channelName:'咸宁阳兴平仪空村综合机房梯次LY',
+              longitude:'112.985866',
+              latitude:'27.814898',
+              address: '咸宁阳兴平仪空村综合机房',
+              confidenceLevel:'0.80615',
+              orderId:'202508251210241338766566',
+              alarmBody:'流域乱建预警',
+              warningSourceName: 'AI预警',
+              warningTypeName: '四乱预警',
+              emergencyLevelName:'一级',
+              alarmTime:'2025-08-25 09:36:31'
+            }
+          ]
         }
       ]
     }
@@ -149,7 +179,8 @@ export default {
           'post'
         )
         .then(async (res) => {
-          console.info(res)
+          
+          // this.listItem = data.rows
         })
     },
     handleSizeChange() {},
@@ -159,21 +190,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 +233,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 +273,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

@@ -26,7 +26,7 @@ export default {
       visible: false,
       title: '巡查点',
       option: {
-        url: 'ws://10.157.200.5:9381/live/43010000831327000019_0_0_4f0fc0b6e1a44468a1986a0e2cbfa94b.flv',
+        url: '',
         isLive: true, //使用直播模式，会隐藏进度条和播放时间
         autoplay: true,
         muted: true, //是否静音
@@ -49,7 +49,8 @@ export default {
       style: {
         width: '600px',
         height: '350px'
-      }
+      },
+      type:'add'
     }
   },
   components: {
@@ -57,10 +58,11 @@ export default {
   },
   mounted() {
     this.$globalEventBus.$on('clickVideoPlay', (data) => {
+      this.type = data.type
       this.visible = data.visible
       this.tsModalVisible = false
       this.title = data.point?data.point.devName:''
-      const url =data.point? data.point.url:''
+      const url =data.point&&data.point.url? data.point.url:''
       this.$set(this.option,'url',url)
     })
   },
@@ -72,11 +74,26 @@ 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 if(this.type == 'xc'){
+        this.$globalEventBus.$emit('toPlayNextVideo')
+      }
     },
-    toNext() {},
     closeVideoDialog() {
       this.visible = false
+      if(this.type == 'add'){
+        this.$globalEventBus.$emit('closeVideoPlayAdd')
+      }else if(this.type == 'xc'){
+        this.$globalEventBus.$emit('closeVideoPlay')
+      }
     }
   }
 }
@@ -85,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

@@ -14,34 +14,34 @@
           <el-row :gutter="10">
             <el-col :span="8" class="label-col">
               <div class="label">实时高程：</div>
-              <div class="value"><span>300</span><span>m</span></div>
+              <div class="value"><span>{{swInfo.realTimeElevation}}</span><span>m</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">1小时雨量：</div>
-              <div class="value"><span>300</span><span>mm</span></div>
+              <div class="value"><span>{{swInfo.precipitationOneH}}</span><span>mm</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">实时流量：</div>
-              <div class="value"><span>300</span><span>m³/s</span></div>
+              <div class="value"><span>{{swInfo.realTimeDischarge}}</span><span>m³/s</span></div>
             </el-col>
           </el-row>
           <el-row :gutter="10">
             <el-col :span="8" class="label-col">
               <div class="label">昨日最高：</div>
-              <div class="value"><span>0</span><span>m</span></div>
+              <div class="value"><span>{{swInfo.maxElevationYesterday}}</span><span>m</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">当天雨量：</div>
-              <div class="value"><span>300</span><span>mm</span></div>
+              <div class="value"><span>{{swInfo.precipitationToday}}</span><span>mm</span></div>
             </el-col>
             <el-col :span="8" class="label-col">
               <div class="label">实时流速：</div>
-              <div class="value"><span>0</span><span>m³/s</span></div>
+              <div class="value"><span>{{swInfo.realTimeVelocity}}</span><span>m³/s</span></div>
             </el-col>
           </el-row>
         </div>
         <div class="info-chart">
-          <LineChart style="height: 2.05rem" />
+          <LineChart style="height: 2.05rem" :options="swOption" />
         </div>
       </div>
       <div class="monitor-container" v-else>
@@ -53,57 +53,132 @@
           <span>&nbsp;km&nbsp;</span>
           <el-button type="primary" size="mini" @click="search">查询</el-button>
         </div>
-        <div class="monitor-list">
-          <ul>
-            <li v-for="(item, index) in monitorList" :key="index">
-              <span>新建18米-点位32332432{{ item }}</span>
-            </li>
-          </ul>
-        </div>
-        <div class="monitor-video">
-          <!-- <EasyPlayer
-            :ref="item.videoId"
-            :playerName="item.sources[0].camera.name"
-            :videoUrl="item.sources[0].src"
-            class="video-player screenshot"
-            live
-            speed
-            :easyStretch="easyStretch"
-            :has-audio="!item.sources[0].src.includes('.flv')"
-            :reconnection="true"
-            @click.native.stop
-          /> -->
-        </div>
+        <template v-if="monitorList.length > 0">
+          <div class="monitor-list">
+            <ul>
+              <li v-for="(item, index) in monitorList" :key="index" :class="{active:activeIndex == index}">
+                <span  @click="toLoadVideo(item,index)">{{item.name}}</span>
+              </li>
+            </ul>
+            <div class="monitor-video">
+             <Artplayer :option="videoOption" :style="style" v-if="artShow"/>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="noData">
+            <img src="@/assets/image/comprehensive/noData.png" alt="" />
+            <div class="txt">暂无摄像头</div>
+          </div>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
 import LineChart from './line-chart'
-// import { getCameraDeviceList } from '@/api/cameraApi'
+import Artplayer from '@/components/video-player/video-player.vue'
 import { warning } from '@/utils'
+import { getMonitoringStatistics } from '@/api/monitoringDataApi'
+import flvjs from 'flv.js'
+import moment from 'moment'
 let graphicsLayer = null
 export default {
   name: 'WaterStationPopup',
-  components: { LineChart },
+  components: { LineChart,Artplayer },
   data() {
     return {
+      style: {
+        width: '480px',
+        height: '270px'
+      },
+      artShow:false,
+      videoOption: {
+        url: '',
+        isLive: true, //使用直播模式，会隐藏进度条和播放时间
+        autoplay: true,
+        muted: true, //是否静音
+        type: 'flv',
+        autoSize: true,
+        customType: {
+          flv: (video, url, art) => {
+            if (flvjs.isSupported()) {
+              if (art.flv) art.flv.destroy()
+              const flv = flvjs.createPlayer({ type: 'flv', url })
+              flv.attachMediaElement(video)
+              flv.load()
+              art.flv = flv
+              art.on('destroy', () => flv.destroy())
+            }
+          }
+        }
+      },
       visible: false,
       typeVal: '1',
       radius: '',
-      monitorList: [1, 2, 3, 4, 5, 6, 7, 9, 66, 67, 67, 76],
-      stationGraphic: {}
+      activeIndex:0,
+      monitorList: [],
+      stationGraphic: {},
+      swOption: {
+        backgroundColor: 'transparent',
+        color: ['#66DC95'],
+        grid: {
+          left: 16,
+          right: 16,
+          top: 30,
+          bottom: 0,
+          containLabel: true
+        },
+        textStyle: { color: '#fff' },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'none' },
+          textStyle: { color: '#fff' },
+          extraCssText: 'background:#2F5481; border-radius: 8px;border:none ',
+          formatter: (params) => {
+            return `${params[0].axisValue} 高程${params[0].data}m`
+          }
+        },
+        xAxis: [{ type: 'category', boundaryGap: false, data: ['08/20', '08/21', '08/22', '08/23', '08/24', '08/25'] }],
+        yAxis: [{ type: 'value', name: '高程(m)', splitLine: { show: false }, min: 380, max: 420 }],
+        series: [
+          {
+            name: '高程(m)',
+            type: 'line',
+            smooth: true,
+            symbol: 'emptyCircle',
+            symbolSize: 6,
+            lineStyle: { width: 2 },
+            emphasis: { scale: 1.5 },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: 'rgba(102,220,149,0)' },
+                { offset: 0, color: ' rgba(102,220,149,0.25)' }
+              ])
+            },
+            data: [401, 398, 391, 410, 395, 400, 396]
+          }
+        ]
+      },
+      swInfo: {}
     }
   },
   mounted() {
     this.$globalEventBus.$on('clickWaterStation', (data) => {
-      this.visible = true
+      if(data.layer.id == '2-2'){
+        this.getMonitoringStatistics(19)
+      }else{
+         this.getMonitoringStatistics(18)
+      }
       this.stationGraphic = data.graphic
     })
   },
   destroyed() {
     this.$globalEventBus.$off('clickWaterStation')
+    this.graphicsLayer = null
   },
   methods: {
     search() {
@@ -111,11 +186,160 @@ export default {
         warning('请输入查询半径')
         return
       }
+      this.getAroundAnalysisOwnList()
       this.addCameraToMap()
-      // const params = { longitude: 113.07634141539151, latitude: 28.18518024316094, visualRadius: this.radius * 1000 }
-      // getCameraDeviceList(params).then((res) => {
-      //   console.log(res)
-      // })
+    },
+    getMonitoringStatistics(id) {
+      getMonitoringStatistics({ stationId: id }).then((res) => {
+        if (res.data) {
+          this.visible = true
+          this.swInfo = res.data.info 
+          const option = {
+            backgroundColor: 'transparent',
+            color: ['#66DC95'],
+            grid: {
+              left: 16,
+              right: 16,
+              top: 20,
+              bottom: 8,
+              containLabel: true
+            },
+            tooltip: {
+              trigger: 'axis',
+              backgroundColor: 'transparent',
+              borderColor: 'transparent',
+              borderWidth: 0,
+              extraCssText: 'box-shadow: none;',
+              formatter: function (params) {
+                let value = params[params.length - 1].value
+                let date = params[params.length - 1].name
+                return `<div style="background-color: #2F5481; color: white; padding: 5px; border-radius: 5px;">
+                        ${date}  高程${value}m
+                   </div>`
+              }
+            },
+            xAxis: [
+              {
+                type: 'category',
+                boundaryGap: false,
+                data: res.data.statisticalArray,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
+                },
+                axisTick: {
+                  show: false
+                },
+                lineStyle: {
+                  color: '#374672',
+                  width: 1
+                },
+                axisLabel: {
+                  formatter: function (value) {
+                    return moment(value).format('MM/DD')
+                  }
+                }
+              }
+            ],
+            yAxis: [
+              {
+                type: 'value',
+                splitLine: { show: false },
+                // min: 380,
+                // interval: 10,
+                axisLine: {
+                  lineStyle: {
+                    color: '#374672',
+                    width: 1 //这里是为了突出显示加上的
+                  }
+                }
+              }
+            ],
+            series: [
+              {
+                type: 'line',
+                smooth: true,
+                lineStyle: { width: 1, color: '#66DC95' },
+                symbol: 'circle',
+                symbolSize: 7,
+                itemStyle: {
+                  normal: {
+                    color: '#ffff', // 点颜色
+                    borderColor: '#66DC95', // 点的边框颜色
+                    borderWidth: 2 // 点的边框宽度
+                  },
+                  emphasis: {
+                    borderWidth: 4, // 鼠标悬停时边框加粗
+                    shadowBlur: 10, // 阴影模糊大小，实现放大的效果
+                    shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
+                  }
+                },
+                areaStyle: {
+                  opacity: 0.8,
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: 'rgba(102,220,149,0)' },
+                    { offset: 0, color: 'rgba(102,220,149,0.25)' }
+                  ])
+                },
+                data: res.data.realTimeElevation
+              }
+            ]
+          }
+          this.swOption = option
+        }
+      })
+    },
+    getAroundAnalysisOwnList() {
+      window
+        .requestSDK(
+          '/ttbdm/aroundAnalysisOwn/getAroundAnalysisOwnList',
+          {
+            longitude: this.stationGraphic.coordinate[0],
+            latitude: this.stationGraphic.coordinate[1],
+            radius: this.radius,
+            type: '1',
+            pageNum: 1,
+            pageSize: 5,
+            notFilterSameLngLat: true
+          },
+          {},
+          'post'
+        )
+        .then((res) => {
+          if(res.code == 200){
+            this.monitorList = res.data
+            if(res.data.length > 0){
+              this.toLoadVideo(this.monitorList[0],0)
+            }
+          }
+        })
+    },
+    toLoadVideo(row,index){
+      this.activeIndex = index
+      this.artShow = false
+       window
+          .requestSDK(
+            '/ttvideo/video/player/getVideoRealtimeUrl',
+            {
+              deviceCode: row.id,
+              channelCode: row.channelCode,
+              netType: '1',
+              protocolType: 5,
+              streamType: 1
+            },
+            {},
+            'post'
+          )
+          .then((res) => {
+             if(res.code == 200){
+              this.artShow = true
+              this.$set(this.videoOption,'url',res.data.streamUrl)
+            }else if(res.code == 4001){
+              this.$message.warning('设备离线')
+            }
+          })
     },
     addCameraToMap() {
       if (graphicsLayer) {
@@ -236,9 +460,25 @@ export default {
             &:hover {
               background-color: #498ee3;
             }
+            &.active{
+              background-color: #498ee3;
+            }
           }
         }
       }
+      .noData {
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        img {
+          margin-top: px-to-rem(70);
+          margin-bottom: px-to-rem(20);
+        }
+        .txt {
+          color: #fff;
+          font-size: px-to-rem(14);
+        }
+      }
     }
   }
 }

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

@@ -4,10 +4,12 @@
 
 <script>
 import { echartMixin } from '@/mixins'
-import * as echarts from 'echarts'
 export default {
   name: 'LineChart',
   mixins: [echartMixin],
+  props:{
+    options:Object
+  },
   data() {
     return {
       seriesData: []
@@ -15,49 +17,7 @@ export default {
   },
   methods: {
     initChart() {
-      const option = {
-        backgroundColor: 'transparent',
-        color: ['#66DC95'],
-        grid: {
-          left: 16,
-          right: 16,
-          top: 30,
-          bottom: 0,
-          containLabel: true
-        },
-        textStyle: { color: '#fff' },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { type: 'none' },
-          textStyle: { color: '#fff' },
-          extraCssText: 'background:#2F5481; border-radius: 8px;border:none ',
-          formatter: (params) => {
-            return `${params[0].axisValue} 高程${params[0].data}m`
-          }
-        },
-        xAxis: [{ type: 'category', boundaryGap: false, data: ['08/20', '08/21', '08/22', '08/23', '08/24', '08/25'] }],
-        yAxis: [{ type: 'value', name: '高程(m)', splitLine: { show: false }, min: 380, max: 420 }],
-        series: [
-          {
-            name: '高程(m)',
-            type: 'line',
-            smooth: true,
-            symbol: 'emptyCircle',
-            symbolSize: 6,
-            lineStyle: { width: 2 },
-            emphasis: { scale: 1.5 },
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 1, color: 'rgba(102,220,149,0)' },
-                { offset: 0, color: ' rgba(102,220,149,0.25)' }
-              ])
-            },
-            data: [401, 398, 391, 410, 395, 400, 396]
-          }
-        ]
-      }
-      this.chartObj.setOption(option)
+      this.chartObj.setOption(this.options)
     }
   }
 }