气象数据

ruoyi-ui/src/views/JiHeExpressway/components/Card1/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div @click="onClick">
     <BorderRadiusImage
       class="Card"
       borderRadius="2px"
@@ -27,6 +28,7 @@
       <span class="text">正常</span>
     </div> -->
     </BorderRadiusImage>
+  </div>
 </template>
 
 <script>
@@ -107,6 +109,10 @@ export default {
     getValue(key) {
       return pathGet(this.cardData, key) ?? "-";
     },
+
+    onClick() {
+      this.$emit("click", this.data);
+    },
   },
 };
 </script>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/dutyOfficer/components/ModifyDutyInformationTable.vue

@@ -393,7 +393,8 @@ export default {
 <style lang="scss" scoped>
 .ModifyDutyInformationTable {
   width: 947px;
-  height: 658px;
+  // height: 658px;
+  height: 570px;
   color: #fff;
   display: flex;
   flex-direction: column;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="事件详情" width="880px" top="15%">
+  <Dialog v-model="modelVisible" title="事件详情" width="890px" top="15%">
     <div
       class="EventDetail"
       :style="{

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js

@@ -58,7 +58,7 @@ var options = {
   grid: {
     top: "15%", //上边距
     right: "0", //右边距
-    left: "15px", //左边距
+    left: "30px", //左边距
     bottom: "0%", //下边距
     containLabel: true,
   },

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

@@ -108,10 +108,7 @@ var options = {
       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,
-      ], // 纵坐标数据
+      data: [], // 纵坐标数据
       lineStyle: {
         color: "#FFD15C",
       },

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

@@ -1,5 +1,5 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'气温变化趋势'"></WgtTitle>
     <div class="board">
       <div class="charts" id="temperatureTrend"></div>
@@ -8,24 +8,44 @@
 </template>
 
 <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
 import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
+import temperatureCharts from "./assets/charts";
+import {
+  getListLatest,
+  getDeviceNameListLatest,
+  getIdDevices,
+} from "@/api/perception/meteorologyCheck";
 export default {
-    name: 'temperatureTrend',
+  name: "temperatureTrend",
   components: {
-      WgtTitle
+    WgtTitle,
+  },
+  props: {
+    data: {
+      type: Array,
+    },
+  },
+  watch: {
+    data: {
+      handler(data) {
+        let newData = [];
+        data.forEach((item) => {
+          newData.push(item.avgVisibility);
+        });
+        temperatureCharts.series[0].data = newData;
+        this.myChart.setOption(temperatureCharts);
+      },
+      deep: true,
+    },
   },
   data() {
     return {
       myChart: null,
-      }
+    };
   },
 
-    created() {
-      
-    },
+  created() {},
   methods: {
     reiszeChart() {
       this.$nextTick(() => {
@@ -33,25 +53,26 @@
           this.myChart.resize();
         }
       });
-      }
     },
-    update(){
-     
   },
+  update() {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('temperatureTrend'));
-          this.myChart.setOption(chartsStatistics);
+        this.myChart = echarts.init(
+          document.getElementById("temperatureTrend")
+        );
+        this.myChart.setOption(temperatureCharts);
       });
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
-    display: flex; flex-direction: column;
+  display: flex;
+  flex-direction: column;
   .board {
     flex: 1;
     padding: 0px 20px;
@@ -59,17 +80,19 @@
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+    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

@@ -107,10 +107,7 @@ var options = {
       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,
-      ], // 纵坐标数据
+      data: [], // 纵坐标数据
       lineStyle: {
         color: "#0783FA",
       },

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

@@ -1,5 +1,5 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'能见度变化趋势'"></WgtTitle>
     <div class="board">
       <div class="charts" id="VisibilityTrends"></div>
@@ -8,51 +8,67 @@
 </template>
 
 <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
 import * as echarts from "echarts";
-  import chartsStatistics from "./assets/charts";
+import visibilityCharts from "./assets/charts";
 export default {
-    name: 'VisibilityTrends',
+  name: "VisibilityTrends",
   components: {
-      WgtTitle
+    WgtTitle,
+  },
+  props: {
+    data: {
+      type: Array,
+    },
+  },
+  watch: {
+    data: {
+      handler(data) {
+        let newData = [];
+        data.forEach((item) => {
+          newData.push(item.avgTemperature);
+        });
+        visibilityCharts.series[0].data = newData;
+        this.myChart.setOption(visibilityCharts);
+      },
+      deep: true,
+    },
   },
   data() {
     return {
       myChart: null,
-      }
+    };
   },
 
-    created() {
-      
-    },
+  created() {},
   methods: {
     reiszeChart() {
-    
       this.$nextTick(() => {
         if (this.myChart) {
           this.myChart.resize();
         }
       });
-      }
     },
-    update(){
-      
   },
+  update() {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('VisibilityTrends'));
-          this.myChart.setOption(chartsStatistics);
+        this.myChart = echarts.init(
+          document.getElementById("VisibilityTrends")
+        );
+        this.myChart.setOption(visibilityCharts);
       });
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
-  display: flex; flex-direction: column; align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   .board {
     flex: 1;
     padding: 0px 20px;
@@ -60,8 +76,14 @@
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex; flex-direction: column;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
+    display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: stretch;
   }
@@ -69,6 +91,4 @@
 .charts {
   height: 200px;
 }
-  
 </style>
-  

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

@@ -1,11 +1,67 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'气象监测数据'"></WgtTitle>
     <div class="board">
       <div class="showRoad">
-            <div :class="it.type?it.type+' item':'item'" v-for="(it,index) in dataList" >
-                <span class="label" >{{ it.text }}</span>
-                <span class="text" >{{ it.value }}</span>
+        <div class="item">
+          <span class="label">温度：</span>
+          <span class="text">{{
+            data.temperature ? data.temperature + "℃" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">湿度：</span>
+          <span class="text">{{
+            data.humidity ? data.humidity + "mm" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">风向：</span>
+          <span class="text">{{
+            data.windDirection ? data.windDirection + "°" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">风速：</span>
+          <span class="text">{{
+            data.windSpeed ? data.windSpeed + "级" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">能见度：</span>
+          <span class="text">{{
+            data.visibilityType ? data.visibilityType + "级" : "-"
+          }}</span>
+        </div>
+        <!-- <div class="item">
+          <span class="label">能见度类型：</span>
+          <span class="text">{{ data.visibilityType }}</span>
+        </div> -->
+        <!-- <div class="item">
+          <span class="label">降雨类型：</span>
+          <span class="text">{{
+            data.recipitationType ? data.recipitationType : "-"
+          }}</span>
+        </div> -->
+        <div class="item">
+          <span class="label">降雨量：</span>
+          <span class="text">{{
+            data.rainfall ? data.rainfall + "mm" : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label">路面温度：</span>
+          <span class="text">{{
+            data.remoteRoadSurfaceTemperature
+              ? data.remoteRoadSurfaceTemperature + "℃"
+              : "-"
+          }}</span>
+        </div>
+        <div class="item">
+          <span class="label"> 气压：</span>
+          <span class="text">{{
+            data.atmosphericPressure ? data.atmosphericPressure + "Pa" : "-"
+          }}</span>
         </div>
       </div>
     </div>
@@ -13,94 +69,47 @@
 </template>
 
 <script>
-  
-  import WgtTitle from '../../../../../widgets/title'
+import WgtTitle from "../../../../../widgets/title";
 
 export default {
-    name: 'MonthStatistics',
+  name: "MonthStatistics",
   components: {
-      WgtTitle
+    WgtTitle,
   },
-    data() {
-      return {
-        myChart:null,
-        dataList:[
-            {
-                text:"天气状态：",
-                value:"无降水",
-                class:"km"
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
     },
-            {
-                text:"风速：",
-                value:"55m/s",
-                class:"km"
   },
-            {
-                text:"天气温度：",
-                value:"23°C",
-                class:"km"
+  watch: {
+    data: {
+      handler(newVal) {
+        console.log(newVal);
       },
-            {
-                text:"风向：",
-                value:"东南风",
-                class:"km"
-            },
-            {
-                text:"路面温度：",
-                value:"23°C",
-                class:"km"
-            }, {
-                text:"风级：",
-                value:"2级",
-                class:"km"
-            }, {
-                text:"空气湿度：",
-                value:"79.40%",
-                class:"km"
-            }, {
-                text:"道路危险等级：",
-                value:"0级",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"2610.00m",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"0.00m",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"0.00m",
-                class:"km"
-            }, {
-                text:"能见度：",
-                value:"0.00m",
-                class:"km"
-            }
-        ]
-      }
+      deep: true,
     },
-  
-    created() {
-      
   },
-    methods: {
-     
+  data() {
+    return {
+      myChart: null,
+      dataList: [],
+    };
   },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
-        this.$nextTick(() => {
-         
-        });
+      this.$nextTick(() => {});
     });
   },
-  }
+};
 </script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
-    width: 100%; display: flex;
+  width: 100%;
+  display: flex;
   .board {
     flex: 1;
     width: 100%;
@@ -109,7 +118,12 @@
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255,0.3), rgba(55, 231, 255, 0)) 1 1;
+    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;
@@ -133,24 +147,21 @@
           font-size: 12px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
-                color: #00B3CC;
+          color: #00b3cc;
         }
 
         > span.text {
           font-size: 14px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
-                color: #FFFFFF; 
+          color: #ffffff;
         }
       }
     }
-
   }
 }
 .charts {
   height: 180px;
   width: 100%;
 }
-  
 </style>
-  

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

@@ -2,24 +2,40 @@
   <div class="congestion">
     <div class="queryList">
       <Card
-        v-for="(item, index) in data"
+        v-for="(item, index) in dataList"
         :cardData="item"
         :keyMap="keyMap"
         :hasBtn="false"
         :gap="'10px'"
         :key="index"
+        @click="handleClick(item)"
       >
-        <!-- <template #form-start="{ data }">
+        <template #form-direction="{ data }">
           <div class="endSpecial">
-            {{ data.start }} <img src="./assets/weater.png" />
+            {{
+              data.direction == 1
+                ? "菏泽方向"
+                : data.direction == 2
+                ? "双向"
+                : "济南方向"
+            }}
           </div>
-        </template> -->
+        </template>
+        <template #form-deviceState="{ data }">
+          <div class="endSpecial">
+            {{ data.deviceState == 1 ? "在线" : "离线" }}
+          </div>
+        </template>
       </Card>
     </div>
     <div class="queryCharts">
-      <WeateData class="charts-l" />
-      <TemperatureTrend ref="temper" class="charts-ms" />
-      <VisibilityTrends ref="visibility" class="charts-ms" />
+      <WeateData class="charts-l" :data="dataItem" />
+      <TemperatureTrend ref="temper" class="charts-ms" :data="weatherData" />
+      <VisibilityTrends
+        ref="visibility"
+        class="charts-ms"
+        :data="weatherData"
+      />
     </div>
   </div>
 </template>
@@ -48,27 +64,30 @@ export default {
       keyMap: [
         {
           label: "设备名称",
-          key: "name",
+          key: "deviceName",
         },
         {
           label: "设备位置",
-          key: "name",
+          key: "stakeMark",
         },
         {
           label: "所属方向",
-          key: "rote",
+          key: "direction",
         },
         {
           label: "采集时间",
-          key: "time",
+          key: "createTime",
         },
         {
-          label: "气象状态",
-          key: "start",
+          label: "设备状态",
+          key: "deviceState",
         },
       ],
+      deviceName: "",
       selectIndex: 0,
       dataList: [],
+      dataItem: {},
+      weatherData: [],
       data: Array.from({ length: 10 }).map(() => ({
         name: "气象监测器1",
         rote: "济南方向",
@@ -85,15 +104,27 @@ export default {
       this.selectIndex = index;
     },
     resizeChart() {
-      //  console.log(this.$refs.temper);
       this.$refs.temper.reiszeChart();
       this.$refs.visibility.reiszeChart();
     },
     getList() {
       getListLatest().then((res) => {
-        console.log("_____________", res);
+        this.dataList = res.rows;
+        this.dataItem = res.rows[0];
+        this.deviceName = res.rows[0].deviceName;
+        this.getWeather();
       });
     },
+    getWeather() {
+      getDeviceNameListLatest(this.deviceName).then((res) => {
+        this.weatherData = res.rows;
+      });
+    },
+    handleClick(item) {
+      this.dataItem = item;
+      this.deviceName = item.deviceName;
+      this.getWeather();
+    },
   },
   mounted() {
     this.getList();
@@ -104,7 +135,7 @@ export default {
 <style lang="scss" scoped>
 .endSpecial {
   position: relative;
-  top: -10px;
+  // top: -10px;
 
   > img {
     display: inline-flex;
@@ -147,6 +178,7 @@ export default {
       height: 203px;
       margin-top: 10px;
       margin-left: 20px;
+      cursor: pointer;
     }
 
     > div:nth-child(5n + 1) {