|
|
@ -1,5 +1,6 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="solar"> |
|
|
<div class="solar"> |
|
|
|
|
|
|
|
|
<gisMap2d ref="gisMap2dsolar" style="width:100vw;height:100vh" |
|
|
<gisMap2d ref="gisMap2dsolar" style="width:100vw;height:100vh" |
|
|
:mapZoom = "mapZoom" |
|
|
:mapZoom = "mapZoom" |
|
|
:mapCenter="mapCenter" |
|
|
:mapCenter="mapCenter" |
|
|
@ -8,6 +9,7 @@ |
|
|
radarSliderRight="14%" |
|
|
radarSliderRight="14%" |
|
|
mapBoxHeight="100vh" @clickPointEvent="clickPointEvent" widgetBoxDisplay="none"></gisMap2d> |
|
|
mapBoxHeight="100vh" @clickPointEvent="clickPointEvent" widgetBoxDisplay="none"></gisMap2d> |
|
|
<div class="solar_left"> |
|
|
<div class="solar_left"> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div> |
|
|
<Bg2 class="content-l-t"> |
|
|
<Bg2 class="content-l-t"> |
|
|
<div class="focuse-header"> |
|
|
<div class="focuse-header"> |
|
|
@ -65,6 +67,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</Bg2> |
|
|
</Bg2> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div> |
|
|
<Bg2 class="content-l-t"> |
|
|
<Bg2 class="content-l-t"> |
|
|
<div class="focuse-header"> |
|
|
<div class="focuse-header"> |
|
|
@ -124,7 +127,7 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import homeLeftIcons from "./../../Home/components/homeLeftIcons/index.vue"; |
|
|
import Vue from "vue"; |
|
|
import Vue from "vue"; |
|
|
import { gisMap2d } from 'gis-map-universal' |
|
|
import { gisMap2d } from 'gis-map-universal' |
|
|
import Bg2 from "@screen/components/Decorations/bg-2.vue" |
|
|
import Bg2 from "@screen/components/Decorations/bg-2.vue" |
|
|
@ -135,6 +138,7 @@ import SolarEnergy from "./../../Home/components/Dialogs/SolarEnergy/index.vue"; |
|
|
const lnglat = [117.16515148266497,35.2797674572588] |
|
|
const lnglat = [117.16515148266497,35.2797674572588] |
|
|
export default { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
|
|
|
homeLeftIcons, |
|
|
Bg2, |
|
|
Bg2, |
|
|
gisMap2d, |
|
|
gisMap2d, |
|
|
SolarEnergy, |
|
|
SolarEnergy, |
|
|
@ -145,7 +149,7 @@ export default { |
|
|
mapBoxHeight: '100vh', |
|
|
mapBoxHeight: '100vh', |
|
|
mapZoom: '7.5', // 默认值'7.5' String类型 |
|
|
mapZoom: '7.5', // 默认值'7.5' String类型 |
|
|
mapCenter: lnglat, //默认值[118.75, 36.46] Array类 |
|
|
mapCenter: lnglat, //默认值[118.75, 36.46] Array类 |
|
|
|
|
|
|
|
|
dialogConfig:{ |
|
|
dialogConfig:{ |
|
|
component: void 0, |
|
|
component: void 0, |
|
|
data: void 0, |
|
|
data: void 0, |
|
|
@ -187,21 +191,21 @@ export default { |
|
|
url: 'business/device/pileNumberQuery', |
|
|
url: 'business/device/pileNumberQuery', |
|
|
method: 'post', |
|
|
method: 'post', |
|
|
data: { |
|
|
data: { |
|
|
deviceType: "15", |
|
|
deviceType: "15", |
|
|
} |
|
|
} |
|
|
}).then(result => { |
|
|
}).then(result => { |
|
|
const aryPoints = []; |
|
|
const aryPoints = []; |
|
|
const sa = require(`@screen/images/layerb/路测设备/太阳能板_active.svg`) |
|
|
const sa = require(`@screen/images/layerb/路测设备/离网光伏供电_active.svg`) |
|
|
const sb = require(`@screen/images/layerb/路测设备/太阳能板_fault.svg`) |
|
|
const sb = require(`@screen/images/layerb/路测设备/离网光伏供电_fault.svg`) |
|
|
for(let i of result.data){ |
|
|
for(let i of result.data){ |
|
|
aryPoints.push({ |
|
|
aryPoints.push({ |
|
|
type: 'event', //类型。例如：交通事件、故障停车、摄像机等 【必传字段】 |
|
|
type: 'event', //类型。例如：交通事件、故障停车、摄像机等 【必传字段】 |
|
|
longitude: parseFloat(i.longitude), //点坐标经度 【必传字段】 |
|
|
longitude: parseFloat(i.longitude), //点坐标经度 【必传字段】 |
|
|
latitude: parseFloat(i.latitude), //点坐标纬度 【必传字段】 |
|
|
latitude: parseFloat(i.latitude), //点坐标纬度 【必传字段】 |
|
|
iconUrl: i.deviceState==='1'?sa:sb, // 图标 【必传字段】 |
|
|
iconUrl: i.deviceState==='1'?sa:sb, // 图标 【必传字段】 |
|
|
offset: [0,-48], |
|
|
offset: [0,-48], |
|
|
size: [42,100], |
|
|
size: [42,100], |
|
|
GGoffsetX: 0, |
|
|
GGoffsetX: 0, |
|
|
GGoffsetY: -5, |
|
|
GGoffsetY: -5, |
|
|
GGimgOffset:[0,0], |
|
|
GGimgOffset:[0,0], |
|
|
GGimgsize:[42,103], |
|
|
GGimgsize:[42,103], |
|
|
@ -329,7 +333,7 @@ export default { |
|
|
xAxis: { |
|
|
xAxis: { |
|
|
type: 'category', |
|
|
type: 'category', |
|
|
data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点', |
|
|
data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点', |
|
|
'12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'], |
|
|
'12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'], |
|
|
axisLine:{ |
|
|
axisLine:{ |
|
|
show:true, |
|
|
show:true, |
|
|
lineStyle:{ |
|
|
lineStyle:{ |
|
|
@ -401,7 +405,7 @@ export default { |
|
|
this.chart1.setOption(option1); |
|
|
this.chart1.setOption(option1); |
|
|
this.chart1.resize(); |
|
|
this.chart1.resize(); |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
this.chart2 = echarts.init(document.getElementById("charts2")); |
|
|
this.chart2 = echarts.init(document.getElementById("charts2")); |
|
|
let option2 = JSON.parse(JSON.stringify(_chartsOptions)); |
|
|
let option2 = JSON.parse(JSON.stringify(_chartsOptions)); |
|
|
request({ |
|
|
request({ |
|
|
@ -441,7 +445,7 @@ export default { |
|
|
this.chart3.setOption(option3); |
|
|
this.chart3.setOption(option3); |
|
|
this.chart3.resize() |
|
|
this.chart3.resize() |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
window.addEventListener("resize", () => { |
|
|
window.addEventListener("resize", () => { |
|
|
if(this.chart1){ |
|
|
if(this.chart1){ |
|
|
@ -451,7 +455,7 @@ export default { |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
@ -475,7 +479,16 @@ export default { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
gap: 10px; |
|
|
gap: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
.home-left-icons { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
gap: 50px; /* 项之间的间距为10px*/ |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
z-index: 0; |
|
|
|
|
|
margin-left: 20px; |
|
|
|
|
|
.item { |
|
|
|
|
|
padding-top: 35px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
.solar_right { |
|
|
.solar_right { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
right: 20px; |
|
|
right: 20px; |
|
|
|
