fix:监听数据chart图字段，audio问题，视频下拉框默认第一个等

.env.prod

 # backend service base url, prod environment
-VITE_SERVICE_BASE_URL=https://mock.apifox.cn/m1/3109515-0-default
-
+# VITE_SERVICE_BASE_URL=https://192.168.5.223:
+VITE_VIDEO_URL=ws://192.168.5.223:9999
+VITE_SERVICE_URL=https://192.168.5.223:9996
+VITE_WEBSOCKET_URL=ws://192.168.5.223:9999
 # other backend service base url, prod environment
 VITE_OTHER_SERVICE_BASE_URL= `{
-  "demo": "http://10.0.20.81:9529"
+  "demo": "http://192.168.5.223:9999"
 }`

.gitignore

@@ -33,3 +33,4 @@ package-lock.json
 yarn.lock
 
 .VSCodeCounter
+*.zip

src/views/_builtin/demo/index.vue

@@ -102,7 +102,7 @@
 
     <!-- 管理后台 -->
     <div class="header-wrap">
-      <i class="tracking-in-contract">智慧矿山AI推理平台</i>
+      <i class="tracking-in-contract">弘基智能AI预警平台</i>
     </div>
 
     <NModal v-model:show="videoModal">
@@ -131,13 +131,13 @@
                     <img src="../../../assets/jiankong1.png"
                       style="height: 80px; display: inline-block;  border-radius: 50%; width: 80px; box-shadow: 0 0 10px rgba(0,0,0,.3);" />
                     <br />
-                    <i>在线监控: {{ form[0] || 0 }} 个 </i>
+                    <i>在线监控: {{ form.online || 0 }} 个 </i>
                   </div>
                   <div>
                     <img src="../../../assets/jiankong2.png"
                       style="height: 80px; display: inline-block;  border-radius: 50%; width: 80px; box-shadow: 0 0 10px rgba(0,0,0,.3);" />
                     <br />
-                    <i>离线监控: {{ form[1] || 0 }} 个 </i>
+                    <i>离线监控: {{ form.offline || 0 }} 个 </i>
                   </div>
                 </div>
               </div>
@@ -219,7 +219,7 @@
                   <NSelect :style="{
                     '--n-border': 'none !important',
                     '--n-color': '#0E4AB3 !important',
-                  }" size="small" @update:value="val => switchVideoPalyer(val)" placeholder="监控源"
+                  }" size="small" v-model="cId"  @update:value="val => switchVideoPalyer(val)" placeholder="监控源"
                     label-field="cameraName" value-field="id" :options="cameraList"></NSelect>
                 </div>
               </div>
@@ -554,9 +554,9 @@ const switchVideoPalyer = (id: string) => {
 
   console.log("11111111111111111 ======================================= id", id, camera?.cameraAddress);
 
-  if (!camera?.cameraAddress?.includes(`rtsp://`)) {
-    return message.error('摄像头流地址格式有误!');
-  }
+  // if (!camera?.cameraAddress?.includes(`rtsp://`) && !camera?.cameraAddress?.includes(`.m3u8`)) {
+  //   return message.error('摄像头流地址格式有误!');
+  // }
 
   cName.value = camera.cameraName;
 
@@ -589,9 +589,9 @@ const switchVideoPalyer01 = (id: string) => {
 
   console.log("11111111111111111 ======================================= id", id, camera?.cameraAddress);
 
-  if (!camera?.cameraAddress?.includes(`rtsp://`)) {
-    return message.error('摄像头流地址格式有误!');
-  }
+  // if (!camera?.cameraAddress?.includes(`rtsp://`) && !camera?.cameraAddress?.includes(`.m3u8`)) {
+  //   return message.error('摄像头流地址格式有误!');
+  // }
 
   cName.value = camera.cameraName;
 
@@ -693,13 +693,19 @@ const getCameraList = async () => {
   });
 };
 
-const form = ref([]);
+// 初始化响应式对象
+const form = ref({});
 
 const getLogData = async () => {
   await api_pointsCount().then(res => {
     if (res.data.code === 200) {
       res.data.data.forEach(item => {
-        form.value.push(item.count)
+        if(item.status === 0){
+          form.value.online = item.count
+        }else{
+          form.value.offline = item.count
+        }
+        // form.value.push(item.count)
       })
     };
   })

src/views/home/index.vue

@@ -18,14 +18,6 @@ import JSMpeg from '@cycjimmy/jsmpeg-player';
 import fullScreen from '@/utils/full'
 // import { wx } from '@/index.vue'
 
-// 服务器IP地址
-// const serviceUrl = 'ws://192.168.1.140:9999';
-// ws://192.168.1.221:9999
-// const serviceUrl = 'ws://192.168.1.199:9999';
-
-// const serviceUrl = 'ws://192.168.1.221:9999';
-// const apiUrl = 'http://192.168.1.120:9995';
-// const webSocketUrl = 'ws://192.168.1.120:9995';
 
 const serviceUrl = import.meta.env.VITE_VIDEO_URL;
 const apiUrl = import.meta.env.VITE_SERVICE_URL;
@@ -80,7 +72,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);
+      if (cameraList.value.length > 0) {
+        cId.value = cameraList.value[0].id;  // 设置默认选中ID
+        switchVideoPalyer(cameraList.value[0].id);
+      }
     }
   });
 };
@@ -89,21 +84,15 @@ const htmlStr = ref('');
 const audioId = ref('');
 
 const playAudio = async (id: string) => {
-  /**
-   *  1. 接口形式并非准确的资源形式形式
-   *  2. 模板的形式， 特殊处理
-   *  3. 动态js网络链接不上
-   */
-
-
-  htmlStr.value = `<audio ref="audioE"  id="aWrap" controls>
-         <source  id="audio" src="${apiUrl}/v1/play/${id}" type="audio/mpeg"></source>
-    </audio>`;
-
-  nextTick(() => {
-    let a = document.getElementById('aWrap');
-    a?.play();
-  });
+  // 创建新的音频元素并播放
+  const audio = new Audio(`${apiUrl}/v1/play/${id}`);
+  audio.play();
+  
+  // 保留原始逻辑备用
+  // htmlStr.value = `<audio id="aWrap" controls autoplay>
+  //      <source src="${apiUrl}/v1/play/${id}" type="audio/mpeg">
+  // </audio>`;
+  // nextTick(() => document.getElementById('aWrap')?.play());
 };
 
 const cId = ref('');
@@ -114,9 +103,9 @@ const switchVideoPalyer = (id: string) => {
 
   console.log("======================================= id", id, camera?.cameraAddress);
 
-  if (!camera?.cameraAddress?.includes('rtsp://')) {
-    return message.error('摄像头流地址格式有误!');
-  }
+  // if (!camera?.cameraAddress?.includes('rtsp://')) {
+  //   return message.error('摄像头流地址格式有误!');
+  // }
 
 
   cName.value = camera.cameraName;
@@ -239,7 +228,14 @@ const devData = ref({});
 const getCardData = async () => {
   await api_pointsCount().then(res => {
     if (res.data.code === 200) {
-      devData.value = res.data.data;
+      // devData.value = res.data.data;
+      (res.data.data).forEach(item => {
+        if(item.status === 0){
+          devData.value.online = item.count
+        }else{
+          devData.value.offline = item.count
+        }
+      })
     };
   })
 };
@@ -303,7 +299,7 @@ onMounted(() => {
         window.$notification?.create({
           duration: 5000,
           title: () => <div>
-            <NSpace justify='space-between'>
+            <NSpace justify='space-between' >
               <NSpace align='center' >
                 {
                   data.algorithmGrade === 0 ? (
@@ -469,7 +465,7 @@ onMounted(() => {
     </NModal>
     <!-- =================================== 弹窗 | E -->
 
-    <div style="border: 1px solid red; position: fixed; top: -1000px" v-html="htmlStr"></div>
+    <!-- <div style="border: 1px solid red; position: fixed; top: -1000px" v-html="htmlStr"></div> -->
 
     <NSpace vertical :size="16">
       <NModal v-model:show="showTipModal">
@@ -525,7 +521,7 @@ onMounted(() => {
                 <div style="height: 100px; display: flex; justify-content: space-between; align-items: center;">
                   <div style="flex: 1;  text-align: center;">
                     <div style="display: inline-block; font-size: 40px; font-weight: 500;">
-                      {{ devData[0]?.count || 0 }}
+                      {{ devData.online || 0 }}
                     </div>
                     <br />
                     <div style="display: inline-block;margin-top: 10px; margin-bottom: 20px;">
@@ -534,7 +530,7 @@ onMounted(() => {
                   </div>
                   <div style="flex: 1;  text-align: center;">
                     <div style="display: inline-block;font-size: 40px; font-weight: 500;">
-                      {{ devData[1]?.count || 0 }}
+                      {{ devData.offline || 0 }}
                     </div>
                     <br />
                     <div style="display: inline-block; margin-top: 10px; margin-bottom: 20px;">
@@ -562,7 +558,7 @@ onMounted(() => {
 
                 <template #header-extra>
                   <div style="width: 200px;">
-                    <NSelect @update:value="val => switchVideoPalyer(val)" placeholder="请选择" label-field="cameraName"
+                    <NSelect  v-model:value="cId" @update:value="val => switchVideoPalyer(val)" placeholder="请选择" label-field="cameraName"
                       value-field="id" :options="cameraList"></NSelect>
                   </div>
                 </template>

src/views/home/modules/pie-chart-pro.vue

 <script setup lang="ts">
-import { watch, onMounted } from 'vue';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useEcharts } from '@/hooks/common/echarts';
-import { api_pointsCount, api_taskCount } from '@/api/index.ts'
+import { watch, onMounted } from "vue";
+import { $t } from "@/locales";
+import { useAppStore } from "@/store/modules/app";
+import { useEcharts } from "@/hooks/common/echarts";
+import { api_pointsCount, api_taskCount } from "@/api/index.ts";
 
 defineOptions({
-  name: 'PieChart'
+  name: "PieChart",
 });
 
 const getCardData = async () => {
-  await api_taskCount().then(res => {
+  await api_taskCount().then((res) => {
     if (res.data.code === 200) {
-      updateOptions(opts => {
+      updateOptions((opts) => {
         opts.series[0].data = [
-          { name: `已启动 ${res.data.data[0].count} 个`, value: res.data.data[0].count },
-          { name: `已停用 ${res.data.data[1].count} 个`, value: res.data.data[1].count },
+          {
+            name: `已启动 ${res.data.data[1].count} 个`,
+            value: res.data.data[1].count,
+          },
+          {
+            name: `已停用 ${res.data.data[0].count} 个`,
+            value: res.data.data[0].count,
+          },
         ];
         return opts;
       });
-    };
-  })
-
+    }
+  });
 };
 
 const appStore = useAppStore();
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
-    trigger: 'item'
+    trigger: "item",
   },
   legend: {
-    bottom: '-1%',
-    left: 'left',
+    bottom: "-1%",
+    left: "left",
     itemStyle: {
       borderWidth: 0,
     },
     textStyle: {
-      color: 'white' // 设置图例字体颜色为白色
-    }
+      color: "white", // 设置图例字体颜色为白色
+    },
   },
   series: [
     {
-      color: ['#184ff0', '#f8f8f9c9'],
-      name: '启动状态',
-      type: 'pie',
-      center: ['50%', '50%'],
+      color: ["#184ff0", "#f8f8f9c9"],
+      name: "启动状态",
+      type: "pie",
+      center: ["50%", "50%"],
       // selectedMode: 'single',
       itemStyle: {
         // borderRadius: 10,
-        borderColor: '#fff',
-        borderWidth: 1
+        borderColor: "#fff",
+        borderWidth: 1,
       },
       // label: {
       //   show: false,
@@ -59,26 +64,26 @@ const { domRef, updateOptions } = useEcharts(() => ({
       emphasis: {
         label: {
           show: true,
-          fontSize: '12'
-        }
+          fontSize: "12",
+        },
       },
       labelLine: {
-        show: true
+        show: true,
       },
-      data: [] as { name: string; value: number }[]
-    }
-  ]
+      data: [] as { name: string; value: number }[],
+    },
+  ],
 }));
 
 async function mockData() {
-  await new Promise(resolve => {
+  await new Promise((resolve) => {
     setTimeout(resolve, 1000);
   });
 
-  updateOptions(opts => {
+  updateOptions((opts) => {
     opts.series[0].data = [
-      { name: '已启动 16 个', value: 20 },
-      { name: '已停用 4 个', value: 10 },
+      { name: "已启动 16 个", value: 20 },
+      { name: "已停用 4 个", value: 10 },
     ];
 
     return opts;
@@ -92,10 +97,10 @@ function updateLocale() {
     opts.series[0].name = originOpts.series[0].name;
 
     opts.series[0].data = [
-      { name: $t('page.home.study'), value: 20 },
-      { name: $t('page.home.entertainment'), value: 10 },
-      { name: $t('page.home.work'), value: 40 },
-      { name: $t('page.home.rest'), value: 30 }
+      { name: $t("page.home.study"), value: 20 },
+      { name: $t("page.home.entertainment"), value: 10 },
+      { name: $t("page.home.work"), value: 40 },
+      { name: $t("page.home.rest"), value: 30 },
     ];
 
     return opts;
@@ -109,13 +114,13 @@ function updateLocale() {
 
 onMounted(() => {
   getCardData();
-})
+});
 
 watch(
   () => appStore.locale,
   () => {
     updateLocale();
-  }
+  },
 );
 
 // init
@@ -137,8 +142,8 @@ watch(
 }
 
 .text-focus-in {
-  -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
-  animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+  -webkit-animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+  animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
 }
 
 /* ----------------------------------------------

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

 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useEcharts } from '@/hooks/common/echarts';
-import { api_pointsCount, api_taskCount } from '@/api/index.ts'
+import { computed, ref, onMounted, watch } from "vue";
+import { $t } from "@/locales";
+import { useAppStore } from "@/store/modules/app";
+import { useEcharts } from "@/hooks/common/echarts";
+import { api_pointsCount, api_taskCount } from "@/api/index.ts";
 
 defineOptions({
-  name: 'PieChart'
+  name: "PieChart",
 });
 
 const appStore = useAppStore();
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
-    trigger: 'item'
+    trigger: "item",
   },
   legend: {
     // type: 'scroll',
-
     // orient: 'vertical',
     // right: 10,
     // top: 20,
@@ -25,41 +24,41 @@ const { domRef, updateOptions } = useEcharts(() => ({
   },
   series: [
     {
-      color: ['#1872F0', '#f8f8f9'],
-      name: '任务分析状态',
-      type: 'pie',
-      radius: ['40%', '70%'],
+      color: ["#1872F0", "#f8f8f9"],
+      name: "任务分析状态",
+      type: "pie",
+      radius: ["40%", "70%"],
       avoidLabelOverlap: false,
       label: {
         show: false,
-        position: 'center'
+        position: "center",
       },
       emphasis: {
         label: {
           show: true,
           fontSize: 40,
-          fontWeight: 'bold'
-        }
+          fontWeight: "bold",
+        },
       },
       labelLine: {
-        show: false
+        show: false,
       },
       data: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-      ]
-    }
-  ]
+        { value: 1048, name: "Search Engine" },
+        { value: 735, name: "Direct" },
+      ],
+    },
+  ],
 }));
 
 async function mockData() {
-  await new Promise(resolve => {
+  await new Promise((resolve) => {
     setTimeout(resolve, 1000);
   });
-  updateOptions(opts => {
+  updateOptions((opts) => {
     opts.series[0].data = [
-      { name: `已启动`, value: 20 },
-      { name: `已停用`, value: 30 }
+      { name: `已停用`, value: 20 },
+      { name: `已启动`, value: 30 },
     ];
     return opts;
   });
@@ -72,10 +71,10 @@ function updateLocale() {
     opts.series[0].name = originOpts.series[0].name;
 
     opts.series[0].data = [
-      { name: $t('page.home.study'), value: 20 },
-      { name: $t('page.home.entertainment'), value: 10 },
-      { name: $t('page.home.work'), value: 40 },
-      { name: $t('page.home.rest'), value: 30 }
+      { name: $t("page.home.study"), value: 20 },
+      { name: $t("page.home.entertainment"), value: 10 },
+      { name: $t("page.home.work"), value: 40 },
+      { name: $t("page.home.rest"), value: 30 },
     ];
 
     return opts;
@@ -110,25 +109,24 @@ const getCardData = async () => {
   //   };
   // })
 
-  await api_taskCount().then(res => {
+  await api_taskCount().then((res) => {
     if (res.data.code === 200) {
-      updateOptions(opts => {
+      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;
       });
-    };
+    }
   });
-}
-
+};
 
 watch(
   () => appStore.locale,
   () => {
     updateLocale();
-  }
+  },
 );
 
 onMounted(() => {