feat: 火宅分析地图数据对接

app/src/utils/index.js

@@ -22,3 +22,56 @@ export function toFirst(array, qx, field) {
   }
   return array;
 }
+
+
+
+const citys = [
+  "万州区",
+  "涪陵区",
+  "渝中区",
+  "大渡口区",
+  "江北区",
+  "沙坪坝区",
+  "九龙坡区",
+  "南岸区",
+  "北碚区",
+  "綦江区",
+  "大足区",
+  "渝北区",
+  "巴南区",
+  "黔江区",
+  "长寿区",
+  "江津区",
+  "合川区",
+  "永川区",
+  "南川区",
+  "璧山区",
+  "铜梁区",
+  "潼南区",
+  "荣昌区",
+  "开州区",
+  "梁平区",
+  "武隆区",
+  "城口县",
+  "丰都县",
+  "垫江县",
+  "忠县",
+  "云阳县",
+  "奉节县",
+  "巫山县",
+  "巫溪县",
+  "石柱县",
+  "秀山县",
+  "酉阳县",
+  "彭水县"
+]
+
+export const formatCityData = (data) =>  {
+  return citys.map(item => {
+    let temp = data.find(i => i.name === item)
+    return temp ? temp : {
+      name: item,
+      value: 0
+    }
+  })
+}

app/src/views/Basic/index.vue

@@ -52,7 +52,8 @@
 	import jcxxCont from "./components/jcxxCont.vue";
 
 	import {
-		toFirst
+		toFirst,
+		formatCityData
 	} from '../../utils'
 	import {
 		getJztj,
@@ -98,7 +99,7 @@
 		methods: {
 			showLabel(params) {
         let res = params.name + "<br/>";
-        res += `高层建筑数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value || 0}</span>个`;
+        res += `高层建筑数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
         return res;
       },
 			openBasicModal(val) {
@@ -157,10 +158,10 @@
 					pageNum: 1
 				}).then((res) => {
 					let lists=res.data.rows
-					this.heatMap = lists.map(item => ({
+					this.heatMap = formatCityData(lists.map(item => ({
 						name: item.qx,
 						value: item.zs
-					}))
+					})))
 					console.log(res.data.rows ,this.heatMap)
 				});
 			},

app/src/views/FireCondition/index.vue

@@ -14,7 +14,7 @@
 		<div>
 			<div>
 				<div style="width: 910px; display: flex; position: relative;">
-					<MapCharts :formatter="showLabel"  :qx="qx" @selectArea="area => qx = area" />
+					<MapCharts :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>
@@ -41,7 +41,6 @@
 		<basic-modal top="120px" ref="basicInfoModal" name="火灾分析">
 			<hzfxCont :qx="qx" /> 
 		</basic-modal>
-		
 	</div>
 </template>
 <script>
@@ -54,8 +53,10 @@
 	import SearchBox from '@/components/SearchBox.vue';
 	import MapCharts from "../Home/components/MapCharts.vue";
 	import hzfxCont from './components/hzfxCont.vue';
-
-
+	import { fireDistribution } from '@/api/hzfx'
+	import {
+		formatCityData
+	} from '../../utils'
 	export default {
 		name: "FireCondition",
 		components: {
@@ -72,13 +73,17 @@
 		data() {
 			return {
 				qx: '重庆市',
-				type: 1
+				type: 1,
+				heatMap: []
 			}
 		},
+		created() {
+			this.loadData()
+		},
 		methods: {
 			showLabel(params) {
         let res = params.name + "<br/>";
-        res += `火灾起数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
+        res += `本年火灾起数<span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
         return res;
       },
 			change(e) {
@@ -90,7 +95,18 @@
 			openBasicModal() {
 				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
+					})))
+				})
+			}
 		}
 	};
 </script>

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

@@ -10,7 +10,10 @@ export default {
   name: "MapCharts",
   props: {
     qx: String,
-    mapHeatData: [],
+    mapHeatData: {
+      type: Array,
+      default: () => []
+    },
     formatter: {
       type: Function,
       default: function (params) {
@@ -343,33 +346,34 @@ export default {
       let data = this.heatData.map(item => ({...item, label: {
         color: item.value > 100 ? '#fff' : '#000'
       }}));
-      data.push({
-        name: '彭水县',
-        value: 0,
-        label: {
-          color:  '#000'
-        }
-      }, {
-        name: '石柱县',
-        value: 0,
-        label: {
-          color:  '#000'
-        }
-      },
-      {
-        name: '酉阳县',
-        value: 0,
-        label: {
-          color:  '#000'
-        }
-      },{
-        name: '秀山县',
-        value: 0,
-        label: {
-          color:  '#000'
-        }
-      }
-      )
+      console.log(data)
+      // data.push({
+      //   name: '彭水县',
+      //   value: 0,
+      //   label: {
+      //     color:  '#000'
+      //   }
+      // }, {
+      //   name: '石柱县',
+      //   value: 0,
+      //   label: {
+      //     color:  '#000'
+      //   }
+      // },
+      // {
+      //   name: '酉阳县',
+      //   value: 0,
+      //   label: {
+      //     color:  '#000'
+      //   }
+      // },{
+      //   name: '秀山县',
+      //   value: 0,
+      //   label: {
+      //     color:  '#000'
+      //   }
+      // }
+      // )
 
       let convertedData = [
         this.convertData(data),

utils/index.js

@@ -65,3 +65,4 @@ export const throttle = (func, wait = 1000, type = 1) => {
 		}
 	}
 }
+