elink-star
/
tduck-front
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor：home dashboad new test

old
wangqing 4 years ago
parent
9be3483b4f
commit
6f42fabc00
1 changed files with 398 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 398
      src/views/home/dashboard-new.vue

398
src/views/home/dashboard-new.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save