diff --git a/new-digital-agriculture-screen/auto-imports.d.ts b/new-digital-agriculture-screen/auto-imports.d.ts
new file mode 100644
index 0000000..369aad4
--- /dev/null
+++ b/new-digital-agriculture-screen/auto-imports.d.ts
@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
diff --git a/new-digital-agriculture-screen/components.d.ts b/new-digital-agriculture-screen/components.d.ts
new file mode 100644
index 0000000..ca0fa36
--- /dev/null
+++ b/new-digital-agriculture-screen/components.d.ts
@@ -0,0 +1,53 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseBg: typeof import('./src/components/baseBg.vue')['default']
+    CenterMap: typeof import('./src/components/centerMap.vue')['default']
+    'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default']
+    CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
+    Components: typeof import('./src/components/index.js')['default']
+    copy: typeof import('./src/components/centerMap copy.vue')['default']
+    CurrentTime: typeof import('./src/components/currentTime.vue')['default']
+    CustomBack: typeof import('./src/components/customBack.vue')['default']
+    CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
+    CustomEchartBar: typeof import('./src/components/custom-echart-bar/index.vue')['default']
+    CustomEchartBubble: typeof import('./src/components/custom-echart-bubble/index.vue')['default']
+    CustomEchartColumnLine: typeof import('./src/components/custom-echart-column-line/index.vue')['default']
+    CustomEchartHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/index.vue')['default']
+    CustomEchartLine: typeof import('./src/components/custom-echart-line/index.vue')['default']
+    CustomEchartLineLine: typeof import('./src/components/custom-echart-line-line/index.vue')['default']
+    CustomEchartMaps: typeof import('./src/components/custom-echart-maps/index.vue')['default']
+    CustomEchartMixin: typeof import('./src/components/custom-echart-mixin/index.vue')['default']
+    CustomEchartPictorialBar: typeof import('./src/components/custom-echart-pictorial-bar/index.vue')['default']
+    CustomEchartPie: typeof import('./src/components/custom-echart-pie/index.vue')['default']
+    CustomEchartPie3d: typeof import('./src/components/custom-echart-pie-3d/index.vue')['default']
+    CustomEchartPieGauge: typeof import('./src/components/custom-echart-pie-gauge/index.vue')['default']
+    CustomEchartRadar: typeof import('./src/components/custom-echart-radar/index.vue')['default']
+    CustomEchartScatterBlister: typeof import('./src/components/custom-echart-scatter-blister/index.vue')['default']
+    CustomEchartTriangle: typeof import('./src/components/custom-echart-triangle/index.vue')['default']
+    CustomEchartWaterDroplet: typeof import('./src/components/custom-echart-water-droplet/index.vue')['default']
+    CustomEchartWordCloud: typeof import('./src/components/custom-echart-word-cloud/index.vue')['default']
+    CustomIframe: typeof import('./src/components/custom-iframe/index.vue')['default']
+    CustomImportExcel: typeof import('./src/components/custom-import-excel/index.vue')['default']
+    CustomProgress: typeof import('./src/components/customProgress.vue')['default']
+    CustomRankList: typeof import('./src/components/custom-rank-list/index.vue')['default']
+    CustomRichEditor: typeof import('./src/components/custom-rich-editor/index.vue')['default']
+    CustomScrollBoard: typeof import('./src/components/custom-scroll-board/index.vue')['default']
+    CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
+    CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
+    CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
+    NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
+    NewPie: typeof import('./src/components/custom-echart-hyaline-cake/new-pie.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SubTop: typeof import('./src/components/subTop.vue')['default']
+    SvgIcon: typeof import('./src/components/svg-icon/index.vue')['default']
+    UpFile: typeof import('./src/components/custom-rich-editor/upFile.js')['default']
+  }
+}
diff --git a/new-digital-agriculture-screen/src/assets/images/trace/maprl.png b/new-digital-agriculture-screen/src/assets/images/trace/maprl.png
new file mode 100644
index 0000000..ac392ac
Binary files /dev/null and b/new-digital-agriculture-screen/src/assets/images/trace/maprl.png differ
diff --git a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue
index 4ae9afc..953d518 100644
--- a/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue
+++ b/new-digital-agriculture-screen/src/components/custom-echart-bar/index.vue
@@ -2,8 +2,8 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect } from 'vue';
-import { cloneDeep } from 'lodash';
+import { ref, reactive, watchEffect, toRefs } from 'vue';
+import { merge, cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 export default {
   name: 'CustomEchartBar',
@@ -33,36 +33,50 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 是否展示高亮圈圈
+    showMarkPoint: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否堆叠展示
+    isHorizontal: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
     const chartRef = ref(null);
     const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
-    const option = reactive({
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'shadow',
-          label: {
-            show: true,
-            backgroundColor: '#333',
-          },
-        },
-      },
-      legend: {
-        top: 30,
-      },
-      grid: {
-        top: 60,
-      },
-      xAxis: {
-        type: 'category',
-        data: [],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [],
+    let option = reactive({
+      // tooltip: {
+      //   trigger: 'axis',
+      //   axisPointer: {
+      //     type: 'shadow',
+      //     label: {
+      //       show: true,
+      //       backgroundColor: '#333',
+      //     },
+      //   },
+      // },
+      // legend: {
+      //   top: 30,
+      // },
+      // grid: {
+      //   top: 60,
+      // },
+      // xAxis: {
+      //   type: 'category',
+      //   data: [],
+      // },
+      // yAxis: {
+      //   type: 'value',
+      // },
+      // series: [],
+      // isHorizontal: {
+      //   type: Boolean,
+      //   default: false,
+      // },
     });
 
     watchEffect(() => {
@@ -70,37 +84,49 @@ export default {
     });
 
     function initCharts() {
-      if (props.option) {
+      if (props.option && props.option.grid.top == '15%') {
         Object.assign(option, cloneDeep(props.option));
-      }
-      let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
-      let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
-      let seriesData = [];
-      typeArr.forEach((type, index) => {
-        const barStyle = props.option?.barStyle ?? {};
-        let obj = { name: type, type: props.type, ...barStyle };
-        let data = [];
-        xAxisData.forEach((x) => {
-          let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
-          if (dataArr && dataArr.length > 0) {
-            data.push(dataArr[0].value);
-          } else {
-            data.push(null);
+      } else {
+        Object.assign(option, cloneDeep(props.option));
+        let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+        let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+        let seriesData = [];
+        typeArr.forEach((type, index) => {
+          const barStyle = props.option?.barStyle ?? {};
+          let obj = { name: type, type: props.type, ...barStyle };
+          let data = [];
+          xAxisData.forEach((x) => {
+            let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
+            if (dataArr && dataArr.length > 0) {
+              data.push(dataArr[0].value);
+            } else {
+              data.push(null);
+            }
+          });
+          obj['data'] = data;
+          if (props.option?.color) {
+            obj.color = props.option?.color[index];
           }
+          if (props.option.series && props.option.series.length > 0) {
+            obj.stack = props.option.series[index].stack ? props.option.series[index].stack : '';
+          }
+          seriesData.push(obj);
         });
-        obj['data'] = data;
-        if (props.option?.color) {
-          obj.color = props.option?.color[index];
+        option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
+        if (props.isHorizontal) {
+          option.yAxis.data = xAxisData;
+          option.xAxis.data = [];
+        } else {
+          option.xAxis.data = xAxisData;
         }
-        seriesData.push(obj);
-      });
-      option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
-      option.xAxis.data = xAxisData;
+      }
+      console.log(option);
       setOptions(option);
       startAutoPlay({
         interval: 2000,
         seriesIndex: 0,
         showTooltip: true,
+        showMarkPoint: props.showMarkPoint,
       });
       getInstance()?.off('click', onClick);
       getInstance()?.on('click', onClick);
diff --git a/new-digital-agriculture-screen/src/styles/common/define.scss b/new-digital-agriculture-screen/src/styles/common/define.scss
index c08d1cc..dffc95c 100644
--- a/new-digital-agriculture-screen/src/styles/common/define.scss
+++ b/new-digital-agriculture-screen/src/styles/common/define.scss
@@ -11,8 +11,6 @@
 
 .custom-tooltip-container{
   border-radius: 8px !important;
-  padding: 6px 16px 6px 8px !important;
-  background-color: rgba(0,0,0,0.7) !important;
   backdrop-filter: blur(8px) !important;
   & span{
     width: 8px !important;
diff --git a/new-digital-agriculture-screen/src/views/business/components/businessFive.vue b/new-digital-agriculture-screen/src/views/business/components/businessFive.vue
index 2566406..e60a6d2 100644
--- a/new-digital-agriculture-screen/src/views/business/components/businessFive.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessFive.vue
@@ -23,7 +23,7 @@ const state = reactive({
     type: 'row',
     rowNum: 6,
     isAnimation: true,
-    waitTime: 12,
+    waitTime: 2,
     unit: '万元',
     sort: true,
     height: 12,
diff --git a/new-digital-agriculture-screen/src/views/business/components/businessOne.vue b/new-digital-agriculture-screen/src/views/business/components/businessOne.vue
index 0823e1c..14bad1e 100644
--- a/new-digital-agriculture-screen/src/views/business/components/businessOne.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessOne.vue
@@ -194,7 +194,8 @@ function getPie3D(pieData, internalDiameterRatio) {
       formatter: (name) => {
         if (state.data.length) {
           const item = state.data.filter((item) => item.name === name)[0];
-          return `${name} ${item.pieData.value}${state.option.legendSuffix ?? ''}`;
+          console.log(item);
+          return `${name} ${item.pieData.value}${state.option.legendSuffix ?? ''}` + `\n` + `${item.pieData.quantity}家`;
         }
       },
     },
@@ -291,6 +292,7 @@ watch(
         return {
           name: row.name,
           value: row.value,
+          quantity: row.quantity,
         };
       });
       initData(pieData);
diff --git a/new-digital-agriculture-screen/src/views/business/components/businessThere.vue b/new-digital-agriculture-screen/src/views/business/components/businessThere.vue
index cce663b..5e6f8f3 100644
--- a/new-digital-agriculture-screen/src/views/business/components/businessThere.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessThere.vue
@@ -1,9 +1,9 @@
 <template>
-  <custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :is-horizontal="true" :show-mark-point="false" />
 </template>
 <script setup>
 import { reactive, watch } from 'vue';
-import { isEmpty } from '@/utils';
+import * as echarts from 'echarts';
 
 const props = defineProps({
   data: {
@@ -11,69 +11,145 @@ const props = defineProps({
     default: () => [],
   },
 });
+const rawData = [
+  { name: '勐撒镇', type: '农户', value: 150 },
+  { name: '勐撒镇', type: '企业/合作社', value: 300 },
+
+  { name: '勐永镇', type: '农户', value: 280 },
+  { name: '勐永镇', type: '企业/合作社', value: 200 },
+
+  { name: '孟定镇', type: '农户', value: 250 },
+  { name: '孟定镇', type: '企业/合作社', value: 240 },
+
+  { name: '大兴乡', type: '农户', value: 170 },
+  { name: '大兴乡', type: '企业/合作社', value: 140 },
+
+  { name: '耿马镇', type: '农户', value: 260 },
+  { name: '耿马镇', type: '企业/合作社', value: 230 },
+];
+
+const towns = ['勐撒镇', '勐永镇', '孟定镇', '大兴乡', '耿马镇'];
+const types = ['农户', '企业/合作社'];
+const colors = [
+  // 蓝色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: 'rgba(53,208,192,0.2)' },
+    { offset: 1, color: '#35d0c0' },
+  ]),
+  // 绿色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: 'rgba(21,235,144,0.2)' }, // 起始颜色
+    { offset: 1, color: '#15EB90' }, // 结束颜色
+  ]),
+  // 黄色渐变
+  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+    { offset: 0, color: '#F3F70F' },
+    { offset: 1, color: '#D4D70A' },
+  ]),
+];
+
+const series = types.map((type, idx) => {
+  return {
+    name: type,
+    type: 'bar',
+    barWidth: 16,
+    stack: 'total',
+    barGap: '0%', // 强制堆叠布局
+    itemStyle: {
+      color: colors[idx],
+      barBorderRadius: 0,
+      shadowColor: colors[idx],
+      // shadowBlur: 8,
+      shadowOffsetY: 0,
+    },
+    label: {
+      // 添加标签配置
+      show: true,
+      position: 'inside',
+      color: '#000', // 黑色文字确保可见
+      backgroundColor: 'rgba(255,255,255,0.7)', // 白色背景
+      padding: [2, 4],
+      borderRadius: 4,
+      z: 100,
+      normal: {
+        show: true,
+        position: 'inside',
+        formatter: '{c}万亩',
+      },
+    },
+    silent: true, // 禁用所有交互效果
+    animation: false, // 禁用动画
+    emphasis: {
+      focus: 'series',
+      disabled: true, // 禁用高亮效果
+    },
+    z: 100 - idx,
+    data: towns.map((town) => {
+      const found = rawData.find((d) => d.name === town && d.type === type);
+      return found ? found.value : 0;
+    }),
+  };
+});
+console.log(series);
 
 const state = reactive({
+  data: rawData,
   option: {
-    color: ['#35D0C0'],
+    legend: {
+      data: types,
+      textStyle: {
+        color: '#fff',
+      },
+      selectedMode: false, // 禁用图例切换功能
+      inactiveColor: '#fff', // 设置非激活状态颜色（保持原色）
+    },
     grid: {
-      left: '5%',
-      right: '5%',
+      top: '15%',
+      left: '3%',
+      right: '10%',
       bottom: '5%',
-      top: '10%',
       containLabel: true,
     },
+    xAxis: {
+      type: 'value', // 数值轴（横向条形图的长度）
+      axisLine: { lineStyle: { opacity: 1, width: 0 } },
+      axisTick: { show: false },
+      axisLabel: {
+        margin: 8,
+        formatter: (value) => `${value}万亩`, // X轴也显示万亩单位
+      },
+    },
+    yAxis: {
+      type: 'category', // 分类轴（横向条形图的标签）
+      data: towns, // 分类数据放在 yAxis
+      axisTick: { show: false }, // 隐藏刻度线
+    },
+    color: colors,
+    series,
     tooltip: {
+      show: false,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
-      // tooltip样式调整添加这个类名
-      className: 'custom-tooltip-container', // 自定义父容器类名
-      backgroundColor: 'rgba(0,0,0,0.5)',
+      backgroundColor: 'rgba(0,0,0,0);',
       borderColor: '#35d0c0',
-      formatter: (data) => {
-        const params = data[0];
-        let str = `<div class="custom-echarts-tips">
-          <span>${params.name}</span><br/>
-          <span>${params.marker} ${params.data} 万亩</span>
-        </div>`;
-        return str;
-      },
-    },
-    xAxis: {
-      type: 'category',
-      // name: '年份',
-      axisTick: {
-        show: false,
-        alignWithLabel: false,
-        interval: 'auto',
-        inside: false,
-        length: 5,
-        lineStyle: {
-          type: 'solid',
-          width: 1,
-          color: 'rgba(28, 158, 222, 1)',
-        },
-      },
-    },
-    yAxis: {
-      type: 'value',
-      // name: '',
+      borderRadius: 8,
+      formatter: (params) => `
+      <div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
+      ${params
+        .map(
+          (p) => `
+        <div style="display:flex;align-items:center;margin:3px 0;color:#fff">
+          <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p.color};margin-right:6px;color:#fff"></span>
+          ${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
+        </div>
+      `
+        )
+        .join('')}
+    `,
+      extraCssText: 'backdrop-filter: blur(8px);',
     },
   },
-  data: [],
 });
-
-watch(
-  () => props.data,
-  (val) => {
-    if (!isEmpty(val)) {
-      state.data = val;
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
 </script>
diff --git a/new-digital-agriculture-screen/src/views/business/components/businessTwo.vue b/new-digital-agriculture-screen/src/views/business/components/businessTwo.vue
index 8d9005c..2263684 100644
--- a/new-digital-agriculture-screen/src/views/business/components/businessTwo.vue
+++ b/new-digital-agriculture-screen/src/views/business/components/businessTwo.vue
@@ -1,5 +1,5 @@
 <template>
-  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :show-mark-point="true" />
 </template>
 <script setup>
 import { reactive, watch } from 'vue';
@@ -26,6 +26,7 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
@@ -38,7 +39,7 @@ const state = reactive({
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
           <span>${params.name}</span><br/>
-          <span>${params.marker} ${params.data} 个</span>
+          <span>${params.marker} ${params.data} 家</span>
         </div>`;
         return str;
       },
@@ -56,7 +57,7 @@ const state = reactive({
         y2: 1,
         colorStops: [
           { offset: 0, color: '#35D0C0' },
-          { offset: 1, color: '#35D0C0' },
+          { offset: 1, color: 'rgba(53,208,192,0.2)' },
         ],
         global: false,
       },
diff --git a/new-digital-agriculture-screen/src/views/business/index.vue b/new-digital-agriculture-screen/src/views/business/index.vue
index 264dac4..27be242 100644
--- a/new-digital-agriculture-screen/src/views/business/index.vue
+++ b/new-digital-agriculture-screen/src/views/business/index.vue
@@ -100,11 +100,11 @@ const loadData = async () => {
   await sleep(500);
   state.data = {
     one: [
-      { value: 13.8, name: '农企/合作社' },
-      { value: 23.8, name: '农资企业' },
-      { value: 24.1, name: '种源企业' },
-      { value: 29.8, name: '生产加工企业' },
-      { value: 8.5, name: '农户' },
+      { value: 13.8, name: '农企/合作社', quantity: 202 },
+      // { value: 23.8, name: '农资企业' },
+      // { value: 24.1, name: '种源企业' },
+      // { value: 29.8, name: '生产加工企业' },
+      { value: 8.5, name: '农户', quantity: 180 },
     ],
     two: [
       { name: '耿马镇', value: 870 },
@@ -117,11 +117,11 @@ const loadData = async () => {
       { name: '芒洪乡', value: 682 },
     ],
     there: [
-      { value: 66, name: '2021' },
-      { value: 100, name: '2022' },
-      { value: 50, name: '2023' },
-      { value: 150, name: '2024' },
-      { value: 80, name: '2025' },
+      { name: '耿马镇', value: 870, value2: 455 },
+      { name: '勐撒镇', value: 603, value2: 555 },
+      { name: '勐永镇', value: 854, value2: 322 },
+      { name: '孟定镇', value: 635, value2: 298 },
+      { name: '大兴乡', value: 795, value2: 382 },
     ],
     four: {
       percent: 0.3998,
diff --git a/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue b/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue
index 397fe75..8f990d7 100644
--- a/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue
+++ b/new-digital-agriculture-screen/src/views/entities/components/valueCharts.vue
@@ -16,6 +16,15 @@ const props = defineProps({
   },
 });
 
+let values = reactive([]);
+const getValue = (dataList) => {
+  let arr = [];
+  for (let i = 0; i < dataList.length; i++) {
+    arr.push(dataList[i].value);
+  }
+  return arr;
+};
+
 const state = reactive({
   data: [],
   option: {
@@ -45,10 +54,10 @@ const state = reactive({
       extraCssText: 'backdrop-filter: blur(8px);',
     },
     barStyle: {
-      barWidth: 10,
+      barWidth: 14,
       itemStyle: {
-        borderWidth: 10,
-        borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
+        borderWidth: 14,
+        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
       },
       color: {
         type: 'linear',
@@ -86,25 +95,100 @@ const state = reactive({
         show: false,
       },
     },
-    yAxis: {
-      type: 'category',
-      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
-      axisTick: {
-        show: false,
+    yAxis: [
+      {
+        type: 'category',
+        data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
       },
-      splitLine: {
-        show: false,
+      {
+        // 右侧数量
+        type: 'category',
+        inverse: true,
+        offset: 10,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#ffffff',
+            fontSize: '16',
+          },
+          formatter: function (value) {
+            let str = '{title|' + value + '吨}';
+            return str;
+          },
+          rich: {
+            title: {
+              color: '#fff',
+              fontSize: 16,
+            },
+          },
+        },
+        data: [12000, 8000, 6000, 4000, 3500],
       },
-      axisLine: {
-        show: false,
-      },
-    },
+    ],
     series: [
       {
+        name: '值',
         type: 'bar',
-        // barWidth: '40%', // 设置柱的宽度
-        // barMinHeight: 2, // 设置柱的最小高度
-        // barGap: '20%', // 设置柱之间的间隙
+        zlevel: 1,
+        barBorderRadius: 10,
+        itemStyle: {
+          borderRadius: [10, 10, 10, 10],
+          color: 'rgba(100, 200, 255, 0.3)',
+        },
+        backgroundStyle: {
+          color: 'rgba(100, 200, 255, 0.3)',
+          borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
+        },
+        barWidth: 20,
+        data: values,
+        label: {
+          position: [0, -16],
+          align: 'left',
+          show: true,
+          formatter: (params) => {
+            return params.name;
+          },
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: 20,
+        barGap: '-100%',
+        data: [],
+        barBorderRadius: 30,
+        itemStyle: {
+          normal: {
+            color: 'rgba(105,131,242,.3)',
+            borderRadius: 10,
+          },
+        },
+        label: {
+          show: false,
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
       },
     ],
   },
@@ -148,6 +232,7 @@ const loadData = (val) => {
       }
     }
   }
+  values = getValue(state.data);
   console.log(val);
 };
 </script>
diff --git a/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue b/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue
index ae246de..196197f 100644
--- a/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue
+++ b/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue
@@ -33,26 +33,27 @@ const props = defineProps({
 .basic {
   width: 100%;
   margin-top: 10px;
-  height: 100%;
+  height: 95%;
   border: 2px solid #01fefd;
   border-radius: 16px;
   backdrop-filter: blur(2px);
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
   color: #ffffff;
   padding: 20px;
   .line {
     display: flex;
     justify-content: space-between;
     text-align: left;
-    line-height: 20px;
+    line-height: 50px;
     .title {
-      font-size: 16px;
+      font-size: 14px;
       width: 40%;
+      color: #ddd;
     }
     .values {
-      font-size: 20px;
+      font-size: 16px;
       width: 60%;
     }
   }
diff --git a/new-digital-agriculture-screen/src/views/land/components/landOne.vue b/new-digital-agriculture-screen/src/views/land/components/landOne.vue
index 8c7cf27..b510852 100644
--- a/new-digital-agriculture-screen/src/views/land/components/landOne.vue
+++ b/new-digital-agriculture-screen/src/views/land/components/landOne.vue
@@ -23,6 +23,7 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
diff --git a/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue b/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue
index 4ec0555..8bf6c36 100644
--- a/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue
+++ b/new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue
@@ -22,45 +22,59 @@
   <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
     <i class="el-icon-close" @click="handleCloseInfo"></i>
     <section>
+      <div class="traceability_info">
+        <div class="_label" style="font-size: 30px">溯源信息</div>
+        <div class="traceability_info_box">
+          <div class="traceability_info_box_image">
+            <img style="width: 100%; height: 100%" src="../../../assets/images/entities/tomatoImg.png" />
+          </div>
+          <div class="traceability_info_box_title">
+            <div class="traceability_info_right">新鲜番茄</div>
+            <div class="traceability_info_right_bottom">检测通过</div>
+          </div>
+        </div>
+      </div>
+      <div class="detection_text">权威检测</div>
       <section class="info_box">
-        <div>
-          <span class="_label">产品名称</span>
-          <span>{{ info.productName }}</span>
-        </div>
-        <div>
-          <span class="_label">产品批次号</span>
-          <span>{{ info.productCode }}</span>
-        </div>
-        <div>
-          <span class="_label">产品规格</span>
-          <span>{{ info.specs }}</span>
-        </div>
-        <div>
-          <span class="_label">产品类型</span>
-          <span>{{ info.productType }}</span>
-        </div>
-        <div>
-          <span class="_label">生产厂家</span>
-          <span>{{ info.info && info.info.manufacturer }}</span>
-        </div>
-        <div>
-          <span class="_label">生产时间</span>
-          <span>{{ info.info && info.info.productTime }}</span>
-        </div>
-        <div>
-          <span class="_label">终端零售店</span>
-          <span>{{ info.info && info.info.shop }}</span>
+        <div v-for="item in list1" :key="item.name">
+          <span class="_label">{{ item.title }}</span>
+          <span>{{ item.name }}</span>
         </div>
       </section>
       <section class="route_box">
-        <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
+        <!-- <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
           <div class="_circle"></div>
           <div class="_name">{{ item.name }}</div>
           <div class="_time">{{ item.time }}</div>
-        </div>
+        </div> -->
         <div style="text-align: center">
-          <img src="../../../assets/images/trace/testReport.png" style="width: 30%" />
-          <div>检测报告</div>
+          <img src="../../../assets/images/trace/testReport.png" style="width: 100%" />
+          <!-- <div>检测报告</div> -->
+        </div>
+      </section>
+      <div class="detection_text">产地信息</div>
+      <div class="traceability_info">
+        <div class="traceability_info_box" style="flex-direction: column">
+          <div class="traceability_info_box_images">
+            <img style="width: 100%; height: 100%" src="../../../assets/images/trace/maprl.png" />
+          </div>
+          <div class="traceability_info_box_titles">
+            <div class="traceability_info_rights">临沧市耿马县耿马镇</div>
+          </div>
+        </div>
+      </div>
+      <div class="detection_text">仓储环节</div>
+      <section class="info_box">
+        <div v-for="item in list2" :key="item.name">
+          <span class="_label">{{ item.title }}</span>
+          <span>{{ item.name }}</span>
+        </div>
+      </section>
+      <div class="detection_text">物流环节</div>
+      <section class="info_box">
+        <div v-for="item in list3" :key="item.name">
+          <span class="_label">{{ item.title }}</span>
+          <span>{{ item.name }}</span>
         </div>
       </section>
     </section>
@@ -82,6 +96,44 @@ onMounted(() => {
 });
 let list = ref([]);
 
+let list1 = ref([
+  { title: '报告编号', name: 'H1212457' },
+  { title: '送检单位', name: '水果综合种植基地' },
+  { title: '送检日期', name: '2021-12-11' },
+  { title: '送样人', name: '李宏微' },
+  { title: '联系方式', name: '19876782134' },
+  { title: '样品数量', name: '1000克' },
+  { title: '样品名称', name: '新鲜番茄' },
+  { title: '检测单位', name: '农残检测中心' },
+  { title: '检测类型', name: '农残检测' },
+  { title: '检测方法', name: '食品快速检测法' },
+  { title: '评判标准', name: 'GB/T5009.199-2003' },
+  { title: '检测结果', name: '合格' },
+]);
+
+let list2 = ref([
+  { title: '仓库位置', name: '耿马县耿马村仓储站' },
+  { title: '仓储数量', name: '5吨' },
+  { title: '入库时间', name: '2021-12-11' },
+  { title: '仓库类型', name: '冷藏仓库' },
+  { title: '批次编号', name: 'AP20211212001' },
+  { title: '出库时间', name: '2021-12-15' },
+]);
+
+let list3 = ref([
+  { title: '运输批次', name: '第一批次' },
+  { title: '运输工具', name: '冷藏车' },
+  { title: '运输路线', name: '耿马县一昆明市' },
+  { title: '运输数量', name: '4吨' },
+  { title: '运输时间', name: '2021-12-15 5:30~12-16 8:30' },
+  { title: '', name: '' },
+  { title: '运输批次', name: '第二批次' },
+  { title: '运输工具', name: '小型运载卡车' },
+  { title: '运输路线', name: '耿马县一四排乡' },
+  { title: '运输数量', name: '1吨' },
+  { title: '运输时间', name: '2021-12-15 5:30~12-16 7:30' },
+]);
+
 const classOptions = {
   singleHeight: 48,
 };
@@ -103,7 +155,7 @@ function handleCloseInfo() {
     .label {
       display: grid;
       grid-template-columns: 25% 40% 18% 17%;
-      background-color: rgba(53, 208, 192, 0.3);
+      background-color: rgba(70, 109, 109, 0.8);
       color: #ffffff;
       height: 30px;
       line-height: 30px;
@@ -162,6 +214,58 @@ function handleCloseInfo() {
   z-index: 9999;
   transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
   font-size: 18px;
+  .detection_text {
+    font-size: 25px;
+    margin-bottom: 20px;
+  }
+  .traceability_info {
+    .traceability_info_box {
+      justify-content: space-evenly;
+      padding: 10px;
+      display: flex;
+      margin: 20px 0px;
+      background-color: rgba(70, 109, 109, 0.8);
+      border-radius: 10px;
+      .traceability_info_box_image {
+        width: 130px;
+        height: 75px;
+      }
+      .traceability_info_box_images {
+        width: 100%;
+        height: 150px;
+      }
+
+      .traceability_info_box_title {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
+        height: 75px;
+      }
+      .traceability_info_box_titles {
+        margin-top: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: start;
+      }
+      .traceability_info_right {
+        font-size: 23px;
+        color: #fff;
+      }
+      .traceability_info_rights {
+        font-size: 15px;
+        color: #fff;
+      }
+      .traceability_info_right_bottom {
+        padding: 5px 20px;
+        border-radius: 40px;
+        background-color: rgba(0, 0, 0, 0.2);
+        color: #04ed8c;
+        font-size: 17px;
+      }
+    }
+  }
   ._label {
     color: #01fefd;
   }
@@ -207,7 +311,6 @@ function handleCloseInfo() {
       }
     }
     .route_box {
-      padding: 0 34px;
       > div {
         position: relative;
         padding-bottom: 16px;
diff --git a/sub-government-affairs-service/src/layouts/component/Header/index.vue b/sub-government-affairs-service/src/layouts/component/Header/index.vue
index 3ad7fdb..3f80024 100644
--- a/sub-government-affairs-service/src/layouts/component/Header/index.vue
+++ b/sub-government-affairs-service/src/layouts/component/Header/index.vue
@@ -1,10 +1,3 @@
-<!--
- * @Description: 
- * @Author: zenghua.wang
- * @Date: 2023-06-20 14:29:45
- * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-01-24 15:11:22
--->
 <template>
   <div class="layout-header-placeholder" :style="stylePlaceholder()"></div>
   <div
diff --git a/sub-government-affairs-service/src/router/modules/resource.js b/sub-government-affairs-service/src/router/modules/resource.js
index 04f0873..cc07d30 100644
--- a/sub-government-affairs-service/src/router/modules/resource.js
+++ b/sub-government-affairs-service/src/router/modules/resource.js
@@ -7,29 +7,35 @@ import dictRoutes from './dict';
 export default [
   {
     path: '/sub-government-affairs-service/resource',
-    name: 'resource',
+    name: 'resourceManagement',
     component: Layout,
     redirect: '/sub-government-affairs-service/grid',
     meta: { title: '土地资源管理', icon: 'icon-test' },
     children: [
       {
-        redirect: '/sub-government-affairs-service/grid',
+        redirect: '/sub-government-affairs-service/add-grid',
         path: '/sub-government-affairs-service/grid',
-        component: () => import('@/views/resource/grid/index.vue'),
+        // component: () => import('@/views/resource/grid/index.vue'),
         name: 'grid',
         meta: { title: '网格化管理', icon: 'Memo' },
         children: [
           {
-            path: '/sub-government-affairs-service/grid',
+            path: '/sub-government-affairs-service/add-grid',
             component: () => import('@/views/resource/grid/index.vue'),
-            name: 'grid1',
+            name: 'add',
             meta: { title: '新增网格', icon: '' },
           },
           {
-            path: '/sub-government-affairs-service/grid',
-            component: () => import('@/views/resource/grid/index.vue'),
-            name: 'grid2',
-            meta: { title: '网格化地图', icon: '' },
+            path: '/sub-government-affairs-service/add--grid-member',
+            component: () => import('@/views/resource/grid/AddGridMember.vue'),
+            name: 'member',
+            meta: { title: '新增网格员', icon: '' },
+          },
+          {
+            path: '/sub-government-affairs-service/grid--management',
+            component: () => import('@/views/resource/grid/GridManagement.vue'),
+            name: 'management',
+            meta: { title: '网格化管理', icon: '' },
           },
         ],
       },
diff --git a/sub-government-affairs-service/src/views/resource/grid/AddGrid.vue b/sub-government-affairs-service/src/views/resource/grid/AddGrid.vue
new file mode 100644
index 0000000..52dd42d
--- /dev/null
+++ b/sub-government-affairs-service/src/views/resource/grid/AddGrid.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="custom-page">
+    <avue-crud
+      ref="crudRef"
+      v-model="state.form"
+      v-model:search="state.query"
+      v-model:page="state.pageData"
+      :table-loading="state.loading"
+      :data="state.data"
+      :option="state.options"
+      @refresh-change="refreshChange"
+      @search-reset="searchChange"
+      @search-change="searchChange"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+    >
+      <template #menu-left>
+        <el-button type="success" icon="download" @click="onExport">导出</el-button>
+      </template>
+
+      <template #menu="scope">
+        <custom-table-operate :actions="state.options.actions" :data="scope" />
+      </template>
+    </avue-crud>
+  </div>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { isEmpty, downloadFile } from '@/utils';
+import { useUserStore } from '@/store/modules/user';
+import { compact } from 'lodash';
+import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
+
+const { VITE_APP_BASE_API } = import.meta.env;
+const app = useApp();
+const UserStore = useUserStore();
+const crudRef = ref(null);
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+  },
+  form: {},
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    // addBtnText: '添加网格',
+    column: [
+      {
+        label: '网格区',
+        prop: 'gridArea',
+        search: true,
+        width: 200,
+        addDisplay: false,
+        editDisplay: false,
+        viewDisplay: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格名称',
+        prop: 'gridName',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格区域',
+        prop: 'gridAreaName',
+        width: 300,
+        display: false,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格区域',
+        prop: 'cities',
+        type: 'cascader',
+        hide: true,
+        addDisplay: true,
+        editDisplay: true,
+        viewDisplay: false,
+        // multiple: true,
+        // checkStrictly: true,
+        // collapseTags: true,
+        // emitPath: false,
+        // checkDescendants: false,
+        props: {
+          label: 'areaName',
+          value: 'areaCode',
+          children: 'areaChildVOS',
+        },
+        dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => res.data ?? [],
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格管理员',
+        prop: 'gridManager',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '联系方式',
+        prop: 'contactInfo',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '省',
+        prop: 'provinceCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '市',
+        prop: 'cityCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '县/区',
+        prop: 'gridAreaCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '乡镇',
+        prop: 'townCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '乡镇',
+        prop: 'village',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '备注',
+        prop: 'note',
+        type: 'textarea',
+        span: 24,
+        rows: 4,
+        overHidden: true,
+        width: 200,
+      },
+      {
+        label: '创建时间',
+        prop: 'createTime',
+        width: 200,
+        hide: true,
+        display: false,
+      },
+    ],
+    actions: [
+      {
+        name: '查看',
+        icon: 'view',
+        event: ({ row }) => rowView(row),
+      },
+      {
+        name: '编辑',
+        icon: 'edit',
+        event: ({ row }) => rowEdit(row),
+      },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  currentRow: {},
+});
+
+// 加载
+const loadData = () => {
+  state.loading = true;
+  GetEntityList(state.query)
+    .then((res) => {
+      if (res.code === 200) {
+        const { current, size, total, records } = res.data;
+        state.data = records;
+        state.pageData = {
+          currentPage: current || 1,
+          pageSize: size || 10,
+          total: total,
+        };
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+      state.data = [];
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+
+loadData();
+
+// 页数
+const currentChange = (current) => {
+  state.query.current = current;
+  loadData();
+};
+
+// 条数
+const sizeChange = (size) => {
+  state.query.size = size;
+  loadData();
+};
+
+// 搜索
+const searchChange = (params, done) => {
+  if (done) done();
+  state.query = params;
+  state.query.current = 1;
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+// 查看
+const rowView = (row) => {
+  crudRef.value.rowView(row);
+};
+
+const setCity = (row) => {
+  if (!isEmpty(row.cities)) {
+    row.provinceCode = row?.cities[0] ?? null;
+    row.cityCode = row?.cities[1] ?? null;
+    row.gridAreaCode = row?.cities[2] ?? null;
+    row.townCode = row?.cities[3] ?? null;
+    row.village = row?.cities[4] ?? null;
+    // row.village = row?.cities.join(',');
+  }
+};
+
+// 新增
+const rowSave = (row, done, loading) => {
+  setCity(row);
+  AddEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('添加成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 编辑
+const rowEdit = (row) => {
+  const village = !isEmpty(row.village) ? row.village : [];
+  row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
+  crudRef.value.rowEdit(row);
+};
+const rowUpdate = (row, index, done, loading) => {
+  setCity(row);
+  UpdateEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('更新成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 删除
+const rowDel = (row, index, done) => {
+  if (isEmpty(row)) return;
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      DeleteEntity({ id: row.id })
+        .then((res) => {
+          if (res.code === 200) {
+            app.$message.success('删除成功！');
+            loadData();
+          }
+        })
+        .catch((err) => {
+          app.$message.error(err.msg);
+        });
+    })
+    .catch(() => {});
+};
+
+// 导出
+const onExport = () => {
+  if (isEmpty(state.data)) {
+    app.$message.error('当前暂时没有可供导出的数据！');
+    return;
+  }
+  state.loading = true;
+  const fileName = '网格明细表';
+  ExportEntity(state.query)
+    .then((res) => {
+      if (res.status === 200) {
+        downloadFile(res.data, `${fileName}.xlsx`, 'blob');
+        app.$message.success('导出成功！');
+      }
+    })
+    .catch((err) => {
+      app.$message.error('导出失败！');
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+</script>
diff --git a/sub-government-affairs-service/src/views/resource/grid/AddGridMember.vue b/sub-government-affairs-service/src/views/resource/grid/AddGridMember.vue
new file mode 100644
index 0000000..52dd42d
--- /dev/null
+++ b/sub-government-affairs-service/src/views/resource/grid/AddGridMember.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="custom-page">
+    <avue-crud
+      ref="crudRef"
+      v-model="state.form"
+      v-model:search="state.query"
+      v-model:page="state.pageData"
+      :table-loading="state.loading"
+      :data="state.data"
+      :option="state.options"
+      @refresh-change="refreshChange"
+      @search-reset="searchChange"
+      @search-change="searchChange"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+    >
+      <template #menu-left>
+        <el-button type="success" icon="download" @click="onExport">导出</el-button>
+      </template>
+
+      <template #menu="scope">
+        <custom-table-operate :actions="state.options.actions" :data="scope" />
+      </template>
+    </avue-crud>
+  </div>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { isEmpty, downloadFile } from '@/utils';
+import { useUserStore } from '@/store/modules/user';
+import { compact } from 'lodash';
+import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
+
+const { VITE_APP_BASE_API } = import.meta.env;
+const app = useApp();
+const UserStore = useUserStore();
+const crudRef = ref(null);
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+  },
+  form: {},
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    // addBtnText: '添加网格',
+    column: [
+      {
+        label: '网格区',
+        prop: 'gridArea',
+        search: true,
+        width: 200,
+        addDisplay: false,
+        editDisplay: false,
+        viewDisplay: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格名称',
+        prop: 'gridName',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格区域',
+        prop: 'gridAreaName',
+        width: 300,
+        display: false,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格区域',
+        prop: 'cities',
+        type: 'cascader',
+        hide: true,
+        addDisplay: true,
+        editDisplay: true,
+        viewDisplay: false,
+        // multiple: true,
+        // checkStrictly: true,
+        // collapseTags: true,
+        // emitPath: false,
+        // checkDescendants: false,
+        props: {
+          label: 'areaName',
+          value: 'areaCode',
+          children: 'areaChildVOS',
+        },
+        dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
+        dicHeaders: {
+          authorization: UserStore.token,
+        },
+        dicFormatter: (res) => res.data ?? [],
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '网格管理员',
+        prop: 'gridManager',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '联系方式',
+        prop: 'contactInfo',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '省',
+        prop: 'provinceCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '市',
+        prop: 'cityCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '县/区',
+        prop: 'gridAreaCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '乡镇',
+        prop: 'townCode',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '乡镇',
+        prop: 'village',
+        hide: true,
+        display: false,
+      },
+      {
+        label: '备注',
+        prop: 'note',
+        type: 'textarea',
+        span: 24,
+        rows: 4,
+        overHidden: true,
+        width: 200,
+      },
+      {
+        label: '创建时间',
+        prop: 'createTime',
+        width: 200,
+        hide: true,
+        display: false,
+      },
+    ],
+    actions: [
+      {
+        name: '查看',
+        icon: 'view',
+        event: ({ row }) => rowView(row),
+      },
+      {
+        name: '编辑',
+        icon: 'edit',
+        event: ({ row }) => rowEdit(row),
+      },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  currentRow: {},
+});
+
+// 加载
+const loadData = () => {
+  state.loading = true;
+  GetEntityList(state.query)
+    .then((res) => {
+      if (res.code === 200) {
+        const { current, size, total, records } = res.data;
+        state.data = records;
+        state.pageData = {
+          currentPage: current || 1,
+          pageSize: size || 10,
+          total: total,
+        };
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+      state.data = [];
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+
+loadData();
+
+// 页数
+const currentChange = (current) => {
+  state.query.current = current;
+  loadData();
+};
+
+// 条数
+const sizeChange = (size) => {
+  state.query.size = size;
+  loadData();
+};
+
+// 搜索
+const searchChange = (params, done) => {
+  if (done) done();
+  state.query = params;
+  state.query.current = 1;
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+// 查看
+const rowView = (row) => {
+  crudRef.value.rowView(row);
+};
+
+const setCity = (row) => {
+  if (!isEmpty(row.cities)) {
+    row.provinceCode = row?.cities[0] ?? null;
+    row.cityCode = row?.cities[1] ?? null;
+    row.gridAreaCode = row?.cities[2] ?? null;
+    row.townCode = row?.cities[3] ?? null;
+    row.village = row?.cities[4] ?? null;
+    // row.village = row?.cities.join(',');
+  }
+};
+
+// 新增
+const rowSave = (row, done, loading) => {
+  setCity(row);
+  AddEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('添加成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 编辑
+const rowEdit = (row) => {
+  const village = !isEmpty(row.village) ? row.village : [];
+  row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
+  crudRef.value.rowEdit(row);
+};
+const rowUpdate = (row, index, done, loading) => {
+  setCity(row);
+  UpdateEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('更新成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 删除
+const rowDel = (row, index, done) => {
+  if (isEmpty(row)) return;
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      DeleteEntity({ id: row.id })
+        .then((res) => {
+          if (res.code === 200) {
+            app.$message.success('删除成功！');
+            loadData();
+          }
+        })
+        .catch((err) => {
+          app.$message.error(err.msg);
+        });
+    })
+    .catch(() => {});
+};
+
+// 导出
+const onExport = () => {
+  if (isEmpty(state.data)) {
+    app.$message.error('当前暂时没有可供导出的数据！');
+    return;
+  }
+  state.loading = true;
+  const fileName = '网格明细表';
+  ExportEntity(state.query)
+    .then((res) => {
+      if (res.status === 200) {
+        downloadFile(res.data, `${fileName}.xlsx`, 'blob');
+        app.$message.success('导出成功！');
+      }
+    })
+    .catch((err) => {
+      app.$message.error('导出失败！');
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+</script>
diff --git a/sub-government-affairs-service/src/views/resource/grid/GridManagement.vue b/sub-government-affairs-service/src/views/resource/grid/GridManagement.vue
new file mode 100644
index 0000000..62d6e21
--- /dev/null
+++ b/sub-government-affairs-service/src/views/resource/grid/GridManagement.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>网格化管理</h1>
+  </div>
+</template>
+
+<script setup>
+// 组件逻辑可在此添加
+</script>
+
+<style scoped>
+h1 {
+  color: #2c3e50;
+}
+</style>
diff --git a/sub-operation-service/package.json b/sub-operation-service/package.json
index 00434ae..cd6ecb0 100644
--- a/sub-operation-service/package.json
+++ b/sub-operation-service/package.json
@@ -31,6 +31,7 @@
     "hls.js": "^1.6.2",
     "js-base64": "^3.7.6",
     "lodash": "^4.17.21",
+    "marked": "^15.0.12",
     "moment": "^2.30.1",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
diff --git a/sub-operation-service/src/router/index.js b/sub-operation-service/src/router/index.js
index c8c480b..571aa99 100644
--- a/sub-operation-service/src/router/index.js
+++ b/sub-operation-service/src/router/index.js
@@ -7,6 +7,7 @@
  */
 import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/layouts/index.vue';
+import BrandLayout from '@/views/brand/index.vue';
 import Views from '@/layouts/Views.vue';
 import userCentre from '@/layouts/userCentre.vue';
 
@@ -236,43 +237,38 @@ export const constantRoutes = [
     meta: { title: '公共品牌' },
     children: [
       {
-        path: 'apply',
-        component: () => import('@/views/brand/index.vue'),
+        path: '',
+        component: BrandLayout,
+        redirect: '/sub-operation-service/brand/apply',
         children: [
           {
-            path: '',
-            component: () => import('@/views/brand/components/ApplyList.vue'),
+            path: 'apply',
             name: 'brandApplyList',
+            component: () => import('@/views/brand/components/ApplyList.vue'),
             meta: { title: '使用申请' },
           },
           {
-            path: ':id',
-            component: () => import('@/views/brand/components/ApplyDetail.vue'),
+            path: 'apply/:id',
             name: 'brandApplyDetail',
+            component: () => import('@/views/brand/components/ApplyDetail.vue'),
             meta: { title: '产品申请' },
           },
-        ],
-      },
-      {
-        path: 'auth',
-        component: () => import('@/views/brand/index.vue'),
-        children: [
           {
-            path: '',
-            component: () => import('@/views/brand/components/Auth.vue'),
+            path: 'auth/record',
             name: 'brandAuth',
-            meta: { title: '授权管理' },
+            component: () => import('@/views/brand/components/Auth.vue'),
+            meta: { title: '授权记录' },
           },
-        ],
-      },
-      {
-        path: 'monitor',
-        component: () => import('@/views/brand/index.vue'),
-        children: [
           {
-            path: '',
-            component: () => import('@/views/brand/components/Monitor.vue'),
+            path: 'auth/system',
+            name: 'brandSystem',
+            component: () => import('@/views/brand/components/BrandSystem.vue'),
+            meta: { title: '品牌制度' },
+          },
+          {
+            path: 'monitor',
             name: 'brandMonitor',
+            component: () => import('@/views/brand/components/Monitor.vue'),
             meta: { title: '使用监管' },
           },
         ],
diff --git a/sub-operation-service/src/views/brand/components/ApplyList.vue b/sub-operation-service/src/views/brand/components/ApplyList.vue
index fef228d..ba2b99a 100644
--- a/sub-operation-service/src/views/brand/components/ApplyList.vue
+++ b/sub-operation-service/src/views/brand/components/ApplyList.vue
@@ -28,13 +28,34 @@ getApplyList().then((res) => {
   products.value = res.data;
 });
 
+const applyData = [
+  { id: 1, name: '耿马绿色蔬菜', imageUrl: 'images/brand/11.png' },
+  { id: 2, name: '云南高山茶', imageUrl: 'images/brand/12.png' },
+  { id: 3, name: '新疆大枣', imageUrl: 'images/brand/13.png' },
+  { id: 4, name: '东北大米', imageUrl: 'images/brand/14.png' },
+  { id: 5, name: '山东苹果', imageUrl: 'images/brand/15.png' },
+  { id: 6, name: '四川泡菜', imageUrl: 'images/brand/16.png' },
+  { id: 7, name: '江苏阳澄湖大闸蟹', imageUrl: 'images/brand/11.png' },
+  { id: 8, name: '海南椰子', imageUrl: 'images/brand/12.png' },
+  { id: 9, name: '广东早茶', imageUrl: 'images/brand/13.png' },
+  { id: 10, name: '北京烤鸭', imageUrl: 'images/brand/14.png' },
+  { id: 11, name: '西藏青稞酒', imageUrl: 'images/brand/15.png' },
+  { id: 12, name: '青海牦牛肉', imageUrl: 'images/brand/16.png' },
+];
+
 function gotoApplication(id) {
   router.push(`/sub-operation-service/brand/apply/${id}`);
 }
 
+// TODO: 对接口需要删除这个方法
+function data() {
+  products.value = applyData;
+}
+
 // 组件挂载时获取数据
 onMounted(() => {
-  getApplyList;
+  // getApplyList;
+  data();
 });
 </script>
 
diff --git a/sub-operation-service/src/views/brand/components/Auth.vue b/sub-operation-service/src/views/brand/components/Auth.vue
index 82ad282..3a84398 100644
--- a/sub-operation-service/src/views/brand/components/Auth.vue
+++ b/sub-operation-service/src/views/brand/components/Auth.vue
@@ -63,7 +63,7 @@
             </div>
           </div>
           <div class="product-action">
-            <el-tag :class="statusClass(activeTab)" :type="statusTypeMap[product.status]">{{ product.statusLabel }}</el-tag>
+            <el-tag :class="statusClass(activeStatus)" :type="statusTypeMap[product.status]">{{ product.statusLabel }}</el-tag>
             <el-button
               v-if="product.status === 'authorized'"
               type="primary"
@@ -204,7 +204,7 @@ const handleCertificate = (product) => {
   height: 100%;
 }
 .product-list {
-  height: 100%;
+  height: calc(100% - 40px);
   overflow: auto;
 }
 
diff --git a/sub-operation-service/src/views/brand/components/BrandSystem.vue b/sub-operation-service/src/views/brand/components/BrandSystem.vue
new file mode 100644
index 0000000..2959b43
--- /dev/null
+++ b/sub-operation-service/src/views/brand/components/BrandSystem.vue
@@ -0,0 +1,504 @@
+<template>
+  <div class="brand-system">
+    <!-- 搜索与筛选 -->
+    <div class="system-header">
+      <el-input v-model="searchQuery" placeholder="搜索制度名称/编号" prefix-icon="el-icon-search" />
+      <el-select v-model="filterType" placeholder="分类筛选">
+        <el-option v-for="type in filterTypes" :key="type.value" :label="type.label" :value="type.value" />
+      </el-select>
+    </div>
+
+    <!-- 制度列表 -->
+    <div class="system-list">
+      <div v-for="(item, index) in filteredList" :key="index" class="system-card" @click="showDetail(item)">
+        <div class="card-header">
+          <div class="card-title">
+            <i class="el-icon-document"></i>
+            {{ item.title }}
+          </div>
+          <div class="card-meta">
+            <span>编号：{{ item.code }}</span>
+            <span>版本：v{{ item.version }}</span>
+          </div>
+        </div>
+        <div class="card-content">
+          <p>{{ item.desc }}</p>
+        </div>
+        <div class="card-footer">
+          <span :class="`status-tag ${item.status === '生效中' ? 'active' : 'inactive'}`">{{ item.status }}</span>
+          <span>生效日期：{{ item.effectiveDate }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 浮层弹窗 -->
+    <transition name="fade">
+      <div v-if="showDialog" class="dialog-mask" @click.self="hideDetail">
+        <div class="dialog-container" :style="{ width: dialogWidth }">
+          <div class="dialog-header">
+            <div class="header-left">
+              <h3>{{ currentDetail.title }}</h3>
+              <div class="dialog-meta">
+                <span>编号：{{ currentDetail.code }}</span>
+                <span>版本：v{{ currentDetail.version }}</span>
+                <span :class="`status-tag ${currentDetail.status === '生效中' ? 'active' : 'inactive'}`">{{ currentDetail.status }}</span>
+              </div>
+            </div>
+            <div class="dialog-actions">
+              <el-button icon="el-icon-download" @click.stop="downloadDoc(currentDetail)">下载</el-button>
+              <el-button icon="el-icon-printer" @click.stop="printDoc">打印</el-button>
+              <i class="el-icon-close" @click="hideDetail"></i>
+            </div>
+          </div>
+          <div class="dialog-content">
+            <!-- 使用Markdown-it渲染的HTML内容 -->
+            <div class="doc-preview" v-html="compiledMarkdown"></div>
+          </div>
+          <div class="dialog-footer">
+            <div class="footer-info">
+              <p>制定部门：{{ currentDetail.department }}</p>
+              <p>发布日期：{{ currentDetail.publishDate }}</p>
+            </div>
+            <el-button @click="hideDetail">关闭</el-button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { ElMessage, ElButton } from 'element-plus';
+
+// 筛选类型
+const filterTypes = [
+  { label: '全部', value: '' },
+  { label: '管理规范', value: 'management' },
+  { label: '推广制度', value: 'promotion' },
+  { label: '评估体系', value: 'evaluation' },
+];
+
+// 状态管理
+const searchQuery = ref('');
+const filterType = ref('');
+const showDialog = ref(false);
+const currentDetail = ref({});
+const dialogWidth = ref('800px');
+
+// 增强型数据集
+const systemList = ref([
+  {
+    title: '品牌管理规范V2.0',
+    code: 'BRM-2023-001',
+    desc: '包含品牌标识、使用规范、VI应用等内容的最新版本',
+    content:
+      '# 品牌管理规范 V2.0\n\n## 第一章 总则\n第一条 本规范适用于集团所有子品牌管理...\n\n## 第二章 标识使用\n第五条 品牌标识不得在以下场景使用：\n1. 非官方宣传材料\n2. 竞品对比文档\n3. 未经审批的第三方平台\n\n## 第三章 数字资产\n第九条 数字资源库包含：\n- 官方LOGO矢量文件\n- 品牌色卡（CMYK/RGB/HEX）\n- 字体库授权文件\n\n## 第四章 附则\n第十二条 本规范自2023年9月1日起生效，原有版本自动废止。',
+    type: 'management',
+    file: 'BRM-2023-001.docx',
+    version: '2.0',
+    effectiveDate: '2023-09-01',
+    status: '生效中',
+    department: '品牌管理中心',
+    publishDate: '2023-08-25',
+  },
+  {
+    title: '品牌推广制度V1.3',
+    code: 'BRP-2023-005',
+    desc: '包含线上线下推广策略、预算分配及效果评估标准',
+    content:
+      '# 品牌推广制度 V1.3\n\n## 第一章 推广策略\n\n### 第五条 渠道配置\n- 数字媒体：占比40%\n- 户外广告：占比25%\n- 活动营销：占比20%\n- 公关传播：占比15%\n\n## 第二章 预算管理\n\n### 第十条 预算审批流程\n市场部提交方案 → 财务部审核 → 副总裁审批 → 执行备案\n\n## 第三章 效果评估\n\n### 第十六条 KPI指标\n| 指标 | 目标值 | 评估周期 |\n|-------|-------|---------|\n| 品牌认知度 | ≥75% | 季度 |\n| 媒体曝光量 | ≥500万次 | 月度 |\n| 转化率 | ≥3.5% | 月度 |',
+    type: 'promotion',
+    file: 'BRP-2023-005.docx',
+    version: '1.3',
+    effectiveDate: '2023-07-15',
+    status: '生效中',
+    department: '市场推广部',
+    publishDate: '2023-07-10',
+  },
+  {
+    title: '品牌评估体系V1.0',
+    code: 'BRA-2023-003',
+    desc: '基于市场反馈和财务数据的品牌价值评估方法与指标',
+    content:
+      '# 品牌评估体系 V1.0\n\n## 一、评估维度\n\n### 1.1 市场维度\n- 市场份额增长率\n- 客户满意度评分\n- 行业影响力指数\n\n### 1.2 财务维度\n- 品牌溢价率\n- ROI计算公式\n- 资产回报率\n\n## 二、评估周期\n\n| 级别 | 评估频率 |\n|------|---------|\n| 核心品牌 | 月度 |\n| 重点品牌 | 双月度 |\n| 新兴品牌 | 季度 |\n## 三、数据采集\n- CRM系统数据\n- 财务报表\n- 第三方调研报告',
+    type: 'evaluation',
+    file: 'BRA-2023-003.docx',
+    version: '1.0',
+    effectiveDate: '2023-06-01',
+    status: '生效中',
+    department: '战略发展部',
+    publishDate: '2023-05-28',
+  },
+]);
+
+// 过滤列表
+const filteredList = computed(() => {
+  return systemList.value.filter((item) => {
+    const matchSearch =
+      item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      item.desc.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      item.code.toLowerCase().includes(searchQuery.value.toLowerCase());
+    const matchFilter = filterType.value ? item.type === filterType.value : true;
+    return matchSearch && matchFilter;
+  });
+});
+
+// 显示详情
+const showDetail = (item) => {
+  currentDetail.value = item;
+  showDialog.value = true;
+};
+
+// 隐藏详情
+const hideDetail = () => {
+  showDialog.value = false;
+};
+
+// 下载文档
+const downloadDoc = (item) => {
+  ElMessage.success({
+    message: `开始下载 ${item.file} (${item.code})`,
+    duration: 1500,
+  });
+  // 实际开发中可替换为真实的下载逻辑
+  // window.open(`/api/download/${item.id}`);
+};
+
+// 打印功能
+const printDoc = () => {
+  ElMessage.info('准备打印文档...');
+  // 实际开发中可集成打印功能
+  // window.print();
+};
+
+// 在setup函数中
+
+// 恢复 marked 导入
+import { marked } from 'marked';
+
+// 恢复 computed 属性
+const compiledMarkdown = computed(() => {
+  return marked.parse(currentDetail.value.content);
+});
+
+// 在 setup 函数中配置 editor
+const editorConfig = {
+  readOnly: true,
+  placeholder: '暂无内容',
+  showToolbar: false,
+  // 启用 Markdown 解析
+  parseMarkdown: true,
+};
+</script>
+
+<style lang="scss" scoped>
+$color-primary: #25bf82;
+$color-bg: #f5f7fa;
+$color-border: #e4e4e4;
+$color-text: #333;
+$color-meta: #666;
+$color-success: #67c23a;
+$color-danger: #ff4949;
+
+.brand-system {
+  padding: 20px;
+  background: #fff;
+  border-radius: 16px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.system-header {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 24px;
+  .el-input {
+    width: 240px;
+    .el-input__inner {
+      border-radius: 8px;
+      border-color: $color-border;
+      &:focus {
+        border-color: $color-primary;
+        box-shadow: 0 0 0 2px rgba(37, 191, 130, 0.2);
+      }
+    }
+  }
+  .el-select {
+    width: 160px;
+    .el-input__inner {
+      border-radius: 8px;
+      border-color: $color-border;
+    }
+  }
+}
+
+.system-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.system-card {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid $color-border;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.1);
+    .card-header {
+      background-color: lighten($color-primary, 40%);
+    }
+  }
+}
+
+.card-header {
+  padding: 16px;
+  background-color: $color-bg;
+  transition: background-color 0.3s;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: $color-text;
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  .el-icon-document {
+    margin-right: 8px;
+    color: $color-primary;
+    font-size: 18px;
+  }
+}
+
+.card-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: $color-meta;
+}
+
+.card-content {
+  padding: 16px;
+  font-size: 14px;
+  color: $color-text;
+  line-height: 1.5;
+  min-height: 80px;
+}
+
+.card-footer {
+  padding: 12px 16px;
+  border-top: 1px solid $color-border;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $color-bg;
+  font-size: 12px;
+  color: $color-meta;
+}
+
+.status-tag {
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  &.active {
+    background-color: rgba(103, 194, 58, 0.1);
+    color: $color-success;
+  }
+  &.inactive {
+    background-color: rgba(255, 73, 73, 0.1);
+    color: $color-danger;
+  }
+}
+
+// 弹窗样式
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.dialog-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.dialog-container {
+  background: white;
+  min-width: 500px;
+  max-width: 90vw;
+  border-radius: 12px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
+}
+
+.dialog-header {
+  padding: 20px;
+  border-bottom: 1px solid $color-border;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background-color: #f9fbfc;
+  .header-left {
+    h3 {
+      margin: 0;
+      font-size: 20px;
+      font-weight: bold;
+      color: $color-text;
+      margin-bottom: 8px;
+    }
+  }
+}
+
+.dialog-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 14px;
+  color: $color-meta;
+  margin-top: 4px;
+  .status-tag {
+    padding: 3px 8px;
+    font-size: 12px;
+  }
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 12px;
+  .el-button {
+    padding: 10px;
+    border-radius: 8px;
+    &:hover {
+      background-color: lighten($color-primary, 35%);
+    }
+  }
+  .el-icon-close {
+    font-size: 20px;
+    cursor: pointer;
+    margin-left: 12px;
+    &:hover {
+      color: $color-primary;
+    }
+  }
+}
+
+.dialog-content {
+  padding: 20px;
+  flex: 1;
+  overflow-y: hidden;
+  background-color: #f9fbfc;
+}
+
+.doc-preview {
+  white-space: pre-wrap;
+  line-height: 1.5;
+  background: #ffffff;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid $color-border;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  font-family: 'Microsoft Yahei', SimSun, sans-serif;
+  font-size: 15px;
+  color: #333;
+  height: calc(100vh - 300px);
+  overflow: auto;
+
+  /* 恢复 Markdown 元素样式 */
+  h1,
+  h2,
+  h3 {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 0.3em;
+    margin-top: 2em;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5em;
+    margin: 0.5em 0;
+  }
+
+  li {
+    margin: 0.3em 0;
+  }
+
+  pre {
+    background-color: #f8f8f8;
+    padding: 1em;
+    border-radius: 4px;
+    overflow-x: auto;
+  }
+
+  code {
+    background-color: #eee;
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+
+    th,
+    td {
+      border: 1px solid #ddd;
+      padding: 0.5em;
+      text-align: left;
+    }
+
+    th {
+      background-color: #f5f7fa;
+    }
+  }
+}
+
+/* 新增 WangEditor 样式覆盖 */
+.w-e-text-container {
+  background-color: #ffffff !important;
+  border-radius: 8px 8px 0 0;
+  padding: 20px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.w-e-scroll {
+  height: 400px;
+}
+
+.dialog-footer {
+  padding: 20px;
+  border-top: 1px solid $color-border;
+  background-color: #f9fbfc;
+  .footer-info {
+    margin-bottom: 16px;
+    p {
+      margin: 4px 0;
+      font-size: 14px;
+      color: $color-meta;
+    }
+  }
+}
+</style>
diff --git a/sub-operation-service/src/views/brand/components/Monitor.vue b/sub-operation-service/src/views/brand/components/Monitor.vue
index 5db0d1d..d4146c1 100644
--- a/sub-operation-service/src/views/brand/components/Monitor.vue
+++ b/sub-operation-service/src/views/brand/components/Monitor.vue
@@ -26,12 +26,89 @@
             {{ tabLabels[activeTab] }}
           </div>
           <div class="item-actions">
-            <el-button size="large" class="button" @click="onInspect(p)">抽查</el-button>
+            <el-button size="large" class="button" @click="onInspect(p.id)">抽查</el-button>
             <el-button size="large" class="button" type="danger" @click="onRevoke(p)">取消授权</el-button>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- 抽查弹窗 -->
+    <el-dialog v-model="dialogVisible" width="720px" top="20px" modal="false" :before-close="() => (dialogVisible = false)" title="追溯记录">
+      <div v-if="traceData" class="trace-record">
+        <!-- 基本信息 -->
+        <section class="section">
+          <h3>基本信息</h3>
+          <el-row :gutter="12">
+            <el-col :span="6">产品名称：</el-col><el-col :span="18">{{ traceData.productName }}</el-col> <el-col :span="6">产品数量：</el-col
+            ><el-col :span="18">{{ traceData.quantity }}</el-col> <el-col :span="6">生产经营主体：</el-col
+            ><el-col :span="18">{{ traceData.producer }}</el-col> <el-col :span="6">原产地：</el-col
+            ><el-col :span="18">{{ traceData.origin }}</el-col> <el-col :span="6">生产日期：</el-col
+            ><el-col :span="18">{{ traceData.productionDate }}</el-col> <el-col :span="6">追溯码：</el-col
+            ><el-col :span="18">{{ traceData.traceCode }}</el-col> <el-col :span="6">追溯次数：</el-col
+            ><el-col :span="18">{{ traceData.traceCount }} 次</el-col>
+          </el-row>
+        </section>
+
+        <!-- 基地信息 -->
+        <section class="section">
+          <h3>基地信息</h3>
+          <el-row :gutter="12">
+            <el-col :span="6">基地地址：</el-col><el-col :span="18">{{ traceData.base.address }}</el-col> <el-col :span="6">地理位置：</el-col
+            ><el-col :span="18">{{ traceData.base.location }}</el-col> <el-col :span="6">面积：</el-col
+            ><el-col :span="18">{{ traceData.base.area }} 亩</el-col> <el-col :span="6">气候条件：</el-col
+            ><el-col :span="18">{{ traceData.base.climate }}</el-col> <el-col :span="6">土壤类型：</el-col
+            ><el-col :span="18">{{ traceData.base.soil }}</el-col>
+          </el-row>
+        </section>
+
+        <!-- 农事信息 -->
+        <section class="section">
+          <h3>农事信息</h3>
+          <el-table :data="traceData.farmingRecords" stripe border style="width: 100%">
+            <el-table-column prop="date" label="日期" width="120" />
+            <el-table-column prop="operation" label="操作" />
+            <el-table-column prop="operator" label="作业人" width="120" />
+          </el-table>
+        </section>
+
+        <!-- 包装信息 -->
+        <section class="section">
+          <h3>分拣包装</h3>
+          <el-row :gutter="12">
+            <el-col :span="6">包装企业：</el-col><el-col :span="18">{{ traceData.packaging.company }}</el-col> <el-col :span="6">包装类型：</el-col
+            ><el-col :span="18">{{ traceData.packaging.type }}</el-col> <el-col :span="6">包装人：</el-col
+            ><el-col :span="18">{{ traceData.packaging.person }}</el-col> <el-col :span="6">包装时间：</el-col
+            ><el-col :span="18">{{ traceData.packaging.time }}</el-col>
+          </el-row>
+        </section>
+
+        <!-- 仓储物流 -->
+        <section class="section">
+          <h3>仓储物流信息</h3>
+          <el-row :gutter="12">
+            <el-col :span="6">存储类型：</el-col><el-col :span="18">{{ traceData.logistics.storageType }}</el-col>
+            <el-col :span="6">存储温度：</el-col><el-col :span="18">{{ traceData.logistics.temperature }}</el-col>
+            <el-col :span="6">发货地址：</el-col><el-col :span="18">{{ traceData.logistics.shipFrom }}</el-col> <el-col :span="6">收货地址：</el-col
+            ><el-col :span="18">{{ traceData.logistics.shipTo }}</el-col>
+          </el-row>
+        </section>
+
+        <!-- 交易信息 -->
+        <section class="section">
+          <h3>交易信息</h3>
+          <el-row :gutter="12">
+            <el-col :span="6">交易时间：</el-col><el-col :span="18">{{ traceData.trade.time }}</el-col> <el-col :span="6">买家：</el-col
+            ><el-col :span="18">{{ traceData.trade.buyer }}</el-col>
+          </el-row>
+        </section>
+
+        <!-- 右侧图片 -->
+        <div class="trace-img">
+          <img :src="getAssetsFile(traceData.img)" alt="产品图" />
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -41,6 +118,8 @@ import { getAssetsFile } from '@/utils/index.js';
 import { getMonitorList } from '@/apis/brand';
 
 const activeTab = ref('onSale');
+const dialogVisible = ref(false);
+const traceData = ref(null);
 
 const tabLabels = {
   onSale: '在售中',
@@ -83,10 +162,52 @@ const products = ref([
 // 根据当前 Tab 过滤
 const filteredProducts = computed(() => products.value.filter((p) => p.status === activeTab.value));
 
-// 操作回调
-const onInspect = (p) => {
-  console.log('抽查商品', p);
-};
+// 点击抽查后，根据 id 单独拉取或赋值 traceData
+function onInspect(id) {
+  console.log('查看产品:', id);
+  // 这里用硬编码模拟请求，实际中可换成接口调用：getTraceById(id).then(res=> traceData.value = res)
+  const mock = {
+    productName: '无土栽培土豆',
+    quantity: '200KG',
+    producer: '北大荒技术有限公司',
+    origin: '耿马县孟定镇下坝村',
+    productionDate: '2025-1-2',
+    traceCode: '10.5487542154785XSE254.1040201',
+    traceCount: 30,
+    base: {
+      address: '耿马县孟定镇下坝村',
+      location: '东经102° · 北纬24°',
+      area: 12000,
+      climate: '亚热带高原季风型，温和多雨',
+      soil: '红壤',
+    },
+    farmingRecords: [
+      { date: '2024/1/2', operation: '播种 20250102批土豆种', operator: '张小东' },
+      { date: '2024/2/2', operation: '施肥 氮肥', operator: '张小东' },
+      { date: '2024/3/2', operation: '浇水', operator: '张小东' },
+      { date: '2024/4/2', operation: '采摘', operator: '张小东' },
+    ],
+    packaging: {
+      company: '瑞禾农产品包装公司',
+      type: '纸箱',
+      person: '王大福',
+      time: '2025-1-2 14:00:47',
+    },
+    logistics: {
+      storageType: '冷藏',
+      temperature: '2°C',
+      shipFrom: '北京市朝阳区解放路24号',
+      shipTo: '上海市黄浦区南京路36号',
+    },
+    trade: {
+      time: '2025-1-2 14:00:47',
+      buyer: '刘小花',
+    },
+    img: 'images/brand/product6.png',
+  };
+  traceData.value = mock;
+  dialogVisible.value = true;
+}
 const onRevoke = (p) => {
   console.log('取消授权', p);
 };
@@ -191,5 +312,31 @@ const statusClass = (tab) => {
       }
     }
   }
+
+  .trace-record {
+    position: relative;
+    padding-right: 160px; /* 给图片预留空间 */
+  }
+  .trace-record .section {
+    margin-bottom: 16px;
+  }
+  .trace-record h3 {
+    margin-bottom: 8px;
+    font-size: 18px;
+    color: #409eff;
+    border-left: 4px solid #409eff;
+    padding-left: 8px;
+  }
+  .trace-img {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 128px;
+    text-align: center;
+  }
+  .trace-img img {
+    width: 100%;
+    border-radius: 4px;
+  }
 }
 </style>
diff --git a/sub-operation-service/src/views/brand/index.vue b/sub-operation-service/src/views/brand/index.vue
index 70ff13e..34fea47 100644
--- a/sub-operation-service/src/views/brand/index.vue
+++ b/sub-operation-service/src/views/brand/index.vue
@@ -3,16 +3,20 @@
     <el-container class="brand-layout-container">
       <el-aside class="brand-aside-menu">
         <!-- 菜单部分 -->
-        <el-menu :default-active="activeMenu" class="aside-menu" @select="handleSelect">
+        <el-menu v-model:open="openMenus" :default-active="activeMenu" class="brand-aside-menu" @select="handleSelect">
           <el-menu-item index="apply">
             <img :src="getAssetsFile('images/brand/Apply.png')" class="menu-icon" alt="申请图标" />
             <span>使用申请</span>
           </el-menu-item>
 
-          <el-menu-item index="auth">
-            <img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" alt="" />
-            <span>授权管理</span>
-          </el-menu-item>
+          <el-sub-menu index="auth">
+            <template #title>
+              <img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" />
+              <span>授权管理</span>
+            </template>
+            <el-menu-item index="auth/record"> 授权记录 </el-menu-item>
+            <el-menu-item index="auth/system"> 品牌制度 </el-menu-item>
+          </el-sub-menu>
 
           <el-menu-item index="monitor">
             <img :src="getAssetsFile('images/brand/supervision.png')" class="menu-icon" alt="" />
@@ -29,20 +33,27 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { getAssetsFile } from '@/utils/index.js';
 
 const router = useRouter();
 const route = useRoute();
 
-// 激活菜单项
+const openMenus = ref(['auth']);
+
+const menuMap = {
+  apply: ['brandApplyList'],
+  'auth/record': ['brandAuth'],
+  'auth/system': ['brandSystem'],
+  monitor: ['brandMonitor'],
+};
+
+// 获取当前菜单激活项
 const activeMenu = computed(() => {
-  const path = route.path;
-  if (path.includes('/apply')) return 'apply';
-  if (path.includes('/auth')) return 'auth';
-  if (path.includes('/monitor')) return 'monitor';
-  return '';
+  const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
+  console.log(matched[0]);
+  return matched ? matched[0] : '';
 });
 // 菜单切换处理
 function handleSelect(index) {
@@ -60,39 +71,40 @@ function handleSelect(index) {
     width: $width-main;
     margin: auto;
     .brand-aside-menu {
-      width: 240px;
-      background-color: $color-fff;
-      border-radius: 8px;
-      .aside-menu {
-        border-right: none;
+      background-color: #fff;
+      border-radius: 16px;
+      border-right: 0;
+      :deep(.el-menu-item),
+      :deep(.el-sub-menu__title) {
+        font-size: 18px !important;
+        margin: 8px 12px;
+        span {
+          margin-left: 8px;
+        }
+        .menu-icon {
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+      :deep(.el-sub-menu) {
         .el-menu-item {
-          height: 48px;
-          line-height: 48px;
-          margin: 4px 8px;
-          border-radius: 4px;
-          font-size: 20px;
-          font-weight: 400;
-          text-align: left;
-          &:hover {
-            background-color: #f5f7fa;
-          }
-          .el-icon {
-            color: #666;
-            margin-right: 12px;
-            font-size: 18px;
-            vertical-align: middle;
-          }
-          .menu-icon {
-            width: 1.5em;
-            height: 1.5em;
-            margin-right: 8px;
-            vertical-align: -0.15em;
-          }
+          font-size: 16px !important;
+          margin: 4px 12px;
+          line-height: 40px;
           span {
-            vertical-align: middle;
+            margin-left: 12px;
           }
         }
       }
+
+      :deep(.is-active) {
+        > .el-sub-menu__title,
+        &.el-menu-item {
+          color: #409eff !important;
+          background-color: #f5f7fa;
+        }
+      }
     }
     .brand-main {
       width: calc(100% - 240px - 16px);
diff --git a/sub-operation-service/yarn.lock b/sub-operation-service/yarn.lock
index 19fc669..ff96f07 100644
--- a/sub-operation-service/yarn.lock
+++ b/sub-operation-service/yarn.lock
@@ -4188,6 +4188,11 @@ markdown-table@^1.1.0:
   resolved "https://registry.npmmirror.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
   integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
 
+marked@^15.0.12:
+  version "15.0.12"
+  resolved "https://registry.npmmirror.com/marked/-/marked-15.0.12.tgz#30722c7346e12d0a2d0207ab9b0c4f0102d86c4e"
+  integrity sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==
+
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"