7.24(月度分析

2024-07-24 18:42:06 +08:00
parent 3ed3edf6b6
commit 754a79a580
6 changed files with 262 additions and 149 deletions
--- a/src/api/statistics.js
+++ b/src/api/statistics.js
@@ -8,4 +8,12 @@ export function analysisLattice(data) {
    method: 'post',
    data,
  });
+}
+//按月统计 /api/admin/platform/business/analysis/line/chart
+export function analysisLineChart(data) {
+  return request({
+    url: '/admin/platform/business/analysis/line/chart',
+    method: 'post',
+    data,
+  });
 }
--- a/src/views/statistics/components/accessoryEcharts.vue
+++ b/src/views/statistics/components/accessoryEcharts.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="foldline">
-    <div class="divBox" style="padding-top: 0">
-      <el-row :gutter="24">
-        <el-col :xs="24" :sm="24" :md="24" :lg="24">
-          <el-card class="box-card2">
-            <div :id="id" style="width: 350px; height: 350px; padding-top: 25px"></div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
+  <div>
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24">
+        <el-card class="box-card2">
+          <div :id="id" style="width: 100%; height: 350px; padding-top: 25px"></div>
+        </el-card>
+      </el-col>
+    </el-row>
  </div>
 </template>

@@ -17,7 +15,7 @@ import * as echarts from 'echarts';
 import { brokenLineApi } from '@/api/dashboard';
 export default {
  name: 'accessoryEcharts',
-  props:['id','title'],
+  props: ['id', 'title'],
  data() {
    return {
      lineData: [],
@@ -71,13 +69,18 @@ export default {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+
                }
              }
            }
          ]
        };
        myChart.setOption(option);
+        myChart.resize({
+          // width: myChart.getWidth() * 0.5,
+          // height: myChart.getHeight() * 0.5
+        });
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener('resize', function () {
          myChart.resize();
--- a/src/views/statistics/components/consumeEcharts.vue
+++ b/src/views/statistics/components/consumeEcharts.vue
@@ -4,7 +4,7 @@
            <el-row :gutter="24">
                <el-col :xs="24" :sm="24" :md="24" :lg="24">
                    <el-card class="box-card2">
-                        <div id="consume-echarts" style="width: 1000px; height: 500px; padding-top: 25px"></div>
+                        <div :id="id" style="width: 100%;  height: 350px;  padding-top: 25px"></div>
                    </el-card>
                </el-col>
            </el-row>
@@ -17,6 +17,7 @@ import * as echarts from 'echarts';
 import { brokenLineApi } from '@/api/dashboard';
 export default {
    name: 'consumeEcharts',
+    props: ['id', 'title'],
    data() {
        return {
            lineData: [],
@@ -32,8 +33,12 @@ export default {
        inits() {
            brokenLineApi().then((res) => {
                this.lineData = res;
-                let myChart = echarts.init(document.getElementById('consume-echarts'));
+                let myChart = echarts.init(document.getElementById(this.id));
                let option = {
+                    title: {
+                        text: this.title,
+                        left: 'center'
+                    },
                    color: ['#37A2FF'],
                    tooltip: {
                        trigger: 'axis',
@@ -51,15 +56,16 @@ export default {
                    },
                    xAxis: {
                        type: 'category',
-                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Gro', 'Bll', 'Red',]
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
-                            data: [200, 150, 130, 120, 110, 96, 80, 70, 18, 12],
-                            type: 'bar'
+                            data: [200, 150, 130, 120, 110],
+                            type: 'bar',
+                            barWidth: 20 // 设置宽度为类目宽度的50%
                        }
                    ]
                };
--- a/src/views/statistics/maintenance/index.vue
+++ b/src/views/statistics/maintenance/index.vue
@@ -9,13 +9,15 @@
            <div class="percentage-s">
              <p>
                <i class="el-icon-top" style="font-weight: 700;"></i>
-                 34.5%</p>
+                34.5%
+              </p>
              同比
            </div>
            <div class="percentage-j">
              <p>
-                <i class="el-icon-bottom"style="font-weight: 700;"></i>
-                34.5%</p>
+                <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                34.5%
+              </p>
              环比
            </div>
          </div>
@@ -29,13 +31,15 @@
            <div class="percentage-s">
              <p>
                <i class="el-icon-top" style="font-weight: 700;"></i>
-                 34.5%</p>
+                34.5%
+              </p>
              同比
            </div>
            <div class="percentage-j">
              <p>
-                <i class="el-icon-bottom"style="font-weight: 700;"></i>
-                34.5%</p>
+                <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                34.5%
+              </p>
              环比
            </div>
          </div>
@@ -49,13 +53,15 @@
            <div class="percentage-s">
              <p>
                <i class="el-icon-top" style="font-weight: 700;"></i>
-                 34.5%</p>
+                34.5%
+              </p>
              同比
            </div>
            <div class="percentage-j">
              <p>
-                <i class="el-icon-bottom"style="font-weight: 700;"></i>
-                34.5%</p>
+                <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                34.5%
+              </p>
              环比
            </div>
          </div>
@@ -69,28 +75,120 @@
            <div class="percentage-s">
              <p>
                <i class="el-icon-top" style="font-weight: 700;"></i>
-                 34.5%</p>
+                34.5%
+              </p>
              同比
            </div>
            <div class="percentage-j">
              <p>
-                <i class="el-icon-bottom"style="font-weight: 700;"></i>
-                34.5%</p>
+                <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                34.5%
+              </p>
              环比
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
-    <div style="display: flex;">
-      <AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
-      <AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
-      <AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
-      <AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></AccessoryEcharts>
-    </div>
-    <div>
-      <!-- <ConsumeEcharts></ConsumeEcharts> -->
-    </div>
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <AccessoryEcharts :id="'pie1'" :title="'进店台次分车型占比'"></AccessoryEcharts>
+      </el-col>
+      <el-col :span="6">
+        <AccessoryEcharts :id="'pie2'" :title="'进店台次分所属公司占比'"></AccessoryEcharts>
+      </el-col>
+      <el-col :span="6">
+        <AccessoryEcharts :id="'pie3'" :title="'维保产值按车型占比'"></AccessoryEcharts>
+      </el-col>
+      <el-col :span="6">
+        <AccessoryEcharts :id="'pie4'" :title="'维保产值按所属公司占比'"></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="title flex space-between">
+            <div>维保单车产值</div>
+            <div>平均单车</div>
+          </div>
+          <div class="percentage">
+            <div class="percentage-s">
+              <p>
+                <i class="el-icon-top" style="font-weight: 700;"></i>
+                34.5%
+              </p>
+              同比
+            </div>
+            <div class="percentage-j">
+              <p>
+                <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                34.5%
+              </p>
+              环比
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple">
+          <div class="price"> ￥34500元</div>
+          <div class="title flex space-between">
+            <div>维保单车产值</div>
+            <div>按照车型分</div>
+          </div>
+          <div class="percentage">
+            <div class="percentage-s">
+              <p>
+                <i class="el-icon-top" style="font-weight: 700;"></i>
+                34.5%
+              </p>
+              同比
+            </div>
+            <div class="percentage-j">
+              <p>
+                <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                34.5%
+              </p>
+              环比
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple">
+          <div class="price"> ￥34500元</div>
+          <div class="title flex space-between">
+            <div>维保单车产值</div>
+            <div>按照所属分</div>
+          </div>
+          <div class="percentage">
+            <div class="percentage-s">
+              <p>
+                <i class="el-icon-top" style="font-weight: 700;"></i>
+                34.5%
+              </p>
+              同比
+            </div>
+            <div class="percentage-j">
+              <p>
+                <i class="el-icon-bottom" style="font-weight: 700;"></i>
+                34.5%
+              </p>
+              环比
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="12" >
+        <ConsumeEcharts :id="'pie5'" :title="'维保产值TOP5车型'" ></ConsumeEcharts>
+      </el-col>
+      <el-col :span="12" >
+        <ConsumeEcharts :id="'pie6'" :title="'维保产值TOP5公司'"></ConsumeEcharts>
+      </el-col>
+    </el-row>
  </div>
 </template>

@@ -99,7 +197,7 @@ import AccessoryEcharts from '../components/accessoryEcharts';
 import ConsumeEcharts from '../components/consumeEcharts';
 export default {
  name: 'Dashboard',
-  components: { AccessoryEcharts,ConsumeEcharts },
+  components: { AccessoryEcharts, ConsumeEcharts },
  data() {
    return {
    };
@@ -112,71 +210,88 @@ export default {
  }
 };
 </script>
-<style  scoped lang="scss">
+<style scoped lang="scss">
+.price {
+  font-size: 26px;
+  color: rgb(102, 154, 177);
+  font-weight: 700;
+}

-  .price{
-    font-size: 26px;
-    color: rgb(102, 154, 177);
-    font-weight: 700;
-  }
+.title {
+  font-size: 18px;
+  color: #333333;
+  margin-top: 14px;
+  margin-bottom: 6px;
+}

-  .title{
-    font-size: 18px;
-    color: #333333;
-    margin-top: 14px;
-    margin-bottom: 6px;
-  }
+.percentage {
+  background-color: #f5f5f5;
+  padding: 12px 8px;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  color: #333333;
+  font-size: 16px;

-  .percentage{
-    background-color: #f5f5f5;
-    padding: 12px 8px;
-    display: flex;
-    justify-content: space-between;
-    text-align: center;
-    color: #333333;
-    font-size: 16px;
-    .percentage-s{
-      p{
-        color: green;
-        margin-bottom: 4px;
-      }
-     
-    }
-    .percentage-j{
-      p{
-        color: red;
-        margin-bottom: 4px;
-      }
-     
+  .percentage-s {
+    p {
+      color: green;
+      margin-bottom: 4px;
    }
+
  }

-   .el-row {
-    margin-bottom: 20px;
-    &:last-child {
-      margin-bottom: 0;
+  .percentage-j {
+    p {
+      color: red;
+      margin-bottom: 4px;
    }
+
  }
-  .el-col {
-    border-radius: 4px;
-  }
-  .bg-purple-dark {
-    background: #ffffff;
-  }
-  .bg-purple {
-    background: #ffffff;
-  }
-  .bg-purple-light {
-    background: #ffffff;
-  }
-  .grid-content {
-    border-radius: 4px;
-    min-height: 36px;
-    padding: 24px 18px 8px 24px;
-    border-radius: 12px 12px 12px 12px; 
-  }
-  .row-bg {
-    padding: 10px 0;
-    background-color: #ffffff;
+}
+
+.el-row {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
  }
+}
+
+.el-col {
+  border-radius: 4px;
+}
+
+.bg-purple-dark {
+  background: #ffffff;
+}
+
+.bg-purple {
+  background: #ffffff;
+}
+
+.bg-purple-light {
+  background: #ffffff;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+  padding: 24px 18px 8px 24px;
+  border-radius: 12px 12px 12px 12px;
+}
+
+.row-bg {
+  padding: 10px 0;
+  background-color: #ffffff;
+}
+
+.flex {
+  display: flex;
+
+}
+
+.space-between {
+  justify-content: space-between
+}
 </style>
--- a/src/views/statistics/operate/components/foldline.vue
+++ b/src/views/statistics/operate/components/foldline.vue
@@ -17,12 +17,20 @@

 <script>
 import * as echarts from 'echarts';
-import { brokenLineApi } from '@/api/dashboard';
+import { analysisLineChart } from '@/api/statistics';
 export default {
  name: 'foldline',
+  props:['tableFrom'],
  data() {
    return {
-      lineData: [],
+      lineData: {
+        //营业额
+        totalTurnoverArr: [],
+        //利润
+        profitArr: [],
+        //成本
+        costsArr: []
+      },
    };
  },
  mounted() {
@@ -33,10 +41,20 @@ export default {
      window.open(href, '_blank');
    },
    inits() {
-      brokenLineApi().then((res) => {
-        // console.log(res, '数据---111');
-        this.lineData = res;
-
+      console.log(66);
+      analysisLineChart(this.tableFrom).then((res) => {
+        let arr=[]
+        for (const key in res) {
+          arr.push(res[key])
+        }
+        this.lineData.totalTurnoverArr=[]
+        this.lineData.profitArr=[]
+        this.lineData.costsArr=[]
+        arr.forEach(item => {
+          this.lineData.totalTurnoverArr.push(item.totalTurnover)
+          this.lineData.profitArr.push(item.profit)
+          this.lineData.costsArr.push(item.costs)
+        });
        let myChart = echarts.init(document.getElementById('chart_example'));
        let option = {
          color: ['#80FFA5', '#37A2FF', '#FF0087'],
@@ -70,7 +88,7 @@ export default {
            {
              type: 'category',
              boundaryGap: false,
-              data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月',"9月","11月","12月"],
+              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', "9月", "11月", "12月"],
            },
          ],
          yAxis: [
@@ -83,58 +101,19 @@ export default {
              name: '总营业额',
              type: 'line',
              smooth: true,
-              data: [
-                this.lineData[0].data.workOrderNum,
-                this.lineData[0].data.driverNum,
-                this.lineData[0].data.carRentalOrderNum,
-                this.lineData[0].data.carSellOrderNum,
-                this.lineData[0].data.cardOrderNum,
-                this.lineData[2].data.workOrderNum,
-                this.lineData[2].data.driverNum,
-                this.lineData[2].data.carRentalOrderNum,
-                this.lineData[2].data.carSellOrderNum,
-                this.lineData[2].data.workOrderNum,
-                this.lineData[2].data.driverNum,
-                this.lineData[2].data.carRentalOrderNum,
-              ],
+              data: this.lineData.totalTurnoverArr
            },
            {
              name: '总成本',
              type: 'line',
              smooth: true,
-              data: [
-                this.lineData[1].data.workOrderNum,
-                this.lineData[2].data.workOrderNum,
-                this.lineData[2].data.driverNum,
-                this.lineData[2].data.carRentalOrderNum,
-                this.lineData[2].data.carSellOrderNum,
-                this.lineData[2].data.workOrderNum,
-                this.lineData[2].data.driverNum,
-                this.lineData[2].data.carRentalOrderNum,
-                this.lineData[1].data.driverNum,
-                this.lineData[1].data.carRentalOrderNum,
-                this.lineData[1].data.carSellOrderNum,
-                this.lineData[1].data.cardOrderNum,
-              ],
+              data: this.lineData.costsArr
            },
            {
              name: '利润',
              type: 'line',
              smooth: true,
-              data: [
-              this.lineData[2].data.workOrderNum,
-                this.lineData[2].data.driverNum,
-                this.lineData[2].data.carRentalOrderNum,
-                this.lineData[2].data.workOrderNum,
-                this.lineData[2].data.driverNum,
-                this.lineData[2].data.carRentalOrderNum,
-                this.lineData[2].data.carSellOrderNum,
-                this.lineData[2].data.workOrderNum,
-                this.lineData[2].data.driverNum,
-                this.lineData[2].data.carRentalOrderNum,
-                this.lineData[2].data.cardOrderNum,
-                this.lineData[2].data.workOrderNum,
-              ],
+              data: this.lineData.profitArr
            },
          ],
        };
--- a/src/views/statistics/operate/index.vue
+++ b/src/views/statistics/operate/index.vue
@@ -121,7 +121,7 @@
          </div>
        </el-col>
      </el-row>
-      <fold-line></fold-line>
+      <fold-line ref="foldLine" :tableFrom="tableFrom"></fold-line>
    </el-card>
  </div>
 </template>
@@ -155,7 +155,6 @@ export default {
    };
  },
  mounted() {
-
  },
  created() {
    this.remoteMethod()
@@ -165,7 +164,7 @@ export default {
    //获取数据
    analysisLatticeFn() {
      analysisLattice(this.tableFrom).then(res => {
-        console.log(res);
+        // console.log(res);
        //成本
        this.accessoryCostVo = res.accessoryCostVo
        //总营业额
@@ -175,6 +174,8 @@ export default {
        //利润
        this.turnoverVo = res.turnoverVo
      })
+      console.log(this.$refs);
+     
    },
    //年月日
    selectChange(e) {
@@ -188,6 +189,7 @@ export default {
      // console.log(e);
      this.tableFrom.merId=e
      this.analysisLatticeFn()
+      this.$refs.foldLine.inits()
    },
    //监听选择
    remoteMethod(query) {