取消情报板拖拽闪屏样式+拥堵路段显示摄像头

ruoyi-ui/package.json

@@ -41,10 +41,12 @@
     "@antv/x6": "^2.18.1",
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
+    "@vue/babel-preset-app": "^5.0.8",
     "@vue/composition-api": "^1.7.1",
     "axios": "0.21.0",
+    "browserslist": "^4.23.3",
     "clipboard": "2.0.6",
-    "core-js": "3.8.1",
+    "core-js": "^3.38.1",
     "cron-parser": "^2.16.3",
     "cronstrue": "^1.100.0",
     "crypto-js": "4.0.0",
@@ -62,10 +64,11 @@
     "fuse.js": "6.4.3",
     "gis-map-admin": "^0.9.2",
     "gis-map-tunnel": "^0.1.3",
-    "gis-map-universal": "^0.3.5",
+    "gis-map-universal": "^0.5.4",
     "highlight.js": "9.18.5",
     "html-docx-js": "^0.3.1",
     "imports-loader": "^0.8.0",
+    "istanbul-lib-report": "^3.0.1",
     "iview": "^3.3.3",
     "jquery": "^3.6.0",
     "jquery-ui-dist": "^1.12.1",
@@ -82,14 +85,20 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "pnp-webpack-plugin": "^1.7.0",
+    "portfinder": "^1.0.32",
+    "qs": "^6.13.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortable.js": "^0.3.0",
     "sortablejs": "^1.10.2",
     "swiper": "^5.4.5",
+    "url-loader": "^4.1.1",
     "uuid": "^9.0.1",
     "video.js": "^5.6.0",
     "videojs-contrib-hls": "^5.15.0",
+    "videojs-flash": "^2.2.1",
+    "videojs-swf": "^5.4.2",
     "vue": "2.6.12",
     "vue-awesome-swiper": "^3.1.3",
     "vue-concise-slider": "^3.4.4",
@@ -99,6 +108,7 @@
     "vue-drag-resize": "^1.5.4",
     "vue-draggable-resizable": "^2.3.0",
     "vue-json-editor": "^1.4.3",
+    "vue-loader": "^17.4.2",
     "vue-meta": "^2.4.0",
     "vue-quill-editor": "3.0.6",
     "vue-resource": "^1.5.3",
@@ -110,6 +120,10 @@
     "vuedraggable": "^2.24.3",
     "vuescroll": "^4.18.1",
     "vuex": "3.6.0",
+    "webpack": "^4.29.5",
+    "webpack-chain": "^6.5.1",
+    "webpack-dev-server": "^5.1.0",
+    "webpack-merge": "^6.0.1",
     "zrender": "^5.4.4"
   },
   "devDependencies": {

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeTraffic/DialogCamera.vue

@@ -0,0 +1,79 @@
+<template>
+  <Dialog v-if="data" v-model="visibleModel" :title="data.deviceName" width="600px">
+    <img @click="controlDialogVisible = true" v-if="[0, '0'].includes(
+        data.parseOtherConfig &&
+        data.parseOtherConfig.ptzCtrl
+      )
+        " src="@screen/images/camera-control-icon.svg" width="18px" height="18px"
+        style="cursor: pointer;background-color: #0d5f79;position: absolute;right: 60px; margin-top:-42px;" />
+    <Video  class="video-stream" :camId="data.iotDeviceId" />
+
+    <CameraControlDialog :deviceId="data.iotDeviceId" :dialogData="data" :visible="controlDialogVisible" @update:value="handleClose" />
+  </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";
+import CameraControlDialog from "@screen/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue";
+
+export default {
+  name: "DialogCamera",
+  components: {
+    Dialog,
+    Button,
+    Video,
+    CameraControlDialog,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  data() {
+    return {
+      selectedBdMsg:[],
+      selectedSize:null,
+      controlDialogVisible: false,
+      dialogData: {},
+    };
+  },
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+  methods: {
+    handleClose() {
+      this.controlDialogVisible = false;
+    },
+    getData() {
+     
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+ .video-stream {
+      width: 100%;
+      height: 100%;
+    }
+
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeTraffic/index.vue

@@ -22,6 +22,7 @@
         show-stops>
       </el-slider>
     </div>
+    <DialogCamera :visible="dialogVisibleCamera" @close="handledDialogCamera(false)" :data="dialogDataCamera" />
   </div>
 </template>
 
@@ -32,6 +33,7 @@ import Form from "@screen/components/FormConfig";
 import request from '@/utils/request'
 import { line } from "@antv/x6/lib/registry/port-layout/line";
 import moment from "moment";
+import DialogCamera from "./DialogCamera.vue";
 import { re } from "mathjs";
 const enum_color = {
   0: '#A9AEB8', //未知
@@ -45,6 +47,7 @@ export default {
   components: {
     Button,
     Form,
+    DialogCamera,
   },
   data() {
     return {
@@ -57,12 +60,21 @@ export default {
       isPlay: false,
       lnglats:{},
       lnglatsNode: {},
-      nodeList: []
+      devices:{},
+      nodeList: [],
+
+
+      dialogVisibleCamera: false,
+      dialogDataCamera: null,
     };
   },
   created() {
   },
   methods: {
+
+    handledDialogCamera(bool) {
+      this.dialogVisibleCamera = bool;
+    },
     drawThumbail(list){
    
       this.nodeList.forEach(e => {
@@ -142,20 +154,41 @@ export default {
         window.graphInstance.removeNode(e)
       });
       this.nodeList = [];
+
+      const self = this;
+
       if(this.activeIcon === type){
         this.activeIcon = null;
         this.isPlay = false;
         setTimeout(() => {
           Vue.prototype.mapIns.addPointByArr( {pointList:[]},  'lineLayer', true);
           Vue.prototype.mapIns.removeLayerByName('lineLayer');  
+
+          Vue.prototype.mapIns.addPointByArr( {pointList:[]},  'lineLayer_camera', true);
+          Vue.prototype.mapIns.removeLayerByName('lineLayer_camera');
           window.graphInstance.removeNode('roadError')
         }, 200);
         
         this.silderVisible = false;
       } else {
+        this.$root.$emit('layer-clear');
+
+         const icon = require(`@screen/images/layerb/路测设备/摄像机_active.svg`);
+        const icon_f = require(`@screen/images/layerb/路测设备/摄像机_fault.svg`);
+        const iconb = require(`@screen/images/deviceType/ballb_active.svg`);
+        const iconb_f = require(`@screen/images/deviceType/ballb_fault.svg`);
+        const iconc = require(`@screen/images/deviceType/ballc_active.svg`);
+        const iconc_f = require(`@screen/images/deviceType/ballc_fault.svg`);
+        const icond = require(`@screen/images/deviceType/balld_active.svg`);
+        const icond_f = require(`@screen/images/deviceType/balld_fault.svg`);
+        const icone = require(`@screen/images/deviceType/balle_active.svg`);
+        const icone_f = require(`@screen/images/deviceType/balle_fault.svg`);
+
+
         this.activeIcon = type;
         this.lnglats = {};
         this.lnglatsNode = {};
+        this.devices = {};
         request({
           url: '/system/information/listTime',
           method: 'get'
@@ -176,6 +209,8 @@ export default {
             marks[idx] = i
 
             let aryLine = [];
+            let aryDevices = [];
+
             const _line = JSON.parse(result.data[i])
             _line.forEach(e => {
               const lines = e.link_lng_lats.split(';').map(x=>x.split(','))
@@ -184,7 +219,59 @@ export default {
                   color: '#FF0000', // 线颜色
                   xyArr: lines
               })
+
+              // 载入摄像机列表
+              
+              for(let ei of e.filteredDevices){
+                if(!ei.longitude){continue}
+                if(ei.otherConfig){
+                  ei.parseOtherConfig = JSON.parse(ei.otherConfig)
+                }
+
+                let iconUrl = (ei.useState ? icon : icon_f);
+                if(ei.childType==='1-2'){
+                  iconUrl = (ei.useState ? iconb : iconb_f);
+                } else if(ei.childType==='1-3'){
+                  iconUrl = (ei.useState ? icone : icone_f);
+                } else if(ei.childType==='1-4'){
+                  iconUrl = (ei.useState ? iconc : iconc_f);
+                } else if(ei.childType==='1-5'){
+                  iconUrl = (ei.useState ? icond : icond_f);
+                }
+                let _stake = ei.stakeMark;
+                console.log(e,3333)
+                aryDevices.push({
+                  type: 'event',
+                  longitude: parseFloat(ei.longitude),
+                  latitude: parseFloat(ei.latitude), 
+                  iconUrl: iconUrl,
+                  offset: [0,-48], 
+                  size: [42,100], 
+                  GGoffsetX: 0, 
+                  GGoffsetY: 20, 
+                  otherInfo: {
+                    ext: null,
+                    name: ei.deviceName,
+                    state: ei.useState,
+                    stake:_stake,
+                    config:{
+                      item: ei,
+                      markerClick:function(ext,e){
+                        if (ei.useState === 1) {
+                          self.dialogDataCamera = e;
+                          self.dialogVisibleCamera = true;
+                        } else {
+                          self.$message.warning("设备未接入！！");
+                        }
+                      }
+                    }
+                  }
+                })
+              }
+
+
             });
+            this.devices[idx] = _.cloneDeep(aryDevices);
             this.lnglats[idx] = _.cloneDeep(aryLine);
             this.lnglatsNode[idx] = _line;
             idx++;
@@ -197,18 +284,18 @@ export default {
           this.showLnglat();
 
             // 保存数据
-          let res = await request({ url: '/business/traffic-statistics/current/getTheCurrentCongestedSection', method: 'get'});
-          let aryLine = [];
-          res.data.forEach(e => {
-            const lines = e.link_lng_lats.split(';').map(x=>x.split(','))
-            aryLine.push({
-              width: 3,            // 线宽度
-              color: enum_color[e.pub_run_status], // 线颜色
-              xyArr: lines,
-            })
-          });
-          this.lnglats[idx] = _.cloneDeep(aryLine);
-          this.lnglatsNode[idx] = res.data;
+          // let res = await request({ url: '/business/traffic-statistics/current/getTheCurrentCongestedSection', method: 'get'});
+          // let aryLine = [];
+          // res.data.forEach(e => {
+          //   const lines = e.link_lng_lats.split(';').map(x=>x.split(','))
+          //   aryLine.push({
+          //     width: 3,            // 线宽度
+          //     color: enum_color[e.pub_run_status], // 线颜色
+          //     xyArr: lines,
+          //   })
+          // });
+          // this.lnglats[idx] = _.cloneDeep(aryLine);
+          // this.lnglatsNode[idx] = res.data;
           
         })
       }
@@ -217,7 +304,19 @@ export default {
       this.drawThumbail(this.lnglatsNode[this.timeTick] );
       Vue.prototype.mapIns.addPointByArr( {pointList:[]},  'lineLayer', true);
       Vue.prototype.mapIns.removeLayerByName('lineLayer');
+
+      Vue.prototype.mapIns.addPointByArr( {pointList:[]},  'lineLayer_camera', true);
+      Vue.prototype.mapIns.removeLayerByName('lineLayer_camera');
+      console.log(this.devices[this.timeTick])
       setTimeout(()=>{
+        if(this.devices[this.timeTick].length > 0){
+          Vue.prototype.mapIns.addPointByArr(
+            {pointList: this.devices[this.timeTick]},
+            'lineLayer_camera',
+            true
+          );
+        }
+
         Vue.prototype.mapIns.addLineByArr(
           this.lnglats[this.timeTick] 
         );

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue

@@ -184,6 +184,8 @@ export default {
 
     this.minLayers = 3;
     this.emitter.on("selectedCompleted", this.selectedCompletedHandle);
+
+    this.$root.$on('layer-clear', this.handleCleared);
   },
   mounted() {
     // 获取原始 Layer
@@ -219,6 +221,7 @@ export default {
 
     this.$root.$off('delete-event', this.handleRefresh);
 
+    this.$root.$off('layer-clear', this.handleCleared);
   },
   methods: {
     selectedCompletedHandle(item) {

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

@@ -225,6 +225,10 @@ export default {
                   longitude: parseFloat(e.longitude),
                   latitude: parseFloat(e.latitude), 
                   iconUrl: iconUrl,
+                  offset: [0,-48], 
+                  size: [42,100], 
+                  GGoffsetX: 0, 
+                  GGoffsetY: 20, 
                   otherInfo: {
                     ext: null,
                     name: e.deviceName,

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

@@ -119,12 +119,12 @@
               : "-"
           }}</span>
         </div>
-        <div class="item">
+        <!-- <div class="item">
           <span class="label"> 气压：</span>
           <span class="text">{{
             data.atmosphericPressure ? data.atmosphericPressure + "Pa" : "-"
           }}</span>
-        </div>
+        </div> -->
         <div class="item">
           <span class="label"> 水膜厚度：</span>
           <span class="text">{{

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

@@ -99,12 +99,12 @@
               : "-"
           }}</span>
         </div>
-        <div class="item">
+        <!-- <div class="item">
           <span class="label"> 气压：</span>
           <span class="text">{{
             data.atmosphericPressure ? data.atmosphericPressure + "Pa" : "-"
           }}</span>
-        </div>
+        </div> -->
         <div class="item">
           <span class="label"> 水膜厚度：</span>
           <span class="text">{{

ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue

@@ -999,6 +999,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+
 ::v-deep .formSearch {
   padding: 20px 20px 0;
 
@@ -1303,7 +1304,8 @@ export default {
 // }
 
 ::v-deep .sortable-chosen:not(th) {
-  background-color: rgba(5, 175, 227, 0.1) !important;
+  
+  //background-color: rgba(5, 175, 227, 0.1) !important;
 }
 
 ::v-deep .el-select .el-input .el-input__inner {

ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue

@@ -1139,7 +1139,7 @@ export default {
 // }
 
 ::v-deep .sortable-chosen:not(th) {
-  background-color: rgba(5, 175, 227, 0.1) !important;
+  // background-color: rgba(5, 175, 227, 0.1) !important;
 }
 
 ::v-deep .el-select .el-input .el-input__inner {

ruoyi-ui/src/views/event/reservePlan/board.vue

@@ -626,7 +626,7 @@ export default {
   height: 0px;
 }
 ::v-deep .sortable-chosen:not(th) {
-  background-color: rgba(5, 175, 227, 0.1) !important;
+  // background-color: rgba(5, 175, 227, 0.1) !important;
 }
 ::v-deep .el-loading-mask {
   background: transparent !important;

ruoyi-ui/src/views/information/board/index.vue

@@ -1397,7 +1397,7 @@
   }
 
   ::v-deep .sortable-chosen:not(th) {
-    background-color: rgba(5, 175, 227, 0.1) !important;
+    // background-color: rgba(5, 175, 227, 0.1) !important;
   }
 
   ::v-deep .el-select .el-input .el-input__inner {

ruoyi-ui/src/views/workbench/config/components/board.vue

@@ -1251,7 +1251,7 @@ export default {
 }
 
 ::v-deep .sortable-chosen:not(th) {
-  background-color: rgba(5, 175, 227, 0.1) !important;
+  // background-color: rgba(5, 175, 227, 0.1) !important;
 }
 
 ::v-deep .el-loading-mask {

ruoyi-ui/vue.config.js

@@ -37,8 +37,15 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://127.0.0.1:8087`,
-        target:`http://localhost:3001`,
+        // target:`http://localhost:3001`,
+        target:`http://10.0.111.11:8097`,
         // target:`http://10.0.111.11:8097`,
+        // target: `http://10.168.66.196:8087`, //刘文阁
+        // target: `http://10.168.68.42:8087`, //王思祥
+        // target: `http://10.168.72.174:8087`, //赵祥龙
+        // target: `http://10.168.65.156:8097`, //孟凡峰
+        // target: `http://10.168.79.46:8089`, //王家宝
+        target: `http://10.168.77.128:8087`, //王兴琳
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",