1、首页统计-增加房屋类型统计
2、楼宇统计-增加房屋类型显示
This commit is contained in:
LiuY
parent
4e7e404684
commit
e3d8742e37
@ -135,7 +135,7 @@ body {
|
|||||||
background-color: rgba(255, 255, 255, .2);
|
background-color: rgba(255, 255, 255, .2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell_box span {
|
.top_box span {
|
||||||
/* display: flex; */
|
/* display: flex; */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|||||||
@ -45,13 +45,11 @@
|
|||||||
<div class="icon_2">
|
<div class="icon_2">
|
||||||
<img src="assets/home/images/bj222.png" alt="" style="width: 100%; height: 100%;">
|
<img src="assets/home/images/bj222.png" alt="" style="width: 100%; height: 100%;">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span>
|
<span>
|
||||||
<h5>稀土路街道</h5>
|
<h5>稀土路街道</h5>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<em>{{ xiTupersonCount }}</em>
|
<em>{{ xiTupersonCount }}</em>
|
||||||
<i>人</i>
|
<i>人</i>
|
||||||
@ -64,13 +62,11 @@
|
|||||||
<div class="icon_2">
|
<div class="icon_2">
|
||||||
<img src="assets/home/images/bj333.png" alt="" style="width: 100%; height: 100%;">
|
<img src="assets/home/images/bj333.png" alt="" style="width: 100%; height: 100%;">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span>
|
<span>
|
||||||
<h5>民馨路街道</h5>
|
<h5>民馨路街道</h5>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<em>{{ mingXinpersonCount }}</em>
|
<em>{{ mingXinpersonCount }}</em>
|
||||||
<i>人</i>
|
<i>人</i>
|
||||||
@ -83,13 +79,11 @@
|
|||||||
<div class="icon_2">
|
<div class="icon_2">
|
||||||
<img src="assets/home/images/bj444.png" alt="" style="width: 100%; height: 100%;">
|
<img src="assets/home/images/bj444.png" alt="" style="width: 100%; height: 100%;">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<span>
|
<span>
|
||||||
<h5>万水泉镇</h5>
|
<h5>万水泉镇</h5>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<em>{{ wanShuiQuanpersonCount }}</em>
|
<em>{{ wanShuiQuanpersonCount }}</em>
|
||||||
<i>人</i>
|
<i>人</i>
|
||||||
@ -133,7 +127,7 @@
|
|||||||
<!-- 右边页面 -->
|
<!-- 右边页面 -->
|
||||||
<div class="right_div">
|
<div class="right_div">
|
||||||
<!--政治面貌-->
|
<!--政治面貌-->
|
||||||
<div class="flex_r1 sub_div">
|
<div style="flex: 3;" class="sub_div">
|
||||||
<div class="politics">
|
<div class="politics">
|
||||||
<div class="politics_top">
|
<div class="politics_top">
|
||||||
<img src="assets/home/images/箭头.png" alt="">
|
<img src="assets/home/images/箭头.png" alt="">
|
||||||
@ -145,7 +139,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--性别统计-->
|
<!--性别统计-->
|
||||||
<div class="flex_r2 sub_div">
|
<div style="flex: 2;" class="sub_div">
|
||||||
<div class="gender">
|
<div class="gender">
|
||||||
<div class="gender_top">
|
<div class="gender_top">
|
||||||
<img src="assets/home/images/箭头.png" alt="">
|
<img src="assets/home/images/箭头.png" alt="">
|
||||||
@ -187,8 +181,22 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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">
|
||||||
<div class="special_top">
|
<div class="special_top">
|
||||||
<img src="assets/home/images/箭头.png" alt="">
|
<img src="assets/home/images/箭头.png" alt="">
|
||||||
@ -211,7 +219,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 社会保障类人员 -->
|
<!-- 社会保障类人员 -->
|
||||||
<!-- <div class="flex_r4 sub_div">
|
<!-- <div class="flex_r4 sub_div">
|
||||||
<div class="society">
|
<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(){
|
personShow: function(){
|
||||||
layer.open({
|
layer.open({
|
||||||
@ -897,6 +990,7 @@
|
|||||||
/*this.initProtectPerson();*/
|
/*this.initProtectPerson();*/
|
||||||
this.initPetitionRecord();
|
this.initPetitionRecord();
|
||||||
this.initSpecialPersonData();
|
this.initSpecialPersonData();
|
||||||
|
this.initHouseTyoeChart();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -10,29 +10,54 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
[v-clock] {display: none}
|
[v-clock] {display: none}
|
||||||
.table-a table {
|
.table-a table {
|
||||||
border-spacing: 0.07rem;
|
border-spacing: 0.07rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-a table td {
|
.table-a table td {
|
||||||
width: 0.5rem;
|
position: relative;
|
||||||
height: 0.15rem;
|
width: 0.5rem;
|
||||||
background-color: #FFFFFF;
|
height: 0.15rem;
|
||||||
text-align: center;
|
background-color: #FFFFFF;
|
||||||
}
|
/*text-align: center;*/
|
||||||
|
}
|
||||||
|
|
||||||
.blue-td {
|
.blue-td {
|
||||||
background-color: #478dd3 !important;
|
background-color: #478dd3 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.red-div {
|
|
||||||
background-color: #D76861 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.house-td:hover{
|
.house-td:hover{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: yellow !important;
|
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>
|
</style>
|
||||||
@ -57,11 +82,21 @@
|
|||||||
<tr v-for="floors in unit.house">
|
<tr v-for="floors in unit.house">
|
||||||
<td style="background-color: transparent"> {{ floors.follrs }}层</td>
|
<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>
|
||||||
<tr>
|
<tr>
|
||||||
<td style="background-color: transparent"></td>
|
<td style="background-color: transparent"></td>
|
||||||
<td colspan="99">{{ unit.unit }} 单元</td>
|
<td colspan="99" style="text-align: center">{{ unit.unit }} 单元</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
@ -103,9 +138,9 @@
|
|||||||
<!-- 网格员信息 -->
|
<!-- 网格员信息 -->
|
||||||
<div class="div_flex_1 sub_div">
|
<div class="div_flex_1 sub_div">
|
||||||
<div class="grid_inspector ">
|
<div class="grid_inspector ">
|
||||||
<span class="span_1">
|
<span class="span_1">
|
||||||
<h4>网格员</h4>
|
<h4>网格员</h4>
|
||||||
</span>
|
</span>
|
||||||
<!-- <h4>网格员</h4> -->
|
<!-- <h4>网格员</h4> -->
|
||||||
<span class="span_2" id="gridSpan">
|
<span class="span_2" id="gridSpan">
|
||||||
<div class="module" v-for="grid in gridAdminList">
|
<div class="module" v-for="grid in gridAdminList">
|
||||||
@ -128,7 +163,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 人员信息 -->
|
<!-- 人员信息 -->
|
||||||
@ -323,6 +357,7 @@
|
|||||||
dataType: 'JSON',
|
dataType: 'JSON',
|
||||||
headers: self.headers,
|
headers: self.headers,
|
||||||
success: function(data) {
|
success: function(data) {
|
||||||
|
console.log(data)
|
||||||
self.buildingData = data.data;
|
self.buildingData = data.data;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user