fix: 相机配置表格字段修改

.env.development

@@ -1,5 +1,5 @@
 # 只在开发模式中被载入
-VITE_PORT = 8092
+VITE_PORT = 8097
 
 # 网站根目录
 VITE_PUBLIC_PATH = /skyeye-admin/
@@ -16,7 +16,8 @@ VITE_DROP_CONSOLE = true
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
 # VITE_PROXY=[["/temp","http://172.16.23.144:8800"],["/upload","http://172.16.23.144:8086"]]
-VITE_PROXY=[["/skyeye-admin-api","http://192.168.1.102:8800/api"]]
+VITE_PROXY=[["/skyeye-admin-api","http://172.16.23.144:8800/api"]]
+# VITE_PROXY=[["/skyeye-admin-api","http://192.168.1.102:8800/api"]]
 
 # API 接口地址
 VITE_GLOB_API_URL = 

src/api/camera/camera-overview.ts

@@ -102,3 +102,12 @@ export const deleteCameraItem = (params: { cameraId: number }) => {
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
   });
 };
+
+/** 获取相机状态 */
+export const getCameraState = (data: { cameraCodeList: string[] }) => {
+  return http.request<{ cameraCode: string; status: 0 | 1 }[]>({
+    url: '/cameraConfig/getCameraStatusList',
+    method: 'post',
+    data,
+  });
+};

src/views/cameras/overview/CamerasOverview.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-  import { h, onMounted, reactive, ref } from 'vue';
+  import { h, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
   import { BasicTable, TableActionIcons } from '@/components/Table';
   import { BasicColumn } from '@/components/Table';
   import { columns } from './overviewColumns';
@@ -59,7 +59,7 @@
 
   const cameraOverview = useCameraOverview();
   const { cameraItems, loading, total, page, size } = storeToRefs(cameraOverview);
-  const { getCameraItems } = cameraOverview;
+  const { getCameraItems, openInterval, closeInterval } = cameraOverview;
 
   // 添加弹窗相关
   const showAddPopover = ref(false);
@@ -140,6 +140,11 @@
 
   onMounted(() => {
     getCameraItems();
+    openInterval();
+  });
+
+  onBeforeUnmount(() => {
+    closeInterval();
   });
 </script>
 

src/views/cameras/overview/overviewColumns.ts

@@ -17,6 +17,11 @@ export const columns: BasicColumn[] = [
     type: 'index',
     fixed: 'left',
   },
+  {
+    label: '名称',
+    prop: 'name',
+    minWidth: 100,
+  },
   {
     label: 'IP地址',
     prop: 'cameraIp',
@@ -25,7 +30,7 @@ export const columns: BasicColumn[] = [
   {
     label: '协议类型',
     prop: 'cameraType',
-    minWidth: 80,
+    minWidth: 120,
     render(record) {
       return h(
         'span',
@@ -40,7 +45,7 @@ export const columns: BasicColumn[] = [
   {
     label: '端口地址',
     prop: 'cameraPort',
-    minWidth: 80,
+    minWidth: 120,
   },
   {
     label: 'MAC地址',

src/views/cameras/overview/stores/useCameraOverview.ts

@@ -5,6 +5,7 @@ import {
   getCameraList,
   addCameraItem,
   updateCameraItem,
+  getCameraState,
 } from '@/api/camera/camera-overview';
 import { CameraIPItem, CameraShowItem } from '../type';
 import { useRequest } from 'vue-hooks-plus';
@@ -18,6 +19,8 @@ export const useCameraOverview = defineStore('camera-overview', () => {
   const page = ref(1);
   const size = ref(10);
 
+  let interval;
+
   const cameraItems = ref<CameraShowItem[]>([]);
 
   // 条件查询事件
@@ -70,6 +73,30 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     });
   };
 
+  const getState = () => {
+    getCameraState({ cameraCodeList: cameraItems.value.map((camera) => camera.code) }).then(
+      (res) => {
+        res.forEach((item) => {
+          cameraItems.value.find((camera) => camera.code === item.cameraCode)!.networkingState =
+            item.status;
+        });
+      },
+    );
+  };
+
+  const openInterval = () => {
+    setTimeout(() => {
+      getState();
+    }, 500);
+    interval = setInterval(() => {
+      getState();
+    }, 30000);
+  };
+
+  const closeInterval = () => {
+    clearInterval(interval);
+  };
+
   return {
     queryType,
     queryTypeContent,
@@ -83,6 +110,8 @@ export const useCameraOverview = defineStore('camera-overview', () => {
     getCameraItems,
     addCamera,
     editCamera,
+    openInterval,
+    closeInterval,
   };
 });
 

src/views/system-config/template/TemplateManager.vue

@@ -2,10 +2,10 @@
   <div style="width: 100%">
     <div>
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-        <el-tab-pane label="场景管理" name="scene">
+        <el-tab-pane label="公司模板" name="scene">
           <SceneManagerVue />
         </el-tab-pane>
-        <el-tab-pane label="场景标签管理" name="label">
+        <el-tab-pane label="场景标签" name="label">
           <LabelManagerVue />
         </el-tab-pane>
         <el-tab-pane label="车间模板" name="workspace">
@@ -13,38 +13,32 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-
-
-
   </div>
 </template>
-  
-<script setup lang="ts">
-import { ref } from 'vue';
-import type { TabsPaneContext } from 'element-plus';
-import LabelManagerVue from './LabelManager.vue';
-import WorkspaceManagerVue from './WorkspaceManager.vue';
-import SceneManagerVue from './SceneManager.vue';
 
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import type { TabsPaneContext } from 'element-plus';
+  import LabelManagerVue from './LabelManager.vue';
+  import WorkspaceManagerVue from './WorkspaceManager.vue';
+  import SceneManagerVue from './SceneManager.vue';
 
-const activeName = ref('scene');
-export type LabelType = 'scene' | 'label' | 'workspace';
-const currentLabel = ref<LabelType>('scene');
+  const activeName = ref('scene');
+  export type LabelType = 'scene' | 'label' | 'workspace';
+  const currentLabel = ref<LabelType>('scene');
 
-const handleClick = (tab: TabsPaneContext) => {
-  console.log(tab.paneName);
-  if (tab.paneName === 'scene') {
-    currentLabel.value = 'scene';
-  } else {
-    if (tab.paneName === 'label') {
-      currentLabel.value = 'label';
+  const handleClick = (tab: TabsPaneContext) => {
+    console.log(tab.paneName);
+    if (tab.paneName === 'scene') {
+      currentLabel.value = 'scene';
     } else {
-      currentLabel.value = 'workspace';
-
+      if (tab.paneName === 'label') {
+        currentLabel.value = 'label';
+      } else {
+        currentLabel.value = 'workspace';
+      }
     }
-  }
-};
+  };
 </script>
-  
+
 <style scoped></style>
-