feat: 增加顶部的导航头

src/modules/algo-params-setting-base/AlgoParamsSettingBase.vue

@@ -1,6 +1,7 @@
 <!-- 算法参数配置页面 -->
 <template>
-  <div>
+  <div class="cameraPageWrapper">
+    <PageTitle />
     <div class="cameraMain">
       <div class="cameraTree" v-show="cameraTreeVisible">
         <slot name="cameraTree"> 这里需要插入相机树的组件 </slot>
@@ -35,6 +36,7 @@
   import { getCameraDeatilById } from '@/api/camera/camera-preview';
   import { PROVIDE_CONSTANTS } from './constants';
   import { AlgoDetail } from '@/api/algo/algo';
+  import PageTitle from './components/PageTitle/PageTitle.vue';
 
   const cameraDetailStore = useCameraDetailStore();
   const cameraAlgoStore = useCameraAlgoStore();
@@ -104,9 +106,12 @@
     border-left: 1px solid #ccc;
     padding-left: 20px;
   }
+  .cameraPageWrapper {
+    background-color: #fff;
+  }
+
   .cameraMain {
     display: flex;
-    background: #fff;
     overflow-x: auto;
     // height: calc(100vh - 90px);
   }

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="pageTitle">
+    <router-link to="/algorithm/config">
+      <el-icon><ArrowLeftBold /></el-icon>
+    </router-link>
+    <span>算法配置</span>
+    <span class="cameraName">相机: {{ cameraDetailStore.detail?.name }}</span>
+    <a :href="previewUrl" target="_blank" v-if="previewUrl">
+      <svg-icon icon-name="eye-border" style="margin-left: 20px; width: 24px; height: 24px" />
+    </a>
+  </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';
+
+  const cameraDetailStore = useCameraDetailStore();
+  const { detail } = storeToRefs(cameraDetailStore);
+  const { appPCUrl } = useGlobSetting();
+
+  const previewUrl = computed(() => {
+    const firstSceneId = detail.value?.sceneTemplateList[0]?.sceneId;
+    if (!detail.value?.workshopId || !detail.value?.code || !firstSceneId) return '';
+    return appPCUrl + `#/shop?id=${detail.value?.workshopId}&cameraCode=${detail.value?.code!}&sceneId=${firstSceneId}`;
+  });
+</script>
+<style lang="scss" scoped>
+  .cameraName {
+    margin-left: 30px;
+  }
+  .pageTitle {
+    padding: 10px;
+    font-weight: bold;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+</style>

src/views/cameras/algo-params-setting/AlgoParamsSetting.vue

@@ -20,6 +20,7 @@
   watch(
     () => route.query.cameraId,
     (nextCameraId) => {
+      if (!nextCameraId) return;
       queryAlgoInfoAllByCameraId(nextCameraId).then((res) => {
         cameraAllAlgoList.value = res;
       });