feat :巡查添加预置位

src/api/largeScreenApi.js

@@ -15,10 +15,34 @@ export function getDevTypeYearMonthAppTop(params) {
   })
 }
 
-export function getVideoRealtimeUrl(params) {
-  return request({
-    url: '/api/ttvideo/video/player/getVideoRealtimeUrl',
+
+export function deviceSimpleList(params) {
+return request({
+    url: '/api/sddnWeiHe/device/deviceSimpleList',
     method: 'get',
     params: params
   })
 }
+export function queryPresetList(data) {
+return request({
+    url: '/api/sddnWeiHe/device/queryPresetList',
+    method: 'post',
+    data
+  })
+}
+
+export function doControlPreset(data) {
+return request({
+    url: '/api/sddnWeiHe/device/doControlPreset',
+    method: 'post',
+    data
+  })
+}
+
+export function getVideoRealtimeUrl(data){
+  return request({
+    url: '/api/sddnWeiHe/device/getVideoRealtimeUrl',
+    method: 'post',
+    data
+  })
+}

src/views/components/layerList/index.vue

@@ -28,6 +28,7 @@
 <script>
 import * as mars3d from 'mars3d'
 import { getFloodPreventionList } from '@/api/floodPreventionPlan'
+import { getVideoRealtimeUrl } from '@/api/largeScreenApi'
 import { getPwkPopup, getSitePopup } from './popup'
 let layerCache = {}
 let graphicsLayer = null
@@ -505,22 +506,15 @@ export default {
     },
     fetchUrl(item) {
       return new Promise((resolve, reject) => {
-        window
-          .requestSDK(
-            '/ttvideo/video/player/getVideoRealtimeUrl',
-            {
+        getVideoRealtimeUrl({
               deviceCode: item.deviceCode,
               channelCode: item.channelCode,
               netType: 2,
-              protocolType: 9,
+              protocolType:9,
               streamType: 1
-            },
-            {},
-            'post'
-          )
-          .then(async (res) => {
-            resolve(res)
-          })
+            }).then(async(res)=>{
+          resolve(res)
+        })
       })
     },
     removeMonitorData() {

src/views/safety-inspection/addInspectionTask.vue

@@ -15,7 +15,18 @@
         <el-form-item label="巡查点" prop="inspectionPoint">
           <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" :disabled="opt.disabled" v-for="(opt,i) in inspectionOptions" :key="i"></el-option>
+              <el-option :label="opt.devName" :value="opt.deviceCode" :disabled="opt.disabled" v-for="(opt, i) in inspectionOptions" :key="i"></el-option>
+            </el-select>
+            <el-select
+              v-model="item.preset"
+              placeholder="请选择预置点位"
+              multiple
+              :popper-append-to-body="false"
+              collapse-tags
+              value-key="presetId" 
+              popper-class="u-popper-select"
+            >
+              <el-option :label="p.presetName" :value="p" v-for="p in presetList" :key="p.presetId"></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" />
@@ -40,6 +51,7 @@
 
 <script>
 import { toAddSecurityPatrol, endPatrol, startPatrol } from '@/api/securityPatrolApi'
+import { queryPresetList,getVideoRealtimeUrl,doControlPreset } from '@/api/largeScreenApi'
 import moment from 'moment'
 export default {
   name: 'addInspectionTask',
@@ -49,11 +61,12 @@ export default {
   },
   data() {
     return {
-      saveLoading:false,
+      saveLoading: false,
+      presetList: [],
       addTaskFrom: {
         securityPatrolName: '',
         securityPatrolContext: '',
-        inspectionPoint: [{ value: '' }],
+        inspectionPoint: [{ value: '' ,preset: []}],
         responsiblePerson: ''
       },
       rules: {
@@ -161,6 +174,14 @@ export default {
           Object.assign(point, obj[0])
         }
       })
+        const currentItem = this.addTaskFrom.inspectionPoint.find(item => item.value === a);
+      if (currentItem) {
+        currentItem.preset = []; // 清空预置位选择
+      }
+      this.presetList = []
+      queryPresetList({ deviceCode: obj[0].deviceCode, channelCode: obj[0].channelCode }).then((res) => {
+        this.presetList = res.data
+      })
     },
     startInspection() {
       this.$refs.addTaskFormRef.validate((valid) => {
@@ -187,22 +208,15 @@ export default {
     },
     fetchUrl(item) {
       return new Promise((resolve, reject) => {
-        window
-          .requestSDK(
-            '/ttvideo/video/player/getVideoRealtimeUrl',
-            {
+         getVideoRealtimeUrl({
               deviceCode: item.deviceCode,
               channelCode: item.channelCode,
               netType: 2,
-              protocolType: 9,
+              protocolType:9,
               streamType: 1
-            },
-            {},
-            'post'
-          )
-          .then(async (res) => {
-            resolve(res)
-          })
+            }).then(async(res)=>{
+          resolve(res)
+        })
       })
     },
     // 切换到下一个巡查点
@@ -212,7 +226,6 @@ export default {
         this.stopPatrol()
         this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false, type: 'add' })
         endPatrol({ id: this.xcId, endTime: endTime, startTime: this.currentTime }).then((res) => {
-          console.log("巡查结束："+res)
           this.$emit('refreshData')
         })
         return
@@ -226,12 +239,17 @@ export default {
     playVideo(point) {
       this.fetchUrl(point).then((res) => {
         if (res.code == 200) {
-            point.url = res.data.streamUrl
-            this.addTaskFrom.countPatrolPoints = this.addTaskFrom.inspectionPoint.length
-            this.$globalEventBus.$emit('clickVideoInspectPlay', {taskInfo:this.addTaskFrom, point: point, visible: true, type: 'add' })
-          } else if (res.code == 4001) {
-            this.$message.warning(JSON.parse(res.msg).resultMsg)
-          }
+          point.url = res.data.streamUrl
+          this.addTaskFrom.countPatrolPoints = this.addTaskFrom.inspectionPoint.length
+          doControlPreset({ deviceCode: point.deviceCode, channelCode: point.channelCode, presetId: point.preset[0].presetId }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success(res.msg)
+            }
+          })
+          this.$globalEventBus.$emit('clickVideoInspectPlay', { taskInfo: this.addTaskFrom, point: point, visible: true, type: 'add' })
+        } else if (res.code == 4001) {
+          this.$message.warning(JSON.parse(res.msg).resultMsg)
+        }
       })
     },
     stopPatrol() {
@@ -252,7 +270,7 @@ export default {
       return this.addTaskFrom.inspectionPoint.length > 1
     },
     addOption() {
-      this.addTaskFrom.inspectionPoint.push({ value: '' })
+      this.addTaskFrom.inspectionPoint.push({ value: '' ,preset: []})
     },
     removeOption(index) {
       if (this.addTaskFrom.inspectionPoint.length > 1) {
@@ -316,6 +334,23 @@ export default {
       align-items: center;
       gap: px-to-rem(5);
       margin-bottom: px-to-rem(20);
+      :deep(.el-tag.el-tag--info) {
+        background: #4f9fff;
+        color: #fff;
+        border-color: #4f9fff;
+        border-radius: px-to-rem(2);
+      }
+      :deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover) {
+        background-color: #4f9fff;
+      }
+      :deep(.el-select-dropdown.is-multiple .el-select-dropdown__item.selected) {
+        background-color: #4f9fff;
+        color: #fff;
+      }
+      :deep(.el-tag.el-tag--info .el-tag__close) {
+        background-color: #fff;
+        color: #4f9fff;
+      }
     }
     .ins-point:last-child {
       margin-bottom: 0;

src/views/safety-inspection/index.vue

@@ -8,6 +8,7 @@
 <script>
 import Left from './left.vue'
 import Right from './right.vue'
+import { deviceSimpleList ,getVideoRealtimeUrl} from '@/api/largeScreenApi'
 let graphicsLayer = null
 export default {
   components: {
@@ -24,22 +25,16 @@ export default {
   },
   methods: {
     fetchData() {
-      window
-        .requestSDK(
-          '/sddnWeiHe/device/deviceSimpleList',
-          {
-            pageNum: 1,
-            pageSize: 10,
-            platFlag: '1',
-            operType: '0'
-          },
-          {},
-          'post'
-        )
-        .then(async (res) => {
-          this.inspectionOptions = res.data
-          this.addInitialPoints()
-        })
+      const param = {
+        pageNum: 1,
+        pageSize: 10,
+        platFlag: '1',
+        operType: '0'
+      }
+      deviceSimpleList(param).then((res) => {
+        this.inspectionOptions = res.data
+        this.addInitialPoints()
+      })
     },
     refreshLeftList() {
       this.$refs.inspRef.getPatrolList()
@@ -101,22 +96,15 @@ export default {
     },
     fetchUrl(item) {
       return new Promise((resolve, reject) => {
-        window
-          .requestSDK(
-            '/ttvideo/video/player/getVideoRealtimeUrl',
-            {
+         getVideoRealtimeUrl({
               deviceCode: item.deviceCode,
               channelCode: item.channelCode,
-              netType:2,
-              protocolType: 9,
+              netType: 2,
+              protocolType:9,
               streamType: 1
-            },
-            {},
-            'post'
-          )
-          .then(async (res) => {
-            resolve(res)
-          })
+            }).then(async(res)=>{
+          resolve(res)
+        })
       })
     }
   },

src/views/safety-inspection/right.vue

@@ -78,6 +78,7 @@ import { getSecurityPatrolList, endPatrol, deleteSecurityPatrol } from '@/api/se
 import AddInspectionTask from './addInspectionTask.vue'
 import moment from 'moment'
 import { confirm } from '@/utils'
+import { getVideoRealtimeUrl,doControlPreset } from '@/api/largeScreenApi'
 export default {
   name: 'sandMonitorRight',
   components: { BasePanelRight, BaseHeader, AddInspectionTask },
@@ -195,28 +196,26 @@ export default {
     },
     fetchUrl(item) {
       return new Promise((resolve, reject) => {
-        window
-          .requestSDK(
-            '/ttvideo/video/player/getVideoRealtimeUrl',
-            {
+         getVideoRealtimeUrl({
               deviceCode: item.deviceCode,
               channelCode: item.channelCode,
               netType: 2,
-              protocolType: 9,
+              protocolType:9,
               streamType: 1
-            },
-            {},
-            'post'
-          )
-          .then(async (res) => {
-            resolve(res)
-          })
+            }).then(async(res)=>{
+          resolve(res)
+        })
       })
     },
     playVideo(point) {
       this.fetchUrl(point).then((res) => {
         if (res.code == 200) {
           point.url = res.data.streamUrl
+           doControlPreset({ deviceCode: point.deviceCode, channelCode: point.channelCode, presetId: point.preset[0].presetId }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success(res.msg)
+            }
+          })
           this.$globalEventBus.$emit('clickVideoInspectPlay', { taskInfo: this.taskInfo, point: point, visible: true, type: 'xc' })
         } else if (res.code == 4001) {
           this.$message.warning(JSON.parse(res.msg).resultMsg)

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

@@ -19,19 +19,28 @@
     </div>
     <div class="video-player-area">
       <div class="title">当前巡查点：{{ devName }}</div>
-      <EasyPlayer
-        ref="playerRef"
-        playerName="测试"
-        :videoUrl="option.url"
-        class="video-player screenshot"
-        live
-        speed
-        :easyStretch="true"
-        :muted="true"
-        :has-audio="false"
-        :reconnection="true"
-        @click.native.stop
-      />
+      <div class="video-area">
+        <div class="left">
+          <div v-for="(item, index) in presetList" :key="index" :class="{ active: activePreset == index }" @click="toActivePreset(item, index)">
+            {{ item.presetName }}
+          </div>
+        </div>
+        <div class="right">
+          <EasyPlayer
+            ref="playerRef"
+            playerName="测试"
+            :videoUrl="option.url"
+            class="video-player screenshot"
+            live
+            speed
+            :easyStretch="true"
+            :muted="true"
+            :has-audio="false"
+            :reconnection="true"
+            @click.native.stop
+          />
+        </div>
+      </div>
     </div>
     <div class="video-btn">
       <div class="left">
@@ -45,6 +54,7 @@
 </template>
 
 <script>
+import { doControlPreset } from '@/api/largeScreenApi'
 export default {
   name: 'InspectVideoPlayerPopup',
   data() {
@@ -59,14 +69,13 @@ export default {
         width: '600px',
         height: '350px'
       },
-      securityPatrolName: '',
-      responsiblePerson: '',
-      securityPatrolContext: '',
+      presetList: [],
       taskInfo: {},
-      nextName: '',
       num: 0,
       devName: '',
-      type: 'add'
+      type: 'add',
+      activePreset: 0,
+      point: {}
     }
   },
   computed: {
@@ -79,13 +88,15 @@ export default {
       if (this.timer) {
         clearInterval(this.timer)
       }
+      this.activePreset = 0
       this.currentTime = 0
       this.isRunning = false
       this.type = data.type
       this.taskInfo = data.taskInfo
+      this.point = data.point
       this.devName = data.point && data.point.devName ? data.point.devName : ''
-      this.nextName = data.nextName
       const url = data.point && data.point.url ? data.point.url : ''
+      this.presetList = data.point?data.point.preset:[]
       this.$set(this.option, 'url', url)
       this.$nextTick(() => {
         this.visible = data.visible
@@ -109,6 +120,14 @@ export default {
         }
       }, 1000)
     },
+    toActivePreset(item, index) {
+      this.activePreset = index
+      doControlPreset({ deviceCode: this.point.deviceCode, channelCode: this.point.channelCode, presetId: item.presetId }).then((res) => {
+        if (res.code == 200) {
+          this.$message.success(res.msg)
+        }
+      })
+    },
     formatTime(time) {
       return time + 's'
     },
@@ -161,7 +180,6 @@ export default {
   }
   .video-player-area {
     width: px-to-rem(600);
-    height: px-to-rem(350);
     padding: px-to-rem(13) px-to-rem(20);
     .title {
       font-weight: 400;
@@ -169,6 +187,27 @@ export default {
       color: #ffffff;
       margin-bottom: px-to-rem(10);
     }
+    .video-area {
+      display: flex;
+      justify-content: flex-start;
+      border-radius: px-to-rem(4);
+      border: 1px solid #5a80b4;
+      height: px-to-rem(350);
+      .left {
+        width: px-to-rem(93);
+        border-right: 1px solid #5a80b4;
+        div {
+          color: #fff;
+          padding: px-to-rem(7);
+        }
+        div.active {
+          background-color: #3d74e8;
+        }
+      }
+      .right{
+        width:calc(100% - px-to-rem(103));
+      }
+    }
   }
   .video-info {
     font-weight: 400;
@@ -197,7 +236,6 @@ export default {
     font-size: px-to-rem(16);
     color: #fff;
     padding: px-to-rem(10) px-to-rem(20);
-    margin-top: px-to-rem(25);
     .left {
       .nextBtn {
         cursor: pointer;

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

@@ -119,6 +119,7 @@ import * as echarts from 'echarts'
 import LineChart from './line-chart'
 import { warning } from '@/utils'
 import { getMonitoringStatistics } from '@/api/monitoringDataApi'
+import {getVideoRealtimeUrl} from '@/api/largeScreenApi'
 import moment from 'moment'
 let graphicsLayer = null
 export default {
@@ -360,21 +361,14 @@ export default {
       this.activeIndex = index
       this.artShow = false
       this.flyToPoint(row)
-      window
-        .requestSDK(
-          '/ttvideo/video/player/getVideoRealtimeUrl',
-          {
-            deviceCode: row.deviceCode,
+       getVideoRealtimeUrl({
+              deviceCode: row.deviceCode,
             channelCode: row.channelCode,
             netType: 2,
-            protocolType: 9,
+            protocolType:9,
             streamType: 1
-          },
-          {},
-          'post'
-        )
-        .then((res) => {
-          if (res.code == 200) {
+            }).then((res)=>{
+              if (res.code == 200) {
             this.artShow = true
             this.$set(this.videoOption, 'url', res.data.streamUrl)
           } else if (res.code == 4001) {