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