Skip to content

F
ferry_web
Commit bf356892 by lanyulei Committed by GitHub
Options

Merge pull request #58 from lanyulei/dev 

feat: 重写工单统计。
parents 07a0b660 888b6bfc
Showing with 491 additions and 663 deletions
src/views/dashboard/admin/components/ChartCard/index.vue 0 → 100644
<template>
<el-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
<div class="chart-card-header">
<div class="meta">
<span class="chart-card-title">
<slot name="title">
{{ title }}
</slot>
</span>
<span class="chart-card-action">
<slot name="action" />
</span>
</div>
<div class="total">
<slot name="total">
<span>{{ typeof total === 'function' && total() || total }}</span>
</slot>
</div>
</div>
<div class="chart-card-footer">
<div class="field">
<slot name="footer" />
</div>
</div>
</el-card>
</template>
<script>
export default {
name: 'ChartCard',
props: {
title: {
type: String,
default: ''
},
total: {
type: [Function, Number, String],
required: false,
default: null
},
loading: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss" scoped>
.chart-card-header {
position: relative;
overflow: hidden;
width: 100%;
.meta {
position: relative;
overflow: hidden;
width: 100%;
color: rgba(0, 0, 0, .45);
font-size: 14px;
line-height: 22px;
}
}
.chart-card-action {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
.chart-card-footer {
border-top: 1px solid #e8e8e8;
padding-top: 9px;
margin-top: 8px;
> * {
position: relative;
}
.field {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
color: rgba(0,0,0,.65);
font-size: 14px;
}
}
.chart-card-content {
margin-bottom: 12px;
position: relative;
height: 46px;
width: 100%;
.content-fix {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
}
.total {
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
color: #000;
margin-top: 4px;
margin-bottom: 0;
font-size: 30px;
line-height: 38px;
height: 38px;
}
</style>
src/views/dashboard/admin/components/HandlePeriod/index.vue 0 → 100644
<template>
<div class="rank">
<h4 class="title">
{{ title }}
<el-tooltip slot="action" class="item" effect="dark" content="工单的处理耗时，注意：仅统计处理节点，审批节点暂未统计。" placement="top-end">
<i class="el-icon-warning-outline" style="float: right" />
</el-tooltip>
</h4>
<ul class="list">
<li v-for="(item, index) in list" :key="index">
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
<span>{{ item.nickname }} ({{ item.username }})</span>
<span>
{{ item.cost_duration > 60 ? item.cost_duration / 60 + ' 分' : item.cost_duration + ' 秒' }}
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HandlePeriod',
props: {
title: {
type: String,
default: ''
},
list: {
type: Array,
default: null
}
}
}
</script>
<style lang="scss" scoped>
.rank {
padding: 0 32px 20px 30px;
.list {
margin: 25px 0 0;
padding: 0;
list-style: none;
li {
margin-top: 16px;
span {
color: rgba(0, 0, 0, .65);
font-size: 14px;
line-height: 22px;
&:first-child {
background-color: #f5f5f5;
border-radius: 20px;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin-right: 24px;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
}
&.active {
background-color: #314659;
color: #fff;
}
&:last-child {
float: right;
}
}
}
}
}
.mobile .rank {
padding: 0 32px 32px 32px;
}
</style>
src/views/dashboard/admin/components/HandleRank/index.vue 0 → 100644
<template>
<div class="rank">
<h4 class="title">
{{ title }}
<el-tooltip slot="action" class="item" effect="dark" content="按照工单处理节点进行统计，一个工单可能会有多个处理节点。" placement="top-end">
<i class="el-icon-warning-outline" style="float: right" />
</el-tooltip>
</h4>
<ul class="list">
<li v-for="(item, index) in list" :key="index">
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
<span>{{ item.nickname }} ({{ item.username }})</span>
<span>{{ item.count }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HandleRank',
props: {
title: {
type: String,
default: ''
},
list: {
type: Array,
default: null
}
}
}
</script>
<style lang="scss" scoped>
.rank {
padding: 0 32px 20px 30px;
.list {
margin: 25px 0 0;
padding: 0;
list-style: none;
li {
margin-top: 16px;
span {
color: rgba(0, 0, 0, .65);
font-size: 14px;
line-height: 22px;
&:first-child {
background-color: #f5f5f5;
border-radius: 20px;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin-right: 24px;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
}
&.active {
background-color: #314659;
color: #fff;
}
&:last-child {
float: right;
}
}
}
}
}
.mobile .rank {
padding: 0 32px 32px 32px;
}
</style>
src/views/dashboard/admin/components/PanelGroup.vue deleted 100644 → 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">
<div class="card-panel-icon-wrapper">
<svg-icon icon-class="yonghu" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
用户总数
</div>
<count-to :start-val="0" :end-val="panelGroupValue.user_total_count" :duration="2000" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper icon-gongdanshuju">
<svg-icon icon-class="gongdanshuju" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
工单总数
</div>
<count-to :start-val="0" :end-val="panelGroupValue.work_order_total_count" :duration="2200" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper">
<svg-icon icon-class="chaoqigongdan" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
待办总数
</div>
<count-to :start-val="0" :end-val="panelGroupValue.upcoming_total_count" :duration="2400" class="card-panel-num" />
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel">
<div class="card-panel-icon-wrapper">
<svg-icon icon-class="wodegongdan" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">
个人待办
</div>
<count-to :start-val="0" :end-val="panelGroupValue.my_upcoming_count" :duration="2800" class="card-panel-num" />
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
// eslint-disable-next-line vue/require-prop-types
props: ['panelGroupValue']
}
</script>
<style lang="scss" scoped>
.panel-group {
.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>
src/views/dashboard/admin/components/PieChart.vue deleted 100644 → 0
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
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.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
},
series: [
{
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>
src/views/dashboard/admin/components/ProcessingTicketRanking.vue deleted 100644 → 0
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
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.chart.setOption({
title: {
text: '完成工单排名',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 35,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['马七', '赵六', '王五', '李四', '张三', '兰玉磊']
},
series: [
{
type: 'bar',
barWidth: 20,
stack: 'vistors',
data: [367, 435, 693, 764, 890, 999],
itemStyle: {
normal: {
color: '#b6a2de'
}
}
}
]
})
}
}
}
</script>
src/views/dashboard/admin/components/LineChart.vue → src/views/dashboard/admin/components/RangeSubmit/index.vue
<template> <template>
<div :class="className" :style="{height:height,width:width}" /> <div style="padding: 0 25px 20px 20px;" :class="className" :style="{height:height,width:width}" />
</template> </template>
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme import resize from '../mixins/resize'
import resize from './mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
...@@ -28,6 +27,7 @@ export default { ...@@ -28,6 +27,7 @@ export default {
}, },
statisticsData: { statisticsData: {
type: Object, type: Object,
default: () => ({}),
required: true required: true
} }
}, },
...@@ -64,7 +64,6 @@ export default { ...@@ -64,7 +64,6 @@ export default {
setOptions({ expectedData, actualData } = {}) { setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({ this.chart.setOption({
title: { title: {
text: '最近7天工单统计',
textStyle: { textStyle: {
fontSize: 15 fontSize: 15
} }
...@@ -73,11 +72,11 @@ export default { ...@@ -73,11 +72,11 @@ export default {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['工单总数', '待办工单', '已完成工单'] data: ['工单总数', '未结束', '已结束']
}, },
grid: { grid: {
left: '25', left: '25',
right: '45', right: '35',
bottom: '20', bottom: '20',
top: '50', top: '50',
containLabel: true containLabel: true
...@@ -97,12 +96,12 @@ export default { ...@@ -97,12 +96,12 @@ export default {
data: this.statisticsData.total data: this.statisticsData.total
}, },
{ {
name: '待办工单', name: '未结束',
type: 'line', type: 'line',
data: this.statisticsData.processing data: this.statisticsData.processing
}, },
{ {
name: '已完成工单', name: '已结束',
type: 'line', type: 'line',
data: this.statisticsData.overs data: this.statisticsData.overs
} }
......
src/views/dashboard/admin/components/RankList/index.vue 0 → 100644
<template>
<div class="rank">
<h4 class="title">
{{ title }}
<el-tooltip slot="action" class="item" effect="dark" content="最常被提交的流程排行及提交的次数。" placement="top-end">
<i class="el-icon-warning-outline" style="float: right" />
</el-tooltip>
</h4>
<ul class="list">
<li v-for="(item, index) in list" :key="index">
<span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
<span>{{ item.name }}</span>
<span>{{ item.total }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'RankList',
props: {
title: {
type: String,
default: ''
},
list: {
type: Array,
default: null
}
}
}
</script>
<style lang="scss" scoped>
.rank {
padding: 0 32px 20px 30px;
.list {
margin: 25px 0 0;
padding: 0;
list-style: none;
li {
margin-top: 16px;
span {
color: rgba(0, 0, 0, .65);
font-size: 14px;
line-height: 22px;
&:first-child {
background-color: #f5f5f5;
border-radius: 20px;
display: inline-block;
font-size: 12px;
font-weight: 600;
margin-right: 24px;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
}
&.active {
background-color: #314659;
color: #fff;
}
&:last-child {
float: right;
}
}
}
}
}
.mobile .rank {
padding: 0 32px 32px 32px;
}
</style>
src/views/dashboard/admin/components/TicketSubmissionRanking.vue deleted 100644 → 0
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
submitRankingData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
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.chart.setOption({
title: {
text: '工单提交排名',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 45,
left: '3%',
right: '5%',
bottom: '20',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: this.submitRankingData.nickname
},
series: [
{
type: 'bar',
barWidth: 20,
data: this.submitRankingData.rankingCount
}
]
})
}
}
}
</script>
src/views/dashboard/admin/components/TodoWorkOrderRanking.vue deleted 100644 → 0
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
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.chart.setOption({
title: {
text: '待办工单排名',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 35,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['兰玉磊', '张三', '李四', '王五', '赵六', '马七']
},
series: [
{
type: 'bar',
barWidth: 20,
stack: 'vistors',
data: [1, 8, 12, 15, 23, 36],
itemStyle: {
normal: {
color: '#5ab1ef'
}
}
}
]
})
}
}
}
</script>
src/views/dashboard/admin/components/processOrderList.vue deleted 100644 → 0
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
processOrderList: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
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.chart.setOption({
title: {
text: '最受欢迎的流程 TOP10',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis'
},
grid: {
top: 45,
left: 30,
right: '5%',
bottom: 20,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.processOrderList.title
},
yAxis: {
type: 'value'
},
series: [{
data: this.processOrderList.submit_count,
type: 'line',
areaStyle: {}
}]
})
}
}
}
</script>
src/views/dashboard/admin/index.vue
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<panel-group :panel-group-value="dashboardValue.panelGroup" /> <el-row :gutter="12">
<el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> <chart-card title="工单总数" :total="dashboardValue.count.all">
<line-chart :statistics-data="dashboardValue.statisticsData" /> <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
<i class="el-icon-warning-outline" />
</el-tooltip>
</chart-card>
</el-col>
<el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
<chart-card title="我创建的" :total="dashboardValue.count.my_create">
<el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
<i class="el-icon-warning-outline" />
</el-tooltip>
</chart-card>
</el-col>
<el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
<chart-card title="我相关的" :total="dashboardValue.count.related">
<el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
<i class="el-icon-warning-outline" />
</el-tooltip>
</chart-card>
</el-col>
<el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
<chart-card title="我的待办" :total="dashboardValue.count.upcoming">
<el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
<i class="el-icon-warning-outline" />
</el-tooltip>
</chart-card>
</el-col>
</el-row> </el-row>
<el-row :gutter="32"> <el-card :bordered="false" :body-style="{padding: '5'}" :style="{ marginBottom: '12px', textAlign: 'center' }">
<el-col :xs="24" :sm="24" :lg="8"> <el-date-picker
<div class="chart-wrapper"> v-model="querys"
<TicketSubmissionRanking :submit-ranking-data="dashboardValue.submitRankingData" /> type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
@change="timeScreening"
/>
</el-card>
<el-card :bordered="false" :body-style="{padding: '0'}" :style="{ marginBottom: '12px' }">
<div class="salesCard">
<div>
<h4 :style="{ marginBottom: '20px' }" style="margin-left: 20px;">提交工单统计</h4>
<RangeSubmit :statistics-data="dashboardValue.submit" />
</div> </div>
</div>
</el-card>
<el-row>
<el-col :span="8">
<el-card :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard leaderboard">
<rank-list title="热门流程排行榜 Top 10" :list="dashboardValue.ranks" />
</div>
</el-card>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="16"> <el-col :span="8" style="padding-left: 12px;">
<div class="chart-wrapper"> <el-card :bordered="false" :body-style="{padding: '0'}">
<processOrderList :process-order-list="dashboardValue.processOrderList" /> <div class="salesCard leaderboard">
</div> <HandleRank title="处理工单人员排行榜" :list="dashboardValue.handle" />
</div>
</el-card>
</el-col>
<el-col :span="8" style="padding-left: 12px;">
<el-card :bordered="false" :body-style="{padding: '0'}">
<div class="salesCard leaderboard">
<HandlePeriod title="工单处理耗时排行榜" :list="dashboardValue.period" />
</div>
</el-card>
</el-col> </el-col>
<!-- <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<ProcessingTicketRanking />
</div>
</el-col> -->
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import PanelGroup from './components/PanelGroup' import ChartCard from './components/ChartCard'
import LineChart from './components/LineChart' import RankList from './components/RankList/index'
import TicketSubmissionRanking from './components/TicketSubmissionRanking' import RangeSubmit from './components/RangeSubmit'
import processOrderList from './components/processOrderList' import HandleRank from './components/HandleRank'
// import TodoWorkOrderRanking from './components/TodoWorkOrderRanking' import HandlePeriod from './components/HandlePeriod'
// import ProcessingTicketRanking from './components/ProcessingTicketRanking'
import { initData } from '@/api/dashboard'
export default { export default {
name: 'DashboardAdmin', name: 'DashboardAdmin',
components: { components: {
PanelGroup, ChartCard,
LineChart, RankList,
TicketSubmissionRanking, RangeSubmit,
processOrderList HandleRank,
// TodoWorkOrderRanking, HandlePeriod
// ProcessingTicketRanking
}, },
// eslint-disable-next-line vue/require-prop-types
props: ['dashboardValue'],
data() { data() {
return { return {
dashboardValue: {
count: {}
},
rankList: [],
submitData: [],
querys: '',
queryList: {},
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
created() {
this.getInitData()
},
methods: {
getInitData() {
initData(this.queryList).then(response => {
this.dashboardValue = response.data
})
},
timeScreening() {
console.log(this.querys)
if (this.querys.length > 1) {
this.queryList.start_time = this.querys[0]
this.queryList.end_time = this.querys[1]
this.getInitData()
}
} }
} }
} }
...@@ -56,15 +159,13 @@ export default { ...@@ -56,15 +159,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-editor-container { .dashboard-editor-container {
padding-top: 32px; padding: 12px;
padding-left: 32px;
padding-right: 32px;
background-color: rgb(240, 242, 245); background-color: rgb(240, 242, 245);
position: relative; position: relative;
.github-corner { .github-corner {
position: absolute; position: absolute;
top: 0px; top: 0;
border: 0; border: 0;
right: 0; right: 0;
} }
...@@ -76,9 +177,20 @@ export default { ...@@ -76,9 +177,20 @@ export default {
} }
} }
/deep/ .el-tabs__item{
padding-left: 16px!important;
height: 50px;
line-height: 50px;
}
@media (max-width:1024px) { @media (max-width:1024px) {
.chart-wrapper { .chart-wrapper {
padding: 8px; padding: 8px;
} }
} }
.leaderboard {
height: 448px;
overflow: auto;
}
</style> </style>
src/views/dashboard/index.vue
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<adminDashboard v-if="dashboardStatus" :dashboard-value="dashboardValue" /> <component :is="currentRole" />
</div> </div>
</template> </template>
<script> <script>
import adminDashboard from './admin' import adminDashboard from './admin'
import { initData } from '@/api/dashboard'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { adminDashboard }, components: { adminDashboard },
data() { data() {
return { return {
dashboardStatus: false currentRole: 'adminDashboard'
} }
}, },
created() { created() {
initData().then(response => {
this.dashboardValue = response.data
this.dashboardStatus = true
})
} }
} }
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment