Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	sub-operation-service/yarn.lock

new-digital-agriculture-screen/components.d.ts

@@ -43,6 +43,7 @@ declare module 'vue' {
     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']

new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue

@@ -9,16 +9,13 @@ import { useEcharts } from '@/hooks/useEcharts';
 
 defineOptions({ name: 'NewHyalineCake' });
 
-// 记录当前选中和高亮的系列索引
 let selectedIndex = null;
 let hoveredIndex = null;
 
-// 定义组件 props
 const props = defineProps({
   chartData: {
     type: Array,
     default: () => [
-      // 默认示例数据
       { name: '项目一', value: 60 },
       { name: '项目二', value: 44 },
       { name: '项目三', value: 32 },
@@ -27,8 +24,8 @@ const props = defineProps({
   option: {
     type: Object,
     default: () => ({
-      k: 1, // 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大
+      k: 1, // 控制内外径关系的系数，1 表示无内径，值越小内径越大
-      itemGap: 0.1, // 扇形边缘向外偏移距离比例（用于选中效果）,扇形的间距，单位视图坐标，可调
+      itemGap: 0.1, // 扇形的间距
       itemHeight: 120, // 扇形高度（影响z轴拉伸程度）
       autoItemHeight: 0, // 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
       opacity: 0.6, // 透明度设置
@@ -46,17 +43,79 @@ const props = defineProps({
   },
 });
 
-// 声明组件触发的事件
 const emit = defineEmits(['click']);
 
-// 绑定到DOM的容器引用
 const chartRef = ref(null);
-// 使用 useEcharts 钩子初始化 ECharts 实例，并获取控制方法
 const { setOptions, getInstance } = useEcharts(chartRef);
 
-// 存储当前的 ECharts 配置项
 const chartOption = ref({});
+// pie2d 默认配置
+const defaultPie2dOption = {
+  center: ['50%', '50%'],
+  label: {
+    show: false,
+    position: 'inside',
+    formatter: '{c}',
+    color: '#fff',
+    distance: 0,
+  },
+  labelLine: {
+    show: false,
+    smooth: false,
+    length: props.option.itemGap * 500,
+    length2: props.option.itemGap * 800,
+    lineStyle: { color: '#fff', width: 1 },
+  },
+};
+// 合并父组件传入的 pie2dConfig
+const pie2dOption = {
+  ...defaultPie2dOption,
+  ...(props.option.pie2dConfig || {}),
+};
 
+// 初始化图表
+function initChart() {
+  // 生成基础的3D饼图配置(也就是默认的配置)
+  const baseOption = getPie3D(props.chartData, props.option.k);
+  // 合并用户配置，确保不修改原始对象
+  const finalOption = merge({}, baseOption, cloneDeep(props.option || {}));
+  chartOption.value = finalOption;
+
+  // 设置图表配置
+  setOptions(chartOption.value);
+  // 等待 DOM + ECharts 初始化完成
+  nextTick(() => {
+    const chart = getInstance();
+    if (!chart) {
+      return;
+    }
+
+    // 避免重复绑定事件
+    // chart.off('click');
+    chart.off('mouseover');
+    chart.off('globalout');
+
+    // chart.on('click', handleClick);
+    chart.on('mouseover', handleMouseover);
+    chart.on('globalout', handleGlobalout);
+  });
+}
+
+// 组件挂载后绑定事件
+onMounted(() => {
+  initChart();
+});
+
+// 监听数据或配置变更，重新初始化图表
+watch(
+  [() => props.chartData, () => props.option],
+  () => {
+    if (props.chartData && props.chartData.length) {
+      initChart();
+    }
+  },
+  { immediate: true, deep: true }
+);
 /**
  * 获取 parametric 曲面方程
  * @param {Number} startRatio 起点弧度
@@ -69,8 +128,7 @@ const chartOption = ref({});
  * @return {Object} parametric 曲面方程
  */
 function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, offsetZ = 0) {
-  console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ);
+  // console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ);
-  // 中心弧度用于计算偏移方向
   const midRatio = (startRatio + endRatio) / 2;
   const startRadian = startRatio * Math.PI * 2;
   const endRadian = endRatio * Math.PI * 2;
@@ -89,7 +147,6 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
   // 计算高亮时的放大比例（未高亮时为1）
   const hoverRate = isHovered ? 1.05 : 1;
 
-  // 返回 parametric 曲面方程
   return {
     u: {
       // u 参数控制饼的周向角度：从 -π 到 3π，可以完整绘制一圈
@@ -155,10 +212,6 @@ function getPie3D(pieData, internalDiameterRatio) {
 
   const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
 
-  // 计算总值
-  // pieData.forEach((item) => {
-  //   sumValue += item.value;
-  // });
   // 构建每个扇形的 series 数据
   for (let i = 0; i < pieData.length; i += 1) {
     sumValue += pieData[i].value;
@@ -169,13 +222,8 @@ function getPie3D(pieData, internalDiameterRatio) {
       parametric: true,
       wireframe: { show: false },
       pieData: pieData[i],
-      // itemStyle: {
-      //   opacity: props.option.opacity,
-      //   borderRadius: 300,
-      //   borderColor: '#fff',
-      // }
       pieStatus: {
-        selected: true,
+        selected: false,
         hovered: false,
         k,
       },
@@ -189,9 +237,10 @@ function getPie3D(pieData, internalDiameterRatio) {
     }
     series.push(seriesItem);
   }
+
   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-  console.log(series);
+  // console.log(series);
   for (let i = 0; i < series.length; i += 1) {
     endValue = startValue + series[i].pieData.value;
 
@@ -212,6 +261,34 @@ function getPie3D(pieData, internalDiameterRatio) {
 
     legendData.push(series[i].name);
   }
+  // 3. 构造透明的 2D pie，用于 legend/label
+  const outerPercent = 50;
+  const innerPercent =
+    internalDiameterRatio != null ? Math.round(internalDiameterRatio * outerPercent) : Math.round(((1 - k) / (1 + k)) * outerPercent);
+
+  const pie2dData = [];
+  for (let i = 0; i < pieData.length; i++) {
+    pie2dData.push({
+      name: pieData[i].name,
+      value: pieData[i].value,
+      // itemStyle: { opacity: 1 },
+    });
+  }
+  series.push({
+    name: 'pie2d',
+    type: 'pie',
+    data: pie2dData,
+    radius: [`${innerPercent}%`, `${outerPercent}%`],
+    center: pie2dOption.center,
+    startAngle: props.option.startAngle || 90,
+    clockwise: false,
+    itemStyle: {
+      color: 'transparent',
+    },
+    avoidLabelOverlap: false,
+    label: pie2dOption.label,
+    labelLine: pie2dOption.labelLine,
+  });
   // 基础配置：坐标轴、视角、图例、提示框等
   // 准备待返回的配置项，把准备好的 legendData、series 传入。
   const option = {
@@ -240,12 +317,12 @@ function getPie3D(pieData, internalDiameterRatio) {
     // animation: false,
     tooltip: {
       formatter: (params) => {
-        if (params.seriesName !== 'mouseoutSeries') {
+        // 只针对 3D surface 系列
-          return `${
+        if (params.seriesType === 'surface') {
-            params.seriesName
+          // params.seriesIndex 是扇区的索引
-          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+          const serie = chartOption.value.series[params.seriesIndex];
-            params.color
+          const realValue = serie.pieData.value;
-          };"></span>${option.series[params.seriesIndex].pieData.value}`;
+          return `${params.seriesName}：${realValue}`;
         }
         return '';
       },
@@ -276,23 +353,6 @@ function getPie3D(pieData, internalDiameterRatio) {
         autoRotate: true,
         distance: 150,
       },
-      // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
-      postEffect: {
-        // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
-        enable: false,
-        bloom: {
-          enable: true,
-          bloomIntensity: 0.1,
-        },
-        SSAO: {
-          enable: true,
-          quality: 'medium',
-          radius: 2,
-        },
-        // temporalSuperSampling: {
-        //   enable: true,
-        // },
-      },
     },
     series,
   };
@@ -301,7 +361,7 @@ function getPie3D(pieData, internalDiameterRatio) {
 
 // 监听 mouseover，近似实现高亮（放大）效果
 function handleMouseover(params) {
-  console.log('mouseover');
+  // console.log('mouseover');
   const idx = params.seriesIndex;
   const series = chartOption.value.series;
 
@@ -345,7 +405,7 @@ function updateSeriesHover(index, toHover) {
   const k = typeof status.k === 'number' ? status.k : 1 / 3;
   // 计算 newHeight：如果 hover，则加 5，否则按原 height
   const baseHeight = props.option.autoItemHeight > 0 ? props.option.autoItemHeight : props.option.itemHeight;
-  const newHeight = toHover ? baseHeight + 5 : baseHeight;
+  const newHeight = toHover ? baseHeight + 80 : baseHeight;
   // 更新 parametricEquation
   item.parametricEquation = getParametricEquation(start, end, isSelected, toHover, k, newHeight);
   // 更新状态
@@ -355,34 +415,6 @@ function updateSeriesHover(index, toHover) {
   };
 }
 
-// 初始化图表
-function initChart() {
-  // 生成基础的3D饼图配置(也就是默认的配置)
-  const baseOption = getPie3D(props.chartData, props.option.k);
-  // 合并用户配置，确保不修改原始对象
-  // const finalOption = Object.assign({}, baseOption, cloneDeep(props.option || {}));
-  const finalOption = merge({}, baseOption, cloneDeep(props.option || {}));
-  chartOption.value = finalOption;
-  // 设置图表配置
-  setOptions(chartOption.value);
-  // 等待 DOM + ECharts 初始化完成
-  nextTick(() => {
-    const chart = getInstance();
-    if (!chart) {
-      console.warn('ECharts 实例未初始化，事件绑定失败');
-      return;
-    }
-
-    // 避免重复绑定事件
-    // chart.off('click');
-    chart.off('mouseover');
-    chart.off('globalout');
-
-    // chart.on('click', handleClick);
-    chart.on('mouseover', handleMouseover);
-    chart.on('globalout', handleGlobalout);
-  });
-}
 function handleClick(params) {
   // 如果点击的是透明辅助环，则忽略
   if (params.seriesName === 'mouseoutSeries') return;
@@ -418,35 +450,10 @@ function handleClick(params) {
   series[idx].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h);
   series[idx].pieStatus.selected = isSelected;
 
-  // 更新记录选中的系列索引
   selectedIndex = isSelected ? idx : null;
-
-  // 更新图表配置
   setOptions(optionVal);
-  // 触发组件 click 事件供父组件使用
   emit('click', params);
 }
-// 在函数顶部声明（确保作用域覆盖所有需要的地方）
-window.debugZValues = {
-  current: null,
-  history: [],
-};
-
-// 组件挂载后绑定事件
-onMounted(() => {
-  initChart();
-});
-
-// 监听数据或配置变更，重新初始化图表
-watch(
-  [() => props.chartData, () => props.option],
-  () => {
-    if (props.chartData && props.chartData.length) {
-      initChart();
-    }
-  },
-  { immediate: true, deep: true }
-);
 </script>
 
 <style scoped>

new-digital-agriculture-screen/src/components/custom-echart-hyaline-cake/new-pie.vue

@@ -0,0 +1,114 @@
+<template>
+  <div ref="chartRef" class="chart-container" />
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useEcharts } from '@/hooks/useEcharts';
+
+const props = defineProps({
+  chartData: {
+    type: Array,
+    default: () => [],
+  },
+  // 内外半径百分比，比如 ['30%', '50%']
+  radius: {
+    type: Array,
+    default: () => ['30%', '50%'],
+  },
+  // 初始俯视角度
+  alpha: {
+    type: Number,
+    default: 30,
+  },
+  // 初始水平旋转角
+  beta: {
+    type: Number,
+    default: 0,
+  },
+  // 是否自动旋转
+  autoRotate: {
+    type: Boolean,
+    default: false,
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+});
+
+const chartRef = ref(null);
+const { setOptions } = useEcharts(chartRef);
+
+function buildOption(data) {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}：{c} ({d}%)',
+    },
+    legend: {
+      orient: 'vertical',
+      right: 20,
+      top: 'center',
+      textStyle: { color: '#fff' },
+    },
+    series: [
+      {
+        type: 'pie3D',
+        name: '3D 饼图',
+        data,
+        radius: props.radius,
+        center: ['50%', '50%'],
+        label: {
+          show: true,
+          formatter: '{b}\n{c}',
+        },
+        shading: 'realistic', // 光照效果
+        itemStyle: {
+          opacity: 1,
+          borderWidth: 1,
+          borderColor: '#333',
+        },
+        emphasis: {
+          label: { fontSize: 16, color: '#fff' },
+          itemStyle: { opacity: 1 },
+        },
+        viewControl: {
+          alpha: props.alpha, // 俯仰角
+          beta: props.beta, // 水平旋转角
+          autoRotate: props.autoRotate,
+          distance: 120,
+          zoomSensitivity: 0,
+          panSensitivity: 0,
+        },
+      },
+    ],
+  };
+}
+
+let option = buildOption(props.chartData);
+
+onMounted(() => {
+  setOptions(option);
+});
+
+watch(
+  () => props.chartData,
+  (v) => {
+    option = buildOption(v);
+    setOptions(option);
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: var(--chart-height);
+}
+/* 传递 height 到局部变量 */
+:root {
+  --chart-height: 300px;
+}
+</style>

new-digital-agriculture-screen/src/views/inputs/components/inputsOne.vue

@@ -42,20 +42,49 @@ const state = reactive({
       icon: 'rect',
       left: 'center',
       textStyle: {
-        color: '#fff', // 根据你的主题调整颜色
+        color: '#fff',
-        fontSize: 14,
+        fontSize: 16,
-      },
-      itemStyle: {
-        display: 'float',
-        top: '120px',
-        backgroundColor: 'rgba(255, 255, 255, 0.2)',
       },
       formatter: (name) => name,
     },
+    pie2dConfig: {
+      center: ['50%', '40%'],
+      label: {
+        show: true,
+        position: 'outside',
+        formatter: (params) => {
+          const total = 221.8 + 70.01; // 或动态计算
+          const percent = ((params.value / total) * 100).toFixed(0);
+          return `{name|${params.name}}\n{value|${params.value} 万吨\n（${percent}%）}`;
+        },
+        rich: {
+          name: {
+            fontSize: 16,
+            fontWeight: 'bold',
+            color: '#ffffff',
+            lineHeight: 20,
+            align: 'center',
+          },
+          value: {
+            fontSize: 16,
+            color: '#79F5AF',
+            lineHeight: 18,
+            align: 'center',
+          },
+        },
+        color: '#fff',
+      },
+      labelLine: {
+        show: true,
+        length: 40,
+        length2: 40,
+        lineStyle: { color: '#fff', width: 2 },
+      },
+    },
   },
   data: [
-    { value: 76, name: '产业运营平台' },
+    { value: 221.8, name: '产业运营平台' },
-    { value: 24, name: '其它', floatZ: 1 },
+    { value: 70.01, name: '其它', floatZ: 1 },
   ],
 });
 </script>

new-digital-agriculture-screen/src/views/inputs/components/inputsSix.vue

@@ -43,6 +43,7 @@ const chartConfig = ref({
       ['圆茄种苗', '0.3元/棵', '0.4元/棵'],
       ['高氮复合肥', '1850元/吨', '1980元/吨'],
       ['硫酸钾', '1250元/吨', '1380元/吨'],
+      ['高氮复合肥', '1850元/吨', '1980元/吨'],
       ['西红柿种苗', '0.3元/棵', '0.4元/棵'],
     ],
     // 样式配置

new-digital-agriculture-screen/src/views/land/components/landFour.vue

@@ -4,7 +4,7 @@
       <section class="_circle">{{ _circleNum }}</section>
       <section class="_text">{{ allNum }}万亩</section>
     </section>
-    <section class="_right _scroll">
+    <section ref="scrollRef" class="_right _scroll">
       <section
         v-for="(item, i) in list"
         :key="`right_${i}`"
@@ -23,23 +23,26 @@
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
+
 const props = defineProps({
   data: {
     type: Array,
-    default: () => {
+    default: () => [],
-      return [];
-    },
   },
 });
+
 const list = ref([]);
 const ac = ref(0);
 const allNum = ref(0);
 const currNum = ref(0);
+const scrollRef = ref(null);
+let timer = null;
 
 watch(
   () => props.data,
   () => {
+    allNum.value = 0;
     list.value = props.data.map((v, i) => {
       allNum.value += v.value;
       return {
@@ -49,29 +52,74 @@ watch(
       };
     });
     list.value.sort((a, b) => b.value - a.value);
+
+    if (list.value.length) {
+      ac.value = list.value[0].id;
+      currNum.value = list.value[0].value;
+      scrollToActive();
+      startAutoScroll();
+    }
   },
-  {
+  { immediate: true }
-    immediate: true,
-  }
 );
+
 function randomColor() {
-  let obj = {
+  return `rgb(${rand255()},${rand255()},${rand255()})`;
-    r: 0,
-    g: 0,
-    b: 0,
-  };
-  Object.keys(obj).forEach((key) => {
-    obj[key] = Math.floor(Math.random() * 256);
-  });
-  return `rgb(${obj.r},${obj.g},${obj.b})`;
 }
+function rand255() {
+  return Math.floor(Math.random() * 256);
+}
+
 function handleAc(val) {
   ac.value = val;
-  currNum.value = list.value.find((v) => v.id == val).value ?? 0;
+  const target = list.value.find((v) => v.id == val);
+  currNum.value = target?.value ?? 0;
+  scrollToActive();
 }
+
+function scrollToActive() {
+  nextTick(() => {
+    const container = scrollRef.value;
+    const activeEl = container?.querySelector('.list_item.active');
+    if (container && activeEl) {
+      const containerTop = container.scrollTop;
+      const containerHeight = container.clientHeight;
+      const elTop = activeEl.offsetTop;
+      const elHeight = activeEl.offsetHeight;
+      if (elTop < containerTop || elTop + elHeight > containerTop + containerHeight) {
+        container.scrollTop = elTop - containerHeight / 2 + elHeight / 2;
+      }
+    }
+  });
+}
+
 const _circleNum = computed(() => {
-  let s = ((currNum.value / allNum.value) * 100).toFixed(1);
+  if (!allNum.value) return '0%';
-  return s + '%';
+  return ((currNum.value / allNum.value) * 100).toFixed(1) + '%';
+});
+
+function startAutoScroll() {
+  stopAutoScroll();
+  let index = list.value.findIndex((item) => item.id === ac.value);
+  timer = setInterval(() => {
+    index = (index + 1) % list.value.length;
+    handleAc(list.value[index].id);
+  }, 2000);
+}
+
+function stopAutoScroll() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+onMounted(() => {
+  startAutoScroll();
+});
+
+onBeforeUnmount(() => {
+  stopAutoScroll();
 });
 </script>
 
@@ -156,5 +204,8 @@ const _circleNum = computed(() => {
       }
     }
   }
+  ._right::-webkit-scrollbar {
+    display: none;
+  }
 }
 </style>

new-digital-agriculture-screen/src/views/land/components/landSix.vue

@@ -17,7 +17,7 @@ const state = reactive({
   option: {
     k: 0,
     opacity: 1,
-    itemGap: 0.2,
+    itemGap: 0.1,
     legendSuffix: '万亩',
     itemHeight: 200,
     grid3D: {

new-digital-agriculture-screen/src/views/land/components/lsh.txt

@@ -1,344 +0,0 @@
-let selectedIndex = '';
-let hoveredIndex = '';
-option = getPie3D(
-    [
-        {
-            name: 'cc',
-            value: 47,
-            itemStyle: {
-                color: '#f77b66',
-            },
-        },
-        {
-            name: 'aa',
-            value: 44,
-            itemStyle: {
-                color: '#3edce0',
-            },
-        },
-        {
-            name: 'bb',
-            value: 32,
-            itemStyle: {
-                color: '#f94e76',
-            },
-        },
-        {
-            name: 'ee',
-            value: 16,
-            itemStyle: {
-                color: '#018ef1',
-            },
-        },
-        {
-            name: 'dd',
-            value: 23,
-            itemStyle: {
-                color: '#9e60f9',
-            },
-        },
-    ],
-    0.59
-);
-// 生成扇形的曲面参数方程
-function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-    // 计算
-    const midRatio = (startRatio + endRatio) / 2;
-
-    const startRadian = startRatio * Math.PI * 2;
-    const endRadian = endRatio * Math.PI * 2;
-    const midRadian = midRatio * Math.PI * 2;
-
-    // 如果只有一个扇形，则不实现选中效果。
-    if (startRatio === 0 && endRatio === 1) {
-        // eslint-disable-next-line no-param-reassign
-        isSelected = false;
-    }
-
-    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-    // eslint-disable-next-line no-param-reassign
-    k = typeof k !== 'undefined' ? k : 1 / 3;
-
-    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-    const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-    const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-
-    // 计算高亮效果的放大比例（未高亮，则比例为 1）
-    const hoverRate = isHovered ? 1.05 : 1;
-
-    // 返回曲面参数方程
-    return {
-        u: {
-            min: -Math.PI,
-            max: Math.PI * 3,
-            step: Math.PI / 32,
-        },
-
-        v: {
-            min: 0,
-            max: Math.PI * 2,
-            step: Math.PI / 20,
-        },
-
-        x(u, v) {
-            if (u < startRadian) {
-                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-
-        y(u, v) {
-            if (u < startRadian) {
-                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            if (u > endRadian) {
-                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-            }
-            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-
-        z(u, v) {
-            if (u < -Math.PI * 0.5) {
-                return Math.sin(u);
-            }
-            if (u > Math.PI * 2.5) {
-                return Math.sin(u) * h * 0.1;
-            }
-            // 当前图形的高度是Z根据h（每个value的值决定的）
-            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
-        },
-    };
-}
-// 生成模拟 3D 饼图的配置项
-function getPie3D(pieData, internalDiameterRatio) {
-    const series = [];
-    // 总和
-    let sumValue = 0;
-    let startValue = 0;
-    let endValue = 0;
-    const legendData = [];
-    const k =
-        typeof internalDiameterRatio !== 'undefined'
-            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
-            : 1 / 3;
-
-    // 为每一个饼图数据，生成一个 series-surface 配置
-    for (let i = 0; i < pieData.length; i += 1) {
-        sumValue += pieData[i].value;
-
-        const seriesItem = {
-            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-            type: 'surface',
-            parametric: true,
-            wireframe: {
-                show: false,
-            },
-            pieData: pieData[i],
-            pieStatus: {
-                selected: false,
-                hovered: false,
-                k,
-            },
-        };
-
-        if (typeof pieData[i].itemStyle !== 'undefined') {
-            const { itemStyle } = pieData[i];
-
-            // eslint-disable-next-line no-unused-expressions
-            typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
-            // eslint-disable-next-line no-unused-expressions
-            typeof pieData[i].itemStyle.opacity !== 'undefined'
-                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
-                : null;
-
-            seriesItem.itemStyle = itemStyle;
-        }
-        series.push(seriesItem);
-    }
-    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-    console.log(series);
-    for (let i = 0; i < series.length; i += 1) {
-        endValue = startValue + series[i].pieData.value;
-
-        series[i].pieData.startRatio = startValue / sumValue;
-        series[i].pieData.endRatio = endValue / sumValue;
-        series[i].parametricEquation = getParametricEquation(
-            series[i].pieData.startRatio,
-            series[i].pieData.endRatio,
-            false,
-            false,
-            k,
-            // 我这里做了一个处理，使除了第一个之外的值都是10
-            series[i].pieData.value === series[0].pieData.value ? 35 : 10
-        );
-
-        startValue = endValue;
-
-        legendData.push(series[i].name);
-    }
-
-    // 准备待返回的配置项，把准备好的 legendData、series 传入。
-    const option = {
-        // animation: false,
-        tooltip: {
-            formatter: (params) => {
-                if (params.seriesName !== 'mouseoutSeries') {
-                    return `${
-                        params.seriesName
-                    }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
-                        params.color
-                    };"></span>${option.series[params.seriesIndex].pieData.value}`;
-                }
-                return '';
-            },
-        },
-        xAxis3D: {
-            min: -1,
-            max: 1,
-        },
-        yAxis3D: {
-            min: -1,
-            max: 1,
-        },
-        zAxis3D: {
-            min: -1,
-            max: 1,
-        },
-        grid3D: {
-            show: false,
-            boxHeight: 5,
-            top: '-20%',
-            viewControl: {
-                // 3d效果可以放大、旋转等，请自己去查看官方配置
-                alpha: 35,
-                // beta: 30,
-                rotateSensitivity: 1,
-                zoomSensitivity: 0,
-                panSensitivity: 0,
-                autoRotate: true,
-                distance: 150,
-            },
-            // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
-            postEffect: {
-                // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
-                enable: false,
-                bloom: {
-                    enable: true,
-                    bloomIntensity: 0.1,
-                },
-                SSAO: {
-                    enable: true,
-                    quality: 'medium',
-                    radius: 2,
-                },
-                // temporalSuperSampling: {
-                //   enable: true,
-                // },
-            },
-        },
-        series,
-    };
-    return option;
-}
-//  修正取消高亮失败的 bug
-// 监听 mouseover，近似实现高亮（放大）效果
-myChart.on('mouseover', function (params) {
-    // 准备重新渲染扇形所需的参数
-    let isSelected;
-    let isHovered;
-    let startRatio;
-    let endRatio;
-    let k;
-    let i;
-
-    // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-    if (hoveredIndex === params.seriesIndex) {
-        return;
-
-        // 否则进行高亮及必要的取消高亮操作
-    } else {
-        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-        if (hoveredIndex !== '') {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-            isSelected = option.series[hoveredIndex].pieStatus.selected;
-            isHovered = false;
-            startRatio = option.series[hoveredIndex].pieData.startRatio;
-            endRatio = option.series[hoveredIndex].pieData.endRatio;
-            k = option.series[hoveredIndex].pieStatus.k;
-            i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;
-            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-            option.series[hoveredIndex].parametricEquation = getParametricEquation(
-                startRatio,
-                endRatio,
-                isSelected,
-                isHovered,
-                k,
-                i
-            );
-            option.series[hoveredIndex].pieStatus.hovered = isHovered;
-
-            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-            hoveredIndex = '';
-        }
-
-        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-        if (params.seriesName !== 'mouseoutSeries') {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-            isSelected = option.series[params.seriesIndex].pieStatus.selected;
-            isHovered = true;
-            startRatio = option.series[params.seriesIndex].pieData.startRatio;
-            endRatio = option.series[params.seriesIndex].pieData.endRatio;
-            k = option.series[params.seriesIndex].pieStatus.k;
-
-            // 对当前点击的扇形，执行高亮操作（对 option 更新）
-            option.series[params.seriesIndex].parametricEquation = getParametricEquation(
-                startRatio,
-                endRatio,
-                isSelected,
-                isHovered,
-                k,
-                option.series[params.seriesIndex].pieData.value + 5
-            );
-            option.series[params.seriesIndex].pieStatus.hovered = isHovered;
-
-            // 记录上次高亮的扇形对应的系列号 seriesIndex
-            hoveredIndex = params.seriesIndex;
-        }
-
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(option);
-    }
-});
-
-// 修正取消高亮失败的 bug
-myChart.on('globalout', function () {
-    if (hoveredIndex !== '') {
-        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-        isSelected = option.series[hoveredIndex].pieStatus.selected;
-        isHovered = false;
-        k = option.series[hoveredIndex].pieStatus.k;
-        startRatio = option.series[hoveredIndex].pieData.startRatio;
-        endRatio = option.series[hoveredIndex].pieData.endRatio;
-        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-        i = option.series[hoveredIndex].pieData.value === option.series[0].pieData.value ? 35 : 10;
-        option.series[hoveredIndex].parametricEquation = getParametricEquation(
-            startRatio,
-            endRatio,
-            isSelected,
-            isHovered,
-            k,
-            i
-        );
-        option.series[hoveredIndex].pieStatus.hovered = isHovered;
-
-        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-        hoveredIndex = '';
-    }
-
-    // 使用更新后的 option，渲染图表
-    myChart.setOption(option);
-});

sub-operation-service/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

sub-operation-service/src/views/brand/components/ApplyManagement.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-page-header>
+    <template #breadcrumb>
+      <el-breadcrumb separator="·">
+        <el-breadcrumb-item :to="{ path: './page-header.html' }"> 使用申请 </el-breadcrumb-item>
+        <el-breadcrumb-item>我要申请</el-breadcrumb-item>
+      </el-breadcrumb>
+    </template>
+  </el-page-header>
+  <el-space class="content-box" wrap>
+    <el-card v-for="o in 12" :key="o" class="box-card">
+      <div style="height: 100%" class="flex-clomn">
+        <img :src="url" alt="" class="img" />
+        <p>耿马绿色蔬菜</p>
+        <el-button class="button">我要申请</el-button>
+      </div>
+    </el-card>
+  </el-space>
+</template>
+<script setup>
+const goBack = () => {
+  console.log('go back');
+};
+</script>
+<style scoped lang="scss">
+.content-box {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+  .box-card {
+    box-shadow: none;
+    width: 224px;
+    height: 334px;
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 8;
+
+    .flex-clomn {
+      display: flex;
+      flex-direction: column;
+      gap: 8;
+    }
+    p {
+      text-align: center;
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .img {
+      width: 182px;
+      height: 182px;
+    }
+    .button {
+      width: 96px;
+      height: 40px;
+      background: #25bf82;
+      border-radius: 8px;
+      align-self: center;
+      color: #fff;
+    }
+  }
+  // .content-box::-webkit-scrollbar {
+  //   display: none; /* 隐藏滚动条 */
+  // }
+}
+</style>

sub-operation-service/src/views/brand/components/AuthManagement.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="auth-management">
+    <!-- 统计卡片 -->
+    <el-row :gutter="20" class="mb-24">
+      <el-col :span="12">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-icon green-bg">✔</div>
+          <div>
+            <div class="stat-number">999 件</div>
+            <div class="stat-label">授权产品</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-icon red-bg">⚠</div>
+          <div>
+            <div class="stat-number text-warning">199 件</div>
+            <div class="stat-label">临期产品</div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 状态筛选 -->
+    <el-tabs v-model="activeStatus" class="mb-24">
+      <el-tab-pane label="已授权" name="authorized" />
+      <el-tab-pane label="审批中" name="approving" />
+      <el-tab-pane label="已失效" name="expired" />
+    </el-tabs>
+
+    <!-- 产品列表 -->
+    <el-card shadow="never">
+      <div v-for="(product, index) in products" :key="product.id" class="product-item" :class="{ 'border-top': index > 0 }">
+        <img class="product-img" src="https://via.placeholder.com/80" alt="product" />
+        <div class="product-info">
+          <div class="product-header">
+            <el-tag :type="statusMap[product.status]">{{ product.statusLabel }}</el-tag>
+            <span class="product-name">{{ product.name }}</span>
+          </div>
+          <div class="product-details">
+            <div class="detail-item">
+              <label>检测批次：</label>
+              <span>{{ product.batch }}</span>
+            </div>
+            <div class="detail-item">
+              <label>授权期限：</label>
+              <span>{{ product.duration }}</span>
+            </div>
+            <div class="detail-item">
+              <label>到期时间：</label>
+              <span class="text-expire">{{ product.expireDate }}</span>
+            </div>
+          </div>
+        </div>
+        <el-button type="primary" plain size="small" @click="handleCertificate(product)"> 授权证书 </el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const activeStatus = ref('authorized');
+
+const statusMap = {
+  authorized: 'success',
+  approving: 'warning',
+  expired: 'danger',
+};
+
+const products = ref([
+  {
+    id: 1,
+    name: '耿马镇沙疆西红柿',
+    batch: '10021',
+    duration: '6个月',
+    expireDate: '2025.01.01',
+    status: 'authorized',
+    statusLabel: '已授权',
+  },
+  {
+    id: 2,
+    name: '孟弄乡沙地土豆',
+    batch: '10022',
+    duration: '6个月',
+    expireDate: '2025.01.02',
+    status: 'authorized',
+    statusLabel: '已授权',
+  },
+  {
+    id: 3,
+    name: '芒洪乡水果彩椒',
+    batch: '10021',
+    duration: '6个月',
+    expireDate: '2025.01.01',
+    status: 'authorized',
+    statusLabel: '已授权',
+  },
+]);
+
+const handleCertificate = (product) => {
+  console.log('查看证书:', product);
+};
+</script>
+
+<style lang="scss" scoped>
+.auth-management {
+  padding: 20px;
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    .stat-icon {
+      width: 50px;
+      height: 50px;
+      font-size: 24px;
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16px;
+    }
+    .green-bg {
+      background-color: #67c23a;
+    }
+    .red-bg {
+      background-color: #f56c6c;
+    }
+    .stat-number {
+      font-size: 20px;
+      font-weight: 600;
+      &.text-warning {
+        color: #e6a23c;
+      }
+    }
+    .stat-label {
+      color: #606266;
+    }
+  }
+
+  .product-item {
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+    &.border-top {
+      border-top: 1px solid #ebeef5;
+    }
+
+    .product-img {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+      border-radius: 12px;
+      margin-right: 20px;
+    }
+
+    .product-info {
+      flex: 1;
+
+      .product-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+
+        .product-name {
+          margin-left: 12px;
+          font-weight: 500;
+          font-size: 16px;
+        }
+      }
+
+      .product-details {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+
+        .detail-item {
+          label {
+            color: #909399;
+          }
+          .text-expire {
+            color: #e6a23c;
+          }
+        }
+      }
+    }
+
+    .el-button {
+      align-self: flex-end;
+      margin-left: 20px;
+    }
+  }
+
+  .mb-24 {
+    margin-bottom: 24px;
+  }
+}
+</style>

sub-operation-service/src/views/brand/components/UsageMonitor.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="usage-monitor">
+    <!-- 状态筛选 -->
+    <el-tabs v-model="activeStatus" class="mb-24">
+      <el-tab-pane label="在售中" name="onSale" />
+      <el-tab-pane label="未上架" name="notListed" />
+      <el-tab-pane label="已失效" name="expired" />
+    </el-tabs>
+
+    <!-- 商品列表 -->
+    <el-row :gutter="16">
+      <el-col v-for="product in filteredProducts" :key="product.id" :xs="24" :sm="12" :md="8" :lg="6" class="mb-16">
+        <el-card class="product-card">
+          <!-- 商品状态 -->
+          <div class="status-tag">
+            <el-tag :type="statusMap[product.status]" size="small">
+              {{ product.statusLabel }}
+            </el-tag>
+          </div>
+
+          <!-- 商品信息 -->
+          <div class="product-content">
+            <h4 class="product-name">{{ product.name }}</h4>
+
+            <div class="sales-info">
+              <div class="data-item">
+                <span class="label">月售</span>
+                <span class="value">{{ product.monthlySales }}</span>
+              </div>
+              <div class="data-item">
+                <span class="label">库存</span>
+                <span class="value">{{ product.stock }}</span>
+              </div>
+            </div>
+
+            <div class="price">
+              {{ product.price }}
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="product-actions">
+            <el-button v-if="product.status !== 'expired'" size="small" @click="handleInspect(product)">抽查</el-button>
+            <el-button v-if="product.status === 'onSale'" size="small" type="danger" plain @click="handleRevoke(product)">取消授权</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const activeStatus = ref('onSale');
+
+// 状态映射配置，用于 el-tag 的样式
+const statusMap = {
+  onSale: 'success',
+  notListed: 'info',
+  expired: 'danger',
+};
+
+// 商品数据，这里保持与原型图中的展示一致
+const products = ref([
+  {
+    id: 1,
+    name: '耿马镇沙瓢西红柿',
+    monthlySales: 999,
+    stock: 10000,
+    price: '￥3.0/kg',
+    status: 'onSale',
+    statusLabel: '在售中',
+  },
+  {
+    id: 2,
+    name: '昭通乡土黄瓜',
+    monthlySales: 750,
+    stock: 8500,
+    price: '￥2.5/kg',
+    status: 'onSale',
+    statusLabel: '在售中',
+  },
+  {
+    id: 3,
+    name: '昆明有机苹果',
+    monthlySales: 450,
+    stock: 5000,
+    price: '￥6.0/kg',
+    status: 'notListed', // 修改为 notListed，对应“未上架”
+    statusLabel: '未上架',
+  },
+  {
+    id: 4,
+    name: '楚雄散养鸡蛋',
+    monthlySales: 1200,
+    stock: 20000,
+    price: '￥8.0/斤',
+    status: 'onSale',
+    statusLabel: '在售中',
+  },
+]);
+
+// 根据当前选择状态过滤商品列表
+const filteredProducts = computed(() => {
+  return products.value.filter((item) => item.status === activeStatus.value);
+});
+
+// 操作处理逻辑
+const handleInspect = (product) => {
+  console.log('抽查商品:', product);
+};
+
+const handleRevoke = (product) => {
+  console.log('取消授权:', product);
+};
+</script>
+
+<style lang="scss" scoped>
+.usage-monitor {
+  padding: 20px;
+
+  .mb-24 {
+    margin-bottom: 24px;
+  }
+
+  .product-card {
+    position: relative;
+    margin-bottom: 16px;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .status-tag {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+    }
+
+    .product-content {
+      .product-name {
+        margin: 0 0 12px;
+        font-size: 16px;
+        color: #303133;
+      }
+
+      .sales-info {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 12px;
+
+        .data-item {
+          .label {
+            color: #909399;
+            margin-right: 4px;
+          }
+          .value {
+            font-weight: 500;
+          }
+        }
+      }
+
+      .price {
+        color: #f56c6c;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+
+    .product-actions {
+      margin-top: 16px;
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

sub-operation-service/src/views/brand/index.vue

@@ -1,19 +1,98 @@
 <template>
-  <div></div>
+  <div class="brand-layout">
+    <el-container class="brand-layout-container">
+      <el-aside class="brand-aside-menu">
+        <!-- 菜单部分 -->
+        <el-menu v-model:default-active="activeMenu" class="aside-menu" @select="handleMenuSelect">
+          <el-menu-item index="1">
+            <el-icon><Document /></el-icon>
+            <span>申请</span>
+          </el-menu-item>
+
+          <el-menu-item index="2">
+            <el-icon><Lock /></el-icon>
+            <span>授权管理</span>
+          </el-menu-item>
+
+          <el-menu-item index="3">
+            <el-icon><Monitor /></el-icon>
+            <span>使用监管</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <el-main class="brand-main">
+        <component :is="currentComponent" />
+      </el-main>
+    </el-container>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { Document, Lock, Monitor } from '@element-plus/icons-vue';
+import { ref, shallowRef } from 'vue';
+import ApplyManagement from './components/ApplyManagement.vue';
+import AuthManagement from './components/AuthManagement.vue';
+import UsageMonitor from './components/UsageMonitor.vue';
+// 响应式状态
+const activeMenu = ref('1');
+const currentComponent = shallowRef(ApplyManagement);
 
-/* --------------- data --------------- */
+// 菜单切换处理
-// #region
+const handleMenuSelect = (index) => {
-
+  const components = {
-// #endregion
+    1: ApplyManagement,
-
+    2: AuthManagement,
-/* --------------- methods --------------- */
+    3: UsageMonitor,
-// #region
+  };
-
+  currentComponent.value = components[index];
-// #endregion
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.brand-layout {
+  width: 100%;
+  height: calc(100vh - 230px);
+
+  .brand-layout-container {
+    height: 100%;
+    width: $width-main;
+    margin: auto;
+    .brand-aside-menu {
+      width: 240px;
+      background-color: $color-fff;
+      border-radius: 8px;
+      .aside-menu {
+        border-right: none;
+        .el-menu-item {
+          height: 48px;
+          line-height: 48px;
+          margin: 4px 8px;
+          border-radius: 4px;
+          &:hover {
+            background-color: #f5f7fa;
+          }
+          .el-icon {
+            color: #666;
+            margin-right: 12px;
+            font-size: 18px;
+            vertical-align: middle;
+          }
+          span {
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    .brand-main {
+      width: calc(100% - 240px - 16px);
+      margin-left: 16px;
+      // background-color: #f0f0f0;
+      padding: 0;
+    }
+    .brand-main::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+</style>