fix:巡查弹窗修改+静态页面

src/views/comprehensive-overview/cameraInfo.vue

@@ -4,14 +4,14 @@
       <img src="@/assets/image/comprehensive/cameraIcon1.png" alt="" />
       <div class="info">
         <div>高杆摄像头</div>
-        <div><span class="green">{{info.highOnlineNum}} </span> / {{info.highNum}}</div>
+        <div><span class="green">{{info?.highOnlineNum}} </span> / {{info?.highNum}}</div>
       </div>
     </div>
     <div class="area">
       <img src="@/assets/image/comprehensive/cameraIcon2.png" alt="" />
       <div class="info">
         <div>中杆摄像头</div>
-        <div><span class="green">{{info.middleOnlineNum}} </span> / {{info.middleNum}}</div>
+        <div><span class="green">{{info?.middleOnlineNum}} </span> / {{info?.middleNum}}</div>
       </div>
     </div>
     <div class="area">

src/views/comprehensive-overview/right.vue

@@ -36,13 +36,25 @@
               <div class="dottTitle">事件总数</div>
               <div class="data-info">
                 <div class="left">
-                  <div class="val">{{eventInfo.total}}</div>
+                  <div class="val">{{ eventInfo.total }}</div>
                   <img src="@/assets/image/comprehensive/midBg2.png" />
                 </div>
                 <div class="right">
-                  <div class="em" v-for="(item,index) in eventInfo.list" :key="index">
-                    <div :class="`color${index+1}`">{{item.name}}</div>
-                    <div>{{item.num}}</div>
+                  <div class="em" v-for="(item, index) in eventInfo.list" :key="index">
+                    <div :class="`color${index + 1}`">{{ item.name }}</div>
+                    <div>{{ item.num }}</div>
+                  </div>
+                  <div class="em">
+                    <div class="color2">乱采</div>
+                    <div>0</div>
+                  </div>
+                  <div class="em">
+                    <div class="color3">乱堆</div>
+                    <div>0</div>
+                  </div>
+                  <div class="em">
+                    <div class="color4">乱占</div>
+                    <div>0</div>
                   </div>
                 </div>
               </div>
@@ -81,9 +93,9 @@ export default {
   data() {
     return {
       dateVal: 1,
-      eventInfo:{
-        total:0,
-        list:[]
+      eventInfo: {
+        total: 0,
+        list: []
       }
     }
   },
@@ -96,15 +108,15 @@ export default {
         .requestSDK(
           '/sddnWeiHe/event/getEventStatistics',
           {
-            type:this.dateVal
+            type: this.dateVal
           },
           {},
           'get'
         )
         .then(async (res) => {
           console.info(res)
-            this.eventInfo = res.data
-            console.info(this.eventInfo)
+          this.eventInfo = res.data
+          console.info(this.eventInfo)
         })
     }
   }

src/views/hydrologic-info/right.vue

@@ -431,8 +431,6 @@ export default {
               {
                 type: 'value',
                 splitLine: { show: false },
-                // min: 380,
-                // interval: 10,
                 axisLine: {
                   lineStyle: {
                     color: '#374672',

src/views/index.vue

@@ -19,6 +19,7 @@
           <SmartEarlyWarning v-if="mainMenu === 'smartEarlyWarning'" />
           <WaterStationPopup />
           <VideoPlay />
+          <InspectVideoPlay />
           <PlanDialog />
           <AnnounceDetailPopup />
         </div>
@@ -41,6 +42,7 @@ import WaterStationPopup from '@/views/water-station-popup'
 import SmartEarlyWarning from '@/views/smart-early-warning/index'
 import PlanDialog from './components/layerList/planDialog.vue'
 import VideoPlay from './video-play-popup/index.vue'
+import InspectVideoPlay from './video-play-popup/inspect.vue'
 import AnnounceDetailPopup from './announce-detail-popup/index.vue'
 const basePathUrl = window.basePathUrl || ''
 export default {
@@ -58,6 +60,7 @@ export default {
     SmartEarlyWarning,
     PlanDialog,
     VideoPlay,
+    InspectVideoPlay,
     AnnounceDetailPopup
   },
   data() {

src/views/safety-inspection/addInspectionTask.vue

@@ -15,7 +15,7 @@
         <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 in inspectionOptions" :key="opt.deviceCode"></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>
             <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" />
@@ -167,6 +167,7 @@ export default {
         if (valid) {
           startPatrol(this.addTaskFrom).then((res) => {
             this.xcId = res.data.newSercurity.id
+            this.$emit('refreshData')
           })
           this.$emit('closeAddTask')
           this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
@@ -209,7 +210,7 @@ export default {
       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, type: 'add' })
+        this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false, type: 'add' })
         endPatrol({ id: this.xcId, endTime: endTime, startTime: this.currentTime }).then((res) => {
           this.$emit('refreshData')
         })
@@ -225,9 +226,10 @@ export default {
       this.fetchUrl(point).then((res) => {
         if (res.code == 200) {
             point.url = res.data.streamUrl
-            this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true, type: 'add' })
+            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('设备离线')
+            this.$message.warning(JSON.parse(res.msg).resultMsg)
           }
       })
     },

src/views/safety-inspection/index.vue

@@ -88,7 +88,7 @@ export default {
         const pointData = graphic.attr
         that.fetchUrl(pointData).then((res) => {
           if (res.code == 4001) {
-            that.$message.warning('设备离线')
+            that.$message.warning(JSON.parse(res.msg).resultMsg)
           } else if (res.code == 400) {
             that.$message.error(res.msg)
           } else {
@@ -107,7 +107,7 @@ export default {
             {
               deviceCode: item.deviceCode,
               channelCode: item.channelCode,
-              netType: 2,
+              netType:2,
               protocolType: 9,
               streamType: 1
             },

src/views/safety-inspection/right.vue

@@ -116,6 +116,7 @@ export default {
       currentPatrolIndex: 0,
       patrolInterval: null,
       inspectionPoint:[],
+      taskInfo:{},
       xcId:null
     }
   },
@@ -140,6 +141,7 @@ export default {
       this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss'); 
       this.xcId = item.id
       this.inspectionPoint = item.inspectionPoints
+      this.taskInfo = JSON.parse(JSON.stringify(item))
       this.isPatrolling = true
       this.currentPatrolIndex = 0
       this.goToNextPatrolPoint()
@@ -152,14 +154,14 @@ export default {
     goToNextPatrolPoint() {
       if (this.currentPatrolIndex >= this.inspectionPoint.length) {
         this.stopPatrol()
-        this.$globalEventBus.$emit('clickVideoPlay', { visible: false ,type:"xc"})
+        this.$globalEventBus.$emit('clickVideoInspectPlay', { 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' })
+      this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false,type:'xc' })
       setTimeout(()=>{
         const point = this.inspectionPoint[this.currentPatrolIndex]
         this.flyToPoint(point)
@@ -198,9 +200,9 @@ export default {
       this.fetchUrl(point).then((res) => {
         if (res.code == 200) {
             point.url = res.data.streamUrl
-              this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true,type:'xc' })
+              this.$globalEventBus.$emit('clickVideoInspectPlay', {taskInfo:this.taskInfo, point: point, visible: true,type:'xc' })
           } else if (res.code == 4001) {
-            this.$message.warning('设备离线')
+            this.$message.warning(JSON.parse(res.msg).resultMsg)
           }
       })
     },

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

@@ -2,9 +2,8 @@
   <div class="video-player-container" v-if="visible">
     <div class="video-player-title">
       <span class="title-text">{{ title }}</span>
-      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="openTsModal" />
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
     </div>
-    <!-- <Artplayer :option="option" :style="style" @getInstance="getInstance"/> -->
      <div class="video-player-area" >
        <EasyPlayer
              ref="playerRef"
@@ -20,14 +19,6 @@
              @click.native.stop
            />
      </div>
-    <el-dialog title="提示" :visible.sync="tsModalVisible" width="60%">
-      <span>是否中断当前巡查点监控，进行下一个巡查点视频播放？</span>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="closeVideoDialog">中断本次任务</el-button>
-        <el-button @click="toNext">播放下一个视频</el-button>
-        <el-button @click="tsModalVisible = false">取 消</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
@@ -39,23 +30,19 @@ export default {
       visible: false,
       title: '巡查点',
       option: {url: ''},
-      tsModalVisible: false,
       style: {
         width: '600px',
         height: '350px'
-      },
-      type:'add'
+      }
     }
   },
   mounted() {
     this.$globalEventBus.$on('clickVideoPlay', (data) => {
-      this.type = data.type
-      this.tsModalVisible = false
       this.title = data.point?data.point.devName:''
       const url =data.point&&data.point.url? data.point.url:''
       this.$set(this.option,'url',url)
       this.$nextTick(()=>{
-        this.visible = data.visible
+      this.visible = data.visible
       })
     })
   },
@@ -63,30 +50,8 @@ export default {
     this.$globalEventBus.$off('clickVideoPlay')
   },
   methods: {
-    getInstance(art) {
-      console.info(art)
-    },
-    openTsModal() {
-      if(this.type == 'click'){
+    closeModal() {
         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')
-      }
-    },
-    closeVideoDialog() {
-      this.visible = false
-      if(this.type == 'add'){
-        this.$globalEventBus.$emit('closeVideoPlayAdd')
-      }else if(this.type == 'xc'){
-        this.$globalEventBus.$emit('closeVideoPlay')
-      }
     }
   }
 }

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

@@ -0,0 +1,199 @@
+<template>
+  <div class="video-player-container" v-if="visible">
+    <div class="video-player-title">
+      <span class="title-text">{{ taskInfo?.securityPatrolName }}</span>
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeVideoDialog" />
+    </div>
+    <div class="video-info">
+      <div class="row">
+        <div class="col">责任人：{{ taskInfo?.responsiblePerson }}</div>
+        <div class="col">已巡查时间：{{ formatTime(currentTime) }}</div>
+      </div>
+      <div class="row">
+        <div class="col">巡查点位数：{{ taskInfo?.countPatrolPoints}}个</div>
+        <div class="col">预计剩余时间：{{ formatTime(remainingTime) }}</div>
+      </div>
+      <div class="row">
+        <div class="col-12">任务内容：{{ taskInfo?.securityPatrolContext }}</div>
+      </div>
+    </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>
+    <div class="video-btn">
+      <div class="left">
+        <div class="nextBtn" @click="toNext">下一个</div>
+      </div>
+      <div class="right">
+        <el-button type="primary" @click="closeVideoDialog">停止巡河</el-button>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InspectVideoPlayerPopup',
+  data() {
+    return {
+      visible: false,
+      currentTime: 0,
+      totalTime: 20,
+      isRunning: false,
+      timer: null,
+      option: { url: '' },
+      style: {
+        width: '600px',
+        height: '350px'
+      },
+      securityPatrolName: '',
+      responsiblePerson: '',
+      securityPatrolContext: '',
+      taskInfo:{},
+      nextName:'',
+      num: 0,
+      devName: '',
+      type: 'add'
+    }
+  },
+  computed: {
+    remainingTime() {
+      return this.totalTime - this.currentTime
+    }
+  },
+  created() {
+    this.$globalEventBus.$on('clickVideoInspectPlay', (data) => {
+      console.info(data.taskInfo)
+      this.type = data.type
+      this.taskInfo = data.taskInfo
+      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.$set(this.option, 'url', url)
+      this.$nextTick(() => {
+        this.visible = data.visible
+        this.startTimer()
+      })
+    })
+  },
+  destroyed() {
+    this.$globalEventBus.$off('clickVideoInspectPlay')
+  },
+  methods: {
+    startTimer() {
+      if (this.isRunning) return
+
+      this.isRunning = true
+      this.timer = setInterval(() => {
+        if (this.currentTime < this.totalTime) {
+          this.currentTime += 1
+        } else {
+          this.pauseTimer()
+        }
+      }, 1000)
+    },
+    formatTime(time) {
+      return time + 's'
+    },
+    pauseTimer() {
+      this.isRunning = false
+      clearInterval(this.timer)
+    },
+    toNext() {
+      if (this.type == 'add') {
+        this.$globalEventBus.$emit('toPlayNextVideoAdd')
+      } else if (this.type == 'xc') {
+        this.$globalEventBus.$emit('toPlayNextVideo')
+      }
+    },
+    closeVideoDialog() {
+      this.visible = false
+      if (this.type == 'add') {
+        this.$globalEventBus.$emit('closeVideoPlayAdd')
+      } else if (this.type == 'xc') {
+        this.$globalEventBus.$emit('closeVideoPlay')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.video-player-container {
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  width: px-to-rem(600);
+  background-color: rgba(35, 61, 108, 0.8);
+  z-index: 9999;
+  .video-player-title {
+    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
+    background-size: 100% 100%;
+    height: px-to-rem(39);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 px-to-rem(20);
+    font-size: px-to-rem(16);
+    color: #fff;
+    .title-text {
+      font-weight: bold;
+      margin-left: px-to-rem(20);
+    }
+  }
+  .video-player-area {
+    width: px-to-rem(600);
+    height: px-to-rem(350);
+    padding: px-to-rem(13) px-to-rem(20);
+  }
+  .video-info {
+    font-weight: 400;
+    font-size: px-to-rem(16);
+    color: #ffffff;
+    padding: px-to-rem(13) px-to-rem(20);
+    padding-bottom: px-to-rem(5);
+    border-bottom: 1px solid #4d628b;
+    .row {
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: px-to-rem(10);
+      .col {
+        width: 40%;
+      }
+      .col-12 {
+        width: 100%;
+      }
+    }
+  }
+  .video-btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 400;
+    font-size: px-to-rem(16);
+    color: #fff;
+    padding: px-to-rem(10) px-to-rem(20);
+    .left {
+      .nextBtn {
+        cursor: pointer;
+        color: #4f9fff;
+      }
+    }
+  }
+}
+</style>

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

@@ -228,8 +228,9 @@ export default {
                 {
                   type: 'value',
                   splitLine: { show: false },
-                  // min: 380,
-                  // interval: 10,
+                  min: 380,
+                  interval: 10,
+                  max:420,
                   axisLine: {
                     lineStyle: {
                       color: '#374672',
@@ -327,7 +328,7 @@ export default {
             this.artShow = true
             this.$set(this.videoOption, 'url', res.data.streamUrl)
           } else if (res.code == 4001) {
-            this.$message.warning('设备离线')
+            this.$message.warning(JSON.parse(res.msg).resultMsg)
           } else if (res.code == 400) {
             this.$message.error(res.msg)
           }