feat 测距工具实现+流量接口联调

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

@@ -14,11 +14,20 @@ export function toAddSecurityPatrol(data){
     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/tools/index.vue

@@ -1,75 +1,142 @@
 <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':rangingActive}" @click="toggleRanging">测距</div>
+        <div class="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,
+      rangingActive:false,
+      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
+    },
+    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()
         }
     }
+  },
+  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, .4);
+        color: #4f9fff;
     }
+  }
+  .isHide,
+  .clToolHide {
+    display: none;
+  }
 }
-</style>
+</style>

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,14 @@
                   <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 && swActive" />
+            <LineChart ref="vLineChart2" style="height: 1.8rem" :option="lOption" v-if="chartShow && !swActive" />
           </div>
         </template>
       </BaseMain>
@@ -94,11 +99,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 +126,8 @@ export default {
           val: '0'
         }
       ],
-      chartShow:false,
+      lOption: {},
+      chartShow: false,
       selectedVal: '0',
       selectedVal1: '0',
       selectedVal2: '',
@@ -261,104 +268,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.lOption = option
         }
-        this.swOption = option
-      }
       })
     },
     changeDate(val) {
@@ -366,6 +481,20 @@ export default {
     },
     toChangeTab(d) {
       this.jcActive = d
+    },
+    toChangeSwTab(a) {
+      this.swActive = a
+      if (this.swActive) {
+         this.$nextTick(() => {
+          this.$refs.vLineChart.initChart()
+        })
+        this.getMonitoringStatistics(this.selectedVal2)
+      } else {
+         this.$nextTick(() => {
+          this.$refs.vLineChart2.initChart()
+        })
+        this.getMonitoringStatisticsByFlow(this.selectedVal2)
+      }
     }
   }
 }
@@ -541,6 +670,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/safety-inspection/addInspectionTask.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="add-inspection-task-container">
+  <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="closeModal" />
@@ -42,11 +42,11 @@
 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:{
@@ -72,48 +72,32 @@ 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,
-      patrolInterval: null
+      currentTime:"",
+      patrolInterval: null,
+      xcId:''
     }
   },
-  mounted() {
-    // this.$globalEventBus.$on('clcikAddTask', () => {
-    //   this.addTaskFrom={
-    //     securityPatrolName: '',
-    //     securityPatrolContext: '',
-    //     inspectionPoint: [{ value: '' }],
-    //     responsiblePerson: ''
-    //   }
-    //   this.closeModal()
-    //   this.addInitialPoints()
-    // })
-    this.addTaskFrom={
-        securityPatrolName: '',
-        securityPatrolContext: '',
-        inspectionPoint: [{ value: '' }],
-        responsiblePerson: ''
+  watch:{
+    visible(val){
+      if(val){
+        this.addTaskFrom={
+         securityPatrolName: '',
+         securityPatrolContext: '',
+         inspectionPoint: [{ value: '' }],
+         responsiblePerson: ''
+       }
       }
-    // this.addInitialPoints()
-  },
-  destroyed() {
-    this.stopPatrol()
+    }
+  },  
+  mounted(){
+     this.$globalEventBus.$on('closeVideoPlayAdd',()=>{
+        this.stopPatrol()
+     })
+     this.$globalEventBus.$on('toPlayNextVideoAdd',()=>{
+        this.goToNextPatrolPoint()
+     })
   },
   methods: {
     closeModal(){
@@ -136,8 +120,14 @@ export default {
           Object.assign(point, obj[0])
         }
       })
+      console.info(this.addTaskFrom.inspectionPoint)
     },
     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
@@ -179,11 +169,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)
@@ -193,49 +187,13 @@ export default {
       },100)
     },
     playVideo(point) {
-      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true })
+      console.info(point)
+      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], {
@@ -257,6 +215,10 @@ export default {
         this.addTaskFrom.inspectionPoint.splice(index, 1)
       }
     }
+  },
+  destroyed() {
+    this.stopPatrol()
+    this.$globalEventBus.$off('closeVideoPlayAdd');
   }
 }
 </script>

src/views/safety-inspection/left.vue

@@ -95,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;

src/views/safety-inspection/right.vue

@@ -59,13 +59,13 @@
       </div>
     </div>
   </base-panel-right>
-   <AddInspectionTask v-if="addTaskShow" :visible="addTaskShow" :inspectionOptions="inspectionOptions" @closeAddTask="closeAddTask"/>
+   <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,startPatrol } from '@/api/securityPatrolApi'
+import { getSecurityPatrolList,endPatrol } from '@/api/securityPatrolApi'
 import AddInspectionTask from './addInspectionTask.vue'
 import moment from 'moment'
 export default {
@@ -115,15 +115,27 @@ export default {
       isPatrolling: false,
       currentPatrolIndex: 0,
       patrolInterval: null,
-      inspectionPoint:[]
+      inspectionPoint:[],
+      xcId:null
     }
   },
   mounted() {
     this.getSecurityPatrolList()
+    this.$globalEventBus.$on('closeVideoPlay',()=>{
+      this.stopPatrol()
+    })
+     this.$globalEventBus.$on('toPlayNextVideo',()=>{
+        this.goToNextPatrolPoint()
+     })
   },
   methods: {
+    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) => {
@@ -143,10 +155,14 @@ export default {
     goToNextPatrolPoint() {
       if (this.currentPatrolIndex >= this.inspectionPoint.length) {
         this.stopPatrol()
-        this.$globalEventBus.$emit('clickVideoPlay', { visible: false })
+        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 })
+      this.$globalEventBus.$emit('clickVideoPlay', { visible: false,type:'xc' })
       setTimeout(()=>{
         const point = this.inspectionPoint[this.currentPatrolIndex]
         this.flyToPoint(point)
@@ -182,7 +198,7 @@ export default {
       })
     },
     playVideo(point) {
-      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true })
+      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true,type:'xc' })
     },
     stopPatrol() {
       this.isPatrolling = false
@@ -206,6 +222,9 @@ export default {
       this.securityPatrolName = name
       this.getSecurityPatrolList()
     }
+  },
+  destroyed(){
+    this.$globalEventBus.$off('closeVideoPlay')
   }
 }
 </script>

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

@@ -49,7 +49,8 @@ export default {
       style: {
         width: '600px',
         height: '350px'
-      }
+      },
+      type:'add'
     }
   },
   components: {
@@ -57,6 +58,7 @@ 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:''
@@ -74,9 +76,20 @@ export default {
     openTsModal() {
       this.tsModalVisible = true
     },
-    toNext() {},
+    toNext() {
+      if(this.type == 'add'){
+        this.$globalEventBus.$emit('toPlayNextVideoAdd')
+      }else{
+        this.$globalEventBus.$emit('toPlayNextVideo')
+      }
+    },
     closeVideoDialog() {
       this.visible = false
+      if(this.type == 'add'){
+        this.$globalEventBus.$emit('closeVideoPlayAdd')
+      }else{
+        this.$globalEventBus.$emit('closeVideoPlay')
+      }
     }
   }
 }