From 73523009fb9cb3018969b52f61076f1332db32c9 Mon Sep 17 00:00:00 2001
From: ljx <864490211@qq.com>
Date: Tue, 28 May 2024 11:35:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/statistics/myStatistics.vue    | 244 +++++++++++
 .../BaseWorkplace/custom/statistics.vue       | 389 +-----------------
 2 files changed, 255 insertions(+), 378 deletions(-)
 create mode 100644 src/components/statistics/myStatistics.vue

diff --git a/src/components/statistics/myStatistics.vue b/src/components/statistics/myStatistics.vue
new file mode 100644
index 0000000..0e1463a
--- /dev/null
+++ b/src/components/statistics/myStatistics.vue
@@ -0,0 +1,244 @@
+<template >
+    <div>
+        <div style="display: flex;align-items: center;">
+            <a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
+                <a-radio-button value="year">
+                    按年份
+                </a-radio-button>
+                <a-radio-button value="month">
+                    按月份
+                </a-radio-button>
+                <a-radio-button value="day">
+                    按本月
+                </a-radio-button>
+                <a-radio-button value="week">
+                    按本周
+                </a-radio-button>
+                <a-radio-button value="day7">
+                    最近7天
+                </a-radio-button>
+                <a-radio-button value="day30">
+                    最近30天
+                </a-radio-button>
+            </a-radio-group>
+            <p v-if='interval' style="margin: 0 10px;">(数据每 {{interval}} 分钟刷新一次)</p>
+        </div>
+        
+        <div :id="id" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
+        <div class="loading-box" v-else style="width: 95%;height: 500px;margin: 20px auto 0;display: flex;align-items: center;justify-content: center;">
+            <a-icon type="loading" spin style="font-size: 50px;color: #122ed1;margin-left: 10px;" />
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+// import BASE_URL from '@/services/Middle/transport/Custom/api.js';
+// 从父组件中获取数据，id是echarts专属id，同个页面需要传不同id，actions是请求数据的接口，type是图表类型 bar条形图 line折线图，title是图表标题
+export default {
+    name: 'MyStatistics',
+    props: {
+        id:{
+            type:String
+        },
+        actions:{
+            type:String
+        },
+        type:{
+            type:String
+        },
+        title:{
+            type:String
+        }
+    },
+    data() {
+        return {
+            isShowCustomChart: false,
+            interval:null,
+            options:{
+            year:{
+                cycle: 'year',
+                span: 0,
+                recently:false,
+            },
+            month:{
+                cycle:'month',
+                span: 0,
+                recently:false,
+            },
+            day:{
+                cycle: 'day',
+                span: 0,
+                recently:false,
+            },
+            week:{
+                cycle: 'week',
+                span: 0,
+                recently:false,
+            },
+            day7:{
+                cycle: 'day',
+                span: 7,
+                recently:true,
+            },
+            day30:{
+                cycle: 'day',
+                span: 30,
+                recently:true,
+        },
+            //搜索区
+        searchFormData: {
+            cycle: 'day',
+            span: 7,
+            recently:true,
+        },
+        searchFormItems: [
+            {field: 'cycle', title: '类型', span: 5, itemRender: {name: '$select', props: {placeholder: '请输入名称', 
+            options:[
+                    {label: '按日', value: 'day'},
+                    {label: '按周', value: 'week'},
+                    {label: '按月', value:'month'},
+                ]
+            }}},
+            {field: 'span', title: '条数', span: 5, itemRender: {name: '$input', props: {type:'number'}}},
+            {field: 'recently', title: '从今天开始', span: 5, itemRender: {name: '$radio', options:[
+                {label: '是', value: true},
+                {label: '否', value: false}
+            ]
+            }},
+            {
+            align: 'right', span: 4, itemRender: {
+                name: '$buttons', children: [{props: {type: 'submit', content: '筛选', status: 'primary'}},
+                {props: {type: 'reset', content: '重置'}}]
+            }
+            }
+        ],
+        }
+        }
+    },
+    created(){
+        this.createChart('month')
+    },
+    methods: {
+        //选中日期后，创建图表
+        onSearch(e) {
+            this.isShowCustomChart = false;
+            this.createChart(e.target.value);
+        },
+        createChart(name){
+            let searchData = this.options[name];
+            if(this.type == 'bar'){
+                this.$mk.post({
+                url: this.actions,
+                data: searchData
+            }).then(res => {
+                this.isShowCustomChart = true;
+                this.interval = res.data.interval;
+                setTimeout(() => {
+                    let myChart = echarts.init(document.getElementById(this.id));
+                let option = {
+                    title:{
+                        text:this.title,
+                        left: 'left',
+                        textStyle:{
+                            fontSize: 20,
+                        }
+                    },
+                    xAxis: {
+                        name:res.data.label[0],
+                        type: 'category',
+                        data:res.data.items?res.data.items.map(item => item.name):[],
+                        left: '0',
+                        top: '60',
+                        orient: 'vertical',
+                        textStyle: {
+                            fontSize: 15,
+                        }
+                    },
+                    yAxis: {
+                        name:res.data.label[1],
+                        type: 'value'
+                    },
+                    series: [
+                        {
+                        data:res.data.items?res.data.items.map(item => item.data[0]):[],
+                        type: 'bar',
+                        barWidth: '30px' // 设置为类目宽度的50%
+                        }
+                    ],
+                    tooltip:{
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross',
+                            label: {
+                                backgroundColor: '#6a7985'
+                            }
+                        }
+                    }
+                }
+                myChart.setOption(option)
+                }, 100);
+                
+            })
+
+            }else if(this.type == 'line'){
+                this.$mk.post({
+                url: this.actions,
+                data: searchData
+            }).then(res => {
+                this.isShowCustomChart = true;
+                this.interval = res.data.interval;
+                setTimeout(() => {
+                    let myChart = echarts.init(document.getElementById(this.id));
+                let option = {
+                    title:{
+                        text: this.title,
+                        left: 'left',
+                        textStyle:{
+                            fontSize: 20,
+                        }
+                    },
+                    legend: {
+                        data:res.data.items?res.data.items.map(item => item.name):[],
+                        left: '0',
+                        top: '60',
+                        orient: 'vertical',
+                        textStyle: {
+                            fontSize: 15,
+                        }
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: res.data.label
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    series:res.data.items? res.data.items.map((item) => {
+                        return {
+                            name:item.name,
+                            data: item.data,
+                            type: 'line',
+                        }
+                    }, ):{},
+                    tooltip:{
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross',
+                            label: {
+                                backgroundColor: '#6a7985'
+                            }
+                        }
+                    }
+                };
+                myChart.setOption(option)
+                }, 100);
+               
+            })
+            }
+        },
+    }
+}
+</script>
+<style lang="">
+    
+</style>
\ No newline at end of file
diff --git a/src/pages/Middle/BaseWorkplace/custom/statistics.vue b/src/pages/Middle/BaseWorkplace/custom/statistics.vue
index 91aebf5..8a5f9bb 100644
--- a/src/pages/Middle/BaseWorkplace/custom/statistics.vue
+++ b/src/pages/Middle/BaseWorkplace/custom/statistics.vue
@@ -3,62 +3,16 @@
         <a-tabs default-active-key="1"  size="large">
             <a-tab-pane key="1" tab="客户" :forceRender="true">
                 <div class="chart-container">
-                    <!-- 搜索区 -->
-                    <!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
-                    <a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
-                        <a-radio-button value="year">
-                            按年份
-                        </a-radio-button>
-                        <a-radio-button value="month">
-                            按月份
-                        </a-radio-button>
-                        <a-radio-button value="day">
-                            按本月
-                        </a-radio-button>
-                        <a-radio-button value="week">
-                            按本周
-                        </a-radio-button>
-                        <a-radio-button value="day7">
-                            最近7天
-                        </a-radio-button>
-                        <a-radio-button value="day30">
-                            最近30天
-                        </a-radio-button>
-                    </a-radio-group>
-                    <!-- <h3>客户结余统计</h3> -->
-                    <div id="myChart" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
-                    <div id="myChart2" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
-                    <div id="myChart3" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
+                    <myStatistics id="mychart1" :actions="actions.CustomBalance" :type="'bar'" title='客户结余统计'></myStatistics>
+                    <myStatistics id="mychart2" :actions="actions.CustomNumber" :type="'line'" title='客户交易次数统计'></myStatistics>
+                    <myStatistics id="mychart3" :actions="actions.CustomTon" :type="'line'" title='客户交易吨数统计'></myStatistics>
                 </div>
             </a-tab-pane>
             <a-tab-pane key="2" tab="供应商" :forceRender="true">
                 <div class="chart-container">
-                    <!-- 搜索区 -->
-                    <!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
-                    <a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch1">
-                        <a-radio-button value="year">
-                            按年份
-                        </a-radio-button>
-                        <a-radio-button value="month">
-                            按月份
-                        </a-radio-button>
-                        <a-radio-button value="day">
-                            按本月
-                        </a-radio-button>
-                        <a-radio-button value="week">
-                            按本周
-                        </a-radio-button>
-                        <a-radio-button value="day7">
-                            最近7天
-                        </a-radio-button>
-                        <a-radio-button value="day30">
-                            最近30天
-                        </a-radio-button>
-                    </a-radio-group>
-                    <!-- <h3>客户结余统计</h3> -->
-                    <div id="myChart4" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
-                    <div id="myChart5" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
-                    <div id="myChart6" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
+                    <myStatistics id="mychart4" :actions="actions.SupplierBalance" :type="'bar'" title='供应商结余统计'></myStatistics>
+                    <myStatistics id="mychart5" :actions="actions.SupplierNumber" :type="'line'" title='供应商交易次数统计'></myStatistics>
+                    <myStatistics id="mychart6" :actions="actions.SupplierTon" :type="'line'" title='供应商交易吨数统计'></myStatistics>
                 </div>
             </a-tab-pane>
         </a-tabs>
@@ -66,13 +20,14 @@
     </div>
 </template>
 <script>
-import * as echarts from 'echarts';
 import BASE_URL from '@/services/Middle/transport/Custom/api.js';
+import myStatistics from '../../../../components/statistics/myStatistics.vue';
 export default {
+    components:{
+        myStatistics
+    },
     data() {
         return {
-        isShowCustomChart:false,
-        isShowCustomChart1:false,
         actions:{
             CustomBalance: `${BASE_URL.BASE_URL}/Custom/v1/Custom/balance`, // 客户结余统计
             CustomNumber: `${BASE_URL.BASE_URL}/Custom/v1/Custom/number`, // 客户交易次数统计
@@ -82,332 +37,10 @@ export default {
             SupplierNumber: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/number`, // 供应商交易次数统计
             SupplierTon: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/ton`, // 供应商交易吨数统计
         },
-        options:{
-            year:{
-                cycle: 'year',
-                span: 0,
-                recently:false,
-            },
-            month:{
-                cycle:'month',
-                span: 0,
-                recently:false,
-            },
-            day:{
-                cycle: 'day',
-                span: 0,
-                recently:false,
-            },
-            week:{
-                cycle: 'week',
-                span: 0,
-                recently:false,
-            },
-            day7:{
-                cycle: 'day',
-                span: 7,
-                recently:true,
-            },
-            day30:{
-                cycle: 'day',
-                span: 30,
-                recently:true,
-        },
-            //搜索区
-        searchFormData: {
-            cycle: 'day',
-            span: 7,
-            recently:true,
-        },
-        searchFormItems: [
-            {field: 'cycle', title: '类型', span: 5, itemRender: {name: '$select', props: {placeholder: '请输入名称', 
-            options:[
-                    {label: '按日', value: 'day'},
-                    {label: '按周', value: 'week'},
-                    {label: '按月', value:'month'},
-                ]
-            }}},
-            {field: 'span', title: '条数', span: 5, itemRender: {name: '$input', props: {type:'number'}}},
-            {field: 'recently', title: '从今天开始', span: 5, itemRender: {name: '$radio', options:[
-                {label: '是', value: true},
-                {label: '否', value: false}
-            ]
-            }},
-            {
-            align: 'right', span: 4, itemRender: {
-                name: '$buttons', children: [{props: {type: 'submit', content: '筛选', status: 'primary'}},
-                {props: {type: 'reset', content: '重置'}}]
-            }
-            }
-        ],
-        }
     }
     },
-    created() {
-       this.createChart('month');
-       this.createChart1('month');
-    },
     methods: {
-        createChart(name){
-            this.isShowCustomChart = true;
-            let searchData = this.options[name];
-            this.$mk.post({
-                url: this.actions.CustomBalance,
-                data: searchData
-            }).then(res => {
-                console.log(res)
-                let myChart = echarts.init(document.getElementById('myChart'));
-                let option = {
-                    title:{
-                        text: '客户结余统计',
-                        left: 'left',
-                        textStyle:{
-                            fontSize: 20,
-                        }
-                    },
-                    xAxis: {
-                        name:res.data.label[0],
-                        type: 'category',
-                        data: res.data.items.map(item => item.name)
-                    },
-                    yAxis: {
-                        name:res.data.label[1],
-                        type: 'value'
-                    },
-                    series: [
-                        {
-                        data:res.data.items?res.data.items.map(item => item.data[0]):[],
-                        type: 'bar',
-                        barWidth: '30px' // 设置为类目宽度的50%
-                        }
-                    ],
-                    tooltip:{
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross',
-                            label: {
-                                backgroundColor: '#6a7985'
-                            }
-                        }
-                    }
-                }
-                myChart.setOption(option)
-            })
-            this.$mk.post({
-                url: this.actions.CustomNumber,
-                data: searchData
-            }).then(res => {
-                let myChart = echarts.init(document.getElementById('myChart2'));
-                let option = {
-                    title:{
-                        text: '客户交易次数统计',
-                        left: 'left',
-                        textStyle:{
-                            fontSize: 20,
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: res.data.label
-                    },
-                    yAxis: {
-                        type: 'value'
-                    },
-                    series:res.data.items? res.data.items.map((item) => {
-                        return {
-                            name:item.name,
-                            data: item.data,
-                            type: 'line',
-                        }
-                    }, ):{},
-                    tooltip:{
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross',
-                            label: {
-                                backgroundColor: '#6a7985'
-                            }
-                        }
-                    }
-                };
-                myChart.setOption(option)
-            })
-            this.$mk.post({
-                url: this.actions.CustomTon,
-                data: searchData
-            }).then(res => {
-                let myChart = echarts.init(document.getElementById('myChart3'));
-                let option = {
-                    title:{
-                        text: '客户交易吨数统计',
-                        left: 'left',
-                        textStyle:{
-                            fontSize: 20,
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: res.data.label
-                    },
-                    yAxis: {
-                        type: 'value'
-                    },
-                    series:res.data.items?res.data.items.map((item) => {
-                        return {
-                            name:item.name,
-                            data: item.data,
-                            type: 'line',
-                        }
-                    }
-                    ):{},
-                    tooltip:{
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross',
-                            label: {
-                                backgroundColor: '#6a7985'
-                            }
-                        }
-                    }
-                };
-                myChart.setOption(option)
-            })
-         
-        },
-        createChart1(name){
-            this.isShowCustomChart1 = true;
-            let searchData = this.options[name];
-            this.$mk.post({
-                url: this.actions.SupplierBalance,
-                data: searchData
-            }).then(res => {
-                console.log(res)
-                let myChart = echarts.init(document.getElementById('myChart4'));
-                let option = {
-                    title:{
-                        text: '供应商结余统计',
-                        left: 'left',
-                        textStyle:{
-                            fontSize: 20,
-                        }
-                    },
-                    xAxis: {
-                        name:res.data.label[0],
-                        type: 'category',
-                        data: res.data.items.map(item => item.name)
-                    },
-                    yAxis: {
-                        name:res.data.label[1],
-                        type: 'value'
-                    },
-                    series: [
-                        {
-                        data:res.data.items?res.data.items.map(item => item.data[0]):[],
-                        type: 'bar',
-                        barWidth: '30px' // 设置为类目宽度的50%
-                        }
-                    ],
-                    tooltip:{
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross',
-                            label: {
-                                backgroundColor: '#6a7985'
-                            }
-                        }
-                    }
-                }
-                myChart.setOption(option)
-            })
-            this.$mk.post({
-                url: this.actions.SupplierNumber,
-                data: searchData
-            }).then(res => {
-                let myChart = echarts.init(document.getElementById('myChart5'));
-                let option = {
-                    title:{
-                        text: '供应商交易次数统计',
-                        left: 'left',
-                        textStyle:{
-                            fontSize: 20,
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: res.data.label
-                    },
-                    yAxis: {
-                        type: 'value'
-                    },
-                    series:res.data.items? res.data.items.map((item) => {
-                        return {
-                            name:item.name,
-                            data: item.data,
-                            type: 'line',
-                        }
-                    }, ):{},
-                    tooltip:{
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross',
-                            label: {
-                                backgroundColor: '#6a7985'
-                            }
-                        }
-                    }
-                };
-                myChart.setOption(option)
-            })
-            this.$mk.post({
-                url: this.actions.SupplierTon,
-                data: searchData
-            }).then(res => {
-                let myChart = echarts.init(document.getElementById('myChart6'));
-                let option = {
-                    title:{
-                        text: '供应商交易吨数统计',
-                        left: 'left',
-                        textStyle:{
-                            fontSize: 20,
-                        }
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: res.data.label
-                    },
-                    yAxis: {
-                        type: 'value'
-                    },
-                    series:res.data.items?res.data.items.map((item) => {
-                        return {
-                            name:item.name,
-                            data: item.data,
-                            type: 'line',
-                        }
-                    }
-                    ):{},
-                    tooltip:{
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'cross',
-                            label: {
-                                backgroundColor: '#6a7985'
-                            }
-                        }
-                    }
-                };
-                myChart.setOption(option)
-            })
-         
-        },
-        onSearch(e) {
-            this.isShowCustomChart = false;
-            this.createChart(e.target.value);
-        },
-        onSearch1(e) {
-            this.isShowCustomChart1 = false;
-            this.createChart1(e.target.value);
-        }
+        
     }            
 }
 </script>