fix:视频分析任务启动状态、监控视频默认第一选项

src/views/home/index.vue

@@ -2,7 +2,7 @@
 import { computed, ref, onMounted, reactive, nextTick, watch } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { ArrowLeft20Filled } from '@vicons/fluent';
-import { useMessage, NConfigProvider, darkTheme, NButton, NImage, NSpace, NTag, useNotification, NDropdown, NRow, NCol, NEllipsis } from "naive-ui"
+import { useMessage, NConfigProvider, darkTheme, NButton, NImage, NSpace, NTag, useNotification, NDropdown, NRow, NCol, NEllipsis, selectDark } from "naive-ui"
 import HeaderBanner from './modules/header-banner.vue';
 import CardData from './modules/card-data.vue';
 import LineChart from './modules/line-chart.vue';
@@ -62,6 +62,7 @@ const start = () => {
 }
 
 const cameraList = ref([]);
+const selectData = ref('');
 // 获取区域
 const getCameraList = async () => {
   const params = {
@@ -72,7 +73,10 @@ const getCameraList = async () => {
   await api_getCameraList(params).then(res => {
     if (res.data.code === 200) {
       cameraList.value = res.data.data.records;
+      
       cameraList.value.length > 0 && switchVideoPalyer(cameraList.value[0].id);
+      selectData.value = cameraList.value[0].cameraName;
+ 
     }
   });
 };
@@ -92,23 +96,13 @@ const playAudio = async (id: string) => {
   // nextTick(() => document.getElementById('aWrap')?.play());
 };
 
-const cId = ref('');
+
 const cName = ref('');
 const switchVideoPalyer = (id: string) => {
-  cId.value = id;
+  selectData.value = cameraList.value.filter(item => item?.id === id)[0].cameraName;
   let camera = cameraList.value.filter(item => item?.id === id)[0];
-
-  console.log("======================================= id", id, camera?.cameraAddress);
-
-  // if (!camera?.cameraAddress?.includes('rtsp://')) {
-  //   return message.error('摄像头流地址格式有误!');
-  // }
-
-
   cName.value = camera.cameraName;
-
   jsmpeg.value && jsmpeg.value.destroy();
-
   nextTick(() => {
     try {
       const rtsp1 = camera.cameraAddress;
@@ -122,7 +116,6 @@ const switchVideoPalyer = (id: string) => {
         }
       );
     } catch (e) {
-      console.log("======================================= error", e);
     }
   });
 };
@@ -227,9 +220,9 @@ const getCardData = async () => {
     if (res.data.code === 200) {
       // devData.value = res.data.data;
       (res.data.data).forEach(item => {
-        if(item.status === 0){
+        if (item.status === 0) {
           devData.value.online = item.count
-        }else{
+        } else {
           devData.value.offline = item.count
         }
       })
@@ -249,49 +242,21 @@ const openCamera = (item) => {
 const full = ref(false);
 
 
-// watch(full, (oldType, curType) => {
-//   if (curType) {
-//     nextTick(() => {
-//       const el = document.getElementById('canvas-4');
-//       const { clientWidth, clientHeight } = el;
-//       console.log(clientWidth, clientHeight)
-//       el.width = clientWidth;
-//       el.height = clientHeight;
-//       switchVideoPalyer();
-//     })
-//   }
-// });
 
-/**
- *  窗口自适应
- */
-// window.addEventListener('resize', (e) => {
-//   if (full.value) {
-
-//   }
-// })
 
 
 onMounted(() => {
   getAlarmLog();
   getCameraList();
   getCardData();
-
-  // =============================================================== Demo | S
   try {
-
     let ws = new WebSocket(`${webSocketUrl}/ws/${localStg.get('id')}`);
-
     ws.onopen = function () {
-      console.log('WebSocket connected --------------------------------------------------------------------------');
       ws.send('Hello, Server! ------------------------- ');
     };
-
     ws.onmessage = function (event) {
-      console.log('---------------------- WebSocket received message:', JSON.parse(event.data));
       let data = JSON.parse(event.data);
       data.algorithmId && playAudio(data.algorithmId);
-
       if (data.reminderType === 1) {
         window.$notification?.create({
           duration: 5000,
@@ -379,17 +344,10 @@ onMounted(() => {
     }
   });
 });
-
-
-
-
 </script>
 
 <template>
   <div id="HomePage">
-
-    <!-- <canvas height="1080" width="1920" id="canvas-4"></canvas> -->
-
     <!-- =================================== 弹窗 | S -->
     <NModal v-model:show="showModal">
       <NCard v-if="isDefaultPreview" style="width: 800px;" @close="showModal = false" closable>
@@ -414,8 +372,8 @@ onMounted(() => {
               <template #icon>
                 <icon-ic:baseline-slow-motion-video class="text-icon" />
               </template>
-              回放
-            </NButton> -->
+回放
+</NButton> -->
           </NFlex>
         </template>
         <!-- 图片区域 -->
@@ -555,7 +513,7 @@ onMounted(() => {
 
                 <template #header-extra>
                   <div style="width: 200px;">
-                    <NSelect @update:value="val => switchVideoPalyer(val)" placeholder="请选择" label-field="cameraName"
+                    <NSelect @update:value="val => switchVideoPalyer(val)" :value="selectData" placeholder="请选择" label-field="cameraName"
                       value-field="id" :options="cameraList"></NSelect>
                   </div>
                 </template>

src/views/home/modules/ring-chart.vue

@@ -113,8 +113,8 @@ const getCardData = async () => {
     if (res.data.code === 200) {
       updateOptions((opts) => {
         opts.series[0].data = [
-          { name: `已启动`, value: res.data.data[0].count },
-          { name: `已停用`, value: res.data.data[1].count },
+          { name: `已启动`, value: res.data.data[1].count },
+          { name: `已停用`, value: res.data.data[0].count },
         ];
         return opts;
       });