Merge branch 'all-v4-bxy' into 'all-v4'

All v4 bxy

See merge request skyeye/skyeye_frontend/skyeye-admin!305

src/views/cameras/overview/components/AddCameraByIP.vue

@@ -174,9 +174,9 @@
 
   const validateSceneTemplate = (_rule, value, callback) => {
     if (Object.keys(sceneCheckedDataRef.value).length === 0)
-      callback(new Error('请选择至少一个业务场景+应用模版'));
+      callback(new Error('请至少选择一个业务场景及对应应用模版'));
     else if (value && Object.keys(sceneCheckedDataRef.value).length > value.length)
-      callback(new Error('请补充完整已选中业务场景下的应用模版（或取消选中未选择模版的场景）'));
+      callback(new Error('请完成已选业务场景中的应用模版选择'));
   };
 
   const rules = {

src/views/cameras/overview/components/AddCameraByNVR.vue

@@ -75,8 +75,7 @@
             v-model="cameraNVRData.workspaceIdStr"
             :data="workspaceInfo"
             :render-after-expand="false"
-            :default-expand-all="props.formData ? true : false"
-            check-strictly
+            :default-expand-all="true"
             placeholder="请选择工位"
             style="width: 200px"
             @node-click="handleTreeSelect"
@@ -152,19 +151,28 @@
   type CameraDetailForm = CameraDetailServer & { workspaceIdStr?: string };
   const cameraNVRData = ref<CameraDetailForm>({} as CameraDetailForm);
 
+  const validateSceneTemplate = (_rule, value, callback) => {
+    if (Object.keys(sceneCheckedDataRef.value).length === 0)
+      callback(new Error('请至少选择一个业务场景及对应应用模版'));
+    else if (value && Object.keys(sceneCheckedDataRef.value).length > value.length)
+      callback(new Error('请完成已选业务场景中的应用模版选择'));
+  };
+
   const rules = {
     nvrId: [{ required: true, message: '请选择NVR设备', trigger: 'blur' }],
     name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
     code: [{ required: true, message: '请输入设备ID', trigger: 'blur' }],
     nvrChannel: [{ required: true, message: '请输入NVR平台通道号', trigger: 'blur' }],
-    sceneTemplateList: [{ required: true, message: '请选择至少一个业务场景', trigger: 'blur' }],
+    sceneTemplateList: [{ required: true, validator: validateSceneTemplate, trigger: 'blur' }],
     workspaceIdStr: [{ required: true, message: '请选择工位', trigger: 'blur' }],
     cameraType: [{ required: true, message: '请选择协议类型', trigger: 'blur' }],
     videoStandard: [{ required: true, message: '请选择视频编码标准', trigger: 'blur' }],
   };
 
-  const handleUpdateSceneTemplateList = (data) => {
-    cameraNVRData.value.sceneTemplateList = data;
+  const sceneCheckedDataRef = ref([]);
+  const handleUpdateSceneTemplateList = (sceneTemplateData, sceneCheckedData) => {
+    sceneCheckedDataRef.value = sceneCheckedData;
+    cameraNVRData.value.sceneTemplateList = sceneTemplateData;
   };
 
   const handleCancel = () => {

src/views/cameras/overview/components/AddCameraBySRS.vue

@@ -83,8 +83,7 @@
             v-model="CameraSRSData.workspaceIdStr"
             :data="workspaceInfo"
             :render-after-expand="false"
-            :default-expand-all="props.formData ? true : false"
-            check-strictly
+            :default-expand-all="true"
             placeholder="请选择工位"
             style="width: 200px"
             @node-click="handleTreeSelect"
@@ -141,18 +140,27 @@
   type CameraDetailForm = CameraDetailServer & { workspaceIdStr?: string };
   const CameraSRSData = ref<CameraDetailForm>({} as CameraDetailForm);
 
+  const validateSceneTemplate = (_rule, value, callback) => {
+    if (Object.keys(sceneCheckedDataRef.value).length === 0)
+      callback(new Error('请至少选择一个业务场景及对应应用模版'));
+    else if (value && Object.keys(sceneCheckedDataRef.value).length > value.length)
+      callback(new Error('请完成已选业务场景中的应用模版选择'));
+  };
+
   const rules = {
     name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
     code: [{ required: true, message: '请输入设备ID', trigger: 'blur' }],
     cameraIp: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
     rtspUrl: [{ required: true, message: '请输入流媒体地址', trigger: 'blur' }],
-    sceneTemplateList: [{ required: true, message: '请选择至少一个业务场景', trigger: 'blur' }],
+    sceneTemplateList: [{ required: true, validator: validateSceneTemplate, trigger: 'blur' }],
     workspaceIdStr: [{ required: true, message: '请选择工位', trigger: 'blur' }],
     videoStandard: [{ required: true, message: '请选择视频编码标准', trigger: 'blur' }],
   };
 
-  const handleUpdateSceneTemplateList = (data) => {
-    CameraSRSData.value.sceneTemplateList = data;
+  const sceneCheckedDataRef = ref([]);
+  const handleUpdateSceneTemplateList = (sceneTemplateData, sceneCheckedData) => {
+    sceneCheckedDataRef.value = sceneCheckedData;
+    CameraSRSData.value.sceneTemplateList = sceneTemplateData;
   };
 
   const handleCancel = () => {

src/views/cameras/preview/CameraPreview.vue

@@ -1,9 +1,15 @@
 <template>
   <div>
     <div class="cameraMain">
-      <div class="cameraTree">
+      <div class="cameraTree" v-show="cameraTreeVisible">
         <CameraTreeCom />
       </div>
+      <div v-if="cameraTreeVisible" class="arrow-icon" @click="cameraTreeVisible = false"
+        ><el-icon><DArrowLeft /></el-icon
+      ></div>
+      <div v-else class="arrow-icon" @click="cameraTreeVisible = true"
+        ><el-icon><DArrowRight /></el-icon
+      ></div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
           <CameraViewSetting v-if="cameraDetailStore.cameraId" />
@@ -16,6 +22,8 @@
 
 <script lang="ts" setup>
   import { onMounted, ref, watch } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
   import { storeToRefs } from 'pinia';
   import CameraTreeCom from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
@@ -32,14 +40,16 @@
   const fenceStore = useFenceStore();
   const presetListStore = usePresetListStore();
 
+  const cameraTreeVisible = ref(true);
+
   watch(
     () => cameraDetailStore.cameraId,
     async (cameraId) => {
       isShowFence.value = false;
       fenceStore.clear();
       if (cameraId) {
-        // FIXME： 缺 后端v4 api 
-        getCameraDeatilById(cameraId).then(async(res) => {
+        // FIXME： 缺 后端v4 api
+        getCameraDeatilById(cameraId).then(async (res) => {
           cameraDetailStore.setDetail(res);
           // 如果isPtz为null，或者为0，都按照枪击相机
           if (res.isPtz === IsPtz.disabled || !res.isPtz) {
@@ -101,4 +111,21 @@
     margin-top: 100px;
     margin-left: 100px;
   }
+
+  .arrow-icon {
+    width: 16px;
+    height: 48px;
+    margin: 320px 0;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: #bee2ff;
+  }
+
+  .arrow-icon:hover {
+    color: #fff;
+    background-color: #0052d9;
+  }
 </style>

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

@@ -37,7 +37,7 @@
         <el-tree
           v-if="treeCollapse"
           ref="treeRef"
-          node-key="code"
+          node-key="tempCode"
           :data="cameraTreeTemp"
           :props="defaultProps"
           :default-expand-all="isSearch"
@@ -79,6 +79,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+  import { uid } from 'uid';
   import { nextTick, onMounted, onUnmounted, ref } from 'vue';
   import { ElMessage, ElTree } from 'element-plus';
   import { Search, VideoCamera, WarningFilled } from '@element-plus/icons-vue';
@@ -91,6 +92,10 @@
     getCameraTree,
   } from '@/api/camera/camera-preview';
 
+  interface CameraTreeTempType extends CameraTree {
+    tempCode?: string;
+  }
+
   const cameraId = useRouteQuery('cameraId');
   const cameraStatus = useCameraStatus();
   const { noNetworkingNum, openInterval, closeInterval } = cameraStatus;
@@ -103,11 +108,11 @@
   const totalNum = ref(0); // 总相机数
   const noIntegrationNum = ref(0); // 未进入平台相机数
   const cameraTree = ref<CameraTree[]>([]); // 保存从接口获取的所有树节点信息
-  const cameraTreeTemp = ref<CameraTree[]>([]); // 保存修改name之后的树
+  const cameraTreeTemp = ref<CameraTreeTempType[]>([]); // 保存修改name之后的树
   const codeShowList = ref<string[]>([]); // 保存当前所有相机code列表
   const isSearch = ref(true); // 默认展开全部
   const treeCollapse = ref(true);
-  const workSpaceKeys = ref<string[]>([]); // 当前要收起的工位code
+  const workSpaceKeys = ref<string[]>([]); // 当前要收起的工位code(tempCode)
 
   const treeRef = ref<InstanceType<typeof ElTree>>();
   const defaultProps = {
@@ -137,6 +142,7 @@
     const cameraNameCode = data;
     for (let i = 0; i < data.length; i++) {
       const node = cameraNameCode[i];
+      node.tempCode = uid(); // 为相机树节点创建唯一code
       if (node.nodeType === 'camera') {
         node.name = node.name + ` [${node.code}] `;
       }
@@ -163,18 +169,18 @@
     return cameraList;
   }
 
-  // 获取当前树结构下nodeType=workshop的节点code集合
-  function getWorkShopCodeList(data) {
-    let tempCodeList = [] as string[];
+  // 获取当前树结构下nodeType=workshop的节点code集合(tempCode)
+  function getWorkShopIdList(data) {
+    let tempIdList = [] as string[];
     for (let i = 0; i < data.length; i++) {
       const node = data[i];
-      if (node.nodeType === 'workshop') tempCodeList.push(node.code);
+      if (node.nodeType === 'workshop') tempIdList.push(node.tempCode);
       if (node.children && node.children.length > 0) {
-        const childList = getWorkShopCodeList(node.children);
-        tempCodeList.push(...childList);
+        const childList = getWorkShopIdList(node.children);
+        tempIdList.push(...childList);
       }
     }
-    return tempCodeList;
+    return tempIdList;
   }
 
   // 更新/获取未进入平台相机数量
@@ -213,7 +219,7 @@
   // 收起相机，收起到工位
   const handleCollapseTree = () => {
     treeCollapse.value = false;
-    workSpaceKeys.value = getWorkShopCodeList(cameraTreeTemp.value);
+    workSpaceKeys.value = getWorkShopIdList(cameraTreeTemp.value);
     nextTick(() => {
       isSearch.value = false;
       treeCollapse.value = true;