修改工具栏的图标

src/api/camera/camera-overview.ts

@@ -22,8 +22,44 @@ export type CameraQueryParams = {
   pageSize?: number;
 };
 
+/** 根据后端返回的相机详情 */
+export interface CameraDetailServer {
+  /** 相机IP */
+  cameraIp: string;
+  /**	相机协议类型 */
+  cameraType: string;
+  /** 相机端口 */
+  cameraPort: string;
+  /** 相机ID */
+  code: string;
+  /** 工位场景Id */
+  workspaceId: string;
+  /** 工位负责人 */
+  principal?: string;
+  /** 描述 */
+  remark?: string;
+  /** 相机名称 */
+  name: string;
+  /** id */
+  id?: number;
+  /** 用户名 */
+  username?: string;
+  /** 密码 */
+  password?: string;
+  /** 相机MAC地址 */
+  cameraMac: string;
+  /** 车间场景名称 */
+  workshopName: string;
+  /** 工位场景名称 */
+  workspaceName: string;
+  /** 联网状态: 0-启用, 1-禁用 */
+  networkingState: number;
+  /** 状态: 0-启用, 1-禁用 */
+  status: number;
+}
+
 export const getCameraList = (params: CameraQueryParams) => {
-  return http.request<PaginationArrayData<CameraShowItem>>({
+  return http.request<PaginationArrayData<CameraDetailServer>>({
     url: '/cameraConfig/findCamera',
     method: 'get',
     params,

src/api/camera/camera-preview.ts

@@ -3,11 +3,24 @@
 
 import { http } from '@/utils/http/axios';
 
-interface CameraTree {
+/** 相机树的结点类型 */
+export enum CameraTreeNodeType {
+  /** 公司 */
+  company = 'company',
+  /** 车间 */
+  workshop = 'workshop',
+  /** 工位 */
+  workspace = 'workspace',
+  /** 相机 */
+  camera = 'camera',
+}
+
+export interface CameraTree {
   id: number;
   name: string;
   code: string;
   children: CameraTree[];
+  nodeType: CameraTreeNodeType;
 }
 
 /** 获取摄像头所在的树状结构 */

src/views/result/components/CameraTree/CameraTree.vue

@@ -11,27 +11,24 @@
 </template>
 <script lang="ts" setup>
   import { ElTree } from 'element-plus';
-  import { ref, watch } from 'vue';
+  import { ref } from 'vue';
+  import useCameraDetail from '../../store/useCameraDetail';
+  import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
   const props = defineProps<{ data }>();
+
+  const { setDetail } = useCameraDetail();
   const defaultProps = {
     children: 'children',
     label: 'name',
   };
 
-  const handleNodeClick = (...e) => {
-    console.log('e', ...e);
-    
+  const handleNodeClick = (e: CameraTree) => {
+    console.log('e', e);
+    if (e.nodeType === CameraTreeNodeType.camera) {
+      setDetail(e);
+    }
   };
 
   const treeRef = ref(null);
-
-  // watch(
-  //   () => props.data,
-  //   () => {
-  //     console.log('data', props.data);
-  //     treeRef.value?.setCheckedNodes(['C12-200-01']);
-  //   },
-  //   { deep: true, immediate: true },
-  // );
 </script>
 <style scoped></style>

src/views/result/components/CameraViewSetting/CameraViewSetting.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
-    <FenceToolbar
-      @remove="handleRemove"
-      @save="handleSave"
-      @toggle-editable="toggleEditable"
-      :is-edit="isEdit"
-    />
+    <div class="toolbarWrapper">
+      <ViewWindowSetting v-model="viewType" />
+      <FenceToolbar
+        @remove="handleRemove"
+        @save="handleSave"
+        @toggle-editable="toggleEditable"
+        :is-edit="isEdit"
+      />
+    </div>
+
     <div class="cameraViewSettingWrapper">
       <FenceEditor ref="fenceEditorRef" />
       <div class="cameraVideo"><CameraLiveVideo /></div>
@@ -17,9 +21,13 @@
   import FenceToolbar from '../FenceToolbar/FenceToolbar.vue';
   import FenceEditor from '../FenceEditor/FenceEditor.vue';
   import CameraLiveVideo from '../CameraLiveVideo/CameraLiveVideo.vue';
+  import ViewWindowSetting from '../ViewWindowSetting/ViewWindowSetting.vue';
+  import { ViewType } from '../ViewWindowSetting/types';
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
+  const viewType = ref<ViewType>(ViewType.window1);
+
   const handleRemove = () => {
     console.log('handleRemove');
     fenceEditorRef.value?.remove();
@@ -56,4 +64,10 @@
     width: 100%;
     height: 100%;
   }
+
+  .toolbarWrapper {
+    display: flex;
+    align-items: center;
+    margin-left: 25px;
+  }
 </style>

src/views/result/components/FenceToolbar/FenceToolbar.vue

@@ -71,13 +71,11 @@
 
 <style scoped>
   .toolbar {
-    background-color: #b0b3b3;
     display: flex;
 
     align-items: center;
     z-index: 10;
     padding: 5px 30px;
     border-radius: 50px;
-    left: 100px;
   }
 </style>

src/views/result/components/ToolbarIcon/ToolbarIcon.vue

@@ -12,7 +12,7 @@
     cursor: pointer;
     margin-right: 20px;
     &.active {
-      background: #1890ff;
+      background: #f0f2f5;
     }
   }
 </style>

src/views/result/components/ViewWindowSetting/ViewWindowSetting.vue

@@ -0,0 +1,25 @@
+<template>
+  <div style="display: flex">
+    <ToolbarIcon
+      :src="window1"
+      :active="props.modelValue === ViewType.window1"
+      @click="emits('update:modelValue', ViewType.window1)"
+    />
+    <ToolbarIcon
+      :src="window4"
+      :active="props.modelValue === ViewType.window4"
+      @click="emits('update:modelValue', ViewType.window4)"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import ToolbarIcon from '../ToolbarIcon/ToolbarIcon.vue';
+  import window1 from '@/assets/images/camera/window1.png';
+  import window4 from '@/assets/images/camera/window4.png';
+  import { ViewType } from './types';
+
+  const props = defineProps<{ modelValue: ViewType }>();
+
+  const emits = defineEmits<{ (e: 'update:modelValue', val: ViewType): unknown }>();
+</script>
+<style scoped></style>

src/views/result/components/ViewWindowSetting/types.ts

@@ -0,0 +1,4 @@
+export enum ViewType {
+  window1,
+  window4,
+}

src/views/result/store/useCameraDetail.ts

@@ -1,35 +1,16 @@
 /** 相机详情的store */
 
+import { CameraDetailServer } from '@/api/camera/camera-overview';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
-interface CameraDetail {
-  id: number;
-  workspaceId: number;
-  name: string;
-  code: string;
-
-  cameraIp: string;
-  cameraPort: number;
-  cameraMac: string;
-  cameraType: string;
-  networkingState: number;
-  integrationState: 0;
-  resolution: 0;
-  nvrPeriod: 0;
-  nvrStartAt: null;
-  nvrEndAt: null;
-  remark: string;
-  status: number;
-  createdAt: string;
-  updatedAt: string;
-  username: string;
-  password: string;
-}
-
 const useCameraDetailStore = defineStore('cameraDetail', () => {
-  const detail = ref<CameraDetail | null>(null);
-  return { detail };
+  const detail = ref<CameraDetailServer | null>(null);
+
+  const setDetail = (newDetail: CameraDetailServer) => {
+    detail.value = newDetail;
+  };
+  return { detail, setDetail };
 });
 
 export default useCameraDetailStore;

src/views/result/success.vue

@@ -21,6 +21,7 @@
 <script lang="ts" setup>
   import CameraTree from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
+  import AlgorithmsSetting from './components/AlgorithmsSetting/AlgorithmsSetting.vue';
   import useCameraTree from './hooks/useCameraTree';
   const { data, loading } = useCameraTree();
 </script>
@@ -49,6 +50,7 @@
   }
   .cameraMain {
     display: flex;
+    background: #fff;
   }
   .cameraTree {
     width: 250px;