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

<template>
	<div style="padding: 0px 35px; display: flex; justify-content: space-between">
		<div>
			<border-panel height="310px" style="margin-bottom: 6px" title="高层建筑统计" @click="openBasicModal">
				<BuildNum :list="gcjztjList" :qy="qy" v-if="gcjztjList && gcjztjList.length > 0" />
			</border-panel>
			<border-panel height="320px" style="margin-bottom: 6px" title="年代分布统计">
				<ChronologicDistributionStatistics :list="NdfbtjList" v-if="NdfbtjList && NdfbtjList.length > 0" />
			</border-panel>
			<border-panel height="310px" title="高度分布统计">
				<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" />
	</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";
	// import { getQyfbList } from "@/api/basicInfor.js";
	// import { getNdfbtj } from "@/api/basicInfor.js";
	// import { getGcjztj } from "@/api/basicInfor.js";
	// import { 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: [],
			};
		},
		watch: {
			qy() {
				this.getList();
			},
		},
		methods: {
			openBasicModal() {
				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) => {
					this.gcjztjList = res.data.rows;
				});
				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>