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

2024-07-29 18:42:41 +08:00
parent 3da6ed836a
commit 426a13359b
4 changed files with 190 additions and 53 deletions
--- a/.env.development
+++ b/.env.development
@@ -6,7 +6,7 @@ ENV = 'development'
 # 正式
 # VUE_APP_BASE_API = 'https://cms.diyouzhijia.com/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().
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -81,6 +81,16 @@ export function maintenanceAnalysisYieldModel(data) {
    data,
  });
 }
+
+//维保产值(第二栏格子图) api/admin/merchant/monthly/maintenance/analysis/avg/lattice 
+export function analysisAvgLattice(data) {
+  return request({
+    url: '/admin/merchant/monthly/maintenance/analysis/avg/lattice',
+    method: 'post',
+    data,
+  });
+}
+
 //维保产值按所属公司占比 /api/admin/merchant/monthly/maintenance/analysis/yield/company
 export function maintenanceAnalysisYieldCompany(data) {
  return request({
@@ -88,4 +98,24 @@ export function maintenanceAnalysisYieldCompany(data) {
    method: 'post',
    data,
  });
-}
+}
+
+//维保产值top5和维保产值top公司柱状图 //api/admin/merchant/monthly/maintenance/analysis/yield/modelandcompany
+export function yieldModelandcompany(data) {
+  return request({
+    url: '/admin/merchant/monthly/maintenance/analysis/yield/modelandcompany',
+    method: 'post',
+    data,
+  });
+}
+
+//维保成本占比车型/所属公司饼图 /api/admin/merchant/monthly/maintenance/analysis/cost/modelandcompany
+export function costModelandcompany(data) {
+  return request({
+    url: '/admin/merchant/monthly/maintenance/analysis/cost/modelandcompany',
+    method: 'post',
+    data,
+  });
+}
+
+
--- a/src/views/statistics/components/consumeEcharts.vue
+++ b/src/views/statistics/components/consumeEcharts.vue
@@ -15,7 +15,20 @@ import * as echarts from 'echarts';
 import { brokenLineApi } from '@/api/dashboard';
 export default {
    name: 'consumeEcharts',
-    props: ['id', 'title'],
+    props: {
+        // ['id', 'title','barData']
+        id: {
+            type: String,
+        },
+        title: {
+            type: String,
+            default: '柱状图'
+        },
+        barData: {
+            type: Object,
+
+        },
+    },
    data() {
        return {
            lineData: [],
@@ -54,14 +67,14 @@ export default {
                    },
                    xAxis: {
                        type: 'category',
-                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',]
+                        data: this.barData.labels
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
-                            data: [200, 150, 130, 120, 110],
+                            data: this.barData.values,
                            type: 'bar',
                            barWidth: 20 // 设置宽度为类目宽度的50%
                        }
--- a/src/views/statistics/maintenance/index.vue
+++ b/src/views/statistics/maintenance/index.vue
@@ -49,8 +49,7 @@
            <div class="percentage">
              <div :class="[money.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                <p>
-                  <i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                    style="font-weight: 700;"></i>
+                  <i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']" style="font-weight: 700;"></i>
                  {{ money.yearOnYear }}%
                </p>
                同比
@@ -97,8 +96,7 @@
            <div class="percentage">
              <div :class="[profit.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
                <p>
-                  <i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
-                    style="font-weight: 700;"></i>
+                  <i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']" style="font-weight: 700;"></i>
                  {{ profit.yearOnYear }}%
                </p>
                同比
@@ -134,23 +132,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>
-                  34.5%
+                  <i :class="[average.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
+                    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>
-                  34.5%
+                  <i :class="[average.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
+                    style="font-weight: 700;"></i>
+                  {{ average.linkRelativeRatio }}%
                </p>
                环比
              </div>
@@ -159,23 +159,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>
-                  34.5%
+                  <i :class="[averageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
+                    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>
-                  34.5%
+                  <i :class="[averageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
+                    style="font-weight: 700;"></i>
+                  {{ averageModelData.linkRelativeRatio }}%
                </p>
                环比
              </div>
@@ -184,23 +189,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>
-                  34.5%
+                  <i :class="[averageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
+                    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>
-                  34.5%
+                  <i :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
+                    style="font-weight: 700;"></i>
+                  {{ averageCompanyData.linkRelativeRatio }}%
                </p>
                环比
              </div>
@@ -211,19 +221,19 @@
      <!-- 二 -->
      <el-row :gutter="20">
        <el-col :span="12">
-          <ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
        </el-col>
        <el-col :span="12">
-          <ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
+          <ConsumeEcharts :id="'pie6'" :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'" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
        </el-col>
        <el-col :span="12">
-          <AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'"></AccessoryEcharts>
+          <AccessoryEcharts :id="'pie8'" :title="'维保成本按所属公司占比'" :pieData="pieData6"></AccessoryEcharts>
        </el-col>
      </el-row>
      <!-- 三 -->
@@ -415,7 +425,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 } from "@/api/statistics.js"
 import AccessoryEcharts from '../components/accessoryEcharts';
 import ConsumeEcharts from '../components/consumeEcharts';
 export default {
@@ -431,7 +441,7 @@ export default {
      tableFrom: {
        page: 1,
        dateLimit: '',
-        type:1
+        type: 1
      },
      //进店总台次
      frequency: {},
@@ -441,14 +451,38 @@ export default {
      accessory: {},
      //维保利润
      profit: {},
-         //饼图1
-         pieData1:[],
+      //饼图1
+      pieData1: [],
      //饼图2
-      pieData2:[],
+      pieData2: [],
      //饼图3
-      pieData3:[],
+      pieData3: [],
      //饼图4
-      pieData4:[],
+      pieData4: [],
+      //饼图5
+      pieData5: [],
+      //饼图6
+      pieData6: [],
+      //z柱图1
+      topOne: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      topTwo: {
+        labels: ['一', '二', '三', '四'],
+        values: [10, 20, 30, 40]
+      },
+      //第二栏选择
+      //维保单车产值
+      average: {},
+      //车型
+      averageModel: [],
+      averageModelData: {},
+      modelName: '',
+      //所属公司
+      averageCompany: [],
+      averageCompanyData: {},
+      companyName: ''
    };
  },
  mounted() {
@@ -461,9 +495,18 @@ export default {
    // 初始化
    init() {
      this.maintenanceAnalysisLatticeFn()
+      this.maintenanceAnalysisModelRatioFn()
+      this.maintenanceAnalysisCompanyFn()
+      this.maintenanceAnalysisYieldModelFn()
+      this.maintenanceAnalysisYieldCompanyFn()
+      this.yieldModelandcompanyFn()
+      //二栏格子
+      this.analysisAvgLatticeFn()
+      //成本饼图
+      this.costModelandcompanyFn()
    },
-     //年月日
-     selectChange(e) {
+    //年月日
+    selectChange(e) {
      // console.log(e);
      this.tableFrom.dateLimit = e;
      this.timeVal = [];
@@ -498,34 +541,85 @@ export default {
        this.profit = res.profit
      })
    },
+    //第二栏三个格子
+    analysisAvgLatticeFn() {
+      analysisAvgLattice(this.tableFrom).then(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) {
+      this.averageModel.forEach(item => {
+        if (item.name == e) {
+          this.averageModelData = item
+        }
+      })
+    },
+    //选择所属公司
+    changeAverageCompanyFn(e) {
+      this.averageCompany.forEach(item => {
+        if (item.name == e) {
+          this.averageCompanyData = item
+        }
+      })
+    },
    //进店台次分车型占比
    maintenanceAnalysisModelRatioFn() {
      maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
-        this.pieData1=res
-        console.log(1, res);
+        this.pieData1 = res
      })
    },
    //进店台次分所属公司占比
    maintenanceAnalysisCompanyFn() {
      maintenanceAnalysisCompany(this.tableFrom).then(res => {
-        console.log(2, res);
-        this.pieData2=res
+        this.pieData2 = res
      })
    },
    //维保产值按车型占比
    maintenanceAnalysisYieldModelFn() {
      maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
-        console.log(3, res);
-        this.pieData3=res
+        this.pieData3 = res
      })
    },
    //维保产值按所属公司占比
    maintenanceAnalysisYieldCompanyFn() {
      maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
-        console.log(4, res);
-        this.pieData4=res
+        this.pieData4 = res
      })
    },
+    //top5车型,公司
+    yieldModelandcompanyFn() {
+      yieldModelandcompany(this.tableFrom).then(res => {
+        if (res.topOne) {
+          this.topOne = res.topOne
+          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
+        }
+      })
+    }
  }
 };
 </script>