You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
15 KiB
400 lines
15 KiB
<template>
|
|
<div class="container">
|
|
<div>
|
|
<div class="top">
|
|
<div class="title">整体项目情况</div>
|
|
<div class="importdiv">
|
|
<el-date-picker v-model="selectedYear" type="year" placeholder="选择年份" format="yyyy"
|
|
value-format="yyyy" @change="handleYearChange">
|
|
</el-date-picker>
|
|
<el-button icon="el-icon-upload2" style="background-color: #2B62F1; color: #FFFFFF;"
|
|
@click="handleExport">
|
|
报告导出
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="mainarea">
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-xmzs@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">项目总数</div>
|
|
<div class="number">{{ projectData.allProject }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-jzmj@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">建筑面积(万平方米)</div>
|
|
<div class="number">{{ projectData.allGrossArea }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">已建数量(个)</div>
|
|
<div class="number">{{ projectData.allBuilding1 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">在建数量(个)</div>
|
|
<div class="number">{{ projectData.allBuilding2 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">拟建数量(个)</div>
|
|
<div class="number">{{ projectData.allBuilding3 }}</div>
|
|
</div>
|
|
</div>
|
|
<el-tooltip class="item" effect="dark" content="更多信息" placement="top-start" style="cursor: pointer;">
|
|
<div @click="toggleSection('section1')">
|
|
<i v-if="showSection1" class="el-icon-caret-top"></i>
|
|
<i v-else class="el-icon-caret-bottom"></i>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="mainareatwo" style="margin-top: 0rem;" v-show="showSection1">
|
|
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">总投资额</div>
|
|
<div class="number">{{ projectData.allInvest1 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">计划投资额</div>
|
|
<div class="number">{{ projectData.allInvest2 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">占地面积</div>
|
|
<div class="number">{{ projectData.allInvest3 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone" style="visibility: hidden;">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">占地面积</div>
|
|
<div class="number">{{ projectData.allInvest3 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone" style="visibility: hidden;">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">占地面积</div>
|
|
<div class="number">{{ projectData.allInvest3 }}</div>
|
|
</div>
|
|
</div>
|
|
<el-tooltip class="item" effect="dark" content="更多信息" placement="top-start">
|
|
<div style="visibility: hidden;">
|
|
<i v-if="showSection1" class="el-icon-caret-top"></i>
|
|
<i v-else class="el-icon-caret-bottom"></i>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="title">当年项目情况</div>
|
|
<div class="mainarea">
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-xkgxms@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">新开工项目数</div>
|
|
<div class="number">{{ currentYearData.currentYearProject }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-jzmj@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">建筑面积(万平方米)</div>
|
|
<div class="number">{{ currentYearData.currentYearGrossArea }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">已建数量(个)</div>
|
|
<div class="number">{{ currentYearData.currentYearBuilding1 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">在建数量(个)</div>
|
|
<div class="number">{{ currentYearData.currentBuilding2 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">拟建数量(个)</div>
|
|
<div class="number">{{ currentYearData.currentBuilding3 }}</div>
|
|
</div>
|
|
</div>
|
|
<el-tooltip class="item" effect="dark" content="更多信息" placement="top-start" style="cursor: pointer;">
|
|
<div @click="toggleSection('section2')">
|
|
<i v-if="showSection2" class="el-icon-caret-top"></i>
|
|
<i v-else class="el-icon-caret-bottom"></i>
|
|
</div>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="mainareatwo" style="margin-top: 0rem;" v-show="showSection2">
|
|
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">总投资额</div>
|
|
<div class="number">{{ currentYearData.currentAllInvest1 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">计划投资额</div>
|
|
<div class="number">{{ currentYearData.currentAllInvest2 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">占地面积</div>
|
|
<div class="number">{{ currentYearData.currentAllInvest3 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone" style="visibility: hidden;">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">占地面积</div>
|
|
<div class="number">{{ projectData.allInvest3 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="itemone" style="visibility: hidden;">
|
|
<img src="@/assets/images/icon-yjsl@2x.png" alt="">
|
|
<div class="itemleft">
|
|
<div class="lefttitle">占地面积</div>
|
|
<div class="number">{{ projectData.allInvest3 }}</div>
|
|
</div>
|
|
</div>
|
|
<div style="visibility: hidden;">
|
|
<i v-if="showSection1" class="el-icon-caret-top"></i>
|
|
<i v-else class="el-icon-caret-bottom"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { allinformation } from '@/api/ManageApi';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
showSection1: false, // 控制第一个区域是否显示
|
|
showSection2: false, // 控制第二个区域是否显示
|
|
selectedYear: new Date().getFullYear().toString(),
|
|
projectData: {
|
|
allProject: 0, // 项目总数
|
|
allGrossArea: 0, //建筑面积
|
|
allBuilding1: 0, // 已建
|
|
allBuilding2: 0, // 在建
|
|
allBuilding3: 0, // 拟建
|
|
allInvest1: 0, //投资额
|
|
allInvest2: 0, //投资额
|
|
allInvest3: 0, //投资额
|
|
},
|
|
currentYearData: {
|
|
currentYearProject: 0, //总数
|
|
currentYearGrossArea: 0, //面积
|
|
currentYearBuilding1: 0, // 已建
|
|
currentBuilding2: 0, // 在建
|
|
currentBuilding3: 0,
|
|
currentAllInvest1: 0, //投资额
|
|
currentAllInvest2: 0,
|
|
currentAllInvest3: 0
|
|
},
|
|
loading: false,
|
|
error: null
|
|
};
|
|
},
|
|
created() {
|
|
this.fetchProjectData();
|
|
},
|
|
methods: {
|
|
toggleSection(section) {
|
|
if (section === 'section1') {
|
|
this.showSection1 = !this.showSection1;
|
|
} else if (section === 'section2') {
|
|
this.showSection2 = !this.showSection2;
|
|
}
|
|
},
|
|
/** 导出按钮操作 */
|
|
handleExport() {
|
|
this.download(
|
|
"/gysl/zwStats/exportBg",
|
|
{
|
|
years: this.selectedYear
|
|
},
|
|
`项目整体情况${this.selectedYear}.docx`
|
|
);
|
|
},
|
|
handleYearChange(year) {
|
|
if (year) {
|
|
this.selectedYear = year;
|
|
this.fetchProjectData();
|
|
this.$emit('year-change', this.selectedYear); //传值
|
|
}
|
|
},
|
|
|
|
async fetchProjectData() {
|
|
this.loading = true;
|
|
try {
|
|
// 调用 API 时传入 years 参数
|
|
const response = await allinformation({
|
|
years: this.selectedYear,
|
|
_t: Date.now() // 添加时间戳防止缓存
|
|
});
|
|
this.projectData = {
|
|
allProject: response.data.allProject || 0,
|
|
allGrossArea: response.data.allGrossArea || 0,
|
|
allBuilding1: response.data.allBuilding1 || 0,
|
|
allBuilding2: response.data.allBuilding2 || 0,
|
|
allBuilding3: response.data.allBuilding3 || 0,
|
|
allInvest1: response.data.allInvest1 || 0,
|
|
allInvest2: response.data.allInvest2 || 0,
|
|
allInvest3: response.data.allInvest3 || 0,
|
|
};
|
|
this.currentYearData = {
|
|
currentYearProject: response.data.currentYearProject || 0,
|
|
currentYearGrossArea: response.data.currentYearGrossArea || 0,
|
|
currentYearBuilding1: response.data.currentYearBuilding1 || 0,
|
|
currentBuilding2: response.data.currentBuilding2 || 0,
|
|
currentBuilding3: response.data.currentBuilding3 || 0,
|
|
currentAllInvest1: response.data.currentAllInvest1 || 0,
|
|
currentAllInvest2: response.data.currentAllInvest2 || 0,
|
|
currentAllInvest3: response.data.currentAllInvest3 || 0
|
|
};
|
|
} catch (error) {
|
|
console.error("获取数据失败:", error);
|
|
this.$message.error("数据加载失败");
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.importdiv {
|
|
display: flex;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: .5rem 0;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: none;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
width: 7rem;
|
|
}
|
|
|
|
.title {
|
|
font-family: alibold;
|
|
font-weight: 600;
|
|
font-size: 1.25rem;
|
|
color: #3D424C;
|
|
line-height: 1.69rem;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-bottom: .5rem;
|
|
margin-left: .4rem;
|
|
}
|
|
|
|
.lefttitle {
|
|
font-family: aliregular;
|
|
font-weight: 400;
|
|
font-size: 0.9rem;
|
|
padding-left: .3rem;
|
|
color: #7B8599;
|
|
line-height: 1.19rem;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.number {
|
|
font-family: DINbold;
|
|
font-weight: 600;
|
|
font-size: 1.25rem;
|
|
color: #3D424C;
|
|
line-height: 1.69rem;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-left: .4rem;
|
|
}
|
|
|
|
.mainarea {
|
|
padding: .5rem 0rem;
|
|
height: auto;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.mainareatwo {
|
|
padding: .5rem 0rem;
|
|
height: auto;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.itemone {
|
|
width: 12rem;
|
|
height: 3rem;
|
|
/* background-color: lightblue; */
|
|
display: flex;
|
|
}
|
|
|
|
.itemleft {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
</style> |