轨迹查询页面及其子模块功能完善

wj-manage-web/public/config.js

@@ -7,6 +7,7 @@ const map_config = {
 
   MAP_ZOOM: 14.39,
   MAX_ZOOM: 20.5,
+  // MAX_ZOOM: 21,
   MAP_PITCH: 60,
   // MAP_STYLE: 'mapbox://styles/mapbox/dark-v11',
   // MAP_STYLE: 'http://10.100.1.37:9090/style.json', // 测试环境
@@ -32,3 +33,7 @@ const ws_config = {
   CROSS_CONTROL: 'ws://106.120.201.126:14724/utc/signalStatus/', // 测试 - 2
   // CROSS_CONTROL: 'ws://10.100.4.14:32000/utc/signalStatus/', 演示
 }
+
+const api_config = {
+  cross_api: 'http://106.120.201.126:14735/develop/sgw/dbInterface/gisc/t_base_cross_info/findByPage/F2B722217C05'
+}
\ No newline at end of file

wj-manage-web/public/index.html

@@ -13,6 +13,10 @@
 
     <script src="/cdn/libs/vue/vue.js"></script>
     <script src="/cdn/libs/element-ui/element-ui.js"></script>
+
+<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
+<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
+
     <script src="/cdn/libs/echarts/echarts.min.js"></script>
     <script src="/cdn/libs/lodash/lodash.js"></script>
     <script src="/cdn/libs/st-util/st-util.js"></script>

wj-manage-web/src/App.vue

@@ -75,7 +75,7 @@ export default {
 <style lang="less" scoped>
 #app {
   // font-family: "Avenir", Helvetica, Arial, sans-serif;
-  font-family: 'SiYuanHT';
+  //font-family: 'SiYuanHT';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;

wj-manage-web/src/assets/font/font.css

-@font-face {
-  font-family: 'SiYuanHT';
-  src: url('SourceHanSansCN-Regular.otf');
-  font-weight: normal;
-  font-style: normal;
-}
+/*@font-face {*/
+/*  font-family: 'SiYuanHT';*/
+/*  src: url('SourceHanSansCN-Regular.otf');*/
+/*  font-weight: normal;*/
+/*  font-style: normal;*/
+/*}*/

wj-manage-web/src/components/Standard/cameraVideo.vue

@@ -74,7 +74,7 @@ export default {
     };
   },
   mounted() {
-    // console.log(this.videoData, 2);\
+    console.log('videoData',this.videoData);
     this.player = null;
     this.supported = flvjs.isSupported();
     if(this.autoPlay){

wj-manage-web/src/components/Standard/cesiumMap.vue

@@ -3,9 +3,7 @@
 </template>
 
 <script>
-// import * as Cesium from 'cesium'
-// import 'cesium/Build/Cesium/Widgets/widgets.css'
-let viewer = null, scene = null, layers = null
+let viewer = null
 export default {
   name: 'cesiumMap',
   props: ['cId'],
@@ -37,17 +35,18 @@ export default {
         // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
         // maximumRenderTimeChange: Infinity,
         shadows: false,
-        // imageryProvider: new Cesium.UrlTemplateImageryProvider({
-        //   url: cesium_config.baseMap,
-        //   fileExtension: "png"
-        // }),
-        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
-          url:
-              "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",
+        imageryProvider: new Cesium.UrlTemplateImageryProvider({
+          url: cesium_config.baseMap,
+          fileExtension: "png"
         }),
-        // terrainProvider: Cesium.createWorldTerrain(),
+        // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
+        //   url:
+        //       "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/",
+        // }),
+        // terrainProvider: Cesium.createWorldTerrain(), // 地形
       });
       viewer.cesiumWidget.creditContainer.style.display = "none"
+      // 以下设置为了使cesium地图鼠标控制符合mapbox习惯
       // 关闭双击事件
       viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
           Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
@@ -56,7 +55,7 @@ export default {
       viewer.scene.screenSpaceCameraController.tiltEventTypes = [
         Cesium.CameraEventType.RIGHT_DRAG,
       ];
-      // 缩放
+      // 中键滚动缩放
       viewer.scene.screenSpaceCameraController.zoomEventTypes = [
         Cesium.CameraEventType.WHEEL,
       ];
@@ -64,15 +63,14 @@ export default {
       viewer.scene.screenSpaceCameraController.rotateEventTypes = [
         Cesium.CameraEventType.LEFT_DRAG,
       ];
-      scene = viewer.scene
-      layers = viewer.scene.imageryLayers;
       viewer.scene.globe.enableLighting = true
       viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(...map_config.MAP_CENTER, 30000),
         orientation: {
           heading: Cesium.Math.toRadians(0), // 旋转角度
           pitch: Cesium.Math.toRadians(-90.0), // 相机方向
-        }
+        },
+        dutation:0.5
       });
       return viewer
     },
@@ -87,14 +85,27 @@ export default {
 }
 </script>
 <style>
-.cesium-viewer-timelineContainer{
+.cesium-viewer-timelineContainer {
   z-index: 15;
   left: 625px !important;
-  width: 1025px !important ;
+  width: 1025px !important;
   /*right: 260px !important;*/
-  bottom: 32px !important;
-  height:47px !important;
+  bottom: 35px !important;
+  height: 40px !important;
+}
+
+.cesium-timeline-bar {
+  height: 30px;
+}
+
+.cesium-timeline-main {
+  height: inherit;
+}
+
+.cesium-timeline-trackContainer {
+  height: unset !important;
 }
+
 /* pop框css*/
 .cesium-popup-panel {
   opacity: 0.8;
@@ -102,66 +113,14 @@ export default {
   position: absolute;
   z-index: 0;
   /*color: #00fcf9;*/
-
   /*background: rgba(23, 50, 108, 0.6);*/
   /*border: 1px solid #4674d6;*/
 }
-/*.cesium-popup-tip-panel {*/
-/*  width: 40px;*/
-/*  height: 20px;*/
-/*  position: absolute;*/
-/*  left: 50%;*/
-/*  bottom: -20px;*/
-/*  margin-left: -20px;*/
-/*  overflow: hidden;*/
-/*  pointer-events: none;*/
-/*  opacity: 0.8;*/
-/*}*/
-/*.cesium-popup-tip-bottom {*/
-/*  width: 17px;*/
-/*  background: rgba(23, 50, 108, 0.8);*/
-/*  border-bottom: 1px solid #4674d6;*/
-/*  height: 17px;*/
-/*  padding: 1px;*/
-/*  margin: -10px auto 0;*/
-/*  -webkit-transform: rotate(45deg);*/
-/*  -moz-transform: rotate(45deg);*/
-/*  -ms-transform: rotate(45deg);*/
-/*  transform: rotate(45deg);*/
-/*}*/
-/*.cesium-popup-header-panel {*/
-/*  !* display: flex; *!*/
-/*  !* justify-content: space-between; *!*/
-/*  align-items: center;*/
-/*  font-size: 14px;*/
-/*  padding: 5px 15px;*/
-/*  background: rgba(23, 50, 108, 0.8);*/
-
-/*  border-bottom: 1px solid #4674d6;*/
-/*}*/
-
-/*.cesium-poput-header-title {*/
-/*  font-size: 16px;*/
-/*  font-family: Microsoft YaHei;*/
-/*  font-weight: 400;*/
-/*  color: #ffffff;*/
-/*}*/
 
-/*.cesium-popup-content-panel {*/
-/*  padding: 18px;*/
-/*}*/
-/*.cesium-popup-close-btn{*/
-/*  float: right;*/
-/*  position: relative;*/
-/*  right: 10px;*/
-/*}*/
-/*.cesium-popup-close-btn,*/
-/*.cesium-popup-close-btn:focus {*/
-/*  cursor: pointer;*/
-/*}*/
-cesium-popup-close-btn > svg:hover {
+.cesium-popup-close-btn > svg:hover {
   color: #00fcf9 !important;
 }
+
 .cesium-popup-close-btn > svg {
   display: none;
   user-select: auto;
@@ -170,4 +129,9 @@ cesium-popup-close-btn > svg:hover {
   width: 15px;
   /* height: 15px; */
 }
+
+.cesium-viewer {
+  position: unset;
+}
+
 </style>

wj-manage-web/src/components/Standard/pigination.vue

@@ -93,7 +93,7 @@ export default {
 
 <style scoped>
 .pagination-container {
-  background: #fff;
+  /*background: #fff;*/
   padding: 8px 0px;
 }
 .pagination-container.hidden {

wj-manage-web/src/components/navigator/index.vue

@@ -278,6 +278,7 @@ export default {
   margin-top: 49px;
 }
 .bp-management-navigator{
+  box-shadow: 0px 0px 22px 20px #030916;
   z-index: 4;
   .el-dropdown-link{
     display: flex;

wj-manage-web/src/dao/dict.js

@@ -5,4 +5,6 @@ import fetch from '@/utils/fetch'
 export const dictCarType = () => fetch('/design/config/dictionary/byCondition', {"catalogId":"C5605A95172543A9B46E9561DB8BEF8D"}, 'POST')
 export const dictCarColor = () => fetch('/design/config/dictionary/byCondition', {"catalogId":"3393F1704E4643BFA6FC20D1EADDFFAB"}, 'POST')
 export const dictPlateColor = () => fetch('/design/config/dictionary/byCondition', {"catalogId":"21919BD35547413A990CC69B9D305370"}, 'POST')
+export const dictTrafficActor = () => fetch('/design/config/dictionary/byCondition', {"catalogId":"21F5FDB7B45343BDB54BABD2243299FC"}, 'POST')
+export const dictCrossInfo = (data={}) => fetch(api_config.cross_api, data, 'POST')
 

wj-manage-web/src/dao/situation.js

@@ -2,6 +2,8 @@ import fetch from '@/utils/fetch'
 
 export const crossInfo = () => fetch('/holo/base-cross-info/list', {}, 'GET')
 
+
+
 export const eventInfo = (data) => fetch('/holo/event-info/list', data, 'GET')
 
 export const inletWayRealTime = (data) => fetch('/holo/analysis-rid-entrace-indicator/realtime', data, 'GET')

wj-manage-web/src/dao/track.js

@@ -6,10 +6,10 @@ export const queryVehicleTrack = (data) => fetch('/holo/carTrack/page', data, 'P
 export const queryTrackDetail = (data) => fetch('/holo/carTrack/replay', data, 'GET')
 
 // 收藏轨迹
-export const favTrack = (data) => fetch('', data, 'GET')
+export const favTrack = (params) => fetch('/holo/attention-car/attention', {}, 'POST',params)
 
 // 取消收藏轨迹
-export const disFavTrack = (data) => fetch('', data, 'GET')
+export const disFavTrack = (params) => fetch('/holo/attention-car/cancelAttention',{}, 'POST',params)
 
 // 获取当前用户收藏的轨迹(重点车辆轨迹)
-export const getAllFavTracks = (data) => fetch('', data, 'GET')
+export const getAllFavTracks = (data) => fetch('/holo/attention-car/list', data, 'GET')

wj-manage-web/src/utils/fetch/fetch.js

-import { baseUrl } from "@/config/baseUrl";
+import {baseUrl} from "@/config/baseUrl";
 
-function Async(url = "", data = {}, type = "GET") {
-  let authorization = "";
+function Async(url = "", data = {}, type = "GET", params = {}) {
+    console.log(url,data,type,params)
+    let authorization = "";
 
-  this.url = url;
-  this.data = data;
-  this.type = type;
-  this.fetch = false;
-  this.httpProvider = {};
-  this.init = function() {
-    this.url = baseUrl + this.url;
-    this.type = this.type.toUpperCase();
-    if (type == "GET") {
-      let dataStr = ""; // 数据拼接字符串
-      Object.keys(this.data).forEach(key => {
-        dataStr += `${key}=${this.data[key]}&`;
-      });
-      if (dataStr !== "") {
-        dataStr = dataStr.substr(0, dataStr.lastIndexOf("&"));
-        this.url = `${this.url}?${dataStr}`;
-      }
-    }
-    if (window.fetch) {
-      this.fetch = true;
-    }
-  };
-  this.send = async function() {
-    this.init();
-    let res = false;
-    if (this.fetch) {
-      res = await this.fetchAPI();
-    } else {
-      res = await this.httpAPI();
-    }
-    return res;
-  };
-  this.fetchAPI = async function() {
-    const requestConfig = {
-      credentials: "include",
-      method: this.type,
-      headers: Object.assign({
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        authorization,
-      }),
-      mode: "cors",
-      cache: "no-cache"
+    this.url = url;
+    this.data = data;
+    this.params = params
+    this.type = type;
+    this.fetch = false;
+    this.httpProvider = {};
+    this.init = function () {
+        this.url = baseUrl + this.url;
+        this.type = this.type.toUpperCase();
+        if (type == "GET") {
+            let dataStr = ""; // 数据拼接字符串
+            Object.keys(this.data).forEach(key => {
+                dataStr += `${key}=${this.data[key]}&`;
+            });
+            if (dataStr !== "") {
+                dataStr = dataStr.substr(0, dataStr.lastIndexOf("&"));
+                this.url = `${this.url}?${dataStr}`;
+            }
+        }
+        if (window.fetch) {
+            this.fetch = true;
+        }
+    };
+    this.send = async function () {
+        this.init();
+        let res = false;
+        if (this.fetch) {
+            res = await this.fetchAPI();
+        } else {
+            res = await this.httpAPI();
+        }
+        return res;
     };
-    if (this.type == "POST") {
-      Object.defineProperty(requestConfig, "body", {
-        value: JSON.stringify(this.data)
-      });
-    }
-    this.runHttpProvider("request", requestConfig);
-    var response = await fetch(this.url, requestConfig);
-    let responseJson = {};
-    if (response.status == 200) {
-      try {
-        responseJson = await response.json();
-      } catch (e) {}
-    }
-    this.runHttpProvider("response", response, responseJson);
-    if (response.status == 200) {
-      return responseJson;
-    }
-    return false;
-  };
-  this.httpAPI = function() {
-    return new Promise((resolve, reject) => {
-      let requestObj;
-      if (window.XMLHttpRequest) {
-        requestObj = new XMLHttpRequest();
-      } else {
-        requestObj = new ActiveXObject();
-      }
-      let sendData = "";
-      if (this.type == "POST") {
-        sendData = JSON.stringify(this.data);
-      }
-      requestObj.open(this.type, this.url, true);
-      requestObj.setRequestHeader("Content-type", "application/json");
-      requestObj.send(sendData);
-      requestObj.onreadystatechange = () => {
-        if (requestObj.readyState == 4) {
-          if (requestObj.status == 200) {
-            let obj = requestObj.response;
-            if (typeof obj !== "object") {
-              obj = JSON.parse(obj);
+    this.fetchAPI = async function () {
+        const requestConfig = {
+            credentials: "include",
+            method: this.type,
+            headers: Object.assign({
+                Accept: "application/json",
+                "Content-Type": "application/json",
+                authorization,
+            }),
+            mode: "cors",
+            cache: "no-cache"
+        };
+        if (this.type == "POST") {
+            if (Object.keys(this.data).length) {
+                Object.defineProperty(requestConfig, "body", {
+                    value: JSON.stringify(this.data)
+                });
+            }
+            if (Object.keys(this.params).length) {
+
+                let dataStr = "";
+                Object.keys(this.params).forEach(key => {
+                    dataStr += `${key}=${this.params[key]}&`;
+                });
+                if (dataStr !== "") {
+                    dataStr = dataStr.substr(0, dataStr.lastIndexOf("&"));
+                    this.url = `${this.url}?${dataStr}`;
+                }
+            }
+        }
+        this.runHttpProvider("request", requestConfig);
+        var response = await fetch(this.url, requestConfig);
+        let responseJson = {};
+        if (response.status == 200) {
+            try {
+                responseJson = await response.json();
+            } catch (e) {
             }
-            resolve(obj);
-          } else {
-            reject(requestObj);
-          }
         }
-      };
-    });
-  };
-  this.runHttpProvider = function(...arr) {
-    const fn = this.httpProvider()[arr[0]];
-    if (fn && typeof fn === "function") {
-      arr.shift();
-      fn(...arr);
-    }
-  };
+        this.runHttpProvider("response", response, responseJson);
+        if (response.status == 200) {
+            return responseJson;
+        }
+        return false;
+    };
+    this.httpAPI = function () {
+        return new Promise((resolve, reject) => {
+            let requestObj;
+            if (window.XMLHttpRequest) {
+                requestObj = new XMLHttpRequest();
+            } else {
+                requestObj = new ActiveXObject();
+            }
+            let sendData = "";
+            if (this.type == "POST") {
+                sendData = JSON.stringify(this.data);
+            }
+            requestObj.open(this.type, this.url, true);
+            requestObj.setRequestHeader("Content-type", "application/json");
+            requestObj.send(sendData);
+            requestObj.onreadystatechange = () => {
+                if (requestObj.readyState == 4) {
+                    if (requestObj.status == 200) {
+                        let obj = requestObj.response;
+                        if (typeof obj !== "object") {
+                            obj = JSON.parse(obj);
+                        }
+                        resolve(obj);
+                    } else {
+                        reject(requestObj);
+                    }
+                }
+            };
+        });
+    };
+    this.runHttpProvider = function (...arr) {
+        const fn = this.httpProvider()[arr[0]];
+        if (fn && typeof fn === "function") {
+            arr.shift();
+            fn(...arr);
+        }
+    };
 }
+
 export default Async;

wj-manage-web/src/utils/fetch/index.js

 import Async from "./fetch";
 
-export default async (url = "", data = {}, type = "GET", notify = false) => {
-  const $http = new Async(url, data, type);
+export default async (url = "", data = {}, type = "GET",params={}, notify = false) => {
+  const $http = new Async(url, data, type,params);
   $http.httpProvider = function() {
     return {
       response(response, responseJson) {

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

@@ -45,7 +45,7 @@ export default {
 
 <style lang='less' scoped>
 #e_popup {
-  font-family: SiYuanHT;
+  //font-family: SiYuanHT;
   width: 281px;
   height: 233px;
   background-color: #0f2645;

wj-manage-web/src/views/track/menuTrafficCrowd.vue

@@ -20,14 +20,14 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item label="拥堵地点:" prop="crossId">
-            <el-select placeholder="请选择拥堵地点" class="select-speed" v-model="searchForm.crossId">
+            <el-select placeholder="请选择拥堵地点" class="select-speed" clearable v-model="searchForm.crossId">
               <el-option v-for="item of dict.crossOptions" :key="item.id" :label="item.name"
                          :value="item.id"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="拥堵程度:" prop="type">
-            <el-select placeholder="请选择拥堵程度" class="select-speed" v-model="searchForm.type">
-              <el-option v-for="item of dict.carTypeOptions" :key="item.code" :label="item.name"
+            <el-select placeholder="请选择拥堵程度" class="select-speed" clearable v-model="searchForm.type">
+              <el-option v-for="item of options" :key="item.code" :label="item.name"
                          :value="item.code"></el-option>
             </el-select>
           </el-form-item>
@@ -317,7 +317,7 @@ export default {
 .track_tree {
   z-index: 2;
   position: absolute;
-  padding: 16px;
+  padding: 24px 16px 16px 16px;
   top: 50%;
   transform: translateY(-50%);
   bottom: 0;

wj-manage-web/src/views/track/menuTrafficEvent.vue

-4
 <template>
   <div class="track_tree" :class="[show?'l_show':'l_hidden']">
     <msg-card class="msgCard" title="交通事件轨迹回溯">
@@ -20,25 +19,25 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item label="事件地点:" prop="crossId">
-            <el-select placeholder="请选择事件地点" class="select-speed" v-model="searchForm.crossId">
+            <el-select clearable placeholder="请选择事件地点" class="select-speed" v-model="searchForm.crossId">
               <el-option v-for="item of dict.crossOptions" :key="item.id" :label="item.name"
                          :value="item.id"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="事件类型:" prop="type">
-            <el-select placeholder="请选择事件类型" class="select-speed" v-model="searchForm.type">
-              <el-option v-for="item of dict.carTypeOptions" :key="item.code" :label="item.name"
+            <el-select clearable placeholder="请选择事件类型" class="select-speed" v-model="searchForm.type">
+              <el-option v-for="item of options" :key="item.code" :label="item.name"
                          :value="item.code"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="交通参与者:" prop="color">
-            <el-select placeholder="请选择交通参与者" class="select-speed" v-model="searchForm.color">
-              <el-option v-for="item of dict.carColorOptions" :key="item.code" :label="item.name"
-                         :value="item.code"></el-option>
+            <el-select clearable placeholder="请选择交通参与者" class="select-speed" v-model="searchForm.color">
+              <el-option v-for="item of dict.trafficActorOptions" :key="item.id" :label="item.name"
+                         :value="item.id"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="号牌号码:" prop="plateNum">
-            <el-input placeholder="请输入车辆号牌号码" v-model="searchForm.plateNum"></el-input>
+            <el-input clearable placeholder="请输入车辆号牌号码" v-model="searchForm.plateNum"></el-input>
           </el-form-item>
         </el-form>
         <div class="submit-form">
@@ -327,7 +326,7 @@ export default {
 .track_tree {
   z-index: 2;
   position: absolute;
-  padding: 16px;
+  padding: 24px 16px 16px 16px;
   top: 50%;
   transform: translateY(-50%);
   bottom: 0;

wj-manage-web/src/views/track/trackTypes.vue

@@ -63,6 +63,7 @@ export default {
   background-color: #030916;
   z-index: 3;
   left: 0;
+  font-size: 14px;
   top: 0;
   width: 46px;
   color: white;

wj-manage-web/src/views/track/vehicleDetail.vue

@@ -16,21 +16,17 @@
       <div class="detailItem">
         <span class="left">当前时间：</span>
         {{model.time}}
-<!--        {{ time }}-->
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import dict from "../../config/holo/dictionary";
 export default {
   name: "vehicleDetail",
   data() {
     return {
       realType:'',
-      time:(new Date()).toLocaleString(),
-      timer:null,
     };
   },
   props: ["model",'dict'],
@@ -38,16 +34,12 @@ export default {
     model: {
       handler(val) {
         // console.log('dataObj deep change', val)
-
       },
       deep: true, // 深度监听
       immediate: true, // 初次监听即执行
     }
   },
   mounted() {
-    // this.timer = setInterval(()=>{
-    //   this.time = (new Date()).toLocaleString()
-    // })
     console.log('type',this.model)
     for(let item of this.dict){
       if(item.code == this.model.type){
@@ -63,7 +55,6 @@ export default {
   computed: {
   },
   beforeDestroy() {
-    // clearInterval(this.timer)
   },
 };
 </script>