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="value3" type="year" placeholder="选择年份">
                    </el-date-picker>
                    <el-button icon="el-icon-upload2" style="background-color: #2B62F1;
                    color: #FFFFFF;">报告导出</el-button>
                </div>
            </div>
            <!-- <table style="margin-top: .3rem;">
                <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 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>
            </div>
        </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 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.currentBuilding2 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

export default {
    data() {
        return {
            value3: '',
            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>
.importdiv {
    display: flex;
    gap: .5rem;
}

/* Your existing styles remain unchanged */
.container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

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.88rem;
    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;
    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;
    gap: .3rem;
}

.itemleft {
    display: flex;
    flex-direction: column;
    margin-left: .5rem;
}

.top {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
</style>