Merge branch 'all-v4-lhf' into 'all-v4'

fix: 参数配置 修复样式问题

See merge request skyeye/skyeye_frontend/skyeye-admin!398

src/components/BackIcon/BackIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="back" @click="router.back()"> <img src="@/assets/rollback.png" /><span>返回</span> </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+</script>
+
+<style scoped>
+  .back {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    cursor: pointer;
+    margin-right: 20px;
+    & img {
+      width: 16px;
+      margin-right: 5px;
+    }
+  }
+</style>

src/components/SvgIcon/SvgIcon.vue

@@ -1,11 +1,5 @@
 <template>
-  <svg
-    class="svg-icon"
-    aria-hidden="true"
-    :style="{ color: color }"
-    :width="width"
-    :height="height"
-  >
+  <svg class="svg-icon" aria-hidden="true" :style="{ color: color, width: width, height: height }">
     <use :xlink:href="svgName" />
   </svg>
 </template>

src/components/TitleWithLine/TitleWithLine.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="title"><slot></slot></div>
+</template>
+
+<style scoped>
+  .title {
+    font-weight: bold;
+    font-size: 16px;
+    position: relative;
+    margin-left: 10px;
+    &::before {
+      content: '';
+      width: 4px;
+      position: absolute;
+      left: -8px;
+      height: 20px;
+      top: 2px;
+      background-color: #1890ff;
+    }
+  }
+</style>

src/modules/algo-params-setting-base/components/AlgoSwitchCard/AlgoSettingIcon.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
-    <svg-icon icon-name="algo-setting" color="#1890ff" />
+    <svg-icon icon-name="algo-setting" color="#1890ff" width="16px" height="16px" />
   </div>
 </template>
-<script lang="ts" setup>
-  import { ElTooltip } from 'element-plus';
-</script>
+<script lang="ts" setup></script>
 <style scoped></style>

src/modules/algo-params-setting-base/components/AlgoSwitchCard/ElectronicFenceIcon.vue

@@ -4,11 +4,10 @@
     <!-- <el-tooltip :content="props.active ? '关闭电子围栏' : '开启电子围栏'">
       <svg-icon icon-name="electronic-fence" :color="color" />
     </el-tooltip> -->
-    <svg-icon icon-name="electronic-fence" :color="color" />
+    <svg-icon icon-name="electronic-fence" :color="color" width="18px" height="18px" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { ElTooltip } from 'element-plus';
   import { computed } from 'vue';
   const props = defineProps<{
     active: boolean;

src/modules/algo-params-setting-base/components/CameraViewSetting/CameraViewSetting.vue

@@ -205,7 +205,7 @@
       cameraId: cameraDetailStore.cameraId,
     }).then((res) => {
       getCameraAlgoList(cameraDetailStore.cameraId);
-      ElMessage.success('添加成功，请完成算法参数配置后生效');
+      ElMessage.success('添加成功，开启后算法生效');
     });
   };
 </script>

src/modules/algo-params-setting-base/components/FenceToolbar/EditFenceDialog.vue

@@ -1,5 +1,8 @@
 <template>
-  <ElDialog title="编辑电子围栏" v-model="visible" append-to=".presetWrapper" width="95%" top="50px">
+  <ElDialog v-model="visible" append-to=".presetWrapper" width="95%" top="50px">
+    <template #header>
+      <div class="my-header"> 编辑电子围栏 </div>
+    </template>
     <!-- 设置 label-position 为 top -->
     <ElForm :model="form" label-width="100%" label-position="top" ref="formRef" :rules="rules">
       <!-- 添加名称输入项 -->

src/modules/algo-params-setting-base/components/FenceToolbar/FenceNameItem.vue

@@ -1,12 +1,17 @@
 <!-- 电子围栏名称的一项 -->
 <template>
   <div :class="props.active ? 'active' : ''" class="fenceItem">
-    <div>
+    <div class="fenceName">
       {{ props.detail.name }}
     </div>
 
     <ElTag type="success" size="small" class="fenceLabel" v-if="props.detail.label">{{ props.detail.label }}</ElTag>
-    <el-popover placement="bottom" trigger="click" popper-style="min-width: 80px;width: 80px">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      popper-style="min-width: 80px;width: 80px"
+      v-model:visible="menuVisible"
+    >
       <template #reference>
         <img :src="moreDotIcon" alt="菜单" class="moreDot" />
       </template>
@@ -21,6 +26,7 @@
 <script lang="ts" setup>
   import { ElTag } from 'element-plus';
   import moreDotIcon from '@/assets/icons/more-dot-icon.png';
+  import { ref } from 'vue';
   interface FenceDetail {
     name: string;
     id: number;
@@ -29,21 +35,23 @@
   const props = defineProps<{ detail: FenceDetail; active: boolean }>();
 
   const emits = defineEmits<{ (e: 'edit', id: number): unknown; (e: 'delete', id: number): unknown }>();
+  const menuVisible = ref(false);
+
+  const hideMenu = () => {
+    menuVisible.value = false;
+  };
 
   const handleDelete = () => {
+    hideMenu();
     emits('delete', props.detail.id);
   };
   const handleEdit = () => {
+    hideMenu();
     emits('edit', props.detail.id);
   };
 </script>
 
 <style>
-  .fenceItem.active {
-    background: #409eff;
-    color: #fff;
-    border-color: transparent;
-  }
   .moreDot {
     width: 20px;
     height: 20px;
@@ -59,16 +67,34 @@
     border: 1px solid #ccc;
     margin: 8px 0;
     cursor: pointer;
+    &:hover {
+      background: #ededed;
+    }
+    &.active {
+      background: #409eff !important;
+      color: #fff;
+      border-color: transparent;
+    }
   }
   .popoverMenu {
     text-align: center;
-    margin: 10px 0px;
+    /* margin: 10px 0px; */
+    padding: 5px 0px;
+    margin: 0 -12px;
     cursor: pointer;
+    &:hover {
+      background: #ededed;
+    }
   }
   .fenceLabel {
-    position: absolute;
-    bottom: 2px;
-    right: 20px;
+    /* position: absolute; */
+    /* bottom: 2px;
+    right: 20px; */
     height: 14px;
+    margin-left: 10px;
+  }
+  .fenceName {
+    font-size: 14px;
+    display: inline-block;
   }
 </style>

src/modules/algo-params-setting-base/components/FenceToolbar/FenceToolbar.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="fenceWrapper">
     <div>
-      <div class="fenceTitle">电子围栏</div>
+      <TitleWithLine>电子围栏</TitleWithLine>
       <ElSwitch
         size="small"
         class="fenceSwitchBtn"
         v-model="selectedAlgoDetail.electronicFenceBool"
         @update:modelValue="handleUpdateFenceStatus"
+        v-if="fenceStore.allFences.length > 0"
       />
     </div>
     <div class="algoName">
@@ -18,7 +19,6 @@
       <div style="display: flex">
         <ElCheckbox label="检测围栏外部" v-model="isFenceRegionOut" @update:modelValue="handleUpdateRegion" />
         <ElCheckbox label="前台画面显示" v-model="isDisplayFenceInVideo" @update:modelValue="handleUpdateDisplay" />
-        <a :href="previewUrl" target="_blank" style="margin-left: 20px" v-if="previewUrl && false">平台相机预览</a>
       </div>
       <div class="fenceListWrapper">
         <FenceNameItem
@@ -64,6 +64,8 @@
   import { useGlobSetting } from '@/hooks/setting';
   import useParamsSettingFn from '../../hooks/useParamsSettingFn';
   import Description from './Description.vue';
+  import TitleWithLine from '@/components/TitleWithLine/TitleWithLine.vue';
+
   const cameraAlgoStore = useCameraAlgoStore();
 
   const fenceStore = useFenceStore();

src/modules/algo-params-setting-base/components/PageTitle/PageTitle.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="pageTitle">
-    <router-link to="/algorithm/config">
-      <el-icon><ArrowLeftBold /></el-icon>
-    </router-link>
+    <BackIcon />
     <span>算法配置</span>
     <span class="cameraName">相机: {{ cameraDetailStore.detail?.name }}</span>
     <a :href="previewUrl" target="_blank" v-if="previewUrl">
@@ -11,12 +9,11 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ArrowLeftBold } from '@element-plus/icons-vue';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import { useGlobSetting } from '@/hooks/setting';
-
   import { computed } from 'vue';
   import { storeToRefs } from 'pinia';
+  import BackIcon from '@/components/BackIcon/BackIcon.vue';
 
   const cameraDetailStore = useCameraDetailStore();
   const { detail } = storeToRefs(cameraDetailStore);
@@ -34,7 +31,7 @@
   }
   .pageTitle {
     padding: 10px;
-    font-weight: bold;
+    // font-weight: bold;
     font-size: 14px;
     display: flex;
     align-items: center;

src/modules/algo/algo-params-edit/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="algoCardWrapper" class="algoCardWrapper">
-    <div class="algoCardTitle">
-      <div>算法参数</div>
-    </div>
+    <TitleWithLine
+      >算法参数<span class="subTitle">{{ selectedAlgoDetail?.algoInfo?.name }}</span></TitleWithLine
+    >
     <div class="algoCardMain">
       <div style="display: flex">
         <div style="margin-right: 30px; display: flex; margin-top: 16px">
@@ -153,6 +153,7 @@
   import { storeToRefs } from 'pinia';
   import useAlgoParamsSettingStore from './use-algo-params-edit-store';
   import { AlgoParamMetaItem, CameraAlgoItemInCard } from './types';
+  import TitleWithLine from '@/components/TitleWithLine/TitleWithLine.vue';
 
   import { createDefaultTime, getTimeCompletion } from './utils';
 
@@ -384,8 +385,9 @@
 </script>
 <style scoped>
   .algoCardWrapper {
-    border: 1px solid #ccc;
-    border-radius: 4px;
+    margin-top: 15px;
+    /* border: 1px solid #ccc; */
+    /* border-radius: 4px; */
     /* padding: 10px; */
     width: 990px;
   }
@@ -420,7 +422,7 @@
   }
 
   .algoCardTitle {
-    background: #f0f2f5;
+    /* background: #f0f2f5; */
     display: flex;
     justify-content: space-between;
     padding: 4px 20px;
@@ -429,6 +431,7 @@
 
   .algoCardMain {
     padding: 10px 15px;
+    padding-top: 0;
   }
 
   .timeAdd {
@@ -473,4 +476,11 @@
     top: 0 !important;
     transform: none !important;
   }
+
+  .subTitle {
+    font-weight: normal;
+    font-size: 12px;
+    color: #333;
+    margin-left: 10px;
+  }
 </style>

src/modules/algo/algo-params-edit/utils.ts

@@ -243,7 +243,6 @@ export const cameraAlgoToJSON = (detail: CameraAlgoItem) => {
   return {
     ...detail,
     algoId: detail.algoId, // 兼容算法默认参数
-    algoInfo: detail, // 兼容算法默认参数
     inferCode: getInferCode(detail?.extra),
     enableCardBool: enableCard,
     electronicFenceBool,