|
|
|
|
@ -3,8 +3,15 @@
|
|
|
|
|
<div>
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div class="title">整体项目情况</div>
|
|
|
|
|
<div class="importdiv">
|
|
|
|
|
</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">
|
|
|
|
|
@ -42,6 +49,56 @@
|
|
|
|
|
<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>
|
|
|
|
|
@ -82,6 +139,54 @@
|
|
|
|
|
<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>
|
|
|
|
|
@ -93,20 +198,28 @@ import { allinformationtwo } from '@/api/ManageApi';
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
selectedYear: new Date().getFullYear().toString(),
|
|
|
|
|
showSection1: false, // 控制第一个区域是否显示
|
|
|
|
|
showSection2: false, // 控制第二个区域是否显示
|
|
|
|
|
selectedYear: new Date().getFullYear().toString(),
|
|
|
|
|
projectData: {
|
|
|
|
|
allProject: 0, // 项目总数
|
|
|
|
|
allGrossArea: 0, //建筑面积
|
|
|
|
|
allBuilding1: 0, // 已建
|
|
|
|
|
allBuilding2: 0, // 在建
|
|
|
|
|
allBuilding3: 0 // 拟建
|
|
|
|
|
allBuilding3: 0, // 拟建
|
|
|
|
|
allInvest1: 0, //投资额
|
|
|
|
|
allInvest2: 0, //投资额
|
|
|
|
|
allInvest3: 0, //投资额
|
|
|
|
|
},
|
|
|
|
|
currentYearData: {
|
|
|
|
|
currentYearProject: 0, //总数
|
|
|
|
|
currentYearGrossArea: 0, //面积
|
|
|
|
|
currentYearProject: 0, //总数
|
|
|
|
|
currentYearGrossArea: 0, //面积
|
|
|
|
|
currentYearBuilding1: 0, // 已建
|
|
|
|
|
currentBuilding2: 0 , // 在建
|
|
|
|
|
currentBuilding3: 0 // 在建
|
|
|
|
|
currentBuilding2: 0, // 在建
|
|
|
|
|
currentBuilding3: 0,
|
|
|
|
|
currentAllInvest1: 0, //投资额
|
|
|
|
|
currentAllInvest2: 0,
|
|
|
|
|
currentAllInvest3: 0
|
|
|
|
|
},
|
|
|
|
|
loading: false,
|
|
|
|
|
error: null
|
|
|
|
|
@ -116,6 +229,13 @@ export default {
|
|
|
|
|
this.fetchProjectData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
toggleSection(section) {
|
|
|
|
|
if (section === 'section1') {
|
|
|
|
|
this.showSection1 = !this.showSection1;
|
|
|
|
|
} else if (section === 'section2') {
|
|
|
|
|
this.showSection2 = !this.showSection2;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/** 导出按钮操作 */
|
|
|
|
|
handleExport() {
|
|
|
|
|
this.download(
|
|
|
|
|
@ -126,12 +246,11 @@ export default {
|
|
|
|
|
`项目整体情况${this.selectedYear}.docx`
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// Handle year change
|
|
|
|
|
handleYearChange(year) {
|
|
|
|
|
if (year) {
|
|
|
|
|
this.selectedYear = year;
|
|
|
|
|
this.fetchProjectData();
|
|
|
|
|
this.$emit('year-change', this.selectedYear); //传值
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -139,16 +258,19 @@ export default {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
try {
|
|
|
|
|
// 调用 API 时传入 years 参数
|
|
|
|
|
const response = await allinformationtwo({
|
|
|
|
|
const response = await allinformationtwo({
|
|
|
|
|
years: this.selectedYear,
|
|
|
|
|
_t: Date.now() // 添加时间戳防止缓存
|
|
|
|
|
// _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
|
|
|
|
|
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,
|
|
|
|
|
@ -156,6 +278,9 @@ export default {
|
|
|
|
|
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);
|
|
|
|
|
@ -174,11 +299,11 @@ export default {
|
|
|
|
|
gap: .5rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Your existing styles remain unchanged */
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
gap: 1rem;
|
|
|
|
|
padding: .5rem 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
@ -213,7 +338,7 @@ th {
|
|
|
|
|
.lefttitle {
|
|
|
|
|
font-family: aliregular;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
font-size: 0.88rem;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
color: #7B8599;
|
|
|
|
|
line-height: 1.19rem;
|
|
|
|
|
text-align: left;
|
|
|
|
|
@ -234,7 +359,17 @@ th {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mainarea {
|
|
|
|
|
padding: .5rem;
|
|
|
|
|
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;
|
|
|
|
|
@ -248,7 +383,6 @@ th {
|
|
|
|
|
height: 3rem;
|
|
|
|
|
/* background-color: lightblue; */
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: .3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.itemleft {
|
|
|
|
|
|
