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

.env.development

@@ -8,7 +8,7 @@ ENV = 'development'
 # 花花
 # VUE_APP_BASE_API = 'http://192.168.31.16:8080/car_admin_api'
 # 薛磊
- VUE_APP_BASE_API = 'http://192.168.31.233:8080/car_admin_api'
+ VUE_APP_BASE_API = 'http://192.168.31.226:8080/car_admin_api'
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.
 # It only does one thing by converting all import() to require().

src/api/statistics.js

@@ -89,6 +89,15 @@ export function maintenanceAnalysisYieldCompany(data) {
   });
 }
 
+//维保产值(第二栏格子图) //api/admin/platform/monthly/maintenance/analysis/avg/lattice
+export function analysisAvgLattice(data) {
+  return request({
+    url: '/admin/platform/monthly/maintenance/analysis/avg/lattice',
+    method: 'post',
+    data,
+  });
+}
+
 //维保产值top5和维保产值top公司柱状图 //api/admin/platform/monthly/maintenance/analysis/yield/modelandcompany
 export function yieldModelandcompany(data) {
   return request({
@@ -98,3 +107,12 @@ 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/histogram',
+    method: 'post',
+    data,
+  });
+}
+

src/views/statistics/maintenance/index.vue

@@ -139,23 +139,25 @@
       <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>
@@ -420,7 +432,7 @@
 
 <script>
 import { merchantListApi } from "@/api/merchant"
-import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany } from "@/api/statistics.js"
+import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany } from "@/api/statistics.js"
 import AccessoryEcharts from '../components/accessoryEcharts';
 import ConsumeEcharts from '../components/consumeEcharts';
 export default {
@@ -455,28 +467,39 @@ export default {
       //饼图4
       pieData4: [],
       //饼图默认数据
-      pieData:[{
+      pieData: [{
-        name:'一',
+        name: '一',
-        value:10
+        value: 10
-      },{
+      }, {
-        name:'二',
+        name: '二',
-        value:20
+        value: 20
-      },{
+      }, {
-        name:'三',
+        name: '三',
-        value:30
+        value: 30
-      },{
+      }, {
-        name:'四',
+        name: '四',
-        value:40
+        value: 40
       }],
       //z柱图1
-      topOne:{
+      topOne: {
-        labels:['一','二','三','四'],
+        labels: ['一', '二', '三', '四'],
-        values:[10,20,30,40]
+        values: [10, 20, 30, 40]
       },
-      topTwo:{ 
+      topTwo: {
-        labels:['一','二','三','四'],
+        labels: ['一', '二', '三', '四'],
-        values:[10,20,30,40]
+        values: [10, 20, 30, 40]
-      }
+      },
+      //第二栏选择
+      //维保单车产值
+      average: {},
+      //车型
+      averageModel: [],
+      averageModelData: {},
+      modelName: '',
+      //所属公司
+      averageCompany: [],
+      averageCompanyData: {},
+      companyName: ''
     };
   },
   mounted() {
@@ -494,6 +517,10 @@ export default {
       this.maintenanceAnalysisYieldModelFn()
       this.maintenanceAnalysisYieldCompanyFn()
       this.yieldModelandcompanyFn()
+      //二栏格子
+      this.analysisAvgLatticeFn()
+      //成本饼图
+      this.costModelandcompanyFn()
     },
     //年月日
     selectChange(e) {
@@ -545,52 +572,101 @@ export default {
         this.profit = res.profit
       })
     },
+    //第二栏三个格子
+    analysisAvgLatticeFn() {
+      analysisAvgLattice(this.tableFrom).then(res => {
+        console.log('二蓝壳子', res);
+        if (res.average) {
+          this.average = res.average
+        }
+        if (res.averageCompany) {
+          this.averageCompany = res.averageCompany
+          this.averageCompanyData = this.averageCompany[0]
+          this.companyName = this.averageCompany[0].name
+        }
+        if (res.averageModel) {
+          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
+        }
+      })
+    },
+    //选择所属公司
+    changeAverageCompanyFn(e) {
+      console.log(e);
+      this.averageCompany.forEach(item => {
+        if (item.name == e) {
+          this.averageCompanyData = item
+        }
+      })
+    },
     //进店台次分车型占比
     maintenanceAnalysisModelRatioFn() {
       maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
-        if(res.length){
+        if (res.length) {
           this.pieData1 = res
-        }else{
+        } else {
-          this.pieData1= this.pieData
+          this.pieData1 = this.pieData
         }
       })
     },
     //进店台次分所属公司占比
     maintenanceAnalysisCompanyFn() {
       maintenanceAnalysisCompany(this.tableFrom).then(res => {
-        if(res.length){
+        if (res.length) {
           this.pieData2 = res
-        }else{
+        } else {
-          this.pieData2= this.pieData
+          this.pieData2 = this.pieData
         }
       })
     },
     //维保产值按车型占比
     maintenanceAnalysisYieldModelFn() {
       maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
-        if(res.length){
+        if (res.length) {
           this.pieData3 = res
-        }else{
+        } else {
-          this.pieData3= this.pieData
+          this.pieData3 = this.pieData
         }
       })
     },
     //维保产值按所属公司占比
     maintenanceAnalysisYieldCompanyFn() {
       maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
-        if(res.length){
+        if (res.length) {
           this.pieData4 = res
-        }else{
+        } else {
-          this.pieData4= this.pieData
+          this.pieData4 = this.pieData
         }
       })
     },
-    //
+    //top5车型,公司
     yieldModelandcompanyFn() {
       yieldModelandcompany(this.tableFrom).then(res => {
-        if(res.topOne){
+        if (res.topOne) {
-          this.topOne=res.topOne
+          this.topOne = res.topOne
-          this.topTwo=res.topTwo
+          this.topTwo = res.topTwo
+        }
+      })
+    },
+    //   维保成本占比车型/所属公司饼图
+    costModelandcompanyFn() {
+      costModelandcompany(this.tableFrom).then(res => {
+        console.log('撒结婚登记卡死', res);
+        if (res.companyPie) {
+          this.pieData6 = res.companyPie
+        }
+        if (res.modelPie) {
+          this.pieData5 = res.modelPie
         }
       })
     }