Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

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/Home/components/RoadAndEvents/index.vue

@@ -148,7 +148,7 @@ export default {
         await Promise.allSettled((this.tabContentData || []).map(item => this.handleDeviceImmediate(item, true)))
         Object.keys(lngLatMap).forEach(key => {
           addInGraphHandle(lngLatMap[key]);
-        })
+        });
       }
     }
   },
@@ -227,15 +227,20 @@ export default {
 
       const status = item.status;
 
-      console.log(item, "item");
+      if (!status) { //开启
-      if (!status) { this.nowSelected = item.title; this.nowSelectedCompleted = false; }
+        this.nowSelected = item.title;
+        this.nowSelectedCompleted = false;
+      }
       else if (this.nowSelected === item.title && this.nowSelectedCompleted === false) return;
 
       item.status = item.status ? "" : "_active";
 
       console.log("%c [ key ]-102-「index.vue」", "font-size:15px; background:#9d63e9; color:#e1a7ff;", key);
 
-      if (!eventMap[`${key}${status ? "_close" : ""}`]) return this.$emit("onClickItem", item);
+      if (!eventMap[`${key}${status ? "_close" : ""}`]) {
+        this.emitter.emit("selectedCompleted", item);
+        return this.$emit("onClickItem", item);
+      }
       console.log(`${key}${status ? "_close" : ""}`, this.filterData, isDefault)
 
       await eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item, this.filterData, isDefault, this.cb);

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@@ -144,9 +144,11 @@ export const eventMap = {
 
     loadingMessage?.close();
 
-    if (!data) return;
+    if (!data) return this.emitter.emit("selectedCompleted", item);
-    if (!data.length && !isDefault)
+    if (!data.length && !isDefault) {
+      this.emitter.emit("selectedCompleted", item);
       return Message.warning(`未查询到${item.title}设备!`);
+    }
 
     eventMap[`地图路测设备/map_close`](item);
     const cbCall = () =>
@@ -200,10 +202,12 @@ export const eventMap = {
 
     loadingMessage?.close();
 
-    if (!data) return;
+    if (!data) return this.emitter.emit("selectedCompleted", item);
 
-    if (!data.length && !isDefault)
+    if (!data.length && !isDefault) {
+      this.emitter.emit("selectedCompleted", item);
       return Message.warning(`没有${item.title}事件数据!`);
+    }
 
     eventMap[`地图事件专题/map_close`](item);
     const cbCall = () => cb?.(item, { deviceType: `事件专题_${deviceType}` });
@@ -257,10 +261,12 @@ export const eventMap = {
       .catch(() => {});
 
     loadingMessage?.close();
-    if (!data) return;
+    if (!data) return this.emitter.emit("selectedCompleted", item);
 
-    if (!data?.length && !isDefault)
+    if (!data?.length && !isDefault) {
+      this.emitter.emit("selectedCompleted", item);
       return Message.warning(`没有${item.title}数据!`);
+    }
 
     eventMap[`事件专题/感知事件_close`](item);
     const cbCall = () => cb?.(item, { deviceType: `感知事件_${warningState}` });
@@ -338,4 +344,5 @@ function removeDataPreHandle(markers) {
     }
   };
   lngLatMapHandle(markers, cb);
+  window.renderData?.(window.page); //移除后,重新渲染弹出框更新数据
 }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@@ -2,7 +2,7 @@ import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.j
 // import { Message } from "element-ui";
 import Vue from "vue";
 import { lngLatMap } from "./buttonEvent";
-import { upperFirst } from "lodash";
+import { upperFirst, filter } from "lodash";
 /**
  * @typedef {Object} Point
  * @property {number} weight - The weight of the item.
@@ -27,6 +27,7 @@ const normalBg = require(`@screen/images/mapBg/active.svg`);
 const faultTitleBg = require(`@screen/images/mapBg/fault_title.svg`);
 const normalTitleBg = require(`@screen/images/mapBg/active_title.svg`);
 
+const eventRegex = "./事件专题";
 /**
  * 聚合点
  */
@@ -126,6 +127,12 @@ export class MarkerCluster {
       const startIndex = (page - 1) * pageSize;
       const endIndex = startIndex + pageSize;
       let num = (page - 1) * pageSize;
+      if (data.length === 0 || data.length === 1) {
+        return this.infoWindow.close();
+      }
+      const { latitude: lat, longitude: lng } = data[0].extData;
+      const lngLatStr = `${parseFloat(lng)}/${parseFloat(lat)}`; //更新清除节点后的数据
+      data = lngLatMap[lngLatStr];
       // 截取当前页的数据
       const currentPageData = data.slice(startIndex, endIndex);
       window.currentPageData = currentPageData;
@@ -145,7 +152,7 @@ export class MarkerCluster {
         .join("");
       // 渲染当前页数据
       dataContainer.innerHTML = itemsTpl;
-      dataPage.innerHTML = `第${page}页`;
+      dataPage && (dataPage.innerHTML = `第${page}页`);
       bindItemClick();
     }
 
@@ -483,9 +490,9 @@ export function marksAddInGraph(data) {
 export function addInGraphHandle(data) {
   const graphInstance = window.graphInstance;
   const extData = data[0].extData;
-  console.log(extData, "extData");
+  // console.log(extData, "extData11111");
   const { item: eventItem } = data[0].config;
-  if (eventItem.id.match("./事件专题")) {
+  if (eventItem.id.match(eventRegex)) {
     let { stakeMark, lang, direction } = extData;
     stakeMark = upperFirst(stakeMark); //统一格式 大写K
     const distance =
@@ -515,11 +522,12 @@ export function addInGraphHandle(data) {
       });
       // }, 0);
     }
-    console.log(lang, "lang");
+    // console.log(lang, "lang");
   }
 }
 
 function getDataConf(data, extData) {
+  data = data.filter((item) => item.config.item.id.match(eventRegex));
   let dataConf;
   const nowBg = getState(data) ? normalBg : faultBg;
   if (data.length === 1) {

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

@@ -32,7 +32,7 @@
               <p
                 v-for="(item, index) in dayShift"
                 :key="`${item.id}_${index}`"
-                @click="removeDutyPerson(item,'dayShift')"
+                @click="removeDutyPerson(item, 'dayShift')"
               >
                 {{ item.name }}
               </p>
@@ -46,7 +46,7 @@
               <p
                 v-for="(item, index) in graveyardShift"
                 :key="`${index}_${item.id}`"
-                @click="removeDutyPerson(item,'graveyardShift')"
+                @click="removeDutyPerson(item, 'graveyardShift')"
               >
                 {{ item.name }}
               </p>
@@ -139,7 +139,7 @@ export default {
       },
       set(bool) {
         //关闭弹窗组件,清空数据
-        if(!bool) {
+        if (!bool) {
           this.dayShift = [];
           this.graveyardShift = [];
           this.peopleList = [];
@@ -184,7 +184,7 @@ export default {
       this[this.active].push(item);
     },
     removeDutyPerson(item, activeCheck) {
-      if(activeCheck != this.active) return;
+      if (activeCheck != this.active) return;
 
       const index = this[this.active].findIndex(
         (_item) => _item.id === item.id
@@ -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/control/event/event/index.vue

@@ -231,7 +231,7 @@ export default {
       if (this.activeName == '-1') {
         url = '/business/warning/export'
       } else {
-        url = '/dc/system/event/export';
+        url = '/dc/system/event/export?eventState=' + this.searchData.eventState;
       }
       let loadingInstance = Loading.service({
         fullscreen: true,

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: [
+      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",
       },

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

@@ -1,75 +1,98 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'气温变化趋势'"></WgtTitle>
     <div class="board">
       <div class="charts" id="temperatureTrend"></div>
     </div>
   </div>
-  </template>
+</template>
 
-  <script>
+<script>
-  
+import WgtTitle from "../../../../../widgets/title";
-  import WgtTitle from '../../../../../widgets/title'
+import * as echarts from "echarts";
-  import * as echarts from "echarts";
+import temperatureCharts from "./assets/charts";
-  import chartsStatistics from "./assets/charts";
+import {
-  export default {
+  getListLatest,
-    name: 'temperatureTrend',
+  getDeviceNameListLatest,
+  getIdDevices,
+} from "@/api/perception/meteorologyCheck";
+export default {
+  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,
+      myChart: null,
-      }
+    };
   },
 
-    created() {
+  created() {},
-      
-    },
   methods: {
-      reiszeChart(){
+    reiszeChart() {
       this.$nextTick(() => {
-          if ( this.myChart ) {
+        if (this.myChart) {
           this.myChart.resize();
         }
       });
-      }
     },
-    update(){
-     
   },
+  update() {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('temperatureTrend'));
+        this.myChart = echarts.init(
-          this.myChart.setOption(chartsStatistics);
+          document.getElementById("temperatureTrend")
+        );
+        this.myChart.setOption(temperatureCharts);
       });
     });
   },
-  }
+};
-  </script>
+</script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
-  .congestion {
+.congestion {
-    display: flex; flex-direction: column;
+  display: flex;
-    .board{
+  flex-direction: column;
+  .board {
     flex: 1;
     padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     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 {
+.charts {
-        height:200px;
+  height: 200px;
   width: 100%;
-      }
+}
-  
+</style>
-  </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: [
+      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",
       },

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

@@ -1,74 +1,94 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'能见度变化趋势'"></WgtTitle>
     <div class="board">
       <div class="charts" id="VisibilityTrends"></div>
     </div>
   </div>
-  </template>
+</template>
 
-  <script>
+<script>
-  
+import WgtTitle from "../../../../../widgets/title";
-  import WgtTitle from '../../../../../widgets/title'
+import * as echarts from "echarts";
-  import * as echarts from "echarts";
+import visibilityCharts from "./assets/charts";
-  import chartsStatistics from "./assets/charts";
+export default {
-  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,
+      myChart: null,
-      }
+    };
   },
 
-    created() {
+  created() {},
-      
-    },
   methods: {
-      reiszeChart(){
+    reiszeChart() {
-    
       this.$nextTick(() => {
-          if ( this.myChart ) {
+        if (this.myChart) {
           this.myChart.resize();
         }
       });
-      }
     },
-    update(){
-      
   },
+  update() {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-          this.myChart = echarts.init(document.getElementById('VisibilityTrends'));
+        this.myChart = echarts.init(
-          this.myChart.setOption(chartsStatistics);
+          document.getElementById("VisibilityTrends")
+        );
+        this.myChart.setOption(visibilityCharts);
       });
     });
   },
-  }
+};
-  </script>
+</script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
-  .congestion {
+.congestion {
-  display: flex; flex-direction: column; align-items: stretch;
+  display: flex;
-    .board{
+  flex-direction: column;
+  align-items: stretch;
+  .board {
     flex: 1;
     padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     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(
-      display: flex; flex-direction: column;
+        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;
   }
-  }
+}
-      .charts {
+.charts {
-        height:200px;
+  height: 200px;
-      }
+}
-  
+</style>
-  </style>
-  

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

@@ -1,115 +1,129 @@
 <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" >
+        <div class="item">
-                <span class="label" >{{ it.text }}</span>
+          <span class="label">温度：</span>
-                <span class="text" >{{ it.value }}</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>
-  </template>
+        <div class="item">
-  
+          <span class="label">能见度：</span>
-  <script>
+          <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>
+  </div>
+</template>
 
-  import WgtTitle from '../../../../../widgets/title'
+<script>
+import WgtTitle from "../../../../../widgets/title";
 
-  export default {
+export default {
-    name: 'MonthStatistics',
+  name: "MonthStatistics",
   components: {
-      WgtTitle
+    WgtTitle,
   },
-    data() {
+  props: {
-      return {
+    data: {
-        myChart:null,
+      type: Object,
-        dataList:[
+      default: () => {},
-            {
-                text:"天气状态：",
-                value:"无降水",
-                class:"km"
     },
-            {
-                text:"风速：",
-                value:"55m/s",
-                class:"km"
   },
-            {
+  watch: {
-                text:"天气温度：",
+    data: {
-                value:"23°C",
+      handler(newVal) {
-                class:"km"
+        console.log(newVal);
       },
-            {
+      deep: true,
-                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"
-            }
-        ]
-      }
-    },
-  
-    created() {
-      
   },
-    methods: {
+  data() {
-     
+    return {
+      myChart: null,
+      dataList: [],
+    };
   },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
-        this.$nextTick(() => {
+      this.$nextTick(() => {});
-         
-        });
     });
   },
-  }
+};
-  </script>
+</script>
 
-  <style lang='scss' scoped>
+<style lang="scss" scoped>
-  .congestion {
+.congestion {
-    width: 100%; display: flex;
+  width: 100%;
-    .board{
+  display: flex;
+  .board {
     flex: 1;
     width: 100%;
     padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6,66,88,0.2) 0%, #064258 100%);
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     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;
@@ -122,35 +136,32 @@
 
       > .item {
         display: inline-flex;
-            width:50%;
+        width: 50%;
-            height:23px;
+        height: 23px;
-            margin-top:12px;
+        margin-top: 12px;
         flex-direction: row;
 
         > span.label {
-               width:50%;
+          width: 50%;
-               height:25px;
+          height: 25px;
           font-size: 12px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
-                color: #00B3CC;
+          color: #00b3cc;
         }
 
-            >span.text {
+        > span.text {
           font-size: 14px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
-                color: #FFFFFF; 
+          color: #ffffff;
         }
       }
     }
-
-    }
   }
-      .charts {
+}
-        height:180px;
+.charts {
+  height: 180px;
   width: 100%;
-      }
+}
-  
+</style>
-  </style>
-  

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

@@ -8,18 +8,34 @@
         :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" />
+      <WeateData class="charts-l" :data="dataItem" />
-      <TemperatureTrend ref="temper" class="charts-ms" />
+      <TemperatureTrend ref="temper" class="charts-ms" :data="weatherData" />
-      <VisibilityTrends ref="visibility" class="charts-ms" />
+      <VisibilityTrends
+        ref="visibility"
+        class="charts-ms"
+        :data="weatherData"
+      />
     </div>
   </div>
 </template>
@@ -48,34 +64,37 @@ export default {
       keyMap: [
         {
           label: "设备名称",
-          key: "name",
+          key: "deviceName",
         },
         {
           label: "设备位置",
-          key: "name",
+          key: "stakeMark",
         },
         {
           label: "所属方向",
-          key: "rote",
+          key: "direction",
         },
         {
           label: "采集时间",
-          key: "time",
+          key: "createTime",
         },
         {
-          label: "气象状态",
+          label: "设备状态",
-          key: "start",
+          key: "deviceState",
         },
       ],
+      deviceName: "",
       selectIndex: 0,
       dataList: [],
-      // data: Array.from({ length: 10 }).map(() => ({
+      dataItem: {},
-      //   name: "气象监测器1",
+      weatherData: [],
-      //   rote: "济南方向",
+      data: Array.from({ length: 10 }).map(() => ({
-      //   arrdeass: "K59+256",
+        name: "气象监测器1",
-      //   time: "2024.01.04 13:00:00",
+        rote: "济南方向",
-      //   start: "晴转多云",
+        arrdeass: "K59+256",
-      // })),
+        time: "2024.01.04 13:00:00",
+        start: "晴转多云",
+      })),
     };
   },
 
@@ -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) {