Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit ff1399c9 by Mr. Lan
Options

feat: 重写工单统计。

parent 07a0b660
Inline Side-by-side
Showing with 2098 additions and 106 deletions
src/main.js
...@@ -23,6 +23,9 @@ import './utils/error-log' // error log ...@@ -23,6 +23,9 @@ import './utils/error-log' // error log
import * as filters from './filters' // global filters import * as filters from './filters' // global filters
import Viser from 'viser-vue'
Vue.use(Viser)
import Pagination from '@/components/Pagination' import Pagination from '@/components/Pagination'
import VueParticles from 'vue-particles' import VueParticles from 'vue-particles'
......
src/views/dashboard/admin/components/Bar.vue 0 → 100644
<template>
<div :style="{ padding: '0 0 32px 32px' }">
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
<v-chart
height="254"
:data="arr"
:force-fit="true"
:padding="['auto', 'auto', '40', '50']"
>
<v-tooltip />
<v-axis />
<v-bar position="x*y" />
</v-chart>
</div>
</template>
<script>
export default {
name: 'Bar',
props: {
title: {
type: String,
default: ''
},
list: {
type: Array,
default: () => {}
},
scale: {
type: Array,
default: () => {
return [{
dataKey: 'x',
min: 2
}, {
dataKey: 'y',
title: '时间',
min: 1,
max: 22
}]
}
},
tooltip: {
type: Array,
default: () => {
return [
'x*y',
(x, y) => ({
name: x,
value: y
})
]
}
}
},
data() {
return {
arr: []
}
},
mounted() {
setTimeout(_ => {
this.arr = this.list
}, 300)
}
}
</script>
src/views/dashboard/admin/components/BarChart.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'
const animationDuration = 6000
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: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
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>
src/views/dashboard/admin/components/BoxCard.vue 0 → 100644
<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;
/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>
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/LineChart.vue
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
statisticsData: { chartData: {
type: Object, type: Object,
required: true required: true
} }
...@@ -37,7 +37,7 @@ export default { ...@@ -37,7 +37,7 @@ export default {
} }
}, },
watch: { watch: {
statisticsData: { chartData: {
deep: true, deep: true,
handler(val) { handler(val) {
this.setOptions(val) this.setOptions(val)
...@@ -59,54 +59,75 @@ export default { ...@@ -59,54 +59,75 @@ export default {
methods: { methods: {
initChart() { initChart() {
this.chart = echarts.init(this.$el, 'macarons') this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.statisticsData) this.setOptions(this.chartData)
}, },
setOptions({ expectedData, actualData } = {}) { setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({ this.chart.setOption({
title: { xAxis: {
text: '最近7天工单统计', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
textStyle: { boundaryGap: false,
fontSize: 15 axisTick: {
show: false
} }
}, },
tooltip: {
trigger: 'axis'
},
legend: {
data: ['工单总数', '待办工单', '已完成工单']
},
grid: { grid: {
left: '25', left: 10,
right: '45', right: 10,
bottom: '20', bottom: 20,
top: '50', top: 30,
containLabel: true containLabel: true
}, },
xAxis: { tooltip: {
type: 'category', trigger: 'axis',
boundaryGap: false, axisPointer: {
data: this.statisticsData.datetime type: 'cross'
},
padding: [5, 10]
}, },
yAxis: { yAxis: {
type: 'value' axisTick: {
show: false
}
}, },
series: [ legend: {
{ data: ['expected', 'actual']
name: '工单总数', },
type: 'line', series: [{
data: this.statisticsData.total name: 'expected', itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
}, },
{ smooth: true,
name: '待办工单', type: 'line',
type: 'line', data: expectedData,
data: this.statisticsData.processing animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: 'actual',
smooth: true,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
}, },
{ data: actualData,
name: '已完成工单', animationDuration: 2800,
type: 'line', animationEasing: 'quadraticOut'
data: this.statisticsData.overs }]
}
]
}) })
} }
} }
......
src/views/dashboard/admin/components/MiniArea/index.vue 0 → 100644
<template>
<div class="antv-chart-mini">
<div class="chart-wrapper" :style="{ height: 46 }">
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
<v-tooltip />
<v-smooth-area position="x*y" />
</v-chart>
</div>
</div>
</template>
<script>
import moment from 'moment'
const data = []
const beginDay = new Date().getTime()
for (let i = 0; i < 10; i++) {
data.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: Math.round(Math.random() * 10)
})
}
const tooltip = [
'x*y',
(x, y) => ({
name: x,
value: y
})
]
const scale = [{
dataKey: 'x',
min: 2
}, {
dataKey: 'y',
title: '时间',
min: 1,
max: 22
}]
export default {
name: 'MiniArea',
data() {
return {
data,
tooltip,
scale,
height: 100
}
}
}
</script>
<style lang="scss" scoped>
.antv-chart-mini {
position: relative;
width: 100%;
.chart-wrapper {
position: absolute;
bottom: -28px;
width: 100%;
/* margin: 0 -5px;
overflow: hidden;*/
}
}
</style>
src/views/dashboard/admin/components/MiniBar/index.vue 0 → 100644
<template>
<div class="antv-chart-mini">
<div class="chart-wrapper" :style="{ height: 46 }">
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
<v-tooltip />
<v-bar position="x*y" />
</v-chart>
</div>
</div>
</template>
<script>
import moment from 'moment'
const data = []
const beginDay = new Date().getTime()
for (let i = 0; i < 10; i++) {
data.push({
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
y: Math.round(Math.random() * 10)
})
}
const tooltip = [
'x*y',
(x, y) => ({
name: x,
value: y
})
]
const scale = [{
dataKey: 'x',
min: 2
}, {
dataKey: 'y',
title: '时间',
min: 1,
max: 30
}]
export default {
name: 'MiniBar',
data() {
return {
data,
tooltip,
scale,
height: 100
}
}
}
</script>
<style lang="scss" scoped>
.antv-chart-mini {
position: relative;
width: 100%;
.chart-wrapper {
position: absolute;
bottom: -28px;
width: 100%;
/* margin: 0 -5px;
overflow: hidden;*/
}
}
</style>
src/views/dashboard/admin/components/MiniProgress/index.vue 0 → 100644
<template>
<div class="chart-mini-progress">
<div class="target" :style="{ left: target + '%'}">
<span :style="{ backgroundColor: color }" />
<span :style="{ backgroundColor: color }" />
</div>
<div class="progress-wrapper">
<div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }" />
</div>
</div>
</template>
<script>
export default {
name: 'MiniProgress',
props: {
target: {
type: Number,
default: 0
},
height: {
type: String,
default: '10px'
},
color: {
type: String,
default: '#13C2C2'
},
percentage: {
type: Number,
default: 0
}
}
}
</script>
<style lang="scss" scoped>
.chart-mini-progress {
padding: 5px 0;
position: relative;
width: 100%;
.target {
position: absolute;
top: 0;
bottom: 0;
span {
border-radius: 100px;
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 2px;
&:last-child {
top: auto;
bottom: 0;
}
}
}
.progress-wrapper {
background-color: #f5f5f5;
position: relative;
.progress {
transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
border-radius: 1px 0 0 1px;
background-color: #1890ff;
width: 0;
height: 100%;
}
}
}
</style>
src/views/dashboard/admin/components/PanelGroup.vue
<template> <template>
<el-row :gutter="40" class="panel-group"> <el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper"> <div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="yonghu" class-name="card-panel-icon" /> <svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
用户总数 新用户
</div> </div>
<count-to :start-val="0" :end-val="panelGroupValue.user_total_count" :duration="2000" class="card-panel-num" /> <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-gongdanshuju"> <div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="gongdanshuju" class-name="card-panel-icon" /> <svg-icon icon-class="message" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
工单总数 消息
</div> </div>
<count-to :start-val="0" :end-val="panelGroupValue.work_order_total_count" :duration="2200" class="card-panel-num" /> <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper"> <div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="chaoqigongdan" class-name="card-panel-icon" /> <svg-icon icon-class="money" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
待办总数 金额
</div> </div>
<count-to :start-val="0" :end-val="panelGroupValue.upcoming_total_count" :duration="2400" class="card-panel-num" /> <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col"> <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel"> <div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper"> <div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="wodegongdan" class-name="card-panel-icon" /> <svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
<div class="card-panel-text"> <div class="card-panel-text">
个人待办 销量
</div> </div>
<count-to :start-val="0" :end-val="panelGroupValue.my_upcoming_count" :duration="2800" class="card-panel-num" /> <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -62,13 +62,18 @@ export default { ...@@ -62,13 +62,18 @@ export default {
components: { components: {
CountTo CountTo
}, },
// eslint-disable-next-line vue/require-prop-types methods: {
props: ['panelGroupValue'] handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.panel-group { .panel-group {
margin-top: 18px;
.card-panel-col { .card-panel-col {
margin-bottom: 32px; margin-bottom: 32px;
} }
......
src/views/dashboard/admin/components/RaddarChart.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'
const animationDuration = 3000
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: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | '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 }
]
},
legend: {
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
},
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'
}
],
animationDuration: animationDuration
}]
})
}
}
}
</script>
src/views/dashboard/admin/components/RankList/index.vue 0 → 100644
<template>
<div class="rank">
<h4 class="title">{{ title }}</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 32px 72px;
.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/TodoList/Todo.vue 0 → 100644
<template>
<li :class="{ completed: todo.done, editing: editing }" class="todo">
<div class="view">
<input
:checked="todo.done"
class="toggle"
type="checkbox"
@change="toggleTodo( todo)"
>
<label @dblclick="editing = true" v-text="todo.text" />
<button class="destroy" @click="deleteTodo( todo )" />
</div>
<input
v-show="editing"
v-focus="editing"
:value="todo.text"
class="edit"
@keyup.enter="doneEdit"
@keyup.esc="cancelEdit"
@blur="doneEdit"
>
</li>
</template>
<script>
export default {
name: 'Todo',
directives: {
focus(el, { value }, { context }) {
if (value) {
context.$nextTick(() => {
el.focus()
})
}
}
},
props: {
todo: {
type: Object,
default: function() {
return {}
}
}
},
data() {
return {
editing: false
}
},
methods: {
deleteTodo(todo) {
this.$emit('deleteTodo', todo)
},
editTodo({ todo, value }) {
this.$emit('editTodo', { todo, value })
},
toggleTodo(todo) {
this.$emit('toggleTodo', todo)
},
doneEdit(e) {
const value = e.target.value.trim()
const { todo } = this
if (!value) {
this.deleteTodo({
todo
})
} else if (this.editing) {
this.editTodo({
todo,
value
})
this.editing = false
}
},
cancelEdit(e) {
e.target.value = this.todo.text
this.editing = false
}
}
}
</script>
src/views/dashboard/admin/components/TodoList/index.scss 0 → 100644
.todoapp {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto ;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
background: #fff;
z-index: 1;
position: relative;
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:focus {
outline: 0;
}
.hidden {
display: none;
}
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 18px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.new-todo {
padding: 10px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
.toggle-all {
text-align: center;
border: none;
/* Mobile Safari */
opacity: 0;
position: absolute;
}
.toggle-all+label {
width: 60px;
height: 34px;
font-size: 0;
position: absolute;
top: -52px;
left: -13px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toggle-all+label:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
.toggle-all:checked+label:before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 12px 16px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none;
/* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle {
opacity: 0;
}
.todo-list li .toggle+label {
/*
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
*/
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center left;
background-size: 36px;
}
.todo-list li .toggle:checked+label {
background-size: 36px;
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}
.todo-list li label {
word-break: break-all;
padding: 15px 15px 15px 50px;
display: block;
line-height: 1.0;
font-size: 14px;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
transition: color 0.2s ease-out;
cursor: pointer;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
position: relative;
padding: 10px 15px;
height: 40px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 40px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
position: relative;
z-index: 1;
list-style: none;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
font-size: 12px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.toggle-all,
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
}
@media (max-width: 430px) {
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}
}
}
src/views/dashboard/admin/components/TodoList/index.vue 0 → 100644
<template>
<section class="todoapp">
<!-- header -->
<header class="header">
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
</header>
<!-- main section -->
<section v-show="todos.length" class="main">
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
<label for="toggle-all" />
<ul class="todo-list">
<todo
v-for="(todo, index) in filteredTodos"
:key="index"
:todo="todo"
@toggleTodo="toggleTodo"
@editTodo="editTodo"
@deleteTodo="deleteTodo"
/>
</ul>
</section>
<!-- footer -->
<footer v-show="todos.length" class="footer">
<span class="todo-count">
<strong>{{ remaining }}</strong>
{{ remaining | pluralize('item') }} left
</span>
<ul class="filters">
<li v-for="(val, key) in filters" :key="key">
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
</li>
</ul>
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
Clear completed
</button> -->
</footer>
</section>
</template>
<script>
import Todo from './Todo.vue'
const STORAGE_KEY = 'todos'
const filters = {
all: todos => todos,
active: todos => todos.filter(todo => !todo.done),
completed: todos => todos.filter(todo => todo.done)
}
const defalutList = [
{ text: 'star this repository', done: false },
{ text: 'fork this repository', done: false },
{ text: 'follow author', done: false },
{ text: 'vue-element-admin', done: true },
{ text: 'vue', done: true },
{ text: 'element-ui', done: true },
{ text: 'axios', done: true },
{ text: 'webpack', done: true }
]
export default {
components: { Todo },
filters: {
pluralize: (n, w) => n === 1 ? w : w + 's',
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
},
data() {
return {
visibility: 'all',
filters,
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
todos: defalutList
}
},
computed: {
allChecked() {
return this.todos.every(todo => todo.done)
},
filteredTodos() {
return filters[this.visibility](this.todos)
},
remaining() {
return this.todos.filter(todo => !todo.done).length
}
},
methods: {
setLocalStorage() {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
},
addTodo(e) {
const text = e.target.value
if (text.trim()) {
this.todos.push({
text,
done: false
})
this.setLocalStorage()
}
e.target.value = ''
},
toggleTodo(val) {
val.done = !val.done
this.setLocalStorage()
},
deleteTodo(todo) {
this.todos.splice(this.todos.indexOf(todo), 1)
this.setLocalStorage()
},
editTodo({ todo, value }) {
todo.text = value
this.setLocalStorage()
},
clearCompleted() {
this.todos = this.todos.filter(todo => !todo.done)
this.setLocalStorage()
},
toggleAll({ done }) {
this.todos.forEach(todo => {
todo.done = done
this.setLocalStorage()
})
}
}
}
</script>
<style lang="scss">
@import './index.scss';
</style>
src/views/dashboard/admin/components/TransactionTable.vue 0 → 100644
<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>
src/views/dashboard/admin/components/Trend/index.vue 0 → 100644
<template>
<div class="chart-trend">
<slot name="term" />
<span>{{ rate }}%</span>
<span :class="[flag]">
<i :class="'el-icon-caret-' + flag" />
</span>
</div>
</template>
<script>
export default {
name: 'Trend',
props: {
rate: {
type: String,
default: '',
required: true
},
flag: {
type: String,
default: '',
required: true
}
}
}
</script>
<style lang="scss" scoped>
.chart-trend {
display: inline-block;
font-size: 14px;
line-height: 22px;
.trend-icon {
font-size: 12px;
}
}
.top,
.bottom {
margin-left: 4px;
position: relative;
top: 1px;
width: 15px;
display: inline-block;
i {
font-size: 12px;
transform: scale(0.83);
}
}
.top {
i{
color: #f5222d!important;
}
}
.bottom {
top: -1px;
i{
color: #52c41a!important;
}
}
</style>
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.workOrderCount.all">
<line-chart :statistics-data="dashboardValue.statisticsData" /> <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
</el-row> <i class="el-icon-warning-outline" />
</el-tooltip>
<el-row :gutter="32"> </chart-card>
<el-col :xs="24" :sm="24" :lg="8"> </el-col>
<div class="chart-wrapper"> <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
<TicketSubmissionRanking :submit-ranking-data="dashboardValue.submitRankingData" /> <chart-card title="我创建的" :total="dashboardValue.workOrderCount.my_create">
</div> <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.workOrderCount.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>
<el-col :xs="24" :sm="24" :lg="16"> <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
<div class="chart-wrapper"> <chart-card title="我的待办" :total="dashboardValue.workOrderCount.upcoming">
<processOrderList :process-order-list="dashboardValue.processOrderList" /> <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
</div> <i class="el-icon-warning-outline" />
</el-tooltip>
</chart-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 { initData } from '@/api/dashboard'
import TicketSubmissionRanking from './components/TicketSubmissionRanking'
import processOrderList from './components/processOrderList'
// import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
// import ProcessingTicketRanking from './components/ProcessingTicketRanking'
export default { export default {
name: 'DashboardAdmin', name: 'DashboardAdmin',
components: { components: {
PanelGroup, ChartCard
LineChart,
TicketSubmissionRanking,
processOrderList
// TodoWorkOrderRanking,
// ProcessingTicketRanking
}, },
// eslint-disable-next-line vue/require-prop-types
props: ['dashboardValue'],
data() { data() {
return { return {
dashboardValue: {
workOrderCount: {}
}
} }
},
created() {
initData().then(response => {
this.dashboardValue = response.data
})
} }
} }
</script> </script>
<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,6 +76,12 @@ export default { ...@@ -76,6 +76,12 @@ 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;
......
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>
src/views/dashboard_bak/admin/components/LineChart.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: '350px'
},
autoResize: {
type: Boolean,
default: true
},
statisticsData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
statisticsData: {
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.statisticsData)
},
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({
title: {
text: '最近7天工单统计',
textStyle: {
fontSize: 15
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['工单总数', '待办工单', '已完成工单']
},
grid: {
left: '25',
right: '45',
bottom: '20',
top: '50',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.statisticsData.datetime
},
yAxis: {
type: 'value'
},
series: [
{
name: '工单总数',
type: 'line',
data: this.statisticsData.total
},
{
name: '待办工单',
type: 'line',
data: this.statisticsData.processing
},
{
name: '已完成工单',
type: 'line',
data: this.statisticsData.overs
}
]
})
}
}
}
</script>
src/views/dashboard_bak/admin/components/PanelGroup.vue 0 → 100644
<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_bak/admin/components/PieChart.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({
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_bak/admin/components/mixins/resize.js 0 → 100644
import { debounce } from '@/utils'
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
}
},
mounted() {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
beforeDestroy() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
// to fixed bug when cached by keep-alive
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
activated() {
this.$_initResizeEvent()
this.$_initSidebarResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
this.$_destroySidebarResizeEvent()
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler)
},
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler()
}
},
$_initSidebarResizeEvent() {
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
},
$_destroySidebarResizeEvent() {
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
}
}
}
src/views/dashboard_bak/admin/index.vue 0 → 100644
<template>
<div class="dashboard-editor-container">
<panel-group :panel-group-value="dashboardValue.panelGroup" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :statistics-data="dashboardValue.statisticsData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<TicketSubmissionRanking :submit-ranking-data="dashboardValue.submitRankingData" />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="16">
<div class="chart-wrapper">
<processOrderList :process-order-list="dashboardValue.processOrderList" />
</div>
</el-col>
<!-- <el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<ProcessingTicketRanking />
</div>
</el-col> -->
</el-row>
</div>
</template>
<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import TicketSubmissionRanking from './components/TicketSubmissionRanking'
import processOrderList from './components/processOrderList'
// import TodoWorkOrderRanking from './components/TodoWorkOrderRanking'
// import ProcessingTicketRanking from './components/ProcessingTicketRanking'
export default {
name: 'DashboardAdmin',
components: {
PanelGroup,
LineChart,
TicketSubmissionRanking,
processOrderList
// TodoWorkOrderRanking,
// ProcessingTicketRanking
},
// eslint-disable-next-line vue/require-prop-types
props: ['dashboardValue'],
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding-top: 32px;
padding-left: 32px;
padding-right: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0px;
border: 0;
right: 0;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>
src/views/dashboard_bak/index.vue 0 → 100644
<template>
<div class="dashboard-container">
<adminDashboard v-if="dashboardStatus" :dashboard-value="dashboardValue" />
</div>
</template>
<script>
import adminDashboard from './admin'
import { initData } from '@/api/dashboard'
export default {
name: 'Dashboard',
components: { adminDashboard },
data() {
return {
dashboardStatus: false
}
},
created() {
initData().then(response => {
this.dashboardValue = response.data
this.dashboardStatus = true
})
}
}
</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 sign in to comment