fix：地图图例，数据栏右上角切换清空选择框绑定，病害弹窗功能完善

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>

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,10 +329,15 @@ export default {
     },
     /* 图片位置信息获取 */
     updateRects() {
+      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(",")
+          this.defectData[this.currentIndex]?.media[
+            this.selectedThumbnail
+          ]?.rect
+            ?.split(",")
             .map(Number) || [];
         this.rects = [
           {
@@ -319,6 +347,8 @@ export default {
             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;

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

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) => {
+              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%;
       }
 
       // 打点部分

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

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

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

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>
+    <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>
+      <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>