Skip to content

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

wj-smartcity 态势监测添加轨迹展示

parent 9dfca903
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1765 additions and 158 deletions
wj-smartcity/public/RealtimeCarInfo.proto 0 → 100644
View file @ a6f24828
syntax = "proto3";
package com.wanji.holo.proto;
option optimize_for = SPEED;
option java_package = "com.wanji.holo.proto";
option java_multiple_files = true;
//单车轨迹信息
message RealtimeCarInfo {
string id = 1; //记录编号
string picLicense = 2; //车牌号
int32 originalType = 3; //车辆类型
int32 originalColor = 4; //车辆颜色
int32 licenseColor = 5; //车牌颜色
double longitude = 6; //经度
double latitude = 7; //纬度
double speed = 8; //车速
double courseAngle = 9; //行驶角度【0~360】
int32 baseLocation = 10; //目标所在区域编号
double stopNum = 11; //停车次数
string eventType = 12; //事件类型
bool isAggregate = 13; //是否聚合
string aggregatePointNum = 14; //聚合点数量
string dateTime = 15; //车辆时间
map<string, string> extendAttribute = 17;
}
//数据类型对象
message DataType {
string dataType = 1;//数据类型
string leftDownXy = 2;//左边界
string rightUpXy = 3;//右边界
double level= 4;//缩放级别
}
//轨迹信息
message RealtimeCarTrack {
//轨迹
repeated RealtimeCarInfo carInfo = 1;
//数据帧时间
string frameTime = 2;
map<string, int32> detectorState = 3; //检测器状态
}
//分页信息
message Page {
int32 pageNum = 1;//页号
int32 pageSize = 2;//每页大小
int32 totalPageNum = 3;//总页数
}
message FrameList {
//数据帧集合
repeated RealtimeCarTrack frameInfo = 1;
//历史轨迹分析信息
Page pageInfo = 2;
}
wj-smartcity/public/index.html
View file @ a6f24828
......@@ -105,22 +105,28 @@
display: none !important;
}
.mapboxgl-ctrl-group {
background: transparent !important;
border-radius: 6px !important;
}
.mapboxgl-popup-close-button {
font-size: 26px;
color: white;
}
.mapboxgl-ctrl-logo {
display: none !important;
.vehicleDetailPopup .mapboxgl-popup-close-button {
right: 14px;
top: 18px;
}
* {
box-sizing: border-box;
.eventPopup .mapboxgl-popup-close-button {
right: 8px;
top: 10px;
}
.equipmentPopup .mapboxgl-popup-close-button {
right: 8px;
top: 10px;
}
.mapboxgl-ctrl-logo {
display: none !important;
}
</style>
</head>
......
wj-smartcity/src/config/holo/dictionary.js
View file @ a6f24828
export default {
noVehicleTypes:[150,151,152,153,154,6,5,4],
colorMatch: {
'未知': '#ffffff',
'白色': '#ffffff',
......
wj-smartcity/src/config/holo/mapAssets.js
View file @ a6f24828
......@@ -19,5 +19,14 @@ export default {
crossStatus1: require('../../assets/images/holo/crossStatus1.png'),
crossStatus2: require('../../assets/images/holo/crossStatus2.png'),
crossStatus3: require('../../assets/images/holo/crossStatus3.png'),
car0: require('../../assets/images/holo/carPic/car0.png'),
car1: require('../../assets/images/holo/carPic/car1.png'),
car3: require('../../assets/images/holo/carPic/car3.png'),
car4: require('../../assets/images/holo/carPic/car4.png'),
car5: require('../../assets/images/holo/carPic/car5.png'),
car6: require('../../assets/images/holo/carPic/car6.png'),
car7: require('../../assets/images/holo/carPic/car7.png'),
car10: require('../../assets/images/holo/carPic/car10.png'),
car14: require('../../assets/images/holo/carPic/car14.png'),
},
}
wj-smartcity/src/config/holo/websocket.js
View file @ a6f24828
let ResponseCarTrack;
let protobuf = require("protobufjs");
protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", function (event, root) {
protobuf.load("RealtimeCarInfo.proto", function (event, root) {
ResponseCarTrack = root.lookupType("com.wanji.holo.proto.RealtimeCarTrack");
});
......
wj-smartcity/src/dao/optApi.js
View file @ a6f24828
......@@ -13,10 +13,11 @@ export const getAbnormalList = (data) =>
method: 'post',
data: data
})
export const getKeyCross = () =>
export const getKeyCross = (data) =>
request({
url:`${baseUrl}/trend/hotspotCross`,
method: 'get',
method: 'post',
data: data
})
export const getSingalFlow = (data) => request({
url:`${baseUrl}/runningEvaluate/metricsDetail`,
......@@ -27,3 +28,15 @@ export const getFlows = ()=>request({
url:`${baseUrl}/trend/top5Flow`,
method:'get',
})
// 态势监测 路口级右侧图表 获取车道级数据
export const getCrossLaneData = (data) =>request({
url: `${baseUrl}/trend/crossLaneData`,
method: 'post',
data: data
})
// 态势监测 路口级右侧图表 获取转向级数据
export const getCrossTurnData = (data) =>request({
url: `${baseUrl}/trend/crossTurnData`,
method: 'post',
data: data
})
wj-smartcity/src/utils/mapboxTools.js
View file @ a6f24828
......@@ -209,7 +209,7 @@ export function sAddOrUpdateCrossStatus(map, geo){
"icon-size": 0.7,
"icon-offset": [0, -10],
},
});
},);
}
}
......@@ -467,7 +467,7 @@ export function addOrUpdateVehicle(map, geo) {
"circle-pitch-alignment": "map",
},
});
if (map.getLayer("holo_crossPoint")) map.moveLayer("holo_crossPoint");
if (map.getLayer("crossStatus")) map.moveLayer("crossStatus");
}
}
......
wj-smartcity/src/views/signal/index.vue
View file @ a6f24828
This diff is collapsed.
wj-smartcity/src/views/signal/mapPopup/alarmPopup.vue 0 → 100644
View file @ a6f24828
<template>
<div id="ala_popup">
<div class="leftTopIcon"></div>
<!-- <div class="top item" :class="`event${iconNameMap[model.eventType]}`">-->
<div class="top item" :class="`event3`">
{{ model.placeDesc }}
</div>
<!-- <div class="bottom item" :class="`event${iconNameMap[model.eventType]}-t`">-->
<div class="bottom item" :class="`event3-t`">
<div>{{ model.eventType }}</div>
<div class="line"></div>
<div>{{ `鲁A****${Math.floor(Math.random() * 10)}` }}</div>
</div>
<div class="arrow item">
<!-- <div class="el-icon-caret-bottom" :class="`back${iconNameMap[model.eventType]}-t`"></div>-->
</div>
</div>
</template>
<script>
export default {
name: "eventPopup",
props: ["model"],
components: {},
data() {
return {
iconNameMap: {
轻微拥堵: 1,
中度拥堵: 2,
重度拥堵: 3,
疑似事故: 4,
}
};
},
mounted() {
},
methods: {},
computed: {},
beforeDestroy() {
},
};
</script>
<style lang='less' scoped>
#ala_popup {
width: 200PX;
font-size: 14PX;
color: white;
display: flex;
position: relative;
flex-direction: column;
align-items: center;
.leftTopIcon{
position: absolute;
left: 0;
top: 0;
border: 4px solid #f24139;
height: 0;
width: 0;
border-right-color: transparent;
border-bottom-color: transparent;
}
.item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.el-icon-caret-bottom {
font-size: 34PX;
}
}
.top {
height: 40px;
}
.bottom {
padding: 0 20px;
font-size: 14PX;
height: 35PX;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: calc(50% - 20PX);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.line {
width: 2PX;
height: 70%;
background-color: rgba(255, 255, 255, 0.7);
}
}
.arrow {
margin-top: 10PX;
width: 26PX;
height: 30PX;
background-image: url("../../../assets/images/holo/eventPointRed.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.event1 {
background-color: rgba(255, 235, 59, 1);
}
.event2 {
background-color: rgba(255, 141, 26, 1)
}
.event3 {
//background-color: rgba(277, 5, 5, 1);
//background-color: #f24139;
background: linear-gradient(135deg, transparent 10px, #f24139 0);
}
.event4 {
background-color: rgba(24, 144, 255, 1)
}
.event1-t {
background-color: #78712c;
}
.event2-t {
background-color: #784b1e
}
.event3-t {
//background-color: #781516;
background-color: #3e0b08;
}
.event4-t {
background-color: #1c4d7a
}
.back1-t {
color: #78712c;
}
.back2-t {
color: #784b1e
}
.back3-t {
color: #781516
}
.back4-t {
color: #1c4d7a
}
}
</style>
wj-smartcity/src/views/signal/mapPopup/equipmentPopup.vue 0 → 100644
View file @ a6f24828
This diff is collapsed.
wj-smartcity/src/views/signal/mapPopup/eventPopup.vue 0 → 100644
View file @ a6f24828
<template>
<div id="e_popup">
<div class="header">事件详情</div>
<div class="main">
<div class="detail_item" v-for="(item,index) of eventDetails" :key="index">
<div class="detail_item_label">{{ item.label }}</div>
<div class="detail_item_value">{{ item.value }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "eventPopup",
props: ["model"],
components: {},
data() {
return {};
},
mounted() {
console.log("event", this.model);
},
methods: {},
computed: {
eventDetails() {
return [
{ label: "事件类型：", value: this.model.eventType },
{ label: "车牌号码：", value: this.model.plateNo },
{ label: "参与者类别：", value: this.model.objectType },
{ label: "检测时间：", value: this.model.detectTime },
{ label: "事件位置：", value: this.model.placeDesc },
];
},
},
beforeDestroy() {},
};
</script>
<style lang='less' scoped>
#e_popup {
//font-family: SiYuanHT;
width: 281PX;
height: 233PX;
background-color: #0f2645;
background-image: url("../../../assets/images/holo/eventbackground.png");
background-size: 100% 100%;
}
.header {
height: 43PX;
font-size: 18PX;
font-weight: 700;
line-height: 55PX;
padding-left: 12PX;
color: white;
//background:url('../../assets/images/holo/popupTop.png');
background-size: 100%;
}
.main {
font-size: 12PX;
height: calc(100% - 43PX);
border: 1PX solid #037bb2;
padding: 18PX;
display: flex;
flex-direction: column;
justify-content: space-between;
.detail_item {
height: 30PX;
display: flex;
align-items: center;
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-position-x: left;
background-position-y: center;
background-repeat: no-repeat;
.detail_item_label {
padding-left: 30PX;
//line-height: 24PX;
color: #bcdaec;
}
.detail_item_value {
//line-height: 24PX;
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
wj-smartcity/src/views/signal/mapPopup/vehicleDetail.vue 0 → 100644
View file @ a6f24828
<template>
<div class="vehicleDetail">
<!-- <div class="closeButton" @click="closeVehicleDetail">x</div> -->
<div class="vehicleDetailInner">
<div class="head">
<span class="titleBefore"></span
><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
</div>
<div class="content">
<div class="detailItem">
<span class="left">车辆号牌：</span>{{ model.picLicense || "无数据" }}
</div>
<div class="detailItem">
<span class="left">号牌颜色：</span
>{{ convertDict("PlateColor", model.licenseColor) }}
</div>
<div class="detailItem">
<span class="left">行驶速度：</span>{{ model.speed || 0 }} km/h
</div>
<div class="detailItem">
<span class="left">车身颜色：</span
>{{ convertDict("CarColor", model.originalColor) }}
</div>
<div class="detailItem">
<span class="left">航向角：</span>{{ model.courseAngle || 0 }}
</div>
<div class="detailItem">
<span class="left">车辆类型：</span
>{{ convertDict("CarType", model.originalType) }}
</div>
<div class="detailItem">
<span class="left">ID ：</span>{{ model.id }}
</div>
<div
class="detailItem"
:title="`经度：${Number(model.longitude).toFixed(6)}`"
>
<span class="left">经度：</span
>{{ Number(model.longitude).toFixed(6) }}
</div>
<div
class="detailItem"
:title="`纬度：${Number(
model.latitude
).toFixed(6)}`"
>
<span class="left">纬度：</span
>{{
Number(model.latitude).toFixed(6)
}}
</div>
</div>
</div>
<div class="vehicle_arrow"></div>
</div>
</template>
<script>
import store from "../../../store";
export default {
name: "vehicleDetail",
data() {
return {};
},
props: ["model"],
watch: {
},
mounted() {
console.log("model", this.model);
},
methods: {
convertDict(type, value) {
for (let item of store.state.dicts[type]) {
if (item.code == value) {
return item.name;
}
}
return "未定义";
},
closeDetail() {
this.$emit("actionFinished", this.dialogId, false);
},
},
computed: {},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
.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>
wj-smartcity/src/views/signal/mapPopup/warningPopup.vue 0 → 100644
View file @ a6f24828
<template>
<div id="e_popup" :class="`warning${typeMap[model.eventType]}`">
<div class="header">告警详情</div>
<div class="main">
<div class="detail_item" v-for="(item,index) of eventDetails" :key="index">
<div class="label">{{ item.label }}</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
<div class="arrow"></div>
</div>
</template>
<script>
export default {
name: "warningPopup",
props: ["model"],
components: {},
data() {
return {
typeMap: {
疑似事故: "max",
轻微拥堵: "min",
中度拥堵: "mid",
},
};
},
mounted() {
console.log("event", this.model);
},
methods: {},
computed: {
eventDetails() {
return [
{ label: "告警地点：", value: this.model.placeDesc },
{ label: "车牌号码：", value: this.model.plateNo },
{ label: "参与者类别：", value: this.model.objectType },
{ label: "开始时间：", value: this.model.startTime },
{ label: "结束时间：", value: this.model.endTime },
];
},
},
beforeDestroy() {},
};
</script>
<style lang="less" scoped>
#e_popup {
width: 281PX;
background-size: 100% 100%;
}
.header {
height: 34PX;
font-size: 18PX;
font-weight: 700;
line-height: 34PX;
padding-left: 12PX;
color: white;
//background:url('../../assets/images/holo/popupTop.png');
background-size: 100%;
}
.main {
font-size: 12PX;
height: calc(100% - 43PX);
border: none;
padding: 18PX;
display: flex;
flex-direction: column;
justify-content: space-between;
.detail_item {
height: 30PX;
display: flex;
align-items: center;
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-position-x: left;
background-position-y: center;
background-repeat: no-repeat;
.label {
padding-left: 30PX;
// color: #bcdaec;
}
.value {
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.arrow {
display: flex;
width: 100%;
height: 30PX;
text-align: center;
background-size: auto 100%;
background-repeat: no-repeat;
background-image: url("../../../assets/images/holo/vehicelArrow.png");
background-position-x: center;
}
}
.warningmax {
.header {
background-color: rgba(255, 102, 107);
}
.main {
background-color: #3c1b25;
}
}
.warningmin {
.header {
background-color: rgba(42, 130, 228, 1);
}
.main {
background-color: #061b47;
}
}
.warningmid {
.header {
background-color: rgba(246, 157, 20);
}
.main {
background-color: #533e1c;
}
}
</style>
wj-smartcity/src/views/signal/msgs/right/keyCross.vue
View file @ a6f24828
......@@ -24,45 +24,48 @@ export default {
},
methods: {
getData(){
getKeyCross().then(res=>{
getKeyCross({crossId:''}).then(res=>{
console.log('key cross...',res)
let xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
if(res.content){
let xData = res.content.map(item=>{
return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
})
let maxDirList = res.content.reduce((a,b)=>{
for(let item of b.detailList){
if(!a.includes(item.dir)){
a.push(item.dir)
}
}
}
return a
},[])
let results = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[item.dir] = [item.queueLength]
return a
},[])
let results = res.content.reduce((a,b)=>{
let flags = {}
for(let item of maxDirList){
flags[item] = false
}
}
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
for(let item of b.detailList){
flags[item.dir] = true
if(a[item.dir]){
a[item.dir].push(item.queueLength)
}else{
a[key] = [0]
a[item.dir] = [item.queueLength]
}
}
}
return a
},{})
console.log('results',results)
this.renderCharts(xData, results)
for(let key in flags){
if(!flags[key]){
if(a[key]){
a[key].push(0)
}else{
a[key] = [0]
}
}
}
return a
},{})
console.log('results',results)
this.renderCharts(xData, results)
}
})
},
renderCharts(xData, lists){
......
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