fix：首页+大屏问题修改

2024-10-31 09:20:08 +08:00 · 2024-10-31 09:20:08 +08:00 · 3b65a08f56
commit 3b65a08f56
parent 8d356de312
11 changed files with 226 additions and 113 deletions
--- 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);
  },
--- 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%
+        );
      }
    }
  }
--- 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);
        }
      });
    },
--- 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}",
--- 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;
        }
      });
--- 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 {
--- 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: 交安事件大屏-交安突发事件
 -->
--- 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 {
--- 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",
              },
--- 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: {
--- 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,
                    },
                  },