From 5d3a77e794884a9a5aa733be3dbefcded183dac0 Mon Sep 17 00:00:00 2001
From: hoon7566 <hoon7566@gmail.com>
Date: Tue, 22 Mar 2022 16:13:09 +0900
Subject: [PATCH] =?UTF-8?q?feat(owner-vue):=20owner=20vue=20=EB=8C=80?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- owner vue 대시보드 개발
---
 .../domain/order/dto/DashBoardDto.java        |  58 +++++++
 owner-vue/package.json                        |   2 +
 owner-vue/src/js/CustomChart.js               |  11 ++
 owner-vue/src/views/HomeDashBoard.vue         | 161 +++++++++++++-----
 owner-vue/src/views/Layout/Sidebar.vue        |   2 +-
 5 files changed, 194 insertions(+), 40 deletions(-)
 create mode 100644 order-service/src/main/java/com/justpickup/orderservice/domain/order/dto/DashBoardDto.java
 create mode 100644 owner-vue/src/js/CustomChart.js

diff --git a/order-service/src/main/java/com/justpickup/orderservice/domain/order/dto/DashBoardDto.java b/order-service/src/main/java/com/justpickup/orderservice/domain/order/dto/DashBoardDto.java
new file mode 100644
index 0000000..55c370e
--- /dev/null
+++ b/order-service/src/main/java/com/justpickup/orderservice/domain/order/dto/DashBoardDto.java
@@ -0,0 +1,58 @@
+package com.justpickup.orderservice.domain.order.dto;
+
+import lombok.*;
+
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.util.Date;
+import java.util.List;
+
+@Getter
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class DashBoardDto {
+
+    //일일 판매금액
+    private Long salesAmount=0L;
+    private BestSellItem bestSellItem;
+    List<SellAmountAWeek> sellAmountAWeeks;
+
+    public static  DashBoardDto of(List<OrderPrice> orderPrices , DashBoardDto.BestSellItem bestSellItem , List<SellAmountAWeek> sellAmountAWeeks){
+        DashBoardDto dashBoardDto = new DashBoardDto();
+        orderPrices.forEach(orderPrice -> dashBoardDto.salesAmount+=orderPrice.getOrderPrice());
+        dashBoardDto.bestSellItem = bestSellItem;
+        dashBoardDto.sellAmountAWeeks = sellAmountAWeeks;
+
+        return dashBoardDto;
+    }
+
+
+    @Getter
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class OrderPrice{
+        Long orderPrice;
+    }
+
+    @Getter
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class BestSellItem{
+        Long itemId;
+        String itemName;
+        Long sumCounts;
+
+        public void setItemName(String itemName) {
+            this.itemName = itemName;
+        }
+    }
+
+    @Getter
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public static class SellAmountAWeek{
+        Object sellDate;
+        Long sellAmount;
+    }
+}
diff --git a/owner-vue/package.json b/owner-vue/package.json
index 8562565..7e66f3e 100644
--- a/owner-vue/package.json
+++ b/owner-vue/package.json
@@ -10,9 +10,11 @@
   "dependencies": {
     "@mdi/js": "^6.5.95",
     "axios": "^0.26.0",
+    "chart.js": "^2.9.4",
     "core-js": "^3.6.5",
     "moment": "^2.29.1",
     "vue": "^2.6.11",
+    "vue-chartjs": "^3.5.1",
     "vue-daum-postcode": "^0.10.0",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
diff --git a/owner-vue/src/js/CustomChart.js b/owner-vue/src/js/CustomChart.js
new file mode 100644
index 0000000..28c9b55
--- /dev/null
+++ b/owner-vue/src/js/CustomChart.js
@@ -0,0 +1,11 @@
+// CustomChart.js
+import { Line, mixins } from 'vue-chartjs'
+
+export default {
+    extends: Line,
+    mixins: [mixins.reactiveProp],
+    props:['chartData', 'options'],
+    mounted () {
+        this.renderChart(this.chartData, this.options)
+    }
+}
\ No newline at end of file
diff --git a/owner-vue/src/views/HomeDashBoard.vue b/owner-vue/src/views/HomeDashBoard.vue
index 7d96b3d..698f68f 100644
--- a/owner-vue/src/views/HomeDashBoard.vue
+++ b/owner-vue/src/views/HomeDashBoard.vue
@@ -4,51 +4,70 @@
     <v-row>
 
       <v-col
-          v-for="(item, index) in items1"
-          :key="`sheet-${index}`"
           cols="12"
           sm="6"
       >
-        <v-card elevation="2" class="rounded-lg">
-          <v-card-text class="d-flex justify-space-between align-center">
+        <v-card elevation="2" class="rounded-lg" style="border-left: 5px solid #f69653">
+          <v-card-title primary-title>
             <div>
-              <strong>{{ item.title }}</strong> <br>
-              <span>00~00</span>
+              <div class="grey--text">{{ salesAmount.title }}</div>
             </div>
-            <v-avatar size="60" :color="item.color" style="border: 3px solid #444">
-              <span style="color: white">{{item.amount}} </span>
-            </v-avatar>
-          </v-card-text>
-          <v-card-actions class="d-flex justify-space-between">
+            <v-card-text class="d-flex justify-space-between align-center">
+              <h3 class="headline">{{salesAmount.data | currency}}원</h3>
+              <v-avatar size="60"  >
+                <v-icon
+                    :color="salesAmount.color"
+                    size="64"
+                >
+                  mdi-currency-usd
+                </v-icon>
+              </v-avatar>
+            </v-card-text>
+          </v-card-title>
+        </v-card>
+      </v-col>
 
-
-          </v-card-actions>
+      <v-col
+          cols="12"
+          sm="6"
+      >
+        <v-card elevation="2" class="rounded-lg" style="border-left: 5px solid #ed6856">
+          <v-card-title primary-title>
+            <div>
+              <div class="grey--text">{{ bestSellItem.title }}</div>
+            </div>
+            <v-card-text class="d-flex justify-space-between align-center">
+              <h3 class="headline">{{bestSellItem.data.itemName}} {{ bestSellItem.data.sumCounts }}개</h3>
+              <v-avatar size="60"  >
+                <v-icon
+                    :color="bestSellItem.color"
+                    size="64"
+                >
+                  mdi-coffee
+                </v-icon>
+              </v-avatar>
+            </v-card-text>
+          </v-card-title>
         </v-card>
       </v-col>
       <v-col cols="12">
-        <v-card>
+        <v-card  style="border-left: 5px solid #00a8e0">
           <v-card-title>
             <v-icon
-                :color="checking ? 'red lighten-2' : 'indigo'"
+                :color="sellAmountAWeeks.color"
                 class="mr-12"
                 size="64"
-                @click="takePulse"
             >
               mdi-currency-usd
             </v-icon>
-            판매금액
+            {{ sellAmountAWeeks.title }}
           </v-card-title>
 
           <v-sheet color="transparent">
-            <v-sparkline
-                :key="String(avg)"
-                :smooth="16"
-                :gradient="['#f72047', '#ffd200', '#1feaea']"
-                :line-width="3"
-                :value="heartbeats"
-                auto-draw
-                stroke-linecap="round"
-            />
+            <CustomChart
+                v-if="sellAmountAWeeks.loaded"
+                :chart-data="sellAmountAWeeks.data"
+                :options="sellAmountAWeeks.options"/>
           </v-sheet>
         </v-card>
       </v-col>
@@ -59,26 +78,90 @@
 
 <script>
 import orderApi from "@/api/order";
+import CustomChart from "@/js/CustomChart";
 
 export default {
   name: "HomeDashBoard",
+  components:{
+    CustomChart
+  },
   props: ['userInfo'],
   data() {
     return {
-      salesAmount:{},
-      bestSellItem:{},
-      sellAmountAWeeks:{},
+      salesAmount: {
+        title: "금일 판매금액",
+        color: "#f69653",
+        data: {}
+      },
+      bestSellItem: {
+        title: "주간베스트 판매상품",
+        color: "#ed6856",
+        data: {}
+      },
+      sellAmountAWeeks: {
+        title: "주간 판매금액 그래프",
+        color: "#00a8e0",
+        loaded:false,
+        options:{
+          responsive: true,
+          maintainAspectRatio: false,
+
+
+          scales: {
+            xAxes: [{
+              ticks:{
+                fontColor : 'rgba(12, 13, 13, 1)',
+                fontSize : 14
+              },
+            }],
+            yAxes: [{
+              ticks: {
+                fontColor : 'rgba(12, 13, 13, 1)',
+                fontSize : 14,
+                userCallback:function (ele) {
+                  return Number(ele).toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,") + "원"
+                }
+              },
+            }]
+          }
+
+        },
+        data: {
+          labels: [],
+          datasets: [
+
+          ]
+        },
+
+
+      },
     }
-  },mounted() {
-    let vm = this
-    orderApi.findDashboard().then(response => {
-      console.log(response)
-      vm.salesAmount = this.data.salesAmount
-      vm.bestSellItem = this.data.bestSellItem
-      vm.sellAmountAWeeks = this.data.sellAmountAWeeks
-    }).catch(error =>{
-      console.log(error.response)
-    });
+  },
+  methods: {
+    async getDashboardData() {
+      const response = await orderApi.findDashboard()
+      this.salesAmount.data = response.data.data.salesAmount
+      this.bestSellItem.data = response.data.data.bestSellItem
+
+      var saleDataset={
+        label: '일별 판매 금액',
+        backgroundColor: '#00a8e0',
+        borderColor: 'rgb(75, 192, 192)',
+        fill: false,
+        data: [],
+      }
+      for (const ele of response.data.data.sellAmountAWeeks) {
+        this.sellAmountAWeeks.data.labels.push(ele.sellDate)
+        saleDataset.data.push( ele.sellAmount)
+      }
+      this.sellAmountAWeeks.data.datasets.push(saleDataset)
+
+      this.sellAmountAWeeks.loaded = true
+    },
+  },
+  async mounted() {
+     this.getDashboardData()
+
   }
 }
 </script>
diff --git a/owner-vue/src/views/Layout/Sidebar.vue b/owner-vue/src/views/Layout/Sidebar.vue
index 75ede1b..713eccc 100644
--- a/owner-vue/src/views/Layout/Sidebar.vue
+++ b/owner-vue/src/views/Layout/Sidebar.vue
@@ -29,7 +29,7 @@ export default {
   props: ["drawer"],
   data() {
     return {
-      drawer_sidebar:false,
+      drawer_sidebar:null,
       links: [
         {name: "지난 주문", url: "/prev-order", icon: "mdi-clipboard-check-outline"},
         {name: "카테고리", url: "/category", icon: "mdi-shape-outline"},