add heatmap

package.json

@@ -32,6 +32,7 @@
     "vue": "^2.6.11",
     "vue-amap": "^0.5.10",
     "vue-baidu-map": "^0.21.22",
+    "vue-calendar-heatmap": "^0.8.4",
     "vue-clipboard2": "^0.3.3",
     "vue-cookies": "^1.7.0",
     "vue-quill-editor": "^3.0.6",

src/views/my/Message.vue

@@ -5,16 +5,36 @@
         <el-row>
           <h2>我的消息</h2>
         </el-row>
+        <el-row>
+          <calendar-heatmap :max="10" :values="values" :end-date="endDate" />
+        </el-row>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
+import Vue from 'vue'
+import { CalendarHeatmap } from 'vue-calendar-heatmap'
+import { getHeatmap } from '@/api/im'
+
+Vue.component('calendarHeatmap', CalendarHeatmap)
 export default {
   name: 'Message',
   data() {
     return {
+      values: [
+        { date: '2018-9-22', count: 6 },
+        { date: '2018-9-23', count: 5 },
+        { date: '2018-9-24', count: 4 },
+        { date: '2018-9-25', count: 3 },
+        { date: '2018-9-26', count: 2 },
+        { date: '2018-9-27', count: 1 },
+        { date: '2018-9-28', count: 7 },
+        { date: '2018-9-29', count: 8 },
+        { date: '2018-9-30', count: 9 }
+      ],
+      endDate: '2019-10-22'
     }
   },
   created() {
@@ -29,8 +49,22 @@ export default {
     }
 
     document.title = title
+    console.log(new Date())
+    getHeatmap().then(resp => {
+      if (resp.code === 0) {
+        this.values = resp.data
+        this.endDate = this.getYearMonthDay()
+      }
+    })
   },
   methods: {
+    getYearMonthDay() {
+      const date = new Date()
+      const year = date.getFullYear().toString().padStart(4, '0')
+      const month = (date.getMonth() + 1).toString().padStart(2, '0')
+      const day = date.getDate().toString().padStart(2, '0')
+      return year + '-' + month + '-' + day
+    }
   }
 }
 </script>