首页图表

src/benyun/utils/auth.ts

@@ -6,7 +6,7 @@ const ExpiresInKey = "AdminOMS-Expires-In";
 
 export function getToken() {
   if (process.env.NODE_ENV === "development") {
-    return "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImRhNjY3OTg5LWYzNDktNDE2Mi05ZDM4LWJiYmZhOGYyNDc1OCIsInVzZXJuYW1lIjoiYWRtaW4ifQ.w4a8TOYXMLWRDJBNRotbdmmyj_CHoiBLhvLg9e9hKl05FDqfrXh-yRZOOys5bHrE2C8ySmbLAK9b_seRtsSZXQ";
+    return "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijc0ZWMwNGI1LTcxNGUtNGVlMS1iYTIzLWZmMGI5NDUwODkzYSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.eKUIVxn9f-boOtRcZ9kX_4QtRay4h3gwQpcaHTBJF9kYidmxlp66gYF8GgeGnoCNfFV848eRDJ0TbrhThIFRYA";
   } else {
     return Cookies.get(TokenKey);
   }

src/views/audit/store/components/liveView.vue

@@ -30,10 +30,10 @@
             </el-row>
             <p>OMS登记环节</p>
             <by-table :propConfig="tableConfig1" ref="table1" />
-            <p>WMS仓储环节</p>
+            <p>待WMS(极智嘉)响应</p>
             <by-table :propConfig="tableConfig1" ref="table2" />
-            <p>WMS物流运输环节</p>
-            <by-table :propConfig="tableConfig1" ref="table3" />
+            <!-- <p>WMS物流运输环节</p>
+            <by-table :propConfig="tableConfig1" ref="table3" /> -->
         </div>
     </el-drawer>
 </template>
@@ -67,7 +67,7 @@ export default class LiveView extends Vue {
             field: 'operator'
         }, {
             title: '时间',
-            field: 'createTime',
+            field: 'time',
         }]
     }
     setShow(v: boolean) {
@@ -80,7 +80,7 @@ export default class LiveView extends Vue {
         if (res.code === 200) {
             this.liveData = res.data;
             (this.$refs.table2 as any).setValue(this.liveData.warehousingList);
-            (this.$refs.table3 as any).setValue(this.liveData.logisticsList);
+            // (this.$refs.table3 as any).setValue(this.liveData.logisticsList);
             (this.$refs.table1 as any).setValue([
                 { matter: '创建商品', source: 'OMS', operator: '管理员', time: '2025-07-06 10:01:22' },
                 { matter: '录入商品编号', source: 'OMS', operator: '管理员', time: '2025-07-06 10:05:43' },

src/views/components/businessSale.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="chart-box">
+        <div class="title-top">
+            <span>toB 区域销量</span>
+            <el-select v-model="areatValue" size="mini" class="select" placeholder="请选择" @change="areaChange">
+                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                    :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <div class="chart" :id="id"></div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import * as echarts from 'echarts';
+type EChartsOption = echarts.EChartsOption;
+
+@Component
+export default class Pie01 extends Vue {
+    id = this.randomString();
+    areatValue = 1
+    options: Array<any> = [{
+        label: '省级',
+        value: 1
+    }, {
+        label: '市级',
+        value: 2
+    }]
+    mounted() {
+        this.getData()
+    }
+
+    randomString() {
+        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let result = '';
+        for (let i = 10; i > 0; --i)
+            result += str[Math.floor(Math.random() * str.length)];
+        return result;
+    }
+    areaChange() {
+        this.getData()
+    }
+    initChart(data: Array<any>) {
+        let chartDom: any = document.getElementById(this.id);
+        let myChart = echarts.init(chartDom);
+        let option: EChartsOption;
+        let _data: Array<any> = []
+        for (const item of data) {
+            _data.push({
+                name: item.area,
+                value: item.total
+            })
+        }
+        option = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                // orient: 'vertical',
+                show: true,
+                bottom: 0,
+                type: 'scroll',
+                orient: 'horizontal',
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: '50%',
+                    data: _data,
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    },
+                    label: {
+                        formatter: '{b}: \n{d}' + '%'
+                    }
+                }
+            ]
+        };
+
+        option && myChart.setOption(option);
+    }
+    getData() {
+        (this as any).$request({
+            url: '/omsOrder/orderReport/businessSale',
+            method: 'GET',
+            params: {
+                region: this.areatValue
+            }
+        }).then((res: any) => {
+            if (res.data) {
+                this.initChart(res.data)
+            }
+        }).catch(() => { })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+    height: 100%;
+    width: 100%;
+
+    .title-top {
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 100%;
+
+        >span {
+            font-size: 16px;
+            font-weight: 700;
+        }
+
+        .select {
+            width: 100px;
+            position: absolute;
+            top: 6px;
+            right: 0;
+        }
+    }
+}
+
+.chart {
+    height: calc(100% - 40px);
+    width: 100%;
+}
+</style>

src/views/components/line01.vue

@@ -15,44 +15,44 @@ type EChartsOption = echarts.EChartsOption;
 
 @Component
 export default class Line01 extends Vue {
-  id=this.randomString();
+  id = this.randomString();
 
-  mounted(){
+  mounted() {
     this.getData()
   }
 
-  randomString(){
+  randomString() {
     const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
     let result = '';
     for (let i = 10; i > 0; --i)
       result += str[Math.floor(Math.random() * str.length)];
     return result;
   }
-  initChart(list:Array<any>){
-    if(!list) return
-    let chartDom:any = document.getElementById(this.id);
+  initChart(list: Array<any>) {
+    if (!list) return
+    let chartDom: any = document.getElementById(this.id);
     let myChart = echarts.init(chartDom);
     let option: EChartsOption;
-    let dataX:Array<any>=this.getDaysList()
-    let dataY:Array<any>=[]
-    for(const item of list) {
-      let obj:any={
+    let dataX: Array<any> = this.getDaysList()
+    let dataY: Array<any> = []
+    for (const item of list) {
+      let obj: any = {
         name: item[0].shop_name,
         type: 'line',
         smooth: true,
         data: []
       }
-      if(item){
-        for(const arr of dataX) {
+      if (item) {
+        for (const arr of dataX) {
           let isAdd = false
-          for(const item2 of item){
-            if(arr == item2.day) {
+          for (const item2 of item) {
+            if (arr == item2.day) {
               obj.data.push(item2.total)
               isAdd = true
               break
             }
           }
-          if(!isAdd) {
+          if (!isAdd) {
             obj.data.push(0)
           }
         }
@@ -63,9 +63,9 @@ export default class Line01 extends Vue {
       tooltip: {
         trigger: 'axis'
       },
-      legend:{
-        show:true,
-        top:0
+      legend: {
+        show: true,
+        top: 0
       },
       grid: {
         left: '3%',
@@ -92,53 +92,57 @@ export default class Line01 extends Vue {
     option && myChart.setOption(option);
   }
   getDaysList() {
-    let daysHandle = (n:number) => {
+    let daysHandle = (n: number) => {
       let dy = new Date()
       dy.setTime(dy.getTime() - 3600 * 1000 * 24 * n)
       let y = dy.getFullYear();
-      let m:any = dy.getMonth() + 1;
-      let d:any = dy.getDate();
+      let m: any = dy.getMonth() + 1;
+      let d: any = dy.getDate();
       m = m < 10 ? '0' + m : m;
       d = d < 10 ? '0' + d : d;
       return y + '-' + m + '-' + d;
     }
-    let data:Array<any> = []
-    for(let i = 29; i >= 0; i--) {
+    let data: Array<any> = []
+    for (let i = 29; i >= 0; i--) {
       data.push(daysHandle(i))
     }
     return data;
   }
   getData() {
     (this as any).$request({
-      url:'/omsOrder/report/shopDailyCount',
+      //url:'/omsOrder/report/shopDailyCount',
+      url: '/omsOrder/orderReport/orderSourceByYear',
       method: 'GET',
-    }).then((res:any) => {
-      if(res.data) {
+    }).then((res: any) => {
+      if (res.data) {
         this.initChart(res.data)
       }
-    }).catch(() =>{})
+    }).catch(() => { })
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.chart-box{
+.chart-box {
   height: 100%;
   width: 100%;
-  .title-top{
+
+  .title-top {
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     width: 100%;
-    >span{
+
+    >span {
       font-size: 16px;
       font-weight: 700;
     }
   }
 }
-.chart{
+
+.chart {
   height: calc(100% - 40px);
   width: 100%;
 }

src/views/components/orderChannel.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="chart-box">
+        <div class="title-top">
+            <span>toC 订单渠道</span>
+            <el-select v-model="dateValue" size="mini" class="select" placeholder="请选择" @change="dateChange">
+                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                    :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <div class="chart" :id="id"></div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import * as echarts from 'echarts';
+type EChartsOption = echarts.EChartsOption;
+
+@Component
+export default class Pie02 extends Vue {
+    id = this.randomString();
+    dateValue = new Date().getMonth() + 1
+    options: Array<any> = [{
+        label: '1月',
+        value: 1
+    }, {
+        label: '2月',
+        value: 2
+    }, {
+        label: '3月',
+        value: 3
+    }, {
+        label: '4月',
+        value: 4
+    }, {
+        label: '5月',
+        value: 5
+    }, {
+        label: '6月',
+        value: 6
+    }, {
+        label: '7月',
+        value: 7
+    }, {
+        label: '8月',
+        value: 8
+    }, {
+        label: '9月',
+        value: 9
+    }, {
+        label: '10月',
+        value: 10
+    }, {
+        label: '11月',
+        value: 11
+    }, {
+        label: '12月',
+        value: 12
+    }]
+    mounted() {
+        this.getData()
+    }
+
+    randomString() {
+        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let result = '';
+        for (let i = 10; i > 0; --i)
+            result += str[Math.floor(Math.random() * str.length)];
+        return result;
+    }
+    dateChange() {
+        this.getData()
+    }
+    getData() {
+        (this as any).$request({
+            url: '/omsOrder/orderReport/orderChannel',
+            method: 'GET',
+            params: {
+                month: this.dateValue
+            }
+        }).then((res: any) => {
+            if (res.data) {
+                this.initChart(res.data)
+            }
+        }).catch(() => { })
+    }
+    initChart(data: Array<any>) {
+        let chartDom: any = document.getElementById(this.id);
+        let myChart = echarts.init(chartDom);
+        let option: EChartsOption;
+        let _data: Array<any> = []
+        for (const item of data) {
+            _data.push({
+                name: item.shopSite,
+                value: item.total
+            })
+        }
+        option = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                show: true,
+                bottom: 0,
+                type: 'scroll',
+                orient: 'horizontal',
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: false,
+                    itemStyle: {
+                        borderRadius: 10,
+                        borderColor: '#fff',
+                        borderWidth: 2
+                    },
+                    label: {
+                        formatter: '{b}:\n {d}' + '%',
+                        position: 'inside'
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: 20,
+                            fontWeight: 'bold'
+                        }
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: _data
+                }
+            ]
+        };
+
+        option && myChart.setOption(option);
+    }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+    height: 100%;
+    width: 100%;
+
+    .title-top {
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 100%;
+
+        >span {
+            font-size: 16px;
+            font-weight: 700;
+        }
+
+        .select {
+            width: 100px;
+            position: absolute;
+            top: 6px;
+            right: 0;
+        }
+    }
+}
+
+.chart {
+    height: calc(100% - 40px);
+    width: 100%;
+}
+</style>>

src/views/components/orderSaleByYear.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="chart-box">
+        <div class="title-top">
+            <span>toC/toB年销售订单趋势</span>
+            <el-select v-model="dateValue" size="mini" class="select" placeholder="请选择" @change="dateChange">
+                <el-option v-for="item in options()" :key="item.value" :label="item.label"
+                    :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <div class="chart" :id="id"></div>
+    </div>
+
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import * as echarts from 'echarts';
+type EChartsOption = echarts.EChartsOption;
+
+@Component
+export default class OrderSaleByYear extends Vue {
+    id = this.randomString();
+    dateValue = new Date().getFullYear()
+    mounted() {
+        this.getData()
+    }
+    options() {
+        let arr: Array<any> = []
+        //从2010年到当前年
+        for (let i = 2010; i <= new Date().getFullYear(); i++) {
+            arr.push({
+                value: i,
+                label: i + '年'
+            })
+        }
+        return arr
+    }
+    randomString() {
+        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let result = '';
+        for (let i = 10; i > 0; --i)
+            result += str[Math.floor(Math.random() * str.length)];
+        return result;
+    }
+    dateChange() {
+        this.getData()
+    }
+    initChart(list: any) {
+        if (!list) return
+        let chartDom: any = document.getElementById(this.id);
+        let myChart = echarts.init(chartDom);
+        let option: EChartsOption;
+        let dataX: Array<any> = this.getDaysList()
+        let dataY: Array<any> = [];
+        let obj1: any = {
+            name: 'B2B',
+            type: 'line',
+            smooth: true,
+            data: []
+        }
+        for (const arr of dataX) {
+            let isAdd = false
+            for (const item2 of list.businessOrderSaleList) {
+                if (arr == item2.businessTime) {
+                    obj1.data.push(item2.businessTotal)
+                    isAdd = true
+                    break
+                }
+            }
+            if (!isAdd) {
+                obj1.data.push(0)
+            }
+        }
+        dataY.push(obj1)
+
+        let obj2: any = {
+            name: 'B2C',
+            type: 'line',
+            smooth: true,
+            data: []
+        }
+        for (const arr of dataX) {
+            let isAdd = false
+            for (const item2 of list.consumerOrderSaleList) {
+                if (arr == item2.consumerTime) {
+                    obj2.data.push(item2.consumerTotal)
+                    isAdd = true
+                    break
+                }
+            }
+            if (!isAdd) {
+                obj2.data.push(0)
+            }
+        }
+        dataY.push(obj2)
+        option = {
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                show: true,
+                top: 0
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            toolbox: {
+                feature: {
+                    // saveAsImage: {}
+                }
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: dataX
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: dataY
+        };
+
+        option && myChart.setOption(option);
+    }
+    getDaysList() {
+        //返回当前年的所有月份，如2025-01，2025-02，2025-03，2025-04，2025-05，2025-06，2025-07，2025-08，2025-09，2025-10，2025-11，2025-12
+        let data: Array<any> = []
+        for (let i = 1; i <= 12; i++) {
+            data.push(this.dateValue + '-' + (i < 10 ? '0' + i : i))
+        }
+        return data
+    }
+    getData() {
+        (this as any).$request({
+            url: '/omsOrder/orderReport/orderSaleByYear',
+            method: 'GET',
+            params: {
+                year: this.dateValue
+            }
+        }).then((res: any) => {
+            if (res.data) {
+                this.initChart(res.data)
+            }
+        }).catch(() => { })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+    height: 100%;
+    width: 100%;
+
+    .title-top {
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 100%;
+
+        >span {
+            font-size: 16px;
+            font-weight: 700;
+        }
+    }
+}
+
+.chart {
+    height: calc(100% - 40px);
+    width: 100%;
+}
+</style>

src/views/components/orderSourceByYear.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="chart-box">
+        <div class="title-top">
+            <span>每月店铺订单量日趋势</span>
+            <el-select v-model="dateValue" size="mini" class="select" placeholder="请选择" @change="dateChange">
+                <el-option v-for="item in options()" :key="item.value" :label="item.label"
+                    :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <div class="chart" :id="id"></div>
+    </div>
+
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import * as echarts from 'echarts';
+type EChartsOption = echarts.EChartsOption;
+
+@Component
+export default class Line01 extends Vue {
+    id = this.randomString();
+    dateValue = new Date().getFullYear();
+    options() {
+        let arr: Array<any> = []
+        //从2010年到当前年
+        for (let i = 2010; i <= new Date().getFullYear(); i++) {
+            arr.push({
+                value: i,
+                label: i + '年'
+            })
+        }
+        return arr
+    }
+    mounted() {
+        this.getData()
+    }
+
+    randomString() {
+        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let result = '';
+        for (let i = 10; i > 0; --i)
+            result += str[Math.floor(Math.random() * str.length)];
+        return result;
+    }
+    dateChange() {
+        this.getData()
+    }
+    initChart(list: Array<any>) {
+        if (!list) return
+        let chartDom: any = document.getElementById(this.id);
+        let myChart = echarts.init(chartDom);
+        let option: EChartsOption;
+        let dataX: Array<any> = this.getDaysList()
+        let dataY: Array<any> = []
+        for (const item of list) {
+            let obj: any = {
+                name: item.sourceName,
+                type: 'line',
+                smooth: true,
+                data: []
+            }
+            if (item) {
+                for (const arr of dataX) {
+                    let isAdd = false
+                    //for (const item2 of item) {    
+                    if (arr == this.dateValue + '-' + item.createTime) {
+                        obj.data.push(item.total)
+                        isAdd = true
+                        //break
+                    }
+                    //}
+                    if (!isAdd) {
+                        obj.data.push(0)
+                    }
+                }
+            }
+            dataY.push(obj)
+        }
+        option = {
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                show: true,
+                top: 0
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            toolbox: {
+                feature: {
+                    // saveAsImage: {}
+                }
+            },
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: dataX
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: dataY
+        };
+
+        option && myChart.setOption(option);
+    }
+    getDaysList() {
+        //返回当前年的所有月份，如2025-01，2025-02，2025-03，2025-04，2025-05，2025-06，2025-07，2025-08，2025-09，2025-10，2025-11，2025-12
+        let data: Array<any> = []
+        for (let i = 1; i <= 12; i++) {
+            data.push(this.dateValue + '-' + (i < 10 ? '0' + i : i))
+        }
+        return data
+    }
+    getData() {
+        (this as any).$request({
+            //url:'/omsOrder/report/shopDailyCount',
+            url: '/omsOrder/orderReport/orderSourceByYear',
+            params: {
+                year: this.dateValue
+            },
+            method: 'GET',
+        }).then((res: any) => {
+            if (res.data) {
+                this.initChart(res.data)
+            }
+        }).catch(() => { })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+    height: 100%;
+    width: 100%;
+
+    .title-top {
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 100%;
+
+        >span {
+            font-size: 16px;
+            font-weight: 700;
+        }
+    }
+}
+
+.chart {
+    height: calc(100% - 40px);
+    width: 100%;
+}
+</style>

src/views/components/pie01.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chart-box">
     <div class="title-top">
-      <span>区域销量</span>
+      <span>toC 区域销量</span>
       <el-select v-model="areatValue" size="mini" class="select" placeholder="请选择" @change="areaChange">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
       </el-select>
@@ -17,38 +17,38 @@ type EChartsOption = echarts.EChartsOption;
 
 @Component
 export default class Pie01 extends Vue {
-  id=this.randomString();
-  areatValue=1
-  options:Array<any>=[{
-    label:'省级',
-    value:1
-  },{
-    label:'市级',
+  id = this.randomString();
+  areatValue = 1
+  options: Array<any> = [{
+    label: '省级',
+    value: 1
+  }, {
+    label: '市级',
     value: 2
   }]
-  mounted(){
+  mounted() {
     this.getData()
   }
 
-  randomString(){
+  randomString() {
     const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
     let result = '';
-    for (let i = 10; i > 0; --i) 
+    for (let i = 10; i > 0; --i)
       result += str[Math.floor(Math.random() * str.length)];
     return result;
   }
   areaChange() {
     this.getData()
   }
-  initChart(data:Array<any>){
-    let chartDom:any = document.getElementById(this.id);
+  initChart(data: Array<any>) {
+    let chartDom: any = document.getElementById(this.id);
     let myChart = echarts.init(chartDom);
     let option: EChartsOption;
-    let _data:Array<any>=[]
-    for(const item of data) {
+    let _data: Array<any> = []
+    for (const item of data) {
       _data.push({
         name: item.area,
-        value:item.total
+        value: item.total
       })
     }
     option = {
@@ -57,14 +57,16 @@ export default class Pie01 extends Vue {
       },
       legend: {
         // orient: 'vertical',
-        show:true,
-        bottom:0
+        show: true,
+        bottom: 0,
+        type: 'scroll',
+        orient: 'horizontal',
       },
       series: [
         {
           type: 'pie',
           radius: '50%',
-          data:_data,
+          data: _data,
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
@@ -72,7 +74,7 @@ export default class Pie01 extends Vue {
               shadowColor: 'rgba(0, 0, 0, 0.5)'
             }
           },
-          label:{
+          label: {
             formatter: '{b}: \n{d}' + '%'
           }
         }
@@ -83,36 +85,39 @@ export default class Pie01 extends Vue {
   }
   getData() {
     (this as any).$request({
-      url:'/omsOrder/report/areaSalesTop',
+      url: '/omsOrder/report/areaSalesTop',
       method: 'GET',
-      params:{
-        level:this.areatValue
+      params: {
+        level: this.areatValue
       }
-    }).then((res:any) => {
-      if(res.data) {
+    }).then((res: any) => {
+      if (res.data) {
         this.initChart(res.data)
       }
-    }).catch(() =>{})
+    }).catch(() => { })
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.chart-box{
+.chart-box {
   height: 100%;
   width: 100%;
-  .title-top{
+
+  .title-top {
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     width: 100%;
-    >span{
+
+    >span {
       font-size: 16px;
       font-weight: 700;
     }
-    .select{
+
+    .select {
       width: 100px;
       position: absolute;
       top: 6px;
@@ -120,7 +125,8 @@ export default class Pie01 extends Vue {
     }
   }
 }
-.chart{
+
+.chart {
   height: calc(100% - 40px);
   width: 100%;
 }

src/views/components/shippingChannel.vue

@@ -0,0 +1,183 @@
+<template>
+    <div class="chart-box">
+        <div class="title-top">
+            <span>toC/toB发货渠道</span>
+
+            <el-select v-model="dateValue" size="mini" class="select" placeholder="请选择" @change="dateChange">
+                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                    :value="item.value"></el-option>
+            </el-select>
+        </div>
+        <div class="chart" :id="id"></div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import * as echarts from 'echarts';
+type EChartsOption = echarts.EChartsOption;
+
+@Component
+export default class Pie02 extends Vue {
+    id = this.randomString();
+    dateValue = new Date().getMonth() + 1
+    showType: Array<any> = [{
+        label: 'toC',
+        value: 1
+    }, {
+        label: 'toB',
+        value: 2
+    }]
+    options: Array<any> = [{
+        label: '1月',
+        value: 1
+    }, {
+        label: '2月',
+        value: 2
+    }, {
+        label: '3月',
+        value: 3
+    }, {
+        label: '4月',
+        value: 4
+    }, {
+        label: '5月',
+        value: 5
+    }, {
+        label: '6月',
+        value: 6
+    }, {
+        label: '7月',
+        value: 7
+    }, {
+        label: '8月',
+        value: 8
+    }, {
+        label: '9月',
+        value: 9
+    }, {
+        label: '10月',
+        value: 10
+    }, {
+        label: '11月',
+        value: 11
+    }, {
+        label: '12月',
+        value: 12
+    }]
+    mounted() {
+        this.getData()
+    }
+
+    randomString() {
+        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let result = '';
+        for (let i = 10; i > 0; --i)
+            result += str[Math.floor(Math.random() * str.length)];
+        return result;
+    }
+    dateChange() {
+        this.getData()
+    }
+    getData() {
+        (this as any).$request({
+            url: '/omsOrder/orderReport/shippingChannel',
+            method: 'GET',
+            params: {
+                month: this.dateValue
+            }
+        }).then((res: any) => {
+            if (res.data) {
+                this.initChart(res.data)
+            }
+        }).catch(() => { })
+    }
+    initChart(data: any) {
+        let chartDom: any = document.getElementById(this.id);
+        let myChart = echarts.init(chartDom);
+        let option: EChartsOption;
+        let _data: Array<any> = []
+        for (const item of data.consumerShippingChannelList) {
+            _data.push({
+                name: item.logisticsCompany,
+                value: item.total
+            })
+        }
+        option = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                show: true,
+                bottom: 0,
+                left: 10,
+                type: 'scroll',
+                orient: 'horizontal',
+            },
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: false,
+                    itemStyle: {
+                        borderRadius: 10,
+                        borderColor: '#fff',
+                        borderWidth: 2
+                    },
+                    label: {
+                        formatter: '{b}:\n {d}' + '%',
+                        position: 'inside'
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            fontSize: 20,
+                            fontWeight: 'bold'
+                        }
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: _data
+                }
+            ]
+        };
+
+        option && myChart.setOption(option);
+    }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+    height: 100%;
+    width: 100%;
+
+    .title-top {
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 100%;
+
+        >span {
+            font-size: 16px;
+            font-weight: 700;
+        }
+
+        .select {
+            width: 100px;
+            position: absolute;
+            top: 6px;
+            right: 0;
+        }
+    }
+}
+
+.chart {
+    height: calc(100% - 40px);
+    width: 100%;
+}
+</style>>

src/views/components/shopSale.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="chart-box">
+        <div class="title-top">
+            <span>平台店铺销售排行</span>
+        </div>
+        <el-row :gutter="20" style="background-color: #eee;padding:10px;">
+            <el-col :span="6">
+                <span style="font-weight: bold;">排名</span>
+            </el-col>
+            <el-col :span="6">
+                <span style="font-weight: bold;">平台店铺</span>
+            </el-col>
+            <el-col :span="6">
+                <span style="font-weight: bold;">销售单数</span>
+            </el-col>
+            <el-col :span="6">
+                <span style="font-weight: bold;">销售件数</span>
+            </el-col>
+        </el-row>
+        <el-row v-for="(item, index) in dataList" :key="index" :gutter="20" style="padding:3px">
+            <el-col :span="6">
+                {{ index + 1 }}
+            </el-col>
+            <el-col :span="6">
+                <span v-if="item.shopSite === undefined">&nbsp;</span>
+                <span v-else>{{ item.shopSite }}</span>
+            </el-col>
+            <el-col :span="6">
+                {{ item.total }}
+            </el-col>
+            <el-col :span="6">
+                {{ item.sales }}
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import * as echarts from 'echarts';
+type EChartsOption = echarts.EChartsOption;
+
+@Component
+export default class Pie02 extends Vue {
+    id = this.randomString();
+    dataList = []
+    mounted() {
+        this.getData()
+    }
+
+    randomString() {
+        const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        let result = '';
+        for (let i = 10; i > 0; --i)
+            result += str[Math.floor(Math.random() * str.length)];
+        return result;
+    }
+    dateChange() {
+        this.getData()
+    }
+    getData() {
+        (this as any).$request({
+            url: '/omsOrder/orderReport/shopSale',
+            method: 'GET',
+        }).then((res: any) => {
+            if (res.data) {
+                this.dataList = res.data
+            }
+        }).catch(() => { })
+    }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+
+    .title-top {
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 100%;
+
+        >span {
+            font-size: 16px;
+            font-weight: 700;
+        }
+
+        .select {
+            width: 100px;
+            position: absolute;
+            top: 6px;
+            right: 0;
+        }
+    }
+}
+
+.chart {
+    height: calc(100% - 40px);
+    width: 100%;
+}
+</style>>

src/views/components/total.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="chart-box">
+        <div class="total">
+            <div class="item">累计订单总数:{{ totalData.totalOrderNumber }}</div>
+            <div class="item">累计发货总数:{{ totalData.totalSendNumber }}</div>
+            <div class="item">累计未发货总数:{{ totalData.totalUnshippedNumber }}</div>
+            <div class="item">累计异常订单数量:{{ totalData.totalErrorOrderNumber }}</div>
+            <div class="item">累计已取消订单总数:{{ totalData.totalCancelOrderNumber }}</div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+@Component({ components: {} })
+export default class TotalView extends Vue {
+    totalData: any = {
+        totalOrderNumber: 0,
+        totalSendNumber: 0,
+        totalUnshippedNumber: 0,
+        totalErrorOrderNumber: 0,
+        totalCancelOrderNumber: 0
+    };
+    mounted() {
+        this.getData();
+    }
+    getData() {
+        (this as any).$request({
+            url: '/omsOrder/orderReport/countTotal',
+            method: 'GET'
+        }).then((res: any) => {
+            if (res.data) {
+                this.totalData = res.data;
+                console.info(this.totalData)
+            }
+        }).catch(() => { })
+    }
+}
+</script>
+<style lang="scss" scoped>
+.chart-box {
+    width: 100%;
+
+    .total {
+        background-color: #eee;
+        padding: 10px;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        text-align: center;
+
+        .item {
+            display: inline-block;
+            width: 20%;
+        }
+    }
+}
+</style>

src/views/index.vue

@@ -1,22 +1,34 @@
 <template>
   <div class="index-box">
+    <total />
     <div class="index-row">
       <div class="top-box">
         <pie01 />
       </div>
       <div class="top-box">
-        <rose />
+        <!-- <rose /> -->
+        <OrderChannel />
       </div>
       <div class="top-box">
-        <pie02 />
+        <!-- <pie02 /> -->
+        <BusinessSale />
+      </div>
+      <div class="top-box">
+        <!-- <pie02 /> -->
+        <ShippingChannel />
       </div>
     </div>
     <div class="index-row">
       <div class="bottom-box">
-        <bar01 />
+        <ShopSale />
+      </div>
+      <div class="bottom-box">
+        <OrderSaleByYear />
+        <!-- <bar01 /> -->
       </div>
       <div class="bottom-box">
-        <line01 />
+        <OrderSourceByYear />
+        <!-- <line01 /> -->
       </div>
     </div>
   </div>
@@ -24,55 +36,71 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import total from './components/total.vue'
 import pie01 from './components/pie01.vue'
 import rose from './components/rose.vue'
 import pie02 from './components/pie02.vue'
 import bar01 from './components/bar01.vue'
 import Line01 from './components/line01.vue'
 
-@Component({components:{pie01,rose,pie02,bar01,Line01}})
+import OrderChannel from './components/orderChannel.vue'
+import BusinessSale from './components/businessSale.vue'
+import ShippingChannel from './components/shippingChannel.vue'
+import ShopSale from './components/shopSale.vue'
+import OrderSaleByYear from './components/orderSaleByYear.vue'
+import OrderSourceByYear from './components/orderSourceByYear.vue'
+
+@Component({ components: { total, pie01, rose, pie02, bar01, Line01, OrderChannel, BusinessSale, ShippingChannel, ShopSale, OrderSaleByYear, OrderSourceByYear } })
 export default class IndexView extends Vue {
 
-  mounted(){
-    
+  mounted() {
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.index-box{
+.index-box {
   height: 100%;
   width: 100%;
   box-sizing: border-box;
   padding: 16px;
-  .index-row{
+
+  .index-row {
     height: 50%;
     width: 100%;
+    margin-bottom: 20px;
     display: flex;
     box-sizing: border-box;
-    .top-box{
+
+    .top-box {
       width: 33.33333%;
       height: 100%;
       box-sizing: border-box;
-      padding-right:8px;
+      padding-right: 8px;
     }
-    .top-box:last-child{
+
+    .top-box:last-child {
       padding: 0;
     }
-    .bottom-box{
+
+    .bottom-box {
       width: 50%;
       height: 100%;
       box-sizing: border-box;
-      padding-right:8px
+      padding-right: 8px
     }
-    .bottom-box:last-child{
+
+    .bottom-box:last-child {
       padding: 0;
     }
   }
-  .index-row:first-child{
+
+  .index-row:first-child {
     padding-bottom: 8px;
   }
-  .index-row:last-child{
+
+  .index-row:last-child {
     padding-top: 8px;
   }
 }