Skip to content

Chatopera OpenSource / ferry_web

Go to a project
Commit 0b06ddd5 by Mr. Lan
Options

添加统计功能。

parent 16d7295e
Inline Side-by-side
Showing with 855 additions and 16 deletions
package.json
...@@ -36,10 +36,9 @@ ...@@ -36,10 +36,9 @@
"management-system" "management-system"
], ],
"dependencies": { "dependencies": {
"@antv/g": "^3.4.10", "@antv/g6": "3.1.10",
"@antv/g6": "^3.5.10",
"@antv/g6-editor": "^1.2.0", "@antv/g6-editor": "^1.2.0",
"@antv/util": "^1.3.1", "@antv/util": "1.3.1",
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"axios": "0.18.1", "axios": "0.18.1",
...@@ -48,7 +47,7 @@ ...@@ -48,7 +47,7 @@
"core-js": "^2.6.11", "core-js": "^2.6.11",
"driver.js": "0.9.5", "driver.js": "0.9.5",
"dropzone": "5.5.1", "dropzone": "5.5.1",
"echarts": "4.2.1", "echarts": "^4.8.0",
"element-ui": "2.11.1", "element-ui": "2.11.1",
"file-saver": "2.0.1", "file-saver": "2.0.1",
"form-making": "^1.2.8", "form-making": "^1.2.8",
......
src/api/dashboard.js 0 → 100644
import request from '@/utils/request'
export function initData(params) {
return request({
url: '/api/v1/dashboard',
method: 'get',
params
})
}
src/components/GithubCorner/index.vue 0 → 100644
<template>
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
<svg
width="80"
height="80"
viewBox="0 0 250 250"
style="fill:#40c9c6; color:#fff;"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px;"
class="octo-arm"
/>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
/>
</svg>
</a>
</template>
<style scoped>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
src/icons/svg/chaoqigongdan.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#f4516c" d="M144 164.37333333h176v65.92h384v-65.92h176V454.4h53.33333333V111.04H704V38.29333333H320v72.74666667H90.66666667v874.66666667h318.82666666v-53.33333334H144v-768z m229.33333333-72.74666666h277.33333334v85.33333333H373.33333333v-85.33333333z m-101.33333333 435.09333333h160v53.33333333H272v-53.33333333z m480-107.41333333H272v-53.33333334h480v53.33333334z m-65.38666667 75.73333333c-135.46666667 0-245.33333333 109.86666667-245.33333333 245.33333333s109.86666667 245.33333333 245.33333333 245.33333334 245.33333333-109.86666667 245.33333334-245.33333334-109.86666667-245.33333333-245.33333334-245.33333333zM822.4 876.16c-36.26666667 36.26666667-84.48 56.21333333-135.78666667 56.21333333s-99.52-19.94666667-135.78666666-56.21333333-56.21333333-84.48-56.21333334-135.78666667 19.94666667-99.52 56.21333334-135.78666666c26.56-26.56 59.41333333-44.26666667 95.25333333-51.94666667V784h168.53333333v-53.33333333h-115.2V548.8c46.50666667 2.98666667 89.70666667 22.61333333 122.98666667 55.78666667 36.26666667 36.26666667 56.21333333 84.48 56.21333333 135.78666666S858.66666667 839.89333333 822.4 876.16z" /></svg>
\ No newline at end of file
src/icons/svg/gongdanshuju.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="193.94px" viewBox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M280.060178 909.878639H140.033969c-49.009173 0-70.013105-31.622586-70.013105-70.013104V140.026209c0-62.13663 12.018916-70.013105 70.013105-70.013104h560.104837c54.143468 0 71.004957 18.145063 71.004957 70.013104v93.700872c0 48.892485 70.013105 55.193664 70.013105 0V140.026209c0-103.269329-33.372913-140.026209-141.193094-140.026209H140.033969C71.362782 0 0.00776 8.401573 0.00776 136.933964v725.68583a135.708735 135.708735 0 0 0 5.834425 40.840977A110.212296 110.212296 0 0 0 113.604022 980.183465c85.649365 0.350066 120.42254 0 166.339468 0s42.824682-70.304826 0.116688-70.304826z" fill="#467CFD" /><path d="M210.338795 209.514216c-50.292747 0-52.509828 70.946613 0 70.946612h420.078628c48.134009 0 55.777107-70.888268 0-70.946612zM323.118238 419.436841H210.338795c-50.292747 0-52.509828 70.946613 0 70.946613h112.779443c48.134009 0 55.777107-70.888268 0-70.946613z" fill="#467CFD" /><path d="M771.37714 382.213207l0.81682 287.228762H1056.038755a282.444533 282.444533 0 0 0-277.60196-287.228762z" fill="#8BAEF7" /><path d="M718.925656 438.982166a304.031907 304.031907 0 0 0-301.406415 294.871859 290.145975 290.145975 0 0 0 290.145974 290.145975 303.915219 303.915219 0 0 0 294.871859-301.348071h-283.611418z" fill="#467CFD" /></svg>
\ No newline at end of file
src/icons/svg/wodegongdan.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#34bfa3" d="M496.53333333 985.70666667c27.41333333-128.21333333 128.32-223.36 248.64-223.36S966.4 857.49333333 993.81333333 985.70666667h-54.82666666c-25.38666667-98.34666667-102.72-170.02666667-193.92-170.02666667s-168.53333333 71.68-193.92 170.02666667h-54.61333334z m94.08-378.02666667c0-85.44 69.22666667-154.66666667 154.66666667-154.66666667s154.66666667 69.22666667 154.66666667 154.66666667-69.22666667 154.66666667-154.66666667 154.66666667-154.66666667-69.22666667-154.66666667-154.66666667z m53.33333334 0c0 55.89333333 45.44 101.33333333 101.33333333 101.33333333s101.33333333-45.44 101.33333333-101.33333333-45.44-101.33333333-101.33333333-101.33333333-101.33333333 45.54666667-101.33333333 101.33333333zM115.62666667 932.37333333h276.16v53.33333334H62.29333333v-874.66666667h229.33333334V38.29333333h384v72.74666667h229.33333333v293.86666667h-53.33333333V164.37333333h-176v65.92h-384v-65.92h-176v768z m229.33333333-755.41333333h277.33333333v-85.33333333h-277.33333333v85.33333333z m-101.33333333 403.09333333h271.68v-53.33333333H243.62666667v53.33333333z m0-160.74666666h480v-53.33333334h-480v53.33333334z" /></svg>
\ No newline at end of file
src/icons/svg/yonghu.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#40c9c6" d="M722.995 541.05c83.58-43.31 140.734-130.544 140.734-231.177 0-143.755-116.537-260.28-260.28-260.28-143.75 0-260.286 116.53-260.286 260.28 0 99.425 55.772 185.8 137.718 229.632-174.065 52.06-303.135 214.753-298.814 399.728 0 36.46 49.29 31.447 49.29 1.808 0-204.831 166.052-370.883 370.888-370.883 204.83 0 370.883 166.057 370.883 370.883 0 24.852 43.269 21.1 43.269-1.808 4.08-183.219-122.122-344.448-293.402-398.182zM599.24 522.06c-5.028 0-10.015 0.206-15.007 0.39-108.754-9.15-194.181-100.26-194.181-211.38 0-117.191 95.001-212.187 212.193-212.187 117.192 0 217.487 95.001 217.487 212.188 0 111.641-91.033 203.08-200.975 211.497a411.674 411.674 0 0 0-19.517-0.507zM336.43 552.05c0.338 0 0.67 0.025 1.004 0.025 30.56 0 31.221-49.643-1.004-49.643-0.824 0-1.638-0.046-2.463-0.057l-0.046-0.937c-4.29 0-8.53 0.18-12.764 0.343-91.105-7.214-167.004-78.284-167.004-170.741 0-97.587 84.536-176.691 182.277-176.691 32.277 0 23.772-41.048-9.595-41.048-119.9 0-217.093 97.04-217.093 216.735 0 79.55 47.631 151.383 114.76 190.659C91.397 569.42 3.676 704.722 7.168 854.103c0 30.372 46.403 26.189 46.403 1.505 0-170.562 112.015-303.534 282.86-303.534v-0.025z" /></svg>
\ No newline at end of file
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/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
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
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.chartData)
},
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['expected', 'actual']
},
series: [{
name: 'expected', itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
},
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'
}
}
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
})
}
}
}
</script>
src/views/dashboard/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="102400" :duration="2600" 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="81212" :duration="3000" 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="9280" :duration="3200" 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="13600" :duration="3600" 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: ['panelGroup'],
created() {
console.log(this.panelGroup)
}
}
</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 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/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/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/admin/index.vue 0 → 100644
<template>
<div class="dashboard-editor-container">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</template>
<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]
}
}
export default {
name: 'DashboardAdmin',
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
</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/index.vue
<template> <template>
<div class="dashboard-container" style="text-align: center"> <div class="dashboard-container">
<h1 style="margin-top: 60px; font-size: 38px">欢迎访问本系统</h1> <adminDashboard v-if="dashboardStatus" :panel-group="panelGroup" />
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import adminDashboard from './admin'
import { initData } from '@/api/dashboard'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { adminDashboard },
data() { data() {
return { return {
dashboardStatus: false
} }
}, },
computed: {
...mapGetters([
'roles'
])
},
created() { created() {
// if (!this.roles.includes('admin')) { initData().then(response => {
// this.currentRole = 'editorDashboard' this.panelGroup = response.data
// } console.log(this.panelGroup)
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 sign in to comment