Merge branch 'bugFix' into 'master'

车间fix

See merge request tian-group/skyeye-admin-fe!69

.env.development

@@ -23,7 +23,7 @@ VITE_GLOB_API_URL =
 VITE_GLOB_UPLOAD_URL=  
 
 # 图片前缀地址
-VITE_GLOB_IMG_URL = //58.144.197.158:19980/skyeye_static/
+VITE_GLOB_IMG_URL = //172.16.23.144/skyeye_static/
 
 
 # 接口前缀

src/api/camera/camera-preview.ts

@@ -23,6 +23,7 @@ export interface CameraTree {
   children: CameraTree[];
   nodeType: CameraTreeNodeType;
   pushstreamIp: string;
+  integrationState: number;
 }
 
 /** 获取摄像头所在的树状结构 */

src/views/cameras/preview/CameraPreview.vue

@@ -2,7 +2,13 @@
   <div>
     <div class="cameraMain">
       <div class="cameraTree">
-        <CameraTreeCom :loading="presetListStore.loading" :camera-tree="cameraTree || []" />
+        <CameraTreeCom
+          :loading="presetListStore.loading"
+          :camera-tree="cameraTree || []"
+          :total="codeShowList.length"
+          :no-integration-num="noIntegrationNum"
+          :no-networking-num="noNetworkingNum"
+        />
       </div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
@@ -25,11 +31,54 @@
   import { onMounted } from 'vue';
   import { IsPtz } from '@/api/camera/camera-overview';
   import { CameraTree, getCameraTree } from '@/api/camera/camera-preview';
+  import useCameraStatus from './store/useCameraStatus';
+
+  const cameraStatus = useCameraStatus();
+  const { noNetworkingNum, openInterval, closeInterval } = cameraStatus;
+
   const cameraDetailStore = useCameraDetailStore();
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
   const presetListStore = usePresetListStore();
   const cameraTree = ref<CameraTree[]>([]);
+  const codeShowList = ref<string[]>([]);
+  const noIntegrationNum = ref<number>(0);
+
+  function updateNetworkingState(data, targetData) {
+    let integrationCount = 0;
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i];
+      const matchedNode = targetData.find((item) => item.cameraCode === node.code);
+      if (matchedNode) {
+        node.networkingState = 1;
+      }
+      if (node.integrationState === 1) {
+        integrationCount++;
+      }
+
+      if (node.children && node.children.length > 0) {
+        const childIntegrationCount = updateNetworkingState(node.children, targetData);
+        integrationCount += childIntegrationCount;
+      }
+    }
+    noIntegrationNum.value = integrationCount;
+    return integrationCount;
+  }
+
+  function getCameraList(data) {
+    let cameraList = [] as string[];
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i];
+      if (node.nodeType === 'camera') {
+        cameraList.push(node.code);
+      }
+      if (node.children && node.children.length > 0) {
+        const childCameraList = getCameraList(node.children);
+        cameraList.push(...childCameraList);
+      }
+    }
+    return cameraList;
+  }
 
   watch(
     () => cameraDetailStore.cameraId,
@@ -45,8 +94,6 @@
         }
 
         const detail = getCameraDetail(cameraTree.value, cameraDetailStore.cameraId);
-
-        console.log('cameraDetail', detail);
         if (detail) {
           cameraDetailStore.setDetail(detail);
           if (detail?.isPtz === IsPtz.disabled) {
@@ -69,6 +116,15 @@
 
   onMounted(() => {
     cameraAlgoStore.getAllAlgoList();
+    getCameraTree().then((res) => {
+      cameraTree.value = res;
+      codeShowList.value = getCameraList(res);
+      // openInterval(codeShowList.value, cameraTree.value, updateNetworkingState);
+      // (targetData) => { updateNetworkingState(cameraTree.value, targetData) }
+      openInterval(codeShowList.value, (targetData) => {
+        updateNetworkingState(cameraTree.value, targetData);
+      });
+    });
   });
 
   onUnmounted(() => {
@@ -77,7 +133,7 @@
     cameraAlgoStore.clear();
     fenceStore.clear();
     presetListStore.clear();
-    console.log('camera preview onUnmounted');
+    closeInterval();
   });
 
   function getCameraDetail(tree: CameraTree[], cameraId: number): CameraTree | null {

src/views/cameras/preview/components/CameraTree/CameraTree.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="cameraTreeWrapper">
-    <div class="cameraTreeTitle">场景树</div>
+    <div class="cameraTreeTitle">
+      <span>场景树</span>
+      <span class="detail-num" v-if="props.total"
+        >(总相机:{{ props.total }} 未联网:{{ props.noNetworkingNum }} 未进入平台:{{
+          props.noIntegrationNum
+        }})</span
+      ></div
+    >
     <div class="cameraTreeInputWrapper">
       <el-input
         v-model="filterText"
@@ -20,7 +27,7 @@
           v-loading="props.loading"
         >
           <template #default="{ node, data }">
-            <span class="flexCenter">
+            <span class="flexCenter" :class="{ integrationState: data.integrationState === 1 }">
               <span
                 v-if="data.nodeType === CameraTreeNodeType.camera"
                 class="iconWrapper flexCenter"
@@ -51,7 +58,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ElTree } from 'element-plus';
+  import { ElMessage, ElTree } from 'element-plus';
   import { ref, watch } from 'vue';
   import { useRouteQuery } from '@vueuse/router';
   import { Search, VideoCamera, WarningFilled } from '@element-plus/icons-vue';
@@ -59,7 +66,13 @@
   import useCameraDetail from '../../store/useCameraDetailStore';
   import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
 
-  const props = defineProps<{ cameraTree: Tree[]; loading: boolean }>();
+  const props = defineProps<{
+    cameraTree: Tree[];
+    loading: boolean;
+    total: number;
+    noNetworkingNum?: number;
+    noIntegrationNum?: number;
+  }>();
 
   interface Tree {
     [key: string]: any;
@@ -75,13 +88,13 @@
 
   const handleNodeClick = (e: CameraTree) => {
     console.log('e', e);
-    console.log('CameraTreeNodeType', CameraTreeNodeType);
-
-    if (e.nodeType === CameraTreeNodeType.camera) {
-      console.log('aaa');
-
-      cameraId.value = String(e.id);
-      setDetail(e);
+    if (e.integrationState === 1) {
+      ElMessage.error('该相机未进入平台');
+    } else {
+      if (e.nodeType === CameraTreeNodeType.camera) {
+        cameraId.value = String(e.id);
+        setDetail(e);
+      }
     }
   };
 
@@ -101,7 +114,7 @@
   };
 
   const isInvalid = (data) => {
-    return data.integrationState !== 0 || data.networkingState !== 0;
+    return data.networkingState !== 0;
   };
 </script>
 <style scoped>
@@ -128,6 +141,13 @@
   .cameraTreeTitle {
     background: #f0f2f5;
     padding: 12px;
+    display: flex;
+  }
+
+  .detail-num {
+    font-size: 10px;
+    margin-top: 4px;
+    margin-left: 6px;
   }
 
   .cameraTreeInputWrapper {
@@ -140,6 +160,11 @@
     display: flex;
     align-items: center;
   }
+
+  .integrationState {
+    cursor: not-allowed;
+    color: #ccc;
+  }
   .cameraIcon {
     margin-right: 5px;
     font-size: 18px;

src/views/cameras/preview/store/useCameraStatus.ts

@@ -0,0 +1,37 @@
+import { getCameraState } from '@/api/camera/camera-overview';
+import { ref } from 'vue';
+
+export const useCameraStatus = () => {
+  const noNetworkingNum = ref<number>(0);
+  let interval;
+
+  const getState = (codeList, callback) => {
+    getCameraState({ cameraCodeList: codeList }).then((res) => {
+      const filterData = res.filter((item) => item.status === 1);
+      noNetworkingNum.value = filterData.length;
+      callback(filterData);
+    });
+  };
+
+  const openInterval = (codeList, callback) => {
+    setTimeout(() => {
+      getState(codeList, callback);
+    }, 500);
+    interval = setInterval(() => {
+      getState(codeList, callback);
+    }, 30000);
+  };
+
+  const closeInterval = () => {
+    clearInterval(interval);
+  };
+
+  return {
+    noNetworkingNum,
+    openInterval,
+    closeInterval,
+    getState,
+  };
+};
+
+export default useCameraStatus;

src/views/map-config/mini-map/MapBase/KonvaMap.vue

@@ -318,7 +318,7 @@
 
   //删除相机
   const handleKeyDown = (e) => {
-    if (e.keyCode === 46 || e.code === 'Delete') {
+    if (e.keyCode === 46 || e.code === 'Delete' || e.keyCode === 8 || e.code === 'Backspace') {
       if (lastClickedGroupId.value === defaultCameraId.value) {
         // ElMessage.error({
         //   message: '无法删除默认相机',

src/views/map-config/mini-map/MiniMapConfig.vue

@@ -100,6 +100,7 @@
         ref="drawContainer"
         v-show="isUploadBg || shopCameraList.length !== 1"
         class="draw-container"
+        :class="{ 'bg-background': hasBg ? true : false }"
       >
         <KonvaMap
           ref="konvaMap"
@@ -379,6 +380,11 @@
     width: calc(100% - 300px);
     margin: 20px;
     overflow: hidden;
+    //background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  .bg-background {
+    background-color: rgba(0, 0, 0, 0.6);
   }
 
   :deep(.search-put .el-input__wrapper) {