战立标
2 years ago
25 changed files with 3659 additions and 2556 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,90 +1,95 @@ |
|||
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' |
|||
export function pieOption() { |
|||
const center = ["50%", "170px"]; |
|||
return { |
|||
color: ["#1A95FF", "#FFAA00", "#04C790"], |
|||
/* 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, |
|||
}, |
|||
// emphasis: {
|
|||
// label: {
|
|||
// show: true,
|
|||
// fontSize: 40,
|
|||
// fontWeight: 'bold'
|
|||
// }
|
|||
// legend: {
|
|||
// top: 350,
|
|||
// bottom: 0,
|
|||
// itemWidth: 20,
|
|||
// itemHeight: 10,
|
|||
// textStyle: {
|
|||
// color: '#D2E7FF',
|
|||
// fontSize: 16,
|
|||
// lineHeight: 20,
|
|||
// },
|
|||
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: [ |
|||
// },
|
|||
series: [ |
|||
{ |
|||
name: 'Access From', |
|||
type: 'pie', |
|||
radius: ['60%', '90%'], |
|||
avoidLabelOverlap: false, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: [], |
|||
label: { |
|||
show: false, |
|||
position: 'center', |
|||
formatter: data => { |
|||
console.log(data.color) |
|||
return `{c_style|${data.percent.toFixed(0)}%}\n{b_style|${data.name}}` |
|||
// '{c_style|{d}%}\n{b_style|{b}}'
|
|||
}, |
|||
rich: { |
|||
b_style: { |
|||
fontSize: 12, |
|||
fontWeight: 400, |
|||
color: '#A3B9DA' |
|||
}, |
|||
c_style: { |
|||
padding: [0, 0, 5, 0], |
|||
fontSize: 24, |
|||
fontWeight: 'bold', |
|||
color: '#fff' |
|||
} |
|||
} |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: '14', |
|||
fontWeight: 'normal' |
|||
} |
|||
}, |
|||
/* label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 40, |
|||
fontWeight: 'bold' |
|||
} |
|||
},*/ |
|||
|
|||
} |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
}; |
|||
|
|||
} |
|||
|
|||
@ -1,484 +1,486 @@ |
|||
<template> |
|||
<div> |
|||
<div class="m-jmgl"> |
|||
<div class="m-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame |
|||
class="" |
|||
@myChartMethod="pieInitOk" |
|||
ref="pieChart" |
|||
v-if="pandectData.totalResidents" |
|||
></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">{{ pandectData.totalResidents }}</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"> |
|||
{{ pandectData.permanentResiCount }} |
|||
</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">{{ pandectData.floatingResiCount }}</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> |
|||
<div> |
|||
<div class="m-jmgl"> |
|||
<div class="m-pie"> |
|||
<div class="pie-left"> |
|||
<screen-echarts-frame |
|||
v-if="pandectData.totalResidents" |
|||
ref="pieChart" |
|||
class="" |
|||
@myChartMethod="pieInitOk" |
|||
></screen-echarts-frame> |
|||
</div> |
|||
|
|||
<div class="pie-right"> |
|||
<div class="new-number"> |
|||
<!-- <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">{{ pandectData.totalResidents }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div>--> |
|||
<div class="new-number-item" @click="toListPage('permanent', '常住人口')"> |
|||
<div class="title">常住人口</div> |
|||
<div class="numbers"> |
|||
<div class="num color1"> |
|||
{{ pandectData.permanentResiCount }} |
|||
</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
<div class="new-number-item" @click="toListPage('float', '流动人口')"> |
|||
<div class="title">流动人口</div> |
|||
<div class="numbers color2"> |
|||
<div class="num">{{ pandectData.floatingResiCount }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</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"; |
|||
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, |
|||
}, |
|||
pandectData:{} |
|||
}; |
|||
}, |
|||
watch: { |
|||
orgId() { |
|||
this.getData(); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
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 { pandectData } = this; |
|||
// 设置三个配置值 |
|||
this.pieOption.title.text = |
|||
(pandectData.totalResidents != 0 |
|||
? parseInt( |
|||
(100 * pandectData.permanentResiCount) / pandectData.totalResidents |
|||
) |
|||
: "--") + "%"; |
|||
this.pieData = [ |
|||
{ value: pandectData.permanentResiCount, name: "常住人口" }, |
|||
{ value: pandectData.floatingResiCount, 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 = |
|||
(pandectData.totalResidents != 0 |
|||
? parseInt( |
|||
(100 * |
|||
[ |
|||
pandectData.permanentResiCount, |
|||
pandectData.floatingResiCount, |
|||
][dataIndexInside]) / |
|||
pandectData.totalResidents |
|||
) |
|||
: "--") + "%"; |
|||
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 |
|||
); |
|||
}, |
|||
}, |
|||
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, |
|||
}, |
|||
pandectData: {} |
|||
}; |
|||
}, |
|||
watch: { |
|||
orgId() { |
|||
this.getData(); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
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.pieOption = pieOption(); |
|||
const {pandectData} = this; |
|||
this.pieData = [ |
|||
{value: pandectData.permanentResiCount, name: "常住人口"}, |
|||
{value: pandectData.floatingResiCount, name: "流动人口"}, |
|||
]; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
this.$refs.pieChart.myChart.setOption(this.pieOption); |
|||
this.$refs.pieChart.myChart.on('mouseover', (params) => { |
|||
var oldIndex = currentIndex; |
|||
var currentIndex = params.dataIndex; |
|||
this.highlightPie(currentIndex, oldIndex); |
|||
}) |
|||
|
|||
setTimeout(() => { |
|||
this.highlightPie(0, 1); |
|||
}, 50) |
|||
}, |
|||
highlightPie(currentIndex, oldIndex) { |
|||
this.$refs.pieChart.myChart.dispatchAction({ |
|||
type: 'downplay', |
|||
seriesIndex: 1, |
|||
dataIndex: oldIndex |
|||
}) |
|||
this.$refs.pieChart.myChart.dispatchAction({ |
|||
type: 'highlight', |
|||
seriesIndex: 1, |
|||
dataIndex: currentIndex |
|||
}) |
|||
}, |
|||
// 获取房屋总数等 |
|||
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; |
|||
} |
|||
} |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.m-pie { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
margin-top: 24px; |
|||
align-items: center; |
|||
|
|||
.pie-left { |
|||
flex: 0 0 120px; |
|||
height: 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 { |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
margin-left: 9px; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
} |
|||
} |
|||
|
|||
.item-two { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-top: 8px; |
|||
margin-left: 23px; |
|||
|
|||
.num { |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.unit { |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
margin-left: 9px; |
|||
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 { |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
line-height: 22px; |
|||
margin-left: 8px; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.title_line { |
|||
width: 244px; |
|||
height: 1px; |
|||
margin-left: 8px; |
|||
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 { |
|||
height: 225px; |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item-name { |
|||
margin-left: 8px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #8c8c8c; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-size: 12px; |
|||
font-weight: 400; |
|||
margin-left: 8px; |
|||
color: #8c8c8c; |
|||
} |
|||
|
|||
.item-logo { |
|||
margin-top: 2px; |
|||
width: 8px; |
|||
height: 8px; |
|||
width: 8px; |
|||
height: 8px; |
|||
margin-top: 2px; |
|||
} |
|||
|
|||
.logo1 { |
|||
background: #6fdeff; |
|||
background: #6fdeff; |
|||
} |
|||
|
|||
.logo2 { |
|||
background: #ffaa00; |
|||
background: #ffaa00; |
|||
} |
|||
|
|||
.logo3 { |
|||
background: #1a95ff; |
|||
background: #1a95ff; |
|||
} |
|||
|
|||
|
|||
.color1 { |
|||
color: #1A95FF; |
|||
} |
|||
|
|||
.color2 { |
|||
color: #ffaa00; |
|||
} |
|||
|
|||
.color3 { |
|||
color: #04C790; |
|||
} |
|||
|
|||
|
|||
.marginleft10 { |
|||
margin-left: 10px; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.margintop18 { |
|||
margin-top: 18px; |
|||
margin-top: 18px; |
|||
} |
|||
|
|||
.pie-right { |
|||
width: calc(100% - 200px); |
|||
} |
|||
|
|||
.new-number { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.new-number-item:nth-of-type(odd) { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.new-number-item:nth-of-type(3) { |
|||
margin-top: 23px; |
|||
} |
|||
|
|||
.new-number-item { |
|||
flex: 0 0 calc(50% - 10px); |
|||
|
|||
.title { |
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
margin-bottom: 10px; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.numbers { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
|
|||
.num { |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
} |
|||
|
|||
.unit { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
position: relative; |
|||
top: -5px; |
|||
margin-left: 5px; |
|||
color: #A3B9DA; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,453 +1,493 @@ |
|||
<template> |
|||
<div class="m-rkyj"> |
|||
<div class="list"> |
|||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" |
|||
@click="currentTab = item"> |
|||
{{ item }} |
|||
</div> |
|||
</div> |
|||
<div class="pie-main"> |
|||
<div class="legend cur"> |
|||
<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="content"> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="pie"> |
|||
<screen-echarts-frame @myChartMethod="pieInitOk" @handelClickMyPei="handelClickMyPei" ref="pieChart"></screen-echarts-frame> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="m-rkyj"> |
|||
<!-- <div class="list"> |
|||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" |
|||
@click="currentTab = item"> |
|||
{{ item }} |
|||
</div> |
|||
</div>--> |
|||
<Tabs :list="tabList" :value="currentTab" @changeVal="(val) => currentTab = val"/> |
|||
<div class="pie-main"> |
|||
<div class="pie"> |
|||
<screen-echarts-frame |
|||
ref="pieChart" |
|||
@handelClickMyPei="handelClickMyPei" |
|||
@myChartMethod="pieInitOk" |
|||
/> |
|||
</div> |
|||
<div class="legend cur"> |
|||
<div v-for="item in pieData" :key="'pie' + item.name" class="legend-row" @click="handleClickItem(item)"> |
|||
<div class="name">{{ item.name }}</div> |
|||
<div class="content"> |
|||
<div class="num">{{ item.value }}</div> |
|||
<div class="unit">人</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { |
|||
pieOption |
|||
} from "./rkfxPieOption.js"; |
|||
import { |
|||
requestPostBi |
|||
} from "@/js/dai/request-bipass"; |
|||
export default { |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
tabList: ["性别", "户籍", "人户状况", "年龄", "志愿者类别", "党员文化程度", |
|||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
|||
import { |
|||
pieOption |
|||
} from "./rkfxPieOption.js"; |
|||
import { |
|||
requestPostBi |
|||
} from "@/js/dai/request-bipass"; |
|||
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
|||
|
|||
export default { |
|||
components: { |
|||
screenEchartsFrame, Tabs |
|||
}, |
|||
props: { |
|||
orgId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
showNoData: false, |
|||
timer: null, |
|||
pieChart: "", |
|||
pieOption: {}, |
|||
pieInitState: false, |
|||
pieData: [], |
|||
/* tabList: ["性别", "户籍", "人户状况", "年龄", "志愿者类别", "党员文化程度", |
|||
// "下级人口分布", |
|||
], |
|||
currentTab: "性别", |
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
screenEchartsFrame, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
this.getPie(); |
|||
}, |
|||
handleClickItem(item) { |
|||
const { |
|||
type, |
|||
name |
|||
} = item.data; |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-analyze", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_category: this.currentTab, |
|||
type_name: name, |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_analyze"; |
|||
this.$refs.pieChart.showLoading(); |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60041615, |
|||
}); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { |
|||
...this.info, |
|||
...info |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
const { |
|||
currentTab, |
|||
info |
|||
} = this; |
|||
if (currentTab == "性别") { |
|||
this.pieData = [{ |
|||
value: info.male_count || 0, |
|||
type: "male_count", |
|||
name: "男性", |
|||
}, { |
|||
value: info.female_count || 0, |
|||
type: "female_count", |
|||
name: "女性", |
|||
}, ]; |
|||
} else if (currentTab == "户籍") { |
|||
this.pieData = [{ |
|||
value: info.local_count || 0, |
|||
type: "local_count", |
|||
name: "本地户籍", |
|||
}, { |
|||
value: info.field_count || 0, |
|||
type: "field_count", |
|||
name: "外地户籍", |
|||
}, ]; |
|||
} else if (currentTab == "人户状况") { |
|||
this.pieData = [{ |
|||
value: info.resi_y_house_y_count || 0, |
|||
type: "resi_y_house_y_count", |
|||
name: "人户一致", |
|||
}, { |
|||
value: info.resi_y_house_n_count || 0, |
|||
type: "resi_y_house_n_count", |
|||
name: "人在户不在", |
|||
}, { |
|||
value: info.resi_n_house_y_count || 0, |
|||
type: "resi_n_house_y_count", |
|||
name: "户在人不在", |
|||
}, ]; |
|||
} else if (currentTab == "年龄") { |
|||
this.pieData = [{ |
|||
value: info.age50_count || 0, |
|||
type: "age50_count", |
|||
name: "50岁以下", |
|||
}, { |
|||
value: info.age5059_count || 0, |
|||
type: "age5059_count", |
|||
name: "50-59岁", |
|||
}, { |
|||
value: info.age6069_count || 0, |
|||
type: "age6069_count", |
|||
name: "60-69岁", |
|||
}, { |
|||
value: info.age7079_count || 0, |
|||
type: "age7079_count", |
|||
name: "70-79岁", |
|||
}, { |
|||
value: info.age80_count || 0, |
|||
type: "age80_count", |
|||
name: "80岁以上", |
|||
}, ]; |
|||
} else if (currentTab == "志愿者类别") { |
|||
this.pieData = [{ |
|||
value: info.culture_count || 0, |
|||
type: "culture_count", |
|||
name: "文化队伍", |
|||
}, { |
|||
value: info.committee_count || 0, |
|||
type: "committee_count", |
|||
name: "楼委会", |
|||
}, { |
|||
value: info.capable_count || 0, |
|||
type: "capable_count", |
|||
name: "能人达人", |
|||
}, { |
|||
value: info.friend_count || 0, |
|||
type: "friend_count", |
|||
name: "老友俱乐部", |
|||
}, { |
|||
value: info.agent_count || 0, |
|||
type: "agent_count", |
|||
name: "代办员", |
|||
}, { |
|||
value: info.mediator_count || 0, |
|||
type: "mediator_count", |
|||
name: "调解员", |
|||
}, { |
|||
value: info.collector_count || 0, |
|||
type: "collector_count", |
|||
name: "采集员", |
|||
}, { |
|||
value: info.security_count || 0, |
|||
type: "security_count", |
|||
name: "治安巡逻员", |
|||
}, { |
|||
value: info.party_mem_count || 0, |
|||
type: "party_mem_count", |
|||
name: "党员中心户", |
|||
}, ]; |
|||
} else if (currentTab == "党员文化程度") { |
|||
this.pieData = [{ |
|||
value: info.primary_count || 0, |
|||
type: "primary_count", |
|||
name: "小学及文盲", |
|||
}, { |
|||
value: info.junior_high_count || 0, |
|||
type: "junior_high_count", |
|||
name: "初中", |
|||
}, { |
|||
value: info.second_speci_count || 0, |
|||
type: "second_speci_count", |
|||
name: "中专", |
|||
}, { |
|||
value: info.high_school_count || 0, |
|||
type: "high_school_count", |
|||
name: "高中", |
|||
}, { |
|||
value: info.junior_college_count || 0, |
|||
type: "junior_college_count", |
|||
name: "大专", |
|||
}, { |
|||
value: info.undergrad_count || 0, |
|||
type: "undergrad_count", |
|||
name: "本科", |
|||
}, { |
|||
value: info.master_count || 0, |
|||
type: "master_count", |
|||
name: "硕士", |
|||
}, { |
|||
value: info.doctor_count || 0, |
|||
type: "doctor_count", |
|||
name: "博士", |
|||
}, ]; |
|||
} else if (currentTab == "下级人口分布") { |
|||
this.pieData = []; |
|||
} |
|||
this.iniPieChart(); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
handelClickMyPei(item){ |
|||
this.handleClickItem(item) |
|||
} |
|||
}, |
|||
}; |
|||
],*/ |
|||
tabList: [ |
|||
{ |
|||
label: "性别", |
|||
value: "性别" |
|||
}, { |
|||
label: "户籍", |
|||
value: "户籍" |
|||
}, { |
|||
label: "人户状况", |
|||
value: "人户状况" |
|||
}, { |
|||
label: "年龄", |
|||
value: "年龄" |
|||
}, { |
|||
label: "志愿者类别", |
|||
value: "志愿者类别" |
|||
}, { |
|||
label: "党员文化程度", |
|||
value: "党员文化程度" |
|||
} |
|||
], |
|||
currentTab: "性别", |
|||
info: { |
|||
male_count: 0, |
|||
female_count: 0, |
|||
resi_y_house_y_count: 0, |
|||
resi_y_house_n_count: 0, |
|||
resi_n_house_y_count: 0, |
|||
primary_count: 0, |
|||
junior_high_count: 0, |
|||
second_speci_count: 0, |
|||
high_school_count: 0, |
|||
junior_college_count: 0, |
|||
undergrad_count: 0, |
|||
master_count: 0, |
|||
doctor_count: 0, |
|||
local_count: 0, |
|||
field_count: 0, |
|||
age50_count: 0, |
|||
age5059_count: 0, |
|||
age6069_count: 0, |
|||
age7079_count: 0, |
|||
age80_count: 0, |
|||
culture_count: 0, |
|||
committee_count: 0, |
|||
capable_count: 0, |
|||
friend_count: 0, |
|||
agent_count: 0, |
|||
mediator_count: 0, |
|||
collector_count: 0, |
|||
security_count: 0, |
|||
party_mem_count: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
watch: { |
|||
currentTab() { |
|||
this.setPieData(); |
|||
}, |
|||
orgId() { |
|||
this.init(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
await this.getInfo(); |
|||
this.getPie(); |
|||
}, |
|||
handleClickItem(item) { |
|||
const { |
|||
type, |
|||
name |
|||
} = item.data; |
|||
this.$router.push({ |
|||
path: "/dataBoard/renfang/resi-analyze", |
|||
query: { |
|||
org_id: this.orgId, |
|||
type, |
|||
type_category: this.currentTab, |
|||
type_name: name, |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取房屋总数等 |
|||
async getInfo() { |
|||
const url = "resident_analyze"; |
|||
this.$refs.pieChart.showLoading(); |
|||
const { |
|||
data, |
|||
code, |
|||
msg |
|||
} = await requestPostBi(url, { |
|||
queryParam: { |
|||
org_id: this.orgId, |
|||
}, |
|||
}, { |
|||
// mockId: 60041615, |
|||
}); |
|||
this.$refs.pieChart.hideLoading(); |
|||
if (code === 0) { |
|||
if (data && Array.isArray(data) && data.length > 0) { |
|||
let info = data[0]; |
|||
this.info = { |
|||
...this.info, |
|||
...info |
|||
}; |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
selItem(selItem, selIndex) { |
|||
this.tabList.forEach((element, index) => { |
|||
if (index === selIndex) { |
|||
element.sel = true; |
|||
} else { |
|||
element.sel = false; |
|||
} |
|||
}); |
|||
}, |
|||
pieInitOk() { |
|||
this.pieInitState = true; |
|||
}, |
|||
getPie() { |
|||
if (this.pieInitState) { |
|||
this.setPieData(); |
|||
} else { |
|||
setTimeout(() => { |
|||
this.getPie(); |
|||
}, 500); |
|||
} |
|||
}, |
|||
setPieData() { |
|||
const { |
|||
currentTab, |
|||
info |
|||
} = this; |
|||
if (currentTab == "性别") { |
|||
this.pieData = [{ |
|||
value: info.male_count || 0, |
|||
type: "male_count", |
|||
name: "男性", |
|||
}, { |
|||
value: info.female_count || 0, |
|||
type: "female_count", |
|||
name: "女性", |
|||
},]; |
|||
} else if (currentTab == "户籍") { |
|||
this.pieData = [{ |
|||
value: info.local_count || 0, |
|||
type: "local_count", |
|||
name: "本地户籍", |
|||
}, { |
|||
value: info.field_count || 0, |
|||
type: "field_count", |
|||
name: "外地户籍", |
|||
},]; |
|||
} else if (currentTab == "人户状况") { |
|||
this.pieData = [{ |
|||
value: info.resi_y_house_y_count || 0, |
|||
type: "resi_y_house_y_count", |
|||
name: "人户一致", |
|||
}, { |
|||
value: info.resi_y_house_n_count || 0, |
|||
type: "resi_y_house_n_count", |
|||
name: "人在户不在", |
|||
}, { |
|||
value: info.resi_n_house_y_count || 0, |
|||
type: "resi_n_house_y_count", |
|||
name: "户在人不在", |
|||
},]; |
|||
} else if (currentTab == "年龄") { |
|||
this.pieData = [{ |
|||
value: info.age50_count || 0, |
|||
type: "age50_count", |
|||
name: "50岁以下", |
|||
}, { |
|||
value: info.age5059_count || 0, |
|||
type: "age5059_count", |
|||
name: "50-59岁", |
|||
}, { |
|||
value: info.age6069_count || 0, |
|||
type: "age6069_count", |
|||
name: "60-69岁", |
|||
}, { |
|||
value: info.age7079_count || 0, |
|||
type: "age7079_count", |
|||
name: "70-79岁", |
|||
}, { |
|||
value: info.age80_count || 0, |
|||
type: "age80_count", |
|||
name: "80岁以上", |
|||
},]; |
|||
} else if (currentTab == "志愿者类别") { |
|||
this.pieData = [{ |
|||
value: info.culture_count || 0, |
|||
type: "culture_count", |
|||
name: "文化队伍", |
|||
}, { |
|||
value: info.committee_count || 0, |
|||
type: "committee_count", |
|||
name: "楼委会", |
|||
}, { |
|||
value: info.capable_count || 0, |
|||
type: "capable_count", |
|||
name: "能人达人", |
|||
}, { |
|||
value: info.friend_count || 0, |
|||
type: "friend_count", |
|||
name: "老友俱乐部", |
|||
}, { |
|||
value: info.agent_count || 0, |
|||
type: "agent_count", |
|||
name: "代办员", |
|||
}, { |
|||
value: info.mediator_count || 0, |
|||
type: "mediator_count", |
|||
name: "调解员", |
|||
}, { |
|||
value: info.collector_count || 0, |
|||
type: "collector_count", |
|||
name: "采集员", |
|||
}, { |
|||
value: info.security_count || 0, |
|||
type: "security_count", |
|||
name: "治安巡逻员", |
|||
}, { |
|||
value: info.party_mem_count || 0, |
|||
type: "party_mem_count", |
|||
name: "党员中心户", |
|||
},]; |
|||
} else if (currentTab == "党员文化程度") { |
|||
this.pieData = [{ |
|||
value: info.primary_count || 0, |
|||
type: "primary_count", |
|||
name: "小学及文盲", |
|||
}, { |
|||
value: info.junior_high_count || 0, |
|||
type: "junior_high_count", |
|||
name: "初中", |
|||
}, { |
|||
value: info.second_speci_count || 0, |
|||
type: "second_speci_count", |
|||
name: "中专", |
|||
}, { |
|||
value: info.high_school_count || 0, |
|||
type: "high_school_count", |
|||
name: "高中", |
|||
}, { |
|||
value: info.junior_college_count || 0, |
|||
type: "junior_college_count", |
|||
name: "大专", |
|||
}, { |
|||
value: info.undergrad_count || 0, |
|||
type: "undergrad_count", |
|||
name: "本科", |
|||
}, { |
|||
value: info.master_count || 0, |
|||
type: "master_count", |
|||
name: "硕士", |
|||
}, { |
|||
value: info.doctor_count || 0, |
|||
type: "doctor_count", |
|||
name: "博士", |
|||
},]; |
|||
} else if (currentTab == "下级人口分布") { |
|||
this.pieData = []; |
|||
} |
|||
this.iniPieChart(); |
|||
}, |
|||
// 获取饼状图 |
|||
async iniPieChart() { |
|||
this.$refs.pieChart.clear(); |
|||
// 获取pieChart配置 |
|||
this.pieOption = pieOption(); |
|||
this.pieOption.series[0].name = this.currentTab; |
|||
this.pieOption.series[0].data = this.pieData; |
|||
this.$refs.pieChart.setOption(this.pieOption); |
|||
}, |
|||
handelClickMyPei(item) { |
|||
this.handleClickItem(item) |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.cur{cursor: pointer;} |
|||
.m-rkyj { |
|||
.list { |
|||
margin-top: 8px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
/deep/ .tabs .tab { |
|||
min-width: 0 !important; |
|||
} |
|||
|
|||
.cur { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.m-rkyj { |
|||
padding: 10px; |
|||
|
|||
.list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 8px; |
|||
|
|||
.item { |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
line-height: 32px; |
|||
align-items: center; |
|||
flex: 0 0 117px; |
|||
height: 32px; |
|||
margin-top: 8px; |
|||
margin-right: 2px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png); |
|||
background-size: cover; |
|||
} |
|||
|
|||
.item { |
|||
margin-top: 8px; |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png); |
|||
background-size: cover; |
|||
flex: 0 0 117px; |
|||
height: 32px; |
|||
margin-right: 2px; |
|||
text-align: center; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
line-height: 32px; |
|||
cursor: pointer; |
|||
} |
|||
.item-sel { |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png); |
|||
background-size: cover; |
|||
} |
|||
} |
|||
|
|||
.item-sel { |
|||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png); |
|||
background-size: cover; |
|||
} |
|||
} |
|||
.pie-main { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-left: 25px; |
|||
|
|||
.pie-main { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-left: 25px; |
|||
.legend { |
|||
// flex: 0 0 140px; |
|||
margin-top: 40px; |
|||
|
|||
.legend { |
|||
// flex: 0 0 140px; |
|||
margin-top: 40px; |
|||
.legend-row { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-top: 15px; |
|||
|
|||
.legend-row { |
|||
margin-top: 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
&:nth-child(1) .name::before { |
|||
background: #1a95ff; |
|||
} |
|||
|
|||
&:nth-child(1) .name::before { |
|||
background: #1a95ff; |
|||
} |
|||
&:nth-child(2) .name::before { |
|||
background: #ff6138; |
|||
} |
|||
|
|||
&:nth-child(2) .name::before { |
|||
background: #ff6138; |
|||
} |
|||
&:nth-child(3) .name::before { |
|||
background: #2adcea; |
|||
} |
|||
|
|||
&:nth-child(3) .name::before { |
|||
background: #2adcea; |
|||
} |
|||
&:nth-child(4) .name::before { |
|||
background: #2cc4ad; |
|||
} |
|||
|
|||
&:nth-child(4) .name::before { |
|||
background: #2cc4ad; |
|||
} |
|||
&:nth-child(5) .name::before { |
|||
background: #7377f5; |
|||
} |
|||
|
|||
&:nth-child(5) .name::before { |
|||
background: #7377f5; |
|||
} |
|||
&:nth-child(6) .name::before { |
|||
background: #32de66; |
|||
} |
|||
|
|||
&:nth-child(6) .name::before { |
|||
background: #32de66; |
|||
} |
|||
&:nth-child(7) .name::before { |
|||
background: #8155d4; |
|||
} |
|||
|
|||
&:nth-child(7) .name::before { |
|||
background: #8155d4; |
|||
} |
|||
&:nth-child(8) .name::before { |
|||
background: #c7ea48; |
|||
} |
|||
|
|||
&:nth-child(8) .name::before { |
|||
background: #c7ea48; |
|||
} |
|||
&:nth-child(9) .name::before { |
|||
background: #ef47c2; |
|||
} |
|||
|
|||
&:nth-child(9) .name::before { |
|||
background: #ef47c2; |
|||
} |
|||
&:nth-child(10) .name::before { |
|||
background: #d43349; |
|||
} |
|||
|
|||
&:nth-child(10) .name::before { |
|||
background: #d43349; |
|||
} |
|||
.name { |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-size: 12px; |
|||
font-weight: 400; |
|||
line-height: 17px; |
|||
position: relative; |
|||
margin-left: 5px; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
|
|||
.name { |
|||
position: relative; |
|||
margin-left: 5px; |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: rgba(255, 255, 255, 0.65); |
|||
line-height: 17px; |
|||
&::before { |
|||
position: absolute; |
|||
top: 4px; |
|||
left: -15px; |
|||
width: 8px; |
|||
height: 8px; |
|||
content: ""; |
|||
} |
|||
} |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 4px; |
|||
left: -15px; |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
} |
|||
.content { |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin-left: 24px; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.content { |
|||
margin-left: 24px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
} |
|||
.num { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 20px; |
|||
} |
|||
.unit { |
|||
font-size: 14px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 5px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
.pie { |
|||
flex: 0 0 280px; |
|||
height: 146px; |
|||
margin-top: 32px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pie { |
|||
margin-top: 32px; |
|||
flex: 0 0 280px; |
|||
height: 270px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,141 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="list" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="地点" prop="key"/> |
|||
<el-table-column label="工单号" prop="key"/> |
|||
<el-table-column label="所属社区" prop="key"></el-table-column> |
|||
<el-table-column label="事件分类" prop="key"></el-table-column> |
|||
<el-table-column label="投诉内容" prop="key"></el-table-column> |
|||
<el-table-column label="接收时间" prop="key"></el-table-column> |
|||
<el-table-column label="联系人" prop="key"></el-table-column> |
|||
<el-table-column label="联系电话" prop="key"></el-table-column> |
|||
<el-table-column label="状态" prop="key"></el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/> |
|||
|
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue"; |
|||
|
|||
export default { |
|||
name: "TddtlxsjDetail", |
|||
components: {Breadcrumb, Pagination, Title, EventDetails}, |
|||
data() { |
|||
return { |
|||
showDialog: false, |
|||
rowId: "", |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/Problem/tddtlxsj", |
|||
name: "同地点同类型重复投诉问题列表", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
], |
|||
list: [{}, {}, {}], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
} |
|||
|
|||
this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
handleView({id}) { |
|||
this.showDialog = true; |
|||
this.rowId = id; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-select |
|||
v-model="typeCondition" |
|||
class="select" |
|||
placeholder="请选择" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
@change="timeChange" |
|||
> |
|||
<el-option |
|||
v-for="item in typeConditionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."> |
|||
<el-table-column label="序号" type="index"/> |
|||
<el-table-column label="地点" prop="key"/> |
|||
<el-table-column label="类型" prop="gridName"/> |
|||
<el-table-column label="投诉次数" prop="restName"></el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "tddtlxsjList", |
|||
components: {Breadcrumb, Pagination, Title}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
typeCondition: 5, |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "同地点同类型重复投诉问题列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
list: [{}, {}, {}], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
...this.timeChange(this.typeCondition) |
|||
} |
|||
|
|||
this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (type == 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
|
|||
if (type == 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return {startTime, endTime}; |
|||
}, |
|||
handleView(id) { |
|||
this.id = id; |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tddtlxsj/detail?id='+id) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,141 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="list" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="地点" prop="key"/> |
|||
<el-table-column label="工单号" prop="key"/> |
|||
<el-table-column label="所属社区" prop="key"></el-table-column> |
|||
<el-table-column label="事件分类" prop="key"></el-table-column> |
|||
<el-table-column label="投诉内容" prop="key"></el-table-column> |
|||
<el-table-column label="接收时间" prop="key"></el-table-column> |
|||
<el-table-column label="联系人" prop="key"></el-table-column> |
|||
<el-table-column label="联系电话" prop="key"></el-table-column> |
|||
<el-table-column label="状态" prop="key"></el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/> |
|||
|
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue"; |
|||
|
|||
export default { |
|||
name: "tyrydetail", |
|||
components: {Breadcrumb, Pagination, Title, EventDetails}, |
|||
data() { |
|||
return { |
|||
showDialog: false, |
|||
rowId: "", |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/Problem/tyqybtlx", |
|||
name: "同一区域不同类型重复投诉问题列表", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
], |
|||
list: [{}, {}, {}], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
} |
|||
|
|||
this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
handleView({id}) { |
|||
this.showDialog = true; |
|||
this.rowId = id; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-select |
|||
v-model="typeCondition" |
|||
class="select" |
|||
placeholder="请选择" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
@change="timeChange" |
|||
> |
|||
<el-option |
|||
v-for="item in typeConditionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="data" |
|||
:span-method="objectSpanMethod" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" prop="number" width="80"/> |
|||
<el-table-column label="地点" prop="column1"/> |
|||
<el-table-column label="类型" prop="column3"/> |
|||
<el-table-column label="投诉次数" prop="column2"/> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "tyryList", |
|||
components: {Breadcrumb, Pagination, Title}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
typeCondition: 5, |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "同一区域不同类型重复投诉问题列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
data: [ |
|||
{number: 1, column1: '市北区清江路100号', column2: '10', column3: '100'}, |
|||
{number: 2, column1: '市北区清江路100号', column2: '10', column3: '100'}, |
|||
{number: 3, column1: '市北区清江路100号', column2: '10', column3: '100'}, |
|||
{number: 4, column1: '市北区清江路**号', column2: '10', column3: '100'}, |
|||
{number: 5, column1: '市北区清江路**号', column2: '10', column3: '100'}, |
|||
], |
|||
data1: [ |
|||
"number", |
|||
"column1", |
|||
"column2", |
|||
"column3" |
|||
], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
objectSpanMethod({row, column, rowIndex, columnIndex}) { |
|||
if (columnIndex === 1 || columnIndex === 0 || columnIndex === 4) { |
|||
if (rowIndex > 0 && row.column1 === this.data[rowIndex - 1].column1) { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0, |
|||
}; |
|||
} else { |
|||
let rowspan = 1; |
|||
for (let i = rowIndex + 1; i < this.data.length; i++) { |
|||
if (row.column1 === this.data[i].column1) { |
|||
rowspan++; |
|||
} else { |
|||
//else：当遇到与当前行 "Name" 值不同的行时，我们退出循环。 |
|||
break; |
|||
} |
|||
} |
|||
//最后，我们返回 { rowspan, colspan: 1 }，其中 rowspan 表示需要合并的行数，而 colspan: 1 表示不合并列 |
|||
return { |
|||
rowspan, |
|||
colspan: 1, |
|||
}; |
|||
} |
|||
} |
|||
}, |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
...this.timeChange(this.typeCondition) |
|||
} |
|||
|
|||
this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (type == 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
|
|||
if (type == 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return {startTime, endTime}; |
|||
}, |
|||
handleView(id) { |
|||
this.id = id; |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tyqybtlx/detail?id=' + id) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table-border.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,140 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="table"> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="list" |
|||
element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" |
|||
element-loading-text="加载中..." |
|||
> |
|||
<el-table-column label="序号" type="index" width="80"/> |
|||
<el-table-column label="工单号" prop="key"/> |
|||
<el-table-column label="所属社区" prop="key"></el-table-column> |
|||
<el-table-column label="事件分类" prop="key"></el-table-column> |
|||
<el-table-column label="投诉内容" prop="key"></el-table-column> |
|||
<el-table-column label="接收时间" prop="key"></el-table-column> |
|||
<el-table-column label="联系人" prop="key"></el-table-column> |
|||
<el-table-column label="联系电话" prop="key"></el-table-column> |
|||
<el-table-column label="状态" prop="key"></el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/> |
|||
|
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue"; |
|||
|
|||
export default { |
|||
name: "tyrydetail", |
|||
components: {Breadcrumb, Pagination, Title, EventDetails}, |
|||
data() { |
|||
return { |
|||
showDialog: false, |
|||
rowId: "", |
|||
queryParams: { |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/Problem/tyry", |
|||
name: "同一人员重复投诉问题列表", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "详情", |
|||
}, |
|||
], |
|||
list: [{}, {}, {}], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
} |
|||
|
|||
this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
handleView({id}) { |
|||
this.showDialog = true; |
|||
this.rowId = id; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,195 @@ |
|||
<template> |
|||
<div> |
|||
<Breadcrumb :list="breadcrumbList"/> |
|||
<div class="screen"> |
|||
<el-form :model="queryParams" inline> |
|||
<el-select |
|||
v-model="typeCondition" |
|||
class="select" |
|||
placeholder="请选择" |
|||
popper-class="selectPopClass" |
|||
size="small" |
|||
@change="timeChange" |
|||
> |
|||
<el-option |
|||
v-for="item in typeConditionList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-button class="btn" size="small" type="primary" @click="search">查询</el-button> |
|||
</el-form> |
|||
</div> |
|||
<div class="table"> |
|||
<el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)" |
|||
element-loading-spinner="el-icon-loading" element-loading-text="加载中..."> |
|||
<el-table-column label="序号" type="index"/> |
|||
<el-table-column label="联系方式" prop="key"/> |
|||
<el-table-column label="投诉次数" prop="restName"></el-table-column> |
|||
<el-table-column align="center" label="详情"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text" @click="handleView(data.row)">查看</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total" |
|||
@pagination="getList"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb"; |
|||
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination"; |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
|
|||
export default { |
|||
name: "tyryList", |
|||
components: {Breadcrumb, Pagination, Title}, |
|||
data() { |
|||
return { |
|||
queryParams: { |
|||
month: "", |
|||
agencyId: "", |
|||
pageNo: 1, |
|||
pageSize: 10, |
|||
}, |
|||
typeCondition: 5, |
|||
typeConditionList: [ |
|||
{ |
|||
label: "本月", |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: "上月", |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: "近三月", |
|||
value: 3, |
|||
}, |
|||
{ |
|||
label: "近半年", |
|||
value: 4, |
|||
}, |
|||
{ |
|||
label: "近一年", |
|||
value: 5, |
|||
}, |
|||
], |
|||
total: 0, |
|||
orgOptions: [], |
|||
breadcrumbList: [ |
|||
{ |
|||
path: "/dataBoard/satisfactionEval/index", |
|||
name: "满意度评价", |
|||
}, |
|||
{ |
|||
path: "", |
|||
name: "同一人员重复投诉问题列表 ", |
|||
}, |
|||
], |
|||
monthOptions: new Array(12).fill(0).map((_, index) => { |
|||
return {label: index - 0 + 1 + "月", value: index - 0 + 1}; |
|||
}), |
|||
list: [{}, {}, {}], |
|||
title: "", |
|||
loading: false, |
|||
}; |
|||
}, |
|||
activated() { |
|||
this.title = this.$route.query.title; |
|||
let searchParams = JSON.parse(this.$route.query.searchParams); |
|||
this.queryParams = { |
|||
...this.queryParams, |
|||
...searchParams, |
|||
}; |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
search() { |
|||
this.queryParams.pageNo = 1; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
let params = { |
|||
...this.queryParams, |
|||
...this.timeChange(this.typeCondition) |
|||
} |
|||
|
|||
this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => { |
|||
this.total = data.total; |
|||
this.list = data.list; |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
timeChange(type) { |
|||
let startTime = "", |
|||
endTime = ""; |
|||
if (type == 1) { |
|||
startTime = this.$moment().startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 2) { |
|||
startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 3) { |
|||
startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 4) { |
|||
startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
if (type == 5) { |
|||
startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
|
|||
if (type == 2) { |
|||
endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"); |
|||
} else { |
|||
endTime = this.$moment().endOf("month").format("YYYY-MM-DD"); |
|||
} |
|||
return {startTime, endTime}; |
|||
}, |
|||
handleView(id) { |
|||
this.id = id; |
|||
this.$router.push('/dataBoard/satisfactionEval/Problem/tyry/detail?id='+id) |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
|
|||
.screen { |
|||
margin: 25px 0 40px; |
|||
|
|||
.el-select, |
|||
.el-input { |
|||
width: 150px; |
|||
margin-right: 4px; |
|||
border: 1px solid #126ac5; |
|||
border-radius: 2px; |
|||
|
|||
/deep/ .el-input__inner { |
|||
color: #fff; |
|||
border: none; |
|||
background: none; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
height: 32px; |
|||
margin-left: 46px; |
|||
} |
|||
} |
|||
|
|||
.main-title { |
|||
margin: 25px 0 32px; |
|||
} |
|||
|
|||
.table { |
|||
margin-top: 32px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue