master
刘翔宇-旅管家
3 years ago
parent
b2c8c8ed9e
commit
5b9c934b29
@ -1,24 +1,148 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
|
||||
<panel-group :totaldata="totaldata" />
|
||||
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="24">
|
||||
<div class="chart-wrapper">
|
||||
<div class="chart-title">
|
||||
<router-link to="/toolbox/exception">客户与订单</router-link>
|
||||
</div>
|
||||
<line-chart :chartData="lineArr" />
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
// import BarChart from './components/BarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import LineChart from './components/LineChart'
|
||||
|
||||
import {
|
||||
getcustomerData,
|
||||
getorderData,
|
||||
getcustomeritemData,
|
||||
getorderitemData
|
||||
} from "../../api/dashboard.js"
|
||||
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
PanelGroup,
|
||||
PieChart,
|
||||
LineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totaldata: {
|
||||
customer: {},
|
||||
order: {}
|
||||
},
|
||||
lineArr: {
|
||||
xArr: [],
|
||||
legendArr: ["客户", "订单", "成交额"],
|
||||
series: [{
|
||||
name: '客户',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '订单',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: '成交额',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created: function() {},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.load();
|
||||
this.loadItemData();
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
async load() {
|
||||
var that = this;
|
||||
await getcustomerData().then(res => {
|
||||
that.totaldata.customer = res;
|
||||
})
|
||||
|
||||
await getorderData().then(res => {
|
||||
that.totaldata.order = res;
|
||||
})
|
||||
},
|
||||
loadItemData() {
|
||||
var that = this;
|
||||
|
||||
getcustomeritemData().then((res) => {
|
||||
|
||||
for (var m of res) {
|
||||
that.lineArr.xArr.push(m.date.split('-')[1] + "-" + m.date.split('-')[2]);
|
||||
that.lineArr.series[0].data.push(m.customer_total);
|
||||
}
|
||||
}).catch((res) => {})
|
||||
|
||||
</div>
|
||||
</template>
|
||||
getorderitemData().then((res) => {
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
}
|
||||
for (var m of res) {
|
||||
that.lineArr.series[1].data.push(m.order_total);
|
||||
that.lineArr.series[2].data.push(m.paid_money_total);
|
||||
|
||||
}
|
||||
}).catch((res) => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 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;
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue