feat: 其他页面配色以及数据修改

app/src/views/Basic/index.vue

@@ -52,7 +52,8 @@
           padding-top: 150px;
         "
       >
-        <MapCharts
+        <MapCharts 
+          :legend="legendData"
           :formatter="showLabel"
           :mapHeatData="heatMap"
           :qx="qy"
@@ -89,11 +90,12 @@ import Regional from "./components/Regional.vue";
 import BuildingStatistics from "./components/BuildingStatistics.vue";
 import HeightDistribution from "./components/HeightDistribution.vue";
 import ChronologicDistributionStatistics from "./components/ChronologicDistributionStatistics.vue";
-import MapCharts from "../Home/components/MapCharts.vue";
+import MapCharts from "../Home/components/NewMapChartsCategory.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import jcxxCont from "./components/jcxxCont.vue";
 
-import { toFirst, formatCityData, createMapChartWindowInfo } from "../../utils";
+import { loadMapData } from '@/shared'
+import { toFirst, createMapChartWindowInfo } from "../../utils";
 import {
   getJztj,
   getQyfbList,
@@ -126,6 +128,7 @@ export default {
       gcjztjList: [],
       gdfbtjList: [],
       heatMap: [],
+      legendData: [],
       flagVal: 1,
     };
   },
@@ -141,7 +144,7 @@ export default {
           title: params.name,
         },
         () =>
-          `高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`
+          `高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.data.meta.sl}</span>栋`
       );
     },
     openBasicModal(val) {
@@ -192,19 +195,10 @@ export default {
       }).then((res) => {
         this.gdfbtjList = res.data.rows;
       });
-      getQyfbList({
-        pageSize: 1000,
-        pageNum: 1,
-      }).then((res) => {
-        let lists = res.data.rows;
-        this.heatMap = formatCityData(
-          lists.map((item) => ({
-            name: item.qx,
-            value: item.zs,
-          }))
-        );
-        console.log(res.data.rows, this.heatMap);
-      });
+      loadMapData('GCJZ').then(res => {
+        this.heatMap = res.heatMap
+        this.legendData = res.legendData
+      })
     },
   },
   created() {

app/src/views/Fire/index.vue

@@ -11,7 +11,9 @@
 		<div>
 			<div style="width: 900px; height: 1000px; display: flex;position: relative;justify-content: center; padding-top: 150px;">
 				<MapCharts 
-          :mapHeatData="heatMap" :formatter="showLabel"  :qx="qx" @selectArea="area => qx = area" />
+          :mapHeatData="heatMap"
+					:legend="legendData"
+					:formatter="showLabel"  :qx="qx" @selectArea="area => qx = area" />
 				<div style="position: absolute; width: 500px; top: 10px; left: -20px">
 					<SearchBox :area.sync="qx" />
 				</div>
@@ -32,8 +34,9 @@
 	import UnitInfo from "./components/UnitInfo.vue";
 	import Construction from "./components/Construction.vue";
 	import ManagementContent from "./components/ManagementContent.vue";
-	import MapCharts from "../Home/components/MapCharts.vue";
+	import MapCharts from "../Home/components/NewMapChartsCategory.vue";
 	import SearchBox from '@/components/SearchBox.vue';
+import { loadMapData } from '@/shared'
 	import {
 		getGlzts,
 		getWbxxs,
@@ -41,10 +44,7 @@
 		getJzrzdwpms,
 		getWbdwgljzpm,
 	} from "@/api/management.js";
-	import {
-  getQyfbList
-} from "@/api/basicInfor.js";
-import { formatCityData, createMapChartWindowInfo } from "../../utils";
+import {  createMapChartWindowInfo } from "../../utils";
 	export default {
 		name: "FirePage",
 		components: {
@@ -64,6 +64,7 @@ import { formatCityData, createMapChartWindowInfo } from "../../utils";
 				ZjglList: [],
 				wbdwList: [],
 				heatMap: [],
+				legendData: [],
 				qx: "重庆市",
 				params: {
 					pageSize: 100,
@@ -72,7 +73,7 @@ import { formatCityData, createMapChartWindowInfo } from "../../utils";
 				
 				showLabel(params) {
 					return createMapChartWindowInfo({ title: params.name }, () =>
-					`高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`
+					`高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.data.meta.sl}</span>栋`
 					);
 				},
 			};
@@ -115,19 +116,10 @@ import { formatCityData, createMapChartWindowInfo } from "../../utils";
 				});
 			},
 			loadMapData() {
-				getQyfbList({
-        pageSize: 1000,
-        pageNum: 1,
-				}).then((res) => {
-					let lists = res.data.rows;
-					this.heatMap = formatCityData(
-						lists.map((item) => ({
-							name: item.qx,
-							value: item.zs,
-						}))
-					);
-					console.log(res.data.rows, this.heatMap);
-				});
+				loadMapData('GCJZ').then(res => {
+					this.heatMap = res.heatMap
+					this.legendData = res.legendData
+				})
 			},
 			// 维保形式
 			getWbxsList() {

app/src/views/FireCondition/index.vue

@@ -19,7 +19,7 @@
 		<div>
 			<div>
 				<div style="width: 910px; display: flex; position: relative;">
-					<MapCharts :mapHeatData="heatMap" :formatter="showLabel" :qx="qx" @selectArea="area => qx = area" />
+					<MapCharts  :legend="legendData" :mapHeatData="heatMap" :formatter="showLabel" :qx="qx" @selectArea="area => qx = area" />
 					<div style="position: absolute;width: 500px; left: 10px;top: 10px;">
 						<search-box :area.sync="qx" />
 					</div>
@@ -60,15 +60,10 @@
 	import FireHistory from './components/FireHistory.vue'
 	import FireTime from './components/FireTime.vue'
 	import SearchBox from '@/components/SearchBox.vue';
-	import MapCharts from "../Home/components/MapCharts.vue";
+	import MapCharts from "../Home/components/NewMapChartsCategory.vue";
 	import hzfxCont from "./components/hzfxCont.vue";
 	import hzfbCont from "./components/hzfbCont.vue";
-	import {
-		fireDistribution
-	} from '@/api/hzfx'
-	import {
-		formatCityData
-	} from '../../utils'
+	import { loadMapData, createInfoWindow } from '@/shared'
 	export default {
 		name: "FireCondition",
 		components: {
@@ -90,6 +85,7 @@
 				qx: '重庆市',
 				type: 1,
 				heatMap: [],
+				legendData: [],
 				fireIndexType: 0
 			}
 		},
@@ -104,9 +100,7 @@
 				this.fireIndexType = idx
 			},
 			showLabel(params) {
-				let res = params.name + "<br/>";
-				res += `本年火灾起数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
-				return res;
+				return createInfoWindow('HZQSN', params);
 			},
 			change(e) {
 				this.qx = e.target.value
@@ -119,15 +113,9 @@
 				this.showModal("basicInfoModal");
 			},
 			loadData() {
-				fireDistribution({
-					pageNum: 1,
-					pageSize: 100
-				}).then(res => {
-					const data = res.data.rows
-					this.heatMap = formatCityData(data.map(item => ({
-						name: item.qx,
-						value: item.bnhzqs
-					})))
+				loadMapData('HZQSN').then(res => {
+					this.heatMap = res.heatMap
+					this.legendData = res.legendData
 				})
 			},
 			opemFries() {

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

@@ -54,7 +54,7 @@ export default {
     },
     right: {
       type: Number,
-      default: 50
+      default: 10
     },
     legend: {
       type: Array,

app/src/views/Home/index.vue

@@ -48,7 +48,7 @@
         </div>
         <div class="tips" @click="getShoeInfo('smsMsgModal')">提示</div>
         <div class="title" v-if="selectMapType !== 'DEFAULT'">
-          <div class="back-btn" @click="reloadMap('DEFAULT')">{{ '<' }}</div>
+          <div class="back-btn" @click="reloadMap('DEFAULT')"></div>
           <div class="select-title">{{selectMapTitle}}</div>
         </div>
       </div>
@@ -143,7 +143,6 @@ import BasicInfoModalContent from "./components/BasicInfoModalContent.vue";
 import SearchBox from "@/components/SearchBox.vue";
 import zzglModul from "./components/zzglModul.vue";
 import { getSxzbListToatl,getFhzdType } from "@/api/index.js";
-import { getSxzbListToatl } from "@/api/index.js";
 
 import {
   totaldata,
@@ -297,12 +296,6 @@ export default {
             this.riskList = res.data.rows;
           }
         })
-        .catch((error) => {
-          this.$message({
-            message: res.data.msg,
-            type: "error",
-          });
-        });
     },
     selectItemHandler(idx) {
       this.fireIndexType = idx;
@@ -455,11 +448,21 @@ export default {
   cursor: pointer;
   display: flex;
   align-items: center;
-  font-size: 20px;
+  width: 319px;
+  height: 40px;
+  background: url('../../assets/images/home-title-bg.png') no-repeat;
+  background-size: 100% 100%;
   .back-btn {
+    width: 10.36px;
+    height: 18.67px;
+    background: url('../../assets/images/left-back-btn.png') no-repeat;
+    background-size: 100% 100%;
+    object-fit: cover;
     margin-right: 10px;
   }
   .select-title {
+  font-size: 16px;
+    color: #44F1FF;
   }
 }
 </style>

app/src/views/Iot/index.vue

@@ -33,9 +33,10 @@
       <MapCharts
         :formatter="showLabel"
         :mapHeatData="heatMap"
+        :legend="legendData"
         :qx="qx"
-        @selectArea="(area) => (qx = area)"
         :right="80"
+        @selectArea="(area) => (qx = area)"
       />
       <div style="position: absolute; width: 500px; left: 90px; top: 10px">
         <SearchBox :area.sync="qx" />
@@ -75,19 +76,16 @@ import TotalityInfo from "./components/TotalityInfo.vue";
 import IotVideo from "./components/IotVideo.vue";
 import AlarmHandling from "./components/AlarmHandling.vue";
 import RegionalDistribution from "./components/RegionalDistribution.vue";
-import MapCharts from "../Home/components/MapCharts.vue";
+import MapCharts from "../Home/components/NewMapChartsCategory.vue";
 import SearchBox from "../../components/SearchBox.vue";
 import xfwlw from "./components/xfwlw.vue";
 import fxfbCont from "./components/fxfbCont.vue";
+import { loadMapData } from '@/shared'
 import {
   getZtqk,
-  getZtqkDwtj,
-  getGqcz,
-  getDeviceList,
-  getChartMapData,
+  getZtqkDwtj
 } from "@/api/iot.js";
-import { formatCityData, createMapChartWindowInfo } from "../../utils";
-import { getCameraUrls } from "@/api/camera";
+import { createMapChartWindowInfo } from "../../utils";
 
 export default {
   name: "IotPage",
@@ -109,6 +107,7 @@ export default {
       caremaData: [],
       caremaList: [],
       heatMap: [],
+      legendData: []
     };
   },
   watch: {
@@ -135,20 +134,11 @@ export default {
     },
   },
   methods: {
-    selectData(val) {
-      console.log("---------", val);
-      this.heatMap = formatCityData(
-        val.map((item) => ({
-          name: item[0],
-          value: item[2],
-        }))
-      );
-    },
     showLabel(params) {
       return createMapChartWindowInfo(
         { title: params.name },
         () =>
-          `接入物联网楼栋数 <br/><span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`
+          `接入物联网楼栋数 <br/><span style="font-size: 24px;color:red;font-weight:bold;">${params.data.meta.sl}</span>栋`
       );
     },
     openBasicModal() {
@@ -306,15 +296,10 @@ export default {
       }
     },
     loadIotMapData() {
-      getChartMapData({
-        pageNum: 1,
-        pageSize: 100,
-      }).then((res) => {
-        this.heatMap = res.data.rows.map((item) => ({
-          name: item.qx,
-          value: item.wlwlds || 0,
-        }));
-      });
+      loadMapData('WLWLDS').then(res => {
+        this.heatMap = res.heatMap
+        this.legendData = res.legendData
+      })
     },
   },
   created() {

app/src/views/Risk/index.vue

@@ -32,6 +32,7 @@
         "
       >
         <MapCharts
+        :legend="legendData"
           :mapHeatData="heatMap"
           :formatter="showLabel"
           :qx="qx"
@@ -76,12 +77,13 @@ import Rectification from "./components/Rectification.vue";
 import Riskdistribution from "./components/Riskdistribution.vue";
 import RiskDanger from "./components/RiskDanger.vue";
 import SearchBox from "@/components/SearchBox.vue";
-import MapCharts from "../Home/components/MapChartsCategory.vue";
+import MapCharts from "../Home/components/NewMapChartsCategory.vue";
 import fxyjCont from "./components/fxyjCont.vue";
 import YhModalContent from "../Detail/components/YhModalContent.vue";
 import BasicInfoModalContent from "../Home/components/BasicInfoModalContent.vue";
 import { formatCityData, createMapChartWindowInfo } from "../../utils";
 import { getDtskgzList } from '@/api/index'
+import { loadMapData } from '@/shared'
 export default {
   name: "RiskPage",
   components: {
@@ -101,6 +103,7 @@ export default {
       qx: "重庆市",
       fxyjIdex: 1,
       heatMap: [],
+      legendData: [],
       params: {},
       mapType: {
         "红色": 90,
@@ -162,19 +165,10 @@ export default {
       this.showModal("basicInfoModal");
     },
     loadMapData() {
-      getDtskgzList({
-        pageNum: 1,
-        pageSize: 42,
-      }).then((res) => {
-        let tempData = res.data.rows;
-        this.heatMap = formatCityData(
-          tempData.map((item) => ({
-            name: item.qx,
-            value: this.mapType[item.分区颜色],
-            meta: item
-          }))
-        );
-      });
+      loadMapData('DEFAULT').then(res => {
+        this.heatMap = res.heatMap
+        this.legendData = res.legendData
+      })
     },
   },
 };