报警动态按原型增加720

app/src/views/PoliceSituation/index.vue

@@ -1,191 +1,272 @@
 <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="600px" width="540px" style="margin-bottom: 6px" :headerType="3" title="出动力量">
-				<MobilizeStrength :list="cdxxList" :zlxx="zlxx" :hcws="hcws" :hcws1="hcws1" />
-			</border-panel>
-		</div>
-		<div style="width: 1000px; padding-bottom: 6px;">
-			<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="480px" 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="600px"
+        width="540px"
+        style="margin-bottom: 6px"
+        :headerType="3"
+        title="出动力量"
+      >
+        <MobilizeStrength
+          :list="cdxxList"
+          :zlxx="zlxx"
+          :hcws="hcws"
+          :hcws1="hcws1"
+        />
+      </border-panel>
+    </div>
+    <div style="width: 1000px; padding-bottom: 6px; position: relative">
+      <!-- <Map :data="mapData" v-if="mapData" /> -->
+      <iframe
+        ref="box"
+        src="https://www.720yun.com/t/65aknlde0pm?scene_id=110320524"
+        style="height: 100%; width: 100%"
+        v-if="middleType === '720'"
+      ></iframe>
+      <div style="height: 100%; width: 100%; position: relative" v-else>
+        <Map :data="mapData" v-if="mapData" />
+      </div>
+      <div
+        class="m-btn d"
+        :class="middleType === '720' ? 'map' : 'd'"
+        @click="changeMiddleType"
+      ></div>
+    </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="480px"
+        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 moment from "moment";
-	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 {
-				gxsj1:null,
-				pId: null,
-				params: {
-					pageSize: 100,
-					pageNum: 1,
-					qy: null,
-					id: null,
-				},
-				ajid: "",
-				bjxxList: [], //报警信息
-				cdxxList: [], //出动信息列表
-				zlxx: [], //出动信息总览
-				hcws: [], //火场文书
-				hcws1: [],
-				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,
-							showzhd: true
-						};
-					}
-				});
-			},
-			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.hcws1 = res.data.rows[0]
-					let i = res.data.rows
-					let i2 = i.filter((item, index) => {
-						return index
-					})
-					this.hcws  = i2.map(i =>{
-						return {
-							...i,
-							gxsj: moment(i.gxsj).format("yyyy-MM-DD")
-						}
-					});
-					this.hcws1.gxsj = moment(this.hcws1.gxsj).format("yyyy-MM-DD");
-				});
-				// 事故单位信息-案件信息列表
-				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();
-		},
-	};
+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 moment from "moment";
+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 {
+      gxsj1: null,
+      pId: null,
+      params: {
+        pageSize: 100,
+        pageNum: 1,
+        qy: null,
+        id: null,
+      },
+      ajid: "",
+      bjxxList: [], //报警信息
+      cdxxList: [], //出动信息列表
+      zlxx: [], //出动信息总览
+      hcws: [], //火场文书
+      hcws1: [],
+      ajxxList: [],
+      jzxxList: {},
+      fxxxList: {},
+      lshzList: [],
+      wlwsb: [],
+      mapData: null,
+      middleType: "720",
+    };
+  },
+  methods: {
+    changeMiddleType() {
+      if (this.middleType === "720") {
+        this.getMapData();
+        this.middleType = "map";
+      } else {
+        this.middleType = "720";
+      }
+    },
+    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,
+            showzhd: true,
+          };
+        }
+      });
+    },
+    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.hcws1 = res.data.rows[0];
+        let i = res.data.rows;
+        let i2 = i.filter((item, index) => {
+          return index;
+        });
+        this.hcws = i2.map((i) => {
+          return {
+            ...i,
+            gxsj: moment(i.gxsj).format("yyyy-MM-DD"),
+          };
+        });
+        this.hcws1.gxsj = moment(this.hcws1.gxsj).format("yyyy-MM-DD");
+      });
+      // 事故单位信息-案件信息列表
+      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>
+<style scoped lang="less">
+.m-btn {
+  width: 78px;
+  height: 72px;
+  position: absolute;
+  right: 20px;
+  top: 30px;
+  z-index: 99;
+  cursor: pointer;
+}
+.m-btn.d {
+  background: url("../../assets/images/dd-change-720.png") center center
+    no-repeat;
+  background-size: 78px 72px;
+}
+.m-btn.map {
+  background: url("../../assets/images/dd-change-map.png") center center
+    no-repeat;
+  background-size: 78px 72px;
+}
+</style>