视频监控处理报错卡顿、样式优化

src/components/HKVideo/hikvision-h5player.vue

@@ -31,7 +31,7 @@ const playback = async (url, startTime, endTime) => {
         emits('onPlaying');
       },
       (e) => {
-        emits('onPlayError');
+        emits('onPlayError', e);
         console.error('playerror', e);
       }
     );
@@ -102,9 +102,9 @@ const createPlayer = () => {
     pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
       //插件错误回调
       console.log('插件错误回调pluginError callback: ', iWndIndex, iErrorCode, oError);
-      setTimeout(() => {
-        realplay(state.wsUrl);
-      }, 100);
+      // setTimeout(() => {
+      //   realplay(state.wsUrl);
+      // }, 100);
     },
     windowEventOver: function (iWndIndex) {
       //鼠标移过回调
@@ -159,7 +159,7 @@ const realplay = async (url) => {
         emits('onPlaying');
       },
       (e) => {
-        emits('onPlayError');
+        emits('onPlayError', e);
         console.error('playerror', e);
       }
     );

src/components/HKVideo/index.vue

@@ -2,7 +2,7 @@
   <div class="dot-box" :style="{ width: width ? width + 'px' : '100%', height: height ? height + 'px' : '100%' }">
     <div class="video-box" @click="play_now">
       <HikvisionPlayer
-        v-if="isPlaying || autoplay"
+        v-if="!reload && (isPlaying || autoplay)"
         ref="videoPlayer"
         style="width: 100%; height: 100%; object-fit: fill"
         @on-playing="onHkPlaying"
@@ -72,19 +72,25 @@ const onHKPlayError = async () => {
 };
 
 let videoPlayer = ref(null);
+let reload = ref(false);
 watch(
   () => props.dot_data,
   () => {
+    if (!!videoPlayer.value) {
+      videoPlayer.value.stop();
+    }
+    posterVisible.value = true;
+    errBKVisible.value = false;
+    isPlaying.value = false;
     if (props.autoplay) {
-      play_now();
-    } else {
-      if (!!videoPlayer.value) {
-        videoPlayer.value.stop();
-      }
-      posterVisible.value = true;
-      errBKVisible.value = false;
-      isPlaying.value = false;
+      reload.value = true;
     }
+    nextTick(() => {
+      if (props.autoplay) {
+        reload.value = false;
+        play_now();
+      }
+    });
   },
   {
     deep: true
@@ -151,7 +157,7 @@ onMounted(() => {
   }
 
   .err_bk {
-    z-index: 999;
+    z-index: 900;
     left: 0;
     top: 0;
     background: #000;
@@ -160,7 +166,7 @@ onMounted(() => {
     height: 100%;
 
     .err_box {
-      display: inline-flex;
+      display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
@@ -180,18 +186,17 @@ onMounted(() => {
           height: 20px;
           background: url('@/assets/images/video/err_video.png') no-repeat;
           background-size: 100% 100%;
-          margin-bottom: 10px;
         }
 
         .err_text {
           font-size: 14px;
           color: #ffffffb3;
-          margin-bottom: 10px;
+          margin-bottom: 4px;
         }
 
         .refresh_btn {
           width: 70px;
-          height: 30px;
+          height: 25px;
           border: 1px solid #001b41;
           background: #006affcc;
           cursor: pointer;
@@ -201,7 +206,7 @@ onMounted(() => {
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
-          line-height: 30px;
+          line-height: 25px;
         }
       }
     }

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -4,7 +4,7 @@
     <div class="more-btn" @click="showVideoMonitorList">{{ '查看更多>>' }}</div>
     <div class="card-content video-list">
       <div v-for="(item, index) in listData" :key="index" class="video-box">
-        <HKVideo :dot_data="item" :width="215" :height="94" autoplay />
+        <HKVideo :dot_data="item" autoplay />
         <div class="video-label">
           <span class="label">{{ item.name }}</span>
         </div>
@@ -15,26 +15,20 @@
     <div class="search-box">
       <div class="box-left">
         <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px" label-position="left">
-<!--          <el-form-item label="实景视频" prop="eventType">-->
-<!--            <el-select-->
-<!--              v-model="queryParams.realisticVideoType"-->
-<!--              class="custom-select"-->
-<!--              popper-class="custom-select
+          <!--          <el-form-item label="实景视频" prop="eventType">-->
+          <!--            <el-select-->
+          <!--              v-model="queryParams.realisticVideoType"-->
+          <!--              class="custom-select"-->
+          <!--              popper-class="custom-select
 <!--              :teleported="false"-->
-<!--              placeholder="全部"-->
-<!--            >-->
-<!--              <el-option label="全部" value=""></el-option>-->
-<!--              <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />-->
-<!--            </el-select>-->
-<!--          </el-form-item>-->
+          <!--              placeholder="全部"-->
+          <!--            >-->
+          <!--              <el-option label="全部" value=""></el-option>-->
+          <!--              <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />-->
+          <!--            </el-select>-->
+          <!--          </el-form-item>-->
           <el-form-item prop="name">
-            <el-input
-              v-model="queryParams.name"
-              class="custom-input2"
-              placeholder="请输入摄像头名称"
-              style="width: 200px"
-              @input="getList"
-            />
+            <el-input v-model="queryParams.name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 200px" @input="getList" />
           </el-form-item>
           <el-form-item>
             <div class="common-btn-primary" @click="handleQuery">搜索</div>
@@ -46,15 +40,15 @@
       <div v-show="editVideo" class="edit-box">
         <div class="flex">
           <div v-for="(item, index) in editData" :key="index" class="box-item">
-            <div class="edit-img">
+            <div class="edit-img" :title="item.name">
               <span class="edit-title">{{ item.name }}</span>
               <div class="close-btn" @click="deleteItem(index)"></div>
             </div>
           </div>
-          <div class="flex" style="flex-direction: column; align-items: center">
-            <div class="common-btn-primary3" @click="handleSave">保存</div>
-            <div class="common-btn-danger2" @click="handleCancel">取消</div>
-          </div>
+        </div>
+        <div class="flex" style="flex-direction: column; align-items: center">
+          <div class="common-btn-primary3" @click="handleSave">保存</div>
+          <div class="common-btn-danger2" @click="handleCancel">取消</div>
         </div>
       </div>
     </div>
@@ -262,6 +256,7 @@ initData();
       display: flex;
       align-items: center;
       justify-content: center;
+      padding: 5px 4px 5px 5px;
       &:nth-child(1),
       &:nth-child(2) {
         margin-bottom: 10px;
@@ -274,7 +269,7 @@ initData();
         position: absolute;
         bottom: 5px;
         right: 3px;
-        z-index: 99;
+        z-index: 901;
         display: flex;
         .label {
           width: 186px;
@@ -298,6 +293,10 @@ initData();
         }
       }
     }
+    :deep(.err_box) {
+      align-items: flex-start;
+      padding-top: 15px;
+    }
   }
 }
 .search-box {
@@ -330,7 +329,7 @@ initData();
     cursor: pointer;
     background: url('@/assets/images/video/videoBg.png') no-repeat;
     background-size: 100% 100%;
-    padding: 14.5px 9px;
+    padding: 9.5px 3.8px 9px 5.5px;
     position: relative;
     margin-bottom: 15px;
     position: relative;
@@ -345,7 +344,7 @@ initData();
       position: absolute;
       bottom: 8px;
       right: 4px;
-      z-index: 99;
+      z-index: 901;
       display: flex;
       .label {
         width: 186px;
@@ -388,7 +387,7 @@ initData();
 }
 .edit-box {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   border-radius: 8px;
   padding: 3px 5px;
@@ -413,6 +412,11 @@ initData();
   }
   .edit-title {
     color: #fff;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* 设置显示的行数 */
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .close-btn {
     position: absolute;

src/views/globalMap/RightMenu/OnlinePlotting/EditGroup.vue

@@ -0,0 +1,82 @@
+<template>
+  <Dialog custom-show :title="groupForm.groupId ? '编辑分组' : '添加分组'" type="xs" height="auto" hide-footer @close="handleClose">
+    <div class="form-item">
+      <div class="text1">分组名称</div>
+      <el-input v-model="groupForm.name" class="custom-input" placeholder="请输入" />
+    </div>
+    <div class="form-action">
+      <div v-if="groupForm.groupId" class="common-btn-primary" @click="handleAddGroup">保存</div>
+      <div v-else class="common-btn-primary" @click="handleUpdateGroup">删除</div>
+      <div v-if="groupForm.groupId" class="common-btn-primary" @click="handleDeleteGroup">删除</div>
+      <div class="common-btn" @click="handleClose">取消</div>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { addGroup } from '@/api/globalMap/onlinePlotting';
+
+const props = defineProps({
+  modelValue: Boolean,
+  patternId: String,
+  groupId: String
+});
+const emits = defineEmits(['update:modelValue', 'change']);
+let groupForm = ref({
+  groupId: '',
+  name: ''
+});
+watch(
+  () => props.groupId,
+  () => {
+    if (!!props.groupId) {
+      // 获取详情
+    }
+  },
+  {
+    immediate: true
+  }
+);
+// 新增分组
+const handleAddGroup = () => {
+  const obj = {
+    group_name: groupForm.value.name,
+    pattern_id: props.patternId
+  };
+  addGroup(obj).then((res) => {
+    emits('update:modelValue', false);
+    emits('change', false);
+  });
+};
+// 修改分组
+const handleUpdateGroup = () => {
+
+}
+// 关闭弹窗
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+// 删除分组
+const handleDeleteGroup = () => {
+  handleClose();
+};
+</script>
+
+<style lang="scss" scoped>
+.form-item {
+  display: flex;
+  align-items: center;
+  .text1 {
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
+  .custom-input {
+    flex: 1;
+  }
+}
+.form-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/globalMap/RightMenu/OnlinePlotting/LayerDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="预案名称" custom-show hide-footer @close="handleClose1">
+  <Dialog title="预案名称" custom-show hide-footer type="lg" @close="handleClose1">
     <div class="btn-box1">
       <div class="btn1" @click="handleShowCooperate">
         <i class="icon1" />
@@ -34,7 +34,7 @@
     </div>
     <div class="common-table">
       <div class="table-header">
-        <div class="td" style="width: 40px"></div>
+<!--        <div class="td" style="width: 40px"></div>-->
         <div class="td">标注名称</div>
         <div class="td">用户</div>
         <div class="td">单位</div>
@@ -47,9 +47,9 @@
           <div class="td" :title="item.nickName">{{ item.nick_name }}</div>
           <div class="td" :title="item.dept_name">{{ item.dept_name }}</div>
           <div class="td" :title="item.create_time">{{ item.create_time }}</div>
-          <div class="td">
-            <div v-if="item.group_name !== '默认分组'" class="btn-text">删除</div>
-            <div v-if="item.group_name !== '默认分组'" class="btn-text">编辑</div>
+          <div class="td" style="display: flex; align-items: center; justify-content: center">
+            <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleDeleteGroup">删除</div>
+            <div v-if="item.group_name !== '默认分组'" class="btn-text" style="margin-right: 20px" @click="handleShowGroup(item.group_id)">编辑</div>
             <div class="btn-text">{{ item.visible !== '0' ? '隐藏' : '显示' }}</div>
           </div>
         </div>
@@ -65,25 +65,16 @@
       </div>
     </div>
   </Dialog>
-  <Dialog v-model="showGroup" :title="groupForm.groupId ? '编辑分组' : '添加分组'" type="xs" hide-footer>
-    <div class="form-item">
-      <div class="text1">分组名称</div>
-      <el-input v-model="groupForm.name" class="custom-input" placeholder="请输入" />
-    </div>
-    <div class="form-action">
-      <div class="common-btn-primary" @click="handleAddGroup">保存</div>
-      <div v-if="groupForm.groupId" class="common-btn-primary" @click="handleDeleteGroup">删除</div>
-      <div class="common-btn" @click="handleClose2">取消</div>
-    </div>
-  </Dialog>
+  <EditGroup v-if="showGroup" v-model="showGroup" :patternId="patternId" :groupId="groupId" @change="getList" />
   <Contact v-if="showCooperate" v-model="showCooperate" @close="handleClose3" @confirm="handleConfirm" />
   <CollaborativeUser v-if="showUser" v-model="showUser" />
   <ImportLayer v-if="showImportLayer" v-model="showImportLayer" />
 </template>
 
 <script lang="ts" setup name="LayerDetail">
-import { addGroup, addWsUser, getBzList } from '@/api/globalMap/onlinePlotting';
+import { addWsUser, getBzList } from '@/api/globalMap/onlinePlotting';
 import ImportLayer from './ImportLayer.vue';
+import EditGroup from './EditGroup.vue';
 import CollaborativeUser from './CollaborativeUser.vue';
 const props = defineProps({
   modelValue: Boolean,
@@ -104,31 +95,19 @@ let queryParams = reactive({
 let dataList = ref([]);
 
 let showGroup = ref(false);
-let groupForm = ref({
-  groupId: '',
-  name: ''
-});
-const handleShowGroup = () => {
+let groupId = ref('');
+const handleShowGroup = (id) => {
+  if (!!id) {
+    groupId.value = id;
+  }
   showGroup.value = true;
 };
-const handleAddGroup = () => {
-  const obj = {
-    group_name: groupForm.value.name,
-    pattern_id: props.patternId
-  };
-  addGroup(obj).then((res) => {
-    emits('update:modelValue', false);
-  });
-};
 const handleClose1 = () => {
   emits('update:modelValue', false);
 };
 const handleDeleteGroup = () => {
   showGroup.value = false;
 };
-const handleClose2 = () => {
-  showGroup.value = false;
-};
 let showCooperate = ref(false);
 const handleShowCooperate = () => {
   showCooperate.value = true;
@@ -155,14 +134,17 @@ let showImportLayer = ref(false);
 const handleShowImportLayer = () => {
   showImportLayer.value = true;
 };
+const getList = () => {
+  getBzList(queryParams).then((res) => {
+    dataList.value = res.data;
+  });
+};
 const handleVisible = (item) => {
   item.visible = item.visible === '1' ? '0' : '1';
   emits('handleSendData', { type: 'update', content: item });
 };
 onMounted(() => {
-  getBzList(queryParams).then((res) => {
-    dataList.value = res.data;
-  });
+  getList();
 });
 </script>
 
@@ -234,22 +216,6 @@ onMounted(() => {
     background-size: 100% 100%;
   }
 }
-.form-item {
-  display: flex;
-  align-items: center;
-  .text1 {
-    flex-shrink: 0;
-    margin-right: 10px;
-  }
-  .custom-input {
-    flex: 1;
-  }
-}
-.form-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 .btn-text {
   color: #5983df;
   cursor: pointer;

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -835,14 +835,14 @@ const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  // webSock = createWebSocket('ZEaBf-NZ4Fi29kSYGdNeJ', getWebSocketData);
-  // patternId.value = 'ZEaBf-NZ4Fi29kSYGdNeJ';
-  createCollaboration(form.value).then(() => {
-    patternId.value = form.value.pattern_id;
-    createWebSocket(form.value.pattern_id, getWebSocketData);
+  webSock = createWebSocket('ZEaBf-NZ4Fi29kSYGdNeJ', getWebSocketData);
+  patternId.value = 'ZEaBf-NZ4Fi29kSYGdNeJ';
+  // createCollaboration(form.value).then(() => {
+  //   patternId.value = form.value.pattern_id;
+  //   createWebSocket(form.value.pattern_id, getWebSocketData);
     showForm.value = false;
     collaboration.value = true;
-  });
+  // });
 };
 const handleShowDialog = () => {
   editData.value = {