7.30(维修分析=>维保产值

src/api/statistics.js

@@ -109,6 +109,25 @@ export function yieldModelandcompany(data) {
 
 //维保成本占比车型/所属公司饼图 /api/admin/platform/monthly/maintenance/analysis/cost/modelandcompany/histogram 
 export function costModelandcompany(data) {
+  return request({
+    url: '/admin/platform/monthly/maintenance/analysis/cost/modelandcompany',
+    method: 'post',
+    data,
+  });
+}
+
+//维保成本(第三栏格子图) /api/admin/platform/monthly/maintenance/analysis/cost/lattice
+export function analysisCostLattice(data) {
+  return request({
+    url: '/admin/platform/monthly/maintenance/analysis/cost/lattice',
+    method: 'post',
+    data,
+  });
+}
+
+//维保成本top10和维保使用配件数量top10公司柱状图 
+//api/admin/platform/monthly/maintenance/analysis/cost/modelandcompany/histogram
+export function modelandcompanyHistogram(data) {
   return request({
     url: '/admin/platform/monthly/maintenance/analysis/cost/modelandcompany/histogram',
     method: 'post',
@@ -116,3 +135,28 @@ export function costModelandcompany(data) {
   });
 }
 
+// 维保成本车型占比,所属公司占比  api/admin/platform/monthly/maintenance/analysis/profit/modelandcompany
+export function profitModelandcompany(data) {
+  return request({
+    url: '/admin/platform/monthly/maintenance/analysis/profit/modelandcompany',
+    method: 'post',
+    data,
+  });
+}
+
+//维保利润(第四栏格子图) /api/admin/platform/monthly/maintenance/analysis/profit/lattice
+export function analysisProfitLattice(data) {
+  return request({
+    url: '/admin/platform/monthly/maintenance/analysis/profit/lattice',
+    method: 'post',
+    data,
+  });
+}
+// 维保利润(柱状图) api/admin/platform/monthly/maintenance/analysis/profit/modelandcompany/histogram
+export function profitHistogram(data) {
+  return request({
+    url: '/admin/platform/monthly/maintenance/analysis/profit/modelandcompany/histogram',
+    method: 'post',
+    data,
+  });
+}

src/views/statistics/components/accessoryEcharts.vue

@@ -12,69 +12,64 @@
 
 <script>
 import * as echarts from 'echarts';
-import { brokenLineApi } from '@/api/dashboard';
 export default {
   name: 'accessoryEcharts',
-  props: ['id', 'title','pieData'],
+  props: ['id', 'title', 'pieData'],
   data() {
     return {
       lineData: [],
     };
   },
   mounted() {
-    this.inits();
+    // this.inits();
   },
   methods: {
     goTarget(href) {
       window.open(href, '_blank');
     },
     inits() {
-      brokenLineApi().then((res) => {
+      let myChart = echarts.init(document.getElementById(this.id));
-        // console.log(res, '数据---111');
+      let option = {
-        this.lineData = res;
+        title: {
-        let myChart = echarts.init(document.getElementById(this.id));
+          text: this.title,
-        let option = {
+          left: 'center'
-          title: {
+        },
-            text: this.title,
+        toolbox: {
-            left: 'center'
+          feature: {
+            saveAsImage: {},
           },
-          toolbox: {
+        },
-            feature: {
+        tooltip: {
-              saveAsImage: {},
+          trigger: 'item'
-            },
+        },
-          },
+        legend: {
-          tooltip: {
+          orient: 'vertical',
-            trigger: 'item'
+          left: 'left'
-          },
+        },
-          legend: {
+        series: [
-            orient: 'vertical',
+          {
-            left: 'left'
+            type: 'pie',
-          },
+            radius: '50%',
-          series: [
+            data: this.pieData,
-            {
+            emphasis: {
-              type: 'pie',
+              itemStyle: {
-              radius: '50%',
+                shadowBlur: 10,
-              data: this.pieData,
+                shadowOffsetX: 0,
-              emphasis: {
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
-                itemStyle: {
-                  shadowBlur: 10,
-                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)',
 
-                }
               }
             }
-          ]
+          }
-        };
+        ]
-        myChart.setOption(option);
+      };
-        myChart.resize({
+      myChart.setOption(option);
-          // width: myChart.getWidth() * 0.5,
+      myChart.resize({
-          // height: myChart.getHeight() * 0.5
+        // width: myChart.getWidth() * 0.5,
-        });
+        // height: myChart.getHeight() * 0.5
-        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+      });
-        window.addEventListener('resize', function () {
+      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
-          myChart.resize();
+      window.addEventListener('resize', function () {
-        });
+        myChart.resize();
       });
     },
   },

src/views/statistics/components/consumeEcharts.vue

@@ -35,56 +35,53 @@ export default {
         };
     },
     mounted() {
-        this.inits();
+        // this.inits();
     },
     methods: {
         goTarget(href) {
             window.open(href, '_blank');
         },
         inits() {
-            brokenLineApi().then((res) => {
+            let myChart = echarts.init(document.getElementById(this.id));
-                this.lineData = res;
+            let option = {
-                let myChart = echarts.init(document.getElementById(this.id));
+                title: {
-                let option = {
+                    text: this.title,
-                    title: {
+                    left: 'center'
-                        text: this.title,
+                },
-                        left: 'center'
+                color: ['#37A2FF'],
-                    },
+                tooltip: {
-                    color: ['#37A2FF'],
+                    trigger: 'axis',
-                    tooltip: {
+                    axisPointer: {
-                        trigger: 'axis',
+                        type: 'cross',
-                        axisPointer: {
+                        label: {
-                            type: 'cross',
+                            backgroundColor: '#6a7985',
-                            label: {
-                                backgroundColor: '#6a7985',
-                            },
                         },
                     },
-                    toolbox: {
+                },
-                        feature: {
+                toolbox: {
-                            saveAsImage: {},
+                    feature: {
-                        },
+                        saveAsImage: {},
                     },
-                    xAxis: {
+                },
-                        type: 'category',
+                xAxis: {
-                        data: this.barData.labels
+                    type: 'category',
-                    },
+                    data: this.barData.labels
-                    yAxis: {
+                },
-                        type: 'value'
+                yAxis: {
-                    },
+                    type: 'value'
-                    series: [
+                },
-                        {
+                series: [
-                            data: this.barData.values,
+                    {
-                            type: 'bar',
+                        data: this.barData.values,
-                            barWidth: 20 // 设置宽度为类目宽度的50%
+                        type: 'bar',
-                        }
+                        barWidth: 20 // 设置宽度为类目宽度的50%
-                    ]
+                    }
-                };
+                ]
-                myChart.setOption(option);
+            };
-                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+            myChart.setOption(option);
-                window.addEventListener('resize', function () {
+            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
-                    myChart.resize();
+            window.addEventListener('resize', function () {
-                });
+                myChart.resize();
             });
         },
     },

src/views/statistics/cost/components/accessoryEcharts.vue

@@ -31,11 +31,7 @@ export default {
       window.open(href, '_blank');
     },
     inits() {
-      brokenLineApi().then((res) => {
+      let myChart = echarts.init(document.getElementById('accessory-echarts'));
-        // console.log(res, '数据---111');
-        this.lineData = res;
-
-        let myChart = echarts.init(document.getElementById('accessory-echarts'));
         let option = {
           title: {
             text: '配件车型占比',
@@ -74,7 +70,6 @@ export default {
         window.addEventListener('resize', function () {
           myChart.resize();
         });
-      });
     },
   },
 };

src/views/statistics/cost/components/consumeEcharts.vue

@@ -17,7 +17,7 @@ import * as echarts from 'echarts';
 import { brokenLineApi } from '@/api/dashboard';
 export default {
     name: 'consumeEcharts',
-    props:['quantity'],
+    props: ['quantity'],
     data() {
         return {
             lineData: [],
@@ -31,49 +31,47 @@ export default {
             window.open(href, '_blank');
         },
         inits() {
-            brokenLineApi().then((res) => {
+            console.log(this.quantity);
-                this.lineData = res;
+            let myChart = echarts.init(document.getElementById('consume-echarts'));
-                let myChart = echarts.init(document.getElementById('consume-echarts'));
+            let option = {
-                let option = {
+                title: {
-                    title: {
+                    text: '配件消耗数量TOP10',
-                        text: '配件消耗数量TOP10',
+                    left: 'center'
-                        left: 'center'
+                },
-                    },
+                color: ['#37A2FF'],
-                    color: ['#37A2FF'],
+                tooltip: {
-                    tooltip: {
+                    trigger: 'axis',
-                        trigger: 'axis',
+                    axisPointer: {
-                        axisPointer: {
+                        type: 'cross',
-                            type: 'cross',
+                        label: {
-                            label: {
+                            backgroundColor: '#6a7985',
-                                backgroundColor: '#6a7985',
-                            },
                         },
                     },
-                    toolbox: {
+                },
-                        feature: {
+                toolbox: {
-                            saveAsImage: {},
+                    feature: {
-                        },
+                        saveAsImage: {},
                     },
-                    xAxis: {
+                },
-                        type: 'category',
+                xAxis: {
-                        data: this.quantity.titArr
+                    type: 'category',
-                    },
+                    data: this.quantity.titArr
-                    yAxis: {
+                },
-                        type: 'value'
+                yAxis: {
-                    },
+                    type: 'value'
-                    series: [
+                },
-                        {
+                series: [
-                            data: this.quantity.numArr,
+                    {
-                            type: 'bar',
+                        data: this.quantity.numArr,
-                            barWidth: 30 // 设置宽度为类目宽度的50%
+                        type: 'bar',
-                        }
+                        barWidth: 30 // 设置宽度为类目宽度的50%
-                    ]
+                    }
-                };
+                ]
-                myChart.setOption(option);
+            };
-                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+            myChart.setOption(option);
-                window.addEventListener('resize', function () {
+            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
-                    myChart.resize();
+            window.addEventListener('resize', function () {
-                });
+                myChart.resize();
             });
         },
     },

src/views/statistics/cost/components/foldline.vue

@@ -20,7 +20,7 @@ import * as echarts from 'echarts';
 import { brokenLineApi } from '@/api/dashboard';
 export default {
   name: 'foldline',
-  props:['top20'],
+  props: ['top20'],
   data() {
     return {
       lineData: [],
@@ -34,52 +34,47 @@ export default {
       window.open(href, '_blank');
     },
     inits() {
-      brokenLineApi().then((res) => {
+      let myChart = echarts.init(document.getElementById('chart_example'));
-        // console.log(res, '数据---111');
-        this.lineData = res;
-
-        let myChart = echarts.init(document.getElementById('chart_example'));
         let option = {
           color: ['#80FFA5', '#37A2FF', '#FF0087'],
           title: {
             text: '配件采购金额TOP20',
           },
           color: ['#37A2FF'],
-                    tooltip: {
+          tooltip: {
-                        trigger: 'axis',
+            trigger: 'axis',
-                        axisPointer: {
+            axisPointer: {
-                            type: 'cross',
+              type: 'cross',
-                            label: {
+              label: {
-                                backgroundColor: '#6a7985',
+                backgroundColor: '#6a7985',
-                            },
+              },
-                        },
+            },
-                    },
+          },
-                    toolbox: {
+          toolbox: {
-                        feature: {
+            feature: {
-                            saveAsImage: {},
+              saveAsImage: {},
-                        },
+            },
-                    },
+          },
-                    xAxis: {
+          xAxis: {
-                        type: 'category',
+            type: 'category',
-                        data: this.top20.labels
+            data: this.top20.labels
-                    },
+          },
-                    yAxis: {
+          yAxis: {
-                        type: 'value'
+            type: 'value'
-                    },
+          },
-                    series: [
+          series: [
-                        {
+            {
-                            data: this.top20.values,
+              data: this.top20.values,
-                            type: 'bar',
+              type: 'bar',
-                            barWidth: 20 // 设置宽度为类目宽度的50%
+              barWidth: 20 // 设置宽度为类目宽度的50%
-                        }
+            }
-                    ]
+          ]
         };
         myChart.setOption(option);
         //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
         window.addEventListener('resize', function () {
           myChart.resize();
         });
-      });
     },
   },
 };

src/views/statistics/cost/index.vue

@@ -27,7 +27,7 @@
         <el-col :span="6">
           <div class="grid-content bg-purple">
             <div class="price"> ￥{{ totalCostVo.currentData }}元</div>
-            <div class="title">进店总台词</div>
+            <div class="title">总成本</div>
             <div class="percentage">
               <div :class="[totalCostVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
@@ -51,7 +51,7 @@
         <el-col :span="6">
           <div class="grid-content bg-purple">
             <div class="price"> ￥{{ directSupplyVo.currentData }}元</div>
-            <div class="title">维保产值</div>
+            <div class="title">直供配件</div>
             <div class="percentage">
               <div :class="[directSupplyVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
@@ -75,7 +75,7 @@
         <el-col :span="6">
           <div class="grid-content bg-purple">
             <div class="price"> ￥{{ procureVo.currentData }}元</div>
-            <div class="title">维保成本</div>
+            <div class="title">外采配件</div>
             <div class="percentage">
               <div :class="[procureVo.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
@@ -123,13 +123,13 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="12">
-          <AccessoryEcharts :pie="pie"></AccessoryEcharts>
+          <AccessoryEcharts ref="pie" :pie="pie"></AccessoryEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :quantity="quantity"></ConsumeEcharts>
+          <ConsumeEcharts ref="quantity" :quantity="quantity"></ConsumeEcharts>
         </el-col>
         <el-col :span="24">
-          <FoldLine :top20="top20"></FoldLine>
+          <FoldLine ref="top20" :top20="top20"></FoldLine>
         </el-col>
       </el-row>
 
@@ -186,17 +186,20 @@ export default {
     //top20
     monthlyAnalysisPiePurchaseFn() {
       monthlyAnalysisPiePurchase(this.tableFrom).then(res => {
+        console.log('top20',res);
         if (res) {
-          console.log(res);
           this.top20=res
         }
+        setTimeout(() => {
+          this.$refs.top20.inits()
+        }, 200);
       })
     },
     //获取图表数据
     monthlyAnalysisPieChartFn() {
       monthlyAnalysisPieChart(this.tableFrom).then(res => {
-        if (res) {
+        console.log('占比/top10',res);
-          this.pie = res.pie
+        if (res.quantity.length) {
           let arr3 = []
           let arr4 = []
           res.quantity.forEach(item => {
@@ -205,14 +208,19 @@ export default {
           })
           this.quantity.titArr = arr3
           this.quantity.numArr = arr4
-          console.log(this.quantity);
         }
+        if (res.pie.length) {
+          this.pie = res.pie
+        }
+        setTimeout(() => {
+          this.$refs.quantity.inits()
+          this.$refs.pie.inits()
+        }, 200);
       })
     },
     //获取数据
     monthlyAnalysisLatticeFn() {
       monthlyAnalysisLattice(this.tableFrom).then(res => {
-        // console.log(res);
         if (res) {
           //总成本
           this.totalCostVo = res.totalCostVo
@@ -231,7 +239,7 @@ export default {
       // console.log(e);
       this.tableFrom.dateLimit = e;
       this.timeVal = [];
-
+      this.init()
     },
     init() {
       this.monthlyAnalysisLatticeFn()

src/views/statistics/maintenance/accident.vue

@@ -123,39 +123,41 @@
       <!-- 四 -->
       <el-row :gutter="20">
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie1'" ref="pie1" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie2'" ref="pie2" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie3'" ref="pie3" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie4'" ref="pie4" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ average.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车产值</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[average.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[average.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ average.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[average.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[average.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ average.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -164,23 +166,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ averageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车产值</div>
-              <div>按照车型分</div>
+              <el-select v-model="modelName" placeholder="按照车型分" @change="changeAverageModelFn">
+                <el-option v-for="item in averageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[averageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[averageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[averageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[averageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -189,23 +196,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ averageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车产值</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="companyName" placeholder="按照所属公司分" @change="changeAverageCompanyFn">
+                <el-option v-for="item in averageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[averageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[averageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -216,42 +228,44 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie5'" ref="topOne" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie6'" ref="topTwo" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie7'" ref="pie5" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
         </el-col>
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie8'" ref="pie6" :title="'维保成本按所属公司占比'" :pieData="pieData6"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverage.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverage.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverage.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -260,23 +274,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
-              <div>按照车型分</div>
+              <el-select v-model="costModelName" placeholder="按照车型分" @change="costModelFn">
+                <el-option v-for="item in costAverageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -285,23 +304,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="costCompanyName" placeholder="按照所属公司分" @change="costCompanyFn">
+                <el-option v-for="item in costAverageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -312,42 +336,44 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie9'" ref="barOne" :title="'维保成本TOP10'" :barData="barOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie10'" ref="barTwo" :title="'维保成本配件使用数量TOP10'" :barData="barTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie11'" ref="pie7" :title="'维保利润按车型占比'" :pieData="pieData7"></AccessoryEcharts>
         </el-col>
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie12'" ref="pie8" :title="'维保利润按所属公司占比'" :pieData="pieData8"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverage.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverage.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverage.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -356,23 +382,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
-              <div>按照车型分</div>
+              <el-select v-model="profitModelName" placeholder="按照车型分" @change="profitModelFn">
+                <el-option v-for="item in profitAverageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -381,23 +412,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="profitCompanyName" placeholder="按照所属公司分" @change="profitCompanyFn">
+                <el-option v-for="item in profitAverageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -408,10 +444,10 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie13'" ref="profitOne" :title="'维保利润TOP5车型'" :barData="profitOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie14'" ref="profitTwo" :title="'维保利润TOP5公司'" :barData="profitTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
     </el-card>
@@ -420,7 +456,7 @@
 
 <script>
 import { merchantListApi } from "@/api/merchant"
-import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany } from "@/api/statistics.js"
+import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany, analysisCostLattice, analysisProfitLattice, modelandcompanyHistogram, profitModelandcompany, profitHistogram } from "@/api/statistics.js"
 import AccessoryEcharts from '../components/accessoryEcharts';
 import ConsumeEcharts from '../components/consumeEcharts';
 export default {
@@ -447,14 +483,79 @@ export default {
       //维保利润
       profit: {},
       //饼图1
-      pieData1:[],
+      pieData1: [],
       //饼图2
-      pieData2:[],
+      pieData2: [],
       //饼图3
-      pieData3:[],
+      pieData3: [],
       //饼图4
-      pieData4:[],
+      pieData4: [],
-
+      //饼图5
+      pieData5: [],
+      //饼图6
+      pieData6: [],
+      //饼图7
+      pieData7: [],
+      //饼图8
+      pieData8: [],
+      //z柱图1
+      topOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      topTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //维保成本top10
+      barOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      barTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //维保利润柱状图top5
+      profitOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      profitTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //第二栏选择
+      //维保单车产值
+      average: {},
+      //车型
+      averageModel: [],
+      averageModelData: {},
+      modelName: '',
+      //所属公司
+      averageCompany: [],
+      averageCompanyData: {},
+      companyName: '',
+      //维保成本格子图 //////////////////////////////
+      costAverage: {},
+      //所属公司
+      costAverageCompany: [],
+      costAverageCompanyData: {},
+      costCompanyName: '',
+      //车型
+      costAverageModel: [],
+      costAverageModelData: {},
+      costModelName: '',
+      //维保利润格子图 
+      profitAverage: {},
+      //所属公司
+      profitAverageCompany: [],
+      profitAverageCompanyData: {},
+      profitCompanyName: '',
+      //车型
+      profitAverageModel: [],
+      profitAverageModelData: {},
+      profitModelName: '',
     };
   },
   mounted() {
@@ -471,6 +572,20 @@ export default {
       this.maintenanceAnalysisCompanyFn()
       this.maintenanceAnalysisYieldModelFn()
       this.maintenanceAnalysisYieldCompanyFn()
+      this.yieldModelandcompanyFn()
+      //二栏格子
+      this.analysisAvgLatticeFn()
+      //成本饼图
+      this.costModelandcompanyFn()
+      //三栏格子图
+      this.analysisCostLatticeFn()
+      this.modelandcompanyHistogramFn()
+      //维保成本饼图
+      this.profitModelandcompanyFn()
+      //四栏格子图
+      this.analysisProfitLatticeFn()
+      //维保利润柱状图
+      this.profitHistogramFn()
     },
     //年月日
     selectChange(e) {
@@ -513,43 +628,249 @@ export default {
     maintenanceAnalysisLatticeFn() {
       maintenanceAnalysisLattice(this.tableFrom).then(res => {
         //进店总台次
-        this.frequency = res.frequency
+        if (res.frequency) {
+          this.frequency = res.frequency
+        }
         //维保产值
-        this.money = res.money
+        if (res.money) {
+          this.money = res.money
+        }
         //维保成本
-        this.accessory = res.accessory
+        if (res.accessory) {
+          this.accessory = res.accessory
+        }
         //维保利润
-        this.profit = res.profit
+        if (res.profit) {
+          this.profit = res.profit
+        }
+      })
+    },
+    //第二栏三个格子
+    analysisAvgLatticeFn() {
+      analysisAvgLattice(this.tableFrom).then(res => {
+        if (res.average) {
+          this.average = res.average
+        }
+        if (res.averageCompany.length) {
+          this.averageCompany = res.averageCompany
+          this.averageCompanyData = this.averageCompany[0]
+          this.companyName = this.averageCompany[0].name
+        }
+        if (res.averageModel.length) {
+          this.averageModel = res.averageModel
+          this.averageModelData = this.averageModel[0]
+          this.modelName = this.averageModel[0].name
+        }
+      })
+    },
+    //选择车型(产值)
+    changeAverageModelFn(e) {
+      this.averageModel.forEach(item => {
+        if (item.name == e) {
+          this.averageModelData = item
+        }
+      })
+    },
+    //选择所属公司
+    changeAverageCompanyFn(e) {
+      // console.log(e);
+      this.averageCompany.forEach(item => {
+        if (item.name == e) {
+          this.averageCompanyData = item
+        }
       })
     },
     //进店台次分车型占比
     maintenanceAnalysisModelRatioFn() {
       maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
-        this.pieData1=res
+        if (res.length) {
-        console.log(1, res);
+          this.pieData1 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie1.inits()
+        }, 200);
       })
     },
     //进店台次分所属公司占比
     maintenanceAnalysisCompanyFn() {
       maintenanceAnalysisCompany(this.tableFrom).then(res => {
-        console.log(2, res);
+        if (res.length) {
-        this.pieData2=res
+          this.pieData2 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie2.inits()
+        }, 200);
+
       })
     },
     //维保产值按车型占比
     maintenanceAnalysisYieldModelFn() {
       maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
-        console.log(3, res);
+        if (res.length) {
-        this.pieData3=res
+          this.pieData3 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie3.inits()
+        }, 200);
+
       })
     },
     //维保产值按所属公司占比
     maintenanceAnalysisYieldCompanyFn() {
       maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
-        console.log(4, res);
+        if (res.length) {
-        this.pieData4=res
+          this.pieData4 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie4.inits()
+        }, 200);
+
       })
     },
+    //top5车型,公司
+    yieldModelandcompanyFn() {
+      yieldModelandcompany(this.tableFrom).then(res => {
+        console.log('1111111111', res);
+        if (res.topOne) {
+          this.topOne = res.topOne
+          this.topTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.topOne.inits()
+          this.$refs.topTwo.inits()
+        }, 200);
+      })
+    },
+    //   维保成本占比车型/所属公司饼图
+    costModelandcompanyFn() {
+      costModelandcompany(this.tableFrom).then(res => {
+        if (res.companyPie) {
+          this.pieData6 = res.companyPie
+        }
+        if (res.modelPie) {
+          this.pieData5 = res.modelPie
+        }
+        setTimeout(() => {
+          this.$refs.pie5.inits()
+          this.$refs.pie6.inits()
+        }, 200);
+      })
+    },
+    //第三栏格子图 维保成本 
+    analysisCostLatticeFn() {
+      analysisCostLattice(this.tableFrom).then(res => {
+        if (res.average) {
+          this.costAverage = res.average
+        }
+        if (res.averageCompany.length) {
+          // console.log(1, true);
+          this.costAverageCompany = res.averageCompany
+          this.costAverageCompanyData = this.costAverageCompany[0]
+          this.costCompanyName = this.costAverageCompany[0].name
+        }
+        if (res.averageModel.length) {
+          // console.log(true);
+          this.costAverageModel = res.averageModel
+          this.costAverageModelData = this.costAverageModel[0]
+          this.costModelName = this.costAverageModel[0].name
+        }
+      })
+    },
+    //选择车型(成本)
+    costModelFn(e) {
+      this.costAverageModel.forEach(item => {
+        if (item.name == e) {
+          this.costAverageModelData = item
+        }
+      })
+    },
+    //选择所属公司(成本)
+    costCompanyFn(e) {
+      this.costAverageCompany.forEach(item => {
+        if (item.name == e) {
+          this.costAverageCompanyData = item
+        }
+      })
+    },
+    //维保成本top10和维保使用配件数量top10公司柱状图 
+    modelandcompanyHistogramFn() {
+      modelandcompanyHistogram(this.tableFrom).then(res => {
+        console.log('top10', res);
+        if (res.topOne) {
+          this.barOne = res.topOne
+          this.barTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.barOne.inits()
+          this.$refs.barTwo.inits()
+        }, 200);
+      })
+    },
+    //维保成本饼图
+    profitModelandcompanyFn() {
+      profitModelandcompany(this.tableFrom).then(res => {
+        // console.log('饼图', res);
+        if (res.companyPie) {
+          this.pieData8 = res.companyPie
+        }
+        if (res.modelPie) {
+          this.pieData7 = res.modelPie
+        }
+        setTimeout(() => {
+          this.$refs.pie7.inits()
+          this.$refs.pie8.inits()
+        }, 200);
+      })
+    },
+
+    //第四栏格子图 维保利润
+    analysisProfitLatticeFn() {
+      analysisProfitLattice(this.tableFrom).then(res => {
+        // console.log('撒结婚登记卡死', res);
+        this.profitAverage = res.average
+
+        if (res.company.length) {
+          this.profitAverageCompany = res.company
+          this.profitAverageCompanyData = this.profitAverageCompany[0]
+          this.profitCompanyName = this.profitAverageCompany[0].name
+        }
+        if (res.model.length) {
+          this.profitAverageModel = res.model
+          this.profitAverageModelData = this.profitAverageModel[0]
+          this.profitModelName = this.profitAverageModel[0].name
+        }
+      })
+    },
+    //选择车型(利润)
+    profitModelFn(e) {
+      this.profitAverageModel.forEach(item => {
+        if (item.name == e) {
+          this.profitAverageModelData = item
+        }
+      })
+    },
+    //选择所属公司(利润)
+    profitCompanyFn(e) {
+      this.profitAverageCompany.forEach(item => {
+        if (item.name == e) {
+          this.profitAverageCompanyData = item
+        }
+      })
+    },
+    //维保利润(柱状图)
+    profitHistogramFn() {
+      profitHistogram(this.tableFrom).then(res => {
+        console.log(res);
+        if (res.topOne) {
+          this.profitOne = res.topOne
+          this.profitTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.profitOne.inits()
+          this.$refs.profitTwo.inits()
+        }, 200);
+      })
+    }
   }
 };
 </script>

src/views/statistics/maintenance/index.vue

@@ -123,16 +123,16 @@
       <!-- 四 -->
       <el-row :gutter="20">
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie1'" ref="pie1" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie2'" ref="pie2" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie3'" ref="pie3" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie4'" ref="pie4" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
@@ -228,42 +228,44 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie5'" ref="topOne" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie6'" ref="topTwo" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'" :pieData="pieData"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie7'" ref="pie5" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
         </el-col>
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'" :pieData="pieData"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie8'" ref="pie6" :title="'维保成本按所属公司占比'" :pieData="pieData6"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverage.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverage.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverage.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -272,23 +274,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
-              <div>按照车型分</div>
+              <el-select v-model="costModelName" placeholder="按照车型分" @change="costModelFn">
+                <el-option v-for="item in costAverageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -297,23 +304,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="costCompanyName" placeholder="按照所属公司分" @change="costCompanyFn">
+                <el-option v-for="item in costAverageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -324,42 +336,44 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'" :barData="topOne"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie9'" ref="barOne" :title="'维保成本TOP10'" :barData="barOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'" :barData="topOne"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie10'" ref="barTwo" :title="'维保成本配件使用数量TOP10'" :barData="barTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'" :pieData="pieData"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie11'" ref="pie7" :title="'维保利润按车型占比'" :pieData="pieData7"></AccessoryEcharts>
         </el-col>
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'" :pieData="pieData"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie12'" ref="pie8" :title="'维保利润按所属公司占比'" :pieData="pieData8"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverage.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverage.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverage.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -368,23 +382,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
-              <div>按照车型分</div>
+              <el-select v-model="profitModelName" placeholder="按照车型分" @change="profitModelFn">
+                <el-option v-for="item in profitAverageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -393,23 +412,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="profitCompanyName" placeholder="按照所属公司分" @change="profitCompanyFn">
+                <el-option v-for="item in profitAverageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -420,10 +444,10 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'" :barData="topOne"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie13'" ref="profitOne" :title="'维保利润TOP5车型'" :barData="profitOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'" :barData="topOne"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie14'" ref="profitTwo" :title="'维保利润TOP5公司'" :barData="profitTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
     </el-card>
@@ -432,7 +456,7 @@
 
 <script>
 import { merchantListApi } from "@/api/merchant"
-import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany } from "@/api/statistics.js"
+import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany, analysisCostLattice, analysisProfitLattice, modelandcompanyHistogram, profitModelandcompany, profitHistogram } from "@/api/statistics.js"
 import AccessoryEcharts from '../components/accessoryEcharts';
 import ConsumeEcharts from '../components/consumeEcharts';
 export default {
@@ -466,20 +490,14 @@ export default {
       pieData3: [],
       //饼图4
       pieData4: [],
-      //饼图默认数据
+      //饼图5
-      pieData: [{
+      pieData5: [],
-        name: '一',
+      //饼图6
-        value: 10
+      pieData6: [],
-      }, {
+      //饼图7
-        name: '二',
+      pieData7: [],
-        value: 20
+      //饼图8
-      }, {
+      pieData8: [],
-        name: '三',
-        value: 30
-      }, {
-        name: '四',
-        value: 40
-      }],
       //z柱图1
       topOne: {
         labels: ['一', '二', '三', '四'],
@@ -489,6 +507,24 @@ export default {
         labels: ['一', '二', '三', '四'],
         values: [10, 20, 30, 40]
       },
+      //维保成本top10
+      barOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      barTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //维保利润柱状图top5
+      profitOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      profitTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
       //第二栏选择
       //维保单车产值
       average: {},
@@ -499,7 +535,27 @@ export default {
       //所属公司
       averageCompany: [],
       averageCompanyData: {},
-      companyName: ''
+      companyName: '',
+      //维保成本格子图 //////////////////////////////
+      costAverage: {},
+      //所属公司
+      costAverageCompany: [],
+      costAverageCompanyData: {},
+      costCompanyName: '',
+      //车型
+      costAverageModel: [],
+      costAverageModelData: {},
+      costModelName: '',
+      //维保利润格子图 
+      profitAverage: {},
+      //所属公司
+      profitAverageCompany: [],
+      profitAverageCompanyData: {},
+      profitCompanyName: '',
+      //车型
+      profitAverageModel: [],
+      profitAverageModelData: {},
+      profitModelName: '',
     };
   },
   mounted() {
@@ -521,6 +577,15 @@ export default {
       this.analysisAvgLatticeFn()
       //成本饼图
       this.costModelandcompanyFn()
+      //三栏格子图
+      this.analysisCostLatticeFn()
+      this.modelandcompanyHistogramFn()
+      //维保成本饼图
+      this.profitModelandcompanyFn()
+      //四栏格子图
+      this.analysisProfitLatticeFn()
+      //维保利润柱状图
+      this.profitHistogramFn()
     },
     //年月日
     selectChange(e) {
@@ -563,37 +628,43 @@ export default {
     maintenanceAnalysisLatticeFn() {
       maintenanceAnalysisLattice(this.tableFrom).then(res => {
         //进店总台次
-        this.frequency = res.frequency
+        if (res.frequency) {
+          this.frequency = res.frequency
+        }
         //维保产值
-        this.money = res.money
+        if (res.money) {
+          this.money = res.money
+        }
         //维保成本
-        this.accessory = res.accessory
+        if (res.accessory) {
+          this.accessory = res.accessory
+        }
         //维保利润
-        this.profit = res.profit
+        if (res.profit) {
+          this.profit = res.profit
+        }
       })
     },
     //第二栏三个格子
     analysisAvgLatticeFn() {
       analysisAvgLattice(this.tableFrom).then(res => {
-        console.log('二蓝壳子', res);
         if (res.average) {
           this.average = res.average
         }
-        if (res.averageCompany) {
+        if (res.averageCompany.length) {
           this.averageCompany = res.averageCompany
           this.averageCompanyData = this.averageCompany[0]
           this.companyName = this.averageCompany[0].name
         }
-        if (res.averageModel) {
+        if (res.averageModel.length) {
           this.averageModel = res.averageModel
           this.averageModelData = this.averageModel[0]
           this.modelName = this.averageModel[0].name
         }
       })
     },
-    //选择车型
+    //选择车型(产值)
     changeAverageModelFn(e) {
-      console.log(e);
       this.averageModel.forEach(item => {
         if (item.name == e) {
           this.averageModelData = item
@@ -602,7 +673,7 @@ export default {
     },
     //选择所属公司
     changeAverageCompanyFn(e) {
-      console.log(e);
+      // console.log(e);
       this.averageCompany.forEach(item => {
         if (item.name == e) {
           this.averageCompanyData = item
@@ -614,9 +685,10 @@ export default {
       maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
         if (res.length) {
           this.pieData1 = res
-        } else {
-          this.pieData1 = this.pieData
         }
+        setTimeout(() => {
+          this.$refs.pie1.inits()
+        }, 200);
       })
     },
     //进店台次分所属公司占比
@@ -624,9 +696,11 @@ export default {
       maintenanceAnalysisCompany(this.tableFrom).then(res => {
         if (res.length) {
           this.pieData2 = res
-        } else {
-          this.pieData2 = this.pieData
         }
+        setTimeout(() => {
+          this.$refs.pie2.inits()
+        }, 200);
+
       })
     },
     //维保产值按车型占比
@@ -634,9 +708,11 @@ export default {
       maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
         if (res.length) {
           this.pieData3 = res
-        } else {
-          this.pieData3 = this.pieData
         }
+        setTimeout(() => {
+          this.$refs.pie3.inits()
+        }, 200);
+
       })
     },
     //维保产值按所属公司占比
@@ -644,30 +720,155 @@ export default {
       maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
         if (res.length) {
           this.pieData4 = res
-        } else {
-          this.pieData4 = this.pieData
         }
+        setTimeout(() => {
+          this.$refs.pie4.inits()
+        }, 200);
+
       })
     },
     //top5车型,公司
     yieldModelandcompanyFn() {
       yieldModelandcompany(this.tableFrom).then(res => {
+        console.log('1111111111', res);
         if (res.topOne) {
           this.topOne = res.topOne
           this.topTwo = res.topTwo
         }
+        setTimeout(() => {
+          this.$refs.topOne.inits()
+          this.$refs.topTwo.inits()
+        }, 200);
       })
     },
     //   维保成本占比车型/所属公司饼图
     costModelandcompanyFn() {
       costModelandcompany(this.tableFrom).then(res => {
-        console.log('撒结婚登记卡死', res);
         if (res.companyPie) {
           this.pieData6 = res.companyPie
         }
         if (res.modelPie) {
           this.pieData5 = res.modelPie
         }
+        setTimeout(() => {
+          this.$refs.pie5.inits()
+          this.$refs.pie6.inits()
+        }, 200);
+      })
+    },
+    //第三栏格子图 维保成本 
+    analysisCostLatticeFn() {
+      analysisCostLattice(this.tableFrom).then(res => {
+        if (res.average) {
+          this.costAverage = res.average
+        }
+        if (res.averageCompany.length) {
+          // console.log(1, true);
+          this.costAverageCompany = res.averageCompany
+          this.costAverageCompanyData = this.costAverageCompany[0]
+          this.costCompanyName = this.costAverageCompany[0].name
+        }
+        if (res.averageModel.length) {
+          // console.log(true);
+          this.costAverageModel = res.averageModel
+          this.costAverageModelData = this.costAverageModel[0]
+          this.costModelName = this.costAverageModel[0].name
+        }
+      })
+    },
+    //选择车型(成本)
+    costModelFn(e) {
+      this.costAverageModel.forEach(item => {
+        if (item.name == e) {
+          this.costAverageModelData = item
+        }
+      })
+    },
+    //选择所属公司(成本)
+    costCompanyFn(e) {
+      this.costAverageCompany.forEach(item => {
+        if (item.name == e) {
+          this.costAverageCompanyData = item
+        }
+      })
+    },
+    //维保成本top10和维保使用配件数量top10公司柱状图 
+    modelandcompanyHistogramFn() {
+      modelandcompanyHistogram(this.tableFrom).then(res => {
+        console.log('top10', res);
+        if (res.topOne) {
+          this.barOne = res.topOne
+          this.barTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.barOne.inits()
+          this.$refs.barTwo.inits()
+        }, 200);
+      })
+    },
+    //维保成本饼图
+    profitModelandcompanyFn() {
+      profitModelandcompany(this.tableFrom).then(res => {
+        // console.log('饼图', res);
+        if (res.companyPie) {
+          this.pieData8 = res.companyPie
+        }
+        if (res.modelPie) {
+          this.pieData7 = res.modelPie
+        }
+        setTimeout(() => {
+          this.$refs.pie7.inits()
+          this.$refs.pie8.inits()
+        }, 200);
+      })
+    },
+
+    //第四栏格子图 维保利润
+    analysisProfitLatticeFn() {
+      analysisProfitLattice(this.tableFrom).then(res => {
+        // console.log('撒结婚登记卡死', res);
+        this.profitAverage = res.average
+
+        if (res.company.length) {
+          this.profitAverageCompany = res.company
+          this.profitAverageCompanyData = this.profitAverageCompany[0]
+          this.profitCompanyName = this.profitAverageCompany[0].name
+        }
+        if (res.model.length) {
+          this.profitAverageModel = res.model
+          this.profitAverageModelData = this.profitAverageModel[0]
+          this.profitModelName = this.profitAverageModel[0].name
+        }
+      })
+    },
+    //选择车型(利润)
+    profitModelFn(e) {
+      this.profitAverageModel.forEach(item => {
+        if (item.name == e) {
+          this.profitAverageModelData = item
+        }
+      })
+    },
+    //选择所属公司(利润)
+    profitCompanyFn(e) {
+      this.profitAverageCompany.forEach(item => {
+        if (item.name == e) {
+          this.profitAverageCompanyData = item
+        }
+      })
+    },
+    //维保利润(柱状图)
+    profitHistogramFn() {
+      profitHistogram(this.tableFrom).then(res => {
+        console.log(res);
+        if (res.topOne) {
+          this.profitOne = res.topOne
+          this.profitTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.profitOne.inits()
+          this.$refs.profitTwo.inits()
+        }, 200);
       })
     }
   }

src/views/statistics/maintenance/return_cat.vue

@@ -123,39 +123,41 @@
       <!-- 四 -->
       <el-row :gutter="20">
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie1'" ref="pie1" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie2'" ref="pie2" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie3'" ref="pie3" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
         </el-col>
         <el-col :span="6">
-          <AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie4'" ref="pie4" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ average.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车产值</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[average.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[average.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ average.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[average.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[average.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ average.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -164,23 +166,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ averageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车产值</div>
-              <div>按照车型分</div>
+              <el-select v-model="modelName" placeholder="按照车型分" @change="changeAverageModelFn">
+                <el-option v-for="item in averageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[averageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[averageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[averageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[averageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -189,23 +196,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ averageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车产值</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="companyName" placeholder="按照所属公司分" @change="changeAverageCompanyFn">
+                <el-option v-for="item in averageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[averageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[averageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ averageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -216,42 +228,44 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie5'" ref="topOne" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie6'" ref="topTwo" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie7'" :title="'维保成本按车型占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie7'" ref="pie5" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
         </el-col>
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie8'" ref="pie6" :title="'维保成本按所属公司占比'" :pieData="pieData6"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverage.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverage.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverage.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -260,23 +274,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
-              <div>按照车型分</div>
+              <el-select v-model="costModelName" placeholder="按照车型分" @change="costModelFn">
+                <el-option v-for="item in costAverageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -285,23 +304,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ costAverageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车成本</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="costCompanyName" placeholder="按照所属公司分" @change="costCompanyFn">
+                <el-option v-for="item in costAverageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[costAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[costAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ costAverageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -312,42 +336,44 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie9'" :title="'维保成本TOP10'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie9'" ref="barOne" :title="'维保成本TOP10'" :barData="barOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie10'" :title="'维保成本配件使用数量TOP10'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie10'" ref="barTwo" :title="'维保成本配件使用数量TOP10'" :barData="barTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie11'" :title="'维保利润按车型占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie11'" ref="pie7" :title="'维保利润按车型占比'" :pieData="pieData7"></AccessoryEcharts>
         </el-col>
         <el-col :span="12">
-          <AccessoryEcharts :id="'pie12'" :title="'维保利润按所属公司占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie12'" ref="pie8" :title="'维保利润按所属公司占比'" :pieData="pieData8"></AccessoryEcharts>
         </el-col>
       </el-row>
       <!-- 三 -->
       <el-row :gutter="20">
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverage.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
               <div>平均单车</div>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverage.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverage.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -356,23 +382,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverageModelData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
-              <div>按照车型分</div>
+              <el-select v-model="profitModelName" placeholder="按照车型分" @change="profitModelFn">
+                <el-option v-for="item in profitAverageModel" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageModelData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageModelData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -381,23 +412,28 @@
         </el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple">
-            <div class="price"> ￥34500元</div>
+            <div class="price"> ￥{{ profitAverageCompanyData.currentData }}元</div>
             <div class="title flex space-between">
               <div>维保单车利润</div>
-              <div>按照所属公司分</div>
+              <el-select v-model="profitCompanyName" placeholder="按照所属公司分" @change="profitCompanyFn">
+                <el-option v-for="item in profitAverageCompany" :key="item.id" :label="item.name" :value="item.name">
+                </el-option>
+              </el-select>
             </div>
             <div class="percentage">
-              <div class="percentage-s">
+              <div :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-top" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageCompanyData.yearOnYear }}%
                 </p>
                 同比
               </div>
-              <div class="percentage-j">
+              <div :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
                 <p>
-                  <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                  <i :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                  34.5%
+                    style="font-weight: 700;"></i>
+                  {{ profitAverageCompanyData.linkRelativeRatio }}%
                 </p>
                 环比
               </div>
@@ -408,10 +444,10 @@
       <!-- 二 -->
       <el-row :gutter="20">
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie13'" :title="'维保利润TOP5车型'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie13'" ref="profitOne" :title="'维保利润TOP5车型'" :barData="profitOne"></ConsumeEcharts>
         </el-col>
         <el-col :span="12">
-          <ConsumeEcharts :id="'pie14'" :title="'维保利润TOP5公司'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie14'" ref="profitTwo" :title="'维保利润TOP5公司'" :barData="profitTwo"></ConsumeEcharts>
         </el-col>
       </el-row>
     </el-card>
@@ -420,7 +456,7 @@
 
 <script>
 import { merchantListApi } from "@/api/merchant"
-import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany } from "@/api/statistics.js"
+import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany, analysisCostLattice, analysisProfitLattice, modelandcompanyHistogram, profitModelandcompany, profitHistogram } from "@/api/statistics.js"
 import AccessoryEcharts from '../components/accessoryEcharts';
 import ConsumeEcharts from '../components/consumeEcharts';
 export default {
@@ -447,14 +483,79 @@ export default {
       //维保利润
       profit: {},
       //饼图1
-      pieData1:[],
+      pieData1: [],
       //饼图2
-      pieData2:[],
+      pieData2: [],
       //饼图3
-      pieData3:[],
+      pieData3: [],
       //饼图4
-      pieData4:[],
+      pieData4: [],
-
+      //饼图5
+      pieData5: [],
+      //饼图6
+      pieData6: [],
+      //饼图7
+      pieData7: [],
+      //饼图8
+      pieData8: [],
+      //z柱图1
+      topOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      topTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //维保成本top10
+      barOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      barTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //维保利润柱状图top5
+      profitOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      profitTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //第二栏选择
+      //维保单车产值
+      average: {},
+      //车型
+      averageModel: [],
+      averageModelData: {},
+      modelName: '',
+      //所属公司
+      averageCompany: [],
+      averageCompanyData: {},
+      companyName: '',
+      //维保成本格子图 //////////////////////////////
+      costAverage: {},
+      //所属公司
+      costAverageCompany: [],
+      costAverageCompanyData: {},
+      costCompanyName: '',
+      //车型
+      costAverageModel: [],
+      costAverageModelData: {},
+      costModelName: '',
+      //维保利润格子图 
+      profitAverage: {},
+      //所属公司
+      profitAverageCompany: [],
+      profitAverageCompanyData: {},
+      profitCompanyName: '',
+      //车型
+      profitAverageModel: [],
+      profitAverageModelData: {},
+      profitModelName: '',
     };
   },
   mounted() {
@@ -471,6 +572,20 @@ export default {
       this.maintenanceAnalysisCompanyFn()
       this.maintenanceAnalysisYieldModelFn()
       this.maintenanceAnalysisYieldCompanyFn()
+      this.yieldModelandcompanyFn()
+      //二栏格子
+      this.analysisAvgLatticeFn()
+      //成本饼图
+      this.costModelandcompanyFn()
+      //三栏格子图
+      this.analysisCostLatticeFn()
+      this.modelandcompanyHistogramFn()
+      //维保成本饼图
+      this.profitModelandcompanyFn()
+      //四栏格子图
+      this.analysisProfitLatticeFn()
+      //维保利润柱状图
+      this.profitHistogramFn()
     },
     //年月日
     selectChange(e) {
@@ -513,43 +628,249 @@ export default {
     maintenanceAnalysisLatticeFn() {
       maintenanceAnalysisLattice(this.tableFrom).then(res => {
         //进店总台次
-        this.frequency = res.frequency
+        if (res.frequency) {
+          this.frequency = res.frequency
+        }
         //维保产值
-        this.money = res.money
+        if (res.money) {
+          this.money = res.money
+        }
         //维保成本
-        this.accessory = res.accessory
+        if (res.accessory) {
+          this.accessory = res.accessory
+        }
         //维保利润
-        this.profit = res.profit
+        if (res.profit) {
+          this.profit = res.profit
+        }
+      })
+    },
+    //第二栏三个格子
+    analysisAvgLatticeFn() {
+      analysisAvgLattice(this.tableFrom).then(res => {
+        if (res.average) {
+          this.average = res.average
+        }
+        if (res.averageCompany.length) {
+          this.averageCompany = res.averageCompany
+          this.averageCompanyData = this.averageCompany[0]
+          this.companyName = this.averageCompany[0].name
+        }
+        if (res.averageModel.length) {
+          this.averageModel = res.averageModel
+          this.averageModelData = this.averageModel[0]
+          this.modelName = this.averageModel[0].name
+        }
+      })
+    },
+    //选择车型(产值)
+    changeAverageModelFn(e) {
+      this.averageModel.forEach(item => {
+        if (item.name == e) {
+          this.averageModelData = item
+        }
+      })
+    },
+    //选择所属公司
+    changeAverageCompanyFn(e) {
+      // console.log(e);
+      this.averageCompany.forEach(item => {
+        if (item.name == e) {
+          this.averageCompanyData = item
+        }
       })
     },
     //进店台次分车型占比
     maintenanceAnalysisModelRatioFn() {
       maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
-        this.pieData1=res
+        if (res.length) {
-        console.log(1, res);
+          this.pieData1 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie1.inits()
+        }, 200);
       })
     },
     //进店台次分所属公司占比
     maintenanceAnalysisCompanyFn() {
       maintenanceAnalysisCompany(this.tableFrom).then(res => {
-        console.log(2, res);
+        if (res.length) {
-        this.pieData2=res
+          this.pieData2 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie2.inits()
+        }, 200);
+
       })
     },
     //维保产值按车型占比
     maintenanceAnalysisYieldModelFn() {
       maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
-        console.log(3, res);
+        if (res.length) {
-        this.pieData3=res
+          this.pieData3 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie3.inits()
+        }, 200);
+
       })
     },
     //维保产值按所属公司占比
     maintenanceAnalysisYieldCompanyFn() {
       maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
-        console.log(4, res);
+        if (res.length) {
-        this.pieData4=res
+          this.pieData4 = res
+        }
+        setTimeout(() => {
+          this.$refs.pie4.inits()
+        }, 200);
+
       })
     },
+    //top5车型,公司
+    yieldModelandcompanyFn() {
+      yieldModelandcompany(this.tableFrom).then(res => {
+        console.log('1111111111', res);
+        if (res.topOne) {
+          this.topOne = res.topOne
+          this.topTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.topOne.inits()
+          this.$refs.topTwo.inits()
+        }, 200);
+      })
+    },
+    //   维保成本占比车型/所属公司饼图
+    costModelandcompanyFn() {
+      costModelandcompany(this.tableFrom).then(res => {
+        if (res.companyPie) {
+          this.pieData6 = res.companyPie
+        }
+        if (res.modelPie) {
+          this.pieData5 = res.modelPie
+        }
+        setTimeout(() => {
+          this.$refs.pie5.inits()
+          this.$refs.pie6.inits()
+        }, 200);
+      })
+    },
+    //第三栏格子图 维保成本 
+    analysisCostLatticeFn() {
+      analysisCostLattice(this.tableFrom).then(res => {
+        if (res.average) {
+          this.costAverage = res.average
+        }
+        if (res.averageCompany.length) {
+          // console.log(1, true);
+          this.costAverageCompany = res.averageCompany
+          this.costAverageCompanyData = this.costAverageCompany[0]
+          this.costCompanyName = this.costAverageCompany[0].name
+        }
+        if (res.averageModel.length) {
+          // console.log(true);
+          this.costAverageModel = res.averageModel
+          this.costAverageModelData = this.costAverageModel[0]
+          this.costModelName = this.costAverageModel[0].name
+        }
+      })
+    },
+    //选择车型(成本)
+    costModelFn(e) {
+      this.costAverageModel.forEach(item => {
+        if (item.name == e) {
+          this.costAverageModelData = item
+        }
+      })
+    },
+    //选择所属公司(成本)
+    costCompanyFn(e) {
+      this.costAverageCompany.forEach(item => {
+        if (item.name == e) {
+          this.costAverageCompanyData = item
+        }
+      })
+    },
+    //维保成本top10和维保使用配件数量top10公司柱状图 
+    modelandcompanyHistogramFn() {
+      modelandcompanyHistogram(this.tableFrom).then(res => {
+        console.log('top10', res);
+        if (res.topOne) {
+          this.barOne = res.topOne
+          this.barTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.barOne.inits()
+          this.$refs.barTwo.inits()
+        }, 200);
+      })
+    },
+    //维保成本饼图
+    profitModelandcompanyFn() {
+      profitModelandcompany(this.tableFrom).then(res => {
+        // console.log('饼图', res);
+        if (res.companyPie) {
+          this.pieData8 = res.companyPie
+        }
+        if (res.modelPie) {
+          this.pieData7 = res.modelPie
+        }
+        setTimeout(() => {
+          this.$refs.pie7.inits()
+          this.$refs.pie8.inits()
+        }, 200);
+      })
+    },
+
+    //第四栏格子图 维保利润
+    analysisProfitLatticeFn() {
+      analysisProfitLattice(this.tableFrom).then(res => {
+        // console.log('撒结婚登记卡死', res);
+        this.profitAverage = res.average
+
+        if (res.company.length) {
+          this.profitAverageCompany = res.company
+          this.profitAverageCompanyData = this.profitAverageCompany[0]
+          this.profitCompanyName = this.profitAverageCompany[0].name
+        }
+        if (res.model.length) {
+          this.profitAverageModel = res.model
+          this.profitAverageModelData = this.profitAverageModel[0]
+          this.profitModelName = this.profitAverageModel[0].name
+        }
+      })
+    },
+    //选择车型(利润)
+    profitModelFn(e) {
+      this.profitAverageModel.forEach(item => {
+        if (item.name == e) {
+          this.profitAverageModelData = item
+        }
+      })
+    },
+    //选择所属公司(利润)
+    profitCompanyFn(e) {
+      this.profitAverageCompany.forEach(item => {
+        if (item.name == e) {
+          this.profitAverageCompanyData = item
+        }
+      })
+    },
+    //维保利润(柱状图)
+    profitHistogramFn() {
+      profitHistogram(this.tableFrom).then(res => {
+        console.log(res);
+        if (res.topOne) {
+          this.profitOne = res.topOne
+          this.profitTwo = res.topTwo
+        }
+        setTimeout(() => {
+          this.$refs.profitOne.inits()
+          this.$refs.profitTwo.inits()
+        }, 200);
+      })
+    }
   }
 };
 </script>