Skip to content

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

组织-联调接口绘制轨迹叠加点&修复部分问题

parent cbc0fe9c
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 225 deletions
wj-manage-web/src/components/Standard/map/pathMap.vue
View file @ bbe19e64
......@@ -109,7 +109,7 @@ export default {
renderPath(begin) {
if (this.dillPath.length && this.playStatus) {
let allData = this.diff(lastFrame.carInfo, this.dillPath[0].carInfo);
console.log(this.dillPath[0].frameTime);
// console.log(this.dillPath[0].frameTime);
this.$emit(
"timeChange",
new Date(this.dillPath[0].frameTime).getTime()
......
wj-manage-web/src/dao/efficiency.js
View file @ bbe19e64
......@@ -20,4 +20,6 @@ export const passerbyTrack = (data) => fetch('/holo/histrory-track/pedestrian-ef
// 非机动车历史轨迹
export const noVehicleTrack = (data) => fetch('/holo/histrory-track/non-motor-efficiency', data, 'POST')
// 机动车历史轨迹
export const vehicleTrack = (data) => fetch('/holo/histrory-track/motor-efficiency', data, 'POST')
\ No newline at end of file
export const vehicleTrack = (data) => fetch('/holo/histrory-track/motor-efficiency', data, 'POST')
// 所有轨迹
export const allTrack = (data) => fetch('/holo/histrory-track/info',data,'POST')
\ No newline at end of file
wj-manage-web/src/utils/l7Tools.js
View file @ bbe19e64
......@@ -5,13 +5,13 @@ export function addTrackEasyPoint(scene, msg) {
.source(msg, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
x: 'longitude',
y: 'latitude',
}
})
.size(4)
.size(2)
.shape('simple')
.color('red')
.color('#00fff1')
scene.addLayer(layer)
return layer
}
......
wj-manage-web/src/views/efficiency/crossCompare.vue
View file @ bbe19e64
<template>
<div class="cross_compare">
<!-- <div class="compare_t">
<div class="compare_total">
<div class="current_index">
路口效率指数
<span class="ysbth">{{
fullData.current.crossId ? fullData.current.efficiencyIndex : "未知"
}}</span>
<img class="upOrDownImage" alt="" :src="indexImg" />
</div>
<div class="current_level">
效率评价等级
<span class="ysbth">{{
fullData.current.crossId
? convertLevel(fullData.current.evaluationGrade)
: "未知"
}}</span>
<img class="upOrDownImage" alt="" :src="gradeImg" />
</div>
</div>
<div class="time_select">
<div class="select_label">对比时间：</div>
<el-date-picker
:clearable="false"
value-format="timestamp"
format="yyyy年MM月dd日 HH:mm"
v-model="cTimeStamp"
@change="timeSelectChange"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
<div class="time_interval_select">
<div>时间粒度：</div>
<el-radio-group @input="intervalChange" v-model="timeInterval">
<el-radio label="15m">15分钟</el-radio>
<el-radio label="30m">30分钟</el-radio>
<el-radio label="1h">1小时</el-radio>
</el-radio-group>
</div>
</div>
</div> -->
<div class="compare_b">
<div class="b_table">
<el-table
......@@ -90,7 +48,6 @@
label="趋势"
>
<template slot-scope="scope">
<!-- <span v-show="scope.row.current!==''&&scope.row.compare!==''">{{ Number(scope.row.current) - Number(scope.row.compare) }}</span>-->
<img
style="margin-right: 5px; vertical-align: sub"
v-if="
......@@ -111,8 +68,6 @@
alt=""
:src="down"
/>
<!-- {{convertDiff}}-->
<!-- <span v-show="typeof scope.row.current==='boolean'||typeof scope.row.current==='boolean'">-</span>-->
<span>{{ convertDiff(scope) }}</span>
</template>
</el-table-column>
......@@ -291,28 +246,6 @@ export default {
})(),
};
},
indexImg() {
if (this.fullData && this.fullData.current) {
return Number(this.fullData.current.efficiencyIndex) >
Number(this.fullData.compare.efficiencyIndex)
? this.up
: Number(this.fullData.current.efficiencyIndex) <
Number(this.fullData.compare.efficiencyIndex)
? this.down
: "";
}
},
gradeImg() {
if (this.fullData && this.fullData.current) {
return Number(this.fullData.current.evaluationGrade) >
Number(this.fullData.compare.evaluationGrade)
? this.up
: Number(this.fullData.current.evaluationGrade) <
Number(this.fullData.compare.evaluationGrade)
? this.down
: "";
}
},
},
props: [
"compareTable",
......@@ -420,13 +353,6 @@ export default {
return scope.row[which] + "s";
}
},
timeSelectChange() {
this.$emit("timeChange");
},
intervalChange() {
console.log("child intervalchagne");
this.$emit("intervalChange");
},
getTimeStr(dateTime) {
let date = new Date(dateTime);
let Y = date.getFullYear() + "-";
......@@ -712,73 +638,6 @@ export default {
flex-direction: column;
justify-content: space-between;
// .compare_t {
// width: 100%;
// //flex: 0 0 20%;
// height: 20%;
// display: flex;
// align-items: center;
// .compare_total {
// display: flex;
// width: 395px;
// margin-right: 30px;
// font-size: 14px;
// font-weight: 400;
// height: 100%;
// align-items: center;
// border: 1px solid #164573;
// box-shadow: inset 0px 0px 10px 0px rgba(0, 145, 255, 1);
// span {
// //font-size: 16px;
// //font-weight: 700;
// color: white;
// display: inline-block;
// margin-left: 10px;
// }
// .current_index {
// white-space: nowrap;
// display: flex;
// align-items: center;
// justify-content: center;
// width: 50%;
// }
// .current_level {
// display: flex;
// align-items: center;
// justify-content: center;
// white-space: nowrap;
// width: 50%;
// }
// }
// .time_select {
// display: flex;
// align-items: center;
// .select_label {
// margin-right: 5px;
// font-size: 16px;
// font-weight: 500;
// }
// .time_interval_select {
// display: flex;
// align-items: center;
// margin-left: 20px;
// font-weight: 400;
// font-size: 14px;
// ::v-deep .el-radio {
// margin-bottom: -2px;
// }
// }
// }
// }
.compare_b {
width: 100%;
//flex: 0 0 75%;
......@@ -941,11 +800,6 @@ export default {
}
}
.upOrDownImage {
margin-left: 5px;
display: inline-block;
}
.ysbth {
font-family: YouSheBiaoTiHei, serif;
font-size: 21px;
......
wj-manage-web/src/views/efficiency/index.vue
View file @ bbe19e64
......@@ -28,7 +28,7 @@
? fullData.current.efficiencyIndex
: "未知"
}}</span>
<img class="upOrDownImage" alt="" :src="indexImg()" />
<img class="upOrDownImage" alt="" :src="upOrDown()" />
</div>
<div class="current_level">
效率评价等级
......@@ -37,7 +37,7 @@
? levelMap[fullData.current.evaluationGrade]
: "未知"
}}</span>
<img class="upOrDownImage" alt="" :src="gradeImg()" />
<img class="upOrDownImage" alt="" :src="upOrDown(true)" />
</div>
</div>
<div class="time_select">
......@@ -103,20 +103,12 @@
>
{{ item.label }}
<span
style="
color: #409eff;
margin-left: 5px;
display: inline-block;
"
v-if="item.valueList.length"
class="checkLabelValue"
v-if="item.valueList && item.valueList.length"
>
{{
item.label.includes("率")
? item.valueList[item.valueList.length - 1] *
100
: item.valueList[item.valueList.length - 1]
}}<span v-show="item.label.includes('率')">%</span
><span v-show="item.label.includes('时长')">s</span>
{{ getCheckItemValue(item) }}
<span v-show="item.label.includes('率')">%</span>
<span v-show="item.label.includes('时长')">s</span>
</span>
</el-checkbox>
</el-checkbox-group>
......@@ -192,7 +184,9 @@
</el-table-column>
</el-table>
</div>
<div class="noDataChart" v-show="!tableData.length">
暂无数据
</div>
<div class="form_chart">
<div class="ef_chart" id="chart_no_vehicle"></div>
</div>
......@@ -215,24 +209,13 @@
>
{{ item.label }}
<span
style="
color: #409eff;
margin-left: 5px;
display: inline-block;
"
v-if="item.valueList.length"
class="checkLabelValue"
v-if="item.valueList && item.valueList.length"
>
{{
item.label.includes("率")
? item.valueList[item.valueList.length - 1] *
100
: item.valueList[item.valueList.length - 1]
}}<span v-show="item.label.includes('率')">%</span
{{ getCheckItemValue(item) }}
<span v-show="item.label.includes('率')">%</span
><span v-show="item.label.includes('时长')">s</span>
</span>
<!-- <span-->
<!-- style="color: #409eff;margin-left: 5px;display: inline-block">{{-->
<!-- item.value }}</span>-->
</el-checkbox>
</el-checkbox-group>
</div>
......@@ -255,7 +238,6 @@ import LeftMap from "./leftMap.vue";
import MsgCard from "../../components/Standard/msg-card.vue";
import CrossCompare from "./crossCompare.vue";
import { getFontSize } from "../../config/holo/fontSize";
import MapCompWithCtrl from "../../components/Standard/map/mapCompWithCtrl.vue";
import {
getEfficiencyContract,
noVehicleEfficiency,
......@@ -267,7 +249,6 @@ import PathMapCtrl from "./pathMapCtrl.vue";
export default {
components: {
MapCompWithCtrl,
CrossCompare,
MsgCard,
LeftMap,
......@@ -324,26 +305,30 @@ export default {
},
mounted() {},
methods: {
indexImg() {
if (this.fullData && this.fullData.current) {
return Number(this.fullData.current.efficiencyIndex) >
Number(this.fullData.compare.efficiencyIndex)
? this.up
: Number(this.fullData.current.efficiencyIndex) <
Number(this.fullData.compare.efficiencyIndex)
? this.down
: "";
}
getCheckItemValue(item) {
return item.valueList
? item.label.includes("率")
? item.valueList[item.valueList.length - 1] * 100
: item.valueList[item.valueList.length - 1]
: "";
},
gradeImg() {
upOrDown(inverse) {
if (this.fullData && this.fullData.current) {
return Number(this.fullData.current.evaluationGrade) >
Number(this.fullData.compare.evaluationGrade)
? this.up
: Number(this.fullData.current.evaluationGrade) <
Number(this.fullData.compare.evaluationGrade)
? this.down
: "";
let current = Number(this.fullData.current.evaluationGrade);
let compare = Number(this.fullData.compare.evaluationGrade);
if (inverse) {
return current > compare
? this.up
: current < compare
? this.down
: "";
} else {
return current > compare
? this.down
: current < compare
? this.up
: "";
}
}
},
timeStampToDate(time) {
......@@ -377,10 +362,10 @@ export default {
this.fullData.current = {};
this.fullData.compare = {};
this.$refs.passingRateComp.destroyChart();
this.updateBottomCharts(false);
this.updateBottomCharts();
},
// 选择对比时间变化时 不触发图表更新
updateBottomCharts(withUpdate) {
updateBottomCharts() {
this.chart_passerby?.clear();
this.chart_vehicle?.clear();
this.chart_no_vehicle?.clear();
......@@ -394,7 +379,7 @@ export default {
this.vehicleFormCheck = [];
this.vehicleCheckList = [];
this.tabsActiveName = "1";
withUpdate && this.switchTab1();
this.switchTab1();
},
// 获取对比时段所有信息 并与当前时段信息聚合 生成对比tableData
getCompareDate(noUpdateBottom) {
......@@ -438,7 +423,7 @@ export default {
}
}
this.$refs.passingRateComp.initChartData();
!noUpdateBottom && this.updateBottomCharts(true);
!noUpdateBottom && this.updateBottomCharts();
});
},
refreshChart(array, containerId) {
......@@ -486,7 +471,7 @@ export default {
let chartLength = array.length;
let emptyNumber = 0;
for (let item of array) {
if (item.timeList.length === 0) {
if (!item.valueList || item.timeList.length === 0) {
emptyNumber += 1;
}
}
......@@ -793,18 +778,13 @@ export default {
</script>
<style lang="less" scoped>
.no_data_content {
height: 100%;
width: 100%;
.noDataChart {
height: 40%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
.table_check {
display: inline-block;
margin-left: 8px;
font-size: 16px;
font-weight: 700;
}
::v-deep .el-table::before {
......@@ -947,7 +927,11 @@ export default {
flex: 1;
padding: 20px;
background-color: #0a1526;
.checkLabelValue {
color: #409eff;
margin-left: 5px;
display: inline-block;
}
.cross_item_tab {
height: 100%;
......
wj-manage-web/src/views/efficiency/pathMapCtrl.vue
View file @ bbe19e64
......@@ -92,7 +92,7 @@ export default {
methods: {
timeChange(getTime) {
let spend = getTime - new Date(this.params.startTime).getTime();
console.log(spend);
// console.log(spend);
this.currentTime = spend;
},
// ref调用此方法请求并播放轨迹
......
wj-manage-web/src/views/organization/mapTrack.vue
View file @ bbe19e64
<template>
<div style="height: 100%; width: 100%; position: relative">
<div
v-loading="loading"
element-loading-text="数据加载中.."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
style="height: 100%; width: 100%; position: relative"
>
<custom-map ref="mapTrack" map-id="map_item_2" :options="cmOption" />
</div>
</template>
<script>
let protobuf = require("protobufjs");
let FrameList;
protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", (event, root) => {
FrameList = root.lookupType("com.wanji.holo.proto.FrameList");
});
let map, scene;
import * as l7Tools from "../../utils/l7Tools";
import CustomMap from "../../components/Standard/map/customMap.vue";
import { allTrack } from "../../dao/efficiency";
export default {
name: "mapTrack",
components: {
......@@ -22,6 +34,7 @@ export default {
pitch: 0,
bearing: 0,
},
loading: false,
};
},
mounted() {
......@@ -32,16 +45,44 @@ export default {
[map, scene] = this.$refs.mapTrack.initMap();
},
refreshData() {
this.loading = true;
map.flyTo({
center: [this.rowData.longitude, this.rowData.latitude],
maxDuration: 1000,
zoom: 17.2,
});
let millPoints = []
for(let i = 0; i < 150000; i++){
millPoints.push({lng:Math.random()*100,lat:Math.random()*160})
}
l7Tools.addTrackEasyPoint(scene, millPoints)
let millPoints = [];
// for(let i = 0; i < 150000; i++){
// millPoints.push({lng:Math.random()*100,lat:Math.random()*160})
// }
// let param = {startTime:this.timeData.startDate,endTime:this.timeData.endDate, crossId:this.rowData.id}
let param = {
startTime: "2023-05-21 18:00:25",
endTime: "2023-05-21 18:00:30",
crossId: "12F6S08J8T0",
};
allTrack(param).then((res) => {
let buf = new Uint8Array(res);
let realData = FrameList.decode(buf);
let fullTrack = realData.frameInfo;
console.log("fullTrack", fullTrack);
for (let framData of fullTrack) {
for (let item of framData.carInfo) {
millPoints.push(item);
}
}
console.log("before render", millPoints);
//---
map.flyTo({
center: [millPoints[0].longitude, millPoints[0].latitude],
maxDuration: 1000,
zoom: 17.2,
});
//---
l7Tools.addTrackEasyPoint(scene, millPoints);
this.loading = false;
});
},
},
beforeDestroy() {
......
wj-manage-web/src/views/safety/analysisTypes.vue
View file @ bbe19e64
......@@ -216,6 +216,7 @@ export default {
axisLine: {
show: false,
},
// max: ,
splitLine: {
show: true,
lineStyle: {
......@@ -230,6 +231,49 @@ export default {
},
},
series: {
markLine: {
data: [
{
symbol: "none",
name: "警戒线",
yAxis: 60,
lineStyle: {
color: "rgba(173, 158, 21, 1)",
type: "solid",
cap: "butt",
},
label: {
show: true,
color: "rgba(217, 231, 255, 1)",
fontSize: 12,
position: "insideEnd",
formatter: () => {
return "警戒线";
},
},
},
{
symbol: "none",
name: "事故线",
yAxis: 90,
label: {
color: "rgba(217, 231, 255, 1)",
fontSize: 12,
show: true,
position: "insideEnd",
formatter: () => {
return "事故线";
},
},
lineStyle: {
color: "rgba(212, 48, 48, 1)",
type: "solid",
cap: "butt",
},
},
],
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
......@@ -340,6 +384,7 @@ export default {
this.init = false;
this.barChart.on("click", (params) => {
console.log("bar click...", params);
this.refreshBarColor(params.dataIndex);
this.refreshTableByTime(params.dataIndex);
this.refreshPieChart(params.dataIndex);
});
......@@ -348,12 +393,53 @@ export default {
this.barChart.setOption(option, true);
// 模拟点击最后一根柱子 即获取最新一条数据详情
if (res.content.length) {
this.refreshBarColor(res.content.length - 1);
this.refreshTableByTime(res.content.length - 1);
this.refreshPieChart(res.content.length - 1);
}
});
}
},
refreshBarColor(index) {
for (let i = 0; i < this.series1.length; i++) {
if (i === index) {
if (!this.series1[i].itemStyle) {
this.series1[i] = {
value: this.series1[index],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "rgba(179, 100, 77, 0.2)", // 0% 处的颜色
},
{
offset: 0.4,
color: "rgba(179, 100, 77, 0.5)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(179, 100, 77, 1)", // 100% 处的颜色
},
],
false
),
},
};
}
} else {
if (this.series1[i].itemStyle) {
this.series1[i] = this.series1[i].value;
}
}
}
let option = this.barChartOption;
this.barChart.setOption(option, true);
},
refreshTableByTime(index) {
console.log(this.barChartDataSource);
let params = this.barChartDataSource[index];
......
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