fix：修改大屏生成工单，图例修改，修改首页第三个数据栏图片，修改请求加载方法

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

@@ -256,7 +256,7 @@ export default {
       },
     },
   },
-  created() {
+  mounted() {
     this.getData();
     this.getLineList();
     this.getAllDefectType();

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-16 17:07:19
+ * @LastEditTime: 2024-12-19 10:43:45
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
  * @Description: 病害巡检大屏-今日巡查
 -->
@@ -137,7 +137,7 @@ export default {
       },
     },
   },
-  created() {
+  mounted() {
     this.getData();
   },
   methods: {

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

@@ -118,7 +118,7 @@ export default {
       },
     },
   },
-  created() {
+  mounted() {
     this.getChartData();
   },
   methods: {

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 10:03:08
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-13 15:21:00
+ * @LastEditTime: 2024-12-19 10:44:06
  * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
  * @Description: 病害巡检大屏-病害趋势
 -->
@@ -78,7 +78,7 @@ export default {
       },
     },
   },
-  created() {
+  mounted() {
     this.getChartData();
   },
   methods: {

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-18 10:49:32
+ * @LastEditTime: 2024-12-19 10:40:14
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -164,16 +164,61 @@
           </fssm-scroll>
         </div>
         <!-- 大屏工单数据 -->
-        <div class="work-order"></div>
+        <div
+          class="work-order"
+          v-if="elementDiv === 'OverviewScreen' && !showMap"
+        >
+          <div class="work-order-left">
+            <el-button class="btn-time" size="mini" @click="changeOrder(1)"
+              >本周</el-button
+            >
+            <el-button class="btn-time" size="mini" @click="changeOrder(2)"
+              >本月</el-button
+            >
+            <el-button class="btn-time" size="mini" @click="changeOrder(3)"
+              >本年</el-button
+            >
+          </div>
+          <div class="work-order-right">
+            <div
+              class="loop-div"
+              :class="`loop-div-${index}`"
+              v-for="(item, index) in workOrderList"
+              :key="`loop-div-${index}`"
+            >
+              <div class="value">
+                <!-- <span>{{ item.value }}</span
+                >件 -->
+                <CountTo
+                  ref="refcountofore"
+                  :start-val="1000"
+                  :end-val="item.value"
+                  :duration="1000"
+                ></CountTo>
+                件
+              </div>
+              <div class="name">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
         <!-- 地图图例 -->
-        <div class="map-legend"></div>
+        <div class="map-legend">
+          <span>≥{{ mapLegendList.s5 }}</span>
+          <span>≥{{ mapLegendList.s4 }}</span>
+          <span>≥{{ mapLegendList.s3 }}</span>
+          <span>≥{{ mapLegendList.s2 }}</span>
+          <span>≥{{ mapLegendList.s1 }}</span>
+        </div>
         <!-- 病害筛选下拉框 -->
         <div class="map-image-select" v-if="elementDiv != 'RoadScreen'">
-          病害类型筛选：
+          <span v-if="elementDiv === 'DiseaseScreen' || showMap"
+            >病害类型筛选：</span
+          >
           <el-cascader
             ref="screenCascader"
             v-model="mapCareSelect"
             popper-class="screen-index-cascader"
+            placeholder="请选择病害类型"
             :options="dieaseOptions"
             :props="{
               checkStrictly: true,
@@ -273,7 +318,7 @@
           v-if="elementDiv !== 'OverviewScreen' && !showMap"
           ref="roadMap"
           :showChange="true"
-          :controlStyle="{ top: '10%', left: '26%' }"
+          :controlStyle="{ top: '14%', left: '26%' }"
           @feature-select="featureSelect"
           @map-zoom="getZoom"
         ></fssm-map>
@@ -397,6 +442,7 @@ import TrafficStatistic from "./disease-components/traffic-statistic.vue";
 import TrafficLog from "./disease-components/traffic-log.vue";
 import ImgDialog from "./components/img-dialog.vue";
 import FssmScroll from "@/components/scroll/fssm-scroll.vue";
+import CountTo from "vue-count-to";
 // 接口
 import {
   selectTypeList,
@@ -427,6 +473,7 @@ export default {
     ImgDialog,
     FssmScroll,
     TrafficLog,
+    CountTo,
   },
   data() {
     return {
@@ -495,8 +542,16 @@ export default {
           class: "twe",
         },
       ],
+      // 顶端工单数据
+      workOrderList: [
+        { name: "生成工单数", value: 562254 },
+        { name: "未完成工单数", value: 562254 },
+        { name: "已完成工单数", value: 562254 },
+      ],
       // 图片背景下打点坐标数据
       mapCareList: [],
+      // 图例循环数据
+      mapLegendList: { s1: "0", s2: "20", s3: "40", s4: "60", s5: "80" },
 
       // 具体icon类别
       iconTypeList: [],
@@ -575,13 +630,14 @@ export default {
   },
   created() {
     this.setTime();
+    // this.handleMessage();
+  },
+  mounted() {
     this.getSelect();
     this.getMapCare();
     this.getDieaseTypeList();
     this.getMessageList();
-    // this.handleMessage();
   },
-  mounted() {},
   methods: {
     /**
      * @description: 获取当前时间
@@ -707,7 +763,7 @@ export default {
     },
 
     /**
-     * @description: 获取图片背景左上角病害类型下拉
+     * @description: 图片背景左上角病害类型下拉修改
      * @return {void}
      */
     changeMapCareSelect(value) {
@@ -716,6 +772,18 @@ export default {
       this.getMapCare(value);
     },
 
+    /**
+     * @description: 工单修改时间事件
+     * @return {void}
+     */
+    changeOrder(val) {
+      this.workOrderList = [
+        { name: "生成工单数", value: 54 },
+        { name: "未完成工单数", value: 5254 },
+        { name: "已完成工单数", value: 554 },
+      ];
+    },
+
     /**
      * @description: 获取图片背景下坐标数据
      * @return {void}
@@ -1585,7 +1653,7 @@ export default {
     // 筛选病害类型下拉
     .map-image-select {
       position: absolute;
-      left: 28%;
+      left: 26%;
       top: 10%;
       font-size: 0.9rem;
       position: absolute;
@@ -1602,14 +1670,123 @@ export default {
       z-index: 1;
     }
 
+    // 大屏工单数据部分
+    .work-order {
+      width: 35%;
+      height: 12%;
+      left: 38.5%;
+      top: 10%;
+      display: flex;
+      position: absolute;
+      z-index: 1;
+
+      .work-order-left {
+        width: 20%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: flex-end;
+
+        .btn-time {
+          width: 80%;
+          margin: 0;
+          background: url("~@/assets/screen/index/btn-time.png") no-repeat;
+          background-size: 100% 100%;
+          border-color: transparent;
+          color: #ffffff;
+          font-family: "DouYu";
+
+          &:hover {
+            background: url("~@/assets/screen/index/btn-time-click.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+
+          &:focus {
+            background: url("~@/assets/screen/index/btn-time-click.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+
+      .work-order-right {
+        width: 80%;
+        height: 100%;
+        display: flex;
+        justify-content: space-around;
+
+        .loop-div {
+          width: 30%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .value {
+            font-size: 0.8rem;
+            font-family: "DouYu";
+            color: #ffffff;
+
+            span {
+              font-size: 1.5rem;
+              font-family: "DouYu";
+              background: linear-gradient(
+                to bottom,
+                rgba(0, 240, 255, 0.64),
+                rgba(89, 255, 235, 1)
+              );
+              /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+              background-clip: text;
+              /*将设置的背景颜色限制在文字中*/
+              -webkit-text-fill-color: transparent;
+              /*给文字设置成透明*/
+            }
+          }
+
+          .name {
+            font-size: 0.8rem;
+            font-family: "DouYu";
+            color: #ffffff;
+          }
+        }
+
+        .loop-div-0 {
+          background: url("~@/assets/screen/index/loop-div-0.svg") no-repeat;
+          background-size: 50% 50%;
+          background-position: center 100%;
+        }
+
+        .loop-div-1 {
+          background: url("~@/assets/screen/index/loop-div-1.svg") no-repeat;
+          background-size: 50% 50%;
+          background-position: center 100%;
+        }
+
+        .loop-div-2 {
+          background: url("~@/assets/screen/index/loop-div-2.svg") no-repeat;
+          background-size: 50% 50%;
+          background-position: center 100%;
+        }
+      }
+    }
+
     // 图例
     .map-legend {
       height: 7rem;
-      width: 2rem;
+      width: 2.5rem;
       position: absolute;
       bottom: 16%;
       right: 27%;
+      padding-left: 0.5rem;
       z-index: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      font-size: 0.8rem;
+      color: #ffffff;
+      user-select: none;
       background-image: url("~@/assets/screen/index/map-legend.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
@@ -1998,7 +2175,7 @@ export default {
 
 // 修改级联样式
 ::v-deep .el-cascader {
-  width: 8rem;
+  width: 10rem;
 
   .el-input--medium .el-input__inner {
     height: 1.5rem;
@@ -2088,7 +2265,6 @@ export default {
     color: #cccccc;
 
     .item {
-
       .name {
         width: 7rem;
         line-height: 1rem;

src/views/big-screen/overview-components/disease-current.vue

@@ -148,7 +148,7 @@ export default {
       },
     },
   },
-  created() {
+  mounted() {
     this.getChartList();
   },
   methods: {

src/views/big-screen/overview-components/disease-trends.vue

@@ -21,7 +21,7 @@ export default {
       echartList: [],
     };
   },
-  created() {
+  mounted() {
     this.geteEhartList();
   },
   methods: {

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

@@ -199,7 +199,7 @@ export default {
       viewTitle: "",
     };
   },
-  created() {
+  mounted() {
     this.getTableData();
   },
   methods: {

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

@@ -85,7 +85,7 @@ export default {
       echartData: [],
     };
   },
-  created() {
+  mounted() {
     this.getData();
   },
   methods: {

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-16 17:07:26
+ * @LastEditTime: 2024-12-19 10:42:31
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
  * @Description: 总览大屏-今日巡查
 -->
@@ -122,7 +122,7 @@ export default {
       rightChartData: [],
     };
   },
-  created() {
+  mounted() {
     this.getData();
   },
   methods: {

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

@@ -9,14 +9,16 @@
 
 <template>
   <div class="content">
-    <div class="ancillary-top"><span>{{sum}}</span></div>
+    <div class="ancillary-top">
+      <span>{{ sum }}</span>
+    </div>
     <div class="ancillary-bottom">
       <div
         :class="`ancillary-bottom-${index}`"
         v-for="(item, index) in ancillaryList"
         :key="`ancillary-${index}`"
       >
-        <div>{{ item.label }}</div>
+        <div class="name">{{ item.label }}</div>
         <div>
           <span>{{ item.value }}</span
           ><a>个</a>
@@ -38,7 +40,7 @@ export default {
       ancillaryList: [],
     };
   },
-  created() {
+  mounted() {
     this.getAncillaryList();
     this.getSum();
   },
@@ -112,6 +114,10 @@ export default {
       padding-left: 13%;
       font-size: 0.8rem;
 
+      .name {
+        font-family: "DouYu";
+      }
+
       span {
         font-size: 0.8rem;
         font-weight: 800;

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:21:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-10 11:39:57
+ * @LastEditTime: 2024-12-19 10:44:52
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
  * @Description: 附属设施异常统计
 -->
@@ -59,7 +59,7 @@ export default {
       },
     },
   },
-  created() {
+  mounted() {
     this.getChartData();
   },
   methods: {

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

@@ -32,7 +32,7 @@ export default {
       count: "0",
     };
   },
-  created() {
+  mounted() {
     this.getRoadList();
   },
   methods: {

src/views/big-screen/road-components/road-statistic.vue

@@ -166,6 +166,8 @@ export default {
     .road-top {
       .road-top-name {
         line-height: 1.5rem;
+        font-size: 0.8rem;
+        font-family: "DouYu";
         color: #c7daf2;
 
         a {

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

@@ -62,7 +62,7 @@ export default {
       roadChart: [],
     };
   },
-  created() {
+  mounted() {
     this.getData();
   },
   methods: {

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

@@ -114,7 +114,7 @@ export default {
       distributionList: [],
     };
   },
-  created() {
+  mounted() {
     this.getChartData();
     this.getBottomData();
   },

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-12-13 15:29:27
+ * @LastEditTime: 2024-12-18 15:41:16
  * @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
  * @Description: 首页-公路资产
 -->
@@ -62,7 +62,7 @@ export default {
       roadChartData: [],
     };
   },
-  created() {
+  mounted() {
     this.getTopData();
     this.getBottomData();
   },
@@ -343,42 +343,67 @@ export default {
     }
 
     .middle-item-0 {
-      background: url("../../assets/index/middle-item-0.png") no-repeat;
+      background: url("~@/assets/index/middle-item-0.png") no-repeat;
       background-size: 120% 100%;
     }
 
     .middle-item-1 {
-      background: url("../../assets/index/middle-item-1.png") no-repeat;
+      background: url("~@/assets/index/middle-item-1.png") no-repeat;
       background-size: 120% 100%;
     }
 
     .middle-item-2 {
-      background: url("../../assets/index/middle-item-2.png") no-repeat;
+      background: url("~@/assets/index/middle-item-2.png") no-repeat;
       background-size: 120% 100%;
     }
 
     .middle-item-3 {
-      background: url("../../assets/index/middle-item-3.png") no-repeat;
+      background: url("~@/assets/index/middle-item-3.png") no-repeat;
       background-size: 120% 100%;
     }
 
     .middle-item-4 {
-      background: url("../../assets/index/middle-item-4.png") no-repeat;
+      background: url("~@/assets/index/middle-item-4.png") no-repeat;
       background-size: 120% 100%;
     }
 
     .middle-item-5 {
-      background: url("../../assets/index/middle-item-5.png") no-repeat;
+      background: url("~@/assets/index/middle-item-5.png") no-repeat;
       background-size: 120% 100%;
     }
 
     .middle-item-6 {
-      background: url("../../assets/index/middle-item-6.png") no-repeat;
+      background: url("~@/assets/index/middle-item-6.png") no-repeat;
       background-size: 120% 100%;
     }
 
     .middle-item-7 {
-      background: url("../../assets/index/middle-item-7.png") no-repeat;
+      background: url("~@/assets/index/middle-item-7.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-8 {
+      background: url("~@/assets/index/middle-item-8.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-9 {
+      background: url("~@/assets/index/middle-item-9.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-10 {
+      background: url("~@/assets/index/middle-item-10.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-11 {
+      background: url("~@/assets/index/middle-item-11.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-12 {
+      background: url("~@/assets/index/middle-item-12.png") no-repeat;
       background-size: 120% 100%;
     }
   }

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

@@ -59,7 +59,7 @@ export default {
       trafficEchartData: [],
     };
   },
-  created() {
+  mounted() {
     this.getTableData();
     this.getSelect();
     this.getLogData();

src/views/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-20 10:21:45
+ * @LastEditTime: 2024-12-19 11:35:24
  * @FilePath: \znxjxt-ui\src\views\index.vue
  * @Description: 系统首页
 -->
@@ -68,7 +68,7 @@ export default {
       loading: false,
     };
   },
-  created() {
+  mounted() {
     this.getTopData();
   },
   methods: {