|
@@ -1,177 +1,216 @@
|
|
|
<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="
|
|
|
+ <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 :formatter="showLabel"
|
|
|
- :mapHeatData="heatMap"
|
|
|
- :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>
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <MapCharts
|
|
|
+ :formatter="showLabel"
|
|
|
+ :mapHeatData="heatMap"
|
|
|
+ :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 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,
|
|
|
- formatCityData,
|
|
|
- createMapChartWindowInfo
|
|
|
- } 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: [],
|
|
|
- heatMap: [],
|
|
|
- flagVal:1
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- qy() {
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showLabel(params) {
|
|
|
- return createMapChartWindowInfo({
|
|
|
- title: params.name
|
|
|
- }, () => `高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`);
|
|
|
+import { toFirst, formatCityData, createMapChartWindowInfo } 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,
|
|
|
},
|
|
|
- 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;
|
|
|
- });
|
|
|
- getQyfbList({
|
|
|
- pageSize: 1000,
|
|
|
- pageNum: 1
|
|
|
- }).then((res) => {
|
|
|
- let lists=res.data.rows
|
|
|
- this.heatMap = formatCityData(lists.map(item => ({
|
|
|
- name: item.qx,
|
|
|
- value: item.zs
|
|
|
- })))
|
|
|
- console.log(res.data.rows ,this.heatMap)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- };
|
|
|
+ jztjList: [],
|
|
|
+ qyfbList: [],
|
|
|
+ NdfbtjList: [],
|
|
|
+ gcjztjList: [],
|
|
|
+ gdfbtjList: [],
|
|
|
+ heatMap: [],
|
|
|
+ flagVal: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ qy() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showLabel(params) {
|
|
|
+ return createMapChartWindowInfo(
|
|
|
+ {
|
|
|
+ title: params.name,
|
|
|
+ },
|
|
|
+ () =>
|
|
|
+ `高层建筑数 <span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>栋`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ });
|
|
|
+ getQyfbList({
|
|
|
+ pageSize: 1000,
|
|
|
+ pageNum: 1,
|
|
|
+ }).then((res) => {
|
|
|
+ let lists = res.data.rows;
|
|
|
+ this.heatMap = formatCityData(
|
|
|
+ lists.map((item) => ({
|
|
|
+ name: item.qx,
|
|
|
+ value: item.zs,
|
|
|
+ }))
|
|
|
+ );
|
|
|
+ console.log(res.data.rows, this.heatMap);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less"></style>
|