From f51a317a708f7ace0560d639db1da3414713ea0e Mon Sep 17 00:00:00 2001
From: Sjh <55341701@qq.com>
Date: Sat, 4 Nov 2023 16:51:59 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]gishome=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../pages/gis-home/gis-home.component.html | 9 +-
.../pages/gis-home/gis-home.component.scss | 23 +-
src/app/pages/gis-home/gis-home.component.ts | 868 +++++++++++++++++-
3 files changed, 890 insertions(+), 10 deletions(-)
diff --git a/src/app/pages/gis-home/gis-home.component.html b/src/app/pages/gis-home/gis-home.component.html
index ca1677e..3e86fe2 100644
--- a/src/app/pages/gis-home/gis-home.component.html
+++ b/src/app/pages/gis-home/gis-home.component.html
@@ -13,14 +13,14 @@
@@ -44,13 +44,14 @@
diff --git a/src/app/pages/gis-home/gis-home.component.scss b/src/app/pages/gis-home/gis-home.component.scss
index 5515c9f..2c07209 100644
--- a/src/app/pages/gis-home/gis-home.component.scss
+++ b/src/app/pages/gis-home/gis-home.component.scss
@@ -59,10 +59,10 @@
height: 25%;
}
.right2 {
- height: 36%;
+ height: 34%;
}
.right3 {
- height: 36%;
+ height: 38%;
}
}
@@ -77,6 +77,7 @@
flex-direction: column;
.content {
flex: 1;
+ position: relative;
}
}
@@ -116,7 +117,23 @@
}
}
-#echartleft1 {
+#echartleft1,
+#echartleft2,
+#echartleft3,
+#echartright1 {
width: 100%;
height: 100%;
}
+
+#echartright2 {
+ width: 100%;
+ height: 60%;
+}
+
+#echartright3 {
+ width: 100%;
+ height: 45%;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
diff --git a/src/app/pages/gis-home/gis-home.component.ts b/src/app/pages/gis-home/gis-home.component.ts
index 6cf16c1..15a087e 100644
--- a/src/app/pages/gis-home/gis-home.component.ts
+++ b/src/app/pages/gis-home/gis-home.component.ts
@@ -15,7 +15,6 @@ export class GisHomeComponent implements OnInit {
}
echartleft1;
-
echartleft1Data = [
{ value: 1312, name: "综合应急预案" },
{ value: 1583, name: "专项应急预案" },
@@ -140,23 +139,886 @@ export class GisHomeComponent implements OnInit {
},
data: [
{
- value: 1,
+ 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: 3523, name: "综合演练" },
+ { value: 2560, name: "跨区域演练" },
+ { value: 853, name: "单项演练" },
+ { value: 1237, name: "研究性演练" },
+ ];
+ echartleft2Option = {
+ 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.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: "9,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: 12,
+ 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,
+ },
+ ],
+ };
+
+ 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);
}
accessList = [