<template>
|
<div class="left-panel">
|
<!-- 参与统计 -->
|
<div class="statistics-box panel-item">
|
<div class="box-title">已参与自主购房安置统计</div>
|
<div class="statistics-content">
|
<div class="stat-item">
|
<div class="number">{{ totalHouseholds }}</div>
|
<div class="label">总参与户数(户)</div>
|
</div>
|
<div class="stat-item">
|
<div class="number">{{ totalPeople }}</div>
|
<div class="label">总参与人数(人)</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 各街道参与排名 -->
|
<div class="ranking-box panel-item">
|
<div class="box-title">各街道/乡参与排名</div>
|
<div class="ranking-list">
|
<div v-for="(item, index) in rankingList" :key="index" class="ranking-item">
|
<span class="rank">{{ index + 1 }}</span>
|
<span class="name">{{ item.name }}</span>
|
<div class="progress-bar">
|
<div class="progress" :style="{ width: item.percentage + '%' }"></div>
|
</div>
|
<span class="value">{{ item.value }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 安置房完成比 -->
|
<div class="line-chart panel-item">
|
<div class="box-title">安置房完成比</div>
|
<div class="pie-chart">
|
<v-chart class="chart" :option="pieOption" autoresize />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'LeftPanel',
|
data() {
|
return {
|
totalHouseholds: 87695,
|
totalPeople: 876995,
|
rankingList: [
|
{ name: '崇州街道', percentage: 90, value: '999户' },
|
{ name: '羊马乡', percentage: 85, value: '999户' },
|
{ name: '万家镇', percentage: 80, value: '999户' },
|
{ name: '崇阳街道', percentage: 75, value: '999户' },
|
{ name: '白头镇', percentage: 70, value: '999户' },
|
{ name: '金鸡乡', percentage: 65, value: '999户' },
|
{ name: '西江镇', percentage: 60, value: '999户' },
|
{ name: '观胜镇', percentage: 55, value: '999户' }
|
],
|
pieOption: {
|
tooltip: {
|
trigger: 'item'
|
},
|
series: [{
|
type: 'pie',
|
radius: ['65%', '80%'],
|
label: {
|
show: false
|
},
|
data: [
|
{ value: 34.5, name: '商业用房' },
|
{ value: 30, name: '住宅' },
|
{ value: 35.5, name: '其他' }
|
],
|
itemStyle: {
|
color: function(params) {
|
const colorList = ['#00ffff', '#7cb9e8', 'rgba(0,255,255,0.5)'];
|
return colorList[params.dataIndex];
|
}
|
}
|
}]
|
}
|
};
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.left-panel {
|
position: absolute;
|
top: 111px;
|
left: 20px;
|
width: 440px;
|
bottom: 20px;
|
.statistics-box {
|
height: 196px;
|
}
|
.ranking-box {
|
height: 466px;
|
margin-top: 21px;
|
}
|
.line-chart {
|
height: 244px;
|
margin-top: 21px;
|
|
}
|
|
.panel-item {
|
background: rgba(0,0,255,0.1);
|
border: 1px solid rgba(0,255,255,0.2);
|
border-radius: 10px;
|
}
|
|
.box-title {
|
font-size: 20px;
|
color: #7cb9e8;
|
}
|
|
.statistics-content {
|
display: flex;
|
justify-content: space-around;
|
|
.stat-item {
|
text-align: center;
|
|
.number {
|
font-size: 36px;
|
color: #00ffff;
|
}
|
|
.label {
|
font-size: 14px;
|
color: #7cb9e8;
|
}
|
}
|
}
|
|
.ranking-item {
|
display: flex;
|
align-items: center;
|
|
.rank {
|
width: 20px;
|
color: #00ffff;
|
}
|
|
.name {
|
width: 80px;
|
}
|
|
.progress-bar {
|
flex: 1;
|
height: 6px;
|
background: rgba(0,255,255,0.1);
|
border-radius: 3px;
|
|
.progress {
|
height: 100%;
|
background: linear-gradient(to right, #00ffff, #7cb9e8);
|
border-radius: 3px;
|
}
|
}
|
|
.value {
|
width: 60px;
|
text-align: right;
|
color: #00ffff;
|
}
|
}
|
|
.chart {
|
width: 100%;
|
height: calc(100% - 35px);
|
}
|
}
|
</style>
|
