reactor:巡查记录+巡查功能+将新增任务弹窗交互方式更改

src/api/securityPatrolApi.js

@@ -13,4 +13,12 @@ export function toAddSecurityPatrol(data){
     method: 'post',
     data
   })
+}
+//巡查
+export function startPatrol(data){
+    return request({
+    url: '/api/securityPatrol/startPatrol',
+    method: 'post',
+    data
+  })
 }

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/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

@@ -1,8 +1,8 @@
 <template>
-  <div class="add-inspection-task-container" v-if="visible">
+  <div class="add-inspection-task-container">
     <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">
@@ -21,10 +21,6 @@
             <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>
@@ -50,12 +46,15 @@ import { toAddSecurityPatrol } from '@/api/securityPatrolApi'
 // 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
 Vue.prototype.mars3d = mars3d
 Vue.prototype.Cesium = mars3d.Cesium
-let graphicsLayer = null
+// let graphicsLayer = null
 export default {
   name: 'addInspectionTask',
+  props:{
+    visible:Boolean,
+    inspectionOptions:Array
+  },
   data() {
     return {
-      visible: false,
       addTaskFrom: {
         securityPatrolName: '',
         securityPatrolContext: '',
@@ -73,51 +72,58 @@ 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'
-        }
-      ],
+      // 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,
-      countdown: 20
+      patrolInterval: null
     }
   },
   mounted() {
-    this.$globalEventBus.$on('clcikAddTask', () => {
-      this.addTaskFrom={
+    // this.$globalEventBus.$on('clcikAddTask', () => {
+    //   this.addTaskFrom={
+    //     securityPatrolName: '',
+    //     securityPatrolContext: '',
+    //     inspectionPoint: [{ value: '' }],
+    //     responsiblePerson: ''
+    //   }
+    //   this.closeModal()
+    //   this.addInitialPoints()
+    // })
+    this.addTaskFrom={
         securityPatrolName: '',
         securityPatrolContext: '',
         inspectionPoint: [{ value: '' }],
         responsiblePerson: ''
       }
-      this.visible = true
-      this.addInitialPoints()
-    })
+    // this.addInitialPoints()
   },
   destroyed() {
-    this.$globalEventBus.$off('clcikAddTask')
     this.stopPatrol()
   },
   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('添加失败')
         }
@@ -193,43 +199,43 @@ export default {
       this.isPatrolling = false
       clearInterval(this.patrolInterval)
     },
-    // 添加初始点
-    addInitialPoints() {
-      this.inspectionOptions.forEach((point) => {
-        this.addPointToMap(point)
-      })
-    },
+    // // 添加初始点
+    // 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)
-        }
-      })
+    // // 添加点到地图
+    // 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)
-    },
+    //   graphicsLayer.addGraphic(graphic)
+    // },
     // 定位到点
     flyToPoint(point) {
       window.map.flyToPoint([point.longitude, point.latitude], {

src/views/safety-inspection/index.vue

@@ -0,0 +1,91 @@
+<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.$globalEventBus.$on('loadMap',()=>{
+        this.addInitialPoints()
+    })
+  },
+  methods: {
+    refreshLeftList() {
+      this.$refs.inspRef.getSecurityPatrolList()
+    },
+    // 添加初始点
+    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)
+    }
+  }
+}
+</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>
@@ -106,6 +109,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 v-if="addTaskShow" :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,startPatrol } 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,92 @@ export default {
           phone: '15319940131',
           remark: '生态区监管'
         }
-      ]
+      ],
+      currentTime : '',
+      isPatrolling: false,
+      currentPatrolIndex: 0,
+      patrolInterval: null,
+      inspectionPoint:[]
     }
   },
   mounted() {
     this.getSecurityPatrolList()
-    this.$globalEventBus.$on('refreshInspectList', () => {
-      this.getSecurityPatrolList()
-    })
   },
   methods: {
-    toXc() {},
+    toXc(item) {
+      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss'); 
+      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 })
+        return
+      }
+      this.$globalEventBus.$emit('clickVideoPlay', { visible: false })
+      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 })
+    },
+    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) => {

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

@@ -60,7 +60,7 @@ export default {
       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)
     })
   },