fix：去除地图鼠标事件，增加节流库，修改消息中心，不同分辨率适配修改

package.json

@@ -54,6 +54,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "lodash": "^4.17.21",
     "nprogress": "0.2.0",
     "ol": "^6.5.0",
     "openlayers": "^4.6.5",

src/components/map/fssm-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:46:23
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-04 09:16:07
+ * @LastEditTime: 2024-12-09 15:13:56
  * @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
  * @Description: 公共地图
 -->
@@ -337,25 +337,25 @@ export default {
         }
       });
       // 鼠标移入事件
-      map.on("pointermove", (e) => {
+      // map.on("pointermove", (e) => {
-        const feature = map.forEachFeatureAtPixel(
+      //   const feature = map.forEachFeatureAtPixel(
-          map.getEventPixel(e.originalEvent),
+      //     map.getEventPixel(e.originalEvent),
-          (mapFeature) => {
+      //     (mapFeature) => {
-            return mapFeature;
+      //       return mapFeature;
-          }
+      //     }
-        );
+      //   );
-        // 线、面要素不做鼠标移入样式修改
+      //   // 线、面要素不做鼠标移入样式修改
-        if (feature) {
+      //   if (feature) {
-          if (feature.getGeometry()?.getType() === "Point") {
+      //     if (feature.getGeometry()?.getType() === "Point") {
-            map.getTargetElement().style.cursor = "pointer";
+      //       map.getTargetElement().style.cursor = "pointer";
-            this.$emit("pointer-move", feature);
+      //       this.$emit("pointer-move", feature);
-          } else {
+      //     } else {
-            map.getTargetElement().style.cursor = "auto";
+      //       map.getTargetElement().style.cursor = "auto";
-          }
+      //     }
-        } else {
+      //   } else {
-          map.getTargetElement().style.cursor = "auto";
+      //     map.getTargetElement().style.cursor = "auto";
-        }
+      //   }
-      });
+      // });
       // 地图缩放级别事件
       map.on("moveend", (e) => {
         const zoom = map.getView().getZoom().toFixed(); //获取当前地图的缩放级别
@@ -858,4 +858,4 @@ export default {
     }
   }
 }
-</style>
+</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-12-06 15:47:24
+ * @LastEditTime: 2024-12-09 10:29:47
  * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
  * @Description: 大屏查看图片弹窗
 -->
@@ -192,6 +192,7 @@ import {
   getItemTypes,
   getMediaIndex,
 } from "@/api/xj/screen/index";
+import throttle from "lodash/throttle";
 export default {
   name: "ImgDialog",
   props: {
@@ -316,7 +317,7 @@ export default {
      * @return {*}
      */
     getSegmentList() {
-      getSegment().then(({ code, data }) => {
+      getSegment({ routeId: "" }).then(({ code, data }) => {
         if (code === 200) {
           this.roadTypeList = data;
         }
@@ -736,11 +737,11 @@ export default {
     },
   },
   mounted() {
-    window.addEventListener("keydown", this.handleKeydown);
+    window.addEventListener("keydown", throttle(this.handleKeydown, 100));
     window.addEventListener("resize", this.updateRects);
   },
   beforeDestroy() {
-    window.removeEventListener("keydown", this.handleKeydown);
+    window.removeEventListener("keydown",this.handleKeydown);
     window.removeEventListener("resize", this.updateRects);
   },
 };

src/views/big-screen/components/img-screen-dialog.vue

@@ -1,216 +0,0 @@
-<!--
- * @Author: SunTao 328867980@qq.com
- * @Date: 2024-12-06 16:21:07
- * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-06 17:27:08
- * @FilePath: \znxjxt-ui\src\views\big-screen\components\img-screen-dialog.vue
- * @Description: 图片弹窗
--->
-
-<template>
-  <div class="content">
-    <div class="left-list">
-      <div class="sidebar">
-        <infinite-loading
-          direction="top"
-          @infinite="infiniteHandlerTop"
-        ></infinite-loading>
-        <img
-          v-for="(item, index) in defectData"
-          :key="`${item.id}-${index}`"
-          :src="item.url"
-          :alt="'Image ' + (index + 1)"
-          @click="showImage(index)"
-          :class="{ selected: currentIndex === index }"
-        />
-        <infinite-loading
-          direction="bottom"
-          @infinite="infiniteHandler"
-        ></infinite-loading>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import InfiniteLoading from "vue-infinite-loading";
-import {
-  defeaseList,
-  getSegment,
-  getItemTypes,
-  getMediaIndex,
-} from "@/api/xj/screen/index";
-export default {
-  name: "ImgScreenDialog",
-  components: { InfiniteLoading },
-  props: {
-    bottomTipClick: {
-      type: String,
-      default: "",
-    },
-    imageItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      // 左侧图片数据
-      defectData: [],
-      // 当前展示的图片index
-      currentIndex: 0,
-      // 分页绑定
-      params: {
-        page: 1,
-        size: 10,
-      },
-    };
-  },
-  created() {
-    // this.getList();
-    // this.infiniteHandler();
-  },
-  methods: {
-    /**
-     * @description: 向上加载数据
-     * @param {*}
-     * @return {*}
-     */
-    infiniteHandlerTop($state) {
-      if (this.params.page >= 2) {
-        const data = {
-          classType: this.bottomTipClick,
-          ...this.imgForm,
-          ...this.params,
-        };
-        defeaseList(data)
-          .then(({ code, data }) => {
-            if (code === 200) {
-              this.params.page -= 1;
-              this.defectData.unshift(...data.aim);
-              $state.loaded();
-            } else {
-              $state.complete();
-            }
-          })
-          .finally(() => {
-            this.showImage(this.currentIndex);
-          });
-      }
-    },
-
-    /**
-     * @description: 向下加载更多图片
-     * @param {*}
-     * @return {*}
-     */
-    infiniteHandler($state) {
-      const data = {
-        classType: this.bottomTipClick,
-        ...this.imgForm,
-        ...this.params,
-      };
-      defeaseList(data)
-        .then(({ code, data }) => {
-          if (code === 200) {
-            this.params.page += 1;
-            this.defectData.push(...data.aim);
-            $state.loaded();
-          } else {
-            $state.complete();
-          }
-        })
-        .finally(() => {
-          this.showImage(this.currentIndex);
-        });
-    },
-
-    /**
-     * @description: 中间显示图片
-     * @param {*} index
-     * @return {*}
-     */
-    showImage(index) {},
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.content {
-  width: 100%;
-  // height: 54rem;
-  height: calc(100vh - 3rem);
-  display: flex;
-  flex-direction: row;
-  background-color: #2e3a46;
-}
-
-.left-list {
-  width: 16rem;
-  height: 100%;
-
-  .img-top {
-    width: 100%;
-    height: 2.5rem;
-    display: flex;
-    justify-content: center;
-
-    .img-top-div {
-      cursor: pointer;
-      width: 30%;
-      height: 90%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border: 1px solid #00aaff;
-      border-radius: 4px;
-      color: #ffffff;
-    }
-
-    .img-top-div-click {
-      background-color: rgb(69, 91, 140);
-    }
-  }
-
-  .sidebar {
-    width: 15.5rem;
-    height: calc(100% - 2.5rem);
-    // height: 815px;
-    background-color: #1f292e;
-    padding: 10px;
-    overflow-y: auto;
-  }
-
-  .sidebar::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  .sidebar::-webkit-scrollbar-track {
-    background: #2e3a46;
-    border-radius: 10px;
-  }
-
-  .sidebar::-webkit-scrollbar-thumb {
-    background: #444c51;
-    border-radius: 10px;
-  }
-
-  .sidebar::-webkit-scrollbar-thumb:hover {
-    background: #00aaff;
-  }
-
-  .sidebar img {
-    width: 100%;
-    margin-bottom: 5px;
-    cursor: pointer;
-    border-radius: 3px;
-    transition: transform 0.2s, border 0.2s;
-    box-sizing: border-box;
-  }
-
-  .sidebar img.selected {
-    border: 3px solid #00aaff;
-    transform: scale(1.05);
-  }
-}
-</style>

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-08 11:56:02
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-06 16:23:54
+ * @LastEditTime: 2024-12-09 09:25:57
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
  * @Description: 病害巡检-病害日志
 -->
@@ -146,11 +146,7 @@
           label="路段名称"
         >
         </el-table-column>
-        <el-table-column
+        <el-table-column show-overflow-tooltip prop="companyName" label="所属">
-          show-overflow-tooltip
-          prop="companyName"
-          label="所属"
-        >
         </el-table-column>
         <el-table-column prop="state" label="病害状态">
           <template slot-scope="scope">
@@ -256,6 +252,7 @@ export default {
     this.getData();
     this.getLineList();
     this.getAllDefectType();
+    this.getSegmentList();
   },
   methods: {
     /**
@@ -277,12 +274,8 @@ export default {
      * @return {*}
      */
     chengeLine(val) {
-      if (val) {
+      this.trafficForm.segmentId = "";
-        this.getSegmentList(val);
+      this.getSegmentList(val);
-      } else {
-        this.trafficForm.segmentId = "";
-        this.segmentList = [];
-      }
     },
 
     /**

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 09:59:32
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-05 17:30:29
+ * @LastEditTime: 2024-12-09 11:39:11
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
  * @Description: 病害巡检大屏-今日巡查
 -->
@@ -650,7 +650,7 @@ export default {
     .right-sum {
       cursor: pointer;
       width: 100%;
-      height: 4rem;
+      height: 45%;
       display: flex;
       padding-left: 1rem;
       justify-content: center;
@@ -661,7 +661,6 @@ export default {
       background-size: 100%;
       background-position: 100% 50%;
       color: #aac6c7;
-      font-size: 0.9rem;
 
       span {
         margin-right: 0.5rem;
@@ -843,4 +842,4 @@ export default {
   padding: 0;
   background-color: #113463;
 }
-</style>
+</style>

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-12-05 14:22:25
+ * @LastEditTime: 2024-12-09 10:52:43
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -22,16 +22,36 @@
       <div class="header-time">
         <!-- 消息中心 -->
         <div class="header-news">
-          <el-popover placement="bottom-end" width="400" popper-class="screen-message-popover" trigger="hover">
+          <el-popover
+            placement="bottom-end"
+            width="400"
+            popper-class="screen-message-popover"
+            trigger="hover"
+          >
             <div class="screen-message-content">
               <div class="message-content">
-                <fssm-scroll style="max-height: 12rem;">
+                <fssm-scroll style="max-height: 12rem">
-                  <div class="message-item" v-for="(item, index) in messageList" :key="`message-item-${index}`">
+                  <div
-                    <div class="item-top" @click="handleMessageItemClick(item.notificationType)">
+                    class="message-item"
+                    v-for="(item, index) in messageList"
+                    :key="`message-item-${index}`"
+                  >
+                    <div
+                      class="item-top"
+                      @click="handleMessageItemClick(item.notificationType)"
+                    >
                       <div class="index">
                         <!-- <i v-if="item.title === '成功'" style="color: #67c23a" class="el-icon-success"></i> -->
-                        <i v-if="item.notificationType === 'REMIND'" style="color: #e6a23c" class="el-icon-info"></i>
+                        <i
-                        <i v-if="item.notificationType === 'WARNING'" style="color: #909399" class="el-icon-warning"></i>
+                          v-if="item.notificationType === 'REMIND'"
+                          style="color: #e6a23c"
+                          class="el-icon-info"
+                        ></i>
+                        <i
+                          v-if="item.notificationType === 'WARNING'"
+                          style="color: #909399"
+                          class="el-icon-warning"
+                        ></i>
                         <!-- <i v-if="item.title === '错误'" style="color: #f56c6c" class="el-icon-error"></i> -->
                       </div>
                       <div class="time">
@@ -48,7 +68,12 @@
                 </fssm-scroll>
               </div>
               <div class="message-footer">
-                <el-button @click="handleMessageClick" icon="el-icon-d-arrow-right" type="text">查看更多</el-button>
+                <el-button
+                  @click="handleMessageClick"
+                  icon="el-icon-d-arrow-right"
+                  type="text"
+                  >查看更多</el-button
+                >
               </div>
             </div>
             <i slot="reference" class="el-icon-message-solid">
@@ -68,30 +93,58 @@
     </div>
     <div class="screen-middle">
       <div class="screen-left">
-        <module-block v-for="(item, index) in leftModuleList" :key="`left-module-list-${index}`" :width="item.width"
+        <module-block
-          :height="item.height" :title="item.title" :class="item.class">
+          v-for="(item, index) in leftModuleList"
+          :key="`left-module-list-${index}`"
+          :width="item.width"
+          :height="item.height"
+          :title="item.title"
+          :class="item.class"
+        >
           <template>
-            <component :select="item.select" :is="item.component" :bottomTipClick="bottomTipClick"></component>
+            <component
+              :select="item.select"
+              :is="item.component"
+              :bottomTipClick="bottomTipClick"
+            ></component>
           </template>
           <template slot="operation" v-if="item.selectIsShow">
             <el-radio-group class="screen-checkBox" v-model="item.select">
-              <el-radio-button v-for="(item, index) in selectTypeArr" :label="item.value"
+              <el-radio-button
-                :key="`left-screen-${index}`">{{ item.label }}</el-radio-button>
+                v-for="(item, index) in selectTypeArr"
+                :label="item.value"
+                :key="`left-screen-${index}`"
+                >{{ item.label }}</el-radio-button
+              >
             </el-radio-group>
           </template>
         </module-block>
       </div>
       <div class="screen-right">
-        <module-block v-for="(item, index) in rightModuleList" :key="`right-module-list-${index}`" :width="item.width"
+        <module-block
-          :height="item.height" :title="item.title" :class="item.class">
+          v-for="(item, index) in rightModuleList"
+          :key="`right-module-list-${index}`"
+          :width="item.width"
+          :height="item.height"
+          :title="item.title"
+          :class="item.class"
+        >
           <template>
-            <component :select="item.select" :is="item.component" :bottomTipClick="bottomTipClick"
+            <component
-              @imagePoint="getimagePoint"></component>
+              :select="item.select"
+              :is="item.component"
+              :bottomTipClick="bottomTipClick"
+              @imagePoint="getimagePoint"
+            ></component>
           </template>
           <template slot="operation" v-if="item.selectIsShow">
             <el-radio-group class="screen-checkBox" v-model="item.select">
-              <el-radio-button v-for="(item, index) in selectTypeArr" :label="item.value"
+              <el-radio-button
-                :key="`right-screen-${index}`">{{ item.label }}</el-radio-button>
+                v-for="(item, index) in selectTypeArr"
+                :label="item.value"
+                :key="`right-screen-${index}`"
+                >{{ item.label }}</el-radio-button
+              >
             </el-radio-group>
           </template>
         </module-block>
@@ -101,9 +154,12 @@
         <div class="road-checkBox" v-if="showIconList">
           <fssm-scroll class="road-scroll">
             <el-checkbox-group v-model="iconType" @change="handleChecked">
-              <el-checkbox v-for="(item, index) in iconTypeList" :label="item.value" :key="`check-${index}`">{{
+              <el-checkbox
-                item.label
+                v-for="(item, index) in iconTypeList"
-              }}</el-checkbox>
+                :label="item.value"
+                :key="`check-${index}`"
+                >{{ item.label }}</el-checkbox
+              >
             </el-checkbox-group>
           </fssm-scroll>
         </div>
@@ -115,22 +171,40 @@
           <!-- 图背景下选择框 -->
           <div class="map-image-select">
             病害类型筛选：
-            <el-cascader v-model="mapCareSelect" popper-class="screen-index-cascader" :options="dieaseOptions" :props="{
+            <el-cascader
-              checkStrictly: true,
+              v-model="mapCareSelect"
-              emitPath: true,
+              popper-class="screen-index-cascader"
-              children: 'subTypes',
+              :options="dieaseOptions"
-            }" @change="getMapCare" clearable></el-cascader>
+              :props="{
+                checkStrictly: true,
+                emitPath: true,
+                children: 'subTypes',
+              }"
+              @change="getMapCare"
+              clearable
+            ></el-cascader>
           </div>
           <div class="map-care">
-            <div class="map-care-div" :class="`map-care-div-${item.status}`" v-for="(item, index) in mapCareList"
+            <div
-              :key="`map-care-${index}`" :style="{ left: item.left, top: item.top }">
+              class="map-care-div"
+              :class="`map-care-div-${item.status}`"
+              v-for="(item, index) in mapCareList"
+              :key="`map-care-${index}`"
+              :style="{ left: item.left, top: item.top }"
+            >
               <span>{{ item.name }}</span>
             </div>
           </div>
         </div>
         <!-- 地图 -->
-        <fssm-map v-if="elementDiv !== 'OverviewScreen'" ref="roadMap" :showChange="true"
+        <fssm-map
-          :controlStyle="{ top: '10%', left: '26%' }" @feature-select="featureSelect" @map-zoom="getZoom"></fssm-map>
+          v-if="elementDiv !== 'OverviewScreen'"
+          ref="roadMap"
+          :showChange="true"
+          :controlStyle="{ top: '10%', left: '26%' }"
+          @feature-select="featureSelect"
+          @map-zoom="getZoom"
+        ></fssm-map>
         <!-- @map-moveend="mapMoveend" -->
       </div>
     </div>
@@ -138,33 +212,72 @@
       <!-- 病害巡检4种类型按钮 -->
       <div class="footer-change-map">
         <template v-if="elementDiv === 'DiseaseScreen'">
-          <div class="change-map-div" :class="bottomTipClick === item.click ? 'change-map-click' : ''"
+          <div
-            v-for="(item, index) in changeMapBtn" :key="`btn-${index}`" @click="changeIconType(item.click)">
+            class="change-map-div"
+            :class="bottomTipClick === item.click ? 'change-map-click' : ''"
+            v-for="(item, index) in changeMapBtn"
+            :key="`btn-${index}`"
+            @click="changeIconType(item.click)"
+          >
             {{ item.name }}
           </div>
         </template>
       </div>
       <!-- 切换3种导航栏按钮 -->
       <div class="footer-change-vue">
-        <div :class="elementDiv === item.component
+        <div
-          ? `change-vue-click-${item.component}`
+          :class="
-          : `change-vue-${item.component}`
+            elementDiv === item.component
-          " v-for="(item, index) in elementList" :key="`footer-${index}`" @click="changeElement(item)"></div>
+              ? `change-vue-click-${item.component}`
+              : `change-vue-${item.component}`
+          "
+          v-for="(item, index) in elementList"
+          :key="`footer-${index}`"
+          @click="changeElement(item)"
+        ></div>
       </div>
     </div>
     <!-- 详情图片弹窗 -->
-    <el-dialog :title="imgTitle" :visible.sync="imgVisible" width="95rem" append-to-body fullscreen
+    <el-dialog
-      :close-on-click-modal="false" destroy-on-close @close="imgCancel">
+      :title="imgTitle"
-      <img-dialog v-if="imgTitle === '查看'" :imageItem="imageItem" :bottomTipClick="bottomTipClick"></img-dialog>
+      :visible.sync="imgVisible"
+      width="95rem"
+      append-to-body
+      fullscreen
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="imgCancel"
+    >
+      <img-dialog
+        v-if="imgTitle === '查看'"
+        :imageItem="imageItem"
+        :bottomTipClick="bottomTipClick"
+      ></img-dialog>
     </el-dialog>
 
     <!-- 查看点位图片弹窗 -->
-    <el-dialog title="查看点位" :visible.sync="showImageDialog" width="90rem" append-to-body :close-on-click-modal="false"
+    <el-dialog
-      destroy-on-close @close="screenImgCancel">
+      title="查看点位"
+      :visible.sync="showImageDialog"
+      width="90rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="screenImgCancel"
+    >
       <div class="view-image-container" ref="imageContainer">
-        <img :src="screenImage.imageUrl" alt="Main Image" ref="mainImage" @load="updateScreenRects" />
+        <img
-        <div v-for="(rect, index) in screenRects" :key="index" class="rect-overlay" :style="getScreenRectStyle(rect)">
+          :src="screenImage.imageUrl"
-        </div>
+          alt="Main Image"
+          ref="mainImage"
+          @load="updateScreenRects"
+        />
+        <div
+          v-for="(rect, index) in screenRects"
+          :key="index"
+          class="rect-overlay"
+          :style="getScreenRectStyle(rect)"
+        ></div>
         <div class="rect-image">
           采集时间:
           {{ screenImage.createTime }} 起始桩号：
@@ -174,7 +287,11 @@
           {{ screenImage.iconTypeName || "暂无数据" }}
           <span v-if="this.elementDiv === 'DiseaseScreen'">
             病害面积：{{ screenImage.targetArea }}平方米 病害长度：{{
-              screenImage.targetLen * 1 <= 0 ? "暂无数据" : `${screenImage.targetLen}米` }} </span>
+              screenImage.targetLen * 1 <= 0
+                ? "暂无数据"
+                : `${screenImage.targetLen}米`
+            }}
+          </span>
         </div>
       </div>
     </el-dialog>
@@ -392,7 +509,7 @@ export default {
     this.getMessageList();
     this.handleMessage();
   },
-  mounted() { },
+  mounted() {},
   methods: {
     /**
      * @description: 获取当前时间
@@ -439,14 +556,14 @@ export default {
         getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
           if (code === 200) {
             this.messageList = rows;
-            this.noticeNum = total
+            this.noticeNum = total;
           }
         });
       }, 5000);
       getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
         if (code === 200) {
           this.messageList = rows;
-          this.noticeNum = total
+          this.noticeNum = total;
         }
       });
       // this.messageList = [
@@ -704,10 +821,11 @@ export default {
             return new Style({
               image: new Icon({
                 crossOrigin: "anonymous",
-                src: require(`@/assets/screen/index/${this.mapLogeList[
+                src: require(`@/assets/screen/index/${
-                  feature.getProperties().features[0].get("data").iconType
+                  this.mapLogeList[
-                ]
+                    feature.getProperties().features[0].get("data").iconType
-                  }.png`),
+                  ]
+                }.png`),
                 // 图标缩放比例
                 scale: 0.6,
                 displacement: [0, 30],
@@ -1304,7 +1422,7 @@ export default {
         border: none;
       }
 
-      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
         color: #1cb6ff;
       }
     }
@@ -1329,7 +1447,7 @@ export default {
         border: none;
       }
 
-      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
         color: #1cb6ff;
       }
     }
@@ -1458,7 +1576,8 @@ export default {
     }
 
     ::v-deep .baseLayerClass {
-      filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg) brightness(80%) saturate(550%);
+      filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
+        brightness(80%) saturate(550%);
     }
   }
 }
@@ -1489,7 +1608,7 @@ export default {
     display: flex;
     color: #89c5e8;
 
-    >div {
+    > div {
       margin: 0 0.5rem;
       display: flex;
       align-items: flex-end;
@@ -1578,12 +1697,12 @@ export default {
     justify-content: center;
     align-items: center;
 
-    >div {
+    > div {
       height: 100%;
       width: 37.5%;
     }
 
-    >div:nth-child(2) {
+    > div:nth-child(2) {
       height: 100%;
       width: 25%;
     }
@@ -1660,7 +1779,7 @@ export default {
   .view-image-container {
     position: relative;
     width: 100%;
-    height: 80%;
+    height: 50rem;
     display: flex;
     flex-direction: column;
     align-items: center;

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-12-05 17:13:16
+ * @LastEditTime: 2024-12-09 11:42:55
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
  * @Description: 总览大屏-今日巡查
 -->
@@ -658,41 +658,12 @@ export default {
       }
     }
 
-    // .right-rate {
-    //   width: 100%;
-    //   height: 45%;
-    //   padding-left: 1rem;
-    //   display: flex;
-    //   justify-content: center;
-    //   line-height: 3rem;
-    //   background-image: url("~@/assets/screen/disease/right-rate.png");
-    //   background-repeat: no-repeat;
-    //   background-size: 100%;
-    //   background-position: 100% 50%;
-    //   color: #aac6c7;
-
-    //   span {
-    //     font-size: 1.2rem;
-    //     font-weight: 800;
-    //     font-family: "DouYu";
-    //     margin-right: 0.5rem;
-    //     background: linear-gradient(
-    //       to bottom,
-    //       #ffffff,
-    //       #e9bc5c
-    //     ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
-    //     background-clip: text; /*将设置的背景颜色限制在文字中*/
-    //     -webkit-text-fill-color: transparent; /*给文字设置成透明*/
-    //   }
-    // }
-
     .right-rate {
       width: 100%;
       height: 45%;
       display: flex;
       align-items: center;
       font-family: "DouYu";
-      font-size: 0.9rem;
 
       .up {
         color: #ff2e2e;

src/views/big-screen/road-components/ancillary-facilities.vue

@@ -25,7 +25,7 @@
     </div>
   </div>
 </template>
-  
+
   <script>
 import { ancillaryList, ancillaryCount } from "@/api/xj/screen/road-screen";
 export default {
@@ -63,7 +63,7 @@ export default {
   },
 };
 </script>
-  
+
   <style lang="scss" scoped>
 .content {
   width: 100%;
@@ -109,7 +109,7 @@ export default {
       display: flex;
       justify-content: center;
       flex-direction: column;
-      padding-left: 3.5rem;
+      padding-left: 13%;
       font-size: 0.8rem;
 
       span {
@@ -216,4 +216,3 @@ export default {
   }
 }
 </style>
-  

src/views/big-screen/road-components/manage-maintain.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:15:04
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-19 09:54:43
+ * @LastEditTime: 2024-12-09 11:47:49
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\manage-maintain.vue
  * @Description: 道路资产大屏-管养道路统计
 -->

src/views/index-components/road-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:23:44
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-18 17:45:39
+ * @LastEditTime: 2024-12-09 11:53:20
  * @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
  * @Description: 首页-公路资产
 -->
@@ -41,7 +41,7 @@
     <div class="road-chart" ref="roadChart"></div>
   </div>
 </template>
-  
+
   <script>
 import * as echarts from "echarts";
 // 接口
@@ -265,7 +265,7 @@ export default {
   },
 };
 </script>
-  
+
   <style lang="scss" scoped>
 .content {
   width: 100%;
@@ -329,7 +329,7 @@ export default {
       // width: 24%;
       width: 28%;
       height: 40%;
-      padding: 0 0.5rem 0 3.5rem;
+      padding: 0 0.5rem 0 7%;
       margin: 0.4rem 0;
       display: flex;
       align-items: center;
@@ -385,4 +385,4 @@ export default {
     height: 50%;
   }
 }
-</style>
+</style>

src/views/index-components/traffic-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:30:35
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-04 09:56:31
+ * @LastEditTime: 2024-12-09 11:54:48
  * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
  * @Description: 首页-路况评定
 -->
@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="traffic-table">
-      <el-table :data="trafficTableData" style="width: 100%" height="180">
+      <el-table :data="trafficTableData" style="width: 100%" height="95%">
         <el-table-column type="index" label="序号"></el-table-column>
         <el-table-column prop="name" show-overflow-tooltip label="名称">
         </el-table-column>

src/views/xj/inspection-warn/warning-center/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-20 11:58:33
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-05 15:03:52
+ * @LastEditTime: 2024-12-09 09:34:17
  * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-center\index.vue
  * @Description: 预警中心-信息中心
 -->
@@ -10,41 +10,89 @@
 <template>
   <div class="content">
     <!-- 搜索表单 -->
-    <el-form :model="warnForm" ref="queryForm" size="small" :inline="true" label-width="5rem">
+    <el-form
+      :model="warnForm"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="5rem"
+    >
       <!-- <el-form-item label="消息类型" prop="type">
         <el-select v-model="warnForm.type" placeholder="请选择消息类型" filterable clearable>
           <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item> -->
       <el-form-item label="时间" prop="dateTime">
-        <el-date-picker v-model="dateTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
+        <el-date-picker
-          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable />
+          v-model="dateTime"
+          type="datetimerange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          clearable
+        />
       </el-form-item>
       <el-form-item label="阅读状态" prop="read">
-        <el-select v-model="warnForm.read" placeholder="请选择阅读状态" clearable>
+        <el-select
-          <el-option v-for="item in readStatusList" :key="item.value" :label="item.label" :value="item.value" />
+          v-model="warnForm.read"
+          placeholder="请选择阅读状态"
+          clearable
+        >
+          <el-option
+            v-for="item in readStatusList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-check" size="mini" @click="handleRead"
+        <el-button
-          v-hasPermi="['system:defect:add']">全部已读
+          type="primary"
+          plain
+          icon="el-icon-check"
+          size="mini"
+          @click="handleRead"
+          v-hasPermi="['system:defect:add']"
+          >全部已读
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
+        <el-button
-          @click="handleDelete(null)" v-hasPermi="['system:defect:remove']">批量删除
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete(null)"
+          v-hasPermi="['system:defect:remove']"
+          >批量删除
         </el-button>
       </el-col>
     </el-row>
     <!-- 导航栏 -->
     <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane v-for="(item, index) in editableTabs" :key="`tabs-${index}`" :label="item.title" :name="item.code">
+      <el-tab-pane
+        v-for="(item, index) in editableTabs"
+        :key="`tabs-${index}`"
+        :label="item.title"
+        :name="item.code"
+      >
         <!-- 标签页头 -->
         <span slot="label">
           <!-- <i
@@ -52,35 +100,81 @@
             style="color: #67c23a"
             class="el-icon-success"
           ></i> -->
-          <i v-if="item.code === 'REMIND'" style="color: #e6a23c" class="el-icon-info"></i>
+          <i
-          <i v-if="item.code === 'WARNING'" style="color: #909399" class="el-icon-warning"></i>
+            v-if="item.code === 'REMIND'"
+            style="color: #e6a23c"
+            class="el-icon-info"
+          ></i>
+          <i
+            v-if="item.code === 'WARNING'"
+            style="color: #909399"
+            class="el-icon-warning"
+          ></i>
           <!-- <i
             v-if="item.title === '错误'"
             style="color: #f56c6c"
             class="el-icon-error"
           ></i
           > -->
-          {{ item.title }}({{ item.count }})</span>
+          {{ item.title }}({{ item.count }})</span
+        >
         <!-- 表格 -->
-        <el-table ref="warningTable" :data="warningList" v-loading="loading" style="width: 100%"
+        <el-table
-          @current-change="handleTableChange" @selection-change="handleSelectionChange">
+          ref="warningTable"
+          :data="warningList"
+          v-loading="loading"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
           <el-table-column type="selection" width="55" align="center" />
 
-          <el-table-column width="180" label="时间" align="center" prop="createdTime">
+          <el-table-column
+            width="180"
+            label="时间"
+            align="center"
+            prop="createdTime"
+          >
             <template slot-scope="scope">
-              <span :class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`">{{ scope.row.createdTime }}</span>
+              <span
+                @click="handleTableChange(scope.row)"
+                :class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`"
+                >{{ scope.row.createdTime }}</span
+              >
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="消息标题" width="150" align="center" prop="title">
+          <el-table-column
+            show-overflow-tooltip
+            label="消息标题"
+            width="150"
+            align="center"
+            prop="title"
+          >
+            <template slot-scope="scope">
+              <span @click="handleTableChange(scope.row)">{{
+                scope.row.title
+              }}</span>
+            </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="消息内容" align="left" prop="content">
+          <el-table-column
+            show-overflow-tooltip
+            label="消息内容"
+            align="left"
+            prop="content"
+          >
           </el-table-column>
         </el-table>
         <!-- 分页组件 -->
         <div class="pagination-part">
-          <el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
+          <el-pagination
-            :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
+            background
-            layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
+            :current-page.sync="pagination.page"
+            @current-change="handleCurrentChange"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size.sync="pagination.size"
+            @size-change="handleSizeChange"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="tableTotal"
+          >
           </el-pagination>
         </div>
       </el-tab-pane>
@@ -94,7 +188,7 @@ import {
   getWarningNav,
   markNoticeRead,
   noticeReadAll,
-  deleteNotice
+  deleteNotice,
 } from "@/api/xj/inspection/center";
 export default {
   name: "WarningCenter",
@@ -269,7 +363,7 @@ export default {
           this.getList();
           this.$refs.warningTable.clearSelection();
         })
-        .catch(() => { });
+        .catch(() => {});
     },
 
     /**
@@ -339,4 +433,4 @@ export default {
   padding-top: 1rem;
   justify-content: flex-end;
 }
-</style>
+</style>

src/views/xj/inspection/confirmation-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 13:17:41
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-05 09:24:59
+ * @LastEditTime: 2024-12-09 10:33:28
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
  * @Description: 巡检信息-病害确认
 -->
@@ -54,20 +54,6 @@
           clearable
         ></el-cascader>
       </el-form-item>
-      <el-form-item label="病害状态" prop="state">
-        <el-select
-          v-model="queryParams.state"
-          placeholder="请选择病害状态"
-          clearable
-        >
-          <el-option
-            v-for="item in defectStatus"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="上下行" prop="inspectDirection">
         <el-select
           v-model="queryParams.inspectDirection"
@@ -224,11 +210,6 @@
       </el-table-column>
       <el-table-column label="病害类型" align="center" prop="defectTypeName">
       </el-table-column>
-      <el-table-column label="病害状态" align="center" prop="state">
-        <template slot-scope="scope">
-          <span>{{ filterState(scope.row.state) }}</span>
-        </template>
-      </el-table-column>
       <el-table-column label="校验状态" align="center" prop="dataStatus">
         <template slot-scope="scope">
           <span>{{
@@ -319,7 +300,6 @@
 import {
   getDefectList,
   getSegment,
-  getDefectStatus,
   listDefect,
   mergeDefect,
 } from "@/api/xj/confirmation";
@@ -356,8 +336,6 @@ export default {
       tableDefect: [],
       // 路段下拉选项
       segmentList: [],
-      // 病害状态下拉选项
-      defectStatus: [],
       // 列表数据绑定
       confirmationtList: [],
       // 非多个禁用
@@ -386,7 +364,6 @@ export default {
   created() {
     this.getTableDefect();
     this.getSegmentList();
-    this.getDefectStatusList();
     this.getTableList();
     this.getTableDefect();
   },
@@ -409,26 +386,6 @@ export default {
       });
     },
 
-    /* 查询病害状态下拉数据 */
-    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;
-      }
-    },
-
     /* 获取列表行数据 */
     getTableList() {
       // 处理日期范围
@@ -668,4 +625,4 @@ export default {
   pointer-events: none;
   border: 2px solid red;
 }
-</style>
+</style>

src/views/xj/inspection/disease-management/index.vue

@@ -21,6 +21,7 @@
         <el-select
           v-model="queryParams.segmentName"
           placeholder="请选择路段"
+          filterable
           clearable
         >
           <el-option

src/views/xj/inspection/road-management/index.vue

@@ -21,6 +21,7 @@
         <el-select
           v-model="queryParams.segmentName"
           placeholder="请选择道路名称"
+          filterable
           clearable
         >
           <el-option
@@ -366,7 +367,7 @@
     </el-dialog>
   </div>
 </template>
-  
+
   <script>
 import {
   getRoadTable,
@@ -474,7 +475,7 @@ export default {
         }
       });
     },
-    
+
     /**
      * @description: 获取路产类型下拉数据
      * @param {*}
@@ -834,7 +835,7 @@ export default {
   },
 };
 </script>
-  
+
   <style lang="scss" scoped>
 .app-container {
   padding: 20px;

src/views/xj/inspection/task-management/index.vue

@@ -94,9 +94,9 @@
       <el-table-column label="巡检终点" align="center" prop="stakeEnd" />
       <el-table-column label="车牌号码" align="center" prop="plateNo">
       </el-table-column>
-      <el-table-column label="病害数" align="defectCount" prop="plateNo">
+      <el-table-column label="病害数" align="center" prop="defectCount">
       </el-table-column>
-      <el-table-column label="新增病害数" align="newDefectCount" prop="plateNo">
+      <el-table-column label="新增病害数" align="center" prop="newDefectCount">
       </el-table-column>
       <el-table-column label="任务id" align="center" prop="extId" />
       <el-table-column