feat: 消防管理添加地图

app/src/components/SearchBox.vue

@@ -1,6 +1,7 @@
 <script>
 import { area } from '@/api/area'
 import { getJdjcUnit } from "@/api/index.js";
+import { throttle } from '@zhgkpt/utils'
 
 export default {
   name: "SearchBox",
@@ -32,19 +33,22 @@ export default {
     },
     searchValue: {
       handler(val) {
-        if (val === "") {
+        throttle(() => {
+          if (val === "") {
           this.result = []
           return;
-        }
-        getJdjcUnit({
-        pageNum: 1,
-        pageSize: 10,
-        qx: this.areaValue === "重庆市" ? "" : this.areaValue,
-          gcjzmc: val,
-        }).then((res) => {
-          this.result = res.data.rows;
-          this.total = res.data.total
-        });
+          }
+          getJdjcUnit({
+          pageNum: 1,
+          pageSize: 10,
+          qx: this.areaValue === "重庆市" ? "" : this.areaValue,
+            gcjzmc: val,
+          }).then((res) => {
+            this.result = res.data.rows;
+            this.total = res.data.total
+            this.activeIndex = -1;
+          });
+        })()
       },
     }
   },

app/src/views/Fire/index.vue

@@ -9,8 +9,11 @@
 			</border-panel>
 		</div>
 		<div>
-			<div style="width: 900px; height: 1000px; display: flex;justify-content: center; margin-top: 150px;">
+			<div style="width: 900px; height: 1000px; display: flex;position: relative;justify-content: center; padding-top: 150px;">
 				<MapCharts :qx="qx" @selectArea="area => qx = area" />
+				<div style="position: absolute; width: 500px; top: 10px; left: -20px">
+					<SearchBox :area.sync="qx" />
+				</div>
 			</div>
 		</div>
 		<div>
@@ -30,7 +33,7 @@
 	import Construction from "./components/Construction.vue";
 	import ManagementContent from "./components/ManagementContent.vue";
 	import MapCharts from "../Home/components/MapCharts.vue";
-
+	import SearchBox from '@/components/SearchBox.vue';
 	import {
 		getGlzts,
 		getWbxxs,
@@ -46,7 +49,7 @@
 			Construction,
 			ManagementContent,
 			MapCharts,
-
+			SearchBox
 		},
 		data() {
 			return {
@@ -135,4 +138,4 @@
 	};
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less"></style>

utils/index.js

@@ -40,3 +40,28 @@ export function getState(bn, tq) {
     return 0;
   }
 }
+
+
+export const throttle = (func, wait = 1000, type = 1) => {
+	let previous = 0;
+	let timeout;
+	return function () {
+		let context = this;
+		let args = arguments;
+		if (type === 1) {
+			let now = Date.now();
+
+			if (now - previous > wait) {
+				func.apply(context, args);
+				previous = now;
+			}
+		} else if (type === 2) {
+			if (!timeout) {
+				timeout = setTimeout(() => {
+					timeout = null;
+					func.apply(context, args)
+				}, wait)
+			}
+		}
+	}
+}