fix:总览修改,病害修改,

src/api/xj/screen/disease-screen.js

@@ -11,49 +11,90 @@ export function roadRankList(query) {
 
 // 病害趋势柱状图接口
 export function roadTrends(query) {
-    return request({
+  return request({
-      url: "/bigscreen/getHistoryDefect",
+    url: "/bigscreen/getHistoryDefect",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
 
+// v1
 //   今日巡查数据
-  export function roadToday(query) {
+// export function roadToday(query) {
-    return request({
+//   return request({
-      url: "/bigscreen/getInspectionInfo",
+//     url: "/bigscreen/getInspectionInfo",
-      method: "get",
+//     method: "get",
-      params: query,
+//     params: query,
-    });
+//   });
-  }
+// }
+export function roadToday(query) {
+  return request({
+    url: "/bigscreen/v2/getInspectionInfo",
+    method: "get",
+    params: query,
+  });
+}
 
+// 今日巡查弹窗
+export function roadTodayDetail(query) {
+  return request({
+    url: "/bigscreen/v2/getInspectionDetailInfo",
+    method: "get",
+    params: query,
+  });
+}
 
-  //   pci排名数据
+//   pci排名数据
-  export function roadPic(query) {
+export function roadPic(query) {
-    return request({
+  return request({
-      url: "/bigscreen/pciRanking",
+    url: "/bigscreen/pciRanking",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
 
+// v2
+// //   病害趋势3维饼图
+// export function roadCurrent(query) {
+//     return request({
+//       url: "/bigscreen/roadStatus",
+//       method: "get",
+//       params: query,
+//     });
+//   }
 
 //   病害趋势3维饼图
 export function roadCurrent(query) {
-    return request({
+  return request({
-      url: "/bigscreen/roadStatus",
+    url: "/bigscreen/v2/roadStatus",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
 
 //   数据栏内右上角下拉框
 export function getDropList(query) {
-    return request({
+  return request({
-      url: "/bigscreen/getDropdownList",
+    url: "/bigscreen/getDropdownList",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
 
+// 获取巡查里程数据
+export function getMileage(query) {
+  return request({
+    url: "/bigscreen/v2/getTaskInfo",
+    method: "get",
+    params: query,
+  });
+}
 
+// 获取巡检车辆数据
+export function getCarList(query) {
+  return request({
+    url: "/bigscreen/v2/getCarList",
+    method: "get",
+    params: query,
+  });
+}

src/api/xj/screen/index.js

@@ -43,19 +43,37 @@ export function comppanyImg() {
   });
 }
 
+
+// v1
+// 获取病害筛选弹窗列表数据
+// export function defeaseList(data) {
+//   return request({
+//     url: "/bigscreen/getCurrentDefectPage",
+//     method: "post",
+//     data,
+//   });
+// }
+
 // 获取病害筛选弹窗列表数据
 export function defeaseList(data) {
   return request({
-    url: "/bigscreen/getCurrentDefectPage",
+    url: "/bigscreen/v2/getCurrentDefectPage",
     method: "post",
     data,
   });
 }
 
 //   获取病害筛选弹窗路段下拉数据
+// export function getSegment(data) {
+//   return request({
+//     url: "/bigscreen/selectIdList",
+//     method: "post",
+//     data,
+//   });
+// }
 export function getSegment(data) {
   return request({
-    url: "/bigscreen/selectIdList",
+    url: "/bigscreen/v2/selectIdList",
     method: "post",
     data,
   });

src/api/xj/screen/traffic-screen.js

@@ -1,27 +1,59 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-28 11:33:51
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-13 14:18:33
+ * @FilePath: \znxjxt-ui\src\api\xj\screen\traffic-screen.js
+ * @Description: 大屏病害巡检接口
+ */
 import request from "@/utils/request";
 
 // 交安事件接口
-export function safetyData(query) {
+// export function safetyData(query) {
+//   return request({
+//     url: "/bigscreen/getEventInfo",
+//     method: "get",
+//     params: query,
+//   });
+// }
+//   今日巡查数据
+export function roadToday(query) {
   return request({
-    url: "/bigscreen/getEventInfo",
+    url: "/bigscreen/v2/getInspectionInfo",
+    method: "get",
+    params: query,
+  });
+}
+
+// 今日巡查弹窗
+export function roadTodayDetail(query) {
+  return request({
+    url: "/bigscreen/v2/getInspectionDetailInfo",
     method: "get",
     params: query,
   });
 }
 
 //  交安事件趋势接口
-export function eventLog(query) {
+export function defectLog(query) {
   return request({
-    url: "/bigscreen/getEventLog",
+    url: "/bigscreen/v2/getDefectLog",
     method: "get",
     params: query,
   });
 }
 
 //  交安事件统计接口
-export function statisticData(query) {
+// export function statisticData(query) {
+//   return request({
+//     url: "/bigscreen/eventStatus",
+//     method: "get",
+//     params: query,
+//   });
+// }
+export function roadCurrent(query) {
   return request({
-    url: "/bigscreen/eventStatus",
+    url: "/bigscreen/v2/roadStatus",
     method: "get",
     params: query,
   });
@@ -29,19 +61,37 @@ export function statisticData(query) {
 
 // 交安事件排名接口
 export function rankCount(query) {
-    return request({
+  return request({
-      url: "/bigscreen/getEventCountRanking",
+    url: "/bigscreen/getEventCountRanking",
-      method: "get",
+    method: "get",
-      params: query,
+    params: query,
-    });
+  });
-  }
+}
-
 
 // 交安突发事件
-export function emergencyData(query) {
+// export function emergencyData(query) {
-    return request({
+//   return request({
-      url: "/bigscreen/getEmergencyEvent",
+//     url: "/bigscreen/getEmergencyEvent",
-      method: "get",
+//     method: "get",
-      params: query,
+//     params: query,
-    });
+//   });
-  }
+// }
+
+// 病害日志列表
+export function emergencyData(data) {
+  return request({
+    url: "/bigscreen/v2/getCurrentDefectListPage",
+    method: "post",
+    data,
+  });
+}
+
+
+// 病害日志-病害类型下拉
+export function DefectType(query) {
+  return request({
+    url: "/bigscreen/v2/getAllDefectType",
+    method: "get",
+    params: query,
+  });
+}

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-11-11 14:37:32
+ * @LastEditTime: 2024-11-13 13:31:49
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -11,16 +11,26 @@
   <div class="app">
     <div class="left-list">
       <div class="img-top">
-        <el-radio-group v-model="labelCheck" size="small">
+        <div
-          <el-radio-button label="left">目标维度</el-radio-button>
+          class="img-top-div"
-          <el-radio-button label="right">空间维度</el-radio-button>
+          :class="labelCheck === 'aim' ? 'img-top-div-click' : ''"
-        </el-radio-group>
+          @click.stop="changeImgType('aim')"
+        >
+          目标维度
+        </div>
+        <div
+          class="img-top-div"
+          :class="labelCheck === 'aria' ? 'img-top-div-click' : ''"
+          @click.stop="changeImgType('aria')"
+        >
+          空间维度
+        </div>
       </div>
       <div class="sidebar" ref="sidebar" @scroll="handleScroll">
         <img
           v-for="(item, index) in defectData"
-          :key="item.id"
+          :key="`${item.id}-${index}`"
-          :src="item.media[0].img"
+          :src="item.url"
           :alt="'Image ' + (index + 1)"
           @click="showImage(index)"
           :class="{ selected: currentIndex === index }"
@@ -88,12 +98,12 @@
 
           <el-button
             type="primary"
-            icon="el-icon-search"
+            class="btn-submit"
             size="mini"
             @click="handleQuery"
             >搜索</el-button
           >
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          <el-button class="btn-cancel" size="mini" @click="resetQuery"
             >重置</el-button
           >
         </el-form>
@@ -101,25 +111,39 @@
       <!-- 图片展示 -->
       <div class="image-viewer">
         <div class="image-container" ref="imageContainer">
+          <div
+            class="rect-overlay"
+            v-for="(item, index) in rectItem"
+            :key="`rect-overlay-${index}`"
+            :style="getRectStyle(item.rectPosition, index)"
+            @click="clickImage(item)"
+          >
+            <div :style="{ color: colorList[index] }" class="rect-overlay-text">
+              目标详情>>
+            </div>
+          </div>
+          <div class="rect-image">
+            <div
+              class="image-info"
+              v-for="(item, index) in rectItem"
+              :key="`image-info-${index}`"
+              :style="{ color: colorList[index] }"
+            >
+              采集时间:
+              {{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
+              {{ item.stakeStart || "暂无数据" }} 终止桩号:
+              {{ item.stakeEnd || "暂无数据" }}
+              病害类型:
+              {{ item.type || "暂无数据" }} 病害面积：{{ item.area }}平方米
+              病害长度{{ item.length }}米
+            </div>
+          </div>
           <img
             :src="currentImage"
             alt="Main Image"
             ref="mainImage"
             @load="updateRects"
           />
-          <div
-            class="rect-overlay"
-            v-for="(rect, index) in rects"
-            :key="index"
-            :style="getRectStyle(rect)"
-          ></div>
-          <div class="image-info">
-            采集时间:
-            {{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号:
-            {{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
-            {{ rectsItem.stakeEnd || "暂无数据" }}
-            路产状态: {{ filterState(rectsItem.state) }}
-          </div>
         </div>
       </div>
       <!-- 小图展示 -->
@@ -145,13 +169,16 @@ export default {
   data() {
     return {
       // 维度选择
-      labelCheck: "left",
+      labelCheck: "aim",
-
+      // 目标维度事件
+      aimList: [],
+      // 空间维度数据
+      ariaList: [],
       // 左侧图片数据
       defectData: [],
       // 当前选择的index
       currentIndex: 0,
-      // 点击的index绑定
+      // 下方点击的index绑定
       selectedThumbnail: null,
       // 加载状态
       loading: false,
@@ -175,29 +202,36 @@ export default {
         page: 1,
         size: 10,
       },
-      // 图片病害位置信息
+      // 图片病害位置红框信息
-      rects: [],
+      rectItem: [],
-      // 图片下方数据
+      colorList: ["#FF0000", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
-      rectsItem: {},
       // 病害状态下拉选项
       defectStatus: [],
     };
   },
   computed: {
+    // 当前展示的图片url
     currentImage() {
-      const thumbnails = this.currentThumbnails;
+      if (this.defectData.length > 0) {
-      return (
+        // this.rectItem =
-        thumbnails[this.selectedThumbnail]?.img || thumbnails[0]?.img || ""
+        //   this.defectData[this.currentIndex]?.items[
-      );
+        //     this.selectedThumbnail
+        //   ]?.children;
+        return this.defectData[this.currentIndex].items[this.selectedThumbnail]
+          .img;
+      }
     },
+    // 下方小列表数据
     currentThumbnails() {
-      return this.defectData[this.currentIndex]?.media || [];
+      return this.defectData[this.currentIndex]?.items || [];
     },
   },
   created() {
-    // this.getSegmentList();
+    this.getList();
-    // this.getDefectStatusList();
+    this.showImage(0);
-    // this.getDefectType();
+    this.getSegmentList();
+    this.getDefectStatusList();
+    this.getDefectType();
   },
   methods: {
     /* 查询病害状态下拉数据 */
@@ -208,6 +242,7 @@ export default {
         }
       });
     },
+
     /* 过滤列表病害状态 */
     filterState(value) {
       let a = null;
@@ -218,6 +253,7 @@ export default {
         return a.label;
       }
     },
+
     /* 获取路段下拉数据 */
     getSegmentList() {
       getSegment().then(({ code, data }) => {
@@ -226,6 +262,7 @@ export default {
         }
       });
     },
+
     /* 获取病害类型下拉数据 */
     getDefectType() {
       getItemTypes({ type: "defect" }).then(({ code, data }) => {
@@ -234,6 +271,25 @@ export default {
         }
       });
     },
+
+    /* 切换维度事件 */
+    changeImgType(type) {
+      if (this.labelCheck != type) {
+        this.labelCheck = type;
+        if (type === "aria") {
+          this.defectData = this.ariaList;
+          if (this.currentIndex > this.ariaList.length - 1) {
+            this.showImage(this.ariaList.length - 1);
+          }
+        } else {
+          this.defectData = this.aimList;
+          if (this.currentIndex < this.aimList.length - 1) {
+            this.showImage(this.currentIndex);
+          }
+        }
+      }
+    },
+
     /* 获取图片列表/点击搜索事件 */
     getList() {
       this.loading = true;
@@ -243,13 +299,20 @@ export default {
       };
       defeaseList(data)
         .then((response) => {
-          this.defectData.push(...response.data);
+          this.aimList.push(...response.data.aim);
+          this.ariaList.push(...response.data.aria);
+          if (this.labelCheck === "aria") {
+            this.defectData = this.ariaList;
+          } else {
+            this.defectData = this.aimList;
+          }
           this.loading = false;
         })
         .catch(() => {
           this.loading = false;
         });
     },
+
     /* 点击搜索事件 */
     handleQuery() {
       const stakeReg = /^K\d{4}\+\d{3}$/;
@@ -287,6 +350,7 @@ export default {
         this.showImage(0);
       }
     },
+
     /* 重置事件 */
     resetQuery() {
       this.defectData = [];
@@ -303,8 +367,12 @@ export default {
       this.getList();
       this.showImage(0);
     },
+
     /* 左侧点击图片事件 */
     showImage(index) {
+      if (this.currentIndex === this.defectData.length - 1) {
+        this.loadMoreImages();
+      }
       this.currentIndex = index;
       this.selectedThumbnail = 0; // Reset to the first thumbnail when changing the main item
       this.scrollToCurrentImage();
@@ -312,31 +380,63 @@ export default {
         this.updateRects();
       });
     },
+
+    /* 点击下方小列表 */
     showThumbnailImage(index) {
       this.selectedThumbnail = index;
       this.updateRects();
     },
+
+    /* 使图片展示在父级容器可视区域 */
     scrollToCurrentImage() {
-      const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
+      if (this.$refs.sidebar) {
-      const currentImageElement = sidebarImages[this.currentIndex];
+        const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
-      if (currentImageElement) {
+        const currentImageElement = sidebarImages[this.currentIndex];
-        currentImageElement.scrollIntoView({
+        if (currentImageElement) {
-          behavior: "smooth",
+          currentImageElement.scrollIntoView({
-          block: "center",
+            behavior: "smooth",
-        });
+            block: "center",
+          });
+        }
       }
     },
+
     /* 滚动触发事件 */
     handleScroll() {
-      if (this.currentIndex === this.defectData.length - 1) {
+      // 滚动高度+容器高度  滚动区域高度
+      const sidebar = this.$refs.sidebar;
+      if (
+        sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 1 &&
+        !this.loading
+      ) {
         this.loadMoreImages();
       }
+      // if (this.currentIndex === this.defectData.length - 1) {
+      //   this.loadMoreImages();
+      // }
     },
+
     /* 加载更多图片方法 */
     loadMoreImages() {
       this.params.page += 1;
       this.getList();
     },
+
+    /* 点击目标详情事件 */
+    clickImage(item) {
+      if (this.labelCheck === "aim") {
+        this.labelCheck = "aria";
+        this.defectData = this.ariaList;
+        const index = this.ariaList.findIndex((it) => it.id === item.id) || 0;
+        this.showImage(index);
+      } else {
+        this.labelCheck = "aim";
+        this.defectData = this.aimList;
+        const index = this.aimList.findIndex((it) => it.id === item.id) || 0;
+        this.showImage(index);
+      }
+    },
+
     /* 键盘事件 */
     handleKeydown(event) {
       if (event.key === "ArrowUp") {
@@ -349,7 +449,7 @@ export default {
         }
       } else if (event.key === "ArrowDown") {
         event.preventDefault();
-        if (this.currentIndex <= this.defectData.length - 1) {
+        if (this.currentIndex < this.defectData.length - 1) {
           this.currentIndex === this.defectData.length - 1
             ? this.currentIndex
             : this.currentIndex++;
@@ -361,31 +461,24 @@ export default {
         }
       }
     },
+
     /* 图片位置信息获取 */
     updateRects() {
-      this.rects = [];
+      this.rectItem = [];
-      this.rectsItem = {};
       if (this.defectData.length > 0) {
-        const image = this.$refs.mainImage;
+        this.rectItem = this.defectData[this.currentIndex]?.items[
-        const rects =
+          this.selectedThumbnail
-          this.defectData[this.currentIndex]?.media[
+        ].children.map((item) => {
-            this.selectedThumbnail
+          return {
-          ]?.rect
+            ...item,
-            ?.split(",")
+            rectPosition: item.rect?.split(",").map(Number),
-            .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 }) {
+    getRectStyle([left, top, width, height], index) {
       const image = this.$refs.mainImage;
       const container = this.$refs.imageContainer;
       if (!image || !container) return {};
@@ -408,12 +501,11 @@ export default {
         height: `${height * scale}px`,
         border: "2px solid #FF0000",
         boxSizing: "border-box",
+        border: `2px solid ${this.colorList[index]}`,
       };
     },
   },
   mounted() {
-    this.getList();
-    this.showImage(0);
     window.addEventListener("keydown", this.handleKeydown);
     window.addEventListener("resize", this.updateRects);
   },
@@ -443,13 +535,20 @@ export default {
     display: flex;
     justify-content: center;
 
-    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+    .img-top-div {
-      background-color: #467198;
+      cursor: pointer;
+      width: 30%;
+      height: 90%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 1px solid #00aaff;
+      border-radius: 4px;
+      color: #ffffff;
     }
 
-    ::v-deep .el-radio-button__inner{
+    .img-top-div-click {
-      color: #ffffff;
+      background-color: rgb(69, 91, 140);
-      background-color: transparent;
     }
   }
 
@@ -568,15 +667,13 @@ export default {
   width: 100%;
   height: 95%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 
   .image-info {
-    position: absolute;
+    width: 100%;
-    color: red;
-    bottom: 0;
-    left: 10%;
   }
 }
 
@@ -586,10 +683,27 @@ export default {
   object-fit: contain;
 }
 
+// 画框样式
 .rect-overlay {
   position: absolute;
-  pointer-events: none;
+  // pointer-events: none;
-  border: 2px solid red;
+  // border: 2px solid red;
+  &:hover {
+    opacity: 0.7;
+  }
+
+  > div {
+    cursor: pointer;
+    position: absolute;
+    top: -1.2rem;
+  }
+}
+
+// 图片信息
+.rect-image {
+  width: 80%;
+  position: absolute;
+  bottom: 0;
 }
 
 .image-viewer {
@@ -623,4 +737,33 @@ export default {
 .thumbnail-row img.selected {
   border: 3px solid #00aaff;
 }
+
+// 按钮样式
+.btn-submit {
+  background-color: transparent;
+  background-image: url("~@/assets/screen/index/btn-submit.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: 50%;
+  border-color: transparent;
+  color: #ffffff;
+
+  &:active {
+    color: #0d9ee2;
+  }
+}
+
+.btn-cancel {
+  background-color: transparent;
+  background-image: url("~@/assets/screen/index/btn-cancel.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: 50%;
+  border-color: transparent;
+  color: #ffffff;
+
+  &:active {
+    color: #0d9ee2;
+  }
+}
 </style>

src/views/big-screen/disease-components/traffic-log.vue

@@ -2,9 +2,9 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-08 11:56:02
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-08 14:53:32
+ * @LastEditTime: 2024-11-13 15:09:42
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
- * @Description: 病害巡检-交安事件日志
+ * @Description: 病害巡检-病害日志
 -->
 <template>
   <div class="content">
@@ -18,11 +18,12 @@
         label-position="left"
         label-width="5rem"
       >
-        <el-form-item class="form-item" label="道路名称" prop="segmentName">
+        <el-form-item class="form-item" label="道路名称" prop="segmentId">
           <el-select
-            v-model="trafficForm.segmentName"
+            v-model="trafficForm.segmentId"
             :popper-append-to-body="false"
             placeholder="请选择道路名称"
+            filterable
             clearable
           >
             <el-option
@@ -33,17 +34,6 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item class="form-item" label="上下行" prop="inspectDirection">
-          <el-select
-            v-model="trafficForm.inspectDirection"
-            :popper-append-to-body="false"
-            placeholder="请选择"
-            clearable
-          >
-            <el-option label="上行" value="0" />
-            <el-option label="下行" value="1" />
-          </el-select>
-        </el-form-item>
         <el-form-item class="form-item" label="公里桩" prop="stakeRange">
           <el-input
             v-model="trafficForm.stakeStart"
@@ -67,11 +57,11 @@
             <i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
           </el-tooltip>
         </el-form-item>
-        <el-form-item class="form-item" label="事件类型" prop="equipmentType">
+        <el-form-item class="form-item" label="病害类型" prop="defectType">
           <el-select
-            v-model="trafficForm.equipmentType"
+            v-model="trafficForm.defectType"
             :popper-append-to-body="false"
-            placeholder="请选择事件类型"
+            placeholder="请选择病害类型"
             clearable
           >
             <el-option
@@ -82,11 +72,11 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item class="form-item" label="事件状态" prop="state">
+        <el-form-item class="form-item" label="病害状态" prop="state">
           <el-select
             v-model="trafficForm.state"
             :popper-append-to-body="false"
-            placeholder="请选择事件状态"
+            placeholder="请选择病害状态"
             clearable
           >
             <el-option
@@ -100,46 +90,67 @@
       </el-form>
     </div>
     <div class="form-btn">
-      <el-button
+      <el-button class="btn-submit" size="mini" @click="handleQuery"
-        type="primary"
-        icon="el-icon-search"
-        size="mini"
-        @click="handleQuery"
         >搜索</el-button
       >
-      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+      <el-button class="btn-cancel" size="mini" @click="resetQuery"
         >重置</el-button
       >
     </div>
-    <div class="traffic-title">
-      <div class="emergency-type">事件类型</div>
-      <div class="emergency-name">段路名称</div>
-      <div class="emergency-status">事件状态</div>
-      <div class="emergency-operation">操作</div>
-    </div>
     <div class="traffic-table">
-      <vue-seamless-scroll
+      <el-table
-        class="vue-scroll"
-        :class-option="defaultOption"
         :data="emergencyList"
+        header-row-class-name="headerRow"
+        row-class-name="bodayRow"
+        style="width: 100%; background: none"
+        height="375"
       >
-        <div
+        <el-table-column prop="defectType" label="病害类型"> </el-table-column>
-          class="emergency-bottom-div"
+        <el-table-column
-          v-for="(item, index) in emergencyList"
+          prop="segmentName"
-          :key="`emergency-${index}`"
+          width="180"
+          :show-overflow-tooltip="true"
+          label="路段名称"
         >
-          <div class="emergency-type">{{ item.type }}</div>
+        </el-table-column>
-          <div class="emergency-name">{{ item.segmentName }}</div>
+        <el-table-column prop="state" label="病害状态">
-          <div class="emergency-status"><a></a>{{ item.status }}</div>
+          <template slot-scope="scope">
-          <div class="emergency-operation">操作</div>
+            {{ scope.row.state === "2" ? "未修复" : "已修复" }}
-        </div>
+          </template>
-      </vue-seamless-scroll>
+        </el-table-column>
+        <el-table-column prop="pci" label="操作">
+          <template slot-scope="scope">
+            <el-button
+              slot="reference"
+              size="mini"
+              type="text"
+              @click="detailDefect(scope.row)"
+              >详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <div class="pagination-part">
+        <el-pagination
+          background
+          :pager-count="5"
+          :current-page.sync="pagination.page"
+          @current-change="handleCurrentChange"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size.sync="pagination.size"
+          layout="prev, pager, next"
+          :total="tableTotal"
+        >
+        </el-pagination>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { emergencyData } from "@/api/xj/screen/traffic-screen";
+import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen";
+import { getSegment } from "@/api/xj/screen/index";
 import vueSeamlessScroll from "vue-seamless-scroll";
 export default {
   name: "TrafficLog",
@@ -156,23 +167,26 @@ export default {
       // 查询表单绑定
       trafficForm: {
         // 道路名称
-        segmentName: "",
+        segmentId: "",
-        // 上下行
-        inspectDirection: "",
         // 公里桩
         stakeStart: "",
         stakeEnd: "",
-        // 事件类型
+        // 病害类型
-        equipmentType: "",
+        defectType: "",
-        // 事件状态
+        // 病害状态
         state: "",
       },
+      // 传接口的查询条件
+      searchForm: {},
       // 道路名称下拉数据
       segmentList: [],
-      // 事件类型下拉数据
+      // 病害类型下拉数据
       eventType: [],
-      // 事件状态下拉数据
+      // 病害状态下拉数据
-      defectStatus: [],
+      defectStatus: [
+        { label: "已修复", value: "2" },
+        { label: "未修复", value: "1" },
+      ],
       // 轮播配置
       defaultOption: {
         step: 0.2, // 数值越大速度滚动越快
@@ -186,22 +200,81 @@ export default {
       },
       // 事件列表
       emergencyList: [],
+      // 分页数据绑定
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 分页总数
+      tableTotal: 0,
     };
   },
+  watch: {
+    bottomTipClick: {
+      handler() {
+        this.trafficForm.defectType = "";
+        this.getAllDefectType();
+        this.getData();
+      },
+    },
+  },
   created() {
     this.getData();
+    this.getSegmentList();
+    this.getAllDefectType();
   },
   methods: {
+    /* 获取路段下拉数据 */
+    getSegmentList() {
+      getSegment().then(({ code, data }) => {
+        if (code === 200) {
+          this.segmentList = data;
+        }
+      });
+    },
+
+    /* 获取病害类型下拉数据 */
+    getAllDefectType() {
+      DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
+        if (code === 200) {
+          this.eventType = data;
+        }
+      });
+    },
+
     /* 点击搜索事件 */
-    handleQuery() {},
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
+      this.getData();
+    },
 
     /* 点击重置事件 */
-    resetQuery() {},
+    resetQuery() {
+      this.searchForm = {};
+      this.trafficForm = {
+        // 道路名称
+        segmentId: "",
+        // 公里桩
+        stakeStart: "",
+        stakeEnd: "",
+        // 病害类型
+        defectType: "",
+        // 病害状态
+        state: "",
+      };
+      this.getData();
+    },
 
     /* 获取事件列表数据 */
     getData() {
-      emergencyData().then(({ code, data }) => {
+      const data = {
+        classType: this.bottomTipClick,
+        ...this.searchForm,
+        ...this.pagination,
+      };
+      emergencyData(data).then(({ code, data }) => {
         if (code === 200) {
+          this.tableTotal = data.length;
           this.emergencyList = data;
         }
       });
@@ -217,7 +290,7 @@ export default {
 
   .traffic-form {
     width: calc(100% - 0.5rem);
-    height: 38%;
+    height: 30%;
     padding: 0.5rem;
 
     .form-item {
@@ -262,6 +335,10 @@ export default {
         .el-scrollbar {
           .el-select-dropdown__wrap {
             .el-scrollbar__view {
+              .el-select-dropdown__item {
+                color: #aaabb8;
+              }
+
               .el-select-dropdown__item:hover {
                 background-color: #2b4c7e;
               }
@@ -300,7 +377,7 @@ export default {
     color: #e6fcfe;
     font-size: 0.9rem;
     padding: 0 0.5rem;
-    background-image: url("../../../assets/screen/traffic/emergency-top.png");
+    background-image: url("~@/assets/screen/traffic/emergency-top.png");
     background-repeat: no-repeat;
     background-size: 100% 90%;
     background-position: 50% 100%;
@@ -322,55 +399,108 @@ export default {
     }
   }
 
-  .traffic-table {
+  ::v-deep .traffic-table {
     width: 100%;
-    height: 51%;
+    height: 66%;
+    padding: 0.5rem 0;
     overflow: hidden;
 
-    .emergency-bottom-div {
+    // 表格最下方border
-      height: 2rem;
+    .el-table::before {
-      font-size: 0.8rem;
+      background-color: transparent;
+    }
+
+    // 隐藏滚动条
+    .el-table__body-wrapper::-webkit-scrollbar {
+      /*width: 0;宽度为0隐藏*/
+      width: 0;
+    }
+
+    // 表头行
+    .headerRow {
+      background: url("~@/assets/screen/traffic/emergency-top.png") no-repeat;
+      background-size: 100%;
+
+      th {
+        color: #ffffff;
+        background: none;
+        border-color: transparent;
+      }
+    }
+
+    // 表格行
+    .bodayRow {
+      color: #ffffff;
+      background: none;
+
+      &:nth-child(2n) {
+        background: #113463;
+      }
+
+      // 表格内下划线
+      td {
+        // border-color: transparent;
+        border-bottom: 1px dashed rgb(115, 115, 116);
+      }
+
+      // 去除鼠标移动高亮
+      &:hover > td {
+        background-color: transparent;
+      }
+
+      .el-table__cell {
+        padding: 0.2rem 0;
+      }
+    }
+
+    /* 分页样式 */
+    .pagination-part {
+      width: 100%;
       display: flex;
+      padding-top: 0.5rem;
+      justify-content: flex-end;
 
-      &:nth-child(2n + 1) {
+      ::v-deep .el-pagination {
-        background-color: rgba(17, 52, 99, 0.3);
+        color: #ffffff;
-      }
+        .btn-prev,
-
+        .btn-next {
-      > div {
+          background-color: #6481aa;
-        margin: 0 0.3rem;
-        line-height: 2rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #808c9f;
-      }
-
-      .emergency-type {
-        width: 27%;
-      }
-
-      .emergency-name {
-        width: 27%;
-      }
-
-      .emergency-status {
-        width: 27%;
-
-        a {
-          display: inline-block;
-          width: 0.5rem;
-          height: 0.5rem;
-          margin-right: 0.5rem;
-          background-color: #f7da15;
-          border-radius: 0.25rem;
         }
       }
 
-      .emergency-operation {
+      ::v-deep .el-pager li {
-        width: 10%;
+        background: transparent;
-        color: #0d9ee2;
       }
     }
   }
 }
+
+// 按钮样式
+.btn-submit {
+  background-color: transparent;
+  background-image: url("~@/assets/screen/index/btn-submit.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: 50%;
+  border-color: transparent;
+  color: #ffffff;
+
+  &:active {
+    color: #0d9ee2;
+  }
+}
+
+.btn-cancel {
+  background-color: transparent;
+  background-image: url("~@/assets/screen/index/btn-cancel.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: 50%;
+  border-color: transparent;
+  color: #ffffff;
+
+  &:active {
+    color: #0d9ee2;
+  }
+}
 </style>

src/views/big-screen/disease-components/traffic-safety.vue

@@ -2,9 +2,9 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 09:59:32
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-28 11:42:15
+ * @LastEditTime: 2024-11-13 13:39:33
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
- * @Description: 病害巡检大屏-交安事件
+ * @Description: 病害巡检大屏-今日巡查
 -->
 
 <template>
@@ -13,7 +13,7 @@
       <span>{{ today }}</span>
     </div>
     <div class="traffic-right">
-      <div class="right-sum">
+      <div class="right-sum" @click="showDialog">
         <span>{{ all }}</span
         >个
       </div>
@@ -21,11 +21,28 @@
         <span> {{ scale }} </span>%
       </div>
     </div>
+
+    <!-- 病害巡检弹窗 -->
+    <el-dialog
+      title="当前病害查看"
+      :visible.sync="showDialogVisible"
+      width="75rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="screenCancel"
+    >
+      <div class="today-content">
+        <div ref="leftChart" class="dialog-div"></div>
+        <div ref="rightChart" class="dialog-div"></div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { safetyData } from "@/api/xj/screen/traffic-screen";
+import * as echarts from "echarts";
+import { roadToday, roadTodayDetail } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "TrafficSafety",
   props: {
@@ -37,17 +54,34 @@ export default {
   },
   data() {
     return {
+      // 新增病害数
       today: 0,
+      // 病害总数
       all: 0,
+      // 病害增长率
       scale: 0,
+      // 弹窗显隐控制
+      showDialogVisible: false,
+      // 左侧图表数据
+      leftChartData: [],
+      // 右侧图表数据
+      rightChartData: [],
     };
   },
+  watch: {
+    bottomTipClick: {
+      handler() {
+        this.getData();
+      },
+    },
+  },
   created() {
     this.getData();
   },
   methods: {
+    /* 获取数据 */
     getData() {
-      safetyData().then(({ code, data }) => {
+      roadToday({ classType: this.bottomTipClick }).then(({ code, data }) => {
         if (code === 200) {
           this.today = data.today;
           this.all = data.all;
@@ -55,6 +89,352 @@ export default {
         }
       });
     },
+
+    /* 点击打开弹窗 */
+    showDialog() {
+      this.getChartData();
+      this.showDialogVisible = true;
+    },
+
+    /* 请求弹窗数据 */
+    getChartData() {
+      roadTodayDetail({ classType: this.bottomTipClick }).then(
+        ({ code, data }) => {
+          if (code === 200) {
+            this.leftChartData = data[0];
+            this.rightChartData = data[1];
+            this.$nextTick(() => {
+              this.drawLeftChart();
+              this.drawRightChart();
+            });
+          }
+        }
+      );
+    },
+
+    /* 绘制左侧echart图 */
+    drawLeftChart() {
+      const xData = this.leftChartData.map((item) => {
+        return item.name;
+      });
+      const y1Data = this.leftChartData.map((item) => {
+        return item.road;
+      });
+      const y2Data = this.leftChartData.map((item) => {
+        return item.bridge;
+      });
+      const y3Data = this.leftChartData.map((item) => {
+        return item.event;
+      });
+      const y4Data = this.leftChartData.map((item) => {
+        return item.green;
+      });
+      if (this.$refs.leftChart) {
+        const chart = echarts.init(this.$refs.leftChart);
+        chart.setOption({
+          color: [
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
+                { offset: 1, color: "#82B3FD" }, // 100% 处的颜色
+              ],
+            },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#8087FF" }, // 0% 处的颜色
+                { offset: 1, color: "#532EFF" }, // 100% 处的颜色
+              ],
+            },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
+                { offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
+              ],
+            },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#F7DA15" }, // 0% 处的颜色
+                { offset: 1, color: "#FCC105" }, // 100% 处的颜色
+              ],
+            },
+          ],
+          title: {
+            text: "",
+          },
+          tooltip: {
+            trigger: "axis",
+            show: true,
+            confine: false,
+            backgroundColor: "rgba(9, 24, 48, 0.5)",
+            borderColor: "rgba(75, 253, 238, 0.4)",
+            textStyle: {
+              fontSize: 12,
+              color: "#ffffff",
+            },
+          },
+          grid: {
+            left: "3%",
+            right: "%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          legend: {
+            orient: "horizontal",
+            left: "right",
+            textStyle: {
+              color: "#fff",
+            },
+            itemWidth: 8,
+            itemHeight: 8,
+          },
+          xAxis: {
+            type: "category",
+            axisLabel: {
+              interval: 0,
+              color: "#fff",
+              formatter: (params) => {
+                if (params.length > 4) {
+                  return `${params.slice(0, 4)}...`;
+                }
+                return params;
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: xData,
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              color: "rgba(255,255,255,0.65)",
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.2)",
+              },
+            },
+            name: "单位：个",
+            nameTextStyle: {
+              color: "rgba(255,255,255,0.65)",
+            },
+          },
+          series: [
+            {
+              barWidth: 10,
+              name: "路面",
+              type: "bar",
+              data: y1Data,
+            },
+            {
+              barWidth: 10,
+              name: "交安",
+              type: "bar",
+              data: y3Data,
+            },
+            {
+              barWidth: 10,
+              name: "道桥",
+              type: "bar",
+              data: y2Data,
+            },
+            {
+              barWidth: 10,
+              name: "绿化",
+              type: "bar",
+              data: y4Data,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+
+    /* 绘制右侧echart图 */
+    drawRightChart() {
+      const xData = this.rightChartData.map((item) => {
+        return item.name;
+      });
+      const y1Data = this.rightChartData.map((item) => {
+        return item.road;
+      });
+      const y2Data = this.rightChartData.map((item) => {
+        return item.bridge;
+      });
+      const y3Data = this.rightChartData.map((item) => {
+        return item.event;
+      });
+      const y4Data = this.rightChartData.map((item) => {
+        return item.green;
+      });
+      if (this.$refs.rightChart) {
+        const chart = echarts.init(this.$refs.rightChart);
+        chart.setOption({
+          color: [
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#8DF2FF" }, // 0% 处的颜色
+                { offset: 1, color: "#82B3FD" }, // 100% 处的颜色
+              ],
+            },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#8087FF" }, // 0% 处的颜色
+                { offset: 1, color: "#532EFF" }, // 100% 处的颜色
+              ],
+            },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#FFB3B3" }, // 0% 处的颜色
+                { offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
+              ],
+            },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#F7DA15" }, // 0% 处的颜色
+                { offset: 1, color: "#FCC105" }, // 100% 处的颜色
+              ],
+            },
+          ],
+          title: {
+            text: "",
+          },
+          tooltip: {
+            trigger: "axis",
+            show: true,
+            confine: false,
+            backgroundColor: "rgba(9, 24, 48, 0.5)",
+            borderColor: "rgba(75, 253, 238, 0.4)",
+            textStyle: {
+              fontSize: 12,
+              color: "#ffffff",
+            },
+          },
+          grid: {
+            left: "3%",
+            right: "%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          legend: {
+            orient: "horizontal",
+            left: "right",
+            textStyle: {
+              color: "#fff",
+            },
+            itemWidth: 8,
+            itemHeight: 8,
+          },
+          xAxis: {
+            type: "category",
+            axisLabel: {
+              color: "#fff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: xData,
+          },
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              color: "rgba(255,255,255,0.65)",
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.2)",
+              },
+            },
+            name: "单位：个",
+            nameTextStyle: {
+              color: "rgba(255,255,255,0.65)",
+            },
+          },
+          series: [
+            {
+              barWidth: 10,
+              name: "路面",
+              type: "bar",
+              data: y1Data,
+            },
+            {
+              barWidth: 10,
+              name: "交安",
+              type: "bar",
+              data: y3Data,
+            },
+            {
+              barWidth: 10,
+              name: "道桥",
+              type: "bar",
+              data: y2Data,
+            },
+            {
+              barWidth: 10,
+              name: "绿化",
+              type: "bar",
+              data: y4Data,
+            },
+          ],
+        });
+        window.addEventListener("resize", () => {
+          chart.resize();
+        });
+      }
+    },
+
+    /* 关闭 弹窗事件 */
+    screenCancel() {
+      this.showDialogVisible = false;
+    },
   },
 };
 </script>
@@ -74,7 +454,8 @@ export default {
     justify-content: center;
     padding-left: 1.5rem;
     font-size: 2rem;
-    background-image: url("../../../assets/screen/traffic/traffic-left.png");
+    // background-image: url("../../../assets/screen/traffic/traffic-left.png");
+    background-image: url("~@/assets/screen/disease/today-left.png");
     background-repeat: no-repeat;
     background-size: 85%;
     background-position: 100% 60%;
@@ -101,13 +482,15 @@ export default {
     color: #ffffff;
 
     .right-sum {
+      cursor: pointer;
       width: 100%;
       height: 4rem;
       display: flex;
       padding-left: 1rem;
       justify-content: center;
       line-height: 3rem;
-      background-image: url("../../../assets/screen/traffic/right-sum.png");
+      // background-image: url("../../../assets/screen/traffic/right-sum.png");
+      background-image: url("~@/assets/screen/disease/right-sum.png");
       background-repeat: no-repeat;
       background-size: 100%;
       background-position: 100% 50%;
@@ -136,7 +519,8 @@ export default {
       justify-content: center;
       padding-left: 1rem;
       line-height: 3rem;
-      background-image: url("../../../assets/screen/traffic/right-rate.png");
+      // background-image: url("../../../assets/screen/traffic/right-rate.png");
+      background-image: url("~@/assets/screen/disease/right-rate.png");
       background-repeat: no-repeat;
       background-size: 100%;
       background-position: 100% 50%;
@@ -158,4 +542,32 @@ export default {
     }
   }
 }
+
+// 弹窗内容样式
+.today-content {
+  height: 30rem;
+  display: flex;
+
+  .dialog-div {
+    width: 50%;
+    height: 100%;
+    margin: 0 1rem;
+  }
+}
+
+/* 修改弹窗样式 */
+::v-deep .el-dialog__header {
+  padding: 10px;
+  background-color: #113463;
+
+  span,
+  i {
+    color: #ffffff;
+  }
+}
+
+::v-deep .el-dialog__body {
+  padding: 0;
+  background-color: #113463;
+}
 </style>

src/views/big-screen/disease-components/traffic-statistic.vue

@@ -2,9 +2,9 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:06:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-11 10:08:56
+ * @LastEditTime: 2024-11-13 13:57:00
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
- * @Description: 病害巡检大屏-交安事件统计
+ * @Description: 病害巡检大屏-病害统计
 -->
 <template>
   <div class="content">
@@ -41,7 +41,7 @@
   <script>
 import * as echarts from "echarts";
 import { getDropList } from "@/api/xj/screen/disease-screen";
-import { statisticData } from "@/api/xj/screen/traffic-screen";
+import { roadCurrent } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "TrafficStatistic",
   props: {
@@ -96,6 +96,11 @@ export default {
         this.getChartData();
       },
     },
+    bottomTipClick: {
+      handler() {
+        this.getChartData();
+      },
+    },
   },
   created() {
     this.getChartData();
@@ -109,13 +114,15 @@ export default {
         }
       });
     },
+
     /* 获取echart图数据 */
     getChartData() {
       const data = {
         itemName: this.itemSelect,
         type: this.select,
+        classType: this.bottomTipClick,
       };
-      statisticData(data).then(({ data, code }) => {
+      roadCurrent(data).then(({ data, code }) => {
         if (code === 200) {
           this.sum = 0;
           data.forEach((element) => {
@@ -133,6 +140,7 @@ export default {
         }
       });
     },
+    
     /* 绘制echart图 */
     drawChart() {
       if (this.echart) {
@@ -153,7 +161,7 @@ export default {
         title: [
           // 中心比例
           {
-            text: "交安事件总数",
+            text: "病害总数",
             left: "center",
             top: "50%",
             textStyle: {

src/views/big-screen/disease-components/traffic-trend.vue

@@ -2,9 +2,9 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:03:08
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-11 10:08:41
+ * @LastEditTime: 2024-11-13 13:54:26
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
- * @Description: 病害巡检大屏-交安事件趋势
+ * @Description: 病害巡检大屏-病害趋势
 -->
 
 <template>
@@ -29,7 +29,7 @@
   
 <script>
 import { getDropList } from "@/api/xj/screen/disease-screen";
-import { eventLog } from "@/api/xj/screen/traffic-screen";
+import { defectLog } from "@/api/xj/screen/traffic-screen";
 import * as echarts from "echarts";
 export default {
   name: "TrafficTrend",
@@ -72,6 +72,11 @@ export default {
         this.getChartData();
       },
     },
+    bottomTipClick: {
+      handler() {
+        this.getChartData();
+      },
+    },
   },
   created() {
     this.getChartData();
@@ -90,8 +95,9 @@ export default {
       const data = {
         id: this.itemSelect,
         type: this.select,
+        classType: this.bottomTipClick,
       };
-      eventLog(data).then(({ data, code }) => {
+      defectLog(data).then(({ data, code }) => {
         if (code === 200) {
           this.echartData = data;
           this.$nextTick(() => {
@@ -319,8 +325,6 @@ export default {
     z-index: 1;
     right: 0;
     top: 0.2rem;
-
-    
   }
 
   .traffic-echart {

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-11-11 10:58:06
+ * @LastEditTime: 2024-11-13 14:11:57
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -253,6 +253,7 @@ import {
   getItemTypes,
   getRoadListTypes,
 } from "@/api/xj/screen/index";
+import { DefectType } from "@/api/xj/screen/traffic-screen";
 export default {
   name: "BigScreen",
   components: {
@@ -307,7 +308,7 @@ export default {
         {
           width: "100%",
           height: "29%",
-          title: "病害趋势",
+          title: "病害统计",
           component: DiseaseCurrent,
           selectIsShow: true,
           select: "",
@@ -318,7 +319,7 @@ export default {
       rightModuleList: [
         {
           width: "100%",
-          height: "23%",
+          height: "18%",
           title: "巡查里程",
           component: PatrolOrder,
           selectIsShow: false,
@@ -326,7 +327,7 @@ export default {
         },
         {
           width: "100%",
-          height: "60%",
+          height: "65%",
           title: "巡检车辆",
           component: InspectionVehicles,
           selectIsShow: false,
@@ -338,9 +339,9 @@ export default {
       // 切换地图图标类别按钮
       changeMapBtn: [
         { name: "路面", click: "1" },
-        { name: "道桥", click: "defect" },
+        { name: "交安", click: "2" },
-        { name: "交安", click: "equipment" },
+        { name: "道桥", click: "3" },
-        { name: "绿化", click: "event" },
+        { name: "绿化", click: "4" },
       ],
       // 具体icon类别
       iconTypeList: [],
@@ -361,8 +362,8 @@ export default {
       // 下方三个按钮数据
       elementList: [
         { name: "总览", component: "OverviewScreen" },
-        { name: "道路资产", component: "RoadScreen" },
         { name: "病害巡检", component: "DiseaseScreen" },
+        { name: "道路资产", component: "RoadScreen" },
       ],
       // 中心点集合(全部)
       centerPiont: [],
@@ -381,7 +382,7 @@ export default {
       // 图片弹窗标题
       imgTitle: "查看",
       // 图片弹窗显隐控制
-      imgVisible: true,
+      imgVisible: false,
       // 查看点位图片数据
       screenImage: {},
       // 查看点位图片弹窗显隐控制
@@ -451,12 +452,16 @@ export default {
 
     /* 获取图片背景左上角病害类型下拉 */
     getDieaseTypeList() {
-      this.dieaseTypeList = [];
+      DefectType().then(({ code, data }) => {
+        if (code === 200) {
+          this.dieaseTypeList = data;
+        }
+      });
     },
 
     /* 获取图片背景下坐标数据 */
     getMapCare() {
-      comppanyImg().then(({ code, data }) => {
+      comppanyImg({ type: this.mapCareSelect }).then(({ code, data }) => {
         if (code === 200) {
           this.mapCareList = data;
         }
@@ -798,7 +803,7 @@ export default {
             {
               width: "100%",
               height: "29%",
-              title: "病害趋势",
+              title: "病害统计",
               component: DiseaseCurrent,
               selectIsShow: true,
               select: "",
@@ -808,7 +813,7 @@ export default {
           this.rightModuleList = [
             {
               width: "100%",
-              height: "25%",
+              height: "18%",
               title: "巡查里程",
               component: PatrolOrder,
               selectIsShow: false,
@@ -816,7 +821,7 @@ export default {
             },
             {
               width: "100%",
-              height: "60%",
+              height: "65%",
               title: "巡检车辆",
               component: InspectionVehicles,
               selectIsShow: false,
@@ -867,7 +872,7 @@ export default {
             {
               width: "100%",
               height: "27%",
-              title: "交安事件",
+              title: "今日巡查",
               component: TrafficSafety,
               selectIsShow: false,
               class: "one",
@@ -875,7 +880,7 @@ export default {
             {
               width: "100%",
               height: "27%",
-              title: "交安事件趋势",
+              title: "病害趋势",
               component: TrafficTrend,
               selectIsShow: true,
               class: "twe",
@@ -883,7 +888,7 @@ export default {
             {
               width: "100%",
               height: "33%",
-              title: "交安事件统计",
+              title: "病害统计",
               component: TrafficStatistic,
               selectIsShow: true,
               select: "",
@@ -894,9 +899,9 @@ export default {
             {
               width: "100%",
               height: "85%",
-              title: "交安事件日志",
+              title: "病害日志",
               component: TrafficLog,
-              selectIsShow: true,
+              selectIsShow: false,
               select: "",
               class: "one",
             },
@@ -1086,7 +1091,7 @@ export default {
         left: 28%;
         top: 10%;
         position: absolute;
-        color:#ffffff;
+        color: #ffffff;
       }
 
       // 打点部分
@@ -1254,45 +1259,46 @@ export default {
 
     // 未点击样式
     .change-vue-OverviewScreen {
-      background-image: url("../../assets//screen/index/button-disease.png");
+      background-image: url("../../assets//screen/index/button-overview.png");
       background-repeat: no-repeat;
-      background-size: 97% 65%;
+      background-size: 95% 60%;
-      background-position: 100% 15%;
+      background-position: 75% 15%;
     }
 
     .change-vue-click-OverviewScreen {
+      background-image: url("../../assets//screen/index/button-overview-click.png");
+      background-repeat: no-repeat;
+      background-size: 95% 60%;
+      background-position: 75% 15%;
+    }
+
+    .change-vue-DiseaseScreen {
+      background-image: url("../../assets//screen/index/button-disease.png");
+      background-repeat: no-repeat;
+      background-size: 99% 60%;
+      background-position: 50% 13%;
+    }
+
+    .change-vue-click-DiseaseScreen {
       background-image: url("../../assets//screen/index/button-disease-click.png");
       background-repeat: no-repeat;
-      background-size: 98% 65%;
+      background-size: 99% 60%;
-      background-position: 100% 15%;
+      background-position: 50% 13%;
     }
 
     .change-vue-RoadScreen {
       background-image: url("../../assets//screen/index/button-road.png");
       background-repeat: no-repeat;
-      background-size: 98% 60%;
+      background-size: 93% 60%;
-      background-position: 70% 15%;
+      background-position: 15% 15%;
     }
     .change-vue-click-RoadScreen {
       background-image: url("../../assets//screen/index/button-road-click.png");
       background-repeat: no-repeat;
-      background-size: 98% 60%;
+      background-size: 93% 60%;
-      background-position: 70% 15%;
-    }
-
-    .change-vue-DiseaseScreen {
-      background-image: url("../../assets//screen/index/button-traffic.png");
-      background-repeat: no-repeat;
-      background-size: 95% 60%;
       background-position: 15% 15%;
     }
 
-    .change-vue-click-DiseaseScreen {
-      background-image: url("../../assets//screen/index/button-traffic-click.png");
-      background-repeat: no-repeat;
-      background-size: 95% 60%;
-      background-position: 15% 15%;
-    }
     // .change-vue-click {
     //   color: red;
     // }
@@ -1333,7 +1339,7 @@ export default {
 
   .rect-overlay {
     position: absolute;
-    pointer-events: none;
+    // pointer-events: none;
     border: 2px solid red;
   }
 }
@@ -1359,6 +1365,10 @@ export default {
     .el-scrollbar {
       .el-select-dropdown__wrap {
         .el-scrollbar__view {
+          .el-select-dropdown__item {
+            color: #aaabb8;
+          }
+
           .el-select-dropdown__item:hover {
             background-color: #2b4c7e;
           }

src/views/big-screen/overview-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-11-11 10:07:23
+ * @LastEditTime: 2024-11-12 16:18:03
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
  * @Description: 总览大屏-病害三维饼图
 -->
@@ -10,6 +10,14 @@
 <template>
   <div class="content">
     <div class="content-select">
+      <el-button
+        type="info"
+        size="mini"
+        round
+        v-if="clickType !== ''"
+        @click="changeEchart()"
+        >返回</el-button
+      >
       <el-select
         :popper-append-to-body="false"
         v-model="itemSelect"
@@ -25,16 +33,27 @@
     </div>
     <div class="echart" ref="currentChart"></div>
     <div class="food-legend">
-      <div
+      <fssm-scroll
-        class="legend-div"
+        :style="{
-        v-for="(item, index) in dataList"
+          display: 'flex',
-        :key="`chart-${index}`"
+          flexWrap: 'wrap',
+        }"
       >
-        <div class="index" :style="{ backgroundColor: colorList[index] }"></div>
+        <div
-        <div class="name">{{ item.typeName }}</div>
+          class="legend-div"
-        <div class="rate">{{ item.rate }}%</div>
+          v-for="(item, index) in dataList"
-        <div class="value">{{ item.value }}</div>
+          :key="`chart-${index}`"
-      </div>
+          @click="clickType === '' ? changeEchart(item) : ''"
+        >
+          <div
+            class="index"
+            :style="{ backgroundColor: colorList[index] }"
+          ></div>
+          <div class="name" :title="item.typeName">{{ item.typeName }}</div>
+          <div class="rate">{{ item.rate }}%</div>
+          <div class="value">{{ item.value }}</div>
+        </div>
+      </fssm-scroll>
     </div>
   </div>
 </template>
@@ -43,8 +62,12 @@
 import * as echarts from "echarts";
 import "echarts-gl";
 import { roadCurrent, getDropList } from "@/api/xj/screen/disease-screen";
+import FssmScroll from "@/components/scroll/fssm-scroll.vue";
 export default {
   name: "DiseaseCurrent",
+  components: {
+    FssmScroll,
+  },
   props: {
     select: {
       type: String,
@@ -75,6 +98,8 @@ export default {
       dataList: [],
       // echart实例
       chart: "",
+      // echart图例点击标识
+      clickType: "",
     };
   },
   watch: {
@@ -106,11 +131,13 @@ export default {
         }
       });
     },
+
     /* 获取echart数据 */
     getChartList() {
       const data = {
         type: this.select,
         itemName: this.itemSelect,
+        classType: this.clickType,
       };
       roadCurrent(data).then(({ code, data }) => {
         if (code === 200) {
@@ -121,7 +148,7 @@ export default {
           this.dataList = data.map((item) => {
             return {
               ...item,
-              rate: ((item.value / allSum) * 100).toFixed(1),
+              rate: allSum ? ((item.value / allSum) * 100).toFixed(1) : 0,
             };
           });
         }
@@ -131,6 +158,18 @@ export default {
         });
       });
     },
+
+    /* 点击图例触发事件 */
+    changeEchart(item) {
+      if (item) {
+        this.clickType = item.id;
+        this.getChartList();
+      } else {
+        this.clickType = "";
+        this.getChartList();
+      }
+    },
+
     /* 绘制echart图 */
     drawChart() {
       const data = this.dataList;
@@ -183,13 +222,13 @@ export default {
             height: "250%",
             // boxWidth: 100,
             boxHeight: 2,
-            top: "-75%",
+            top: "-83%",
             left: "-75%",
             viewControl: {
               // 是否自动旋转
               autoRotate: true,
               // 调节角度
-              alpha: 25,
+              alpha: 20,
               rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
               zoomSensitivity: 0, //设置缩放灵敏度，为0无法缩放
               panSensitivity: 0, //设置平移灵敏度，0无法平移
@@ -203,6 +242,7 @@ export default {
         });
       }
     },
+
     /* 绘制3d饼图配置项 */
     getPie3D(pieData, internalDiameterRatio) {
       const series = [];
@@ -266,6 +306,7 @@ export default {
       }
       return series;
     },
+
     /* 配置项参数 */
     getParametricEquation(
       startRatio,
@@ -365,20 +406,36 @@ export default {
   position: relative;
 
   .content-select {
+    width: 100%;
+    padding: 0 1rem;
     position: absolute;
     z-index: 1;
     right: 0;
     top: 0.2rem;
+
+    .el-button {
+      height: 1.5rem;
+      line-height: 0;
+    }
+
+    .el-select {
+      position: absolute;
+      right: 0;
+    }
   }
 
   .echart {
     width: 100%;
-    height: 70%;
+    height: 60%;
     z-index: 0;
+    background-image: url("../../../assets/screen/index/disease-current-echart.png");
+    background-repeat: no-repeat;
+    background-size: 80%;
+    background-position: 50% 0;
   }
 
   .food-legend {
-    height: 30%;
+    height: 40%;
     width: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -388,6 +445,7 @@ export default {
       height: 30%;
       display: flex;
       align-items: center;
+      cursor: pointer;
 
       .index {
         width: 0.5rem;
@@ -399,6 +457,9 @@ export default {
         padding-left: 0.3rem;
         color: #aac6c7;
         font-size: 0.7rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .rate {

src/views/big-screen/overview-components/inspection-vehicles.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-08 09:40:18
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-08 11:59:06
+ * @LastEditTime: 2024-11-13 13:23:21
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
  * @Description: 总览大屏-巡检车辆
 -->
@@ -10,31 +10,81 @@
 <template>
   <div class="content">
     <div class="inspection-top">
-      <div class="top-div">
+      <div class="top-div inspection-div-car">
-        <span>车辆总数</span>
+        <div>
-        <div>{{ carNum }}<span>辆</span></div>
+          <span>{{ carNum }}</span
+          >辆
+        </div>
       </div>
-      <div class="top-div">
+      <div class="top-div inspection-div-online">
-        <span>在线车辆数</span>
+        <div>
-        <div>{{ onlineNum }}<span>辆</span></div>
+          <span>{{ onlineNum }}</span
+          >辆
+        </div>
       </div>
     </div>
     <div class="inspection-bottom">
       <el-input placeholder="请输入车牌号" v-model="tableInput">
         <template slot="append"
-          ><el-button slot="append" icon="el-icon-search"></el-button
+          ><el-button
+            slot="append"
+            icon="el-icon-search"
+            @click="getTableData"
+          ></el-button
         ></template>
       </el-input>
       <!-- 列表 -->
-      <el-table :data="inspectionTableData" style="width: 100%" height="210">
+      <el-table
-        <el-table-column prop="date" label="车牌号码"> </el-table-column>
+        :data="inspectionTableData"
-        <el-table-column prop="name" label="状态"> </el-table-column>
+        header-row-class-name="headerRow"
+        row-class-name="bodayRow"
+        style="width: 100%; background: none"
+        height="285"
+      >
+        <el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
+        <el-table-column prop="serverStatus" label="状态"> </el-table-column>
         <el-table-column prop="pci" label="操作">
           <template slot-scope="scope">
-            <el-button size="mini" type="text" @click="detailDefect(scope.row)"
+            <el-popover
-              >详情
+              popper-class="scope-popover"
-            </el-button>
+              placement="left"
+              width="auto"
+              trigger="click"
+            >
+              <div class="table-detail">
+                <div>
+                  <span class="name">车牌号码:</span>
+                  <span class="value">{{ scope.row.plateNo }}</span>
+                </div>
+                <div>
+                  <span class="name">设备编号</span>
+                  <span class="value">{{ scope.row.appid }}</span>
+                </div>
+                <div>
+                  <span class="name">车辆状态</span>
+                  <span class="value"></span>
+                </div>
+                <div>
+                  <span class="name">网络连接</span>
+                  <span class="value"></span>
+                </div>
+                <div>
+                  <span class="name">设备状态</span>
+                  <span class="value"></span>
+                </div>
+              </div>
+              <el-button
+                slot="reference"
+                size="mini"
+                type="text"
+                style="margin-right: 0.6rem"
+                @click="detailDefect(scope.row)"
+                >详情
+              </el-button>
+            </el-popover>
+
             <el-button
+              disabled
               size="mini"
               type="text"
               @click="followCar(scope.row)"
@@ -42,6 +92,7 @@
               >跟车
             </el-button>
             <el-button
+              disabled
               size="mini"
               type="text"
               @click="videoDelete(scope.row)"
@@ -52,7 +103,7 @@
         </el-table-column>
       </el-table>
       <!-- 分页组件 -->
-      <div class="pagination-part">
+      <!-- <div class="pagination-part">
         <el-pagination
           background
           :pager-count="5"
@@ -64,31 +115,32 @@
           :total="tableTotal"
         >
         </el-pagination>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
+import { getCarList } from "@/api/xj/screen/disease-screen";
 export default {
   name: "InspectionVehicles",
   data() {
     return {
       // 车辆总数
-      carNum: 11,
+      carNum: 0,
       // 在线车辆数
-      onlineNum: 60,
+      onlineNum: 0,
       // 车牌号输入绑定
       tableInput: "",
       // 下方列表数据
       inspectionTableData: [],
       // 分页数据绑定
-      pagination: {
+      // pagination: {
-        page: 1,
+      //   page: 1,
-        size: 10,
+      //   size: 10,
-      },
+      // },
       // 分页总数
-      tableTotal: 100,
+      tableTotal: 0,
     };
   },
   created() {
@@ -97,38 +149,14 @@ export default {
   methods: {
     /* 获取表格数据 */
     getTableData() {
-      this.inspectionTableData = [
+      getCarList().then(({ code, data }) => {
-        {
+        if (code === 200) {
-          date: "S225",
+          this.carNum = data.total;
-          name: "99.52",
+          this.tableTotal = data.total;
-          pci: "优",
+          this.onlineNum = data.online;
-        },
+          this.inspectionTableData = data.rows;
-        {
+        }
-          date: "G107",
+      });
-          name: "98.6",
-          pci: "优",
-        },
-        {
-          date: "G105",
-          name: "100",
-          pci: "优",
-        },
-        {
-          date: "S225",
-          name: "99.52",
-          pci: "优",
-        },
-        {
-          date: "G107",
-          name: "98.6",
-          pci: "优",
-        },
-        {
-          date: "G105",
-          name: "100",
-          pci: "优",
-        },
-      ];
     },
 
     /* 表格详情事件 */
@@ -141,10 +169,10 @@ export default {
     videoDelete(val) {},
 
     /* 页码修改事件 */
-    handleCurrentChange(arg) {
+    // handleCurrentChange(arg) {
-      this.pagination.page = arg;
+    //   this.pagination.page = arg;
-      this.getTableData();
+    //   this.getTableData();
-    },
+    // },
   },
 };
 </script>
@@ -157,7 +185,7 @@ export default {
 
   .inspection-top {
     width: 100%;
-    height: 30%;
+    height: 20%;
     padding: 0.5rem;
     display: flex;
     justify-content: space-around;
@@ -165,32 +193,49 @@ export default {
     .top-div {
       width: 45%;
       height: 100%;
-      padding-bottom: 2rem;
+      line-height: 6rem;
       display: flex;
       align-items: center;
       flex-direction: column;
       justify-content: space-around;
-      border:1px solid red;
+      font-size: 0.6rem;
+
+      span {
+        font-size: 1rem;
+        font-family: "DouYu";
+      }
+    }
+
+    .inspection-div-car {
+      background-image: url("~@/assets/screen/index/inspection-div-car.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .inspection-div-online {
+      background-image: url("~@/assets/screen/index/inspection-div-online.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
     }
   }
 
-  .inspection-bottom {
+  ::v-deep .inspection-bottom {
     width: 100%;
-    height: 70%;
+    height: 80%;
     padding: 1rem 0.5rem;
 
-    ::v-deep .el-input {
+    .el-input {
       margin-bottom: 0.5rem;
       .el-input__inner {
         color: #ffffff;
         background-color: transparent;
-        border-color: rgb(69, 109, 211);
+        border-color: rgb(69, 109, 211, 0.5);
       }
 
       .el-input-group__append {
         background-color: transparent;
         color: #ffffff;
-        border-color: rgb(69, 109, 211);
+        border-color: rgb(69, 109, 211, 0.5);
 
         &:hover {
           background-color: #3c5a8a;
@@ -198,27 +243,52 @@ export default {
       }
     }
 
-    ::v-deep .el-table {
+    // 表格最下方border
+    .el-table::before {
+      background-color: transparent;
+    }
+
+    // 隐藏滚动条
+    .el-table__body-wrapper::-webkit-scrollbar {
+      /*width: 0;宽度为0隐藏*/
+      width: 0;
+    }
+
+    // 表头行
+    .headerRow {
+      background: url("~@/assets/screen/traffic/emergency-top.png") no-repeat;
+      background-size: 100%;
+
       th {
         color: #ffffff;
-        background-color: #214175;
+        background: none;
-      }
+        border-color: transparent;
-
-      tr {
-        color: #ffffff;
-        background-color: #16395a;
-
-        &:hover > td {
-          background-color: transparent;
-        }
       }
     }
 
-    ::v-deep .el-table td.el-table__cell {
+    // 表格行
-      border-color: rgb(82, 141, 229);
+    .bodayRow {
-    }
+      color: #ffffff;
-    ::v-deep .el-table th.el-table__cell {
+      background: none;
-      border-color: rgb(0, 102, 255);
+
+      &:nth-child(2n) {
+        background: #113463;
+      }
+
+      // 表格内下划线
+      td {
+        // border-color: transparent;
+        border-bottom: 1px dashed rgb(115, 115, 116);
+      }
+
+      // 去除鼠标移动高亮
+      &:hover > td {
+        background-color: transparent;
+      }
+
+      .el-table__cell {
+        padding: 0.2rem 0;
+      }
     }
   }
 }
@@ -243,3 +313,11 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+/* 弹出层样式 */
+.scope-popover {
+  color: #ffffff;
+  background-color: #000000;
+  border-color: transparent;
+}
+</style>

src/views/big-screen/overview-components/patrol-order.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:25:29
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-08 09:33:25
+ * @LastEditTime: 2024-11-13 14:01:48
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
  * @Description: 总览大屏-巡查里程
 -->
@@ -10,28 +10,71 @@
 <template>
   <div class="content">
     <div class="patrol-div">
-      <div class="value"><span>{{ patrolObject.mileage }}</span>km</div>
+      <div class="value">
-      <div class="name">累计里程</div>
+        <span>{{ formatNumber(patrolObject.len) }}</span
+        >km
+      </div>
     </div>
     <div class="patrol-div">
-      <div class="value"><span>{{ patrolObject.time }}</span>h</div>
+      <div class="value">
-      <div class="name">累计时长</div>
+        <span>{{ formatTime(patrolObject.time) }}</span
+        >h
+      </div>
     </div>
   </div>
 </template>
   
   <script>
+import { getMileage } from "@/api/xj/screen/disease-screen";
 export default {
   name: "PatrolOrder",
   data() {
     return {
       // 累计里程数据
-      patrolObject: {
+      patrolObject: {},
-        mileage: 365,
-        time: 12,
-      },
     };
   },
+  created() {
+    this.getData();
+  },
+  methods: {
+    /* 获取巡查里程数据 */
+    getData() {
+      getMileage().then(({ code, data }) => {
+        if (code === 200) {
+          this.patrolObject = data;
+        }
+      });
+    },
+
+    /* 累计里程修改 */
+    formatNumber(num) {
+      if (num >= 100000000) {
+        // 超过1亿显示 x.xx亿
+        return (num / 100000000).toFixed(2) + "亿";
+      } else if (num >= 10000) {
+        // 超过1万显示 x.xx万
+        return (num / 10000).toFixed(2) + "万";
+      } else {
+        // 小于1万直接返回原数字
+        return num;
+      }
+    },
+
+    /* 累计时长修改 */
+    formatTime(num){
+      if (num >= 100000000) {
+        // 超过1亿显示 x.xx亿
+        return (num / 100000000).toFixed(2) + "亿";
+      } else if (num >= 10000) {
+        // 超过1万显示 x.xx万
+        return (num / 10000).toFixed(2) + "万";
+      } else {
+        // 小于1万直接返回原数字
+        return num;
+      }
+    }
+  },
 };
 </script>
   
@@ -40,23 +83,26 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  justify-content: center;
   color: #ffffff;
+  background: url("~@/assets/screen/disease/patrol-order.png") no-repeat;
+  background-size: 90%;
+  background-position: 50%;
 
-  .patrol-div{
+  .patrol-div {
-    width: 40%;
+    width: 50%;
     height: 100%;
+    padding-left: 5rem;
+    padding-bottom: 1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-around;
+    justify-content: center;
+    font-size: 0.8rem;
 
-    .value{
+    .value {
-      
+      span {
-      span{
         font-family: "DouYu";
-        font-size: 1.8rem;
+        font-size: 1.4rem;
-
       }
     }
   }

src/views/big-screen/overview-components/today-inspection.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 09:42:49
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-11 09:45:51
+ * @LastEditTime: 2024-11-13 13:38:46
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
  * @Description: 总览大屏-今日巡查
 -->
@@ -12,8 +12,8 @@
     <div class="today-left">
       <span>{{ today }}</span>
     </div>
-    <div class="today-right" @click="showDialog">
+    <div class="today-right">
-      <div class="right-sum">
+      <div class="right-sum" @click="showDialog">
         <span>{{ all }}</span
         >个
       </div>
@@ -42,7 +42,7 @@
 
 <script>
 import * as echarts from "echarts";
-import { roadToday } from "@/api/xj/screen/disease-screen";
+import { roadToday, roadTodayDetail } from "@/api/xj/screen/disease-screen";
 export default {
   name: "TodayInspection",
   data() {
@@ -78,22 +78,41 @@ export default {
 
     /* 点击打开弹窗 */
     showDialog() {
+      this.getChartData();
       this.showDialogVisible = true;
-      this.getChartData()
     },
 
     /* 请求弹窗数据 */
     getChartData() {
-      this.leftChartData = [];
+      roadTodayDetail().then(({ code, data }) => {
-      this.rightChartData = [];
+        if (code === 200) {
-      this.$nextTick(() => {
+          this.leftChartData = data[0];
-        this.drawLeftChart();
+          this.rightChartData = data[1];
-        this.drawRightChart();
+          this.$nextTick(() => {
+            this.drawLeftChart();
+            this.drawRightChart();
+          });
+        }
       });
     },
 
     /* 绘制左侧echart图 */
     drawLeftChart() {
+      const xData = this.leftChartData.map((item) => {
+        return item.name;
+      });
+      const y1Data = this.leftChartData.map((item) => {
+        return item.road;
+      });
+      const y2Data = this.leftChartData.map((item) => {
+        return item.bridge;
+      });
+      const y3Data = this.leftChartData.map((item) => {
+        return item.event;
+      });
+      const y4Data = this.leftChartData.map((item) => {
+        return item.green;
+      });
       if (this.$refs.leftChart) {
         const chart = echarts.init(this.$refs.leftChart);
         chart.setOption({
@@ -131,12 +150,31 @@ export default {
                 { offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
               ],
             },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#F7DA15" }, // 0% 处的颜色
+                { offset: 1, color: "#FCC105" }, // 100% 处的颜色
+              ],
+            },
           ],
           title: {
             text: "",
           },
           tooltip: {
-            trigger: "item",
+            trigger: "axis",
+            show: true,
+            confine: false,
+            backgroundColor: "rgba(9, 24, 48, 0.5)",
+            borderColor: "rgba(75, 253, 238, 0.4)",
+            textStyle: {
+              fontSize: 12,
+              color: "#ffffff",
+            },
           },
           grid: {
             left: "3%",
@@ -147,7 +185,6 @@ export default {
           legend: {
             orient: "horizontal",
             left: "right",
-            data: ["分类A", "分类B", "分类C"],
             textStyle: {
               color: "#fff",
             },
@@ -156,9 +193,15 @@ export default {
           },
           xAxis: {
             type: "category",
-            data: ["类别1", "类别2", "类别3"],
             axisLabel: {
+              interval: 0,
               color: "#fff",
+              formatter: (params) => {
+                if (params.length > 4) {
+                  return `${params.slice(0, 4)}...`;
+                }
+                return params;
+              },
             },
             axisTick: {
               show: false,
@@ -166,6 +209,7 @@ export default {
             axisLine: {
               show: false,
             },
+            data: xData,
           },
           yAxis: {
             type: "value",
@@ -185,21 +229,27 @@ export default {
           series: [
             {
               barWidth: 10,
-              name: "分类A",
+              name: "路面",
               type: "bar",
-              data: [120, 200, 150],
+              data: y1Data,
             },
             {
               barWidth: 10,
-              name: "分类B",
+              name: "交安",
               type: "bar",
-              data: [220, 182, 191],
+              data: y3Data,
             },
             {
               barWidth: 10,
-              name: "分类C",
+              name: "道桥",
               type: "bar",
-              data: [150, 232, 201],
+              data: y2Data,
+            },
+            {
+              barWidth: 10,
+              name: "绿化",
+              type: "bar",
+              data: y4Data,
             },
           ],
         });
@@ -211,6 +261,21 @@ export default {
 
     /* 绘制右侧echart图 */
     drawRightChart() {
+      const xData = this.rightChartData.map((item) => {
+        return item.name;
+      });
+      const y1Data = this.rightChartData.map((item) => {
+        return item.road;
+      });
+      const y2Data = this.rightChartData.map((item) => {
+        return item.bridge;
+      });
+      const y3Data = this.rightChartData.map((item) => {
+        return item.event;
+      });
+      const y4Data = this.rightChartData.map((item) => {
+        return item.green;
+      });
       if (this.$refs.rightChart) {
         const chart = echarts.init(this.$refs.rightChart);
         chart.setOption({
@@ -248,12 +313,23 @@ export default {
                 { offset: 1, color: "#FF2E2E" }, // 100% 处的颜色
               ],
             },
+            {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "#F7DA15" }, // 0% 处的颜色
+                { offset: 1, color: "#FCC105" }, // 100% 处的颜色
+              ],
+            },
           ],
           title: {
             text: "",
           },
           tooltip: {
-            trigger: "item",
+            trigger: "axis",
           },
           grid: {
             left: "3%",
@@ -264,7 +340,6 @@ export default {
           legend: {
             orient: "horizontal",
             left: "right",
-            data: ["分类A", "分类B", "分类C"],
             textStyle: {
               color: "#fff",
             },
@@ -273,7 +348,6 @@ export default {
           },
           xAxis: {
             type: "category",
-            data: ["类别1", "类别2", "类别3"],
             axisLabel: {
               color: "#fff",
             },
@@ -283,6 +357,7 @@ export default {
             axisLine: {
               show: false,
             },
+            data: xData,
           },
           yAxis: {
             type: "value",
@@ -302,21 +377,27 @@ export default {
           series: [
             {
               barWidth: 10,
-              name: "分类A",
+              name: "路面",
               type: "bar",
-              data: [120, 200, 150],
+              data: y1Data,
             },
             {
               barWidth: 10,
-              name: "分类B",
+              name: "交安",
               type: "bar",
-              data: [220, 182, 191],
+              data: y3Data,
             },
             {
               barWidth: 10,
-              name: "分类C",
+              name: "道桥",
               type: "bar",
-              data: [150, 232, 201],
+              data: y2Data,
+            },
+            {
+              barWidth: 10,
+              name: "绿化",
+              type: "bar",
+              data: y4Data,
             },
           ],
         });
@@ -348,7 +429,7 @@ export default {
     align-items: center;
     justify-content: center;
     padding-left: 1.5rem;
-    background-image: url("../../../assets/screen/disease/today-left.png");
+    background-image: url("~@/assets/screen/disease/today-left.png");
     background-repeat: no-repeat;
     background-size: 85%;
     background-position: 100% 60%;
@@ -384,7 +465,7 @@ export default {
       padding-left: 1rem;
       justify-content: center;
       line-height: 3rem;
-      background-image: url("../../../assets/screen/disease/right-sum.png");
+      background-image: url("~@/assets/screen/disease/right-sum.png");
       background-repeat: no-repeat;
       background-size: 100%;
       background-position: 100% 50%;
@@ -412,7 +493,7 @@ export default {
       display: flex;
       justify-content: center;
       line-height: 3rem;
-      background-image: url("../../../assets/screen/disease/right-rate.png");
+      background-image: url("~@/assets/screen/disease/right-rate.png");
       background-repeat: no-repeat;
       background-size: 100%;
       background-position: 100% 50%;