战立标
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' |
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,
|
|
||||
// },
|
|
||||
|
|
||||
// },
|
export function pieOption() { |
||||
series: [ |
const center = ["50%", "170px"]; |
||||
{ |
return { |
||||
name: 'Access From', |
color: ["#1A95FF", "#FFAA00", "#04C790"], |
||||
type: 'pie', |
/* title: { |
||||
radius: ['60%', '90%'], |
text: "0", |
||||
avoidLabelOverlap: false, |
top: 45, |
||||
label: { |
left: "center", |
||||
show: false, |
textStyle: { |
||||
position: 'center' |
width: "100%", |
||||
|
fontSize: 24, |
||||
|
color: "#FFFFFF", |
||||
|
fontWeight: 400, |
||||
|
}, |
||||
|
itemGap: 5, |
||||
|
// subtext: "总数",
|
||||
|
// subtextStyle: {
|
||||
|
// fontSize: 20,
|
||||
|
// color: "#fff",
|
||||
|
// fontWeight: 400,
|
||||
|
// },
|
||||
|
},*/ |
||||
|
tooltip: { |
||||
|
show: false, |
||||
}, |
}, |
||||
// emphasis: {
|
// legend: {
|
||||
// label: {
|
// top: 350,
|
||||
// show: true,
|
// bottom: 0,
|
||||
// fontSize: 40,
|
// itemWidth: 20,
|
||||
// fontWeight: 'bold'
|
// 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> |
<template> |
||||
<div> |
<div> |
||||
<div class="m-jmgl"> |
<div class="m-jmgl"> |
||||
<div class="m-pie"> |
<div class="m-pie"> |
||||
<div class="pie-left"> |
<div class="pie-left"> |
||||
<screen-echarts-frame |
<screen-echarts-frame |
||||
class="" |
v-if="pandectData.totalResidents" |
||||
@myChartMethod="pieInitOk" |
ref="pieChart" |
||||
ref="pieChart" |
class="" |
||||
v-if="pandectData.totalResidents" |
@myChartMethod="pieInitOk" |
||||
></screen-echarts-frame> |
></screen-echarts-frame> |
||||
</div> |
</div> |
||||
<div class="pie-legend"> |
|
||||
<div class="item"> |
<div class="pie-right"> |
||||
<div class="item-logo logo1"></div> |
<div class="new-number"> |
||||
<div class="item-name">常住人口</div> |
<!-- <div class="row-item" @click="toListPage"> |
||||
</div> |
<div class="item-one"> |
||||
<div class="item"> |
<img |
||||
<div class="item-logo logo2"></div> |
class="img" |
||||
<div class="item-name">流动人口</div> |
src="@/assets/images/shuju/renfang/jm-logo.png" |
||||
</div> |
alt |
||||
</div> |
/> |
||||
<div class="pie-right"> |
<div class="title">居民总数</div> |
||||
<div class="right-row"> |
</div> |
||||
<div class="row-item" @click="toListPage"> |
<div class="item-two"> |
||||
<div class="item-one"> |
<div class="num">{{ pandectData.totalResidents }}</div> |
||||
<img |
<div class="unit">人</div> |
||||
class="img" |
</div> |
||||
src="@/assets/images/shuju/renfang/jm-logo.png" |
</div>--> |
||||
alt |
<div class="new-number-item" @click="toListPage('permanent', '常住人口')"> |
||||
/> |
<div class="title">常住人口</div> |
||||
<div class="title">居民总数</div> |
<div class="numbers"> |
||||
</div> |
<div class="num color1"> |
||||
<div class="item-two"> |
{{ pandectData.permanentResiCount }} |
||||
<div class="num">{{ pandectData.totalResidents }}</div> |
</div> |
||||
<div class="unit">人</div> |
<div class="unit">人</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
<div class="new-number-item" @click="toListPage('float', '流动人口')"> |
||||
<div |
<div class="title">流动人口</div> |
||||
class="row-item marginleft10" |
<div class="numbers color2"> |
||||
@click="toListPage('permanent', '常住人口')" |
<div class="num">{{ pandectData.floatingResiCount }}</div> |
||||
> |
<div class="unit">人</div> |
||||
<div class="item-one"> |
</div> |
||||
<img |
</div> |
||||
class="img" |
</div> |
||||
src="@/assets/images/shuju/renfang/jm-logo.png" |
</div> |
||||
alt |
</div> |
||||
/> |
</div> |
||||
<div class="title">常住人口</div> |
</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> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
||||
import { pieOption } from "./jmPieOption.js"; |
import {pieOption} from "./jmPieOption.js"; |
||||
import { barOption } from "./jmBarOption.js"; |
import {barOption} from "./jmBarOption.js"; |
||||
import { requestPostBi } from "@/js/dai/request-bipass"; |
import {requestPostBi} from "@/js/dai/request-bipass"; |
||||
|
|
||||
export default { |
export default { |
||||
props: { |
props: { |
||||
orgId: { |
orgId: { |
||||
type: String, |
type: String, |
||||
default: "", |
default: "", |
||||
}, |
}, |
||||
}, |
}, |
||||
components: { |
components: { |
||||
screenEchartsFrame, |
screenEchartsFrame, |
||||
}, |
}, |
||||
// mixins: [animate] |
// mixins: [animate] |
||||
beforeDestroy() { |
beforeDestroy() { |
||||
this.timer && clearInterval(this.timer); |
this.timer && clearInterval(this.timer); |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
showNoData: false, |
showNoData: false, |
||||
timer: null, |
timer: null, |
||||
barChart: "", |
barChart: "", |
||||
pieChart: "", |
pieChart: "", |
||||
pieOption: {}, |
pieOption: {}, |
||||
barOption: {}, |
barOption: {}, |
||||
pieInitState: false, |
pieInitState: false, |
||||
barInitState: false, |
barInitState: false, |
||||
pieData: [], |
pieData: [], |
||||
|
|
||||
info: { |
info: { |
||||
resident_count: 0, |
resident_count: 0, |
||||
inhabitant_count: 0, |
inhabitant_count: 0, |
||||
floating_count: 0, |
floating_count: 0, |
||||
}, |
}, |
||||
pandectData:{} |
pandectData: {} |
||||
}; |
}; |
||||
}, |
}, |
||||
watch: { |
watch: { |
||||
orgId() { |
orgId() { |
||||
this.getData(); |
this.getData(); |
||||
}, |
}, |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
this.$nextTick(()=>{ |
this.$nextTick(() => { |
||||
this.getData(); |
this.getData(); |
||||
}) |
}) |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
toListPage(type = "", type_name = "") { |
toListPage(type = "", type_name = "") { |
||||
this.$router.push({ |
this.$router.push({ |
||||
path: "/dataBoard/renfang/resi-list", |
path: "/dataBoard/renfang/resi-list", |
||||
query: { |
query: { |
||||
org_id: this.orgId, |
org_id: this.orgId, |
||||
type, |
type, |
||||
type_name, |
type_name, |
||||
}, |
}, |
||||
}); |
}); |
||||
}, |
}, |
||||
|
|
||||
pieInitOk() { |
pieInitOk() { |
||||
this.pieInitState = true; |
this.pieInitState = true; |
||||
}, |
}, |
||||
barInitOk() { |
barInitOk() { |
||||
this.barInitState = true; |
this.barInitState = true; |
||||
}, |
}, |
||||
async getData() { |
async getData() { |
||||
await this.getInfo(); |
await this.getInfo(); |
||||
this.getBar(); |
this.getBar(); |
||||
this.getPie(); |
this.getPie(); |
||||
}, |
}, |
||||
getBar() { |
getBar() { |
||||
if (this.barInitState) { |
if (this.barInitState) { |
||||
this.getBarData(); |
this.getBarData(); |
||||
} else { |
} else { |
||||
setTimeout(() => { |
setTimeout(() => { |
||||
this.getBar(); |
this.getBar(); |
||||
}, 500); |
}, 500); |
||||
} |
} |
||||
}, |
}, |
||||
getPie() { |
getPie() { |
||||
if (this.pieInitState) { |
if (this.pieInitState) { |
||||
this.iniPieChart(); |
this.iniPieChart(); |
||||
} else { |
} else { |
||||
setTimeout(() => { |
setTimeout(() => { |
||||
this.getPie(); |
this.getPie(); |
||||
}, 500); |
}, 500); |
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
// 获取房屋总数等 |
// 获取房屋总数等 |
||||
async getInfo() { |
async getInfo() { |
||||
const url = "resident_view"; |
const url = "resident_view"; |
||||
|
|
||||
const { data, code, msg } = await requestPostBi( |
const {data, code, msg} = await requestPostBi( |
||||
url, |
url, |
||||
{ |
{ |
||||
queryParam: { |
queryParam: { |
||||
org_id: this.orgId, |
org_id: this.orgId, |
||||
}, |
}, |
||||
}, |
}, |
||||
{ |
{ |
||||
// mockId: 60029804, |
// mockId: 60029804, |
||||
} |
} |
||||
); |
); |
||||
|
|
||||
if (code === 0) { |
if (code === 0) { |
||||
if (data && Array.isArray(data) && data.length > 0) { |
if (data && Array.isArray(data) && data.length > 0) { |
||||
let info = data[0]; |
let info = data[0]; |
||||
this.info = { ...this.info, ...info }; |
this.info = {...this.info, ...info}; |
||||
} else { |
} else { |
||||
this.info = { |
this.info = { |
||||
resident_count: 0, |
resident_count: 0, |
||||
inhabitant_count: 0, |
inhabitant_count: 0, |
||||
floating_count: 0, |
floating_count: 0, |
||||
}; |
}; |
||||
} |
} |
||||
} else { |
} else { |
||||
this.$message.error(msg); |
this.$message.error(msg); |
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
// 获取饼状图 |
// 获取饼状图 |
||||
async iniPieChart() { |
async iniPieChart() { |
||||
this.$refs.pieChart.clear(); |
this.$refs.pieChart.clear(); |
||||
// this.$refs.pieChart.showLoading() |
this.pieOption = pieOption(); |
||||
// 获取pieChart配置 |
const {pandectData} = this; |
||||
this.pieOption = pieOption(); |
this.pieData = [ |
||||
const { pandectData } = this; |
{value: pandectData.permanentResiCount, name: "常住人口"}, |
||||
// 设置三个配置值 |
{value: pandectData.floatingResiCount, name: "流动人口"}, |
||||
this.pieOption.title.text = |
]; |
||||
(pandectData.totalResidents != 0 |
this.pieOption.series[0].data = this.pieData; |
||||
? parseInt( |
this.$refs.pieChart.setOption(this.pieOption); |
||||
(100 * pandectData.permanentResiCount) / pandectData.totalResidents |
this.$refs.pieChart.myChart.setOption(this.pieOption); |
||||
) |
this.$refs.pieChart.myChart.on('mouseover', (params) => { |
||||
: "--") + "%"; |
var oldIndex = currentIndex; |
||||
this.pieData = [ |
var currentIndex = params.dataIndex; |
||||
{ value: pandectData.permanentResiCount, name: "常住人口" }, |
this.highlightPie(currentIndex, oldIndex); |
||||
{ value: pandectData.floatingResiCount, name: "流动人口" }, |
}) |
||||
]; |
|
||||
this.pieOption.series[0].data = this.pieData; |
setTimeout(() => { |
||||
this.$refs.pieChart.setOption(this.pieOption); |
this.highlightPie(0, 1); |
||||
// this.$refs.pieChart.hideLoading() |
}, 50) |
||||
|
}, |
||||
// 点击饼图 切换中心显示的比例 |
highlightPie(currentIndex, oldIndex) { |
||||
this.$refs.pieChart.myChart.on("selectchanged", (params) => { |
this.$refs.pieChart.myChart.dispatchAction({ |
||||
console.log(params); |
type: 'downplay', |
||||
const { |
seriesIndex: 1, |
||||
fromActionPayload: { dataIndexInside }, |
dataIndex: oldIndex |
||||
} = params; |
}) |
||||
this.pieOption.title.text = |
this.$refs.pieChart.myChart.dispatchAction({ |
||||
(pandectData.totalResidents != 0 |
type: 'highlight', |
||||
? parseInt( |
seriesIndex: 1, |
||||
(100 * |
dataIndex: currentIndex |
||||
[ |
}) |
||||
pandectData.permanentResiCount, |
}, |
||||
pandectData.floatingResiCount, |
// 获取房屋总数等 |
||||
][dataIndexInside]) / |
async getBarData() { |
||||
pandectData.totalResidents |
const url = "resident_trend"; |
||||
) |
|
||||
: "--") + "%"; |
this.$refs.barChart.showLoading(); |
||||
this.$refs.pieChart.myChart.setOption(this.pieOption); |
const {data, code, msg} = await requestPostBi( |
||||
}); |
url, |
||||
}, |
{ |
||||
|
queryParam: { |
||||
// 获取房屋总数等 |
org_id: this.orgId, |
||||
async getBarData() { |
}, |
||||
const url = "resident_trend"; |
}, |
||||
|
{ |
||||
this.$refs.barChart.showLoading(); |
// mockId: 60389779, |
||||
const { data, code, msg } = await requestPostBi( |
} |
||||
url, |
); |
||||
{ |
|
||||
queryParam: { |
if (code === 0) { |
||||
org_id: this.orgId, |
if (data && Array.isArray(data)) { |
||||
}, |
let xaxis = []; |
||||
}, |
let series = [{data: []}, {data: []}]; |
||||
{ |
for (const { |
||||
// mockId: 60389779, |
month, |
||||
} |
inhabitant_count, |
||||
); |
floating_count, |
||||
|
} of data) { |
||||
if (code === 0) { |
xaxis.push(month); |
||||
if (data && Array.isArray(data)) { |
series[0].data.push(inhabitant_count); |
||||
let xaxis = []; |
series[1].data.push(floating_count); |
||||
let series = [{ data: [] }, { data: [] }]; |
} |
||||
for (const { |
this.iniBarChart(xaxis, series); |
||||
month, |
this.$refs.barChart.hideLoading(); |
||||
inhabitant_count, |
} |
||||
floating_count, |
} else { |
||||
} of data) { |
this.$message.error(msg); |
||||
xaxis.push(month); |
} |
||||
series[0].data.push(inhabitant_count); |
}, |
||||
series[1].data.push(floating_count); |
|
||||
} |
// 获取饼状图 |
||||
this.iniBarChart(xaxis, series); |
async iniBarChart(xaxis, series) { |
||||
this.$refs.barChart.hideLoading(); |
this.showNoData = false; |
||||
} |
this.$refs.barChart.clear(); |
||||
} else { |
this.barOption = barOption(); |
||||
this.$message.error(msg); |
this.$refs.barChart.setOption(this.barOption, true); |
||||
} |
this.$refs.barChart.setOption( |
||||
}, |
{ |
||||
|
xAxis: {data: xaxis}, |
||||
// 获取饼状图 |
series, |
||||
async iniBarChart(xaxis, series) { |
}, |
||||
this.showNoData = false; |
true |
||||
this.$refs.barChart.clear(); |
); |
||||
this.barOption = barOption(); |
}, |
||||
this.$refs.barChart.setOption(this.barOption, true); |
}, |
||||
this.$refs.barChart.setOption( |
|
||||
{ |
|
||||
xAxis: { data: xaxis }, |
|
||||
series, |
|
||||
}, |
|
||||
true |
|
||||
); |
|
||||
}, |
|
||||
}, |
|
||||
}; |
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.m-jmgl { |
.m-jmgl { |
||||
height: 100%; |
width: 100%; |
||||
width: 100%; |
height: 100%; |
||||
|
|
||||
.m-pie { |
.m-pie { |
||||
margin-top: 24px; |
display: flex; |
||||
display: flex; |
justify-content: space-around; |
||||
justify-content: space-around; |
margin-top: 24px; |
||||
|
align-items: center; |
||||
.pie-left { |
|
||||
height: 120px; |
.pie-left { |
||||
flex: 0 0 120px; |
flex: 0 0 120px; |
||||
} |
height: 120px; |
||||
|
} |
||||
.pie-legend { |
|
||||
.item { |
.pie-legend { |
||||
display: flex; |
.item { |
||||
margin-bottom: 12px; |
display: flex; |
||||
} |
margin-bottom: 12px; |
||||
} |
} |
||||
.pie-right { |
} |
||||
.right-row { |
|
||||
display: flex; |
.pie-right { |
||||
// justify-content: space-between; |
.right-row { |
||||
|
display: flex; |
||||
.row-item { |
// justify-content: space-between; |
||||
flex: 0 0 100px; |
|
||||
cursor: pointer; |
.row-item { |
||||
|
flex: 0 0 100px; |
||||
.item-one { |
cursor: pointer; |
||||
display: flex; |
|
||||
.img { |
.item-one { |
||||
width: 15px; |
display: flex; |
||||
height: 15px; |
|
||||
} |
.img { |
||||
.title { |
width: 15px; |
||||
margin-left: 9px; |
height: 15px; |
||||
font-size: 14px; |
} |
||||
font-family: PingFangSC-Regular, PingFang SC; |
|
||||
font-weight: 400; |
.title { |
||||
color: rgba(255, 255, 255, 0.65); |
font-family: PingFangSC-Regular, PingFang SC; |
||||
} |
font-size: 14px; |
||||
} |
font-weight: 400; |
||||
|
margin-left: 9px; |
||||
.item-two { |
color: rgba(255, 255, 255, 0.65); |
||||
margin-top: 8px; |
} |
||||
display: flex; |
} |
||||
align-items: flex-end; |
|
||||
margin-left: 23px; |
.item-two { |
||||
|
display: flex; |
||||
.num { |
align-items: flex-end; |
||||
font-size: 24px; |
margin-top: 8px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
margin-left: 23px; |
||||
font-weight: 500; |
|
||||
color: #ffffff; |
.num { |
||||
} |
font-family: PingFangSC-Medium, PingFang SC; |
||||
|
font-size: 24px; |
||||
.unit { |
font-weight: 500; |
||||
margin-left: 9px; |
color: #ffffff; |
||||
font-size: 14px; |
} |
||||
font-family: PingFangSC-Medium, PingFang SC; |
|
||||
font-weight: 500; |
.unit { |
||||
color: #ffffff; |
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 { |
.m-bar { |
||||
display: flex; |
position: relative; |
||||
align-items: center; |
margin-top: 14px; |
||||
// margin-left: 24px; |
|
||||
|
.bar-title { |
||||
.title_img { |
display: flex; |
||||
width: 17px; |
align-items: center; |
||||
height: 17px; |
// margin-left: 24px; |
||||
} |
|
||||
.tip_title { |
.title_img { |
||||
margin-left: 8px; |
width: 17px; |
||||
font-size: 16px; |
height: 17px; |
||||
font-family: PingFangSC-Medium, PingFang SC; |
} |
||||
font-weight: 500; |
|
||||
color: #ffffff; |
.tip_title { |
||||
line-height: 22px; |
font-family: PingFangSC-Medium, PingFang SC; |
||||
} |
font-size: 16px; |
||||
|
font-weight: 500; |
||||
.title_line { |
line-height: 22px; |
||||
margin-left: 8px; |
margin-left: 8px; |
||||
width: 244px; |
color: #ffffff; |
||||
height: 1px; |
} |
||||
background: linear-gradient( |
|
||||
270deg, |
.title_line { |
||||
rgba(55, 198, 255, 0.1) 0%, |
width: 244px; |
||||
#1995ff 100% |
height: 1px; |
||||
); |
margin-left: 8px; |
||||
} |
background: linear-gradient( |
||||
} |
270deg, |
||||
|
rgba(55, 198, 255, 0.1) 0%, |
||||
.bar-legend { |
#1995ff 100% |
||||
position: absolute; |
); |
||||
top: 37px; |
} |
||||
right: 20px; |
} |
||||
display: flex; |
|
||||
} |
.bar-legend { |
||||
|
position: absolute; |
||||
.bar-main { |
top: 37px; |
||||
margin-top: 10px; |
right: 20px; |
||||
height: 225px; |
display: flex; |
||||
} |
} |
||||
} |
|
||||
|
.bar-main { |
||||
|
height: 225px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
|
|
||||
.item-name { |
.item-name { |
||||
margin-left: 8px; |
font-family: PingFangSC-Regular, PingFang SC; |
||||
font-size: 12px; |
font-size: 12px; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
font-weight: 400; |
||||
font-weight: 400; |
margin-left: 8px; |
||||
color: #8c8c8c; |
color: #8c8c8c; |
||||
} |
} |
||||
|
|
||||
.item-logo { |
.item-logo { |
||||
margin-top: 2px; |
width: 8px; |
||||
width: 8px; |
height: 8px; |
||||
height: 8px; |
margin-top: 2px; |
||||
} |
} |
||||
|
|
||||
.logo1 { |
.logo1 { |
||||
background: #6fdeff; |
background: #6fdeff; |
||||
} |
} |
||||
|
|
||||
.logo2 { |
.logo2 { |
||||
background: #ffaa00; |
background: #ffaa00; |
||||
} |
} |
||||
|
|
||||
.logo3 { |
.logo3 { |
||||
background: #1a95ff; |
background: #1a95ff; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.color1 { |
||||
|
color: #1A95FF; |
||||
|
} |
||||
|
|
||||
|
.color2 { |
||||
|
color: #ffaa00; |
||||
} |
} |
||||
|
|
||||
|
.color3 { |
||||
|
color: #04C790; |
||||
|
} |
||||
|
|
||||
|
|
||||
.marginleft10 { |
.marginleft10 { |
||||
margin-left: 10px; |
margin-left: 10px; |
||||
} |
} |
||||
|
|
||||
.margintop18 { |
.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> |
</style> |
||||
|
|||||
@ -1,453 +1,493 @@ |
|||||
<template> |
<template> |
||||
<div class="m-rkyj"> |
<div class="m-rkyj"> |
||||
<div class="list"> |
<!-- <div class="list"> |
||||
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" |
<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" |
||||
@click="currentTab = item"> |
@click="currentTab = item"> |
||||
{{ item }} |
{{ item }} |
||||
</div> |
</div> |
||||
</div> |
</div>--> |
||||
<div class="pie-main"> |
<Tabs :list="tabList" :value="currentTab" @changeVal="(val) => currentTab = val"/> |
||||
<div class="legend cur"> |
<div class="pie-main"> |
||||
<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)"> |
<div class="pie"> |
||||
<div class="name">{{ item.name }}</div> |
<screen-echarts-frame |
||||
<div class="content"> |
ref="pieChart" |
||||
<div class="num">{{ item.value }}</div> |
@handelClickMyPei="handelClickMyPei" |
||||
<div class="unit">人</div> |
@myChartMethod="pieInitOk" |
||||
</div> |
/> |
||||
</div> |
</div> |
||||
</div> |
<div class="legend cur"> |
||||
<div class="pie"> |
<div v-for="item in pieData" :key="'pie' + item.name" class="legend-row" @click="handleClickItem(item)"> |
||||
<screen-echarts-frame @myChartMethod="pieInitOk" @handelClickMyPei="handelClickMyPei" ref="pieChart"></screen-echarts-frame> |
<div class="name">{{ item.name }}</div> |
||||
</div> |
<div class="content"> |
||||
</div> |
<div class="num">{{ item.value }}</div> |
||||
</div> |
<div class="unit">人</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index"; |
||||
import { |
import { |
||||
pieOption |
pieOption |
||||
} from "./rkfxPieOption.js"; |
} from "./rkfxPieOption.js"; |
||||
import { |
import { |
||||
requestPostBi |
requestPostBi |
||||
} from "@/js/dai/request-bipass"; |
} from "@/js/dai/request-bipass"; |
||||
export default { |
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue"; |
||||
props: { |
|
||||
orgId: { |
export default { |
||||
type: String, |
components: { |
||||
default: "", |
screenEchartsFrame, Tabs |
||||
}, |
}, |
||||
}, |
props: { |
||||
data() { |
orgId: { |
||||
return { |
type: String, |
||||
showNoData: false, |
default: "", |
||||
timer: null, |
}, |
||||
pieChart: "", |
}, |
||||
pieOption: {}, |
data() { |
||||
pieInitState: false, |
return { |
||||
pieData: [], |
showNoData: false, |
||||
tabList: ["性别", "户籍", "人户状况", "年龄", "志愿者类别", "党员文化程度", |
timer: null, |
||||
|
pieChart: "", |
||||
|
pieOption: {}, |
||||
|
pieInitState: false, |
||||
|
pieData: [], |
||||
|
/* tabList: ["性别", "户籍", "人户状况", "年龄", "志愿者类别", "党员文化程度", |
||||
// "下级人口分布", |
// "下级人口分布", |
||||
], |
],*/ |
||||
currentTab: "性别", |
tabList: [ |
||||
info: { |
{ |
||||
male_count: 0, |
label: "性别", |
||||
female_count: 0, |
value: "性别" |
||||
resi_y_house_y_count: 0, |
}, { |
||||
resi_y_house_n_count: 0, |
label: "户籍", |
||||
resi_n_house_y_count: 0, |
value: "户籍" |
||||
primary_count: 0, |
}, { |
||||
junior_high_count: 0, |
label: "人户状况", |
||||
second_speci_count: 0, |
value: "人户状况" |
||||
high_school_count: 0, |
}, { |
||||
junior_college_count: 0, |
label: "年龄", |
||||
undergrad_count: 0, |
value: "年龄" |
||||
master_count: 0, |
}, { |
||||
doctor_count: 0, |
label: "志愿者类别", |
||||
local_count: 0, |
value: "志愿者类别" |
||||
field_count: 0, |
}, { |
||||
age50_count: 0, |
label: "党员文化程度", |
||||
age5059_count: 0, |
value: "党员文化程度" |
||||
age6069_count: 0, |
} |
||||
age7079_count: 0, |
], |
||||
age80_count: 0, |
currentTab: "性别", |
||||
culture_count: 0, |
info: { |
||||
committee_count: 0, |
male_count: 0, |
||||
capable_count: 0, |
female_count: 0, |
||||
friend_count: 0, |
resi_y_house_y_count: 0, |
||||
agent_count: 0, |
resi_y_house_n_count: 0, |
||||
mediator_count: 0, |
resi_n_house_y_count: 0, |
||||
collector_count: 0, |
primary_count: 0, |
||||
security_count: 0, |
junior_high_count: 0, |
||||
party_mem_count: 0, |
second_speci_count: 0, |
||||
}, |
high_school_count: 0, |
||||
}; |
junior_college_count: 0, |
||||
}, |
undergrad_count: 0, |
||||
components: { |
master_count: 0, |
||||
screenEchartsFrame, |
doctor_count: 0, |
||||
}, |
local_count: 0, |
||||
mounted() { |
field_count: 0, |
||||
this.init(); |
age50_count: 0, |
||||
}, |
age5059_count: 0, |
||||
watch: { |
age6069_count: 0, |
||||
currentTab() { |
age7079_count: 0, |
||||
this.setPieData(); |
age80_count: 0, |
||||
}, |
culture_count: 0, |
||||
orgId() { |
committee_count: 0, |
||||
this.init(); |
capable_count: 0, |
||||
}, |
friend_count: 0, |
||||
}, |
agent_count: 0, |
||||
methods: { |
mediator_count: 0, |
||||
async init() { |
collector_count: 0, |
||||
await this.getInfo(); |
security_count: 0, |
||||
this.getPie(); |
party_mem_count: 0, |
||||
}, |
}, |
||||
handleClickItem(item) { |
}; |
||||
const { |
}, |
||||
type, |
|
||||
name |
mounted() { |
||||
} = item.data; |
this.init(); |
||||
this.$router.push({ |
}, |
||||
path: "/dataBoard/renfang/resi-analyze", |
watch: { |
||||
query: { |
currentTab() { |
||||
org_id: this.orgId, |
this.setPieData(); |
||||
type, |
}, |
||||
type_category: this.currentTab, |
orgId() { |
||||
type_name: name, |
this.init(); |
||||
}, |
}, |
||||
}); |
}, |
||||
}, |
methods: { |
||||
// 获取房屋总数等 |
async init() { |
||||
async getInfo() { |
await this.getInfo(); |
||||
const url = "resident_analyze"; |
this.getPie(); |
||||
this.$refs.pieChart.showLoading(); |
}, |
||||
const { |
handleClickItem(item) { |
||||
data, |
const { |
||||
code, |
type, |
||||
msg |
name |
||||
} = await requestPostBi(url, { |
} = item.data; |
||||
queryParam: { |
this.$router.push({ |
||||
org_id: this.orgId, |
path: "/dataBoard/renfang/resi-analyze", |
||||
}, |
query: { |
||||
}, { |
org_id: this.orgId, |
||||
// mockId: 60041615, |
type, |
||||
}); |
type_category: this.currentTab, |
||||
this.$refs.pieChart.hideLoading(); |
type_name: name, |
||||
if (code === 0) { |
}, |
||||
if (data && Array.isArray(data) && data.length > 0) { |
}); |
||||
let info = data[0]; |
}, |
||||
this.info = { |
// 获取房屋总数等 |
||||
...this.info, |
async getInfo() { |
||||
...info |
const url = "resident_analyze"; |
||||
}; |
this.$refs.pieChart.showLoading(); |
||||
} |
const { |
||||
} else { |
data, |
||||
this.$message.error(msg); |
code, |
||||
} |
msg |
||||
}, |
} = await requestPostBi(url, { |
||||
selItem(selItem, selIndex) { |
queryParam: { |
||||
this.tabList.forEach((element, index) => { |
org_id: this.orgId, |
||||
if (index === selIndex) { |
}, |
||||
element.sel = true; |
}, { |
||||
} else { |
// mockId: 60041615, |
||||
element.sel = false; |
}); |
||||
} |
this.$refs.pieChart.hideLoading(); |
||||
}); |
if (code === 0) { |
||||
}, |
if (data && Array.isArray(data) && data.length > 0) { |
||||
pieInitOk() { |
let info = data[0]; |
||||
this.pieInitState = true; |
this.info = { |
||||
}, |
...this.info, |
||||
getPie() { |
...info |
||||
if (this.pieInitState) { |
}; |
||||
this.setPieData(); |
} |
||||
} else { |
} else { |
||||
setTimeout(() => { |
this.$message.error(msg); |
||||
this.getPie(); |
} |
||||
}, 500); |
}, |
||||
} |
selItem(selItem, selIndex) { |
||||
}, |
this.tabList.forEach((element, index) => { |
||||
setPieData() { |
if (index === selIndex) { |
||||
const { |
element.sel = true; |
||||
currentTab, |
} else { |
||||
info |
element.sel = false; |
||||
} = this; |
} |
||||
if (currentTab == "性别") { |
}); |
||||
this.pieData = [{ |
}, |
||||
value: info.male_count || 0, |
pieInitOk() { |
||||
type: "male_count", |
this.pieInitState = true; |
||||
name: "男性", |
}, |
||||
}, { |
getPie() { |
||||
value: info.female_count || 0, |
if (this.pieInitState) { |
||||
type: "female_count", |
this.setPieData(); |
||||
name: "女性", |
} else { |
||||
}, ]; |
setTimeout(() => { |
||||
} else if (currentTab == "户籍") { |
this.getPie(); |
||||
this.pieData = [{ |
}, 500); |
||||
value: info.local_count || 0, |
} |
||||
type: "local_count", |
}, |
||||
name: "本地户籍", |
setPieData() { |
||||
}, { |
const { |
||||
value: info.field_count || 0, |
currentTab, |
||||
type: "field_count", |
info |
||||
name: "外地户籍", |
} = this; |
||||
}, ]; |
if (currentTab == "性别") { |
||||
} else if (currentTab == "人户状况") { |
this.pieData = [{ |
||||
this.pieData = [{ |
value: info.male_count || 0, |
||||
value: info.resi_y_house_y_count || 0, |
type: "male_count", |
||||
type: "resi_y_house_y_count", |
name: "男性", |
||||
name: "人户一致", |
}, { |
||||
}, { |
value: info.female_count || 0, |
||||
value: info.resi_y_house_n_count || 0, |
type: "female_count", |
||||
type: "resi_y_house_n_count", |
name: "女性", |
||||
name: "人在户不在", |
},]; |
||||
}, { |
} else if (currentTab == "户籍") { |
||||
value: info.resi_n_house_y_count || 0, |
this.pieData = [{ |
||||
type: "resi_n_house_y_count", |
value: info.local_count || 0, |
||||
name: "户在人不在", |
type: "local_count", |
||||
}, ]; |
name: "本地户籍", |
||||
} else if (currentTab == "年龄") { |
}, { |
||||
this.pieData = [{ |
value: info.field_count || 0, |
||||
value: info.age50_count || 0, |
type: "field_count", |
||||
type: "age50_count", |
name: "外地户籍", |
||||
name: "50岁以下", |
},]; |
||||
}, { |
} else if (currentTab == "人户状况") { |
||||
value: info.age5059_count || 0, |
this.pieData = [{ |
||||
type: "age5059_count", |
value: info.resi_y_house_y_count || 0, |
||||
name: "50-59岁", |
type: "resi_y_house_y_count", |
||||
}, { |
name: "人户一致", |
||||
value: info.age6069_count || 0, |
}, { |
||||
type: "age6069_count", |
value: info.resi_y_house_n_count || 0, |
||||
name: "60-69岁", |
type: "resi_y_house_n_count", |
||||
}, { |
name: "人在户不在", |
||||
value: info.age7079_count || 0, |
}, { |
||||
type: "age7079_count", |
value: info.resi_n_house_y_count || 0, |
||||
name: "70-79岁", |
type: "resi_n_house_y_count", |
||||
}, { |
name: "户在人不在", |
||||
value: info.age80_count || 0, |
},]; |
||||
type: "age80_count", |
} else if (currentTab == "年龄") { |
||||
name: "80岁以上", |
this.pieData = [{ |
||||
}, ]; |
value: info.age50_count || 0, |
||||
} else if (currentTab == "志愿者类别") { |
type: "age50_count", |
||||
this.pieData = [{ |
name: "50岁以下", |
||||
value: info.culture_count || 0, |
}, { |
||||
type: "culture_count", |
value: info.age5059_count || 0, |
||||
name: "文化队伍", |
type: "age5059_count", |
||||
}, { |
name: "50-59岁", |
||||
value: info.committee_count || 0, |
}, { |
||||
type: "committee_count", |
value: info.age6069_count || 0, |
||||
name: "楼委会", |
type: "age6069_count", |
||||
}, { |
name: "60-69岁", |
||||
value: info.capable_count || 0, |
}, { |
||||
type: "capable_count", |
value: info.age7079_count || 0, |
||||
name: "能人达人", |
type: "age7079_count", |
||||
}, { |
name: "70-79岁", |
||||
value: info.friend_count || 0, |
}, { |
||||
type: "friend_count", |
value: info.age80_count || 0, |
||||
name: "老友俱乐部", |
type: "age80_count", |
||||
}, { |
name: "80岁以上", |
||||
value: info.agent_count || 0, |
},]; |
||||
type: "agent_count", |
} else if (currentTab == "志愿者类别") { |
||||
name: "代办员", |
this.pieData = [{ |
||||
}, { |
value: info.culture_count || 0, |
||||
value: info.mediator_count || 0, |
type: "culture_count", |
||||
type: "mediator_count", |
name: "文化队伍", |
||||
name: "调解员", |
}, { |
||||
}, { |
value: info.committee_count || 0, |
||||
value: info.collector_count || 0, |
type: "committee_count", |
||||
type: "collector_count", |
name: "楼委会", |
||||
name: "采集员", |
}, { |
||||
}, { |
value: info.capable_count || 0, |
||||
value: info.security_count || 0, |
type: "capable_count", |
||||
type: "security_count", |
name: "能人达人", |
||||
name: "治安巡逻员", |
}, { |
||||
}, { |
value: info.friend_count || 0, |
||||
value: info.party_mem_count || 0, |
type: "friend_count", |
||||
type: "party_mem_count", |
name: "老友俱乐部", |
||||
name: "党员中心户", |
}, { |
||||
}, ]; |
value: info.agent_count || 0, |
||||
} else if (currentTab == "党员文化程度") { |
type: "agent_count", |
||||
this.pieData = [{ |
name: "代办员", |
||||
value: info.primary_count || 0, |
}, { |
||||
type: "primary_count", |
value: info.mediator_count || 0, |
||||
name: "小学及文盲", |
type: "mediator_count", |
||||
}, { |
name: "调解员", |
||||
value: info.junior_high_count || 0, |
}, { |
||||
type: "junior_high_count", |
value: info.collector_count || 0, |
||||
name: "初中", |
type: "collector_count", |
||||
}, { |
name: "采集员", |
||||
value: info.second_speci_count || 0, |
}, { |
||||
type: "second_speci_count", |
value: info.security_count || 0, |
||||
name: "中专", |
type: "security_count", |
||||
}, { |
name: "治安巡逻员", |
||||
value: info.high_school_count || 0, |
}, { |
||||
type: "high_school_count", |
value: info.party_mem_count || 0, |
||||
name: "高中", |
type: "party_mem_count", |
||||
}, { |
name: "党员中心户", |
||||
value: info.junior_college_count || 0, |
},]; |
||||
type: "junior_college_count", |
} else if (currentTab == "党员文化程度") { |
||||
name: "大专", |
this.pieData = [{ |
||||
}, { |
value: info.primary_count || 0, |
||||
value: info.undergrad_count || 0, |
type: "primary_count", |
||||
type: "undergrad_count", |
name: "小学及文盲", |
||||
name: "本科", |
}, { |
||||
}, { |
value: info.junior_high_count || 0, |
||||
value: info.master_count || 0, |
type: "junior_high_count", |
||||
type: "master_count", |
name: "初中", |
||||
name: "硕士", |
}, { |
||||
}, { |
value: info.second_speci_count || 0, |
||||
value: info.doctor_count || 0, |
type: "second_speci_count", |
||||
type: "doctor_count", |
name: "中专", |
||||
name: "博士", |
}, { |
||||
}, ]; |
value: info.high_school_count || 0, |
||||
} else if (currentTab == "下级人口分布") { |
type: "high_school_count", |
||||
this.pieData = []; |
name: "高中", |
||||
} |
}, { |
||||
this.iniPieChart(); |
value: info.junior_college_count || 0, |
||||
}, |
type: "junior_college_count", |
||||
// 获取饼状图 |
name: "大专", |
||||
async iniPieChart() { |
}, { |
||||
this.$refs.pieChart.clear(); |
value: info.undergrad_count || 0, |
||||
// 获取pieChart配置 |
type: "undergrad_count", |
||||
this.pieOption = pieOption(); |
name: "本科", |
||||
this.pieOption.series[0].name = this.currentTab; |
}, { |
||||
this.pieOption.series[0].data = this.pieData; |
value: info.master_count || 0, |
||||
this.$refs.pieChart.setOption(this.pieOption); |
type: "master_count", |
||||
}, |
name: "硕士", |
||||
handelClickMyPei(item){ |
}, { |
||||
this.handleClickItem(item) |
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> |
</script> |
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.cur{cursor: pointer;} |
/deep/ .tabs .tab { |
||||
.m-rkyj { |
min-width: 0 !important; |
||||
.list { |
} |
||||
margin-top: 8px; |
|
||||
display: flex; |
.cur { |
||||
flex-wrap: wrap; |
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 { |
.item-sel { |
||||
margin-top: 8px; |
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png); |
||||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png); |
background-size: cover; |
||||
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 { |
.pie-main { |
||||
background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png); |
display: flex; |
||||
background-size: cover; |
justify-content: space-between; |
||||
} |
align-items: center; |
||||
} |
margin-left: 25px; |
||||
|
|
||||
.pie-main { |
.legend { |
||||
display: flex; |
// flex: 0 0 140px; |
||||
justify-content: space-between; |
margin-top: 40px; |
||||
margin-left: 25px; |
|
||||
|
|
||||
.legend { |
.legend-row { |
||||
// flex: 0 0 140px; |
display: flex; |
||||
margin-top: 40px; |
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 15px; |
||||
|
|
||||
.legend-row { |
&:nth-child(1) .name::before { |
||||
margin-top: 15px; |
background: #1a95ff; |
||||
display: flex; |
} |
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
&:nth-child(1) .name::before { |
&:nth-child(2) .name::before { |
||||
background: #1a95ff; |
background: #ff6138; |
||||
} |
} |
||||
|
|
||||
&:nth-child(2) .name::before { |
&:nth-child(3) .name::before { |
||||
background: #ff6138; |
background: #2adcea; |
||||
} |
} |
||||
|
|
||||
&:nth-child(3) .name::before { |
&:nth-child(4) .name::before { |
||||
background: #2adcea; |
background: #2cc4ad; |
||||
} |
} |
||||
|
|
||||
&:nth-child(4) .name::before { |
&:nth-child(5) .name::before { |
||||
background: #2cc4ad; |
background: #7377f5; |
||||
} |
} |
||||
|
|
||||
&:nth-child(5) .name::before { |
&:nth-child(6) .name::before { |
||||
background: #7377f5; |
background: #32de66; |
||||
} |
} |
||||
|
|
||||
&:nth-child(6) .name::before { |
&:nth-child(7) .name::before { |
||||
background: #32de66; |
background: #8155d4; |
||||
} |
} |
||||
|
|
||||
&:nth-child(7) .name::before { |
&:nth-child(8) .name::before { |
||||
background: #8155d4; |
background: #c7ea48; |
||||
} |
} |
||||
|
|
||||
&:nth-child(8) .name::before { |
&:nth-child(9) .name::before { |
||||
background: #c7ea48; |
background: #ef47c2; |
||||
} |
} |
||||
|
|
||||
&:nth-child(9) .name::before { |
&:nth-child(10) .name::before { |
||||
background: #ef47c2; |
background: #d43349; |
||||
} |
} |
||||
|
|
||||
&:nth-child(10) .name::before { |
.name { |
||||
background: #d43349; |
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 { |
&::before { |
||||
position: relative; |
position: absolute; |
||||
margin-left: 5px; |
top: 4px; |
||||
font-size: 12px; |
left: -15px; |
||||
font-family: PingFangSC-Regular, PingFang SC; |
width: 8px; |
||||
font-weight: 400; |
height: 8px; |
||||
color: rgba(255, 255, 255, 0.65); |
content: ""; |
||||
line-height: 17px; |
} |
||||
|
} |
||||
|
|
||||
&::before { |
.content { |
||||
content: ""; |
font-family: PingFangSC-Medium, PingFang SC; |
||||
position: absolute; |
font-weight: 500; |
||||
top: 4px; |
display: flex; |
||||
left: -15px; |
align-items: flex-end; |
||||
width: 8px; |
margin-left: 24px; |
||||
height: 8px; |
color: #ffffff; |
||||
} |
} |
||||
} |
|
||||
|
|
||||
.content { |
.num { |
||||
margin-left: 24px; |
font-size: 20px; |
||||
display: flex; |
} |
||||
align-items: flex-end; |
|
||||
font-family: PingFangSC-Medium, PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #ffffff; |
|
||||
} |
|
||||
|
|
||||
.num { |
.unit { |
||||
font-size: 20px; |
font-size: 14px; |
||||
} |
margin-left: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
.unit { |
.pie { |
||||
margin-left: 5px; |
flex: 0 0 280px; |
||||
font-size: 14px; |
height: 146px; |
||||
} |
margin-top: 32px; |
||||
} |
} |
||||
} |
} |
||||
|
} |
||||
|
|
||||
.pie { |
|
||||
margin-top: 32px; |
|
||||
flex: 0 0 280px; |
|
||||
height: 270px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
</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