|
@@ -1,25 +1,312 @@
|
|
|
<template>
|
|
|
- <div id="index">count</div>
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-col :span="8">
|
|
|
+ <i class="icon_1 el-icon-box"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="title">
|
|
|
+ <p><span>24</span>(单)</p>
|
|
|
+ <p>本月未发货数量</p>
|
|
|
+ </el-col>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-col :span="8">
|
|
|
+ <i class="icon_2 el-icon-truck"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="title">
|
|
|
+ <p><span>24</span>(单)</p>
|
|
|
+ <p>本月已发货数量</p>
|
|
|
+ </el-col>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-col :span="8">
|
|
|
+ <i class="icon_3 el-icon-sell"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="title">
|
|
|
+ <p><span>24</span>(单)</p>
|
|
|
+ <p>本月退款数量</p>
|
|
|
+ </el-col>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <el-col :span="8">
|
|
|
+ <i class="icon_4 el-icon-sell"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="title">
|
|
|
+ <p><span>24</span>(单)</p>
|
|
|
+ <p>本月退货数量</p>
|
|
|
+ </el-col>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-card class="box-card"><card-1></card-1></el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-card class="box-card"><card-2></card-2></el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-card class="box-card"><card-3></card-3> </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-card class="box-card"><card-4></card-4></el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import * as echarts from 'echarts';
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
export default {
|
|
|
name: 'index',
|
|
|
props: {},
|
|
|
- components: {},
|
|
|
+ components: {
|
|
|
+ card1: () => import('./parts/card-1.vue'),
|
|
|
+ card2: () => import('./parts/card-2.vue'),
|
|
|
+ card3: () => import('./parts/card-3.vue'),
|
|
|
+ card4: () => import('./parts/card-4.vue'),
|
|
|
+ },
|
|
|
data: function () {
|
|
|
return {};
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.getEchartData_one();
|
|
|
+ this.getEchartData_two();
|
|
|
+ this.getEchartData_thr();
|
|
|
+ this.getEchartData_fou();
|
|
|
+ },
|
|
|
created() {},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ getEchartData_one(data) {
|
|
|
+ var chartDom = document.getElementById('card_one');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: '收益统计',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
+ type: 'line',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ getEchartData_two() {
|
|
|
+ var chartDom = document.getElementById('card_two');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: '收益统计',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ type: 'bar',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ getEchartData_thr() {
|
|
|
+ var chartDom = document.getElementById('card_thr');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: '销量占比',
|
|
|
+ subtext: 'Fake Data',
|
|
|
+ left: 'center',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'left',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '50%',
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: 'Search Engine' },
|
|
|
+ { value: 735, name: 'Direct' },
|
|
|
+ { value: 580, name: 'Email' },
|
|
|
+ { value: 484, name: 'Union Ads' },
|
|
|
+ { value: 300, name: 'Video Ads' },
|
|
|
+ ],
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ getEchartData_fou() {
|
|
|
+ var chartDom = document.getElementById('card_fou');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: '商品销量对比',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {},
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['商品一', '商品二', '商品三', '商品四', '商品五', '商品六'],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '本月',
|
|
|
+ type: 'bar',
|
|
|
+ data: [122, 45, 78, 233, 56, 75],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '上月',
|
|
|
+ type: 'bar',
|
|
|
+ data: [234, 134, 54, 27, 145, 87],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ test: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+.two {
|
|
|
+ margin: 5px;
|
|
|
+ .title {
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ span:first-child {
|
|
|
+ color: aquamarine;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-table {
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+ .el-col-5 {
|
|
|
+ width: 22.5%;
|
|
|
+ }
|
|
|
+ .el-col {
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ .box-card {
|
|
|
+ margin: 5px;
|
|
|
+ padding: 5px 0 20px 0;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ margin-bottom: 18px;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ font-size: 36px;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .icon_1 {
|
|
|
+ font-size: 36px;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: aquamarine;
|
|
|
+ }
|
|
|
+ .icon_2 {
|
|
|
+ font-size: 36px;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: aqua;
|
|
|
+ }
|
|
|
+ .icon_3 {
|
|
|
+ font-size: 36px;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgb(253, 184, 135);
|
|
|
+ }
|
|
|
+ .icon_4 {
|
|
|
+ font-size: 36px;
|
|
|
+ padding: 10px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgb(255, 244, 148);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|