wangqing
4 years ago
1 changed files with 398 additions and 0 deletions
@ -0,0 +1,398 @@ |
|||||
|
<template> |
||||
|
<div class="dashboard-container"> |
||||
|
<div class="left-view"> |
||||
|
<div class="project-select-view"> |
||||
|
<div style="width: 140px;"> |
||||
|
<p class="tag-title">回收概览</p> |
||||
|
</div> |
||||
|
<div style="margin-left: 30px;"> |
||||
|
<el-select v-model="activeProjectKey" |
||||
|
placeholder="请选择" |
||||
|
@change="projectChangeHandle" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in projectListData" |
||||
|
:key="item.key" |
||||
|
:label="item.name" |
||||
|
:value="item.key" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="project-collect-view"> |
||||
|
<div class="project-index-view"> |
||||
|
<div style="display: flex; |
||||
|
width: 80%; |
||||
|
text-align: center; |
||||
|
margin: 0 auto; |
||||
|
justify-content: space-between;" |
||||
|
> |
||||
|
<div> |
||||
|
<p style="text-align: center;">有效回收量</p> |
||||
|
<count-to :end-val="projectStats.completeCount" |
||||
|
style="font-size: 20px;" |
||||
|
/> |
||||
|
</div> |
||||
|
<div> |
||||
|
<p>总浏览量</p> |
||||
|
<count-to :end-val="projectStats.viewCount" style="font-size: 20px;" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<p>回收率</p> |
||||
|
<count-to :end-val="projectStats.completeRate" style="font-size: 20px;" /> |
||||
|
% |
||||
|
</div> |
||||
|
<div> |
||||
|
<p>平均完成时间</p> |
||||
|
<span style="font-size: 20px;"> |
||||
|
{{ projectStats.avgCompleteFormatStr }} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<line-chart :chart-option="lineChartOptionData" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right-view"> |
||||
|
<div style="width: 230px;"> |
||||
|
<p class="tag-title">表单提交地域分布图</p> |
||||
|
</div> |
||||
|
<div style="width: 100%;"> |
||||
|
<map-chart :chart-option="mapChartOptionData" :height="'250px'" /> |
||||
|
</div> |
||||
|
<div style="display: flex; flex-direction: row; justify-content: space-around;"> |
||||
|
<div style="width: 50%;"> |
||||
|
<div style="width: 120px;"> |
||||
|
<p class="tag-title">常用设备</p> |
||||
|
</div> |
||||
|
<div> |
||||
|
<pie-chart :chart-option="pieChartOptionData" :height="'250px'" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="width: 50%;"> |
||||
|
<div style="width: 120px;"> |
||||
|
<p class="tag-title">来源渠道</p> |
||||
|
</div> |
||||
|
<div> |
||||
|
<bar-chart :chart-option="barChartOptionData" :height="'250px'" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import PieChart from '@/components/echarts/PieChart' |
||||
|
import LineChart from '@/components/echarts/LineChart' |
||||
|
import MapChart from '@/components/echarts/MapChart' |
||||
|
import CountTo from '@/components/CountTo' |
||||
|
import BarChart from '@/components/echarts/BarChart' |
||||
|
import {timeFormat} from '@/utils/index' |
||||
|
|
||||
|
export default { |
||||
|
name: 'HomeDashboard', |
||||
|
components: { |
||||
|
CountTo, |
||||
|
MapChart, |
||||
|
PieChart, |
||||
|
BarChart, |
||||
|
LineChart |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
projectListData: null, |
||||
|
projectStats: { |
||||
|
avgCompleteTime: 0, |
||||
|
avgCompleteFormatStr: 0, |
||||
|
viewCount: 0, |
||||
|
completeCount: 0, |
||||
|
completeRate: 0 |
||||
|
}, |
||||
|
activeProjectKey: null, |
||||
|
// 回收折现图 |
||||
|
lineChartOptionData: { |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
axisTick: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: [] |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 |
||||
|
color: 'black', |
||||
|
borderWidth: '1', |
||||
|
borderColor: 'rgb(156,209,255)', |
||||
|
textStyle: { |
||||
|
color: 'black' |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
minInterval: 1 |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
series: [{ |
||||
|
data: [], |
||||
|
name: '回收数', |
||||
|
stack: '总量', |
||||
|
type: 'line', |
||||
|
areaStyle: {} |
||||
|
}] |
||||
|
}, |
||||
|
mapChartOptionData: { |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 |
||||
|
color: 'black', |
||||
|
borderWidth: '1', |
||||
|
borderColor: 'rgb(156,209,255)', |
||||
|
textStyle: { |
||||
|
color: 'black' |
||||
|
} |
||||
|
}, |
||||
|
visualMap: { |
||||
|
type: 'piecewise', |
||||
|
show: false, |
||||
|
pieces: [ |
||||
|
{min: 1500}, |
||||
|
{min: 900, max: 1500}, |
||||
|
{min: 310, max: 1000}, |
||||
|
{min: 1, max: 300} |
||||
|
], |
||||
|
color: ['#E0022B', '#E09107', '#A3E00B'] |
||||
|
}, |
||||
|
toolbox: { |
||||
|
show: false, |
||||
|
orient: 'vertical', |
||||
|
left: 'right', |
||||
|
top: 'center', |
||||
|
feature: { |
||||
|
restore: {}, |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '提交数', |
||||
|
type: 'map', |
||||
|
mapType: 'china', |
||||
|
zoom: 1.2, |
||||
|
roam: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
color: 'rgb(0,0,0)' |
||||
|
}, |
||||
|
data: null |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
barChartOptionData: { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 |
||||
|
color: 'black', |
||||
|
borderWidth: '1', |
||||
|
borderColor: 'rgb(156,209,255)', |
||||
|
textStyle: { |
||||
|
color: 'black' |
||||
|
}, |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'value', |
||||
|
boundaryGap: [0, 0.01] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
data: [] |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
barWidth: 30, |
||||
|
name: '数量', |
||||
|
type: 'bar', |
||||
|
data: [] |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
pieChartOptionData: { |
||||
|
tooltip: { |
||||
|
trigger: 'item', |
||||
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 |
||||
|
color: 'black', |
||||
|
borderWidth: '1', |
||||
|
borderColor: 'rgb(156,209,255)', |
||||
|
textStyle: { |
||||
|
color: 'black' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '设备类型', |
||||
|
type: 'pie', |
||||
|
radius: ['50%', '70%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: 'center' |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '30', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: null |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.$api.get('/user/project/list', {params: {status: 2}}).then(res => { |
||||
|
this.projectListData = res.data |
||||
|
if (res.data && res.data[0]) { |
||||
|
this.activeProjectKey = res.data[0].key |
||||
|
this.projectChangeHandle() |
||||
|
} |
||||
|
}) |
||||
|
}, methods: { |
||||
|
projectChangeHandle() { |
||||
|
this.getProjectStats() |
||||
|
this.getProjectSituation() |
||||
|
this.getProjectSubmitPosition() |
||||
|
this.getProjectSubmitDevice() |
||||
|
this.getProjectSubmitSource() |
||||
|
}, |
||||
|
getProjectStats() { |
||||
|
this.$api.get('/user/project/report/stats', {params: {projectKey: this.activeProjectKey}}).then(res => { |
||||
|
this.projectStats = res.data |
||||
|
if (this.projectStats.completeCount) { |
||||
|
let rate = this.projectStats.completeCount / this.projectStats.viewCount |
||||
|
this.projectStats.completeRate = rate > 1 ? 100 : rate * 100 |
||||
|
this.projectStats.avgCompleteFormatStr = timeFormat(this.projectStats.avgCompleteTime) |
||||
|
} else { |
||||
|
this.projectStats.completeRate = 0 |
||||
|
this.projectStats.avgCompleteFormatStr = 0 |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getProjectSituation() { |
||||
|
this.$api.get('/user/project/report/situation', {params: {projectKey: this.activeProjectKey}}).then(res => { |
||||
|
this.lineChartOptionData.xAxis.data = res.data.map(item => { |
||||
|
return item.createTime |
||||
|
}) |
||||
|
this.lineChartOptionData.series = [{ |
||||
|
data: res.data.map(item => { |
||||
|
return item.count |
||||
|
}), |
||||
|
name: '回收数', |
||||
|
stack: '总量', |
||||
|
type: 'line', |
||||
|
areaStyle: {} |
||||
|
}] |
||||
|
}) |
||||
|
}, |
||||
|
// 项目提交地址 |
||||
|
getProjectSubmitPosition() { |
||||
|
this.$api.get('/user/project/report/position', {params: {projectKey: this.activeProjectKey}}).then(res => { |
||||
|
this.mapChartOptionData.series = [ |
||||
|
{ |
||||
|
name: '提交数', |
||||
|
type: 'map', |
||||
|
mapType: 'china', |
||||
|
zoom: 1.2, |
||||
|
roam: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
color: 'rgb(0,0,0)' |
||||
|
}, |
||||
|
data: Object.keys(res.data).map(key => { |
||||
|
return {name: key.replace(/省(s?)|市(s?)|\//ig, ''), value: res.data[key]} |
||||
|
}) |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
}, |
||||
|
getProjectSubmitSource() { |
||||
|
this.$api.get('/user/project/report/source', {params: {projectKey: this.activeProjectKey}}).then(res => { |
||||
|
this.barChartOptionData.yAxis.data = res.data.map(item => { |
||||
|
return item.browserName ? item.browserName : '其他' |
||||
|
}) |
||||
|
this.barChartOptionData.series = [ |
||||
|
{ |
||||
|
barWidth: 30, |
||||
|
name: '数量', |
||||
|
type: 'bar', |
||||
|
data: res.data.map(item => { |
||||
|
return item.count |
||||
|
}) |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
}, |
||||
|
getProjectSubmitDevice() { |
||||
|
this.$api.get('/user/project/report/device', {params: {projectKey: this.activeProjectKey}}).then(res => { |
||||
|
this.pieChartOptionData.series[0].data = res.data.map(item => { |
||||
|
return {value: item.count, name: item.osName ? item.osName : '其他'} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.dashboard-container { |
||||
|
min-width: 980px; |
||||
|
display: flex; |
||||
|
align-content: center; |
||||
|
margin: 35px auto; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-around; |
||||
|
} |
||||
|
.tag-title { |
||||
|
font-size: 20px; |
||||
|
border-bottom: 3px solid rgba(68, 68, 68, 100); |
||||
|
line-height: 25px; |
||||
|
margin: 10px; |
||||
|
} |
||||
|
.project-select-view { |
||||
|
display: flex; |
||||
|
align-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.project-collect-view { |
||||
|
width: 730px; |
||||
|
height: 500px; |
||||
|
border-radius: 10px; |
||||
|
border: 1px solid rgba(187, 187, 187, 100); |
||||
|
} |
||||
|
.right-view { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
min-width: 30%; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue