tianqian
3 years ago
32 changed files with 7636 additions and 1726 deletions
File diff suppressed because it is too large
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-bread"> |
|||
<div class="line"> |
|||
<div class="line-left"></div> |
|||
<div class="line-right"></div> |
|||
</div> |
|||
<div class="bread"> |
|||
<el-breadcrumb :separator="separator"> |
|||
<el-breadcrumb-item v-for="(item, index) in breadList" :key="'b' + index"> |
|||
<span class="bread-span" @click="handleClickItem(item)">{{ item.meta.title }}</span> |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
<div class="line"> |
|||
<div class="line-left"></div> |
|||
<div class="line-right"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
mapGetters |
|||
} from "vuex"; |
|||
export default { |
|||
name: "bread", |
|||
components: {}, |
|||
props: { |
|||
//分隔符 |
|||
separator: { |
|||
type: String, |
|||
default: "/", |
|||
}, |
|||
//面包屑列表 |
|||
breadList: { |
|||
type: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, |
|||
pageNo: 1, |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
computed: { |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
mounted() {}, |
|||
created() {}, |
|||
methods: { |
|||
handleClickItem(item) { |
|||
this.$emit("tap", { |
|||
item |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.m-bread { |
|||
padding: 0 0 15px 0; |
|||
|
|||
.bread { |
|||
margin: 4px 0; |
|||
padding: 8px 16px; |
|||
height: 40px; |
|||
background: rgba(26, 149, 255, 0.15); |
|||
width: 100%; |
|||
|
|||
/deep/ .el-breadcrumb__item { |
|||
line-height: 25px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/deep/ .el-breadcrumb__item .el-breadcrumb__inner { |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner { |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
|
|||
/deep/ .bread-span { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.router_parents { |
|||
line-height: 25px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
|
|||
.arrow { |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
|
|||
.router_parents:hover { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.router_child { |
|||
line-height: 25px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
display: flex; |
|||
width: 100%; |
|||
|
|||
.line-left { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
flex-basis: 16px; |
|||
height: 1px; |
|||
background: #1a95ff; |
|||
} |
|||
|
|||
.line-right { |
|||
flex-grow: 1; |
|||
flex-shrink: 1; |
|||
flex-basis: 0px; |
|||
height: 1px; |
|||
background: rgba(26, 149, 255, 0.45); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
import * as echarts from 'echarts' |
|||
export function barOption () { |
|||
|
|||
return { |
|||
title: { |
|||
text: '单位（户）', |
|||
left: 5, |
|||
textStyle: { |
|||
|
|||
fontSize: 14, |
|||
color: " rgba(255,255,255,0.65)", |
|||
fontWeight: 400, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
// legend: {},
|
|||
grid: { |
|||
top:40, |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: 19, |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisLine: { |
|||
lineStyle: { |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
|
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
max : 1000, |
|||
splitNumber : 5, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle:{ |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
} |
|||
], |
|||
series: [ |
|||
|
|||
{ |
|||
name: '自住房屋', |
|||
type: 'bar', |
|||
stack: 'Ad', |
|||
barWidth:12, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#6FDEFF' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '出租房屋', |
|||
type: 'bar', |
|||
barWidth:12, |
|||
stack: 'Ad', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#1A95FF' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '闲置房屋', |
|||
type: 'bar', |
|||
barWidth:12, |
|||
stack: 'Ad', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: '#FFAA00' }, |
|||
{ offset: 1, color: 'rgba(168,241,255,0)' } |
|||
]) |
|||
}, |
|||
data: [] |
|||
}, |
|||
|
|||
|
|||
] |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
import * as echarts from 'echarts' |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
title: { |
|||
text: "0", |
|||
top: 45, |
|||
left: "center", |
|||
textStyle: { |
|||
width: "100%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
fontWeight: 400, |
|||
}, |
|||
itemGap: 5, |
|||
// subtext: "总数",
|
|||
// subtextStyle: {
|
|||
// fontSize: 20,
|
|||
// color: "#fff",
|
|||
// fontWeight: 400,
|
|||
// },
|
|||
}, |
|||
tooltip: { |
|||
show: false, |
|||
}, |
|||
// legend: {
|
|||
// top: 350,
|
|||
// bottom: 0,
|
|||
// itemWidth: 20,
|
|||
// itemHeight: 10,
|
|||
// textStyle: {
|
|||
// color: '#D2E7FF',
|
|||
// fontSize: 16,
|
|||
// lineHeight: 20,
|
|||
// },
|
|||
|
|||
// },
|
|||
series: [ |
|||
{ |
|||
name: 'Access From', |
|||
type: 'pie', |
|||
radius: ['60%', '90%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
// emphasis: {
|
|||
// label: {
|
|||
// show: true,
|
|||
// fontSize: 40,
|
|||
// fontWeight: 'bold'
|
|||
// }
|
|||
// },
|
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: (list) => { |
|||
// 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
|
|||
var colorList = [ |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#6FDEFF' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#FFAA00' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#1A95FF' |
|||
}, |
|||
|
|||
] |
|||
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
|
|||
offset: 0, |
|||
color: colorList[list.dataIndex]['colorStart'] |
|||
}, { |
|||
offset: 1, |
|||
color: colorList[list.dataIndex]['colorEnd'] |
|||
}]) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
data: [ |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
@ -0,0 +1,540 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-fwgl"> |
|||
<div class="m-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
<div class="pie-legend"> |
|||
<div class="item"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">自住房屋</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo2"></div> |
|||
<div class="item-name">出租房屋</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo3"></div> |
|||
<div class="item-name">闲置房屋</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie-right"> |
|||
<div class="right-row"> |
|||
<div class="row-item" @click="toListPage"> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">房屋总数</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.house_count }}</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="row-item marginleft10" |
|||
@click="toListPage('self_dwelling', '自住')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">自住房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num"> |
|||
{{ info.self_dwelling_count }} |
|||
</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="right-row margintop18" |
|||
@click="toListPage('lease', '出租')" |
|||
> |
|||
<div class="row-item"> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">出租房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.lease_count }}</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="row-item marginleft10" |
|||
@click="toListPage('unused', '闲置')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/house-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">闲置房屋</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.unused_count }}</div> |
|||
<div class="unit">户</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-bar"> |
|||
<div class="bar-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">近一年房屋状态变化趋势图</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
<div class="bar-legend"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">自住房屋</div> |
|||
<div class="item-logo logo2 marginleft10"></div> |
|||
<div class="item-name">出租房屋</div> |
|||
<div class="item-logo logo3 marginleft10"></div> |
|||
<div class="item-name">闲置房屋</div> |
|||
</div> |
|||
<div class="bar-main"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="barInitOk" |
|||
ref="barChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- <screen-nodata class="nodata" |
|||
v-if="showNoData"></screen-nodata> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { pieOption } from "./fwPieOption.js"; |
|||
import { barOption } from "./fwBarOption.js"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
barChart: "", |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
barOption: {}, |
|||
pieInitState: false, |
|||
barInitState: false, |
|||
pieData: [], |
|||
|
|||
info: { |
|||
house_count: 0, |
|||
self_dwelling_count: 0, |
|||
lease_count: 0, |
|||
unused_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getData(); |
|||
}, |
|||
watch: { |
|||
orgId() { |
|||
this.getData(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
toListPage(type = "", type_name = "") { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/house-list", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_name, |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
barInitOk() { |
|||
this.barInitState = true; |
|||
}, |
|||
async getData() { |
|||
await this.getInfo(); |
|||
this.getBar(); |
|||
this.getPie(); |
|||
}, |
|||
getBar() { |
|||
if (this.barInitState) { |
|||
this.getBarData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getBar(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.iniPieChart(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "house_view"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60007107, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { ...this.info, ...info }; |
|||
} else { |
|||
this.info = { |
|||
house_count: 0, |
|||
self_dwelling_count: 0, |
|||
lease_count: 0, |
|||
unused_count: 0, |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// this.$refs.pieChart.showLoading() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
|
|||
const { info } = this; |
|||
// 设置三个配置值 |
|||
this.pieOption.title.text = |
|||
(info.house_count != 0 |
|||
? parseInt( |
|||
(100 * info.self_dwelling_count) / info.house_count |
|||
) |
|||
: "--") + "%"; |
|||
this.pieData = [ |
|||
{ value: info.self_dwelling_count, name: "自住房屋" }, |
|||
{ value: info.lease_count, name: "出租房屋" }, |
|||
{ value: info.unused_count, name: "闲置房屋" }, |
|||
]; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
// this.$refs.pieChart.hideLoading() |
|||
|
|||
// 点击饼图 切换中心显示的比例 |
|||
this.$refs.pieChart.myChart.on("selectchanged", (params) => { |
|||
console.log(params); |
|||
const { |
|||
fromActionPayload: { dataIndexInside }, |
|||
} = params; |
|||
this.pieOption.title.text = |
|||
(info.house_count != 0 |
|||
? parseInt( |
|||
(100 * |
|||
[ |
|||
info.self_dwelling_count, |
|||
info.lease_count, |
|||
info.unused_count, |
|||
][dataIndexInside]) / |
|||
info.house_count |
|||
) |
|||
: "--") + "%"; |
|||
this.$refs.pieChart.myChart.setOption(this.pieOption); |
|||
}); |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getBarData() { |
|||
const url = "house_trend"; |
|||
|
|||
this.$refs.barChart.showLoading(); |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60388110, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
let xaxis = []; |
|||
let series = [{ data: [] }, { data: [] }, { data: [] }]; |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
for (const { |
|||
month, |
|||
self_dwelling_count, |
|||
lease_count, |
|||
unused_count, |
|||
} of data) { |
|||
xaxis.push(month); |
|||
series[0].data.push(self_dwelling_count); |
|||
series[1].data.push(lease_count); |
|||
series[2].data.push(unused_count); |
|||
} |
|||
} |
|||
this.iniBarChart(xaxis, series); |
|||
this.$refs.barChart.hideLoading(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniBarChart(xaxis, series) { |
|||
this.showNoData = false; |
|||
this.$refs.barChart.clear(); |
|||
// let xaxis = [ |
|||
// "1月", |
|||
// "2月", |
|||
// "3月", |
|||
// "4月", |
|||
// "5月", |
|||
// "6月", |
|||
// "7月", |
|||
// "8月", |
|||
// "9月", |
|||
// "10月", |
|||
// "11月", |
|||
// "12月", |
|||
// ]; |
|||
// let series = [ |
|||
// { |
|||
// data: [ |
|||
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, |
|||
// 90, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// data: [ |
|||
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, |
|||
// 90, |
|||
// ], |
|||
// }, |
|||
// { |
|||
// data: [ |
|||
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, |
|||
// 90, |
|||
// ], |
|||
// }, |
|||
// ]; |
|||
this.barOption = barOption(); |
|||
this.$refs.barChart.setOption(this.barOption, true); |
|||
this.$refs.barChart.setOption( |
|||
{ |
|||
xAxis: { data: xaxis }, |
|||
series: series, |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-fwgl { |
|||
height: 100%; |
|||
width: 100%; |
|||
|
|||
.m-pie { |
|||
margin-top: 24px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.pie-left { |
|||
height: 120px; |
|||
flex: 0 0 120px; |
|||
} |
|||
|
|||
.pie-legend { |
|||
.item { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
} |
|||
} |
|||
.pie-right { |
|||
.right-row { |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
|
|||
.row-item { |
|||
flex: 0 0 100px; |
|||
cursor: pointer; |
|||
.item-one { |
|||
display: flex; |
|||
.img { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
.title { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
} |
|||
|
|||
.item-two { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-left: 23px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-bar { |
|||
position: relative; |
|||
margin-top: 14px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
align-items: center; |
|||
// margin-left: 24px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.bar-legend { |
|||
position: absolute; |
|||
top: 37px; |
|||
right: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.bar-main { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item-name { |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #8c8c8c; |
|||
} |
|||
|
|||
.item-logo { |
|||
margin-top: 2px; |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
|
|||
.logo1 { |
|||
background: #6fdeff; |
|||
} |
|||
.logo2 { |
|||
background: #ffaa00; |
|||
} |
|||
.logo3 { |
|||
background: #1a95ff; |
|||
} |
|||
.marginleft10 { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.margintop18 { |
|||
margin-top: 18px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,340 @@ |
|||
<template> |
|||
<div class="m-wtqd"> |
|||
<div class="tablist"> |
|||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="currentTab = item">{{ item }}</div> |
|||
</div> |
|||
<div class="pieMain"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="content"> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie"><screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import screenEchartsFrame from '@/views/dataBoard/cpts/screen-echarts-frame/index'; |
|||
import { pieOption } from './fwqdPieOption.js'; |
|||
import { requestPostBi } from '@/js/dai/request-bipass'; |
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
tabList: [ |
|||
'公共服务', |
|||
'个性服务' |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: '公共服务', |
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0 |
|||
} |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
} |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
this.getPie(); |
|||
}, |
|||
handleClickItem(item) { |
|||
const { type, name } = item; |
|||
this.$router.push({ |
|||
path: '/dataBoard/renfang/resi-analyze', |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_category: this.currentTab, |
|||
type_name: name |
|||
} |
|||
}); |
|||
}, |
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = 'resident_analyze'; |
|||
this.$refs.pieChart.showLoading(); |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId |
|||
} |
|||
}, |
|||
{ |
|||
// mockId: 60041615, |
|||
} |
|||
); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { |
|||
...this.info, |
|||
...info |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
const { currentTab, info } = this; |
|||
if (currentTab == '性别') { |
|||
this.pieData = [ |
|||
{ |
|||
value: info.male_count || 0, |
|||
type: 'male_count', |
|||
name: '男性' |
|||
}, |
|||
{ |
|||
value: info.female_count || 0, |
|||
type: 'female_count', |
|||
name: '女性' |
|||
} |
|||
]; |
|||
} else if (currentTab == '户籍') { |
|||
this.pieData = [ |
|||
{ |
|||
value: info.local_count || 0, |
|||
type: 'local_count', |
|||
name: '本地户籍' |
|||
}, |
|||
{ |
|||
value: info.field_count || 0, |
|||
type: 'field_count', |
|||
name: '外地户籍' |
|||
} |
|||
]; |
|||
} else if (currentTab == '人户状况') { |
|||
this.pieData = [ |
|||
{ |
|||
value: info.resi_y_house_y_count || 0, |
|||
type: 'resi_y_house_y_count', |
|||
name: '人户一致' |
|||
}, |
|||
{ |
|||
value: info.resi_y_house_n_count || 0, |
|||
type: 'resi_y_house_n_count', |
|||
name: '人在户不在' |
|||
}, |
|||
{ |
|||
value: info.resi_n_house_y_count || 0, |
|||
type: 'resi_n_house_y_count', |
|||
name: '户在人不在' |
|||
} |
|||
]; |
|||
} else if (currentTab == '年龄') { |
|||
this.pieData = [ |
|||
{ |
|||
value: info.age50_count || 0, |
|||
type: 'age50_count', |
|||
name: '50岁以下' |
|||
}, |
|||
{ |
|||
value: info.age5059_count || 0, |
|||
type: 'age5059_count', |
|||
name: '50-59岁' |
|||
}, |
|||
{ |
|||
value: info.age6069_count || 0, |
|||
type: 'age6069_count', |
|||
name: '60-69岁' |
|||
}, |
|||
{ |
|||
value: info.age7079_count || 0, |
|||
type: 'age7079_count', |
|||
name: '70-79岁' |
|||
}, |
|||
{ |
|||
value: info.age80_count || 0, |
|||
type: 'age80_count', |
|||
name: '80岁以上' |
|||
} |
|||
]; |
|||
} else if (currentTab == '志愿者类别') { |
|||
this.pieData = [ |
|||
{ |
|||
value: info.culture_count || 0, |
|||
type: 'culture_count', |
|||
name: '文化队伍' |
|||
}, |
|||
{ |
|||
value: info.committee_count || 0, |
|||
type: 'committee_count', |
|||
name: '楼委会' |
|||
}, |
|||
{ |
|||
value: info.capable_count || 0, |
|||
type: 'capable_count', |
|||
name: '能人达人' |
|||
}, |
|||
{ |
|||
value: info.friend_count || 0, |
|||
type: 'friend_count', |
|||
name: '老友俱乐部' |
|||
}, |
|||
{ |
|||
value: info.agent_count || 0, |
|||
type: 'agent_count', |
|||
name: '代办员' |
|||
}, |
|||
{ |
|||
value: info.mediator_count || 0, |
|||
type: 'mediator_count', |
|||
name: '调解员' |
|||
}, |
|||
{ |
|||
value: info.collector_count || 0, |
|||
type: 'collector_count', |
|||
name: '采集员' |
|||
}, |
|||
{ |
|||
value: info.security_count || 0, |
|||
type: 'security_count', |
|||
name: '治安巡逻员' |
|||
}, |
|||
{ |
|||
value: info.party_mem_count || 0, |
|||
type: 'party_mem_count', |
|||
name: '党员中心户' |
|||
} |
|||
]; |
|||
} else if (currentTab == '党员文化程度') { |
|||
this.pieData = [ |
|||
{ |
|||
value: info.primary_count || 0, |
|||
type: 'primary_count', |
|||
name: '小学及文盲' |
|||
}, |
|||
{ |
|||
value: info.junior_high_count || 0, |
|||
type: 'junior_high_count', |
|||
name: '初中' |
|||
}, |
|||
{ |
|||
value: info.second_speci_count || 0, |
|||
type: 'second_speci_count', |
|||
name: '中专' |
|||
}, |
|||
{ |
|||
value: info.high_school_count || 0, |
|||
type: 'high_school_count', |
|||
name: '高中' |
|||
}, |
|||
{ |
|||
value: info.junior_college_count || 0, |
|||
type: 'junior_college_count', |
|||
name: '大专' |
|||
}, |
|||
{ |
|||
value: info.undergrad_count || 0, |
|||
type: 'undergrad_count', |
|||
name: '本科' |
|||
}, |
|||
{ |
|||
value: info.master_count || 0, |
|||
type: 'master_count', |
|||
name: '硕士' |
|||
}, |
|||
{ |
|||
value: info.doctor_count || 0, |
|||
type: 'doctor_count', |
|||
name: '博士' |
|||
} |
|||
]; |
|||
} else if (currentTab == '下级人口分布') { |
|||
this.pieData = []; |
|||
} |
|||
this.iniPieChart(); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
|||
@ -0,0 +1,54 @@ |
|||
import * as echarts from "echarts"; |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: [ |
|||
"#1A95FF", |
|||
"#FF6138", |
|||
"#2adcea", |
|||
"#2cc4ad", |
|||
"#7377f5", |
|||
"#32de66", |
|||
"#8155d4", |
|||
"#c7ea48", |
|||
"#ef47c2", |
|||
"d43349", |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "pie", |
|||
radius: [40, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 1, |
|||
}, |
|||
avoidLabelOverlap: false, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
label: { |
|||
normal: { |
|||
position: "inner", |
|||
show: true, |
|||
formatter: "{d}%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
// fontSize: 36,
|
|||
fontWeight: "bold", |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
} |
|||
@ -0,0 +1,140 @@ |
|||
import * as echarts from 'echarts' |
|||
export function barOption () { |
|||
|
|||
return { |
|||
title: { |
|||
text: '单位（人）', |
|||
left: 5, |
|||
textStyle: { |
|||
|
|||
fontSize: 14, |
|||
color: " rgba(255,255,255,0.65)", |
|||
fontWeight: 400, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
// legend: {},
|
|||
grid: { |
|||
top:40, |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: 19, |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
axisLine: { |
|||
lineStyle: { |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
|
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
max : 1000, |
|||
splitNumber : 5, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle:{ |
|||
color:'rgba(255,255,255,0.15)', |
|||
width: 1, |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: true, |
|||
textStyle: { |
|||
color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
|
|||
fontSize : 12 //更改坐标轴文字大小
|
|||
} |
|||
}, |
|||
} |
|||
], |
|||
series: [ |
|||
|
|||
{ |
|||
name: '常住人口', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
barWidth:12, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: "#FFAA00", //图例颜色
|
|||
borderWidth: 2, |
|||
borderColor: "#FFAA00", |
|||
lineStyle: { color: "#FFAA00", width: 1 } |
|||
} |
|||
}, |
|||
|
|||
areaStyle: { |
|||
normal: { |
|||
// 渐变填充色（线条下半部分）
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#FFAA00" }, |
|||
{ offset: 1, color: "rgba(255,170,0,0)" } |
|||
]) |
|||
} |
|||
}, |
|||
|
|||
data: [] |
|||
}, |
|||
{ |
|||
name: '流动人口', |
|||
type: 'line', |
|||
barWidth:12, |
|||
stack: 'Total', |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: "#1A95FF", //图例颜色
|
|||
borderWidth: 2, |
|||
borderColor: "#1A95FF", |
|||
lineStyle: { color: "#1A95FF", width: 1 } |
|||
} |
|||
}, |
|||
|
|||
areaStyle: { |
|||
normal: { |
|||
// 渐变填充色（线条下半部分）
|
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ offset: 0, color: "#1A95FF" }, |
|||
{ offset: 1, color: "rgba(255,170,0,0)" } |
|||
]) |
|||
} |
|||
}, |
|||
data: [] |
|||
}, |
|||
|
|||
|
|||
|
|||
] |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
import * as echarts from 'echarts' |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
title: { |
|||
text: "0", |
|||
top: 45, |
|||
left: "center", |
|||
textStyle: { |
|||
width: "100%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
fontWeight: 400, |
|||
}, |
|||
itemGap: 5, |
|||
// subtext: "总数",
|
|||
// subtextStyle: {
|
|||
// fontSize: 20,
|
|||
// color: "#fff",
|
|||
// fontWeight: 400,
|
|||
// },
|
|||
}, |
|||
tooltip: { |
|||
show: false, |
|||
}, |
|||
// legend: {
|
|||
// top: 350,
|
|||
// bottom: 0,
|
|||
// itemWidth: 20,
|
|||
// itemHeight: 10,
|
|||
// textStyle: {
|
|||
// color: '#D2E7FF',
|
|||
// fontSize: 16,
|
|||
// lineHeight: 20,
|
|||
// },
|
|||
|
|||
// },
|
|||
series: [ |
|||
{ |
|||
name: 'Access From', |
|||
type: 'pie', |
|||
radius: ['60%', '90%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
// emphasis: {
|
|||
// label: {
|
|||
// show: true,
|
|||
// fontSize: 40,
|
|||
// fontWeight: 'bold'
|
|||
// }
|
|||
// },
|
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: (list) => { |
|||
// 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
|
|||
var colorList = [ |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#6FDEFF' |
|||
}, |
|||
{ |
|||
colorStart:'#00023A', |
|||
colorEnd:'#FFAA00' |
|||
}, |
|||
|
|||
|
|||
] |
|||
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
|
|||
offset: 0, |
|||
color: colorList[list.dataIndex]['colorStart'] |
|||
}, { |
|||
offset: 1, |
|||
color: colorList[list.dataIndex]['colorEnd'] |
|||
}]) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
data: [ |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
@ -0,0 +1,482 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-jmgl"> |
|||
<div class="m-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
<div class="pie-legend"> |
|||
<div class="item"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">常住人口</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-logo logo2"></div> |
|||
<div class="item-name">流动人口</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie-right"> |
|||
<div class="right-row"> |
|||
<div class="row-item" @click="toListPage"> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">居民总数</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.resident_count }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="row-item marginleft10" |
|||
@click="toListPage('permanent', '常住人口')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">常住人口</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num"> |
|||
{{ info.inhabitant_count }} |
|||
</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right-row margintop18"> |
|||
<div |
|||
class="row-item" |
|||
@click="toListPage('float', '流动人口')" |
|||
> |
|||
<div class="item-one"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/jm-logo.png" |
|||
alt |
|||
/> |
|||
<div class="title">流动人口</div> |
|||
</div> |
|||
<div class="item-two"> |
|||
<div class="num">{{ info.floating_count }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-bar"> |
|||
<div class="bar-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">近一年人口流动变化趋势图</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
<div class="bar-legend"> |
|||
<div class="item-logo logo1"></div> |
|||
<div class="item-name">常住人口</div> |
|||
<div class="item-logo logo2 marginleft10"></div> |
|||
<div class="item-name">流动人口</div> |
|||
</div> |
|||
<div class="bar-main"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="barInitOk" |
|||
ref="barChart" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- <screen-nodata class="nodata" |
|||
v-if="showNoData"></screen-nodata> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { pieOption } from "./jmPieOption.js"; |
|||
import { barOption } from "./jmBarOption.js"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
// mixins: [animate] |
|||
beforeDestroy() { |
|||
this.timer && clearInterval(this.timer); |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
barChart: "", |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
barOption: {}, |
|||
pieInitState: false, |
|||
barInitState: false, |
|||
pieData: [], |
|||
|
|||
info: { |
|||
resident_count: 0, |
|||
inhabitant_count: 0, |
|||
floating_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
orgId() { |
|||
this.getData(); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getData(); |
|||
}, |
|||
methods: { |
|||
toListPage(type = "", type_name = "") { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-list", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_name, |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
barInitOk() { |
|||
this.barInitState = true; |
|||
}, |
|||
async getData() { |
|||
await this.getInfo(); |
|||
this.getBar(); |
|||
this.getPie(); |
|||
}, |
|||
getBar() { |
|||
if (this.barInitState) { |
|||
this.getBarData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getBar(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.iniPieChart(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_view"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60029804, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { ...this.info, ...info }; |
|||
} else { |
|||
this.info = { |
|||
resident_count: 0, |
|||
inhabitant_count: 0, |
|||
floating_count: 0, |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// this.$refs.pieChart.showLoading() |
|||
|
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
|
|||
const { info } = this; |
|||
// 设置三个配置值 |
|||
this.pieOption.title.text = |
|||
(info.resident_count != 0 |
|||
? parseInt( |
|||
(100 * info.inhabitant_count) / info.resident_count |
|||
) |
|||
: "--") + "%"; |
|||
this.pieData = [ |
|||
{ value: info.inhabitant_count, name: "常住人口" }, |
|||
{ value: info.floating_count, name: "流动人口" }, |
|||
]; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
// this.$refs.pieChart.hideLoading() |
|||
|
|||
// 点击饼图 切换中心显示的比例 |
|||
this.$refs.pieChart.myChart.on("selectchanged", (params) => { |
|||
console.log(params); |
|||
const { |
|||
fromActionPayload: { dataIndexInside }, |
|||
} = params; |
|||
this.pieOption.title.text = |
|||
(info.resident_count != 0 |
|||
? parseInt( |
|||
(100 * |
|||
[ |
|||
info.inhabitant_count, |
|||
info.floating_count, |
|||
][dataIndexInside]) / |
|||
info.resident_count |
|||
) |
|||
: "--") + "%"; |
|||
this.$refs.pieChart.myChart.setOption(this.pieOption); |
|||
}); |
|||
}, |
|||
|
|||
// 获取房屋总数等 |
|||
async getBarData() { |
|||
const url = "resident_trend"; |
|||
|
|||
this.$refs.barChart.showLoading(); |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60389779, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
if (data && Array.isArray(data)) { |
|||
let xaxis = []; |
|||
let series = [{ data: [] }, { data: [] }]; |
|||
for (const { |
|||
month, |
|||
inhabitant_count, |
|||
floating_count, |
|||
} of data) { |
|||
xaxis.push(month); |
|||
series[0].data.push(inhabitant_count); |
|||
series[1].data.push(floating_count); |
|||
} |
|||
this.iniBarChart(xaxis, series); |
|||
this.$refs.barChart.hideLoading(); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
// 获取饼状图 |
|||
async iniBarChart(xaxis, series) { |
|||
this.showNoData = false; |
|||
this.$refs.barChart.clear(); |
|||
this.barOption = barOption(); |
|||
this.$refs.barChart.setOption(this.barOption, true); |
|||
this.$refs.barChart.setOption( |
|||
{ |
|||
xAxis: { data: xaxis }, |
|||
series, |
|||
}, |
|||
true |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.m-jmgl { |
|||
height: 100%; |
|||
width: 100%; |
|||
|
|||
.m-pie { |
|||
margin-top: 24px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.pie-left { |
|||
height: 120px; |
|||
flex: 0 0 120px; |
|||
} |
|||
|
|||
.pie-legend { |
|||
.item { |
|||
display: flex; |
|||
margin-bottom: 12px; |
|||
} |
|||
} |
|||
.pie-right { |
|||
.right-row { |
|||
display: flex; |
|||
// justify-content: space-between; |
|||
|
|||
.row-item { |
|||
flex: 0 0 100px; |
|||
cursor: pointer; |
|||
|
|||
.item-one { |
|||
display: flex; |
|||
.img { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
.title { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
} |
|||
|
|||
.item-two { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-left: 23px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-bar { |
|||
position: relative; |
|||
margin-top: 14px; |
|||
|
|||
.bar-title { |
|||
display: flex; |
|||
align-items: center; |
|||
// margin-left: 24px; |
|||
|
|||
.title_img { |
|||
width: 17px; |
|||
height: 17px; |
|||
} |
|||
.tip_title { |
|||
margin-left: 8px; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.title_line { |
|||
margin-left: 8px; |
|||
width: 244px; |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(55, 198, 255, 0.1) 0%, |
|||
#1995ff 100% |
|||
); |
|||
} |
|||
} |
|||
|
|||
.bar-legend { |
|||
position: absolute; |
|||
top: 37px; |
|||
right: 20px; |
|||
display: flex; |
|||
} |
|||
|
|||
.bar-main { |
|||
margin-top: 10px; |
|||
height: 225px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item-name { |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #8c8c8c; |
|||
} |
|||
|
|||
.item-logo { |
|||
margin-top: 2px; |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
|
|||
.logo1 { |
|||
background: #6fdeff; |
|||
} |
|||
.logo2 { |
|||
background: #ffaa00; |
|||
} |
|||
.logo3 { |
|||
background: #1a95ff; |
|||
} |
|||
.marginleft10 { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.margintop18 { |
|||
margin-top: 18px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,281 @@ |
|||
<template> |
|||
<div class="m-list"> |
|||
<div class="title"> |
|||
<div>预警居民类别</div> |
|||
<div> |
|||
<span>黄色预警</span> |
|||
<div class="explain"> |
|||
<img |
|||
class="btn-explain" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
/> |
|||
<div class="explain-box"> |
|||
<div |
|||
class="explain-item" |
|||
v-for="(dataitem, index) in list" |
|||
:key="index" |
|||
> |
|||
<span>{{ dataitem.type_name }}：</span> |
|||
<b>{{ dataitem.yellow_threshold }}人</b> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<span>红色预警</span> |
|||
<div class="explain"> |
|||
<img |
|||
class="btn-explain" |
|||
src="@/assets/images/shuju/renfang/remark.png" |
|||
/> |
|||
<div class="explain-box"> |
|||
<div |
|||
class="explain-item" |
|||
v-for="(dataitem, index) in list" |
|||
:key="index" |
|||
> |
|||
<span>{{ dataitem.type_name }}：</span> |
|||
<b>{{ dataitem.red_threshold }}人</b> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="list"> |
|||
<div v-for="(dataitem, index) in list" :key="index" class="item"> |
|||
<div class="item-title">{{ dataitem.type_name }}</div> |
|||
|
|||
<div |
|||
class="item-num" |
|||
@click=" |
|||
toListPage('yellow', dataitem.type, dataitem.type_name) |
|||
" |
|||
> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/warning-yellow.png" |
|||
alt |
|||
/>{{ dataitem.yellow_warn }}栋 |
|||
</div> |
|||
|
|||
<div |
|||
class="item-num" |
|||
@click=" |
|||
toListPage('red', dataitem.type, dataitem.type_name) |
|||
" |
|||
> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/warning-red.png" |
|||
alt |
|||
/>{{ dataitem.red_warn }}栋 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="empty" v-if="list.length == 0"> |
|||
<img src="~@/assets/images/shuju/renfang/index/empty.png" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
type: "", |
|||
type_name: "--", |
|||
yellow_warn: "--", |
|||
red_warn: "--", |
|||
yellow_threshold: "--", |
|||
red_threshold: "--", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
|
|||
watch: { |
|||
orgId() { |
|||
this.getList(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
toListPage(level, type_id = "", type_name) { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/warn-building", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type_id, |
|||
type_name, |
|||
level, |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
async getList() { |
|||
const url = "resident_class_warn"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60040087, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
if (data && Array.isArray(data)) { |
|||
this.list = data; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
.m-list { |
|||
padding-bottom: 20px; |
|||
|
|||
.title { |
|||
margin: 24px 0 24px 24px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
|
|||
> div { |
|||
width: 33%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
&:first-child { |
|||
text-align: left; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.explain { |
|||
position: relative; |
|||
margin-left: 4px; |
|||
.btn-explain { |
|||
width: 15px; |
|||
height: 15px; |
|||
} |
|||
&:hover { |
|||
.explain-box { |
|||
display: block; |
|||
} |
|||
} |
|||
.explain-box { |
|||
position: absolute; |
|||
display: none; |
|||
top: 30px; |
|||
left: -140px; |
|||
padding: 15px 5px; |
|||
box-sizing: border-box; |
|||
width: 180px; |
|||
background: #00023a; |
|||
border-radius: 2px; |
|||
border: 1px solid #1a95ff; |
|||
|
|||
.explain-item { |
|||
@include toe; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(#ffffff, 0.85); |
|||
line-height: 28px; |
|||
|
|||
span { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
min-width: 90px; |
|||
text-align: right; |
|||
color: rgba(#ffffff, 0.65); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
/deep/ .el-scrollbar__wrap { |
|||
// width: 100% !important; |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
.item { |
|||
padding: 12px 20px 12px 24px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.item-title { |
|||
width: 33%; |
|||
} |
|||
|
|||
.item-num { |
|||
width: 33%; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
.img { |
|||
display: inline-block; |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
} |
|||
.item:nth-child(2n-1) { |
|||
background: rgba(26, 149, 255, 0.15); |
|||
} |
|||
} |
|||
|
|||
.empty { |
|||
> img { |
|||
display: block; |
|||
width: 120px; |
|||
margin: 0 auto; |
|||
margin-top: 80px; |
|||
} |
|||
> span { |
|||
margin-top: 8px; |
|||
display: block; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 20px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<div> |
|||
<div class="tablist"> |
|||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="currentTab = item">{{ item }}</div> |
|||
</div> |
|||
<div> |
|||
<div class="linecharts" v-if="resiCategoryData.length > 0"> |
|||
<div class="item" @click="toResiClassPage(item.code, item.name)" :key="item.code + index" v-for="(item, index) in resiCategoryData"> |
|||
<div>{{ ('0' + (index + 1)).substr(-2) }}.</div> |
|||
<div class="item-name">{{ item.name }}</div> |
|||
<div class="item-count"> |
|||
<b>{{ item.count }}</b> |
|||
人 |
|||
</div> |
|||
<div class="item-progress"><b :style="{ width: item.ratio + '%' }"></b></div> |
|||
<div class="item-per"> |
|||
<span>较上月</span> |
|||
<img v-if="item.growth >= 0" src="~@/assets/images/shuju/renfang/index/up.png" /> |
|||
<img v-else src="~@/assets/images/shuju/renfang/index/down.png" /> |
|||
<b>{{ item.growthAbs }}</b> |
|||
<span>人</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="empty" v-else><img src="~@/assets/images/shuju/renfang/index/empty.png" /></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import screenEchartsFrame from '@/views/dataBoard/cpts/screen-echarts-frame/index'; |
|||
import { requestPostBi } from '@/js/dai/request-bipass'; |
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
resiCategoryData: [], |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: '', |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
tabList: [ |
|||
'满意度', |
|||
'关注度', |
|||
'期盼度', |
|||
'烦心度' |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: '满意度', |
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0 |
|||
} |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.getResiCategoryData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
} |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
this.getResiCategoryData(); |
|||
}, |
|||
handleClickItem(item) { |
|||
const { type, name } = item; |
|||
this.$router.push({ |
|||
path: '/dataBoard/renfang/resi-analyze', |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_category: this.currentTab, |
|||
type_name: name |
|||
} |
|||
}); |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
async getResiCategoryData() { |
|||
console.log('=========================getResiCategoryData'); |
|||
const url = 'resident_class_statics'; |
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId |
|||
} |
|||
}, |
|||
{ |
|||
// mockId: 60031937, |
|||
} |
|||
); |
|||
if (code === 0) { |
|||
this.resiCategoryData = data.map(item => { |
|||
return { |
|||
code: item.label_id, |
|||
name: item.label, |
|||
count: item.count, |
|||
ratio: item.ratio, |
|||
growth: item.growth, |
|||
growthAbs: Math.abs(item.growth) |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
|||
@ -0,0 +1,197 @@ |
|||
<template> |
|||
<div class="szsq-main"> |
|||
<div class="item"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt |
|||
/> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">社区开通占比</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">{{ info.per }}</span> |
|||
<span class="unit">%</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt |
|||
/> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">社区总数</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">{{ info.community_count }}</span> |
|||
<span class="unit">个</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<img |
|||
class="img" |
|||
src="@/assets/images/shuju/renfang/szsq-logo.png" |
|||
alt |
|||
/> |
|||
<div class="content"> |
|||
<div class="row1"> |
|||
<div class="title">开通数量</div> |
|||
<div class="line"></div> |
|||
</div> |
|||
<div class="row2"> |
|||
<span class="num">{{ info.account_count }}</span> |
|||
<span class="unit">个</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
|
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
info: { |
|||
per: "--", |
|||
community_count: "--", |
|||
account_count: "--", |
|||
}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getInfo(); |
|||
}, |
|||
|
|||
watch: { |
|||
orgId() { |
|||
this.getInfo(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 社区开通占比 |
|||
async getInfo() { |
|||
const url = "account_view"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 61305622, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info.community_count = info.community_count; |
|||
this.info.account_count = info.account_count; |
|||
this.info.per = parseInt( |
|||
(100 * info.account_count) / info.community_count |
|||
); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.szsq-main { |
|||
margin-top: 22px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
.item { |
|||
display: flex; |
|||
|
|||
.img { |
|||
width: 24px; |
|||
height: 24px; |
|||
} |
|||
|
|||
&:first-child { |
|||
.img { |
|||
margin-top: -5px; |
|||
width: 64px; |
|||
height: 64px; |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 5px; |
|||
margin-left: 15px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
margin-top: 5px; |
|||
margin-left: 5px; |
|||
|
|||
.row1 { |
|||
.title { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
padding-left: 8px; |
|||
} |
|||
|
|||
.line { |
|||
margin-top: -6px; |
|||
width: 88px; |
|||
height: 8px; |
|||
background: linear-gradient( |
|||
270deg, |
|||
rgba(168, 241, 255, 0) 0%, |
|||
#6fdeff 100% |
|||
); |
|||
opacity: 0.25; |
|||
} |
|||
} |
|||
|
|||
.row2 { |
|||
margin-top: 4px; |
|||
padding-left: 8px; |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 33px; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 9px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,318 @@ |
|||
<template> |
|||
<div class="m-wtqd"> |
|||
<div class="tablist"> |
|||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" |
|||
@click="currentTab = item"> |
|||
{{ item }} |
|||
</div> |
|||
</div> |
|||
<div class="pieMain"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="content"> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie"> |
|||
<screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { |
|||
pieOption |
|||
} from "./wtqdPieOption.js"; |
|||
import { |
|||
requestPostBi |
|||
} from "@/js/dai/request-bipass"; |
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
tabList: ["治理事件", "安全隐患", "综治人群" |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: "治理事件", |
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
this.getPie(); |
|||
}, |
|||
handleClickItem(item) { |
|||
const { |
|||
type, |
|||
name |
|||
} = item; |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-analyze", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_category: this.currentTab, |
|||
type_name: name, |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_analyze"; |
|||
this.$refs.pieChart.showLoading(); |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60041615, |
|||
}); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { |
|||
...this.info, |
|||
...info |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
const { |
|||
currentTab, |
|||
info |
|||
} = this; |
|||
if (currentTab == "性别") { |
|||
this.pieData = [{ |
|||
value: info.male_count || 0, |
|||
type: "male_count", |
|||
name: "男性", |
|||
}, { |
|||
value: info.female_count || 0, |
|||
type: "female_count", |
|||
name: "女性", |
|||
}, ]; |
|||
} else if (currentTab == "户籍") { |
|||
this.pieData = [{ |
|||
value: info.local_count || 0, |
|||
type: "local_count", |
|||
name: "本地户籍", |
|||
}, { |
|||
value: info.field_count || 0, |
|||
type: "field_count", |
|||
name: "外地户籍", |
|||
}, ]; |
|||
} else if (currentTab == "人户状况") { |
|||
this.pieData = [{ |
|||
value: info.resi_y_house_y_count || 0, |
|||
type: "resi_y_house_y_count", |
|||
name: "人户一致", |
|||
}, { |
|||
value: info.resi_y_house_n_count || 0, |
|||
type: "resi_y_house_n_count", |
|||
name: "人在户不在", |
|||
}, { |
|||
value: info.resi_n_house_y_count || 0, |
|||
type: "resi_n_house_y_count", |
|||
name: "户在人不在", |
|||
}, ]; |
|||
} else if (currentTab == "年龄") { |
|||
this.pieData = [{ |
|||
value: info.age50_count || 0, |
|||
type: "age50_count", |
|||
name: "50岁以下", |
|||
}, { |
|||
value: info.age5059_count || 0, |
|||
type: "age5059_count", |
|||
name: "50-59岁", |
|||
}, { |
|||
value: info.age6069_count || 0, |
|||
type: "age6069_count", |
|||
name: "60-69岁", |
|||
}, { |
|||
value: info.age7079_count || 0, |
|||
type: "age7079_count", |
|||
name: "70-79岁", |
|||
}, { |
|||
value: info.age80_count || 0, |
|||
type: "age80_count", |
|||
name: "80岁以上", |
|||
}, ]; |
|||
} else if (currentTab == "志愿者类别") { |
|||
this.pieData = [{ |
|||
value: info.culture_count || 0, |
|||
type: "culture_count", |
|||
name: "文化队伍", |
|||
}, { |
|||
value: info.committee_count || 0, |
|||
type: "committee_count", |
|||
name: "楼委会", |
|||
}, { |
|||
value: info.capable_count || 0, |
|||
type: "capable_count", |
|||
name: "能人达人", |
|||
}, { |
|||
value: info.friend_count || 0, |
|||
type: "friend_count", |
|||
name: "老友俱乐部", |
|||
}, { |
|||
value: info.agent_count || 0, |
|||
type: "agent_count", |
|||
name: "代办员", |
|||
}, { |
|||
value: info.mediator_count || 0, |
|||
type: "mediator_count", |
|||
name: "调解员", |
|||
}, { |
|||
value: info.collector_count || 0, |
|||
type: "collector_count", |
|||
name: "采集员", |
|||
}, { |
|||
value: info.security_count || 0, |
|||
type: "security_count", |
|||
name: "治安巡逻员", |
|||
}, { |
|||
value: info.party_mem_count || 0, |
|||
type: "party_mem_count", |
|||
name: "党员中心户", |
|||
}, ]; |
|||
} else if (currentTab == "党员文化程度") { |
|||
this.pieData = [{ |
|||
value: info.primary_count || 0, |
|||
type: "primary_count", |
|||
name: "小学及文盲", |
|||
}, { |
|||
value: info.junior_high_count || 0, |
|||
type: "junior_high_count", |
|||
name: "初中", |
|||
}, { |
|||
value: info.second_speci_count || 0, |
|||
type: "second_speci_count", |
|||
name: "中专", |
|||
}, { |
|||
value: info.high_school_count || 0, |
|||
type: "high_school_count", |
|||
name: "高中", |
|||
}, { |
|||
value: info.junior_college_count || 0, |
|||
type: "junior_college_count", |
|||
name: "大专", |
|||
}, { |
|||
value: info.undergrad_count || 0, |
|||
type: "undergrad_count", |
|||
name: "本科", |
|||
}, { |
|||
value: info.master_count || 0, |
|||
type: "master_count", |
|||
name: "硕士", |
|||
}, { |
|||
value: info.doctor_count || 0, |
|||
type: "doctor_count", |
|||
name: "博士", |
|||
}, ]; |
|||
} else if (currentTab == "下级人口分布") { |
|||
this.pieData = []; |
|||
} |
|||
this.iniPieChart(); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
|||
@ -0,0 +1,54 @@ |
|||
import * as echarts from "echarts"; |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: [ |
|||
"#1A95FF", |
|||
"#FF6138", |
|||
"#2adcea", |
|||
"#2cc4ad", |
|||
"#7377f5", |
|||
"#32de66", |
|||
"#8155d4", |
|||
"#c7ea48", |
|||
"#ef47c2", |
|||
"d43349", |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "pie", |
|||
radius: [40, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 1, |
|||
}, |
|||
avoidLabelOverlap: false, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
label: { |
|||
normal: { |
|||
position: "inner", |
|||
show: true, |
|||
formatter: "{d}%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
// fontSize: 36,
|
|||
fontWeight: "bold", |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
} |
|||
@ -0,0 +1,319 @@ |
|||
<template> |
|||
<div class="m-xqqd"> |
|||
<div class="tablist"> |
|||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" |
|||
@click="currentTab = item"> |
|||
{{ item }} |
|||
</div> |
|||
</div> |
|||
<div class="pieMain"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="content"> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie"> |
|||
<screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { |
|||
pieOption |
|||
} from "./xqqdPieOption.js"; |
|||
import { |
|||
requestPostBi |
|||
} from "@/js/dai/request-bipass"; |
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
tabList: ["个性需求", "共性需求" |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: "个性需求", |
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
this.getPie(); |
|||
}, |
|||
handleClickItem(item) { |
|||
const { |
|||
type, |
|||
name |
|||
} = item; |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-analyze", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_category: this.currentTab, |
|||
type_name: name, |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_analyze"; |
|||
this.$refs.pieChart.showLoading(); |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60041615, |
|||
}); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { |
|||
...this.info, |
|||
...info |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
const { |
|||
currentTab, |
|||
info |
|||
} = this; |
|||
if (currentTab == "性别") { |
|||
this.pieData = [{ |
|||
value: info.male_count || 0, |
|||
type: "male_count", |
|||
name: "男性", |
|||
}, { |
|||
value: info.female_count || 0, |
|||
type: "female_count", |
|||
name: "女性", |
|||
}, ]; |
|||
} else if (currentTab == "户籍") { |
|||
this.pieData = [{ |
|||
value: info.local_count || 0, |
|||
type: "local_count", |
|||
name: "本地户籍", |
|||
}, { |
|||
value: info.field_count || 0, |
|||
type: "field_count", |
|||
name: "外地户籍", |
|||
}, ]; |
|||
} else if (currentTab == "人户状况") { |
|||
this.pieData = [{ |
|||
value: info.resi_y_house_y_count || 0, |
|||
type: "resi_y_house_y_count", |
|||
name: "人户一致", |
|||
}, { |
|||
value: info.resi_y_house_n_count || 0, |
|||
type: "resi_y_house_n_count", |
|||
name: "人在户不在", |
|||
}, { |
|||
value: info.resi_n_house_y_count || 0, |
|||
type: "resi_n_house_y_count", |
|||
name: "户在人不在", |
|||
}, ]; |
|||
} else if (currentTab == "年龄") { |
|||
this.pieData = [{ |
|||
value: info.age50_count || 0, |
|||
type: "age50_count", |
|||
name: "50岁以下", |
|||
}, { |
|||
value: info.age5059_count || 0, |
|||
type: "age5059_count", |
|||
name: "50-59岁", |
|||
}, { |
|||
value: info.age6069_count || 0, |
|||
type: "age6069_count", |
|||
name: "60-69岁", |
|||
}, { |
|||
value: info.age7079_count || 0, |
|||
type: "age7079_count", |
|||
name: "70-79岁", |
|||
}, { |
|||
value: info.age80_count || 0, |
|||
type: "age80_count", |
|||
name: "80岁以上", |
|||
}, ]; |
|||
} else if (currentTab == "志愿者类别") { |
|||
this.pieData = [{ |
|||
value: info.culture_count || 0, |
|||
type: "culture_count", |
|||
name: "文化队伍", |
|||
}, { |
|||
value: info.committee_count || 0, |
|||
type: "committee_count", |
|||
name: "楼委会", |
|||
}, { |
|||
value: info.capable_count || 0, |
|||
type: "capable_count", |
|||
name: "能人达人", |
|||
}, { |
|||
value: info.friend_count || 0, |
|||
type: "friend_count", |
|||
name: "老友俱乐部", |
|||
}, { |
|||
value: info.agent_count || 0, |
|||
type: "agent_count", |
|||
name: "代办员", |
|||
}, { |
|||
value: info.mediator_count || 0, |
|||
type: "mediator_count", |
|||
name: "调解员", |
|||
}, { |
|||
value: info.collector_count || 0, |
|||
type: "collector_count", |
|||
name: "采集员", |
|||
}, { |
|||
value: info.security_count || 0, |
|||
type: "security_count", |
|||
name: "治安巡逻员", |
|||
}, { |
|||
value: info.party_mem_count || 0, |
|||
type: "party_mem_count", |
|||
name: "党员中心户", |
|||
}, ]; |
|||
} else if (currentTab == "党员文化程度") { |
|||
this.pieData = [{ |
|||
value: info.primary_count || 0, |
|||
type: "primary_count", |
|||
name: "小学及文盲", |
|||
}, { |
|||
value: info.junior_high_count || 0, |
|||
type: "junior_high_count", |
|||
name: "初中", |
|||
}, { |
|||
value: info.second_speci_count || 0, |
|||
type: "second_speci_count", |
|||
name: "中专", |
|||
}, { |
|||
value: info.high_school_count || 0, |
|||
type: "high_school_count", |
|||
name: "高中", |
|||
}, { |
|||
value: info.junior_college_count || 0, |
|||
type: "junior_college_count", |
|||
name: "大专", |
|||
}, { |
|||
value: info.undergrad_count || 0, |
|||
type: "undergrad_count", |
|||
name: "本科", |
|||
}, { |
|||
value: info.master_count || 0, |
|||
type: "master_count", |
|||
name: "硕士", |
|||
}, { |
|||
value: info.doctor_count || 0, |
|||
type: "doctor_count", |
|||
name: "博士", |
|||
}, ]; |
|||
} else if (currentTab == "下级人口分布") { |
|||
this.pieData = []; |
|||
} |
|||
this.iniPieChart(); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
|||
@ -0,0 +1,54 @@ |
|||
import * as echarts from "echarts"; |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: [ |
|||
"#1A95FF", |
|||
"#FF6138", |
|||
"#2adcea", |
|||
"#2cc4ad", |
|||
"#7377f5", |
|||
"#32de66", |
|||
"#8155d4", |
|||
"#c7ea48", |
|||
"#ef47c2", |
|||
"d43349", |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "pie", |
|||
radius: [40, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 1, |
|||
}, |
|||
avoidLabelOverlap: false, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
label: { |
|||
normal: { |
|||
position: "inner", |
|||
show: true, |
|||
formatter: "{d}%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
// fontSize: 36,
|
|||
fontWeight: "bold", |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
} |
|||
@ -0,0 +1,319 @@ |
|||
<template> |
|||
<div class="m-zyqd"> |
|||
<div class="tablist"> |
|||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" |
|||
@click="currentTab = item"> |
|||
{{ item }} |
|||
</div> |
|||
</div> |
|||
<div class="pieMain"> |
|||
<div class="legend"> |
|||
<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="content"> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie"> |
|||
<screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { |
|||
pieOption |
|||
} from "./fwqdPieOption.js"; |
|||
import { |
|||
requestPostBi |
|||
} from "@/js/dai/request-bipass"; |
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
tabList: ["人资源", "物资源", "场所资源" |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: "人资源", |
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
this.getPie(); |
|||
}, |
|||
handleClickItem(item) { |
|||
const { |
|||
type, |
|||
name |
|||
} = item; |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-analyze", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_category: this.currentTab, |
|||
type_name: name, |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_analyze"; |
|||
this.$refs.pieChart.showLoading(); |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60041615, |
|||
}); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { |
|||
...this.info, |
|||
...info |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
const { |
|||
currentTab, |
|||
info |
|||
} = this; |
|||
if (currentTab == "性别") { |
|||
this.pieData = [{ |
|||
value: info.male_count || 0, |
|||
type: "male_count", |
|||
name: "男性", |
|||
}, { |
|||
value: info.female_count || 0, |
|||
type: "female_count", |
|||
name: "女性", |
|||
}, ]; |
|||
} else if (currentTab == "户籍") { |
|||
this.pieData = [{ |
|||
value: info.local_count || 0, |
|||
type: "local_count", |
|||
name: "本地户籍", |
|||
}, { |
|||
value: info.field_count || 0, |
|||
type: "field_count", |
|||
name: "外地户籍", |
|||
}, ]; |
|||
} else if (currentTab == "人户状况") { |
|||
this.pieData = [{ |
|||
value: info.resi_y_house_y_count || 0, |
|||
type: "resi_y_house_y_count", |
|||
name: "人户一致", |
|||
}, { |
|||
value: info.resi_y_house_n_count || 0, |
|||
type: "resi_y_house_n_count", |
|||
name: "人在户不在", |
|||
}, { |
|||
value: info.resi_n_house_y_count || 0, |
|||
type: "resi_n_house_y_count", |
|||
name: "户在人不在", |
|||
}, ]; |
|||
} else if (currentTab == "年龄") { |
|||
this.pieData = [{ |
|||
value: info.age50_count || 0, |
|||
type: "age50_count", |
|||
name: "50岁以下", |
|||
}, { |
|||
value: info.age5059_count || 0, |
|||
type: "age5059_count", |
|||
name: "50-59岁", |
|||
}, { |
|||
value: info.age6069_count || 0, |
|||
type: "age6069_count", |
|||
name: "60-69岁", |
|||
}, { |
|||
value: info.age7079_count || 0, |
|||
type: "age7079_count", |
|||
name: "70-79岁", |
|||
}, { |
|||
value: info.age80_count || 0, |
|||
type: "age80_count", |
|||
name: "80岁以上", |
|||
}, ]; |
|||
} else if (currentTab == "志愿者类别") { |
|||
this.pieData = [{ |
|||
value: info.culture_count || 0, |
|||
type: "culture_count", |
|||
name: "文化队伍", |
|||
}, { |
|||
value: info.committee_count || 0, |
|||
type: "committee_count", |
|||
name: "楼委会", |
|||
}, { |
|||
value: info.capable_count || 0, |
|||
type: "capable_count", |
|||
name: "能人达人", |
|||
}, { |
|||
value: info.friend_count || 0, |
|||
type: "friend_count", |
|||
name: "老友俱乐部", |
|||
}, { |
|||
value: info.agent_count || 0, |
|||
type: "agent_count", |
|||
name: "代办员", |
|||
}, { |
|||
value: info.mediator_count || 0, |
|||
type: "mediator_count", |
|||
name: "调解员", |
|||
}, { |
|||
value: info.collector_count || 0, |
|||
type: "collector_count", |
|||
name: "采集员", |
|||
}, { |
|||
value: info.security_count || 0, |
|||
type: "security_count", |
|||
name: "治安巡逻员", |
|||
}, { |
|||
value: info.party_mem_count || 0, |
|||
type: "party_mem_count", |
|||
name: "党员中心户", |
|||
}, ]; |
|||
} else if (currentTab == "党员文化程度") { |
|||
this.pieData = [{ |
|||
value: info.primary_count || 0, |
|||
type: "primary_count", |
|||
name: "小学及文盲", |
|||
}, { |
|||
value: info.junior_high_count || 0, |
|||
type: "junior_high_count", |
|||
name: "初中", |
|||
}, { |
|||
value: info.second_speci_count || 0, |
|||
type: "second_speci_count", |
|||
name: "中专", |
|||
}, { |
|||
value: info.high_school_count || 0, |
|||
type: "high_school_count", |
|||
name: "高中", |
|||
}, { |
|||
value: info.junior_college_count || 0, |
|||
type: "junior_college_count", |
|||
name: "大专", |
|||
}, { |
|||
value: info.undergrad_count || 0, |
|||
type: "undergrad_count", |
|||
name: "本科", |
|||
}, { |
|||
value: info.master_count || 0, |
|||
type: "master_count", |
|||
name: "硕士", |
|||
}, { |
|||
value: info.doctor_count || 0, |
|||
type: "doctor_count", |
|||
name: "博士", |
|||
}, ]; |
|||
} else if (currentTab == "下级人口分布") { |
|||
this.pieData = []; |
|||
} |
|||
this.iniPieChart(); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
|||
@ -0,0 +1,54 @@ |
|||
import * as echarts from "echarts"; |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: [ |
|||
"#1A95FF", |
|||
"#FF6138", |
|||
"#2adcea", |
|||
"#2cc4ad", |
|||
"#7377f5", |
|||
"#32de66", |
|||
"#8155d4", |
|||
"#c7ea48", |
|||
"#ef47c2", |
|||
"d43349", |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "", |
|||
type: "pie", |
|||
radius: [40, 130], |
|||
center: ["50%", "50%"], |
|||
roseType: "area", |
|||
itemStyle: { |
|||
borderRadius: 1, |
|||
}, |
|||
avoidLabelOverlap: false, |
|||
labelLine: { |
|||
show: false, |
|||
}, |
|||
label: { |
|||
normal: { |
|||
position: "inner", |
|||
show: true, |
|||
formatter: "{d}%", |
|||
fontSize: 24, |
|||
color: "#FFFFFF", |
|||
}, |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
// fontSize: 36,
|
|||
fontWeight: "bold", |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
} |
|||
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
|
|||
<house-details |
|||
@close="displayedHouseId = ''" |
|||
:house-id="displayedHouseId" |
|||
v-if="displayedHouseId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import houseDetails from "@/views/dataBoard/cpts/house-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "house-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
houseDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "房屋列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "房屋列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
houseType: "", // 流动 常驻 全部 |
|||
|
|||
loading: true, |
|||
pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"所属小区", |
|||
"所属楼栋", |
|||
"单元号", |
|||
"门牌号", |
|||
"房屋类型", |
|||
"房屋用途", |
|||
"房屋状态", |
|||
"房主姓名", |
|||
"联系电话", |
|||
"证件号", |
|||
"操作", |
|||
], |
|||
|
|||
displayedHouseId: "", |
|||
}; |
|||
}, |
|||
|
|||
activated() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.houseType = getQueryPara("type"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.breadList[1].meta.title = type_name + "房屋列表"; |
|||
this.tableTitle = type_name + "房屋列表"; |
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedHouseId = item.house_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
localStorage.setItem('dataBoard_PageSize', pageSize); |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, houseType, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "house_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type: houseType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60068051, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.village ? item.village : "--", |
|||
item.building ? item.building : "--", |
|||
item.unit ? item.unit : "--", |
|||
item.door ? item.door : "--", |
|||
item.house_type ? item.house_type : "--", |
|||
item.house_usage ? item.house_usage : "--", |
|||
item.house_state ? item.house_state : "--", |
|||
item.holder_name ? item.holder_name : "--", |
|||
item.holder_phone ? item.holder_phone : "--", |
|||
item.holder_idcard ? item.holder_idcard : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCount() { |
|||
const { org_id, houseType, pageNo, pageSize } = this; |
|||
|
|||
const url = "house_list_total"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type: houseType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 63070189, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
this.total = parseInt(data[0].count); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,594 @@ |
|||
<template> |
|||
<div> |
|||
<cpt-bread @tap="clickBreadItem" v-if="breadList.length > 1" :bread-list="breadList" /> |
|||
<div class="g-row"> |
|||
<div class="g-left"> |
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img src="~@/assets/images/shuju/main/card-title-bg-480.png" class="box-title-bg" /> |
|||
<div class="box-title-txt">需求清单</div> |
|||
</div> |
|||
<div class="m-subbox"> |
|||
<xqqd :orgId="orgData.org_id"></xqqd> |
|||
</div> |
|||
</div> |
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img src="~@/assets/images/shuju/main/card-title-bg-480.png" class="box-title-bg" /> |
|||
<div class="box-title-txt">问题清单</div> |
|||
</div> |
|||
<div class="m-subbox"> |
|||
<wtqd :orgId="orgData.org_id"></wtqd> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="g-center"> |
|||
<div class="m-map"> |
|||
<div class="m-per"> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/lnr.png" />老年人 |
|||
</div> |
|||
<div> |
|||
<b>{{ perInfo.aged_ratio }}</b> % |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/qsn.png" />青少年 |
|||
</div> |
|||
<div> |
|||
<b>{{ perInfo.teenagers_ratio }}</b> % |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/zyz.png" />志愿者 |
|||
</div> |
|||
<div> |
|||
<b>{{ perInfo.volunteer_ratio }}</b> % |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/dy.png" />党员 |
|||
</div> |
|||
<div> |
|||
<b>{{ perInfo.crowd_ratio }}</b> % |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/syry.png" />失业人员 |
|||
</div> |
|||
<div> |
|||
<b>{{ perInfo.unemployed_ratio }}</b> % |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="item-info"> |
|||
<div> |
|||
<img src="~@/assets/images/shuju/renfang/index/per/ygxl.png" /> 月更新率 |
|||
</div> |
|||
<div> |
|||
<b>{{ perInfo.month_update_ratio }}</b> % |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" |
|||
@clickDotBtn="handleClickDotBtn" /> |
|||
</div> |
|||
<div class="m-search"> |
|||
<div class="btn" @click="searchModule.displayedCard = true"> |
|||
<img src="~@/assets/images/shuju/renfang/index/search/btn-bg.png" class="btn-bg" /> |
|||
<img src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png" class="btn-bg-hover" /> |
|||
<span>点击搜索</span> |
|||
</div> |
|||
<div class="card" v-show="searchModule.displayedCard"> |
|||
<div class="card-input"> |
|||
<div class="card-btn" @click="handleSearch"> |
|||
<img src="~@/assets/images/shuju/renfang/index/search/search.png" /> |
|||
</div> |
|||
<input type="text" placeholder="搜索本组织及下级的居民、小区、楼栋、房屋" @keyup.enter="handleSearch" |
|||
v-model="searchModule.keyword" /> |
|||
<div class="i-div"></div> |
|||
<div class="card-btn" @click="searchModule.displayedCard = false"> |
|||
<img src="~@/assets/images/shuju/renfang/index/search/close.png" /> |
|||
</div> |
|||
</div> |
|||
<div class="card-show"> |
|||
<div class="card-tabs"> |
|||
<div :class="{ |
|||
'z-on': searchModule.resultTab == '0', |
|||
}" @click="searchModule.resultTab = '0'"> 全部 </div> |
|||
<div :class="{ |
|||
'z-on': searchModule.resultTab == '1', |
|||
}" @click="searchModule.resultTab = '1'"> 居民 </div> |
|||
<div :class="{ |
|||
'z-on': searchModule.resultTab == '2', |
|||
}" @click="searchModule.resultTab = '2'"> 小区 </div> |
|||
<div :class="{ |
|||
'z-on': searchModule.resultTab == '3', |
|||
}" @click="searchModule.resultTab = '3'"> 楼栋 </div> |
|||
<div :class="{ |
|||
'z-on': searchModule.resultTab == '4', |
|||
}" @click="searchModule.resultTab = '4'"> 房屋 </div> |
|||
</div> |
|||
<div class="card-list" v-if="searchModule.result.length > 0"> |
|||
<div class="card-item" :key="item.title + index" @click="handleClickSearchItem(item)" |
|||
v-for="(item, index) in searchModule.result"> |
|||
<span>{{ item.title }}</span> |
|||
<img src="~@/assets/images/shuju/renfang/index/search/arrow.png" class="i-arrow" /> |
|||
<img src="~@/assets/images/shuju/renfang/index/search/arrow-on.png" |
|||
class="i-arrow z-on" /> |
|||
</div> |
|||
</div> |
|||
<div class="card-empty" v-else> |
|||
<img src="~@/assets/images/shuju/renfang/index/empty.png" /> |
|||
<span>没有找到搜索结果～</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-box "> |
|||
<div class="box-title"> |
|||
<img src="~@/assets/images/shuju/main/card-title-bg-800.png" class="box-title-bg" /> |
|||
<div class="box-title-txt" v-if="!displayedForecast"> 社区评价 </div> |
|||
</div> |
|||
<div class="m-subbox "> |
|||
<sqpj :orgId="orgData.org_id"></sqpj> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="g-right"> |
|||
<div class="m-box" v-if="orgLevel == 'district' ||orgLevel == 'street' ||orgLevel == 'city'"> |
|||
<div class="box-title"> |
|||
<img src="~@/assets/images/shuju/main/card-title-bg-480.png" class="box-title-bg" /> |
|||
<div class="box-title-txt">数字社区</div> |
|||
</div> |
|||
<div class="m-subbox "> |
|||
<szsq :orgId="orgData.org_id"></szsq> |
|||
</div> |
|||
</div> |
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img src="~@/assets/images/shuju/main/card-title-bg-480.png" class="box-title-bg" /> |
|||
<div class="box-title-txt">服务清单</div> |
|||
</div> |
|||
<div class="m-subbox " :class="{ |
|||
'z-shrink': |
|||
orgLevel == 'district' || |
|||
orgLevel == 'street' || |
|||
orgLevel == 'city', |
|||
}"> |
|||
<fwqd :orgId="orgData.org_id"></fwqd> |
|||
</div> |
|||
</div> |
|||
<div class="m-box"> |
|||
<div class="box-title"> |
|||
<img src="~@/assets/images/shuju/main/card-title-bg-480.png" class="box-title-bg" /> |
|||
<div class="box-title-txt">资源清单</div> |
|||
</div> |
|||
<div class="m-subbox"> |
|||
<zyqd :orgId="orgData.org_id"></zyqd> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<cpt-loading v-show="false" /> |
|||
</div> |
|||
<resi-details @close="displayedResiId = ''" :resi-id="displayedResiId" v-if="displayedResiId" /> |
|||
<house-details @close="displayedHouseId = ''" :house-id="displayedHouseId" v-if="displayedHouseId" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import gridMap from "@/views/dataBoard/cpts/map/index"; |
|||
import xqqd from "@/views/dataBoard/sida/cpts/xqqd"; |
|||
import wtqd from "@/views/dataBoard/sida/cpts/wtqd"; |
|||
import zyqd from "@/views/dataBoard/sida/cpts/zyqd"; |
|||
import fwqd from "@/views/dataBoard/sida/cpts/fwqd"; |
|||
import szsq from "@/views/dataBoard/sida/cpts/szsq"; |
|||
import sqpj from "@/views/dataBoard/sida/cpts/sqpj"; |
|||
|
|||
import cptBread from "@/views/dataBoard/sida/cpts/bread"; |
|||
import cptLoading from "@/views/dataBoard/cpts/loading"; |
|||
import houseDetails from "@/views/dataBoard/cpts/house-details"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { |
|||
requestPostBi |
|||
} from "@/js/dai/request-bipass"; |
|||
import { |
|||
requestPost |
|||
} from "@/js/dai/request"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
function iniGetPerInfo() { |
|||
return { |
|||
unemployed_ratio: "--", |
|||
crowd_ratio: "--", |
|||
volunteer_ratio: "--", |
|||
month_update_ratio: "--", |
|||
aged_ratio: "--", |
|||
teenagers_ratio: "--", |
|||
}; |
|||
} |
|||
export default { |
|||
name: "renfang", |
|||
components: { |
|||
gridMap, |
|||
xqqd, |
|||
wtqd, |
|||
zyqd, |
|||
fwqd, |
|||
szsq, |
|||
sqpj, |
|||
cptLoading, |
|||
cptBread, |
|||
houseDetails, |
|||
resiDetails, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
orgData: { |
|||
children: [], |
|||
}, //当前组织对象 |
|||
orgId: "", |
|||
orgLevel: "", |
|||
breadList: [{ |
|||
orgId: "", |
|||
orgLevel: "", |
|||
meta: { |
|||
title: "人房总览" |
|||
}, |
|||
}, ], |
|||
resiCategoryData: [], // 居民分类分析 |
|||
resiCategoryForecastData: [], // 居民分类预测 |
|||
displayedForecast: false, //显示居民分类分析 还是居民分类预测 |
|||
searchModule: { |
|||
displayedCard: false, |
|||
keyword: "", |
|||
resultTab: "0", // 0所有 1，居民；2，小区；3，楼栋；4，房屋 |
|||
result: [ |
|||
// { |
|||
// id: 1, |
|||
// title: "四季景园", |
|||
// }, |
|||
], |
|||
}, |
|||
perInfo: iniGetPerInfo(), |
|||
displayedResiId: "", |
|||
displayedHouseId: "", |
|||
}; |
|||
}, |
|||
mounted() { |
|||
const queryOrgId = getQueryPara("orgId"); |
|||
const queryOrgLevel = getQueryPara("orgLevel"); |
|||
this.init(queryOrgId, queryOrgLevel); |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
async init(queryOrgId, queryOrgLevel) { |
|||
if (queryOrgId) { |
|||
this.orgId = queryOrgId; |
|||
this.orgLevel = queryOrgLevel || "agency"; |
|||
} else { |
|||
this.orgId = this.$store.state.user.agencyId; |
|||
this.orgLevel = "agency"; |
|||
} |
|||
//加载组织数据 |
|||
this.loading = false; |
|||
// await this.loadOrgData(); |
|||
await this.getMapData(); |
|||
await this.getSubMapData(); |
|||
|
|||
this.getResiCategoryForecastData(); |
|||
this.getPerInfo(); |
|||
this.loading = true; |
|||
}, |
|||
toResiClassPage(type_id = "", type_name) { |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-class", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type_id, |
|||
type_name, |
|||
}, |
|||
}); |
|||
}, |
|||
handleClickDotBtn(type, info) { |
|||
console.log("handleClickDotBtn", type, info); |
|||
if (type == "watch-resi") { |
|||
this.displayedResiId = info.user_id; |
|||
} else if (type == "watch-house") { |
|||
this.displayedHouseId = info.house_id; |
|||
} |
|||
}, |
|||
clickBreadItem({ |
|||
item |
|||
}) { |
|||
this.toBread(item); |
|||
}, |
|||
clickAgencyItem(item) { |
|||
console.log(item); |
|||
this.toBread({ |
|||
orgId: item.id, |
|||
orgLevel: item.level, |
|||
meta: { |
|||
title: item.name |
|||
}, |
|||
}); |
|||
}, |
|||
toBread(item) { |
|||
const { |
|||
orgId |
|||
} = item; |
|||
const { |
|||
breadList |
|||
} = this; |
|||
let index = breadList.findIndex((val) => val.orgId === orgId); |
|||
// return console.log(item, breadList, index); |
|||
if (index >= 0) { |
|||
this.breadList = breadList.slice(0, index + 1); |
|||
} else { |
|||
breadList.push(item); |
|||
this.breadList = breadList; |
|||
} |
|||
this.init(item.orgId, item.orgLevel); |
|||
}, |
|||
// 点击搜索结果条目，在地图上显示点和详情弹窗 |
|||
handleClickSearchItem(item) { |
|||
console.log("handleClickSearchItem", item); |
|||
if (!item.longitude) { |
|||
return this.$message.error("请先设置坐标"); |
|||
} |
|||
this.$refs.map.setDotMarker(item, [ |
|||
parseFloat(item.longitude), |
|||
parseFloat(item.latitude), |
|||
]); |
|||
}, |
|||
// 根据类别搜索 |
|||
async handleSearch() { |
|||
this.searchModule.result = []; |
|||
console.log(this.searchModule); |
|||
const { |
|||
searchModule |
|||
} = this; |
|||
const url = ["search_all", "search_resident", "search_village", "search_building", "search_house", ][ |
|||
searchModule.resultTab |
|||
]; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
name: this.searchModule.keyword, |
|||
}, |
|||
}, { |
|||
// mockId: 60044224, |
|||
// mockId: 60048067, |
|||
}); |
|||
if (code === 0) { |
|||
this.searchModule.result = data.map((item) => { |
|||
let type = item.type || searchModule.resultTab; |
|||
let title = ""; |
|||
let detailJson = {}; |
|||
if (searchModule.resultTab == 0) { |
|||
title = item.name; |
|||
if (typeof item.detail_json == "string") { |
|||
try { |
|||
detailJson = JSON.parse(item.detail_json); |
|||
} catch (e) { |
|||
console.log(e); |
|||
} |
|||
} |
|||
} else if (type == "1") { |
|||
title = item.user_name; |
|||
} else if (type == "2") { |
|||
title = item.village_name; |
|||
} else if (type == "3") { |
|||
title = item.village_name + "-" + item.building_name; |
|||
} else if (type == "4") { |
|||
title = item.building + "-" + item.unit + "-" + item.door; |
|||
} |
|||
return { |
|||
title, |
|||
type, |
|||
...detailJson, |
|||
...item, |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//地图上居民分类百分比数据 ps:感觉有点重复显示 |
|||
async getPerInfo() { |
|||
console.log("=========================getPerInfo"); |
|||
const url = "resident_ratio"; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 61167746, |
|||
}); |
|||
if (code === 0) { |
|||
this.perInfo = { |
|||
...iniGetPerInfo(), |
|||
...data[0], |
|||
}; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//居民分类分析数据 |
|||
async getResiCategoryData() { |
|||
console.log("=========================getResiCategoryData"); |
|||
const url = "resident_class_statics"; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60031937, |
|||
}); |
|||
if (code === 0) { |
|||
this.resiCategoryData = data.map((item) => { |
|||
return { |
|||
code: item.label_id, |
|||
name: item.label, |
|||
count: item.count, |
|||
ratio: item.ratio, |
|||
growth: item.growth, |
|||
growthAbs: Math.abs(item.growth), |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//居民分类预测数据 |
|||
async getResiCategoryForecastData() { |
|||
console.log("=========================getResiCategoryForecastData"); |
|||
const url = "resident_class_predict"; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60064667, |
|||
}); |
|||
if (code === 0) { |
|||
this.resiCategoryForecastData = data.map((item) => { |
|||
return { |
|||
code: item.resident_type, |
|||
name: item.resident_type_name, |
|||
count: item.resident_count, |
|||
ratio: item.resident_ratio, |
|||
growth: item.change_count, |
|||
growthAbs: Math.abs(item.change_count), |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//获取地图上显示的组织数据 |
|||
async getMapData() { |
|||
console.log("=========================getMapData"); |
|||
const url = "org_map"; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60810589, |
|||
}); |
|||
if (code === 0) { |
|||
let info = data[0]; |
|||
this.orgData = { |
|||
...info, |
|||
id: info.org_id, |
|||
name: info.org_name, |
|||
latitude: parseFloat(info.latitude), |
|||
longitude: parseFloat(info.longitude), |
|||
coordinates: info.coordinates || "", |
|||
children: [], |
|||
}; |
|||
this.orgId = this.orgData.org_id; |
|||
this.orgLevel = this.orgData.level; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//获取地图上显示的组织数据 |
|||
async getSubMapData() { |
|||
console.log("=========================getSubMapData"); |
|||
const url = "sub_org_map"; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 61831860, |
|||
}); |
|||
if (code === 0) { |
|||
const { |
|||
orgData |
|||
} = this; |
|||
orgData.children = data.map((item) => { |
|||
return { |
|||
...item, |
|||
id: item.org_id, |
|||
name: item.org_name, |
|||
latitude: parseFloat(item.latitude), |
|||
longitude: parseFloat(item.longitude), |
|||
coordinates: item.coordinates || "", |
|||
}; |
|||
}); |
|||
this.orgData = { |
|||
...orgData |
|||
}; |
|||
console.log("==========================getSubMapData:result", this.orgData); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//加载组织数据 |
|||
async loadOrgData() { |
|||
const url = "/gov/org/agency/maporg"; |
|||
let params = { |
|||
orgId: this.orgId, |
|||
level: this.orgLevel, |
|||
}; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.orgData = data; |
|||
this.orgId = this.orgId; |
|||
this.orgLevel = this.orgData.level; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
|||
@ -0,0 +1,259 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<div class="g-listbox"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "居民列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "居民列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
resiType: "", // 流动 常驻 全部 |
|||
|
|||
loading: true, |
|||
pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"联系电话", |
|||
"证件号", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
}; |
|||
}, |
|||
|
|||
activated() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.resiType = getQueryPara("type"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.breadList[1].meta.title = type_name + "居民列表"; |
|||
this.tableTitle = type_name + "居民列表"; |
|||
|
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
localStorage.setItem('dataBoard_PageSize', pageSize); |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, resiType, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_analyze_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type: resiType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCount() { |
|||
const { org_id, resiType, pageNo, pageSize } = this; |
|||
|
|||
const url = "resident_analyze_list_total"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type: resiType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 63070408, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
this.total = parseInt(data[0].count); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,325 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
|
|||
<div class="second-select" v-if="type_id == 'special_popu'"> |
|||
<el-select |
|||
v-model="subclassId" |
|||
:popper-append-to-body="false" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in subclassList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
@click.native="handleChangeDate(item.value)" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="g-listbox"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "居民类别", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "居民类别", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", // 居民类别 |
|||
|
|||
loading: true, |
|||
pageSize: |
|||
parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"联系电话", |
|||
"证件号", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
|
|||
subclassList: [], |
|||
subclassId: "", |
|||
}; |
|||
}, |
|||
|
|||
activated() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.type_id = getQueryPara("type_id"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.breadList[1].meta.title = type_name + "居民列表"; |
|||
this.tableTitle = type_name + "居民列表"; |
|||
|
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
this.getCount(); |
|||
if (this.type_id == "special_popu") { |
|||
this.getSubclass(); |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
subclassId() { |
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
localStorage.setItem("dataBoard_PageSize", pageSize); |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getSubclass() { |
|||
console.log("=================getSubclass"); |
|||
const { org_id, type_id } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "special_type_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 62648939, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.subclassList = data.map((item, index) => { |
|||
return { |
|||
label: item.type_name, |
|||
value: item.type_id, |
|||
}; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, subclassId, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_class_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id: subclassId || type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCount() { |
|||
const { org_id, type_id, subclassId, pageNo, pageSize } = this; |
|||
|
|||
const url = "resident_class_list_total"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type_id: subclassId || type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 63070913, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
this.total = parseInt(data[0].count); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,259 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<div class="g-listbox"> |
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
meta: { |
|||
title: "居民列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "居民列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
resiType: "", // 流动 常驻 全部 |
|||
|
|||
loading: true, |
|||
pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"联系电话", |
|||
"证件号", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
}; |
|||
}, |
|||
|
|||
activated() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.resiType = getQueryPara("type"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.breadList[1].meta.title = type_name + "居民列表"; |
|||
this.tableTitle = type_name + "居民列表"; |
|||
|
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
localStorage.setItem('dataBoard_PageSize', pageSize); |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, resiType, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type: resiType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCount() { |
|||
const { org_id, resiType, pageNo, pageSize } = this; |
|||
|
|||
const url = "resident_list_total"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
type: resiType, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 63070408, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
this.total = parseInt(data[0].count); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,255 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<!-- 组织路由 --> |
|||
<cpt-bread |
|||
:separator="'/'" |
|||
@tap="handleClickBreadItem" |
|||
:breadList="breadList" |
|||
></cpt-bread> |
|||
|
|||
<div v-if="!displayedId"> |
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
</div> |
|||
|
|||
<resi-list :building_id="displayedId" :resident_type="type_id" v-if="displayedId" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiList from "./resi"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "house-list", |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiList, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
breadList: [ |
|||
{ |
|||
type: "back", |
|||
meta: { |
|||
title: "人房总览", |
|||
}, |
|||
}, |
|||
{ |
|||
type: "building", |
|||
meta: { |
|||
title: "预警楼栋列表", |
|||
}, |
|||
}, |
|||
], |
|||
|
|||
tableTitle: "预警楼栋列表", |
|||
searchName: "", |
|||
|
|||
orgLevel: "", |
|||
org_id: "", |
|||
type_id: "", |
|||
type_name: "", |
|||
level: "", |
|||
|
|||
loading: true, |
|||
pageSize: |
|||
parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"所属网格", |
|||
"所属小区", |
|||
"楼号", |
|||
"预警人数", |
|||
"操作", |
|||
], |
|||
|
|||
displayedId: "", |
|||
}; |
|||
}, |
|||
|
|||
activated() { |
|||
this.org_id = getQueryPara("org_id"); |
|||
this.level = getQueryPara("level"); |
|||
this.type_id = getQueryPara("type_id"); |
|||
const type_name = getQueryPara("type_name"); |
|||
this.tableTitle = |
|||
type_name + (this.level == "red" ? "红色" : "黄色") + "预警楼栋"; |
|||
this.breadList[1].meta.title = this.tableTitle; |
|||
this.pageNo = 1; |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
methods: { |
|||
handleClickBreadItem({ item }) { |
|||
if (item.type == "back") { |
|||
this.$router.back(); |
|||
} else if (item.type == "building") { |
|||
this.displayedId = ""; |
|||
|
|||
const { breadList } = this; |
|||
this.breadList = breadList.slice(0, 2); |
|||
} |
|||
}, |
|||
|
|||
handleSearch() {}, |
|||
|
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedId = item.building_id; |
|||
|
|||
this.breadList.push({ |
|||
meta: { |
|||
title: "预警人员列表", |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
localStorage.setItem("dataBoard_PageSize", pageSize); |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { org_id, type_id, level, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "resident_warn_building"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
warn_type: level, |
|||
resi_type: type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60071540, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.grid ? item.grid : "--", |
|||
item.village ? item.village : "--", |
|||
item.building ? item.building : "--", |
|||
item.warn_num ? item.warn_num : "--", |
|||
|
|||
{ type: "operate", list: ["查看人员"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCount() { |
|||
const { org_id, type_id, level, pageNo, pageSize } = this; |
|||
|
|||
const url = "resident_warn_building_total"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
org_id, |
|||
warn_type: level, |
|||
resi_type: type_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 63071730, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
this.total = parseInt(data[0].count); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<div class="g-pgi"> |
|||
<div class="m-title"> |
|||
<img |
|||
class="title_img" |
|||
src="@/assets/images/index/list-logo.png" |
|||
alt |
|||
/> |
|||
<div class="tip_title">{{ tableTitle }}</div> |
|||
<div class="title_line"></div> |
|||
</div> |
|||
|
|||
<cpt-tb |
|||
:col-list="colList" |
|||
:loading="loading" |
|||
:header="header" |
|||
:list="list" |
|||
:total="total" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handlePageNoChange="handlePageNoChange" |
|||
@operate="showInfo" |
|||
></cpt-tb> |
|||
|
|||
<resi-details |
|||
@close="displayedResiId = ''" |
|||
:resi-id="displayedResiId" |
|||
v-if="displayedResiId" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import cptTb from "@/views/dataBoard/cpts/tb"; |
|||
import cptBread from "@/views/dataBoard/renfang/cpts/bread"; |
|||
import resiDetails from "@/views/dataBoard/cpts/resi-details"; |
|||
import { requestPostBi } from "@/js/dai/request-bipass"; |
|||
import getQueryPara from "dai-js/modules/getQueryPara"; |
|||
|
|||
export default { |
|||
name: "resi-list", |
|||
|
|||
props: { |
|||
building_id: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
resident_type: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { |
|||
cptTb, |
|||
cptBread, |
|||
resiDetails, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
tableTitle: "预警人员列表", |
|||
searchName: "", |
|||
|
|||
resident_type: "", |
|||
building_id: "", // 预警人员列表 |
|||
|
|||
loading: true, |
|||
pageSize: |
|||
parseInt(localStorage.getItem("dataBoard_PageSize")) || 20, |
|||
pageNo: 1, |
|||
total: 0, |
|||
srcTableData: [], |
|||
list: [], |
|||
|
|||
colList: [ |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "20%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "15%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "5%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
{ |
|||
align: "left", |
|||
width: "10%", |
|||
}, |
|||
], |
|||
|
|||
header: [ |
|||
"序号", |
|||
"姓名", |
|||
"所属网格", |
|||
"所属房屋", |
|||
"联系电话", |
|||
"证件号", |
|||
"性别", |
|||
"出生日期", |
|||
"操作", |
|||
], |
|||
|
|||
displayedResiId: "", |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.getList(); |
|||
this.getCount(); |
|||
}, |
|||
|
|||
methods: { |
|||
showInfo(index) { |
|||
let item = this.srcTableData[index]; |
|||
this.displayedResiId = item.user_id; |
|||
}, |
|||
|
|||
handlePageNoChange(pageNo) { |
|||
this.pageNo = pageNo; |
|||
this.getList(); |
|||
}, |
|||
|
|||
handleSizeChange(pageSize) { |
|||
localStorage.setItem("dataBoard_PageSize", pageSize); |
|||
this.pageSize = pageSize; |
|||
this.getList(); |
|||
}, |
|||
|
|||
async getList() { |
|||
const { resident_type, building_id, pageNo, pageSize } = this; |
|||
this.loading = true; |
|||
|
|||
const url = "building_resident_list"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
resident_type, |
|||
building_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 60069169, |
|||
} |
|||
); |
|||
|
|||
this.loading = false; |
|||
|
|||
if (code === 0) { |
|||
this.srcTableData = data; |
|||
// this.total = data.total; |
|||
|
|||
this.list = data.map((item, index) => { |
|||
return [ |
|||
index + 1, |
|||
item.user_name ? item.user_name : "--", |
|||
item.grid ? item.grid : "--", |
|||
item.house ? item.house : "--", |
|||
item.telephone ? item.telephone : "--", |
|||
item.idcard ? item.idcard : "--", |
|||
item.gender ? item.gender : "--", |
|||
item.birthday ? item.birthday : "--", |
|||
|
|||
{ type: "operate", list: ["查看"] }, |
|||
]; |
|||
}); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getCount() { |
|||
const { resident_type, building_id, pageNo, pageSize } = this; |
|||
|
|||
const url = "building_resident_list_total"; |
|||
|
|||
const { data, code, msg } = await requestPostBi( |
|||
url, |
|||
{ |
|||
queryParam: { |
|||
resident_type, |
|||
building_id, |
|||
pageNo, |
|||
pageSize, |
|||
}, |
|||
}, |
|||
{ |
|||
// mockId: 63071800, |
|||
} |
|||
); |
|||
|
|||
if (code === 0) { |
|||
if (Array.isArray(data) && data.length > 0) { |
|||
this.total = parseInt(data[0].count); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
destroyed() { |
|||
console.log("我已经离开了！"); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style> |
|||
@ -1,129 +1,118 @@ |
|||
<template> |
|||
<main class="g-main"> |
|||
<!-- tab展示内容 --> |
|||
<template> |
|||
<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<iframe |
|||
:src=" |
|||
<main class="g-main"> |
|||
<!-- tab展示内容 --> |
|||
<template> |
|||
<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<iframe :src=" |
|||
$router.currentRoute.meta.iframeURL + |
|||
'?token=' + |
|||
token + |
|||
'&customerId=' + |
|||
customerId |
|||
" |
|||
ref="iframe" |
|||
class="m-iframe" |
|||
id="iframe" |
|||
width="100%" |
|||
height="100%" |
|||
frameborder="0" |
|||
scrolling="yes" |
|||
:style="{ height: $store.state.fixed1920.height - 100 + 'px' }" |
|||
/> |
|||
</template> |
|||
<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<router-view @changeCustomerName="changeCustomerName" /> |
|||
</keep-alive> |
|||
</template> |
|||
</main> |
|||
" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" |
|||
:style="{ height: $store.state.fixed1920.height - 100 + 'px' }" /> |
|||
</template> |
|||
<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)"> |
|||
<router-view @changeCustomerName="changeCustomerName" /> |
|||
</keep-alive> |
|||
</template> |
|||
</main> |
|||
</template> |
|||
|
|||
<script> |
|||
import { isURL } from "@/utils/validate"; |
|||
import Cookie from "js-cookie"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
iframeUrl: "", |
|||
token: "", |
|||
customerId: "", |
|||
}; |
|||
}, |
|||
watch: { |
|||
// "$router.currentRoute.name": function () { |
|||
// console.log($router.currentRoute); |
|||
// }, |
|||
}, |
|||
created() { |
|||
this.token = localStorage.getItem("token"); |
|||
this.customerId = localStorage.getItem("customerId"); |
|||
}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$emit("changeCustomerName", customerName); |
|||
}, |
|||
// tabs, 是否通过iframe展示 |
|||
tabIsIframe(url) { |
|||
// this.appendIframe(url) |
|||
// this.iframeUrl = |
|||
// url + |
|||
// "?token=" + |
|||
// localStorage.getItem("token") + |
|||
// "&customerId=" + |
|||
// localStorage.getItem("customerId"); |
|||
|
|||
// return /^http[s]?:\/\/.*/.test(url); |
|||
return isURL(url); |
|||
}, |
|||
// tabs, 选中tab |
|||
tabSelectedHandle(tab) { |
|||
tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === tab.name |
|||
)[0]; |
|||
if (tab) { |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { ...tab.params }, |
|||
query: { ...tab.query }, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 删除tab |
|||
tabRemoveHandle(tabName) { |
|||
if (tabName === "home") { |
|||
return false; |
|||
} |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name !== tabName |
|||
); |
|||
if (this.$store.state.contentTabs.length <= 0) { |
|||
this.$store.state.sidebarMenuActiveName = |
|||
this.$store.state.contentTabsActiveName = "home"; |
|||
return false; |
|||
} |
|||
// 当前选中tab被删除 |
|||
if (tabName === this.$store.state.contentTabsActiveName) { |
|||
let tab = |
|||
this.$store.state.contentTabs[ |
|||
this.$store.state.contentTabs.length - 1 |
|||
]; |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { ...tab.params }, |
|||
query: { ...tab.query }, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 关闭其它 |
|||
tabsCloseOtherHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => { |
|||
return ( |
|||
item.name === "home" || |
|||
item.name === this.$store.state.contentTabsActiveName |
|||
); |
|||
} |
|||
); |
|||
}, |
|||
// tabs, 关闭全部 |
|||
tabsCloseAllHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === "home" |
|||
); |
|||
this.$router.push({ name: "home" }); |
|||
}, |
|||
}, |
|||
}; |
|||
import { |
|||
isURL |
|||
} from "@/utils/validate"; |
|||
import Cookie from "js-cookie"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
iframeUrl: "", |
|||
token: "", |
|||
customerId: "", |
|||
}; |
|||
}, |
|||
watch: { |
|||
// "$router.currentRoute.name": function () { |
|||
// console.log($router.currentRoute); |
|||
// }, |
|||
}, |
|||
created() { |
|||
this.token = localStorage.getItem("token"); |
|||
this.customerId = localStorage.getItem("customerId"); |
|||
}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$emit("changeCustomerName", customerName); |
|||
}, |
|||
// tabs, 是否通过iframe展示 |
|||
tabIsIframe(url) { |
|||
// this.appendIframe(url) |
|||
// this.iframeUrl = |
|||
// url + |
|||
// "?token=" + |
|||
// localStorage.getItem("token") + |
|||
// "&customerId=" + |
|||
// localStorage.getItem("customerId"); |
|||
// return /^http[s]?:\/\/.*/.test(url); |
|||
return isURL(url); |
|||
}, |
|||
// tabs, 选中tab |
|||
tabSelectedHandle(tab) { |
|||
tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === tab.name)[0]; |
|||
if (tab) { |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { |
|||
...tab.params |
|||
}, |
|||
query: { |
|||
...tab.query |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 删除tab |
|||
tabRemoveHandle(tabName) { |
|||
if (tabName === "home") { |
|||
return false; |
|||
} |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name !== tabName); |
|||
if (this.$store.state.contentTabs.length <= 0) { |
|||
this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = "home"; |
|||
return false; |
|||
} |
|||
// 当前选中tab被删除 |
|||
if (tabName === this.$store.state.contentTabsActiveName) { |
|||
let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1]; |
|||
this.$router.push({ |
|||
name: tab.name, |
|||
params: { |
|||
...tab.params |
|||
}, |
|||
query: { |
|||
...tab.query |
|||
}, |
|||
}); |
|||
} |
|||
}, |
|||
// tabs, 关闭其它 |
|||
tabsCloseOtherHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => { |
|||
return (item.name === "home" || item.name === this.$store.state.contentTabsActiveName); |
|||
}); |
|||
}, |
|||
// tabs, 关闭全部 |
|||
tabsCloseAllHandle() { |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === "home"); |
|||
this.$router.push({ |
|||
name: "home" |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
|||
|
|||
@ -1,164 +1,138 @@ |
|||
<template> |
|||
<fixed1920 class="g-fx"> |
|||
<div |
|||
v-loading.fullscreen.lock="loading" |
|||
:element-loading-text="$t('loading')" |
|||
:class="[ |
|||
<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="[ |
|||
'g-pg', |
|||
{ 'z-sidebar--fold': $store.state.sidebarFold }, |
|||
{ |
|||
'z-sidebar--noside': true, |
|||
}, |
|||
{ 'z-iframe': $store.state.inIframe }, |
|||
]" |
|||
> |
|||
]"> |
|||
<template v-if="!loading"> |
|||
<img |
|||
class="i-corner z-left-top" |
|||
src="~@/assets/images/shuju/main/corner-left-top.png" |
|||
/> |
|||
<img |
|||
class="i-corner z-right-top" |
|||
src="~@/assets/images/shuju/main/corner-right-top.png" |
|||
/> |
|||
<img |
|||
class="i-corner z-right-bottom" |
|||
src="~@/assets/images/shuju/main/corner-right-bottom.png" |
|||
/> |
|||
<img |
|||
class="i-corner z-left-bottom" |
|||
src="~@/assets/images/shuju/main/corner-left-bottom.png" |
|||
/> |
|||
|
|||
<img class="i-corner z-left-top" src="~@/assets/images/shuju/main/corner-left-top.png" /> |
|||
<img class="i-corner z-right-top" src="~@/assets/images/shuju/main/corner-right-top.png" /> |
|||
<img class="i-corner z-right-bottom" src="~@/assets/images/shuju/main/corner-right-bottom.png" /> |
|||
<img class="i-corner z-left-bottom" src="~@/assets/images/shuju/main/corner-left-bottom.png" /> |
|||
<main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" /> |
|||
|
|||
<div |
|||
class="g-cnt" |
|||
:style="{ |
|||
<div class="g-cnt" :style="{ |
|||
minHeight: $store.state.fixed1920.height - 100 + 'px', |
|||
}" |
|||
> |
|||
<main-content |
|||
v-if="!$store.state.contentIsNeedRefresh" |
|||
@changeCustomerName="changeCustomerName" |
|||
/> |
|||
}"> |
|||
<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</fixed1920> |
|||
</template> |
|||
|
|||
<script> |
|||
import MainNavbar from "./main-navbar"; |
|||
import MainContent from "./main-content"; |
|||
import debounce from "lodash/debounce"; |
|||
import { mapGetters } from "vuex"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import fixed1920 from "@/views/components/fixed1920.vue"; |
|||
|
|||
export default { |
|||
provide() { |
|||
return { |
|||
// 刷新 |
|||
refresh() { |
|||
this.$store.state.contentIsNeedRefresh = true; |
|||
this.$nextTick(() => { |
|||
this.$store.state.contentIsNeedRefresh = false; |
|||
}); |
|||
}, |
|||
}; |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
userType: localStorage.getItem("userType"), |
|||
}; |
|||
}, |
|||
components: { |
|||
MainNavbar, |
|||
MainContent, |
|||
fixed1920, |
|||
}, |
|||
|
|||
watch: { |
|||
$route: "routeHandle", |
|||
}, |
|||
async created() { |
|||
this.windowResizeHandle(); |
|||
this.routeHandle(this.$route); |
|||
Promise.all([this.getWorkUserInfo()]).then(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$refs["ref_navbar"].changeCustomerName(customerName); |
|||
import MainNavbar from "./main-navbar"; |
|||
import MainContent from "./main-content"; |
|||
import debounce from "lodash/debounce"; |
|||
import { |
|||
mapGetters |
|||
} from "vuex"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { |
|||
requestPost |
|||
} from "@/js/dai/request"; |
|||
import fixed1920 from "@/views/components/fixed1920.vue"; |
|||
export default { |
|||
provide() { |
|||
return { |
|||
// 刷新 |
|||
refresh() { |
|||
this.$store.state.contentIsNeedRefresh = true; |
|||
this.$nextTick(() => { |
|||
this.$store.state.contentIsNeedRefresh = false; |
|||
}); |
|||
}, |
|||
}; |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: true, |
|||
userType: localStorage.getItem("userType"), |
|||
}; |
|||
}, |
|||
// 窗口改变大小 |
|||
windowResizeHandle() { |
|||
this.$store.state.sidebarFold = |
|||
document.documentElement["clientWidth"] <= 992 || false; |
|||
window.addEventListener( |
|||
"resize", |
|||
debounce(() => { |
|||
this.$store.state.sidebarFold = |
|||
document.documentElement["clientWidth"] <= 992 || false; |
|||
}, 150) |
|||
); |
|||
components: { |
|||
MainNavbar, |
|||
MainContent, |
|||
fixed1920, |
|||
}, |
|||
// 路由, 监听 |
|||
routeHandle(route) { |
|||
if (!route.meta.isTab) { |
|||
this.$store.state.mainShuju.activeName = ""; |
|||
this.$store.state.mainShuju.contentTabsActiveName = ""; |
|||
return false; |
|||
} |
|||
var tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === route.name |
|||
)[0]; |
|||
if (!tab) { |
|||
tab = { |
|||
...window.SITE_CONFIG["contentTabDefault"], |
|||
...route.meta, |
|||
name: route.name, |
|||
params: { ...route.params }, |
|||
query: { ...route.query }, |
|||
}; |
|||
this.$store.state.contentTabs = |
|||
this.$store.state.contentTabs.concat(tab); |
|||
} |
|||
|
|||
this.$store.state.mainShuju.activeName = tab.menuId; |
|||
this.$store.state.mainShuju.contentTabsActiveName = tab.name; |
|||
watch: { |
|||
$route: "routeHandle", |
|||
}, |
|||
|
|||
// 获取当前管理员信息 |
|||
async getWorkUserInfo() { |
|||
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
|||
let params = {}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$store.state.user = { ...data }; |
|||
console.log("user---hahha", this.$store.state.user); |
|||
localStorage.setItem("roleList", data.roleList); |
|||
localStorage.setItem("customerId", data.customerId); |
|||
localStorage.setItem("staffId", data.id); |
|||
localStorage.setItem("agencyId", data.agencyId); |
|||
localStorage.setItem("level", data.level); |
|||
if (!localStorage.getItem("customerName")) { |
|||
localStorage.setItem( |
|||
"customerName", |
|||
data.customerName || "" |
|||
); |
|||
async created() { |
|||
this.windowResizeHandle(); |
|||
this.routeHandle(this.$route); |
|||
Promise.all([this.getWorkUserInfo()]).then(() => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
computed: {}, |
|||
methods: { |
|||
changeCustomerName(customerName) { |
|||
this.$refs["ref_navbar"].changeCustomerName(customerName); |
|||
}, |
|||
// 窗口改变大小 |
|||
windowResizeHandle() { |
|||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
|||
window.addEventListener("resize", debounce(() => { |
|||
this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false; |
|||
}, 150)); |
|||
}, |
|||
// 路由, 监听 |
|||
routeHandle(route) { |
|||
if (!route.meta.isTab) { |
|||
this.$store.state.mainShuju.activeName = ""; |
|||
this.$store.state.mainShuju.contentTabsActiveName = ""; |
|||
return false; |
|||
} |
|||
var tab = this.$store.state.contentTabs.filter( |
|||
(item) => item.name === route.name)[0]; |
|||
if (!tab) { |
|||
tab = { |
|||
...window.SITE_CONFIG["contentTabDefault"], |
|||
...route.meta, |
|||
name: route.name, |
|||
params: { |
|||
...route.params |
|||
}, |
|||
query: { |
|||
...route.query |
|||
}, |
|||
}; |
|||
this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
this.$store.state.mainShuju.activeName = tab.menuId; |
|||
this.$store.state.mainShuju.contentTabsActiveName = tab.name; |
|||
}, |
|||
// 获取当前管理员信息 |
|||
async getWorkUserInfo() { |
|||
const url = "/epmetuser/customerstaff/staffbasicinfo"; |
|||
let params = {}; |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.$store.state.user = { |
|||
...data |
|||
}; |
|||
console.log("user---hahha", this.$store.state.user); |
|||
localStorage.setItem("roleList", data.roleList); |
|||
localStorage.setItem("customerId", data.customerId); |
|||
localStorage.setItem("staffId", data.id); |
|||
localStorage.setItem("agencyId", data.agencyId); |
|||
localStorage.setItem("level", data.level); |
|||
if (!localStorage.getItem("customerName")) { |
|||
localStorage.setItem("customerName", data.customerName || ""); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style> |
|||
|
|||
Loading…
Reference in new issue