展示版本基本完成

wj-data-vision/public/config.js

@@ -5,9 +5,9 @@ const map_config = {
   MAX_ZOOM: 20,
   MAP_PITCH: 0,
   MAP_ROTATE: 90,
-  MAP_STYLE: 'http://192.168.2.78:9000/style-changsha.json',  // 高精
+  MAP_STYLE: 'http://10.102.1.181:9000/style-changsha.json',  // 高精
 }
 const ws_config = {
-  BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe',
-  CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/',
+  BASE_URL: 'ws://10.102.1.181:17021/holows/subscribe',
+  CROSS_CONTROL: 'ws://10.102.1.181:9000/utc/signalStatus/',
 }
\ No newline at end of file

wj-data-vision/src/components/Standard/cameraVideo.vue

@@ -102,19 +102,19 @@ export default {
   computed: {},
 
   mounted() {
-    this.$nextTick(() => {
-      if (flvjs.isSupported()) {
-        if (this.autoPlay) {
-          this.loadVideo()
-          let interval = setInterval(() => {
-            if (this.loading) {
-              this.destroyWithReload(true)
-            }
-          }, 20000)
-        }
-
-      }
-    })
+    // this.$nextTick(() => {
+    //   if (flvjs.isSupported()) {
+    //     if (this.autoPlay) {
+    //       this.loadVideo()
+    //       let interval = setInterval(() => {
+    //         if (this.loading) {
+    //           this.destroyWithReload(true)
+    //         }
+    //       }, 20000)
+    //     }
+    //
+    //   }
+    // })
   },
   beforeDestroy() {
     console.log("video beforeDestroy");

wj-data-vision/src/components/Standard/localCamera.vue

 <template>
   <div :class="['cameraVideo',border?'cameraVideoBorder':'']">
+    <div class="lkqz_0" v-show="videoData==='lkqz_0'">组群路口2<br/>激光雷达点云</div>
     <span v-show="border" class="top-left"></span>
     <span v-show="border" class="top-right"></span>
     <span v-show="border" class="bottom-left"></span>
@@ -57,8 +58,10 @@ export default {
   .videoControl {
     position: absolute;
     //width: 100%;
-    width: calc(100% - 5px);
-    height: calc(100% - 5px);
+    width: 100%;
+    height: 100%;
+    //width: calc(100% - 5px);
+    //height: calc(100% - 5px);
     padding: 1px;
   }
 }
@@ -106,4 +109,13 @@ export default {
   border-color: #1889f1;
   border-width: 0 0 2px 2px;
 }
+.lkqz_0{
+  z-index: 2;
+  position: absolute;
+  font-size: 16px;
+  color: white;
+  font-weight: 700;
+  left: 12px;
+  top: 8px;
+}
 </style>

wj-data-vision/src/config/holo/websocket.js

@@ -20,10 +20,13 @@ function onClose(e, data) {
 }
 
 export function initWs(data) {
+  console.log('开始连接........', data)
   if (typeof WebSocket === undefined) {
     console.error('您的浏览器不支持socket')
   } else {
+    console.log('xinlianjie........', ReconnectingWebSocket, data.url)
     let currentSocket = new ReconnectingWebSocket(data.url)
+    console.log('ws实例', currentSocket)
     // 监听socket连接open
     currentSocket.onopen = (e) => onOpen(e, data)
     // 监听socket错误信息

wj-data-vision/src/utils/l7Tools.js

@@ -334,7 +334,7 @@ export function addMobilePoint(scene, msg) {
     //   blur: 1,
     // })
     .size(28)
-    // .color('#e21918')
+  // .color('#e21918')
   scene.addLayer(pointLayer)
   return pointLayer
 }

wj-data-vision/src/views/home/index.vue

@@ -101,8 +101,8 @@ export default {
         this.currentView = 'intersectionGroups'
         this.index = 0
         this.$nextTick(() => {
-
           this.$refs.intersectionGroups.setMsgState(false)
+          this.$refs.intersectionGroups.setBigView()
         })
       }
       //Alt+2 ，3个路口群组（带指标）
@@ -111,6 +111,8 @@ export default {
         this.index = 1
         this.$nextTick(() => {
           this.$refs.intersectionGroups.setMsgState(true)
+          this.$refs.intersectionGroups.setSmallView()
+
         })
       }
       //Alt+3，全域感知场景
@@ -203,7 +205,7 @@ export default {
       height: 75px;
       line-height: 43px;
       cursor: pointer;
-
+      background-size: auto 100%;
 
       background-position-x: left;
       background-repeat: no-repeat;
@@ -219,6 +221,7 @@ export default {
 
     .next {
       background-image: url("../../assets/images/sc/rightpage.png");
+
       background-position-x: right;
     }
 

wj-data-vision/src/views/intersectionGroups/index.vue

@@ -7,7 +7,8 @@
     <!--                  :border="true"-->
     <!--                  :video-data="dianyunUrl" :auto-play="true"/>-->
     <local-camera :border="true" ref="groupViewPointCamera" video-data="lkqz_0" class="main-cameraVideo"
-                  :class="!boxesShow ? 'main-cameraVideoHidden':''"/>
+                  :class="!boxesShow ? 'main-cameraVideoHidden':''">
+    </local-camera>
     <!--    <situation-time class="timeCenter" :time="this.situationTimeVal"/>-->
     <wMap :mapId="'situation-map'" ref="wMap"/>
     <!--左右图表组件-->
@@ -137,6 +138,32 @@ export default {
     });
   },
   methods: {
+    setBigView() {
+      // {lng: }  90 0
+      map.flyTo({
+        // 112.96343790614856, 28.187395332758285} 17.700927931131545 90 0
+        center: [112.96343790614856, 28.187395332758285],
+        zoom: 17.700927931131545,
+        bearing: 90,
+        pitch: 0
+      })
+    },
+    setSmallView() {
+      //{lng: }  90 0
+      //Ol {lng: }  90 0
+      let viewTimer = setInterval(() => {
+        if (map) {
+          map.flyTo({
+            center: [112.96292140142532, 28.187205419868988],
+            zoom: 17.14795376640135,
+            bearing: 90,
+            pitch: 0
+          })
+          clearInterval(viewTimer)
+        }
+      },10)
+
+    },
     changeState() {
       this.licenseState = !this.licenseState
     },
@@ -192,6 +219,7 @@ export default {
         //   this.getCrossCamerasAndPolygons()
         // }, 1000)
         // this.timers.push(timer)
+        this.setBigView()
         this.timeout = setTimeout(() => {
           this.initWebS()
         }, 5000)
@@ -204,9 +232,11 @@ export default {
       });
       scene.on("zoomend", () => {
         this.refreshBounds()
-        console.log(map.getZoom())
-        console.log(map.getCenter())
+        console.log('zzz', map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
+        // console.log(map.getZoom())
+        // console.log(map.getCenter())
       });
+
       scene.on('moveend', () => {
         this.refreshBounds()
       })
@@ -302,38 +332,40 @@ export default {
       })
     },
     homeCameraClick(e) {
-      let data = e.feature
-      console.log('aaaaaaaaaaaaaaaaaaaaaa', e)
-      if (e.feature.crossName.includes('人民')) {
-        data.videoUrl = 'lkqz_1'
-        data.cName = '组群路口1'
-      }
-      if (e.feature.crossName.includes('西湖')) {
-        data.videoUrl = 'lkqz_2'
-        data.cName = '组群路口2'
-      }
-      if (e.feature.crossName.includes('劳动')) {
-        data.videoUrl = 'lkqz_3'
-        data.cName = '组群路口3'
+      if (["湘江中路与人民西路交叉口", "湘江中路与西湖路交叉口", "湘江中路与劳动西路交叉口"].includes(e.feature.crossName)) {
+        let data = e.feature
+        console.log('aaaaaaaaaaaaaaaaaaaaaa', e)
+        if (e.feature.crossName.includes("湘江中路与人民西路交叉口")) {
+          data.videoUrl = 'lkqz_1'
+          data.cName = '组群路口1'
+        }
+        if (e.feature.crossName.includes("湘江中路与西湖路交叉口")) {
+          data.videoUrl = 'lkqz_2'
+          data.cName = '组群路口2'
+        }
+        if (e.feature.crossName.includes("湘江中路与劳动西路交叉口")) {
+          data.videoUrl = 'lkqz_3'
+          data.cName = '组群路口3'
+        }
+        let index = data.longitude[0].split('.')[1]
+        let popup = new Popup({
+          offsets: [0, -120], // x+右  y-下
+          closeButton: true,
+          autoClose: false,
+          anchor: 'top-left',
+          closeButtonOffsets: [7, 7]
+        })
+          .setLngLat([data.longitude, data.latitude])
+          .setHTML(`<div id="home_camera_popup${index}"></div>`)
+        scene.addPopup(popup);
+        let aa = new CameraPopup({
+          propsData: {
+            model: data,
+          },
+        })
+        aa.$mount(`#home_camera_popup${index}`);
+        popups.push(aa)
       }
-      let index = data.longitude[0].split('.')[1]
-      let popup = new Popup({
-        offsets: [0, -120], // x+右  y-下
-        closeButton: true,
-        autoClose: false,
-        anchor: 'top-left',
-        closeButtonOffsets: [7, 7]
-      })
-        .setLngLat([data.longitude, data.latitude])
-        .setHTML(`<div id="home_camera_popup${index}"></div>`)
-      scene.addPopup(popup);
-      let aa = new CameraPopup({
-        propsData: {
-          model: data,
-        },
-      })
-      aa.$mount(`#home_camera_popup${index}`);
-      popups.push(aa)
     },
 
     // 更新经纬度-角度-详细信息-弹窗信息

wj-manage-web/public/config.js

@@ -5,19 +5,19 @@ const map_config = {
   MAP_ZOOM: 14.39,  // 默认地图层级
   MAX_ZOOM: 20,  // 地图最大层级
   MAP_PITCH: 60,  // 视角倾斜角度
-  MAP_STYLE: 'http://192.168.2.78:9000/style-changsha.json',  // 高精
-  MAP_STYLE_XL: 'http://192.168.2.78:9000/style-changsha.json',  // 高精带路口箭头
-  RASTER_ROAD: 'http://192.168.2.78:9000/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}'  // 路况
+  MAP_STYLE: 'http://10.102.1.181:9000/style-changsha.json',  // 高精
+  MAP_STYLE_XL: 'http://10.102.1.181:9000/style-changsha.json',  // 高精带路口箭头
+  RASTER_ROAD: 'http://10.102.1.181:9000/tile?lid=traffic&get=map&cache=off&x={x}&y={y}&z={z}'  // 路况
 }
 
 const ws_config = {
-  BASE_URL: 'ws://192.168.2.78:17021/holows/subscribe',  // 实时轨迹
-  CROSS_CONTROL: 'ws://192.168.2.78:9000/utc/signalStatus/'  // 路口详情 - 灯态相位推送
+  BASE_URL: 'ws://10.102.1.181:17021/holows/subscribe',  // 实时轨迹
+  CROSS_CONTROL: 'ws://10.102.1.181:9000/utc/signalStatus/'  // 路口详情 - 灯态相位推送
 }
 const cesium_config = {
   center: [112.96364, 28.18825],  // cesium中心点
   zoomHeight: 1800,  // cesium相机默认高度
-  tile3dURL: 'http://192.168.2.78:9090/cs_3dtiles/tileset.json', // 3D tile 三维路口模型
+  tile3dURL: 'http://10.102.1.181:9090/cs_3dtiles/tileset.json', // 3D tile 三维路口模型
 }
 const video_config = {
   homeTimeStart:'2023-04-16 23:10:27:267',

wj-manage-web/src/components/Standard/map/mapCompWithCtrl.vue

@@ -164,6 +164,7 @@ export default {
     },
 
     init() {
+
       map = new mapboxgl.Map({
         container: this.mapId,
         style: map_config.MAP_STYLE,
@@ -185,8 +186,13 @@ export default {
       map.setMinZoom(17.5);
       scene.on('loaded', () => {
         this.sceneLoaded = true;
+
       })
       map.on("style.load", () => {
+        this.regisAndSendWs("callCar", {
+          dataType: "1",
+          ...this.getBoundsLnglat(),
+        });
         map.addLayer({
           id: "vehicle3D",
           type: "custom",
@@ -216,20 +222,18 @@ export default {
         for (let key in mapAssets.mapIcons) {
           scene.addImage(key, mapAssets.mapIcons[key]);
         }
-        setTimeout(() => {
-          this.switchfirst();
-        }, 3000)
+        if (this.loading) this.loading = false
+        // setTimeout(() => {
+        //   this.switchfirst();
+        // }, 3000)
       });
       return map
     },
 
     switchfirst() {
-      if (this.loading) this.loading = false
+
       // 注册车辆实时ws
-      this.regisAndSendWs("callCar", {
-        dataType: "1",
-        ...this.getBoundsLnglat(),
-      });
+
     },
 
     // 更新经纬度-角度-详细信息-弹窗信息
@@ -286,21 +290,21 @@ export default {
     },
     // websocket 回调
     callCar(msgg) {
-      // 处理无车牌情况
-      for (let i = 0; i < msgg.length; i++) {
-        if (!msgg[i].picLicense) {
-          msgg[i].picLicense = ''
+      if (scene && this.vehicleModelsNum === 21) {
+// 处理无车牌情况
+        for (let i = 0; i < msgg.length; i++) {
+          if (!msgg[i].picLicense) {
+            msgg[i].picLicense = ''
+          }
         }
-      }
-      // 按类型筛选车
-      let msg = msgg.filter(item => {
-        return this.toFilter.includes(this.typeDict[item.originalType])
-      })
-      if (this.sceneLoaded) {
-        this.currentLocation = msg;
-        let allData = this.diff(this.lastLocation, this.currentLocation);
-        this.lastLocation = msg;
-        if (this.vehicleModelsNum === 21) {
+        // 按类型筛选车
+        let msg = msgg.filter(item => {
+          return this.toFilter.includes(this.typeDict[item.originalType])
+        })
+        if (this.sceneLoaded) {
+          this.currentLocation = msg;
+          let allData = this.diff(this.lastLocation, this.currentLocation);
+          this.lastLocation = msg;
           this.addDelUpdateVehicleModels(allData);
           // 添加车牌号图层
           // if (!layers.first.license) {
@@ -310,6 +314,7 @@ export default {
           // }
         }
       }
+
     },
     // 比较websocket车辆前后两次数据差异
     diff(oldData, newData) {

wj-manage-web/src/views/efficiency/crossCompare.vue

@@ -85,7 +85,7 @@ export default {
       down:require('../../assets/images/efficiency/down.png'),
       tableData: [
         {indexName:'路口饱和度',current:'70%',compare:'80%',to:'10%',raise:false},
-        {indexName:'交通流量',current:'2888辆/h',compare:'2888辆/h',to:'1000',raise:true},
+        {indexName:'交通流量',current:'3888/h',compare:'2888/h',to:'1000',raise:true},
         {indexName:'平均延误时间',current:'2.3s',compare:'3.3s',to:'1s',raise:false},
         {indexName:'不停车通过率',current:'30%',compare:'25%',to:'5%',raise:true},
         {indexName:'一次停车通过率',current:'40%',compare:'60%',to:'20%',raise:false},

wj-manage-web/src/views/efficiency/index.vue

@@ -161,7 +161,7 @@ export default {
     return {
       map1Loading: true,
       pathData: [],
-      rightLoading: true,
+      rightLoading: false,
       currentSelectCross: '',
       tableLoading: false,
       tableData: [

wj-manage-web/src/views/situation/index.vue

@@ -294,8 +294,9 @@ export default {
           }
           if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
             map.flyTo({
-              zoom: 17.17,
-              center: [120.62601176446981, 31.422352253327617]
+              //112.96345260029534, lat: 28.185756542707225} 16.573391841784925
+              zoom: 16.573391841784925,
+              center: [112.96345260029534, 28.185756542707225]
             })
           }
           if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
@@ -372,6 +373,7 @@ export default {
       });
       scene.on("zoomend", (e) => {
         // console.log(map.getZoom())
+        console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
         this.refreshMap();
         this.refreshBounds()
         if (scene.getZoom() < 17) {
@@ -380,6 +382,7 @@ export default {
       });
       scene.on('moveend', () => {
         this.refreshBounds()
+        console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
       })
     },