车间地图配置未接入平台的相机样式修改

src/api/scene/scene.ts

@@ -129,6 +129,7 @@ interface LayoutResp {
   /** 目标id: 对应公司ID/车间ID */
   targetId: number;
   viewType: ViewType;
+  integrationState?: number;
 }
 
 /** 查询地图布局 */

src/views/cameras/preview/CameraPreview.vue

@@ -51,6 +51,7 @@
       const matchedNode = targetData.find((item) => item.cameraCode === node.code);
       if (matchedNode) {
         node.networkingState = matchedNode.status;
+        node.integrationState = matchedNode.integrationState;
       }
       if (node.integrationState === 1) {
         integrationCount++;

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

@@ -53,8 +53,20 @@
   const miniMap = useMiniMap();
   const { shopCameraList } = storeToRefs(miniMap);
 
-  const emit = defineEmits(['changeDefaultCamera', 'sendCameraId']);
+  interface DataType {
+    name: string;
+    code: string;
+    cameraIp: string;
+    remark: string;
+    status: number;
+    pushstreamIp: string;
+    isSet: number;
+    workSpaceName: string;
+    integrationState?: number;
+  }
 
+  const emit = defineEmits(['changeDefaultCamera', 'sendCameraId']);
+  const props = defineProps<{ filterData: DataType[] }>();
   const camImg = new Image();
 
   const stageConfig = ref({
@@ -88,6 +100,16 @@
   const transformer = ref();
   const defaultIcon = ref();
 
+  function addIntegrationState(data: camerasGroupType[], updateData: DataType[]) {
+    for (let i = 0; i < data.length; i++) {
+      const camera = data[i];
+      const matchedCamera = updateData.find((item) => item.code === camera.id);
+      if (matchedCamera) {
+        camera.groupConfig.visible = matchedCamera.integrationState === 0 ? true : false;
+      }
+    }
+  }
+
   const bgConfig = ref({
     x: 0,
     y: 0,
@@ -272,6 +294,14 @@
     { immediate: true, deep: true },
   );
 
+  watch(
+    () => props.filterData,
+    () => {
+      addIntegrationState(cameras.value, props.filterData);
+    },
+    { immediate: true, deep: true },
+  );
+
   const clearBg = () => {
     bgImg.src = null as any as string;
     layer.value.getNode().draw();

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

@@ -79,6 +79,7 @@
             :class="{
               isAdded: isAddedCamera(item.code),
               isActive: item.code === caremaActiveId,
+              integrationState: item.integrationState === 1,
             }"
             @click="handleAddCamera(item.code)"
           >
@@ -104,6 +105,7 @@
       >
         <KonvaMap
           ref="konvaMap"
+          :filter-data="filterShopCameraList"
           @change-default-camera="changeDefault"
           @send-camera-id="sendCameras"
           v-moveable:1
@@ -135,12 +137,16 @@
   import useMiniMap from './use-mini-map';
   import { storeToRefs } from 'pinia';
   import { ElMessage, ElInput } from 'element-plus';
-  import { onMounted, ref } from 'vue';
+  import { onMounted, onUnmounted, ref } from 'vue';
   import { updateMinMapViewLayoutApi } from '@/api/scene/scene';
   import { computed } from 'vue';
   import { Search, Refresh, ArrowLeft } from '@element-plus/icons-vue';
   import KonvaMap from './MapBase/KonvaMap.vue';
   import { useUserStore } from '@/store/modules/user';
+  import useCameraStatus from '@/views/cameras/preview/store/useCameraStatus';
+
+  const cameraStatus = useCameraStatus();
+  const { openInterval, closeInterval } = cameraStatus;
 
   const userStore = useUserStore();
   const getHeaders = () => {
@@ -166,6 +172,17 @@
   const isUploadBg = ref<boolean>(true);
   const isMap = ref(false);
 
+  function updataState(data, updateData) {
+    for (let i = 0; i < data.length; i++) {
+      const camera = data[i];
+      const matchedCamera = updateData.find((item) => item.cameraCode === camera.code);
+      if (matchedCamera) {
+        camera.status = matchedCamera.status;
+        camera.integrationState = matchedCamera.integrationState;
+      }
+    }
+  }
+
   const changeUploadBg = () => {
     if (isUploadBg.value && !isMap.value) {
       konvaMap.value.resetMap();
@@ -211,6 +228,10 @@
 
   const getShopContent = (code: string) => {
     getShowCameras(code).then(() => {
+      const codeList = filterShopCameraList.value.map((item) => item.code);
+      openInterval(codeList, (targetData) => {
+        updataState(filterShopCameraList.value, targetData);
+      });
       getMapLayout(code).then((res) => {
         if (!res) {
           return;
@@ -239,6 +260,10 @@
     }
   });
 
+  onUnmounted(() => {
+    closeInterval();
+  });
+
   const filterShopCameraList = computed(() => {
     const k = searchKey.value.trim();
     if (!k) return shopCameraList.value;
@@ -387,6 +412,11 @@
     background-color: rgba(0, 0, 0, 0.6);
   }
 
+  .integrationState {
+    cursor: not-allowed;
+    color: #ccc;
+  }
+
   :deep(.search-put .el-input__wrapper) {
     background-color: #f0f2f5;
   }

src/views/map-config/mini-map/type.ts

@@ -17,6 +17,7 @@ export interface camerasImgType {
   image?: HTMLImageElement;
   name?: string;
   url?: string;
+  visible?: boolean;
 }
 
 export interface camerasGroupType {

src/views/map-config/mini-map/use-mini-map.ts

@@ -10,6 +10,7 @@ type ShopMapCamera = CameraItem & {
   isSet: number;
   /** 工位名称 */
   workSpaceName: string;
+  integrationState?: number;
 };
 
 export const useMiniMap = defineStore('mini-map', () => {