Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev

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

@@ -1,10 +1,10 @@
 <template>
   <div class="business">
-    <div class="business-left">
+    <div class="business-left" style="padding-left: 30px">
       <custom-echart-water-droplet width="100%" height="100%" :option="state.option" />
-      <div class="business-title">证件齐全率</div>
+      <div class="business-title">证照合格率</div>
     </div>
-    <div class="business-right">
+    <div class="business-right" style="padding-top: 20px">
       <div class="business-title">临期预警</div>
       <ul class="business-info">
         <li class="success">
@@ -13,18 +13,18 @@
         </li>
         <li class="warning">
           <b>临期</b>
-          <span>5家</span>
+          <span>25家</span>
         </li>
         <li class="danger">
-          <b>已过期</b>
-          <span>0家</span>
+          <b>逾期</b>
+          <span>7家</span>
         </li>
       </ul>
     </div>
   </div>
 </template>
 <script setup>
-import { reactive, ref, watch } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { isEmpty } from '@/utils';
 
 const props = defineProps({
@@ -142,6 +142,9 @@ watch(
     immediate: true,
   }
 );
+onMounted(() => {
+  console.log(props.data);
+});
 </script>
 <style lang="scss" scoped>
 .business {

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

@@ -240,7 +240,7 @@ function getPie3D(pieData, internalDiameterRatio) {
                     width:10px;
                     height:10px;
                     background-color:${params.color};"></span>
-                    ${option.series[params.seriesIndex].pieData.value}
+                    ${option.series[params.seriesIndex].pieData.quantity}家
                   </span>
                   `;
         }

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

@@ -12,24 +12,24 @@ const props = defineProps({
   },
 });
 const rawData = [
-  { name: '勐撒镇', type: '农户', value: 150 },
-  { name: '勐撒镇', type: '企业/合作社', value: 300 },
+  { name: '勐撒镇', type: '农户', value: 164 },
+  { name: '勐撒镇', type: '农企/合作社', value: 152 },
 
-  { name: '勐永镇', type: '农户', value: 280 },
-  { name: '勐永镇', type: '企业/合作社', value: 200 },
+  { name: '勐永镇', type: '农户', value: 179 },
+  { name: '勐永镇', type: '农企/合作社', value: 243 },
 
-  { name: '孟定镇', type: '农户', value: 250 },
-  { name: '孟定镇', type: '企业/合作社', value: 240 },
+  { name: '孟定镇', type: '农户', value: 189 },
+  { name: '孟定镇', type: '农企/合作社', value: 254 },
 
-  { name: '大兴乡', type: '农户', value: 170 },
-  { name: '大兴乡', type: '企业/合作社', value: 140 },
+  { name: '大兴乡', type: '农户', value: 243 },
+  { name: '大兴乡', type: '农企/合作社', value: 167 },
 
-  { name: '耿马镇', type: '农户', value: 260 },
-  { name: '耿马镇', type: '企业/合作社', value: 230 },
+  { name: '耿马镇', type: '农户', value: 265 },
+  { name: '耿马镇', type: '农企/合作社', value: 213 },
 ];
 
 const towns = ['勐撒镇', '勐永镇', '孟定镇', '大兴乡', '耿马镇'];
-const types = ['农户', '企业/合作社'];
+const types = ['农户', '农企/合作社'];
 const colors = [
   // 蓝色渐变
   new echarts.graphic.LinearGradient(0, 0, 1, 0, [

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

@@ -107,7 +107,6 @@ const loadData = async (code = '') => {
     { name: '贺派乡', value: 62 },
     { name: '四排山乡', value: 84 },
     { name: '芒洪乡', value: 82 },
-    { name: '大兴乡', value: 64 },
   ];
 };
 
@@ -124,16 +123,16 @@ watch(
   }
 );
 
-watch(
-  () => props.query,
-  (val) => {
-    if (!isEmpty(val)) {
-      loadData(val);
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
+// watch(
+//   () => props.query,
+//   (val) => {
+//     if (!isEmpty(val)) {
+//       loadData(val);
+//     }
+//   },
+//   {
+//     deep: true,
+//     immediate: true,
+//   }
+// );
 </script>

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

@@ -12,19 +12,16 @@
         <customBack
           top-title="生产经营主体数量"
           :top-postion="'left'"
-          :down-title="'农资企业'"
+          :down-title="'农企/合作社'"
           :label-field="'label'"
           :value-field="'value'"
           :down-width="''"
           :options="[
             { value: 1, label: '农企/合作社' },
-            { value: 2, label: '农资企业' },
-            { value: 3, label: '种源企业' },
-            { value: 4, label: '生产加工企业' },
-            { value: 5, label: '农户' },
+            { value: 2, label: '农户' },
           ]"
           :is-down="true"
-          @command="handleCommand"
+          @command="handleCommand($event)"
         >
           <template #back>
             <businessTwo :data="state.data.two" :query="state.queryCode" />
@@ -32,7 +29,7 @@
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="历年用地规模曲线" :top-postion="'left'">
+        <customBack top-title="生产经营主体用地面积" :top-postion="'left'">
           <template #back>
             <businessThere :data="state.data.there" />
           </template>
@@ -44,7 +41,7 @@
     </el-col>
     <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>
             <businessFour :data="state.data.four" />
           </template>
@@ -100,21 +97,21 @@ const loadData = async () => {
   await sleep(500);
   state.data = {
     one: [
-      { value: 13.8, name: '农企/合作社', quantity: 202 },
+      { value: 7.14, name: '农企/合作社', quantity: 152 },
       // { value: 23.8, name: '农资企业' },
       // { value: 24.1, name: '种源企业' },
       // { value: 29.8, name: '生产加工企业' },
-      { value: 8.5, name: '农户', quantity: 180 },
+      { value: 64.7, name: '农户', quantity: 1376 },
     ],
     two: [
-      { name: '耿马镇', value: 870 },
-      { name: '勐撒镇', value: 603 },
-      { name: '勐永镇', value: 854 },
-      { name: '孟定镇', value: 635 },
-      { name: '勐简乡', value: 795 },
-      { name: '贺派乡', value: 662 },
-      { name: '四排山乡', value: 584 },
-      { name: '芒洪乡', value: 682 },
+      { name: '耿马镇', value: 50 },
+      { name: '勐撒镇', value: 20 },
+      { name: '勐永镇', value: 54 },
+      { name: '孟定镇', value: 35 },
+      { name: '勐简乡', value: 45 },
+      { name: '贺派乡', value: 52 },
+      { name: '四排山乡', value: 34 },
+      { name: '芒洪乡', value: 52 },
     ],
     there: [
       { name: '耿马镇', value: 870, value2: 455 },
@@ -124,10 +121,10 @@ const loadData = async () => {
       { name: '大兴乡', value: 795, value2: 382 },
     ],
     four: {
-      percent: 0.3998,
+      percent: 0.825,
       success: 253,
-      warning: 5,
-      danger: 0,
+      warning: 25,
+      danger: 7,
     },
     five: [
       { name: '耿马镇', value: 87.84 },
@@ -141,26 +138,8 @@ const loadData = async () => {
       { name: '大兴乡', value: 66.34 },
     ],
     six: [
-      {
-        name: '农企/合作社',
-        value: 25,
-      },
-      {
-        name: '农资企业',
-        value: 40,
-      },
-      {
-        name: '种源企业',
-        value: 24,
-      },
-      {
-        name: '生产加工企业',
-        value: 32,
-      },
-      {
-        name: '农户',
-        value: 32,
-      },
+      { value: 25, name: '农企/合作社' },
+      { value: 66, name: '农户' },
     ],
   };
   state.loading = false;
@@ -169,7 +148,32 @@ const loadData = async () => {
 loadData();
 
 const handleCommand = (data) => {
+  console.log(data);
   state.queryCode = data.value;
+  // 根据id获取数据
+  if (data.value == 1) {
+    state.data.two = [
+      { name: '耿马镇', value: 50 },
+      { name: '勐撒镇', value: 20 },
+      { name: '勐永镇', value: 54 },
+      { name: '孟定镇', value: 35 },
+      { name: '勐简乡', value: 45 },
+      { name: '贺派乡', value: 52 },
+      { name: '四排山乡', value: 34 },
+      { name: '芒洪乡', value: 52 },
+    ];
+  } else if (data.value == 2) {
+    state.data.two = [
+      { name: '耿马镇', value: 870 },
+      { name: '勐撒镇', value: 603 },
+      { name: '勐永镇', value: 854 },
+      { name: '孟定镇', value: 635 },
+      { name: '勐简乡', value: 795 },
+      { name: '贺派乡', value: 662 },
+      { name: '四排山乡', value: 584 },
+      { name: '芒洪乡', value: 682 },
+    ];
+  }
 };
 </script>
 <style lang="scss" scoped>

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

@@ -18,67 +18,49 @@
 <script setup>
 import { reactive, ref } from 'vue';
 import tomatoImg from '@/assets/images/entities/tomatoImg.png';
-import a from '@/assets/images/entities/1.jpg';
-import b from '@/assets/images/entities/2.jpg';
-import c from '@/assets/images/entities/3.jpg';
-import d from '@/assets/images/entities/4.jpg';
-import e from '@/assets/images/entities/5.jpg';
-import f from '@/assets/images/entities/6.jpg';
-import g from '@/assets/images/entities/7.jpg';
-import h from '@/assets/images/entities/8.png';
+import a from '@/assets/images/entities/1.png';
+import b from '@/assets/images/entities/2.png';
+import c from '@/assets/images/entities/3.png';
+import d from '@/assets/images/entities/4.png';
+import e from '@/assets/images/entities/5.png';
 const list = ref([
   {
     name: '西红柿',
-    price: '2.5元/公斤',
+    price: '1.35元/公斤',
     img: tomatoImg,
   },
   {
-    name: '核桃',
-    price: '3.5元/公斤',
+    name: '南瓜',
+    price: '2.45元/公斤',
     img: a,
   },
   {
-    name: '玉米',
-    price: '4.5元/公斤',
+    name: '彩椒',
+    price: '2.22元/公斤',
     img: b,
   },
   {
-    name: '黄豆',
-    price: '5.5元/公斤',
+    name: '甘蔗',
+    price: '0.84元/公斤',
     img: c,
   },
   {
-    name: '韭菜',
-    price: '34.5元/公斤',
+    name: '石斛',
+    price: '56.24元/公斤',
     img: d,
   },
   {
-    name: '辣椒',
-    price: '55.5元/公斤',
+    name: '土豆',
+    price: '0.76元/公斤',
     img: e,
   },
-  {
-    name: '豌豆',
-    price: '222.5元/公斤',
-    img: f,
-  },
-  {
-    name: '香蕉',
-    price: '32.5元/公斤',
-    img: g,
-  },
-  {
-    name: '青花',
-    price: '2.7元/公斤',
-    img: h,
-  },
 ]);
 const current = reactive({
   index: 0,
   length: list.value.length - 1,
   info: {
     name: '西红柿',
-    price: '2.5元/公斤',
+    price: '1.35元/公斤',
     img: tomatoImg,
   },
 });

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

@@ -240,16 +240,16 @@ watch(
   }
 );
 
-watch(
-  () => props.query,
-  (val) => {
-    if (!isEmpty(val)) {
-      loadData(val);
-    }
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
-);
+// watch(
+//   () => props.query,
+//   (val) => {
+//     if (!isEmpty(val)) {
+//       loadData(val);
+//     }
+//   },
+//   {
+//     deep: true,
+//     immediate: true,
+//   }
+// );
 </script>

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

@@ -9,29 +9,24 @@ import { reactive, ref } from 'vue';
 // #region
 const dataList = ref([
   {
-    name: '烟草',
-    value: 60.8,
-    money: 100,
+    name: '蔬菜',
+    value: 1290.76,
   },
   {
     name: '甘蔗',
-    value: 44.4,
-    money: 88,
+    value: 9333.5,
   },
   {
-    name: '核桃',
-    value: 24.3,
-    money: 92,
+    name: '石斛',
+    value: 1366.2,
   },
   {
-    name: '蔬菜',
-    value: 32.7,
-    money: 56,
+    name: '茶叶',
+    value: 2698.7,
   },
   {
     name: '其他',
-    value: 32.9,
-    money: 18,
+    value: 269.9,
   },
 ]);
 
@@ -39,7 +34,8 @@ const option = reactive({
   k: 0.3,
   opacity: 1,
   itemGap: 0,
-  autoItemHeight: 2,
+  autoItemHeight: 0.01,
+  legendSuffix: ' 万元',
   grid3D: {
     show: false,
     boxHeight: 4, //厚度

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

@@ -4,6 +4,7 @@
 <script setup>
 import { reactive, watch } from 'vue';
 import { isEmpty } from '@/utils';
+import { get } from 'lodash';
 
 const props = defineProps({
   data: {
@@ -16,6 +17,7 @@ const props = defineProps({
   },
 });
 
+let titles = reactive([]);
 let values = reactive([]);
 const getValue = (dataList) => {
   let arr = [];
@@ -24,6 +26,23 @@ const getValue = (dataList) => {
   }
   return arr;
 };
+const getName = (dataList) => {
+  let arr = [];
+  for (let i = 0; i < dataList.length; i++) {
+    arr.push(dataList[i].name);
+  }
+  return arr;
+};
+let max = reactive([]);
+let maxData = reactive([]);
+const getMaxData = (dataList) => {
+  return dataList.map((item, index) => {
+    return {
+      value: [max, index],
+      name: titles[index],
+    };
+  });
+};
 
 const state = reactive({
   data: [],
@@ -98,7 +117,7 @@ const state = reactive({
     yAxis: [
       {
         type: 'category',
-        data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
+        data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'].reverse(),
         axisTick: {
           show: false,
         },
@@ -123,7 +142,7 @@ const state = reactive({
             fontSize: '16',
           },
           formatter: function (value) {
-            let str = '{title|' + value + '吨}';
+            let str = '{title|' + value + '万元}';
             return str;
           },
           rich: {
@@ -137,59 +156,59 @@ const state = reactive({
       },
     ],
     series: [
-      {
-        name: '值',
-        type: 'bar',
-        zlevel: 1,
-        barBorderRadius: 10,
-        itemStyle: {
-          borderRadius: [10, 10, 10, 10],
-          color: 'rgba(100, 200, 255, 0.3)',
-        },
-        backgroundStyle: {
-          color: 'rgba(100, 200, 255, 0.3)',
-          borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
-        },
-        barWidth: 20,
-        data: values,
-        label: {
-          position: [0, -16],
-          align: 'left',
-          show: true,
-          formatter: (params) => {
-            return params.name;
-          },
-        },
-        barMaxWidth: 40,
-        markLine: {
-          label: {
-            color: '#26a69a',
-          },
-        },
-      },
-      {
-        name: '背景',
-        type: 'bar',
-        barWidth: 20,
-        barGap: '-100%',
-        data: [],
-        barBorderRadius: 30,
-        itemStyle: {
-          normal: {
-            color: 'rgba(105,131,242,.3)',
-            borderRadius: 10,
-          },
-        },
-        label: {
-          show: false,
-        },
-        barMaxWidth: 40,
-        markLine: {
-          label: {
-            color: '#26a69a',
-          },
-        },
-      },
+      // {
+      //   name: '值',
+      //   type: 'bar',
+      //   zlevel: 1,
+      //   barBorderRadius: 10,
+      //   itemStyle: {
+      //     borderRadius: [10, 10, 10, 10],
+      //     color: 'rgba(100, 200, 255, 0.3)',
+      //   },
+      //   backgroundStyle: {
+      //     color: 'rgba(100, 200, 255, 0.3)',
+      //     borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
+      //   },
+      //   barWidth: 14,
+      //   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: 14,
+      //   barGap: '-100%',
+      //   data: maxData,
+      //   barBorderRadius: 30,
+      //   itemStyle: {
+      //     normal: {
+      //       color: 'rgba(105,131,242,.3)',
+      //       borderRadius: 10,
+      //     },
+      //   },
+      //   label: {
+      //     show: false,
+      //   },
+      //   barMaxWidth: 14,
+      //   markLine: {
+      //     label: {
+      //       color: '#26a69a',
+      //     },
+      //   },
+      // },
     ],
   },
 });
@@ -220,6 +239,7 @@ watch(
   }
 );
 const loadData = (val) => {
+  console.log(val);
   if (val === 'all') {
     state.data = props.data;
     state.option.yAxis.data = ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'];
@@ -233,6 +253,8 @@ const loadData = (val) => {
     }
   }
   values = getValue(state.data);
-  console.log(val);
+  titles = getName(state.data);
+  max = Math.max(...state.data);
+  maxData = getMaxData(state.data);
 };
 </script>

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

@@ -17,12 +17,12 @@
             { label: '孟定镇', value: '孟定镇' },
             { label: '大兴乡', value: '大兴乡' },
           ]"
-          :is-down="true"
-          @command="handleCommand"
+          :is-down="false"
+          @command="handleCommand($event)"
         >
           <template #back>
             <value-charts :data="state.data.one" :query="state.queryCode"></value-charts>
-            <!--            <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>-->
+            <!--<entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>-->
           </template>
         </customBack>
       </div>
@@ -37,19 +37,19 @@
         <customBack
           top-title="全县作物产量对比"
           :top-postion="'left'"
-          :down-title="'烟草'"
+          :down-title="'蔬菜'"
           :label-field="'label'"
           :value-field="'value'"
           :down-width="''"
           :options="[
-            { label: '烟草', value: 1 },
+            { label: '蔬菜', value: 1 },
             { label: '甘蔗', value: 2 },
-            { label: '核桃', value: 3 },
-            { label: '蔬菜', value: 4 },
+            { label: '石斛', value: 3 },
+            { label: '茶叶', value: 4 },
             { label: '其他', value: 5 },
           ]"
           :is-down="true"
-          @command="handleContrast"
+          @command="handleContrast($event)"
         >
           <template #back>
             <entitiesStatistics ref="thirdRef" :data="state.data.third" :query="state.contrastCode"></entitiesStatistics>
@@ -86,7 +86,7 @@
   </el-row>
 </template>
 <script setup>
-import { nextTick, reactive, ref } from 'vue';
+import { nextTick, onMounted, reactive, ref } from 'vue';
 import centerMap from '@/components/centerMap.vue';
 import categoryCharts from './components/categoryCharts.vue';
 import entitieslist from './components/entitieslist.vue';
@@ -98,6 +98,27 @@ import entitiesMap from './components/entitiesMap.vue';
 import { sleep } from '@/utils';
 import ValueCharts from '@/views/entities/components/valueCharts.vue';
 
+import Mock from 'mockjs';
+const thirdRes = () => {
+  return Mock.mock({
+    'data|9': [
+      {
+        id: '@id',
+        name: '@pick(["耿马镇", "勐撒镇", "勐永镇","孟定镇","勐简乡", "贺派乡", "四排山乡","芒洪乡","大兴乡"])',
+        value1: function () {
+          const num = Mock.Random.float(100, 300, 0, 2);
+          return num % 1 === 0 ? num : parseFloat(num.toFixed(2));
+        },
+        value: function () {
+          // 确保 this.value1 是数字类型，再计算
+          const num = Mock.Random.float(100, 300, 0, 2);
+          return parseFloat((num / 5).toFixed(2));
+        },
+      },
+    ],
+  });
+};
+
 const oneRef = ref(null);
 const thirdRef = ref(null);
 
@@ -112,22 +133,22 @@ const loadData = async () => {
   await sleep(500);
   state.data = {
     one: [
-      { value: 3500, name: '耿马镇' },
+      { value: 3500, name: '大兴乡' },
       { value: 6000, name: '勐撒镇' },
       { value: 4000, name: '勐永镇' },
       { value: 8000, name: '孟定镇' },
-      { value: 12000, name: '大兴乡' },
+      { value: 12000, name: '耿马镇' },
     ],
     third: [
-      { value: 98, value1: 88, name: '耿马镇' },
-      { value: 55, value1: 117, name: '勐撒镇' },
-      { value: 65, value1: 145, name: '勐永镇' },
-      { value: 60, value1: 126, name: '孟定镇' },
-      { value: 40, value1: 86, name: '勐简乡' },
-      { value: 81, value1: 152, name: '贺派乡' },
-      { value: 41, value1: 130, name: '四排山乡' },
-      { value: 100, value1: 101, name: '芒洪乡' },
-      { value: 79, value1: 184, name: '大兴乡' },
+      // { value: 35.61, value1: 178.06, name: '耿马镇' },
+      // { value: 11.81, value1: 59.06, name: '勐撒镇' },
+      // { value: 11.08, value1: 55.41, name: '勐永镇' },
+      // { value: 28.42, value1: 142.12, name: '孟定镇' },
+      // { value: 12, value1: 65.99, name: '勐简乡' },
+      // { value: 10.19, value1: 50.97, name: '贺派乡' },
+      // { value: 6.61, value1: 33.08, name: '四排山乡' },
+      // { value: 7.73, value1: 38.69, name: '芒洪乡' },
+      // { value: 13.08, value1: 65.4, name: '大兴乡' },
     ],
   };
 };
@@ -141,12 +162,17 @@ const handleCommand = (data) => {
   // });
 };
 const handleContrast = (data) => {
-  state.contrastCode = data.value;
-  // console.info('data=', data);
-  nextTick(() => {
-    thirdRef.value && thirdRef.value.refresData();
-  });
+  state.contrastCode = data.value.toString();
+  state.data.third = [...thirdRes().data];
+  console.info(state.data.third);
+  // nextTick(() => {
+  //   thirdRef.value && thirdRef.value.refresData();
+  // });
 };
+
+onMounted(() => {
+  state.data.third = thirdRes().data;
+});
 </script>
 <style lang="scss" scoped>
 .data-home-index {

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

@@ -2,46 +2,29 @@
   <custom-echart-bar :chart-data="dataList" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, watch } from 'vue';
+import { isEmpty } from '@/utils';
 
-const dataList = reactive([
-  {
-    name: '其他',
-    value: 3500,
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
   },
-  {
-    name: '烟叶',
-    value: 4000,
+  query: {
+    type: String,
+    default: '',
   },
-  {
-    name: '甘蔗',
-    value: 6000,
-  },
-  {
-    name: '核桃',
-    value: 8000,
-  },
-  {
-    name: '茶叶',
-    value: 12000,
-  },
-]);
+});
+
+// 此处数据需要按照类目的重要程度顺序排列
+let dataList = reactive([]);
 
 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],
-  };
-});
+let max = reactive([]);
+let maxData = reactive([]);
+
+let barData = reactive([]);
 
 const getValue = () => {
   let arr = [];
@@ -58,12 +41,35 @@ const getName = () => {
   return arr;
 };
 
-onMounted(() => {
-  titles = getName();
-  values = getValue();
-  console.log(titles);
-  console.log(values);
-});
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      dataList = val;
+      titles = getName();
+      values = getValue();
+      console.log(titles);
+      console.log(values);
+      max = Math.max(...values);
+      maxData = dataList.map((item, index) => {
+        return {
+          value: [max, index],
+          name: titles[index],
+        };
+      });
+      console.log(max);
+      console.log(maxData);
+      barData = dataList.map((item, index) => {
+        return {
+          value: [item, index],
+          name: titles[index],
+        };
+      });
+      console.log(barData);
+    }
+  },
+  { deep: true, immediate: true }
+);
 
 const state = reactive({
   option: {
@@ -139,7 +145,7 @@ const state = reactive({
       {
         // 左侧title
         type: 'category',
-        data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
+        data: [...titles].reverse(),
         axisLabel: {
           textStyle: {
             color: '#ffffff',
@@ -180,99 +186,7 @@ const state = reactive({
             },
           },
         },
-        data: [12000, 8000, 6000, 4000, 3500],
-      },
-    ],
-    series: [
-      {
-        name: '值',
-        type: 'bar',
-        zlevel: 1,
-        barBorderRadius: 10,
-        itemStyle: {
-          borderRadius: [10, 10, 10, 10],
-          color: 'rgba(100, 200, 255, 0.3)',
-        },
-        backgroundStyle: {
-          color: 'rgba(100, 200, 255, 0.3)',
-          borderRadius: [10, 10, 10, 10], // 必须与barBorderRadius保持一致
-        },
-        barWidth: 20,
         data: values,
-        label: {
-          position: [0, -16],
-          align: 'left',
-          show: true,
-          formatter: (params) => {
-            return params.name;
-          },
-        },
-        barMaxWidth: 40,
-        markLine: {
-          label: {
-            color: '#26a69a',
-          },
-        },
-      },
-      {
-        name: '背景',
-        type: 'bar',
-        barWidth: 20,
-        barGap: '-100%',
-        data: 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

@@ -26,19 +26,36 @@
         <div class="_label" style="font-size: 30px">溯源信息</div>
         <div class="traceability_info_box">
           <div class="traceability_info_box_image">
-            <img style="width: 100%; height: 100%" src="../../../assets/images/entities/tomatoImg.png" />
+            <img v-if="info.productType === '番茄'" src="../../../assets/images/entities/tomatoImg.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '芹菜'" src="../../../assets/images/entities/芹菜.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '白菜'" src="../../../assets/images/entities/白菜.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '铁皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '紫皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '黑皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '黄皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '红茶'" src="../../../assets/images/entities/红茶.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '核桃'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
+            <img v-else-if="info.productType === '核桃仁'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
           </div>
           <div class="traceability_info_box_title">
-            <div class="traceability_info_right">新鲜番茄</div>
+            <div class="traceability_info_right">新鲜{{ info.productType }}</div>
             <div class="traceability_info_right_bottom">检测通过</div>
           </div>
         </div>
       </div>
       <div class="detection_text">权威检测</div>
-      <section class="info_box">
-        <div v-for="item in list1" :key="item.name">
-          <span class="_label">{{ item.title }}</span>
-          <span>{{ item.name }}</span>
+      <section>
+        <div v-for="item in list1" :key="item.name" class="info_box">
+          <div v-if="item.title === '样品名称'">
+            <span class="_label">{{ item.title }}</span>
+            <span>{{ info.productType }}</span>
+          </div>
+          <div v-else class="info_box">
+            <span class="_label">{{ item.title }}</span>
+            <span>{{ item.name }}</span>
+          </div>
         </div>
       </section>
       <section class="route_box">

new-digital-agriculture-screen/src/views/trace/components/list.json

@@ -1,16 +1,16 @@
 {
     "data": [
       {
-        "productName": "核桃",
+        "productName": "蔬菜",
         "productCode": "10062787341458",
         "specs": "袋装",
-        "productType": "核桃仁",
+        "productType": "芹菜",
         "type": "2",
         "info": {
-          "productName": "核桃",
+          "productName": "蔬菜",
           "productCode": "10062787341458",
           "specs": "袋装",
-          "productType": "核桃仁",
+          "productType": "芹菜",
           "manufacturer": "老灶坊食品加工厂",
           "shop": "深圳市吉祥干果店",
           "productTime": "2025年03月23日",
@@ -39,16 +39,16 @@
         }
       },
       {
-        "productName": "核桃",
+        "productName": "蔬菜",
         "productCode": "10062787348741",
         "specs": "袋装",
-        "productType": "核桃仁",
+        "productType": "白菜",
         "type": "2",
         "info": {
-          "productName": "核桃",
+          "productName": "蔬菜",
           "productCode": "10062787348741",
           "specs": "袋装",
-          "productType": "核桃仁",
+          "productType": "白菜",
           "manufacturer": "九鼎香食品有限公司",
           "shop": "秦岭核香店",
           "productTime": "2025年02月18日",
@@ -77,16 +77,16 @@
         }
       },
       {
-        "productName": "核桃",
+        "productName": "石斛",
         "productCode": "10062787349847",
         "specs": "袋装",
-        "productType": "核桃仁",
+        "productType": "铁皮石斛",
         "type": "2",
         "info": {
-          "productName": "核桃",
+          "productName": "石斛",
           "productCode": "10062787349847",
           "specs": "袋装",
-          "productType": "核桃仁",
+          "productType": "铁皮石斛",
           "manufacturer": "绿源智造食品加工厂",
           "shop": "晋南核味店",
           "productTime": "2025年01月20日",
@@ -115,16 +115,16 @@
         }
       },
       {
-        "productName": "核桃",
+        "productName": "石斛",
         "productCode": "10062787346574",
         "specs": "袋装",
-        "productType": "核桃仁",
+        "productType": "紫皮石斛",
         "type": "2",
         "info": {
-          "productName": "核桃",
+          "productName": "石斛",
           "productCode": "10062787346574",
           "specs": "袋装",
-          "productType": "核桃仁",
+          "productType": "紫皮石斛",
           "manufacturer": "绿源智造食品加工厂",
           "shop": "福核斋店",
           "productTime": "2025年01月13日",
@@ -153,16 +153,16 @@
         }
       },
       {
-        "productName": "核桃",
+        "productName": "甘蔗",
         "productCode": "10062787341478",
         "specs": "袋装",
-        "productType": "核桃仁",
+        "productType": "黑皮甘蔗",
         "type": "2",
         "info": {
-          "productName": "核桃",
+          "productName": "甘蔗",
           "productCode": "10062787341478",
           "specs": "袋装",
-          "productType": "核桃仁",
+          "productType": "黑皮甘蔗",
           "manufacturer": "一口鲜食品加工厂",
           "shop": "核养坊",
           "productTime": "2025年01月04日",
@@ -191,16 +191,16 @@
         }
       },
       {
-        "productName": "红茶",
+        "productName": "甘蔗",
         "productCode": "10062787346524",
         "specs": "袋装",
-        "productType": "红茶",
+        "productType": "黄皮甘蔗",
         "type": "1",
         "info": {
-          "productName": "红茶",
+          "productName": "甘蔗",
           "productCode": "10062787346524",
           "specs": "袋装",
-          "productType": "红茶",
+          "productType": "黄皮甘蔗",
           "manufacturer": "粤膳坊食品加工厂",
           "shop": "茗香居店",
           "productTime": "2025年03月04日",
@@ -228,120 +228,6 @@
           ]
         }
       },
-      {
-        "productName": "白茶",
-        "productCode": "10062787343574",
-        "specs": "袋装",
-        "productType": "白茶",
-        "type": "1",
-        "info": {
-          "productName": "白茶",
-          "productCode": "10062787343574",
-          "specs": "袋装",
-          "productType": "白茶",
-          "manufacturer": "粤膳坊食品加工厂",
-          "shop": "茗香居店",
-          "productTime": "2025年03月21日",
-          "route": [
-            {
-              "name": "出库",
-              "time": "2025-03-22 05:32.45"
-            },
-            {
-              "name": "到达临沧市",
-              "time": "2025-03-22 21:43.41"
-            },
-            {
-              "name": "到达昆明市",
-              "time": "2025-03-23 04:15.20"
-            },
-            {
-              "name": "到达广州市",
-              "time": "2025-03-23 22:55.05"
-            },
-            {
-              "name": "出售",
-              "time": "2025-03-25 07:23.46"
-            }
-          ]
-        }
-      },
-      {
-        "productName": "乌龙茶",
-        "productCode": "10062787348745",
-        "specs": "袋装",
-        "productType": "乌龙茶",
-        "type": "1",
-        "info": {
-          "productName": "乌龙茶",
-          "productCode": "10062787348745",
-          "specs": "袋装",
-          "productType": "乌龙茶",
-          "manufacturer": "粤膳坊食品加工厂",
-          "shop": "茗香居店",
-          "productTime": "2025年03月21日",
-          "route": [
-            {
-              "name": "出库",
-              "time": "2025-03-22 05:32.45"
-            },
-            {
-              "name": "到达临沧市",
-              "time": "2025-03-22 21:43.41"
-            },
-            {
-              "name": "到达昆明市",
-              "time": "2025-03-23 04:15.20"
-            },
-            {
-              "name": "到达广州市",
-              "time": "2025-03-23 22:55.05"
-            },
-            {
-              "name": "出售",
-              "time": "2025-03-25 07:23.46"
-            }
-          ]
-        }
-      },
-      {
-        "productName": "黄茶",
-        "productCode": "10062787343254",
-        "specs": "袋装",
-        "productType": "黄茶",
-        "type": "1",
-        "info": {
-          "productName": "黄茶",
-          "productCode": "10062787343254",
-          "specs": "袋装",
-          "productType": "黄茶",
-          "manufacturer": "粤膳坊食品加工厂",
-          "shop": "茗香居店",
-          "productTime": "2025年03月21日",
-          "route": [
-            {
-              "name": "出库",
-              "time": "2025-03-22 05:32.45"
-            },
-            {
-              "name": "到达临沧市",
-              "time": "2025-03-22 21:43.41"
-            },
-            {
-              "name": "到达昆明市",
-              "time": "2025-03-23 04:15.20"
-            },
-            {
-              "name": "到达广州市",
-              "time": "2025-03-23 22:55.05"
-            },
-            {
-              "name": "出售",
-              "time": "2025-03-25 07:23.46"
-            }
-          ]
-        }
-      },
       {
         "productName": "核桃",
         "productCode": "10062787346958",
@@ -380,158 +266,6 @@
           ]
         }
       },
-      {
-        "productName": "核桃",
-        "productCode": "10062787346923",
-        "specs": "袋装",
-        "productType": "核桃仁",
-        "type": "1",
-        "info": {
-          "productName": "核桃",
-          "productCode": "10062787346923",
-          "specs": "袋装",
-          "productType": "核桃仁",
-          "manufacturer": "粤膳坊食品加工厂",
-          "shop": "茗香居店",
-          "productTime": "2025年03月21日",
-          "route": [
-            {
-              "name": "出库",
-              "time": "2025-03-22 05:32.45"
-            },
-            {
-              "name": "到达临沧市",
-              "time": "2025-03-22 21:43.41"
-            },
-            {
-              "name": "到达昆明市",
-              "time": "2025-03-23 04:15.20"
-            },
-            {
-              "name": "到达广州市",
-              "time": "2025-03-23 22:55.05"
-            },
-            {
-              "name": "出售",
-              "time": "2025-03-25 07:23.46"
-            }
-          ]
-        }
-      },
-      {
-        "productName": "核桃",
-        "productCode": "10062787343256",
-        "specs": "袋装",
-        "productType": "核桃仁",
-        "type": "1",
-        "info": {
-          "productName": "核桃",
-          "productCode": "10062787343256",
-          "specs": "袋装",
-          "productType": "核桃仁",
-          "manufacturer": "粤膳坊食品加工厂",
-          "shop": "茗香居店",
-          "productTime": "2025年03月21日",
-          "route": [
-            {
-              "name": "出库",
-              "time": "2025-03-22 05:32.45"
-            },
-            {
-              "name": "到达临沧市",
-              "time": "2025-03-22 21:43.41"
-            },
-            {
-              "name": "到达昆明市",
-              "time": "2025-03-23 04:15.20"
-            },
-            {
-              "name": "到达广州市",
-              "time": "2025-03-23 22:55.05"
-            },
-            {
-              "name": "出售",
-              "time": "2025-03-25 07:23.46"
-            }
-          ]
-        }
-      },
-      {
-        "productName": "白茶",
-        "productCode": "10062787347489",
-        "specs": "袋装",
-        "productType": "白茶",
-        "type": "1",
-        "info": {
-          "productName": "白茶",
-          "productCode": "10062787347489",
-          "specs": "袋装",
-          "productType": "白茶",
-          "manufacturer": "粤膳坊食品加工厂",
-          "shop": "茗香居店",
-          "productTime": "2025年03月21日",
-          "route": [
-            {
-              "name": "出库",
-              "time": "2025-03-22 05:32.45"
-            },
-            {
-              "name": "到达临沧市",
-              "time": "2025-03-22 21:43.41"
-            },
-            {
-              "name": "到达昆明市",
-              "time": "2025-03-23 04:15.20"
-            },
-            {
-              "name": "到达广州市",
-              "time": "2025-03-23 22:55.05"
-            },
-            {
-              "name": "出售",
-              "time": "2025-03-25 07:23.46"
-            }
-          ]
-        }
-      },
-      {
-        "productName": "核桃",
-        "productCode": "10062787347536",
-        "specs": "袋装",
-        "productType": "核桃仁",
-        "type": "2",
-        "info": {
-          "productName": "核桃",
-          "productCode": "10062787347536",
-          "specs": "袋装",
-          "productType": "核桃仁",
-          "manufacturer": "一口鲜食品加工厂",
-          "shop": "茗香居店",
-          "productTime": "2025年03月23日",
-          "route": [
-            {
-              "name": "出库",
-              "time": "2025-03-25 07:30.46"
-            },
-            {
-              "name": "到达临沧市",
-              "time": "2025-03-25 14:38.41"
-            },
-            {
-              "name": "到达昆明市",
-              "time": "2025-03-26 00:15.35"
-            },
-            {
-              "name": "到达广州市",
-              "time": "2025-03-26 16:55.08"
-            },
-            {
-              "name": "出售",
-              "time": "2025-03-27 09:26.40"
-            }
-          ]
-        }
-      },
       {
         "productName": "红茶",
         "productCode": "10062787345641",

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

@@ -23,10 +23,10 @@ import publicize from '@/assets/images/trace/publicize.png';
 let valData = reactive([
   { value: 356, name: '扫码统计', unit: '次', bg: all },
   { value: 86, name: '溯源产品', unit: '种', bg: producer },
-  { value: 90, name: '溯源产品', unit: '个', bg: batch },
-  { value: 136, name: '宣传门店', unit: '家', bg: publicize },
-  { value: 6, name: '线上门店', unit: '家', bg: online },
-  { value: 63, name: '业务人员', unit: '人', bg: person },
+  { value: 90, name: '溯源批次', unit: '个', bg: batch },
+  { value: 136, name: '追溯主体数', unit: '家', bg: publicize },
+  { value: 6, name: '发放溯源码', unit: '家', bg: online },
+  { value: 63, name: '有效期内溯源码', unit: '人', bg: person },
 ]);
 
 onMounted(() => {});

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

@@ -9,7 +9,7 @@ import { reactive, ref } from 'vue';
 // #region
 const data = ref([
   {
-    name: '烟草',
+    name: '蔬菜',
     value: 60.8,
   },
   {
@@ -17,16 +17,16 @@ const data = ref([
     value: 44.4,
   },
   {
-    name: '核桃',
+    name: '石斛',
     value: 24.3,
   },
   {
-    name: '蔬菜',
+    name: '茶叶',
     value: 32.7,
   },
   {
     name: '其他',
-    value: 32.9,
+    value: 22.9,
   },
 ]);
 const option = reactive({
@@ -34,6 +34,7 @@ const option = reactive({
   opacity: 1,
   itemGap: 0,
   autoItemHeight: 2,
+  legendSuffix: '万件',
   grid3D: {
     show: false,
     boxHeight: 3,

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

@@ -1,7 +1,7 @@
 <template>
   <section class="_container">
     <div class="_left">
-      <video src="../../../assets/video.mp4" autoplay loop controls></video>
+      <video src="../../../assets/video2.mp4" autoplay loop controls></video>
       <div class="video_footer">核桃仁原材料</div>
     </div>
     <div class="_right">
@@ -42,7 +42,7 @@ import { ref } from 'vue';
 
 <style lang="scss" scoped>
 ._container {
-  padding: 12px 0;
+  padding-top: 20px;
   width: 100%;
   height: 100%;
   display: grid;
@@ -57,9 +57,10 @@ import { ref } from 'vue';
     font-size: 18px;
     video {
       width: 100%;
-      height: calc(100% - 60px);
+      // height: calc(100% - 60px);
       border: 2px solid #01fefd;
       border-radius: 16px;
+      margin-bottom: 10px;
     }
     .video_footer {
       width: 64%;
@@ -70,7 +71,7 @@ import { ref } from 'vue';
     }
   }
   ._right {
-    padding: 24px 0;
+    padding: 10px;
     > div {
       display: flex;
       color: #fff;

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

@@ -82,15 +82,15 @@ onMounted(() => {});
   .item_3 {
     right: 0;
     top: 5%;
-    width: 26%;
+    width: 24%;
     background-image: url('../../../assets/images/trace/bubbleC.png');
     ._num {
       color: #fef906;
     }
   }
   .item_4 {
-    top: 40px;
-    left: 36%;
+    top: 30px;
+    left: 38%;
     width: 22%;
     background-image: url('../../../assets/images/trace/bubbleD.png');
     ._num {

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

@@ -26,68 +26,68 @@ const chinaGeoCoordMap = ref({
   广东: [113.12244, 23.009505],
   香港: [114.133834, 22.381374],
   四川: [104.063707, 30.658753],
-  河北: [114.511072, 38.054693],
-  北京: [116.46, 39.92],
-  浙江: [120.19, 30.26],
-  山东: [117, 36.65],
-  福建: [119.3, 26.08],
-  上海: [121.48, 31.22],
-  重庆: [106.54, 29.59],
-  江西: [115.89, 28.68],
-  山西: [112.53, 37.87],
-  黑龙江: [126.63, 45.75],
-  陕西: [108.95, 34.27],
-  辽宁: [123.38, 41.8],
+  // 河北: [114.511072, 38.054693],
+  // 北京: [116.46, 39.92],
+  // 浙江: [120.19, 30.26],
+  // 山东: [117, 36.65],
+  // 福建: [119.3, 26.08],
+  // 上海: [121.48, 31.22],
+  // 重庆: [106.54, 29.59],
+  // 江西: [115.89, 28.68],
+  // 山西: [112.53, 37.87],
+  // 黑龙江: [126.63, 45.75],
+  // 陕西: [108.95, 34.27],
+  // 辽宁: [123.38, 41.8],
   海南: [110.35, 20.02],
   湖南: [113, 28.21],
-  宁夏: [106.27, 38.47],
-  湖北: [114.31, 30.52],
-  内蒙古: [111.65, 40.82],
-  天津: [117.2, 39.13],
-  贵州: [106.71, 26.57],
-  甘肃: [103.73, 36.03],
-  江苏: [118.78, 32.04],
-  吉林: [125.35, 43.88],
-  河南: [113.65, 34.76],
-  青海: [101.74, 36.56],
-  安徽: [117.27, 31.86],
-  广西: [108.33, 22.84],
-  西藏: [91.11, 29.97],
-  新疆: [87.68, 43.77],
+  // 宁夏: [106.27, 38.47],
+  // 湖北: [114.31, 30.52],
+  // 内蒙古: [111.65, 40.82],
+  // 天津: [117.2, 39.13],
+  // 贵州: [106.71, 26.57],
+  // 甘肃: [103.73, 36.03],
+  // 江苏: [118.78, 32.04],
+  // 吉林: [125.35, 43.88],
+  // 河南: [113.65, 34.76],
+  // 青海: [101.74, 36.56],
+  // 安徽: [117.27, 31.86],
+  // 广西: [108.33, 22.84],
+  // 西藏: [91.11, 29.97],
+  // 新疆: [87.68, 43.77],
 });
 const chinaDatas = ref([
   [{ name: '云南', value: 382 }],
   [{ name: '广东', value: 62256 }],
   [{ name: '香港', value: 9256 }],
   [{ name: '四川', value: 1256 }],
-  [{ name: '河北', value: 382 }],
-  [{ name: '北京', value: 88 }],
-  [{ name: '浙江', value: 87 }],
-  [{ name: '山东', value: 87 }],
-  [{ name: '福建', value: 87 }],
-  [{ name: '上海', value: 87 }],
-  [{ name: '重庆', value: 87 }],
-  [{ name: '江西', value: 86 }],
-  [{ name: '山西', value: 84 }],
-  [{ name: '黑龙江', value: 83 }],
-  [{ name: '陕西', value: 83 }],
-  [{ name: '辽宁', value: 82 }],
+  // [{ name: '河北', value: 382 }],
+  // [{ name: '北京', value: 88 }],
+  // [{ name: '浙江', value: 87 }],
+  // [{ name: '山东', value: 87 }],
+  // [{ name: '福建', value: 87 }],
+  // [{ name: '上海', value: 87 }],
+  // [{ name: '重庆', value: 87 }],
+  // [{ name: '江西', value: 86 }],
+  // [{ name: '山西', value: 84 }],
+  // [{ name: '黑龙江', value: 83 }],
+  // [{ name: '陕西', value: 83 }],
+  // [{ name: '辽宁', value: 82 }],
   [{ name: '海南', value: 82 }],
   [{ name: '湖南', value: 82 }],
-  [{ name: '宁夏', value: 82 }],
-  [{ name: '湖北', value: 81 }],
-  [{ name: '内蒙古', value: 81 }],
-  [{ name: '天津', value: 80 }],
-  [{ name: '贵州', value: 80 }],
-  [{ name: '甘肃', value: 80 }],
-  [{ name: '江苏', value: 80 }],
-  [{ name: '吉林', value: 80 }],
-  [{ name: '河南', value: 79 }],
-  [{ name: '青海', value: 79 }],
-  [{ name: '广西', value: 78 }],
-  [{ name: '安徽', value: 77 }],
-  [{ name: '新疆', value: 76 }],
-  [{ name: '西藏', value: 76 }],
+  // [{ name: '宁夏', value: 82 }],
+  // [{ name: '湖北', value: 81 }],
+  // [{ name: '内蒙古', value: 81 }],
+  // [{ name: '天津', value: 80 }],
+  // [{ name: '贵州', value: 80 }],
+  // [{ name: '甘肃', value: 80 }],
+  // [{ name: '江苏', value: 80 }],
+  // [{ name: '吉林', value: 80 }],
+  // [{ name: '河南', value: 79 }],
+  // [{ name: '青海', value: 79 }],
+  // [{ name: '广西', value: 78 }],
+  // [{ name: '安徽', value: 77 }],
+  // [{ name: '新疆', value: 76 }],
+  // [{ name: '西藏', value: 76 }],
 ]);
 // 设置扩散中心
 const convertData = (data) => {
@@ -222,7 +222,7 @@ const getSeries = () => {
 const chartsData = reactive({
   option: {
     title: {
-      text: '地图统计图表',
+      text: '',
       subtext: '',
       x: 'center',
       y: 'top',

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

@@ -5,12 +5,12 @@
         <div class="left-charts-item">
           <customBack top-title="原材料供应" :top-postion="'left'">
             <template #back>
-              <codeNumCharts :data="one"></codeNumCharts>
+              <codeNumCharts :data="oneData"></codeNumCharts>
             </template>
           </customBack>
         </div>
         <div class="left-charts-item">
-          <customBack top-title="生产加工数据" :top-postion="'left'">
+          <customBack top-title="生产加工包装" :top-postion="'left'">
             <template #back>
               <principalTypeCharts></principalTypeCharts>
             </template>
@@ -76,7 +76,29 @@ import productTypeCharts from './components/productTypeCharts.vue';
 import traceBarCharts from './components/traceBarCharts.vue';
 import detectionCharts from './components/detectionCharts.vue';
 
-const one = ref([]);
+// 此处数据需要按照类目的重要程度顺序排列
+const oneData = ref([
+  {
+    name: '蔬菜',
+    value: 4000,
+  },
+  {
+    name: '甘蔗',
+    value: 6500,
+  },
+  {
+    name: '石斛',
+    value: 8000,
+  },
+  {
+    name: '茶叶',
+    value: 6000,
+  },
+  {
+    name: '其他',
+    value: 3500,
+  },
+]);
 
 const handleCommand = (data) => {
   // state.queryCode = data.value;