修改bug

src/api/iosBasicData/horizontalStatistics.js

@@ -0,0 +1,9 @@
+import request from '@/router/axios';
+
+export const boxNumberProfitStatisticsChart = (data) => {
+  return request({
+    url: '/api/blade-los/statisticAnalysis/boxNumberProfitStatisticsChart',
+    method: 'get',
+    params:data,
+  })
+}

src/views/exportTrade/purchaseContract/index.vue

@@ -1,11 +1,13 @@
 <template>
     <div>
         <basic-container v-show="show" class="page-crad">
-            <el-tabs v-model="tabsType" type="card" @tab-click="handleClick">
+            <el-tabs v-model="tabsName" type="card" @tab-click="handleClick">
                 <el-tab-pane label="待采购" name="first"></el-tab-pane>
-                <el-tab-pane label="业务单据" name="second"></el-tab-pane>
+                <el-tab-pane label="采购中" name="second"></el-tab-pane>
+                <el-tab-pane label="采购完成" name="third"></el-tab-pane>
+                <el-tab-pane label="全部" name="fourth"></el-tab-pane>
             </el-tabs>
-            <avue-crud v-show="tabsType == 'first'" ref="procureCrud" :page.sync="treatPage" :option="procureOption"
+            <avue-crud v-show="tabsName == 'first'" ref="procureCrud" :page.sync="treatPage" :option="procureOption"
                 :data="procureData" @refresh-change="listBYStatusfun(treatPage)"
                 @resetColumn="resetColumnTwo('procureCrud', 'procureOption', 'procureOptionList', 2.3)"
                 @saveColumn="saveColumnTwo('procureCrud', 'procureOption', 'procureOptionList', 2.3)">
@@ -14,12 +16,12 @@
                     </el-button>
                 </template>
             </avue-crud>
-            <avue-crud v-show="tabsType == 'second'" ref="crud" :option="option" :data="dataList" v-model="form"
-                :page.sync="page" :search.sync="search" @search-change="searchChange" @current-change="currentChange"
-                @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad" :table-loading="loading"
-                @saveColumn="saveColumn" @resetColumn="resetColumn" :cell-style="cellStyle"
-                @selection-change="selectionChange" @expand-change="expandChange"
-                @search-criteria-switch="searchCriteriaSwitch">
+            <avue-crud v-show="tabsName == 'second' || tabsName == 'third' || tabsName == 'fourth'" ref="crud"
+                :option="option" :data="dataList" v-model="form" :page.sync="page" :search.sync="search"
+                @search-change="searchChange" @current-change="currentChange" @size-change="sizeChange"
+                @refresh-change="refreshChange" @on-load="onLoad" :table-loading="loading" @saveColumn="saveColumn"
+                @resetColumn="resetColumn" :cell-style="cellStyle" @selection-change="selectionChange"
+                @expand-change="expandChange" @search-criteria-switch="searchCriteriaSwitch">
                 <template slot-scope="{ row }" slot="expand">
                     <avue-crud ref="itemCrud" :data="row.itemData" :option="itemOption" :table-loading="row.itemLoading"
                         @resetColumn="resetColumnTwo('itemCrud', 'itemOption', 'itemOptionList', 2.2)"
@@ -247,7 +249,8 @@ export default {
     name: "customerInformation",
     data() {
         return {
-            tabsType: 'first',
+            tabsName: 'first',
+            tabType: '',
             procureData: [], // 待采购数据
             // 待采购配置
             procureOption: [],
@@ -710,6 +713,16 @@ export default {
         }
     },
     methods: {
+        handleClick() {
+            if (this.tabsName == 'second') {
+                this.tabType = 1
+            } else if (this.tabsName == 'third') {
+                this.tabType = 2
+            } else if (this.tabsName == 'fourth') {
+                this.tabType = ''
+            }
+            this.onLoad(this.page, this.search);
+        },
         // 采购任务弹窗打开
         caigorenwufun() {
             this.dialogVisible = true;
@@ -1015,6 +1028,10 @@ export default {
                 };
                 delete params.requiredDeliveryDate
             }
+            params={
+                ...params,
+                tabType:this.tabType
+            }
             this.loading = true;
             this.dataList.forEach(item => {
                 this.$refs.crud.toggleRowExpansion(item, false);

src/views/iosBasicData/horizontalStatistics/index.vue

@@ -0,0 +1,239 @@
+<template>
+    <basic-container>
+        <avue-crud :option="option" :table-loading="loading" :data="data" v-model="query" ref="crud" id="out-table"
+            :header-cell-class-name="headerClassName" @search-change="searchChange" @search-reset="searchReset"
+            @on-load="onLoad">
+            <template slot="chartSearch">
+                <avue-radio v-model="query.chart" :dic="chartDic" @change="chartChange"></avue-radio>
+            </template>
+            <template slot="typeSearch">
+                <avue-radio v-model="query.type" :dic="typeDic" @change="typeChange"></avue-radio>
+            </template>
+        </avue-crud>
+        <div v-loading="loading" ref="echartsContainer" style="width: 90vw; height: 70vh;margin-top: 10px;"></div>
+    </basic-container>
+</template>
+  
+<script>
+import { boxNumberProfitStatisticsChart } from "@/api/iosBasicData/horizontalStatistics";
+import * as echarts from 'echarts';
+export default {
+    data() {
+        return {
+            form: {},
+            query: {
+                chart: 1,
+                type: 1,
+            },
+            loading: false,
+            itemLoading: false,
+            option: {
+                height: '130px',
+                calcHeight: 30,
+                searchShow: true,
+                searchSpan: 8,
+                searchMenuSpan: 8,
+                border: true,
+                addBtn: false,
+                menu: false,
+                header: false,
+                searchBtn: false,
+                emptyBtn: false,
+                searchLabelWidth: "80",
+                align: 'center',
+                column: [
+                    {
+                        label: "选择图表",
+                        prop: "chart",
+                        search: true,
+                        hide: true,
+                        showColumn: false,
+                    },
+                    {
+                        label: "类型",
+                        prop: "type",
+                        search: true,
+                        hide: true,
+                        showColumn: false,
+                    }],
+            },
+            data: [],
+            chartDic: [{
+                label: '箱量图',
+                value: 1
+            }, {
+                label: '利润图',
+                value: 2
+            }, {
+                label: '利润率图',
+                value: 3
+            }],
+            typeDic: [{
+                label: '船公司',
+                value: 1
+            }, {
+                label: '客户',
+                value: 2
+            }, {
+                label: '业务员',
+                value: 3
+            }],
+            chartData: []
+        };
+    },
+    created() {
+    },
+    mounted() {
+        // this.getChart()
+    },
+    methods: {
+        chartChange() {
+            this.getChart(this.chartData)
+        },
+        typeChange() {
+            this.onLoad()
+        },
+        getChart(chartData) {
+            let texts = ''
+            let typeName = ''
+            let seriesData = []
+            texts = this.chartDic.find(item => item.value == this.query.chart).label
+            typeName = this.typeDic.find(item => item.value == this.query.type).label
+            if (this.query.chart == 1) {
+                chartData.forEach(e => {
+                    if (e.corpName != '总计') {
+                        seriesData.push({
+                            value: e.teu,
+                            name: e.corpName
+                        })
+                    }
+                })
+            } else if (this.query.chart == 2) {
+                chartData.forEach(e => {
+                    if (e.corpName != '总计') {
+                        seriesData.push({
+                            value: e.amountProfitLoc,
+                            name: e.corpName
+                        })
+                    }
+                })
+            } else if (this.query.chart == 3) {
+                chartData.forEach(e => {
+                    if (e.corpName != '总计') {
+                        seriesData.push({
+                            value: e.profitMargin,
+                            name: e.corpName
+                        })
+                    }
+                })
+            }
+            let myChart = echarts.init(this.$refs.echartsContainer);
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: texts,
+                    left: 'center'
+                },
+                tooltip: {},
+                legend: {
+                    data: []
+                },
+                series: [{
+                    name: typeName,
+                    type: 'pie',
+                    radius: '70%',
+                    data: seriesData,
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }]
+            };
+            myChart.setOption(option);
+        },
+        searchReset() {
+            this.query = this.$options.data.query;
+        },
+        // 搜索点击回调
+        searchChange(params, done) {
+            this.onLoad();
+            done();
+        },
+        refreshChange() {
+            this.onLoad();
+        },
+        onLoad() {
+            this.loading = true;
+            boxNumberProfitStatisticsChart(this.query).then(res => {
+                let obj = {}
+                res.data.data.forEach((e, index) => {
+                    obj['teu' + (index + 1)] = e.teu
+                    obj['amountProfitLoc' + (index + 1)] = e.amountProfitLoc
+                    obj['profitMargin' + (index + 1)] = e.profitMargin
+                    this.option.column.push({
+                        label: e.corpName,
+                        overHidden: true,
+                        children: [{
+                            label: 'Teu',
+                            prop: 'teu' + (index + 1),
+                            overHidden: true,
+                        }, {
+                            label: '利润',
+                            prop: 'amountProfitLoc' + (index + 1),
+                            overHidden: true,
+                        },
+                        {
+                            label: '利润率',
+                            prop: 'profitMargin' + (index + 1),
+                            overHidden: true,
+                        }
+                        ]
+                    })
+                })
+                console.log(obj)
+                this.data = [obj]
+                this.chartData = res.data.data
+                this.getChart(res.data.data)
+                this.$nextTick(() => {
+                    this.$refs.crud.doLayout()
+                })
+            }).finally(() => {
+                this.loading = false;
+            })
+        },
+        // 更改表格颜色
+        headerClassName(tab) {
+            //颜色间隔
+            let back = ""
+            if (tab.columnIndex >= 0 && tab.column.level === 1) {
+                if (tab.columnIndex % 2 === 0) {
+                    back = "back-one"
+                } else if (tab.columnIndex % 2 === 1) {
+                    back = "back-two"
+                }
+            }
+            return back;
+        },
+    }
+};
+</script>
+  
+<style scoped>
+::v-deep#out-table .back-one {
+    background: #ecf5ff !important;
+    text-align: center;
+}
+
+::v-deep#out-table .back-two {
+    background: #ecf5ff !important;
+    text-align: center;
+}
+
+::v-deep.el-form-item {
+    margin-bottom: 0;
+}
+</style>
+