Skip to content

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

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

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