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

<template>
	<div style="padding: 0px 35px; display: flex; justify-content: space-between; cursor: pointer;">
		<div>
			<border-panel height="310px" style="margin-bottom: 6px" title="高层建筑统计" @click="openBasicModal(1)">
				<BuildNum :list="gcjztjList" :qy="qy" v-if="gcjztjList && gcjztjList.length > 0" />
			</border-panel>
			<border-panel height="320px" style="margin-bottom: 6px" title="年代分布统计" @click="openBasicModal(2)">
				<ChronologicDistributionStatistics :list="NdfbtjList" v-if="NdfbtjList && NdfbtjList.length > 0" />
			</border-panel>
			<border-panel height="310px" title="高度分布统计" @click="openBasicModal(3)">
				<HeightDistribution :list="gdfbtjList" v-if="gdfbtjList && gdfbtjList.length > 0" />
			</border-panel>
		</div>
		<div>
			<div style="
          width: 900px;
          height: 1000px;
          position: relative;
          display: flex;
          padding-top: 150px;
        ">
				<MapCharts :qx="qy" @selectArea="area => qy = area" />
				<div style="position: absolute; width: 500px; top: 10px; left: -20px">
					<SearchBox :area.sync="qy" />
				</div>
			</div>
		</div>
		<div>
			<border-panel height="521px" style="margin-bottom: 6px" title="区域分布">
				<Regional :list="qyfbList" :qx="qy" v-if="qyfbList && qyfbList.length > 0" />
			</border-panel>
			<border-panel height="421px" style="margin-bottom: 6px" title="建筑统计">
				<BuildingStatistics :list="jztjList" v-if="jztjList && jztjList.length > 0" />
			</border-panel>
		</div>
		<basic-modal top="120px" ref="basicInfoModal" name="高层基础信息">
			<jcxxCont :qy="qy" :flagVal="flagVal" />
		</basic-modal>
		
	</div>
</template>
<script>
	import BuildNum from "./components/BuildNum.vue";
	import Regional from "./components/Regional.vue";
	import BuildingStatistics from "./components/BuildingStatistics.vue";
	import HeightDistribution from "./components/HeightDistribution.vue";
	import ChronologicDistributionStatistics from "./components/ChronologicDistributionStatistics.vue";
	import MapCharts from "../Home/components/MapCharts.vue";
	import SearchBox from "@/components/SearchBox.vue";
	import jcxxCont from "./components/jcxxCont.vue";

	import {
		toFirst
	} from '../../utils'
	import {
		getJztj,
		getQyfbList,
		getNdfbtj,
		getGcjztj,
		getGdfbtj,
	} from "@/api/basicInfor.js";
	export default {
		name: "BasicPage",
		components: {
			BuildNum,
			Regional,
			BuildingStatistics,
			HeightDistribution,
			ChronologicDistributionStatistics,
			MapCharts,
			SearchBox,
			jcxxCont,
		
		},
		data() {
			return {
				qy: "重庆市",
				params: {
					pageSize: 100,
					pageNum: 1,
				},
				jztjList: [],
				qyfbList: [],
				NdfbtjList: [],
				gcjztjList: [],
				gdfbtjList: [],
				flagVal:1
			};
		},
		watch: {
			qy() {
				this.getList();
			},
		},
		methods: {
			openBasicModal(val) {
				this.flagVal=val
				this.showModal("basicInfoModal");
			},
			getList() {
				getJztj({
					...this.params,
					qx: this.qy === "重庆市" ? "" : this.qy
				}).then(
					(res) => {
						this.jztjList = res.data.rows;
					}
				);
				getQyfbList({
					...this.params,
				}).then((res) => {
					const data = res.data.rows.map(item => ({
						...item,
						isActive: item.qx === this.qy
					}));
					this.qyfbList = toFirst(data, this.qy, 'qx')
				});
				getNdfbtj({
					...this.params,
					qx: this.qy === "重庆市" ? "" : this.qy,
				}).then((res) => {
					this.NdfbtjList = res.data.rows;
				});
				getGcjztj({
					...this.params,
					qx: this.qy === "重庆市" ? "" : this.qy,
				}).then((res) => {
					let lists=res.data.rows
					if(lists.length>0){
						const temp = {
							jzdx:'高层建筑总数',
								qx: this.qy,
							sl: lists.reduce((a,b) => a + b.sl, 0)
						}
						lists.unshift(temp)
					}
					this.gcjztjList = lists

				});
				getGdfbtj({
					...this.params,
					pageSize: 1000,
					qx: this.qy === "重庆市" ? "" : this.qy,
				}).then((res) => {
					this.gdfbtjList = res.data.rows;
				});
			},
		
		},
		created() {
			this.getList();
		},
	};
</script>

<style scoped lang="less"></style>