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

<template>
    <div class="container">
        <div>
            <div class="title">整体项目情况</div>
            <table>
                <thead>
                    <tr>
                        <th>项目总数</th>
                        <th>建筑面积(万平方米)</th>
                        <th>已建数量(个)</th>
                        <th>在建数量(个)</th>
                        <th>拟建数量(个)</th>
                        <th style="visibility: hidden;">拟建数量(个)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ projectData.allProject }}</td>
                        <td>{{ projectData.allGrossArea }}</td>
                        <td>{{ projectData.allBuilding1 }}</td>
                        <td>{{ projectData.allBuilding2 }}</td>
                        <td>{{ projectData.allBuilding3 }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <div class="title">当年项目情况</div>
            <table>
                <thead>
                    <tr>
                        <th>新开工项目数</th>
                        <th>建筑面积(万平方米)</th>
                        <th>已建数量(个)</th>
                        <th>在建数量(个)</th>
                        <th style="visibility: hidden;">拟建数量(个)</th>
                        <th style="visibility: hidden;">拟建数量(个)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ currentYearData.currentYearProject }}</td>
                        <td>{{ currentYearData.currentYearGrossArea }}</td>
                        <td>{{ currentYearData.currentYearBuilding1 }}</td>
                        <td>{{ currentYearData.currentBuilding2 || 0 }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import { allinformation } from '@/api/ManageApi';

export default {
    data() {
        return {
            projectData: {
                allProject: 0,   // 项目总数
                allGrossArea: 0,    //建筑面积
                allBuilding1: 0,  // 已建
                allBuilding2: 0,  // 在建
                allBuilding3: 0   // 拟建
            },
            currentYearData: {
                currentYearProject: 0,      //总数
                currentYearGrossArea: 0,    //面积
                currentYearBuilding1: 0,  // 已建
                currentBuilding2: 0      // 在建
            },
            loading: false,
            error: null
        };
    },
    created() {
        this.fetchProjectData();
    },
    methods: {
        async fetchProjectData() {
            this.loading = true;
            try {
                const response = await allinformation();
                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
                };                
                this.currentYearData = {
                    currentYearProject: response.data.currentYearProject || 0,
                    currentYearGrossArea: response.data.currentYearGrossArea || 0,
                    currentYearBuilding1: response.data.currentYearBuilding1 || 0,
                    currentBuilding2: response.data.currentBuilding2 || 0
                };
            }
            finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style scoped>
/* Your existing styles remain unchanged */
.container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: none;
    padding: 8px;
    text-align: left;
}

th {
    width: 7rem;
}

.title {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    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;
}

thead tr {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.88rem;
    color: #7B8599;
    line-height: 1.19rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
tbody tr {
    font-family: DIN, DIN;
    font-weight: 600;
    font-size: 1.5rem;
    color: #292C33;
    line-height: 2.11rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
</style>