Merge branch 'dev' of http://git.dnzc.vip:3000/yangqishu/tmzn-weihe into dev

src/api/securityPatrolApi.js

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+export function getSecurityPatrolList(params) {
+  return request({
+    url: '/api/securityPatrol/list',
+    method: 'get',
+    params: params
+  })
+}
+//新增监测数据
+export function toAddSecurityPatrol(data){
+    return request({
+    url: '/api/securityPatrol/add',
+    method: 'post',
+    data
+  })
+}

src/views/components/tools/index.vue

@@ -6,6 +6,10 @@
                 <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>
@@ -19,7 +23,8 @@ export default {
         return{
             toolsShow:false,
             isMapActive:false,
-            isClActive:false
+            isClActive:false,
+            measureShow:false
         }
     },
     components:{
@@ -34,6 +39,7 @@ export default {
         },
         toCl(){
             this.isClActive = !this.isClActive
+            this.measureShow = this.isClActive?true:false
         }
     }
 }
@@ -62,7 +68,7 @@ export default {
             color: #4f9fff;
         }
     }
-    .isHide{
+    .isHide,.clToolHide{
         display: none;
     }
 }

src/views/hydrologic-info/right.vue

@@ -80,7 +80,7 @@
               </div>
               <div class="right">更多</div>
             </div>
-            <LineChart style="height: 1.8rem" :option="swOption" />
+            <LineChart style="height: 1.8rem" :option="swOption" v-if="chartShow"/>
           </div>
         </template>
       </BaseMain>
@@ -94,7 +94,8 @@ 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 } from '@/api/monitoringDataApi'
+import moment from 'moment'
 export default {
   data() {
     return {
@@ -119,6 +120,7 @@ export default {
           val: '0'
         }
       ],
+      chartShow:false,
       selectedVal: '0',
       selectedVal1: '0',
       selectedVal2: '',
@@ -235,94 +237,7 @@ export default {
           }
         ]
       },
-      swOption: {
-        backgroundColor: 'transparent',
-        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: ['08/21', '08/22', '08/23', '08/24', '08/25', '08/26'],
-            axisLine: {
-              lineStyle: {
-                color: '#374672',
-                width: 1 //这里是为了突出显示加上的
-              }
-            },
-            axisTick: {
-              show: false
-            },
-            lineStyle: {
-              color: '#374672',
-              width: 1
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            splitLine: { show: false },
-            min: 380,
-            interval: 10,
-            axisLine: {
-              lineStyle: {
-                color: '#374672',
-                width: 1 //这里是为了突出显示加上的
-              }
-            }
-          }
-        ],
-        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: [400, 410, 400, 410, 405, 410]
-          }
-        ]
-      },
+      swOption: {},
       swList: []
     }
   },
@@ -338,14 +253,112 @@ export default {
     getSwList() {
       getHydrologicalList().then((res) => {
         this.swList = res.data.records
-        if(res.data.records.length > 0 ){
+        if (res.data.records.length > 0) {
           this.selectedVal2 = res.data.records[0].id
+          this.changeSwOpt(this.selectedVal2)
         }
       })
     },
-    changeSwOpt(id){
-      getMonitoringStatistics({stationId:id}).then((res)=>{
-        console.info(res)
+    changeSwOpt(id) {
+      this.chartShow = false
+      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',
+            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: {
+                lineStyle: {
+                  color: '#374672',
+                  width: 1 //这里是为了突出显示加上的
+                }
+              },
+              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 //这里是为了突出显示加上的
+                }
+              }
+            }
+          ],
+          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.maxElevationYesterday
+            }
+          ]
+        }
+        this.swOption = option
+      }
       })
     },
     changeDate(val) {

src/views/hydrological-station/jcInfo.vue

@@ -60,7 +60,7 @@
       <el-button size="small" @click="toBack">返回</el-button>
     </div>
     <el-dialog :title="title" :visible.sync="addDialogVisible">
-      <el-form ref="form" :model="form" label-width="120px" class="addJcForm">
+      <el-form ref="form" :model="form" label-width="130px" class="addJcForm">
         <el-form-item label="实时高程："> <el-input v-model="form.realTimeElevation" type="number" :min="0"></el-input> <span>m</span> </el-form-item>
         <el-form-item label="昨日最高高程："> <el-input v-model="form.maxElevationYesterday" type="number" :min="0"> </el-input><span>m</span> </el-form-item>
         <el-form-item label="1小时雨量："> <el-input v-model="form.precipitationOneH" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item>
@@ -271,7 +271,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// @import url('@/assets/scss/v-common.scss');
 :deep(.el-form .el-select),
 :deep(.el-input__inner) {
   width: 100%;

src/views/safety-inspection/addInspectionTask.vue

@@ -7,13 +7,13 @@
     <div class="add-inspection-task-content">
       <el-form ref="addTaskFormRef" :model="addTaskFrom" label-width="0.8rem" size="mini">
         <el-form-item label="任务名称">
-          <el-input v-model="addTaskFrom.taskName" placeholder="请输入"></el-input>
+          <el-input v-model="addTaskFrom.securityPatrolName" placeholder="请输入"></el-input>
         </el-form-item>
         <el-form-item label="任务内容">
-          <el-input type="textarea" rows="4" v-model="addTaskFrom.taskContent" placeholder="请输入"></el-input>
+          <el-input type="textarea" rows="4" v-model="addTaskFrom.securityPatrolContext" placeholder="请输入"></el-input>
         </el-form-item>
         <el-form-item label="巡查点">
-          <div v-for="(item, index) in addTaskFrom.inspectionPoints" :key="index" class="ins-point">
+          <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" v-for="opt in inspectionOptions" :key="opt.deviceCode"></el-option>
             </el-select>
@@ -26,15 +26,14 @@
           <span style="color: #fff">&nbsp;&nbsp;min</span>
         </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>
-            <el-option label="区域二" value="beijing"></el-option>
+          <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>
           </el-select>
         </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">取消</el-button>
-            <el-button size="mini" type="primary">保存</el-button>
+            <el-button size="mini" plain @click="visible = false" 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>
         </el-form-item>
@@ -47,7 +46,7 @@
 import 'mars3d/mars3d.css'
 import * as mars3d from 'mars3d'
 import Vue from 'vue'
-import { getVideoRealtimeUrl } from '@/api/largeScreenApi'
+import { toAddSecurityPatrol } from '@/api/securityPatrolApi'
 // 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
 Vue.prototype.mars3d = mars3d
 Vue.prototype.Cesium = mars3d.Cesium
@@ -58,12 +57,22 @@ export default {
     return {
       visible: false,
       addTaskFrom: {
-        taskName: '',
-        taskContent: '',
-        inspectionPoints: [{ value: '' }],
-        // taskDuration: '',
-        person: ''
+        securityPatrolName: '',
+        securityPatrolContext: '',
+        inspectionPoint: [{ value: '' }],
+        responsiblePerson: ''
       },
+      personList:[
+        {
+          name:'杨英'
+        },
+        {
+          name:'马刚'
+        },
+        {
+          name:'谢智宇'
+        }
+      ],
       inspectionOptions: [
         {
           latitude: '28.189249',
@@ -87,7 +96,13 @@ export default {
     }
   },
   mounted() {
-    this.$globalEventBus.$on('clcikAddTask', (data) => {
+    this.$globalEventBus.$on('clcikAddTask', () => {
+      this.addTaskFrom={
+        securityPatrolName: '',
+        securityPatrolContext: '',
+        inspectionPoint: [{ value: '' }],
+        responsiblePerson: ''
+      }
       this.visible = true
       this.addInitialPoints()
     })
@@ -97,23 +112,34 @@ export default {
     this.stopPatrol()
   },
   methods: {
+    toSave(){
+      toAddSecurityPatrol(this.addTaskFrom).then((res)=>{
+        if(res.data){
+          this.$message.success('添加成功')
+          // this.$globalEventBus.$emit('refreshInspectList')
+          this.visible = false
+        }else{
+          this.$message.error('添加失败')
+        }
+      })
+    },
     onPointSelect(a) {
       const obj = this.inspectionOptions.filter((item) => item.deviceCode == a)
-      this.addTaskFrom.inspectionPoints.map((point) => {
+      this.addTaskFrom.inspectionPoint.map((point) => {
         if (point.value == a) {
           Object.assign(point, obj[0])
         }
       })
     },
     startInspection() {
-      if (this.addTaskFrom.inspectionPoints === 0) {
+      if (this.addTaskFrom.inspectionPoint === 0) {
         this.$message.warning('请先添加至少一个巡查点')
         return
       }
-      this.addTaskFrom.inspectionPoints.forEach((item, index) => {
+      this.addTaskFrom.inspectionPoint.forEach((item, index) => {
         this.fetchUrl(item).then((res) => {
           const url = res.data.streamUrl
-          this.$set(this.addTaskFrom.inspectionPoints[index], 'url', url)
+          this.$set(this.addTaskFrom.inspectionPoint[index], 'url', url)
         })
       })
       this.isPatrolling = true
@@ -146,14 +172,14 @@ export default {
     },
     // 切换到下一个巡查点
     goToNextPatrolPoint() {
-      if (this.currentPatrolIndex >= this.addTaskFrom.inspectionPoints.length) {
+      if (this.currentPatrolIndex >= this.addTaskFrom.inspectionPoint.length) {
         this.stopPatrol()
         this.$globalEventBus.$emit('clickVideoPlay', { visible: false })
         return
       }
       this.$globalEventBus.$emit('clickVideoPlay', { visible: false })
       setTimeout(()=>{
-        const point = this.addTaskFrom.inspectionPoints[this.currentPatrolIndex]
+        const point = this.addTaskFrom.inspectionPoint[this.currentPatrolIndex]
         this.flyToPoint(point)
         // 播放视频
         this.playVideo(point)
@@ -212,17 +238,17 @@ export default {
       })
     },
     isLastItem(index) {
-      return index === this.addTaskFrom.inspectionPoints.length - 1
+      return index === this.addTaskFrom.inspectionPoint.length - 1
     },
     isFirstItem() {
-      return this.addTaskFrom.inspectionPoints.length > 1
+      return this.addTaskFrom.inspectionPoint.length > 1
     },
     addOption() {
-      this.addTaskFrom.inspectionPoints.push({ value: '' })
+      this.addTaskFrom.inspectionPoint.push({ value: '' })
     },
     removeOption(index) {
-      if (this.addTaskFrom.inspectionPoints.length > 1) {
-        this.addTaskFrom.inspectionPoints.splice(index, 1)
+      if (this.addTaskFrom.inspectionPoint.length > 1) {
+        this.addTaskFrom.inspectionPoint.splice(index, 1)
       }
     }
   }
@@ -252,8 +278,8 @@ export default {
     }
   }
   .add-inspection-task-content {
-    padding: px-to-rem(10);
-    min-height: px-to-rem(465);
+    padding: px-to-rem(20);
+    min-height: px-to-rem(407);
     background: rgb(35, 61, 108, 0.8);
     :deep(.el-form) {
       .el-button {
@@ -281,6 +307,16 @@ export default {
     .ins-point:last-child {
       margin-bottom: 0;
     }
+    :deep(.el-button){
+      line-height:initial;
+      background:rgba(79,159,255,0.8);
+      padding:px-to-rem(3) px-to-rem(7);
+    }
+    .cancelBtn{
+        border: 1px solid #4F9FFF;
+        color:#FFF;
+        background-color:transparent;
+    }
   }
 }
 </style>

src/views/safety-inspection/left.vue

@@ -4,28 +4,36 @@
       <base-header title="巡查记录"></base-header>
       <div class="card-item">
         <ul class="record-list">
-          <li class="record-list-item" v-for="(item, index) in recordList" :key="index">
-            <div class="record-title">{{ item.title }}</div>
-            <div class="record-content">
-              <div class="record-item">
-                <span>巡查开始时间：</span><span>{{ item.startTime }}</span>
-              </div>
-              <div class="record-item">
-                <span>巡查结束时间：</span><span>{{ item.endTime }}</span>
-              </div>
-              <div class="record-item" style="display: flex; justify-content: space-between">
-                <div>
-                  <span>巡查点位数：</span><span>{{ item.pointNum }}个</span>
+          <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-content">
+                <div class="record-item">
+                  <span>巡查开始时间：</span><span>{{ item.startTime }}</span>
                 </div>
-                <div>
-                  <span>巡查时长：</span><span>{{ item.duration }}</span>
+                <div class="record-item">
+                  <span>巡查结束时间：</span><span>{{ 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>
+                  </div>
+                </div>
+                <div class="record-item">
+                  <span>巡查责任人：</span><span>{{ item.responsiblePerson }}</span>
                 </div>
               </div>
-              <div class="record-item">
-                <span>巡查责任人：</span><span>{{ item.responsiblePerson }}</span>
-              </div>
-            </div>
-          </li>
+            </li>
+          </template>
+          <template v-else>
+            <div class="noData">
+                  <img src="@/assets/image/comprehensive/noData.png" alt="">
+                  <div class="txt">暂无巡查记录</div>
+                </div>
+          </template>
         </ul>
       </div>
     </div>
@@ -34,23 +42,23 @@
 <script>
 import BasePanelLeft from '@/components/base-panel/base-panel-left'
 import BaseHeader from '@/components/base-header/base-header'
+import { getSecurityPatrolList } from '@/api/securityPatrolApi'
 export default {
   name: 'safetyInspectionLeft',
   components: { BasePanelLeft, BaseHeader },
   data() {
     return {
-      recordList: Array(5).fill({
-        title: '一键巡河巡查任务名称1',
-        startTime: '2025-08-15 14:34:21',
-        endTime: '2025-08-15 16:32:34',
-        pointNum: 5,
-        duration: '2min',
-        responsiblePerson: '王刚'
-      })
+      recordList: []
     }
   },
 
-  methods: {}
+  methods: {
+     getSecurityPatrolList() {
+      getSecurityPatrolList({  finishedState: 1 }).then((res) => {
+        this.recordList = res.data.records
+      })
+    },
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -59,12 +67,26 @@ export default {
   position: relative;
   height: 100%;
   z-index: 1;
+  .noData{
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      img{
+        margin-top: px-to-rem(70);
+        margin-bottom: px-to-rem(20);
+      }
+      .txt{
+        color: #fff;
+        font-size: px-to-rem(14);
+      }
+    }
   .card-item {
     position: relative;
     width: 3.68rem;
     padding: px-to-rem(10);
     margin-bottom: px-to-rem(19);
     background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
+    height: calc(100% - px-to-rem(72));
   }
   .record-list {
     display: flex;

src/views/safety-inspection/right.vue

@@ -6,21 +6,23 @@
         <div class="tools-panel">
           <div class="btn add-btn" @click="addTask"><i class="el-icon-plus"></i>&nbsp;新建任务</div>
           <div class="input-bg">
-            <el-input v-model="taskName" size="mini" placeholder="搜索任务名称" suffix-icon="el-icon-search"></el-input>
+            <el-input v-model="securityPatrolName" size="mini" placeholder="搜索任务名称" suffix-icon="el-icon-search" @change="searchByName"></el-input>
           </div>
         </div>
         <div class="task-list-container">
           <ul class="task-table-list">
             <li class="task-table-list-title">
               <span>巡查任务</span>
-              <span>巡河次数</span>
+              <span>巡查点位数</span>
               <span>操作</span>
             </li>
-            <li class="task-table-list-item" v-for="item in taskListData" :key="item.id">
-              <span>{{ item.taskName }}</span>
-              <span>{{ item.taskNum }}</span>
-              <span style="color: #498ee3; cursor: pointer">巡查</span>
-            </li>
+            <div class="item-area">
+              <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>
+              </li>
+            </div>
           </ul>
         </div>
       </div>
@@ -60,19 +62,14 @@
 <script>
 import BasePanelRight from '@/components/base-panel/base-panel-right'
 import BaseHeader from '@/components/base-header/base-header'
+import { getSecurityPatrolList } from '@/api/securityPatrolApi'
 export default {
   name: 'sandMonitorRight',
   components: { BasePanelRight, BaseHeader },
   data() {
     return {
-      taskName: '',
-      taskListData: [
-        { id: 1, taskName: '巡查任务名称1', taskNum: '1次' },
-        { id: 2, taskName: '巡查任务名称2', taskNum: '1次' },
-        { id: 3, taskName: '巡查任务名称3', taskNum: '1次' },
-        { id: 4, taskName: '巡查任务名称4', taskNum: '1次' },
-        { id: 5, taskName: '巡查任务名称5', taskNum: '1次' }
-      ],
+      securityPatrolName: '',
+      taskListData: [],
       personStatus: '1',
       personName: '',
       personList: [
@@ -107,10 +104,25 @@ export default {
       ]
     }
   },
-
+  mounted() {
+    this.getSecurityPatrolList()
+    this.$globalEventBus.$on('refreshInspectList', () => {
+      this.getSecurityPatrolList()
+    })
+  },
   methods: {
+    toXc() {},
     addTask() {
       this.$globalEventBus.$emit('clcikAddTask')
+    },
+    getSecurityPatrolList() {
+      getSecurityPatrolList({ securityPatrolName: this.securityPatrolName, finishedState: 0 }).then((res) => {
+        this.taskListData = res.data.records
+      })
+    },
+    searchByName(name) {
+      this.securityPatrolName = name
+      this.getSecurityPatrolList()
     }
   }
 }
@@ -172,6 +184,26 @@ export default {
         line-height: px-to-rem(35);
         background: #153057;
         box-sizing: border-box;
+        span {
+          display: inline-block;
+          width: 40%;
+        }
+        span:first-child {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        span:last-child {
+          width: px-to-rem(50);
+          text-align: right;
+        }
+      }
+      .item-area {
+        height: px-to-rem(324);
+        overflow: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
       }
     }
   }

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

@@ -60,8 +60,8 @@ export default {
       this.visible = data.visible
       this.tsModalVisible = false
       this.title = data.point?data.point.devName:''
-      this.option.url =!data.visible? data.point.url:''
-      this.$set(this.option,'url',data.point.url)
+      const url =data.point? data.point.url:''
+      this.$set(this.option,'url',url)
     })
   },
   destroyed() {