fix：大屏页面

src/assets/text/font.css

@@ -0,0 +1,14 @@
+@font-face{
+    font-family: "DouYu";
+    src: url("./DOUYU.ttf");
+}
+
+@font-face{
+    font-family: "DinBm";
+    src: url("./DINBM.ttf");
+}
+
+@font-face{
+    font-family: "ys";
+    src: url("./ys.ttf");
+}

src/main.js

@@ -40,6 +40,7 @@ import DictData from '@/components/DictData'
 //工作流
 
 import Tinymce from '@/components/tinymce/index.vue'
+import "./assets/text/font.css"
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

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

@@ -2,14 +2,27 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 10:19:56
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 13:15:47
+ * @LastEditTime: 2024-10-21 17:14:45
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\disease-current.vue
  * @Description: 病害巡检-病害三维饼图
 -->
 
 <template>
   <div class="content">
-    <div class="content-select">下拉框</div>
+    <div class="content-select">
+      <el-select
+        :popper-append-to-body="false"
+        v-model="itemSelect"
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in currentList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
     <div class="echart" ref="currentChart"></div>
     <div class="food-legend">
       <div
@@ -33,8 +46,34 @@ export default {
   name: "DiseaseCurrent",
   data() {
     return {
+      // 下拉框绑定
+      itemSelect: "1",
+      // 下拉框数据
+      currentList: [
+        {
+          label: "分公司",
+          value: "1",
+        },
+        {
+          label: "分公司2",
+          value: "2",
+        },
+        {
+          label: "分公3",
+          value: "3",
+        },
+        {
+          label: "分公司4",
+          value: "4",
+        },
+        {
+          label: "分公司5",
+          value: "5",
+        },
+      ],
       // 配置项数据
       options: {},
+      // 颜色盘
       colorList: [
         "#F29C1F",
         "#E163EF",
@@ -113,6 +152,28 @@ export default {
             min: -1,
             max: 1,
           },
+          // title: [
+          //   {
+          //     x: "center",
+          //     top: "20%",
+          //     text: 50,
+          //     textStyle: {
+          //       color: "#fff",
+          //       fontSize: 42,
+          //       fontWeight: "bold",
+          //     },
+          //   },
+          //   {
+          //     x: "center",
+          //     top: "50%",
+          //     text: "还款总额",
+          //     textStyle: {
+          //       color: "#fff",
+          //       fontSize: 12,
+          //       fontWeight: 400,
+          //     },
+          //   },
+          // ],
           grid3D: {
             show: false,
             width: "250%",
@@ -123,7 +184,7 @@ export default {
             left: "-75%",
             viewControl: {
               // 是否自动旋转
-              autoRotate: false,
+              autoRotate: true,
               // 调节角度
               alpha: 25,
               rotateSensitivity: 0, //设置旋转灵敏度，为0无法旋转
@@ -299,6 +360,49 @@ export default {
   .content-select {
     position: absolute;
     z-index: 1;
+    right: 0;
+    top: 0.2rem;
+
+    ::v-deep .el-select {
+      width: 6.5rem;
+
+      .el-input .el-select__caret {
+        line-height: 1.5rem;
+      }
+
+      .el-input--medium .el-input__inner {
+        height: 1.5rem;
+        background-color: transparent;
+        color: #89c5e8;
+        border-color: #6991cd;
+      }
+
+      .el-select-dropdown {
+        background-color: #102649;
+        border-color: #08204f;
+        .el-scrollbar {
+          .el-select-dropdown__wrap {
+            .el-scrollbar__view {
+              .el-select-dropdown__item:hover {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.selected {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.hover {
+                background-color: #2b4c7e;
+              }
+            }
+
+            .el-select-dropdown__list {
+              background-color: #102649;
+            }
+          }
+        }
+      }
+    }
   }
 
   .echart {
@@ -327,19 +431,19 @@ export default {
       .name {
         width: 3.5rem;
         padding-left: 0.3rem;
-        color: #AAC6C7;
+        color: #aac6c7;
         font-size: 0.7rem;
       }
 
       .rate {
         width: 1.5rem;
-        color: #808C9F;
+        color: #808c9f;
         font-size: 0.65rem;
       }
 
       .value {
         width: 2rem;
-        color: #808C9F;
+        color: #808c9f;
         font-size: 0.65rem;
       }
     }

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

@@ -66,6 +66,7 @@ export default {
             fontSize: 12,
             color: "#808C9F",
           },
+          confine:true,
         },
         xAxis: {
           type: "category",
@@ -239,6 +240,7 @@ export default {
 .content {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 </style>
   

src/views/big-screen/disease-components/pic-rank.vue

@@ -24,7 +24,9 @@
             <a>{{ index + 1 }}</a
             >{{ item.name }}
           </div>
-          <div class="pic-top-value">{{ item.value }}</div>
+          <div class="pic-top-value">
+            <span>{{ item.value }}</span>
+          </div>
         </div>
         <div class="pic-bottom">
           <div
@@ -73,7 +75,7 @@ export default {
   width: 100%;
   height: 100%;
   color: #c7daf2;
-    overflow: hidden;
+  overflow: hidden;
 
   .pic-div {
     width: calc(100% - 1rem);
@@ -83,7 +85,7 @@ export default {
     justify-content: space-between;
     margin: 0.5rem;
     padding: 0.5rem 1rem;
-    border: 1px solid #2f78aa;
+    border: 1px solid rgba(47, 120, 170, 0.4);
 
     .pic-top {
       display: flex;
@@ -101,18 +103,27 @@ export default {
           margin-right: 0.5rem;
           justify-content: center;
           align-items: center;
-          border: 1px solid #2f78aa;
+          border: 1px solid rgba(47, 120, 170, 0.4);
         }
       }
 
       .pic-top-value {
+        font-family: "DouYu";
         font-size: 1rem;
+        background: linear-gradient(
+          to bottom,
+          #ffffff,
+          #2773d0
+        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+        background-clip: text; /*将设置的背景颜色限制在文字中*/
+        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
       }
     }
 
     .pic-bottom {
       width: 100%;
       height: 0.3rem;
+      background-color: rgba(2, 40, 88, 0.7);
 
       .pic-bottom-0 {
         height: 0.3rem;

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

@@ -2,14 +2,14 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 09:42:49
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 11:04:18
+ * @LastEditTime: 2024-10-22 09:30:05
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\today-inspection.vue
  * @Description: 病害巡检-今日巡查
 -->
 
 <template>
   <div class="content">
-    <div class="today-left"><span>87</span></div>
+    <div class="today-left"><span>86</span></div>
     <div class="today-right">
       <div class="right-sum"><span>261</span>个</div>
       <div class="right-rate"><span> 37 </span>%</div>
@@ -40,11 +40,23 @@ export default {
     align-items: center;
     justify-content: center;
     padding-left: 1.5rem;
-    font-size: 3rem;
     background-image: url("../../../assets/screen/disease/today-left.png");
     background-repeat: no-repeat;
     background-size: 85%;
     background-position: 100% 60%;
+
+    span {
+      font-size: 2rem;
+      font-weight: 800;
+      font-family: "DouYu";
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #2773d0
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
   }
 
   .today-right {
@@ -60,17 +72,34 @@ export default {
       width: 100%;
       height: 4rem;
       display: flex;
+      padding-left: 1rem;
       justify-content: center;
       line-height: 3rem;
       background-image: url("../../../assets/screen/disease/right-sum.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,
+          #2773d0
+        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+        background-clip: text; /*将设置的背景颜色限制在文字中*/
+        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+      }
     }
 
     .right-rate {
       width: 100%;
       height: 4rem;
+      padding-left: 1rem;
       display: flex;
       justify-content: center;
       line-height: 3rem;
@@ -78,6 +107,21 @@ export default {
       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; /*给文字设置成透明*/
+      }
     }
   }
 }

src/views/big-screen/disease-components/work-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-10-18 13:34:00
+ * @LastEditTime: 2024-10-22 09:30:43
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
  * @Description: 病害巡检-工单统计
 -->
@@ -14,7 +14,7 @@
       v-for="(item, index) in workList"
       :key="`work-${index}`"
     >
-      {{ item.value }}
+      <span>{{ item.value }}</span>
     </div>
   </div>
 </template>
@@ -52,10 +52,12 @@ export default {
   > div {
     width: 30%;
     height: 100%;
-    font-size: 1.5rem;
     line-height: 8rem;
     display: flex;
     justify-content: center;
+    font-size: 1.2rem;
+    font-weight: 800;
+    font-family: "DouYu";
   }
 
   .work-div-0 {
@@ -63,6 +65,16 @@ export default {
     background-repeat: no-repeat;
     background-size: 95%;
     background-position: 0 50%;
+
+    span {
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #2773d0
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
   }
 
   .work-div-1 {
@@ -70,6 +82,16 @@ export default {
     background-repeat: no-repeat;
     background-size: 95%;
     background-position: 0 50%;
+
+    span {
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #E9BC5C
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
   }
 
   .work-div-2 {
@@ -77,6 +99,16 @@ export default {
     background-repeat: no-repeat;
     background-size: 95%;
     background-position: 0 50%;
+
+    span {
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #21F1E1
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
   }
 }
 </style>

src/views/big-screen/disease-screen.vue

@@ -2,13 +2,15 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 16:05:15
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-17 16:41:33
+ * @LastEditTime: 2024-10-21 14:26:47
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-screen.vue
  * @Description: 大屏-病害巡检
 -->
 
 <template>
-  <div class="disease-content">病害巡检</div>
+  <div class="disease-content">
+    <div class="disease-title"></div>
+  </div>
 </template>
 
 <script>
@@ -24,5 +26,18 @@ export default {
   background-image: url("../../assets/screen/index/map-liaoning.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  position: relative;
+
+  .disease-title {
+    width: 20rem;
+    height: 2.8rem;
+    position: absolute;
+    // top: 5rem;
+    left: 50%;
+    transform: translate(-50%,5rem);
+    background-image: url("../../assets/screen/index/disease-title.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
 }
 </style>

src/views/big-screen/index.vue

@@ -2,14 +2,24 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 15:33:00
+ * @LastEditTime: 2024-10-22 09:52:38
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
 <template>
   <div class="screen-content">
     <div class="screen-header">
-      <div class="header-weather">多云转中雨</div>
+      <div class="header-weather">
+        <iframe
+          width="150"
+          scrolling="no"
+          height="45"
+          frameborder="0"
+          allowtransparency="true"
+          @load="loadFrame"
+          src="https://i.tianqi.com?c=code&id=12&icon=1&color=%2389C5E8&py=shenyang&num=1&site=12"
+        ></iframe>
+      </div>
       <div class="header-time">
         <div class="header-data">{{ dataTime }}</div>
         <div class="header-week">
@@ -17,7 +27,7 @@
           <span>{{ yearTime }}</span>
         </div>
         <div class="header-home">
-          <i class="el-icon-s-home" @click="goIndex"></i>
+          <div class="home" @click="goIndex"></div>
         </div>
       </div>
     </div>
@@ -31,22 +41,15 @@
           :title="item.title"
           :class="item.class"
         >
-          <template><component :is="item.component"></component></template>
+          <template
-          <!-- <template slot="operation" v-if="item.selectIsShow">
+            ><component :select="item.select" :is="item.component"></component
-          <el-select
+          ></template>
-            v-model="item.select"
+          <template slot="operation" v-if="item.selectIsShow">
-            popper-class="ioc-el-select"
+            <el-radio-group class="screen-checkBox" v-model="item.select">
-            v-if="item.title === '证照临期超期情况'"
+              <el-radio-button label="1">公司</el-radio-button>
-          >
+              <el-radio-button label="2">线路</el-radio-button>
-            <el-option
+            </el-radio-group>
-              v-for="temp in item.selectCreditList"
+          </template>
-              :key="temp.value"
-              :label="temp.label"
-              :value="temp.value"
-            >
-            </el-option>
-          </el-select>
-        </template> -->
         </module-block>
       </div>
       <div class="screen-right">
@@ -59,21 +62,12 @@
           :class="item.class"
         >
           <template><component :is="item.component"></component></template>
-          <!-- <template slot="operation" v-if="item.selectIsShow">
+          <template slot="operation" v-if="item.selectIsShow">
-          <el-select
+            <el-radio-group class="screen-checkBox" v-model="item.select">
-            v-model="item.select"
+              <el-radio-button label="1">公司</el-radio-button>
-            popper-class="ioc-el-select"
+              <el-radio-button label="2">线路</el-radio-button>
-            v-if="item.title === '证照临期超期情况'"
+            </el-radio-group>
-          >
+          </template>
-            <el-option
-              v-for="temp in item.selectCreditList"
-              :key="temp.value"
-              :label="temp.label"
-              :value="temp.value"
-            >
-            </el-option>
-          </el-select>
-        </template> -->
         </module-block>
       </div>
       <!-- 底图切换 -->
@@ -82,15 +76,17 @@
     </div>
     <div class="screen-footer">
       <div class="footer-change-map">
-        <div
+        <template v-if="elementDiv !== 'DiseaseScreen'">
-          class="change-map-div"
+          <div
-          :class="mapClick === item.click ? 'change-map-click' : ''"
+            class="change-map-div"
-          v-for="(item, index) in changeMapBtn"
+            :class="mapClick === item.click ? 'change-map-click' : ''"
-          :key="`btn-${index}`"
+            v-for="(item, index) in changeMapBtn"
-          @click="changeMap(item)"
+            :key="`btn-${index}`"
-        >
+            @click="changeMap(item)"
-          {{ item.name }}
+          >
-        </div>
+            {{ item.name }}
+          </div>
+        </template>
       </div>
       <div class="footer-change-vue">
         <div
@@ -122,6 +118,11 @@ import RoadStatistic from "./road-components/road-statistic.vue";
 import ManageMaintain from "./road-components/manage-maintain.vue";
 import AnomalyFacilities from "./road-components/anomaly-facilities";
 import AncillaryFacilities from "./road-components/ancillary-facilities.vue";
+import TrafficSafety from "./traffic-components/traffic-safety.vue";
+import TrafficTrend from "./traffic-components/traffic-trend.vue";
+import TrafficStatistic from "./traffic-components/traffic-statistic.vue";
+import TrafficRank from "./traffic-components/traffic-rank.vue";
+import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
 export default {
   name: "BigScreen",
   components: {
@@ -138,6 +139,11 @@ export default {
     ManageMaintain,
     AnomalyFacilities,
     AncillaryFacilities,
+    TrafficSafety,
+    TrafficTrend,
+    TrafficStatistic,
+    TrafficRank,
+    TrafficEmergency,
   },
   data() {
     return {
@@ -153,39 +159,57 @@ export default {
       leftModuleList: [
         {
           width: "100%",
-          height: "9rem",
+          height: "14rem",
-          title: "管养道路统计",
+          title: "今日巡查",
-          component: ManageMaintain,
+          component: TodayInspection,
           selectIsShow: false,
           class: "one",
         },
         {
           width: "100%",
-          height: "28rem",
+          height: "14rem",
-          title: "附属设施分布",
+          title: "病害趋势",
-          component: AncillaryFacilities,
+          component: DiseaseTrends,
           selectIsShow: false,
           class: "twe",
         },
+        {
+          width: "100%",
+          height: "15rem",
+          title: "病害趋势",
+          component: DiseaseCurrent,
+          selectIsShow: true,
+          select: "1",
+          class: "twe",
+        },
       ],
       // 右侧切换模块
       rightModuleList: [
         {
           width: "100%",
-          height: "15rem",
+          height: "13rem",
-          title: "附属设施异常统计",
+          title: "工单统计",
-          component: AnomalyFacilities,
+          component: WorkOrder,
           selectIsShow: false,
           class: "one",
         },
         {
           width: "100%",
-          height: "29rem",
+          height: "17rem",
-          title: "路产统计",
+          title: "PIC排名",
-          component: RoadStatistic,
+          component: PicRank,
           selectIsShow: false,
           class: "twe",
         },
+        {
+          width: "100%",
+          height: "13rem",
+          title: "路面状况排名",
+          component: RoadRank,
+          selectIsShow: true,
+          select: "1",
+          class: "twe",
+        },
       ],
       // 切换地图按钮
       changeMapBtn: [
@@ -209,6 +233,10 @@ export default {
     this.setTime();
   },
   methods: {
+    /* iframe加载完成回调方法 */
+    loadFrame() {
+      const iframe = document.getElementById("iframeId");
+    },
     /* 获取当前时间 */
     setTime() {
       this.timeFlag = setInterval(() => {
@@ -274,7 +302,8 @@ export default {
               height: "15rem",
               title: "病害趋势",
               component: DiseaseCurrent,
-              selectIsShow: false,
+              selectIsShow: true,
+              select: "1",
               class: "twe",
             },
           ];
@@ -300,7 +329,8 @@ export default {
               height: "13rem",
               title: "路面状况排名",
               component: RoadRank,
-              selectIsShow: false,
+              selectIsShow: true,
+              select: "1",
               class: "twe",
             },
           ];
@@ -329,7 +359,8 @@ export default {
               height: "15rem",
               title: "附属设施异常统计",
               component: AnomalyFacilities,
-              selectIsShow: false,
+              selectIsShow: true,
+              select: "1",
               class: "one",
             },
             {
@@ -337,6 +368,54 @@ export default {
               height: "29rem",
               title: "路产统计",
               component: RoadStatistic,
+              selectIsShow: true,
+              select: "1",
+              class: "twe",
+            },
+          ];
+        } else if (item.component === "TrafficScreen") {
+          this.leftModuleList = [
+            {
+              width: "100%",
+              height: "14rem",
+              title: "交安事件",
+              component: TrafficSafety,
+              selectIsShow: false,
+              class: "one",
+            },
+            {
+              width: "100%",
+              height: "14rem",
+              title: "交安事件趋势",
+              component: TrafficTrend,
+              selectIsShow: false,
+              class: "twe",
+            },
+            {
+              width: "100%",
+              height: "17rem",
+              title: "交安事件统计",
+              component: TrafficStatistic,
+              selectIsShow: true,
+              select: "1",
+              class: "twe",
+            },
+          ];
+          this.rightModuleList = [
+            {
+              width: "100%",
+              height: "29rem",
+              title: "交安事件排名",
+              component: TrafficRank,
+              selectIsShow: true,
+              select: "1",
+              class: "one",
+            },
+            {
+              width: "100%",
+              height: "15rem",
+              title: "交安突发事件",
+              component: TrafficEmergency,
               selectIsShow: false,
               class: "twe",
             },
@@ -413,13 +492,25 @@ export default {
     top: 0;
     z-index: 0;
   }
+
+  ::v-deep .screen-checkBox {
+    .el-radio-button__inner {
+      background-color: transparent;
+      padding: 0 0.3rem;
+      border: none;
+    }
+
+    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+      color: #1cb6ff;
+    }
+  }
 }
 
 // 头部样式
 .screen-header {
   width: 100%;
   height: 5rem;
-  padding: 0 3rem;
+  padding: 1rem 3rem;
   position: fixed;
   top: 0;
   display: flex;
@@ -459,8 +550,14 @@ export default {
     }
 
     .header-home {
-      cursor: pointer;
+      .home {
-      font-size: 1.8rem;
+        cursor: pointer;
+        height: 1.5rem;
+        width: 1.2rem;
+        background-image: url("../../assets/screen/index/exit.png");
+        background-repeat: no-repeat;
+        background-size: 100%;
+      }
     }
   }
 }

src/views/big-screen/module-block.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 09:29:51
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 09:50:09
+ * @LastEditTime: 2024-10-21 18:00:45
  * @FilePath: \znxjxt-ui\src\views\big-screen\module-block.vue
  * @Description: 大屏数据栏
 -->
@@ -10,7 +10,7 @@
   <div class="module-block" :style="{ width, height }">
     <div class="module-block__header">
       <div class="header-title">
-        {{ title }}
+        <span>{{ title }}</span>
       </div>
       <div class="header-operation" v-if="$slots.operation">
         <slot name="operation"></slot>
@@ -55,6 +55,7 @@ export default {
   .module-block__header {
     width: 100%;
     height: 2.5rem;
+    display: flex;
     background-image: url("../../assets/screen/index/title.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
@@ -68,11 +69,14 @@ export default {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+      font-family: "ys";
+      font-size: 1.4rem;
     }
 
     .header-operation {
       width: calc(100% - 18rem);
       height: 2.5rem;
+      line-height: 2rem;
     }
   }
 

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

@@ -2,14 +2,14 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:18:03
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 16:37:19
+ * @LastEditTime: 2024-10-22 09:05:30
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
  * @Description: 道路资产大屏-附属设施分布
 -->
 
 <template>
   <div class="content">
-    <div class="ancillary-top">21465</div>
+    <div class="ancillary-top"><span>21465</span></div>
     <div class="ancillary-bottom">
       <div
         :class="`ancillary-bottom-${index}`"
@@ -18,8 +18,8 @@
       >
         <div>{{ item.name }}</div>
         <div>
-          <a>{{ item.value }}</a
+          <span>{{ item.value }}</span
-          ><span>{{ item.unit }}</span>
+          ><a>{{ item.unit }}</a>
         </div>
       </div>
     </div>
@@ -60,12 +60,24 @@ export default {
     display: flex;
     justify-content: center;
     line-height: 8rem;
-    font-size: 2rem;
     padding-right: 2rem;
     background-image: url("../../../assets/screen/road/ancillary-top.png");
     background-repeat: no-repeat;
     background-size: 90% 80%;
     background-position: 50%;
+
+    span {
+      font-size: 1.5rem;
+      font-weight: 800;
+      font-family: "DouYu";
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #2773d0
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
   }
 
   .ancillary-bottom {
@@ -82,9 +94,17 @@ export default {
       justify-content: center;
       flex-direction: column;
       padding-left: 3.5rem;
-      font-size: 0.9rem;
+      font-size: 0.8rem;
 
       span {
+        font-size: 0.8rem;
+        font-weight: 800;
+        font-family: "DouYu";
+      }
+
+      a {
+        font-size: 0.7rem;
+        color: #aac6c7;
         padding-left: 0.5rem;
       }
     }
@@ -95,7 +115,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #ac8018;
       }
     }
@@ -106,7 +126,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #ac8018;
       }
     }
@@ -117,7 +137,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #08afa3;
       }
     }
@@ -128,7 +148,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #08afa3;
       }
     }
@@ -139,7 +159,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #3f84e3;
       }
     }
@@ -150,7 +170,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #3f84e3;
       }
     }
@@ -161,7 +181,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #ac8018;
       }
     }
@@ -172,7 +192,7 @@ export default {
       background-size: 100% 100%;
       background-position: 50%;
 
-      a {
+      span {
         color: #ac8018;
       }
     }

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

@@ -2,14 +2,27 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:21:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 17:06:39
+ * @LastEditTime: 2024-10-21 16:03:14
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\anomaly-facilities.vue
  * @Description: 附属设施异常统计
 -->
 
 <template>
   <div class="content">
-    <div class="anomaly-select">下拉框</div>
+    <div class="anomaly-select">
+      <el-select
+        :popper-append-to-body="false"
+        v-model="itemSelect"
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in currentList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
     <div ref="anomalyChart" class="anomaly-echart"></div>
   </div>
 </template>
@@ -19,7 +32,33 @@ import * as echarts from "echarts";
 export default {
   name: "AnomalyFacilities",
   data() {
-    return {};
+    return {
+      // 下拉框绑定
+      itemSelect: "1",
+      // 下拉框数据
+      currentList: [
+        {
+          label: "分公司",
+          value: "1",
+        },
+        {
+          label: "分公司2",
+          value: "2",
+        },
+        {
+          label: "分公3",
+          value: "3",
+        },
+        {
+          label: "分公司4",
+          value: "4",
+        },
+        {
+          label: "分公司5",
+          value: "5",
+        },
+      ],
+    };
   },
   created() {
     this.getChartData();
@@ -315,9 +354,54 @@ export default {
 .content {
   width: 100%;
   height: 100%;
+  position: relative;
 
   .anomaly-select {
     position: absolute;
+    z-index: 1;
+    right: 0;
+    top: 0.2rem;
+
+    ::v-deep .el-select {
+      width: 6.5rem;
+
+      .el-input .el-select__caret {
+        line-height: 1.5rem;
+      }
+
+      .el-input--medium .el-input__inner {
+        height: 1.5rem;
+        background-color: transparent;
+        color: #89c5e8;
+        border-color: #6991cd;
+      }
+
+      .el-select-dropdown {
+        background-color: #102649;
+        border-color: #08204f;
+        .el-scrollbar {
+          .el-select-dropdown__wrap {
+            .el-scrollbar__view {
+              .el-select-dropdown__item:hover {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.selected {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.hover {
+                background-color: #2b4c7e;
+              }
+            }
+
+            .el-select-dropdown__list {
+              background-color: #102649;
+            }
+          }
+        }
+      }
+    }
   }
 
   .anomaly-echart {

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

@@ -9,8 +9,8 @@
 
 <template>
   <div class="content">
-    <div class="maintain-left">286<span>km</span></div>
+    <div class="maintain-left"><span>286</span>km</div>
-    <div class="maintain-right">86<span>条</span></div>
+    <div class="maintain-right"><span>86</span>条</div>
   </div>
 </template>
 
@@ -39,12 +39,14 @@ export default {
     line-height: 5rem;
     display: flex;
     justify-content: center;
-    font-size: 1.5rem;
+    font-size: 1rem;
+    color: #aac6c7;
 
     span {
-      padding-left: 0.5rem;
+      padding-right: 0.5rem;
-      color: #d1d1d1;
+      font-weight: 800;
-      font-size: 1rem;
+      font-family: "DouYu";
+      font-size: 1.2rem;
     }
   }
 
@@ -53,6 +55,16 @@ export default {
     background-repeat: no-repeat;
     background-position: 100%;
     background-size: 100% 65%;
+
+    span {
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #e9bc5c
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
   }
 
   .maintain-right {
@@ -60,6 +72,16 @@ export default {
     background-repeat: no-repeat;
     background-position: 100%;
     background-size: 100% 65%;
+
+    span {
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #2773d0
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
   }
 }
 </style>

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

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 15:22:31
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-18 17:29:19
+ * @LastEditTime: 2024-10-22 09:13:22
  * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\road-statistic.vue
  * @Description: 道路资产大屏-路产统计
 -->
@@ -16,16 +16,26 @@
     >
       <div class="road-top">
         <div class="road-top-name">
-          <a>{{ index + 1 }}</a
+          <a>{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}</a
           >{{ item.name }}
         </div>
-        <div class="road-top-value">{{ item.value }}</div>
+        <div class="road-top-value">
+          <span>{{ item.value }}</span
+          ><a>个</a>
+        </div>
       </div>
       <div class="road-bottom">
         <div
-          :style="{ width: `${(item.value / 300) * 100}%` }"
+          class="road-bottom-div"
-          :class="`road-bottom-${index}`"
+          :style="{ width: `${item.value * 10}%` }"
-        ></div>
+          :class="`bottom-${index}`"
+        >
+          <div
+            v-for="(it, ind) in item.value"
+            :key="`info-${ind}`"
+            class="road-info"
+          ></div>
+        </div>
       </div>
     </div>
   </div>
@@ -37,16 +47,16 @@ export default {
   data() {
     return {
       roadList: [
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 7 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 6 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 5 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 5 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 1 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 5 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 3 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 8 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 3 },
-        { name: "G10152", value: 523 },
+        { name: "G10152", value: 6 },
       ],
     };
   },
@@ -61,7 +71,7 @@ export default {
   color: #ffffff;
 
   .road-div {
-    height: 3rem;
+    height: 2.5rem;
     width: 100%;
     padding: 0 1.5rem;
     display: flex;
@@ -89,12 +99,95 @@ export default {
     .road-top {
       .road-top-name {
         line-height: 1.5rem;
+        color: #c7daf2;
+
+        a {
+          display: inline-block;
+          width: 1.5rem;
+          color: #808c9f;
+        }
+      }
+
+      .road-top-value {
+        span {
+          font-family: "DouYu";
+
+          color: #c7daf2;
+          background: linear-gradient(
+            to bottom,
+            #ffffff,
+            #2773d0
+          ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+          background-clip: text; /*将设置的背景颜色限制在文字中*/
+          -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+        }
+
+        a {
+          margin-left: 0.5rem;
+          font-size: 0.8rem;
+          color: #808c9f;
+        }
       }
     }
 
     .road-bottom {
+      width: 100%;
       height: 0.5rem;
-      background-color: red;
+      background-color: rgba(50, 72, 127, 0.3);
+      position: relative;
+
+      .img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+
+      .road-bottom-div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+
+        .road-info {
+          height: 100%;
+          width: 40px;
+          border-left: 2px black solid;
+          margin: 0 0.1rem;
+        }
+      }
+
+      .bottom-0 {
+        background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
+      }
+
+      .bottom-1 {
+        background: linear-gradient(90deg, #0e183e 0%, #08b4a6 100%);
+      }
+
+      .bottom-2 {
+        background: linear-gradient(90deg, #0e183e 0%, #be8b13 100%);
+      }
+
+      .bottom-3 {
+        background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
+      }
+      .bottom-4 {
+        background: linear-gradient(90deg, #0e183e 0%, #08b4a6 100%);
+      }
+      .bottom-5 {
+        background: linear-gradient(90deg, #0e183e 0%, #be8b13 100%);
+      }
+      .bottom-6 {
+        background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
+      }
+      .bottom-7 {
+        background: linear-gradient(90deg, #0e183e 0%, #08b4a6 100%);
+      }
+      .bottom-8 {
+        background: linear-gradient(90deg, #0e183e 0%, #be8b13 100%);
+      }
+      .bottom-9 {
+        background: linear-gradient(90deg, #0e183e 0%, #4087e8 100%);
+      }
     }
   }
 }

src/views/big-screen/traffic-components/traffic-emergency.vue

@@ -0,0 +1,190 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-21 10:12:55
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-22 09:38:45
+ * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-emergency.vue
+ * @Description: 交安事件大屏-交安突发事件
+-->
+
+<template>
+  <div class="content">
+    <div class="emergency-top">
+      <div class="emergency-type">事件类型</div>
+      <div class="emergency-name">段路名称</div>
+      <div class="emergency-status">事件状态</div>
+      <div class="emergency-operation">操作</div>
+    </div>
+    <div class="emergency-bottom">
+      <vue-seamless-scroll
+        class="vue-scroll"
+        :class-option="defaultOption"
+        :data="emergencyList"
+      >
+        <div
+          class="emergency-bottom-div"
+          v-for="(item, index) in emergencyList"
+          :key="`emergency-${index}`"
+        >
+          <div class="emergency-type">{{ item.type }}</div>
+          <div class="emergency-name">{{ item.name }}</div>
+          <div class="emergency-status"><a></a>{{ item.status }}</div>
+          <div class="emergency-operation">操作</div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+
+export default {
+  name: "TrafficEmergency",
+  components: { vueSeamlessScroll },
+  data() {
+    return {
+      // 轮播配置
+      defaultOption: {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 1,
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
+      },
+      // 事件列表
+      emergencyList: [
+        {
+          type: "中分率植物缺死",
+          name: "换成高速啊实打实的",
+          status: "待核验",
+        },
+        {
+          type: "中分率植物缺死",
+          name: "换成高速啊实打实的",
+          status: "待核验",
+        },
+        {
+          type: "中分率植物缺死",
+          name: "换成高速啊实打实的",
+          status: "待核验",
+        },
+        {
+          type: "中分率植物缺死",
+          name: "换成高速啊实打实的",
+          status: "待核验",
+        },
+        {
+          type: "中分率植物缺死",
+          name: "换成高速啊实打实的",
+          status: "待核验",
+        },
+        {
+          type: "中分率植物缺死",
+          name: "换成高速啊实打实的",
+          status: "待核验",
+        },
+        {
+          type: "中分率植物缺死",
+          name: "换成高速啊实打实的",
+          status: "待核验",
+        },
+      ],
+    };
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  padding-top: 1rem;
+  overflow: hidden;
+  padding-left: 1rem;
+
+  .emergency-top {
+    height: 2rem;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    // border: 1px solid #0b7ecf;
+    color: #e6fcfe;
+    font-size: 0.9rem;
+    padding: 0 0.5rem;
+    background-image: url("../../../assets/screen/traffic/emergency-top.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+
+    .emergency-type {
+      width: 30%;
+    }
+
+    .emergency-name {
+      width: 30%;
+    }
+
+    .emergency-status {
+      width: 30%;
+    }
+
+    .emergency-operation {
+      width: 10%;
+    }
+  }
+
+  .emergency-bottom {
+    height: calc(100% - 2rem);
+    width: 100%;
+    overflow: hidden;
+
+    .emergency-bottom-div {
+      height: 2rem;
+      font-size: 0.8rem;
+      display: flex;
+
+      &:nth-child(2n + 1) {
+        background-color: rgba(17, 52, 99, 0.3);
+      }
+
+      > div {
+        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 {
+        width: 10%;
+        color: #0d9ee2;
+      }
+    }
+  }
+}
+</style>

src/views/big-screen/traffic-components/traffic-rank.vue

@@ -0,0 +1,230 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-21 10:11:03
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-21 14:04:49
+ * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-rank.vue
+ * @Description: 交安事件大屏-交安事件排名
+-->
+
+
+<template>
+  <div class="content">
+    <div
+      class="rank-div"
+      v-for="(item, index) in rankList"
+      :key="`rank-${index}`"
+    >
+      <div class="rank-top" :class="`rank-top-${index}`">
+        <div class="name">{{ item.name }}</div>
+        <div class="value">{{ item.value }}</div>
+      </div>
+      <div class="rank-bottom">
+        <div
+          :style="{ width: `${(item.value / 600) * 100}%` }"
+          :class="`rank-bottom-${index}`"
+        ></div>
+        <div class="rank-bottom-tip"></div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+export default {
+  name: "TrafficRank",
+  data() {
+    return {
+      // 排名数据
+      rankList: [],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    /* 获取排名数据 */
+    getData() {
+      this.rankList = [
+        { name: "G4562(没开始快速打开看)", value: 556 },
+        { name: "G4562(没开始快速打开看)", value: 456 },
+        { name: "G4562(没开始快速打开看)", value: 356 },
+        { name: "G4562(没开始快速打开看)", value: 556 },
+        { name: "G4562(没开始快速打开看)", value: 556 },
+        { name: "G4562(没开始快速打开看)", value: 556 },
+        { name: "G4562(没开始快速打开看)", value: 556 },
+        { name: "G4562(没开始快速打开看)", value: 556 },
+        { name: "G4562(没开始快速打开看)", value: 556 },
+        { name: "G4562(没开始快速打开看)", value: 556 },
+      ];
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  padding-left: 1rem;
+
+  .rank-div {
+    width: 100%;
+    height: 2.5rem;
+
+    .rank-top {
+      width: 100%;
+      height: 2rem;
+      padding: 0 1rem 0.2rem 3rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .name {
+        font-size: 0.9rem;
+        color: #c7daf2;
+      }
+
+      .value {
+        font-family: "DouYu";
+        font-size: 0.9rem;
+        color: #1d92d1;
+      }
+    }
+
+    .rank-bottom {
+      width: 100%;
+      height: 0.3rem;
+      display: flex;
+      background-color: #113463;
+
+      > div:nth-child(1) {
+        height: 100%;
+        max-width: 99%;
+      }
+
+      .rank-bottom-tip {
+        width: 0.5rem;
+        height: 0.5rem;
+        top: -0.1rem;
+        left: -0.1rem;
+        position: relative;
+        background-color: #8effce;
+        border-radius: 0.25rem;
+      }
+
+      .rank-bottom-0 {
+        background: linear-gradient(90deg, #322707 0%, #ffc000 100%);
+      }
+
+      .rank-bottom-1 {
+        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+      }
+
+      .rank-bottom-2 {
+        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+      }
+
+      .rank-bottom-3 {
+        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+      }
+
+      .rank-bottom-4 {
+        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+      }
+
+      .rank-bottom-5 {
+        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+      }
+
+      .rank-bottom-6 {
+        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+      }
+
+      .rank-bottom-7 {
+        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+      }
+
+      .rank-bottom-8 {
+        background: linear-gradient(90deg, #322707 0%, #00fcff 100%);
+      }
+
+      .rank-bottom-9 {
+        background: linear-gradient(90deg, #322707 0%, #22b5ff 100%);
+      }
+    }
+
+    .rank-top-0 {
+      background-image: url("../../../assets/screen/traffic/rank-top-0.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+
+      .value {
+        color: #fcc105;
+      }
+    }
+
+    .rank-top-1 {
+      background-image: url("../../../assets/screen/traffic/rank-top-1.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+
+      .value {
+        color: #00fffc;
+      }
+    }
+
+    .rank-top-2 {
+      background-image: url("../../../assets/screen/traffic/rank-top-2.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+
+      .value {
+        color: #6ac2ff;
+      }
+    }
+
+    .rank-top-3 {
+      background-image: url("../../../assets/screen/traffic/rank-top-3.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+    }
+
+    .rank-top-4 {
+      background-image: url("../../../assets/screen/traffic/rank-top-4.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+    }
+
+    .rank-top-5 {
+      background-image: url("../../../assets/screen/traffic/rank-top-5.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+    }
+
+    .rank-top-6 {
+      background-image: url("../../../assets/screen/traffic/rank-top-6.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+    }
+
+    .rank-top-7 {
+      background-image: url("../../../assets/screen/traffic/rank-top-7.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+    }
+
+    .rank-top-8 {
+      background-image: url("../../../assets/screen/traffic/rank-top-8.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+    }
+
+    .rank-top-9 {
+      background-image: url("../../../assets/screen/traffic/rank-top-9.png");
+      background-repeat: no-repeat;
+      background-position: 2% 50%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,125 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-21 09:59:32
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-22 09:29:30
+ * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
+ * @Description: 交安事件大屏-交安事件
+-->
+
+<template>
+  <div class="content">
+    <div class="traffic-left"><span>87</span></div>
+    <div class="traffic-right">
+      <div class="right-sum"><span>261</span>个</div>
+      <div class="right-rate"><span> 37 </span>%</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TrafficSafety",
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .traffic-left {
+    width: 45%;
+    height: 100%;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 1.5rem;
+    font-size: 2rem;
+    background-image: url("../../../assets/screen/traffic/traffic-left.png");
+    background-repeat: no-repeat;
+    background-size: 85%;
+    background-position: 100% 60%;
+
+    span {
+      font-family: "DouYu";
+      background: linear-gradient(
+        to bottom,
+        #ffffff,
+        #2773d0
+      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+      background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
+  }
+
+  .traffic-right {
+    width: 55%;
+    height: 100%;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #ffffff;
+
+    .right-sum {
+      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-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,
+          #21f1e1
+        ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
+        background-clip: text; /*将设置的背景颜色限制在文字中*/
+        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+      }
+    }
+
+    .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-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; /*给文字设置成透明*/
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,316 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-21 10:06:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-22 09:27:49
+ * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
+ * @Description: 交安事件大屏-交安事件统计
+-->
+<template>
+  <div class="content">
+    <div class="statistic-select">
+      <el-select
+        :popper-append-to-body="false"
+        v-model="itemSelect"
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in currentList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+    <div ref="statisticChart" class="statistic-chart"></div>
+    <div class="statistic-lenged">
+      <div
+        class="lenged-item"
+        v-for="(item, index) in echartList"
+        :key="`static-${index}`"
+      >
+        <div class="index" :style="{ backgroundColor: colorList[index] }"></div>
+        <div class="name">{{ item.name }}</div>
+        <div class="rate">{{ item.rate }}</div>
+        <div class="value">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script>
+import * as echarts from "echarts";
+export default {
+  name: "TrafficStatistic",
+  data() {
+    return {
+      // 下拉数据绑定
+      itemSelect: "1",
+      //   下拉框数据
+      currentList: [
+        {
+          label: "分公司",
+          value: "1",
+        },
+        {
+          label: "分公司2",
+          value: "2",
+        },
+        {
+          label: "分公3",
+          value: "3",
+        },
+        {
+          label: "分公司4",
+          value: "4",
+        },
+        {
+          label: "分公司5",
+          value: "5",
+        },
+      ],
+      // 取色盘
+      colorList: [
+        "#18F7FF",
+        "#6FC36F",
+        "#4C83FF",
+        "#FFEA68",
+        "#FF8F5F",
+        "#FC5976",
+        "#AE74F3",
+        "#4C21D5",
+        "#6669DB",
+      ],
+      echartList: [
+        {
+          value: 335,
+          name: "脱岗",
+          rate: "110%",
+        },
+        {
+          value: 234,
+          name: "在岗",
+          rate: "110%",
+        },
+        {
+          value: 335,
+          name: "比骚大苏打是",
+          rate: "110%",
+        },
+        {
+          value: 234,
+          name: "发士大夫",
+          rate: "110%",
+        },
+        {
+          value: 335,
+          name: "的风格",
+          rate: "110%",
+        },
+        {
+          value: 234,
+          name: "返回",
+          rate: "110%",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getChartData();
+  },
+  methods: {
+    /* 获取echart图数据 */
+    getChartData() {
+      this.$nextTick(() => {
+        this.drawChart();
+      });
+    },
+    /* 绘制echart图 */
+    drawChart() {
+      const echart = echarts.init(this.$refs.statisticChart);
+      echart.setOption({
+        color: this.colorList,
+        tooltip: {
+          confine: true,
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            fontSize: 12,
+            color: "#808C9F",
+          },
+        },
+        grid: {
+          top: "0%",
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        legend: {
+          show: false,
+          orient: "horizontal",
+          // itemWidth: 16,
+          itemHeight: 16,
+          icon: "circle",
+          right: 40,
+          bottom: "0%",
+          textStyle: {
+            color: "rgba(0,0,0,0.65)",
+          },
+          height: 10,
+          formatter: (name) => {
+            const value = this.echartList.find(
+              (item) => item.name === name
+            ).value;
+            return `${name}：${value} 人`;
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["45%", "60%"],
+            center: ["50%", "50%"],
+            label: {
+              // 鼠标悬浮具体数据显示
+              show: false,
+              position: "center",
+              formatter: (params) => {
+                return `{a|${params.percent.toFixed()}%}\n{b|${params.name}}`;
+              },
+              rich: {
+                a: {
+                  fontFamily:"DouYu",
+                  fontSize: 28,
+                  color: "rgba(255, 183, 89, 0.8)",
+                },
+                b: {
+                  fontFamily:"DinBm",
+                  fontSize: 12,
+                  color: "#ffffff",
+                },
+              },
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20,
+                fontWeight: "bold",
+              },
+            },
+            data: this.echartList,
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        echart.resize();
+      });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+
+  .statistic-select {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    top: 0.2rem;
+
+    ::v-deep .el-select {
+      width: 6.5rem;
+
+      .el-input .el-select__caret {
+        line-height: 1.5rem;
+      }
+
+      .el-input--medium .el-input__inner {
+        height: 1.5rem;
+        background-color: transparent;
+        color: #89c5e8;
+        border-color: #6991cd;
+      }
+
+      .el-select-dropdown {
+        background-color: #102649;
+        border-color: #08204f;
+        .el-scrollbar {
+          .el-select-dropdown__wrap {
+            .el-scrollbar__view {
+              .el-select-dropdown__item:hover {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.selected {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.hover {
+                background-color: #2b4c7e;
+              }
+            }
+
+            .el-select-dropdown__list {
+              background-color: #102649;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .statistic-chart {
+    width: 50%;
+    height: 100%;
+    z-index: 0;
+    background-image: url("../../../assets/screen/traffic/statistic-chart.png");
+    background-repeat: no-repeat;
+    background-position: 100%;
+    background-size: 100%;
+  }
+
+  .statistic-lenged {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    z-index: 0;
+
+    .lenged-item {
+      width: 100%;
+      height: 1rem;
+      margin: 0.1rem 0;
+      display: flex;
+      align-items: center;
+      color: #808c9f;
+      font-size: 0.7rem;
+
+      .index {
+        width: 0.8rem;
+        height: 0.5rem;
+        margin-right: 0.5rem;
+      }
+
+      .name {
+        width: 5rem;
+      }
+
+      .rate {
+        font-size: 0.8rem;
+        width: 2.5rem;
+      }
+
+      .value {
+        font-size: 0.8rem;
+        width: 3rem;
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,413 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-21 10:03:08
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-21 15:59:07
+ * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
+ * @Description: 交安事件大屏-交安事件趋势
+-->
+
+<template>
+  <div class="content">
+    <div class="traffic-select">
+      <el-select
+        :popper-append-to-body="false"
+        v-model="itemSelect"
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in trafficList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+    <div ref="trafficChart" class="traffic-echart"></div>
+  </div>
+</template>
+  
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "TrafficTrend",
+  data() {
+    return {
+      // 下拉框选中绑定
+      itemSelect: "1",
+      // 下拉框数据
+      trafficList: [
+        {
+          label: "分公司",
+          value: "1",
+        },
+        {
+          label: "分公司2",
+          value: "2",
+        },
+        {
+          label: "分公3",
+          value: "3",
+        },
+        {
+          label: "分公司4",
+          value: "4",
+        },
+        {
+          label: "分公司5",
+          value: "5",
+        },
+      ],
+    };
+  },
+  created() {
+    this.getChartData();
+  },
+  methods: {
+    /* 获取柱状图数据 */
+    getChartData() {
+      this.$nextTick(() => {
+        this.drawChart();
+      });
+    },
+    /* 绘制echart */
+    drawChart() {
+      const chart = echarts.init(this.$refs.trafficChart);
+      chart.setOption({
+        // backgroundColor: "#041139",
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            fontSize: 12,
+            color: "#808C9F",
+          },
+        },
+        legend: {
+          show: false,
+        },
+        grid: {
+          top: "20%",
+          left: "10%",
+          right: 0,
+          bottom: "20%",
+        },
+        xAxis: [
+          {
+            data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
+            axisLabel: {
+              textStyle: {
+                color: "#808C9F",
+                fontSize: 12,
+              },
+              interval: 0,
+            },
+            axisLine: {
+              show: false, //不显示x轴
+              lineStyle: {
+                color: "rgba(53,65,95,1)",
+              },
+            },
+            axisTick: {
+              show: false, //不显示刻度
+            },
+            boundaryGap: true,
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "数量",
+            nameTextStyle: {
+              color: "#C7DAF2",
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false, //不显示x轴
+              lineStyle: {
+                color: "rgba(53,65,95,1)",
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#808C9F",
+                fontSize: 12,
+              },
+            },
+          },
+        ],
+        series: [
+          // 柱体
+          {
+            name: "人数",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              borderColor: "#08B4A6",
+              borderWidth: 1,
+            },
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(105,160,231,0.1)",
+            },
+            // itemStyle: {
+
+            // },
+            label: {
+              show: false, //每条柱状图是否显示数字
+              formatter: "{c}",
+              position: "top",
+              color: "#fff",
+              fontSize: 14,
+            },
+            data: [
+              {
+                value: 15,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 25,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#033E43",
+                      },
+                      {
+                        offset: 1,
+                        color: "#00FFEA",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 35,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 45,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#033E43",
+                      },
+                      {
+                        offset: 1,
+                        color: "#00FFEA",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 55,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 65,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#033E43",
+                      },
+                      {
+                        offset: 1,
+                        color: "#00FFEA",
+                      },
+                    ],
+                  },
+                },
+              },
+              {
+                value: 75,
+                itemStyle: {
+                  color: {
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    type: "linear",
+                    global: false,
+                    colorStops: [
+                      {
+                        //第一节下面
+                        offset: 0,
+                        color: "#034299",
+                      },
+                      {
+                        offset: 1,
+                        color: "#35F0FF",
+                      },
+                    ],
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+    },
+  },
+};
+</script>
+  
+  <style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .traffic-select {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    top: 0.2rem;
+
+    ::v-deep .el-select {
+      width: 6.5rem;
+
+      .el-input .el-select__caret {
+        line-height: 1.5rem;
+      }
+
+      .el-input--medium .el-input__inner {
+        height: 1.5rem;
+        background-color: transparent;
+        color: #89c5e8;
+        border-color: #6991cd;
+      }
+
+      .el-select-dropdown {
+        background-color: #102649;
+        border-color: #08204f;
+        .el-scrollbar {
+          .el-select-dropdown__wrap {
+            .el-scrollbar__view {
+              .el-select-dropdown__item:hover {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.selected {
+                background-color: #2b4c7e;
+              }
+
+              .el-select-dropdown__item.hover {
+                background-color: #2b4c7e;
+              }
+            }
+
+            .el-select-dropdown__list {
+              background-color: #102649;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .traffic-echart {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+</style>