卢龙
This commit is contained in:
liuye
@@ -1,72 +1,48 @@
|
||||
<template>
|
||||
<div class="statistics" v-if="pageShow">
|
||||
<div class="info-content">
|
||||
<div class="title">今日概况</div>
|
||||
<div class="el-row">
|
||||
<div class="item" v-for="(item, index) in todayList" :key="index">
|
||||
<h2>{{item.value}}</h2>
|
||||
<p>{{item.label}}</p>
|
||||
<div class="statistics">
|
||||
<AiTopFixed>
|
||||
<div class="select-gird">
|
||||
<AiPagePicker type="gird" v-model="selectGird" valueObj nodeKey="id" formType="2" class="right-span">
|
||||
<AiMore v-model="selectGird.girdName"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="statstics-content">
|
||||
<div class="info-content">
|
||||
<div class="title">今日概况</div>
|
||||
<div class="el-row">
|
||||
<div class="item" v-for="(item, index) in todayList" :key="index">
|
||||
<h2>{{item.value}}</h2>
|
||||
<p>{{item.label}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title">事件办结率</div>
|
||||
<div class="echart-content" id="finish"></div>
|
||||
<div class="num">98.26%</div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="title">巡查上报趋势图</div>
|
||||
<div class="echart-content" id="trend"></div>
|
||||
</div>
|
||||
|
||||
<div class="info-content">
|
||||
<div class="title">巡查事件分类
|
||||
<div class="type-select" :style="groupInfo.groupName ? '' : 'color:#999;'" @click="show=true">{{groupInfo.groupName || '请选择'}}<u-icon name="arrow-right"></u-icon></div>
|
||||
<u-select v-model="show" :list="typeList" value-name="id" label-name="groupName" @confirm="selectStatus"></u-select>
|
||||
</div>
|
||||
<div class="echart-content" id="type"></div>
|
||||
</div>
|
||||
<div class="pad-b120"></div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title">业务透视</div>
|
||||
<div class="business">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<p>受理率</p>
|
||||
<h2>{{info.businessCountMap['受理率'] || '0'}}%</h2>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p>办结率</p>
|
||||
<h2>{{info.businessCountMap['办结率'] || '0'}}%</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="img">
|
||||
<img src="./components/img/line-img.png" alt="">
|
||||
<img src="./components/img/line-img.png" alt="">
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="item bg1">
|
||||
<h2>累计反馈</h2>
|
||||
<p>{{info.businessCountMap['累计反馈'] || '0'}}</p>
|
||||
</div>
|
||||
<div class="item bg2">
|
||||
<h2>累计受理</h2>
|
||||
<p>{{info.businessCountMap['累计受理'] || '0'}}</p>
|
||||
</div>
|
||||
<div class="item bg3">
|
||||
<h2>累计办结</h2>
|
||||
<p>{{info.businessCountMap['累计办结'] || '0'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<div class="title" @click="toPercentageDetail">分类统计
|
||||
<!-- <img src="./components/img/right-icon.png" alt=""> -->
|
||||
</div>
|
||||
<div class="percentage">
|
||||
<div class="item" v-for="(item, index) in info.groupList" :key="index">
|
||||
<div class="mini-title">{{item.groupName}}</div>
|
||||
<div class="info">
|
||||
<div class="line-bg" :style="`width:${item.width}%`" ><div class="active-bg" :style="`width:${item.percentage*100}%`"></div></div>共{{item.totalNum}}条 | 已办结{{item.finishNum}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="info-content" @click="toUserList">
|
||||
<div class="title">成员明细
|
||||
<img src="./components/img/right-icon.png" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="pad-b120"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
@@ -76,83 +52,233 @@ export default {
|
||||
pageShow: false,
|
||||
showSelect: false,
|
||||
myGirdList: [],
|
||||
girdName: '全部网格'
|
||||
girdName: '全部网格',
|
||||
selectGird: {},
|
||||
finishChart: null,
|
||||
trendChart: null,
|
||||
typeChart: null,
|
||||
typeList: [],
|
||||
show: false,
|
||||
groupInfo: {groupId: '', groupName: ''}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.girdList()
|
||||
this.selectGird.girdName = this.user.girdName
|
||||
this.selectGird.girdId = this.user.girdId
|
||||
this.getStatistics()
|
||||
this.getTypeList()
|
||||
},
|
||||
methods: {
|
||||
getStatistics() {
|
||||
this.$http.post('/app/appresidentreportinfo/countByGirdMember').then((res) => {
|
||||
if (res.code == 0) {
|
||||
if(res.data.businessCountMap['受理率']) {
|
||||
res.data.businessCountMap['受理率'] = Number(res.data.businessCountMap['受理率'] * 100).toFixed(1)
|
||||
}
|
||||
if(res.data.businessCountMap['办结率']) {
|
||||
res.data.businessCountMap['办结率'] = Number(res.data.businessCountMap['办结率'] * 100).toFixed(1)
|
||||
}
|
||||
this.info = res.data
|
||||
|
||||
Object.keys(res.data.todayCountMap).forEach((key) => {
|
||||
var info = {
|
||||
label: key,
|
||||
value: res.data.todayCountMap[key]
|
||||
}
|
||||
this.todayList.push(info)
|
||||
this.$nextTick(() => {
|
||||
this.chartInit()
|
||||
})
|
||||
if(this.info.groupList.length) {
|
||||
this.info.groupList.map((item, index) => {
|
||||
if(item.finishNum) {
|
||||
item.percentage = (item.finishNum/item.totalNum).toFixed(2)
|
||||
}else {
|
||||
item.percentage = 0
|
||||
}
|
||||
item.width = 56-(index*10)
|
||||
})
|
||||
}
|
||||
// if(res.data.businessCountMap['受理率']) {
|
||||
// res.data.businessCountMap['受理率'] = Number(res.data.businessCountMap['受理率'] * 100).toFixed(1)
|
||||
// }
|
||||
// if(res.data.businessCountMap['办结率']) {
|
||||
// res.data.businessCountMap['办结率'] = Number(res.data.businessCountMap['办结率'] * 100).toFixed(1)
|
||||
// }
|
||||
// this.info = res.data
|
||||
|
||||
// Object.keys(res.data.todayCountMap).forEach((key) => {
|
||||
// var info = {
|
||||
// label: key,
|
||||
// value: res.data.todayCountMap[key]
|
||||
// }
|
||||
// this.todayList.push(info)
|
||||
// })
|
||||
// if(this.info.groupList.length) {
|
||||
// this.info.groupList.map((item, index) => {
|
||||
// if(item.finishNum) {
|
||||
// item.percentage = (item.finishNum/item.totalNum).toFixed(2)
|
||||
// }else {
|
||||
// item.percentage = 0
|
||||
// }
|
||||
// item.width = 56-(index*10)
|
||||
// })
|
||||
// }
|
||||
}
|
||||
this.pageShow = true
|
||||
})
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: `./Detail?id=${item.id}` })
|
||||
chartInit() {
|
||||
this.finishChart = echarts.init(document.getElementById('finish'))
|
||||
this.trendChart = echarts.init(document.getElementById('trend'))
|
||||
this.typeChart = echarts.init(document.getElementById('type'))
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '事件办结率',
|
||||
type: 'pie',
|
||||
radius: ['30%', '60%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
|
||||
return colorList[colors.dataIndex];
|
||||
}
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: '吸毒人员100' },
|
||||
{ value: 150, name: '高龄老人150' },
|
||||
{ value: 80, name: '刑满释放人员80' },
|
||||
{ value: 84, name: '退伍军人84' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.finishChart.setOption(option)
|
||||
|
||||
var option2 = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E1E5EF', //x轴的颜色
|
||||
width: 1, //轴线的宽度
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
data: ['4月', '5月', '6月', '7月', '8月',]
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{ //y轴
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
type: 'value',
|
||||
minInterval: 50,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [155, 130, 120, 160, 120, 130, 110],
|
||||
type: 'line',
|
||||
areaStyle: {//覆盖区域的渐变色
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2891FF'
|
||||
}
|
||||
},
|
||||
itemStyle : {
|
||||
normal : {
|
||||
color:'#2891FF',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.trendChart.setOption(option2)
|
||||
|
||||
var option3 = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '巡查事件分类',
|
||||
type: 'pie',
|
||||
radius: ['0%', '70%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (colors) {
|
||||
var colorList = ['#2891FF', '#FF8700', '#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
|
||||
return colorList[colors.dataIndex];
|
||||
}
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: '男100' },
|
||||
{ value: 100, name: '女100' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.typeChart.setOption(option3)
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentTabs = index
|
||||
this.getList()
|
||||
},
|
||||
|
||||
toPercentageDetail() {
|
||||
// uni.navigateTo({url: './PercentageDetail'})
|
||||
},
|
||||
toUserList() {
|
||||
uni.navigateTo({url: './UserList'})
|
||||
},
|
||||
|
||||
girdList() {
|
||||
this.$http.post(`/app/appgirdmemberinfo/queryMyGirdList`, null, {
|
||||
getTypeList() {
|
||||
this.$http.post(`/app/apppatrolreportgroup/list`, null, {
|
||||
params: {
|
||||
size: 9999,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.myGirdList = res.data
|
||||
var all = {
|
||||
id: '',
|
||||
girdName: '全部'
|
||||
}
|
||||
this.myGirdList.unshift(all)
|
||||
this.typeList = res.data.records
|
||||
this.$forceUpdate()
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm(e) {
|
||||
|
||||
}
|
||||
selectStatus(e) {
|
||||
this.groupInfo.groupName = e[0].label
|
||||
this.groupInfo.groupId = e[0].value
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -160,27 +286,23 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.statistics {
|
||||
background-color: #F3F7F8;
|
||||
padding: 30px 30px 0;
|
||||
.gird-select{
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin: 0 0 24px;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
|
||||
.statstics-content {
|
||||
padding: 30px 30px 0;
|
||||
}
|
||||
::v-deep .AiTopFixed {
|
||||
.content {
|
||||
background-color: #3975C6;
|
||||
color: #fff;
|
||||
}
|
||||
.icon-img{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
::v-deep .AiMore{
|
||||
span{
|
||||
display: inline-block;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin: 0 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.info-content{
|
||||
@@ -188,6 +310,7 @@ export default {
|
||||
background: #FFF;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
.title{
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
@@ -200,6 +323,15 @@ export default {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.type-select {
|
||||
font-size: 26px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 32px;
|
||||
width: calc(100% - 250px);
|
||||
text-align: right;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
.el-row{
|
||||
display: flex;
|
||||
@@ -223,119 +355,19 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.business{
|
||||
display: flex;
|
||||
padding: 40px 0 30px 0;
|
||||
.left{
|
||||
width: 220px;
|
||||
padding: 20px 0 78px 50px;
|
||||
.item{
|
||||
margin-bottom: 58px;
|
||||
}
|
||||
h2{
|
||||
font-size: 58px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #3B424A;
|
||||
line-height: 64px;
|
||||
letter-spacing: -4px;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: calc(100% - 220px);
|
||||
display: flex;
|
||||
.img{
|
||||
width: 140px;
|
||||
margin-top: 42px;
|
||||
img{
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.num{
|
||||
width: calc(100% - 140px);
|
||||
text-align: center;
|
||||
.item{
|
||||
height: 130px;
|
||||
border-radius: 6px;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 4px;
|
||||
color: #2F7EE5;
|
||||
h2{
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
line-height: 48px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
p{
|
||||
font-size: 40px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.bg1{
|
||||
width: 272px;
|
||||
background-image: url('./components/img/bg-1.png');
|
||||
}
|
||||
.bg2{
|
||||
width: 234px;
|
||||
background-image: url('./components/img/bg-2.png');
|
||||
margin-left: 16px;
|
||||
}
|
||||
.bg3{
|
||||
width: 208px;
|
||||
background-image: url('./components/img/bg-3.png');
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.echart-content {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
.percentage{
|
||||
padding: 16px 0 0 26px;
|
||||
.item{
|
||||
width: 100%;
|
||||
padding-bottom: 32px;
|
||||
.mini-title{
|
||||
font-size: 30px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.info{
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 48px;
|
||||
.line-bg{
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
background: #D7D8D9;
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
.active-bg{
|
||||
height: 100%;
|
||||
background: #257FF1;
|
||||
border-radius: 8px;
|
||||
min-width: 1%;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.num {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 364px;
|
||||
margin-left: -100px;
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.pad-b120{
|
||||
|
||||
Reference in New Issue
Block a user