From a1b35332049ea250eb7b0bb977aaf3b4e0d9cfb4 Mon Sep 17 00:00:00 2001
From: ljx <864490211@qq.com>
Date: Mon, 27 May 2024 15:53:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7/=E4=BE=9B=E5=BA=94=E5=95=86?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/layouts/PageLayout.vue                    |   3 +-
 .../BaseWorkplace/custom/statistics.vue       | 416 ++++++++++++++++++
 .../Middle/Base/BaseWorkplace/router.map.js   |   4 +-
 yarn.lock                                     |  70 +++
 5 files changed, 490 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Middle/BaseWorkplace/custom/statistics.vue

diff --git a/package.json b/package.json
index 4e7f72f..066b8f7 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "clipboard": "^2.0.6",
     "core-js": "^3.6.5",
     "date-fns": "^2.14.0",
+    "echarts": "^5.5.0",
     "enquire.js": "^2.1.6",
     "file-saver": "^2.0.5",
     "hevue-img-preview": "^6.1.0",
diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue
index 8693509..ff4bc51 100644
--- a/src/layouts/PageLayout.vue
+++ b/src/layouts/PageLayout.vue
@@ -147,8 +147,7 @@ export default {
 
 .page-content {
   position: relative;
-  padding: 24px 0 0;
-
+  // padding: 24px 0 0;
   &.side {
   }
 
diff --git a/src/pages/Middle/BaseWorkplace/custom/statistics.vue b/src/pages/Middle/BaseWorkplace/custom/statistics.vue
new file mode 100644
index 0000000..91aebf5
--- /dev/null
+++ b/src/pages/Middle/BaseWorkplace/custom/statistics.vue
@@ -0,0 +1,416 @@
+<template>
+    <div class="page-body">
+        <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>
+                </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>
+                </div>
+            </a-tab-pane>
+        </a-tabs>
+       
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import BASE_URL from '@/services/Middle/transport/Custom/api.js';
+export default {
+    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`, // 客户交易次数统计
+            CustomTon: `${BASE_URL.BASE_URL}/Custom/v1/Custom/ton`, // 客户交易吨数统计
+
+            SupplierBalance: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/balance`, // 供应商结余统计
+            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>
+<style lang="">
+    
+</style>
\ No newline at end of file
diff --git a/src/router/Middle/Base/BaseWorkplace/router.map.js b/src/router/Middle/Base/BaseWorkplace/router.map.js
index 9bec572..9002e00 100644
--- a/src/router/Middle/Base/BaseWorkplace/router.map.js
+++ b/src/router/Middle/Base/BaseWorkplace/router.map.js
@@ -31,11 +31,11 @@ const BaseWorkplaceRouterMap = {
   BaseWorkplaceCustomStat: {
       name: '货车列表',
       icon: 'idcard',
-      path: '/BaseWorkplace/BaseWorkplaceList',
+      path: '/BaseWorkplace/CustomStat',
       meta: {
           invisible: false, // 不在菜单中显示
       },
-      component: () => import('@/pages/Middle/transport/Truck/Truck/List'),
+      component: () => import('@/pages/Middle/BaseWorkplace/custom/statistics'),
       authority: {
           permission: ["BaseWorkplace", "BaseWorkplace-All", "BaseWorkplace-List"],
       }
diff --git a/yarn.lock b/yarn.lock
index aa842be..c477e2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -990,6 +990,56 @@
   resolved "https://registry.npmmirror.com/@claviska/jquery-minicolors/-/jquery-minicolors-2.3.6.tgz"
   integrity sha512-8Ro6D4GCrmOl41+6w4NFhEOpx8vjxwVRI69bulXsFDt49uVRKhLU5TnzEV7AmOJrylkVq+ugnYNMiGHBieeKUQ==
 
+"@form-create/ant-design-vue@^2.5.34":
+  version "2.5.35"
+  resolved "https://registry.npmmirror.com/@form-create/ant-design-vue/-/ant-design-vue-2.5.35.tgz#d541ef9b3b209abdbd1c7c4b63d0137ed147859e"
+  integrity sha512-XFABph6+utkXaQrCT2pMZWWAZ7T0S4ehRw8qArYUe9hQ22CAnJBgTtGb4QeUehP21qFfB8vSxHBthaeNxQ4Wmg==
+  dependencies:
+    "@form-create/component-antdv-frame" "^2.5.35"
+    "@form-create/component-antdv-group" "^2.5.35"
+    "@form-create/component-antdv-upload" "^2.5.35"
+    "@form-create/component-subform" "^2.5.25"
+    "@form-create/core" "^2.5.35"
+    "@form-create/utils" "^2.5.35"
+
+"@form-create/component-antdv-frame@^2.5.35":
+  version "2.5.35"
+  resolved "https://registry.npmmirror.com/@form-create/component-antdv-frame/-/component-antdv-frame-2.5.35.tgz#b07180f76754cf929c97cbe325ef786877fb565d"
+  integrity sha512-RTjrRqq1pEmbTRad48lDp+A+hCfFtLT8qoe7SFgDvChs16etl00ZZCllQK6q9iOY+jkBfUmtCSiGs4jS3hgq4A==
+  dependencies:
+    "@form-create/utils" "^2.5.35"
+
+"@form-create/component-antdv-group@^2.5.35":
+  version "2.5.35"
+  resolved "https://registry.npmmirror.com/@form-create/component-antdv-group/-/component-antdv-group-2.5.35.tgz#9a3d40ed45051406bcdfbf06dcfb49cae5bae54e"
+  integrity sha512-fxY3bmRmzlvod1xm0LwBCHLjD6PngwUQJu8uhRAQNdYilWG4Q4XoAEskVuk6t/WEaFRp+rnRaoksPkQEXqDk8g==
+  dependencies:
+    "@form-create/utils" "^2.5.35"
+
+"@form-create/component-antdv-upload@^2.5.35":
+  version "2.5.35"
+  resolved "https://registry.npmmirror.com/@form-create/component-antdv-upload/-/component-antdv-upload-2.5.35.tgz#f2bd9f8ef66344a7631f521beab43854b44586ab"
+  integrity sha512-bcgzSv+vKOKyH7QOwnLwofBHzA1meg9FUUsmVv8lWO3xcMDJTemEPOTh8HHsk7iCkJlxTgNEZDNvqBUd7o105A==
+  dependencies:
+    "@form-create/utils" "^2.5.35"
+
+"@form-create/component-subform@^2.5.25":
+  version "2.5.25"
+  resolved "https://registry.npmmirror.com/@form-create/component-subform/-/component-subform-2.5.25.tgz#92c8cfa7435edd16bb031a2d1ca407d2569fe391"
+  integrity sha512-puGWWxSOeII4y4mCNxrKF/eH4nY1AQAx87VchzErLmemwF6TtNBLBsJLCCmFAVLYn1koYU5nNu5Y2yG9s2CKlQ==
+
+"@form-create/core@^2.5.35":
+  version "2.5.35"
+  resolved "https://registry.npmmirror.com/@form-create/core/-/core-2.5.35.tgz#6e7c52268b9cb0e07af195d263024d24d37b1a0b"
+  integrity sha512-yAnV+kTURBHu+OR0xO2yWRDhFe+xA4ZTfdeOOjN/h9mMgDTZe4ebcAOgwL1ByV3RFnKC9bEjgtZVE52nBawZgg==
+  dependencies:
+    "@form-create/utils" "^2.5.35"
+
+"@form-create/utils@^2.5.35":
+  version "2.5.35"
+  resolved "https://registry.npmmirror.com/@form-create/utils/-/utils-2.5.35.tgz#236baea325a8f99e5b83b97aae3a2814ad7e57a3"
+  integrity sha512-uQcUGV0iBYHRX6Q9cZT5jLZmN6tn5d3MzzpSv4WD7hegzj0aDaLj7VTL+8F/xLFSjW0Yg+oo5TcHfFLjzqtlLA==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz?cache=0&sync_timestamp=1584145510980&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40hapi%2Faddress%2Fdownload%2F%40hapi%2Faddress-2.1.4.tgz"
@@ -4208,6 +4258,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
+  integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.5.0"
+
 ee-first@1.1.1, ee-first@~1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz"
@@ -10344,6 +10402,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.2.0.tgz"
   integrity sha1-pQCtCEsHmPHDBxrzkeZZEshrypI=
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.10.0, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.13.0.tgz?cache=0&sync_timestamp=1589411820927&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftslib%2Fdownload%2Ftslib-1.13.0.tgz"
@@ -11476,3 +11539,10 @@ zepto@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/zepto/download/zepto-1.2.0.tgz"
   integrity sha1-4Se9nmb9hGvl6rSME5SIL3wOT5g=
+
+zrender@5.5.0:
+  version "5.5.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
+  integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
+  dependencies:
+    tslib "2.3.0"