Skip to content

W
web-project
Commit 910df61e authored by 朱超's avatar 朱超
Browse files
Options

地图页面优化

parent e3a8b498
Show whitespace changes
Inline Side-by-side
Showing with 138 additions and 75 deletions
src/components/screenDisplay.vue
View file @ 910df61e
......@@ -4,7 +4,12 @@ import * as echarts from "echarts";
import AMapLoader from "@amap/amap-jsapi-loader";
</script>
<template>
<div class="gis_content" id="gis_content">
<div
class="gis_content"
id="gis_content"
v-loading.fullscreen.lock="fullscreenLoading"
element-loading-background="rgba(122, 122, 122, 0.6)"
>
<div class="btnGroup">
<div class="btn btn1" @click="heatBtnClick(1)"><p>实时热耗</p></div>
<div class="btn btn2" @click="heatBtnClick(2)"><p>供热面积</p></div>
......@@ -98,7 +103,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</ul>
</div>
<div class="blockStyle rightLayer2Block">
<div class="titleStyle" style="margin-top: 1%">
<div class="titleStyle" style="margin-top: 0.3%">
<p>一次补水量曲线</p>
</div>
<div
......@@ -326,6 +331,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</template>
<script>
import { detectZoom } from "@/plugins/screen";
import { ElLoading } from "element-plus";
import { ElMessage } from "element-plus";
const m = detectZoom();
import {
......@@ -388,6 +395,8 @@ export default defineComponent({
rightLayer2Nodata: true,
rightLayer4Nodata: true,
mapBack: null,
mapBackPostion: [{ lan: "38.854713", lon: "117.481685" }],
fullscreenLoading: false,
};
},
created() {
......@@ -409,12 +418,10 @@ export default defineComponent({
timeOff = true;
}
}, 1000); // 每秒更新一次时间
},
mounted: function mounted() {
if (window.screen.height * window.devicePixelRatio == 1080) {
document.body.style.zoom = 100 / Number(m);
//document.body.style.zoom = 100 / Number(m);
}
this.login();
window.onresize = function () {
......@@ -436,11 +443,12 @@ export default defineComponent({
mapinit: function () {
let map = null;
let _this = this;
_this.fullscreenLoading = false;
window._AMapSecurityConfig = {
securityJsCode: "b67a3b1a1a0e38dcef3cc7a3207d1b89",
securityJsCode: "6ce6a59d0abbea56d01f154d18d987f8",
};
AMapLoader.load({
key: "1dd4cb829f49603d0bc7ef6d82ff8da8",
key: "32bc3046781d7010ef6748f552f86b5e",
version: "2.0",
plugins: ["AMap.Scale"],
})
......@@ -452,10 +460,20 @@ export default defineComponent({
rotateEnable: true,
pitchEnable: true,
// scrollWheel: false,
zoom: 11,
rotation: -15,
zooms: [11, 20],
center: [117.210182, 38.925596],
zoom: 12,
rotation: 140,
zooms: [12, 20],
center: [117.490182, 38.885596],
});
map.on("click", function (e) {
alert(
"您在[ " +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ]的位置点击了地图！"
);
});
this.servicCenterList.forEach((element, index) => {
......@@ -468,8 +486,6 @@ export default defineComponent({
element.centerId,
amapGps.lng,
amapGps.lat,
// element.longitude,
// element.latitude,
element.centerName,
element.realHeat,
element.area,
......@@ -479,27 +495,6 @@ export default defineComponent({
});
var contextMenu = new AMap.ContextMenu();
// //右键放大
// contextMenu.addItem(
// "地图初始状态",
// function () {
// map.clearMap();
// },
// 0
// );
// //右键缩小
// contextMenu.addItem(
// "退出地图",
// function () {
// map.zoomOut();
// },
// 1
// );
//地图绑定鼠标右击事件——弹出右键菜单
// _this.map.on("rightclick", function (e) {
// contextMenu.open(_this.map, e.lnglat);
// });
})
.catch((e) => {
console.log(e);
......@@ -625,10 +620,10 @@ export default defineComponent({
centerId: centerId,
index: index,
};
_this.postSupplylist(map, centerId, index);
_this.postSupplylist(map, centerId, index, markerId);
}
if (markerId.includes("marker2")) {
_this.postTransferList(map, centerId, index);
_this.postTransferList(map, centerId, index, centerId);
}
});
}, 500);
......@@ -661,7 +656,6 @@ export default defineComponent({
break;
case 4:
if (this.mapBack != null && this.mapLevel != 2) {
console.log(_this.mapLevel);
_this.servicCenterList[_this.mapBack.index].openF = false;
//_this.mapBack.map.clearMap();
......@@ -672,10 +666,10 @@ export default defineComponent({
_this.mapLevel = 2;
window._AMapSecurityConfig = {
securityJsCode: "b67a3b1a1a0e38dcef3cc7a3207d1b89",
securityJsCode: "6ce6a59d0abbea56d01f154d18d987f8",
};
AMapLoader.load({
key: "1dd4cb829f49603d0bc7ef6d82ff8da8",
key: "32bc3046781d7010ef6748f552f86b5e",
version: "2.0",
plugins: ["AMap.Scale"],
}).then((AMap) => {
......@@ -686,10 +680,20 @@ export default defineComponent({
rotateEnable: true,
pitchEnable: true,
// scrollWheel: false,
zoom: 11,
rotation: -15,
zooms: [11, 20],
center: [117.210182, 38.925596],
zoom: 14,
rotation: -30,
zooms: [14, 20],
center: [_this.mapBackPostion[0], _this.mapBackPostion[1]],
});
map.on("click", function (e) {
alert(
"您在[ " +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ]的位置点击了地图！"
);
});
_this.postSupplylist(
......@@ -736,6 +740,19 @@ export default defineComponent({
this.servicCenterList.forEach((element, index) => {
element.markerId = "marker1_" + index;
element.openF = false;
switch (index) {
case 0:
element.latitudeTwo = "38.854713";
element.longitudeTwo = "117.481685";
break;
case 1:
element.latitudeTwo = "38.850194";
element.longitudeTwo = "117.458496";
break;
default:
element.latitudeTwo = null;
element.longitudeTwo = null;
}
});
this.mapinit();
} else if (res.status == 9) {
......@@ -745,8 +762,9 @@ export default defineComponent({
}
});
},
postSupplylist(map, id, index) {
postSupplylist(map, id, index, markerId) {
let _this = this;
_this.fullscreenLoading = true;
postSupplylist(id).then((res) => {
if (res.success === true) {
this.supplylistList = res.data;
......@@ -777,10 +795,17 @@ export default defineComponent({
);
}
});
map.setZoomAndCenter(15, [
res.data[0].longitude,
res.data[0].latitude,
]);
switch (markerId) {
case "marker1_0":
map.setZoomAndCenter(15, ["117.481685", "38.854713"]);
this.mapBackPostion = ["117.481685", "38.854713"];
break;
case "marker1_1":
map.setZoomAndCenter(15, ["117.458496", "38.850194"]);
this.mapBackPostion = ["117.458496", "38.850194"];
break;
}
//map.setZoomAndCenter(15, [longitudeTwo, latitudeTwo]);
_this.servicCenterList[index].openF = true;
_this.markerList.forEach((element, n) => {
if (index != n) {
......@@ -795,7 +820,10 @@ export default defineComponent({
}
});
}
_this.fullscreenLoading = false;
} else if (res.status == 9) {
_this.fullscreenLoading = false;
ElMessage.error(res.message);
setInterval(function () {
location.reload();
}, 600000);
......@@ -805,8 +833,9 @@ export default defineComponent({
setZoomFun(zoom, lat, lot) {
this.map.setZoom(zoom, lat, lot);
},
postTransferList(map, id, index) {
postTransferList(map, id, index, sid) {
let _this = this;
_this.fullscreenLoading = true;
postTransferList(id).then((res) => {
if (res.success === true) {
_this.transferList = res.data;
......@@ -845,13 +874,33 @@ export default defineComponent({
);
}
});
map.setZoomAndCenter(17, [
res.data[0].longitude,
res.data[0].latitude,
]);
switch (sid) {
case "a523dc33-c8b8-41c2-9751-a32083627344":
map.setZoomAndCenter(16, ["117.464611", "38.846439"]);
break;
case "ccfb0595-86f7-4c0a-a134-8e945180ee48":
map.setZoomAndCenter(16, ["117.469213", "38.83752"]);
break;
case "33104782-c1ad-432c-953e-e31c2e031be4":
map.setZoomAndCenter(16, ["117.456092", "38.857126"]);
break;
case "dfa20074-8731-457f-b63f-4e1858cfe266":
map.setZoomAndCenter(16, ["117.496956", "38.856422"]);
break;
case "b354f45b-23e5-42be-a210-0fb92394f457":
map.setZoomAndCenter(16, ["117.499208", "38.855445"]);
break;
}
// map.setZoomAndCenter(17, [
// res.data[0].longitude,
// res.data[0].latitude,
// ]);
_this.supplylistList[index].openF = true;
_this.fullscreenLoading = false;
}
} else if (res.status == 9) {
} else {
_this.fullscreenLoading = false;
ElMessage.error(res.message);
setInterval(function () {
location.reload();
}, 600000);
......@@ -2058,7 +2107,7 @@ export default defineComponent({
textStyle: {
width: 5,
color: "#ffffff", // 文本颜色
fontSize: 10,
fontSize: 9,
padding: 0,
},
itemGap: 8,
......@@ -2295,7 +2344,7 @@ export default defineComponent({
background: url("/imgs/Gis/title_bg.png") top left no-repeat;
}
.gis_content .titleStyle p {
padding: .5% 5% 0 5%;
padding: 0.5% 5% 0 5%;
color: #19f7ff;
letter-spacing: 3px;
font-size: 120%;
......
src/views/Gis/screenDisplay.vue
View file @ 910df61e
<script setup>
import screenDisplay from '../../components/screenDisplay.vue'
import screenDisplay from "../../components/screenDisplay.vue";
</script>
<template>
......@@ -10,16 +9,25 @@ import screenDisplay from '../../components/screenDisplay.vue'
</template>
<style>
body, div, p, img, span, table, tr, td {
body,
div,
p,
img,
span,
table,
tr,
td {
margin: 0;
padding: 0;
}
html, body {
html,
body {
font-family: "Microsoft YaHei";
font-size: 16px;
background-color: #033447;
font-size: 12px;
}
ul, li {
ul,
li {
list-style: none;
margin: 0;
padding: 0;
......@@ -37,20 +45,20 @@ ul, li {
padding: 5px 20px;
color: #ffffff !important;
text-shadow: 1px 1px 1px #333;
font-size: 15px;
font-size: 12px;
font-weight: bold;
border: #fff solid 1px;
}
.mypopup1 {
/* width: 160px; */
text-align: center;
background-color: rgba(96, 232, 96, .5);
background-color: rgba(96, 232, 96, 0.5);
box-shadow: inset 0 0 20px rgb(62, 127, 245);
}
.mypopup2 {
width: 160px;
text-align: center;
background-color: rgba(255, 255, 255, .5);
background-color: rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 20px rgb(62, 127, 245);
}
.amap-marker-label {
......@@ -58,9 +66,15 @@ ul, li {
background-color: transparent;
cursor: pointer;
}
@media (max-width: 2560px) {
@media (min-width: 1700px) {
body {
font-size: 15px;
}
}
@media (min-width: 2560px) {
body {
font-size: 18px;
}
}
</style>
\ No newline at end of file
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