You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
596 lines
21 KiB
596 lines
21 KiB
<template>
|
|
<div class="bg-content right3">
|
|
<div class='b-row1'>
|
|
<div b-sjtj>
|
|
<screen-title :titleName="'数据统计'" style="width:310px" :type="'short'" :ifShowDropdown="true"></screen-title>
|
|
<div class="dataStatistics" v-if="dataTotal">
|
|
<div>
|
|
<div style="display: flex;">
|
|
<el-image style="width: 120px; height: 100px;margin-right: 8px;"
|
|
:src="require('../../assets/images/dataicon.png')"></el-image>
|
|
<div style="color:#fff;font-weight: 600;">
|
|
<div style="font-size: 24px;margin-bottom: 6px;">
|
|
{{ format(dataTotal) }}
|
|
</div>
|
|
<div style="font-size: 16px;">总数</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
style="display: flex;flex-direction: row;width: 100%;flex-wrap: wrap;justify-content: space-between;">
|
|
<div v-for="item in type" :key="item.id"
|
|
style="width: 33%;display: flex;margin-bottom: 18px;">
|
|
|
|
<div
|
|
:style="{ width: '8px', height: '8px', backgroundColor: item.color, margin: '8px 8px 0 0' }">
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<span style="color:#188ab3;font-size: 18px;">{{ item.title }}</span>
|
|
</div>
|
|
<div style="color: #fff;font-size: 20px;">
|
|
{{ format(item.num) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
|
|
</div>
|
|
</div>
|
|
<div b-myd>
|
|
<screen-title :titleName="'满意度'" style="width:310px" :type="'short'"></screen-title>
|
|
<div class="Satisfaction" v-if="charData.length">
|
|
<div style="width: 290px;height: 290px;" ref="chart"></div>
|
|
</div>
|
|
<div v-else>
|
|
<screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='b-row2'>
|
|
<div>
|
|
<screen-title :titleName="'事件类型分析'" style="width:310px" :type="'short'"></screen-title>
|
|
<div class="Satisfaction" v-if="charsData.length">
|
|
<div style="width: 290px;height: 290px;" ref="charts"></div>
|
|
</div>
|
|
<div v-else>
|
|
<screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
|
|
</div>
|
|
</div>
|
|
<div b-dxal>
|
|
<screen-title :titleName="'典型案例'" style="width:310px" :type="'short'"></screen-title>
|
|
<div @mouseenter="tableMouseEnter" @mouseleave="tableMouseLeave" class="ytal-list">
|
|
<div class="ytal-list-tran" :style="{ top: top, transition: transition }">
|
|
<div class="ytal-item" v-for="(item, index) in ytalList" :key="index" @click="handleClickEvent(item)">
|
|
<div class="ytal-item-detail">{{ item.itemContent }}</div>
|
|
<div class="ytal-item-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='b-hztj'>
|
|
<screen-title :titleName="'汇总统计'">
|
|
<slot>
|
|
<div class="flex">
|
|
<div class="item"> <span>民生：</span>{{ totalLivelihoodCount || 0 }} </div>
|
|
<div class="item"> <span>发展：</span>{{ developCountTotal || 0 }} </div>
|
|
<div class="item"> <span>执法：</span> {{ lawCountCountTotal || 0 }}</div>
|
|
</div>
|
|
</slot>
|
|
</screen-title>
|
|
<div class="table">
|
|
<screen-custom-table :headerColor="'#BDE8FF'" :headerHeight="'36px'" :bodyTdColor="'#FFFFFF'"
|
|
:bodyTdFontSize="'18px'" :tableHeight="104" :showTableLine="true" :dataList="eventStatList"
|
|
:isChangeColor=false :rowColor="'rgba(11,68,135,0.16)'" :noData="noData" :pageSize="pageSize"
|
|
:headerList="headerList">
|
|
</screen-custom-table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import { loadXjphList, } from './../../data/index';
|
|
import { getItemdailystatis, getCategoryAnalysis, getEventStat, getEvaluationTotal,getResponseSixHoursTotal } from '../../../src/api/bssbApi'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: "screen-right3",
|
|
data() {
|
|
return {
|
|
DropdownData: [
|
|
{ id: 1, name: "测试测试测试测试测试测试" },
|
|
{ id: 2, name: "测试测试测试" },
|
|
{ id: 3, name: "测试测试" },
|
|
],
|
|
dataTotal: 0,
|
|
type: [{
|
|
id: 0,
|
|
title: "待响应",
|
|
num: 0,
|
|
color: "#f54f05"
|
|
}, {
|
|
id: 1,
|
|
title: "处理中",
|
|
num: 0,
|
|
color: "#00f097"
|
|
}, {
|
|
id: 2,
|
|
title: "已结案",
|
|
num: 0,
|
|
color: "#00c3ff"
|
|
}, {
|
|
id: 3,
|
|
title: "红灯事件",
|
|
num: 0,
|
|
color: "#ff1466"
|
|
}, {
|
|
id: 4,
|
|
title: "黄灯事件",
|
|
num: 0,
|
|
color: "#f1be01"
|
|
}, {
|
|
id: 5,
|
|
title: "绿灯事件",
|
|
num: 0,
|
|
color: "#08c42c"
|
|
}],
|
|
charData: [],
|
|
charsData: [],//事件类型分析
|
|
chart: null,
|
|
charts: null,
|
|
ytalList: [],
|
|
|
|
top: 0,
|
|
scrollTime: 0,
|
|
transition: 'top 1s linear',
|
|
timer: '',
|
|
pageSize: 7,
|
|
tableHeight: 104,
|
|
dataList: [],
|
|
dataListResult: [],
|
|
|
|
headerList: [{ title: '街道', width: '1000px' }, { title: '诉求总数', width: '800px' }, { title: '民生诉求', width: '800px' }, { title: '发展诉求', width: '800px' }, '执法'],
|
|
noData: false,
|
|
|
|
eventStatList: [],//汇总统计列表
|
|
|
|
lawCountCountTotal: 0,
|
|
developCountTotal: 0,
|
|
totalLivelihoodCount: 0
|
|
}
|
|
},
|
|
async mounted() {
|
|
const _this = this
|
|
window.addEventListener("resize", () => {
|
|
_this.chart.resize();
|
|
_this.charts.resize();
|
|
});
|
|
await this.getItemdailystatis()//获取数据统计
|
|
await this.getEventStat()//获取汇总统计列表
|
|
await this.getEvaluationTotal()//获取满意度
|
|
await this.getCategoryAnalysis()//获取事件分类
|
|
this.getResponseSixHoursTotal() //典型案例
|
|
|
|
_this.$nextTick(function () {
|
|
this.renderChart()
|
|
this.renderCharts()
|
|
});
|
|
},
|
|
watch: {
|
|
ytalList: {
|
|
immediate: true,
|
|
handler: function (newvalue) {
|
|
if (newvalue.length > 0) {
|
|
this.scrollView()
|
|
} else {
|
|
clearInterval(this.timer)
|
|
}
|
|
}
|
|
},
|
|
shibeiAId: {
|
|
handler() {
|
|
// if (this.shibeiAId != '') {
|
|
this.getItemdailystatis()
|
|
this.getCategoryAnalysis()
|
|
this.getEventStat()
|
|
this.getEvaluationTotal()
|
|
this.renderChart()
|
|
this.renderCharts()
|
|
this.getResponseSixHoursTotal()
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['shibeiAId'])
|
|
},
|
|
|
|
methods: {
|
|
async getEvaluationTotal() {
|
|
try {
|
|
let parm = {
|
|
endTime: "",
|
|
peopleFlag: "",// 统计类型 1默认 ，2本月 ，3本年 ，4自定义区间
|
|
startTime: "",
|
|
deptId: this.shibeiAId || '1175270520603930625'
|
|
}
|
|
let { data, code, msg } = await getEvaluationTotal(parm)
|
|
if (code == 0) {
|
|
this.charData = []
|
|
this.charData = data
|
|
this.renderChart()
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
getResponseSixHoursTotal() {
|
|
this.buttonDisabled = true
|
|
this.showParas = []
|
|
this.noData = false
|
|
const params = {}
|
|
params.page = 1
|
|
params.limit = 50
|
|
params.startTime = ''
|
|
params.endTime = ''
|
|
params.deptId = this.shibeiAId || '1175270520603930625'
|
|
params.listType = '1'
|
|
// params.peopleFlag = this.appealValue
|
|
getResponseSixHoursTotal(params).then(res => {
|
|
this.ytalList = res.data.list
|
|
}).catch(err => {
|
|
this.buttonDisabled = false
|
|
console.log(err)
|
|
})
|
|
},
|
|
handleClickEvent(item){
|
|
this.$EventBus.$emit('handleClickEvent', item)
|
|
},
|
|
// 获取汇总统计
|
|
async getEventStat() {
|
|
try {
|
|
let parm = {
|
|
endTime: "",
|
|
statType: "1",// 统计类型 1默认 ，2本月 ，3本年 ，4自定义区间
|
|
startTime: "",
|
|
deptId: this.shibeiAId || '1175270520603930625'
|
|
}
|
|
let { data, code, msg } = await getEventStat(parm)
|
|
if (code == 0) {
|
|
this.eventStatList = data
|
|
this.initList(data)
|
|
if (this.eventStatList.length === 0) {
|
|
this.noData = true
|
|
}
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
// 事件类型分析
|
|
async getCategoryAnalysis() {
|
|
try {
|
|
let parm = {
|
|
endTime: "",
|
|
peopleFlag: "",
|
|
startTime: "",
|
|
deptId: this.shibeiAId || '1175270520603930625'
|
|
}
|
|
let { data, code, msg } = await getCategoryAnalysis(parm)
|
|
if (code == 0) {
|
|
this.charsData = data
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
format(num) {
|
|
var reg = /\d{1,3}(?=(\d{3})+$)/g;
|
|
return (num + '').replace(reg, '$&,') || '--';
|
|
},
|
|
async getItemdailystatis() {
|
|
try {
|
|
let parm = {
|
|
endTime: "",
|
|
peopleFlag: "",
|
|
startTime: "",
|
|
deptId: this.shibeiAId || '1175270520603930625'
|
|
}
|
|
let { data, code, msg } = await getItemdailystatis(parm)
|
|
if (code == 0) {
|
|
this.dataTotal = null
|
|
const idMap = {
|
|
0: 'pendingTotal',
|
|
1: 'processingTotal',
|
|
2: 'closedTotal',
|
|
3: 'redTotal',
|
|
4: 'yellowTotal',
|
|
5: 'greenTotal',
|
|
};
|
|
|
|
this.type.forEach(item => {
|
|
const propertyName = idMap[item.id];
|
|
if (propertyName !== undefined && data.hasOwnProperty(propertyName)) {
|
|
item.num = data[propertyName];
|
|
}
|
|
});
|
|
this.dataTotal = data.total
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
|
|
},
|
|
renderChart() {
|
|
const chart = echarts.init(this.$refs.chart);
|
|
let option;
|
|
if (this.charData.length > 0) {
|
|
option = {
|
|
title: {
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
fontSize: 16
|
|
},
|
|
left: "center"
|
|
},
|
|
color: ["#f14f0c", "#15aae4", "#16e49c"],
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}：{c}"
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
center: ["50%", "30%"],//饼状图位置
|
|
radius: ["20%", "40%"],
|
|
label: {
|
|
show: true,
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
lineStyle: {
|
|
color: 'rgba(255, 255, 255, 0.3)'
|
|
},
|
|
smooth: 0.2,
|
|
length: "10"
|
|
}
|
|
},
|
|
data: this.charData
|
|
}
|
|
]
|
|
};
|
|
} else {
|
|
option = {
|
|
title: {
|
|
// text: this.charTitle,
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
fontSize: 16
|
|
},
|
|
left: "center"
|
|
},
|
|
tooltip: {
|
|
trigger: "none"
|
|
},
|
|
color: ["#d3d3d3"],
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["30%", "60%"],
|
|
left: "center",
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}"
|
|
},
|
|
data: [{ value: 1, name: "暂无数据" }]
|
|
}
|
|
]
|
|
};
|
|
}
|
|
chart.setOption(option);
|
|
this.chart = chart;
|
|
},
|
|
renderCharts() {
|
|
const chart = echarts.init(this.$refs.charts);
|
|
let option;
|
|
if (this.charData.length > 0) {
|
|
option = {
|
|
title: {
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
fontSize: 16
|
|
},
|
|
left: "center"
|
|
},
|
|
color: ["#1bd140", "#2aaee9", "#f0200a", "#fb8010", "#9232f0", "#d1124d"],
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}：{d}%"
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
itemWidth: 8,//图例宽度
|
|
itemHeight: 8,//图例高度
|
|
itemGap: 20,//图例之间的间隙
|
|
top: 180,
|
|
left: 20,
|
|
textStyle: {//图例字体样式
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
fontFamily: "微软雅黑"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["30%", "50%"],
|
|
center: ["50%", "30%"],//饼状图位置
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 14,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.charsData
|
|
}
|
|
]
|
|
};
|
|
} else {
|
|
option = {
|
|
title: {
|
|
// text: this.charTitle,
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
fontSize: 16
|
|
},
|
|
left: "center"
|
|
},
|
|
tooltip: {
|
|
trigger: "none"
|
|
},
|
|
color: ["#d3d3d3"],
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["30%", "60%"],
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}"
|
|
},
|
|
data: [{ value: 1, name: "暂无数据" }]
|
|
}
|
|
]
|
|
};
|
|
}
|
|
chart.setOption(option);
|
|
this.charts = chart;
|
|
},
|
|
tableMouseEnter() {
|
|
clearInterval(this.timer)
|
|
},
|
|
tableMouseLeave() {
|
|
this.scrollView()
|
|
},
|
|
scrollView() {
|
|
clearInterval(this.timer)
|
|
this.timer = setInterval(() => {
|
|
|
|
if (this.ytalList.length % this.pageSize === 0) {
|
|
|
|
if (this.scrollTime < this.ytalList.length / this.pageSize - 1) {
|
|
this.transition = 'top 1s linear'
|
|
this.scrollTime += 1
|
|
this.top = `-${this.tableHeight * this.scrollTime}%`
|
|
} else {
|
|
this.transition = 'top 1s ease-in-out'
|
|
this.top = '0px'
|
|
this.scrollTime = 0
|
|
}
|
|
} else {
|
|
if (
|
|
this.scrollTime < Math.floor(this.ytalList.length / this.pageSize)
|
|
) {
|
|
this.transition = 'top 1s linear'
|
|
this.scrollTime += 1
|
|
this.top = `-${this.tableHeight * this.scrollTime}%`
|
|
} else {
|
|
this.transition = 'top 1s ease-in-out'
|
|
this.top = '0px'
|
|
this.scrollTime = 0
|
|
}
|
|
}
|
|
}, 5000)
|
|
},
|
|
initList(data) {
|
|
// 民生诉求总数
|
|
if (data.length === 0) return
|
|
this.totalLivelihoodCount = data.reduce((sum, element) => {
|
|
return sum + element.livelihoodCount;
|
|
}, 0);
|
|
// 发展诉求总数
|
|
this.developCountTotal = data.reduce((sum, element) => {
|
|
return sum + element.developCount;
|
|
}, 0);
|
|
//执法诉求总数
|
|
this.lawCountCountTotal = data.reduce((sum, element) => {
|
|
return sum + element.lawCount;
|
|
}, 0);
|
|
this.eventStatList = data.map(element => [
|
|
element.deptName,
|
|
element.eventCount,
|
|
element.livelihoodCount,
|
|
element.developCount,
|
|
element.lawCount,
|
|
]);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" src="style/right1.scss" scoped></style>
|
|
<style src="style/right2.scss" lang="scss" scoped></style>
|
|
<style lang="scss" scoped>
|
|
.right3 {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.b-row1 {
|
|
height: 328px;
|
|
display: flex;
|
|
|
|
.dataStatistics {
|
|
padding: 24px 0 0 24px;
|
|
}
|
|
|
|
.Satisfaction {
|
|
padding: 24px 0 0 24px;
|
|
}
|
|
}
|
|
.ytal-item{
|
|
cursor: pointer;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
position: absolute;
|
|
right: -458px;
|
|
top: 7px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 300;
|
|
|
|
.item {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.b-row2 {
|
|
height: 327px;
|
|
display: flex;
|
|
}
|
|
</style>
|