fix：首页+大屏问题修改

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);
   },

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%
+        );
       }
     }
   }

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) => {
+          this.roadList = data
+            .map((item) => {
               return {
                 ...item,
                 tongbi: item.tongbi.slice(0, 3),
                 huanbi: item.huanbi.slice(0, 3),
               };
-          });
+            })
+            .slice(0, 5);
         }
       });
     },

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 = 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.$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}",

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;
         }
       });

src/views/big-screen/road-components/road-statistic.vue

@@ -2,13 +2,19 @@
  * @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">
+    <vue-seamless-scroll
+      class="vue-scroll"
+      :class-option="defaultOption"
+      :data="roadList"
+      v-if="roadList.length > 9"
+    >
       <div
         class="road-div"
         v-for="(item, index) in roadList"
@@ -32,13 +38,43 @@
           ></div>
         </div>
       </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>
+    </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 {

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: 交安事件大屏-交安突发事件
 -->

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,6 +10,12 @@
 
 <template>
   <div class="content">
+    <vue-seamless-scroll
+      class="vue-scroll"
+      :class-option="defaultOption"
+      :data="rankList"
+      v-if="rankList.length > 9"
+    >
       <div
         class="rank-div"
         v-for="(item, index) in rankList"
@@ -21,19 +27,41 @@
         </div>
         <div class="rank-bottom">
           <div
-          :style="{ width: `${(item.value / 600) * 100}%` }"
+            :style="{ width: `${item.rate}%` }"
             :class="`rank-bottom-${index}`"
           ></div>
           <div class="rank-bottom-tip"></div>
         </div>
       </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>
+    </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 {

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",
       ],
-      // 颜色盘
+      // echart图数据
-      echartList: [
+      echartList: [],
-        {
+      // 交安事件总数
-          value: 335,
+      sum: 0,
-          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实例
-      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",
               },

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: {

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,
+                      fontSize: 18,
-                      lineHeight: 50,
+                      lineHeight: 18,
                       color: "#000",
                     },
                     b: {
                       color: "#000",
-                      fontSize: 30,
+                      fontSize: 16,
                       lineHeight: 30,
                     },
                   },