fix：修改大屏地图，修改接口请求超时时间，修改今日巡查，

src/utils/request.js

@@ -17,7 +17,7 @@ const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 30000
 })
 
 // request拦截器

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

@@ -692,6 +692,10 @@ export default {
   // 修改日期选择器头部样式
   .el-date-range-picker__header {
     color: #c0c0c0;
+
+    .el-picker-panel__icon-btn {
+      color: #c0c0c0;
+    }
   }
 
   // 修改弹出层边框颜色

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-10 10:52:10
+ * @LastEditTime: 2024-12-16 17:07:19
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
  * @Description: 病害巡检大屏-今日巡查
 -->
@@ -14,36 +14,66 @@
     </div>
     <div class="traffic-right">
       <div class="right-sum" @click="showDialog('')">
-        <span>{{ all }}</span>个
+        <span>{{ all }}</span
+        >个
       </div>
-      <!-- <div class="right-rate">
-        <span> {{ scale }} </span>%
-      </div> -->
       <div class="right-rate">
-        较昨日<span v-if="state === '增加'" class="up">{{ state }}</span><span v-else class="bottom">{{ state
+        <div class="right-rate-top">
-          }}</span> {{ count }}个
+          <span>{{ count }}</span
+          >个
           <i v-if="state === '增加'" class="el-icon-top"></i>
+          <i v-if="state === '无变化'" class="el-icon-minus"></i>
           <i v-else class="el-icon-bottom"></i>
         </div>
+        <div class="right-rate-bottom">
+          <span v-if="state === '增加'" class="up">{{ state }}</span>
+          <span v-else class="bottom">{{ state }}</span>
+        </div>
+      </div>
     </div>
 
     <!-- 病害巡检弹窗 -->
-    <el-dialog title="当前病害查看" :visible.sync="showDialogVisible" width="75rem" append-to-body
+    <el-dialog
-      :close-on-click-modal="false" destroy-on-close @close="screenCancel">
+      title="当前病害查看"
+      :visible.sync="showDialogVisible"
+      width="75rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="screenCancel"
+    >
       <div class="today-content">
         <div class="today-select">
           <div>
-            <el-select :popper-append-to-body="false" v-model="roadSelect" @change="changeRoad" clearable
+            <el-select
-              placeholder="请选择路段">
+              :popper-append-to-body="false"
-              <el-option v-for="item in roadList" :key="`${item.name}-${item.index}`" :label="item.name"
+              v-model="roadSelect"
-                :value="item.name" />
+              @change="changeRoad"
+              clearable
+              placeholder="请选择路段"
+            >
+              <el-option
+                v-for="item in roadList"
+                :key="`${item.name}-${item.index}`"
+                :label="item.name"
+                :value="item.name"
+              />
             </el-select>
           </div>
           <div>
-            <el-select :popper-append-to-body="false" v-model="companySelect" clearable @change="changeCompany"
+            <el-select
-              placeholder="请选择分公司">
+              :popper-append-to-body="false"
-              <el-option v-for="item in companyList" :key="`${item.name}-${item.index}`" :label="item.name"
+              v-model="companySelect"
-                :value="item.name" />
+              clearable
+              @change="changeCompany"
+              placeholder="请选择分公司"
+            >
+              <el-option
+                v-for="item in companyList"
+                :key="`${item.name}-${item.index}`"
+                :label="item.name"
+                :value="item.name"
+              />
             </el-select>
           </div>
         </div>
@@ -71,7 +101,7 @@ export default {
   data() {
     return {
       // 新增病害数
-      today: 0,
+      today: "0",
       // 病害总数
       all: 0,
       // 病害增长率
@@ -79,7 +109,7 @@ export default {
       // 较昨日增长、减少
       state: "——",
       // 增长、减少数量
-      count: "——",
+      count: "0",
       // 弹窗显隐控制
       showDialogVisible: false,
       // 左侧路段选择绑定
@@ -306,6 +336,7 @@ export default {
             axisLabel: {
               color: "rgba(255,255,255,0.65)",
             },
+            minInterval: 1,
             splitLine: {
               lineStyle: {
                 color: "rgba(255,255,255,0.2)",
@@ -507,6 +538,7 @@ export default {
             axisLabel: {
               color: "rgba(255,255,255,0.65)",
             },
+            minInterval: 1,
             splitLine: {
               lineStyle: {
                 color: "rgba(255,255,255,0.2)",
@@ -627,9 +659,7 @@ export default {
     span {
       cursor: pointer;
       font-family: "DouYu";
-      background: linear-gradient(to bottom,
+      background: linear-gradient(to bottom, #ffffff, #2773d0);
-          #ffffff,
-          #2773d0);
       /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
       background-clip: text;
       /*将设置的背景颜色限制在文字中*/
@@ -652,7 +682,7 @@ export default {
       width: 100%;
       height: 45%;
       display: flex;
-      padding-left: 1rem;
+      padding-left: 2rem;
       justify-content: center;
       line-height: 3rem;
       // background-image: url("../../../assets/screen/traffic/right-sum.png");
@@ -665,12 +695,9 @@ export default {
 
       span {
         margin-right: 0.5rem;
-
+        font-size: 1rem;
-        font-size: 1.2rem;
         font-family: "DouYu";
-        background: linear-gradient(to bottom,
+        background: linear-gradient(to bottom, #ffffff, #21f1e1);
-            #ffffff,
-            #21f1e1);
         /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
         background-clip: text;
         /*将设置的背景颜色限制在文字中*/
@@ -679,42 +706,61 @@ export default {
       }
     }
 
-    // .right-rate {
-    //   width: 100%;
-    //   height: 4rem;
-    //   display: flex;
-    //   justify-content: center;
-    //   padding-left: 1rem;
-    //   line-height: 3rem;
-    //   // 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%;
-    //   color: #aac6c7;
-    //   font-size: 0.9rem;
-
-    //   span {
-    //     margin-right: 0.5rem;
-    //     font-size: 1.2rem;
-    //     font-family: "DouYu";
-    //     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;
+      flex-direction: column;
       align-items: center;
-      font-family: "DouYu";
       font-size: 1rem;
+      background: url("~@/assets/screen/index/right-rate.png") no-repeat;
+      background-size: 100%;
+      background-position: 100% 50%;
+      color: #aac6c7;
+
+      .right-rate-top {
+        width: 100%;
+        height: 50%;
+        padding-left: 3rem;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+
+        span {
+          font-size: 1rem;
+          font-weight: 800;
+          font-family: "DouYu";
+          margin-right: 0.5rem;
+          background: linear-gradient(to bottom, #ffffff, #9e7a06);
+          /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+          background-clip: text;
+          /*将设置的背景颜色限制在文字中*/
+          -webkit-text-fill-color: transparent;
+          /*给文字设置成透明*/
+        }
+
+        .el-icon-top {
+          font-size: 1.5rem;
+          color: red;
+        }
+
+        .el-icon-bottom,
+        .el-icon-minus {
+          font-size: 1.5rem;
+          color: #19eb27;
+        }
+      }
+
+      .right-rate-bottom {
+        width: 100%;
+        height: 50%;
+        padding-left: 55%;
+
+        span {
+          font-size: 0.7rem;
+          font-family: "DouYu";
+        }
+      }
 
       .up {
         color: #ff2e2e;
@@ -725,17 +771,6 @@ export default {
         color: #19eb27;
         padding: 0 0.5rem;
       }
-
-
-      .el-icon-top {
-        font-size: 1.5rem;
-        color: red;
-      }
-
-      .el-icon-bottom {
-        font-size: 1.5rem;
-        color: #19eb27;
-      }
     }
   }
 }
@@ -763,7 +798,7 @@ export default {
     // height: 10%;
     display: flex;
 
-    >div {
+    > div {
       width: 50%;
       padding: 0 2rem;
 

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:06:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-19 09:35:47
+ * @LastEditTime: 2024-12-13 17:09:48
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
  * @Description: 病害巡检大屏-病害统计
 -->
@@ -181,8 +181,8 @@ export default {
             left: "center",
             top: "50%",
             textStyle: {
-              fontFamily: "DinBm",
+              fontFamily: "DouYu",
-            fontSize: 15,
+              fontSize: 14,
               color: "#ffffff",
             },
           },
@@ -192,7 +192,7 @@ export default {
             top: "40%",
             textStyle: {
               fontFamily: "DouYu",
-              fontSize:15,
+              fontSize: 15,
               color: "rgba(255, 183, 89, 0.8)",
             },
           },
@@ -293,7 +293,8 @@ export default {
       display: flex;
       align-items: center;
       color: #808c9f;
-      font-size: 0.7rem;
+      font-size: 0.6rem;
+      font-family: "DouYu";
 
       .index {
         width: 0.8rem;

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-13 10:44:04
+ * @LastEditTime: 2024-12-16 17:42:38
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -163,13 +163,12 @@
             </el-checkbox-group>
           </fssm-scroll>
         </div>
+        <!-- 大屏工单数据 -->
+        <div class="work-order"></div>
         <!-- 地图图例 -->
         <div class="map-legend"></div>
-        <!-- 图片背景 -->
+        <!-- 病害筛选下拉框 -->
-        <div class="disease-content" v-if="elementDiv === 'OverviewScreen'">
+        <div class="map-image-select" v-if="elementDiv != 'RoadScreen'">
-          <div class="disease-title"></div>
-          <!-- 图背景下选择框 -->
-          <div class="map-image-select">
           病害类型筛选：
           <el-cascader
             v-model="mapCareSelect"
@@ -180,10 +179,22 @@
               emitPath: true,
               children: 'subTypes',
             }"
-              @change="getMapCare"
+            @change="changeMapCareSelect"
             clearable
           ></el-cascader>
         </div>
+        <!-- 图片背景返回 -->
+        <div class="return-image" v-if="showMap">
+          <el-button type="info" size="mini" round @click="disabledMapCompany"
+            >返回</el-button
+          >
+        </div>
+        <!-- 图片背景 -->
+        <div
+          class="disease-content"
+          v-if="elementDiv === 'OverviewScreen' && !showMap"
+        >
+          <!-- <div class="disease-title"></div> -->
           <div class="map-care">
             <div
               class="map-care-div"
@@ -192,20 +203,77 @@
               :key="`map-care-${index}`"
               :style="{ left: item.left, top: item.top }"
             >
-              <span>{{ item.name }}</span>
+              <el-popover
+                popper-class="screen-map-popover"
+                placement="right-start"
+                width="auto"
+                trigger="hover"
+                :visible-arrow="false"
+              >
+                <div class="screen-map-popover-content">
+                  <div class="item">
+                    <div>
+                      <span class="name" style="color: #18f7ff">路面病害：</span
+                      ><span class="value">65431213</span>个
+                    </div>
+                    <div>
+                      <span class="name" style="color: #18f7ff"
+                        >每公里平均病害：</span
+                      ><span class="value">65431213</span>个
+                    </div>
+                  </div>
+                  <div class="item">
+                    <div>
+                      <span class="name" style="color: #FFEA68"
+                        >交安设施病害：</span
+                      ><span class="value">65431213</span>个
+                    </div>
+                    <div>
+                      <span class="name" style="color: #FFEA68"
+                        >每公里平均病害：</span
+                      ><span class="value">65431213</span>个
+                    </div>
+                  </div>
+                  <div class="item">
+                    <div>
+                      <span class="name" style="color: #AE74F3">桥隧病害：</span
+                      ><span class="value">65431213</span>个
+                    </div>
+                    <div>
+                      <span class="name" style="color: #AE74F3"
+                        >每公里平均病害：</span
+                      ><span class="value">65431213</span>个
+                    </div>
+                  </div>
+                  <div class="item">
+                    <div>
+                      <span class="name" style="color:#6FC36F">绿化问题：</span
+                      ><span class="value">65431213</span>个
+                    </div>
+                    <div>
+                      <span class="name" style="color:#6FC36F">每公里平均问题：</span
+                      ><span class="value">65431213</span>个
                     </div>
                   </div>
                 </div>
-        <!-- 地图 -->
+                <span slot="reference" @click="showMapByCompany">{{
+                  item.name
+                }}</span>
+              </el-popover>
+            </div>
+          </div>
+        </div>
+        <!-- 总览地图 -->
+        <fssm-map ref="overViewMap" v-if="showMap"> </fssm-map>
+        <!-- 病害巡检、道路资产地图 -->
         <fssm-map
-          v-if="elementDiv !== 'OverviewScreen'"
+          v-if="elementDiv !== 'OverviewScreen' && !showMap"
           ref="roadMap"
           :showChange="true"
           :controlStyle="{ top: '10%', left: '26%' }"
           @feature-select="featureSelect"
           @map-zoom="getZoom"
         ></fssm-map>
-        <!-- @map-moveend="mapMoveend" -->
       </div>
     </div>
     <div class="screen-footer">
@@ -333,7 +401,6 @@ import {
   mapPciList,
   comppanyImg,
   getItemTypes,
-  getRoadListTypes,
   getDefectTypes,
   getNoticeList,
 } from "@/api/xj/screen/index";
@@ -439,10 +506,10 @@ export default {
       mapCareSelect: "",
       // 图片背景下病害类型下拉选择数据
       dieaseOptions: [],
-      // 路段下拉绑定
-      roadList: [],
       // 地图打点-路段绑定
       roadSelect: "",
+      // 总览页面是否展示地图显隐控制
+      showMap: false,
 
       // 图标类别切换标识
       bottomTipClick: "1",
@@ -505,7 +572,6 @@ export default {
     this.setTime();
     this.getSelect();
     this.getMapCare();
-    this.getRoadList();
     this.getDieaseTypeList();
     this.getMessageList();
     // this.handleMessage();
@@ -623,18 +689,6 @@ export default {
       });
     },
 
-    /**
-     * @description: 获取路段下拉数据
-     * @return {void}
-     */
-    getRoadList() {
-      getRoadListTypes().then(({ code, data }) => {
-        if (code === 200) {
-          this.roadList = data;
-        }
-      });
-    },
-
     /**
      * @description: 获取图片背景左上角病害类型下拉
      * @return {void}
@@ -647,6 +701,14 @@ export default {
       });
     },
 
+    /**
+     * @description: 获取图片背景左上角病害类型下拉
+     * @return {void}
+     */
+    changeMapCareSelect(value) {
+      this.getMapCare(value);
+    },
+
     /**
      * @description: 获取图片背景下坐标数据
      * @return {void}
@@ -663,6 +725,24 @@ export default {
       });
     },
 
+    /**
+     * @description: 点击图片背景下公司名称切换地图
+     * @return {void}
+     */
+    showMapByCompany() {
+      this.showMap = true;
+      this.getLinePoint();
+    },
+
+    /**
+     * @description: 点击公司地图下返回按钮
+     * @return {void}
+     */
+    disabledMapCompany() {
+      this.showMap = false;
+      this.markLayerLines = null;
+    },
+
     /**
      * @description: 点击病害日志详情打开弹窗进行地图打点
      * @return {void}
@@ -923,10 +1003,17 @@ export default {
           type: "line",
         },
       });
+      if (this.showMap) {
+        this.$nextTick(() => {
+          const map = this.$refs.overViewMap.instance.get("map");
+          map.addLayer(this.markLayerLines);
+        });
+      } else {
         this.$nextTick(() => {
           const map = this.$refs.roadMap.instance.get("map");
           map.addLayer(this.markLayerLines);
         });
+      }
     },
 
     /**
@@ -1102,10 +1189,12 @@ export default {
               class: "twe",
             },
           ];
+          // 展示图片地图
+          this.showMap = false;
           // 不接收小车位置消息
           const data = { type: "carLocation", status: false };
           this.$ws.send(data);
-          this.$ws.removeEventListener("message",this.indexListenerId);
+          this.$ws.removeEventListener("message", this.indexListenerId);
           this.carPointList = [];
           this.mapPointFeatures = [];
           // 地图右上角多选按钮隐藏
@@ -1151,6 +1240,8 @@ export default {
               class: "twe",
             },
           ];
+          // 隐藏总览地图
+          this.showMap = false;
           // 发送小车位置消息
           const data = { type: "carLocation", status: true };
           this.$ws.send(data);
@@ -1206,6 +1297,8 @@ export default {
               class: "one",
             },
           ];
+          //隐藏总览地图
+          this.showMap = false;
           // 发送小车位置消息
           const data = { type: "carLocation", status: true };
           this.$ws.send(data);
@@ -1420,6 +1513,8 @@ export default {
         background-color: transparent;
         padding: 0 0.3rem;
         border: none;
+        font-size: 0.7rem;
+        font-family: "DouYu";
         color: #ffffff;
       }
 
@@ -1446,6 +1541,9 @@ export default {
         background-color: transparent;
         padding: 0 0.3rem;
         border: none;
+        font-size: 0.7rem;
+        font-family: "DouYu";
+        color: #ffffff;
       }
 
       .el-radio-button__orig-radio:checked + .el-radio-button__inner {
@@ -1459,6 +1557,26 @@ export default {
     height: 100%;
     position: relative;
 
+    // 筛选病害类型下拉
+    .map-image-select {
+      position: absolute;
+      left: 28%;
+      top: 10%;
+      font-size: 0.9rem;
+      position: absolute;
+      color: #ffffff;
+      font-family: "DouYu";
+      z-index: 1;
+    }
+
+    // 返回图片背景下拉
+    .return-image {
+      position: absolute;
+      left: 28%;
+      top: 14%;
+      z-index: 1;
+    }
+
     // 图例
     .map-legend {
       height: 7rem;
@@ -1467,7 +1585,7 @@ export default {
       bottom: 16%;
       right: 27%;
       z-index: 1;
-      background-image: url("../../assets/screen/index/map-legend.png");
+      background-image: url("~@/assets/screen/index/map-legend.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
@@ -1516,16 +1634,6 @@ export default {
         background-size: 100%;
       }
 
-      // 筛选病害类型下拉
-      .map-image-select {
-        left: 28%;
-        top: 10%;
-        font-size: 0.9rem;
-        position: absolute;
-        color: #ffffff;
-        font-family: "DouYu";
-      }
-
       // 打点部分
       .map-care {
         width: 48%;
@@ -1535,7 +1643,7 @@ export default {
         top: 13%;
 
         .map-care-div {
-          height: 8.5rem;
+          height: 2rem;
           min-width: 3.5rem;
           display: flex;
           justify-content: center;
@@ -1548,32 +1656,33 @@ export default {
           background-position: 50%;
 
           span {
+            cursor: pointer;
             height: 1rem;
           }
         }
 
         .map-care-div-1 {
-          background-image: url("../../assets/screen/index/map-care-div-1.png");
+          background-image: url("~@/assets/screen/index/map-care-div-1.png");
         }
 
         .map-care-div-2 {
-          background-image: url("../../assets/screen/index/map-care-div-2.png");
+          background-image: url("~@/assets/screen/index/map-care-div-2.png");
         }
 
         .map-care-div-3 {
-          background-image: url("../../assets/screen/index/map-care-div-3.png");
+          background-image: url("~@/assets/screen/index/map-care-div-3.png");
         }
 
         .map-care-div-4 {
-          background-image: url("../../assets/screen/index/map-care-div-4.png");
+          background-image: url("~@/assets/screen/index/map-care-div-4.png");
         }
 
         .map-care-div-5 {
-          background-image: url("../../assets/screen/index/map-care-div-5.png");
+          background-image: url("~@/assets/screen/index/map-care-div-5.png");
         }
 
         .map-care-div-6 {
-          background-image: url("../../assets/screen/index/map-care-div-6.png");
+          background-image: url("~@/assets/screen/index/map-care-div-6.png");
         }
       }
     }
@@ -1714,42 +1823,42 @@ export default {
 
     // 未点击样式
     .change-vue-OverviewScreen {
-      background-image: url("../../assets//screen/index/button-overview.png");
+      background-image: url("../../assets/screen/index/button-overview.png");
       background-repeat: no-repeat;
       background-size: 95% 60%;
       background-position: 75% 15%;
     }
 
     .change-vue-click-OverviewScreen {
-      background-image: url("../../assets//screen/index/button-overview-click.png");
+      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-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-image: url("../../assets/screen/index/button-disease-click.png");
       background-repeat: no-repeat;
       background-size: 99% 60%;
       background-position: 50% 13%;
     }
 
     .change-vue-RoadScreen {
-      background-image: url("../../assets//screen/index/button-road.png");
+      background-image: url("../../assets/screen/index/button-road.png");
       background-repeat: no-repeat;
       background-size: 93% 60%;
       background-position: 15% 15%;
     }
 
     .change-vue-click-RoadScreen {
-      background-image: url("../../assets//screen/index/button-road-click.png");
+      background-image: url("../../assets/screen/index/button-road-click.png");
       background-repeat: no-repeat;
       background-size: 93% 60%;
       background-position: 15% 15%;
@@ -1868,7 +1977,7 @@ export default {
 
   .el-input--medium .el-input__inner {
     height: 1.5rem;
-    background-color: transparent;
+    background-color: rgba(38, 38, 38, 0.7);
     color: #89c5e8;
     border-color: #6991cd;
   }
@@ -1940,4 +2049,28 @@ export default {
     }
   }
 }
+
+// 大屏总览地图坐标弹出层样式
+.screen-map-popover {
+  background: url("~@/assets/screen/index/screen-map-popover.png") no-repeat;
+  background-size: 100% 100%;
+  border: none;
+
+  // 图片地图打点popover弹窗
+  .screen-map-popover-content {
+    padding-top: 1rem;
+    font-family: "DouYu";
+    font-size: 0.6rem;
+    color: #cccccc;
+
+    .item {
+      margin-bottom: 0.5rem;
+      border-bottom: 1px solid #cccccc;
+
+      .value {
+        color: rgb(227, 164, 27);
+      }
+    }
+  }
+}
 </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-12-05 15:08:14
+ * @LastEditTime: 2024-12-16 17:39:06
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\patrol-order.vue
  * @Description: 总览大屏-巡查里程
 -->
@@ -11,25 +11,48 @@
   <div class="content">
     <div class="patrol-div">
       <div class="value">
-        <span @click="showDetail">{{ formatNumber(patrolObject.len) }}</span>km
+        <span @click="showDetail">{{ formatNumber(patrolObject.len) }}</span
+        >km
       </div>
     </div>
     <div class="patrol-div">
       <div class="value">
-        <span @click="showDetail">{{ formatTime(patrolObject.time) }}</span>h
+        <span @click="showDetail">{{ formatTime(patrolObject.time) }}</span
+        >h
       </div>
     </div>
     <!-- 巡查里程弹窗 -->
-    <el-dialog title="巡查里程总览" :visible.sync="showDialogVisible" width="50rem" append-to-body
+    <el-dialog
-      :close-on-click-modal="false" destroy-on-close @close="screenCancel">
+      title="巡查里程总览"
+      :visible.sync="showDialogVisible"
+      width="50rem"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="screenCancel"
+    >
       <div class="patrol-content">
         <div class="patrol-select">
-          <el-select :popper-append-to-body="false" v-model="companySelect" @change="changeSelect" clearable
+          <el-select
-            placeholder="请选择">
+            :popper-append-to-body="false"
-            <el-option v-for="item in companyList" :key="`${item.name}-${item.index}`" :label="item.name"
+            v-model="companySelect"
-              :value="item.name" />
+            @change="changeSelect"
+            clearable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in companyList"
+              :key="`${item.name}-${item.index}`"
+              :label="item.name"
+              :value="item.name"
+            />
           </el-select>
-          <el-radio-group v-model="checkCycle" class="screen-checkBox" size="mini" @change="changCycle">
+          <el-radio-group
+            v-model="checkCycle"
+            class="screen-checkBox"
+            size="mini"
+            @change="changCycle"
+          >
             <el-radio-button label="day">今日</el-radio-button>
             <el-radio-button label="month">本月</el-radio-button>
             <el-radio-button label="year">本年</el-radio-button>
@@ -491,9 +514,10 @@ export default {
         background-color: transparent;
         padding: 0.3rem;
         border-color: #1cb6ff;
+        color: #dddddd;
       }
 
-      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
         color: #1cb6ff;
       }
     }

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-13 10:49:20
+ * @LastEditTime: 2024-12-16 17:07:26
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
  * @Description: 总览大屏-今日巡查
 -->
@@ -17,17 +17,19 @@
         <span>{{ all }}</span
         >个
       </div>
-      <!-- <div class="right-rate">
-        <span> {{ scale }}</span
-        >%
-      </div> -->
       <div class="right-rate">
-        较昨日<span v-if="state === '增加'" class="up">{{ state }}</span>
+        <div class="right-rate-top">
-        <span v-else class="bottom">{{ state }}</span>
+          <span>{{ count }}</span
-         {{ count }}个
+          >个
           <i v-if="state === '增加'" class="el-icon-top"></i>
+          <i v-if="state === '无变化'" class="el-icon-minus"></i>
           <i v-else class="el-icon-bottom"></i>
         </div>
+        <div class="right-rate-bottom">
+          <span v-if="state === '增加'" class="up">{{ state }}</span>
+          <span v-else class="bottom">{{ state }}</span>
+        </div>
+      </div>
     </div>
     <!-- 病害总览弹窗 -->
     <el-dialog
@@ -99,7 +101,7 @@ export default {
       // 较昨日增长、减少
       state: "——",
       // 增长、减少数量
-      count: "——",
+      count: "0",
       // 弹窗显隐控制
       showDialogVisible: false,
       // 左侧路段选择绑定
@@ -317,6 +319,7 @@ export default {
             axisLabel: {
               color: "rgba(255,255,255,0.65)",
             },
+            minInterval: 1,
             splitLine: {
               lineStyle: {
                 color: "rgba(255,255,255,0.2)",
@@ -510,6 +513,7 @@ export default {
             axisLabel: {
               color: "rgba(255,255,255,0.65)",
             },
+            minInterval: 1,
             splitLine: {
               lineStyle: {
                 color: "rgba(255,255,255,0.2)",
@@ -657,7 +661,7 @@ export default {
       height: 45%;
       cursor: pointer;
       display: flex;
-      padding-left: 1rem;
+      padding-left: 2rem;
       justify-content: center;
       line-height: 3rem;
       background-image: url("~@/assets/screen/disease/right-sum.png");
@@ -668,7 +672,7 @@ export default {
       font-size: 1rem;
 
       span {
-        font-size: 1.2rem;
+        font-size: 1rem;
         font-weight: 800;
         font-family: "DouYu";
         margin-right: 0.5rem;
@@ -685,9 +689,56 @@ export default {
       width: 100%;
       height: 45%;
       display: flex;
+      flex-direction: column;
       align-items: center;
-      font-family: "DouYu";
       font-size: 1rem;
+      background: url("~@/assets/screen/index/right-rate.png") no-repeat;
+      background-size: 100%;
+      background-position: 100% 50%;
+      color: #aac6c7;
+
+      .right-rate-top {
+        width: 100%;
+        height: 50%;
+        padding-left: 3rem;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+
+        span {
+          font-size: 1rem;
+          font-weight: 800;
+          font-family: "DouYu";
+          margin-right: 0.5rem;
+          background: linear-gradient(to bottom, #ffffff, #9e7a06);
+          /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+          background-clip: text;
+          /*将设置的背景颜色限制在文字中*/
+          -webkit-text-fill-color: transparent;
+          /*给文字设置成透明*/
+        }
+
+        .el-icon-top {
+          font-size: 1.5rem;
+          color: red;
+        }
+
+        .el-icon-bottom,.el-icon-minus {
+          font-size: 1.5rem;
+          color: #19eb27;
+        }
+      }
+
+      .right-rate-bottom {
+        width: 100%;
+        height: 50%;
+        padding-left: 55%;
+
+        span {
+          font-size: 0.7rem;
+          font-family: "DouYu";
+        }
+      }
 
       .up {
         color: #ff2e2e;
@@ -698,16 +749,6 @@ export default {
         color: #19eb27;
         padding: 0 0.5rem;
       }
-
-      .el-icon-top {
-        font-size: 1.5rem;
-        color: red;
-      }
-
-      .el-icon-bottom {
-        font-size: 1.5rem;
-        color: #19eb27;
-      }
     }
   }
 }