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 {
car10: require('../../assets/images/holo/carPic/car10.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) {
context.fill();
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) {
if (!map.getSource("selectVehicleTrack")) {
map.addSource("selectVehicleTrack", {
......
wj-smartcity/src/views/signal/dialogs/greenWave/greenWaveDetail.vue
View file @ 61167a82
<template>
<div class="green-wave" ref="greenWave">
<canvas id="waveCanvas"></canvas>
<div
class="wave-item"
v-for="item in waveData"
:key="item.crossId"
style="width: 100%"
>
<div class="wave-item" v-for="item in waveData" :key="item.crossId" style="width: 100%">
<i class="item-icon"></i>
<div class="item-title">
<p>{{ item.crossName }}</p>
......@@ -15,25 +10,16 @@
</p>
</div>
<div class="wave-phase-box">
<div
:class="{ coordPhaseNo: phase.isCoordinate === 1 }"
class="wave-phase"
v-for="phase in item.greenwavePhaseList"
:key="phase.id"
:style="{
flex: phase.seconds / item.allCyclelen,
display: phase.seconds === 0 ? 'none' : 'inline-block',
}"
>
<div :class="{ coordPhaseNo: phase.isCoordinate === 1 }" class="wave-phase"
v-for="phase in item.greenwavePhaseList" :key="phase.id" :style="{
flex: phase.seconds / item.allCyclelen,
display: phase.seconds === 0 ? 'none' : 'inline-block',
}">
<p>{{ phase.phaseNo }}</p>
</div>
</div>
</div>
<div
class="time-run-dash"
v-if="contentData.areaDetailFlag"
:style="runLineStyle"
>
<div class="time-run-dash" id="time-run-dash" v-if="contentData.areaDetailFlag">
<div class="dash-line"></div>
<div class="dash-secend">{{ contentData.pointerSecond }}s</div>
</div>
......@@ -45,14 +31,10 @@
<!-- (770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',-->
<!-- }"-->
<!-- >-->
<span
style="position: absolute"
:style="{
left:
(770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
}"
class="pointer-second"
></span>
<span style="position: absolute" :style="{
left:
(770 / contentData.cycle) * contentData.pointerSecond - 10 + 'px',
}" class="pointer-second"></span>
<!-- </div>-->
<span class="cycle-left">0s</span>
<span class="cycle">{{ contentData.cycle }}s</span>
......@@ -103,6 +85,18 @@ export default {
},
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() {
console.log("contentData", this.contentData);
......@@ -118,16 +112,6 @@ export default {
},
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: {
setItemHeight() {
......@@ -149,14 +133,12 @@ export default {
item.offsetToEnd = item.offsetToStart + this.contentData.forwardWidth;
});
this.$nextTick(() => {
document.getElementById("waveCanvas").style.left = `${
document.getElementById("greenWaveDialog").getBoundingClientRect()
.left * -1
}px`;
document.getElementById("waveCanvas").style.top = `${
document.getElementById("greenWaveDialog").getBoundingClientRect()
.top * -1
}px`;
document.getElementById("waveCanvas").style.left = `${document.getElementById("greenWaveDialog").getBoundingClientRect()
.left * -1
}px`;
document.getElementById("waveCanvas").style.top = `${document.getElementById("greenWaveDialog").getBoundingClientRect()
.top * -1
}px`;
});
setTimeout(() => {
this.setGreenWaveLine();
......@@ -209,8 +191,8 @@ export default {
const endX =
endDivRect.left +
endXEachSecondW *
data[i === divs.length - 1 ? divs.length - 1 : i + 1]
.offsetToStart;
data[i === divs.length - 1 ? divs.length - 1 : i + 1]
.offsetToStart;
const endY = endDivRect.top;
if (type === "f" || type === "r") {
ctx.moveTo(startX, startY);
......@@ -306,17 +288,20 @@ export default {
//height: 100%;
pointer-events: none;
}
.time-run-dash {
position: absolute;
padding-left: 196px;
height: 100%;
width: 206px;
.dash-line {
height: calc(100% - 20px);
width: 23px;
background-image: url("../../../../assets/images/signal/line-pointer.png");
background-size: 100% 100%;
}
.dash-secend {
height: 23px;
line-height: 23px;
......@@ -380,8 +365,7 @@ export default {
display: inline-block;
width: 18px;
height: 17px;
background: url("../../../../assets/images/dialogImg/wave-icon.png")
no-repeat;
background: url("../../../../assets/images/dialogImg/wave-icon.png") no-repeat;
background-size: 100% 100%;
}
......
wj-smartcity/src/views/signal/index.vue
View file @ 61167a82
<template>
<div class="full-w-h">
<wMap :mapId="'situation-map'" ref="wMap" />
<msgs
:clickCrossData="clickCrossData"
:isCrossDetail="isCrossDetail"
v-if="!loading"
@showCrossStatus="showCrossStatus"
@openCrossIndexDetail="openCrossIndexDetail"
@showPolygon="showPolygon"
@openGreenWaveDialog="openGreenWaveDialog"
:show="boxesShow"
></msgs>
<div
:class="boxesShow ? '' : 'hideBackToMain'"
@click="backToMain"
v-if="isCrossDetail"
class="backToMain"
></div>
<msgs :clickCrossData="clickCrossData" :isCrossDetail="isCrossDetail" v-if="!loading"
@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
ref="switch"
:show="boxesShow"
@changeCheck="changeCheck"
@visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"
/>
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
<!--路口指标详情弹窗-->
<cross-detail
:cross-detail-data="crossData"
dialogId="crossDetailShow"
v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished"
/>
<cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow"
@actionFinished="actionFinished" />
<!--路口绿波信息弹窗-->
<green-wave
:greenId="greenId"
:waveTitle="waveTitle"
dialogId="greenWaveShow"
v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished"
/>
<green-wave :greenId="greenId" :waveTitle="waveTitle" dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow"
@actionFinished="actionFinished" />
<!--设备图例控制-->
<equipment-switch
:boxesShow="boxesShow"
@equipmentChange="equipmentChange"
v-if="currentCheck === 'fourth'"
/>
<equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
</div>
</template>
......@@ -62,7 +32,6 @@ import { initWs } from "@/config/holo/websocket";
import equipmentPopup from "./mapPopup/equipmentPopup.vue";
import dict from "../../config/holo/dictionary";
import vehicleDetail from "./mapPopup/vehicleDetail.vue";
import { addOrUpdateEventPoint1 } from "@/utils/mapboxTools";
import EquipmentSwitch from "./switchers/equipmentSwitch.vue";
import {
equip_signal,
......@@ -73,6 +42,8 @@ import {
const EquipmentPopup = Vue.extend(equipmentPopup);
const VehiclePopup = Vue.extend(vehicleDetail);
import lightMixin from "../../mixin/lightMixin";
let map = null;
let vehiclePopups = {},
popupVises = {},
......@@ -92,6 +63,7 @@ export default {
msgs,
EquipmentSwitch,
},
mixins:[lightMixin],
computed: {},
data() {
return {
......@@ -135,6 +107,7 @@ export default {
fourth: ["weather", "camera", "radar", "signal", "milli"],
},
crosses: null,
crossGeo: null,
};
},
watch: {
......@@ -170,6 +143,7 @@ export default {
Promise.all(queue).then(() => {
map = this.$refs.wMap.initMap();
map.on("style.load", () => {
window.map = map
this.loading = false;
// 快捷键
window.onkeydown = () => {
......@@ -195,6 +169,16 @@ export default {
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();
......@@ -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"), {
defaultLights: true,
realSunlight: true,
......@@ -251,21 +240,24 @@ export default {
map.on("dblclick", () => {
console.log(
"center " +
map.getCenter() +
" pitch " +
map.getPitch() +
" bearing " +
map.getBearing() +
" zoom " +
map.getZoom()
map.getCenter() +
" pitch " +
map.getPitch() +
" bearing " +
map.getBearing() +
" zoom " +
map.getZoom()
);
});
window.map = map;
map.on("zoomend", () => {
this.mapZoomEnd();
this.refreshLightWs()
});
map.on("moveend", () => {
this.mapZoomEnd();
this.refreshLightWs()
});
this.switchfirst();
});
......@@ -326,6 +318,7 @@ export default {
}
},
mapZoomEnd() {
// 层级拉远自动清除事件点位 & 返回宏观图表视图
if (map.getZoom() < 16.5) {
this.isCrossDetail = false;
this.removeLayers("eventPoint1");
......@@ -407,7 +400,7 @@ export default {
let geo = turf.featureCollection(features);
this.clearLicense();
this.removeLayers(
"lightLayer,lightLayerText,vehicleSelectWave,license,licenseBack,vehiclePic"
"vehicleSelectWave,license,licenseBack,vehiclePic"
);
mapTool.addOrUpdateVehicle(map, geo);
}
......@@ -513,7 +506,7 @@ export default {
vehicleModels = {};
this.lastLocation = [];
this.showCameras = [];
this.currentNearestCrossId = "";
this.resetLightNearestCross()
this.modelsEmpty = true;
}
},
......@@ -627,9 +620,8 @@ export default {
let ele = document.createElement("div");
ele.style.color = "white";
ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${
mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px";
ele.style.textAlign = "center";
......@@ -665,6 +657,11 @@ export default {
showCrossStatus(data) {
if (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) {
this.timer = setInterval(() => {
......@@ -687,7 +684,7 @@ export default {
}
},
showRightDetail(e) {
console.log('cross click...',e.features[0]);
console.log('cross click...', e.features[0]);
let prop = e.features[0].properties;
this.clickCrossData = prop;
this.isCrossDetail = true;
......@@ -890,10 +887,10 @@ export default {
changeCheck(beforeLabel, checkItem) {
this.refreshBounds();
map.flyTo({
center:map_config.MAP_CENTER2,
zoom:map_config.MAP_ZOOM2,
bearing:map_config.MAP_BEARING2,
pitch:map_config.MAP_PITCH2,
center: map_config.MAP_CENTER2,
zoom: map_config.MAP_ZOOM2,
bearing: map_config.MAP_BEARING2,
pitch: map_config.MAP_PITCH2,
duration: 1000,
essential: true,
})
......@@ -927,7 +924,7 @@ export default {
},
beforeDestroy() {
this.timer && clearInterval(this.timer);
this.closeWs("callCar");
this.closeAllWs()
window.tb.dispose();
window.tb = null;
map = null;
......
wj-smartcity/src/views/signalEvaluation/rightIndex/crossComponents/topIndexes.vue
View file @ 61167a82
......@@ -4,59 +4,59 @@
<div class="full-h child">
<div class="indexTitle">服务水平</div>
<div class="indexVal">
{{ indexes.serviceLevel || '-' }}
{{ serviceLevelVal }}
</div>
</div>
<div class="full-h child" >
<div class="full-h child">
<div class="indexTitle" style="background-color: #49141f">溢出</div>
<div class="indexContent" style="background-color: #21182b">
<div class="sideIndex">
<div>次数</div>
<div>{{ indexes.spilloverTimes || 0 }}</div>
<div>{{ spilloverTimesVal }}</div>
</div>
<div class="sideIndex">
<div>总时长</div>
<div>{{ indexes.spilloverSum || 0 }}min</div>
<div>{{ spilloverSumVal }}min</div>
</div>
</div>
</div>
<div class="full-h child" >
<div class="full-h child">
<div class="indexTitle" style="background-color: #69431d">拥堵</div>
<div class="indexContent" style="background-color: #2e2b2a">
<div class="sideIndex">
<div>次数</div>
<div>{{ indexes.congestionTimes || 0 }}</div>
<div>{{ congestionTimesVal }}</div>
</div>
<div class="sideIndex">
<div>总时长</div>
<div>{{ indexes.congestionSum || 0 }}min</div>
<div>{{ congestionSumVal }}min</div>
</div>
</div>
</div>
<div class="full-h child" >
<div class="indexTitle" style="background-color: #695f1e">失衡</div>
<div class="full-h child">
<div class="indexTitle" style="background-color: #695f1e">失衡</div>
<div class="indexContent" style="background-color: #2e362a">
<div class="sideIndex">
<div>次数</div>
<div>{{ indexes.unbalanceTimes || 0 }}</div>
<div>{{ unbalanceTimesVal }}</div>
</div>
<div class="sideIndex">
<div>总时长</div>
<div>{{ indexes.unbalanceSum || 0 }}min</div>
<div>{{ unbalanceSumVal }}min</div>
</div>
</div>
</div>
<div class="full-h child" >
<div class="indexTitle" style="background-color: #495563">空放</div>
<div class="full-h child">
<div class="indexTitle" style="background-color: #495563">空放</div>
<div class="indexContent" style="background-color: #213246">
<div class="sideIndex">
<div>次数</div>
<div>{{ indexes.emptyPhaseTimes || 0 }}</div>
<div>{{ emptyPhaseTimesVal }}</div>
</div>
<div class="sideIndex">
<div>总时长</div>
<div>{{ indexes.emptyPhaseSum || 0 }}min</div>
<div>{{ emptyPhaseSumVal }}min</div>
</div>
</div>
</div>
......@@ -65,17 +65,47 @@
</template>
<script>
import {crossEvaluate} from "@/common/api/signalEvaluation";
import { crossEvaluate } from "@/common/api/signalEvaluation";
export default {
name: 'topIndexes',
props:['cross','currentTimes'],
data(){
props: ['cross', 'currentTimes'],
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 {
indexes: {}
}
},
watch:{
watch: {
cross: {
handler(newVal) {
this.getData()
......@@ -83,17 +113,22 @@ export default {
deep: true
}
},
mounted(){
mounted() {
this.getData()
},
methods:{
getData(){
let date = new Date().toLocaleDateString().replaceAll('/','-')
methods: {
getData() {
let date = new Date().toLocaleDateString().replaceAll('/', '-')
crossEvaluate({
crossId: this.cross.crossId,
startDate: this.currentTimes[0],
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
})
}
......@@ -102,15 +137,17 @@ export default {
</script>
<style lang="less" scoped>
.container{
.container {
padding: 10px;
color: rgba(255,255,255,0.8);
color: rgba(255, 255, 255, 0.8);
}
.content{
.content {
border-radius: 6px;
display: flex;
justify-content: space-between;
.child{
.child {
flex-grow: 1;
/* 边框渐变 */
//border-right-width: 4px;
......@@ -125,73 +162,88 @@ export default {
flex-direction: row;
align-items: center;
justify-content: center;
.indexTitle{
.indexTitle {
width: 40px;
height: 100%;
font-size: 16px;
display: flex;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
writing-mode: tb-rl;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
word-wrap: break-word;
/*英文的时候需要加上这句，自动换行*/
writing-mode: tb-rl;
/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
text-align: center;
flex-direction:column;
flex-direction: column;
letter-spacing: 8px;
justify-content:center;
justify-content: center;
}
.indexContent{
.indexContent {
flex: 1;
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
.sideIndex{
.sideIndex {
width: 50%;
text-align: center;
div:last-child{
div:last-child {
font-size: 18px;
font-family: YouSheBiaoTiHei, serif;
}
}
.sideIndex:first-child{
.sideIndex:first-child {
border-right-width: 4px;
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-slice: 1; /* 填充整个边框宽度 */
border-image-repeat: stretch; /* 根据需要选择 repeat、stretch 或 round 等重复方式 */
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-repeat: stretch;
/* 根据需要选择 repeat、stretch 或 round 等重复方式 */
}
}
.indexVal{
.indexVal {
height: 60%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
font-family: YouSheBiaoTiHei,serif;
font-family: YouSheBiaoTiHei, serif;
}
}
.child:first-child{
.child:first-child {
width: 15%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 0;
.indexTitle{
.indexTitle {
width: 40px;
height: 100%;
background-color: #035a84;
display: flex;
font-size: 16px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
writing-mode: tb-rl;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
word-wrap: break-word;
/*英文的时候需要加上这句，自动换行*/
writing-mode: tb-rl;
/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
text-align: end;
flex-direction:column;
flex-direction: column;
letter-spacing: 8px;
justify-content:center;
justify-content: center;
}
.indexVal{
.indexVal {
height: 100%;
font-size:46px;
font-size: 46px;
background-color: #053453;
flex: 1;
display: flex;
......@@ -200,7 +252,8 @@ export default {
justify-content: center;
}
}
.child:last-child{
.child:last-child {
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