首页统计图添加各个时段的金额 并导出Excel

jsowell-ui/src/views/homeIndex/homeIndex.vue

@@ -38,27 +38,28 @@
           <div>总充电设备数量(座)</div>
         </div>
       </div>
-      <!--                      <div class="box" v-hasRole="['admin', 'common']" style="background-color: #ff4949;">-->
-      <!--                        <el-image-->
-      <!--                            class="box-image"-->
-      <!--                            :src="require('@/assets/images/yue.png')"-->
-      <!--                        ></el-image>-->
-      <!--                        <div class="flex1">-->
-      <!--                            <div class="box-h1">{{ generalSituation.totalMemberAmount }}</div>-->
-      <!--                            <div>总客户余额(元)</div>-->
-      <!--                        </div>-->
-      <!--                    </div>-->
     </div>
     <h1>订单</h1>
     <hr />
-    <el-button style="background-color: #1ab394; color: #ffffff">最近30天 </el-button>
+    <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="68px">
+      <el-form-item label="筛选日期" prop="tradeDate">
+        <el-date-picker
+          v-model="createTimeRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          :default-time="['00:00:00', '23:59:59']"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :clearable="false"
+          @change="init"
+        ></el-date-picker>
+      </el-form-item>
+    </el-form>
+    <!-- <el-button style="background-color: #1ab394; color: #ffffff">最近30天 </el-button> -->
     <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
     <hr />
-    <!-- <h1>启动充电渠道</h1> -->
-    <!-- <div ref="chartDom" :style="{ width: '50%', height: '550px' }"></div> -->
-    <!-- <hr /> -->
-    <!-- <hr /> -->
-    <!-- <h1>设备</h1> -->
   </div>
 </template>
 <script>
@@ -85,13 +86,15 @@ export default {
           chargingNumber: "624",
         },
       ],
+      createTimeRange: [],
+      queryParams: {},
     };
   }, //图表实例
   created() {
     this.getGeneral();
   },
   mounted() {
-    this.init();
+    this.setDefaultDateRange();
     // this.rose();
   },
   methods: {
@@ -101,7 +104,10 @@ export default {
       this.generalSituation = obj;
     },
     async getOrder() {
-      const { obj, resCode } = await getOrderInfo({});
+      const { obj, resCode } = await getOrderInfo({
+        startTime: `${this.createTimeRange[0]} 00:00:00`,
+        endTime: `${this.createTimeRange[1]} 23:59:59`,
+      });
       console.log("订单信息", obj, resCode);
       if (resCode === "00100000") {
         this.orderInfo = obj;
@@ -288,6 +294,86 @@ export default {
                 },
               },
             },
+            {
+              name: "尖时段总金额",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              data: this.orderInfo.map((item) => {
+                return item.totalSharpAmount;
+              }),
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              itemStyle: {
+                normal: {
+                  //   color: "#909399",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
+            {
+              name: "峰时段总金额",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              data: this.orderInfo.map((item) => {
+                return item.totalPeakAmount;
+              }),
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              itemStyle: {
+                normal: {
+                  //   color: "#909399",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
+            {
+              name: "平时段总金额",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              data: this.orderInfo.map((item) => {
+                return item.totalFlatAmount;
+              }),
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              itemStyle: {
+                normal: {
+                  //   color: "#909399",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
+            {
+              name: "谷时段总金额",
+              type: "bar",
+              yAxisIndex: 1,
+              stack: "one",
+              data: this.orderInfo.map((item) => {
+                return item.totalValleyAmount;
+              }),
+              emphasis: {
+                focus: "series",
+                blurScope: "coordinateSystem",
+              },
+              itemStyle: {
+                normal: {
+                  //   color: "#909399",
+                  opacity: 1,
+                  barBorderRadius: 1, //柱子菱角
+                },
+              },
+            },
           ],
         };
         option.toolbox.feature.dataView = barDataView(
@@ -299,6 +385,10 @@ export default {
             "峰时段总用电量",
             "平时段总用电量",
             "谷时段总用电量",
+            "尖时段总金额",
+            "峰时段总金额",
+            "平时段总金额",
+            "谷时段总金额",
           ],
           "电量电费"
         );
@@ -347,6 +437,22 @@ export default {
         this.chartDom.setOption(option);
       });
     },
+    setDefaultDateRange() {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); // 计算30天前的日期
+      this.createTimeRange = [this.formatDateTime(start), this.formatDateTime(end)];
+      this.init();
+    },
+    formatDateTime(date) {
+      const y = date.getFullYear();
+      let m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      let h = date.getHours();
+      return `${y}-${m}-${d}`;
+    },
   },
 };
 </script>