|
|
|
@ -16,7 +16,7 @@ |
|
|
|
@change="handleChangeAgency" |
|
|
|
></el-cascader> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="上报时间" prop="startTime"> |
|
|
|
<el-form-item label="更新时间" prop="startTime"> |
|
|
|
<el-date-picker |
|
|
|
v-model="formData.startDate" |
|
|
|
:picker-options="startPickerOptions" |
|
|
|
@ -50,7 +50,7 @@ |
|
|
|
<div class="div_table_title">房屋用途统计</div> |
|
|
|
<div class="flex"> |
|
|
|
<div class="width1"> |
|
|
|
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> |
|
|
|
<div class="box"> |
|
|
|
<screen-echarts-frame |
|
|
|
@handelClickMyPei="handelClickMyPei" |
|
|
|
:style="{ width: '100%', height: '100%' }" |
|
|
|
@ -60,7 +60,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex1"> |
|
|
|
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> |
|
|
|
<div class="box"> |
|
|
|
<div class="legend"> |
|
|
|
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> |
|
|
|
<div class="kuai" :style="{ backgroundColor: color1[index] }"></div> |
|
|
|
@ -79,7 +79,7 @@ |
|
|
|
<div class="div_table_title">房屋状态统计</div> |
|
|
|
<div class="flex"> |
|
|
|
<div class="width1"> |
|
|
|
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> |
|
|
|
<div class="box"> |
|
|
|
<screen-echarts-frame2 |
|
|
|
@handelClickMyPei="handelClickMyPei2" |
|
|
|
:style="{ width: '100%', height: '100%' }" |
|
|
|
@ -89,7 +89,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex1"> |
|
|
|
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> |
|
|
|
<div class="box"> |
|
|
|
<div class="legend2"> |
|
|
|
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem2(item)"> |
|
|
|
<div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div> |
|
|
|
@ -122,14 +122,14 @@ |
|
|
|
style="width: 100%;" |
|
|
|
:height="maxTableHeight" |
|
|
|
> |
|
|
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|
|
|
<el-table-column prop="streetName" label="镇街" align="center" :show-overflow-tooltip="true" /> |
|
|
|
<el-table-column prop="districtName" label="区县" align="center" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="communityName" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="gridName" align="center" label="网格" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column label="序号" type="index" align="center" width="50" /> |
|
|
|
<el-table-column prop="streetName" width="110" label="镇街" align="center" :show-overflow-tooltip="true" /> |
|
|
|
<el-table-column prop="districtName" label="区县" width="110" align="center" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="communityName" width="110" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="gridName" align="center" width="110" label="网格" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="houseName" align="center" label="房屋名称" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="purposeName" align="center" label="房屋用途" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="rentFlagName" align="center" label="房屋状态" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="purposeName" align="center" width="110" label="房屋用途" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="rentFlagName" align="center" width="110" label="房屋状态" :show-overflow-tooltip="true"></el-table-column> |
|
|
|
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button size="small" type="text" @click="show(scope.row)">查看</el-button> |
|
|
|
@ -233,8 +233,8 @@ export default { |
|
|
|
pieInitState2: false, |
|
|
|
pieOption: [], |
|
|
|
pieOption2: [], |
|
|
|
color1: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915','#FEB349', '#FE6252', '#F44230', '#5DC7F0'], |
|
|
|
color2: ['#3C94FE', '#22C1C3', '#F0D915', '#FE6252', '#A17AFA', '#A19FFF', '#6FC364', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], |
|
|
|
color1: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], |
|
|
|
color2: ['#3C94FE', '#22C1C3', '#F0D915', '#FE6252', '#A17AFA', '#A19FFF', '#6FC364', '#FEB349', '#F44230', '#5DC7F0'], |
|
|
|
chartData: [], |
|
|
|
chartData2: [], |
|
|
|
pieData: [], |
|
|
|
@ -247,7 +247,7 @@ export default { |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
maxTableHeight() { |
|
|
|
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 675 + this.iframeHeigh : this.clientHeight - 675; |
|
|
|
this.TableHeight = this.$store.state.inIframe ? this.clientHeight - 638 + this.iframeHeigh : this.clientHeight - 638; |
|
|
|
return this.TableHeight; |
|
|
|
}, |
|
|
|
...mapGetters(['clientHeight', 'iframeHeight']) |
|
|
|
@ -469,7 +469,7 @@ export default { |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['65%', '80%'], |
|
|
|
radius: ['65%', '88%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
@ -478,12 +478,17 @@ export default { |
|
|
|
tooltip: { |
|
|
|
show: true |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
// 间隔 |
|
|
|
borderWidth: 2, |
|
|
|
borderColor: '#fff' |
|
|
|
}, |
|
|
|
|
|
|
|
data: chartData.data |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['60%', '65%'], |
|
|
|
radius: ['0%', '70%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
selectedMode: false, |
|
|
|
hoverAnimation: false, |
|
|
|
@ -500,6 +505,7 @@ export default { |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
|
|
|
|
animation: false, |
|
|
|
cursor: 'auto', |
|
|
|
emphasis: { |
|
|
|
@ -510,7 +516,7 @@ export default { |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['80%', '85%'], |
|
|
|
radius: ['88%', '100%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
selectedMode: false, |
|
|
|
hoverAnimation: false, |
|
|
|
@ -573,7 +579,7 @@ export default { |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['65%', '80%'], |
|
|
|
radius: ['65%', '88%'], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
@ -582,12 +588,17 @@ export default { |
|
|
|
tooltip: { |
|
|
|
show: true |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
// 间隔 |
|
|
|
borderWidth: 2, |
|
|
|
borderColor: '#fff' |
|
|
|
}, |
|
|
|
|
|
|
|
data: chartData.data |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['60%', '65%'], |
|
|
|
radius: ['0%', '70%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
selectedMode: false, |
|
|
|
hoverAnimation: false, |
|
|
|
@ -604,6 +615,7 @@ export default { |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
|
|
|
|
animation: false, |
|
|
|
cursor: 'auto', |
|
|
|
emphasis: { |
|
|
|
@ -614,7 +626,7 @@ export default { |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'pie', |
|
|
|
radius: ['80%', '85%'], |
|
|
|
radius: ['88%', '100%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
selectedMode: false, |
|
|
|
hoverAnimation: false, |
|
|
|
@ -777,8 +789,10 @@ export default { |
|
|
|
cursor: pointer; |
|
|
|
min-width: 100px; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 30px; |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-right: 25px; |
|
|
|
width: 160px; |
|
|
|
.kuai { |
|
|
|
width: 12px; |
|
|
|
height: 12px; |
|
|
|
@ -804,6 +818,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
//这个是单独的，带图片 |
|
|
|
.legend2 { |
|
|
|
// display: flex; |
|
|
|
// flex-flow: row wrap; |
|
|
|
@ -813,6 +828,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
margin-bottom: 16px; |
|
|
|
width: 160px; |
|
|
|
.kuai { |
|
|
|
margin-right: 10px; |
|
|
|
border-radius: 4px; |
|
|
|
@ -893,8 +909,14 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.div_table { |
|
|
|
padding: 30px !important; |
|
|
|
.table { |
|
|
|
margin-top: 16px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.div_table_title { |
|
|
|
margin-top: 20px; |
|
|
|
margin-top: -10px; |
|
|
|
line-height: 30px; |
|
|
|
font-size: 20px; |
|
|
|
|
|
|
|
@ -904,7 +926,7 @@ export default { |
|
|
|
.diy-button--output { |
|
|
|
width: 100px; |
|
|
|
height: 38px; |
|
|
|
|
|
|
|
z-index: 99; |
|
|
|
background: #feb349; |
|
|
|
box-shadow: 0px 2px 6px 0px rgba(198, 122, 16, 0.31); |
|
|
|
border-radius: 6px; |
|
|
|
@ -914,9 +936,23 @@ export default { |
|
|
|
display: flex; |
|
|
|
.width1 { |
|
|
|
width: 220px; |
|
|
|
margin-right: 50px; |
|
|
|
.box { |
|
|
|
height: 220px; |
|
|
|
margin-top: 20px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.flex1 { |
|
|
|
flex: 1; |
|
|
|
.box { |
|
|
|
height: 220px; |
|
|
|
margin-top: 20px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
tianq
3 years ago