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

2024-12-13 17:06:50 +08:00 · 2024-12-13 17:06:50 +08:00 · a8fde34b5c
commit a8fde34b5c
parent 652ad05274
11 changed files with 114 additions and 26 deletions
--- a/package.json
+++ b/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",
--- a/src/views/big-screen/disease-components/traffic-trend.vue
+++ b/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,
            },
--- a/src/views/big-screen/index.vue
+++ b/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%;
-      left: 26%;
+      bottom: 16%;
+      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";
      }

      // 打点部分
--- a/src/views/big-screen/overview-components/disease-current.vue
+++ b/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%;
--- a/src/views/big-screen/overview-components/disease-trends.vue
+++ b/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,
          },
--- a/src/views/big-screen/overview-components/patrol-order.vue
+++ b/src/views/big-screen/overview-components/patrol-order.vue
@ -520,4 +520,4 @@ export default {
  padding: 0;
  background-color: #113463;
 }
-</style>
+</style>
--- a/src/views/big-screen/road-components/anomaly-facilities.vue
+++ b/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,
            },
--- a/src/views/index-components/daily-index.vue
+++ b/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",
--- a/src/views/index-components/disease-index.vue
+++ b/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;
--- a/src/views/index-components/road-index.vue
+++ b/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",
--- a/src/views/index-components/traffic-index.vue
+++ b/src/views/index-components/traffic-index.vue
@ -192,12 +192,13 @@ export default {
          ],
          yAxis: [
            {
+              name: "",
+              type: "value",
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
              },
-              name: "",
-              type: "value",
+              minInterval: 1,
              axisLabel: {
                show: true,
                color: "#9eaaba",