+
@@ -26,8 +26,7 @@
-
-
+
@@ -43,14 +42,14 @@
+
+ (click)="urlTo('http://121.36.37.70:8906/records_nav/oliunloadinglist?singleSignOn=true')">
diff --git a/src/app/pages/gis-home/gis-home.component.ts b/src/app/pages/gis-home/gis-home.component.ts
index 9565547..f8fd9c3 100644
--- a/src/app/pages/gis-home/gis-home.component.ts
+++ b/src/app/pages/gis-home/gis-home.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
import * as echarts from "echarts";
declare var T: any;
@Component({
@@ -7,29 +8,32 @@ declare var T: any;
styleUrls: ["./gis-home.component.scss"],
})
export class GisHomeComponent implements OnInit {
- constructor() {}
+ 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: 1235, name: "现场处置方案" },
- { value: 1852, name: "应急处置卡" },
+ { value: 3152, name: "现场处置方案" },
+ { value: 5421, name: "应急处置卡" },
{ value: 1735, name: "应急预案" },
{ value: 1258, name: "类型预案" },
- { value: 600, name: "I-V级预案" },
+ { value: 19150, name: "I-V级预案" },
];
echartleft1Option = {
tooltip: {
trigger: "item",
},
title: {
- text: "9,333",
+ text: "33,611",
subtext: "预案总数",
left: "28.5%",
x: "center",
@@ -227,17 +231,17 @@ export class GisHomeComponent implements OnInit {
};
echartleft2;
echartleft2Data = [
- { value: 3523, name: "综合演练" },
- { value: 2560, name: "跨区域演练" },
+ { value: 345, name: "综合演练" },
+ { value: 21, name: "跨区域演练" },
{ value: 853, name: "单项演练" },
- { value: 1237, name: "研究性演练" },
+ { value: 12, name: "研究性演练" },
];
echartleft2Option = {
tooltip: {
trigger: "item",
},
title: {
- text: "8,173",
+ text: "1,231",
subtext: "演练总数",
left: "28.5%",
x: "center",
@@ -445,7 +449,7 @@ export class GisHomeComponent implements OnInit {
trigger: "item",
},
title: {
- text: "9,173",
+ text: "8,173",
subtext: "隐患总数",
left: "28.5%",
x: "center",
@@ -1133,17 +1137,157 @@ export class GisHomeComponent implements OnInit {
map;
zoom = 5;
- markerList = [
- { marker: null, coordinate: [98.56934, 38.93555] },
- { marker: null, coordinate: [97.0752, 32.95898] },
- { marker: null, coordinate: [103.88672, 22.89551] },
- { marker: null, coordinate: [108.41309, 29.79492] },
+ 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 = `
";
- // infoWin1.setContent(sContent);
- // let infoWin1 = new T.InfoWindow(sContent, {
- // closeButton: false,
- // });
- // element.marker.openInfoWindow(infoWin1);s
- let label = new T.Label({
- text: sContent,
+ element.marker.addEventListener("click", (event) => {
+ this.markerClick(element);
+ });
+ element.label = new T.Label({
+ text: element.sContent1,
position: element.marker.getLngLat(),
- offset: new T.Point(-28, -65),
+ offset: new T.Point(this.PointOffset1[0], this.PointOffset1[1]),
});
- this.map.addOverLay(label);
+ 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 = [
"芯恩集成电路有限公司",
diff --git a/src/app/pages/gis-home/unit-title/unit-title.component.html b/src/app/pages/gis-home/unit-title/unit-title.component.html
index 3848ec9..03c3643 100644
--- a/src/app/pages/gis-home/unit-title/unit-title.component.html
+++ b/src/app/pages/gis-home/unit-title/unit-title.component.html
@@ -2,5 +2,5 @@
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index bfa982d..cf59c3e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -400,9 +400,7 @@ ul {
.markerInfoWin {
position: absolute;
- left: 50%;
- top: 50%;
- z-index: 500;
+ z-index: 999;
display: flex;
overflow: hidden;
border-radius: 4px;
@@ -446,8 +444,27 @@ ul {
}
.num {
height: 36px;
- width: 40px;
+ // width: 40px;
+ box-sizing: border-box;
+ padding: 0 13px;
font-size: 16px;
background: RGBA(44, 60, 103, 0.9);
}
}
+.markerTotal {
+ color: #00f6ff;
+ border: 1px solid #43b0d5;
+ background: rgba(67, 86, 91, 0.8);
+ position: absolute;
+ left: 50%;
+ z-index: 100;
+ top: 50%;
+ font-size: 15px;
+ line-height: 25px;
+ box-sizing: border-box;
+ padding: 0px 5px;
+ border-radius: 3px;
+}
+.tdt-marker-pane {
+ z-index: 399 !important;
+}
${totalString}
`;
+ element.sContent2 = "";
+ 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 += `
";
+ });
+ }
+
+ 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(107.79785, 35.77148), this.zoom);
+ this.map.centerAndZoom(new T.LngLat(116.2793, 32.95898), this.zoom);
//创建图片对象
var icon = new T.Icon({
iconUrl: "../../../assets/gismap/gis/marker.png",
@@ -1160,34 +1304,75 @@ export class GisHomeComponent implements OnInit {
);
//向地图上添加标注
this.map.addOverLay(element.marker);
-
- let sContent =
- " ${item}
`;
+ break;
+
+ case "oilDepot":
+ element.sContent2 += ` ${item}
`;
+ break;
+
+ case "chemical":
+ element.sContent2 += ` ${item}
`;
+ break;
+
+ case "enterprise":
+ element.sContent2 += ` ${item}
`;
+ break;
+
+ default:
+ break;
+ }
+ }
+ }
+ }
+ element.sContent2 += " 36
36
36
36
截至{{time}} , 已接入单位数 :
-
+
{{item}}
家