From 3b65a08f5655bdf28fc1fcafb44c77d995815a1f Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Thu, 31 Oct 2024 09:20:08 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E9=A6=96=E9=A1=B5+=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../big-screen/components/img-dialog.vue      |  3 +-
 .../disease-components/pic-rank.vue           | 34 +++++--
 .../disease-components/road-rank.vue          | 16 ++--
 .../road-components/anomaly-facilities.vue    | 21 +----
 .../road-components/manage-maintain.vue       |  2 +-
 .../road-components/road-statistic.vue        | 88 +++++++++++++++----
 .../traffic-components/traffic-emergency.vue  |  2 +-
 .../traffic-components/traffic-rank.vue       | 83 +++++++++++++----
 .../traffic-components/traffic-statistic.vue  | 77 ++++++++--------
 .../traffic-components/traffic-trend.vue      |  5 +-
 src/views/index-components/disease-index.vue  |  8 +-
 11 files changed, 226 insertions(+), 113 deletions(-)

diff --git a/src/views/big-screen/components/img-dialog.vue b/src/views/big-screen/components/img-dialog.vue
index cbece97..b27bec1 100644
--- a/src/views/big-screen/components/img-dialog.vue
+++ b/src/views/big-screen/components/img-dialog.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-22 15:30:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-29 14:34:32
+ * @LastEditTime: 2024-10-30 17:01:57
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -379,6 +379,7 @@ export default {
   },
   mounted() {
     this.getList();
+    this.showImage(0);
     window.addEventListener("keydown", this.handleKeydown);
     window.addEventListener("resize", this.updateRects);
   },
diff --git a/src/views/big-screen/disease-components/pic-rank.vue b/src/views/big-screen/disease-components/pic-rank.vue
index 5b45e00..a3fdcfc 100644
--- a/src/views/big-screen/disease-components/pic-rank.vue
+++ b/src/views/big-screen/disease-components/pic-rank.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:31:31
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-24 15:35:02
+ * @LastEditTime: 2024-10-30 16:21:25
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\pic-rank.vue
  * @Description: 病害巡检-pic排名
 -->
@@ -94,7 +94,7 @@ export default {
     getPicData() {
       roadPic().then(({ data, code }) => {
         if (code === 200) {
-          this.picList = data;
+          this.picList = data.slice(0, 5);
         }
       });
     },
@@ -159,27 +159,47 @@ export default {
 
       .pic-bottom-0 {
         height: 0.3rem;
-        background: linear-gradient(90deg, #322707 0%, #ffc000 100%);
+        background: linear-gradient(
+          90deg,
+          rgba(3, 25, 56, 0.2) 0%,
+          #ffc000 100%
+        );
       }
 
       .pic-bottom-1 {
         height: 0.3rem;
-        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+        background: linear-gradient(
+          90deg,
+          rgba(3, 25, 56, 0.2) 0%,
+          #00fcff 100%
+        );
       }
 
       .pic-bottom-2 {
         height: 0.3rem;
-        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+        background: linear-gradient(
+          90deg,
+          rgba(3, 25, 56, 0.2) 0%,
+          #22b5ff 100%
+        );
       }
 
       .pic-bottom-3 {
         height: 0.3rem;
-        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+        background: linear-gradient(
+          90deg,
+          rgba(3, 25, 56, 0.2) 0%,
+          #00fcff 100%
+        );
       }
 
       .pic-bottom-4 {
         height: 0.3rem;
-        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+        background: linear-gradient(
+          90deg,
+          rgba(3, 25, 56, 0.2) 0%,
+          #22b5ff 100%
+        );
       }
     }
   }
diff --git a/src/views/big-screen/disease-components/road-rank.vue b/src/views/big-screen/disease-components/road-rank.vue
index 37658be..3ace3c2 100644
--- a/src/views/big-screen/disease-components/road-rank.vue
+++ b/src/views/big-screen/disease-components/road-rank.vue
@@ -114,13 +114,15 @@ export default {
     getRoadList() {
       roadRankList({ type: this.select }).then(({ data, code }) => {
         if (code === 200) {
-          this.roadList = data.map((item) => {
-            return {
-              ...item,
-              tongbi: item.tongbi.slice(0, 3),
-              huanbi: item.huanbi.slice(0, 3),
-            };
-          });
+          this.roadList = data
+            .map((item) => {
+              return {
+                ...item,
+                tongbi: item.tongbi.slice(0, 3),
+                huanbi: item.huanbi.slice(0, 3),
+              };
+            })
+            .slice(0, 5);
         }
       });
     },
diff --git a/src/views/big-screen/road-components/anomaly-facilities.vue b/src/views/big-screen/road-components/anomaly-facilities.vue
index 9d531d6..d458b5a 100644
--- a/src/views/big-screen/road-components/anomaly-facilities.vue
+++ b/src/views/big-screen/road-components/anomaly-facilities.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:21:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 15:37:00
+ * @LastEditTime: 2024-10-30 17:13:17
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
  * @Description: 附属设施异常统计
 -->
@@ -88,17 +88,7 @@ export default {
       };
       anomalyList(data).then(({ code, data }) => {
         if (code === 200) {
-          // this.anomalyData = data;
-          this.anomalyData = [
-            { label: "sss", value: 52 },
-            { label: "sss", value: 52 },
-            { label: "sss", value: 52 },
-            { label: "sss", value: 52 },
-            { label: "sss", value: 52 },
-            { label: "sss", value: 52 },
-            { label: "sss", value: 52 },
-            { label: "sss", value: 52 },
-          ];
+          this.anomalyData = data;
           this.$nextTick(() => {
             this.drawChart();
           });
@@ -170,7 +160,7 @@ export default {
       this.chart.setOption({
         // backgroundColor: "#041139",
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
           backgroundColor: "rgba(9, 24, 48, 0.5)",
           borderColor: "rgba(75, 253, 238, 0.4)",
           textStyle: {
@@ -238,7 +228,7 @@ export default {
         series: [
           // 柱体
           {
-            name: "人数",
+            name: "数量",
             type: "bar",
             barWidth: 10,
             itemStyle: {
@@ -249,9 +239,6 @@ export default {
             backgroundStyle: {
               color: "rgba(105,160,231,0.1)",
             },
-            // itemStyle: {
-
-            // },
             label: {
               show: false, //每条柱状图是否显示数字
               formatter: "{c}",
diff --git a/src/views/big-screen/road-components/manage-maintain.vue b/src/views/big-screen/road-components/manage-maintain.vue
index ed22eb6..ee34551 100644
--- a/src/views/big-screen/road-components/manage-maintain.vue
+++ b/src/views/big-screen/road-components/manage-maintain.vue
@@ -39,7 +39,7 @@ export default {
     getRoadList() {
       roadRankStatistics().then(({ code, data }) => {
         if (code === 200) {
-          this.mileage = data.mileage;
+          this.mileage = (data.mileage / 1000).toFixed();
           this.count = data.count;
         }
       });
diff --git a/src/views/big-screen/road-components/road-statistic.vue b/src/views/big-screen/road-components/road-statistic.vue
index d5585cf..6fdedbe 100644
--- a/src/views/big-screen/road-components/road-statistic.vue
+++ b/src/views/big-screen/road-components/road-statistic.vue
@@ -2,43 +2,79 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:22:31
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 16:11:56
+ * @LastEditTime: 2024-10-30 16:04:22
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
  * @Description: 道路资产大屏-路产统计
 -->
 
 <template>
   <div class="content">
-    <div
-      class="road-div"
-      v-for="(item, index) in roadList"
-      :key="`road-${index}`"
+    <vue-seamless-scroll
+      class="vue-scroll"
+      :class-option="defaultOption"
+      :data="roadList"
+      v-if="roadList.length > 9"
     >
-      <div class="road-top">
-        <div class="road-top-name">
-          <a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
-          >{{ item.label }}
+      <div
+        class="road-div"
+        v-for="(item, index) in roadList"
+        :key="`road-${index}`"
+      >
+        <div class="road-top">
+          <div class="road-top-name">
+            <a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
+            >{{ item.label }}
+          </div>
+          <div class="road-top-value">
+            <span>{{ item.value }}</span
+            ><a>个</a>
+          </div>
         </div>
-        <div class="road-top-value">
-          <span>{{ item.value }}</span
-          ><a>个</a>
+        <div class="road-bottom">
+          <div
+            class="road-bottom-div"
+            :style="{ width: `${item.rate * 100}%` }"
+            :class="`bottom-${index}`"
+          ></div>
         </div>
       </div>
-      <div class="road-bottom">
-        <div
-          class="road-bottom-div"
-          :style="{ width: `${item.rate * 100}%` }"
-          :class="`bottom-${index}`"
-        ></div>
+    </vue-seamless-scroll>
+    <template v-else>
+      <div
+        class="road-div"
+        v-for="(item, index) in roadList"
+        :key="`road-${index}`"
+      >
+        <div class="road-top">
+          <div class="road-top-name">
+            <a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
+            >{{ item.label }}
+          </div>
+          <div class="road-top-value">
+            <span>{{ item.value }}</span
+            ><a>个</a>
+          </div>
+        </div>
+        <div class="road-bottom">
+          <div
+            class="road-bottom-div"
+            :style="{ width: `${item.rate * 100}%` }"
+            :class="`bottom-${index}`"
+          ></div>
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
   
   <script>
 import { roadStatisticList } from "@/api/xj/screen/road-screen";
+import vueSeamlessScroll from "vue-seamless-scroll";
 export default {
   name: "RoadStatistic",
+  components: {
+    vueSeamlessScroll,
+  },
   props: {
     select: {
       type: String,
@@ -47,6 +83,18 @@ export default {
   },
   data() {
     return {
+      // 轮播配置
+      defaultOption: {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 1,
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
+      },
+      // 路产数据
       roadList: [],
     };
   },
@@ -85,6 +133,7 @@ export default {
 .content {
   width: 100%;
   height: 100%;
+  overflow: hidden;
   color: #ffffff;
 
   .road-div {
@@ -163,6 +212,7 @@ export default {
         width: 100%;
         height: 100%;
         display: flex;
+        background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
       }
 
       .bottom-0 {
diff --git a/src/views/big-screen/traffic-components/traffic-emergency.vue b/src/views/big-screen/traffic-components/traffic-emergency.vue
index 30fa84e..cabe90b 100644
--- a/src/views/big-screen/traffic-components/traffic-emergency.vue
+++ b/src/views/big-screen/traffic-components/traffic-emergency.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:12:55
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-28 13:35:47
+ * @LastEditTime: 2024-10-30 16:58:54
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-emergency.vue
  * @Description: 交安事件大屏-交安突发事件
 -->
diff --git a/src/views/big-screen/traffic-components/traffic-rank.vue b/src/views/big-screen/traffic-components/traffic-rank.vue
index aab6f82..6f0a12b 100644
--- a/src/views/big-screen/traffic-components/traffic-rank.vue
+++ b/src/views/big-screen/traffic-components/traffic-rank.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:11:03
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-21 14:04:49
+ * @LastEditTime: 2024-10-31 09:12:01
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-rank.vue
  * @Description: 交安事件大屏-交安事件排名
 -->
@@ -10,30 +10,58 @@
 
 <template>
   <div class="content">
-    <div
-      class="rank-div"
-      v-for="(item, index) in rankList"
-      :key="`rank-${index}`"
+    <vue-seamless-scroll
+      class="vue-scroll"
+      :class-option="defaultOption"
+      :data="rankList"
+      v-if="rankList.length > 9"
     >
-      <div class="rank-top" :class="`rank-top-${index}`">
-        <div class="name">{{ item.name }}</div>
-        <div class="value">{{ item.value }}</div>
+      <div
+        class="rank-div"
+        v-for="(item, index) in rankList"
+        :key="`rank-${index}`"
+      >
+        <div class="rank-top" :class="`rank-top-${index}`">
+          <div class="name">{{ item.name }}</div>
+          <div class="value">{{ item.value }}</div>
+        </div>
+        <div class="rank-bottom">
+          <div
+            :style="{ width: `${item.rate}%` }"
+            :class="`rank-bottom-${index}`"
+          ></div>
+          <div class="rank-bottom-tip"></div>
+        </div>
       </div>
-      <div class="rank-bottom">
-        <div
-          :style="{ width: `${(item.value / 600) * 100}%` }"
-          :class="`rank-bottom-${index}`"
-        ></div>
-        <div class="rank-bottom-tip"></div>
+    </vue-seamless-scroll>
+    <template v-else>
+      <div
+        class="rank-div"
+        v-for="(item, index) in rankList"
+        :key="`rank-${index}`"
+      >
+        <div class="rank-top" :class="`rank-top-${index}`">
+          <div class="name">{{ item.name }}</div>
+          <div class="value">{{ item.value }}</div>
+        </div>
+        <div class="rank-bottom">
+          <div
+            :style="{ width: `${item.rate}%` }"
+            :class="`rank-bottom-${index}`"
+          ></div>
+          <div class="rank-bottom-tip"></div>
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
   
   <script>
+import vueSeamlessScroll from "vue-seamless-scroll";
 import { rankCount } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "TrafficRank",
+  components: { vueSeamlessScroll },
   props: {
     select: {
       type: String,
@@ -42,6 +70,17 @@ export default {
   },
   data() {
     return {
+      // 轮播配置
+      defaultOption: {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 1,
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
+      },
       // 排名数据
       rankList: [],
     };
@@ -63,7 +102,18 @@ export default {
     getData() {
       rankCount({ type: this.select }).then(({ code, data }) => {
         if (code === 200) {
-          this.rankList = data;
+          let sum = 0;
+          data.forEach((element) => {
+            sum += element.value * 1;
+          });
+          this.rankList = data
+            .map((item) => {
+              return {
+                ...item,
+                rate: (item.value * 100) / sum,
+              };
+            })
+            .slice(0, 10);
         }
       });
     },
@@ -75,6 +125,7 @@ export default {
 .content {
   width: 100%;
   height: 100%;
+  overflow: hidden;
   padding-left: 1rem;
 
   .rank-div {
diff --git a/src/views/big-screen/traffic-components/traffic-statistic.vue b/src/views/big-screen/traffic-components/traffic-statistic.vue
index 2bd2082..707bab4 100644
--- a/src/views/big-screen/traffic-components/traffic-statistic.vue
+++ b/src/views/big-screen/traffic-components/traffic-statistic.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:06:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-28 13:17:29
+ * @LastEditTime: 2024-10-31 09:12:24
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
  * @Description: 交安事件大屏-交安事件统计
 -->
@@ -68,41 +68,12 @@ export default {
         "#4C21D5",
         "#6669DB",
       ],
-      // 颜色盘
-      echartList: [
-        {
-          value: 335,
-          name: "脱岗",
-          rate: "110%",
-        },
-        {
-          value: 234,
-          name: "在岗",
-          rate: "110%",
-        },
-        {
-          value: 335,
-          name: "比骚大苏打是",
-          rate: "110%",
-        },
-        {
-          value: 234,
-          name: "发士大夫",
-          rate: "110%",
-        },
-        {
-          value: 335,
-          name: "的风格",
-          rate: "110%",
-        },
-        {
-          value: 234,
-          name: "返回",
-          rate: "110%",
-        },
-      ],
+      // echart图数据
+      echartList: [],
+      // 交安事件总数
+      sum: 0,
       // echart实例
-      echart:null
+      echart: null,
     };
   },
   watch: {
@@ -141,7 +112,16 @@ export default {
       };
       statisticData(data).then(({ data, code }) => {
         if (code === 200) {
-          this.echartList = data;
+          this.sum = 0;
+          data.forEach((element) => {
+            this.sum += element.value;
+          });
+          this.echartList = data.map((item) => {
+            return {
+              ...item,
+              name: item.typeName,
+            };
+          });
           this.$nextTick(() => {
             this.drawChart();
           });
@@ -165,6 +145,29 @@ export default {
             color: "#808C9F",
           },
         },
+        title: [
+          // 中心比例
+          {
+            text: "交安事件总数",
+            left: "center",
+            top: "50%",
+            textStyle: {
+              fontFamily: "DinBm",
+              fontSize: 12,
+              color: "#ffffff",
+            },
+          },
+          {
+            text: this.sum,
+            left: "center",
+            top: "40%",
+            textStyle: {
+              fontFamily: "DouYu",
+              fontSize: 20,
+              color: "rgba(255, 183, 89, 0.8)",
+            },
+          },
+        ],
         grid: {
           top: "0%",
           left: "0%",
@@ -218,7 +221,7 @@ export default {
             },
             emphasis: {
               label: {
-                show: true,
+                show: false,
                 fontSize: 20,
                 fontWeight: "bold",
               },
diff --git a/src/views/big-screen/traffic-components/traffic-trend.vue b/src/views/big-screen/traffic-components/traffic-trend.vue
index 06b27ae..05e94ad 100644
--- a/src/views/big-screen/traffic-components/traffic-trend.vue
+++ b/src/views/big-screen/traffic-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-10-29 13:50:21
+ * @LastEditTime: 2024-10-30 16:32:10
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
  * @Description: 交安事件大屏-交安事件趋势
 -->
@@ -87,7 +87,6 @@ export default {
       };
       eventLog(data).then(({ data, code }) => {
         if (code === 200) {
-          console.log(data, "ffff");
           this.echartData = data;
           this.$nextTick(() => {
             this.drawChart();
@@ -160,7 +159,7 @@ export default {
       this.chart.setOption({
         // backgroundColor: "#041139",
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
           backgroundColor: "rgba(9, 24, 48, 0.5)",
           borderColor: "rgba(75, 253, 238, 0.4)",
           textStyle: {
diff --git a/src/views/index-components/disease-index.vue b/src/views/index-components/disease-index.vue
index fab85ff..91961e9 100644
--- 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-10-30 13:55:08
+ * @LastEditTime: 2024-10-31 09:15:52
  * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
  * @Description: 首页-病害识别
 -->
@@ -298,13 +298,13 @@ export default {
                   fontWeight: "bold",
                   rich: {
                     a: {
-                      fontSize: 40,
-                      lineHeight: 50,
+                      fontSize: 18,
+                      lineHeight: 18,
                       color: "#000",
                     },
                     b: {
                       color: "#000",
-                      fontSize: 30,
+                      fontSize: 16,
                       lineHeight: 30,
                     },
                   },