liuchuang
5 years ago
9 changed files with 614 additions and 2 deletions
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
@ -0,0 +1,95 @@ |
|||
import echarts from 'echarts' |
|||
export default function getBarOption (xdata, ydata1, ydata2) { |
|||
return { |
|||
legend: { |
|||
data: ['用户数', '党员数'], |
|||
right: 10, |
|||
textStyle: { |
|||
color: "#666666" |
|||
}, |
|||
itemWidth: 15, |
|||
itemHeight: 10, |
|||
itemGap: 25 |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '2%', |
|||
top:'16%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: xdata, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#cdd5e2' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#666666" |
|||
}, |
|||
interval: 0, |
|||
rotate: 30 |
|||
}, |
|||
}, |
|||
yAxis: {}, |
|||
dataZoom: [ |
|||
{ |
|||
show: false, |
|||
realtime: true, |
|||
start: 0, |
|||
end: 50 |
|||
}, |
|||
{ |
|||
type: 'inside', |
|||
realtime: true, |
|||
start: 0, |
|||
end: 50 |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '用户数', |
|||
type: 'bar', |
|||
barWidth: '15px', |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|||
offset: 0, |
|||
color: '#e21d1b' |
|||
}, { |
|||
offset: 1, |
|||
color: '#f88e6b' |
|||
}]), |
|||
barBorderRadius: [ 6, 6, 0, 0 ] |
|||
}, |
|||
}, |
|||
data: ydata2 |
|||
}, |
|||
{ |
|||
name: '党员数', |
|||
type: 'bar', |
|||
barWidth: '15px', |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|||
offset: 0, |
|||
color: '#ff8705' |
|||
}, { |
|||
offset: 1, |
|||
color: '#ffb139' |
|||
}]), |
|||
barBorderRadius: [ 6, 6, 0, 0 ], |
|||
} |
|||
}, |
|||
data: ydata1 |
|||
} |
|||
] |
|||
} |
|||
} |
|||
@ -0,0 +1,113 @@ |
|||
import echarts from 'echarts' |
|||
export default function getLineOption (xdata, ydata1, ydata2, ydata3) { |
|||
return { |
|||
legend: { |
|||
data: ['议题数', '项目数', '话题数'], |
|||
right: 10, |
|||
textStyle: { |
|||
color: "#666666" |
|||
}, |
|||
itemWidth: 15, |
|||
itemHeight: 10, |
|||
itemGap: 25 |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '2%', |
|||
top:'16%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: xdata, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: '#cdd5e2' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#666666" |
|||
}, |
|||
interval: 0, |
|||
rotate: 30 |
|||
}, |
|||
}, |
|||
yAxis: {}, |
|||
dataZoom: [ |
|||
{ |
|||
show: false, |
|||
realtime: true, |
|||
start: 0, |
|||
end: 50 |
|||
}, |
|||
{ |
|||
type: 'inside', |
|||
realtime: true, |
|||
start: 0, |
|||
end: 50 |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '议题数', |
|||
type: 'bar', |
|||
barWidth: '15px', |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|||
offset: 0, |
|||
color: '#5291ff' |
|||
}, { |
|||
offset: 1, |
|||
color: '#78aafe' |
|||
}]), |
|||
barBorderRadius: [ 6, 6, 0, 0 ] |
|||
}, |
|||
}, |
|||
data: ydata1 |
|||
}, |
|||
{ |
|||
name: '项目数', |
|||
type: 'bar', |
|||
barWidth: '15px', |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|||
offset: 0, |
|||
color: '#f28c68' |
|||
}, { |
|||
offset: 1, |
|||
color: '#f8b4a0' |
|||
}]), |
|||
barBorderRadius: [ 6, 6, 0, 0 ] |
|||
}, |
|||
}, |
|||
data: ydata2 |
|||
}, |
|||
{ |
|||
name: '话题数', |
|||
type: 'bar', |
|||
barWidth: '15px', |
|||
itemStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|||
offset: 0, |
|||
color: '#8a79fe' |
|||
}, { |
|||
offset: 1, |
|||
color: '#aca2ff' |
|||
}]), |
|||
barBorderRadius: [ 6, 6, 0, 0 ], |
|||
} |
|||
}, |
|||
data: ydata3 |
|||
} |
|||
] |
|||
} |
|||
} |
|||
@ -0,0 +1,337 @@ |
|||
<template> |
|||
<div class="work-bench"> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="top-bar"> |
|||
<div class="title"><span class="line"></span>数据汇总</div> |
|||
<div class="query">组织： |
|||
<el-select v-model="selectDetpId" placeholder="全部"> |
|||
<el-option |
|||
v-for="item in deptList" |
|||
:key="item.deptId" |
|||
:label="item.deptName" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-button type="primary" @click="onQuery">查询</el-button> |
|||
<el-button type="warning" @click="exportHandle()">{{ $t('export') }}</el-button> |
|||
</div> |
|||
</div> |
|||
<div class="data-list"> |
|||
<div class="data-item data-item-bg-1"> |
|||
<div class="item-content"> |
|||
<div class="item-num">{{dataStatistics.topicNum || 0}}</div> |
|||
<div class="item-desc"> |
|||
<div class="item-title">话题数</div> |
|||
<div class="sub-title">昨日 +{{dataStatistics.topicAddedYesterdayNum || 0}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="data-item data-item-bg-2"> |
|||
<div class="item-content"> |
|||
<div class="item-num">{{dataStatistics.issueNum || 0}}</div> |
|||
<div class="item-desc"> |
|||
<div class="item-title">议题数</div> |
|||
<div class="sub-title">昨日 +{{dataStatistics.issueAddedYesterdayNum || 0}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="data-item data-item-bg-3"> |
|||
<div class="item-content"> |
|||
<div class="item-num">{{dataStatistics.itemNum || 0}}</div> |
|||
<div class="item-desc"> |
|||
<div class="item-title">项目数</div> |
|||
<div class="sub-title">昨日 +{{dataStatistics.itemAddedYesterdayNum || 0}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="data-item data-item-bg-4"> |
|||
<div class="item-content"> |
|||
<div class="item-num">{{dataStatistics.itemCaseClosedNum || 0}}</div> |
|||
<div class="item-desc"> |
|||
<div class="item-title">项目结案数</div> |
|||
<div class="sub-title">昨日 +{{dataStatistics.itemCaseClosedAddedYesterdayNum || 0}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="data-item data-item-bg-5"> |
|||
<div class="item-content"> |
|||
<div class="item-num">{{dataStatistics.superviseItemNum || 0}}</div> |
|||
<div class="item-desc"> |
|||
<div class="item-title">项目结案数</div> |
|||
<div class="sub-title">昨日 +{{dataStatistics.superviseItemAddedYesterdayNum || 0}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="top-bar"> |
|||
<div class="title"><span class="line"></span>数据排行</div> |
|||
</div> |
|||
<div class="chart-box"> |
|||
<div id="chart-bar" :style="{width: '45%', height: '400px'}"></div> |
|||
<div id="chart-line" :style="{width: '45%', height: '400px'}"></div> |
|||
</div> |
|||
</el-card> |
|||
<el-card shadow="never" class="aui-card--fill"> |
|||
<div class="top-bar"> |
|||
<div class="title"><span class="line"></span>工作实况</div> |
|||
<div class="query"> |
|||
<el-radio-group v-model="radio" size="small" @change="onRadioChange"> |
|||
<el-radio-button label="yesterday">昨日</el-radio-button> |
|||
<el-radio-button label="lastWeek">上周</el-radio-button> |
|||
<el-radio-button label="lastMonth">本月</el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
<div class="data-table"> |
|||
<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;"> |
|||
<el-table-column prop="deptName" label="组织" align="center" min-width="200px"></el-table-column> |
|||
<el-table-column prop="topicNum" label="话题数" header-align="center" align="center" min-width="200px" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="issueNum" label="议题数" header-align="center" min-width="200px" align="center"></el-table-column> |
|||
<el-table-column prop="itemNum" label="项目数" header-align="center" align="center" min-width="200px" show-overflow-tooltip></el-table-column> |
|||
<el-table-column prop="itemCaseClosedNum" label="项目结案数" header-align="center" align="center" min-width="200px"></el-table-column> |
|||
<el-table-column prop="superviseItemNum" label="督办项目数" header-align="center" min-width="200px" align="center"></el-table-column> |
|||
</el-table> |
|||
<el-pagination :current-page="page" |
|||
:page-sizes="[10, 20, 50, 100]" |
|||
:page-size="page" |
|||
:total="total" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="pageSizeChangeHandle" |
|||
@current-change="pageCurrentChangeHandle"> |
|||
</el-pagination> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
import getBarOption from './barOption.js' |
|||
import getLineOption from './lineOption.js' |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/analysis/backstage/workStatusAnalysis', |
|||
getDataListIsPage: true, |
|||
exportURL: '/analysis/backstage/export' |
|||
}, |
|||
dataForm: { |
|||
deptId: '', |
|||
dateType: 'yesterday' |
|||
}, |
|||
radio: 'yesterday', |
|||
|
|||
deptList: [], // 部门列表 |
|||
selectDetpId: '', // 选中部门id |
|||
dataStatistics: {}, // 数据汇总 |
|||
|
|||
userAnalysisDepts: [], |
|||
userAnalysisPartyMemberNum: [], |
|||
userAnalysisUserNum: [], |
|||
|
|||
issueItemAnalysisDepts: [], |
|||
issueItemAnalysisIssueNum: [], |
|||
issueItemAnalysisItemNum: [], |
|||
issueItemAnalysisTopicNum: [], |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.barChart = echarts.init(document.getElementById('chart-bar')) |
|||
this.lineChart = echarts.init(document.getElementById('chart-line')) |
|||
|
|||
this.getDepts() |
|||
this.getDataStatistics() |
|||
this.getUserAnalysis() |
|||
this.getIssueItemAnalysis() |
|||
}, |
|||
methods: { |
|||
// 初始化数据 |
|||
initData () { |
|||
this.dataStatistics = {} |
|||
this.userAnalysisDepts = [] |
|||
this.userAnalysisPartyMemberNum = [] |
|||
this.userAnalysisUserNum = [] |
|||
this.issueItemAnalysisDepts = [] |
|||
this.issueItemAnalysisIssueNum = [] |
|||
this.issueItemAnalysisItemNum = [] |
|||
this.issueItemAnalysisTopicNum = [] |
|||
}, |
|||
onRadioChange () { |
|||
this.dataForm.dateType = this.radio |
|||
this.getDataList() |
|||
}, |
|||
onQuery () { |
|||
this.initData() |
|||
this.dataForm.deptId = this.selectDetpId |
|||
this.dataForm.dateType = this.radio |
|||
|
|||
this.getDataStatistics() |
|||
this.getUserAnalysis() |
|||
this.getIssueItemAnalysis() |
|||
this.getDataList() |
|||
}, |
|||
// 获取部门列表 |
|||
getDepts () { |
|||
this.$http.get(`/analysis/backstage/depts`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.deptList = res.data |
|||
}).catch(() => { }) |
|||
}, |
|||
// 数据汇总 |
|||
getDataStatistics () { |
|||
this.$http.get(`/analysis/backstage/dataStatistics?deptId=${this.selectDetpId}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataStatistics = res.data |
|||
}).catch(() => { }) |
|||
}, |
|||
// 数据排行-用户 |
|||
getUserAnalysis () { |
|||
this.$http.get(`/analysis/backstage/userAnalysis?deptId=${this.selectDetpId}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
if (res.data.length > 0) { |
|||
res.data.forEach(item => { |
|||
this.userAnalysisDepts.push(item.deptName) |
|||
this.userAnalysisPartyMemberNum.push(item.partyMemberNum) |
|||
this.userAnalysisUserNum.push(item.userNum) |
|||
}) |
|||
|
|||
setTimeout(() => { |
|||
this.barChart.setOption(getBarOption(this.userAnalysisDepts, this.userAnalysisPartyMemberNum, this.userAnalysisUserNum)) |
|||
}, 500) |
|||
} |
|||
}).catch(() => { }) |
|||
}, |
|||
// 数据排行-话题、议题、项目 |
|||
getIssueItemAnalysis () { |
|||
this.$http.get(`/analysis/backstage/issueItemAnalysis?deptId=${this.selectDetpId}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
if (res.data.length > 0) { |
|||
res.data.forEach(item => { |
|||
this.issueItemAnalysisDepts.push(item.deptName) |
|||
this.issueItemAnalysisIssueNum.push(item.issueNum) |
|||
this.issueItemAnalysisItemNum.push(item.itemNum) |
|||
this.issueItemAnalysisTopicNum.push(item.topicNum) |
|||
}) |
|||
|
|||
setTimeout(() => { |
|||
this.lineChart.setOption(getLineOption(this.issueItemAnalysisDepts, this.issueItemAnalysisIssueNum, this.issueItemAnalysisItemNum, this.issueItemAnalysisTopicNum)) |
|||
}, 500) |
|||
} |
|||
}).catch(() => { }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.work-bench .el-select { |
|||
margin-right: 10px; |
|||
width: 150px; |
|||
} |
|||
.work-bench .el-select .el-input__inner { |
|||
color: #FF4C52; |
|||
border: 1px solid #FF4C52; |
|||
} |
|||
.work-bench .el-select .el-input .el-select__caret { |
|||
color: #FF4C52; |
|||
} |
|||
.work-bench .el-table th { |
|||
background-color: #FF4C52; |
|||
color: #ffffff; |
|||
font-size: 22px; |
|||
} |
|||
</style> |
|||
<style scoped> |
|||
.work-bench { |
|||
|
|||
} |
|||
.top-bar { |
|||
width: 100%; |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
} |
|||
.top-bar .title { |
|||
font-size: 22px; |
|||
color: rgb(200, 67, 69); |
|||
font-weight: 700; |
|||
} |
|||
.top-bar .title .line { |
|||
display: block; |
|||
width: 4px; |
|||
height: 20px; |
|||
background: rgb(200, 67, 69); |
|||
position: absolute; |
|||
left: -20px; |
|||
top: 10px; |
|||
} |
|||
.data-table { |
|||
margin-top: 20px; |
|||
} |
|||
.data-list { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
margin: 20px 0; |
|||
} |
|||
.data-list .data-item { |
|||
width: 270px; |
|||
height: 130px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.data-list .data-item-bg-1 { |
|||
background: url('~@/assets/img/topic.png') no-repeat center center; |
|||
background-size: 100% 100%; |
|||
} |
|||
.data-list .data-item-bg-2 { |
|||
background: url('~@/assets/img/issue.png') no-repeat center center; |
|||
background-size: 100% 100%; |
|||
} |
|||
.data-list .data-item-bg-3 { |
|||
background: url('~@/assets/img/project.png') no-repeat center center; |
|||
background-size: 100% 100%; |
|||
} |
|||
.data-list .data-item-bg-4 { |
|||
background: url('~@/assets/img/project-end.png') no-repeat center center; |
|||
background-size: 100% 100%; |
|||
} |
|||
.data-list .data-item-bg-5 { |
|||
background: url('~@/assets/img/superviseItem.png') no-repeat center center; |
|||
background-size: 100% 100%; |
|||
} |
|||
.data-item .item-content { |
|||
width: 50%; |
|||
margin-left: 40%; |
|||
} |
|||
.item-content .item-num { |
|||
font-size: 36px; |
|||
color: #ffffff; |
|||
} |
|||
.item-content .item-desc { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
color: #ffffff; |
|||
} |
|||
.chart-box { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue