生产经营主体和农产品溯源调整(未完)

main/.yarnrc.yml

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

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

@@ -29,6 +29,10 @@ export default {
       type: String,
       default: 'calc(100vh - 78px)',
     },
+    activeIndex: {
+      type: Number,
+      default: 1,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -56,13 +60,16 @@ export default {
           zlevel: 1,
           name: '漏斗图',
           type: 'funnel',
+          animation: true, // 开启动画
+          animationDuration: 500, // 过渡时间（毫秒）
+          animationEasing: 'cubicOut', // 缓动效果
           top: '11%',
           left: 'center',
           width: '25%',
           sort: 'ascending',
           gap: 0,
           label: {
-            show: true,
+            show: false,
             position: 'outside',
             width: '200px',
             align: 'right',
@@ -79,9 +86,8 @@ export default {
             padding: [5, 6], // 增加标签内边距
           },
           labelLine: {
-            show: true,
+            show: false,
-            length: 10,
+            length: 30,
-            length2: 50,
             smooth: true,
             lineStyle: {
               width: 1,
@@ -90,28 +96,6 @@ export default {
               type: 'solid',
             },
           },
-          // 添加第二段折线
-          // markLine: {
-          //   symbol: 'none', // 隐藏端点
-          //   lineStyle: {
-          //     type: 'solid',
-          //     color: '#fff',
-          //     width: 1,
-          //   },
-          //   data: [
-          //     // 从默认 labelLine 的终点到自定义位置
-          //     [
-          //       {
-          //         coord: [50, 50], // 第一段线的终点（需动态计算）
-          //         name: 'Label1',
-          //       },
-          //       {
-          //         coord: [80, 50], // 第二段线的终点
-          //         name: 'Label1',
-          //       },
-          //     ],
-          //   ],
-          // },
           itemStyle: {
             show: false,
             borderColor: '#fff',
@@ -141,12 +125,50 @@ export default {
       }
     );
 
+    watch(
+      () => props.activeIndex,
+      (newVal) => {
+        showLabel(newVal);
+      }
+    );
+
     function initCharts() {
       if (props.option) {
         Object.assign(option, cloneDeep(props.option));
       }
       option.series[0].data = props.chartData;
       setOptions(option);
+      showLabel(props.activeIndex);
+    }
+
+    // 动态生成带label状态的option
+    function getOption(activeIndex) {
+      // 浅拷贝数据（保留原始引用关系）
+      let myData = props.chartData.map((item, idx) => ({
+        ...item,
+        label: {
+          show: idx === activeIndex, // 只显示当前选中层级的标签
+        },
+        labelLine: {
+          show: idx === activeIndex, // 只显示当前选中层级的引导线
+        },
+      }));
+      let myOption = {
+        ...option,
+        series: [
+          {
+            ...option.series[0],
+            data: myData,
+          },
+        ],
+      };
+      return myOption;
+    }
+
+    // 切换显示层级
+    function showLabel(activeIndex) {
+      const newOption = getOption(activeIndex);
+      setOptions(newOption);
     }
 
     function onClick(params) {

new-digital-agriculture-screen/src/components/custom-scroll-title/index.vue

@@ -176,7 +176,7 @@ function handleTitleClick(val) {
     position: relative;
     width: 31%;
     height: 100%;
-    overflow: hidden;
+    // overflow: hidden;
     line-height: 90px;
     .title_content {
       position: absolute;

new-digital-agriculture-screen/src/router/modules/v2.js

@@ -50,7 +50,7 @@ export default {
       meta: { title: '生产经营主体', icon: '' },
     },
     {
-      path: '/new-digital-agriculture-screen/trace',
+      path: '/new-digital-agriculture-screen/v2/trace',
       name: 'trace',
       component: () => import('@/views/trace/index.vue'),
       meta: { title: '农产品溯源', icon: '' },

new-digital-agriculture-screen/src/utils/echarts.js

@@ -11,6 +11,7 @@ import {
   GaugeChart,
   ScatterChart,
   EffectScatterChart,
+  FunnelChart,
 } from 'echarts/charts';
 import 'echarts-gl';
 import 'echarts-liquidfill';
@@ -70,6 +71,7 @@ echarts.use([
   MarkPointComponent,
   MarkLineComponent,
   MarkAreaComponent,
+  FunnelChart,
 ]);
 
 export default echarts;

new-digital-agriculture-screen/src/views/business/components/businessFive.vue

@@ -20,10 +20,10 @@ const state = reactive({
   option: {
     // 数据
     dataset: [],
-    type: 'column',
+    type: 'row',
     rowNum: 6,
     isAnimation: true,
-    waitTime: 5,
+    waitTime: 12,
     unit: '万元',
     sort: true,
     height: 12,
@@ -32,9 +32,9 @@ const state = reactive({
     borderRadius: '12px',
     carousel: 'single',
     indexPrefix: 'TOP',
-    indexFontSize: 12,
+    indexFontSize: 22,
-    leftFontSize: 14,
+    leftFontSize: 16,
-    rightFontSize: 14,
+    rightFontSize: 16,
     valueFormatter: (item) => {
       return item.value;
     },

new-digital-agriculture-screen/src/views/business/components/businessFour.vue

@@ -44,7 +44,28 @@ const state = reactive({
         radius: '80%',
         center: ['50%', '50%'],
         backgroundStyle: {
-          color: 'transparent',
+          color: {
+            type: 'radial',
+            x: 0.5,
+            y: 0.5,
+            r: 0.8,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(220, 255, 255, 0.3)', // 中心半透明白
+              },
+              {
+                offset: 0.7,
+                color: 'rgba(0, 231, 240, 0.2)', // 中间荧光青
+              },
+              {
+                offset: 1,
+                color: 'rgba(0, 150, 200, 0.3)', // 外围高饱和科技青
+              },
+            ],
+            globalCoord: false,
+          },
+          blur: 10, // 模糊半径
         },
         data: [],
         amplitude: 12, //水波振幅
@@ -57,6 +78,7 @@ const state = reactive({
           },
         },
         outline: {
+          // 圆圈配置
           borderDistance: 2,
           itemStyle: {
             borderWidth: 2,
@@ -85,6 +107,8 @@ const state = reactive({
           },
         },
         itemStyle: {
+          opacity: 1, //水的透明度
+          // 水波配置
           color: {
             type: 'linear', // 线性渐变
             x: 0,
@@ -92,8 +116,9 @@ const state = reactive({
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(13, 204, 163, 0.6)' },
+              { offset: 0, color: '#6af7e8' }, // 更亮的蓝色
-              { offset: 1, color: 'rgba(71, 202, 219, 1)' },
+              // { offset: 0.7, color: '#5fcbc1' },
+              { offset: 1, color: '#55e7ff' },
             ],
             global: false, // 默认为 false
           },
@@ -107,8 +132,9 @@ watch(
   () => props.data,
   (val) => {
     if (!isEmpty(val)) {
-      state.option.series[0].data = [0, val.percent];
+      // 设置水波纹位置
-      state.option.series[0].label.formatter = val.percent * 100 + '%';
+      state.option.series[0].data = [val.percent + 0.05, val.percent]; //设置水的数量
+      state.option.series[0].label.formatter = val.percent * 100 + '%'; //显示文本
     }
   },
   {

new-digital-agriculture-screen/src/views/business/components/businessSix.vue

@@ -193,20 +193,19 @@ function getPie3D(pieData, internalDiameterRatio) {
     },
     title: {
       text: '',
-      x: '35%',
+      x: '34%', //文本的位置
-      y: '30%',
+      y: '32%',
+      itemGap: 4,
+      textAlign: 'center',
       textStyle: {
-        rich: {
+        color: '#ffffff',
-          a: {
+        fontSize: '26px',
-            fontSize: 20,
+        fontWeight: 'bold',
-            color: '#fff',
-          },
-          c: {
-            fontSize: 12,
-            color: '#fff',
-            padding: [15, 0],
-          },
       },
+      subtext: '',
+      subtextStyle: {
+        color: '#02FD94',
+        fontSize: '18px',
       },
     },
     xAxis3D: {
@@ -224,14 +223,14 @@ function getPie3D(pieData, internalDiameterRatio) {
     grid3D: {
       show: false,
       boxHeight: boxHeight,
-      left: '-10%',
+      left: '-15%',
       top: -20,
       viewControl: {
-        alpha: 55, //角度(这个很重要 调节角度的)
+        alpha: 40, //角度(这个很重要 调节角度的)
         distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
         rotateSensitivity: 1, //设置为0无法旋转
-        zoomSensitivity: 0, //设置为0无法缩放
+        zoomSensitivity: 10, //设置为0无法缩放
-        panSensitivity: 0, //设置为0无法平移
+        panSensitivity: 10, //设置为0无法平移
         autoRotate: true, //自动旋转
       },
     },
@@ -243,7 +242,8 @@ function getPie3D(pieData, internalDiameterRatio) {
 const initData = (pieData = []) => {
   const option = getPie3D(pieData, 0.8);
   const { name, value } = option.series[0].pieData;
-  option.title.text = `{a|${value}%}{c|\n${name}}`;
+  option.title.text = value + '%'; //中心默认展示数据
+  option.title.subtext = name; //中心默认展示数据
   state.option = option;
   state.data = option.series;
 };

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

@@ -15,7 +15,7 @@
           :down-title="'农资企业'"
           :label-field="'label'"
           :value-field="'value'"
-          :down-width="'130px'"
+          :down-width="''"
           :options="[
             { value: 1, label: '农企/合作社' },
             { value: 2, label: '农资企业' },

new-digital-agriculture-screen/src/views/entities/components/hotCharts.vue

@@ -5,7 +5,7 @@
       <span class="right_btn" @click="handleChange(1)"></span>
       {{ current.info.name }}
     </section>
-    <custom-echart-triangle :chart-data="data" height="100%" :option="option" />
+    <custom-echart-triangle :chart-data="data" height="100%" :option="option" :active-index="current.info.level - 1" />
   </div>
 </template>
 <script setup>
@@ -23,14 +23,17 @@ const list = ref([
   {
     name: '茶叶',
     value: '1',
+    level: 1,
   },
   {
     name: '核桃',
     value: '2',
+    level: 2,
   },
   {
     name: '玉米',
     value: '3',
+    level: 3,
   },
 ]);
 const current = reactive({
@@ -38,7 +41,8 @@ const current = reactive({
   length: list.value.length - 1,
   info: {
     name: '茶叶',
-    value: '20',
+    value: '1',
+    level: 1,
   },
 });
 function handleChange(n) {

new-digital-agriculture-screen/src/views/trace/components/codeNumCharts.vue

@@ -1,11 +1,10 @@
 <template>
-  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-bar :chart-data="dataList" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive } from 'vue';
+import { onMounted, reactive } from 'vue';
 
-const state = reactive({
+const dataList = reactive([
-  data: [
   {
     name: '其他',
     value: 3500,
@@ -26,7 +25,47 @@ const state = reactive({
     name: '茶叶',
     value: 12000,
   },
-  ],
+]);
+
+let titles = reactive([]);
+let values = reactive([]);
+const max = Math.max(...dataList);
+const maxData = dataList.map((item, index) => {
+  return {
+    value: [max, index],
+    name: titles[index],
+  };
+});
+const barData = dataList.map((item, index) => {
+  return {
+    value: [item, index],
+    name: titles[index],
+  };
+});
+
+const getValue = () => {
+  let arr = [];
+  for (let i = 0; i < dataList.length; i++) {
+    arr.push(dataList[i].value);
+  }
+  return arr;
+};
+const getName = () => {
+  let arr = [];
+  for (let i = 0; i < dataList.length; i++) {
+    arr.push(dataList[i].name);
+  }
+  return arr;
+};
+
+onMounted(() => {
+  titles = getName();
+  values = getValue();
+  console.log(titles);
+  console.log(values);
+});
+
+const state = reactive({
   option: {
     grid: {
       left: '5%',
@@ -36,11 +75,13 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
+      show: false,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
       },
-      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      className: 'custom-tooltip-container', // 自定义父容器类名
+      backgroundColor: 'rgba(0,0,0,0.5)',
       borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
@@ -53,19 +94,20 @@ const state = reactive({
     },
     barStyle: {
       barWidth: 14,
+      showBackground: true,
       itemStyle: {
         borderWidth: 14,
-        borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
+        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
       },
       color: {
         type: 'linear',
         x: 0,
         y: 0,
-        x2: 0,
+        x2: 1,
-        y2: 1,
+        y2: 0,
         colorStops: [
-          { offset: 0, color: '#35D0C0' },
+          { offset: 0, color: 'rgba(1,254,253,0)' },
-          { offset: 1, color: '#35D0C0' },
+          { offset: 1, color: '#01fefd' },
         ],
         global: false,
       },
@@ -76,13 +118,13 @@ const state = reactive({
         show: false,
         lineStyle: {
           type: 'dashed',
-          color: '#E5E5E5',
+          color: '#eee',
         },
       },
       axisLabel: {
         show: false,
         textStyle: {
-          color: '#424242',
+          color: '#ffffff',
         },
       },
       show: false,
@@ -93,11 +135,16 @@ const state = reactive({
         show: false,
       },
     },
-    yAxis: {
+    yAxis: [
+      {
+        // 左侧title
         type: 'category',
         data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
         axisLabel: {
-        color: '#fff',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: '16',
+          },
         },
         axisTick: {
           show: false,
@@ -109,12 +156,123 @@ const state = reactive({
           show: false,
         },
       },
+      {
+        // 右侧数量
+        type: 'category',
+        inverse: true,
+        offset: 10,
+        axisTick: 'none',
+        axisLine: 'none',
+        show: true,
+        axisLabel: {
+          textStyle: {
+            color: '#ffffff',
+            fontSize: '16',
+          },
+          formatter: function (value) {
+            let str = '{title|' + value + '吨}';
+            return str;
+          },
+          rich: {
+            title: {
+              color: '#fff',
+              fontSize: 16,
+            },
+          },
+        },
+        data: [12000, 8000, 6000, 4000, 3500],
+      },
+    ],
     series: [
       {
+        name: '值',
         type: 'bar',
-        // barWidth: '40%', // 设置柱的宽度
+        zlevel: 1,
-        // barMinHeight: 2, // 设置柱的最小高度
+        barBorderRadius: 10,
-        // barGap: '20%', // 设置柱之间的间隙
+        itemStyle: {
+          borderRadius: [10, 10, 10, 10],
+          color: 'rgba(100, 200, 255, 0.3)',
+        },
+        backgroundStyle: {
+          color: 'rgba(100, 200, 255, 0.3)',
+          borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
+        },
+        barWidth: 20,
+        data: values,
+        label: {
+          position: [0, -16],
+          align: 'left',
+          show: true,
+          formatter: (params) => {
+            return params.name;
+          },
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
+      },
+      {
+        name: '背景',
+        type: 'bar',
+        barWidth: 20,
+        barGap: '-100%',
+        data: maxData,
+        barBorderRadius: 30,
+        itemStyle: {
+          normal: {
+            color: 'rgba(105,131,242,.3)',
+            borderRadius: 10,
+          },
+        },
+        label: {
+          show: false,
+        },
+        barMaxWidth: 40,
+        markLine: {
+          label: {
+            color: '#26a69a',
+          },
+        },
+      },
+      {
+        name: '内圆',
+        type: 'scatter',
+        hoverAnimation: false,
+        data: barData,
+        yAxisIndex: 0,
+        symbolSize: 22,
+        itemStyle: {
+          normal: {
+            color: '#26a69a',
+            opacity: 1,
+          },
+        },
+        zlevel: 2,
+        label: {
+          show: false,
+        },
+      },
+      {
+        name: '外圆',
+        type: 'scatter',
+        hoverAnimation: false,
+        data: barData,
+        yAxisIndex: 0,
+        symbolSize: 28,
+        symbol: `path://M512 960C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-268.8a179.2 179.2 0 1 0 0-358.4 179.2 179.2 0 0 0 0 358.4z`,
+        itemStyle: {
+          color: 'rgb(255, 255, 255)',
+          opacity: 1,
+          borderColor: 'rgba(44, 111, 226, 0.2)',
+          borderWidth: 2,
+        },
+        zlevel: 3,
+        label: {
+          show: false,
+        },
       },
     ],
   },

new-digital-agriculture-screen/src/views/trace/components/detectionCharts.vue

@@ -20,7 +20,7 @@
     </div>
   </div>
   <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
-    <i class="el-icon-close" @click="handleCloseInfo">X</i>
+    <i class="el-icon-close" @click="handleCloseInfo"></i>
     <section>
       <section class="info_box">
         <div>
@@ -59,8 +59,8 @@
           <div class="_time">{{ item.time }}</div>
         </div>
         <div style="text-align: center">
-          <img src="../../../assets/1.png" style="width: 30%" />
+          <img src="../../../assets/images/trace/testReport.png" style="width: 30%" />
-          <div>监测报告</div>
+          <div>检测报告</div>
         </div>
       </section>
     </section>
@@ -104,7 +104,7 @@ function handleCloseInfo() {
       display: grid;
       grid-template-columns: 25% 40% 18% 17%;
       background-color: rgba(53, 208, 192, 0.3);
-      color: #c5d0d4;
+      color: #ffffff;
       height: 30px;
       line-height: 30px;
       border-radius: 4px;
@@ -149,10 +149,10 @@ function handleCloseInfo() {
 }
 .line_info {
   position: fixed;
-  padding: 32px 10px 20px 20px;
+  padding: 24px 10px 16px 16px;
-  left: 30%;
+  right: 30%;
   top: var(--top);
-  max-height: 74vh;
+  max-height: 85vh;
   width: 400px;
   color: #fff;
   background-color: rgba(0, 0, 0, 0.2);
@@ -167,14 +167,18 @@ function handleCloseInfo() {
   }
   .el-icon-close {
     position: absolute;
-    right: 8px;
+    right: -40px;
-    top: 8px;
+    top: 0px;
     cursor: pointer;
     font-size: 16px;
+    width: 30px;
+    height: 30px;
+    background-image: url(../../../assets/images/trace/delete.png);
+    background-size: contain;
   }
   > section {
     padding-right: 10px;
-    max-height: calc(74vh - 100px);
+    max-height: calc(85vh - 100px);
     overflow-y: auto;
     &::-webkit-scrollbar {
       width: 6px;

new-digital-agriculture-screen/src/views/trace/components/mainPartCharts.vue

@@ -51,7 +51,7 @@ onMounted(() => {});
     }
     ._value {
       > span {
-        font-size: 24px;
+        font-size: 20px;
       }
     }
     img {

new-digital-agriculture-screen/src/views/trace/components/principalTypeCharts.vue

@@ -36,7 +36,7 @@ const option = reactive({
   autoItemHeight: 2,
   grid3D: {
     show: false,
-    boxHeight: 5,
+    boxHeight: 3,
     top: '0',
     left: '-20%',
     viewControl: {

new-digital-agriculture-screen/src/views/trace/components/productTypeCharts.vue

@@ -51,7 +51,7 @@ import { ref } from 'vue';
   ._left {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     color: #fff;
     font-size: 18px;

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

@@ -23,7 +23,7 @@
             :down-title="'1号仓库'"
             :label-field="'label'"
             :value-field="'value'"
-            :down-width="'100px'"
+            :down-width="''"
             :options="[
               { label: '1号仓库', value: '530926' },
               { label: '2号仓库', value: '42611' },