sinit

.env.development

@@ -5,7 +5,7 @@ VITE_PORT = 8092
 VITE_PUBLIC_PATH = /
 
 # 是否开启mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # 网站前缀
 VITE_BASE_URL = /

src/api/camera/camera-preview.ts

@@ -30,3 +30,36 @@ export const getCameraTree = () => {
     method: 'get',
   });
 };
+
+interface AlgoStatus {
+  enabled: 1;
+  disabled: 0;
+}
+
+interface AlgoItem {
+  id: number;
+  name: string;
+  code: string;
+  showName: string;
+  remark: string;
+  url: string;
+  pushStatement: string;
+  pushLinkPrompt: string;
+  status: AlgoStatus;
+  createdAt: string;
+  updatedAt: string;
+}
+
+/** 查询某个camera下的算法 */
+export const getCameraAlgo = (cameraId: number) => {
+  return http.request<AlgoItem[]>({
+    url: '/cameraPreview/getAlgo',
+    method: 'get',
+    params: { cameraId },
+  });
+};
+
+/** 查询所有的算法 */
+export const getAllAlgos = ()=> {
+  return 
+}

src/views/result/components/AlgorithmsSetting/AlgorithmsSetting.vue

@@ -1,3 +1,15 @@
-<template> 算法配置 </template>
-<script lang="ts" setup></script>
+<template>
+  算法配置
+
+  <div>
+    <div>算法配置</div>
+    <div>
+      <div>算法配置列表</div>
+      <div>算法配置卡片</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  const bindAlgoList = defineProps<{ bindAlgoList: any }>();
+</script>
 <style scoped></style>

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

@@ -1,13 +1,14 @@
 <template>
   <div>
     <div class="toolbarWrapper">
-      <ViewWindowSetting v-model="viewType" />
+      <ViewWindowSetting v-model="viewType" @update:model-value="handleUpdateViewType" />
       <FenceToolbar
         @remove="handleRemove"
         @save="handleSave"
         @toggle-editable="toggleEditable"
         :is-edit="isEdit"
       />
+      <PresetSelect v-model="currentPreset" />
     </div>
 
     <div class="cameraViewSettingWrapper">
@@ -22,6 +23,7 @@
   import FenceEditor from '../FenceEditor/FenceEditor.vue';
   import CameraLiveVideo from '../CameraLiveVideo/CameraLiveVideo.vue';
   import ViewWindowSetting from '../ViewWindowSetting/ViewWindowSetting.vue';
+  import PresetSelect from '../PresetSelect/PresetSelect.vue';
   import { ViewType } from '../ViewWindowSetting/types';
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
@@ -35,6 +37,7 @@
 
   const isEdit = ref(true);
 
+  const currentPreset = ref('');
   /** 退出编辑模式 */
   const toggleEditable = (val: boolean) => {
     isEdit.value = val;
@@ -49,6 +52,14 @@
     const json = fenceEditorRef.value?.toObject();
     console.log('save json', json);
   };
+
+  const handleUpdateViewType = (t: ViewType) => {
+    console.log('viewType', t);
+  };
+
+  const handleUpdatePreset = (val: string) => {
+    console.log('val', val);
+  };
 </script>
 <style scoped>
   .cameraViewSettingWrapper {

src/views/result/components/PresetSelect/PresetSelect.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="presetSetting">
+    <div style="margin-right: 10px">预置位</div>
+    <div
+      ><ElSelect
+        :model-value="props.modelValue"
+        size="small"
+        @change="emits('update:modelValue', $event)"
+      >
+        <ElOption
+          v-for="item in presetOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        /> </ElSelect
+    ></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElSelect, ElOption } from 'element-plus';
+  const presetOptions = ref([
+    { label: '预置位1', value: 'p1' },
+    { label: '预置位2', value: 'p2' },
+  ]);
+
+  const props = defineProps<{ modelValue: string }>();
+  const emits = defineEmits<{ (e: 'update:modelValue', data: string): unknown }>();
+</script>
+<style scoped>
+  .presetSetting {
+    display: flex;
+    align-items: center;
+  }
+</style>

src/views/result/success.vue

@@ -28,7 +28,7 @@
 <style lang="scss" scoped>
   .cameraView {
     width: 800px;
-    height: 400px;
+    // height: 400px;
     border: 1px solid #ccc;
   }