|
|
@@ -0,0 +1,81 @@
|
|
|
+<!-- 算法参数配置页面 -->
|
|
|
+<template>
|
|
|
+ <div class="camera-group-page">
|
|
|
+ <!-- <div class="camera-group-header">
|
|
|
+ <div class="camera-group-rollback" @click="router.back()">
|
|
|
+ <img :src="rollback" /><span>配置算法</span>
|
|
|
+ </div>
|
|
|
+ <span class="camera-name">相机:{{ currentCameraName }}</span>
|
|
|
+ </div> -->
|
|
|
+ <AlgoParamsSettingBase :cameraAllAlgoList="cameraAllAlgoList" :isCameraGroup="true">
|
|
|
+ <template #cameraTree>
|
|
|
+ <CameraTreeList ref="CameraTreeRef"/>
|
|
|
+ </template>
|
|
|
+ </AlgoParamsSettingBase>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { watch, ref, computed } from 'vue';
|
|
|
+ import { useRoute, useRouter } from 'vue-router';
|
|
|
+ import AlgoParamsSettingBase from '@/modules/algo-params-setting-base/AlgoParamsSettingBase.vue';
|
|
|
+ import CameraTreeList from './components/CameraTreeList.vue';
|
|
|
+ import { AlgoDetail } from '@/api/algo/algo';
|
|
|
+ import { queryGroupAlgoInfoByCameraId } from '@/api/camera/camera-preview-group'
|
|
|
+ import rollback from '@/assets/rollback.png';
|
|
|
+
|
|
|
+ const cameraAllAlgoList = ref<AlgoDetail[]>([]);
|
|
|
+ const route = useRoute();
|
|
|
+ const router = useRouter();
|
|
|
+ const CameraTreeRef = ref<InstanceType<typeof CameraTreeList>>();
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => route.query.cameraId,
|
|
|
+ (nextCameraId) => {
|
|
|
+ if (nextCameraId) {
|
|
|
+ queryGroupAlgoInfoByCameraId(Number(nextCameraId)).then((res) => {
|
|
|
+ if (res.length > 0 && res[0].algoInfo) {
|
|
|
+ cameraAllAlgoList.value = [res[0].algoInfo];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true },
|
|
|
+ );
|
|
|
+
|
|
|
+ const currentCameraName = computed(() => CameraTreeRef?.value?.getCurrentCameraName());
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .camera-group-page {
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ .camera-group-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16px 0 15px 20px;
|
|
|
+ border-bottom: 1px solid #e9e9e9;
|
|
|
+
|
|
|
+ .camera-group-rollback {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .camera-name {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|