xuhongjie
parent
8156f91be1
commit
ac7ccff395
@ -0,0 +1,162 @@
|
||||
<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 { allproject } 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 allproject();
|
||||
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>
|
||||
.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>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-table :data="tableData" style="width: 100%" :show-header="false">
|
||||
<el-table-column width="80">
|
||||
<template slot-scope="scope">
|
||||
<img :src="getIcon(scope.$index)" alt="icon" style="width: 2.19rem; height: 1.25rem;">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" width="300">
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAllMessagestwo } from '@/api/ManageApi/index';
|
||||
|
||||
export default {
|
||||
name: 'MessageTable',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
const response = await getAllMessagestwo();
|
||||
if (response && response.code === 200 && response.data) {
|
||||
this.tableData = this.processData(response.data);
|
||||
}
|
||||
},
|
||||
processData(data) {
|
||||
return data.map(item => ({
|
||||
name: item.content,
|
||||
date: this.formatDate(item.createTime)
|
||||
}));
|
||||
},
|
||||
getIcon(index) {
|
||||
return index === 0 ? require('@/assets/images/new@2x.png') : require('@/assets/images/other.png');
|
||||
},
|
||||
formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 30rem;
|
||||
height: 14.5rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue