feat(owner-vue): owner vue 대시보드

- owner vue 대시보드 개발

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",

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)
+    }
+}

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>

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"},