fix: 算法列表增加左侧ICON动态图标，视频管理按钮增加选中状态，增加预警 长轮询

src/utils/dict.js

@@ -14,7 +14,7 @@ export function useDict(...args) {
         res.value[dictType] = dicts;
       } else {
         getDicts(dictType).then(resp => {
-          res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
+          res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass,remark: p.remark }))
           useDictStore().setDict(dictType, res.value[dictType]);
         })
       }

src/views/alarmControl/index.vue

@@ -48,6 +48,7 @@
                   <el-button
                      type="primary"
                      plain
+                     :class="isActive=='4'?'active':''"
                      @click="changeDivision(12,4)"
                   >四分屏</el-button>
                </el-col>
@@ -55,13 +56,15 @@
                   <el-button
                      type="primary"
                      plain
+                    :class="isActive=='6'?'active':''"
                     @click="changeDivision(8,6)"
                   >六分屏</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
-                     type="primary"
-                     plain
+                  type="primary"
+                  plain
+                  :class="isActive=='12'?'active':''"
                   @click="changeDivision(6,12)"
                   >十二分屏</el-button>
                </el-col>
@@ -120,6 +123,7 @@
   const ids = ref([]);
   const total = ref(0);
   const division = ref(6);
+  const isActive = ref('12');
   const deviceList = ref([]);
   const algList = ref([]);
   const data = reactive({
@@ -142,6 +146,7 @@
   function changeDivision(val,pageSize){
     division.value=val
     queryParams.value.pageSize=pageSize
+    isActive.value=pageSize
     getList()
   }
   
@@ -204,6 +209,10 @@
   </script>
   
   <style scoped lang="scss">
+   .active{
+    background-color: #409EFF;
+    color: #fff;
+   }
    .search-input{
     display: flex;
     width: 400px;

src/views/algorithmList/components/details.vue

@@ -296,7 +296,7 @@ getDetials()
     }
     .img-box{
       // width: 500px;
-      min-height: 365px;
+      min-height: 200px;
       // border: 1px solid #d8dce5;
       border-radius: 5px;
       text-align: center;
@@ -411,7 +411,7 @@ getDetials()
     text-align: left;
     font-style: normal;
     text-transform: none;
-    min-height: 180px;
+    min-height: 120px;
   }
   .text-style{
     font-family: PingFang SC, PingFang SC;

src/views/algorithmList/index.vue

@@ -27,14 +27,17 @@
               default-active="2"
               class="el-menu-vertical-demo"
             >
-              <el-menu-item :index="''" @click="handMenuClick">
-                <span>全部</span>
-              </el-menu-item>
               <el-menu-item :index="'我的算法'" @click="handMenuClick">
-                <span>我的算法</span>
+                <span><el-icon style="color: #7F8184;"><component :is="'HomeFilled'" /></el-icon>我的算法</span>
+              </el-menu-item>
+              <el-divider style="margin: 5px 0;"/>
+              <el-menu-item :index="''" @click="handMenuClick">
+                <span> <el-icon style="color: #7F8184;"><component :is="'DeleteFilled'" /></el-icon>全部</span>
               </el-menu-item>
-     
               <el-menu-item v-for="item in algorithm_scen" :key="item.value" :index="item.value" @click="handMenuClick"> 
+                <span style="display: flex;align-items: center;">
+                  <el-icon style="color: #7F8184;"><component :is="iconComponent(item.remark)"/></el-icon>
+                </span> &nbsp; 
                 <span>{{ item.label }}</span>
               </el-menu-item>
             </el-menu>  
@@ -161,6 +164,10 @@
   const nowText=ref('算法管理')
   const nowTopTitle=ref('算法管理')
   const ids = ref([]);
+  // const iconComponent = ref('');
+  // setTimeout(() => {
+  //   iconComponent.value='CirclePlusFilled'
+  // }, 1000);
   const algorithmList=reactive([])
   const algList = ref([]);
   const data = reactive({
@@ -210,6 +217,15 @@
     getList()
   }
   
+  function iconComponent(row){
+    if(row){
+      return row
+    }else{
+      return 'CirclePlusFilled'
+    }
+
+  }
+
   function handleEnable(row){
     const params={
       algorithmStatus: row.algorithmStatus=='1'?"0":"1",
@@ -232,6 +248,16 @@
       proxy.$modal.msgSuccess("删除成功");
     }).catch(() => {});
   }
+
+  //
+    function handeImg(row){
+      if(row){
+        return `src/assets/algImg/${row}.png`
+
+      }else{
+        return `src/assets/algImg/setting.png`
+      }
+    }
   getList();
   </script>
   

src/views/videoControl/videoPreview/index.vue

@@ -71,7 +71,7 @@
       </el-col>
       <el-col :xs="0" :sm="2" :md="3" :lg="6">
         <el-scrollbar :height="globalScreenHeight+'px'">
-        <el-card class="danger-list">
+        <el-card class="danger-list" :style="{minHeight:globalScreenHeight+'px'}">
           <template v-slot:header>
             <div class="cleartitle" style="justify-content: flex-start">
               <img src="@/assets/images/logo_video.png" width="25px" alt />
@@ -170,11 +170,7 @@ function getTreeData() {
       deptOptions.value=res.data
   })
 }
-function getWaringData() {
-  listAlarm(queryParams.value).then((res) => {
-    algorithmList.value=res.rows
-  })
-}
+
 function getVideos(str){
     let canvas = document.getElementById('video')
     let url = str?str:'rtsp://192.168.20.211:554/av0_0'
@@ -198,6 +194,7 @@ function handleNodeClick(row) {
     queryParams.value.regionId = treeID;
     queryParams.value.locationId = null;
   }
+  clearTimeout(timeoutId);
   getWaringData()
 }
 function handjudge(row) {
@@ -216,6 +213,23 @@ function handlvideoPath(id) {
     getVideos(res.data.videoUrl)
   })
 }
+
+let timeoutId = null;
+function getWaringData() {
+  listAlarm(queryParams.value).then((res) => {
+    algorithmList.value=res.rows
+    timeoutId = setTimeout(getWaringData, 30000);
+  }).catch((error) => {
+    // 请求失败，重新尝试
+    timeoutId = setTimeout(getWaringData, 30000);
+  });
+}
+onUnmounted(() => {
+  // 清除定时器
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+});
 </script>
   
 <style scoped lang="scss">
@@ -240,7 +254,6 @@ function handlvideoPath(id) {
   }
 }
 .danger-list{
-  min-height: 700px;
   .alg-list {
     display: grid;
     grid-template-columns: repeat(minmax(180px, 1fr));