Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 4b6fc2d9 by YuleiLan
Options

添加工单统计。

parent 0b06ddd5
Inline Side-by-side
Showing with 221 additions and 201 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
},
chartData: {
type: Object,
required: true
} }
// chartData: {
// type: Object,
// required: true
// }
}, },
data() { data() {
return { return {
...@@ -63,71 +63,65 @@ export default { ...@@ -63,71 +63,65 @@ export default {
}, },
setOptions({ expectedData, actualData } = {}) { setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({ this.chart.setOption({
xAxis: { title: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], text: '本周工单统计',
boundaryGap: false, textStyle: {
axisTick: { fontSize: 15
show: false
} }
}, },
tooltip: {
trigger: 'axis'
},
legend: {
data: ['运维', '产品研发', '测试', 'UI设计', '前端']
},
grid: { grid: {
left: 10, left: '10',
right: 10, right: '10',
bottom: 20, bottom: '20',
top: 30, top: '50',
containLabel: true containLabel: true
}, },
tooltip: { xAxis: {
trigger: 'axis', type: 'category',
axisPointer: { boundaryGap: false,
type: 'cross' data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
padding: [5, 10]
}, },
yAxis: { yAxis: {
axisTick: { type: 'value'
show: false
}
},
legend: {
data: ['expected', 'actual']
}, },
series: [{ series: [
name: 'expected', itemStyle: { {
normal: { name: '运维',
color: '#FF005A', type: 'line',
lineStyle: { stack: '总量',
color: '#FF005A', data: [120, 132, 101, 134, 90, 4, 7]
width: 2
}
}
}, },
smooth: true, {
type: 'line', name: '产品研发',
data: expectedData, type: 'line',
animationDuration: 2800, stack: '总量',
animationEasing: 'cubicInOut' data: [220, 182, 191, 234, 290, 8, 3]
}, },
{ {
name: 'actual', name: '测试',
smooth: true, type: 'line',
type: 'line', stack: '总量',
itemStyle: { data: [150, 232, 201, 154, 190, 4, 2]
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
}, },
data: actualData, {
animationDuration: 2800, name: 'UI设计',
animationEasing: 'quadraticOut' type: 'line',
}] stack: '总量',
data: [320, 332, 301, 334, 390, 1, 7]
},
{
name: '前端',
type: 'line',
stack: '总量',
data: [150, 376, 256, 289, 179, 5, 12]
}
]
}) })
} }
} }
......
src/views/dashboard/admin/components/PanelGroup.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div class="card-panel-text"> <div class="card-panel-text">
用户总数 用户总数
</div> </div>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> <count-to :start-val="0" :end-val="panelGroupValue.user_total_count" :duration="2000" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="card-panel-text"> <div class="card-panel-text">
工单总数 工单总数
</div> </div>
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" /> <count-to :start-val="0" :end-val="panelGroupValue.work_order_total_count" :duration="2200" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="card-panel-text"> <div class="card-panel-text">
待办总数 待办总数
</div> </div>
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="panelGroupValue.upcoming_total_count" :duration="2400" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<div class="card-panel-text"> <div class="card-panel-text">
个人待办 个人待办
</div> </div>
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" /> <count-to :start-val="0" :end-val="panelGroupValue.my_upcoming_count" :duration="2800" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -63,10 +63,7 @@ export default { ...@@ -63,10 +63,7 @@ export default {
CountTo CountTo
}, },
// eslint-disable-next-line vue/require-prop-types // eslint-disable-next-line vue/require-prop-types
props: ['panelGroup'], props: ['panelGroupValue']
created() {
console.log(this.panelGroup)
}
} }
</script> </script>
......
src/views/dashboard/admin/components/ProcessingTicketRanking.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'
}
},
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/BarChart.vue → src/views/dashboard/admin/components/TicketSubmissionRanking.vue
...@@ -7,8 +7,6 @@ import echarts from 'echarts' ...@@ -7,8 +7,6 @@ import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
const animationDuration = 6000
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
...@@ -47,54 +45,40 @@ export default { ...@@ -47,54 +45,40 @@ export default {
this.chart = echarts.init(this.$el, 'macarons') this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({ this.chart.setOption({
title: {
text: '工单提交排名',
textStyle: {
fontSize: 15
}
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' type: 'shadow'
} }
}, },
grid: { grid: {
top: 10, top: 35,
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: [{ xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value', type: 'value',
axisTick: { boundaryGap: [0, 0.01]
show: false },
yAxis: {
type: 'category',
data: ['马七', '赵六', '王五', '李四', '张三', '兰玉磊']
},
series: [
{
type: 'bar',
barWidth: 20,
data: [367, 435, 693, 764, 890, 999]
} }
}], ]
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
}]
}) })
} }
} }
......
src/views/dashboard/admin/components/RaddarChart.vue → src/views/dashboard/admin/components/TodoWorkOrderRanking.vue
...@@ -7,8 +7,6 @@ import echarts from 'echarts' ...@@ -7,8 +7,6 @@ import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
const animationDuration = 3000
export default { export default {
mixins: [resize], mixins: [resize],
props: { props: {
...@@ -47,68 +45,46 @@ export default { ...@@ -47,68 +45,46 @@ export default {
this.chart = echarts.init(this.$el, 'macarons') this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({ this.chart.setOption({
title: {
text: '待办工单排名',
textStyle: {
fontSize: 15
}
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效 axisPointer: {
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' type: 'shadow'
} }
}, },
radar: { grid: {
radius: '66%', top: 35,
center: ['50%', '42%'], left: '2%',
splitNumber: 8, right: '2%',
splitArea: { bottom: '3%',
areaStyle: { containLabel: true
color: 'rgba(127,95,132,.3)',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15
}
},
indicator: [
{ name: 'Sales', max: 10000 },
{ name: 'Administration', max: 20000 },
{ name: 'Information Techology', max: 20000 },
{ name: 'Customer Support', max: 20000 },
{ name: 'Development', max: 20000 },
{ name: 'Marketing', max: 20000 }
]
}, },
legend: { xAxis: {
left: 'center', type: 'value',
bottom: '10', boundaryGap: [0, 0.01]
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
}, },
series: [{ yAxis: {
type: 'radar', type: 'category',
symbolSize: 0, data: ['兰玉磊', '张三', '李四', '王五', '赵六', '马七']
areaStyle: { },
normal: { series: [
shadowBlur: 13, {
shadowColor: 'rgba(0,0,0,.2)', type: 'bar',
shadowOffsetX: 0, barWidth: 20,
shadowOffsetY: 10, stack: 'vistors',
opacity: 1 data: [1, 8, 12, 15, 23, 36],
} itemStyle: {
}, normal: {
data: [ color: '#5ab1ef'
{ }
value: [5000, 7000, 12000, 11000, 15000, 14000],
name: 'Allocated Budget'
},
{
value: [4000, 9000, 15000, 15000, 13000, 11000],
name: 'Expected Spending'
},
{
value: [5500, 11000, 12000, 15000, 12000, 12000],
name: 'Actual Spending'
} }
], }
animationDuration: animationDuration ]
}]
}) })
} }
} }
......
src/views/dashboard/admin/index.vue
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<panel-group @handleSetLineChartData="handleSetLineChartData" /> <panel-group :panel-group-value="panelGroupValue" />
<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 :chart-data="lineChartData" /> <line-chart />
</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">
<raddar-chart /> <TicketSubmissionRanking />
</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">
<pie-chart /> <TodoWorkOrderRanking />
</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">
<bar-chart /> <ProcessingTicketRanking />
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -29,46 +29,24 @@ ...@@ -29,46 +29,24 @@
<script> <script>
import PanelGroup from './components/PanelGroup' import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart' import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart' import TicketSubmissionRanking from './components/TicketSubmissionRanking'
import PieChart from './components/PieChart' import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
import BarChart from './components/BarChart' import ProcessingTicketRanking from './components/ProcessingTicketRanking'
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: 'DashboardAdmin', name: 'DashboardAdmin',
components: { components: {
PanelGroup, PanelGroup,
LineChart, LineChart,
RaddarChart, TicketSubmissionRanking,
PieChart, TodoWorkOrderRanking,
BarChart ProcessingTicketRanking
}, },
// eslint-disable-next-line vue/require-prop-types
props: ['panelGroupValue'],
data() { data() {
return { return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
} }
} }
} }
......
src/views/dashboard/index.vue
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<adminDashboard v-if="dashboardStatus" :panel-group="panelGroup" /> <adminDashboard v-if="dashboardStatus" :panel-group-value="panelGroupValue" />
</div> </div>
</template> </template>
...@@ -18,8 +18,7 @@ export default { ...@@ -18,8 +18,7 @@ export default {
}, },
created() { created() {
initData().then(response => { initData().then(response => {
this.panelGroup = response.data this.panelGroupValue = response.data
console.log(this.panelGroup)
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