| | |
| | | <div class="title">西藏国投租金系统数据看板</div> |
| | | <div class="sub-title">Ecological simulation display in business district</div> |
| | | </div> |
| | | <div class="header-left" style="width: 350px;"> |
| | | <div class="header-left" style="width: 410px;"> |
| | | <div class="stat-group"> |
| | | <div class="stat-item"> |
| | | <img :src="require('@/assets/area.png')" width="40" height="40" /> |
| | | <div class="stat-info"> |
| | | <div class="stat-label"> <i class="icon-area"></i> 房屋总面积</div> |
| | | <div class="stat-value">{{ staticsData.houseTotalArea }}<span class="unit">m²</span></div> |
| | | <div class="stat-value">{{ Number(staticsData.houseTotalArea / 10000).toFixed(2) }}<span class="unit">万m²</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="stat-item"> |
| | | <img :src="require('@/assets/rent.png')" width="40" height="40" /> |
| | | <div class="stat-info"> |
| | | <div class="stat-label"> <i class="icon-area"></i>已出租面积</div> |
| | | <div class="stat-value">{{ staticsData.houseRentedArea }}<span class="unit">m²</span></div> |
| | | <div class="stat-value">{{ Number(staticsData.houseRentedArea / 10000).toFixed(2) }}<span class="unit">万m²</span></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="header-right"> |
| | | <div class="stat-group"> |
| | | <div class="stat-item mt-10"> |
| | | <img :src="require('@/assets/money.png')" width="40" height="40" /> |
| | | <div class="stat-info"> |
| | | <div class="stat-label"> <i class="icon-money"></i>总计应收租金</div> |
| | | <div class="stat-value">{{ staticsData.totalReceivableRent }}<span class="unit">万元</span></div> |
| | | </div> |
| | | </div> |
| | | <div class="stat-item mt-10"> |
| | | <img :src="require('@/assets/successPay.png')" width="40" height="40" /> |
| | | <div class="stat-info"> |
| | | <div class="stat-label"><i class="icon-money"></i>总计已收租金</div> |
| | | <div class="stat-value">{{ staticsData.totalReceivedRent }}<span class="unit">万元</span></div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="stat-group mt-10"> |
| | | <div class="stat-item"> |
| | | <img :src="require('@/assets/arrears.png')" width="40" height="40" /> |
| | | <div class="stat-info"> |
| | | <div class="stat-label"> <i class="icon-area"></i> 本季度欠费</div> |
| | | <div class="stat-value">{{ staticsData.totalRentOwe }}<span class="unit">万元</span></div> |
| | | </div> |
| | | </div> |
| | | <div class="stat-item"> |
| | | <img :src="require('@/assets/totalArrears.png')" width="40" height="40" /> |
| | | <div class="stat-info"> |
| | | <div class="stat-label"> <i class="icon-area"></i>总计欠费</div> |
| | | <div class="stat-value">{{ staticsData.totalRentOweAll }}<span class="unit">万元</span></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="chart-card" style="width: 350px;"> |
| | | <div class="chart-title">区域租金排名</div> |