fix：修改大屏主要病害趋势，病害统计，数据栏右侧单选样式，图例位置

package.json

@@ -64,7 +64,7 @@
     "sortablejs": "1.10.2",
     "vkbeautify": "^0.99.3",
     "vue": "2.6.12",
-    "vue-count-to": "1.0.13",
+    "vue-count-to": "^1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",

src/views/big-screen/disease-components/traffic-trend.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:03:08
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-13 13:54:26
+ * @LastEditTime: 2024-12-13 15:21:00
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
  * @Description: 病害巡检大屏-病害趋势
 -->
@@ -213,10 +213,11 @@ export default {
         ],
         yAxis: [
           {
-            name: "数量",
+            name: "数量:个",
             nameTextStyle: {
               color: "#C7DAF2",
             },
+            minInterval: 1,
             splitLine: {
               show: false,
             },

src/views/big-screen/index.vue

@@ -1420,6 +1420,7 @@ export default {
         background-color: transparent;
         padding: 0 0.3rem;
         border: none;
+        color: #ffffff;
       }
 
       .el-radio-button__orig-radio:checked + .el-radio-button__inner {
@@ -1463,8 +1464,8 @@ export default {
       height: 7rem;
       width: 2rem;
       position: absolute;
-      top: 17%;
+      bottom: 16%;
-      left: 26%;
+      right: 27%;
       z-index: 1;
       background-image: url("../../assets/screen/index/map-legend.png");
       background-repeat: no-repeat;
@@ -1519,9 +1520,10 @@ export default {
       .map-image-select {
         left: 28%;
         top: 10%;
-        font-size: 1rem;
+        font-size: 0.9rem;
         position: absolute;
         color: #ffffff;
+        font-family: "DouYu";
       }
 
       // 打点部分

src/views/big-screen/overview-components/disease-current.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:19:56
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-10 11:42:43
+ * @LastEditTime: 2024-12-13 16:44:58
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
  * @Description: 总览大屏-病害三维饼图
 -->
@@ -34,6 +34,26 @@
     <div class="echart" ref="currentChart"></div>
     <div class="food-legend">
       <fssm-scroll
+        v-if="!clickType"
+        style="display: flex; justify-content: center; flex-wrap: wrap"
+      >
+        <div
+          class="legend-div-first"
+          v-for="(item, index) in dataList"
+          :key="`chart-${index}`"
+          @click="clickType === '' ? changeEchart(item) : ''"
+        >
+          <div
+            class="index"
+            :style="{ backgroundColor: colorList[index] }"
+          ></div>
+          <div class="name" :title="item.typeName">{{ item.typeName }}</div>
+          <div class="rate">{{ item.rate }}%</div>
+          <div class="value">{{ item.value }}</div>
+        </div>
+      </fssm-scroll>
+      <fssm-scroll
+        v-else
         :style="{
           display: 'flex',
           flexWrap: 'wrap',
@@ -170,6 +190,7 @@ export default {
 
     /* 点击图例触发事件 */
     changeEchart(item) {
+      this.dataList = [];
       if (item) {
         this.clickType = item.id;
         this.getChartList();
@@ -306,7 +327,7 @@ export default {
           false,
           k,
           // 设置饼图高度
-          series[i].pieData.value / 1000
+          series[i].pieData.value / 2500
         );
 
         startValue = endValue;
@@ -449,6 +470,42 @@ export default {
     display: flex;
     flex-wrap: wrap;
 
+    .legend-div-first {
+      width: 45%;
+      height: 50%;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      font-size: 0.7rem;
+
+      .index {
+        width: 1rem;
+        height: 0.6rem;
+      }
+
+      .name {
+        width: 6rem;
+        padding-left: 0.3rem;
+        color: #aac6c7;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: "DouYu";
+      }
+
+      .rate {
+        width: 2.5rem;
+        color: #808c9f;
+        font-size: 0.9rem;
+      }
+
+      .value {
+        width: 4rem;
+        color: #808c9f;
+        font-size: 0.9rem;
+      }
+    }
+
     .legend-div {
       width: 32%;
       height: 30%;

src/views/big-screen/overview-components/disease-trends.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:16:30
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-10 11:42:05
+ * @LastEditTime: 2024-12-13 16:10:18
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-trends.vue
  * @Description: 总览大屏-病害趋势
 -->
@@ -61,12 +61,14 @@ export default {
           },
         },
         legend: {
-          top: "top",
+          top: "6%",
           icon: "roundRect",
           itemWidth: 15,
           itemHeight: 10,
           textStyle: {
             color: "#808C9F",
+            fontSize: 10,
+            fontFamily: "DouYu",
           },
         },
         grid: {
@@ -91,7 +93,6 @@ export default {
         },
         xAxis: {
           type: "category",
-          data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00"],
           axisLine: {
             lineStyle: {
               color: "rgba(60,132,163,0.4)", // x轴线颜色
@@ -109,10 +110,16 @@ export default {
           data: xData,
         },
         yAxis: {
+          name: "数量:个",
+          nameTextStyle: {
+            color: "#C7DAF2",
+            align: "left",
+          },
           type: "value",
           axisTick: {
             show: false,
           },
+          minInterval: 1,
           axisLine: {
             show: false,
           },

src/views/big-screen/road-components/anomaly-facilities.vue

@@ -193,10 +193,11 @@ export default {
         ],
         yAxis: [
           {
-            name: "数量",
+            name: "数量:个",
             nameTextStyle: {
               color: "#C7DAF2",
             },
+            minInterval: 1,
             splitLine: {
               show: false,
             },

src/views/index-components/daily-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:12:20
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-05 16:36:31
+ * @LastEditTime: 2024-12-13 15:25:14
  * @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
  * @Description: 首页-日常巡查
 -->
@@ -170,6 +170,7 @@ export default {
             {
               name: "",
               type: "value",
+              minInterval: 1,
               axisLine: {
                 lineStyle: {
                   color: "#A2B0B8",
@@ -186,6 +187,7 @@ export default {
             {
               name: "",
               type: "value",
+              minInterval: 1,
               axisLine: {
                 lineStyle: {
                   color: "#A2B0B8",

src/views/index-components/disease-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:17:58
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-10 11:58:18
+ * @LastEditTime: 2024-12-13 15:29:06
  * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
  * @Description: 首页-病害识别
 -->
@@ -22,13 +22,15 @@
         <div>
           <div class="name">病害识别总数</div>
           <div class="value">
-            <span>{{ total }}</span>个
+            <span>{{ total }}</span
+            >个
           </div>
         </div>
         <div>
           <div class="name">新增病害数</div>
           <div class="value">
-            <span>{{ newTotal }}</span>个
+            <span>{{ newTotal }}</span
+            >个
           </div>
         </div>
       </div>
@@ -38,9 +40,16 @@
           <div class="distribution-div" ref="distributionChart"></div>
           <div class="distribution-legnd">
             <fssm-scroll>
-              <div class="legnd-div" v-for="(item, index) in distributionList" :key="`distribution-${index}`">
+              <div
+                class="legnd-div"
+                v-for="(item, index) in distributionList"
+                :key="`distribution-${index}`"
+              >
                 <div class="name">
-                  <span class="index" :style="{ backgroundColor: distributionColor[index] }"></span>
+                  <span
+                    class="index"
+                    :style="{ backgroundColor: distributionColor[index] }"
+                  ></span>
                   <span>{{ item.name }}</span>
                 </div>
                 <div class="rate">{{ item.rate }}</div>
@@ -150,7 +159,10 @@ export default {
             return {
               value: item.value,
               name: item.label,
-              rate: `${((item.value / data.total) * 100).toFixed(0)}%`,
+              rate:
+                data.total > 0
+                  ? `${((item.value / data.total) * 100).toFixed(0)}%`
+                  : "0%",
             };
           });
           this.$nextTick(() => {
@@ -223,6 +235,7 @@ export default {
             {
               name: "",
               type: "value",
+              minInterval: 1,
               axisLine: {
                 lineStyle: {
                   color: "#A2B0B8",
@@ -261,7 +274,10 @@ export default {
               // 是否显示detail，即拖拽时候显示详细数值信息
               showDetail: false,
               // 数据窗口范围的起始数值
-              startValue: this.statisticsData.length > 6 ? this.statisticsData.length - 6 : 0,
+              startValue:
+                this.statisticsData.length > 6
+                  ? this.statisticsData.length - 6
+                  : 0,
               // 数据窗口范围的结束数值（一页显示多少条数据）
               endValue: this.statisticsData.length,
               // empty：当前数据窗口外的数据，被设置为空。
@@ -430,7 +446,7 @@ export default {
       background: url("../../assets/index/left-bkg.png") no-repeat;
       background-size: 100%;
 
-      >div {
+      > div {
         height: 50%;
         width: calc(100% - 2rem);
         margin: 0 1rem;
@@ -472,7 +488,7 @@ export default {
         z-index: 1;
       }
 
-      >div {
+      > div {
         height: 50%;
         width: 100%;
         display: flex;

src/views/index-components/road-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:23:44
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-09 11:53:20
+ * @LastEditTime: 2024-12-13 15:29:27
  * @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
  * @Description: 首页-公路资产
 -->
@@ -173,6 +173,7 @@ export default {
             {
               name: "",
               type: "value",
+              minInterval: 1,
               axisLine: {
                 lineStyle: {
                   color: "#A2B0B8",

src/views/index-components/traffic-index.vue

@@ -192,12 +192,13 @@ export default {
           ],
           yAxis: [
             {
+              name: "",
+              type: "value",
               nameTextStyle: {
                 color: "#fff",
                 fontSize: 12,
               },
-              name: "",
+              minInterval: 1,
-              type: "value",
               axisLabel: {
                 show: true,
                 color: "#9eaaba",