拥挤度指标排名

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

@@ -10,7 +10,7 @@
           <div class="dialog-title">
             <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
             <span>{{ title }}</span>
-            <img class="icon-close" @click.stop="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
+            <img class="icon-close" @click.stop="close()" src="@screen/images/dialog/icon-close.svg" />
           </div>
 
           <div class="dialog-content">
@@ -86,6 +86,10 @@ export default {
     },
   },
   methods: {
+    close(){
+      console.log('------')
+      this.modelVisible = false
+    },
     updateDialogVisible(bool) {
       this.modelVisible = bool;
     },

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

@@ -68,7 +68,12 @@ export default {
       const changeItem = find(this.urls, { iotDeviceId: this.cameraId });
       this.dialogData = { ...changeItem, parseOtherConfig: changeItem.otherConfig && JSON.parse(changeItem.otherConfig) };
       console.log(this.cameraId, this.dialogData)
-      this.showVideo();
+      this.player?.destroy();
+      const self = this;
+      setTimeout(() => {
+        self.showVideo();  
+      }, 500);
+      
     },
     async playVideo() {
       this.player?.destroy();

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

@@ -0,0 +1,168 @@
+<template>
+  <Dialog v-if="data" v-model="visibleModel" :title="data.deviceName" width="600px">
+    <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
+                
+      <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+
+import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue";
+import request from "@/utils/request";
+import { getBoardDeviceInfo } from "@/api/board/board";
+
+export default {
+  name: "DialogBoard",
+  components: {
+    Dialog,
+    Button,
+    BoardPreview,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  data() {
+    return {
+      selectedBdMsg:[],
+      selectedSize:null
+    };
+  },
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+  methods: {
+    getData() {
+      const deviceFrom = this.data;
+      if(deviceFrom.otherConfig){
+        this.selectedSize = JSON.parse(deviceFrom.otherConfig).screenSize
+        
+      }
+      if (!deviceFrom.iotDeviceId || deviceFrom.iotDeviceId.includes("null_")) {
+          this.$message.warning("设备未接入！");
+          return;
+        }
+        this.selectedBdMsg = [];
+        getBoardDeviceInfo(deviceFrom.iotDeviceId, deviceFrom.id)
+          .then((res) => {
+            this.selectedBdMsg = res.data["3A"].content;
+        
+          })
+          .catch((err) => { });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.tplItem {
+          margin-right: 14px;
+          display: flex;
+          align-items: stretch;
+          padding-bottom: 10px;
+
+          .boardPreview {
+            border: 2px solid #004c64;
+            background-color: #133242;
+            // width: 560px;
+            // height:80px;
+            flex: 1;
+          }
+
+          .infoBtnBox {
+            width: 160px;
+            height: 80px;
+            display: flex;
+            margin-left: 10px;
+            /* // border: solid 1px #05afe3; */
+            border: 2px solid #004c64;
+            background-color: #133242;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            .btn {
+              background-repeat: no-repeat;
+              background-size: 100% 100%;
+              width: 40px;
+              height: 40px;
+
+              &.btnApply {
+                background-image: url(~@/assets/jihe/images/button/toLeft.svg);
+              }
+
+              &.btnEdit {
+                background-image: url(~@/assets/jihe/images/button/edit.svg);
+              }
+
+              &.btnDelete {
+                background-image: url(~@/assets/jihe/images/button/delete.svg);
+              }
+            }
+
+            i {
+              font-size: 24px;
+              color: #666;
+              padding-left: 4px;
+              cursor: pointer;
+              caret-color: rgba(0, 0, 0, 0);
+              user-select: none;
+            }
+
+            i:hover {
+              color: #05afe3;
+            }
+
+            .disabledClass {
+              pointer-events: none;
+              cursor: auto !important;
+              color: #ccc;
+            }
+          }
+        }
+
+        .tplItem.ghost_class {
+
+          .boardPreview,
+          .infoBtnBox {
+            border-color: #F00;
+          }
+        }
+
+        .tplItem.chosen_class {
+
+          .boardPreview,
+          .infoBtnBox {
+            border-color: #0A0;
+          }
+        }
+
+        .tplItem.drag_class {
+
+          .boardPreview,
+          .infoBtnBox {
+            border-color: #FF0;
+          }
+        }
+
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+  <Dialog v-if="data" v-model="visibleModel" :title="data.deviceName" width="600px">
+    <Video  class="video-stream" :camId="data.iotDeviceId" />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+
+import Video from "@screen/components/Video/Video.vue"
+import request from "@/utils/request";
+import { getBoardDeviceInfo } from "@/api/board/board";
+
+export default {
+  name: "DialogCamera",
+  components: {
+    Dialog,
+    Button,
+    Video
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  data() {
+    return {
+      selectedBdMsg:[],
+      selectedSize:null
+    };
+  },
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+  methods: {
+    getData() {
+     
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+ .video-stream {
+      width: 100%;
+      height: 100%;
+    }
+
+</style>

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

@@ -19,7 +19,7 @@
         @click="handleClick(item)"
       >
         <div
-          v-if="item.key === 'bar'"
+          v-if="['bar','level','camera'].indexOf(item.key) !== -1"
           class="label"
           slot="reference"
           :style="{
@@ -57,21 +57,36 @@
         </ElPopover>
       </div>
     </div>
+    <DialogBoard
+      :visible="dialogVisible"
+      @close="handledDialogBoard(false)"
+      :data="dialogData"
+    />
+    <DialogCamera
+      :visible="dialogVisibleCamera"
+      @close="handledDialogCamera(false)"
+      :data="dialogDataCamera"
+    />
   </Card>
 </template>
 
 <script>
 import Card from "@screen/components/Card2/Card.vue";
+import DialogBoard from "./components/DialogBoard.vue";
+import DialogCamera from "./components/DialogCamera.vue";
 import AMapContainer from "@screen/pages/Home/components/AMapContainer/index.vue";
 import { provideMixin } from "./../../mixin";
 import { getWeatherForecast } from "@/api/commandDispatch";
 import * as echarts from "echarts";
 import { StatChartOption } from "./charts";
+import request from "@/utils/request";
 
 export default {
   name: "CrowdnessIndicatorRankings",
   components: {
     Card,
+    DialogBoard,
+    DialogCamera,
     AMapContainer,
   },
   mixins: [provideMixin],
@@ -95,10 +110,6 @@ export default {
           key: "level",
           label: "情报板",
         },
-        // {
-        //   key: "car",
-        //   label: "天气",
-        // },
         {
           key: "pie",
           label: "断面车流量",
@@ -106,12 +117,34 @@ export default {
       ],
       delayLoad: true,
       weatherData: {},
+      markerBoard:[],
+      dialogVisible:false,
+      dialogData: null,
+      markerCamera:[],
+      dialogVisibleCamera:false,
+      dialogDataCamera: null,
     };
   },
   computed: {
     isActive() {
       return (item) => this.active.includes(item.key);
     },
+    modelVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:value", val);
+      },
+    },
+  },
+  watch: {
+    modelVisible: {
+      immediate: true,
+      handler(bool) {
+        if (!bool) return;
+      },
+    },
   },
   methods: {
     handleClick(item) {
@@ -129,8 +162,90 @@ export default {
         });
       } else if (item.key === "bar") {
         this.$refs.AMapContainerRef.showRoadConditions(findIndex === -1);
+      } else if (item.key === 'level'){
+        this.getBoard(findIndex === -1);
+      } else if (item.key === 'camera'){
+        this.getCamera(findIndex === -1);
+      }
+    },
+    getCamera(isShow){
+      if(isShow){
+        const self = this;
+        this.markerCamera = [];
+        request({
+          url: "/video/nearCamPileNum",
+          method: "get",
+          params: {
+            pileNum: this.detailData.stakeMark,
+          },
+        }).then(result=>{
+          if (result.code != 200) return Message.error(`查询失败!${result.msg}`);
+          const list = [...result.data.downCamera,...result.data.upCamera];
+          
+          const icon = require(`@screen/images/layer/路测设备/摄像机_active.svg`);
+          const icon_f = require(`@screen/images/layer/路测设备/摄像机_fault.svg`);
+          list.forEach(e => {
+            const p = new AMap.LngLat(parseFloat(e.longitude), parseFloat(e.latitude));
+            const m = this.addMarker(p,e.useState?icon:icon_f,e.useState,function(){
+              console.log(e,'-------------')
+              if(e.useState === 1){
+                self.dialogDataCamera = e;
+                self.dialogVisibleCamera = true;
+              } else {
+                self.$message.warning("设备未接入！！");
+              }
+            })
+            this.markerCamera.push(m)
+          });
+        })
+      } else {
+        this.markerCamera.forEach(e => {
+          e.setMap(null);
+          e = null;
+        });
+      }
+    },
+    handledDialogCamera(bool) {
+      this.dialogVisibleCamera = bool;
+    },
+    getBoard(isShow){
+      if(isShow){
+        const self = this;
+        this.markerBoard = [];
+        const fileData = new FormData(); // new formData对象        
+        fileData.append("stakeMark", this.detailData.stakeMark);
+        fileData.append("direction", this.detailData.direction ==='济南方向'?1:2);
+        request({
+          url: "/business/device/selectNearBoard",
+          method: "post",
+          data:fileData
+        }).then(result=>{
+          if (result.code != 200) return Message.error(`查询失败!${result.msg}`);
+          const icon = require(`@screen/images/layer/路测设备/情报板_active.svg`);
+          const icon_f = require(`@screen/images/layer/路测设备/情报板_fault.svg`);
+          result.data.forEach(e => {
+            const p = new AMap.LngLat(parseFloat(e.longitude), parseFloat(e.latitude));
+            const m = this.addMarker(p,e.useState?icon:icon_f,e.useState,function(){
+              if(e.useState === 1){
+                self.dialogData = e;
+                self.dialogVisible = true;
+              } else {
+                self.$message.warning("设备未接入！");
+              }
+            })
+            this.markerBoard.push(m)
+          });
+        })
+      } else {
+        this.markerBoard.forEach(e => {
+          e.setMap(null);
+          e = null;
+        });
       }
     },
+    handledDialogBoard(bool) {
+      this.dialogVisible = bool;
+    },
     getWeather() {
       getWeatherForecast(117.2, 36.65).then((res) => {
         this.weatherData =
@@ -138,24 +253,35 @@ export default {
         console.log("气象", res);
       });
     },
-
+    // 绑定地图事件
     bindMap(isLoaded){
       if(!isLoaded){
         return;
       }
+      const self = this;
+      setTimeout(() => {
       // 获取map接口
-      const {AMap,mapIns} = this.$refs.AMapContainerRef.getMapInstance();
-      const {longitude,dimension,eventName} = this.detailData;
+        const {AMap,mapIns} = self.$refs.AMapContainerRef.getMapInstance();
+        const {longitude,dimension,eventName} = self.detailData;
         const icon = require(`@screen/images/layer/事件专题/${eventName}_active.svg`);
-      const nowBg = require(`@screen/images/mapBg/active.svg`);
-
         const center = new AMap.LngLat(parseFloat(longitude), parseFloat(dimension));
+        self.addMarker(center,icon, 1);
+        mapIns.setZoomAndCenter(12, center);
+        // 
+        console.log(mapIns,AMap,'--------')
+        console.log(self.detailData,'############');  
+      }, 500);
       
+    },
+    addMarker(position,icon, state, fn = null){
+      const {AMap,mapIns} = this.$refs.AMapContainerRef.getMapInstance();
+      const nowBg = require(`@screen/images/mapBg/active.svg`);
+      const nowBg_f = require(`@screen/images/mapBg/fault.svg`);
       var marker = new AMap.Marker({
-        position:center,
+        position:position,
         content: `
           <div style="
-            background-image: url(${nowBg});
+            background-image: url(${state?nowBg:nowBg_f});
             background-size: 100% 100%;
             background-repeat: no-repeat;
             width: 51px;
@@ -176,11 +302,13 @@ export default {
       `,
         anchor: 'bottom-center',
       });
+      marker.on("click", (e) => {
+          if(fn){
+            fn(e)
+          }
+      })
       mapIns.add(marker);
-      mapIns.setZoomAndCenter(12, center);
-      // 
-      console.log(mapIns,AMap,'--------')
-      console.log(this.detailData,'############');
+      return marker;
     }
   },
   mounted() {