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 {
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
// chartData: {
// type: Object,
// required: true
// }
},
data() {
return {
......@@ -63,71 +63,65 @@ export default {
},
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
axisTick: {
show: false
title: {
text: '本周工单统计',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['运维', '产品研发', '测试', 'UI设计', '前端']
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
left: '10',
right: '10',
bottom: '20',
top: '50',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['expected', 'actual']
type: 'value'
},
series: [{
name: 'expected', itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
series: [
{
name: '运维',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 4, 7]
},
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'
}
}
{
name: '产品研发',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 8, 3]
},
{
name: '测试',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 4, 2]
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
{
name: 'UI设计',
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 @@
<div class="card-panel-text">
用户总数
</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>
</el-col>
......@@ -22,7 +22,7 @@
<div class="card-panel-text">
工单总数
</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>
</el-col>
......@@ -35,7 +35,7 @@
<div class="card-panel-text">
待办总数
</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>
</el-col>
......@@ -48,7 +48,7 @@
<div class="card-panel-text">
个人待办
</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>
</el-col>
......@@ -63,10 +63,7 @@ export default {
CountTo
},
// eslint-disable-next-line vue/require-prop-types
props: ['panelGroup'],
created() {
console.log(this.panelGroup)
}
props: ['panelGroupValue']
}
</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'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
......@@ -47,54 +45,40 @@ export default {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: '工单提交排名',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 10,
top: 35,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
xAxis: {
type: 'value',
axisTick: {
show: false
boundaryGap: [0, 0.01]
},
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'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 3000
export default {
mixins: [resize],
props: {
......@@ -47,68 +45,46 @@ export default {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: '待办工单排名',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
axisPointer: {
type: 'shadow'
}
},
radar: {
radius: '66%',
center: ['50%', '42%'],
splitNumber: 8,
splitArea: {
areaStyle: {
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 }
]
grid: {
top: 35,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
series: [{
type: 'radar',
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
},
data: [
{
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'
yAxis: {
type: 'category',
data: ['兰玉磊', '张三', '李四', '王五', '赵六', '马七']
},
series: [
{
type: 'bar',
barWidth: 20,
stack: 'vistors',
data: [1, 8, 12, 15, 23, 36],
itemStyle: {
normal: {
color: '#5ab1ef'
}
}
],
animationDuration: animationDuration
}]
}
]
})
}
}
......
src/views/dashboard/admin/index.vue
<template>
<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;">
<line-chart :chart-data="lineChartData" />
<line-chart />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
<TicketSubmissionRanking />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
<TodoWorkOrderRanking />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
<ProcessingTicketRanking />
</div>
</el-col>
</el-row>
......@@ -29,46 +29,24 @@
<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
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]
}
}
import TicketSubmissionRanking from './components/TicketSubmissionRanking'
import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
import ProcessingTicketRanking from './components/ProcessingTicketRanking'
export default {
name: 'DashboardAdmin',
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
TicketSubmissionRanking,
TodoWorkOrderRanking,
ProcessingTicketRanking
},
// eslint-disable-next-line vue/require-prop-types
props: ['panelGroupValue'],
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
......
src/views/dashboard/index.vue
<template>
<div class="dashboard-container">
<adminDashboard v-if="dashboardStatus" :panel-group="panelGroup" />
<adminDashboard v-if="dashboardStatus" :panel-group-value="panelGroupValue" />
</div>
</template>
......@@ -18,8 +18,7 @@ export default {
},
created() {
initData().then(response => {
this.panelGroup = response.data
console.log(this.panelGroup)
this.panelGroupValue = response.data
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