Merge branch 'bugFix' into 'master'

新增渲染开关

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

src/api/camera/camera-overview.ts

@@ -72,6 +72,8 @@ export interface CameraDetailServer {
   status: number;
   /** 相机流 */
   pushstreamIp: string;
+  /** 渲染相机流 */
+  pushstreamRenderUrl: string;
   /** 工位code */
   workspaceCode: string;
 
@@ -85,6 +87,8 @@ export interface CameraDetailServer {
   nvrEndAt: string;
   /** 分辨率 */
   resolution: number;
+  //渲染
+  render: number | string;
 }
 
 export const getCameraList = (params: CameraQueryParams) => {

src/api/camera/camera-preview.ts

@@ -50,15 +50,15 @@ export enum FENCE_ENBALED_STATUS {
 interface AlgoItem {
   id: number;
   name: string;
-  code: string;
-  showName: string;
-  remark: string;
-  url: string;
-  pushStatement: string;
-  pushLinkPrompt: string;
-  status: ALGO_ENABLED_STATUS;
-  createdAt: string;
-  updatedAt: string;
+  code?: string;
+  showName?: string;
+  remark?: string;
+  url?: string;
+  pushStatement?: string;
+  pushLinkPrompt?: string;
+  status?: ALGO_ENABLED_STATUS;
+  createdAt?: string;
+  updatedAt?: string;
 }
 /** 查询所有的算法 */
 export const getAllAlgosApi = () => {
@@ -294,3 +294,17 @@ export const saveCameraParamsApi = (data: SaveCameraParams) => {
     data,
   });
 };
+
+interface RenderPara {
+  render: number | string;
+  cameraId: number;
+}
+
+//相机是否选择算法渲染
+export const renderCamera = (data: RenderPara) => {
+  return http.request({
+    url: `/cameraPreview/saveRender`,
+    method: 'put',
+    data,
+  });
+};

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

@@ -152,7 +152,7 @@
     principal: [{ required: false }],
     code: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
     remark: [{ required: false }],
-    videoServiceType: [{ required: true, message: '请输入服务类型', trigger: 'blur' }],
+    videoServiceType: [{ required: false }],
     videoStandard: [{ required: true, message: '请输入视频编码标准', trigger: 'blur' }],
   };
 

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

@@ -121,46 +121,6 @@
             />
           </el-select>
         </el-form-item>
-        <!-- <el-form-item
-          v-for="item in cameraNVRAddForm"
-          :key="item.prop"
-          :label="item.label"
-          :prop="item.prop"
-        >
-          <el-input
-            v-if="item.type === 'input'"
-            v-model="cameraNVRData[item.prop]"
-            :placeholder="item.placeholder"
-            style="width: 200px"
-            :type="item.prop === 'password' ? 'password' : ''"
-            :show-password="item.prop === 'password'"
-            :disabled="item.prop === 'principal'"
-          />
-          <el-select
-            v-if="item.type === 'select'"
-            v-model="cameraNVRData[item.prop]"
-            :placeholder="item.placeholder"
-            style="width: 200px"
-          >
-            <el-option
-              v-for="protocal in item.option"
-              :key="protocal.value"
-              :label="protocal.label"
-              :value="protocal.value"
-            />
-          </el-select>
-          <el-tree-select
-            v-if="item.type === 'tree-select'"
-            v-model="cameraNVRData[item.prop]"
-            :data="scenesTree"
-            :render-after-expand="false"
-            :default-expand-all="true"
-            check-strictly
-            :placeholder="item.placeholder"
-            style="width: 200px"
-            @change="handleTreeSelect"
-          />
-        </el-form-item> -->
       </el-form>
     </div>
     <span class="pop-footer">
@@ -171,14 +131,9 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onBeforeMount, ref } from 'vue';
+  import { onBeforeMount, ref } from 'vue';
   import { CameraNVRItem } from '../type';
-  import {
-    cameraNVRAddForm,
-    protocalTypeSelect,
-    serviceTypeSelect,
-    standardTypeSelect,
-  } from '../constant';
+  import { protocalTypeSelect, serviceTypeSelect, standardTypeSelect } from '../constant';
   import useSceneInfos from '@/hooks/useSceneInfos';
   import { cloneDeep } from 'lodash-es';
 
@@ -205,7 +160,7 @@
     code: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
     remark: [{ required: false }],
     nvrChannel: [{ required: true, message: '请输入NVR平台通道号', trigger: 'blur' }],
-    videoServiceType: [{ required: true, message: '请输入服务类型', trigger: 'blur' }],
+    videoServiceType: [{ required: false }],
     videoStandard: [{ required: true, message: '请输入视频编码标准', trigger: 'blur' }],
   };
 

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

@@ -110,6 +110,8 @@
     workspaceCode: [{ required: true, message: '请输入场景名称', trigger: 'blur' }],
     code: [{ required: true, message: '请输入设备ID号', trigger: 'blur' }],
     rtspurl: [{ required: true, message: '请输入流媒体地址', trigger: 'blur' }],
+    videoServiceType: [{ required: false }],
+    videoStandard: [{ required: true, message: '请输入视频编码标准', trigger: 'blur' }],
   };
 
   const handleCancel = () => {

src/views/cameras/preview/CameraPreview.vue

@@ -12,7 +12,7 @@
       </div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
-          <CameraViewSetting v-if="cameraDetailStore.cameraId" />
+          <CameraViewSetting v-if="cameraDetailStore.cameraId" @change-tree-render="changeRender" />
           <div class="cameraPlaceholder" v-else>请选择左侧相机</div>
         </div>
       </div>
@@ -55,7 +55,6 @@
       if (node.integrationState === 1) {
         integrationCount++;
       }
-
       if (node.children && node.children.length > 0) {
         const childIntegrationCount = updateNetworkingState(node.children, targetData);
         integrationCount += childIntegrationCount;
@@ -65,6 +64,18 @@
     return integrationCount;
   }
 
+  function updateRender(data, targetData, targetVal) {
+    for (let i = 0; i < data.length; i++) {
+      const node = data[i];
+      if (node.id === targetData) {
+        node.render = targetVal;
+      }
+      if (node.children && node.children.length > 0) {
+        updateRender(node.children, targetData, targetVal);
+      }
+    }
+  }
+
   function getCameraList(data) {
     let cameraList = [] as string[];
     for (let i = 0; i < data.length; i++) {
@@ -80,6 +91,10 @@
     return cameraList;
   }
 
+  const changeRender = (render: string | number) => {
+    updateRender(cameraTree.value, cameraDetailStore.cameraId, render);
+  };
+
   watch(
     () => cameraDetailStore.cameraId,
     async (cameraId) => {

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

@@ -1,6 +1,10 @@
 <template>
   <LiveVideo
-    :url="cameraDetailStore.detail?.pushstreamIp"
+    :url="
+      cameraDetailStore.detail?.render
+        ? cameraDetailStore.detail?.pushstreamRenderUrl
+        : cameraDetailStore.detail?.pushstreamIp
+    "
     v-if="cameraDetailStore.detail?.pushstreamIp"
   />
   <div v-if="!cameraDetailStore.detail?.pushstreamIp" class="noPushStreamIpTip"
@@ -13,7 +17,6 @@
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   const cameraDetailStore = useCameraDetailStore();
 </script>
-
 <style>
   .noPushStreamIpTip {
     font-size: 20px;

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

@@ -7,7 +7,7 @@
           <FullscreenExitOutlined role="full" @click="enterFullscreen" />
         </el-icon>
       </el-tooltip>
-      <RenderSwitch />
+      <RenderSwitch @change-camera-render="changeRender" />
       <FenceToolbar
         :style="{ visibility: drawable ? 'visible' : 'hidden' }"
         @remove="handleRemove"
@@ -81,6 +81,10 @@
   import { canvasHeight, canvasWidth, domHeight, domWidth } from './constants';
   import useFullscreen from 'vue-hooks-plus/lib/useFullscreen';
 
+  const emits = defineEmits<{
+    (e: 'changeTreeRender', render: number | string): unknown;
+  }>();
+
   const [, { enterFullscreen }] = useFullscreen(() => document.querySelector('.cameraVideo'));
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
@@ -155,6 +159,10 @@
   //   console.log('viewType', t);
   // };
 
+  const changeRender = (render: string | number) => {
+    emits('changeTreeRender', render);
+  };
+
   const drawable = computed(() => {
     if (!presetStore.currentPresetToken) return false;
     if (!cameraAlgoStore.selectedAlgoId) return false;

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

@@ -1,5 +1,55 @@
 <template>
-  <div style="margin-left: 8px"><div>111</div></div>
+  <div style="margin-left: 8px; display: flex" v-if="!!cameraDetailStore.detail">
+    <div style="margin-top: 5px; margin-right: 4px">渲染开关</div>
+    <ElSelect v-model="selectedIds" @change="changeRender">
+      <ElOption value="" label="无渲染">无渲染</ElOption>
+      <ElOption v-for="item in allAlgoList" :key="item.id" :value="item.id" :label="item.name">
+        {{ item.name }}
+        <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
+      </ElOption>
+    </ElSelect></div
+  >
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { ElSelect, ElOption } from 'element-plus';
+  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import { storeToRefs } from 'pinia';
+  import { ref } from 'vue';
+  import { renderCamera } from '@/api/camera/camera-preview';
+  import { watch } from 'vue';
+
+  const cameraDetailStore = useCameraDetailStore();
+  const cameraAlgoStore = useCameraAlgoStore();
+
+  const emits = defineEmits<{
+    (e: 'changeCameraRender', render: number | string): unknown;
+  }>();
+
+  const { isAlgoBind } = cameraAlgoStore;
+  const { allAlgoList } = storeToRefs(cameraAlgoStore);
+
+  const selectedIds = ref<number | string>();
+
+  const changeRender = (val) => {
+    const renderData = {
+      render: val,
+      cameraId: cameraDetailStore.cameraId,
+    };
+    renderCamera(renderData).then(() => {
+      emits('changeCameraRender', val);
+    });
+  };
+
+  const changeRenderWatch = () => {
+    if (cameraDetailStore.detail?.render) {
+      selectedIds.value = Number(cameraDetailStore.detail?.render);
+    } else {
+      selectedIds.value = '';
+    }
+  };
+
+  watch(() => cameraDetailStore.cameraId, changeRenderWatch, { immediate: true });
+  watch(() => cameraDetailStore.detail?.render, changeRenderWatch, { immediate: true });
+</script>
 <style scoped></style>