新增渲染开关

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/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,56 @@
 <template>
-  <div style="margin-left: 8px"><div>111</div></div>
+  <div style="margin-left: 8px; display: flex">
+    <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';
+  // import { watch } from 'fs';
+  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);
+    });
+  };
+
+  watch(
+    () => cameraDetailStore.cameraId,
+    () => {
+      if (cameraDetailStore.detail?.render) {
+        selectedIds.value = Number(cameraDetailStore.detail?.render);
+      } else {
+        selectedIds.value = '';
+      }
+    },
+    { immediate: true },
+  );
+</script>
 <style scoped></style>