提交最新监控前端界页

ruoyi-ui/package.json

@@ -81,6 +81,7 @@
     "sortable.js": "^0.3.0",
     "sortablejs": "^1.10.2",
     "swiper": "^5.4.5",
+    "uuid": "^9.0.1",
     "video.js": "^5.6.0",
     "videojs-contrib-hls": "^5.15.0",
     "vue": "2.6.12",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js

@@ -1,3 +1,4 @@
+import * as echarts from "echarts";
 let data = [{
     average:30,
     typeName:'行人',
@@ -97,11 +98,31 @@ let data = [{
        icon: "circle", //改变legend小图标形状
        itemGap: 20, // 设置legend的间距
        itemWidth: 12, // 设置宽度
-       itemHeight: 15, // 设置高度
+       itemHeight: 12, // 设置高度
+       itemStyle:{
+       
+       },
        textStyle: {
           right: -19,
           fontSize: 50,
           color: "#fff",
+          backgroundColor:new echarts.graphic.LinearGradient(
+            0,
+            0,
+            1,
+            0,
+            [
+              {
+                offset: 0,
+                color: "#5CC5FF55", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#5CC5FF00", // 100% 处的颜色
+              },
+            ],
+            false
+          ),
            rich:{
               a:{
                   fontSize: 12,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

@@ -95,34 +95,52 @@
       area: '济南',
       dataList:[
         {
-          title:"大学城收费站"
+          title:"殷家林枢纽"
         },
         {
-          title:"长清收费站"
+          title:"大学城立交"
         },
         {
-          title:"孝里收费站"
+          title:"长清立交"
         },
         {
-          title:"平阴北收费站"
+          title:"松竹枢纽"
         },
         {
-          title:"平阴收费站"
+          title:"孝里立交"
         },
         {
-          title:"平阴南收费站"
+          title:"平阴立交"
         },
         {
-          title:"东平收费站"
+          title:"孔村枢纽"
         },
         {
-          title:"梁山东收费站"
+          title:"平阴南立交"
         },
         {
-          title:"梁山收费站"
+          title:"魏雪枢纽"
         },
         {
-          title:"嘉祥西收费站"
+          title:"东平立交"
+        },
+        {
+          title:"东平湖枢纽"
+        },
+        {
+          title:"韩岗立交"
+        },
+        {
+          title:"梁山立交"
+        },
+        {
+          title:"鄄郓枢纽"
+        },
+        {
+          title:"嘉祥西立交"
+        },
+        {
+          title:"王官屯枢纽"
         }
       ],
       quarter:"",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/progressBar.vue

@@ -68,7 +68,7 @@ import { number } from 'echarts';
             display: inline-flex;
             left:0px;
             top:-5px;
-            width:75px !important;
+            width:45px !important;
             height:35px !important;
             background-color: transparent;
             cursor: pointer;
@@ -80,7 +80,7 @@ import { number } from 'echarts';
             display: inline-flex;
             left:0px;
             top:8px;
-            width:75px !important;
+            width:45px !important;
             height:3px !important;
             background-color: #C7C7C7;
         }
@@ -90,7 +90,7 @@ import { number } from 'echarts';
             display: inline-flex;
             right:0px;
             top:-5px;
-            width:75px;
+            width:45px;
             height:35px;
             background-color: transparent;
             cursor: pointer;
@@ -102,13 +102,13 @@ import { number } from 'echarts';
             display: inline-flex;
             left:0px;
             top:8px;
-            width:75px !important;
+            width:45px !important;
             height:3px !important;
             background-color: #C7C7C7;
         }
 
         .item.action .after::after {
-            background-color: #90FFEC ;
+            background-color: #72FDC9 ;
         }
 
         .item.action.Aafter  .after::after{
@@ -116,38 +116,38 @@ import { number } from 'echarts';
         }
 
        > .item.action.Aafter .before::after {
-            background-color: #90FFEC ;
+            background-color: #72FDC9 ;
         }
 
         > .item.action.Abefore .after::after {
-            background-color: #90FFEC ;
+            background-color: #72FDC9 ;
         }
 
         > .bef::before {
-            background-color: #90FFEC !important;
+            background-color: #72FDC9 !important;
         }
 
         > .aft::after {
-            background-color: #90FFEC !important;
+            background-color: #72FDC9 !important;
         }
 
         > .item.action span {
-            background-color: #90FFEC ;
+            background-color: #72FDC9 ;
             cursor: pointer;
         }
 
         > .item.action span::after {
-            border-color: #90FFEC ;
+            border-color: #72FDC9 ;
         }
 
         > .action div {
-            color:#90FFEC !important;
+            color:#72FDC9 !important;
         }
         
 
         >.item {
             position: relative;
-            width:300px;
+            width: 180px;
             height:35px;
             display: inline-flex;
             flex-direction: column;
@@ -162,7 +162,7 @@ import { number } from 'echarts';
                 background: #C7C7C7;
                 border-radius: 50%;
                 opacity: 1;
-                left:85px;
+                left:53px;
             }
 
             >div {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/sortFaceForecast/index.vue

@@ -576,7 +576,7 @@
                 border-radius:7px;
                 > div {
                   display: inline-flex;
-                  width:100%;
+                  width:auto;
                   height:21px;
                   margin:9px 29px;
 
@@ -586,7 +586,7 @@
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 400;
                     color: #37E7FF;
-                    width:108px;
+                    width:84px;
                   }
 
                   >.text {

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/assets/charts.js

@@ -0,0 +1,148 @@
+import * as echarts from "echarts";
+var options = {
+
+   color: ["#5090FF", "#01B3E4"],
+   grid: {
+      left: "2%",
+      right: "5%",
+      bottom: "10%",
+      top: "10%",
+      containLabel: true,
+   },
+   legend: {
+      icon: 'rect',
+      top: '0%',
+      right: '5%',
+      data: ['实时数据'],
+      itemWidth:18,
+      itemHeight: 5,
+      itemGap: 30,
+      itemStyle:{
+         color:"#FFD15C",
+      },
+      textStyle: {
+        fontSize: 12,
+        color: '#fff',
+        padding: [0, 0, 0, 10],
+      },
+   },
+   xAxis: {
+      type: "category",
+      axisLine: {
+         lineStyle: {
+            color: "#BDD8FB",
+            fontSize: 12,
+         },
+      },
+      axisLabel: {
+         // interval:0,
+         color: "#BDD8FB",
+         fontSize: 12,
+      },
+      axisTick: {
+         show: false,
+      },
+      data: [
+         "00:00",
+         "01:00",
+         "02:00",
+         "03:00",
+         "04:00",
+         "05:00",
+         "06:00",
+         "07:00",
+         "08:00",
+         "09:00",
+         "10:00",
+         "11:00",
+         "12:00",
+         "13:00",
+         "14:00",
+         "15:00",
+         "16:00",
+         "17:00",
+         "18:00",
+         "19:00",
+         "20:00",
+         "21:00",
+         "22:00",
+         "23:00",
+      ],
+   },
+   yAxis: {
+      type: "value",
+      min: 0,
+      max:40,
+      minInterval: 1,
+      nameTextStyle: {
+         fontSize: 12,
+         color: "#BDD8FB",
+         align: "center",
+      },
+      splitLine: {
+         lineStyle: {
+            color: "rgba(255, 255, 255, 0.15)",
+            // type: 'dashed', // dotted 虚线
+         },
+      },
+      splitArea: { show: false },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false,
+      },
+      axisLabel: {
+         fontSize: 12,
+         fontFamily: "Bebas",
+         color: "#BDD8FB",
+      },
+   },
+   series: [
+      {
+         type: "line",
+         // symbol: "none",
+         showSymbol: false,
+         smooth: true, // 是否曲线
+         name: "实时数据", // 图例对应类别
+         data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
+         lineStyle :{
+            color:"#FFD15C"
+         },
+         areaStyle: {
+            // 区域颜色
+            // color: new graphic.LinearGradient(0, 0, 0, 1, [
+            // 	{
+            // 		offset: 0,
+            // 		color: "#5090FF",
+            // 	},
+            // 	{
+            // 		offset: 1,
+            // 		color: "#1057E5",
+            // 	},
+            // ]),
+            color: {
+               type: 'linear',
+               x: 0,  //右
+               y: 0,  //下
+               x2: 0,  //左
+               y2: 1,  //上
+               colorStops: [
+                  {
+                     offset: 0.1,
+                     color: '#FFD15C99' // 0% 处的颜色
+                  },
+                  {
+                     offset: 1,
+                     opacity:0.01,
+                     color: '#FFD15C01' // 100% 处的颜色
+                  }
+               ]
+            },
+         },
+      },
+     
+   ],
+};
+
+export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/TemperatureTrend/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="require('../../../../../widgets/title/assets/title_w2.png')"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="temperatureTrend"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  
+  import WgtTitle from '../../../../../widgets/title'
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'temperatureTrend',
+    components: {
+      WgtTitle
+    },
+    data() {
+      return {
+        myChart:null,
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      reiszeChart(){
+        this.$nextTick(() => {
+          if ( this.myChart ) {
+            this.myChart.resize();
+          }
+        });
+      }
+    },
+    update(){
+     
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.myChart = echarts.init(document.getElementById('temperatureTrend'));
+          this.myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:260px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+      opacity: 0.8;
+      border: 1px solid;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:200px;
+        width: 100%;
+      }
+  
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/assets/charts.js

@@ -0,0 +1,154 @@
+import * as echarts from "echarts";
+var options = {
+
+   color: ["#5090FF", "#01B3E4"],
+   tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+         color: "#FFF",
+      },
+   },
+   grid: {
+      left: "2%",
+      right: "5%",
+      bottom: "10%",
+      top: "10%",
+      containLabel: true,
+   },
+   legend: {
+      icon: 'rect',
+      top: '0%',
+      right: '5%',
+      data: ['实时数据'],
+      itemWidth:18,
+      itemHeight: 5,
+      itemGap: 30,
+      textStyle: {
+        fontSize: 12,
+        color: '#C9D2FA',
+        padding: [0, 0, 0, 10],
+      },
+   },
+   xAxis: {
+      type: "category",
+      axisLine: {
+         lineStyle: {
+            color: "#BDD8FB",
+            fontSize: 12,
+         },
+      },
+      axisLabel: {
+         // interval:0,
+         color: "#BDD8FB",
+         fontSize: 12,
+      },
+      axisTick: {
+         show: false,
+      },
+      data: [
+         "00:00",
+         "01:00",
+         "02:00",
+         "03:00",
+         "04:00",
+         "05:00",
+         "06:00",
+         "07:00",
+         "08:00",
+         "09:00",
+         "10:00",
+         "11:00",
+         "12:00",
+         "13:00",
+         "14:00",
+         "15:00",
+         "16:00",
+         "17:00",
+         "18:00",
+         "19:00",
+         "20:00",
+         "21:00",
+         "22:00",
+         "23:00",
+      ],
+   },
+   yAxis: {
+      type: "value",
+      min: 0,
+      max:40,
+      minInterval: 5,
+      splitNumber:5,
+      nameTextStyle: {
+         fontSize: 12,
+         color: "#BDD8FB",
+         align: "center",
+      },
+      splitLine: {
+         lineStyle: {
+            color: "rgba(255, 255, 255, 0.15)",
+            // type: 'dashed', // dotted 虚线
+         },
+      },
+      splitArea: { show: false },
+      axisLine: {
+         show: false,
+      },
+      axisTick: {
+         show: false,
+      },
+      axisLabel: {
+         fontSize: 12,
+         fontFamily: "Bebas",
+         color: "#BDD8FB",
+      },
+   },
+   series: [
+      {
+         type: "line",
+         // symbol: "none",
+         showSymbol: false,
+         smooth: true, // 是否曲线
+         name: "实时数据", // 图例对应类别
+         data: [12, 12, 23, 23, 30, 12, 26,28, 31, 23, 25, 12, 18, 18,18, 18, 23, 21, 20, 20, 20,20, 20, 22, 22, 12, 12, 12], // 纵坐标数据
+         lineStyle :{
+            color:"#0783FA"
+         },
+         areaStyle: {
+            // 区域颜色
+            // color: new graphic.LinearGradient(0, 0, 0, 1, [
+            // 	{
+            // 		offset: 0,
+            // 		color: "#5090FF",
+            // 	},
+            // 	{
+            // 		offset: 1,
+            // 		color: "#1057E5",
+            // 	},
+            // ]),
+            color: {
+               type: 'linear',
+               x: 0,  //右
+               y: 0,  //下
+               x2: 0,  //左
+               y2: 1,  //上
+               colorStops: [
+                  {
+                     offset: 0.1,
+                     color: '#0783FA99' // 0% 处的颜色
+                  },
+                  {
+                     offset: 1,
+                     opacity:0.01,
+                     color: '#0783FA01' // 100% 处的颜色
+                  }
+               ]
+            },
+         },
+      },
+     
+   ],
+};
+
+export default options;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/visibilityTrends/index.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class='congestion'>
+      <WgtTitle :title="require('../../../../../widgets/title/assets/title_w1.png')"></WgtTitle>
+      <div class="board">
+        <div class="charts" id="VisibilityTrends"></div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  
+  import WgtTitle from '../../../../../widgets/title'
+  import * as echarts from "echarts";
+  import chartsStatistics from "./assets/charts";
+  export default {
+    name: 'VisibilityTrends',
+    components: {
+      WgtTitle
+    },
+    data() {
+      return {
+        myChart:null,
+      }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      reiszeChart(){
+    
+        this.$nextTick(() => {
+          if ( this.myChart ) {
+            this.myChart.resize();
+          }
+        });
+      }
+    },
+    update(){
+      
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.myChart = echarts.init(document.getElementById('VisibilityTrends'));
+          this.myChart.setOption(chartsStatistics);
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    .board{
+      height:260px;
+      width: 100%;
+      padding: 0px 20px;
+      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+      border-radius: 5px 5px 5px 5px;
+      opacity: 0.8;
+      border: 1px solid;
+      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+     
+    }
+  }
+      .charts {
+        height:200px;
+        width: 100%;
+      }
+  
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/components/weaterData/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class='congestion'>
-      <WgtTitle :title="require('../../../../../widgets/title/assets/title_w01.png')"></WgtTitle>
+      <WgtTitle :title="require('../../../../../widgets/title/assets/title_w.png')"></WgtTitle>
       <div class="board">
         <div class="showRoad" >
             <div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" >
@@ -23,6 +23,7 @@
     },
     data() {
       return {
+        myChart:null,
         dataList:[
             {
                 text:"天气状态：",
@@ -65,24 +66,16 @@
                 value:"2610.00m",
                 class:"km"
             }, {
-                text:"综合危险等级：",
+                text:"能见度：",
-                value:"0级",
+                value:"0.00m",
-                class:"km"
-            }, {
-                text:"降水量值：",
-                value:"0mm",
-                class:"km"
-            }, {
-                text:"路面水厚：",
-                value:"0mm",
                 class:"km"
             }, {
-                text:"降水量值：",
+                text:"能见度：",
-                value:"0mm",
+                value:"0.00m",
                 class:"km"
             }, {
-                text:"路面水厚：",
+                text:"能见度：",
-                value:"0mm",
+                value:"0.00m",
                 class:"km"
             }
         ]
@@ -109,7 +102,7 @@
   .congestion {
     width: 100%;
     .board{
-      height:200px;
+      height:260px;
       width: 100%;
       padding: 0px 20px;
       background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
@@ -119,13 +112,14 @@
       border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
       display: flex;
       justify-content: space-between;
-      align-items: center;
+      align-items: flex-start;
       flex-direction: row;
+      overflow: auto;
 
       .showRoad {
         display: inline-flex;
         width:100%;
-        height:100%;
+        height:35px;
         flex-direction: row;
         flex-wrap: wrap;
 
@@ -133,11 +127,11 @@
             display: inline-flex;
             width:50%;
             height:23px;
-            margin-top:16px;
+            margin-top:12px;
             flex-direction: row;
 
             > span.label {
-               width:105px;
+               width:50%;
                height:25px;
                font-size: 12px;
                 font-family: PingFang SC, PingFang SC;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherInfoQuery/index.vue

@@ -6,6 +6,8 @@
          </div>
          <div class="queryCharts" >
             <WeateData class="charts-l"  />
+            <TemperatureTrend ref="temper" class="charts-ms"  />
+            <VisibilityTrends ref="visibility" class="charts-ms"  />
          </div>
        </div>
     </div>
@@ -14,12 +16,16 @@
   <script>
   import Card from "@screen/components/Card1/index.vue"
   import WeateData from './components/weaterData'
+  import TemperatureTrend from './components/TemperatureTrend';
+  import VisibilityTrends from './components/visibilityTrends';
 
   export default {
     name: 'WeatherInfoQuery',
     components: {
       Card,
       WeateData,
+      TemperatureTrend,
+      VisibilityTrends,
     },
     data() {
       return {
@@ -40,6 +46,11 @@
       selectItem(index){
         this.selectIndex = index;
       },
+      resizeChart(){
+      //  console.log(this.$refs.temper);
+        this.$refs.temper.reiszeChart();
+        this.$refs.visibility.reiszeChart();
+      }
     },
     mounted() {
    
@@ -76,6 +87,11 @@
         .charts-l {
             width:30%;
         }
+
+        .charts-ms {
+          width:40%;
+          margin-left:20px;
+        }
       }
 
       .queryList {
@@ -88,11 +104,19 @@
         flex-wrap: wrap;
 
         > div {
-            width:calc(20% - 20px);
+            width:calc(100%/5  - 18px);
             height:203px;
             margin-top:10px;
             margin-left:20px;
         }
+
+        > div:nth-child(5n + 1) {
+            margin-left:0px;
+        }
+
+        > div:nth-child(5n) {
+            margin-right:0px;
+        }
       }
 
     }

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue

@@ -0,0 +1,370 @@
+<template>
+    <div class='congestion'>
+        <WgtTitle :title="require('../../../../../widgets/title/assets/title_w02.png')"></WgtTitle>
+      <div class="board">
+         <div class="weaterMain" >
+            <div class="weaterTitle" >
+                <span class="text">当前气象预警信息数：</span>
+                <span class="num" >113</span>
+            </div>
+            <div class="buttons" >
+                <div class="allSel" >全部</div>
+                <div class="redSel" >红色</div>
+                <div class="yelSel" >黄色</div>
+                <div class="bluSel" >蓝色</div>
+                <div class="orgSel" >橙色</div>
+            </div>
+         </div>
+         <div class="warningList" >
+            <div class="itemWarning"   v-for="(item,i) in warnings">
+                <div class="left-w" >
+                    <div class="left-row" >
+                        <div class="label" >
+                          预警类型：
+                        </div>
+                        <div class="value" >
+                            {{ item.class }}
+                        </div>
+                    </div>
+                    <div class="left-row" >
+                        <div class="label" >
+                            预警等级：
+                        </div>
+                        <div :class="'value '+item.type" >
+                            {{ item.lay }}
+                        </div>
+                    </div>
+                    <div class="left-row" >
+                        <div class="label" >
+                            预警范围：
+                        </div>
+                        <div class="value" >
+                            {{ item.scope }}
+                        </div>
+                    </div>
+                    <div class="left-row" >
+                        <div class="label" >
+                            预警发布时间：
+                        </div>
+                        <div class="value" >
+                            {{ item.dateTime }}
+                        </div>
+                    </div>  
+                </div>
+                <div class="right-w" >
+                    <div class="right-row" >
+                        预警内容:
+                    </div>
+                    <div class="right-text" >
+                        {{  item.text }}
+                    </div>
+                </div>
+            </div>
+         </div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import Card from "@screen/components/Card1/index.vue"
+  import WgtTitle from '../../../../../widgets/title'
+
+  export default {
+    name: 'infoWarning',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+          warnings:[
+            {
+                type:"org",
+                class:"道路结冰",
+                lay:"橙色",
+                scope:"K100+000",
+                dateTime:"2023-12-31 13:00:00",
+                text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
+            },
+            {
+                type:"org",
+                class:"道路结冰",
+                lay:"橙色",
+                scope:"K100+000",
+                dateTime:"2023-12-31 13:00:00",
+                text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
+            },
+            {
+                type:"org",
+                class:"道路结冰",
+                lay:"橙色",
+                scope:"K100+000",
+                dateTime:"2023-12-31 13:00:00",
+                text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
+            },
+            {
+                type:"org",
+                class:"道路结冰",
+                lay:"橙色",
+                scope:"K100+000",
+                dateTime:"2023-12-31 13:00:00",
+                text:"威海市文登区气象台2023年12月21日7时30分将道路结冰黄色预警信号升级为道路结冰橙色预警信号：受降雪和低温影响，我区全部乡镇和街道仍有对交通有较大影响的道路结冰和积雪。请注意防范道路结冰对交通运输、室外作业、农业生产等带来的不利影响。"
+            }
+          ]
+       }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      selectItem(index){
+        this.selectIndex = index;
+      },
+    },
+    mounted() {
+   
+      setTimeout(() => {
+        this.$nextTick(() => {
+         
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    display: inline-flex;
+    width: 100%;
+    height: 600px;
+    flex-direction: column;
+    width: 100%;
+    height:100%;
+
+    .board{
+      height: 690px;
+      width: 100%;
+      padding: 0px 0px;
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+      margin-top:20px;
+
+      .warningList {
+        display: inline-flex;
+        flex-direction: column;
+        width:100%;
+        height:calc(100% - 40px);
+
+        >div::after {
+            content: "";
+            top:0;
+            left:-3px;
+            position: absolute;
+             width:0;
+            height:0;
+            border-right:6px solid transparent;
+            border-left: 6px solid transparent;
+            border-bottom:6px solid rgba(55, 231, 255, 1);
+            transform: rotate(-45deg);
+        }
+
+        >div::before {
+            content: "";
+            bottom:0;
+            right:-3px;
+            position: absolute;
+             width:0;
+            height:0;
+            border-right:6px solid transparent;
+            border-left:6px solid transparent;
+            border-bottom:6px solid rgba(55, 231, 255, 1);
+            transform: rotate(135deg);
+        }
+
+        >div {
+            position: relative;
+            display: inline-flex;
+            width:100%;
+            height:138px;
+            background: #133242;
+            border-radius: 2px 2px 2px 2px;
+            opacity: 1;
+            border: 1px solid;
+            border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.2), rgba(55, 231, 255, 0)) 1 1;
+            margin-top:20px;
+            padding:23px 29px;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #37E7FF;  
+
+            >.left-w {
+                display: inline-flex;
+                width:40%;
+                height:100%;
+                flex-direction: column;
+
+                .left-row {
+                    margin:2px;
+                    display: inline-flex;
+                    width:100%;
+                    height:30px;
+                    flex-direction: row;
+
+                    >.value {
+                        color:#fff;
+                    }
+
+                    .org {
+                            font-size: 12px !important;
+                            font-family: PangMenZhengDao, PangMenZhengDao;
+                            font-weight: 400;
+                            color: #F4A125
+                        }
+
+                }
+            }
+
+            >.right-w {
+                margin-left:30px;
+                display: inline-flex;
+                width:100%;
+                height:100%;
+                flex-direction: column;
+
+                .right-row {
+                    margin-bottom: 10px;
+                }
+                
+                .right-text {
+                    color:#fff;
+                }
+            }
+
+        }
+      }
+
+      .weaterMain {
+        display: inline-flex;
+        flex-direction: row;
+        width:100%;
+        height: 40px;
+
+       
+        .buttons {
+            width:100%;
+            height:38px;
+            margin-left:20px;
+
+            >div {
+                display: inline-flex;
+                width:10%;
+                height:35px;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 800;
+                color: #FFFFFF;
+                z-index: 9;
+            }
+
+            >div::after {
+                content: "";
+                position: absolute;
+                display: inline-flex;
+                width: 55px;
+                height: 36px;
+                background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%);
+                border-radius: 50%;
+                opacity: 1;  
+                z-index:-1;
+                cursor: pointer;
+            }
+
+            .redSel::after {
+                background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%);
+            }
+
+            .yelSel::after {
+                background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%);
+            }
+
+            .bluSel::after {
+                background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%);
+            }
+
+            .orgSel::after{
+                background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%);
+            }
+        }
+
+        .weaterTitle::after {
+            content: "";
+            position: absolute;
+            top:0px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+        .weaterTitle::before {
+            content: "";
+            position: absolute;
+            top:38px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+
+        .weaterTitle {
+            position: relative;
+            display: inline-flex;
+            width: 287px;
+            height: 38px;
+            background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+            justify-content: center;
+            align-items: center;
+            margin-left:30px;
+            ;
+            >span.text {
+                display: inline-flex;
+                font-size: 16px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #FFFFFF; 
+            }
+
+          
+            .num {
+                display: inline-flex;
+                justify-content: center;
+            align-items: center;
+            font-size: 16px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #D9001B;
+            }
+        }
+      }
+
+    }
+  }
+      .charts {
+        height:180px;
+        width: 100%;
+      }
+  
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infowWarningList/index.vue

@@ -0,0 +1,382 @@
+<template>
+    <div class='congestion'>
+        <WgtTitle :title="require('../../../../../widgets/title/assets/title_w02.png')"></WgtTitle>
+      <div class="board">
+         <div class="weaterMain" >
+            <el-table
+                :border="false"
+                :data="tableData"
+                height="670"
+                style="width: 100%">
+                <el-table-column
+                prop="nem"
+                label=""
+                width="30">
+                </el-table-column>
+                <el-table-column
+                prop="address"
+                label="桩号范围"
+                width="230">
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                label="能见度"
+                class-name="showClass"
+                width="250">
+                <template slot-scope="scope">
+                    <span class="showClass">{{scope.row.name}}</span>
+                </template>
+                </el-table-column>
+                <el-table-column
+                prop="date"
+                label="发生时间"
+                width="230"
+                >
+                </el-table-column>
+            </el-table>
+            </div>
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import Card from "@screen/components/Card1/index.vue"
+  import WgtTitle from '../../../../../widgets/title'
+
+  export default {
+    name: 'infoWarning',
+    components: {
+        WgtTitle
+    },
+    data() {
+      return {
+        tableData: [{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },{
+          date: '2023-12-31 13:00:00',
+          name: '2640.78m',
+          address: 'K100+000-K110+000'
+        },
+        ]
+       }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      selectItem(index){
+        this.selectIndex = index;
+      },
+    },
+    mounted() {
+   
+      setTimeout(() => {
+        this.$nextTick(() => {
+         
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+
+    .showClass {
+        color:#00EBC1;
+    }
+
+  ::v-deep .el-table .cell {
+    padding-left:0px !important;
+  }
+
+  ::v-deep .el-table .el-table__header-wrapper th {
+    background-color: #064258 !important;
+    color:#00D1FF;
+    border-color: #064258 !important;
+    border:0px !important;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table {
+    border:0px !important;
+    background-color: transparent;
+    font-size:12px !important;
+  }
+
+  ::v-deep .el-table__body-wrapper {
+    background-color: #064258;
+    color: #fff;
+  }
+
+  ::v-deep .el-table tr:hover td {
+    background: #1b2528 !important;
+    color:#00D1FF;
+  }
+
+  ::v-deep .el-table tr:nth-child(odd) td{
+    background-color: #13272F ;
+    border:0px !important; 
+  }
+  ::v-deep .el-table tr:nth-child(even) td{
+    border:0px !important; 
+  }
+
+  ::v-deep .el-table tr {
+    background-color: #133242 !important;
+    border-collapse:0;
+    border:0px !important;
+    background-color: transparent !important;
+  }
+
+  .congestion {
+    display: inline-flex;
+    width: 100%;
+    height: 600px;
+    flex-direction: column;
+
+    .board{
+      height: 670px;
+      width: 100%;
+      padding: 0px 0px;
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+      margin-top:20px;
+
+  
+
+      .warningList {
+        display: inline-flex;
+        flex-direction: column;
+        width:100%;
+        height:calc(100% - 40px);
+
+        >div {
+            display: inline-flex;
+            width:100%;
+            height:138px;
+            background: #133242;
+            border-radius: 2px 2px 2px 2px;
+            opacity: 1;
+            border: 1px solid;
+            border-image: linear-gradient(360deg, rgba(55, 231, 255, 1), rgba(55, 231, 255, 0)) 1 1;
+            overflow: hidden;
+            margin-top:20px;
+            padding:23px 29px;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #37E7FF;  
+
+            >.left-w {
+                display: inline-flex;
+                width:40%;
+                height:100%;
+                flex-direction: column;
+
+                .left-row {
+                    margin:2px;
+                    display: inline-flex;
+                    width:100%;
+                    height:30px;
+                    flex-direction: row;
+
+                    >.value {
+                        color:#fff;
+                    }
+
+                    .org {
+                            font-size: 14px;
+                            font-family: PangMenZhengDao, PangMenZhengDao;
+                            font-weight: 400;
+                            color: #F4A125
+                        }
+
+                }
+            }
+
+            >.right-w {
+                margin-left:30px;
+                display: inline-flex;
+                width:100%;
+                height:100%;
+                flex-direction: column;
+
+                .right-row {
+                    margin-bottom: 10px;
+                }
+                
+                .right-text {
+                    color:#fff;
+                }
+            }
+
+        }
+      }
+
+      .weaterMain {
+        display: inline-flex;
+        flex-direction: row;
+        width:100%;
+        height: 40px;
+
+       
+        .buttons {
+            width:100%;
+            height:38px;
+            >div {
+                display: inline-flex;
+                width:10%;
+                height:35px;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 800;
+                color: #FFFFFF;
+                z-index: 9;
+            }
+
+            >div::after {
+                content: "";
+                position: absolute;
+                display: inline-flex;
+                width: 55px;
+                height: 36px;
+                background: linear-gradient(180deg, #6557D7 0%, rgba(101,87,216,0) 100%);
+                border-radius: 50%;
+                opacity: 1;  
+                z-index:-1;
+            }
+
+            .redSel::after {
+                background: linear-gradient(180deg, #E73A14 0%, rgba(240,92,9,0) 100%);
+            }
+
+            .yelSel::after {
+                background: linear-gradient(180deg, #FFFA79 0%, rgba(255,208,137,0) 100%);
+            }
+
+            .bluSel::after {
+                background: linear-gradient(180deg, #121ADE 0%, rgba(40,18,228,0) 100%);
+            }
+
+            .orgSel::after{
+                background: linear-gradient(180deg, #FFA623 0%, rgba(255,173,53,0) 100%);
+            }
+        }
+
+        .weaterTitle::after {
+            content: "";
+            position: absolute;
+            top:0px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+        .weaterTitle::before {
+            content: "";
+            position: absolute;
+            top:38px;
+            left:0px;
+            width:100%;
+            height:2px;
+            background: linear-gradient(90deg, rgba(189,255,246,0) 0%, #BDFFF6 52%, rgba(189,255,246,0) 100%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+        }
+
+        .weaterTitle {
+            position: relative;
+            display: inline-flex;
+            width: 277px;
+            height: 38px;
+            background: linear-gradient(269deg, rgba(55,231,255,0) 6%, rgba(55,231,255,0.6) 50%, rgba(55,231,255,0) 92%);
+            border-radius: 0px 0px 0px 0px;
+            opacity: 1;
+            justify-content: center;
+            align-items: center;
+
+            >span.text {
+                display: inline-flex;
+                font-size: 16px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #FFFFFF; 
+            }
+
+          
+            .num {
+                display: inline-flex;
+                justify-content: center;
+            align-items: center;
+                font-size: 22px;
+                font-family: PangMenZhengDao, PangMenZhengDao;
+                font-weight: 400;
+                color: #D9001B;
+            }
+        }
+      }
+
+    }
+  }
+      .charts {
+        height:180px;
+        width: 100%;
+      }
+  
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/index.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class='congestion'>
+      <div class="board">
+        <InfoWarning class="contion-l" />
+        <InfoWarningList class="contion-r" />
+       </div>
+    </div>
+  </template>
+  
+  <script>
+  import InfoWarning from './components/infoWarning/index.vue';
+  import InfoWarningList from './components/infowWarningList';
+
+  export default {
+    name: 'WeatherWarning',
+    components: {
+      InfoWarning,
+      InfoWarningList
+    },
+    data() {
+      return {
+        selectIndex:0,
+        data: Array.from({ length: 10 }).map(() => ({
+        source: "济菏运管中心",
+        location: "长清大学城收费站",
+        direction: "117.123456",
+        direction2: "37.12234",
+      })),
+       }
+    },
+  
+    created() {
+      
+    },
+    methods: {
+      selectItem(index){
+        this.selectIndex = index;
+      },
+    },
+    mounted() {
+   
+      setTimeout(() => {
+        this.$nextTick(() => {
+         
+        });
+      });
+    },
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .congestion {
+    width: 100%;
+    height:100%;
+
+    .board{
+      height: calc(100% - 235px);
+      width: 100%;
+      padding: 0px 0px;
+      border-radius: 5px 5px 5px 5px;
+      opacity: 1;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-direction: row;
+
+      .contion-l {
+        display: inline-flex;
+        width:60%;
+
+      }
+
+      .contion-r {
+        display: inline-flex;
+        width:40%;
+        margin-left:20px;
+      }
+
+      .queryCharts {
+        display: inline-flex;
+        width:100%;
+        height: 316px;
+
+        .charts-l {
+            width:30%;
+        }
+
+        .charts-ms {
+          width:40%;
+          margin-left:20px;
+        }
+      }
+
+      .queryList {
+        position: relative;
+        top:-10px;
+        display: inline-flex;
+        width:100%;
+        height:440px;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        > div {
+            width:calc(100%/5  - 22px);
+            height:203px;
+            margin-top:10px;
+            margin-left:20px;
+        }
+
+        > div:nth-child(5n + 1) {
+            margin-left:0px;
+        }
+      }
+
+    }
+  }
+      .charts {
+        height:180px;
+        width: 100%;
+      }
+  
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/index.vue

@@ -5,16 +5,18 @@
         <WeatherForecast class="content-l" />
       </section>
       <section class="foot">
-        <el-tabs class="footTabs" v-model="activeName" >
+        <el-tabs class="footTabs" v-model="activeName"  @tab-click="changeTabs">
             <el-tab-pane label="短临预报" name="first">
               <div class="foot-shot" >
                  <SortFaceForecast  />
               </div>
             </el-tab-pane>
             <el-tab-pane label="站点气象信息查询" name="second">
-              <WeatherInfoQuery  />
+              <WeatherInfoQuery  ref="infoQuery" />
+            </el-tab-pane>
+            <el-tab-pane label="气象预警" name="third">
+              <WeatherWarning />
             </el-tab-pane>
-            <el-tab-pane label="气象预警" name="third">角色管理</el-tab-pane>
         </el-tabs>
       </section>
     </div>
@@ -25,6 +27,7 @@
   import WeatherForecast from './components/weatherForecast';
   import SortFaceForecast from './components/sortFaceForecast';
   import WeatherInfoQuery from './components/weatherInfoQuery';
+  import WeatherWarning from './components/weatherWarning';
 
   export default {
     name: 'MeteorologyCheck',
@@ -32,13 +35,19 @@
         RoadNetwork,
         WeatherForecast,
         SortFaceForecast,
-        WeatherInfoQuery
+        WeatherInfoQuery,
+        WeatherWarning
     },
     data(){
         return {
             activeName:"first"
         }
     },
+    methods:{
+      changeTabs(){
+         this.$refs.infoQuery.resizeChart();
+      }
+    }
     
   }
   </script>
@@ -68,7 +77,7 @@
 
    .footTabs {
      display: inline;
-     width:100%;
+     width:99%;
 
    }
 

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/index.vue

@@ -60,6 +60,7 @@ export default {
     margin: auto;
     margin-top: 15px;
   }
+  
   .content {
     width: 98%;
     margin: auto;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/widgets/title/index.vue

@@ -42,6 +42,7 @@ export default {
 
     display: flex;
     align-items: center;
+    margin:0 !important;
 
     .imgLeft {
       height: 22px;