Skip to content

H
holo-web
Commit d183227c authored by ninglx's avatar ninglx
Browse files
Options

大屏展示轨迹&添加道路图层&点击展示车辆详情

parent 33c94801
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 13160 additions and 11973 deletions
wj-data-vision-new/public/DATA.json
View file @ d183227c
This diff is collapsed.
wj-data-vision-new/src/components/map/index.vue
View file @ d183227c
......@@ -26,6 +26,7 @@ export default {
zoom: map_config.MAP_ZOOM,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
bearing: map_config.MAP_BEARING
},
option
);
......
wj-data-vision-new/src/config/dictionary.js 0 → 100644
View file @ d183227c
export default {
vehicleTypes: {
0: '未知',
1: '小客车',
2: '大货车',
3: '大巴车',
4: '行人',
5: '自行车',
6: '电动车',
7: '中巴车',
8: '危化车',
// 9: '以撒物',
10: '小货车',
11: '中货车',
12: '救护车',
// 13: '消防车',
14: '机动摩托车',
15: '小巴车',
150: '外卖车',
151: '外卖车（美团）',
152: '外卖车（饿了么）',
153: '外卖车（肯德基）',
154: '外卖车（麦当劳）',
160: '快递车',
// 161: '快递车（京东）',
// 162: '快递车（顺丰）',
// 163: '快递车（申通）',
// 164: '快递车（圆通）',
// 165: '快递车（中通）',
// 166: '快递车（韵达）',
170: '货车-车轴型为11',
// 171: '货车-车轴型为12',
// 172: '货车-车轴型为15',
// 173: '货车-车轴型为122',
// 174: '货车-车轴型为125',
// 175: '货车-车轴型为125',
// 176: '货车-车轴型为115',
// 177: '货车-车轴型为127',
// 178: '货车-车轴型为1125',
// 179: '货车-车轴型为155',
// 180: '货车-车轴型为1127',
// 181: '货车-车轴型为117',
// 182: '货车-车轴型为147',
// 183: '货车-7轴及以上',
},
vehicleColors: {
0: '未知',
1: '白色',
2: '黑色',
3: '红色',
4: '银色',
5: '黄色',
6: '蓝色',
7: '彩色/杂色',
8: '棕色',
9: '灰色',
},
vehicleRealColors: {
0: '#ffffff',
1: '#ffffff',
2: '#1f1d1e',
3: '#8d150f',
4: '#77787b',
5: '#ffd400',
6: '#062cb4',
7: '#ffffff',
8: '#804000',
9: '#77787b',
},
colorMatch:{
'未知':'#ffffff',
'白色':'#ffffff',
'彩色/杂色':'#ffffff',
'黑色':'#1f1d1e',
'红色':'#8d150f',
'银色':'#c1c4ca',
'黄色':'#ffd400',
'蓝色':'#1e41be',
'棕色':'#804000',
'灰色':'#77787b',
},
lightModelDict: {
// 0: 杆色
// 1: 灯罩色
// 1 2 3 红 绿 黄
// :2, //右红
// :3, //右黄
// :4, //右绿
// :5, //下黄
// :6, //下绿
// :7, //下红
// :8, //直红
// :9, //直绿
// :10, //直黄
// :11, //左红
// :12, //左绿
// :13, //左黄
// 14：标志
},
eventType:{
1: '非机动车事件',
2:"行人事件",
3:'机动车事件'
},
equip_weather:{
windDir:{
1:'北风',
2:'东北风',
3:'东风',
4:'东南风',
5:'南风',
6:'西南风',
7:'西风',
8:'西北风',
},
vis:{
1:'能见度20-30公里 能见度极好',
2:'能见度15-25公里 能见度好',
3:'能见度10-20公里 能见度一般',
4:'能见度5-15公里 能见度较差',
5:'能见度1-10公里 轻雾 能见度差',
6:'能见度0.3-1公里 大雾 能见度很差',
7:'能见度小于0.3公里 重雾 能见度极差',
8:'能见度小于0.1公里 浓雾 能见度极差',
9:'能见度不足100米',
}
},
carTypeGlbMap:{
0:'0',
1:'0',
2:'2',
3:'3',
4:'4',
5:'5',
6:'6',
7:'7',
8:'8',
9:'0',
10:'10',
11:'11',
12:'12',
13:'0',
14:'14',
150:'14',
151:'14',
152:'14',
153:'14',
154:'14',
160:'11',
161:'11',
162:'11',
163:'11',
164:'11',
165:'11',
166:'11',
170:'170',
171:'170',
172:'170',
173:'170',
174:'170',
175:'170',
176:'170',
177:'170',
178:'170',
179:'170',
180:'170',
181:'170',
182:'170',
183:'170',
}
}
wj-data-vision-new/src/config/mapAssets.js
View file @ d183227c
......@@ -9,4 +9,16 @@ export default {
illegalPoint: require("../assets/images/mapIcons/point_illegal.png"),
workPoint: require("../assets/images/mapIcons/point_work.png"),
},
licenses:{
license0: require('../assets/images/license/0.png'),
license1: require('../assets/images/license/1.png'),
license2: require('../assets/images/license/2.png'),
license3: require('../assets/images/license/3.png'),
license4: require('../assets/images/license/4.png'),
license5: require('../assets/images/license/5.png'),
license6: require('../assets/images/license/6.png'),
license9: require('../assets/images/license/9.png'),
license11: require('../assets/images/license/11.png'),
license12: require('../assets/images/license/12.png'),
}
};
wj-data-vision-new/src/config/websocket.js 0 → 100644
View file @ d183227c
let sockets = []
// readyState: 0-正在连接 1-已经连接 2-连接正在关闭 3-已关闭或没连接成功
function onOpen(e, data) {
console.log('open && send ...', data.name)
for (let it of sockets) {
if (it.name === data.name && it.ws.readyState === 1) {
it.ws.send(data.sendData)
}
}
}
function onError(e, data) {
console.log('ws error...', e, data)
}
function onClose(e, data) {
console.log('ws close...', 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错误信息
currentSocket.onerror = (e) => onError(e, data)
// 断开连接
currentSocket.onclose = (e) => onClose(e, data)
sockets.push({
name: data.name, ws: currentSocket,
})
return {
name: data.name, url: data.url, status: data.status, ws: currentSocket,
}
}
}
wj-data-vision-new/src/config/wsSource.js 0 → 100644
View file @ d183227c
let baseURL = ws_config.BASE_URL
export default {
source: [
{
name: 'callPasserby',
url: baseURL,
status: 0,
},
{
name: 'callCar',
url: baseURL,
status: 0,
},
{
name: 'callLight',
url: baseURL,
status: 0,
},
],
}
wj-data-vision-new/src/dao/dict.js 0 → 100644
View file @ d183227c
import request from '../utils/request'
// 字典请求 统一存放vuex(store/modules/dict.js)避免过多网络请求
// 车辆类型
export const dictCarType = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "C5605A95172543A9B46E9561DB8BEF8D" }
})
// 车身颜色
export const dictCarColor = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "3393F1704E4643BFA6FC20D1EADDFFAB" }
})
// 车牌颜色
export const dictPlateColor = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "21919BD35547413A990CC69B9D305370" }
})
// 交通参与者类型
export const dictTrafficActor = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "21F5FDB7B45343BDB54BABD2243299FC" }
})
// 路口
export const dictCrossInfo = () =>
request({
url: '/holo/base-cross-info/list',
method: 'get',
params: {}
})
// 拥堵程度
export const dictCrowdDeep = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "6CD69A4E08F24C1283244AC080A05277" }
})
// 所有权
export const dictOwner = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "5337B2F0F859459B9104A6490EAEE8C4" }
})
// 使用性质
export const dictNature = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "D848A3522E2042D5BAFA2F5523293128" }
})
// 本地外地
export const dictIfLocal = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "C792ACCD0E9D49A6A288431113B87E92" }
})
// 事件类型
export const dictEventType = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "DF33F67CAC5F4BAC9882FA77EEFF6E83" }
})
// 能见度
export const dictVisibility = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "A4520085B0A0458080010A9DD6C4020B" }
})
// 方向
export const dictDirection = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "2230A28A0DA24302A9E5BD6D43303E65" }
})
// 路口类型
export const dictCrossType = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "2313A8C2BCEE43C39BDD5C86225B27C9" }
})
// 畅通/拥堵 1234
export const dictTrafficStatus = () =>
request({
url: '/design/config/dictionary/byCondition',
method: 'post',
data: { catalogId: "DD55064E648446D7820E037B9041AC99" }
})
\ No newline at end of file
wj-data-vision-new/src/store/index.js
View file @ d183227c
......@@ -3,7 +3,7 @@ import Vuex from "vuex";
import app from "./modules/app";
import dataset from "./modules/dataset";
import menudata from "./modules/menudata";
import dicts from './modules/dict'
Vue.use(Vuex);
......@@ -11,7 +11,8 @@ const store = new Vuex.Store({
modules: {
app,
dataset,
menudata
menudata,
dicts
},
getters: {
menu: state => state.app.menu,
......
wj-data-vision-new/src/store/modules/dict.js 0 → 100644
View file @ d183227c
import * as dictApi from "../../dao/dict";
const dicts = {
// state子属性 key值命名来自dao/dict.js 中的方法名 以便策略模式请求
state: {
CarType: [],
CarColor: [],
PlateColor: [],
TrafficActor: [],
CrowdDeep: [],
Owner: [],
Nature: [],
IfLocal: [],
EventType: [],
CrossInfo: [],
Direction: [],
Visibility: [],
CrossType: [],
TrafficStatus:[]
},
actions: {
// 查询字典是否存在 并 请求 存储 vuex
async QUERY_DICT({ state }, typeParam) {
if (!state[typeParam.type].length) {
let res = await dictApi[`dict${typeParam.type}`]();
if (typeParam.type === "CrossInfo") {
for (let i = 0; i < res.content.length; i++) {
res.content[i].code = res.content[i].id;
}
}
state[typeParam.type] = res.content;
}
// return state[typeParam.type]
},
},
};
export default dicts;
wj-data-vision-new/src/utils/mapboxTools.js
View file @ d183227c
......@@ -40,6 +40,13 @@ function solveSingleLineArray(array) {
features.push(turf.lineString(array));
return turf.featureCollection(features);
}
function solveMultiLineArray(array){
let features = [];
for(let item of array){
features.push(turf.lineString(item.lineArray));
}
return turf.featureCollection(features);
}
function solvePolygonsBuffer(array) {
let features = [];
for (let item of array) {
......@@ -53,6 +60,35 @@ function solvePolygonsBuffer(array) {
return turf.featureCollection(features);
}
// 道路line图层
export function addOrUpdateRoadLine(map, layerName, arr){
let geo = solveMultiLineArray(arr)
if (!map.getSource(layerName)) {
map.addSource(layerName, {
type: "geojson",
data: geo,
});
} else {
map.getSource(layerName).setData(geo);
}
if (!map.getLayer(layerName)) {
map.addLayer({
id: layerName,
type: "line",
source: layerName,
layout:{
"line-join": 'round',
'line-cap':'round'
},
paint: {
"line-color": "rgba(120, 185, 255, 0.7)",
"line-width": 8,
'line-blur':2,
},
});
}
}
// 缓冲区图层
export function addOrUpdatePointBuffer(map, layerName, arr) {
let geo = solvePolygonsBuffer(arr);
......
wj-data-vision-new/src/utils/websocket.js 0 → 100644
View file @ d183227c
let ResponseCarTrack;
// let protobuf = require("protobufjs");
// protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", function (event, root) {
// ResponseCarTrack = root.lookupType("com.wanji.holo.proto.RealtimeCarTrack");
// });
// readyState: 0-正在连接 1-已经连接 2-连接正在关闭 3-已关闭或没连接成功
function onError(e, data) {
// console.log("ws error...", e, data);
}
function onClose(e, data) {
// console.log("ws close...", e, data);
}
// { url: '', name: '', callback: '' }
export function initWs(data) {
if (typeof WebSocket === undefined) {
console.error("您的浏览器不支持socket");
} else {
// console.log("init...", data);
let currentSocket = new ReconnectingWebSocket(data.url);
// 监听socket连接open
// currentSocket.onopen = (e) => onOpen(e, data)
// 监听socket错误信息
currentSocket.onerror = (e) => onError(e, data);
// 断开连接
currentSocket.onclose = (e) => onClose(e, data);
// 接收消息
currentSocket.onmessage = (res) => {
// protobuf 解压数据
// if (data.name === "callCar") {
// let reader = new FileReader();
// reader.onload = (e) => {
// let buf = new Uint8Array(e.target.result);
// let responseCarTrack = ResponseCarTrack.decode(buf);
// data.callback(responseCarTrack.carInfo);
// };
// reader.readAsArrayBuffer(res.data);
// } else {
if (res.data.startsWith("[") || res.data.startsWith("{")) {
data.callback(JSON.parse(res.data));
}
// }
};
return {
name: data.name,
url: data.url,
ws: currentSocket,
};
}
}
wj-data-vision-new/src/views/situationNew/popups/vehiclePopup.vue 0 → 100644
View file @ d183227c
<template>
<div class="vehicleDetail">
<div class="vehicleDetailInner">
<div class="head">
<span class="titleBefore"></span><span>{{ model.picLicense||'无数据' }}</span>
<!-- <span class="titleBefore"></span><span>北A64N95</span> -->
<!-- <span @click="closeDetail()">关闭</span> -->
</div>
<div class="content">
<!-- <div class="detailItem" v-for="item of model" :key="item">
<span class="left">{{ item.label }}</span
><span class="right">{{ item.value }}</span>
</div> -->
<div class="detailItem">
<span class="left">车辆号牌：</span>{{ model.picLicense||'无数据' }}
<!-- <span class="left">车辆号牌：</span>{{ '北A64N95'||'无数据' }} -->
</div>
<div class="detailItem">
<span class="left">ID ：</span
>{{ model.id }}
</div>
<div class="detailItem">
<span class="left">行驶速度：</span
>{{ model.speed }}
</div>
<div class="detailItem">
<span class="left">车身颜色：</span
>{{ color(model.originalColor) }}
</div>
<div class="detailItem">
<span class="left">航向角：</span
>{{ model.courseAngle }}
</div>
<div class="detailItem">
<span class="left">车辆类型：</span
>{{ type(model.originalType) }}
</div>
<div class="detailItem">
<span class="left">停车次数：</span
>{{ model.stopNum }}
</div>
<div class="detailItem" :title="`经纬度：${Number(model.longitude).toFixed(3) },${ Number(model.latitude).toFixed(3)}`">
<span class="left">经纬度：</span
>{{ Number(model.longitude).toFixed(3) }},{{ Number(model.latitude).toFixed(3) }}
</div>
</div>
</div>
<div class="vehicle_arrow"></div>
</div>
</template>
<script>
import dict from "../../../config/dictionary";
export default {
name: "vehicleDetail",
data() {
return {};
},
props: ["model"],
watch:{
model: {
handler(val) {
},
deep: true, // 深度监听
immediate: true, // 初次监听即执行
}
},
mounted() {
},
methods: {
color(num) {
return dict.vehicleColors[num];
},
closeDetail() {
this.$emit("actionFinished", this.dialogId, false);
},
type(num) {
return dict.vehicleTypes[num];
},
},
computed: {},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
// .vehicleDetail {
// font-size: 12PX;
// position: absolute;
// //bottom: 16PX;
// //right: 16PX;
// width: 216PX;
// //height: 207PX;
// padding: 2PX 16PX 6PX 16PX;
// background: url("../../../assets/images/holo/vehicle_popup_back.png");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// .head {
// height: 25PX;
// color: white;
// display: flex;
// align-items: center;
// span {
// display: inline-block;
// }
// .titleBefore {
// width: 18PX;
// height: 18PX;
// margin-right: 5PX;
// line-height: 25PX;
// background-image:url('../../../assets/images/holo/vehicle_popup_icon.png');
// background-position: center;
// background-repeat: no-repeat;
// }
// }
// .content {
// height: calc(100% - 25PX);
// display: flex;
// padding-top: 12PX;
// //flex-flow: row wrap;
// flex-direction: column;
// .detailItem {
// height: 30PX;
// line-height: 30PX;
// white-space: nowrap;
// color: white;
// //width: 50%;
// max-width: 200PX;
// overflow: hidden;
// text-overflow: ellipsis;
// span {
// display: inline-block;
// }
// span.left {
// text-align: left;
// padding-left: 20PX;
// //width: 50%;
// background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
// background-size: auto;
// background-repeat: no-repeat;
// background-position: left;
// color: rgba(207, 238, 255, 0.9);
// }
// span.right {
// text-align: left;
// color: white;
// }
// }
// }
// }
.vehicleDetail {
font-size: 12PX;
position: relative;
width: 216PX;
.closeButton {
position: absolute;
right: 20PX;
top: 17PX;
color: white;
font-size: 22PX;
cursor: pointer;
}
.closeButton:hover {
color: #019bf5;
}
.vehicleDetailInner {
width: 100%;
height: calc(100% - 25PX);
padding: 2PX 16PX 6PX 16PX;
background-image: url("../../../assets/images/holo/vehicle_popup_back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.head {
height: 30PX;
color: white;
display: flex;
align-items: center;
span {
display: inline-block;
}
.titleBefore {
width: 18PX;
height: 22PX;
margin-right: 5PX;
line-height: 30PX;
background-image: url("../../../assets/images/holo/vehicle_popup_icon.png");
background-position: center;
background-repeat: no-repeat;
}
}
.content {
height: calc(100% - 25PX);
display: flex;
padding-top: 12PX;
//flex-flow: row wrap;
flex-direction: column;
.detailItem {
height: 30PX;
line-height: 30PX;
white-space: nowrap;
color: white;
//width: 50%;
max-width: 200PX;
overflow: hidden;
text-overflow: ellipsis;
span {
display: inline-block;
}
span.left {
text-align: left;
padding-left: 20PX;
//width: 50%;
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-size: auto;
background-repeat: no-repeat;
background-position: left;
color: rgba(207, 238, 255, 0.9);
}
span.right {
text-align: left;
color: white;
}
}
}
}
.vehicle_arrow {
height: 25PX;
background-image: url("../../../assets/images/holo/vehicelArrow.png");
background-size: auto 100%;
background-position-x: center;
background-repeat: no-repeat;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment