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