You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1395 lines
32 KiB
1395 lines
32 KiB
import { Component, OnInit } from "@angular/core"; |
|
import { DomSanitizer } from "@angular/platform-browser"; |
|
import * as echarts from "echarts"; |
|
declare var T: any; |
|
@Component({ |
|
selector: "app-gis-home", |
|
templateUrl: "./gis-home.component.html", |
|
styleUrls: ["./gis-home.component.scss"], |
|
}) |
|
export class GisHomeComponent implements OnInit { |
|
constructor(private sanitizer: DomSanitizer) {} |
|
|
|
ngOnInit(): void { |
|
this.createLabelSContent(this.markerList); |
|
this.initMap(); |
|
this.initEcharts(); |
|
|
|
console.log(this.markerList); |
|
} |
|
|
|
echartleft1; |
|
echartleft1Data = [ |
|
{ value: 1312, name: "综合应急预案" }, |
|
{ value: 1583, name: "专项应急预案" }, |
|
{ value: 3152, name: "现场处置方案" }, |
|
{ value: 5421, name: "应急处置卡" }, |
|
{ value: 1735, name: "应急预案" }, |
|
{ value: 1258, name: "类型预案" }, |
|
{ value: 19150, name: "I-V级预案" }, |
|
]; |
|
echartleft1Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "33,611", |
|
subtext: "预案总数", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#1DA7C0", |
|
"#01CFA1", |
|
"#F67B44", |
|
"#CECE41", |
|
"#7641CE", |
|
"#CE4148", |
|
"#FFA192", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "55%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 18, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 80, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartleft1Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["40%", "55%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartleft1Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["36%", "41%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "#183E57", |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
//装饰作用 |
|
type: "pie", |
|
clockWise: false, |
|
radius: ["60%", "61%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
hoverAnimation: false, |
|
startAngle: 95, //起始角度 |
|
color: ["#297b9e"], |
|
tooltip: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: false, |
|
}, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
echartleft2; |
|
echartleft2Data = [ |
|
{ value: 345, name: "综合演练" }, |
|
{ value: 21, name: "跨区域演练" }, |
|
{ value: 853, name: "单项演练" }, |
|
{ value: 12, name: "研究性演练" }, |
|
]; |
|
echartleft2Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "1,231", |
|
subtext: "演练总数", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#1DA7C0", |
|
"#01CFA1", |
|
"#F67B44", |
|
"#CECE41", |
|
"#7641CE", |
|
"#CE4148", |
|
"#FFA192", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "55%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 18, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 80, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartleft2Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["60%", "80%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartleft2Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["55%", "61%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "#183E57", |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
//装饰作用 |
|
type: "pie", |
|
clockWise: false, |
|
radius: ["87%", "88%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
hoverAnimation: false, |
|
startAngle: 95, //起始角度 |
|
color: ["#297b9e"], |
|
tooltip: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: false, |
|
}, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
echartleft3; |
|
echartleft3Data = [ |
|
{ value: 1523, name: "待核实" }, |
|
{ value: 3560, name: "整改中" }, |
|
{ value: 1853, name: "待验收" }, |
|
{ value: 1237, name: "已完成" }, |
|
]; |
|
echartleft3Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "8,173", |
|
subtext: "隐患总数", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#1DA7C0", |
|
"#01CFA1", |
|
"#F67B44", |
|
"#CECE41", |
|
"#7641CE", |
|
"#CE4148", |
|
"#FFA192", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "55%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 18, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 80, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartleft3Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].value; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["60%", "80%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartleft3Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["55%", "61%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "#183E57", |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
//装饰作用 |
|
type: "pie", |
|
clockWise: false, |
|
radius: ["87%", "88%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
hoverAnimation: false, |
|
startAngle: 95, //起始角度 |
|
color: ["#297b9e"], |
|
tooltip: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
normal: { |
|
label: { |
|
show: false, |
|
}, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
{ |
|
value: 10, |
|
}, |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
normal: { |
|
color: "transparent", //透明伞形 |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
echartright1; |
|
echartright1Data = [ |
|
{ percentage: "20%", value: 1312, name: "进出口停车" }, |
|
{ percentage: "15%", value: 1583, name: "前庭接打电话" }, |
|
{ percentage: "15%", value: 1235, name: "收银员着装" }, |
|
{ percentage: "10%", value: 1852, name: "油罐区入侵" }, |
|
{ percentage: "10%", value: 1735, name: "卸油中无人监卸" }, |
|
{ percentage: "10%", value: 1258, name: "连接卸油管" }, |
|
{ percentage: "10%", value: 600, name: "卸油设置消防器材" }, |
|
{ percentage: "10%", value: 2541, name: "卸油连接静电接地" }, |
|
]; |
|
echartright1Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "3,675", |
|
subtext: "累计预警", |
|
left: "28.5%", |
|
top: "70%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 26, |
|
lineHeight: 15, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 14, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#FE6441", |
|
"#FB726B", |
|
"#E0E035", |
|
"#3CEBE6", |
|
"#3EB2E8", |
|
"#4265E8", |
|
"#3EE8A2", |
|
"#C63EE8", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "52%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 12, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 100, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartright1Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].percentage; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: "45%", |
|
center: ["30%", "35%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartright1Data, |
|
}, |
|
// 边框的设置 |
|
{ |
|
radius: ["45%", "55%"], |
|
center: ["30%", "35%"], //图的位置，距离左跟上的位置 |
|
type: "pie", |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
labelLine: { |
|
normal: { |
|
show: false, |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
}, |
|
animation: false, |
|
tooltip: { |
|
show: false, |
|
}, |
|
data: [ |
|
{ |
|
value: 3, |
|
itemStyle: { |
|
color: "RGBA(35, 68, 100, 0.8)", |
|
}, |
|
}, |
|
], |
|
}, |
|
], |
|
}; |
|
|
|
echartright2; |
|
echartright2Data = [ |
|
{ percentage: "20%", value: 1312, name: "无人监卸" }, |
|
{ percentage: "15%", value: 1583, name: "连接卸油管" }, |
|
{ percentage: "15%", value: 1235, name: "卸油设置消防器材" }, |
|
{ percentage: "10%", value: 1852, name: "卸油设置静电接地" }, |
|
{ percentage: "10%", value: 1735, name: "卸油设置隔离区" }, |
|
]; |
|
echartright2Option = { |
|
tooltip: { |
|
trigger: "item", |
|
}, |
|
title: { |
|
text: "3,675", |
|
subtext: "卸油预警", |
|
left: "28.5%", |
|
x: "center", |
|
y: "center", |
|
textAlign: "center", |
|
textStyle: { |
|
color: "#fff", |
|
fontSize: 22, |
|
lineHeight: 8, |
|
fontWeight: "bold", |
|
textShadowBlur: 20, |
|
textShadowColor: "#fff", |
|
}, |
|
subtextStyle: { |
|
color: "#759EBB", |
|
fontSize: 13, |
|
fontWeight: "normal", |
|
}, |
|
}, |
|
color: [ |
|
"#FE6441", |
|
"#FB726B", |
|
"#E0E035", |
|
"#3CEBE6", |
|
"#3EB2E8", |
|
"#4265E8", |
|
"#3EE8A2", |
|
"#C63EE8", |
|
], |
|
legend: { |
|
orient: "vertical", |
|
left: "52%", //图例距离左的距离 |
|
y: "center", //图例上下居中 |
|
itemWidth: 8, |
|
itemHeight: 8, |
|
itemGap: 12, |
|
textStyle: { |
|
color: "#fff", |
|
rich: { |
|
name: { |
|
fontSize: 13, |
|
color: "#9698A0", |
|
width: 100, |
|
padding: [-2, 0, 0, 0], |
|
}, |
|
num: { |
|
fontSize: 13, |
|
padding: [-2, 0, 0, 0], |
|
color: "#fff", |
|
}, |
|
}, |
|
}, |
|
formatter: (name) => { |
|
//图例后添加数值 |
|
let data = this.echartright2Data; |
|
let tarValue; |
|
for (let i = 0; i < data.length; i++) { |
|
if (data[i].name === name) { |
|
tarValue = data[i].percentage; |
|
} |
|
} |
|
return `{name|${name}}` + " | " + `{num|${tarValue}}`; |
|
}, |
|
}, |
|
series: [ |
|
{ |
|
// name: "Access From", |
|
type: "pie", |
|
radius: ["50%", "70%"], |
|
center: ["30%", "50%"], //图的位置，距离左跟上的位置 |
|
avoidLabelOverlap: false, |
|
label: { |
|
show: false, |
|
position: "center", |
|
}, |
|
emphasis: { |
|
show: false, |
|
}, |
|
labelLine: { |
|
show: false, |
|
}, |
|
data: this.echartright2Data, |
|
}, |
|
{ |
|
name: "外边框", |
|
type: "pie", |
|
clockWise: false, //顺时加载 |
|
hoverAnimation: false, //鼠标移入变大 |
|
center: ["30%", "50%"], |
|
radius: ["77%", "78%"], |
|
label: { |
|
normal: { |
|
show: false, |
|
}, |
|
}, |
|
data: [ |
|
{ |
|
value: 9, |
|
name: "", |
|
itemStyle: { |
|
normal: { |
|
borderWidth: 1, |
|
borderColor: "#435067", |
|
}, |
|
}, |
|
}, |
|
], |
|
}, |
|
{ |
|
// name: "外部刻度", |
|
type: "gauge", |
|
center: ["30%", "50%"], |
|
radius: "45%", |
|
min: 0, //最小刻度 |
|
max: 100, //最大刻度 |
|
splitNumber: 10, //刻度数量 |
|
startAngle: 1, |
|
endAngle: 360, |
|
axisLine: { |
|
show: true, |
|
// 仪表盘刻度线 |
|
lineStyle: { |
|
width: 1, |
|
color: [[1, "red"]], |
|
}, |
|
}, |
|
//仪表盘文字 |
|
axisLabel: { |
|
show: false, |
|
}, //刻度标签。 |
|
axisTick: { |
|
show: true, |
|
splitNumber: 5, |
|
lineStyle: { |
|
color: "#556075", //用颜色渐变函数不起作用 |
|
width: 1, |
|
}, |
|
length: 3, |
|
}, //刻度样式 |
|
splitLine: { |
|
show: true, |
|
length: 5, |
|
lineStyle: { |
|
width: 1, |
|
color: "#979EAA", //用颜色渐变函数不起作用 |
|
}, |
|
}, //分隔线样式 |
|
detail: { |
|
show: false, |
|
}, |
|
pointer: { |
|
show: false, |
|
}, |
|
}, |
|
], |
|
}; |
|
|
|
echartright3; |
|
echartright3Option = { |
|
xAxis: { |
|
type: "category", |
|
data: [ |
|
"10.2", |
|
"10.3", |
|
"10.4", |
|
"10.5", |
|
"10.6", |
|
"10.7", |
|
"10.8", |
|
"10.9", |
|
"10.10", |
|
"10.11", |
|
"10.12", |
|
"10.13", |
|
"10.14", |
|
], |
|
axisLine: { |
|
show: false, |
|
lineStyle: { |
|
color: "#91CCFF", |
|
}, |
|
}, |
|
axisTick: { |
|
//刻度线 |
|
show: false, |
|
}, |
|
inverse: true, |
|
}, |
|
yAxis: { |
|
type: "value", |
|
nameTextStyle: { |
|
color: "#C4E2FC", |
|
}, |
|
splitLine: { |
|
//分割线 |
|
lineStyle: { |
|
color: ["#0f4374"], |
|
width: 2, |
|
}, |
|
}, |
|
axisTick: { |
|
//刻度线 |
|
show: false, |
|
}, |
|
axisLine: { |
|
//轴线 |
|
show: false, |
|
lineStyle: { |
|
color: "#C4E2FC", |
|
}, |
|
}, |
|
}, |
|
tooltip: { |
|
// trigger: 'axis' |
|
}, |
|
series: [ |
|
{ |
|
name: "卸油事件", |
|
data: [23, 54, 53, 12, 55, 66, 24, 46, 37, 22, 35, 85, 33], |
|
type: "bar", |
|
itemStyle: { |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "#00BAFF", // 0% 处的颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
}, |
|
barWidth: "25%", |
|
}, |
|
{ |
|
name: "卸油事件", |
|
data: [23, 54, 53, 12, 55, 66, 24, 46, 37, 22, 35, 85, 33], |
|
type: "line", |
|
symbol: "circle", |
|
symbolSize: 5, |
|
color: "#FFFFA9", |
|
label: { |
|
show: false, |
|
}, |
|
itemStyle: { |
|
color: "#fff", |
|
shadowColor: "#fff", |
|
shadowBlur: 10, |
|
}, |
|
lineStyle: { |
|
color: "#FFFFA9", |
|
width: 1, |
|
}, |
|
}, |
|
], |
|
grid: { |
|
left: "50px", |
|
right: "30px", |
|
bottom: "38px", |
|
top: "10px", |
|
}, |
|
}; |
|
|
|
initEcharts() { |
|
let echartleft1 = document.getElementById("echartleft1"); |
|
this.echartleft1 = echarts.init(echartleft1); |
|
this.echartleft1Option && |
|
this.echartleft1.setOption(this.echartleft1Option); |
|
let echartleft2 = document.getElementById("echartleft2"); |
|
this.echartleft2 = echarts.init(echartleft2); |
|
this.echartleft2Option && |
|
this.echartleft2.setOption(this.echartleft2Option); |
|
let echartleft3 = document.getElementById("echartleft3"); |
|
this.echartleft3 = echarts.init(echartleft3); |
|
this.echartleft3Option && |
|
this.echartleft3.setOption(this.echartleft3Option); |
|
let echartright1 = document.getElementById("echartright1"); |
|
this.echartright1 = echarts.init(echartright1); |
|
this.echartright1Option && |
|
this.echartright1.setOption(this.echartright1Option); |
|
let echartright2 = document.getElementById("echartright2"); |
|
this.echartright2 = echarts.init(echartright2); |
|
this.echartright2Option && |
|
this.echartright2.setOption(this.echartright2Option); |
|
let echartright3 = document.getElementById("echartright3"); |
|
this.echartright3 = echarts.init(echartright3); |
|
this.echartright3Option && |
|
this.echartright3.setOption(this.echartright3Option); |
|
|
|
window.onresize = () => { |
|
setTimeout(() => { |
|
this.echartleft1.resize(); |
|
this.echartleft2.resize(); |
|
this.echartleft3.resize(); |
|
this.echartright1.resize(); |
|
this.echartright2.resize(); |
|
this.echartright3.resize(); |
|
}, 200); |
|
}; |
|
} |
|
|
|
accessList = [ |
|
{ |
|
name: "油站", |
|
img: "../../../assets/gismap/icon/1.png", |
|
value: 382, |
|
color: "#479FFE", |
|
}, |
|
{ |
|
name: "油库", |
|
img: "../../../assets/gismap/icon/2.png", |
|
value: 64, |
|
color: "#A485FF", |
|
}, |
|
{ |
|
name: "石油化工", |
|
img: "../../../assets/gismap/icon/3.png", |
|
value: 85, |
|
color: "#90FFAD", |
|
}, |
|
{ |
|
name: "企业", |
|
img: "../../../assets/gismap/icon/4.png", |
|
value: 543, |
|
color: "#E5B55B", |
|
}, |
|
]; |
|
|
|
map; |
|
zoom = 5; |
|
|
|
markerList: any = [ |
|
{ |
|
id: 0, |
|
name: "天津", |
|
marker: null, |
|
label: null, |
|
coordinate: [117.42188, 38.14453], |
|
data: { |
|
station: 5, |
|
oilDepot: 5, |
|
chemical: 22, |
|
enterprise: 74, |
|
}, |
|
}, |
|
{ |
|
id: 1, |
|
name: "北京", |
|
marker: null, |
|
label: null, |
|
coordinate: [116.39465, 39.88586], |
|
data: { |
|
station: 9, |
|
oilDepot: 1, |
|
chemical: 1, |
|
enterprise: 116, |
|
}, |
|
}, |
|
{ |
|
id: 2, |
|
name: "上海", |
|
marker: null, |
|
label: null, |
|
coordinate: [121.46759, 31.20392], |
|
data: { |
|
station: 131, |
|
oilDepot: 99, |
|
chemical: 172, |
|
enterprise: 19191, |
|
}, |
|
}, |
|
{ |
|
id: 3, |
|
name: "湖北", |
|
marker: null, |
|
label: null, |
|
coordinate: [112.45605, 30.27832], |
|
data: { |
|
station: 0, |
|
oilDepot: 2, |
|
chemical: 6, |
|
enterprise: 34, |
|
}, |
|
}, |
|
{ |
|
id: 4, |
|
name: "湖南", |
|
marker: null, |
|
label: null, |
|
coordinate: [111.62109, 26.93848], |
|
data: { |
|
station: 30, |
|
oilDepot: 2, |
|
chemical: 3, |
|
enterprise: 44, |
|
}, |
|
}, |
|
{ |
|
id: 5, |
|
name: "广东", |
|
marker: null, |
|
label: null, |
|
coordinate: [113.37891, 22.76367], |
|
data: { |
|
station: 42, |
|
oilDepot: 0, |
|
chemical: 1, |
|
enterprise: 23, |
|
}, |
|
}, |
|
{ |
|
id: 6, |
|
name: "广西", |
|
marker: null, |
|
label: null, |
|
coordinate: [108.76465, 22.71973], |
|
data: { |
|
station: 4, |
|
oilDepot: 5, |
|
chemical: 29, |
|
enterprise: 91, |
|
}, |
|
}, |
|
{ |
|
id: 7, |
|
name: "福建", |
|
marker: null, |
|
label: null, |
|
coordinate: [118.21289, 25.22461], |
|
data: { |
|
station: 108, |
|
oilDepot: 0, |
|
chemical: 0, |
|
enterprise: 0, |
|
}, |
|
}, |
|
]; |
|
|
|
createLabelSContent(list) { |
|
list.forEach((element) => { |
|
let totalString = this.numberProcess(this.sumValues(element.data)); |
|
element.sContent1 = `<div class='markerTotal'> ${totalString} </div>`; |
|
element.sContent2 = "<div class='markerInfoWin'>"; |
|
for (const key in element.data) { |
|
if (Object.prototype.hasOwnProperty.call(element.data, key)) { |
|
const item = element.data[key]; |
|
if (item !== 0) { |
|
switch (key) { |
|
case "station": |
|
element.sContent2 += `<div class='icon icon1'><img src='../../../assets/gismap/gis/1.png' alt=''></div><div class='num'> ${item} </div>`; |
|
break; |
|
|
|
case "oilDepot": |
|
element.sContent2 += `<div class='icon icon2'><img src='../../../assets/gismap/gis/2.png' alt=''></div><div class='num'> ${item} </div>`; |
|
break; |
|
|
|
case "chemical": |
|
element.sContent2 += `<div class='icon icon3'><img src='../../../assets/gismap/gis/3.png' alt=''></div><div class='num'> ${item} </div>`; |
|
break; |
|
|
|
case "enterprise": |
|
element.sContent2 += `<div class='icon icon4'><img src='../../../assets/gismap/gis/4.png' alt=''></div><div class='num'> ${item} </div>`; |
|
break; |
|
|
|
default: |
|
break; |
|
} |
|
} |
|
} |
|
} |
|
element.sContent2 += "</div>"; |
|
}); |
|
} |
|
|
|
selectedMarker = null; |
|
PointOffset1 = [-25, -53]; //markerlabel偏移量 |
|
PointOffset2 = [-28, -65]; |
|
initMap() { |
|
this.map = new T.Map("mapDiv", { |
|
projection: "EPSG:4326", |
|
}); |
|
this.map.centerAndZoom(new T.LngLat(116.2793, 32.95898), this.zoom); |
|
//创建图片对象 |
|
var icon = new T.Icon({ |
|
iconUrl: "../../../assets/gismap/gis/marker.png", |
|
iconSize: new T.Point(25, 44), |
|
iconAnchor: new T.Point(14, 40), |
|
}); |
|
//创建标注对象 |
|
this.markerList.forEach((element) => { |
|
element.marker = new T.Marker( |
|
new T.LngLat(element.coordinate[0], element.coordinate[1]), |
|
{ |
|
icon: icon, |
|
} |
|
); |
|
//向地图上添加标注 |
|
this.map.addOverLay(element.marker); |
|
element.marker.addEventListener("click", (event) => { |
|
this.markerClick(element); |
|
}); |
|
element.label = new T.Label({ |
|
text: element.sContent1, |
|
position: element.marker.getLngLat(), |
|
offset: new T.Point(this.PointOffset1[0], this.PointOffset1[1]), |
|
}); |
|
this.map.addOverLay(element.label); |
|
}); |
|
this.map.addEventListener("click", (e) => { |
|
this.MapClick(e); |
|
}); |
|
} |
|
|
|
//数字加工 , |
|
numberProcess(num) { |
|
if (num.toString().length > 3) { |
|
return num.toLocaleString(); |
|
} |
|
return num.toString(); |
|
} |
|
//对象求和 |
|
sumValues(obj) { |
|
let sum = 0; |
|
|
|
for (let key in obj) { |
|
if (typeof obj[key] === "number") { |
|
sum += obj[key]; |
|
} |
|
} |
|
|
|
return sum; |
|
} |
|
//地图点击事件 |
|
MapClick(e) { |
|
console.log("点击坐标:", e.lnglat.getLng() + "," + e.lnglat.getLat()); |
|
this.markerList.forEach((element) => { |
|
element.label.setLabel(element.sContent1); |
|
element.label.setOffset( |
|
new T.Point(this.PointOffset1[0], this.PointOffset1[1]) |
|
); |
|
}); |
|
} |
|
//标注点 点击事件 |
|
markerClick(item) { |
|
console.log("标注点击", item); |
|
// // this.selectedMarker = element; |
|
// // this.selectedMarker.label.setLabel(""); |
|
this.markerList.forEach((element) => { |
|
element.label.setLabel(element.sContent1); |
|
element.label.setOffset( |
|
new T.Point(this.PointOffset1[0], this.PointOffset1[1]) |
|
); |
|
}); |
|
item.label.setLabel(item.sContent2); |
|
item.label.setOffset( |
|
new T.Point(this.PointOffset2[0], this.PointOffset2[1]) |
|
); |
|
} |
|
urlTo(url) { |
|
window.open(url); |
|
} |
|
aHref(e, url) { |
|
e.preventDefault(); // 阻止默认行为 |
|
let aHrefUnsafe = this.sanitizer.bypassSecurityTrustUrl(url); |
|
// console.log("aHrefUnsafe", aHrefUnsafe); |
|
window.location.href = url; // 执行链接的跳转行为 |
|
} |
|
unitList1 = ["广西有限公司", "重庆有限公司", "柳州有限公司"]; |
|
unitList2 = [ |
|
"芯恩集成电路有限公司", |
|
"盛宏建材科技有限公司", |
|
"高凯斯电子有限公司", |
|
"君晟有限公司", |
|
"昀朗建筑工程有限公司", |
|
"必康有限公司", |
|
]; |
|
isConnectedUnit = false; |
|
handleChildData(e) { |
|
console.log(e); |
|
if (e === "openCardList") { |
|
this.isConnectedUnit = true; |
|
} |
|
if (e === "closeCardList") { |
|
this.isConnectedUnit = false; |
|
} |
|
} |
|
}
|
|
|