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

home dashboard.vue

old
wangqing 5 years ago
parent
c59438a303
commit
2a5ffec519
10 changed files with 443 additions and 785 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      src/components/echarts/BarChart.vue
  2. 118
      src/components/echarts/BoxCard.vue
  3. 227
      src/components/echarts/LineChart.vue
  4. 122
      src/components/echarts/MapChart.vue
  5. 181
      src/components/echarts/PanelGroup.vue
  6. 116
      src/components/echarts/PieChart.vue
  7. 55
      src/components/echarts/TransactionTable.vue
  8. 27
      src/components/echarts/china.js
  9. 12
      src/views/form/write.vue
  10. 235
      src/views/home/dashboard.vue

135
src/components/echarts/BarChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}" /> <div :class="className" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>
@ -10,93 +10,58 @@ import resize from './mixins/resize'
const animationDuration = 6000 const animationDuration = 6000
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
chartOption: {
type: Object,
required: true
}
}, },
width: { watch: {
type: String, chartOption: {
default: '100%' deep: true,
handler(val) {
this.setOptions(val)
}
}
}, },
height: { data() {
type: String, return {
default: '300px' chart: null
} }
}, },
data() { mounted() {
return { this.$nextTick(() => {
chart: null this.initChart()
} })
}, },
mounted() { beforeDestroy() {
this.$nextTick(() => { if (!this.chart) {
this.initChart() return
}) }
}, this.chart.dispose()
beforeDestroy() { this.chart = null
if (!this.chart) { },
return methods: {
} initChart() {
this.chart.dispose() this.chart = echarts.init(this.$el, 'macarons')
this.chart = null this.setOptions(this.chartOption)
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
}, },
xAxis: [{ setOptions(chartOption) {
type: 'category', this.chart.setOption(chartOption)
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
}
}],
series: [{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageB',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [80, 52, 200, 334, 390, 330, 220],
animationDuration
}, {
name: 'pageC',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [30, 52, 200, 334, 390, 330, 220],
animationDuration
}]
})
} }
}
} }
</script> </script>

118
src/components/echarts/BoxCard.vue
View File

@ -1,118 +0,0 @@
<template>
<el-card class="box-card-component" style="margin-left:8px;">
<div slot="header" class="box-card-header">
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
</div>
<div style="position:relative;">
<pan-thumb :image="avatar" class="panThumb" />
<mallki class-name="mallki-text" text="vue-element-admin" />
<div style="padding-top:35px;" class="progress-item">
<span>Vue</span>
<el-progress :percentage="70" />
</div>
<div class="progress-item">
<span>JavaScript</span>
<el-progress :percentage="18" />
</div>
<div class="progress-item">
<span>CSS</span>
<el-progress :percentage="12" />
</div>
<div class="progress-item">
<span>ESLint</span>
<el-progress :percentage="100" status="success" />
</div>
</div>
</el-card>
</template>
<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import Mallki from '@/components/TextHoverEffect/Mallki'
export default {
components: { PanThumb, Mallki },
filters: {
statusFilter(status) {
const statusMap = {
success: 'success',
pending: 'danger'
}
return statusMap[status]
}
},
data() {
return {
statisticsData: {
article_count: 1024,
pageviews_count: 1024
}
}
},
computed: {
...mapGetters([
'name',
'avatar',
'roles'
])
}
}
</script>
<style lang="scss" >
.box-card-component{
.el-card__header {
padding: 0px!important;
}
}
</style>
<style lang="scss" scoped>
.box-card-component {
.box-card-header {
position: relative;
height: 220px;
img {
width: 100%;
height: 100%;
transition: all 0.2s linear;
&:hover {
transform: scale(1.1, 1.1);
filter: contrast(130%);
}
}
}
.mallki-text {
position: absolute;
top: 0px;
right: 0px;
font-size: 20px;
font-weight: bold;
}
.panThumb {
z-index: 100;
height: 70px!important;
width: 70px!important;
position: absolute!important;
top: -45px;
left: 0px;
border: 5px solid #ffffff;
background-color: #fff;
margin: auto;
box-shadow: none!important;
::v-deep .pan-info {
box-shadow: none!important;
}
}
.progress-item {
margin-bottom: 10px;
font-size: 14px;
}
@media only screen and (max-width: 1510px){
.mallki-text{
display: none;
}
}
}
</style>

227
src/components/echarts/LineChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}" /> <div :class="className" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>
@ -8,128 +8,121 @@ require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
}, },
tooltip: { width: {
trigger: 'axis', type: String,
axisPointer: { default: '100%'
type: 'cross'
},
padding: [5, 10]
}, },
yAxis: { height: {
axisTick: { type: String,
show: false default: '350px'
}
}, },
legend: { autoResize: {
data: ['expected', 'actual'] type: Boolean,
default: true
}, },
series: [{ chartOption: {
name: 'expected', itemStyle: { type: Object,
normal: { required: true
color: '#FF005A', }
lineStyle: { },
color: '#FF005A', data() {
width: 2 return {
} chart: null
}
},
watch: {
chartOption: {
deep: true,
handler(val) {
this.setOptions(val)
} }
}, }
smooth: true, },
type: 'line', mounted() {
data: expectedData, this.$nextTick(() => {
animationDuration: 2800, this.initChart()
animationEasing: 'cubicInOut' })
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartOption)
}, },
{ setOptions(chartOption) {
name: 'actual', this.chart.setOption(chartOption)
smooth: true, // this.chart.setOption({
type: 'line', // xAxis: {
itemStyle: { // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
normal: { // boundaryGap: false,
color: '#3888fa', // axisTick: {
lineStyle: { // show: false
color: '#3888fa', // }
width: 2 // },
}, // grid: {
areaStyle: { // left: 10,
color: '#f3f8ff' // right: 10,
} // bottom: 20,
} // top: 30,
}, // containLabel: true
data: actualData, // },
animationDuration: 2800, // tooltip: {
animationEasing: 'quadraticOut' // trigger: 'axis',
}] // axisPointer: {
}) // type: 'cross'
// },
// padding: [5, 10]
// },
// yAxis: {
// axisTick: {
// show: false
// }
// },
// legend: {
// data: ['expected', 'actual']
// },
// series: [{
// name: 'expected',
// smooth: true,
// type: 'line',
// data: expectedData,
// animationDuration: 2800,
// animationEasing: 'cubicInOut'
// },
// {
// name: 'actual',
// smooth: true,
// type: 'line',
// itemStyle: {
// normal: {
// color: '#3888fa',
// lineStyle: {
// color: '#3888fa',
// width: 2
// },
// areaStyle: {
// color: '#f3f8ff'
// }
// }
// },
// data: actualData,
// animationDuration: 2800,
// animationEasing: 'quadraticOut'
// }]
// })
}
} }
}
} }
</script> </script>

122
src/components/echarts/MapChart.vue
View File

@ -4,10 +4,10 @@
<script> <script>
const echarts = require('echarts') const echarts = require('echarts')
require('./china.js')
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
@ -22,6 +22,10 @@ export default {
height: { height: {
type: String, type: String,
default: '300px' default: '300px'
},
chartOption: {
type: Object,
required: true
} }
}, },
data() { data() {
@ -29,6 +33,14 @@ export default {
chart: null chart: null
} }
}, },
watch: {
chartOption: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart()
@ -43,105 +55,17 @@ export default {
}, },
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, 'macarons') this.$api.get('https://unpkg.com/echarts@3.6.2/map/json/china.json').then(res=>{
echarts.registerMap('china', res);
this.chart.setOption({ this.chart = echarts.init(this.$el, 'macarons')
title: { this.setOptions(this.chartOption)
text: '订单量',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['订单量']
},
visualMap: {
type: 'piecewise',
pieces: [
{min: 1500},
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定义label）'},
{value: 123, label: '123（自定义特殊颜色）', color: 'grey'},
{min: 5, max: 5, label: '5（自定义特殊颜色）', color: 'black'},
{max: 5}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
roamController: {
show: true,
left: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '订单量',
type: 'map',
mapType: 'china',
roam: false,
label: {
show: true,
color: 'rgb(249, 249, 249)'
},
data: [
{name: '北京', value: 5},
{name: '天津', value: Math.round(Math.random() * 2000)},
{name: '上海', value: Math.round(Math.random() * 2000)},
{name: '重庆', value: Math.round(Math.random() * 2000)},
{name: '河北', value: 0},
{name: '河南', value: Math.round(Math.random() * 2000)},
{name: '云南', value: 123},
{name: '辽宁', value: 305},
{name: '黑龙江', value: Math.round(Math.random() * 2000)},
{name: '湖南', value: 200},
{name: '安徽', value: Math.round(Math.random() * 2000)},
{name: '山东', value: Math.round(Math.random() * 2000)},
{name: '新疆', value: Math.round(Math.random() * 2000)},
{name: '江苏', value: Math.round(Math.random() * 2000)},
{name: '浙江', value: Math.round(Math.random() * 2000)},
{name: '江西', value: Math.round(Math.random() * 2000)},
{name: '湖北', value: Math.round(Math.random() * 2000)},
{name: '广西', value: Math.round(Math.random() * 2000)},
{name: '甘肃', value: Math.round(Math.random() * 2000)},
{name: '山西', value: Math.round(Math.random() * 2000)},
{name: '内蒙古', value: Math.round(Math.random() * 2000)},
{name: '陕西', value: Math.round(Math.random() * 2000)},
{name: '吉林', value: Math.round(Math.random() * 2000)},
{name: '福建', value: Math.round(Math.random() * 2000)},
{name: '贵州', value: Math.round(Math.random() * 2000)},
{name: '广东', value: Math.round(Math.random() * 2000)},
{name: '青海', value: Math.round(Math.random() * 2000)},
{name: '西藏', value: Math.round(Math.random() * 2000)},
{name: '四川', value: Math.round(Math.random() * 2000)},
{name: '宁夏', value: Math.round(Math.random() * 2000)},
{name: '海南', value: Math.round(Math.random() * 2000)},
{name: '台湾', value: Math.round(Math.random() * 2000)},
{name: '香港', value: Math.round(Math.random() * 2000)},
{name: '澳门', value: Math.round(Math.random() * 2000)}
]
}
]
}) })
},
setOptions(chartOption) {
if (!this.chart) {
return
}
this.chart.setOption(chartOption)
} }
} }
} }

181
src/components/echarts/PanelGroup.vue
View File

@ -1,181 +0,0 @@
<template>
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
New Visits
</div>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Messages
</div>
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Purchases
</div>
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Shoppings
</div>
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'CountTo'
export default {
components: {
CountTo
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
}
}
</script>
<style lang="scss" scoped>
.panel-group {
margin-top: 18px;
.card-panel-col {
margin-bottom: 32px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width:550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>

116
src/components/echarts/PieChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="className" :style="{height:height,width:width}" /> <div :class="className" :style="{height:height,width:width}"/>
</template> </template>
<script> <script>
@ -7,75 +7,59 @@ const echarts = require('echarts')
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
className: { className: {
type: String, type: String,
default: 'chart' default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
chartOption: {
type: Object,
required: true
}
}, },
width: { watch: {
type: String, chartOption: {
default: '100%' deep: true,
handler(val) {
this.setOptions(val)
}
}
}, },
height: { data() {
type: String, return {
default: '300px' chart: null
} }
}, },
data() { mounted() {
return { this.$nextTick(() => {
chart: null this.initChart()
} })
}, },
mounted() { beforeDestroy() {
this.$nextTick(() => { if (!this.chart) {
this.initChart() return
}) }
}, this.chart.dispose()
beforeDestroy() { this.chart = null
if (!this.chart) { },
return methods: {
} initChart() {
this.chart.dispose() this.chart = echarts.init(this.$el, 'macarons')
this.chart = null this.setOptions(this.chartOption)
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
}, },
series: [ setOptions(chartOption) {
{ this.chart.setOption(chartOption)
name: 'WEEKLY WRITE ARTICLES', }
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '38%'],
data: [
{ value: 320, name: 'Industries' },
{ value: 240, name: 'Technology' },
{ value: 149, name: 'Forex' },
{ value: 100, name: 'Gold' },
{ value: 59, name: 'Forecasts' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
} }
}
} }
</script> </script>

55
src/components/echarts/TransactionTable.vue
View File

@ -1,55 +0,0 @@
<template>
<el-table :data="list" style="width: 100%;padding-top: 15px;">
<el-table-column label="Order_No" min-width="200">
<template slot-scope="scope">
{{ scope.row.order_no | orderNoFilter }}
</template>
</el-table-column>
<el-table-column label="Price" width="195" align="center">
<template slot-scope="scope">
¥{{ scope.row.price | toThousandFilter }}
</template>
</el-table-column>
<el-table-column label="Status" width="100" align="center">
<template slot-scope="{row}">
<el-tag :type="row.status | statusFilter">
{{ row.status }}
</el-tag>
</template>
</el-table-column>
</el-table>
</template>
<script>
import { transactionList } from '@/api/remote-search'
export default {
filters: {
statusFilter(status) {
const statusMap = {
success: 'success',
pending: 'danger'
}
return statusMap[status]
},
orderNoFilter(str) {
return str.substring(0, 30)
}
},
data() {
return {
list: null
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
transactionList().then(response => {
this.list = response.data.items.slice(0, 8)
})
}
}
}
</script>

27
src/components/echarts/china.js
View File

File diff suppressed because one or more lines are too long

12
src/views/form/write.vue
View File

@ -39,6 +39,9 @@ import loadWXJs from '@/utils/loadWxSdk'
import defaultValue from '@/utils/defaultValue' import defaultValue from '@/utils/defaultValue'
import {getCurrentDomain, getQueryString} from '@/utils' import {getCurrentDomain, getQueryString} from '@/utils'
const uaParser = require('ua-parser-js')
const ua = uaParser(navigator.userAgent)
require('@/utils/ut') require('@/utils/ut')
let wx let wx
export default { export default {
@ -76,7 +79,6 @@ export default {
this.projectConfig.projectKey = key this.projectConfig.projectKey = key
let wxCode = getQueryString('code') let wxCode = getQueryString('code')
if (wxCode) { if (wxCode) {
alert(wxCode)
this.wxAuthorizationCode = wxCode this.wxAuthorizationCode = wxCode
this.getWxAuthorizationUserInfo() this.getWxAuthorizationUserInfo()
} }
@ -88,7 +90,7 @@ export default {
this.wxSignature = res.data this.wxSignature = res.data
this.setWxConfig() this.setWxConfig()
}) })
console.log(ua)
}, },
mounted() { mounted() {
this.viewProjectHandle() this.viewProjectHandle()
@ -209,10 +211,8 @@ export default {
}) })
}, },
onlyWxOpenHandle() { onlyWxOpenHandle() {
let ua = navigator.userAgent.toLowerCase() let wxUa = navigator.userAgent.toLowerCase()
let isWeixin = ua.indexOf('micromessenger') != -1 let isWeixin = wxUa.indexOf('micromessenger') != -1
let isAndroid = ua.indexOf('android') != -1
let isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1)
if (!isWeixin) { if (!isWeixin) {
document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">' document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">'
document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>' document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>'

235
src/views/home/dashboard.vue
View File

@ -12,6 +12,7 @@
@change="projectChangeHandle" @change="projectChangeHandle"
> >
<el-option <el-option
v-for="item in projectListData" v-for="item in projectListData"
:key="item.key" :key="item.key"
:label="item.name" :label="item.name"
@ -25,8 +26,8 @@
> >
<el-row style="height: 50px;" /> <el-row style="height: 50px;" />
<el-row> <el-row>
<el-row type="flex" justify="space-around"> <el-row type="flex" justify="space-around" style="text-align: center;">
<el-col :offset="2" :span="5"> <el-col :span="5">
<span>有效回收量</span> <span>有效回收量</span>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
@ -39,9 +40,11 @@
<span>平均完成时间</span> <span>平均完成时间</span>
</el-col> </el-col>
</el-row> </el-row>
<el-row type="flex" justify="space-around"> <el-row type="flex" justify="space-around" style="text-align: center;">
<el-col :offset="2" :span="5"> <el-col :span="5">
<count-to :end-val="projectStats.completeCount" style="font-size: 20px; text-align: center;" /> <count-to :end-val="projectStats.completeCount"
style="font-size: 20px;"
/>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<count-to :end-val="projectStats.viewCount" style="font-size: 20px;" /> <count-to :end-val="projectStats.viewCount" style="font-size: 20px;" />
@ -58,7 +61,7 @@
</el-row> </el-row>
</el-row> </el-row>
<el-row> <el-row>
<line-chart :chart-data="lineChartData" /> <line-chart :chart-option="lineChartOptionData" />
</el-row> </el-row>
</el-row> </el-row>
</el-col> </el-col>
@ -70,7 +73,7 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="18"> <el-col :span="18">
<map-chart /> <map-chart :chart-option="mapChartOptionData" />
</el-col> </el-col>
</el-row> </el-row>
<el-row type="flex" justify="space-around"> <el-row type="flex" justify="space-around">
@ -81,7 +84,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<bar-chart /> <bar-chart :chart-option="barChartOptionData" />
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -91,7 +94,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<pie-chart /> <pie-chart :chart-option="pieChartOptionData" />
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -107,24 +110,7 @@ import MapChart from '@/components/echarts/MapChart'
import CountTo from '@/components/CountTo' import CountTo from '@/components/CountTo'
import BarChart from '@/components/echarts/BarChart' import BarChart from '@/components/echarts/BarChart'
import {timeFormat} from '@/utils/index' import {timeFormat} from '@/utils/index'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default { export default {
name: 'HomeDashboard', name: 'HomeDashboard',
components: { components: {
@ -144,9 +130,12 @@ export default {
completeCount: 0, completeCount: 0,
completeRate: 0 completeRate: 0
}, },
projectSituation: null,
activeProjectKey: null, activeProjectKey: null,
lineChartData: lineChartData.newVisitis // 回收折现图
lineChartOptionData: {},
mapChartOptionData: {},
barChartOptionData: {},
pieChartOptionData: {}
} }
}, },
created() { created() {
@ -161,6 +150,9 @@ export default {
projectChangeHandle() { projectChangeHandle() {
this.getProjectStats() this.getProjectStats()
this.getProjectSituation() this.getProjectSituation()
this.getProjectSubmitPosition()
this.getProjectSubmitDevice()
this.getProjectSubmitSource()
}, },
getProjectStats() { getProjectStats() {
this.$api.get('/user/project/report/stats', {params: {projectKey: this.activeProjectKey}}).then(res => { this.$api.get('/user/project/report/stats', {params: {projectKey: this.activeProjectKey}}).then(res => {
@ -174,11 +166,189 @@ export default {
}, },
getProjectSituation() { getProjectSituation() {
this.$api.get('/user/project/report/situation', {params: {projectKey: this.activeProjectKey}}).then(res => { this.$api.get('/user/project/report/situation', {params: {projectKey: this.activeProjectKey}}).then(res => {
this.projectSituation = res.data this.lineChartOptionData = {
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false
},
data: res.data.map(item => {
return item.createTime
})
},
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: 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 = {
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: true,
color: 'rgb(0,0,0)'
},
data: Object.keys(res.data).map(key => {
return {name: key.replace(/省(s?)|市(s?)|\//ig, ''), value: res.data[key]}
})
}
]
}
}) })
},
// 常用设备
getProjectSubmitDevice() {
this.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: [
{
name: '2011年',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
}
]
}
},
getProjectSubmitSource() {
this.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: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
}
} }
} }
} }
</script> </script>
@ -188,4 +358,7 @@ export default {
border-bottom: 3px solid rgba(68, 68, 68, 100); border-bottom: 3px solid rgba(68, 68, 68, 100);
line-height: 25px; line-height: 25px;
} }
.el-select-dropdown__item {
width: 300px !important;
}
</style> </style>

Write Preview
Loading…
Cancel
Save