Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 06869dd3 by Mr. Lan
Options

完善工单统计。

parent 19764596
Inline Side-by-side
Showing with 127 additions and 53 deletions
src/views/dashboard/admin/components/LineChart.vue
...@@ -25,11 +25,11 @@ export default { ...@@ -25,11 +25,11 @@ export default {
autoResize: { autoResize: {
type: Boolean, type: Boolean,
default: true default: true
},
statisticsData: {
type: Object,
required: true
} }
// chartData: {
// type: Object,
// required: true
// }
}, },
data() { data() {
return { return {
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
} }
}, },
watch: { watch: {
chartData: { statisticsData: {
deep: true, deep: true,
handler(val) { handler(val) {
this.setOptions(val) this.setOptions(val)
...@@ -59,12 +59,12 @@ export default { ...@@ -59,12 +59,12 @@ export default {
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, 'macarons') this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData) this.setOptions(this.statisticsData)
}, },
setOptions({ expectedData, actualData } = {}) { setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({ this.chart.setOption({
title: { title: {
text: '本周工单统计', text: '最近7天工单统计',
textStyle: { textStyle: {
fontSize: 15 fontSize: 15
} }
...@@ -73,11 +73,11 @@ export default { ...@@ -73,11 +73,11 @@ export default {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['运维', '产品研发', '测试', 'UI设计', '前端'] data: ['工单总数', '待办工单', '已完成工单']
}, },
grid: { grid: {
left: '10', left: '25',
right: '10', right: '45',
bottom: '20', bottom: '20',
top: '50', top: '50',
containLabel: true containLabel: true
...@@ -85,41 +85,26 @@ export default { ...@@ -85,41 +85,26 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] data: this.statisticsData.datetime
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
name: '运维', name: '工单总数',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 4, 7]
},
{
name: '产品研发',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 8, 3]
},
{
name: '测试',
type: 'line', type: 'line',
stack: '总量', data: this.statisticsData.total
data: [150, 232, 201, 154, 190, 4, 2]
}, },
{ {
name: 'UI设计', name: '待办工单',
type: 'line', type: 'line',
stack: '总量', data: this.statisticsData.processing
data: [320, 332, 301, 334, 390, 1, 7]
}, },
{ {
name: '前端', name: '已完成工单',
type: 'line', type: 'line',
stack: '总量', data: this.statisticsData.over
data: [150, 376, 256, 289, 179, 5, 12]
} }
] ]
}) })
......
src/views/dashboard/admin/components/TicketSubmissionRanking.vue
...@@ -21,6 +21,10 @@ export default { ...@@ -21,6 +21,10 @@ export default {
height: { height: {
type: String, type: String,
default: '300px' default: '300px'
},
submitRankingData: {
type: Object,
required: true
} }
}, },
data() { data() {
...@@ -43,7 +47,6 @@ export default { ...@@ -43,7 +47,6 @@ export default {
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, 'macarons') this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({ this.chart.setOption({
title: { title: {
text: '工单提交排名', text: '工单提交排名',
...@@ -58,10 +61,10 @@ export default { ...@@ -58,10 +61,10 @@ export default {
} }
}, },
grid: { grid: {
top: 35, top: 45,
left: '2%', left: '3%',
right: '2%', right: '5%',
bottom: '3%', bottom: '20',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
...@@ -70,13 +73,13 @@ export default { ...@@ -70,13 +73,13 @@ export default {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['马七', '赵六', '王五', '李四', '张三', '兰玉磊'] data: this.submitRankingData.nickname
}, },
series: [ series: [
{ {
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
data: [367, 435, 693, 764, 890, 999] data: this.submitRankingData.rankingCount
} }
] ]
}) })
......
src/views/dashboard/admin/components/processOrderList.vue 0 → 100644
<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: '最受欢迎的流程',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis'
},
grid: {
top: 45,
left: 10,
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="panelGroupValue" /> <panel-group :panel-group-value="dashboardValue.panelGroup" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart /> <line-chart :statistics-data="dashboardValue.statisticsData" />
</el-row> </el-row>
<el-row :gutter="32"> <el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper"> <div class="chart-wrapper">
<TicketSubmissionRanking /> <TicketSubmissionRanking :submit-ranking-data="dashboardValue.submitRankingData" />
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8"> <el-col :xs="24" :sm="24" :lg="16">
<div class="chart-wrapper"> <div class="chart-wrapper">
<TodoWorkOrderRanking /> <processOrderList :process-order-list="dashboardValue.processOrderList" />
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8"> <!-- <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper"> <div class="chart-wrapper">
<ProcessingTicketRanking /> <ProcessingTicketRanking />
</div> </div>
</el-col> </el-col> -->
</el-row> </el-row>
</div> </div>
</template> </template>
...@@ -30,8 +30,9 @@ ...@@ -30,8 +30,9 @@
import PanelGroup from './components/PanelGroup' import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart' import LineChart from './components/LineChart'
import TicketSubmissionRanking from './components/TicketSubmissionRanking' import TicketSubmissionRanking from './components/TicketSubmissionRanking'
import TodoWorkOrderRanking from './components/TodoWorkOrderRanking' import processOrderList from './components/processOrderList'
import ProcessingTicketRanking from './components/ProcessingTicketRanking' // import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
// import ProcessingTicketRanking from './components/ProcessingTicketRanking'
export default { export default {
name: 'DashboardAdmin', name: 'DashboardAdmin',
...@@ -39,11 +40,12 @@ export default { ...@@ -39,11 +40,12 @@ export default {
PanelGroup, PanelGroup,
LineChart, LineChart,
TicketSubmissionRanking, TicketSubmissionRanking,
TodoWorkOrderRanking, processOrderList
ProcessingTicketRanking // TodoWorkOrderRanking,
// ProcessingTicketRanking
}, },
// eslint-disable-next-line vue/require-prop-types // eslint-disable-next-line vue/require-prop-types
props: ['panelGroupValue'], props: ['dashboardValue'],
data() { data() {
return { return {
......
src/views/dashboard/index.vue
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<adminDashboard v-if="dashboardStatus" :panel-group-value="panelGroupValue" /> <adminDashboard v-if="dashboardStatus" :dashboard-value="dashboardValue" />
</div> </div>
</template> </template>
...@@ -18,7 +18,7 @@ export default { ...@@ -18,7 +18,7 @@ export default {
}, },
created() { created() {
initData().then(response => { initData().then(response => {
this.panelGroupValue = response.data this.dashboardValue = response.data
this.dashboardStatus = true this.dashboardStatus = true
}) })
} }
......
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 sign in to comment