Skip to content

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

济南bug修改统一提交 灯态socket数据结构及展示逻辑修改

parent 7eec0073
Show whitespace changes
Inline Side-by-side
Showing with 1356 additions and 617 deletions
wj-manage-web/public/stopLines.json 0 → 100644
View file @ edfd5c94
{
"code": 200,
"content": [
{
"lkid": "13NF80B5QN0",
"ldid": "13NED0B5Q9013NF80B5QN00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.08578147,36.641840211,140.25],[117.085795887,36.641811561,140.25],[117.085809801,36.641786004,140.25],[117.085825559,36.641756681,140.25]]}",
"angle": 152.17,
"dirtype": "6"
},
{
"lkid": "13NGH0B5RC0",
"ldid": "13NF80B5QN013NGH0B5RC00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.089696322,36.643939476,130.339797974],[117.089708559,36.643916476,130.339797974],[117.089720462,36.643893072,130.289093018],[117.089732699,36.643869668,130.289093018],[117.089743428,36.643846667,130.199203491]]}",
"angle": 153.09,
"dirtype": "6"
},
{
"lkid": "13NF80B5QN0",
"ldid": "13NDG0B5RI013NF80B5QN00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.085816674,36.642064573,139.281295776],[117.085780799,36.642044935,139.421905518]]}",
"angle": 241.3,
"dirtype": "1"
},
{
"lkid": "13NF80B5QN0",
"ldid": "13NDT0B5Q9013NF80B5QN00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.085989174,36.641797975,139.468795776],[117.08601784,36.641816538,139.328094482],[117.086045332,36.641834562,139.230499268],[117.086060923,36.641844785,139.179702759]]}",
"angle": 56.88,
"dirtype": "4"
},
{
"lkid": "13NDG0B5RI0",
"ldid": "13NF80B5QN013NDG0B5RI00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.086327299,36.644873481,132.488296509],[117.086359989,36.644863931,132.539093018],[117.086387146,36.644855054,132.531295776]]}",
"angle": 107.11,
"dirtype": "5"
},
{
"lkid": "13NF80B5QN0",
"ldid": "13NGH0B5RC013NF80B5QN00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.086044997,36.642015881,139.078094482],[117.086024713,36.6420409,138.980499268],[117.086005937,36.642063632,138.94140625],[117.085984144,36.642089727,138.890594482]]}",
"angle": 320.51,
"dirtype": "2"
},
{
"lkid": "13NED0B5Q90",
"ldid": "13NF80B5QN013NED0B5Q900",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.083336134,36.64049981,149.730499268],[117.08331937,36.640526444,149.679702759],[117.083303779,36.640550656,149.62890625],[117.083286177,36.6405785,149.62890625]]}",
"angle": 327.59,
"dirtype": "2"
},
{
"lkid": "13NI00B5RM0",
"ldid": "13NGH0B5RC013NI00B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094602879,36.644970828,135.570297241],[117.094611721,36.644862003,135.519500732]]}",
"angle": 175.35,
"dirtype": "7"
},
{
"lkid": "13NID0B5RM0",
"ldid": "13NI00B5RM013NID0B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.095711008,36.644986195,137.230499268],[117.095711343,36.644955798,137.230499268],[117.095711846,36.644928762,137.179702759],[117.095711175,36.644897692,137.179702759]]}",
"angle": 179.89,
"dirtype": "7"
},
{
"lkid": "13NI00B5RM0",
"ldid": "13NG40B5SK013NI00B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094632592,36.645122448,135.37109375],[117.094598226,36.645121103,135.351593018],[117.094506976,36.645115703,0],[117.094567046,36.645119355,135.289093018]]}",
"angle": 267.3,
"dirtype": "1"
},
{
"lkid": "13NI00B5RM0",
"ldid": "13NID0B5RM013NI00B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094906177,36.64496602,136.011703491],[117.094906848,36.644995342,135.960906982],[117.094908357,36.645022781,135.960906982],[117.09490886,36.645053717,135.910202026]]}",
"angle": 1.75,
"dirtype": "3"
},
{
"lkid": "13NGH0B5RC0",
"ldid": "13NI00B5RM013NGH0B5RC00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090221867,36.64409779,130.339797974],[117.09021315,36.644122135,130.339797974],[117.090204768,36.644146077,130.289093018],[117.090196386,36.644170423,130.238296509],[117.090186998,36.644195441,130.148406982]]}",
"angle": 340.35,
"dirtype": "3"
},
{
"lkid": "13NG40B5SK0",
"ldid": "13NI00B5RM013NG40B5SK00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.09480945,36.647421087,121.988296509],[117.094844822,36.647420011,121.988296509],[117.09487617,36.647419339,121.941398621]]}",
"angle": 91.5,
"dirtype": "5"
},
{
"lkid": "13NGH0B5RC0",
"ldid": "13NEH0B5RJ013NGH0B5RC00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.089840658,36.644200687,129.761703491],[117.089808304,36.644191809,129.761703491],[117.08977377,36.644182528,129.730499268]]}",
"angle": 254.81,
"dirtype": "1"
},
{
"lkid": "13NEP0B5QJ0",
"ldid": "13NGH0B5RC013NEP0B5QJ00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.09044164,36.642228809,137.179702759],[117.090419177,36.642226791,137.230499268]]}",
"angle": 264.87,
"dirtype": "1"
},
{
"lkid": "13NEP0B5QJ0",
"ldid": "13NGH0B5RC013NEP0B5QJ00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090504169,36.642235265,137.078094482],[117.090467624,36.642231096,137.031295776]]}",
"angle": 263.49,
"dirtype": "1"
},
{
"lkid": "13NEP0B5QJ0",
"ldid": "13NGH0B5RC013NEP0B5QJ00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090538703,36.642239301,137.539093018],[117.090504169,36.642235265,137.078094482]]}",
"angle": 263.34,
"dirtype": "1"
},
{
"lkid": "13NGH0B5RC0",
"ldid": "13NEP0B5QJ013NGH0B5RC00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.090014331,36.64384438,130.339797974],[117.090044841,36.643854872,130.339797974],[117.090075854,36.643865094,130.339797974],[117.090105861,36.643875586,130.320297241]]}",
"angle": 71.17,
"dirtype": "5"
},
{
"lkid": "13NEH0B5RJ0",
"ldid": "13NGH0B5RC013NEH0B5RJ00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.089664568,36.64506163,125.460899353],[117.089723982,36.645074834,125.359397888],[117.089756168,36.645080886,125.308601379]]}",
"angle": 78.13,
"dirtype": "5"
},
{
"lkid": "13NID0B5RM0",
"ldid": "13NGQ0B5R0013NID0B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.097029085,36.642846211,160.87890625],[117.097066864,36.642847817,160.910202026],[117.097102404,36.642849162,160.859405518]]}",
"angle": 87.69,
"dirtype": "4"
},
{
"lkid": "13NID0B5RM0",
"ldid": "13NGQ0B5R0013NID0B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.095834892,36.644817527,137.281295776],[117.095866241,36.644837972,137.37109375],[117.095896583,36.644858282,137.421905518]]}",
"angle": 56.55,
"dirtype": "4"
},
{
"lkid": "13NID0B5RM0",
"ldid": "13NH20B5RH013NID0B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.096297238,36.644966423,138.199203491],[117.096298411,36.64499171,138.179702759],[117.096298244,36.64501619,138.109405518],[117.096298914,36.645040939,138.05859375],[117.096300088,36.645065418,138.05859375]]}",
"angle": 1.65,
"dirtype": "3"
},
{
"lkid": "13NID0B5RM0",
"ldid": "13NHC0B5R4013NID0B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.098410148,36.643917283,141.078094482],[117.098435462,36.643950909,140.94140625],[117.098445352,36.643965436,140.94140625]]}",
"angle": 36.17,
"dirtype": "4"
},
{
"lkid": "13NID0B5RM0",
"ldid": "13NHC0B5R4013NID0B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.096125241,36.64482896,137.761703491],[117.096164869,36.644863363,137.80859375]]}",
"angle": 49.04,
"dirtype": "4"
},
{
"lkid": "13NHC0B5R40",
"ldid": "13NID0B5RM013NHC0B5R400",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.098188866,36.644014262,140.69140625],[117.098166402,36.64397808,140.718795776],[117.098156344,36.643962073,140.738296509]]}",
"angle": 211.93,
"dirtype": "8"
},
{
"lkid": "13NHC0B5R40",
"ldid": "13NID0B5RM013NHC0B5R400",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.098936364,36.643452159,142.160202026],[117.098890767,36.643432656,142.210906982],[117.098873667,36.643425796,142.210906982]]}",
"angle": 247.19,
"dirtype": "8"
}
],
"message": "SQL执行成功",
"status": "success",
"timestamp": 0
}
\ No newline at end of file
wj-manage-web/src/components/Standard/cameraVideo.vue
View file @ edfd5c94
......@@ -76,12 +76,6 @@ export default {
//视频出错后销毁重新创建
this.player.on(flvjs.Events.ERROR, this.handleErr);
this.player.on(flvjs.Events.LOADING_COMPLETE, this.handleErr);
// this.player.on("media_info", (e) => {
// console.log('media_info', e)
// });
// this.player.on("metadata_arrived", (e) => {
// console.log('metadata_arrived', e)
// });
},
handleErr() {
if (this.player) {
......@@ -112,30 +106,15 @@ export default {
//清除定时器
clearInterval(this.cleanBuff);
}
if (this.timeoutInterval) {
clearInterval(this.timeoutInterval);
}
},
initPlayer() {
this.$nextTick(() => {
this.loadVideo();
});
this.timeoutInterval = setInterval(() => {
if (this.cameraLoading) {
this.handleErr();
} else {
clearInterval(this.timeoutInterval);
}
}, 15000);
},
},
data() {
return {
timeoutInterval: null,
cleanBuff: null,
cameraLoading: true,
supported: false,
player: null,
interval: null
};
},
mounted() {
......@@ -146,17 +125,16 @@ export default {
this.$nextTick(() => {
this.loadVideo();
});
let interval = setInterval(() => {
this.interval = setInterval(() => {
if (this.cameraLoading) {
this.handleErr();
} else {
clearInterval(interval);
clearInterval(this.interval);
}
}, 3000);
}
},
beforeDestroy() {
// console.log("beforeDestroy");
this.destroy();
},
};
......
wj-manage-web/src/components/Standard/loopVideo.vue
View file @ edfd5c94
<template>
<div
class="loopVideo"
v-loading="isLoading"
v-loading="videoLoading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
......@@ -15,12 +15,6 @@
@ended="handleEnded"
@canplay="videoCanPlay"
></video>
<!-- <div class="loading-mask" v-show="isLoading">
<div style="position: relative">
<div class="el-icon-loading"></div>
<div>加载中...</div>
</div>
</div> -->
</div>
</template>
......@@ -38,29 +32,35 @@ export default {
},
data() {
return {
isLoading: false,
requestLoading: true,
videoLoading: true,
videoUrl: null,
flvPlayer: null,
interval: null,
};
},
mounted() {
if (this.channel) {
this.getVideoStreamUrl();
timer = setInterval(() => {
if (this.isLoading) {
this.destroy();
this.$nextTick(() => {
this.getVideoStreamUrl();
});
this.interval = setInterval(() => {
if (this.videoLoading) {
this.handleErr();
} else {
clearInterval(timer);
clearInterval(this.interval);
}
}, 5000);
}, 3000);
}
},
methods: {
handleErr() {
this.destroyPlayer();
this.$nextTick(() => {
this.getVideoStreamUrl();
});
},
videoCanPlay() {
this.videoLoading = false;
this.$emit("videoReady", this.channel);
},
replaceTimeGap(time) {
......@@ -72,8 +72,8 @@ export default {
},
async getVideoStreamUrl() {
try {
console.log("channel reconnect....", this.channel);
this.isLoading = true;
// console.log("channel reconnect....", this.channel);
this.requestLoading = true;
const response = await getEventVideo({
channel: this.channel,
subtype: 0,
......@@ -91,7 +91,7 @@ export default {
console.error("FLV is not supported by this browser!");
return;
}
console.log("loop start...", this.videoUrl);
// console.log("loop start...", this.videoUrl);
this.flvPlayer = flvjs.createPlayer({
type: "flv",
url: this.videoUrl,
......@@ -108,41 +108,39 @@ export default {
this.flvPlayer.on(flvjs.Events.MEDIA_DETACHED, this.handleMediaDetached);
},
handleMediaDetached() {
// setTimeout(() => {
// this.getVideoStreamUrl();
// }, 1000);
},
handleLoadStart() {
this.isLoading = true;
this.requestLoading = true;
},
handleLoadedMetadata() {
this.isLoading = false;
console.log("loaded...");
this.requestLoading = false;
// console.log("loaded...");
},
handleEnded() {
if (this.flvPlayer) {
this.flvPlayer.play();
}
},
destroy() {
timer && clearInterval(timer);
destroyPlayer() {
if (this.flvPlayer) {
this.flvPlayer.pause();
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
this.flvPlayer.destroy();
this.flvPlayer?.pause();
this.flvPlayer?.unload();
this.flvPlayer?.detachMediaElement();
this.flvPlayer?.destroy();
this.flvPlayer = null;
}
},
},
watch: {
timeModel(val) {
this.destroy();
this.getVideoStreamUrl();
this.handleErr();
},
},
beforeDestroy() {
this.destroy();
if (this.interval) {
clearInterval(this.interval);
}
this.destroyPlayer();
},
};
</script>
......
wj-manage-web/src/components/Standard/map/pathMap/index.vue
View file @ edfd5c94
......@@ -7,16 +7,22 @@
>
<div style="position: relative; width: 100%; height: 100%">
<path-map
@mapLoad="mapLoad"
mapId="pathMapCtrl"
ref="pathMap"
:eventTargetVehicleGlobalId="eventTargetVehicleGlobalId"
@timeChange="timeChange"
:speed="speedValue"
:filterType="filterType"
></path-map>
<div v-show="showTimeStamp" class="pathMapTimestamp">
{{ currentTimestamp }}
</div>
<div v-show="showCtrl" class="slider-box">
<i
class="slider-icon"
@click="playClick"
:style="`cursor:${duration == 0 ? 'not-allowed' : 'pointer'}`"
:class="{ active: playFlag }"
></i>
<el-slider
......@@ -82,8 +88,8 @@ protobuf.load("../wj-manage-web/RealtimeCarInfo.proto", (event, root) => {
const typeOptions = ["不流畅车", "减速车", "直行汇车", "右转汇车"];
import pathMap from "./pathMap.vue";
import * as trackApi from "../../../../dao/historyTrack";
import { eventInfo } from "../../../../../../wj-data-vision/src/dao/situation";
import { addOrUpdateEventHeat } from "../../../../utils/mapboxTools";
import * as mapTools from "../../../../utils/mapboxTools";
import { orgConflict } from "../../../../dao/organization";
export default {
name: "pathMapCtrl",
components: { pathMap },
......@@ -109,9 +115,34 @@ export default {
loading: false,
timeShouldChange: true,
heatShow: false,
currentLocalTime: 0,
currentRequestTime: {
startTime: 0,
endTime: 0,
},
renderFirst: true,
lastRequestParams: {},
};
},
computed: {
currentTimestamp() {
return new Date(this.currentLocalTime).toLocaleString();
},
showTimeStamp() {
if (this.showTime) {
if (this.currentLocalTime != 0) {
return true;
}
}
},
},
props: {
showTime: {
type: Boolean,
default: () => {
return false;
},
},
showFilter: {
type: Boolean,
default: () => {
......@@ -142,13 +173,19 @@ export default {
return "vehicleTrack";
},
},
eventTargetVehicleGlobalId: {
type: String,
default: () => {
return "";
},
},
},
mounted() {
const sliderElement = this.$refs.sliderRef.$el;
sliderElement.addEventListener("mouseup", this.handleMouseUp);
sliderElement.addEventListener("mousedown", this.handleMouseDown);
this.$EventBus.$on("refreshHeatMap", (data) => this.refreshHeatMap(data));
this.$EventBus.$on("removeHeatMap", () => this.removeMapHeat());
this.$EventBus.$on("removeHeatMap", () => this.refreshHeatMap([]));
},
beforeDestroy() {
this.$EventBus.$off("refreshHeatMap");
......@@ -160,51 +197,60 @@ export default {
this.filterType = null;
}
},
duration() {
this.currentTime = 0;
},
// duration() {
// this.currentTime = 0;
// },
},
methods: {
mapLoad(map) {
pMap = map;
},
removeLayers(name) {
if (pMap && pMap.getLayer(name)) {
pMap.removeLayer(name);
}
},
//=====================================================================交织点相关逻辑
// 移除交织点热力图
removeMapHeat() {
this.removeLayers("eventHeat");
},
// 更新交织点热力图
refreshHeatMap(tableData) {
if (!pMap) {
pMap = this.$refs.pathMap.getMap();
} else {
this.removeMapHeat();
}
let features = [];
for (let item of tableData) {
features.push(turf.point([item.lng, item.lat], item));
}
addOrUpdateEventHeat(pMap, turf.featureCollection(features));
mapTools.addOrUpdateEventHeat(pMap, turf.featureCollection(features));
},
// 交织点分析
heatMapAnalysis() {
let type = 2;
// 如果请求展示热力图
if (!this.heatShow) {
this.loading = true;
eventInfo({ dayType: type }).then((res) => {
// 如果还未创建 先创建图层 || 赋值
orgConflict({
crossId: this.params.crossId,
startDate: this.params.startTime,
endDate: this.params.endTime,
}).then((res) => {
this.loading = false;
console.log("交织点分析", res);
this.refreshHeatMap(res.content);
if (res.content && res.content.length) {
this.heatShow = true;
this.loading = false;
let geo = this.convertPointJsonToGeo(res.content);
mapTools.addOrUpdateEventHeat(pMap, geo);
} else {
ELEMENT.Message("当前时段暂无交织点信息");
}
});
} else {
this.removeLayers("eventHeat");
this.heatShow = false;
}
},
convertPointJsonToGeo(array) {
let features = [];
for (let item of array) {
features.push(turf.point([item.lng, item.lat], item));
}
return turf.featureCollection(features);
},
//====================================================================================
//=====================================================================车辆筛选相关逻辑
checkAllChange(val) {
......@@ -233,8 +279,6 @@ export default {
types.push(typeMap[item]);
}
this.filterType = types;
// let sortTypes = types.sort().join(",");
console.log(types);
},
//====================================================================================
handleMouseDown() {
......@@ -245,6 +289,7 @@ export default {
this.timeShouldChange = true;
},
timeChange(getTime) {
this.currentLocalTime = getTime;
let spend = getTime - new Date(this.params.startTime).getTime();
// timeShouldChange 防止拖动 slider 时 时间改变导致覆盖了拖动赋值
this.timeShouldChange && (this.currentTime = spend);
......@@ -256,13 +301,88 @@ export default {
this.currentTime = 0;
});
},
lateToOneMin(dateTime) {
let time = new Date(dateTime).getTime();
let late1Min = time + 60 * 1000;
let res = new Date(late1Min).toLocaleString();
return res.replaceAll("/", "-");
},
getTracksAndPlay1() {
// 重置分页参数
this.renderFirst = true;
this.lastRequestParams = this.params;
this.requestNewAndPlay();
},
requestNewAndPlay() {
if (this.currentRequestTime.endTime != this.params.endTime) {
// 如果轨迹类型或者时间区间改变 则重置请求时间
if (
JSON.stringify(this.lastRequestParams) !== JSON.stringify(this.params)
) {
this.currentRequestTime.startTime = 0;
}
// 上一次请求的结束时间作为当前请求的开始时间，当前请求的结束时间为 上次请求的结束时间加1分钟
if (this.currentRequestTime.startTime == 0) {
this.clearMap();
this.loading = true;
this.currentRequestTime.startTime = this.params.startTime;
} else {
this.renderFirst = false;
this.currentRequestTime.startTime = this.currentRequestTime.endTime;
}
this.currentRequestTime.endTime = this.lateToOneMin(
this.currentRequestTime.startTime
);
if (
new Date(this.currentRequestTime.endTime).getTime() >
new Date(this.params.endTime).getTime()
) {
this.currentRequestTime.endTime = this.params.endTime;
}
console.log("trackApi", trackApi);
trackApi[this.apiName](
Object.assign({}, this.params, this.currentRequestTime)
).then((res) => {
this.loading = false;
if (res && res.data) {
// todo 如果响应数据与当前需要展示的数据一致 则接收并处理数据
if (res.params === JSON.stringify(this.params)) {
let inflate = pako.inflate(res.data); // pako解压为protobuf
if (inflate) {
let realData = FrameList.decode(inflate); // protobuf根据定义类型转json
fullTrack = realData.frameInfo;
this.$EventBus.$emit("fullTrack", fullTrack);
console.log("fulltrackData...", fullTrack);
// 计算返回数据的总时长
let fullTime =
new Date(
fullTrack[fullTrack.length - 1].frameTime
).getTime() - new Date(fullTrack[0].frameTime).getTime();
this.duration = fullTime + this.duration;
console.log("this.duration", this.duration);
this.$nextTick(() => {
if (this.renderFirst) {
this.$refs.pathMap.render();
this.playFlag = true;
}
});
setTimeout(() => {
this.requestNewAndPlay();
}, 2000);
} else {
this.$message("暂无轨迹数据");
}
}
} else {
this.$message("暂无轨迹数据");
}
});
}
},
// ref调用此方法请求并播放轨迹
getTracksAndPlay() {
console.log("请求轨迹数据：", this.apiName, this.params);
if (this.loading) {
return;
}
this.clearMap()
this.clearMap();
this.loading = true;
trackApi[this.apiName](this.params).then((res) => {
this.loading = false;
......@@ -280,7 +400,7 @@ export default {
new Date(fullTrack[fullTrack.length - 1].frameTime).getTime() -
new Date(fullTrack[0].frameTime).getTime();
this.duration = fullTime;
console.log('this.duration',this.duration);
console.log("this.duration", this.duration);
this.$nextTick(() => {
this.$refs.pathMap.render();
});
......@@ -293,6 +413,7 @@ export default {
});
},
playClick() {
if (this.duration == 0) return;
this.playFlag = !this.playFlag;
this.playFlag
? this.$refs.pathMap.continuePlay()
......@@ -378,7 +499,13 @@ export default {
font-weight: 700;
}
}
.pathMapTimestamp {
position: absolute;
left: 12px;
top: 8px;
color: white;
z-index: 9;
}
.slider-box {
position: absolute;
display: flex;
......
wj-manage-web/src/components/Standard/map/pathMap/pathMap.vue
View file @ edfd5c94
......@@ -11,7 +11,7 @@ let vehicleModelTypes = {},
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
name: "wMap",
props: ["mapId", "speed", "filterType"],
props: ["mapId", "speed", "filterType", "eventTargetVehicleGlobalId"],
components: {},
data() {
return {
......@@ -21,10 +21,9 @@ export default {
},
mounted() {
this.initMap();
console.log('eventbus', this.$EventBus);
this.$EventBus.$on("fullTrack", (data) => {
fullTrack = data;
fullTrack = [...fullTrack,...data];
dillPath = [...dillPath, ...data]
});
},
methods: {
......@@ -96,6 +95,7 @@ export default {
pitch: map_config.MAP_PITCH,
});
map.on("style.load", () => {
this.$emit('mapLoad',map)
map.addLayer({
id: "vehicle3D",
type: "custom",
......@@ -143,11 +143,10 @@ export default {
},
clearAll() {
this.playStatus = false;
window.tb?.clear(null,true);
window.tb?.clear(null, true);
dillPath = [];
fullTrack = [];
window.tb.update();
window.tb?.update();
},
hasDuplicate(arr1, arr2) {
......@@ -194,7 +193,7 @@ export default {
dillPath.shift();
if (!dillPath.length) {
window.tb.clear(null, true);
lastFrame = { carInfo: [] }
lastFrame = { carInfo: [] };
dillPath = JSON.parse(JSON.stringify(fullTrack));
}
setTimeout(() => {
......@@ -205,6 +204,18 @@ export default {
},
setModel(model, options, timeDiff) {
// 如果有目标车辆 则把目标车辆设置为红色
if (
this.eventTargetVehicleGlobalId &&
options.id == this.eventTargetVehicleGlobalId
) {
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
child.material.color.set("#e43f32");
}
});
}
if (timeDiff === 0) {
model.setCoords([options.longitude, options.latitude]);
} else {
......@@ -257,6 +268,19 @@ export default {
if (item.dill === "add") {
let model =
vehicleModelTypes[`car${item.originalType}`].duplicate();
// 如果有目标车辆 则把目标车辆设置为红色
if (
this.eventTargetVehicleGlobalId &&
item.id == this.eventTargetVehicleGlobalId
) {
map?.setCenter([item.longitude, item.latitude]);
model.traverse((child) => {
if (child.isMesh && child.name.includes("_19")) {
child.material = child.material.clone();
child.material.color.set("#e43f32");
}
});
}
model.setCoords([item.longitude, item.latitude]);
model.userData.data = item;
model.setRotation({ x: 90, y: 360 - item.courseAngle - 90, z: 0 });
......
wj-manage-web/src/config/holo/mapAssets.js
View file @ edfd5c94
......@@ -48,17 +48,17 @@ export default {
},
lightIcons: {
11: require('../../assets/images/sc/leftRed.png'),
12: require('../../assets/images/sc/leftYellow.png'),
13: require('../../assets/images/sc/leftGreen.png'),
21: require('../../assets/images/sc/sRed.png'),
22: require('../../assets/images/sc/sYellow.png'),
23: require('../../assets/images/sc/sGreen.png'),
31: require('../../assets/images/sc/rightRed.png'),
32: require('../../assets/images/sc/rightYellow.png'),
33: require('../../assets/images/sc/rightGreen.png'),
41: require('../../assets/images/sc/backRed.png'),
42: require('../../assets/images/sc/backYellow.png'),
43: require('../../assets/images/sc/backGreen.png'), // light
'1red': require('../../assets/images/sc/leftRed.png'),
'1yellow': require('../../assets/images/sc/leftYellow.png'),
'1green': require('../../assets/images/sc/leftGreen.png'),
'2red': require('../../assets/images/sc/sRed.png'),
'2yellow': require('../../assets/images/sc/sYellow.png'),
'2green': require('../../assets/images/sc/sGreen.png'),
'3red': require('../../assets/images/sc/rightRed.png'),
'3yellow': require('../../assets/images/sc/rightYellow.png'),
'3green': require('../../assets/images/sc/rightGreen.png'),
'4red': require('../../assets/images/sc/backRed.png'),
'4yellow': require('../../assets/images/sc/backYellow.png'),
'4green': require('../../assets/images/sc/backGreen.png'), // light
}
}
wj-manage-web/src/dao/historyTrack.js
View file @ edfd5c94
import fetch from '@/utils/fetch'
import request from '../utils/request'
// 行人轨迹查询
export const passerbyTrack = (data) => fetch('/holo/histrory-track/pedestrian-efficiency', data, 'POST')
export const passerbyTrack = (data) =>
request({
url: '/holo/histrory-track/pedestrian-efficiency',
method: 'post',
data: data,
responseType:'arraybuffer'
})
// 非机动车历史轨迹
export const noVehicleTrack = (data) => fetch('/holo/histrory-track/non-motor-efficiency', data, 'POST')
export const noVehicleTrack = (data) =>
request({
url: '/holo/histrory-track/non-motor-efficiency',
method: 'post',
data: data,
responseType:'arraybuffer'
})
// 机动车历史轨迹
export const vehicleTrack = (data) => fetch('/holo/histrory-track/motor-efficiency', data, 'POST')
export const vehicleTrack = (data) =>
request({
url: '/holo/histrory-track/motor-efficiency',
method: 'post',
data: data,
responseType:'arraybuffer'
})
// 所有轨迹
export const allTrack = (data) => fetch('/holo/histrory-track/info', data, 'POST')
\ No newline at end of file
export const allTrack = (data) =>
request({
url: '/holo/histrory-track/info',
method: 'post',
data: data,
responseType:'arraybuffer'
})
\ No newline at end of file
wj-manage-web/src/utils/mapboxTools.js
View file @ edfd5c94
......@@ -87,7 +87,8 @@ export function addOrUpdateLightLayers(map, geo) {
"icon-size": 0.7,
"icon-image": ["get", "ts"],
"icon-pitch-alignment": "map",
"icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 140],
// "icon-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
'icon-rotate': ['get', 'lightAngle'],
"icon-rotation-alignment": "map",
},
},
......@@ -105,7 +106,8 @@ export function addOrUpdateLightLayers(map, geo) {
"text-size": 14,
"text-pitch-alignment": "map",
"text-rotation-alignment": "map",
"text-rotate": ["+", ["*", ["get", "roadDir"], 45], 140],
'text-rotate': ['get', 'lightAngle'],
// "text-rotate": ["+", ["*", ["get", "roadDir"], 45], 180],
},
paint: {
"text-color": "white",
......@@ -114,11 +116,11 @@ export function addOrUpdateLightLayers(map, geo) {
"text-halo-color": [
"match",
["get", "state"], // 属性字段名称
"1",
"red",
"rgba(255, 130, 130, 0.5)",
"2",
"yellow",
"rgba(255, 179, 0, 0.5)",
"3",
"green",
"rgba(48, 255, 141, 0.5)",
"rgba(255,255,255,1)", // 默认值，如果没有匹配到上述枚举值
],
......@@ -453,6 +455,7 @@ export function addOrUpdateCrossName(map, geo) {
// 交通事件热力图
export function addOrUpdateEventHeat(map, geo, callback) {
console.log(geo, 7777777777777777777);
if (!map.getSource("eventHeat")) {
map.addSource("eventHeat", {
type: "geojson",
......@@ -802,7 +805,7 @@ export function addOrUpdateRoadPolygon(map, geo, callback) {
}
// "vehicle3D"
);
map.on("click", "roadPolygon", (aaa) => callback(aaa));
// map.on("click", "roadPolygon", (aaa) => callback(aaa));
}
}
......
wj-manage-web/src/utils/request.js
View file @ edfd5c94
......@@ -57,11 +57,13 @@ service.interceptors.request.use(config => {
// 响应拦截器
service.interceptors.response.use(res => {
// console.log('axios response...', res);
console.log('axios response...', res);
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
// 给二进制数据添加对应的请求参数信息，避免接收到不需要的数据
// return { data: res.data, params: JSON.parse(res.config.data) }
return res.data
}
if (code === 401) {
......
wj-manage-web/src/views/efficiency/crossCompare.vue
View file @ edfd5c94
......@@ -183,7 +183,7 @@ export default {
return (
Math.abs(
Number(scope.row.current) - Number(scope.row.compare)
).toFixed(2) + "pcu/h"
).toFixed(0)
);
}
if (scope.row.indexName.includes("时间")) {
......@@ -208,7 +208,7 @@ export default {
if (typeof scope.row[which] === "boolean") {
return "暂无数据";
}
return scope.row[which].toFixed(2)
return scope.row[which].toFixed(0)
}
if (scope.row.indexName.includes("时间")) {
if (typeof scope.row[which] === "boolean") {
......
wj-manage-web/src/views/efficiency/index.vue
View file @ edfd5c94
......@@ -78,6 +78,7 @@
<path-map-ctrl
:params="pathParam"
:apiName="pathApiName"
:showTime="true"
class="common_map"
ref="tab_map"
:showFilter="showFilter"
......@@ -107,8 +108,6 @@
v-if="item.valueList && item.valueList.length"
>
{{ getCheckItemValue(item) }}
<span v-show="item.label.includes('率')">%</span>
<span v-show="item.label.includes('时长')">s</span>
</span>
</el-checkbox>
</el-checkbox-group>
......@@ -245,8 +244,6 @@
v-if="item.valueList && item.valueList.length"
>
{{ getCheckItemValue(item) }}
<span v-show="item.label.includes('率')">%</span
><span v-show="item.label.includes('时长')">s</span>
</span>
</el-checkbox>
</el-checkbox-group>
......@@ -356,17 +353,24 @@ export default {
methods: {
beforeLeave() {
// 轨迹组件接口还在请求中，暂不可切换tab
if (this.$refs.tab_map.loading) {
return false;
}
// if (this.$refs.tab_map.loading) {
// return false;
// }
return true
},
getCheckItemValue(item) {
return item.valueList
? item.label.includes("率")
? (item.valueList[item.valueList.length - 1] * 100).toFixed(2)
: item.valueList[item.valueList.length - 1]
: "";
// return item.valueList[item.valueList.length - 1];
if (item.valueList && item.valueList.length) {
if (item.label.includes("率") || item.label.includes("占比")) {
return `${(
Number(item.valueList[item.valueList.length - 1]) * 100
).toFixed(0)}%`;
} else if (item.label.includes("时长")) {
return `${item.valueList[item.valueList.length - 1]}s`;
} else {
return `${item.valueList[item.valueList.length - 1]}`;
}
}
return "";
},
upOrDown(inverse) {
if (this.fullData && this.fullData.current) {
......@@ -771,11 +775,6 @@ export default {
startTime: this.tableCurrentData.windowStartTime,
endTime: this.tableCurrentData.windowEndTime,
crossId: this.currentCrossId,
// startTime: "2023-05-21 18:22:25",
// endTime: "2023-05-21 18:28:30",
// startTime: "2023-05-21 18:28:25",
// endTime: "2023-05-21 18:28:30",
// crossId: "12F6S08J8T0",
};
this.pathApiName = "passerbyTrack";
this.$nextTick(() => {
......@@ -788,6 +787,8 @@ export default {
passerbyEfficiency({
crossId: this.currentCrossId,
granularity: this.timeInterval,
startDate:this.tableCurrentData.windowStartTime,
endDate:this.tableCurrentData.windowEndTime
}).then((res) => {
this.tab1Loading = false;
console.log("行人效率", res.content);
......@@ -831,13 +832,15 @@ export default {
noVehicleTable({
crossId: this.currentCrossId,
granularity: this.timeInterval,
startDate:this.tableCurrentData.windowStartTime,
endDate:this.tableCurrentData.windowEndTime
}).then((res) => {
this.tab2Loading1 = false;
console.log("非机动车效率", res.content);
this.tableData = [];
for (let item of res.content) {
if ([1, 2, 3].includes(item.type)) {
let obj = { total: item.total, label: item.label };
let obj = { total: item.total||0, label: item.label };
for (let option of item.list) {
obj[this.turnMap[option.turnNo]] = option.number;
}
......@@ -849,6 +852,8 @@ export default {
noVehicleEfficiency({
crossId: this.currentCrossId,
granularity: this.timeInterval,
startDate:this.tableCurrentData.windowStartTime,
endDate:this.tableCurrentData.windowEndTime
}).then((res) => {
this.tab2Loading2 = false;
if (res.content.length) {
......@@ -880,6 +885,8 @@ export default {
vehicleEfficiency({
crossId: this.currentCrossId,
granularity: this.timeInterval,
startDate:this.tableCurrentData.windowStartTime,
endDate:this.tableCurrentData.windowEndTime
}).then((res) => {
this.tab3Loading = false;
console.log("机动车效率", res.content);
......@@ -939,6 +946,7 @@ export default {
.track-result-table {
overflow: auto;
//height: 400px;
background-color: #0a1526;
.el-icon-video-play:before {
color: #5b90ee;
font-size: 16px;
......@@ -1118,7 +1126,7 @@ export default {
display: flex;
justify-content: space-between;
flex-flow: wrap;
height: 42%;
height: 45%;
align-items: stretch;
::v-deep .el-checkbox {
width: 33.3%;
......@@ -1151,7 +1159,7 @@ export default {
}
.form_chart {
height: 58%;
height: 55%;
.ef_chart {
width: 100%;
......
wj-manage-web/src/views/organization/cameraImage.vue
View file @ edfd5c94
......@@ -2,7 +2,7 @@
<div class="custom-dialog">
<div class="dialog-main">
<div class="holo-dialog-header">
<div>非机动车佩戴头盔率：{{ helmetRate }}</div>
<div>非机动车佩戴头盔率：{{ currentBarRate }}</div>
<div>
<i class="el-icon-close holo-dialog-close" @click="closeDia"></i>
</div>
......@@ -38,18 +38,20 @@ export default {
data() {
return {
currentHelmetImg: "#",
currentPage: 0,
currentPage: 1,
totalPage: 0,
loading: false,
};
},
props: ["timeRange", 'cameraId'],
props: ["getImageProps", "currentBarRate",'compInitImg'],
mounted() {
this.getImage();
this.currentHelmetImg = this.compInitImg.url
this.totalPage = this.compInitImg.total
// this.getImage();
},
methods: {
getLastImage() {
if (this.currentPage - 1 < 0) {
if (this.currentPage - 1 < 1) {
ELEMENT.Message("已经是第一张图片！");
return;
}
......@@ -67,15 +69,17 @@ export default {
getImage() {
this.loading = true;
helmetRateImages({
cameraId: this.cameraId,
startDate: "2023-10-27 15:00:00",
endDate: "2023-10-27 15:00:00",
...this.getImageProps,
page: this.currentPage,
size: 1,
}).then((res) => {
this.loading = false;
if (res.content.rows && res.content.rows.length) {
this.currentHelmetImg = `data:image/png;base64,${res.content.rows[0].shootImage}`;
this.totalPage = res.content.total;
} else {
ELEMENT.Message("此相机当前时段无图片信息！");
}
});
},
closeDia() {
......
wj-manage-web/src/views/organization/index.vue
View file @ edfd5c94
<template>
<div class="org_container">
<div
class="org_container"
element-loading-text="加载图片中，请稍候..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
v-loading.fullscreen.lock="fullscreenLoading"
>
<div class="left_topThree">
<left-map ref="leftMap" @crossChange="crossChange" />
</div>
......@@ -98,13 +104,6 @@
v-if="item.valueList && item.valueList.length"
>
{{ getCheckItemValue(item) }}
<span
v-show="
item.label.includes('率') ||
item.label.includes('占比')
"
>%</span
><span v-show="item.label.includes('时长')">s</span>
</span>
</el-checkbox>
</el-checkbox-group>
......@@ -138,20 +137,7 @@
"
v-if="item.valueList && item.valueList.length"
>
{{
item.label.includes("率") ||
item.label.includes("占比")
? (
item.valueList[item.valueList.length - 1] * 100
).toFixed(2)
: item.valueList[item.valueList.length - 1]
}}<span
v-show="
item.label.includes('率') ||
item.label.includes('占比')
"
>%</span
><span v-show="item.label.includes('时长')">s</span>
{{ getCheckItemValue(item) }}
</span>
</el-checkbox>
</el-checkbox-group>
......@@ -185,7 +171,9 @@
</div>
</div>
<cameraImage
:cameraId="cameraImageProps.cameraId"
:compInitImg="compInitImg"
:getImageProps="cameraImageProps"
:currentBarRate="currentBarRate"
@actionFinished="imageDialogShow = false"
v-if="imageDialogShow"
/>
......@@ -201,19 +189,19 @@ import {
orgPasserby,
orgNoVehicle,
orgCrossPolygon,
helmetRateImages,
} from "../../dao/organization";
import wMap from "../../components/Standard/map/index.vue";
import {
inletWayTimeBetw,
inletWayTurnTimeBetw,
} from "../../../../wj-data-vision/src/dao/situation";
import MapFlow from "./mapFlow.vue";
import MapConflict from "./mapConflict.vue";
import MapTrack from "./mapTrack.vue";
// import { addOrUpdateRoadPolygon } from "../../utils/mapboxTools";
import * as mapTools from "../../utils/mapboxTools";
import mapAssets from "../../config/holo/mapAssets";
import { equip_camera } from "../../dao/situation";
import {
equip_camera,
inletWayTimeBetw,
inletWayTurnTimeBetw,
} from "../../dao/situation";
let bottomMap;
export default {
components: {
......@@ -227,11 +215,13 @@ export default {
},
data() {
return {
cameraImageProps: { cameraId: "" },
fullscreenLoading: false,
compInitImg: {},
currentBarRate: "",
cameraImageProps: { cameraId: "", startTime: "", endTime: "" },
imageDialogShow: false,
jinchukouMap: { 2: "进口", 3: "出口" },
dirMap: { 1: "左", 2: "直", 3: "右", 4: "掉头" },
// datePickerData: "2023-06-05",
traStateColorMap: {
1: "#42b200",
2: "#eec900",
......@@ -240,19 +230,12 @@ export default {
},
datePickerData: "",
lastDatePicker: "",
cmOption: {
center: [118.089978, 36.644106], //旅游路洪山路
zoom: 18.33459428014952,
pitch: 0,
bearing: 0,
},
initTab1: true,
initTab2: true,
currentCrossData: {},
rightLoading: false,
polygonLoading: false,
tabsActiveName: "Passerby",
// sliderValue: 16,
sliderValue: 16,
lastSliderValue: "",
sliderLabel: {
......@@ -285,6 +268,8 @@ export default {
passerbyFormCheck: [],
noVehicleCheckList: [],
noVehicleFormCheck: [],
init: true,
events: [],
};
},
mounted() {
......@@ -299,11 +284,18 @@ export default {
},
methods: {
getCheckItemValue(item) {
return item.valueList
? item.label.includes("率") || item.label.includes("占比")
? (item.valueList[item.valueList.length - 1] * 100).toFixed(2)
: item.valueList[item.valueList.length - 1]
: "";
if (item.valueList && item.valueList.length) {
if (item.label.includes("率") || item.label.includes("占比")) {
return `${(
Number(item.valueList[item.valueList.length - 1]) * 100
).toFixed(0)}%`;
} else if (item.label.includes("时长")) {
return `${item.valueList[item.valueList.length - 1]}s`;
} else {
return `${item.valueList[item.valueList.length - 1]}`;
}
}
return "";
},
getStartAndEndDate() {
let end = `${this.datePickerData} ${
......@@ -350,6 +342,7 @@ export default {
this.passerbyFormCheck = [];
this.noVehicleCheckList = [];
this.noVehicleFormCheck = [];
if (
this.currentCrossData.id !== row.id ||
this.lastDatePicker !== this.datePickerData ||
......@@ -401,11 +394,11 @@ export default {
this.roadPolygonArray.push(feature);
}
let geo = turf.featureCollection(this.roadPolygonArray);
mapTools.addOrUpdateRoadPolygon(
bottomMap,
geo,
this.crossPolygonClick
);
mapTools.addOrUpdateRoadPolygon(bottomMap, geo);
if (!this.events.includes("roadPolygon")) {
this.events.push("roadPolygon");
bottomMap.on("click", "roadPolygon", this.crossPolygonClick);
}
// 地图展示第一条数据对应的车道面和流量
setTimeout(() => {
this.crossPolygonClick({
......@@ -456,11 +449,12 @@ export default {
let result = await Promise.all(queue);
console.log("关联路段all direction....flow...", result);
this.loadFlowChart2(result, jinchukouList);
let chukouRid =
prop.ridList.find((item) => {
return item.type === "2";
})?.rid || "";
// 筛选出口
let chukou = prop.ridList.find((item) => {
return item.type == "2";
});
let chukouRid = chukou?.rid || "";
// 如果有对应出口 加载流量趋势图 否则销毁已存在的流量趋势图
if (chukouRid) {
inletWayTurnTimeBetw({
crossId: prop.crossId,
......@@ -471,13 +465,15 @@ export default {
console.log("转向流量趋势图", res);
this.loadFlowChart1(res.content);
});
} else {
this.loadFlowChart1(false);
}
} else {
item.properties.select = 0;
}
}
let geo = turf.featureCollection(this.roadPolygonArray);
mapTools.addOrUpdateRoadPolygon(bottomMap, geo, this.crossPolygonClick);
mapTools.addOrUpdateRoadPolygon(bottomMap, geo);
},
timeChange() {
if (this.datePickerData) {
......@@ -537,6 +533,16 @@ export default {
},
};
}
let maxLength = 0;
let maxTimeList = [];
for (let item of datas) {
if (item.timeList) {
if (item.timeList?.length > maxLength) {
maxLength = item.timeList?.length;
maxTimeList = item.timeList;
}
}
}
let option = {
title: chartTitle,
tooltip: {
......@@ -578,7 +584,7 @@ export default {
},
xAxis: {
type: "category",
data: datas[0].timeList,
data: maxTimeList,
axisLabel: {
fontSize: getFontSize(12),
color: "rgba(126, 139, 166, 1)",
......@@ -604,6 +610,7 @@ export default {
color: "rgba(126, 139, 166, 1)",
},
},
event: "click",
series: (() => {
let series = [];
datas.forEach((data, index) => {
......@@ -611,7 +618,9 @@ export default {
itemStyle: {
normal: {
color:
data.label.includes("率") || data.label.includes("占比")
(data.label.includes("率") ||
data.label.includes("占比")) &&
!data.label.includes("头盔率")
? "#e7cca3"
: new echarts.graphic.LinearGradient(
0,
......@@ -638,7 +647,8 @@ export default {
},
name: data.label,
type:
data.label.includes("率") || data.label.includes("占比")
(data.label.includes("率") || data.label.includes("占比")) &&
!data.label.includes("头盔率")
? "line"
: "bar",
label: {
......@@ -657,10 +667,62 @@ export default {
this.$nextTick(() => {
this[containerId] = echarts.init(document.getElementById(containerId));
this[containerId].setOption(option, true);
if (this.init && containerId === "chartNoVehicle") {
// 防止点击事件多次绑定
this.init = false;
this[containerId].on("click", this.chartNoVehicleClick);
}
window.addEventListener("resize", () => {
this[containerId].resize();
});
this[containerId].resize();
});
},
getTimeStr(dateTime) {
let date = new Date(dateTime);
let Y = date.getFullYear() + "-";
let M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
let D =
date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
let h =
date.getHours() < 10
? "0" + date.getHours() + ":"
: date.getHours() + ":";
let m =
date.getMinutes() < 10
? "0" + date.getMinutes() + ":"
: date.getMinutes() + ":";
let s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
// todo
chartNoVehicleClick(param) {
console.log("click ", param);
// let currentBarTime = param.name // '17:00'
// let thisTimeData = param.data
if (param.seriesName === "非机动车佩戴头盔率") {
let endDateAndTime = `${this.datePickerData} ${param.name}:00`;
let startTime = new Date(endDateAndTime).getTime() - 1000 * 60 * 15;
let startDateAndTime = this.getTimeStr(startTime);
this.cameraImageProps.startTime = startDateAndTime;
this.cameraImageProps.endTime = endDateAndTime;
this.currentBarRate = (Number(param.data) * 100).toFixed(2) + "%";
// todo 获取相机点位并添加图层 相机点击事件触发获取图片并弹出图片窗口
equip_camera().then((camera) => {
let cameraGeo = this.convertToGeoWithWkt(camera.content);
mapTools.addOrUpdateEquipCamera(bottomMap, cameraGeo);
if(!this.events.includes('camera')){
this.events.push('camera')
bottomMap.on("click", "camera", this.cameraClick);
}
});
}
},
passerbyCheckChange(e) {
let datas = [];
......@@ -716,6 +778,27 @@ export default {
// return [3, 4, 5, 6, 7, 8].includes(item.type);
return [3, 4, 9].includes(item.type); // 混行及占比暂时删除 禅道bug294 添加戴盔率 type 9
});
for (let j = 0; j < this.noVehicleFormCheck.length; j++) {
if (this.noVehicleFormCheck[j].type == 9 && this.noVehicleFormCheck[j].valueList?.length) {
for (
let i = 0;
i < this.noVehicleFormCheck[j].valueList.length;
i++
) {
this.noVehicleFormCheck[j].valueList[i] =
(Number(
this.noVehicleFormCheck[j].valueList[i].replace("%", "")
) * 0.01).toFixed(0);
}
}
}
// 模拟数据---todo
// this.noVehicleFormCheck[0].timeList = ["08:45"];
// this.noVehicleFormCheck[2].timeList = ["08:45"];
// this.noVehicleFormCheck[2].valueList = [0.98];
// ----------
console.log("this.noVehicleFormCheck", this.noVehicleFormCheck);
if (this.noVehicleFormCheck.length) {
this.noVehicleCheckList.push(this.noVehicleFormCheck[0].label);
this.refreshChart([this.noVehicleFormCheck[0]], "chartNoVehicle");
......@@ -723,12 +806,6 @@ export default {
this.initTab2 = false;
});
}
// todo 获取相机点位并添加图层 相机点击事件触发获取图片并弹出图片窗口
equip_camera().then((camera) => {
let cameraGeo = this.convertToGeoWithWkt(camera.content);
mapTools.addOrUpdateEquipCamera(bottomMap, cameraGeo);
bottomMap.on("click", "camera", this.cameraClick);
});
},
convertToGeoWithWkt(json) {
let features = [];
......@@ -748,14 +825,36 @@ export default {
console.log(e.features);
if (e.features.length) {
let prop = e.features[0].properties;
if (prop.status == 1) {
this.cameraImageProps.cameraId = prop.equipIp;
this.fullscreenLoading = true;
helmetRateImages({
...this.cameraImageProps,
page: 1,
size: 1,
}).then((res) => {
this.fullscreenLoading = false;
if (res.content.rows && res.content.rows.length) {
this.compInitImg.url= `data:image/png;base64,${res.content.rows[0].shootImage}`;
this.compInitImg.total= res.content.total
this.imageDialogShow = true;
} else {
ELEMENT.Message("此相机当前时段无图片信息！");
}
});
}
}
},
switchTabVehicle() {
this.getCrossPolygon();
},
loadFlowChart1(result) {
if (!result) {
result = {
timeList: [],
dataList: [],
};
}
let chartTitle = {
show: false,
};
......@@ -840,7 +939,6 @@ export default {
type: "bar",
barWidth: 6,
barGap: 1.5,
label: {
show: true,
position: "top",
......@@ -848,12 +946,6 @@ export default {
formatter: () => {
return this.dirMap[item.turnDirNo];
},
// formatter: () => {
// if (item.turnDirNo === "1") return "左";
// if (item.turnDirNo === "2") return "直";
// if (item.turnDirNo === "3") return "右";
// if (item.turnDirNo === "4") return "掉头";
// },
},
itemStyle: {
normal: {
......@@ -991,20 +1083,14 @@ export default {
});
// }
},
removeLayer(map, layer) {
if (map && map.getLayer(layer)) {
map.removeLayer(layer);
}
},
// 刷新下侧地图 中 geo形状信息
refreshBottomScene(tabName) {
// 车道功能tab页 显示路段 polygon 否则 hide
if (tabName !== "Vehicle") {
this.removeLayer(bottomMap, "roadPolygon");
}
if (tabName !== "NoVehicle") {
this.removeLayer(bottomMap, "camera");
bottomMap?.getLayer("roadPolygon") &&
bottomMap?.removeLayer("roadPolygon");
}
bottomMap?.getLayer("camera") && bottomMap?.removeLayer("camera");
},
tabsHandleClick(e) {
this[`switchTab${e.name}`]();
......
wj-manage-web/src/views/organization/mapFlow.vue
View file @ edfd5c94
......@@ -100,7 +100,8 @@ export default {
this.mapPolygons.push(feature);
}
let geo = turf.featureCollection(this.mapPolygons);
addOrUpdateRoadPolygon(map, geo, this.crossPolygonClick);
addOrUpdateRoadPolygon(map, geo);
map.on("click", "roadPolygon", this.crossPolygonClick);
console.log("转向弧线", line);
console.log("车道流量", flow);
this.flowJson = [];
......
wj-manage-web/src/views/safety/analysisTypes.vue
View file @ edfd5c94
......@@ -46,7 +46,7 @@
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
>
<el-table-column align='center' min-width="40" label="事件ID" prop="id">
<el-table-column align='center' min-width="40" label="事件ID" prop="eventId">
</el-table-column>
<el-table-column align='center'
min-width="50"
......@@ -154,6 +154,15 @@ export default {
return "未定义";
},
setBarOption() {
console.log('this.series1',this.series1);
let maxData = 0
for(let item of this.series1){
if(item.value){
maxData = Math.max(maxData, item.value)
}else{
maxData = Math.max(maxData, item)
}
}
let colors = [
"rgba(65, 130, 242,1)",
"rgba(255, 166, 0,1)",
......@@ -254,7 +263,7 @@ export default {
axisLine: {
show: false,
},
// max: ,
max: maxData+12,
splitLine: {
show: true,
lineStyle: {
......@@ -272,10 +281,9 @@ export default {
markLine: {
silent: true,
data: [
{
symbol: "none",
{ symbol: "none",
name: "警戒线",
yAxis: 60,
yAxis: maxData+10,
lineStyle: {
color: "rgba(173, 158, 21, 1)",
type: "solid",
......@@ -291,25 +299,25 @@ export default {
},
},
},
{
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",
},
},
// {
// 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: {
......
wj-manage-web/src/views/safety/index.vue
View file @ edfd5c94
......@@ -58,6 +58,7 @@
<path-map-ctrl
:params="pathParam"
:apiName="pathApiName"
:eventTargetVehicleGlobalId="eventTargetVehicleGlobalId"
ref="pathMap"
:showCtrl="true"
class="commonPathMap"
......@@ -166,9 +167,6 @@ export default {
},
mounted() {},
methods: {
refreshHeatMap(tableData) {
this.$refs.pathMap?.refreshHeatMap(tableData);
},
dayTypeChange() {
this.$nextTick(() => {
this.$refs[`comp${this.tabsActiveName}`].refreshBarChart();
......@@ -200,7 +198,10 @@ export default {
},
eventPlay(row) {
console.log("event play...", row);
// 历史轨迹视频 && 接口api名称
this.cameraType = "history";
this.pathApiName = "allTrack";
this.eventTargetVehicleGlobalId = row.globalId;
if (row.cameraChannels) {
this.cameraChannels = row.cameraChannels.split(","); // todo
} else {
......@@ -213,12 +214,10 @@ export default {
startTime: this.getTimeToDate(startT),
endTime: this.getTimeToDate(endT),
};
this.pathParam = {
...this.cameraTimeBetween,
crossId: row.crossId,
};
this.pathApiName = "allTrack";
this.$nextTick(() => {
this.$refs.pathMap.getTracksAndPlay();
});
......@@ -229,17 +228,17 @@ export default {
Object.keys(this.currentCrossData).length &&
Object.keys(this.compareCrossData).length
) {
if (type === "level") {
return Number(this.currentCrossData[param]) >
if (
Number(this.currentCrossData[param]) >
Number(this.compareCrossData[param])
? this.down
: this.up;
) {
return type === "level" ? this.down : this.up;
}
if (type === "number") {
return Number(this.currentCrossData[param]) <
if (
Number(this.currentCrossData[param]) <
Number(this.compareCrossData[param])
? this.down
: this.up;
) {
return type === "level" ? this.up : this.down;
}
}
return "";
......@@ -251,7 +250,7 @@ export default {
},
// 选择不同路口 => 更新右侧所有数据
crossChange(row) {
this.$refs.pathMap.clearMap();
this.clearPath();
this.currentCrossData = row;
this.$refs[`comp${this.tabsActiveName}`].initData();
if (Array.isArray(row.cameraList)) {
......
wj-manage-web/src/views/situation/MapPopup/eventPopup.vue
View file @ edfd5c94
......@@ -3,8 +3,8 @@
<div class="header">事件详情</div>
<div class="main">
<div class="detail_item" v-for="item of eventDetails" :key="item._id">
<div class="label">{{ item.label }}</div>
<div class="value">{{ item.value }}</div>
<div class="detail_item_label">{{ item.label }}</div>
<div class="detail_item_value">{{ item.value }}</div>
</div>
</div>
</div>
......@@ -77,13 +77,13 @@ export default {
background-position-y: center;
background-repeat: no-repeat;
.label {
.detail_item_label {
padding-left: 30PX;
//line-height: 24PX;
color: #bcdaec;
}
.value {
.detail_item_value {
//line-height: 24PX;
color: white;
overflow: hidden;
......
wj-manage-web/src/views/situation/index.vue
View file @ edfd5c94
......@@ -147,6 +147,7 @@ let map,
vehicleModelTypes = {},
lastFrameTime = null,
noTrackMsg = null,
stopLineData = [],
radarModels = {},
radarModelTypes = {},
radarTimers = [],
......@@ -173,7 +174,6 @@ export default {
detetorsArray: [],
detetorsStatus: false,
trackSwitcherVis: false,
lightColorMap: { red: "1", green: "3", yellow: "2" }, //与灯态图片命名关联
crossPoints: null, //所有路口lnglat geojson集合
currentNearestCrossId: "", // 当前离视图中心点最近的路口id
bounds: [],
......@@ -191,7 +191,6 @@ export default {
videoListData: [],
timeState: false,
licenseState: true,
stopLineData: {},
layers: {
first: [
"milliScope",
......@@ -239,6 +238,12 @@ export default {
},
created() {},
mounted() {
fetch("stopLines.json").then((res) => {
res.json().then((result) => {
console.log("rrr", result);
stopLineData = result.content;
});
});
this.getMapParamsTimer = setInterval(() => {
if (map && map.getCenter()) {
console.log("地图当前视角信息：");
......@@ -277,11 +282,15 @@ export default {
重度拥堵: 3,
疑似事故: 4,
};
let targetLngLat = [item.lng, item.lat];
let geo = turf.featureCollection([
turf.point([item.lng, item.lat], { type: iconNameMap[item.eventType] }),
turf.point(targetLngLat, { type: iconNameMap[item.eventType] }),
]);
// console.log("geo", geo);
mapTools.addOrUpdateWarningWave(map, geo);
// map?.flyTo({
// center: targetLngLat,
// });
// 如果是由于上报产生的告警 （而非鼠标悬浮交互展示的
// 则定时清除 （5s
if (option.type === "auto") {
......@@ -297,13 +306,9 @@ export default {
this.situationTimeVal = time;
},
removeLayers(names) {
// map.off("click", this[`${layerId}Click`]);
if (map) {
for (let layerId of names.split(",")) {
if (map.getLayer(layerId)) {
// if (this[`${layerId}Click`]) {
// map.off("click", layerId, this[`${layerId}Click`]);
// }
map.removeLayer(layerId);
}
if (map.getSource(layerId)) {
......@@ -380,6 +385,7 @@ export default {
map = this.$refs.wMap.initMap();
window.map = map;
map.on("style.load", () => {
// map.on("load", () => {
// 添加map icons图片资源 ---start
for (let key in mapAssets.lightIcons) {
map.loadImage(mapAssets.lightIcons[key], (error, image) => {
......@@ -532,14 +538,9 @@ export default {
writeOffListener() {
map.off("zoomend", this.mapZoomEnd);
map.off("moveend", this.mapMoveEnd);
map.off("click", this.equipmentsClick);
},
mapMoveEnd() {
if (map.getZoom() > 18) {
this.refreshLightWs("move");
this.refreshBounds();
}
// map.off("click", this.equipmentsClick);
},
// 转换描述文字为具体方向值
translateToDirCode(dirDesc) {
if (dirDesc.includes("西")) {
......@@ -579,10 +580,16 @@ export default {
let lnglat = this.radarDatas[i].wkt.split(",");
let center = turf.point(lnglat);
let radius = 0.17; // 100米半径
let thisRadarDir = this.radarDatas[i].equipAddr;
let dirCode = this.translateToDirCode(thisRadarDir);
// let thisRadarDir = this.radarDatas[i].equipAddr;
// let dirCode = this.translateToDirCode(thisRadarDir);
let dirCode = this.radarDatas[i].ridDir;
let bearings =
MilliRadarBearingMap[`${this.radarDatas[i].crossId}-${dirCode}`];
console.log(
"bearings",
MilliRadarBearingMap[`${this.radarDatas[i].crossId}-${dirCode}`],
`${this.radarDatas[i].crossId}-${dirCode}`
);
if (bearings) {
let arc = turf.lineArc(center, radius, bearings[0], bearings[1], {
unit: "kilometers",
......@@ -608,10 +615,11 @@ export default {
addRadarTimers(radarData, index) {
this.radarShow = true;
const numRings = 4; // 水波的层数
const maxMeters = radarData.sourceEquipType == 1 ? 100 : 200; // 最大半径，例如100米
const maxPx = this.convertPxToMeter(maxMeters, map.getZoom());
const maxMeters = 200; // 最大半径，例如100米
let lnglat = radarData.wkt.split(",");
for (let ii = 0; ii < numRings; ii++) {
const maxPx = this.convertPxToMeter(maxMeters, map.getZoom(), lnglat[1]);
for (let ii = 0; ii <= numRings; ii++) {
const radius = (ii / numRings) * maxPx;
const opacity = 1 - ii / numRings;
if (!map.getSource(`circle-source-${ii}-${index}`)) {
......@@ -652,7 +660,11 @@ export default {
}
let timer = setInterval(() => {
if (map && map.getLayer("circle-layer-0-0")) {
let maxPxInterval = this.convertPxToMeter(maxMeters, map.getZoom());
let maxPxInterval = this.convertPxToMeter(
maxMeters,
map.getZoom(),
lnglat[1]
);
for (let ii = 0; ii < numRings; ii++) {
let radius = map.getPaintProperty(
`circle-layer-${ii}-${index}`,
......@@ -695,12 +707,16 @@ export default {
}, 20);
radarTimers.push(timer);
},
convertPxToMeter(meter, zoom) {
// Mapbox的Mercator投影
var metersPerPixel = (40075016.686 * Math.cos(0)) / Math.pow(2, zoom + 8);
// 长度（米）转换为像素值
var pixelValue = meter / metersPerPixel;
return pixelValue;
convertPxToMeter(meter, zoom, latitude) {
// // Mapbox的Mercator投影
// var metersPerPixel = (40075016.686 * Math.cos(0)) / Math.pow(2, zoom + 8);
// // 长度（米）转换为像素值
// var pixelValue = meter / metersPerPixel;
// return pixelValue;
let a = 40075017;
let b = latitude * (Math.PI / 180);
let c = (a * Math.cos(b)) / Math.pow(2, zoom + 8);
return meter / c;
},
clearRadarWave() {
for (let tim of radarTimers) {
......@@ -714,9 +730,21 @@ export default {
}
this.radarShow = false;
},
mapMoveEnd() {
this.refreshBounds();
// 模块一：地图 moveend 刷新灯态
if (this.currentCheck == "first") {
if (map.getZoom() > 18) {
this.refreshLightWs("move");
}
}
},
mapZoomEnd() {
this.refreshBounds();
// 模块一：地图 zoomend 刷新灯态 刷新雷达图层 刷新线圈
if (this.currentCheck === "first") {
if (map.getZoom() > 17) {
this.refreshLightWs("zoom");
if (!this.radarShow) {
this.radarShow = true;
this.loadRadars();
......@@ -730,17 +758,7 @@ export default {
}
});
}
} else {
this.clearRadarWave();
this.removeLayers("milliScope");
for (let key in radarModels) {
window.tb.clear(key, null);
}
}
}
if (map.getZoom() > 18) {
this.refreshLightWs("zoom");
//----------------------------------------
if (!this.detetorsStatus) {
let ws1 = initWs({
name: "callDetetorA",
......@@ -785,6 +803,11 @@ export default {
this.detetorsStatus = true;
}
} else {
this.clearRadarWave();
this.removeLayers("milliScope");
for (let key in radarModels) {
window.tb.clear(key, null);
}
this.$refs.videoList?.destroyAll();
this.videoListData = [];
this.removeLightModels();
......@@ -800,7 +823,7 @@ export default {
this.detetorsStatus = false;
});
}
this.refreshBounds();
}
},
refreshLightWs(source) {
if (!this.crossPoints) {
......@@ -910,6 +933,7 @@ export default {
// 因为接收到检测器个数不完整
// 需要与所有检测器信息聚合 后 再更新图层 避免缺失
// id 只在 全量数据 中存在且不在 接收数据 中存在的即为 需要合并的数据
if (this.detetors[`DETECTOR_${type}`]) {
let del = this.detetors[`DETECTOR_${type}`].filter(
(e) => !msg.find((c) => c.laneId === e.laneId)
);
......@@ -922,6 +946,7 @@ export default {
let currentAll = [...msg, ...del];
let geo = this.convertToLineWithWkt(currentAll);
mapTools[`addOrUpdateDetetor${type}`](map, geo);
}
},
switchsecond() {
......@@ -1101,14 +1126,17 @@ export default {
// },
// 设备点击
equipmentsClick(e) {
popupInstance?.$destroy();
popupInstance = null;
const features = map.queryRenderedFeatures(e.point, {
layers: ["camera", "milli", "radar", "signal", "weather"],
});
if (features.length) {
console.log("fff", features);
let prop = Object.assign({}, features[0].properties, {
eType: features[0].layer.id,
});
let type = prop.eType;
let prop = features[0].properties;
let type = features[0].layer.id;
if (prop.status == "1") {
setTimeout(() => {
// 创建新 popup 绑定事件（关闭时清除掉里面的video 防止占用资源）
// 使用 Turf.js 进行平移计算
let distance = 10; // 指定的平移距离（以米为单位）
......@@ -1124,10 +1152,15 @@ export default {
bearing,
options
);
// debugger
// 将地图中心点设置为平移后的点
map.flyTo({ center: translatedPoint.geometry.coordinates, zoom: 18 });
equipPopup = new mapboxgl.Popup({ anchor: "bottom", offset: [0, -20] });
map.flyTo({
center: translatedPoint.geometry.coordinates,
zoom: 18,
});
equipPopup = new mapboxgl.Popup({
anchor: "bottom",
offset: [0, -20],
});
equipPopup
.setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>')
......@@ -1141,13 +1174,18 @@ export default {
});
popupInstance.$mount("#equipment_popup");
equipPopup?.on("close", () => {
popupInstance.$destroy();
popupInstance?.$destroy();
popupInstance = null;
equipPopup = null;
});
}, 100);
} else {
ELEMENT.Message("设备已离线，请联系厂商");
}
}
},
removeVehiclePopup() {
console.log("do delete all Popups...");
for (let key in vehiclePopups) {
vehiclePopups[key]?.remove();
}
......@@ -1157,6 +1195,7 @@ export default {
},
// 切换业务图层
changeCheck(beforeLabel, checkItem) {
this.refreshBounds();
this.currentCheck = checkItem.label;
if (beforeLabel === "first") {
this.clearTrackTimer();
......@@ -1306,6 +1345,7 @@ export default {
},
// 选中模型改变
onSelectedChangeVehicle(e) {
console.log("flalkdsflkajdflsjl");
if (e.detail.selected) {
this.removeVehiclePopup();
this.clearSelectVehicle();
......@@ -1518,7 +1558,6 @@ export default {
);
vehicleModels[option.id] = model;
window.tb.add(model, option.id);
// console.log(vehicleModels[option.id].visible,vehicleModels[option.id].visibility,vehicleModels[option.id].hidden);
}
},
addVehicleLicenses(option) {
......@@ -1558,38 +1597,29 @@ export default {
},
// 获取单个路口的停止线
async getSingleCrossStopLine(crossId) {
let res = await getStopLineByLkid({ lkid: crossId });
this.stopLineData[crossId] = res.content;
},
// async getSingleCrossStopLine(crossId) {
// let res = await getStopLineByLkid({ lkid: crossId });
// this.stopLineData[crossId] = res.content;
// },
callLight(msg) {
this.$EventBus.$emit("callLight", msg);
if (msg[0] && msg[0].dirLampGroupMap && msg[0].phaseMap) {
let queue = [];
for (let cross of msg) {
if (!this.stopLineData[cross.crossId]) {
queue.push(this.getSingleCrossStopLine(cross.crossId));
}
}
Promise.all(queue).then(() => {
let colorLight = msg[0].dirLampGroupMap;
let lights = [];
let colorLight = msg[0].dirLampGroupMap;
for (let dir in colorLight) {
// 此方向的停止线
let singleDirStop = this.stopLineData[msg[0].crossId].find(
(item) => {
return item.dirtype == dir;
}
);
let singleDirStop = stopLineData.find((item) => {
return item.dirtype == dir && item.lkid == msg[0].crossId;
});
let currentDirAngle = singleDirStop.angle;
if (singleDirStop) {
let resultStopLine = turf.lineString(
JSON.parse(singleDirStop.geom).coordinates
);
// 停止线往路口中心偏移1.5米
let singleDirLine = turf.lineOffset(
JSON.parse(singleDirStop.geom),
-0.0015,
{
let singleDirLine = turf.lineOffset(resultStopLine, -0.0015, {
units: "kilometers",
}
).geometry.coordinates;
}).geometry.coordinates;
let center = turf.midpoint(
turf.point(singleDirLine[0]),
turf.point(singleDirLine[singleDirLine.length - 1])
......@@ -1603,28 +1633,30 @@ export default {
2: centerLightLocation,
3: rightLightLocation,
}; // 灯位置 与 灯态返回的type做对应策略
for (let turn in colorLight[dir]) {
if (turn != "20" && turn != "3") {
let time = msg[0].phaseMap[dir][turn] || "-";
lights.push({
roadDir: Number(dir),
turn: turn,
lightAngle: currentDirAngle ? currentDirAngle - 90 : 0,
roadDir: Number(dir) - 1,
color: colorLight[dir][turn],
coordinates: lightLocations[turn],
ts: `${turn}${this.lightColorMap[colorLight[dir][turn]]}`, // 转向 + 状态(红绿黄) 与地图灯态icon对应
state: this.lightColorMap[colorLight[dir][turn]], //状态(红绿黄)
remainTime: msg[0].phaseMap[`${dir}-${turn}`], // 剩余时间
ts: `${turn}${colorLight[dir][turn]}`, // 转向 + 状态(红绿黄) 与地图灯态icon对应
turn: turn,
state: colorLight[dir][turn], //状态(红绿黄)
remainTime: time, // 剩余时间
});
}
}
}
}
// console.log("lights.............", lights);
let features = [];
for (let item of lights) {
features.push(turf.point(item.coordinates, item));
}
let geo = turf.featureCollection(features);
// // console.log("final geo", geo);
mapTools.addOrUpdateLightLayers(map, geo);
});
}
},
// 可关闭弹框关闭事件
......
wj-manage-web/src/views/situation/messageBoxes.vue
View file @ edfd5c94
......@@ -374,7 +374,7 @@ export default {
for (let helmet of helmetData) {
total += Number(helmet.illegalNum);
}
this.avgHelMet = ((total / helmetData.length) * 100).toFixed(2) + "%";
this.avgHelMet = ((total / helmetData.length) * 100).toFixed(0) + "%";
} else {
this.avgHelMet = "-";
}
......@@ -457,6 +457,9 @@ export default {
crossFlow().then((res) => {
console.log("路口流量", res);
this.trafficFlowData.cross = res.content;
res.content.flowList = res.content.flowList.sort((a,b)=>{
return a.name.localeCompare(b.name)
})
if (init) {
this.$nextTick(() => {
this.trafficFlow(this.trafficFlowData.cross, true);
......@@ -466,6 +469,9 @@ export default {
//路段
ridFlow().then((res) => {
console.log("路段流量", res);
res.content.flowList = res.content.flowList.sort((a,b)=>{
return a.name.localeCompare(b.name)
})
this.trafficFlowData.road = res.content;
});
},
......@@ -532,6 +538,10 @@ export default {
"rgba(233, 66, 66,1)",
"rgba(75, 75, 75,1)",
];
let unitMap = {
'最大行程时间':'min',
"行驶速度":'km/h'
}
let option = {
tooltip: {
transitionDuration: 0,
......@@ -543,6 +553,7 @@ export default {
formatter: (params) => {
let back = `${params.name}</br>`;
for (let i = 0; i < params.data.key.length; i++) {
let unit = unitMap[params.data.key[i]]||''
if (params.data.key[i] === "交通状态") {
let realValue = "";
for (let item of this.trafficMap) {
......@@ -552,7 +563,7 @@ export default {
}
back += `${params.data.key[i]} : ${realValue} </br>`;
} else {
back += `${params.data.key[i]} : ${params.data.value[i]} </br>`;
back += `${params.data.key[i]} : ${params.data.value[i]} ${unit}</br>`;
}
}
return back;
......@@ -703,7 +714,7 @@ export default {
str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
}
var tooltipHtml =
'<div style="max-height:150px;overflow-y:auto">' +
'<div style="max-height:120px;overflow-y:auto">' +
str +
"</div>";
return tooltipHtml;
......@@ -834,13 +845,17 @@ export default {
confine: true,
formatter: (params) => {
let back = ``;
let unitMap = {
'机动车速度':'km/h'
}
for (let item of params) {
let unit = unitMap[item.seriesName] || ''
if (
[pedNumLabel, notVehicleNumLabel, vehicleNumLabel].includes(
item.seriesName
)
) {
back += `${item.seriesName}&nbsp;&nbsp:&nbsp;&nbsp${item.data}</br>`;
back += `${item.seriesName}&nbsp;&nbsp:&nbsp;&nbsp${item.data} ${unit}</br>`;
}
}
return back;
......
wj-manage-web/src/views/track/index.vue
View file @ edfd5c94
......@@ -38,25 +38,27 @@
此段轨迹数据暂无对应视频...
</div>
<div style="display: flex; margin: 0 auto">
<!-- :id="`videoVisibles${item.monitorChannel}`" -->
<div
class="cameraVideoShow"
v-for="item of eventRowData.channels"
:key="item"
:id="`videoVisibles${item.monitorChannel}`"
:id="`videoVisibles${item}`"
>
<loop-video
@videoRestart="videoRestart"
@videoReady="videoReady"
:channel="item.monitorChannel"
:channel="item"
:timeModel="eventRowData"
></loop-video>
<!-- :channel="item.monitorChannel" -->
</div>
</div>
</div>
<!--鹰眼图-->
<div class="small-map-container" v-show="showOverMap">
<cesium-map
:loadTileset="false"
:loadTileset="true"
cId="overMap"
ref="cesiumOverMap"
class="cesium-over-map"
......@@ -82,11 +84,13 @@
v-show="currentMenu === 'third'"
:show="boxesShow"
@playFullTrackWithVideo="playFullTrackWithVideo"
@getHisLights="getHisLights"
/>
<menu-traffic-crowd
v-show="currentMenu === 'fourth'"
:show="boxesShow"
@playFullTrack="playFullTrack"
@getHisLights="getHisLights"
/>
<!--切换视角-->
<per-switch
......@@ -183,10 +187,13 @@ import vehicleDetail from "./MapPopup/vehicleDetail.vue";
const VehiclePopup = Vue.extend(vehicleDetail);
let viewer,
stopLineData = [],
viewerS,
entityLines = {},
entityVehicles = {},
popup = null,
entityLines = {}, // 动态轨迹的目标车辆line
entityVehicles = {}, // 动态轨迹的所有车辆
lightEntities = {}, // 灯态entity
lightTexts = {}, // 灯态文字entity
popup = null, // 目标车辆弹窗
tileFeatureMap1 = {
// 路口-方向-转向
// --------方向
......@@ -212,7 +219,7 @@ let viewer,
// 转山西路
// "13NI00B5RM0-1-1": "HLD_LMX_008_M_R1",
},
currentEntity = null,
currentEntity = null, // 需要展示弹窗的目标车辆
timeRangeLights = [];
export default {
name: "track",
......@@ -278,11 +285,143 @@ export default {
speed: "",
time: "",
},
lightColorMap: { red: "1", green: "3", yellow: "2" }, //与灯态图片命名关联
lastTimeSecend: null,
};
},
computed: {},
methods: {
updateSceneLights() {
this.updateLights();
if (
this.currentMenu == "first" &&
this.currentView == "second" &&
currentEntity &&
currentEntity.position
) {
let position = currentEntity.position.getValue(
viewer.clock.currentTime
);
if (position) {
// 插值实现红绿灯远小近大效果
var cameraPosition = viewer.camera.positionWC;
for (let key in lightEntities) {
let entity = lightEntities[key];
var entityPosition = entity.position.getValue(
viewer.clock.currentTime
);
if (Cesium.defined(entityPosition)) {
var distance = Cesium.Cartesian3.distance(
cameraPosition,
entityPosition
);
var scaleFactor = 35 / distance; // 调整这个系数以控制实体的缩放范围
if (scaleFactor > 1) {
scaleFactor = 1;
}
entity.billboard.scale = scaleFactor;
}
}
for (let key in lightTexts) {
let entity = lightTexts[key];
var entityPosition = entity.position.getValue(
viewer.clock.currentTime
);
if (Cesium.defined(entityPosition)) {
var distance = Cesium.Cartesian3.distance(
cameraPosition,
entityPosition
);
var scaleFactor = 35 / distance; // 调整这个系数以控制实体的缩放范围
if (scaleFactor > 1) {
scaleFactor = 1;
}
entity.label.scale = scaleFactor;
}
}
}
} else {
for (let key in lightEntities) {
let entity = lightEntities[key];
entity.billboard.scale = 1;
}
for (let key in lightTexts) {
let entity = lightTexts[key];
entity.label.scale = 1;
}
}
},
getHisLights(lights) {
timeRangeLights = lights;
},
// 更新灯态
// updateLightsbackup() {
// if (viewer.clock.shouldAnimate) {
// // 获取cesium当前时间
// let currentTime = Cesium.JulianDate.toDate(
// viewer.clock.currentTime
// ).toLocaleString();
// let time = new Date(currentTime).getTime().toString();
// let timeSecend = time.slice(0, time.length - 3);
// // 根据 cesium 当前时间(timeSecend) 从 历史灯态数组中找到对应时间的灯态数据 => 渲染 3dtiles 灯态样式
// let matchCrossLight = timeRangeLights.filter((item) => {
// return item.timeStamp.slice(0, time.length - 3) == timeSecend;
// });
// // 根据 灯态数据 与 3dtiles feature name 匹配map 生成3dtile样式表达式 并赋值
// // 当前灯态为红则把剩余的GreenYellow灯feature设置为black
// // 当前灯态为黄则把剩余的GreenRed灯feature设置为black ...
// // 下面replace逻辑需要此map 以避免代码重复编写
// let otherLightMap = {
// red: ["R", "G", "Y"],
// yellow: ["Y", "G", "R"],
// green: ["G", "R", "Y"],
// };
// if (matchCrossLight.length) {
// console.log("timeChange.light", timeSecend);
// let conditionResult = [];
// for (let crosslight of matchCrossLight) {
// let crossId = crosslight.crossId;
// for (let dir in crosslight.dirLampGroupMap) {
// for (let turn in crosslight.dirLampGroupMap[dir]) {
// let arr = [];
// let color = crosslight.dirLampGroupMap[dir][turn];
// let mapKey = `${crossId}-${dir}-${turn}-${color}`;
// if (tileFeatureMap1[mapKey]) {
// arr.push([`\${name} === "${tileFeatureMap1[mapKey]}"`]);
// arr.push([`color('${color}')`]);
// conditionResult.push(arr);
// if (otherLightMap[color]) {
// let otherLight1 = tileFeatureMap1[mapKey].replace(
// otherLightMap[color][0],
// otherLightMap[color][1]
// );
// let otherLight2 = tileFeatureMap1[mapKey].replace(
// otherLightMap[color][0],
// otherLightMap[color][2]
// );
// let otherCondition1 = [
// `\${name} === "${otherLight1}"`,
// `color('black')`,
// ];
// let otherCondition2 = [
// `\${name} === "${otherLight2}"`,
// `color('black')`,
// ];
// conditionResult.push(otherCondition1, otherCondition2);
// }
// }
// }
// }
// }
// console.log("new conditions", conditionResult);
// window.tileset.style = new Cesium.Cesium3DTileStyle({
// color: {
// conditions: conditionResult,
// },
// });
// }
// }
// },
updateLights() {
if (viewer.clock.shouldAnimate) {
// 获取cesium当前时间
......@@ -291,62 +430,121 @@ export default {
).toLocaleString();
let time = new Date(currentTime).getTime().toString();
let timeSecend = time.slice(0, time.length - 3);
if (this.lastTimeSecend != timeSecend) {
this.lastTimeSecend = timeSecend;
if (timeRangeLights.length) {
// 根据 cesium 当前时间(timeSecend) 从 历史灯态数组中找到对应时间的灯态数据 => 渲染 3dtiles 灯态样式
let matchCrossLight = timeRangeLights.filter((item) => {
return item.timestamp == timeSecend;
return (
item.timeStamp.slice(0, item.timeStamp.length - 3) == timeSecend
);
});
// 根据 灯态数据 与 3dtiles feature name 匹配map 生成3dtile样式表达式 并赋值
// 当前灯态为红则把剩余的GreenYellow灯feature设置为black
// 当前灯态为黄则把剩余的GreenRed灯feature设置为black ...
// 下面replace逻辑需要此map 以避免代码重复编写
let otherLightMap = {
red: ["R", "G", "Y"],
yellow: ["Y", "G", "R"],
green: ["G", "R", "Y"],
};
if (matchCrossLight.length) {
console.log("timeChange.light", timeSecend);
let conditionResult = [];
for (let crosslight of matchCrossLight) {
let crossId = crosslight.crossId;
for (let dir in crosslight.dirLampGroupMap) {
for (let turn in crosslight.dirLampGroupMap[dir]) {
let arr = [];
let color = crosslight.dirLampGroupMap[dir][turn];
let mapKey = `${crossId}-${dir}-${turn}-${color}`;
if (tileFeatureMap1[mapKey]) {
arr.push([`\${name} === "${tileFeatureMap1[mapKey]}"`]);
arr.push([`color('${color}')`]);
conditionResult.push(arr);
if (otherLightMap[color]) {
let otherLight1 = tileFeatureMap1[mapKey].replace(
otherLightMap[color][0],
otherLightMap[color][1]
// console.log("matchCrossLight", matchCrossLight);
for (let lightMap of matchCrossLight) {
// console.log("stopLineData", stopLineData);
let colorLight = lightMap.dirLampGroupMap;
let lights = [];
for (let dir in colorLight) {
// 此方向的停止线
let singleDirStop = stopLineData.find((stopLine) => {
return (
stopLine.dirtype == dir &&
stopLine.lkid == lightMap.crossId
);
let otherLight2 = tileFeatureMap1[mapKey].replace(
otherLightMap[color][0],
otherLightMap[color][2]
);
let otherCondition1 = [
`\${name} === "${otherLight1}"`,
`color('black')`,
];
let otherCondition2 = [
`\${name} === "${otherLight2}"`,
`color('black')`,
];
conditionResult.push(otherCondition1, otherCondition2);
});
// console.log("current stopline", singleDirStop);
if (singleDirStop) {
let currentDirAngle = singleDirStop.angle;
// 停止线往路口中心偏移1.5米
let singleDirLine = turf.lineOffset(
JSON.parse(singleDirStop.geom),
-0.0015,
{
units: "kilometers",
}
).geometry.coordinates;
let center = turf.midpoint(
turf.point(singleDirLine[0]),
turf.point(singleDirLine[singleDirLine.length - 1])
).geometry.coordinates;
let leftLightLocation = singleDirLine[0]; // 左转灯位置
let centerLightLocation = center; // 直行灯位置
let rightLightLocation =
singleDirLine[singleDirLine.length - 1]; // 右转灯位置
let lightLocations = {
1: leftLightLocation,
2: centerLightLocation,
3: rightLightLocation,
}; // 灯位置 与 灯态返回的type做对应策略
for (let turn in colorLight[dir]) {
if (turn != "20" && turn != "3") {
lights.push({
crossDirTurn: `${lightMap.crossId}-${dir}-${turn}`,
color: colorLight[dir]?.[turn],
coordinates: lightLocations[turn],
ts: `${turn}${colorLight[dir]?.[turn]}`, // 转向 + 状态(红绿黄) 与地图灯态icon对应
remainTime:
lightMap.phaseMap[dir]?.[turn]?.toString() || "-", // 剩余时间
});
}
}
}
}
console.log("lights result...", lights);
for (let light of lights) {
if (lightEntities[light.crossDirTurn]) {
lightEntities[
light.crossDirTurn
].billboard.image = `lightIcons/${light.ts}.png`;
} else {
// 创建Entity
let entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
...light.coordinates,
3
),
billboard: {
image: `lightIcons/${light.ts}.png`,
scale: 1.0,
},
});
lightEntities[light.crossDirTurn] = entity;
}
console.log("new conditions", conditionResult);
window.tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: conditionResult,
if (lightTexts[light.crossDirTurn]) {
// todo update text
lightTexts[light.crossDirTurn].label.text =
light.remainTime;
} else {
let entityText = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(
...light.coordinates,
3
),
label: {
text: light.remainTime, // 设置文本内容
font: "bold 14px Arial", // 设置字体和字体大小
fillColor: Cesium.Color.WHITE, // 设置文本颜色
outlineColor: Cesium.Color.BLACK, // 设置文本轮廓颜色
outlineWidth: 3, // 设置文本轮廓宽度
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 设置文本样式
},
});
lightTexts[light.crossDirTurn] = entityText;
}
}
}
} else {
for (let key in lightEntities) {
viewer.entities.remove(lightEntities[key]);
}
for (let key in lightTexts) {
viewer.entities.remove(lightTexts[key]);
}
lightEntities = {};
lightTexts = {};
}
}
}
}
},
......@@ -422,7 +620,8 @@ export default {
// 模块三 模块四 播放拥堵 & 事件轨迹
playMultiTracksAndFlyCenter(data, center) {
console.log("event & crowd center", center);
viewer.entities.removeAll();
this.switchTimeLine(true);
this.removeAllEntities();
viewer.clock.shouldAnimate = false;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(...center, 400),
......@@ -537,7 +736,6 @@ export default {
}
}
}
// 如果当前为播放事件轨迹（第三模块） 则 找到当前事件的车辆及其轨迹
if (this.currentMenu === "third" && this.eventRowData) {
let currentVehicle = cars.find((item) => {
......@@ -566,17 +764,30 @@ export default {
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
});
},
// 停止播放 删除所有实体 删除弹窗
removeAllEntities() {
this.playStatus = false;
viewer?.entities.removeAll();
viewerS?.entities.removeAll();
lightEntities = {};
lightTexts = {};
currentEntity = null;
entityVehicles = {};
entityLines = {};
popup?.remove();
popup = null;
},
// 模块一 模块二 请求轨迹并播放
queryPathByTime(rowData) {
this.removeAllEntities();
if (!rowData.tracks || !rowData.tracks.length) {
ELEMENT.Message.warning("当前数据无轨迹对应时间，无法获取轨迹！");
return;
}
console.log("rowData request", rowData);
viewer.entities.removeAll();
viewerS.entities.removeAll();
this.currentView = "first";
this.$refs.perSwitch.resetPer();
this.showTrackSwitcher = false;
this.fullscreenLoading = true;
// 轨迹查询页面回放轨迹
let startQ = rowData.tracks[0].startTime.slice(0, 19);
......@@ -777,17 +988,14 @@ export default {
});
},
// 交通事件轨迹回溯
playFullTrackWithVideo(data, rowData, center) {
this.switchTimeLine(true);
playFullTrackWithVideo(data, rowData) {
this.playMultiTracksAndFlyCenter(data, [rowData.lng, rowData.lat]);
this.eventRowData = rowData;
console.log("eventRowData", rowData);
this.cameraShow = true;
this.playMultiTracksAndFlyCenter(data, center);
},
// 交通拥堵轨迹回溯
playFullTrack(data, center) {
this.switchTimeLine(true);
this.playMultiTracksAndFlyCenter(data, center);
playFullTrack(data, rowData) {
this.playMultiTracksAndFlyCenter(data, [rowData.lng, rowData.lat]);
},
// 返回车辆轨迹查询
toFirst() {
......@@ -806,22 +1014,14 @@ export default {
if (this.currentMenu !== "third") {
this.$refs.cameraVideo?.destroy();
}
viewer.entities.removeAll();
this.removeAllEntities();
viewer.clock.shouldAnimate = false;
viewerS.entities.removeAll();
viewerS.clock.shouldAnimate = false;
this.currentView = "first";
this.showOverMap = false;
this.showTrackSwitcher = false;
this.switchTimeLine(false);
this.showTimeSelector = false;
popup?.remove();
popup = null;
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
...cesium_config.center,
......@@ -943,7 +1143,7 @@ export default {
this.setCameraView(3, 12, -10);
viewer.scene.preRender.removeEventListener(this.syncViewer);
currentEntity.show = true;
this.popupOffset = [0, 100];
this.popupOffset = [0, 120];
viewer.trackedEntity = currentEntity;
viewer.clock.onTick.removeEventListener(this.clockListenerInCar);
viewer.clock.onTick.addEventListener(this.clockListenerWithCar);
......@@ -952,7 +1152,7 @@ export default {
switchthird() {
this.setCameraView(1.5, 0, -5);
viewer.scene.preRender.removeEventListener(this.syncViewer);
this.popupOffset = [0, 100];
this.popupOffset = [0, 120];
viewer.trackedEntity = currentEntity;
currentEntity.show = false;
viewer.clock.onTick.removeEventListener(this.clockListenerWithCar);
......@@ -960,21 +1160,10 @@ export default {
},
// 展示勾选的轨迹
showTrack(tracks) {
// 清除动态entity
for (let key in entityVehicles) {
viewer.entities.remove(entityVehicles[key]);
}
for (let key in entityLines) {
viewer.entities.remove(entityLines[key]);
}
entityVehicles = {};
// 清除鹰眼图
viewerS.entities.removeAll();
this.removeAllEntities();
this.showOverMap = false;
// 移除popup
viewer?.clock.onTick.removeEventListener(this.updatePopup);
popup?.remove();
popup = null;
this.switchTimeLine(false);
this.showTrackSwitcher = false;
let allData = this.diff(this.lastChecks, tracks);
......@@ -1041,7 +1230,6 @@ export default {
},
// 更新弹窗信息
updatePopup() {
this.updateLights();
if (
viewer.clock.shouldAnimate &&
currentEntity &&
......@@ -1089,8 +1277,6 @@ export default {
popup?.remove();
popup = null;
}
} else {
this.playStatus = false;
}
},
// 获取时间区间内的历史灯态
......@@ -1110,26 +1296,26 @@ export default {
getLightByTimeAndCrossId(toSend[1]),
getLightByTimeAndCrossId(toSend[2]),
]).then(([res1, res2, res3]) => {
let lastFiveStart = 0;
console.log("历史灯态", res1, res2, res3);
for (let i = 0; i < res1.content.length; i++) {
if (i % 5 !== 0) {
let timestamp = lastFiveStart + (i % 5);
res1.content[i].timestamp = timestamp;
res2.content[i].timestamp = timestamp;
res3.content[i].timestamp = timestamp;
} else {
let timestamp = res1.content[i].schemeStartTime.slice(
0,
res1.content[i].schemeStartTime.length - 3
);
res1.content[i].timestamp = timestamp;
res2.content[i].timestamp = timestamp;
res3.content[i].timestamp = timestamp;
lastFiveStart = res1.content[i].timestamp;
}
}
timeRangeLights = [...res1.content, ...res2.content, ...res3.content];
// let lastFiveStart = 0;
// for (let i = 0; i < res1.content.length; i++) {
// if (i % 5 !== 0) {
// let timestamp = lastFiveStart + (i % 5);
// res1.content[i]?.timestamp = timestamp;
// res2.content[i]?.timestamp = timestamp;
// res3.content[i]?.timestamp = timestamp;
// } else {
// let timestamp = res1.content[i].timeStamp.slice(
// 0,
// res1.content[i].timeStamp.length - 3
// );
// res1.content[i]?.timestamp = timestamp;
// res2.content[i]?.timestamp = timestamp;
// res3.content[i]?.timestamp = timestamp;
// lastFiveStart = res1.content[i].timestamp;
// }
// }
});
},
// 添加property插值属性
......@@ -1193,13 +1379,11 @@ export default {
// 播放按钮
play() {
viewer.clock.shouldAnimate = !viewer.clock.shouldAnimate;
viewerS.clock.shouldAnimate = !viewerS.clock.shouldAnimate;
this.playStatus = viewer.clock.shouldAnimate;
},
// 倍速切换
changeSpeed(e) {
viewer.clock.multiplier = e;
viewerS.clock.multiplier = e;
},
getModelMatrix(entity, time) {
let position = Cesium.Property.getValueOrUndefined(
......@@ -1266,6 +1450,12 @@ export default {
},
},
mounted() {
fetch("stopLines.json").then((res) => {
res.json().then((result) => {
console.log("rrr", result);
stopLineData = result.content;
});
});
let queue = [];
let needDicts = [
"CarType",
......@@ -1290,6 +1480,7 @@ export default {
this.fullscreenLoading = false;
});
viewer = this.$refs.cesiumMap.loadMap();
viewer.clock.onTick.addEventListener(this.updateSceneLights);
// 鹰眼图 = 普通cesium场景 cartographic height * 1.5
viewerS = this.$refs.cesiumOverMap.loadMap();
let control = viewerS.scene.screenSpaceCameraController;
......@@ -1299,20 +1490,17 @@ export default {
control.enableTilt = false;
control.enableLook = false;
this.switchTimeLine(false);
// this.resetView()
},
created() {},
beforeDestroy() {
console.log("viewer distroy..1....");
console.log("cesium viewer distroy......");
this.removeAllEntities();
viewer.scene.preRender.removeEventListener(this.syncViewer);
viewer?.clock.onTick.removeEventListener(this.clockListenerInCar);
viewer?.clock.onTick.removeEventListener(this.clockListenerWithCar);
viewer?.clock.onTick.removeEventListener(this.updatePopup);
viewer?.clock.onTick.removeEventListener(this.updateSceneLights);
viewer?.destroy();
viewerS?.destroy();
popup?.remove();
popup = null;
currentEntity = null;
},
};
</script>
......
wj-manage-web/src/views/track/menuKeyVehicle.vue
View file @ edfd5c94
......@@ -19,7 +19,7 @@
<el-table-column min-width="50" type="index" label="序号">
</el-table-column>
<el-table-column
min-width="60"
min-width="80"
:show-overflow-tooltip="true"
prop="plateNum"
label="号牌号码"
......@@ -37,7 +37,7 @@
{{ getNameByCode(scope.row && scope.row.type, "CarType") }}
</template>
</el-table-column>
<el-table-column
<!-- <el-table-column
min-width="60"
:show-overflow-tooltip="true"
label="使用性质"
......@@ -45,7 +45,7 @@
<template slot-scope="scope">
{{ getNameByCode(scope.row && scope.row.function, "Nature") }}
</template>
</el-table-column>
</el-table-column> -->
<el-table-column
min-width="80"
:show-overflow-tooltip="true"
......
wj-manage-web/src/views/track/menuTrafficCrowd.vue
View file @ edfd5c94
......@@ -188,8 +188,7 @@
<script>
import Pagination from "../../components/Standard/pigination.vue";
import { crowdTracksList, multiVehicleTrackDetail } from "../../dao/track";
import { crowdTracksList, multiVehicleTrackDetail,getLightByTimeAndCrossId } from "../../dao/track";
import MsgCard from "../../components/Standard/msg-card.vue";
export default {
......@@ -326,6 +325,7 @@ export default {
playTrack(rowData) {
this.fullscreenLoading = true;
console.log("row", rowData);
this.getLight({ startTime: rowData.startTime, endTime: rowData.endTime });
multiVehicleTrackDetail({
startTime: rowData.startTime,
endTime: rowData.endTime,
......@@ -334,12 +334,33 @@ export default {
console.log("多车详情", res);
this.fullscreenLoading = false;
if (res.content.length) {
this.$emit("playFullTrack", res.content, [rowData.lng, rowData.lat]);
this.$emit("playFullTrack", res.content, rowData);
} else {
this.$message.warning("该段时间无轨迹数据...");
}
});
},
// 获取时间区间内的历史灯态
getLight(timeRange) {
this.$emit('getHisLights',[])
let toSend = [];
for (let crossId of ["13NF80B5QN0", "13NGH0B5RC0", "13NI00B5RM0"]) {
toSend.push({
startBatchTime: new Date(timeRange.startTime).getTime() / 1000,
endBatchTime: new Date(timeRange.endTime).getTime() / 1000,
crossId: crossId,
});
}
console.log("timeRange", timeRange);
Promise.all([
getLightByTimeAndCrossId(toSend[0]),
getLightByTimeAndCrossId(toSend[1]),
getLightByTimeAndCrossId(toSend[2]),
]).then(([res1, res2, res3]) => {
console.log("历史灯态", res1, res2, res3);
this.$emit('getHisLights',[...res1.content, ...res2.content, ...res3.content])
});
},
// 搜索符合表单条件的轨迹
searchVehicleTracks() {
this.currentPage = 1;
......
wj-manage-web/src/views/track/menuTrafficEvent.vue
View file @ edfd5c94
......@@ -89,7 +89,7 @@
</el-form-item>
<el-form-item label="号牌号码:" prop="plateNum">
<el-input
:maxlength='64'
:maxlength="64"
clearable
placeholder="请输入车辆号牌号码"
v-model="searchForm.plateNum"
......@@ -165,7 +165,9 @@
min-width="60"
prop="plateNo"
label="号牌号码"
><template slot-scope="scope">{{scope.row.plateNo || '-'}}</template>
><template slot-scope="scope">{{
scope.row.plateNo || "-"
}}</template>
</el-table-column>
<el-table-column fixed="right" min-width="60" label="事件轨迹">
<template slot-scope="scope">
......@@ -195,6 +197,7 @@ import {
eventTracksList,
getEventVideo,
multiVehicleTrackDetail,
getLightByTimeAndCrossId
} from "../../dao/track";
import MsgCard from "../../components/Standard/msg-card.vue";
......@@ -358,11 +361,16 @@ export default {
};
Promise.all([eventTracksList(sendData), equip_camera()]).then(
([table, camera]) => {
console.log("table && camera", table, camera);
// console.log("table && camera", table, camera);
for (let i = 0; i < table.content.rows.length; i++) {
table.content.rows[i].channels = camera.content.filter((item) => {
return item.crossId === table.content.rows[i].crossId;
// table.content.rows[i].channels = camera.content.filter((item) => {
// return item.crossId === table.content.rows[i].crossId;
// });
let channels = table.content.rows[i].cameraChannels.split(",");
let fChannels = channels.filter((item) => {
return item !== "";
});
table.content.rows[i].channels = fChannels;
}
this.tableData = table.content.rows;
this.tableTotal = table.content.total;
......@@ -384,21 +392,40 @@ export default {
async playTrack(rowData) {
console.log("rowData", rowData);
this.fullscreenLoading = true;
this.getLight({ startTime: rowData.startTime, endTime: rowData.endTime });
multiVehicleTrackDetail({
startTime: rowData.startTime,
endTime: rowData.endTime,
}).then((res) => {
this.fullscreenLoading = false;
if (res.content.length) {
this.$emit("playFullTrackWithVideo", res.content, rowData, [
rowData.lng,
rowData.lat,
]);
this.$emit("playFullTrackWithVideo", res.content, rowData);
} else {
this.$message.warning("该段时间无轨迹数据...");
}
});
},
// 获取时间区间内的历史灯态
getLight(timeRange) {
this.$emit('getHisLights',[])
let toSend = [];
for (let crossId of ["13NF80B5QN0", "13NGH0B5RC0", "13NI00B5RM0"]) {
toSend.push({
startBatchTime: new Date(timeRange.startTime).getTime() / 1000,
endBatchTime: new Date(timeRange.endTime).getTime() / 1000,
crossId: crossId,
});
}
console.log("timeRange", timeRange);
Promise.all([
getLightByTimeAndCrossId(toSend[0]),
getLightByTimeAndCrossId(toSend[1]),
getLightByTimeAndCrossId(toSend[2]),
]).then(([res1, res2, res3]) => {
console.log("历史灯态", res1, res2, res3);
this.$emit('getHisLights',[...res1.content, ...res2.content, ...res3.content])
});
},
// 轨迹（仅展示）
showTrack(tracks) {
this.$emit("showTrack", tracks);
......
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