tianq
3 years ago
18 changed files with 404 additions and 4106 deletions
@ -1,142 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,130 +0,0 @@ |
|||||
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: [] |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
] |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
@ -1,93 +0,0 @@ |
|||||
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: [ |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
} |
|
||||
@ -1,540 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,140 +0,0 @@ |
|||||
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: [] |
|
||||
}, |
|
||||
|
|
||||
|
|
||||
|
|
||||
] |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
@ -1,90 +0,0 @@ |
|||||
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: [ |
|
||||
] |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
} |
|
||||
@ -1,482 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,281 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,197 +0,0 @@ |
|||||
<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,227 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<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-search2"> |
||||
|
<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||
|
<el-button type="primary">查询</el-button> |
||||
|
</div> |
||||
|
<grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn" /> |
||||
|
</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">社区评价</div> |
||||
|
</div> |
||||
|
<div class="m-subbox"><sqpj :orgId="orgData.org_id"></sqpj></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="g-right"> |
||||
|
<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> |
||||
|
</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 sqpj from '@/views/dataBoard/sida/cpts/sqpj'; |
||||
|
import cptLoading from '@/views/dataBoard/cpts/loading'; |
||||
|
import { requestPostBi } from '@/js/dai/request-bipass'; |
||||
|
import { requestPost } from '@/js/dai/request'; |
||||
|
import getQueryPara from 'dai-js/modules/getQueryPara'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'sida', |
||||
|
components: { |
||||
|
gridMap, |
||||
|
xqqd, |
||||
|
wtqd, |
||||
|
zyqd, |
||||
|
fwqd, |
||||
|
sqpj, |
||||
|
cptLoading |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
orgData: { |
||||
|
children: [] |
||||
|
}, //当前组织对象 |
||||
|
orgId: '', |
||||
|
orgLevel: '' |
||||
|
}; |
||||
|
}, |
||||
|
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.loading = true; |
||||
|
}, |
||||
|
|
||||
|
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); |
||||
|
// }, |
||||
|
|
||||
|
// 根据类别搜索 |
||||
|
|
||||
|
//获取地图上显示的组织数据 |
||||
|
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); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style> |
||||
@ -1,274 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,259 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,325 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,259 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,255 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,234 +0,0 @@ |
|||||
<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> |
|
||||
Loading…
Reference in new issue