完成公告、排行榜

package-lock.json

@@ -323,9 +323,9 @@
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
     "dayjs": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
-      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.3.tgz",
+      "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A=="
     },
     "debug": {
       "version": "4.3.4",
@@ -341,6 +341,22 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "element-plus": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.0.tgz",
@@ -1146,6 +1162,21 @@
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz",
       "integrity": "sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.1",
     "axios": "^0.27.2",
+    "dayjs": "^1.11.3",
+    "echarts": "^5.3.3",
     "element-plus": "^2.2.0",
     "vue": "^3.2.25",
     "vue-axios": "^3.4.1",

src/components/notification.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-row class="row-bg" justify="center">
+    <el-col :span="16">
+  <el-timeline>
+    <el-timeline-item center v-for="(times) in data" :timestamp="times.created_at" placement="top">
+      <el-card>
+        <h4>{{ times.title}}</h4>
+        <p>{{times.content}}</p>
+      </el-card>
+    </el-timeline-item>
+  </el-timeline>
+    </el-col>
+  </el-row>
+</template>
+
+
+<script>
+import axios from "axios";
+import * as dayjs from 'dayjs';
+export default {
+  data(){
+    return{
+      data:[],
+    }
+  },
+  mounted() {
+    axios.get('/api/v1/notice').then(res => {
+      if (res.data.code === 200) {
+        console.log(res.data.data);
+        this.data = res.data.data;
+        this.data.forEach(function(item,index){
+          item.created_at = dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss');
+        })
+      }
+    })
+  }
+
+}
+
+</script>
+
+<style>
+
+</style>

src/components/socre.vue

@@ -0,0 +1,46 @@
+<template>
+<!--  <div id="myChart"></div>-->
+  <el-row class="row-bg" justify="center">
+    <el-col :span="16">
+      <el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
+        <el-table-column prop="rank" label="Ranking" width="180" />
+        <el-table-column prop="username" label="User" width="180" />
+        <el-table-column prop="score" label="Score" />
+      </el-table>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  data(){
+    return{
+      tableData:[],
+    }
+  },
+  mounted() {
+
+    axios.get('/api/v1/score').then(res => {
+      if (res.data.code === 200) {
+        console.log(res.data.data);
+        this.tableData = res.data.data;
+        this.tableData.forEach(function(item,index){
+          item.rank = index+1;
+        })
+      }
+    })
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+.el-table .success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+
+</style>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Login from '../views/Login.vue'
 import Challenge from '../views/Challenges.vue'
 import Scoreboard from '../views/Scoreboard.vue'
+import Notification from "../views/Notification.vue";
 
 const routerHistory = createWebHistory()
 const router = createRouter({
@@ -31,6 +32,11 @@ const router = createRouter({
             name:'Scoreboard',
             component: Scoreboard,
 
+        },
+        {
+            path:'/notification',
+            name:'Notification',
+            component: Notification,
         }
     ]
 })

src/views/Notification.vue

@@ -0,0 +1,14 @@
+<template>
+  <Navbar></Navbar>
+  <notification></notification>
+</template>
+
+<script>
+import Navbar from '../components/Navbar.vue'
+import notification from '../components/notification.vue'
+export default {
+    components: {
+        Navbar,notification
+    }
+}
+</script>

src/views/Scoreboard.vue

@@ -1,10 +1,13 @@
 <template>
   <Navbar></Navbar>
+  <socre></socre>
 </template>
 <script>
   import Navbar from '../components/Navbar.vue'
+  import Socre from "../components/socre.vue";
   export default {
     components: {
+      Socre,
       Navbar
     }
   }