Skip to content

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

地图页面优化

parent e3a8b498
Hide 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"; ...@@ -4,7 +4,12 @@ import * as echarts from "echarts";
import AMapLoader from "@amap/amap-jsapi-loader"; import AMapLoader from "@amap/amap-jsapi-loader";
</script> </script>
<template> <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="btnGroup">
<div class="btn btn1" @click="heatBtnClick(1)"><p>实时热耗</p></div> <div class="btn btn1" @click="heatBtnClick(1)"><p>实时热耗</p></div>
<div class="btn btn2" @click="heatBtnClick(2)"><p>供热面积</p></div> <div class="btn btn2" @click="heatBtnClick(2)"><p>供热面积</p></div>
...@@ -98,7 +103,7 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -98,7 +103,7 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</ul> </ul>
</div> </div>
<div class="blockStyle rightLayer2Block"> <div class="blockStyle rightLayer2Block">
<div class="titleStyle" style="margin-top: 1%"> <div class="titleStyle" style="margin-top: 0.3%">
<p>一次补水量曲线</p> <p>一次补水量曲线</p>
</div> </div>
<div <div
...@@ -326,6 +331,8 @@ import AMapLoader from "@amap/amap-jsapi-loader"; ...@@ -326,6 +331,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
</template> </template>
<script> <script>
import { detectZoom } from "@/plugins/screen"; import { detectZoom } from "@/plugins/screen";
import { ElLoading } from "element-plus";
import { ElMessage } from "element-plus";
const m = detectZoom(); const m = detectZoom();
import { import {
...@@ -388,6 +395,8 @@ export default defineComponent({ ...@@ -388,6 +395,8 @@ export default defineComponent({
rightLayer2Nodata: true, rightLayer2Nodata: true,
rightLayer4Nodata: true, rightLayer4Nodata: true,
mapBack: null, mapBack: null,
mapBackPostion: [{ lan: "38.854713", lon: "117.481685" }],
fullscreenLoading: false,
}; };
}, },
created() { created() {
...@@ -409,12 +418,10 @@ export default defineComponent({ ...@@ -409,12 +418,10 @@ export default defineComponent({
timeOff = true; timeOff = true;
} }
}, 1000); // 每秒更新一次时间 }, 1000); // 每秒更新一次时间
}, },
mounted: function mounted() { mounted: function mounted() {
if (window.screen.height * window.devicePixelRatio == 1080) { if (window.screen.height * window.devicePixelRatio == 1080) {
document.body.style.zoom = 100 / Number(m); //document.body.style.zoom = 100 / Number(m);
} }
this.login(); this.login();
window.onresize = function () { window.onresize = function () {
...@@ -436,11 +443,12 @@ export default defineComponent({ ...@@ -436,11 +443,12 @@ export default defineComponent({
mapinit: function () { mapinit: function () {
let map = null; let map = null;
let _this = this; let _this = this;
_this.fullscreenLoading = false;
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode: "b67a3b1a1a0e38dcef3cc7a3207d1b89", securityJsCode: "6ce6a59d0abbea56d01f154d18d987f8",
}; };
AMapLoader.load({ AMapLoader.load({
key: "1dd4cb829f49603d0bc7ef6d82ff8da8", key: "32bc3046781d7010ef6748f552f86b5e",
version: "2.0", version: "2.0",
plugins: ["AMap.Scale"], plugins: ["AMap.Scale"],
}) })
...@@ -452,10 +460,20 @@ export default defineComponent({ ...@@ -452,10 +460,20 @@ export default defineComponent({
rotateEnable: true, rotateEnable: true,
pitchEnable: true, pitchEnable: true,
// scrollWheel: false, // scrollWheel: false,
zoom: 11, zoom: 12,
rotation: -15, rotation: 140,
zooms: [11, 20], zooms: [12, 20],
center: [117.210182, 38.925596], center: [117.490182, 38.885596],
});
map.on("click", function (e) {
alert(
"您在[ " +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ]的位置点击了地图！"
);
}); });
this.servicCenterList.forEach((element, index) => { this.servicCenterList.forEach((element, index) => {
...@@ -468,8 +486,6 @@ export default defineComponent({ ...@@ -468,8 +486,6 @@ export default defineComponent({
element.centerId, element.centerId,
amapGps.lng, amapGps.lng,
amapGps.lat, amapGps.lat,
// element.longitude,
// element.latitude,
element.centerName, element.centerName,
element.realHeat, element.realHeat,
element.area, element.area,
...@@ -479,27 +495,6 @@ export default defineComponent({ ...@@ -479,27 +495,6 @@ export default defineComponent({
}); });
var contextMenu = new AMap.ContextMenu(); 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) => { .catch((e) => {
console.log(e); console.log(e);
...@@ -625,10 +620,10 @@ export default defineComponent({ ...@@ -625,10 +620,10 @@ export default defineComponent({
centerId: centerId, centerId: centerId,
index: index, index: index,
}; };
_this.postSupplylist(map, centerId, index); _this.postSupplylist(map, centerId, index, markerId);
} }
if (markerId.includes("marker2")) { if (markerId.includes("marker2")) {
_this.postTransferList(map, centerId, index); _this.postTransferList(map, centerId, index, centerId);
} }
}); });
}, 500); }, 500);
...@@ -661,7 +656,6 @@ export default defineComponent({ ...@@ -661,7 +656,6 @@ export default defineComponent({
break; break;
case 4: case 4:
if (this.mapBack != null && this.mapLevel != 2) { if (this.mapBack != null && this.mapLevel != 2) {
console.log(_this.mapLevel);
_this.servicCenterList[_this.mapBack.index].openF = false; _this.servicCenterList[_this.mapBack.index].openF = false;
//_this.mapBack.map.clearMap(); //_this.mapBack.map.clearMap();
...@@ -672,10 +666,10 @@ export default defineComponent({ ...@@ -672,10 +666,10 @@ export default defineComponent({
_this.mapLevel = 2; _this.mapLevel = 2;
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode: "b67a3b1a1a0e38dcef3cc7a3207d1b89", securityJsCode: "6ce6a59d0abbea56d01f154d18d987f8",
}; };
AMapLoader.load({ AMapLoader.load({
key: "1dd4cb829f49603d0bc7ef6d82ff8da8", key: "32bc3046781d7010ef6748f552f86b5e",
version: "2.0", version: "2.0",
plugins: ["AMap.Scale"], plugins: ["AMap.Scale"],
}).then((AMap) => { }).then((AMap) => {
...@@ -686,10 +680,20 @@ export default defineComponent({ ...@@ -686,10 +680,20 @@ export default defineComponent({
rotateEnable: true, rotateEnable: true,
pitchEnable: true, pitchEnable: true,
// scrollWheel: false, // scrollWheel: false,
zoom: 11, zoom: 14,
rotation: -15, rotation: -30,
zooms: [11, 20], zooms: [14, 20],
center: [117.210182, 38.925596], center: [_this.mapBackPostion[0], _this.mapBackPostion[1]],
});
map.on("click", function (e) {
alert(
"您在[ " +
e.lnglat.getLng() +
"," +
e.lnglat.getLat() +
" ]的位置点击了地图！"
);
}); });
_this.postSupplylist( _this.postSupplylist(
...@@ -714,15 +718,15 @@ export default defineComponent({ ...@@ -714,15 +718,15 @@ export default defineComponent({
// getToken(params).then((res) => { // getToken(params).then((res) => {
// if (res.success === true) { // if (res.success === true) {
// sessionStorage.setItem("token", res.data.token); // sessionStorage.setItem("token", res.data.token);
this.postServicCenterList(); //获取服务中心列表 this.postServicCenterList(); //获取服务中心列表
this.getForecast(); //获取室外温度 this.getForecast(); //获取室外温度
this.postGYPipeReal(); //获取实时数据 this.postGYPipeReal(); //获取实时数据
this.postGYTransferValue(); //获取换热站工况数据接口1 -- 阀门开度 this.postGYTransferValue(); //获取换热站工况数据接口1 -- 阀门开度
this.postGYTransferHeatUC(6); //获取换热站工况数据接口2 -- 热单耗 this.postGYTransferHeatUC(6); //获取换热站工况数据接口2 -- 热单耗
this.postAreaList(); //获取智慧调控面积 this.postAreaList(); //获取智慧调控面积
this.postGYSupplyWater(); //获取前12小时一次补水量曲线 this.postGYSupplyWater(); //获取前12小时一次补水量曲线
this.postTransferOpenValue(); //换热站机组一网电调阀开度分布 this.postTransferOpenValue(); //换热站机组一网电调阀开度分布
this.postGYSupplyHeatUCDeviation(); //度日数热耗 this.postGYSupplyHeatUCDeviation(); //度日数热耗
// } else { // } else {
// console.log(res.message); // console.log(res.message);
// } // }
...@@ -736,6 +740,19 @@ export default defineComponent({ ...@@ -736,6 +740,19 @@ export default defineComponent({
this.servicCenterList.forEach((element, index) => { this.servicCenterList.forEach((element, index) => {
element.markerId = "marker1_" + index; element.markerId = "marker1_" + index;
element.openF = false; 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(); this.mapinit();
} else if (res.status == 9) { } else if (res.status == 9) {
...@@ -745,8 +762,9 @@ export default defineComponent({ ...@@ -745,8 +762,9 @@ export default defineComponent({
} }
}); });
}, },
postSupplylist(map, id, index) { postSupplylist(map, id, index, markerId) {
let _this = this; let _this = this;
_this.fullscreenLoading = true;
postSupplylist(id).then((res) => { postSupplylist(id).then((res) => {
if (res.success === true) { if (res.success === true) {
this.supplylistList = res.data; this.supplylistList = res.data;
...@@ -777,10 +795,17 @@ export default defineComponent({ ...@@ -777,10 +795,17 @@ export default defineComponent({
); );
} }
}); });
map.setZoomAndCenter(15, [ switch (markerId) {
res.data[0].longitude, case "marker1_0":
res.data[0].latitude, 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.servicCenterList[index].openF = true;
_this.markerList.forEach((element, n) => { _this.markerList.forEach((element, n) => {
if (index != n) { if (index != n) {
...@@ -795,7 +820,10 @@ export default defineComponent({ ...@@ -795,7 +820,10 @@ export default defineComponent({
} }
}); });
} }
_this.fullscreenLoading = false;
} else if (res.status == 9) { } else if (res.status == 9) {
_this.fullscreenLoading = false;
ElMessage.error(res.message);
setInterval(function () { setInterval(function () {
location.reload(); location.reload();
}, 600000); }, 600000);
...@@ -805,8 +833,9 @@ export default defineComponent({ ...@@ -805,8 +833,9 @@ export default defineComponent({
setZoomFun(zoom, lat, lot) { setZoomFun(zoom, lat, lot) {
this.map.setZoom(zoom, lat, lot); this.map.setZoom(zoom, lat, lot);
}, },
postTransferList(map, id, index) { postTransferList(map, id, index, sid) {
let _this = this; let _this = this;
_this.fullscreenLoading = true;
postTransferList(id).then((res) => { postTransferList(id).then((res) => {
if (res.success === true) { if (res.success === true) {
_this.transferList = res.data; _this.transferList = res.data;
...@@ -845,13 +874,33 @@ export default defineComponent({ ...@@ -845,13 +874,33 @@ export default defineComponent({
); );
} }
}); });
map.setZoomAndCenter(17, [ switch (sid) {
res.data[0].longitude, case "a523dc33-c8b8-41c2-9751-a32083627344":
res.data[0].latitude, 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.supplylistList[index].openF = true;
_this.fullscreenLoading = false;
} }
} else if (res.status == 9) { } else {
_this.fullscreenLoading = false;
ElMessage.error(res.message);
setInterval(function () { setInterval(function () {
location.reload(); location.reload();
}, 600000); }, 600000);
...@@ -2058,7 +2107,7 @@ export default defineComponent({ ...@@ -2058,7 +2107,7 @@ export default defineComponent({
textStyle: { textStyle: {
width: 5, width: 5,
color: "#ffffff", // 文本颜色 color: "#ffffff", // 文本颜色
fontSize: 10, fontSize: 9,
padding: 0, padding: 0,
}, },
itemGap: 8, itemGap: 8,
...@@ -2295,7 +2344,7 @@ export default defineComponent({ ...@@ -2295,7 +2344,7 @@ export default defineComponent({
background: url("/imgs/Gis/title_bg.png") top left no-repeat; background: url("/imgs/Gis/title_bg.png") top left no-repeat;
} }
.gis_content .titleStyle p { .gis_content .titleStyle p {
padding: .5% 5% 0 5%; padding: 0.5% 5% 0 5%;
color: #19f7ff; color: #19f7ff;
letter-spacing: 3px; letter-spacing: 3px;
font-size: 120%; font-size: 120%;
......
src/views/Gis/screenDisplay.vue
View file @ 910df61e
<script setup> <script setup>
import screenDisplay from '../../components/screenDisplay.vue' import screenDisplay from "../../components/screenDisplay.vue";
</script> </script>
<template> <template>
...@@ -10,16 +9,25 @@ import screenDisplay from '../../components/screenDisplay.vue' ...@@ -10,16 +9,25 @@ import screenDisplay from '../../components/screenDisplay.vue'
</template> </template>
<style> <style>
body, div, p, img, span, table, tr, td { body,
div,
p,
img,
span,
table,
tr,
td {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
html, body { html,
body {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
font-size: 16px;
background-color: #033447; background-color: #033447;
font-size: 12px;
} }
ul, li { ul,
li {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -37,20 +45,20 @@ ul, li { ...@@ -37,20 +45,20 @@ ul, li {
padding: 5px 20px; padding: 5px 20px;
color: #ffffff !important; color: #ffffff !important;
text-shadow: 1px 1px 1px #333; text-shadow: 1px 1px 1px #333;
font-size: 15px; font-size: 12px;
font-weight: bold; font-weight: bold;
border: #fff solid 1px; border: #fff solid 1px;
} }
.mypopup1 { .mypopup1 {
/* width: 160px; */ /* width: 160px; */
text-align: center; 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); box-shadow: inset 0 0 20px rgb(62, 127, 245);
} }
.mypopup2 { .mypopup2 {
width: 160px; width: 160px;
text-align: center; 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); box-shadow: inset 0 0 20px rgb(62, 127, 245);
} }
.amap-marker-label { .amap-marker-label {
...@@ -58,9 +66,15 @@ ul, li { ...@@ -58,9 +66,15 @@ ul, li {
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
} }
@media (max-width: 2560px) { @media (min-width: 1700px) {
body { body {
font-size: 15px; font-size: 15px;
} }
} }
@media (min-width: 2560px) {
body {
font-size: 18px;
}
}
</style> </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