perf: 地图弹窗样式格式化

app/src/utils/index.js

@@ -1,4 +1,4 @@
-
+import titleBg from '@/assets/images/map-infowindow-title-bg.png'
 
 /**
  * 
@@ -87,7 +87,9 @@ export function toInt(num) {
     return formatInt(temp, temp.length - 1)
   }
 }
-
+/**
+ * 填充区县数据
+ */
 export const formatCityData = (data) =>  {
   return citys.map(item => {
     let temp = data.find(i => i.name === item)
@@ -97,3 +99,14 @@ export const formatCityData = (data) =>  {
     }
   })
 }
+
+
+export function createMapChartWindowInfo(ctx, render) {
+  return `<div>
+    <div style="background: url('${titleBg}') center center no-repeat;
+    color: #ffb800;font-size: 16px;
+    font-style: normal;
+    font-weight: 400;padding: 5px;">${ctx.title}</div>
+    <div style="padding: 5px;" >${render()}</divs>
+  </div>`;
+}

app/src/views/Basic/index.vue

@@ -53,7 +53,8 @@
 
 	import {
 		toFirst,
-		formatCityData
+		formatCityData,
+    createMapChartWindowInfo
 	} from '../../utils'
 	import {
 		getJztj,
@@ -98,9 +99,9 @@
 		},
 		methods: {
 			showLabel(params) {
-        let res = params.name + "<br/>";
-        res += `高层建筑数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-        return res;
+				return createMapChartWindowInfo({
+					title: params.name
+				}, () => `高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`);
       },
 			openBasicModal(val) {
 				this.flagVal=val

app/src/views/Fire/index.vue

@@ -41,6 +41,7 @@
 		getJzrzdwpms,
 		getWbdwgljzpm,
 	} from "@/api/management.js";
+	import { createMapChartWindowInfo } from "@/utils";
 	export default {
 		name: "FirePage",
 		components: {
@@ -66,9 +67,9 @@
 				},
 				
 				showLabel(params) {
-					let res = params.name + "<br/>";
-					res += `高层建筑数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-					return res;
+					return createMapChartWindowInfo({ title: params.name }, () =>
+					`高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`
+					);
 				},
 			};
 		},

app/src/views/FireCondition/index.vue

@@ -67,7 +67,8 @@
 		fireDistribution
 	} from '@/api/hzfx'
 	import {
-		formatCityData
+		formatCityData,
+		createMapChartWindowInfo
 	} from '../../utils'
 	export default {
 		name: "FireCondition",
@@ -100,9 +101,7 @@
 				this.valNum = val
 			},
 			showLabel(params) {
-				let res = params.name + "<br/>";
-				res += `本年火灾起数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-				return res;
+				return createMapChartWindowInfo({ title: params.name }, () => `本年火灾起数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>起`);
 			},
 			change(e) {
 				this.qx = e.target.value

app/src/views/Home/components/MapCharts.vue

@@ -395,12 +395,14 @@ export default {
         tooltip: {
           trigger: "item",
           position: "top",
-          backgroundColor: "rgba(51,204,204,0.8)",
+          backgroundColor: "rgba(0, 0, 0, 0.82)",
           formatter: this.formatter,
           textStyle: {
-            color: "#000",
+            color: "#fff",
           },
-          extraCssText: "z-index: 1000;"
+          extraCssText: `z-index: 1000;margin:0px;padding:0px;
+  border: 1px solid rgba(61, 115, 255, 0.72);`,
+          borderWidth: 0,
         },
         visualMap: {
           show: true,

app/src/views/Home/index.vue

@@ -72,8 +72,9 @@ import zzglModul from "./components/zzglModul.vue";
 import { totaldata,getJqdt,getZxgjtj ,getJrjzsbs} from "@/api/index.js";
 import { fxfb } from "@/api/risk";
 import {
-		formatCityData
-	} from '../../utils'
+		formatCityData,
+    createMapChartWindowInfo
+	} from '@/utils'
 
 export default {
   name: "HomePage",
@@ -115,9 +116,12 @@ export default {
   },
   methods: {
     showLabel(params) {
-      let res = params.name + "<br/>";
-      res += `风险栋数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+     return createMapChartWindowInfo({
+      title: params.name
+     }, () => {
+      let res = `风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`;
       return res;
+     });
     },
     openBasicModal() {
       this.showModal("basicInfoModal");

app/src/views/Iot/index.vue

@@ -80,7 +80,8 @@ import xfwlw from "./components/xfwlw.vue";
 import fxfbCont from "./components/fxfbCont.vue";
 import { getZtqk, getZtqkDwtj, getGqcz, getDeviceList, getChartMapData } from "@/api/iot.js";
 import {
-		formatCityData
+		formatCityData,
+    createMapChartWindowInfo
 	} from '../../utils'
 
 export default {
@@ -137,9 +138,7 @@ export default {
       })))
     },
     showLabel(params) {
-      let res = params.name + "<br/>";
-      res += `接入物联网楼栋数<br/><span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-      return res;
+      return createMapChartWindowInfo({ title: params.name }, () => `接入物联网楼栋数 <br/><span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`);
     },
     openBasicModal() {
       this.showModal("basicInfoModal");

app/src/views/Risk/index.vue

@@ -49,7 +49,8 @@
 	import MapCharts from "../Home/components/MapCharts.vue";
 	import fxyjCont from "./components/fxyjCont.vue";
 	import {
-		formatCityData
+		formatCityData,
+		createMapChartWindowInfo
 	} from '../../utils'
 
 	export default {
@@ -73,9 +74,7 @@
 		},
 		methods: {
 			showLabel(params) {
-				let res = params.name + "<br/>";
-				res += `风险栋数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-				return res;
+				return createMapChartWindowInfo({ title: params.name  }, () => `风险栋数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`);
 			},
 			openBasicModal(val) {
 				this.fxyjIdex = val;
@@ -91,4 +90,4 @@
 	};
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

components/BasicModal/index.vue

@@ -60,7 +60,7 @@ export default {
   background: none;
   color: #fff;
   .el-dialog__header {
-    background-color: rgba(0, 102, 255, 0.26);
+    background-color: #012669ee;
     color: #fff;
     height: 60px;
     box-sizing: border-box;
@@ -83,9 +83,12 @@ export default {
     }
   }
 
+  .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
+    background-color: rgba(255, 0, 0, .6);
+  }
   .el-dialog__body {
     color: #fff;
-    background-color: rgba(3, 18, 57, 0.78);
+    background-color: rgba(3, 18, 57, 0.9);
   }
 }
 </style>