Gyyq-Upstairs/src/views/components/analysis/all.vue

<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>