From b340c37e7e43858b41ea430121559ac80967cddf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Fri, 17 Feb 2023 11:34:52 +0800
Subject: [PATCH] up

---
 src/views/dashboard/index.vue | 619 +++++++++++++++++-----------------
 1 file changed, 314 insertions(+), 305 deletions(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index adf58f6..78499c1 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,307 +1,316 @@
-<template>
-  <div>
-
-    <div class="statistics">
-      <panel-group :totaldata="list" />
-    </div>
-
-    <div class="chart">
-      <div class="chartItem" style="margin-right: 1%;">
-        <div class="chartItemTitle">营业与收入</div>
-        <div id="col-chart"></div>
-      </div>
-      <div class="chartItem" style="margin-left: 1%;">
-        <div class="chartItemTitle">客户与订单</div>
-        <div id="line-chart"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import echarts from "echarts"
-  import PanelGroup from './components/PanelGroup'
-  import {
-    getChartsHome
-  } from "../../api/dashboard.js"
-
-  export default {
-    components: {
-      PanelGroup
-    },
-    data() {
-      return {
-        col: '',
-        line: '',
-        business_data: [],
-        collect_data: [],
-        list: {},
-        customerArr: [],
-        orderArr: [],
-        chartData: {},
-      }
-    },
-    watch: {
-      chartData(val, newval) {
-        if (newval){
-          this.init();
-        }
-      }
-    },
-    methods: {
-      async loadData() {
-        await getChartsHome().then((res) => {
-          console.log(res);
-          this.list = res.list;
-          this.chartData = res;
-          let _business_data = [];
-          let _collect_data = [];
-          res.business_data.map(item => {
-            _business_data.push(item.server_money_total)
-            _collect_data.push(item.collect_money)
-          })
-          this.business_data = _business_data;
-          this.collect_data = _collect_data;
-          let _customerArr = [];
-          let _orderArr = [];
-
-          res.order_data.map(item => {
-            _customerArr.push(item.active_customer)
-            _orderArr.push(item.order_total)
-          })
-          this.customerArr = _customerArr;
-          this.orderArr = _orderArr;
-        }).catch()
-      },
-      init() {
-        this.col = echarts.init(document.getElementById('col-chart'))
-        this.col.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            },
-            position: 'bottom'
-          },
-          legend: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          xAxis: {
-            type: 'category',
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          series: [{
-              name: '服务金额',
-              type: 'bar',
-              data: this.business_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '收款',
-              type: 'bar',
-              data: this.collect_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
-
-        this.line = echarts.init(document.getElementById('line-chart'))
-        this.line.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-            data: ['活跃客户', '服务订单']
-          },
-          grid: {
-            left: '3%',
-            right: '6%',
-            bottom: '3%',
-            containLabel: true
-          },
-          toolbox: {
-
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [{
-              name: '活跃客户',
-              type: 'line',
-              stack: 'Total',
-              data: this.customerArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '服务订单',
-              type: 'line',
-              stack: 'Total',
-              data: this.orderArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
-      }
-    },
+<template>
+  <div>
+
+    <div class="block" style="padding-top: 10px;display: flex;
+    justify-content: flex-end;">
+      <el-date-picker v-model="month" type="month" placeholder="选择月" @change="loadData()">
+      </el-date-picker>
+    </div>
+    <div class="statistics">
+      <panel-group :totaldata="list" />
+    </div>
+
+    <div class="chart">
+      <div class="chartItem" style="margin-right: 1%;">
+        <div class="chartItemTitle">营业与收入</div>
+        <div id="col-chart"></div>
+      </div>
+      <div class="chartItem" style="margin-left: 1%;">
+        <div class="chartItemTitle">客户与订单</div>
+        <div id="line-chart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from "echarts"
+  import PanelGroup from './components/PanelGroup'
+  import {
+    getChartsHome
+  } from "../../api/dashboard.js"
+
+  export default {
+    components: {
+      PanelGroup
+    },
+    data() {
+      return {
+        col: '',
+        line: '',
+        business_data: [],
+        collect_data: [],
+        list: {},
+        customerArr: [],
+        orderArr: [],
+        chartData: {},
+        month: ''
+      }
+    },
+    watch: {
+      chartData(val, newval) {
+        if (newval) {
+          this.init();
+        }
+      }
+    },
+    methods: {
+      async loadData() {
+        await getChartsHome({
+          month: this.month
+        }).then((res) => {
+          console.log(res);
+          this.list = res.list;
+          this.chartData = res;
+          let _business_data = [];
+          let _collect_data = [];
+          res.business_data.map(item => {
+            _business_data.push(item.server_money_total)
+            _collect_data.push(item.collect_money)
+          })
+          this.business_data = _business_data;
+          this.collect_data = _collect_data;
+          let _customerArr = [];
+          let _orderArr = [];
+
+          res.order_data.map(item => {
+            _customerArr.push(item.active_customer)
+            _orderArr.push(item.order_total)
+          })
+          this.customerArr = _customerArr;
+          this.orderArr = _orderArr;
+        }).catch()
+      },
+      init() {
+        this.col = echarts.init(document.getElementById('col-chart'))
+        this.col.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            position: 'bottom'
+          },
+          legend: {},
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          yAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          xAxis: {
+            type: 'category',
+            data: ['第一周', '第二周', '第三周', '第四周']
+          },
+          series: [{
+              name: '服务金额',
+              type: 'bar',
+              data: this.business_data,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(42,182,252)'
+                },
+              },
+            },
+            {
+              name: '收款',
+              type: 'bar',
+              data: this.collect_data,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(34,228,255)'
+                },
+              },
+            }
+          ]
+        })
+
+        this.line = echarts.init(document.getElementById('line-chart'))
+        this.line.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['活跃客户', '服务订单']
+          },
+          grid: {
+            left: '3%',
+            right: '6%',
+            bottom: '3%',
+            containLabel: true
+          },
+          toolbox: {
+
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['第一周', '第二周', '第三周', '第四周']
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [{
+              name: '活跃客户',
+              type: 'line',
+              stack: 'Total',
+              data: this.customerArr,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(42,182,252)'
+                },
+              },
+            },
+            {
+              name: '服务订单',
+              type: 'line',
+              stack: 'Total',
+              data: this.orderArr,
+              itemStyle: {
+                normal: {
+                  color: 'rgb(34,228,255)'
+                },
+              },
+            }
+          ]
+        })
+      }
+    },
     created() {
-
-      this.loadData();
-    },
-    mounted() {
-
-
-      //this.init()
-
-      window.onresize = () => {
-        this.col.resize()
-        this.line.resize()
-      }
-
-    },
-    destroyed() {
-      window.onresize = null
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .statistics {
-    display: flex;
-
-    margin-top: 20px;
-
-    &-title {
-
-      padding-left: 6px;
-    }
-
-    &-content {
-      text-align: center;
-      font-size: 13px;
-
-      &-top {
-
-        &__num {
-          font-weight: 600;
-        }
-
-        &__name {
-          font-size: 10px;
-          color: rgb(140, 140, 140);
-        }
-      }
-
-      &-bottom {
-        display: flex;
-        justify-content: space-between;
-
-        &-left {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
-        }
-
-        &-right {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
-        }
-      }
-    }
-
-    &>div {
-      flex: 1;
-      margin-right: 20px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .chart {
-    display: flex;
-
-    margin-top: 20px;
-
-
-    .chartItem {
-
-      width: 49%;
-
-      .chartItemTitle {
-        font-size: 16px;
-        margin-bottom: 20px;
-      }
-
-      #col-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        margin-right: 20px;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-        width: 100%;
-      }
-
-      #line-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-      }
-    }
-
-
-  }
+      this.month=this.$moment().format("YYYY-MM")
+
+      this.loadData();
+    },
+    mounted() {
+
+
+      //this.init()
+
+      window.onresize = () => {
+        this.col.resize()
+        this.line.resize()
+      }
+
+    },
+    destroyed() {
+      window.onresize = null
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .statistics {
+    display: flex;
+
+    margin-top: 20px;
+
+    &-title {
+
+      padding-left: 6px;
+    }
+
+    &-content {
+      text-align: center;
+      font-size: 13px;
+
+      &-top {
+
+        &__num {
+          font-weight: 600;
+        }
+
+        &__name {
+          font-size: 10px;
+          color: rgb(140, 140, 140);
+        }
+      }
+
+      &-bottom {
+        display: flex;
+        justify-content: space-between;
+
+        &-left {
+
+          &__num {
+            font-weight: 600;
+          }
+
+          &__name {
+            font-size: 10px;
+            color: rgb(140, 140, 140);
+          }
+        }
+
+        &-right {
+
+          &__num {
+            font-weight: 600;
+          }
+
+          &__name {
+            font-size: 10px;
+            color: rgb(140, 140, 140);
+          }
+        }
+      }
+    }
+
+    &>div {
+      flex: 1;
+      margin-right: 20px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .chart {
+    display: flex;
+
+    margin-top: 20px;
+
+
+    .chartItem {
+
+      width: 49%;
+
+      .chartItemTitle {
+        font-size: 16px;
+        margin-bottom: 20px;
+      }
+
+      #col-chart {
+        background: #fff;
+        border-radius: 10px;
+        flex: 1;
+        margin-right: 20px;
+        padding: 20px;
+        box-sizing: border-box;
+        min-height: 400px;
+        width: 100%;
+      }
+
+      #line-chart {
+        background: #fff;
+        border-radius: 10px;
+        flex: 1;
+        padding: 20px;
+        box-sizing: border-box;
+        min-height: 400px;
+      }
+    }
+
+
+  }
 </style>