更改气象

ruoyi-ui/src/api/commandDispatch/index.js

@@ -0,0 +1,13 @@
+import request from "@/utils/request";
+
+// 查询事件气象
+export function WeatherForecast(lng, lat) {
+  return request({
+    url:
+      "/weatherForecast/queryTheSpecifiedLatitudeAndLongitudeWeather/" +
+      lng +
+      "/" +
+      lat,
+    method: "get",
+  });
+}

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/CrowdnessIndicatorRankings/index.vue

@@ -1,17 +1,36 @@
 <template>
-  <Card class='CrowdnessIndicatorRankings border' title="拥挤度指标排名情况">
+  <Card class="CrowdnessIndicatorRankings border" title="拥挤度指标排名情况">
     <div class="map">
-      <AMapContainer v-if="delayLoad" style="z-index: 9;" />
+      <AMapContainer v-if="delayLoad" style="z-index: 9" />
     </div>
     <div class="right border">
-      <div :class="['item', { active: isActive(item) }]" v-for="item in operation" :key="item.key"
-        @click="handleClick(item)">
-        <ElPopover trigger="manual" :value="isActive(item)" :disabled="item.key !== 'weather'" placement="left">
-          <div v-if="item.key === 'weather'">
-            天气：晴 能见度：优 风向：西南 风力：1级
+      <div
+        :class="['item', { active: isActive(item) }]"
+        v-for="item in operation"
+        :key="item.key"
+        @click="handleClick(item)"
+      >
+        <ElPopover
+          trigger="manual"
+          :value="isActive(item)"
+          :disabled="item.key !== 'weather'"
+          placement="left"
+        >
+          <div v-if="item.key === 'weather'" class="weather">
+            <span>天气：{{ weatherData.text }}</span>
+            <span>能见度：{{ weatherData.vis }}公里</span>
+            <span>风向：{{ weatherData.windDir }}</span>
+            <span>风力：{{ weatherData.windScale }}级</span>
           </div>
-          <div class="label" slot="reference"
-            :style="{ backgroundImage: `url(${require(`./images/${item.key}${isActive(item) ? '-active' : ''}.svg`)})` }" />
+          <div
+            class="label"
+            slot="reference"
+            :style="{
+              backgroundImage: `url(${require(`./images/${item.key}${
+                isActive(item) ? '-active' : ''
+              }.svg`)})`,
+            }"
+          />
         </ElPopover>
       </div>
     </div>
@@ -19,15 +38,16 @@
 </template>
 
 <script>
-import Card from "@screen/components/Card2/Card.vue";;
-import AMapContainer from "@screen/pages/Home/components/AMapContainer/index.vue"
-import { provideMixin } from "./../../mixin"
+import Card from "@screen/components/Card2/Card.vue";
+import AMapContainer from "@screen/pages/Home/components/AMapContainer/index.vue";
+import { provideMixin } from "./../../mixin";
+import { WeatherForecast } from "@/api/commandDispatch";
 
 export default {
-  name: 'CrowdnessIndicatorRankings',
+  name: "CrowdnessIndicatorRankings",
   components: {
     Card,
-    AMapContainer
+    AMapContainer,
   },
   mixins: [provideMixin],
   data() {
@@ -35,58 +55,71 @@ export default {
       active: [],
       operation: [
         {
-          key: 'weather',
-          label: "天气"
+          key: "weather",
+          label: "天气",
         },
         {
-          key: 'camera',
-          label: "摄像机"
+          key: "camera",
+          label: "摄像机",
         },
         {
-          key: 'bar',
-          label: "柱状图"
+          key: "bar",
+          label: "柱状图",
         },
         {
-          key: 'level',
-          label: "天气"
+          key: "level",
+          label: "天气",
         },
         {
-          key: 'car',
-          label: "天气"
+          key: "car",
+          label: "天气",
         },
         {
-          key: 'pie',
-          label: "天气"
+          key: "pie",
+          label: "天气",
         },
       ],
-      delayLoad: false
-    }
+      delayLoad: true,
+      weatherData: {},
+    };
   },
   computed: {
     isActive() {
-      return item => this.active.includes(item.key)
-    }
+      return (item) => this.active.includes(item.key);
+    },
   },
   methods: {
     handleClick(item) {
       const findIndex = this.active.indexOf(item.key);
       if (findIndex === -1) this.active.push(item.key);
-      else
-        this.active.splice(findIndex, 1)
-    }
+      else this.active.splice(findIndex, 1);
+    },
+    getWeatherForecast() {
+      WeatherForecast(117.2, 36.65).then((res) => {
+        this.weatherData =
+          res.data.weatherInTheAreaWhereTheIncidentOccurred.now;
+        console.log("气象", res);
+      });
+    },
   },
   mounted() {
-    setTimeout(() => {
-      this.delayLoad = true
-    }, 240);
+    this.getWeatherForecast();
+    // setTimeout(() => {
+    //   this.delayLoad = true;
+    // }, 240);
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .border {
   border: 1px solid;
-  border-image: linear-gradient(360deg, rgba(55, 231, 255, .42), rgba(55, 231, 255, 0)) 1 1;
+  border-image: linear-gradient(
+      360deg,
+      rgba(55, 231, 255, 0.42),
+      rgba(55, 231, 255, 0)
+    )
+    1 1;
 }
 
 .CrowdnessIndicatorRankings {
@@ -108,7 +141,11 @@ export default {
     height: 100%;
     top: 0;
     width: 34px;
-    background: linear-gradient(180deg, rgba(25, 40, 52, .6) 0%, rgba(28, 50, 60, .6) 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(25, 40, 52, 0.6) 0%,
+      rgba(28, 50, 60, 0.6) 100%
+    );
     border-right: 0;
     border-bottom: 0;
 
@@ -125,7 +162,7 @@ export default {
       div {
         width: 100%;
         height: 100%;
-        transition: all .15s linear;
+        transition: all 0.15s linear;
         background-size: 100% 100%;
         background-repeat: no-repeat;
         background-position: center;
@@ -133,8 +170,12 @@ export default {
     }
 
     .active {
-      background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+      background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
     }
   }
 }
+.weather span {
+  margin-right: 20px;
+  display: inline-block;
+}
 </style>

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

@@ -1,14 +1,20 @@
 <template>
-  <div class='CommandDispatch' :style="{ '--row': row }">
-    <component :is="key" v-for="(_, key) in gridAreaMap" :key="key" :ref="key" :style="{ gridArea: gridAreaMap[key] }"
-      @fullHeight="opacityKey => handleFullHeight(key, opacityKey)" />
+  <div class="CommandDispatch" :style="{ '--row': row }">
+    <component
+      :is="key"
+      v-for="(_, key) in gridAreaMap"
+      :key="key"
+      :ref="key"
+      :style="{ gridArea: gridAreaMap[key] }"
+      @fullHeight="(opacityKey) => handleFullHeight(key, opacityKey)"
+    />
   </div>
 </template>
 
 <script>
 import request from "@/utils/request";
 
-const files = require.context('./Cards', true, /[^/]+\/index\.vue$/);
+const files = require.context("./Cards", true, /[^/]+\/index\.vue$/);
 
 const components = files.keys().reduce((components, key) => {
   components[key.match(/[^/]+/g)[1]] = files(key).default;
@@ -25,34 +31,34 @@ const originGridArea = {
   RealTimeVideo: "1 / 3 / span 6 / 3",
   ReleaseInformation: "7 / 3 / span 14 / 3",
   TrafficControl: "21 / 3 / span 5 / 3",
-}
+};
 
 export default {
-  name: 'CommandDispatch',
+  name: "CommandDispatch",
   components: {
     ...components,
   },
   props: {
     detailId: {
       type: [String, Number],
-      default: 2
-    }
+      default: 2,
+    },
   },
   provide() {
     return {
       provideData: this.provideData,
-    }
+    };
   },
   data() {
     return {
       gridAreaMap: {
-        ...originGridArea
+        ...originGridArea,
       },
       row: 24,
       provideData: {
-        detail: null
-      }
-    }
+        detail: null,
+      },
+    };
   },
   created() {
     this.getDetail();
@@ -66,9 +72,10 @@ export default {
         .then((result) => {
           if (result.code != 200) return;
 
-          this.provideData.detail = result.data
+          this.provideData.detail = result.data;
+          console.log("事件详情", this.provideData.detail);
         })
-        .catch((err) => { });
+        .catch((err) => {});
     },
     handleFullHeight(key, opacityKey) {
       if (this.gridAreaMap[key] !== originGridArea[key]) {
@@ -76,30 +83,32 @@ export default {
         if (this.$refs[opacityKey]?.[0]) {
           this.$refs[opacityKey][0].$el.style.opacity = 1;
           this.$refs[opacityKey][0].$el.style.pointerEvents = "auto";
-        };
+        }
       } else {
         let index = 0;
         if (this.$refs[opacityKey]?.[0]) {
           this.$refs[opacityKey][0].$el.style.opacity = 0;
           this.$refs[opacityKey][0].$el.style.pointerEvents = "none";
-        };
+        }
 
-        this.gridAreaMap[key] = originGridArea[key].replace(/[0-9]+/g, (num) => {
+        this.gridAreaMap[key] = originGridArea[key].replace(
+          /[0-9]+/g,
+          (num) => {
             try {
-            return { 0: '1', 2: this.row + 1 }[index] || num;
+              return { 0: "1", 2: this.row + 1 }[index] || num;
             } catch (error) {
-
             } finally {
               index++;
             }
-        });
           }
+        );
       }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .CommandDispatch {
   padding: 24px 12px 21px 12px;
   display: grid;
@@ -107,8 +116,8 @@ export default {
   grid-template-rows: repeat(var(--row), 1fr);
   gap: 18px;
 
-  >div {
-    transition: all .18s linear;
+  > div {
+    transition: all 0.18s linear;
   }
 
   ::v-deep {