1、首页统计-增加房屋类型统计
2、楼宇统计-增加房屋类型显示
This commit is contained in:
LiuY
parent
4e7e404684
commit
e3d8742e37
@ -135,7 +135,7 @@ body {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
|
||||
.cell_box span {
|
||||
.top_box span {
|
||||
/* display: flex; */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
@ -45,13 +45,11 @@
|
||||
<div class="icon_2">
|
||||
<img src="assets/home/images/bj222.png" alt="" style="width: 100%; height: 100%;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="data">
|
||||
<span>
|
||||
<h5>稀土路街道</h5>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<em>{{ xiTupersonCount }}</em>
|
||||
<i>人</i>
|
||||
@ -64,13 +62,11 @@
|
||||
<div class="icon_2">
|
||||
<img src="assets/home/images/bj333.png" alt="" style="width: 100%; height: 100%;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="data">
|
||||
<span>
|
||||
<h5>民馨路街道</h5>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<em>{{ mingXinpersonCount }}</em>
|
||||
<i>人</i>
|
||||
@ -83,13 +79,11 @@
|
||||
<div class="icon_2">
|
||||
<img src="assets/home/images/bj444.png" alt="" style="width: 100%; height: 100%;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="data">
|
||||
<span>
|
||||
<h5>万水泉镇</h5>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<em>{{ wanShuiQuanpersonCount }}</em>
|
||||
<i>人</i>
|
||||
@ -133,7 +127,7 @@
|
||||
<!-- 右边页面 -->
|
||||
<div class="right_div">
|
||||
<!--政治面貌-->
|
||||
<div class="flex_r1 sub_div">
|
||||
<div style="flex: 3;" class="sub_div">
|
||||
<div class="politics">
|
||||
<div class="politics_top">
|
||||
<img src="assets/home/images/箭头.png" alt="">
|
||||
@ -145,7 +139,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--性别统计-->
|
||||
<div class="flex_r2 sub_div">
|
||||
<div style="flex: 2;" class="sub_div">
|
||||
<div class="gender">
|
||||
<div class="gender_top">
|
||||
<img src="assets/home/images/箭头.png" alt="">
|
||||
@ -187,8 +181,22 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 房屋类型 -->
|
||||
<div style="flex: 3;" class="sub_div">
|
||||
<div class="society">
|
||||
<div class="society_top">
|
||||
<img src="assets/home/images/箭头.png" alt="">
|
||||
<h4>房屋类型</h4>
|
||||
</div>
|
||||
<div class="society_bottom">
|
||||
<div class="bar" id="houseTypeChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 特殊信息类人员情况 -->
|
||||
<div class="flex_r3 sub_div">
|
||||
<!-- <div class="flex_r3 sub_div">
|
||||
<div class="special">
|
||||
<div class="special_top">
|
||||
<img src="assets/home/images/箭头.png" alt="">
|
||||
@ -211,7 +219,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 社会保障类人员 -->
|
||||
<!-- <div class="flex_r4 sub_div">
|
||||
<div class="society">
|
||||
@ -752,6 +764,87 @@
|
||||
});
|
||||
|
||||
},
|
||||
initHouseTyoeChart: function(){
|
||||
var self = this;
|
||||
var option = {
|
||||
color: ["#5189FF", "#FF9C3D", "#00FFBC", "#FFB200"],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
// 格式化提示内容：
|
||||
// a 代表series系列图表名称
|
||||
// b 代表series数据名称 data 里面的name
|
||||
// c 代表series数据值 data 里面的value
|
||||
// d代表 当前数据/总数据的比例
|
||||
// formatter: "{b} : {c}"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: '30%',
|
||||
left: 'left',
|
||||
align: 'auto',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['50%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 0
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
formatter: '{b}{c}'
|
||||
// position: 'center'
|
||||
},
|
||||
/*emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},*/
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
hoverOffset: 0,
|
||||
data: [
|
||||
/*{ value: 31, name: "中国共产党员" },
|
||||
{ value: 29, name: "共青团员" },
|
||||
{ value: 25, name: "预备党员" },
|
||||
{ value: 15, name: "其他" }*/
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
var myChart = echarts.init(document.getElementById('houseTypeChart'));
|
||||
$.ajax({
|
||||
url: self.apiHost + "app/query/sqlrelease/qf4f381b?area=",
|
||||
type: 'GET',
|
||||
dataType: 'JSON',
|
||||
headers: self.headers,
|
||||
success: function(data) {
|
||||
option.series[0]['data'].push({name: '出租房', value: data.chuZu});
|
||||
option.series[0]['data'].push({name: '空置房', value: data.kongFang});
|
||||
option.series[0]['data'].push({name: '自住房', value: data.ziZhu});
|
||||
option.series[0]['data'].push({name: '其他', value: data.qiTa});
|
||||
myChart.setOption(option);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
// 二级页面 - 人口总数
|
||||
personShow: function(){
|
||||
layer.open({
|
||||
@ -897,6 +990,7 @@
|
||||
/*this.initProtectPerson();*/
|
||||
this.initPetitionRecord();
|
||||
this.initSpecialPersonData();
|
||||
this.initHouseTyoeChart();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -10,29 +10,54 @@
|
||||
|
||||
<style>
|
||||
[v-clock] {display: none}
|
||||
.table-a table {
|
||||
border-spacing: 0.07rem;
|
||||
}
|
||||
.table-a table {
|
||||
border-spacing: 0.07rem;
|
||||
}
|
||||
|
||||
.table-a table td {
|
||||
width: 0.5rem;
|
||||
height: 0.15rem;
|
||||
background-color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
.table-a table td {
|
||||
position: relative;
|
||||
width: 0.5rem;
|
||||
height: 0.15rem;
|
||||
background-color: #FFFFFF;
|
||||
/*text-align: center;*/
|
||||
}
|
||||
|
||||
.blue-td {
|
||||
background-color: #478dd3 !important;
|
||||
}
|
||||
.blue-td {
|
||||
background-color: #478dd3 !important;
|
||||
}
|
||||
|
||||
.red-div {
|
||||
background-color: #D76861 !important;
|
||||
}
|
||||
|
||||
.house-td:hover{
|
||||
cursor: pointer;
|
||||
background-color: yellow !important;
|
||||
}
|
||||
.house-td:hover{
|
||||
cursor: pointer;
|
||||
background-color: yellow !important;
|
||||
}
|
||||
|
||||
.house-num-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.house-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.house-type-div {
|
||||
display: flex;
|
||||
/* align-items: flex-end;*/
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.house-type-div span {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -57,11 +82,21 @@
|
||||
<tr v-for="floors in unit.house">
|
||||
<td style="background-color: transparent"> {{ floors.follrs }}层</td>
|
||||
<!-- 循环户数 -->
|
||||
<td class="house-td" v-for="house in floors.follrsHouse" :class="{ 'blue-td': house.populationCount > 0 }" @click="houseShow(house.houseId)"> {{ house.houseNum }}</td>
|
||||
<td class="house-td" v-for="house in floors.follrsHouse" :class="{ 'blue-td': house.populationCount > 0 }" @click="houseShow(house.houseId)">
|
||||
<div class="house-num-div">
|
||||
<span class="house-num">{{ house.houseNum }}</span>
|
||||
<div class="house-type-div">
|
||||
<span style="background-color: #CC33FF" v-if="house.fangHuYiZhi != 0"></span><!--房户一致-->
|
||||
<span style="background-color: #4D3900" v-if="house.ziZhu != 0"></span><!--自有住房-->
|
||||
<span style="background-color: #7F7F7F" v-if="house.chuZu != 0"></span> <!-- 出租-->
|
||||
<span style="background-color: #000000" v-if="house.kongZhi != 0"></span><!-- 空房-->
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="background-color: transparent"></td>
|
||||
<td colspan="99">{{ unit.unit }} 单元</td>
|
||||
<td colspan="99" style="text-align: center">{{ unit.unit }} 单元</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- </div>-->
|
||||
@ -103,9 +138,9 @@
|
||||
<!-- 网格员信息 -->
|
||||
<div class="div_flex_1 sub_div">
|
||||
<div class="grid_inspector ">
|
||||
<span class="span_1">
|
||||
<h4>网格员</h4>
|
||||
</span>
|
||||
<span class="span_1">
|
||||
<h4>网格员</h4>
|
||||
</span>
|
||||
<!-- <h4>网格员</h4> -->
|
||||
<span class="span_2" id="gridSpan">
|
||||
<div class="module" v-for="grid in gridAdminList">
|
||||
@ -128,7 +163,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人员信息 -->
|
||||
@ -323,6 +357,7 @@
|
||||
dataType: 'JSON',
|
||||
headers: self.headers,
|
||||
success: function(data) {
|
||||
console.log(data)
|
||||
self.buildingData = data.data;
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user