reactor:一键巡河-打点及视频轮播

src/api/announcementApi.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 export function getAnnouncementList(params) {
   return request({
-    url: '/announcement/list',
+    url: '/api/announcement/list',
     method: 'get',
     params: params
   })
@@ -9,7 +9,7 @@ export function getAnnouncementList(params) {
 //新增公告
 export function toAddAnnouncement(data){
     return request({
-    url: '/announcement/add',
+    url: '/api/announcement/add',
     method: 'post',
     data
   })
@@ -17,7 +17,7 @@ export function toAddAnnouncement(data){
 //修改公告
 export function toUpdateAnnouncement(data){
     return request({
-    url: '/announcement/update',
+    url: '/api/announcement/update',
     method: 'post',
     data
   })
@@ -25,21 +25,21 @@ export function toUpdateAnnouncement(data){
 //发布公告
 export function toPublish(id) {
   return request({
-    url: '/announcement/publish/'+id,
+    url: '/api/announcement/publish/'+id,
     method: 'post',
   })
 }
 //下架公告
 export function toTakeDown(id) {
   return request({
-    url: '/announcement/takeDown/'+id,
+    url: '/api/announcement/takeDown/'+id,
     method: 'post',
   })
 }
 //删除公告
 export function toDelete(data){
     return request({
-    url: '/announcement/del/'+data.id,
+    url: '/api/announcement/del/'+data.id,
     method: 'DELETE'
   })
 }

src/api/hydrologicalStationApi.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 export function getHydrologicalList(params) {
   return request({
-    url: '/hydrologicalManagement/list',
+    url: '/api/hydrologicalManagement/list',
     method: 'get',
     params: params
   })
@@ -9,7 +9,7 @@ export function getHydrologicalList(params) {
 //新增水文站
 export function toAddhydrological(data){
     return request({
-    url: '/hydrologicalManagement/add',
+    url: '/api/hydrologicalManagement/add',
     method: 'post',
     data
   })
@@ -17,7 +17,7 @@ export function toAddhydrological(data){
 //修改水文站
 export function toUpdatehydrological(data){
     return request({
-    url: '/hydrologicalManagement/update',
+    url: '/api/hydrologicalManagement/update',
     method: 'post',
     data
   })
@@ -25,7 +25,7 @@ export function toUpdatehydrological(data){
 //删除水文站
 export function toDelete(data){
     return request({
-    url: '/hydrologicalManagement/del/'+data.id,
+    url: '/api/hydrologicalManagement/del/'+data.id,
     method: 'DELETE'
   })
 }

src/api/largeScreenApi.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+export function getAirNow(params) {
+  return request({
+    url: '/api/order/air/now',
+    method: 'get',
+    params: params
+  })
+}
+
+export function getDevTypeYearMonthAppTop(params) {
+  return request({
+    url: '/api/ttanalysis/workbench/getDevTypeYearMonthAppTop',
+    method: 'get',
+    params: params
+  })
+}
+
+export function getVideoRealtimeUrl(params) {
+  return request({
+    url: '/api/ttvideo/video/player/getVideoRealtimeUrl',
+    method: 'get',
+    params: params
+  })
+}

src/api/monitoringDataApi.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 export function getMonitoringList(params) {
   return request({
-    url: '/monitoringData/list',
+    url: '/api/monitoringData/list',
     method: 'get',
     params: params
   })
@@ -9,7 +9,7 @@ export function getMonitoringList(params) {
 //新增监测数据
 export function toAddMonitoring(data){
     return request({
-    url: '/monitoringData/add',
+    url: '/api/monitoringData/add',
     method: 'post',
     data
   })
@@ -17,7 +17,7 @@ export function toAddMonitoring(data){
 //修改监测数据
 export function toUpdateMonitoring(data){
     return request({
-    url: '/monitoringData/update',
+    url: '/api/monitoringData/update',
     method: 'post',
     data
   })
@@ -25,14 +25,14 @@ export function toUpdateMonitoring(data){
 //删除监测数据
 export function toDelete(data){
     return request({
-    url: '/monitoringData/del/'+data.id,
+    url: '/api/monitoringData/del/'+data.id,
     method: 'DELETE'
   })
 }
 
 export function toImport(data){
   return request({
-    url:'/monitoringData/import',
+    url:'/api/monitoringData/import',
     headers: {'Content-Type': 'multipart/form-data'},
     data,
     method:'post'

src/utils/request.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
-  baseURL: '/api',
+  baseURL: '/',
   // 超时
   timeout: 10000
 })

src/views/hydrologic-info/right.vue

@@ -74,9 +74,9 @@
                 <el-select v-model="selectedVal2" size="mini" class="vSelect" popper-class="u-popper-select">
                   <el-option label="水文监测点" value="0"></el-option>
                 </el-select>
-                <el-select v-model="selectedVal3" size="mini" class="vSelect" popper-class="u-popper-select">
+                <!-- <el-select v-model="selectedVal3" size="mini" class="vSelect" popper-class="u-popper-select">
                   <el-option label="水位" value="0"></el-option>
-                </el-select>
+                </el-select> -->
               </div>
               <div class="right">更多</div>
             </div>

src/views/safety-inspection/addInspectionTask.vue

@@ -13,18 +13,18 @@
           <el-input type="textarea" rows="4" v-model="addTaskFrom.taskContent" placeholder="请输入"></el-input>
         </el-form-item>
         <el-form-item label="巡查点">
-          <div  v-for="(item, index) in addTaskFrom.inspectionPoints" :key="index" class="ins-point">
-            <el-select v-model="item.value" placeholder="请选择巡查点" :popper-append-to-body="false" popper-class="u-popper-select">
-              <el-option :label="opt.label" :value="opt.value" v-for="opt in inspectionOptions" :key="opt.value"></el-option>
+          <div v-for="(item, index) in addTaskFrom.inspectionPoints" :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-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">
+            <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-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> -->
         <el-form-item label="责任人">
           <el-select v-model="addTaskFrom.person" placeholder="请选择责任人" style="width: 100%" :popper-append-to-body="false" popper-class="u-popper-select">
             <el-option label="区域一" value="shanghai"></el-option>
@@ -35,7 +35,7 @@
           <div style="display: flex; justify-content: flex-end; margin-top: 0.22rem">
             <el-button size="mini" plain @click="visible = false">取消</el-button>
             <el-button size="mini" type="primary">保存</el-button>
-            <el-button size="mini" type="primary">开始巡查</el-button>
+            <el-button size="mini" type="primary" @click="startInspection">开始巡查</el-button>
           </div>
         </el-form-item>
       </el-form>
@@ -44,7 +44,14 @@
 </template>
 
 <script>
-import { warning } from '@/utils'
+import 'mars3d/mars3d.css'
+import * as mars3d from 'mars3d'
+import Vue from 'vue'
+import { getVideoRealtimeUrl } from '@/api/largeScreenApi'
+// 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
+Vue.prototype.mars3d = mars3d
+Vue.prototype.Cesium = mars3d.Cesium
+let graphicsLayer = null
 export default {
   name: 'addInspectionTask',
   data() {
@@ -54,30 +61,153 @@ export default {
         taskName: '',
         taskContent: '',
         inspectionPoints: [{ value: '' }],
-        taskDuration: '',
+        // taskDuration: '',
         person: ''
       },
-       inspectionOptions: [
-        { value: 'shanghai', label: '上海' },
-        { value: 'beijing', label: '北京' }
+      inspectionOptions: [
+        {
+          longitude: '112.898391',
+          latitude: '28.237441',
+          devName: '长沙岳麓区青山村无线机房/摄像机1',
+          deviceCode: '43010400001320000018',
+          channelCode: '430104430000000021310000017'
+        },
+        {
+          latitude: '28.189249',
+          longitude: '113.065505',
+          devName: '浏阳市中和丁字村无线机房_0',
+          deviceCode: '43010000831327000018',
+          channelCode: '430100430000000021130000033'
+        }
       ],
+      isPatrolling: false,
+      currentPatrolIndex: 0,
+      patrolInterval: null,
+      countdown: 20
     }
   },
   mounted() {
     this.$globalEventBus.$on('clcikAddTask', (data) => {
       this.visible = true
+      this.addInitialPoints()
     })
   },
   destroyed() {
     this.$globalEventBus.$off('clcikAddTask')
+    this.stopPatrol()
   },
   methods: {
-     isLastItem(index) {
+    onPointSelect(a) {
+      const obj = this.inspectionOptions.filter((item) => item.deviceCode == a)
+      this.addTaskFrom.inspectionPoints.map((point) => {
+        if (point.value == a) {
+          Object.assign(point, obj[0])
+        }
+      })
+    },
+    startInspection() {
+      if (this.addTaskFrom.inspectionPoints === 0) {
+        this.$message.warning('请先添加至少一个巡查点')
+        return
+      }
+      this.addTaskFrom.inspectionPoints.forEach((item, index) => {
+        this.fetchUrl(item).then((url) => {
+          this.$set(this.addTaskFrom.inspectionPoints[index], 'url', url)
+        })
+      })
+      this.isPatrolling = true
+      this.currentPatrolIndex = 0
+      this.goToNextPatrolPoint()
+      // 设置定时器，每20秒切换到下一个点
+      this.patrolInterval = setInterval(() => {
+        this.goToNextPatrolPoint()
+      }, 20000)
+    },
+    fetchUrl(item) {
+      return new Promise((resolve, reject) => {
+        getVideoRealtimeUrl({
+          deviceCode: item.deviceCode,
+          channelCode: item.channelCode,
+          netType: '1',
+          protocolType: 5,
+          streamType: 1
+        }).then((res) => {
+          resolve(res)
+        })
+      })
+    },
+    // 切换到下一个巡查点
+    goToNextPatrolPoint() {
+      if (this.currentPatrolIndex >= this.addTaskFrom.inspectionPoints.length) {
+        this.stopPatrol()
+        this.$globalEventBus.$emit('clickVideoPlay', { visible: false })
+        return
+      }
+
+      const point = this.addTaskFrom.inspectionPoints[this.currentPatrolIndex]
+      this.flyToPoint(point)
+
+      // 播放视频
+      this.playVideo(point)
+      this.currentPatrolIndex++
+    },
+    playVideo(point) {
+      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true })
+    },
+    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], {
+        radius: 5000, // 飞行距离目标点的距离
+        duration: 2 // 飞行持续时间（秒）
+      })
+    },
+    isLastItem(index) {
       return index === this.addTaskFrom.inspectionPoints.length - 1
     },
-    isFirstItem(){
+    isFirstItem() {
       return this.addTaskFrom.inspectionPoints.length > 1
-    },  
+    },
     addOption() {
       this.addTaskFrom.inspectionPoints.push({ value: '' })
     },
@@ -133,13 +263,13 @@ export default {
         color: #fff;
       }
     }
-    .ins-point{
+    .ins-point {
       display: flex;
       align-items: center;
-      gap:px-to-rem(5);
-      margin-bottom:px-to-rem(20);
+      gap: px-to-rem(5);
+      margin-bottom: px-to-rem(20);
     }
-    .ins-point:last-child{
+    .ins-point:last-child {
       margin-bottom: 0;
     }
   }

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

@@ -57,8 +57,10 @@ export default {
   },
   mounted() {
     this.$globalEventBus.$on('clickVideoPlay', (data) => {
-      this.visible = true
-      this.title = '巡查点'
+      console.info(data)
+      this.visible = data.visible
+      this.tsModalVisible = false
+      this.title = data.point?data.point.devName:''
     })
   },
   destroyed() {

vue.config.js

@@ -54,10 +54,49 @@ module.exports = defineConfig({
         changeOrigin: true,
         rewrite: (p) => p.replace(/^\/system-biz/, '')
       },
-      '/api': {
+      '/api/announcement': {
         //测试环境
         target: 'http://10.157.225.55:28083',//http://192.168.1.185:28131
-        changOrigin: true
+        changOrigin: true,
+         pathRewrite: {
+          '^/api/announcement': '/api/announcement'
+        }
+      },
+      '/api/hydrologicalManagement': {
+        //测试环境
+        target: 'http://10.157.225.55:28083',//http://192.168.1.185:28131
+        changOrigin: true,
+         pathRewrite: {
+          '^/api/hydrologicalManagement': '/api/hydrologicalManagement'
+        }
+      },
+      '/api/monitoringData':{
+        target: 'http://10.157.225.55:28083',//http://192.168.1.185:28131
+        changOrigin: true,
+         pathRewrite: {
+          '^/api/monitoringData': '/api/monitoringData'
+        }
+      },
+      '/api/ttvideo':{
+        target:"http://10.157.200.5",
+        changOrigin:true,
+         pathRewrite: {
+          '^/api/ttvideo': '/api/ttvideo'
+        }
+      },
+      '/api/ttanalysis':{
+        target:"http://10.157.200.5",
+        changOrigin:true,
+         pathRewrite: {
+          '^/api/ttanalysis': '/api/ttanalysis'
+        }
+      },
+      '/api/order':{
+        target:"http://10.157.200.5",
+        changOrigin:true,
+         pathRewrite: {
+          '^/api/order': '/api/order'
+        }
       }
     }
   },