feat:溯源查询与详情

sub-government-affairs-service/.env.development

@@ -1,6 +1,7 @@
 # 开发环境
 VITE_PORT = 9528
 VITE_MODE = 'DEV'
+VITE_APP_MIAN = 'daimp-front-main'
 VITE_APP_NAME = 'sub-government-affairs-service'
 VITE_APP_BASE_API = '/apis' 
 VITE_APP_BASE_URL = 'http://192.168.18.99:8080'

sub-government-affairs-service/src/config/index.js

@@ -1,7 +1,9 @@
-const { VITE_APP_NAME } = import.meta.env;
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
+const { VITE_APP_MIAN, VITE_APP_NAME } = import.meta.env;
 
-export const GenKey = (key, prefix = `${VITE_APP_NAME}_`) => {
+export const GenKey = (key, prefix = VITE_APP_NAME) => {
-  return prefix ? prefix + key : key;
+  prefix = qiankunWindow.__POWERED_BY_QIANKUN__ ? VITE_APP_MIAN : VITE_APP_NAME;
+  return prefix ? `${prefix}_` + key : key;
 };
 
 export const CONSTANTS = {
@@ -29,3 +31,12 @@ export const CRUD_OPTIONS = {
   actions: [],
   dialogDrag: true,
 };
+
+export const CRUD_VIEW_OPTIONS = {
+  ...CRUD_OPTIONS,
+  index: true,
+  addBtn: false,
+  refreshBtn: false,
+  selection: false,
+  menu: false,
+};

sub-government-affairs-service/src/layouts/component/Avatar/index.vue

@@ -2,13 +2,13 @@
  * @Description: 
  * @Author: zenghua.wang
  * @Date: 2023-06-20 14:29:45
- * @LastEditors: zenghua.wang “1048523306@qq.com”
+ * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-01-17 10:33:54
+ * @LastEditTime: 2025-02-13 15:59:56
 -->
 <template>
   <el-dropdown class="layout-avatar">
     <span class="el-dropdown-link">
-      <el-avatar :size="30" class="avatar" :src="userInfo.avatar || '/images/avatar.gif'" />
+      <el-avatar :size="30" class="avatar" :src="userInfo.avatar || getAssetsFile('images/avatar.gif')" />
       <span class="layout-avatar-name">{{ userInfo.name || '游客' }}</span>
       <el-icon class="el-icon--right">
         <arrow-down />
@@ -16,33 +16,23 @@
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <!-- <el-dropdown-item :command="0"> 当前角色：管理员 </el-dropdown-item> -->
+        <el-dropdown-item :command="0"> 当前角色：管理员 </el-dropdown-item>
-        <el-dropdown-item :command="3" divided @click="showUserInfo">
-          <el-icon><Edit /></el-icon>个人信息
-        </el-dropdown-item>
-        <el-dropdown-item :command="4" divided @click="showPassword">
-          <el-icon><Edit /></el-icon>修改密码
-        </el-dropdown-item>
         <el-dropdown-item :command="5" divided @click="logOut">
           <el-icon><SwitchButton /></el-icon>退出登录
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
-
-  <!-- <user-info ref="userInfoRef" /> -->
-  <!-- <edit-password ref="passwordRef" /> -->
 </template>
 
 <script setup name="layout-avatar">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useUserStore } from '@/store/modules/user';
 import { useTagsViewStore } from '@/store/modules/tagsView';
 import { usePermissionStore } from '@/store/modules/permission';
-// import UserInfo from '@/views/system/user/info.vue';
+import { getAssetsFile } from '@/utils';
-// import EditPassword from '@/views/system/user/password.vue';
 import { LogOut } from '@/apis/login';
 
 const router = useRouter();
@@ -52,16 +42,6 @@ const PermissionStore = usePermissionStore();
 
 // 用户信息
 const userInfo = computed(() => UserStore.getUserInfo());
-const userInfoRef = ref(null);
-const passwordRef = ref(null);
-
-const showUserInfo = () => {
-  userInfoRef?.value && userInfoRef.value.show();
-};
-
-const showPassword = () => {
-  passwordRef?.value && passwordRef.value.show();
-};
 
 const logOut = async () => {
   ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {

sub-government-affairs-service/src/layouts/component/Breadcrumb/index.vue

@@ -3,7 +3,7 @@
  * @Author: zenghua.wang
  * @Date: 2023-06-20 14:29:45
  * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-01-23 15:59:17
+ * @LastEditTime: 2025-02-13 16:02:18
 -->
 <template>
   <el-breadcrumb class="layout-breadcrumb" separator="/">
@@ -40,5 +40,6 @@ const matched = computed(() => route.matched.filter((item) => item.meta && item.
 .layout-breadcrumb {
   @include flex-row();
   align-items: center;
+  white-space: nowrap;
 }
 </style>

sub-government-affairs-service/src/layouts/component/Logo/index.vue

@@ -3,7 +3,7 @@
  * @Author: zenghua.wang
  * @Date: 2023-06-20 14:29:45
  * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-01-23 09:40:41
+ * @LastEditTime: 2025-02-13 16:04:43
 -->
 <template>
   <div class="logo">

sub-government-affairs-service/src/plugins/globalComponents.js

@@ -1,4 +1,4 @@
-import * as components from '../../../main/src/components';
+import * as components from '#/components';
 
 // 全局注册组件
 export const registerGlobalComponents = (app) => {

sub-government-affairs-service/src/router/modules/plantingAndBreeding.js

@@ -7,7 +7,7 @@ export default [
     name: 'plantingAndBreeding',
     component: Layout,
     redirect: '/planting',
-    meta: { title: '种养殖管理', icon: 'icon-test' },
+    meta: { title: '种养殖管理', icon: 'Document' },
     children: [
       {
         path: '/planting',
@@ -35,22 +35,44 @@ export default [
         name: 'breeding',
         component: Views,
         meta: { title: '农事管理', icon: 'Document' },
-        redirect: '/coding',
+        redirect: '/breeding-coding',
         children: [
           {
-            path: '/coding',
+            path: '/breeding-coding',
             component: () => import('@/views/trace/breeding/coding/index.vue'),
-            name: 'coding',
+            name: 'breeding-coding',
             meta: { title: '采收与赋码管理', icon: 'Document' },
           },
           {
-            path: '/quality',
+            path: '/breeding-quality',
             component: () => import('@/views/trace/breeding/quality/index.vue'),
-            name: 'quality',
+            name: 'breeding-quality',
             meta: { title: '产品质检管理', icon: 'Document' },
           },
         ],
       },
     ],
   },
+  {
+    path: '/trace',
+    name: 'trace',
+    component: Layout,
+    redirect: '/trace-search',
+    meta: { title: '溯源查询', icon: 'Document' },
+    children: [
+      {
+        path: '/trace-search',
+        name: 'trace-search',
+        component: () => import('@/views/trace/search/index.vue'),
+        meta: { title: '溯源查询', icon: 'Document' },
+      },
+      {
+        path: '/trace-info',
+        name: 'trace-info',
+        component: () => import('@/views/trace/search/info.vue'),
+        meta: { title: '溯源详情', icon: 'Document' },
+        hidden: true,
+      },
+    ],
+  },
 ];

sub-government-affairs-service/src/router/modules/resource.js

@@ -28,41 +28,41 @@ export default [
             name: 'land',
             meta: { title: '土地资源', icon: 'Document' },
           },
-          {
+          // {
-            path: '/land-fill',
+          //   path: '/land-fill',
-            name: 'land-fill',
+          //   name: 'land-fill',
-            component: () => import('@/views/resource/land/index.vue'),
+          //   component: () => import('@/views/resource/land/index.vue'),
-            meta: { title: '土地信息填报审核', icon: 'Document' },
+          //   meta: { title: '土地信息填报审核', icon: 'Document' },
-          },
+          // },
-          {
+          // {
-            path: '/land-fill-review',
+          //   path: '/land-fill-review',
-            name: 'land-fill-review',
+          //   name: 'land-fill-review',
-            component: () => import('@/views/resource/land/index.vue'),
+          //   component: () => import('@/views/resource/land/index.vue'),
-            meta: { title: '土地流转信息填报审核', icon: 'Document' },
+          //   meta: { title: '土地流转信息填报审核', icon: 'Document' },
-          },
+          // },
-        ],
-      },
-      {
-        path: '/land-monitor',
-        name: 'land-monitor',
-        component: Views,
-        meta: { title: '土地监管', icon: 'Document' },
-        redirect: '/land-patrol',
-        children: [
-          {
-            path: '/land-patrol',
-            component: () => import('@/views/resource/land/index.vue'),
-            name: 'land-patrol',
-            meta: { title: '土地使用巡查', icon: 'Document' },
-          },
-          {
-            path: '/land-handle',
-            name: 'land-handle',
-            component: () => import('@/views/resource/land/index.vue'),
-            meta: { title: '土地违法处理', icon: 'Document' },
-          },
         ],
       },
+      // {
+      //   path: '/land-monitor',
+      //   name: 'land-monitor',
+      //   component: Views,
+      //   meta: { title: '土地监管', icon: 'Document' },
+      //   redirect: '/land-patrol',
+      //   children: [
+      //     {
+      //       path: '/land-patrol',
+      //       component: () => import('@/views/resource/land/index.vue'),
+      //       name: 'land-patrol',
+      //       meta: { title: '土地使用巡查', icon: 'Document' },
+      //     },
+      //     {
+      //       path: '/land-handle',
+      //       name: 'land-handle',
+      //       component: () => import('@/views/resource/land/index.vue'),
+      //       meta: { title: '土地违法处理', icon: 'Document' },
+      //     },
+      //   ],
+      // },
     ],
   },
 ];

sub-government-affairs-service/src/store/index.js

@@ -1,14 +1,16 @@
 import { defineStore, createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
+const { VITE_APP_NAME } = import.meta.env;
+
 export const Store = defineStore({
-  id: 'globalState',
+  id: VITE_APP_NAME,
   state: () => ({}),
   getters: {},
   actions: {},
   persist: {
-    key: 'globalState',
+    key: VITE_APP_NAME,
-    storage: window.sessionStorage, //localstorage
+    storage: window.sessionStorage,
   },
 });
 

sub-government-affairs-service/src/store/modules/user.js

@@ -3,10 +3,9 @@ import { GenKey } from '@/config';
 import { isEmpty, encode, decode } from '@/utils';
 
 export const useUserStore = defineStore({
-  id: GenKey('userStore'),
+  id: GenKey('user_store'),
   state: () => ({
-    token:
+    token: null,
-      'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA5MzRhYzQ0LWUyZWEtNDNkOS1iYjZiLTg2YzBhOWZmYmJiYyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.43OzhYseqkg5KDD3WyY1xXURyuoX-00MBLrqQVsdH14jfAtL-zPCrMT_WLtHKFicLg9ohTz0oE2nHUYRS-sZBA',
     userInfo: {},
     currentOrg: null,
     orgList: [],
@@ -18,8 +17,7 @@ export const useUserStore = defineStore({
       this.token = token;
     },
     hasToken() {
-      return true;
+      return !isEmpty(this.token);
-      //return !isEmpty(this.token);
     },
     setUserInfo(userInfo) {
       this.userInfo = encode(JSON.stringify(userInfo), true);
@@ -54,14 +52,14 @@ export const useUserStore = defineStore({
       this.currentOrg = null;
       this.orgList = [];
       this.menus = [];
-      localStorage.removeItem(GenKey('USER_STATE'));
+      localStorage.removeItem(GenKey('user_store'));
     },
     clear() {
-      localStorage.removeItem(GenKey('USER_STATE'));
+      localStorage.removeItem(GenKey('user_store'));
     },
   },
   persist: {
-    key: GenKey('USER_STATE'),
+    key: GenKey('user_store'),
     storage: window.localStorage,
   },
 });

sub-government-affairs-service/src/styles/global.scss

@@ -20,7 +20,7 @@ $color-gray: #d3dce6;
 $color-gray-light: #e5e9f2;
 $color-gray-lighter: #eff2f7;
 $color-333: #333333;
-$color-666: #333333;
+$color-666: #666666;
 $color-999: #999999;
 $color-border-gray: #d1dbe5;
 $color-input-border: #dcdfe6;

sub-government-affairs-service/src/utils/axios.js

@@ -3,7 +3,7 @@
  * @Author: zenghua.wang
  * @Date: 2022-02-23 21:12:37
  * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-02-07 10:26:41
+ * @LastEditTime: 2025-02-13 14:47:02
  */
 import axios from 'axios';
 import { ElNotification } from 'element-plus';

sub-government-affairs-service/src/utils/index.js

@@ -331,7 +331,8 @@ export const downloadFile = async (url, fileName, fileType) => {
         });
         break;
       }
-      case 'blob': {
+      case 'blob':
+      case 'arraybuffer': {
         blob = new Blob([url]);
         break;
       }

sub-government-affairs-service/src/views/trace/breeding/coding/index.vue

@@ -306,11 +306,11 @@ const state = reactive({
         rows: 4,
         overHidden: true,
         width: 200,
-        // rules: {
+        rules: {
-        //   required: true,
+          required: true,
-        //   message: '请输入',
+          message: '请输入',
-        //   trigger: 'blur',
+          trigger: 'blur',
-        // },
+        },
       },
       {
         label: '创建时间',

sub-government-affairs-service/src/views/trace/breeding/coding/info.vue

@@ -21,7 +21,7 @@
 <script setup>
 import { reactive, ref, watch } from 'vue';
 import { useApp } from '@/hooks';
-import { CRUD_OPTIONS } from '@/config';
+import { CRUD_VIEW_OPTIONS } from '@/config';
 import { downloadFile } from '@/utils';
 import { GetEntity } from '@/apis/coding';
 
@@ -37,12 +37,7 @@ const crudRef = ref(null);
 const state = reactive({
   loading: false,
   options: {
-    ...CRUD_OPTIONS,
+    ...CRUD_VIEW_OPTIONS,
-    index: true,
-    addBtn: false,
-    refreshBtn: false,
-    selection: false,
-    menu: false,
     column: [
       // {
       //   label: '序号',
@@ -128,7 +123,6 @@ const state = reactive({
   list: [],
 });
 
-// 加载
 const loadData = () => {
   state.loading = true;
   GetEntity({ id: props.row.id })

sub-government-affairs-service/src/views/trace/search/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="search">
+    <div class="search-bar">
+      <el-input v-model="code" placeholder="请输入溯源码" size="large" clearable />
+      <el-button type="primary" icon="Search" size="large" class="search-bar-btn" @click="onSearch">搜索</el-button>
+    </div>
+    <h2 class="search-title">农产品全生命周期管理</h2>
+    <div class="search-panel">
+      <el-card class="search-card" shadow="hover">
+        <div class="search-card-item">
+          <span class="icon"><img :src="getAssetsFile('images/trace/search-1.png')" /></span>
+          <span class="text">种养植档案管理</span>
+        </div>
+      </el-card>
+      <div class="search-card-connector"></div>
+      <el-card class="search-card" shadow="hover">
+        <div class="search-card-item">
+          <span class="icon"><img :src="getAssetsFile('images/trace/search-2.png')" /></span>
+          <span class="text">农事管理</span>
+        </div>
+      </el-card>
+      <div class="search-card-connector"></div>
+      <el-card class="search-card" shadow="hover">
+        <div class="search-card-item">
+          <span class="icon"><img :src="getAssetsFile('images/trace/search-3.png')" /></span>
+          <span class="text">质量监管</span>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+import { isEmpty, getAssetsFile } from '@/utils';
+
+const router = useRouter();
+const app = useApp();
+const code = ref('');
+
+const onSearch = () => {
+  if (isEmpty(code.value)) {
+    app.$message.error('请输入溯源码进行查询！');
+    return;
+  }
+  router.push({ path: '/trace-info', query: { code: code.value } });
+};
+</script>
+<style lang="scss" scoped>
+.search {
+  @include flex-column();
+  align-items: center;
+  padding: 80px 20px 20px;
+  box-sizing: border-box;
+
+  &-bar {
+    width: 600px;
+    margin-bottom: 80px;
+    @include flex-row();
+
+    &-btn {
+      margin-left: -5px;
+    }
+  }
+
+  &-title {
+    color: $color-primary;
+    margin-bottom: 80px;
+    font-size: 30px;
+    text-align: center;
+  }
+
+  &-panel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    width: 100%;
+  }
+
+  &-card {
+    flex: 1;
+    max-width: 200px;
+    cursor: pointer;
+    transition: transform 0.3s;
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 15px;
+      padding: 20px;
+    }
+
+    .icon {
+      display: block;
+      width: 80px;
+      height: 80px;
+      img {
+        width: 100%;
+      }
+    }
+
+    .text {
+      color: $color-primary;
+      font-size: 16px;
+    }
+
+    &-connector {
+      width: 160px;
+      height: 3px;
+      background-color: $color-success;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  }
+}
+</style>

sub-government-affairs-service/src/views/trace/search/info.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="detail">
+    <div class="detail-left">
+      <el-menu class="menu-vertical" :default-active="state.active" @select="onSelect">
+        <el-menu-item v-for="item in state.tabList" :key="item.value" :index="item.value">
+          <!-- <i :class="`iconfont ${item.icon}`"></i> -->
+          <span>{{ item.label }}</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+
+    <div v-loading="state.loading" class="detail-right">
+      <div class="detail-right-header">
+        <span>{{ state.activeLabel }}</span>
+        <el-button icon="Back" circle @click="onBack" />
+      </div>
+      <div class="detail-right-content">
+        <el-card class="detail-card">
+          <div v-if="state.active == 1" class="detail-card-info">
+            <div class="product-left">
+              <el-descriptions :column="1" border>
+                <el-descriptions-item label="产品名称">{{ data.basicInfo?.productName }}</el-descriptions-item>
+                <el-descriptions-item label="产品数量">{{ data.basicInfo?.number }}{{ data.basicInfo?.unit }}</el-descriptions-item>
+                <el-descriptions-item label="生产经营主体">{{ data.basicInfo?.businessName }}</el-descriptions-item>
+                <el-descriptions-item label="原产地">{{ data.basicInfo?.originAddress }}</el-descriptions-item>
+                <el-descriptions-item label="生产日期">{{ data.basicInfo?.harvestTime }}</el-descriptions-item>
+                <el-descriptions-item label="保质期">{{ data.basicInfo?.qualityGuaranteePeriod }}天</el-descriptions-item>
+                <el-descriptions-item label="溯源码">{{ data.basicInfo?.originCode }}</el-descriptions-item>
+                <el-descriptions-item label="追溯次数">{{ data.basicInfo?.count }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+            <div class="product-right">
+              <el-image :src="data.basicInfo?.productUrl" fit="cover" class="product-image" />
+            </div>
+          </div>
+
+          <ul v-if="state.active == 2" class="detail-card-info flex-column">
+            <li v-for="(item, index) in data.secureDetections" :key="index" class="product">
+              <div class="product-text">{{ item.qualityDescribe }}</div>
+              <div v-if="item.qualityReportUrl" class="product-file">
+                <el-image
+                  style="width: 300px; height: 300px"
+                  :src="item.qualityReportUrl"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                  :preview-src-list="state.qualityReportUrls"
+                  :initial-index="0"
+                  fit="cover"
+                  lazy
+                />
+                <!-- <el-empty v-else description="暂时没有相关信息！" /> -->
+              </div>
+            </li>
+          </ul>
+
+          <!-- <div v-if="state.active == 3" class="detail-card-info">
+            <div class="product-left">
+              <el-descriptions :column="1" border>
+                <el-descriptions-item label="经营主体名称">{{ data.basicInfo?.productName }}</el-descriptions-item>
+                <el-descriptions-item label="主体类型">{{ data.basicInfo?.number }}</el-descriptions-item>
+                <el-descriptions-item label="统一社会信用代码">{{ data.basicInfo?.businessName }}</el-descriptions-item>
+                <el-descriptions-item label="经营项目">{{ data.basicInfo?.originAddress }}</el-descriptions-item>
+                <el-descriptions-item label="公司地址">{{ data.basicInfo?.harvestTime }}</el-descriptions-item>
+                <el-descriptions-item label="负责人">{{ data.basicInfo?.qualityGuaranteePeriod }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+            <div class="product-right">
+              <el-image :src="data.basicInfo?.productUrl" fit="cover" class="product-image" />
+            </div>
+          </div> -->
+
+          <div v-if="state.active == 4" class="detail-card-info">
+            <avue-crud ref="crudRef" :data="data.list" :option="state.options"> </avue-crud>
+          </div>
+
+          <div v-if="state.active == 5" class="detail-card-info">
+            <div class="product">
+              <div class="product-file">
+                <el-image
+                  v-if="data.blockchainUrl"
+                  style="width: 300px; height: 300px"
+                  :src="data.blockchainUrl"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                  :preview-src-list="state.blockchainUrls"
+                  :initial-index="0"
+                  fit="cover"
+                />
+                <el-empty v-else description="暂时没有相关信息！" />
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useApp } from '@/hooks';
+import { CRUD_VIEW_OPTIONS } from '@/config';
+import { isEmpty } from '@/utils';
+import { GetTraceDetail } from '@/apis/coding';
+
+const router = useRouter();
+const route = useRoute();
+const app = useApp();
+const crudRef = ref(null);
+const state = reactive({
+  loading: false,
+  active: 1,
+  activeLabel: '基本信息',
+  tabList: [
+    {
+      label: '基本信息',
+      value: 1,
+      icon: 'InfoFilled',
+    },
+    {
+      label: '安全检测',
+      value: 2,
+      icon: 'Warning',
+    },
+    // {
+    //   label: '经营主体',
+    //   value: 3,
+    //   icon: 'User',
+    // },
+    {
+      label: '农事活动',
+      value: 4,
+      icon: 'Calendar',
+    },
+    {
+      label: '区块链认证',
+      value: 5,
+      icon: 'Connection',
+    },
+  ],
+  options: {
+    ...CRUD_VIEW_OPTIONS,
+    column: [
+      {
+        label: '活动时间',
+        prop: 'qualityPerson',
+      },
+      {
+        label: '活动名称',
+        prop: 'harvestBatch',
+        width: 200,
+      },
+      {
+        label: '投入品',
+        prop: 'productName',
+      },
+      {
+        label: '作业人',
+        prop: 'qualityPerson',
+      },
+    ],
+  },
+  qualityReportUrls: [],
+  blockchainUrls: [],
+});
+const data = ref({
+  basicInfo: {},
+  secureDetections: [],
+  list: [],
+});
+
+const loadData = () => {
+  state.loading = true;
+  state.qualityReportUrls = [];
+  GetTraceDetail({ id: route.query.code })
+    .then((res) => {
+      if (res.code === 200) {
+        data.value = res.data;
+        if (!isEmpty(res.data.secureDetections)) {
+          res.data.secureDetections.forEach((item) => {
+            if (!isEmpty(item.qualityReportUrl)) {
+              state.qualityReportUrls.push(item.qualityReportUrl);
+            }
+          });
+        }
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+      data.value = {
+        basicInfo: {},
+        secureDetections: [],
+        list: [],
+      };
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+
+loadData();
+
+const onSelect = (index) => {
+  const current = state.tabList.find((item) => item.value == index);
+  state.active = index;
+  state.activeLabel = current.label ?? '';
+};
+
+const onBack = () => {
+  router.push({ path: '/trace-search' });
+};
+</script>
+<style lang="scss" scoped>
+.detail {
+  display: flex;
+  min-height: 100%;
+
+  &-left {
+    width: 200px;
+
+    .menu-vertical {
+      height: 100%;
+      border-right: 0 !important;
+    }
+  }
+
+  &-right {
+    flex: 1;
+    padding: 20px;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      span {
+        font-size: 16px;
+        color: $color-999;
+      }
+    }
+  }
+
+  &-card {
+    margin-bottom: 20px;
+
+    &-info {
+      display: flex;
+      gap: 40px;
+
+      .info-card {
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+.product {
+  width: 100%;
+  text-align: center;
+
+  &-left {
+    flex: 1;
+  }
+
+  &-right {
+    width: 300px;
+  }
+
+  &-image {
+    width: 100%;
+    height: 300px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+
+  &-text {
+    font-size: 16px;
+    color: $color-primary;
+    padding: 40px 0;
+  }
+}
+
+:deep(.el-descriptions__label) {
+  width: 120px;
+}
+
+:deep(.el-menu-item) {
+  display: flex;
+  align-items: center;
+}
+
+:deep(.el-menu-item .el-icon) {
+  margin-right: 8px;
+}
+</style>

sub-government-affairs-service/vite.config.js

@@ -3,7 +3,7 @@
  * @Author: zenghua.wang
  * @Date: 2022-09-18 21:24:29
  * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-02-08 17:26:25
+ * @LastEditTime: 2025-02-13 15:47:00
  */
 
 import { defineConfig, loadEnv } from 'vite';
@@ -69,6 +69,7 @@ export default defineConfig(({ command, mode }) => {
     resolve: {
       alias: {
         '@': resolve(__dirname, 'src'),
+        '#': resolve(__dirname, '../main/src'),
       },
       extensions: ['.js', '.vue', '.json', '.ts'],
     },