From fe0d8f9b5425209e233355cc8942d2295c2e7364 Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Tue, 29 Oct 2024 14:46:32 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E5=9C=B0=E5=9B=BE=E5=9B=BE?=
 =?UTF-8?q?=E4=BE=8B=EF=BC=8C=E6=95=B0=E6=8D=AE=E6=A0=8F=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92=E5=88=87=E6=8D=A2=E6=B8=85=E7=A9=BA=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E6=A1=86=E7=BB=91=E5=AE=9A=EF=BC=8C=E7=97=85=E5=AE=B3=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/screen/index/map-legend.png        | Bin 0 -> 4620 bytes
 src/components/scroll/fssm-scroll.vue         |  22 +++-
 .../big-screen/components/img-dialog.vue      |  72 +++++++++----
 .../disease-components/disease-current.vue    |  14 ++-
 src/views/big-screen/index.vue                |  16 ++-
 .../road-components/anomaly-facilities.vue    |  12 ++-
 .../traffic-components/traffic-statistic.vue  |  13 ++-
 .../traffic-components/traffic-trend.vue      |  16 ++-
 src/views/index.vue                           | 101 +++++++++++++++---
 9 files changed, 208 insertions(+), 58 deletions(-)
 create mode 100644 src/assets/screen/index/map-legend.png

diff --git a/src/assets/screen/index/map-legend.png b/src/assets/screen/index/map-legend.png
new file mode 100644
index 0000000000000000000000000000000000000000..e93a50a39813c419c036173f83511e5f21ddb413
GIT binary patch
literal 4620
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
CB+bMC

literal 0
HcmV?d00001

diff --git a/src/components/scroll/fssm-scroll.vue b/src/components/scroll/fssm-scroll.vue
index a940eef..f9b2110 100644
--- a/src/components/scroll/fssm-scroll.vue
+++ b/src/components/scroll/fssm-scroll.vue
@@ -7,13 +7,21 @@
  * @Description: 滚动条封装样式
 -->
 <template>
-  <div class="scroll-box">
+  <div :class="showBar ? `scroll-box` : `scroll-box-disabled`">
     <slot></slot>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  name: "FssmScroll",
+  props: {
+    showBar: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -36,4 +44,14 @@ export default {};
     background: rgba(220, 231, 248, 0.1);
   }
 }
+
+.scroll-box-disabled {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/big-screen/components/img-dialog.vue b/src/views/big-screen/components/img-dialog.vue
index 3dd5baa..cbece97 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-23 10:38:26
+ * @LastEditTime: 2024-10-29 14:34:32
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -97,9 +97,10 @@
           ></div>
         </div>
         <div class="image-info">
-          采集时间: 2024-08-26 15:44:42<br />
-          起始桩号: K0003+204 终止桩号: K0003+204<br />
-          路产状态: 新增 融合状态: 未融合
+          采集时间: {{ new Date(rectsItem.createdTime).toLocaleString() }}<br />
+          起始桩号: {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
+          {{ rectsItem.stakeEnd || "暂无数据" }}<br />
+          路产状态: {{ filterState(rectsItem.state) }} 融合状态: 未融合
         </div>
       </div>
       <!-- 小图展示 -->
@@ -118,8 +119,7 @@
 </template>
 
 <script>
-import { listDefect, getSegment } from "@/api/xj/disease";
-
+import { listDefect, getSegment, getDefectStatus } from "@/api/xj/disease";
 export default {
   name: "ImgDialog",
   data() {
@@ -148,7 +148,12 @@ export default {
         page: 1,
         size: 10,
       },
+      // 图片病害位置信息
       rects: [],
+      // 图片下方数据
+      rectsItem: {},
+      // 病害状态下拉选项
+      defectStatus: [],
     };
   },
   computed: {
@@ -164,8 +169,27 @@ export default {
   },
   created() {
     this.getSegmentList();
+    this.getDefectStatusList();
   },
   methods: {
+    /* 查询病害状态下拉数据 */
+    getDefectStatusList() {
+      getDefectStatus().then(({ data, code }) => {
+        if (code === 200) {
+          this.defectStatus = data;
+        }
+      });
+    },
+    /* 过滤列表病害状态 */
+    filterState(value) {
+      let a = null;
+      [a] = this.defectStatus.filter((item) => {
+        return item.value === value;
+      });
+      if (a) {
+        return a.label;
+      }
+    },
     /* 获取路段下拉数据 */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
@@ -219,7 +243,6 @@ export default {
         }
       } else {
         this.defectData = [];
-
         this.params = {
           page: 1,
           size: 10,
@@ -306,19 +329,26 @@ export default {
     },
     /* 图片位置信息获取 */
     updateRects() {
-      const image = this.$refs.mainImage;
-      const rects =
-        this.defectData[this.currentIndex]?.media[this.selectedThumbnail]?.rect
-          .split(",")
-          .map(Number) || [];
-      this.rects = [
-        {
-          left: rects[0],
-          top: rects[1],
-          width: rects[2],
-          height: rects[3],
-        },
-      ];
+      this.rects = [];
+      this.rectsItem = {};
+      if (this.defectData.length > 0) {
+        const image = this.$refs.mainImage;
+        const rects =
+          this.defectData[this.currentIndex]?.media[
+            this.selectedThumbnail
+          ]?.rect
+            ?.split(",")
+            .map(Number) || [];
+        this.rects = [
+          {
+            left: rects[0],
+            top: rects[1],
+            width: rects[2],
+            height: rects[3],
+          },
+        ];
+        this.rectsItem = this.defectData[this.currentIndex];
+      }
     },
     /* 图片红框位置 */
     getRectStyle({ left, top, width, height }) {
@@ -432,7 +462,7 @@ export default {
     }
 
     .el-select {
-      width: 100%;
+      width: 12rem;
 
       .el-input--small .el-input__inner {
         color: #ffffff;
diff --git a/src/views/big-screen/disease-components/disease-current.vue b/src/views/big-screen/disease-components/disease-current.vue
index 5ade892..144a626 100644
--- a/src/views/big-screen/disease-components/disease-current.vue
+++ b/src/views/big-screen/disease-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-10-24 16:37:52
+ * @LastEditTime: 2024-10-29 13:43:38
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
  * @Description: 病害巡检-病害三维饼图
 -->
@@ -73,12 +73,15 @@ export default {
       ],
       // echart数据
       dataList: [],
+      // echart实例
+      chart: "",
     };
   },
   watch: {
     select: {
       handler(val) {
         if (val) {
+          this.itemSelect = "";
           this.getCurrentList();
           this.getChartList();
         }
@@ -132,8 +135,11 @@ export default {
     drawChart() {
       const data = this.dataList;
       if (this.$refs.currentChart) {
-        const chart = echarts.init(this.$refs.currentChart);
-        chart.setOption({
+        if (this.chart) {
+          this.chart.dispose();
+        }
+        this.chart = echarts.init(this.$refs.currentChart);
+        this.chart.setOption({
           legend: {
             show: false,
           },
@@ -193,7 +199,7 @@ export default {
           series: this.getPie3D(this.dataList, 0.8),
         });
         window.addEventListener("resize", () => {
-          chart.resize();
+          this.chart.resize();
         });
       }
     },
diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue
index a822892..7766067 100644
--- a/src/views/big-screen/index.vue
+++ b/src/views/big-screen/index.vue
@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-29 10:25:21
+ * @LastEditTime: 2024-10-29 14:00:48
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -463,7 +463,11 @@ export default {
         mapPointList({ type: this.mapClick }).then(({ code, data }) => {
           if (code === 200) {
             this.centerPiont = data.map((item) => {
-              return [item.geometry[0], item.geometry[1]];
+              if(item.geometry){
+
+                return [item.geometry[0], item.geometry[1]];
+              }
+              return []
             });
             this.drawPoint();
           }
@@ -1089,13 +1093,15 @@ export default {
 
       // 图例
       .map-legend {
-        height: 9rem;
+        height: 7rem;
         width: 2rem;
         position: absolute;
         top: 13%;
-        left: 26%;
-        background-color: #1cb6ff;
+        left: 28%;
         z-index: 1;
+        background-image: url("../../assets/screen/index/map-legend.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
       }
 
       // 打点部分
diff --git a/src/views/big-screen/road-components/anomaly-facilities.vue b/src/views/big-screen/road-components/anomaly-facilities.vue
index 3a1b9ab..9d531d6 100644
--- a/src/views/big-screen/road-components/anomaly-facilities.vue
+++ b/src/views/big-screen/road-components/anomaly-facilities.vue
@@ -47,12 +47,15 @@ export default {
       currentList: [],
       // echart图数据
       anomalyData: [],
+      // echart实例
+      chart:null
     };
   },
   watch: {
     select: {
       handler(val) {
         if (val) {
+          this.itemSelect = "";
           this.getCurrentList();
           this.getChartData();
         }
@@ -104,6 +107,9 @@ export default {
     },
     /* 绘制echart */
     drawChart() {
+      if(this.chart){
+        this.chart.dispose()
+      }
       const xData = this.anomalyData.map((item) => {
         return item.label;
       });
@@ -160,8 +166,8 @@ export default {
           };
         }
       });
-      const chart = echarts.init(this.$refs.anomalyChart);
-      chart.setOption({
+      this.chart = echarts.init(this.$refs.anomalyChart);
+      this.chart.setOption({
         // backgroundColor: "#041139",
         tooltip: {
           trigger: "item",
@@ -258,7 +264,7 @@ export default {
         ],
       });
       window.addEventListener("resize", () => {
-        chart.resize();
+        this.chart.resize();
       });
     },
   },
diff --git a/src/views/big-screen/traffic-components/traffic-statistic.vue b/src/views/big-screen/traffic-components/traffic-statistic.vue
index 2d18fd9..2bd2082 100644
--- a/src/views/big-screen/traffic-components/traffic-statistic.vue
+++ b/src/views/big-screen/traffic-components/traffic-statistic.vue
@@ -68,6 +68,7 @@ export default {
         "#4C21D5",
         "#6669DB",
       ],
+      // 颜色盘
       echartList: [
         {
           value: 335,
@@ -100,12 +101,15 @@ export default {
           rate: "110%",
         },
       ],
+      // echart实例
+      echart:null
     };
   },
   watch: {
     select: {
       handler(val) {
         if (val) {
+          this.itemSelect = "";
           this.getCurrentList();
           this.getChartData();
         }
@@ -146,8 +150,11 @@ export default {
     },
     /* 绘制echart图 */
     drawChart() {
-      const echart = echarts.init(this.$refs.statisticChart);
-      echart.setOption({
+      if (this.echart) {
+        this.echart.dispose();
+      }
+      this.echart = echarts.init(this.$refs.statisticChart);
+      this.echart.setOption({
         color: this.colorList,
         tooltip: {
           confine: true,
@@ -221,7 +228,7 @@ export default {
         ],
       });
       window.addEventListener("resize", () => {
-        echart.resize();
+        this.echart.resize();
       });
     },
   },
diff --git a/src/views/big-screen/traffic-components/traffic-trend.vue b/src/views/big-screen/traffic-components/traffic-trend.vue
index d070b7b..06b27ae 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-28 13:47:21
+ * @LastEditTime: 2024-10-29 13:50:21
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
  * @Description: 交安事件大屏-交安事件趋势
 -->
@@ -47,12 +47,15 @@ export default {
       trafficList: [],
       // echart图表数据
       echartData: [],
+      // echart实例
+      chart: null,
     };
   },
   watch: {
     select: {
       handler(val) {
         if (val) {
+          this.itemSelect = "";
           this.getCurrentList();
           this.getChartData();
         }
@@ -94,10 +97,13 @@ export default {
     },
     /* 绘制echart */
     drawChart() {
+      if (this.chart) {
+        this.chart.dispose();
+      }
       const xData = this.echartData.map((item) => {
         return item.label;
       });
-      const yData = this.echartData.map((item,index) => {
+      const yData = this.echartData.map((item, index) => {
         if (index % 2 == 0) {
           return {
             ...item,
@@ -150,8 +156,8 @@ export default {
           };
         }
       });
-      const chart = echarts.init(this.$refs.trafficChart);
-      chart.setOption({
+      this.chart = echarts.init(this.$refs.trafficChart);
+      this.chart.setOption({
         // backgroundColor: "#041139",
         tooltip: {
           trigger: "item",
@@ -245,7 +251,7 @@ export default {
         ],
       });
       window.addEventListener("resize", () => {
-        chart.resize();
+        this.chart.resize();
       });
     },
   },
diff --git a/src/views/index.vue b/src/views/index.vue
index cdb4ece..b70d91c 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,39 +2,110 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-28 14:33:52
+ * @LastEditTime: 2024-10-29 13:07:17
  * @FilePath: \znxjxt-ui\src\views\index.vue
  * @Description: 系统首页
 -->
 <template>
   <div class="app-container">
-    <div>顶栏</div>
-    <div>
-      <div>日常巡查</div>
-      <div>病害识别</div>
-    </div>
-    <div>
-      <div>公路资产</div>
-      <div>路况评定</div>
-    </div>
+    <fssm-scroll :showBar="false">
+      <div class="top-content">
+        <div
+          class="top-div"
+          :class="`top-div-${index}`"
+          v-for="(item, index) in topList"
+          :key="`top-div-${index}`"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="value">
+            <span>{{ item.value }}</span
+            >{{ item.unit }}
+          </div>
+        </div>
+      </div>
+      <div class="middle-content">
+        <div>日常巡查</div>
+        <div>病害识别</div>
+      </div>
+      <div class="bottom-content">
+        <div>公路资产</div>
+        <div>路况评定</div>
+      </div>
+    </fssm-scroll>
   </div>
 </template>
 <script>
-
-
+import FssmScroll from "@/components/scroll/fssm-scroll.vue";
 export default {
   name: "Index",
+  components: {
+    FssmScroll,
+  },
   data() {
     return {
-
+      // 顶栏循环数据
+      topList: [],
     };
   },
+  created() {
+    this.getTopData();
+  },
+  methods: {
+    /* 获取顶栏数据 */
+    getTopData() {
+      this.topList = [
+        { name: "巡查总里程", value: 54, unit: "个" },
+        { name: "现存病害总数", value: 54, unit: "个" },
+        { name: "公路资产总数", value: 54, unit: "个" },
+        { name: "交安事件总数", value: 54, unit: "个" },
+      ];
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-  .app-container{
-    padding: 0px;
+.app-container {
+  padding: 1rem;
+  height: calc(100vh - 5.4rem);
+}
+
+.top-content {
+  width: 100%;
+  height: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  border: 1px salmon solid;
+
+  .top-div {
+    width: 22%;
+    height: 80%;
+    padding: 1.5rem;
+    background-color: aqua;
+
+    .name {
+      font-family: "DouYu";
+    }
+
+    .value {
+      line-height: 4rem;
+
+      span{
+        font-size: 1.8rem;
+      }
+    }
   }
+}
+
+.middle-content {
+  width: 100%;
+  height: 60%;
+}
+
+.bottom-content {
+  width: 100%;
+  height: 60%;
+}
 </style>