投入品监管

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

@@ -259,6 +259,7 @@ export default {
             },
           },
           legend: {
+            type: 'scroll',
             show: true,
             right: '5%',
             top: '25%',

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

@@ -4,11 +4,15 @@
 
 <script setup>
 import { ref, watch, onMounted, nextTick } from 'vue';
-import { cloneDeep } from 'lodash';
+import { merge, cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 
 defineOptions({ name: 'NewHyalineCake' });
 
+// 记录当前选中和高亮的系列索引
+let selectedIndex = null;
+let hoveredIndex = null;
+
 // 定义组件 props
 const props = defineProps({
   chartData: {
@@ -23,18 +27,13 @@ const props = defineProps({
   option: {
     type: Object,
     default: () => ({
-      // 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大
+      k: 1, // 控制内外径关系的系数，1 表示无内径（实心饼），值越小内径越大
-      k: 1,
+      itemGap: 0.1, // 扇形边缘向外偏移距离比例（用于选中效果）,扇形的间距，单位视图坐标，可调
-      // 扇形边缘向外偏移距离比例（用于选中效果），单位视图坐标，可调
+      itemHeight: 120, // 扇形高度（影响z轴拉伸程度）
-      itemGap: 0.2,
+      autoItemHeight: 0, // 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
-      // 扇形高度（影响z轴拉伸程度）
+      opacity: 0.6, // 透明度设置
-      itemHeight: 120,
+      legendSuffix: '', // 图例后缀
-      // 自动计算扇形高度时使用的系数（>0时 itemHeight 失效，使用 autoItemHeight * value ）
+      // TODO series
-      autoItemHeight: 0,
-      // 透明度设置
-      opacity: 0.6,
-      // 图例后缀
-      legendSuffix: '',
     }),
   },
   width: {
@@ -58,8 +57,19 @@ const { setOptions, getInstance } = useEcharts(chartRef);
 // 存储当前的 ECharts 配置项
 const chartOption = ref({});
 
-// 参数方程函数：生成每个扇形曲面的参数方程，用于 series-surface.parametricEquation
+/**
-function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+ * 获取 parametric 曲面方程
+ * @param {Number} startRatio 起点弧度
+ * @param {Number} endRatio 终点弧度
+ * @param {Boolean} isSelected 是否选中
+ * @param {Boolean} isHovered 是否高亮
+ * @param {Number} k 饼图内径/外径的占比
+ * @param {Number} h 饼图高度
+ * @param {Array} offsetZ 浮动系数
+ * @return {Object} parametric 曲面方程
+ */
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, offsetZ = 0) {
+  console.log('getParametricEquation params :>> ', startRatio, endRatio, isSelected, isHovered, k, h, offsetZ);
   // 中心弧度用于计算偏移方向
   const midRatio = (startRatio + endRatio) / 2;
   const startRadian = startRatio * Math.PI * 2;
@@ -70,7 +80,7 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
   if (startRatio === 0 && endRatio === 1) {
     isSelected = false;
   }
-  // k 取默认值 1/3（环的厚度比例），如果传入 k 则使用传入值
+  // k 取默认值 1/3（扇形内径/外径），如果传入 k 则使用传入值
   k = typeof k !== 'undefined' ? k : 1 / 3;
 
   // 计算选中效果的偏移量（基于扇形中心角度）
@@ -117,200 +127,241 @@ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h
     z(u, v) {
       // 在 u < -π/2 时，防止出现不必要的翻转，直接使用基本正弦
       if (u < -Math.PI * 0.5) {
-        return Math.sin(u);
+        return Math.sin(u) + offsetZ * h * 0.1;
       }
       // 在 u > 2.5π 时，处理扇形尾部厚度
       if (u > Math.PI * 2.5) {
-        return Math.sin(u) * h * 0.1;
+        return Math.sin(u) * h * 0.1 + offsetZ * h * 0.1;
       }
       // 正常情况下，z 根据 v 参数控制上下表面的高度差
       // 当前图形的高度是Z根据h（每个value的值决定的）
-      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+      return Math.sin(v) > 0 ? 1 * h * 0.1 + offsetZ * h * 0.1 : -1 + offsetZ * h * 0.1;
     },
   };
 }
 
-// 生成整个 3D 饼图的配置项
+/**
-function getPie3D(pieData) {
+ * 获取 3D 饼图的配置项
+ * @param {Array} pieData 饼图数据
+ * @param {Number} internalDiameterRatio 饼图内径/外径的占比
+ * @return {Object} 配置项
+ */
+function getPie3D(pieData, internalDiameterRatio) {
   const series = [];
   let sumValue = 0;
-  // 计算总值
+  let startValue = 0;
-  pieData.forEach((item) => {
+  let endValue = 0;
-    sumValue += item.value;
+  const legendData = [];
-  });
 
-  // k 为外径厚度系数
+  const k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
-  const k = props.option.k ?? 1;
+
+  // 计算总值
+  // pieData.forEach((item) => {
+  //   sumValue += item.value;
+  // });
   // 构建每个扇形的 series 数据
-  pieData.forEach((dataItem, idx) => {
+  for (let i = 0; i < pieData.length; i += 1) {
+    sumValue += pieData[i].value;
+
     const seriesItem = {
-      name: dataItem.name ?? `series${idx}`,
+      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
       type: 'surface',
       parametric: true,
       wireframe: { show: false },
-      pieData: dataItem,
+      pieData: pieData[i],
-      itemStyle: {
+      // itemStyle: {
-        opacity: props.option.opacity,
+      //   opacity: props.option.opacity,
-        borderRadius: 300,
+      //   borderRadius: 300,
-        borderColor: '#fff',
+      //   borderColor: '#fff',
-        borderWidth: 0,
+      // }
-      },
       pieStatus: {
-        selected: false,
+        selected: true,
         hovered: false,
         k,
       },
     };
-    // 合并自定义样式（如果有）
+    if (typeof pieData[i].itemStyle !== 'undefined') {
-    if (dataItem.itemStyle) {
+      const { itemStyle } = pieData[i];
-      const customStyle = {};
+      typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
-      if (dataItem.itemStyle.color !== undefined) {
+      typeof pieData[i].itemStyle.opacity !== 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
-        customStyle.color = dataItem.itemStyle.color;
+
-      }
+      seriesItem.itemStyle = itemStyle;
-      if (dataItem.itemStyle.opacity !== undefined) {
-        customStyle.opacity = dataItem.itemStyle.opacity;
-      }
-      seriesItem.itemStyle = { ...seriesItem.itemStyle, ...customStyle };
     }
     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;
 
-  // 计算每个扇形的 startRatio/endRatio 和参数方程
+    const z = series[i]?.pieData?.floatZ ?? 0;
-  let startValue = 0;
+    series[i].pieData.startRatio = startValue / sumValue;
-  series.forEach((serie) => {
+    series[i].pieData.endRatio = endValue / sumValue;
-    const endValue = startValue + serie.pieData.value;
+    series[i].parametricEquation = getParametricEquation(
-    const startRatio = startValue / sumValue;
+      series[i].pieData.startRatio,
-    const endRatio = endValue / sumValue;
+      series[i].pieData.endRatio,
-    serie.pieData.startRatio = startRatio;
+      series[i].pieStatus.selected,
-    serie.pieData.endRatio = endRatio;
+      series[i].pieStatus.hovered,
-    // 初始均为未选中未高亮
-    serie.parametricEquation = getParametricEquation(
-      startRatio,
-      endRatio,
-      false,
-      true,
       k,
-      // 扇形高度：根据配置自动计算或使用固定高度
+      props.option.autoItemHeight > 0 ? props.option.autoItemHeight * series[i].pieData.value : props.option.itemHeight,
-      props.option.autoItemHeight > 0 ? props.option.autoItemHeight * serie.pieData.value : props.option.itemHeight
+      z
     );
+
     startValue = endValue;
-  });
-
-  // 添加一个透明圆环，用于实现 hover 在扇形外面时取消高亮
-  series.push({
-    name: 'mouseoutSeries',
-    type: 'surface',
-    parametric: true,
-    wireframe: { show: false },
-    itemStyle: { opacity: 0 },
-    parametricEquation: {
-      u: { min: 0, max: Math.PI * 2, step: Math.PI / 20 },
-      v: { min: 0, max: Math.PI, step: Math.PI / 20 },
-      x(u, v) {
-        return Math.sin(v) * Math.sin(u) + Math.sin(u);
-      },
-      y(u, v) {
-        return Math.sin(v) * Math.cos(u) + Math.cos(u);
-      },
-      z(u, v) {
-        return Math.cos(v) > 0 ? 0.1 : -0.1;
-      },
-    },
-  });
 
+    legendData.push(series[i].name);
+  }
   // 基础配置：坐标轴、视角、图例、提示框等
-  const option = Object.assign(
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
-    {
+  const option = {
-      tooltip: {
+    legend: {
-        backgroundColor: 'rgba(18, 55, 85, 0.8)',
+      type: 'scroll',
-        borderColor: '#35d0c0',
+      show: true,
+      right: '5%',
+      top: '25%',
+      orient: 'vertical',
+      icon: 'circle',
+      itemHeight: 12,
+      itemWidth: 12,
+      itemGap: 10,
+      textStyle: {
         color: '#fff',
-        position: (point, params, dom, rect, size) => {
+        fontSize: 14,
-          // 动态调整 tooltip 位置，避免溢出
+        fontWeight: '400',
-          let x = point[0],
-            y = point[1];
-          const [viewW, viewH] = size.viewSize;
-          const [boxW, boxH] = size.contentSize;
-          if (x + boxW > viewW) x -= boxW;
-          if (y + boxH > viewH) y -= boxH;
-          if (x < 0) x = 0;
-          if (y < 0) y = 0;
-          return [x, y];
-        },
-        formatter: (params) => {
-          // 只对非透明环（实际扇形）显示信息
-          if (params.seriesName !== 'mouseoutSeries') {
-            return `
-            <span style="color:#FFF">
-              ${params.seriesName}<br/>
-              <span style="
-                display:inline-block;
-                margin-right:5px;
-                border-radius:10px;
-                width:10px;
-                height:10px;
-                background-color:${params.color};"></span>
-              ${chartOption.value.series[params.seriesIndex].pieData.value}
-            </span>`;
-          }
-          return '';
-        },
       },
-      xAxis3D: { min: -1, max: 1 },
+      formatter: (name) => {
-      yAxis3D: { min: -1, max: 1 },
+        if (props.chartData.length) {
-      zAxis3D: { min: -1, max: 1 },
+          const item = props.chartData.filter((item) => item.name === name)[0];
-      grid3D: {
+          return `  ${name}      ${item.value}${props.option.legendSuffix ?? ''}`;
-        show: false,
+        }
-        boxHeight: 5,
-        top: '0',
-        left: '-20%',
-        viewControl: {
-          // 3D 视角设置
-          alpha: 60, // 俯仰角度
-          distance: 240, // 视角距离
-          rotateSensitivity: 10,
-          zoomSensitivity: 10,
-          panSensitivity: 10,
-          autoRotate: true,
-          autoRotateAfterStill: 2,
-        },
       },
-      legend: {
-        show: true,
-        selectedMode: false,
-        right: '5%',
-        top: '25%',
-        orient: 'vertical',
-        icon: 'circle',
-        itemHeight: 12,
-        itemWidth: 12,
-        itemGap: 10,
-        textStyle: {
-          color: '#fff',
-          fontSize: 14,
-          fontWeight: '400',
-        },
-        // 图例标签显示名称和数值
-        formatter: (name) => {
-          const item = props.chartData.find((d) => d.name === name);
-          return item ? `  ${name}      ${item.value}${props.option.legendSuffix || ''}` : name;
-        },
-      },
-      series,
     },
-    // 将外部配置项覆盖基础配置
+    // animation: false,
-    props.option
+    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: true,
+      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;
 }
 
+// 监听 mouseover，近似实现高亮（放大）效果
+function handleMouseover(params) {
+  console.log('mouseover');
+  const idx = params.seriesIndex;
+  const series = chartOption.value.series;
+
+  // 如果当前扇形已经高亮，不做任何操作
+  if (hoveredIndex === idx) return;
+
+  // 1. 取消上一个高亮
+  if (hoveredIndex !== null && hoveredIndex >= 0 && series[hoveredIndex]) {
+    updateSeriesHover(hoveredIndex, false);
+  }
+
+  // 2. 设置当前扇形高亮（排除辅助环）
+  if (params.seriesName !== 'mouseoutSeries' && series[idx]) {
+    updateSeriesHover(idx, true);
+    hoveredIndex = idx;
+  } else {
+    hoveredIndex = null;
+  }
+
+  // 3. 重新渲染
+  setOptions(chartOption.value);
+}
+
+function handleGlobalout() {
+  const idx = hoveredIndex;
+  if (idx !== null && idx >= 0 && chartOption.value.series[idx]) {
+    updateSeriesHover(idx, false);
+    hoveredIndex = null;
+    setOptions(chartOption.value);
+  }
+}
+
+// 抽取高亮／取消高亮的公共逻辑
+function updateSeriesHover(index, toHover) {
+  const item = chartOption.value.series[index];
+  // 安全取 pieStatus，fallback 到空对象
+  const status = item.pieStatus || {};
+  const isSelected = !!status.selected;
+  const start = item.pieData?.startRatio ?? 0;
+  const end = item.pieData?.endRatio ?? 1;
+  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;
+  // 更新 parametricEquation
+  item.parametricEquation = getParametricEquation(start, end, isSelected, toHover, k, newHeight);
+  // 更新状态
+  item.pieStatus = {
+    ...status,
+    hovered: toHover,
+  };
+}
+
 // 初始化图表
 function initChart() {
-  // 生成基础的3D饼图配置
+  // 生成基础的3D饼图配置(也就是默认的配置)
-  const baseOption = getPie3D(props.chartData);
+  const baseOption = getPie3D(props.chartData, props.option.k);
   // 合并用户配置，确保不修改原始对象
-  const finalOption = Object.assign({}, baseOption, cloneDeep(props.option || {}));
+  // const finalOption = Object.assign({}, baseOption, cloneDeep(props.option || {}));
+  const finalOption = merge({}, baseOption, cloneDeep(props.option || {}));
   chartOption.value = finalOption;
   // 设置图表配置
   setOptions(chartOption.value);
@@ -323,11 +374,11 @@ function initChart() {
     }
 
     // 避免重复绑定事件
-    chart.off('click');
+    // chart.off('click');
     chart.off('mouseover');
     chart.off('globalout');
 
-    chart.on('click', handleClick);
+    // chart.on('click', handleClick);
     chart.on('mouseover', handleMouseover);
     chart.on('globalout', handleGlobalout);
   });
@@ -380,95 +431,6 @@ window.debugZValues = {
   current: null,
   history: [],
 };
-function handleMouseover(params) {
-  if (params.seriesName === 'mouseoutSeries') return;
-
-  const chart = getInstance();
-  const optionVal = chart.getOption(); // 改用实时获取最新配置
-  const series = optionVal.series;
-  const idx = params.seriesIndex;
-  const hh = series[idx].parametricEquation.z();
-  window.debugZValues.current = hh;
-  window.debugZValues.history.push({
-    event: 'mouseover',
-    series: series[idx].name,
-    zValue: hh,
-    time: new Date().toISOString(),
-  });
-  console.log('当前Z值:', hh, '历史记录:', window.debugZValues.history);
-  // 打印移入前的完整状态（调试用）
-  console.log(
-    '[移入] 当前所有扇形状态',
-    series.map((s) => ({
-      name: s.name,
-      hovered: s.pieStatus?.hovered,
-      selected: s.pieStatus?.selected,
-      height: s.parametricEquation?.z(Math.PI, Math.PI),
-    }))
-  );
-
-  // 取消之前的高亮（确保只修改状态，不破坏参数方程）
-  if (hoveredIndex !== null && hoveredIndex !== idx) {
-    const prev = series[hoveredIndex];
-    prev.pieStatus.hovered = false; // 仅修改状态
-    prev.parametricEquation = getParametricEquation(
-      // 重新生成正确方程
-      prev.pieData.startRatio,
-      prev.pieData.endRatio,
-      prev.pieStatus.selected,
-      false, // isHovered=false
-      prev.pieStatus.k,
-      prev.pieData.value
-    );
-  }
-
-  // 设置新高亮
-  const current = series[idx];
-  current.pieStatus.hovered = true;
-  current.parametricEquation = getParametricEquation(
-    current.pieData.startRatio,
-    current.pieData.endRatio,
-    current.pieStatus.selected,
-    true, // isHovered=true
-    current.pieStatus.k,
-    current.pieData.value
-  );
-
-  hoveredIndex = idx;
-  chart.setOption({ series }); // 仅更新series部分
-}
-function handleGlobalout() {
-  if (hoveredIndex !== null) {
-    const chart = getInstance();
-    const optionVal = chart.getOption();
-    const series = optionVal.series;
-    const prev = series[hoveredIndex];
-
-    // 打印修复前的错误状态（调试用）
-    console.warn('[修复前] 异常状态', {
-      name: prev.name,
-      z: prev.parametricEquation.z(Math.PI, Math.PI),
-      equation: prev.parametricEquation,
-    });
-
-    // 重置状态并重新生成方程
-    prev.pieStatus.hovered = false;
-    prev.parametricEquation = getParametricEquation(
-      prev.pieData.startRatio,
-      prev.pieData.endRatio,
-      prev.pieStatus.selected,
-      false, // isHovered=false
-      prev.pieStatus.k,
-      prev.pieData.value
-    );
-
-    hoveredIndex = null;
-    chart.setOption({ series }, { replaceMerge: 'series' }); // 强制替换series
-  }
-}
-// 记录当前选中和高亮的系列索引
-let selectedIndex = null;
-let hoveredIndex = null;
 
 // 组件挂载后绑定事件
 onMounted(() => {

new-digital-agriculture-screen/src/components/custom-echart-line/index.vue

@@ -108,35 +108,31 @@ export default {
       }
       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 = [];
+      // 1. 优先使用外部传入的series配置（如果存在）
-      typeArr.forEach((type, index) => {
+      const externalSeries = props.option?.series || [];
-        let obj = {
+      option.series = typeArr.map((type, index) => {
-          name: type,
+        // 2. 合并外部配置（按type匹配）
-          type: props.type,
+        const externalConfig = externalSeries.find((s) => s.name === type) || {};
-          smooth: true,
+
-        };
+        // 3. 动态生成数据
-        if (props.option?.color) {
+        const data = xAxisData.map((x) => {
-          obj.areaStyle = setAreaStyle(props.option?.color[index]);
+          const item = props.chartData.find((item) => item.type === type && item.name === x);
-        }
+          return item ? item.value : null;
-        const findItem = props.chartData.find((item) => item.type == type);
-        if (findItem && findItem.color) {
-          obj.color = findItem.color;
-          obj.areaStyle = setAreaStyle(findItem.color[index]);
-        }
-        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;
+
-        seriesData.push(obj);
+        // 4. 合并配置（外部配置优先，内部生成配置补充）
+        return {
+          type: props.type, // 默认类型
+          name: type, // 必须字段
+          data, // 动态生成的数据
+          smooth: true, // 默认平滑
+          ...externalConfig, // 外部配置覆盖内部默认值
+          // 特殊处理areaStyle（保留您的颜色逻辑）
+          areaStyle: externalConfig.areaStyle || (props.option?.color ? setAreaStyle(props.option.color[index]) : undefined),
+        };
       });
-      option.series = seriesData;
       option.xAxis.data = xAxisData;
+      // console.log(option.series);
       setOptions(option);
       startAutoPlay({
         interval: 2000,

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

@@ -1,116 +1,235 @@
 <template>
-  <custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-line :chart-data="chartData" :option="chartOption" height="100%" />
 </template>
+
 <script setup>
-import { reactive, watch } from 'vue';
+import { ref } from 'vue';
-import { isEmpty, sleep } from '@/utils';
 
-const props = defineProps({
+// 1. 数据生成（12个月完整数据）
-  data: {
+const chartData = ref(
-    type: Array,
+  (() => {
-    default: () => [],
+    // 定义波动参数
-  },
+    const waveConfig = {
-  query: {
+      // [月份索引]: 调整系数 (1.0为基础值)
-    type: String,
+      peaks: { 3: 1.6, 9: 1.5 }, // 4月和10月高峰 (数组索引从0开始)
-    default: '',
+      valleys: { 0: 0.7, 6: 0.8, 11: 0.6 }, // 1月、7月、12月低谷
-  },
+    };
-});
 
-const state = reactive({
+    // 生成符合波动要求的数据
-  option: {
+    const generateWaveData = (baseVal) => {
-    color: ['#35D0C0'],
+      return Array.from({ length: 12 }, (_, i) => {
-    grid: {
+        if (waveConfig.peaks[i]) return baseVal * waveConfig.peaks[i];
-      left: '5%',
+        if (waveConfig.valleys[i]) return baseVal * waveConfig.valleys[i];
-      right: '5%',
+        // 平滑过渡值（在基础值附近波动）
-      bottom: '5%',
+        return baseVal * (0.9 + Math.random() * 0.2);
-      top: '10%',
+      }).map((v) => parseFloat(v.toFixed(1)));
-      containLabel: true,
+    };
+
+    // 各品类基础值
+    return [
+      { type: '种子种苗', values: generateWaveData(15) },
+      { type: '化肥', values: generateWaveData(20) },
+      { type: '农药', values: generateWaveData(10) },
+    ].flatMap(({ type, values }) =>
+      values.map((value, i) => ({
+        type,
+        name: `${i + 1}月`,
+        value,
+      }))
+    );
+  })()
+);
+function hexToRGBA(hex, alpha = 1) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// 2. 图表配置
+const chartOption = ref({
+  color: ['#02FD94', '#FEF906', '#01FEFD'],
+  legend: {
+    data: ['种子种苗', '化肥', '农药'],
+    top: 8,
+    itemWidth: 12, // 矩形宽度
+    itemHeight: 12, // 矩形高度
+    icon: 'rect',
+    itemGap: 20,
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
     },
-    tooltip: {
+    backgroundColor: 'rgba(0,0,0,0.5);',
-      trigger: 'axis',
+    borderColor: '#35d0c0',
-      axisPointer: {
+    borderRadius: 8,
-        type: 'shadow',
+    formatter: (params) => `
-      },
+      <div style="font-weight:bold;margin-bottom:5px;color:#fff">${params[0].name}</div>
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      ${params
-      borderColor: '#35d0c0',
+        .map(
-      formatter: (data) => {
+          (p) => `
-        const params = data[0];
+        <div style="display:flex;align-items:center;margin:3px 0;color:#fff">
-        let str = `<div class="custom-echarts-tips">
+          <span style="display:inline-block;width:8px;height:8px;background:${p.color};margin-right:6px;color:#fff"></span>
-          <span>${params.name}</span><br/>
+          ${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
-          <span>${params.marker} ${params.data} 万元</span>
+        </div>
-        </div>`;
+      `
-        return str;
+        )
-      },
+        .join('')}
+    `,
+    extraCssText: 'backdrop-filter: blur(8px);',
+  },
+  grid: {
+    left: '3%',
+    right: '5%',
+    bottom: '5%',
+    top: '20%',
+    containLabel: true,
+  },
+  yAxis: {
+    type: 'value',
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisLabel: {
+      interval: 0,
+      margin: 15,
+      align: 'center',
     },
-    xAxis: {
+    axisTick: {
-      type: 'category',
+      show: false, // 隐藏刻度线
-      // name: '年份',
+    },
-      axisTick: {
+  },
-        show: false,
+  series: [
-        alignWithLabel: false,
+    {
-        interval: 'auto',
+      name: '种子种苗',
-        inside: false,
+      type: 'line',
-        length: 5,
+      smooth: true,
-        lineStyle: {
+      symbol: 'none',
-          type: 'solid',
+      lineStyle: {
-          width: 1,
+        width: 2,
-          color: 'rgba(28, 158, 222, 1)',
+        color: {
+          type: 'linear',
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            { offset: 0, color: hexToRGBA('#02FD94', 0) },
+            { offset: 0.2, color: hexToRGBA('#02FD94', 1) },
+            { offset: 0.8, color: hexToRGBA('#02FD94', 1) },
+            { offset: 1, color: hexToRGBA('#02FD94', 0) },
+          ],
         },
       },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: hexToRGBA('#02FD94', 1) }, // 底部较实
+            { offset: 1, color: hexToRGBA('#02FD94', 0) }, // 顶部较透明
+          ],
+        },
+      },
+
+      emphasis: {
+        focus: 'series',
+      },
     },
-    yAxis: {
+    {
-      type: 'value',
+      name: '化肥',
-      // name: '',
+      type: 'line',
+      smooth: true,
+      symbol: 'none', // 关键配置：隐藏数据点标记
+      lineStyle: {
+        width: 2,
+        color: {
+          // 线条首尾渐淡
+          type: 'linear',
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            { offset: 0, color: hexToRGBA('#E0A21C', 0) },
+            { offset: 0.2, color: hexToRGBA('#E0A21C', 1) },
+            { offset: 0.8, color: hexToRGBA('#E0A21C', 1) },
+            { offset: 1, color: hexToRGBA('#E0A21C', 0) },
+          ],
+        },
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: hexToRGBA('#FEF906', 1) },
+            { offset: 1, color: hexToRGBA('#FEF906', 0) },
+          ],
+        },
+      },
+
+      emphasis: {
+        focus: 'series',
+      },
     },
-  },
+    {
-  data: [],
+      name: '农药',
+      type: 'line',
+      smooth: true,
+      symbol: 'none', // 关键配置：隐藏数据点标记
+      lineStyle: {
+        width: 2,
+        color: {
+          // 线条首尾渐淡
+          type: 'linear',
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            { offset: 0, color: hexToRGBA('#01FEFD', 0) },
+            { offset: 0.2, color: hexToRGBA('#01FEFD', 1) },
+            { offset: 0.8, color: hexToRGBA('#01FEFD', 1) },
+            { offset: 1, color: hexToRGBA('#01FEFD', 0) },
+          ],
+        },
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: hexToRGBA('#01FEFD', 1) },
+            { offset: 1, color: hexToRGBA('#01FEFD', 0) },
+          ],
+        },
+      },
+
+      emphasis: {
+        focus: 'series',
+      },
+    },
+    // 其他系列同理...
+  ],
 });
-
-const loadData = async (code = '') => {
-  state.loading = true;
-  // GetInputsInfo()
-  //   .then((res) => {
-  //     if (res.code === 200) {
-  //       state.data = res.data;
-  //     }
-  //   })
-  //   .catch((err) => {
-  //     app.$message.error(err.msg);
-  //   });
-  await sleep(500);
-  state.data = [
-    { value: 5, name: '2020' },
-    { value: 36, name: '2021' },
-    { value: 70, name: '2022' },
-    { value: 56, name: '2023' },
-    { value: 70, name: '2024' },
-    { value: 20, name: '2025' },
-  ];
-};
-
-watch(
-  () => props.data,
-  (val) => {
-    if (!isEmpty(val)) {
-      state.data = val;
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
-
-watch(
-  () => props.query,
-  (val) => {
-    if (!isEmpty(val)) {
-      loadData(val);
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
 </script>
+
+<style scoped>
+/* 调整倾斜月份标签的间距 */
+:deep(.echarts-axis-x .echarts-axis-tick) {
+  margin-top: 10px;
+}
+</style>

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

@@ -1,272 +1,84 @@
 <template>
-  <custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" @click="handleClick" />
+  <div class="order-stats">
+    <el-row :gutter="20">
+      <el-col v-for="item in state.list" :key="item.label" :span="12">
+        <div class="order-stats-item flex-column">
+          <div class="order-stats-value">
+            {{ item.value }}<span>{{ item.unit }}</span>
+          </div>
+          <div class="order-stats-label">{{ item.label }}</div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
-<script setup>
-import { reactive, watch } from 'vue';
-import { isEmpty } from '@/utils';
 
-const props = defineProps({
+<script setup>
-  data: {
+import { reactive } from 'vue';
-    type: Array,
-    default: () => [],
-  },
-});
 
 const state = reactive({
-  option: {},
+  list: [
-  data: [],
+    {
-  text: '',
+      label: '订单金额',
+      value: '548.86',
+      unit: '万元',
+    },
+    {
+      label: '订单数量',
+      value: '110554',
+      unit: '笔',
+    },
+  ],
 });
-
-function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-  // 计算
-  let midRatio = (startRatio + endRatio) / 2;
-  let startRadian = startRatio * Math.PI * 2;
-  let endRadian = endRatio * Math.PI * 2;
-  let midRadian = midRatio * Math.PI * 2;
-  // 如果只有一个扇形，则不实现选中效果。
-  if (startRatio === 0 && endRatio === 1) {
-    isSelected = false;
-  }
-  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-  k = typeof k !== 'undefined' ? k : 1 / 3;
-  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-  // 计算高亮效果的放大比例（未高亮，则比例为 1）
-  let 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: function (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: function (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: function (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;
-      }
-      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
-    },
-  };
-}
-
-function fomatFloat(num, n) {
-  var f = parseFloat(num);
-  if (isNaN(f)) {
-    return false;
-  }
-  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
-  var s = f.toString();
-  var rs = s.indexOf('.');
-  if (rs < 0) {
-    rs = s.length;
-    s += '.';
-  }
-  while (s.length <= rs + n) {
-    s += '0';
-  }
-  return s;
-}
-
-function getHeight3D(series, height) {
-  series.sort((a, b) => {
-    return b.pieData.value - a.pieData.value;
-  });
-  return (height * 20) / series[0].pieData.value;
-}
-
-function getPie3D(pieData, internalDiameterRatio) {
-  let series = [];
-  let sumValue = 0;
-  let startValue = 0;
-  let endValue = 0;
-  let legendData = [];
-  let legendBfb = [];
-  let k = 1 - internalDiameterRatio;
-  pieData.sort((a, b) => {
-    return b.value - a.value;
-  });
-  for (let i = 0; i < pieData.length; i++) {
-    sumValue += pieData[i].value;
-    let 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: k,
-      },
-
-      //设置饼图在容器中的位置(目前没发现啥用)
-      //   center: ['50%', '100%']
-    };
-
-    //曲面的颜色、不透明度等样式。
-    if (typeof pieData[i].itemStyle != 'undefined') {
-      let itemStyle = {};
-      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
-      typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
-      seriesItem.itemStyle = itemStyle;
-    }
-    series.push(seriesItem);
-  }
-
-  legendData = [];
-  legendBfb = [];
-  for (let i = 0; i < series.length; i++) {
-    endValue = startValue + series[i].pieData.value * 1;
-    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,
-      series[i].pieData.value
-    );
-    startValue = endValue;
-    let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
-    legendData.push({
-      name: series[i].name,
-      value: bfb,
-    });
-    legendBfb.push({
-      name: series[i].name,
-      value: bfb,
-    });
-  }
-
-  let boxHeight = getHeight3D(series, 15);
-  let option = {
-    legend: {
-      data: legendData,
-      color: ['#8FD7FC', '#466BE7', '#F4BB29', '#49C384', '#8FD7FC', '#466BE7', '#F4BB29', '#49C384'],
-      bottom: 10,
-      itemGap: 20,
-      show: true,
-      icon: 'rect',
-      itemHeight: 10,
-      itemWidth: 10,
-      textStyle: {
-        fontSize: 12,
-        color: '#B8DDFF',
-        lineHeight: 20,
-      },
-    },
-    title: {
-      text: '',
-      x: 'center',
-      y: 'center',
-      textStyle: {
-        rich: {
-          a: {
-            fontSize: 20,
-            color: '#fff',
-          },
-          c: {
-            fontSize: 12,
-            color: '#fff',
-            padding: [15, 0],
-          },
-        },
-      },
-    },
-    xAxis3D: {
-      min: -1,
-      max: 1,
-    },
-    yAxis3D: {
-      min: -1,
-      max: 1,
-    },
-    zAxis3D: {
-      min: -1,
-      max: 1,
-    },
-    grid3D: {
-      show: false,
-      boxHeight: boxHeight,
-      left: 0,
-      top: -30,
-      viewControl: {
-        alpha: 55, //角度(这个很重要 调节角度的)
-        distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-        rotateSensitivity: 1, //设置为0无法旋转
-        zoomSensitivity: 0, //设置为0无法缩放
-        panSensitivity: 0, //设置为0无法平移
-        autoRotate: true, //自动旋转
-      },
-    },
-    series: series,
-  };
-  return option;
-}
-
-const initData = (pieData = []) => {
-  const option = getPie3D(pieData, 0.8);
-  const { name, value } = option.series[0].pieData;
-  option.title.text = `{a|${value}%}{c|\n${name}}`;
-  state.option = option;
-  state.data = option.series;
-};
-
-const handleClick = (params) => {
-  const findItem = state.data.find((el) => el.name === params.seriesName);
-  state.option.title.text = `{a|${findItem?.pieData?.value}%}{c|\n${params.seriesName}}`;
-};
-
-watch(
-  () => props.data,
-  (val) => {
-    if (!isEmpty(val)) {
-      const pieData = val.map((row) => {
-        return {
-          name: row.category,
-          value: row.percentage,
-        };
-      });
-      initData(pieData);
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
 </script>
+
+<style lang="scss" scoped>
+.order-stats {
+  padding: 20px;
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  &-value {
+    width: 160px;
+    height: 160px;
+    line-height: 100px;
+    text-align: center;
+    margin: 0 auto;
+    background-image: url('@/assets/images/inputs/order.webp');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    font-size: 24px;
+    font-weight: 400;
+    color: #fff;
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+
+    span {
+      font-size: 16px;
+    }
+  }
+
+  &-label {
+    width: 120px;
+    height: 24px;
+    line-height: 24px;
+    margin: 10px auto 0;
+    font-size: 16px;
+    color: #fff;
+    text-align: center;
+    background: url('@/assets/images/inputs/bg_label.png') center center no-repeat;
+    text-shadow:
+      0 0 10px #01eeff,
+      0 0 20px #01eeff,
+      0 0 30px #01eeff;
+  }
+}
+</style>

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

@@ -2,16 +2,22 @@
   <centerMap :dialog-title="'投入品'" @mapclick="doMapclick">
     <template #header>
       <div class="land-map-pop-header">
-        <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
+        <div class="title">{{ currentRegion?.name || '投入品' }}</div>
+        <a class="view-case" @click.prevent="handleViewCase">查看案件 &gt;</a>
       </div>
     </template>
     <template #dialogContent>
       <div class="land-map-pop-content">
-        <div v-for="(n, index) in list" :key="index" class="list-item">
+        <div class="section-title">投入品管控情况：</div>
-          <div class="title">
+        <div class="main-content">
-            <span class="title-val"> {{ n.title }}</span>
+          <div class="item">
+            <div class="label">巡检次数</div>
+            <div class="value green">562次</div>
+          </div>
+          <div class="item">
+            <div class="label">案件次数</div>
+            <div class="value red">22次</div>
           </div>
-          <div class="value">{{ n.value }}{{ n.unit }}</div>
         </div>
       </div>
     </template>
@@ -19,85 +25,75 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
-
-const unit = ref('家');
-const list = reactive([
-  { title: '监管机构', value: '1', color: '#01FEFD', unit: '家' },
-  { title: '监管人员', value: '2', color: '#FEF906', unit: '人' },
-  { title: '村级监管员', value: '5', color: '#02FD94', unit: '人' },
-  { title: '农资经营单位', value: '42', color: '#FE7F03', unit: '家' },
-  { title: '生产主体', value: '2', color: '#41BDFC', unit: '家' },
-  { title: '投入品规模', value: '3000', color: '#FC0003', unit: '万元' },
-]);
 
 let currentRegion = ref(null);
 const doMapclick = (data) => {
   currentRegion.value = data;
-  list.forEach((v) => {
+};
-    v.value = Number(v.value) + 1 * (Math.floor(Math.random() * (6 - 2 + 1)) + 2.12).toFixed(0);
+
-  });
+const handleViewCase = () => {
+  // 跳转查看案件逻辑
 };
 </script>
 
 <style lang="scss" scoped>
 .land-map-pop-header {
-  display: inline-flex;
+  display: flex;
   justify-content: space-between;
-  width: 100%;
+  align-items: center;
+  padding: 0 6px;
   margin-top: 3px;
-  .title,
+
-  .value {
-    display: inline-block;
-    vertical-align: middle;
-    color: $color-white;
-  }
   .title {
     font-size: 18px;
+    font-weight: bold;
+    color: #00f9ff;
   }
-  .value {
+
-    font-size: 14px;
+  .view-case {
+    font-size: 16px;
+    color: #00ff99;
+    text-decoration: none;
+    cursor: pointer;
   }
 }
+
 .land-map-pop-content {
   width: 100%;
-  gap: 10px;
+  padding: 4px 10px;
-  display: inline-flex;
+  color: #ffffff;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  .list-item {
-    width: calc((100% - 10px) / 2);
-    display: inline-flex;
-    justify-content: space-between;
-    padding: 6px 0;
-    .title {
-      display: inline-flex;
-      justify-content: flex-start;
-      .before {
-        display: inline-flex;
-        flex-direction: column;
-        justify-content: center;
-      }
-      .b-content {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        display: inline-block;
-      }
-      .before,
-      .title-val {
-        display: inline-block;
-        vertical-align: middle;
-        padding: 0 5px 0 2px;
-        color: $color-custom-main;
-      }
-    }
 
-    .value {
+  .section-title {
-      display: inline-block;
+    margin-bottom: 12px;
-      text-align: right;
+    font-size: 15px;
-      color: $color-white;
+    text-align: left;
-      font-size: 12px;
+  }
+
+  .main-content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .item {
+      display: flex;
+      justify-content: space-between;
+      font-size: 16px;
+
+      .label {
+        color: #ffffff;
+      }
+
+      .value {
+        &.green {
+          color: #01ffb1;
+        }
+
+        &.red {
+          color: #ff4242;
+        }
+      }
     }
   }
 }

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

@@ -1,74 +1,79 @@
 <template>
-  <el-row :gutter="20">
+  <div class="inputs">
-    <el-col v-for="(item, index) in state.list" :key="item.label" :span="12">
+    <h2 class="inputs-title">全县投入品数量：291.85万吨</h2>
-      <div class="inputs-item flex-row">
+    <new-hyaline-cake :chart-data="state.data" :option="state.option" :width="'100%'" :height="'188px'" />
-        <span class="inputs-item-icon">
+  </div>
-          <img :src="getAssetsFile(`images/inputs/${index + 1}.png`)" />
-        </span>
-        <div class="inputs-item-info flex-column">
-          <b>{{ item.label }}</b>
-          <div class="inputs-item-value flex-row">
-            <em>{{ item.value }}</em>
-            <span>{{ item.unit }}</span>
-          </div>
-        </div>
-      </div>
-    </el-col>
-  </el-row>
 </template>
 <script setup>
 import { reactive, watch } from 'vue';
-import { getAssetsFile } from '@/utils';
-import { isEmpty } from '@/utils';
-
-const props = defineProps({
-  data: {
-    type: Array,
-    default: () => [],
-  },
-});
-
 const state = reactive({
-  list: [],
+  option: {
-});
+    k: 0,
-
+    opacity: 0.8,
-watch(
+    itemGap: 0.1,
-  () => props.data,
+    // legendSuffix: '万吨',
-  (val) => {
+    itemHeight: 200,
-    if (!isEmpty(val)) {
+    startAngle: 60,
-      state.list = val;
+    grid3D: {
-    }
+      show: false,
+      boxHeight: 2,
+      top: '-20',
+      bottom: '10',
+      // left: '-20%',
+      viewControl: {
+        //3d效果可以放大、旋转等，请自己去查看官方配置
+        alpha: 40, //角度(这个很重要 调节角度的)
+        beta: -40,
+        distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+        rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
+        zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
+        panSensitivity: 0, //设置平移灵敏度，0无法平移
+        autoRotate: false, //自动旋转
+        autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
+      },
+    },
+    legend: {
+      show: true,
+      top: 'bottom',
+      orient: 'horizontal',
+      itemWidth: 12, // 矩形宽度
+      itemHeight: 12, // 矩形高度
+      itemGap: 20,
+      icon: 'rect',
+      left: 'center',
+      textStyle: {
+        color: '#fff', // 根据你的主题调整颜色
+        fontSize: 14,
+      },
+      itemStyle: {
+        display: 'float',
+        top: '120px',
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+      },
+      formatter: (name) => name,
+    },
   },
-  {
+  data: [
-    deep: true,
+    { value: 76, name: '产业运营平台' },
-    immediate: true,
+    { value: 24, name: '其它', floatZ: 1 },
-  }
+  ],
-);
+});
 </script>
 <style lang="scss" scoped>
 .inputs {
-  &-item {
+  &-title {
-    align-items: center;
+    width: 270px;
+    height: 40px;
+    line-height: 40px;
+    margin: 24px auto 0;
+    background-image: url('@/assets/images/inputs/bg_title.png');
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    font-size: 20px;
+    font-weight: 400;
     color: #fff;
-    padding: 10px 0;
+    text-align: center;
-
-    &-icon {
-      margin-right: 16px;
-    }
-
-    &-info {
-      font-size: 16px;
-      font-weight: bold;
-    }
-
-    &-value {
-      margin-top: 10px;
-      justify-content: space-between;
-      em {
-        color: #02fd94;
-        font-style: normal;
-      }
-    }
   }
 }
 </style>

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

@@ -1,93 +1,194 @@
 <template>
-  <div class="board">
+  <div height="100%">
-    <custom-scroll-board v-if="state.loading" :chart-config="state.options" />
+    <custom-scroll-board :chart-config="chartConfig" />
+    <div class="announcement-bar">
+      <!-- 喇叭图标 -->
+      <div class="horn-icon">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M3 10V14C3 15.1 3.9 16 5 16H6L9 19V5L6 8H5C3.9 8 3 8.9 3 10Z" fill="#34f9b7" />
+          <path d="M16.5 12C16.5 10.23 15.48 8.71 14 7.97V16.02C15.48 15.29 16.5 13.77 16.5 12Z" fill="#34f9b7" />
+          <path
+            d="M14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.72 18.01 4.14 14 3.23Z"
+            fill="#34f9b7"
+          />
+        </svg>
+      </div>
+
+      <!-- 滚动内容容器 -->
+      <div class="scroll-container" ref="scrollContainer">
+        <div class="scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }">
+          <span class="text-content">
+            距今产业运营平台已为全县投入品花费节省约
+            <span class="highlight">¥1256.8 万元</span>
+            （截至{{ currentDate }}）
+          </span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, watch } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
-import { isEmpty } from '@/utils';
+
-const props = defineProps({
+// 表格配置
-  data: {
+const chartConfig = ref({
-    type: Array,
+  attr: {
-    default: () => [],
+    w: 200, // 容器宽度
+    h: 192, // 容器高度
+  },
+  option: {
+    header: ['投入品种类', '平台价格', '市场价格'],
+    dataset: [
+      ['圆茄种苗', '0.3元/棵', '0.4元/棵'],
+      ['高氮复合肥', '1850元/吨', '1980元/吨'],
+      ['硫酸钾', '1250元/吨', '1380元/吨'],
+      ['西红柿种苗', '0.3元/棵', '0.4元/棵'],
+    ],
+    // 样式配置
+    headerBGC: 'rgba(53, 208, 192, 0.4)', // 表头背景
+    oddRowBGC: 'rgba(0, 59, 81, 0.1)', // 奇数行背景
+    evenRowBGC: 'rgba(10, 39, 50, 0.1)', // 偶数行背景
+    headerHeight: 40, // 表头高度
+    columnWidth: [300, 200, 200], // 列宽分配
+    align: ['left', 'center', 'center'], // 列对齐方式
+    rowNum: 4, // 可视行数
+    waitTime: 3, // 滚动间隔(秒)
+    carousel: 'single', // 滚动方式
+    hoverPause: true, // 悬停暂停
   },
 });
 
-const header = ['白名单企业', '产品名称', '黑名单企业', '产品名称'];
+// 动态数据
-const len = header.length;
+const currentDate = ref('2023年12月15日');
-const state = reactive({
+const scrollPosition = ref(0);
-  loading: false,
+const scrollContainer = ref(null);
-  options: {
+let animationFrameId = null;
-    attr: { w: 200, h: 240 },
-    option: {
-      header,
-      dataset: [
-        // ['富农种源', '京科824', '南方农业', '京科824'],
-        // ['富农种源', '京科824', '南方农业', '京科824'],
-        // ['富农种源', '京科824', '南方农业', '京科824'],
-        // ['富农种源', '京科824', '南方农业', '京科824'],
-        // ['富农种源', '京科824', '南方农业', '京科824'],
-        // ['富农种源', '京科824', '南方农业', '京科824'],
-        // ['富农种源', '京科824', '南方农业', '京科824'],
-      ],
-      index: false,
-      columnWidth: [100, 100, 100, 100],
-      align: new Array(len).fill('center'),
-      rowNum: 5,
-      waitTime: 5,
-      headerHeight: 40,
-      carousel: 'single',
-      headerBGC: 'rgba(53, 208, 192, 0.4)',
-      oddRowBGC: 'rgba(0, 59, 81, 0.1)',
-      evenRowBGC: 'rgba(10, 39, 50, 0.1)',
-    },
-  },
-});
 
-const genBlankAndWihteList = (data = []) => {
+// 滚动控制
-  const rList = data.filter((row) => row.currentRating === 'r');
+const startScrolling = () => {
-  const bList = data.filter((row) => row.currentRating === 'b');
+  const scrollSpeed = -60; // px/s
-  const len = rList.length >= bList.length ? rList.length : bList.length;
+  let lastTime = 0;
-  let list = new Array(len).fill(['', '', '', '']);
+
-  rList.forEach((item, index) => {
+  const scroll = (timestamp) => {
-    let temp = new Array(4).fill('');
+    if (!lastTime) lastTime = timestamp;
-    temp[0] = item.belongCompany;
+    const delta = (timestamp - lastTime) / 1000; // 秒
-    temp[1] = item.comName;
+    lastTime = timestamp;
-    list[index] = temp;
+
-  });
+    scrollPosition.value += scrollSpeed * delta;
-  bList.forEach((item, index) => {
+
-    list[index][2] = item.belongCompany;
+    // 循环逻辑
-    list[index][3] = item.comName;
+    const containerWidth = scrollContainer.value?.clientWidth || 0;
-  });
+    const contentWidth = scrollContainer.value?.scrollWidth || 0;
-  return list;
+
+    if (Math.abs(scrollPosition.value) > contentWidth + 50) {
+      scrollPosition.value = containerWidth;
+    }
+
+    animationFrameId = requestAnimationFrame(scroll);
+  };
+
+  animationFrameId = requestAnimationFrame(scroll);
 };
 
-watch(
+onMounted(() => {
-  () => props.data,
+  // 获取真实日期
-  (val) => {
+  const now = new Date();
-    if (!isEmpty(val)) {
+  currentDate.value = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
-      state.options.option.dataset = genBlankAndWihteList(val);
+
-      state.loading = true;
+  startScrolling();
-    }
+});
-  },
+
-  {
+onUnmounted(() => {
-    deep: true,
+  cancelAnimationFrame(animationFrameId);
-    immediate: true,
+});
-  }
-);
 </script>
+
 <style scoped lang="scss">
-.board {
+/* 自定义样式 */
-  padding: 10px 0px;
+.dv-scroll-board {
+  font-family: 'PingFang SC', 'PingFang SC-Regular', sans-serif;
+  color: #ffffff;
+  font-size: 16px;
 
-  &:deep(.row-item) {
+  :deep(.header-item) {
-    font-size: 16px;
+    text-align: left;
+    font-weight: 700;
+    padding-left: 16px;
+  }
 
+  :deep(.row-item) {
+    transition: all 0.5s ease;
+    font-weight: 400;
     .ceil {
-      &:nth-child(3),
+      text-align: left;
-      &:nth-child(4) {
+      padding-left: 16px;
-        color: $color-danger;
+    }
+  }
+}
+
+.announcement-bar {
+  $primary-color: #0e6965;
+  $secondary-color: #34f9b7;
+  $text-color: #b5f5ff;
+  $bg-color: rgba(0, 60, 107, 0.8);
+
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1.25rem;
+  background: $bg-color;
+  border-radius: 0.5rem;
+  border-left: 0.25rem solid $secondary-color;
+  box-shadow: 0 0.25rem 1rem rgba($primary-color, 0.2);
+  overflow: hidden;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 3rem;
+    background: linear-gradient(90deg, rgba($bg-color, 0) 0%, $bg-color 100%);
+    z-index: 1;
+  }
+
+  .horn-icon {
+    flex-shrink: 0;
+    margin-right: 1rem;
+    color: $secondary-color;
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+      filter: drop-shadow(0 0 0.25rem rgba($secondary-color, 0.5));
+    }
+  }
+
+  .scroll-container {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    height: 1.5rem;
+
+    .scroll-content {
+      position: absolute;
+      white-space: nowrap;
+      will-change: transform;
+      padding-right: 2rem; // 防止文字紧贴边缘
+
+      .text-content {
+        color: $text-color;
+        font-size: 1.125rem;
+        font-weight: 500;
+        text-shadow: 0 0 0.5rem rgba($primary-color, 0.3);
+      }
+
+      .highlight {
+        color: $secondary-color;
+        font-weight: bold;
+        margin: 0 0.25rem;
       }
     }
   }

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

@@ -1,94 +1,120 @@
 <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" :is-series="true" />
 </template>
-<script setup>
-import { reactive, watch } from 'vue';
-import { isEmpty } from '@/utils';
 
-const props = defineProps({
+<script setup>
-  data: {
+import { reactive } from 'vue';
-    type: Array,
+
-    default: () => [],
+const rawData = [
-  },
+  { name: '勐撒镇', type: '种子农药', value: 15 },
+  { name: '勐撒镇', type: '化肥', value: 30 },
+  { name: '勐撒镇', type: '农药', value: 22 },
+  { name: '勐永镇', type: '种子农药', value: 18 },
+  { name: '勐永镇', type: '化肥', value: 28 },
+  { name: '勐永镇', type: '农药', value: 20 },
+  { name: '孟定镇', type: '种子农药', value: 21 },
+  { name: '孟定镇', type: '化肥', value: 25 },
+  { name: '孟定镇', type: '农药', value: 24 },
+  { name: '勐简乡', type: '种子农药', value: 13 },
+  { name: '勐简乡', type: '化肥', value: 20 },
+  { name: '勐简乡', type: '农药', value: 15 },
+  { name: '贺派乡', type: '种子农药', value: 17 },
+  { name: '贺派乡', type: '化肥', value: 18 },
+  { name: '贺派乡', type: '农药', value: 16 },
+  { name: '芒洪乡', type: '种子农药', value: 14 },
+  { name: '芒洪乡', type: '化肥', value: 23 },
+  { name: '芒洪乡', type: '农药', value: 21 },
+  { name: '大兴乡', type: '种子农药', value: 12 },
+  { name: '大兴乡', type: '化肥', value: 17 },
+  { name: '大兴乡', type: '农药', value: 14 },
+  { name: '耿马镇', type: '种子农药', value: 19 },
+  { name: '耿马镇', type: '化肥', value: 26 },
+  { name: '耿马镇', type: '农药', value: 23 },
+];
+
+const towns = ['勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '芒洪乡', '大兴乡', '耿马镇'];
+const types = ['种子农药', '化肥', '农药'];
+const colors = ['#15EB90', '#F3F70F', '#08DFE4'];
+
+const series = types.map((type, idx) => {
+  return {
+    name: type,
+    type: 'bar',
+    barWidth: 16,
+    stack: 'total',
+    itemStyle: {
+      color: colors[idx],
+      barBorderRadius: 8,
+      shadowColor: colors[idx],
+      // shadowBlur: 8,
+      shadowOffsetY: -16,
+    },
+    z: 10 - idx,
+    data: towns.map((town) => {
+      const found = rawData.find((d) => d.name === town && d.type === type);
+      return found ? found.value : 0;
+    }),
+  };
 });
 
 const state = reactive({
+  data: rawData,
   option: {
+    legend: {
+      show: false,
+    },
     grid: {
-      left: '5%',
+      top: '20%',
-      right: '5%',
+      left: '3%',
+      right: '4%',
       bottom: '5%',
-      top: '10%',
       containLabel: true,
     },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        lineStyle: {
+          opacity: 1,
+          width: 0,
+        },
+      },
+      axisLabel: {
+        margin: 8,
+      },
+      axisTick: {
+        show: false,
+        interval: 0,
+      },
+      data: towns,
+    },
+    yAxis: {
+      type: 'value',
+    },
+    color: colors,
+    series,
     tooltip: {
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      backgroundColor: 'rgba(0,0,0,0.6);',
       borderColor: '#35d0c0',
-      formatter: (data) => {
+      borderRadius: 8,
-        const params = data[0];
+      formatter: (params) => `
-        let str = `<div class="custom-echarts-tips">
+      <div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
-          <span>${params.name}</span><br/>
+      ${params
-          <span>${params.marker} ${params.data} 万元</span>
+        .map(
-        </div>`;
+          (p) => `
-        return str;
+        <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>
-    barStyle: {
+        </div>
-      barWidth: 15,
+      `
-      itemStyle: {
+        )
-        borderRadius: [8, 8, 0, 0],
+        .join('')}
-      },
+    `,
-      color: {
+      extraCssText: 'backdrop-filter: blur(8px);',
-        type: 'linear',
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        colorStops: [
-          { offset: 0, color: '#35D0C0' },
-          { offset: 1, color: '#35D0C0' },
-        ],
-        global: false,
-      },
-    },
-    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: '面积(万亩)',
     },
   },
-  data: [],
 });
-
-watch(
-  () => props.data,
-  (val) => {
-    if (!isEmpty(val)) {
-      state.data = val;
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="inputs">
-    <h2 class="inputs-title">检测批次：{{ state.counts }}次</h2>
+    <h2 class="inputs-title">巡检次数：{{ state.counts }}次</h2>
     <el-row>
       <el-col v-for="item in state.list" :key="item.label" :span="12">
         <div class="inputs-item flex-column">
@@ -31,7 +31,7 @@ const state = reactive({
     },
     {
       label: '检测覆盖率',
-      value: '99.98%',
+      value: '25.46%',
     },
   ],
 });

new-digital-agriculture-screen/src/views/inputs/index.vue

@@ -2,21 +2,21 @@
   <el-row class="data-home-index">
     <el-col :span="6" class="left-charts">
       <div class="left-charts-item">
-        <customBack top-title="投入品监管体系建设" :top-postion="'left'">
+        <customBack top-title="全县投入品数量占比" :top-postion="'left'">
           <template #back>
             <inputsOne :data="state.data.one" />
           </template>
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="投入品检测监管" :top-postion="'left'">
+        <customBack top-title="产业运营平台投入品数量" :top-postion="'left'">
           <template #back>
-            <inputsTwo :data="state.data.InputDetector" />
+            <inputsFive ref="fiveRef" :data="state.data.five" :query="state.queryCode" />
           </template>
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="投入品金额对比" :top-postion="'left'">
+        <customBack top-title="全县投入品使用情况" :top-postion="'left'">
           <template #back>
             <inputsThere :data="state.data.there" />
           </template>
@@ -29,43 +29,38 @@
 
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
-        <customBack top-title="生产主体统计" :top-postion="'right'">
+        <customBack top-title="今日投入品价格" :top-postion="'right'">
           <template #back>
-            <inputsFour :data="state.data.ProductEntity" />
+            <inputsSix :data="state.data.BlackWhite" />
+          </template>
+        </customBack>
+      </div>
+      <div class="right-charts-item">
+        <customBack top-title="投入品管控情况" :top-postion="'right'">
+          <template #back>
+            <inputsTwo :data="state.data.InputDetector" />
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
         <customBack
-          top-title="历年投入品规模对比"
+          top-title="产业运营平台订单统计"
           :top-postion="'right'"
-          :down-title="'全县'"
+          :down-title="'按日'"
           :label-field="'label'"
           :value-field="'value'"
           :down-width="'100px'"
           :options="[
-            { label: '全县', value: '530926' },
+            { label: '按日', value: '0' },
-            { label: '耿马镇', value: '42611' },
+            { label: '按月', value: '1' },
-            { label: '勐撒镇', value: '9259' },
+            { label: '按季度', value: '2' },
-            { label: '勐永镇', value: '17787' },
+            { label: '按年', value: '3' },
-            { label: '孟定镇', value: '42610' },
-            { label: '勐简乡', value: '17788' },
-            { label: '贺派乡', value: '40161' },
-            { label: '四排山乡', value: '40163' },
-            { label: '大兴乡', value: '40159' },
           ]"
           :is-down="true"
-          @command="handleCommand"
+          command="handleCommand"
         >
           <template #back>
-            <inputsFive ref="fiveRef" :data="state.data.five" :query="state.queryCode" />
+            <inputsFour :data="state.data.ProductEntity" />
-          </template>
-        </customBack>
-      </div>
-      <div class="right-charts-item">
-        <customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
-          <template #back>
-            <inputsSix :data="state.data.BlackWhite" />
           </template>
         </customBack>
       </div>
@@ -140,7 +135,7 @@ const loadData = async () => {
         unit: '家',
       },
     ],
-    InputDetector: [{ JCFGL: 33.33, JCYPPC: 15, zero_count: 13, JCHGL: 86.67, counts: 45 }],
+    InputDetector: [{ JCFGL: 33.33, JCYPPC: 15684, zero_count: 13, JCHGL: 86.67, counts: 45 }],
     there: [
       { value: 530, name: '种子' },
       { value: 1215, name: '化肥' },

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

@@ -23,13 +23,13 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
-      className: 'custom-tooltip-container',
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
       backgroundColor: 'rgba(0,0,0,0.6);',
       borderColor: '#35d0c0',
+      borderRadius: 8,
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips" >

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

@@ -22,13 +22,13 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
-      className: 'custom-tooltip-container', // 自定义父容器类名
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
       backgroundColor: 'rgba(0,0,0,0.5);',
       borderColor: '#35d0c0',
+      borderRadius: 8,
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips" >
@@ -42,7 +42,7 @@ const state = reactive({
     barStyle: {
       barWidth: 16,
       itemStyle: {
-        borderRadius: 8, // 设置柱子的圆角半径
+        borderRadius: 8,
       },
       color: {
         type: 'linear',

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

@@ -15,14 +15,14 @@ const props = defineProps({
 
 const state = reactive({
   option: {
-    k: 0.5,
+    k: 0,
     opacity: 1,
-    itemGap: 0.1,
+    itemGap: 0.2,
     legendSuffix: '万亩',
     itemHeight: 200,
     grid3D: {
       show: false,
-      boxHeight: 1,
+      boxHeight: 3,
       top: '0',
       left: '-20%',
       viewControl: {

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

@@ -27,13 +27,13 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
-      className: 'custom-tooltip-container',
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
       backgroundColor: 'rgba(0,0,0,0.6);',
       borderColor: '#35d0c0',
+      borderRadius: 8,
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">