497 lines
13 KiB
Vue
497 lines
13 KiB
Vue
<template>
|
|
<div class="dashboard-editor-container">
|
|
|
|
<template >
|
|
<div>欢迎使用机动车管理系统</div>
|
|
<!-- <div style="width: 100%;display: flex; align-items: center ">-->
|
|
<!-- <div class="haha">-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<el-row :gutter="20" class="panel-group">
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" >
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="money" class-name="card-panel-icon"/>
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
检测进行中
|
|
</div>
|
|
<div style="font-size: 24px">{{threenum.workingNum}}</div>
|
|
<!-- <count-to :start-val="0" :end-val="threenum.workingNum" :duration="1600" class="card-panel-num"/>-->
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" @click="goTab('order')">
|
|
<div class="card-panel-icon-wrapper icon-shopping">
|
|
<svg-icon icon-class="money" class-name="card-panel-icon"/>
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
今日成交金额
|
|
</div>
|
|
<div style="font-size: 24px">{{threenum.todayOrderAmount}}</div>
|
|
<!-- <count-to :start-val="0" :end-val="threenum.todayOrderAmount" :duration="1600" class="card-panel-num"/>-->
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
|
<div class="card-panel-icon-wrapper icon-money">
|
|
<svg-icon icon-class="money" class-name="card-panel-icon"/>
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
今日订单数量
|
|
</div>
|
|
<div style="font-size: 24px">{{threenum.todayOrderNum}}</div>
|
|
<!-- <count-to :start-val="0" :end-val="threenum.todayOrderNum" :decimals="2" :duration="1600" class="card-panel-num"/>-->
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" @click="goTab('user')">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="money" class-name="card-panel-icon"/>
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
当日完成
|
|
</div>
|
|
<div style="font-size: 24px">{{threenum.workedNum}}</div>
|
|
<!-- <count-to :start-val="0" :end-val="threenum.workedNum" :duration="1600" class="card-panel-num"/>-->
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" @click="goTab('user')">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="money" class-name="card-panel-icon"/>
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
总金额
|
|
</div>
|
|
<div style="font-size: 24px">{{threenum.orderAmount}}</div>
|
|
<!-- <count-to :start-val="0" :end-val="threenum.orderAmount" :duration="1600" class="card-panel-num"/>-->
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" @click="goTab('user')">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="money" class-name="card-panel-icon"/>
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">
|
|
总订单
|
|
</div>
|
|
<div style="font-size: 24px">{{threenum.orderNum}}</div>
|
|
<!-- <count-to :start-val="0" :end-val="threenum.orderNum" :duration="1600" class="card-panel-num"/>-->
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div style="width: 100%;display: flex; align-items: center ">
|
|
<!-- 三个柱状图-->
|
|
<div style="width: 33%">
|
|
<div style="display: flex;width: 100%; justify-content: space-between">
|
|
<span>金额统计</span>
|
|
<div class="lan-you">
|
|
|
|
<div class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex(index,item.unit)"> {{item.text}}</div>
|
|
</div>
|
|
</div>
|
|
<qiunVueUcharts
|
|
:ontouch="ontouch"
|
|
type="column"
|
|
:opts="dopts"
|
|
:chartData="chartData1"
|
|
/>
|
|
</div>
|
|
<div style="width: 33%">
|
|
<div style="display: flex;width: 100%; justify-content: space-between">
|
|
<span>数量统计</span>
|
|
<div class="lan-you">
|
|
|
|
<div class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex1(index,item.unit)"> {{item.text}}</div>
|
|
</div>
|
|
</div>
|
|
<qiunVueUcharts
|
|
:ontouch="ontouch"
|
|
type="column"
|
|
:opts="dopts"
|
|
:chartData="chartData2"
|
|
/>
|
|
</div>
|
|
<div style="width: 33%">
|
|
<div style="display: flex;width: 100%; justify-content: space-between">
|
|
<span>检测合格率</span>
|
|
<div class="lan-you">
|
|
|
|
<div class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex2(index,item.unit)"> {{item.text}}</div>
|
|
</div>
|
|
</div>
|
|
<qiunVueUcharts
|
|
:ontouch="ontouch"
|
|
type="column"
|
|
:opts="dopts"
|
|
:chartData="chartData3"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import qiunVueUcharts from '../../../node_modules/@qiun/vue-ucharts'
|
|
import {statisticsTop,chartInfoAmount,chartInfoNum,chartInfoRatio,shopInfo,} from "./api/index";
|
|
// import CountTo from 'vue-count-to'
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
qiunVueUcharts,
|
|
// CountTo
|
|
},
|
|
data() {
|
|
return {
|
|
dopts: {
|
|
fontSize:12,
|
|
color: ["#0D2E8D","#3CBC6F","#FF571A","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [15,15,0,5],
|
|
touchMoveLimit: 24,
|
|
enableScroll: true,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
scrollShow: true,
|
|
itemCount: 3,
|
|
fontSize:10,
|
|
},
|
|
yAxis: {
|
|
data: [
|
|
{
|
|
min: 0
|
|
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: 35,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08
|
|
}
|
|
}
|
|
},
|
|
ontouch:true,
|
|
chartData1:{},
|
|
chartData2:{},
|
|
chartData3:{},
|
|
qhindex:1,
|
|
qhindex1:1,
|
|
qhindex2:1,
|
|
zilist:[
|
|
{text:'日',unit:'day'},
|
|
{text:'周',unit:'week'},
|
|
{text:'月',unit:'month'},
|
|
{text:'年',unit:'year'},
|
|
|
|
],
|
|
threenum:{},
|
|
sum:1,
|
|
partnerId:19,
|
|
unit:'week',
|
|
unit1:'week',
|
|
unit2:'week',
|
|
countPass:2,
|
|
countNoPass:3,
|
|
xData: ["1", "2", "3", "4","5", "6", "7", "8", "9", "10"], //横坐标
|
|
yData: [23, 24, 18, 25, 27, 28, 25], //数据
|
|
xData1: [ ], //横坐标
|
|
yData1: [23, 24, 18, 25, 27, 28, 25], //数据
|
|
xData2: [ ], //横坐标
|
|
yData2: [23, 24, 18, 25, 27, 28, 25], //数据
|
|
myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getlist()
|
|
this.initEcharts();
|
|
this.initEcharts1();
|
|
this.initEcharts2();
|
|
},
|
|
created() {
|
|
this.getshopInfo()
|
|
|
|
},
|
|
|
|
methods: {
|
|
getshopInfo(){
|
|
shopInfo().then(res=>{
|
|
console.log('p',res)
|
|
})
|
|
},
|
|
getlist(){
|
|
statisticsTop(this.partnerId).then(res =>{
|
|
|
|
let nums = {
|
|
orderAmount : Math.trunc(res.data.orderAmount / 100) ,
|
|
orderNum : res.data.orderNum ,
|
|
todayOrderAmount : res.data.todayOrderAmount / 100,
|
|
todayOrderNum : res.data.todayOrderNum ,
|
|
workedNum : res.data.workedNum ,
|
|
workingNum : res.data.workingNum
|
|
|
|
}
|
|
this.threenum = nums
|
|
})
|
|
},
|
|
initEcharts() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit,
|
|
}
|
|
chartInfoAmount(data).then(res =>{
|
|
let rex = res.data
|
|
this.chartData1 = JSON.parse(JSON.stringify(rex));
|
|
console.log('rex',this.chartData1)
|
|
})
|
|
|
|
},
|
|
gbindex(index,unit){
|
|
this.qhindex = index
|
|
this.unit = unit
|
|
this.initEcharts()
|
|
},
|
|
initEcharts1() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit,
|
|
}
|
|
chartInfoNum(data).then(res =>{
|
|
console.log('柱状图2',res)
|
|
let rex = res.data
|
|
this.chartData2 = JSON.parse(JSON.stringify(rex));
|
|
console.log('rex',this.chartData1)
|
|
|
|
})
|
|
|
|
},
|
|
gbindex1(index,unit){
|
|
this.qhindex1 = index
|
|
this.unit1 = unit
|
|
this.initEcharts1()
|
|
},
|
|
initEcharts2() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit,
|
|
}
|
|
chartInfoRatio(data).then(res =>{
|
|
let rex = res.data
|
|
this.chartData3 = JSON.parse(JSON.stringify(rex));
|
|
console.log('rex',this.chartData1)
|
|
|
|
})
|
|
|
|
},
|
|
gbindex2(index,unit){
|
|
this.qhindex2 = index
|
|
this.unit2 = unit
|
|
this.initEcharts2()
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.charts-box {
|
|
width: 500px;
|
|
height: 300px;
|
|
}
|
|
.lan-you{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.yi{
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
.er{
|
|
width: 25px;
|
|
height: 25px;
|
|
background: #0D2E8D;
|
|
border-radius: 3px ;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white !important;
|
|
}
|
|
.dashboard-editor-container {
|
|
padding: 32px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
height: 100vh;
|
|
width: 100%;
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
.chart-title{
|
|
padding:10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin:0 auto;
|
|
line-height: 18px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
.haha{
|
|
|
|
height: 108px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: #666;
|
|
background: #fff;
|
|
-webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
|
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
|
border-color: rgba(0, 0, 0, 0.05);
|
|
|
|
}
|
|
.panel-group {
|
|
margin-top: 18px;
|
|
|
|
.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>
|