Skip to content

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

调整三维场景车辆弹窗偏移计算 添加轨迹心跳检测 弹窗大小固定

parent d5fe9758
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 161 deletions
wj-manage-web/src/utils/cesiumPopup.js
View file @ 9bcfdcad
......@@ -140,8 +140,11 @@ var CesiumPopup = (function () {
return
}
if (_panelContainer) {
_panelContainer.style.left = position.x - _panelContainer.offsetWidth / 2 + this.offset[0] + 'px';
_panelContainer.style.top = position.y - _panelContainer.offsetHeight - 10 + this.offset[1] + 'px';
// console.log(_panelContainer,1);
// _panelContainer.style.left = position.x - _panelContainer.offsetWidth / 2 + this.offset[0] + 'px';
// _panelContainer.style.top = position.y - _panelContainer.offsetHeight - 10 + this.offset[1] + 'px';
_panelContainer.style.left =position.x - 135+ this.offset[0] + 'px';
_panelContainer.style.top =position.y -160 + this.offset[1] + 'px';
}
}
......
wj-manage-web/src/utils/request.js
View file @ 9bcfdcad
......@@ -91,12 +91,12 @@ export function download(url, params, filename) {
downloadLoadingInstance = ELEMENT.Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.get(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
// headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data], { type: 'application/pdf' })
const blob = new Blob([data])
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = filename;
......
wj-manage-web/src/views/situation/MapPopup/equipmentPopup.vue
View file @ 9bcfdcad
......@@ -74,7 +74,7 @@
<span>风向</span
>{{ getNameByCode(model.windDirection, "Direction") }}风
</div>
<!-- <div class="detail-item" :title="dict.equip_weather.vis[model.visibility]"><span style="margin-right: 20px">大气能见度</span>{{-->
<!-- <div class="detail-item" :title="dict.equip_weather.vis[model.visibility]"><span style="margin-right: 20PX">大气能见度</span>{{-->
<!-- // dict.equip_weather.vis[model.visibility]-->
<!-- }}-->
<!-- </div>-->
......@@ -285,10 +285,10 @@ export default {
background: rgba(15, 38, 69, 1);
.e_header {
height: 43px;
font-size: 18px;
height: 43PX;
font-size: 18PX;
font-weight: 700;
padding: 12px 0 0 12px;
padding: 12PX 0 0 12PX;
display: flex;
align-items: center;
color: white;
......@@ -297,26 +297,26 @@ export default {
}
.e_main {
height: calc(100% - 43px);
border: 1px solid #037bb2;
padding: 18px;
height: calc(100% - 43PX);
border: 1PX solid #037bb2;
padding: 18PX;
display: flex;
}
}
.equip_weather {
width: 540px;
width: 540PX;
span {
width: 70px;
margin-right: 12px;
width: 70PX;
margin-right: 12PX;
}
.e_header {
height: 43px;
font-size: 18px;
height: 43PX;
font-size: 18PX;
font-weight: 700;
padding: 12px 0 0 12px;
padding: 12PX 0 0 12PX;
display: flex;
align-items: center;
color: white;
......@@ -325,16 +325,16 @@ export default {
}
.e_main {
height: 211px;
border: 1px solid #037bb2;
padding: 18px;
height: 211PX;
border: 1PX solid #037bb2;
padding: 18PX;
display: flex;
}
.left-image {
margin-right: 18px;
width: 130px;
min-width: 130px;
margin-right: 18PX;
width: 130PX;
min-width: 130PX;
background-size: 100% 100%;
background-repeat: no-repeat;
}
......@@ -348,14 +348,14 @@ export default {
.detail-item {
flex: 0 0 48%;
height: 26px;
line-height: 30px;
height: 26PX;
line-height: 30PX;
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 100%;
font-size: 14px;
font-size: 14PX;
span {
display: inline-block;
......@@ -373,13 +373,13 @@ export default {
}
.equip_camera {
width: 447px;
width: 447PX;
.camera_header {
height: 43px;
font-size: 18px;
height: 43PX;
font-size: 18PX;
font-weight: 700;
padding: 12px 0 0 12px;
padding: 12PX 0 0 12PX;
display: flex;
align-items: center;
color: white;
......@@ -388,26 +388,26 @@ export default {
}
.camera_main {
height: 276px;
border: 1px solid #037bb2;
//padding: 18px;
height: 276PX;
border: 1PX solid #037bb2;
//padding: 18PX;
display: flex;
}
}
.equip_milli {
width: 434px;
width: 434PX;
span {
width: 60px;
margin-right: 16px;
width: 60PX;
margin-right: 16PX;
}
.milli_header {
height: 43px;
font-size: 18px;
height: 43PX;
font-size: 18PX;
font-weight: 700;
padding: 12px 0 0 12px;
padding: 12PX 0 0 12PX;
display: flex;
align-items: center;
color: white;
......@@ -416,21 +416,21 @@ export default {
}
.milli_main {
height: 211px;
border: 1px solid #037bb2;
padding: 18px;
height: 211PX;
border: 1PX solid #037bb2;
padding: 18PX;
display: flex;
.left-image {
margin-right: 18px;
width: 130px;
min-width: 130px;
margin-right: 18PX;
width: 130PX;
min-width: 130PX;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.right {
width: calc(100% - 148px);
width: calc(100% - 148PX);
.equip-type {
display: flex;
......@@ -439,14 +439,14 @@ export default {
height: 100%;
.detail-item {
//height: 30px;
//line-height: 30px;
//height: 30PX;
//line-height: 30PX;
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 100%;
font-size: 14px;
font-size: 14PX;
span {
display: inline-block;
......@@ -461,18 +461,18 @@ export default {
}
.equip_radar {
width: 434px;
width: 434PX;
span {
width: 60px;
margin-right: 16px;
width: 60PX;
margin-right: 16PX;
}
.radar_header {
height: 43px;
font-size: 18px;
height: 43PX;
font-size: 18PX;
font-weight: 700;
padding: 12px 0 0 12px;
padding: 12PX 0 0 12PX;
display: flex;
align-items: center;
color: white;
......@@ -481,21 +481,21 @@ export default {
}
.radar_main {
height: 211px;
border: 1px solid #037bb2;
padding: 18px;
height: 211PX;
border: 1PX solid #037bb2;
padding: 18PX;
display: flex;
.left-image {
margin-right: 18px;
width: 130px;
min-width: 130px;
margin-right: 18PX;
width: 130PX;
min-width: 130PX;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.right {
width: calc(100% - 148px);
width: calc(100% - 148PX);
.equip-type {
display: flex;
......@@ -509,7 +509,7 @@ export default {
text-overflow: ellipsis;
white-space: nowrap;
max-height: 100%;
font-size: 14px;
font-size: 14PX;
span {
display: inline-block;
......@@ -524,13 +524,13 @@ export default {
}
.equip_sign {
//width: 294px;
//width: 294PX;
.sign_header {
height: 43px;
font-size: 18px;
height: 43PX;
font-size: 18PX;
font-weight: 700;
padding: 12px 0 0 12px;
padding: 12PX 0 0 12PX;
display: flex;
align-items: center;
color: white;
......@@ -539,15 +539,15 @@ export default {
}
.sign_main {
//height: 359px;
border: 1px solid #037bb2;
//padding: 18px;
//height: 359PX;
border: 1PX solid #037bb2;
//padding: 18PX;
display: flex;
.left-image {
margin-right: 18px;
width: 130px;
min-width: 130px;
margin-right: 18PX;
width: 130PX;
min-width: 130PX;
background-size: 100% 100%;
background-repeat: no-repeat;
}
......@@ -558,14 +558,14 @@ export default {
flex-direction: column;
.detail-item {
height: 30px;
line-height: 30px;
height: 30PX;
line-height: 30PX;
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: 100%;
font-size: 14px;
font-size: 14PX;
span {
display: inline-block;
......
wj-manage-web/src/views/situation/MapPopup/eventPopup.vue
View file @ 9bcfdcad
......@@ -41,35 +41,35 @@ export default {
<style lang='less' scoped>
#e_popup {
//font-family: SiYuanHT;
width: 281px;
height: 233px;
width: 281PX;
height: 233PX;
background-color: #0f2645;
background-image: url("../../../assets/images/holo/eventbackground.png");
background-size: 100% 100%;
}
.header {
height: 43px;
font-size: 18px;
height: 43PX;
font-size: 18PX;
font-weight: 700;
line-height: 55px;
padding-left: 12px;
line-height: 55PX;
padding-left: 12PX;
color: white;
//background:url('../../assets/images/holo/popupTop.png');
background-size: 100%;
}
.main {
font-size: 12px;
height: calc(100% - 43px);
border: 1px solid #037bb2;
padding: 18px;
font-size: 12PX;
height: calc(100% - 43PX);
border: 1PX solid #037bb2;
padding: 18PX;
display: flex;
flex-direction: column;
justify-content: space-between;
.detail_item {
height: 30px;
height: 30PX;
display: flex;
align-items: center;
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
......@@ -78,13 +78,13 @@ export default {
background-repeat: no-repeat;
.label {
padding-left: 30px;
//line-height: 24px;
padding-left: 30PX;
//line-height: 24PX;
color: #bcdaec;
}
.value {
//line-height: 24px;
//line-height: 24PX;
color: white;
overflow: hidden;
text-overflow: ellipsis;
......
wj-manage-web/src/views/situation/MapPopup/vehicleDetail.vue
View file @ 9bcfdcad
......@@ -100,19 +100,19 @@ export default {
<style lang="less" scoped>
.vehicleDetail {
font-size: 12px;
font-size: 12PX;
// position: absolute;
position: relative;
//bottom: 16px;
//right: 16px;
width: 216px;
//height: 207px;
//bottom: 16PX;
//right: 16PX;
width: 216PX;
//height: 207PX;
.closeButton {
position: absolute;
right: 20px;
top: 17px;
right: 20PX;
top: 17PX;
color: white;
font-size: 22px;
font-size: 22PX;
cursor: pointer;
}
.closeButton:hover {
......@@ -121,13 +121,13 @@ export default {
.vehicleDetailInner {
width: 100%;
height: calc(100% - 25px);
padding: 2px 16px 6px 16px;
height: calc(100% - 25PX);
padding: 2PX 16PX 6PX 16PX;
background-image: url("../../../assets/images/holo/vehicle_popup_back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.head {
height: 30px;
height: 30PX;
color: white;
display: flex;
align-items: center;
......@@ -137,10 +137,10 @@ export default {
}
.titleBefore {
width: 18px;
height: 22px;
margin-right: 5px;
line-height: 30px;
width: 18PX;
height: 22PX;
margin-right: 5PX;
line-height: 30PX;
background-image: url("../../../assets/images/holo/vehicle_popup_icon.png");
background-position: center;
background-repeat: no-repeat;
......@@ -148,19 +148,19 @@ export default {
}
.content {
height: calc(100% - 25px);
height: calc(100% - 25PX);
display: flex;
padding-top: 12px;
padding-top: 12PX;
//flex-flow: row wrap;
flex-direction: column;
.detailItem {
height: 30px;
line-height: 30px;
height: 30PX;
line-height: 30PX;
white-space: nowrap;
color: white;
//width: 50%;
max-width: 200px;
max-width: 200PX;
overflow: hidden;
text-overflow: ellipsis;
......@@ -170,7 +170,7 @@ export default {
span.left {
text-align: left;
padding-left: 20px;
padding-left: 20PX;
//width: 50%;
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
background-size: auto;
......@@ -188,7 +188,7 @@ export default {
}
.vehicle_arrow {
height: 25px;
height: 25PX;
background-image: url("../../../assets/images/holo/vehicelArrow.png");
background-size: auto 100%;
background-position-x: center;
......
wj-manage-web/src/views/situation/MapPopup/warningPopup.vue
View file @ 9bcfdcad
......@@ -47,32 +47,32 @@ export default {
<style lang="less" scoped>
#e_popup {
width: 281px;
width: 281PX;
background-size: 100% 100%;
}
.header {
height: 34px;
font-size: 18px;
height: 34PX;
font-size: 18PX;
font-weight: 700;
line-height: 34px;
padding-left: 12px;
line-height: 34PX;
padding-left: 12PX;
color: white;
//background:url('../../assets/images/holo/popupTop.png');
background-size: 100%;
}
.main {
font-size: 12px;
height: calc(100% - 43px);
font-size: 12PX;
height: calc(100% - 43PX);
border: none;
padding: 18px;
padding: 18PX;
display: flex;
flex-direction: column;
justify-content: space-between;
.detail_item {
height: 30px;
height: 30PX;
display: flex;
align-items: center;
background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
......@@ -81,7 +81,7 @@ export default {
background-repeat: no-repeat;
.label {
padding-left: 30px;
padding-left: 30PX;
// color: #bcdaec;
}
......@@ -95,7 +95,7 @@ export default {
.arrow {
display: flex;
width: 100%;
height: 30px;
height: 30PX;
text-align: center;
background-size: auto 100%;
background-repeat: no-repeat;
......
wj-manage-web/src/views/situation/index.vue
View file @ 9bcfdcad
......@@ -144,7 +144,10 @@ let map,
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicelModels = {}, // 车辆model
vehicleModelTypes = {};
vehicleModelTypes = {},
lastFrameTime = null,
noTrackMsg = null,
trackTimer = null; // 轨迹心跳检测
export default {
mixins: [draw, mixinLightModel],
......@@ -168,7 +171,7 @@ export default {
trackSwitcherVis: false,
lightColorMap: { red: "1", green: "3", yellow: "2" }, //与灯态图片命名关联
crossPoints: null, //所有路口lnglat geojson集合
currentNearestCrossId: "", // 当前离中心点最近的路口id
currentNearestCrossId: "", // 当前离视图中心点最近的路口id
bounds: [],
situationTimeVal: "",
loading: true,
......@@ -345,6 +348,7 @@ export default {
this.bounds = [[leftDownXy, mid1, rightUpXy, mid2, leftDownXy]];
},
pageInit() {
lastFrameTime = new Date().getTime();
map = this.$refs.wMap.initMap();
window.map = map;
map.on("style.load", () => {
......@@ -590,6 +594,23 @@ export default {
}
},
switchfirst() {
trackTimer = setInterval(() => {
let currentTime = new Date().getTime();
if (currentTime - lastFrameTime > 60 * 1000) {
if (!noTrackMsg) {
noTrackMsg = ELEMENT.Message({
duration: 0,
message: "暂无轨迹数据...",
customClass:'noTrackMessageDialog'
});
}
} else {
if (noTrackMsg) {
noTrackMsg.close();
noTrackMsg = null;
}
}
}, 100);
this.layerShowRenders = true;
let features = [];
for (let item of this.$store.state.dicts.CrossInfo) {
......@@ -811,6 +832,7 @@ export default {
changeCheck(beforeLabel, checkItem) {
this.currentCheck = checkItem.label;
if (beforeLabel === "first") {
this.clearTrackTimer();
let a = performance.now();
console.log("start close.............");
this.$refs.videoList?.destroyAll();
......@@ -930,6 +952,7 @@ export default {
},
callCar(msg) {
lastFrameTime = new Date().getTime();
if (this.layerShowRenders) {
// 筛选可见区域
for (let i = 0; i < msg.length; i++) {
......@@ -1126,22 +1149,10 @@ export default {
// 获取单个路口的停止线
async getSingleCrossStopLine(crossId) {
let res = await getStopLineByLkid({ lkid: crossId });
console.log("single stopLineData...", res);
this.stopLineData[crossId] = res.content;
},
callLight(msg) {
// let a = {
// 'crossId': [
// {'dirtype': '', 'geom': ''},
// {'dirtype': '', 'geom': ''},
// ],
// 'crossId': [
// {'dirtype': '', 'geom': ''},
// {'dirtype': '', 'geom': ''},
// ]
// }
this.$EventBus.$emit("callLight", msg);
// console.log(msg);
if (msg[0] && msg[0].dirLampGroupMap && msg[0].phaseMap) {
let queue = [];
for (let cross of msg) {
......@@ -1253,10 +1264,19 @@ export default {
this.sockets = [];
});
},
// 清理轨迹心跳检测与关闭对应信息框
clearTrackTimer() {
trackTimer && clearInterval(trackTimer) && (trackTimer = null);
if (noTrackMsg) {
noTrackMsg.close();
noTrackMsg = null;
}
},
},
beforeDestroy() {
console.log("index beforeDestroy......");
this.clearTrackTimer();
this.closeAllWs();
this.detetors = {};
window.tb.dispose();
......@@ -1268,6 +1288,7 @@ export default {
</script>
<style lang="less" scoped>
#map {
position: absolute;
width: 100%;
......@@ -1293,6 +1314,9 @@ export default {
</style>
<style lang="less">
.noTrackMessageDialog{
top: 36px;
}
.situationTime {
left: 50%;
transform: translateX(-50%);
......@@ -1348,8 +1372,8 @@ export default {
top: 60% !important;
right: 3.4% !important;
z-index: 11 !important;
.mapboxgl-ctrl-group{
background: transparent !important;
.mapboxgl-ctrl-group {
background: transparent !important;
}
}
}
......
wj-manage-web/src/views/track/index.vue
View file @ 9bcfdcad
......@@ -586,6 +586,7 @@ export default {
},
// 俯视视角
switchfirst() {
this.popupOffset = [0,0]
viewer.scene.preRender.removeEventListener(this.syncViewer);
viewer.scene.preRender.addEventListener(this.syncViewer);
this.showOverMap = true;
......@@ -600,7 +601,7 @@ export default {
this.setCameraView(3, 12, -10);
viewer.scene.preRender.removeEventListener(this.syncViewer);
currentEntity.show = true;
popup?.setOffset([-100, -180]);
this.popupOffset = [0,100]
viewer.trackedEntity = currentEntity;
viewer.clock.onTick.removeEventListener(this.clockListenerInCar);
viewer.clock.onTick.addEventListener(this.clockListenerWithCar);
......@@ -609,7 +610,7 @@ export default {
switchthird() {
this.setCameraView(1.5, 0, -5);
viewer.scene.preRender.removeEventListener(this.syncViewer);
popup?.setOffset([-50, 100]);
this.popupOffset = [0,100]
viewer.trackedEntity = currentEntity;
currentEntity.show = false;
viewer.clock.onTick.removeEventListener(this.clockListenerWithCar);
......@@ -712,14 +713,15 @@ export default {
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let lng = Cesium.Math.toDegrees(cartographic.longitude);
if (!popup) {
this.popupOffset = [0,0]
popup = new CesiumPopup({
title: "信息",
})
.setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 1.5))
.setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 3))
.setHTML(`<div id="cesium_vehicle_popup" ></div>`)
.addTo(viewer)
.setTitle("")
.setOffset([-130, -180]);
.setOffset([0,0]);
new VehiclePopup({
propsData: {
model: this.currentTimeRowData,
......@@ -727,8 +729,8 @@ export default {
}).$mount("#cesium_vehicle_popup");
} else {
this.refreshSpeed();
popup?.setOffset([-130, -180]);
popup.setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 1.5));
popup?.setOffset(this.popupOffset);
popup.setPosition(Cesium.Cartesian3.fromDegrees(lng, lat, 3));
}
} else {
popup?.remove();
......
wj-manage-web/src/views/track/vehicleDetail.vue
View file @ 9bcfdcad
......@@ -59,11 +59,11 @@ export default {
<style lang="less" scoped>
.vehicleDetail {
font-size: 12px;
font-size: 12PX;
position: absolute;
width: 270px;
width: 270PX;
.vehicle_arrow {
height: 25px;
height: 25PX;
background-image: url("../../assets/images/holo/vehicelArrow.png");
background-size: auto 100%;
background-position-x: center;
......@@ -71,16 +71,16 @@ export default {
}
.vehicleDetailInner {
padding: 2px 16px 6px 16px;
padding: 2PX 16PX 6PX 16PX;
width: 100%;
height: calc(100% - 25px);
height: calc(100% - 25PX);
background-image: url("../../assets/images/track/track_vehicle_back.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.head {
height: 25px;
height: 25PX;
color: white;
display: flex;
align-items: center;
......@@ -90,10 +90,10 @@ export default {
}
.titleBefore {
width: 18px;
height: 18px;
margin-right: 5px;
line-height: 25px;
width: 18PX;
height: 18PX;
margin-right: 5PX;
line-height: 25PX;
background-image: url("../../assets/images/holo/vehicle_popup_icon.png");
background-position: center;
background-repeat: no-repeat;
......@@ -101,17 +101,17 @@ export default {
}
.content {
height: calc(100% - 25px);
height: calc(100% - 25PX);
display: flex;
padding-top: 12px;
padding-top: 12PX;
flex-direction: column;
.detailItem {
height: 30px;
line-height: 30px;
height: 30PX;
line-height: 30PX;
white-space: nowrap;
color: white;
max-width: 230px;
max-width: 230PX;
overflow: hidden;
text-overflow: ellipsis;
......@@ -121,7 +121,7 @@ export default {
span.left {
text-align: left;
padding-left: 20px;
padding-left: 20PX;
background-image: url("../../assets/images/holo/vehicle_popup_arrow.png");
background-size: auto;
background-repeat: no-repeat;
......
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