zhgkpt-datav/app/src/views/FireCondition/index.vue

<template>
	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
		<div>
			<border-panel height="301px" style="margin-bottom: 2px" title="关键指标"  header-cursor="pointer"  @click-header="openBasicModal(1)">
				<FireIndex  :type="fireIndexType" :qx="qx" @open="openBasicModal(1)"   />
				<template #ext-header>
					<button-block :items="['月', '年']" @select-item="selectFireIndexItemHandler" />
				</template>
			</border-panel>
			<border-panel height="337px" style="margin-bottom: 2px" title="起火原因" @click-header="openBasicModal(2)">
				<FireReason :qx="qx" />
			</border-panel>
			<border-panel height="313px" title="起火场所"  @click-header="openBasicModal(3)">
				<FireAddressType :qx="qx" />
				<template>
				</template>
			</border-panel>
		</div>
		<div>
			<div>
				<div style="width: 910px; display: flex; position: relative;">
					<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>
				</div>
			</div>
			<div class="center-box">
				<border-panel class="fire-time" header-cursor="pointer" :header-type="3" height="313px" width="955px"
					style="margin: 7px;cursor: pointer;" title="火灾时段（24时）" @click-header="opemFries">
					<FireTime :qx="qx" :type="type" />
					<template #ext-header>
						<button-block :items="['本年', '近5年', '季节']" @select-item="selectItemHandler" />
					</template>
				</border-panel>
			</div>
		</div>
		<div>
			<border-panel height="486px" style="margin-bottom: 7px" title="火灾分布">
				<FireDistribution :qx="qx" />
			</border-panel>
			<border-panel height="460px" title="历史火灾">
				<FireHistory :qx="qx" />
			</border-panel>
		</div>
		<basic-modal top="120px" ref="basicInfoModal" name="火灾分析">
			<hzfxCont :qy="qx" :idx="valNum" @callback="callback" />
		</basic-modal>
		<basic-modal top="120px" ref="HistoryModal" name="历史火灾查询">
			<hzfbCont :qy="qx" />
		</basic-modal>
		
	</div>
</template>
<script>
	import FireReason from "./components/FireReason.vue";
	import FireAddressType from "./components/FireAddressType.vue";
	import FireIndex from './components/FireIndex/index.vue'
	import FireDistribution from './components/FireDistribution.vue'
	import FireHistory from './components/FireHistory.vue'
	import FireTime from './components/FireTime.vue'
	import SearchBox from '@/components/SearchBox.vue';
	import MapCharts from "../Home/components/NewMapChartsCategory.vue";
	import hzfxCont from "./components/hzfxCont.vue";
	import hzfbCont from "./components/hzfbCont.vue";
	import { loadMapData, createInfoWindow } from '@/shared'
	export default {
		name: "FireCondition",
		components: {
			FireReason,
			FireAddressType,
			FireIndex,
			FireDistribution,
			FireHistory,
			FireTime,
			SearchBox,
			MapCharts,
			hzfxCont,
			hzfbCont,
			fireIndexType: 0,
		},
		data() {
			return {
				valNum: 1,
				qx: '重庆市',
				type: 1,
				heatMap: [],
				legendData: [],
				fireIndexType: 0
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			callback(val) {
				this.valNum = val
			},
			selectFireIndexItemHandler(idx) {
				this.fireIndexType = idx
			},
			showLabel(params) {
				return createInfoWindow('HZQSN', params);
			},
			change(e) {
				this.qx = e.target.value
			},
			selectItemHandler(idx) {
				this.type = (idx + 1)
			},
			openBasicModal(val) {
				this.valNum = val;
				this.showModal("basicInfoModal");
			},
			loadData() {
				loadMapData('HZQSN').then(res => {
					this.heatMap = res.heatMap
					this.legendData = res.legendData
				})
			},
			opemFries() {
				this.showModal('HistoryModal')
			}
		}
	};
</script>

<style scoped lang="less">
	.center-box {
		// margin-top: 602px;
	}
</style>