Skip to content

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

wj-smartcity添加灯态展示，引入灯态依赖资源，提取封装mixin

parent 53469680
Hide whitespace changes
Inline Side-by-side
Showing with 497 additions and 163 deletions
wj-smartcity/public/stopLines.json 0 → 100644
View file @ 61167a82
{
"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",
"turntype": "1,2,3"
},
{
"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",
"turntype": "1,2,3"
},
{
"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",
"turntype": "1,2,3"
},
{
"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]]}",
"angle": 56.92,
"dirtype": "4",
"turntype": "1,2,3"
},
{
"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",
"turntype": "1,2,3"
},
{
"lkid": "13NED0B5Q90",
"ldid": "13NF80B5QN013NED0B5Q900",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.08331937,36.640526444,149.679702759],[117.083303779,36.640550656,149.62890625],[117.083286177,36.6405785,149.62890625]]}",
"angle": 327.48,
"dirtype": "2",
"turntype": "2"
},
{
"lkid": "13NED0B5Q90",
"ldid": "13NF80B5QN013NED0B5Q900",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.083336134,36.64049981,149.730499268],[117.08331937,36.640526444,149.679702759]]}",
"angle": 327.81,
"dirtype": "2",
"turntype": "1,2"
},
{
"lkid": "13NI00B5RM0",
"ldid": "13NGH0B5RC013NI00B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094649523,36.644915312,135.570297241],[117.094652317,36.644890041,135.519500732]]}",
"angle": 173.69,
"dirtype": "7",
"turntype": "1,2"
},
{
"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",
"turntype": "2,3"
},
{
"lkid": "13NI00B5RM0",
"ldid": "13NG40B5SK013NI00B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.094632592,36.645122448,135.37109375],[117.094598226,36.645121103,135.351593018],[117.094567046,36.645119355,135.289093018]]}",
"angle": 267.3,
"dirtype": "1",
"turntype": "1,3"
},
{
"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",
"turntype": "2,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",
"turntype": "1,2,3"
},
{
"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",
"turntype": "1,2,3"
},
{
"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",
"turntype": "1,2,3"
},
{
"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",
"turntype": "1,3"
},
{
"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",
"turntype": "1,2"
},
{
"lkid": "13NID0B5RM0",
"ldid": "13NHC0B5R4013NID0B5RM00",
"geom": "{\"type\":\"LineString\",\"coordinates\":[[117.096125241,36.64482896,137.761703491],[117.096148375,36.64484779,137.80859375]]}",
"angle": 50.86,
"dirtype": "4",
"turntype": "1"
}
],
"message": "SQL执行成功",
"status": "success",
"timestamp": 0
}
\ No newline at end of file
wj-smartcity/src/config/holo/mapAssets.js
View file @ 61167a82
...@@ -29,4 +29,18 @@ export default { ...@@ -29,4 +29,18 @@ export default {
car10: require('../../assets/images/holo/carPic/car10.png'), car10: require('../../assets/images/holo/carPic/car10.png'),
car14: require('../../assets/images/holo/carPic/car14.png'), car14: require('../../assets/images/holo/carPic/car14.png'),
}, },
lightIcons: {
'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-smartcity/src/mixin/lightMixin.js 0 → 100644
View file @ 61167a82
let stopLineData
import * as mapTools from "@/utils/mapboxTools";
import { initWs } from "@/config/holo/websocket";
export default {
data() {
return {
currentNearestCrossId: ''
}
},
mounted() {
fetch("stopLines.json").then((res) => {
res.json().then((result) => {
stopLineData = result.content;
console.log('stopLineData', stopLineData);
});
});
},
methods: {
resetLightNearestCross() {
this.currentNearestCrossId = ''
},
refreshLightWs() {
let map = window.map
if (map.getZoom() < 17.5 || this.currentCheck!=='first') {
this.closeWs("callLight").then(() => {
this.currentNearestCrossId = null;
this.removeLayers("lightLayer,lightLayerText");
});
} else {
let targetPoint = turf.point([map.getCenter().lng, map.getCenter().lat]);
// 取最近点的crossId 判断哪个路口离当前视野中心点最近 请求对应的灯态websocket
let nearest = turf.nearestPoint(targetPoint, this.crossGeo);
let nearestCrossId = nearest.properties.id;
// 如果求得最近路口不是上次的最近路口，则关闭上个ws，请求最新路口ws
if (nearestCrossId !== this.currentNearestCrossId) {
this.currentNearestCrossId = nearestCrossId;
this.closeWs("callLight").then(() => {
let socket = initWs({
// url: `${ws_config.CROSS_CONTROL}${nearestCrossId},holo-web`,
url: `ws://${window.wsHost}/utc/signalStatus/${nearestCrossId},holo-web`,
callback: this.callLight,
name: "callLight",
});
socket.ws.onopen = () => {
if (socket.ws.readyState === 1) {
this.sockets.push(socket);
}
};
});
}
}
},
// 处理灯态
callLight(msg) {
let lightResults = [];
let waitResultFeatures = [];
for (let crossLight of msg) {
let dirsLights = crossLight.dirLampGroupMapList;
for (let singleDirLight of dirsLights) {
let stopLine = stopLineData.find((stop) => {
return (
stop.lkid == crossLight.crossId &&
stop.dirtype == singleDirLight.dir
);
});
if (stopLine) {
// 停止线往路口中心偏移0.8米
let resultStopLine = turf.lineString(
JSON.parse(stopLine.geom).coordinates
);
let stopLineGeom = turf.lineOffset(resultStopLine, -0.0008, {
units: "kilometers",
}).geometry.coordinates;
let splitPoints = {};
splitPoints.left = stopLineGeom[0];
splitPoints.right = stopLineGeom[stopLineGeom.length - 1];
splitPoints.center = turf.midpoint(
turf.point(splitPoints.left),
turf.point(splitPoints.right)
).geometry.coordinates;
let lightNumSplitMap = {
1: ["center"],
2: ["left", "right"],
};
let stopLineAngle = stopLine.angle;
// 停止线对应的转向数组 只有属于此数组的才视为合法转向灯
let stopLineTurns = stopLine.turntype.replace(",3", "").split(",");
// console.log("stopLineTurns", stopLineTurns);
// 根据停止线 turntype 筛选合法灯组
let newSingleDirTurnLightList = [];
for (let i = 0; i < singleDirLight.turnList.length; i++) {
if (stopLineTurns.includes(singleDirLight.turnList[i].turn)) {
newSingleDirTurnLightList.push(singleDirLight.turnList[i]);
}
}
for (let i = 0; i < newSingleDirTurnLightList.length; i++) {
lightResults.push({
state: newSingleDirTurnLightList[i].color,
remainTime: newSingleDirTurnLightList[i].countDown || `-`,
turn: newSingleDirTurnLightList[i].turn,
coordinates:
splitPoints[lightNumSplitMap[stopLineTurns.length][i]],
ts: `${newSingleDirTurnLightList[i].turn}${newSingleDirTurnLightList[i].color}`,
lightAngle: stopLineAngle - 90,
});
}
}
// let targetWait = waitGeo.features.find((wait) => {
// return (
// wait.properties.lkid == crossLight.crossId &&
// wait.properties.dirtype == singleDirLight.dir
// );
// });
// if (targetWait) {
// let currentWaiting = singleDirLight.turnList.find((item) => {
// return item.turn == "20";
// });
// let color = currentWaiting?.color.replace("Flash", "") || "white";
// waitResultFeatures.push(
// turf.polygon(targetWait.geometry.coordinates, { state: color })
// );
// }
}
}
let features = [];
for (let item of lightResults) {
features.push(turf.point(item.coordinates, item));
}
let geo = turf.featureCollection(features);
mapTools.addOrUpdateLightLayers(map, geo);
// let waitG = turf.featureCollection(waitResultFeatures);
// mapTools.addOrUpdateWaitingPolygons(map, waitG);
},
},
}
\ No newline at end of file
wj-smartcity/src/utils/mapboxTools.js
View file @ 61167a82
...@@ -13,7 +13,13 @@ function createTriangleIcon(color) { ...@@ -13,7 +13,13 @@ function createTriangleIcon(color) {
context.fill(); context.fill();
return canvas.toDataURL(); return canvas.toDataURL();
} }
export function convertPointsToGeo(arr){
let features = []
for(let item of arr){
features.push(turf.point([item.longitude,item.latitude],item))
}
return turf.featureCollection(features)
}
export function addOrUpdateSelectVehicleTrack(map, geo) { export function addOrUpdateSelectVehicleTrack(map, geo) {
if (!map.getSource("selectVehicleTrack")) { if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", { map.addSource("selectVehicleTrack", {
......
wj-smartcity/src/views/signal/dialogs/greenWave/greenWaveDetail.vue
View file @ 61167a82
<template> <template>
<div class="green-wave" ref="greenWave"> <div class="green-wave" ref="greenWave">
<canvas id="waveCanvas"></canvas> <canvas id="waveCanvas"></canvas>
<div <div class="wave-item" v-for="item in waveData" :key="item.crossId" style="width: 100%">
class="wave-item"
v-for="item in waveData"
:key="item.crossId"
style="width: 100%"
>
<i class="item-icon"></i> <i class="item-icon"></i>
<div class="item-title"> <div class="item-title">
<p>{{ item.crossName }}</p> <p>{{ item.crossName }}</p>
...@@ -15,25 +10,16 @@ ...@@ -15,25 +10,16 @@
</p> </p>
</div> </div>
<div class="wave-phase-box"> <div class="wave-phase-box">
<div <div :class="{ coordPhaseNo: phase.isCoordinate === 1 }" class="wave-phase"
:class="{ coordPhaseNo: phase.isCoordinate === 1 }" v-for="phase in item.greenwavePhaseList" :key="phase.id" :style="{
class="wave-phase" flex: phase.seconds / item.allCyclelen,
v-for="phase in item.greenwavePhaseList" display: phase.seconds === 0 ? 'none' : 'inline-block',
:key="phase.id" }">
:style="{
flex: phase.seconds / item.allCyclelen,
display: phase.seconds === 0 ? 'none' : 'inline-block',
}"
>
<p>{{ phase.phaseNo }}</p> <p>{{ phase.phaseNo }}</p>
</div> </div>
</div> </div>
</div> </div>
<div <div class="time-run-dash" id="time-run-dash" v-if="contentData.areaDetailFlag">
class="time-run-dash"
v-if="contentData.areaDetailFlag"
:style="runLineStyle"
>
<div class="dash-line"></div> <div class="dash-line"></div>
<div class="dash-secend">{{ contentData.pointerSecond }}s</div> <div class="dash-secend">{{ contentData.pointerSecond }}s</div>
</div> </div>
...@@ -45,14 +31,10 @@ ...@@ -45,14 +31,10 @@
<!-- (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',--> <!-- (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',-->
<!-- }"--> <!-- }"-->
<!-- >--> <!-- >-->
<span <span style="position: absolute" :style="{
style="position: absolute" left:
:style="{ (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
left: }" class="pointer-second"></span>
(770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
}"
class="pointer-second"
></span>
<!-- </div>--> <!-- </div>-->
<span class="cycle-left">0s</span> <span class="cycle-left">0s</span>
<span class="cycle">{{ contentData.cycle }}s</span> <span class="cycle">{{ contentData.cycle }}s</span>
...@@ -103,6 +85,18 @@ export default { ...@@ -103,6 +85,18 @@ export default {
}, },
deep: true, deep: true,
}, },
// 更新周期线
contentData: {
handler() {
if (document.getElementsByClassName("wave-phase-box").length) {
document.getElementById('time-run-dash').style.left = `${(document.getElementsByClassName("wave-phase-box")[0].getBoundingClientRect().width / this.contentData.cycle) *
this.contentData.pointerSecond -
10
}px`
}
},
deep: true
}
}, },
mounted() { mounted() {
console.log("contentData", this.contentData); console.log("contentData", this.contentData);
...@@ -118,16 +112,6 @@ export default { ...@@ -118,16 +112,6 @@ export default {
}, },
computed: { computed: {
runLineStyle() {
if (document.getElementsByClassName("wave-phase-box")?.length) {
const div = document.getElementsByClassName("wave-phase-box")[0];
return `left: ${
(div.getBoundingClientRect().width / this.contentData.cycle) *
this.contentData.pointerSecond -
10
}px`;
}
},
}, },
methods: { methods: {
setItemHeight() { setItemHeight() {
...@@ -149,14 +133,12 @@ export default { ...@@ -149,14 +133,12 @@ export default {
item.offsetToEnd = item.offsetToStart + this.contentData.forwardWidth; item.offsetToEnd = item.offsetToStart + this.contentData.forwardWidth;
}); });
this.$nextTick(() => { this.$nextTick(() => {
document.getElementById("waveCanvas").style.left = `${ document.getElementById("waveCanvas").style.left = `${document.getElementById("greenWaveDialog").getBoundingClientRect()
document.getElementById("greenWaveDialog").getBoundingClientRect() .left * -1
.left * -1 }px`;
}px`; document.getElementById("waveCanvas").style.top = `${document.getElementById("greenWaveDialog").getBoundingClientRect()
document.getElementById("waveCanvas").style.top = `${ .top * -1
document.getElementById("greenWaveDialog").getBoundingClientRect() }px`;
.top * -1
}px`;
}); });
setTimeout(() => { setTimeout(() => {
this.setGreenWaveLine(); this.setGreenWaveLine();
...@@ -209,8 +191,8 @@ export default { ...@@ -209,8 +191,8 @@ export default {
const endX = const endX =
endDivRect.left + endDivRect.left +
endXEachSecondW * endXEachSecondW *
data[i === divs.length - 1 ? divs.length - 1 : i + 1] data[i === divs.length - 1 ? divs.length - 1 : i + 1]
.offsetToStart; .offsetToStart;
const endY = endDivRect.top; const endY = endDivRect.top;
if (type === "f" || type === "r") { if (type === "f" || type === "r") {
ctx.moveTo(startX, startY); ctx.moveTo(startX, startY);
...@@ -306,17 +288,20 @@ export default { ...@@ -306,17 +288,20 @@ export default {
//height: 100%; //height: 100%;
pointer-events: none; pointer-events: none;
} }
.time-run-dash { .time-run-dash {
position: absolute; position: absolute;
padding-left: 196px; padding-left: 196px;
height: 100%; height: 100%;
width: 206px; width: 206px;
.dash-line { .dash-line {
height: calc(100% - 20px); height: calc(100% - 20px);
width: 23px; width: 23px;
background-image: url("../../../../assets/images/signal/line-pointer.png"); background-image: url("../../../../assets/images/signal/line-pointer.png");
background-size: 100% 100%; background-size: 100% 100%;
} }
.dash-secend { .dash-secend {
height: 23px; height: 23px;
line-height: 23px; line-height: 23px;
...@@ -380,8 +365,7 @@ export default { ...@@ -380,8 +365,7 @@ export default {
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 17px; height: 17px;
background: url("../../../../assets/images/dialogImg/wave-icon.png") background: url("../../../../assets/images/dialogImg/wave-icon.png") no-repeat;
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
......
wj-smartcity/src/views/signal/index.vue
View file @ 61167a82
<template> <template>
<div class="full-w-h"> <div class="full-w-h">
<wMap :mapId="'situation-map'" ref="wMap" /> <wMap :mapId="'situation-map'" ref="wMap" />
<msgs <msgs :clickCrossData="clickCrossData" :isCrossDetail="isCrossDetail" v-if="!loading"
:clickCrossData="clickCrossData" @showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" @showPolygon="showPolygon"
:isCrossDetail="isCrossDetail" @openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
v-if="!loading" <div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
@showCrossStatus="showCrossStatus"
@openCrossIndexDetail="openCrossIndexDetail"
@showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog"
:show="boxesShow"
></msgs>
<div
:class="boxesShow ? '' : 'hideBackToMain'"
@click="backToMain"
v-if="isCrossDetail"
class="backToMain"
></div>
<!--切换图层 收起放开侧边栏--> <!--切换图层 收起放开侧边栏-->
<layers-switch <layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
ref="switch" :class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
:show="boxesShow"
@changeCheck="changeCheck"
@visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
/>
<!--路口指标详情弹窗--> <!--路口指标详情弹窗-->
<cross-detail <cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow"
:cross-detail-data="crossData" @actionFinished="actionFinished" />
dialogId="crossDetailShow"
v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished"
/>
<!--路口绿波信息弹窗--> <!--路口绿波信息弹窗-->
<green-wave <green-wave :greenId="greenId" :waveTitle="waveTitle" dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow"
:greenId="greenId" @actionFinished="actionFinished" />
:waveTitle="waveTitle"
dialogId="greenWaveShow"
v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished"
/>
<!--设备图例控制--> <!--设备图例控制-->
<equipment-switch <equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
:boxesShow="boxesShow"
@equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
</div> </div>
</template> </template>
...@@ -62,7 +32,6 @@ import { initWs } from "@/config/holo/websocket"; ...@@ -62,7 +32,6 @@ import { initWs } from "@/config/holo/websocket";
import equipmentPopup from "./mapPopup/equipmentPopup.vue"; import equipmentPopup from "./mapPopup/equipmentPopup.vue";
import dict from "../../config/holo/dictionary"; import dict from "../../config/holo/dictionary";
import vehicleDetail from "./mapPopup/vehicleDetail.vue"; import vehicleDetail from "./mapPopup/vehicleDetail.vue";
import { addOrUpdateEventPoint1 } from "@/utils/mapboxTools";
import EquipmentSwitch from "./switchers/equipmentSwitch.vue"; import EquipmentSwitch from "./switchers/equipmentSwitch.vue";
import { import {
equip_signal, equip_signal,
...@@ -73,6 +42,8 @@ import { ...@@ -73,6 +42,8 @@ import {
const EquipmentPopup = Vue.extend(equipmentPopup); const EquipmentPopup = Vue.extend(equipmentPopup);
const VehiclePopup = Vue.extend(vehicleDetail); const VehiclePopup = Vue.extend(vehicleDetail);
import lightMixin from "../../mixin/lightMixin";
let map = null; let map = null;
let vehiclePopups = {}, let vehiclePopups = {},
popupVises = {}, popupVises = {},
...@@ -92,6 +63,7 @@ export default { ...@@ -92,6 +63,7 @@ export default {
msgs, msgs,
EquipmentSwitch, EquipmentSwitch,
}, },
mixins:[lightMixin],
computed: {}, computed: {},
data() { data() {
return { return {
...@@ -135,6 +107,7 @@ export default { ...@@ -135,6 +107,7 @@ export default {
fourth: ["weather", "camera", "radar", "signal", "milli"], fourth: ["weather", "camera", "radar", "signal", "milli"],
}, },
crosses: null, crosses: null,
crossGeo: null,
}; };
}, },
watch: { watch: {
...@@ -170,6 +143,7 @@ export default { ...@@ -170,6 +143,7 @@ export default {
Promise.all(queue).then(() => { Promise.all(queue).then(() => {
map = this.$refs.wMap.initMap(); map = this.$refs.wMap.initMap();
map.on("style.load", () => { map.on("style.load", () => {
window.map = map
this.loading = false; this.loading = false;
// 快捷键 // 快捷键
window.onkeydown = () => { window.onkeydown = () => {
...@@ -195,6 +169,16 @@ export default { ...@@ -195,6 +169,16 @@ export default {
essential: true, essential: true,
}); });
} }
if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
map.flyTo({
zoom: map_config.MAP_ZOOM3,
center: map_config.MAP_CENTER3,
bearing: map_config.MAP_BEARING3,
pitch: map_config.MAP_PITCH3,
duration: 1000, // Animate over 2 seconds
essential: true,
});
}
}; };
// 设置地图并加载必要资源 // 设置地图并加载必要资源
this.refreshBounds(); this.refreshBounds();
...@@ -212,6 +196,11 @@ export default { ...@@ -212,6 +196,11 @@ export default {
}); });
} }
} }
for (let key in mapAssets.lightIcons) {
map.loadImage(mapAssets.lightIcons[key], (error, image) => {
if (map && !map.hasImage(key)) map.addImage(key, image);
});
};
window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), { window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
defaultLights: true, defaultLights: true,
realSunlight: true, realSunlight: true,
...@@ -251,21 +240,24 @@ export default { ...@@ -251,21 +240,24 @@ export default {
map.on("dblclick", () => { map.on("dblclick", () => {
console.log( console.log(
"center " + "center " +
map.getCenter() + map.getCenter() +
" pitch " + " pitch " +
map.getPitch() + map.getPitch() +
" bearing " + " bearing " +
map.getBearing() + map.getBearing() +
" zoom " + " zoom " +
map.getZoom() map.getZoom()
); );
}); });
window.map = map; window.map = map;
map.on("zoomend", () => { map.on("zoomend", () => {
this.mapZoomEnd(); this.mapZoomEnd();
this.refreshLightWs()
}); });
map.on("moveend", () => { map.on("moveend", () => {
this.mapZoomEnd(); this.mapZoomEnd();
this.refreshLightWs()
}); });
this.switchfirst(); this.switchfirst();
}); });
...@@ -326,6 +318,7 @@ export default { ...@@ -326,6 +318,7 @@ export default {
} }
}, },
mapZoomEnd() { mapZoomEnd() {
// 层级拉远自动清除事件点位 & 返回宏观图表视图
if (map.getZoom() < 16.5) { if (map.getZoom() < 16.5) {
this.isCrossDetail = false; this.isCrossDetail = false;
this.removeLayers("eventPoint1"); this.removeLayers("eventPoint1");
...@@ -407,7 +400,7 @@ export default { ...@@ -407,7 +400,7 @@ export default {
let geo = turf.featureCollection(features); let geo = turf.featureCollection(features);
this.clearLicense(); this.clearLicense();
this.removeLayers( this.removeLayers(
"lightLayer,lightLayerText,vehicleSelectWave,license,licenseBack,vehiclePic" "vehicleSelectWave,license,licenseBack,vehiclePic"
); );
mapTool.addOrUpdateVehicle(map, geo); mapTool.addOrUpdateVehicle(map, geo);
} }
...@@ -513,7 +506,7 @@ export default { ...@@ -513,7 +506,7 @@ export default {
vehicleModels = {}; vehicleModels = {};
this.lastLocation = []; this.lastLocation = [];
this.showCameras = []; this.showCameras = [];
this.currentNearestCrossId = ""; this.resetLightNearestCross()
this.modelsEmpty = true; this.modelsEmpty = true;
} }
}, },
...@@ -627,9 +620,8 @@ export default { ...@@ -627,9 +620,8 @@ export default {
let ele = document.createElement("div"); let ele = document.createElement("div");
ele.style.color = "white"; ele.style.color = "white";
ele.innerText = option.picLicense; ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${ ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
mapAssets.mapIcons[`license${option.licenseColor}`] }')`;
}')`;
ele.style.backgroundSize = "100% 100%"; ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px"; ele.style.fontSize = "8px";
ele.style.textAlign = "center"; ele.style.textAlign = "center";
...@@ -665,6 +657,11 @@ export default { ...@@ -665,6 +657,11 @@ export default {
showCrossStatus(data) { showCrossStatus(data) {
if (data) { if (data) {
this.crosses = data; this.crosses = data;
let arr = data.map(item => {
[item.longitude, item.latitude] = item.location
return item
})
this.crossGeo = mapTool.convertPointsToGeo(arr)
} }
if (this.crosses) { if (this.crosses) {
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -687,7 +684,7 @@ export default { ...@@ -687,7 +684,7 @@ export default {
} }
}, },
showRightDetail(e) { showRightDetail(e) {
console.log('cross click...',e.features[0]); console.log('cross click...', e.features[0]);
let prop = e.features[0].properties; let prop = e.features[0].properties;
this.clickCrossData = prop; this.clickCrossData = prop;
this.isCrossDetail = true; this.isCrossDetail = true;
...@@ -890,10 +887,10 @@ export default { ...@@ -890,10 +887,10 @@ export default {
changeCheck(beforeLabel, checkItem) { changeCheck(beforeLabel, checkItem) {
this.refreshBounds(); this.refreshBounds();
map.flyTo({ map.flyTo({
center:map_config.MAP_CENTER2, center: map_config.MAP_CENTER2,
zoom:map_config.MAP_ZOOM2, zoom: map_config.MAP_ZOOM2,
bearing:map_config.MAP_BEARING2, bearing: map_config.MAP_BEARING2,
pitch:map_config.MAP_PITCH2, pitch: map_config.MAP_PITCH2,
duration: 1000, duration: 1000,
essential: true, essential: true,
}) })
...@@ -927,7 +924,7 @@ export default { ...@@ -927,7 +924,7 @@ export default {
}, },
beforeDestroy() { beforeDestroy() {
this.timer && clearInterval(this.timer); this.timer && clearInterval(this.timer);
this.closeWs("callCar"); this.closeAllWs()
window.tb.dispose(); window.tb.dispose();
window.tb = null; window.tb = null;
map = null; map = null;
......
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/topIndexes.vue
View file @ 61167a82
...@@ -4,59 +4,59 @@ ...@@ -4,59 +4,59 @@
<div class="full-h child"> <div class="full-h child">
<div class="indexTitle">服务水平</div> <div class="indexTitle">服务水平</div>
<div class="indexVal"> <div class="indexVal">
{{ indexes.serviceLevel || '-' }} {{ serviceLevelVal }}
</div> </div>
</div> </div>
<div class="full-h child" > <div class="full-h child">
<div class="indexTitle" style="background-color: #49141f">溢出</div> <div class="indexTitle" style="background-color: #49141f">溢出</div>
<div class="indexContent" style="background-color: #21182b"> <div class="indexContent" style="background-color: #21182b">
<div class="sideIndex"> <div class="sideIndex">
<div>次数</div> <div>次数</div>
<div>{{ indexes.spilloverTimes || 0 }}</div> <div>{{ spilloverTimesVal }}</div>
</div> </div>
<div class="sideIndex"> <div class="sideIndex">
<div>总时长</div> <div>总时长</div>
<div>{{ indexes.spilloverSum || 0 }}min</div> <div>{{ spilloverSumVal }}min</div>
</div> </div>
</div> </div>
</div> </div>
<div class="full-h child" > <div class="full-h child">
<div class="indexTitle" style="background-color: #69431d">拥堵</div> <div class="indexTitle" style="background-color: #69431d">拥堵</div>
<div class="indexContent" style="background-color: #2e2b2a"> <div class="indexContent" style="background-color: #2e2b2a">
<div class="sideIndex"> <div class="sideIndex">
<div>次数</div> <div>次数</div>
<div>{{ indexes.congestionTimes || 0 }}</div> <div>{{ congestionTimesVal }}</div>
</div> </div>
<div class="sideIndex"> <div class="sideIndex">
<div>总时长</div> <div>总时长</div>
<div>{{ indexes.congestionSum || 0 }}min</div> <div>{{ congestionSumVal }}min</div>
</div> </div>
</div> </div>
</div> </div>
<div class="full-h child" > <div class="full-h child">
<div class="indexTitle" style="background-color: #695f1e">失衡</div> <div class="indexTitle" style="background-color: #695f1e">失衡</div>
<div class="indexContent" style="background-color: #2e362a"> <div class="indexContent" style="background-color: #2e362a">
<div class="sideIndex"> <div class="sideIndex">
<div>次数</div> <div>次数</div>
<div>{{ indexes.unbalanceTimes || 0 }}</div> <div>{{ unbalanceTimesVal }}</div>
</div> </div>
<div class="sideIndex"> <div class="sideIndex">
<div>总时长</div> <div>总时长</div>
<div>{{ indexes.unbalanceSum || 0 }}min</div> <div>{{ unbalanceSumVal }}min</div>
</div> </div>
</div> </div>
</div> </div>
<div class="full-h child" > <div class="full-h child">
<div class="indexTitle" style="background-color: #495563">空放</div> <div class="indexTitle" style="background-color: #495563">空放</div>
<div class="indexContent" style="background-color: #213246"> <div class="indexContent" style="background-color: #213246">
<div class="sideIndex"> <div class="sideIndex">
<div>次数</div> <div>次数</div>
<div>{{ indexes.emptyPhaseTimes || 0 }}</div> <div>{{ emptyPhaseTimesVal }}</div>
</div> </div>
<div class="sideIndex"> <div class="sideIndex">
<div>总时长</div> <div>总时长</div>
<div>{{ indexes.emptyPhaseSum || 0 }}min</div> <div>{{ emptyPhaseSumVal }}min</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -65,17 +65,47 @@ ...@@ -65,17 +65,47 @@
</template> </template>
<script> <script>
import {crossEvaluate} from "@/common/api/signalEvaluation"; import { crossEvaluate } from "@/common/api/signalEvaluation";
export default { export default {
name: 'topIndexes', name: 'topIndexes',
props:['cross','currentTimes'], props: ['cross', 'currentTimes'],
data(){ computed: {
serviceLevelVal() {
return this.indexes.serviceLevel || '-'
},
spilloverTimesVal() {
return this.indexes.spilloverTimes || 0
},
spilloverSumVal() {
return this.indexes.spilloverSum || 0
},
congestionTimesVal() {
return this.indexes.congestionTimes || 0
},
congestionSumVal() {
return this.indexes.congestionSum || 0
},
unbalanceTimesVal() {
return this.indexes.unbalanceTimes || 0
},
unbalanceSumVal() {
return this.indexes.unbalanceSum || 0
},
emptyPhaseTimesVal() {
return this.indexes.emptyPhaseTimes || 0
},
emptyPhaseSumVal() {
return this.indexes.emptyPhaseSum || 0
}
},
data() {
return { return {
indexes: {} indexes: {}
} }
}, },
watch:{ watch: {
cross: { cross: {
handler(newVal) { handler(newVal) {
this.getData() this.getData()
...@@ -83,17 +113,22 @@ export default { ...@@ -83,17 +113,22 @@ export default {
deep: true deep: true
} }
}, },
mounted(){ mounted() {
this.getData() this.getData()
}, },
methods:{ methods: {
getData(){ getData() {
let date = new Date().toLocaleDateString().replaceAll('/','-') let date = new Date().toLocaleDateString().replaceAll('/', '-')
crossEvaluate({ crossEvaluate({
crossId: this.cross.crossId, crossId: this.cross.crossId,
startDate: this.currentTimes[0], startDate: this.currentTimes[0],
endDate: this.currentTimes[1] endDate: this.currentTimes[1]
}).then(res=>{
// "startDate": "2024-7-14 00:00:00",
// "endDate": "2024-7-14 23:00:15",
// "crossId": "13NF80B5QN0"
}).then(res => {
this.indexes = res.data.content this.indexes = res.data.content
}) })
} }
...@@ -102,15 +137,17 @@ export default { ...@@ -102,15 +137,17 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container{ .container {
padding: 10px; padding: 10px;
color: rgba(255,255,255,0.8); color: rgba(255, 255, 255, 0.8);
} }
.content{
.content {
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.child{
.child {
flex-grow: 1; flex-grow: 1;
/* 边框渐变 */ /* 边框渐变 */
//border-right-width: 4px; //border-right-width: 4px;
...@@ -125,73 +162,88 @@ export default { ...@@ -125,73 +162,88 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.indexTitle{
.indexTitle {
width: 40px; width: 40px;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
display: flex; display: flex;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ word-wrap: break-word;
writing-mode: tb-rl;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ /*英文的时候需要加上这句，自动换行*/
writing-mode: tb-rl;
/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
text-align: center; text-align: center;
flex-direction:column; flex-direction: column;
letter-spacing: 8px; letter-spacing: 8px;
justify-content:center; justify-content: center;
} }
.indexContent{
.indexContent {
flex: 1; flex: 1;
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.sideIndex{
.sideIndex {
width: 50%; width: 50%;
text-align: center; text-align: center;
div:last-child{
div:last-child {
font-size: 18px; font-size: 18px;
font-family: YouSheBiaoTiHei, serif; font-family: YouSheBiaoTiHei, serif;
} }
} }
.sideIndex:first-child{
.sideIndex:first-child {
border-right-width: 4px; border-right-width: 4px;
border-right-style: solid; border-right-style: solid;
border-image-source: linear-gradient(180deg, transparent,rgba(255,255,255,0.3), rgba(255,255,255,0.6),rgba(255,255,255,0.3),transparent); border-image-source: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3), transparent);
border-image-slice: 1; /* 填充整个边框宽度 */ border-image-slice: 1;
border-image-repeat: stretch; /* 根据需要选择 repeat、stretch 或 round 等重复方式 */ /* 填充整个边框宽度 */
border-image-repeat: stretch;
/* 根据需要选择 repeat、stretch 或 round 等重复方式 */
} }
} }
.indexVal{
.indexVal {
height: 60%; height: 60%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
font-family: YouSheBiaoTiHei,serif; font-family: YouSheBiaoTiHei, serif;
} }
} }
.child:first-child{
.child:first-child {
width: 15%; width: 15%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-grow: 0; flex-grow: 0;
.indexTitle{
.indexTitle {
width: 40px; width: 40px;
height: 100%; height: 100%;
background-color: #035a84; background-color: #035a84;
display: flex; display: flex;
font-size: 16px; font-size: 16px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/ word-wrap: break-word;
writing-mode: tb-rl;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/ /*英文的时候需要加上这句，自动换行*/
writing-mode: tb-rl;
/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
text-align: end; text-align: end;
flex-direction:column; flex-direction: column;
letter-spacing: 8px; letter-spacing: 8px;
justify-content:center; justify-content: center;
} }
.indexVal{
.indexVal {
height: 100%; height: 100%;
font-size:46px; font-size: 46px;
background-color: #053453; background-color: #053453;
flex: 1; flex: 1;
display: flex; display: flex;
...@@ -200,7 +252,8 @@ export default { ...@@ -200,7 +252,8 @@ export default {
justify-content: center; justify-content: center;
} }
} }
.child:last-child{
.child:last-child {
border-right: none; border-right: none;
} }
} }
......
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