地图傻点

app/src/api/jqdt.js

@@ -79,4 +79,13 @@ export function getFxyhxx(params) {
 		methods: 'get',
 		params
 	})
+}
+
+// 获取警情着火点 
+export function getZhd(params) {
+	return request({
+		url: '/system/jqxx/detail',
+		methods: 'get',
+		params
+	})
 }

app/src/api/map.js

@@ -0,0 +1,10 @@
+import { request } from "@zhgkpt/utils";
+
+// 着火点附近资源
+export function getZy(params) {
+  return request({
+    url: "/system/ddzcjdwb/jdjc/geo",
+    methods: "get",
+    params,
+  });
+}

app/src/components/Map.vue

@@ -35,42 +35,43 @@ import mapIconCamera from "../assets/images/map-icon-camera.png";
 import mapIconMicstation from "../assets/images/map-icon-micstation.png";
 import mapIconStation from "../assets/images/map-icon-119.png";
 import mapIconFire from "../assets/images/map-icon-fire.png";
-
+import { getZy } from "@/api/map.js";
 export default {
   name: "MapContainer",
   components: {},
   data() {
     return {
+      radius: 500,
       center: [],
       markers: [],
       firePoint: null,
       icons: {
-        build: {
+        jzKey: {
           image: mapIconBuild,
           size: [43, 60],
           imageSize: [43, 60],
         },
-        pressure: {
+        waterKey: {
           image: mapIconPressure,
           size: [43, 60],
           imageSize: [43, 60],
         },
-        car: {
+        xfcKey: {
           image: mapIconCar,
           size: [70, 46],
           imageSize: [70, 46],
         },
-        camera: {
+        lldKey: {
           image: mapIconCamera,
           size: [69, 69],
           imageSize: [69, 69],
         },
-        micstation: {
+        xfzKey: {
           image: mapIconMicstation,
           size: [99, 107],
           imageSize: [99, 107],
         },
-        station: {
+        jgKey: {
           image: mapIconStation,
           size: [99, 107],
           imageSize: [99, 107],
@@ -83,61 +84,83 @@ export default {
       type: Number,
       default: 1,
     },
+    data: {
+      type: Object,
+      default: null,
+    },
   },
   mounted() {
     this.getData();
   },
   methods: {
-    getData() {
-      console.log(this.id);
+    async getData() {
       // to-do
       // 通过id调用接口获取数据
-      // 地图中心
-      this.center = [105.602725, 37.076636];
-      // 标志物
-      this.markers = [
-        {
-          icon: "build",
-          position: [105.582725, 37.076636],
-          anchor: "bottom-center",
-        },
-        {
-          icon: "pressure",
-          position: [105.612725, 37.06636],
-          anchor: "bottom-center",
-        },
-        {
-          icon: "car",
-          position: [105.602725, 37.079636],
-          anchor: "bottom-center",
-        },
-        {
-          icon: "camera",
-          position: [105.604725, 37.089636],
-          anchor: "bottom-center",
-        },
-        {
-          icon: "micstation",
-          position: [105.605725, 37.069636],
-          anchor: "bottom-center",
-        },
-        {
-          icon: "station",
-          position: [105.606725, 37.079636],
-          anchor: "bottom-center",
-        },
-      ];
       // 着火点
       this.firePoint = {
-        position: [105.602725, 37.076636],
-        buildName: "地矿大厦1栋",
-        depts: ["1楼：存在大量氧气罐", "2楼：存在乙醇、乙丙等可燃物品"],
+        position: [this.data.jd, this.data.wd],
+        buildName: this.data.jzmc,
+        depts: this.data.zl ? this.data.zl.split(",") : [],
       };
 
       if (this.firePoint) {
         this.center = this.firePoint.position;
       }
 
+      // 标志物
+      const markers = [];
+      const res = await getZy({
+        lon: this.data.jd,
+        lat: this.data.wd,
+        mi: this.radius,
+      });
+
+      // console.log(res);
+      if (res.data) {
+        res.data.forEach((p) => {
+          if (p.lon && p.lat) {
+            markers.push({
+              icon: p.type,
+              position: [p.lon, p.lat],
+              anchor: "bottom-center",
+            });
+          }
+        });
+      }
+      this.markers = markers;
+
+      // this.markers = [
+      //   {
+      //     icon: "jzKey",
+      //     position: [106.43885760313785, 29.829438307353094],
+      //     anchor: "bottom-center",
+      //   },
+      //   {
+      //     icon: "waterKey",
+      //     position: [105.612725, 37.06636],
+      //     anchor: "bottom-center",
+      //   },
+      //   {
+      //     icon: "xfcKey",
+      //     position: [105.602725, 37.079636],
+      //     anchor: "bottom-center",
+      //   },
+      //   {
+      //     icon: "lldKey",
+      //     position: [105.604725, 37.089636],
+      //     anchor: "bottom-center",
+      //   },
+      //   {
+      //     icon: "xfzKey",
+      //     position: [105.605725, 37.069636],
+      //     anchor: "bottom-center",
+      //   },
+      //   {
+      //     icon: "jgKey",
+      //     position: [105.606725, 37.079636],
+      //     anchor: "bottom-center",
+      //   },
+      // ];
       this.initMap();
     },
     initMap() {
@@ -150,15 +173,18 @@ export default {
           this.map = new AMap.Map("map-container", {
             //设置地图容器id
             // viewMode: "3D", //是否为3D地图模式
-            zoom: 15, //初始化地图级别
+            zoom: 17, //初始化地图级别
             center: this.center, //初始化地图中心点位置
             mapStyle: "amap://styles/grey",
           });
 
+          // console.log(this.markers)
+
           // 设置覆盖物
           if (this.markers && this.markers.length > 0) {
-            this.markers.forEach((p) => {
-              const icon = this.icons[p.icon];
+            const markers = [];
+            this.markers.forEach((p, i) => {
+              const icon = JSON.parse(JSON.stringify(this.icons[p.icon]));
               icon.size = new AMap.Size(icon.size[0], icon.size[1]);
               icon.imageSize = new AMap.Size(
                 icon.imageSize[0],
@@ -166,14 +192,18 @@ export default {
               );
               p.icon = new AMap.Icon(icon);
               var marker = new AMap.Marker(p);
-              this.map.add(marker);
+              // // this.map.add(marker);
+              markers.push(marker);
             });
+            this.map.add(markers);
           }
 
           // 设置着火点
           if (this.firePoint) {
             this.addFirePoint();
           }
+
+          this.map.setFitView();
         })
         .catch((e) => {
           console.log(e);
@@ -201,7 +231,7 @@ export default {
           this.firePoint.position[0],
           this.firePoint.position[1]
         ), // 圆心位置
-        radius: 800, // 半径
+        radius: this.radius, // 半径
         strokeColor: "rgba(255, 0, 61)", // 线颜色
         strokeOpacity: 0.6, // 线透明度
         strokeWeight: 1, // 线粗细度
@@ -233,6 +263,17 @@ export default {
       this.map.clearInfoWindow();
     },
   },
+  watch: {
+    data: {
+      handler() {
+        if (this.map) {
+          this.map.clearInfoWindow();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
 };
 </script>
 
@@ -245,7 +286,7 @@ export default {
     width: 100%;
     height: 100%;
     padding: 0;
-    margin: 0;  
+    margin: 0;
     background-color: #070b13 !important;
     background-image: none;
   }

app/src/views/PoliceSituation/index.vue

@@ -1,164 +1,207 @@
 <template>
-	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
-		<div>
-			<border-panel height="350px" width="540px" style="margin-bottom: 6px" :headerType="3" title="报警信息">
-				<Alaem :list="bjxxList" v-if="bjxxList && bjxxList.length > 0" @callback="callback" :pId="pId" />
-			</border-panel>
-			<border-panel height="593px" width="540px" style="margin-bottom: 6px" :headerType="3" title="出动力量">
-				<MobilizeStrength :list="cdxxList" :zlxx="zlxx" :hcws="hcws" />
-			</border-panel>
-		</div>
-		<div style="width: 1000px;"> 
-			<Map :id="1" />
-		</div>
-		<div>
-			<border-panel height="469px" width="540px" style="margin-bottom: 6px" :headerType="3" title="事故单位信息">
-				<UnitInformation :ajxxList="ajxxList" :jzxxList="jzxxList" :wlwsb="wlwsb" />
-			</border-panel>
-			<border-panel height="475px" width="540px" style="margin-bottom: 6px" :headerType="3" title="风险隐患信息">
-				<UnitInfo :fxxxList="fxxxList" :lshzList="lshzList" />
-			</border-panel>
-		</div>
-	</div>
+  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
+    <div>
+      <border-panel
+        height="350px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="报警信息"
+      >
+        <Alaem
+          :list="bjxxList"
+          v-if="bjxxList && bjxxList.length > 0"
+          @callback="callback"
+          :pId="pId"
+        />
+      </border-panel>
+      <border-panel
+        height="593px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="出动力量"
+      >
+        <MobilizeStrength :list="cdxxList" :zlxx="zlxx" :hcws="hcws" />
+      </border-panel>
+    </div>
+    <div style="width: 1000px">
+      <Map :data="mapData" v-if="mapData" />
+    </div>
+    <div>
+      <border-panel
+        height="469px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="事故单位信息"
+      >
+        <UnitInformation
+          :ajxxList="ajxxList"
+          :jzxxList="jzxxList"
+          :wlwsb="wlwsb"
+        />
+      </border-panel>
+      <border-panel
+        height="475px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="风险隐患信息"
+      >
+        <UnitInfo :fxxxList="fxxxList" :lshzList="lshzList" />
+      </border-panel>
+    </div>
+  </div>
 </template>
 <script>
-	import MobilizeStrength from "./components/MobilizeStrength.vue";
-	import Alaem from './components/Alarm.vue';
-	import UnitInformation from './components/UnitInformation.vue';
-	import UnitInfo from './components/UnitInfo.vue';
-	import Map from "@/components/Map.vue";
-	import {
-		getBjxx,
-		geTzl,
-		getCdllxx,
-		getHcws,
-		getAjxx,
-		getJzxx,
-		getWlwsb,
-		getFxyhxx
-	} from '@/api/jqdt.js'
-	export default {
-		name: "Fire",
-		components: {
-			Map,
-			Alaem,
-			MobilizeStrength,
-			UnitInformation,
-			UnitInfo,
-		},
-		data() {
-			return {
-				pId: null,
-				params: {
-					pageSize: 100,
-					pageNum: 1,
-					qy: null,
-					id: null
-				},
-				ajid: '',
-				bjxxList: [], //报警信息
-				cdxxList: [], //出动信息列表
-				zlxx: [], //出动信息总览
-				hcws: [], //火场文书
-				ajxxList: [],
-				jzxxList: {},
-				fxxxList: {},
-				lshzList: [],
-				wlwsb: []
-			};
-		},
-		methods: {
-			getQueryString(name) {
-				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-				var r = window.location.search.substr(1).match(reg);
-				if (r != null) {
-					return unescape(r[2]);
-				}
-				return null;
-			},
-			callback(id) {
-				console.log(id);
-				this.params.id = id;
-				this.getOtherData();
-			},
-			openBasicModal() {
-				this.showModal("basicInfoModal");
-			},
-			getOtherData() {
-				// 出警力量
-				const cdxxId = {
-					ajid: this.params.id
-				}
-				getCdllxx(cdxxId).then(res => {
-					console.log(res);
-					this.cdxxList = res.data.rows
-				})
-				// 出动力量-总览
-				geTzl(this.params).then(res => {
-					console.log(res);
-					this.zlxx = res.data.rows ? res.data.rows[0].zl : ''
-				})
-				// 火场文书
-				const hcwsId = {
-					jqTywysbm: this.params.id
-				}
-				getHcws(hcwsId).then(res => {
-					console.log(res);
-					this.hcws = res.data.rows[0]
-				})
-				// 事故单位信息-案件信息列表
-				getAjxx(this.params).then(res => {
-					console.log(res, 123);
-					this.ajxxList = res.data.rows[0]
-					console.log(this.params.id);
-				})
-				// 事故单位建筑信息
-				const jzxxid = {
-					ajid: this.params.id
-				}
-				getJzxx(jzxxid).then(res => {
-					console.log(res);
-					this.jzxxList = res.data.rows
-				})
-				// 风险隐患信息 
-				const fxyhId = {
-					ajid: this.params.id
-				}
-				getFxyhxx(fxyhId).then(res => {
-					console.log(res);
-					this.fxxxList = res.data.rows && res.data.rows.length > 0 ? res.data.rows[0] : null
-					this.lshzList = res.data.rows
-				})
-				// 物联网设备信息
-				const wlwId = {
-					ajid: this.params.id
-				}
-				getWlwsb(wlwId).then(res => {
-					console.log(res);
-					this.wlwsb = res.data.rows
-				})
-			},
-			getList() {
-				const params1 = {
-					pageSize: 10000,
-					pageNum: 1
-				}
-				getBjxx(params1).then(res => {
-					let list = res.data.rows;
-					if (this.pId) {
-						list = list.filter(p => p.id !== this.pId);
-						list.unshift(res.data.rows.find(p => p.id === this.pId));
-					}
-					this.bjxxList = list;
-				})
-			}
-		},
-		created() {
-			const id = this.getQueryString("id");
-			this.pId = id;
-			this.getList()
-		},
-	};
+import MobilizeStrength from "./components/MobilizeStrength.vue";
+import Alaem from "./components/Alarm.vue";
+import UnitInformation from "./components/UnitInformation.vue";
+import UnitInfo from "./components/UnitInfo.vue";
+import Map from "@/components/Map.vue";
+import {
+  getBjxx,
+  geTzl,
+  getCdllxx,
+  getHcws,
+  getAjxx,
+  getJzxx,
+  getWlwsb,
+  getFxyhxx,
+  getZhd,
+} from "@/api/jqdt.js";
+export default {
+  name: "Fire",
+  components: {
+    Map,
+    Alaem,
+    MobilizeStrength,
+    UnitInformation,
+    UnitInfo,
+  },
+  data() {
+    return {
+      pId: null,
+      params: {
+        pageSize: 100,
+        pageNum: 1,
+        qy: null,
+        id: null,
+      },
+      ajid: "",
+      bjxxList: [], //报警信息
+      cdxxList: [], //出动信息列表
+      zlxx: [], //出动信息总览
+      hcws: [], //火场文书
+      ajxxList: [],
+      jzxxList: {},
+      fxxxList: {},
+      lshzList: [],
+      wlwsb: [],
+      mapData: null,
+    };
+  },
+  methods: {
+    getMapData() {
+      // console.log(this.params.id);
+      this.mapData = null;
+      getZhd({ id: this.params.id }).then((res) => {
+        console.log(res);
+        if (res.data && res.data.data) {
+          this.mapData = {
+            jd: res.data.data.dqjd1,
+            wd: res.data.data.dqwd1,
+            zl: res.data.data.总览信息1,
+            jzmc: res.data.data.ddmc
+          };
+        }
+      });
+    },
+    getQueryString(name) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+      var r = window.location.search.substr(1).match(reg);
+      if (r != null) {
+        return unescape(r[2]);
+      }
+      return null;
+    },
+    callback(id) {
+      this.params.id = id;
+      this.getMapData();
+      this.getOtherData();
+    },
+    openBasicModal() {
+      this.showModal("basicInfoModal");
+    },
+    getOtherData() {
+      // 出警力量
+      const cdxxId = {
+        ajid: this.params.id,
+      };
+      getCdllxx(cdxxId).then((res) => {
+        this.cdxxList = res.data.rows;
+      });
+      // 出动力量-总览
+      geTzl(this.params).then((res) => {
+        this.zlxx = res.data.rows ? res.data.rows[0].zl : "";
+      });
+      // 火场文书
+      const hcwsId = {
+        jqTywysbm: this.params.id,
+      };
+      getHcws(hcwsId).then((res) => {
+        this.hcws = res.data.rows[0];
+      });
+      // 事故单位信息-案件信息列表
+      getAjxx(this.params).then((res) => {
+        this.ajxxList = res.data.rows[0];
+      });
+      // 事故单位建筑信息
+      const jzxxid = {
+        ajid: this.params.id,
+      };
+      getJzxx(jzxxid).then((res) => {
+        this.jzxxList = res.data.rows;
+      });
+      // 风险隐患信息
+      const fxyhId = {
+        ajid: this.params.id,
+      };
+      getFxyhxx(fxyhId).then((res) => {
+        this.fxxxList =
+          res.data.rows && res.data.rows.length > 0 ? res.data.rows[0] : null;
+        this.lshzList = res.data.rows;
+      });
+      // 物联网设备信息
+      const wlwId = {
+        ajid: this.params.id,
+      };
+      getWlwsb(wlwId).then((res) => {
+        this.wlwsb = res.data.rows;
+      });
+    },
+    getList() {
+      const params1 = {
+        pageSize: 10000,
+        pageNum: 1,
+      };
+      getBjxx(params1).then((res) => {
+        let list = res.data.rows;
+        if (this.pId) {
+          list = list.filter((p) => p.id !== this.pId);
+          list.unshift(res.data.rows.find((p) => p.id === this.pId));
+        }
+        this.bjxxList = list;
+      });
+    },
+  },
+  created() {
+    const id = this.getQueryString("id");
+    this.pId = id;
+    this.getList();
+  },
+};
 </script>
 
 <style scoped lang="less"></style>