更新首页

src/router/index.ts

@@ -8,13 +8,13 @@ getModuleViewComponents();
 export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/dashboard',
-	  meta: {hidden:true},
+	  meta: {},
     component: () => import('@/layout/index.vue'),
     children: [
       {
         path: '',
         name: 'Dashboard',
-        meta: { title: 'home', icon: 'home', hidden: true },
+        meta: { title: 'home', icon: 'home' },
         component: () => import('@/views/dashboard/index.vue')
       }
     ]

src/views/dashboard/dataStatistics/notices.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="header-title"> <h3>最新通知 </h3> <h4 v-show="list.length > 0" @click="go2page">查看全部</h4></div>
+	<div class="noticebody">
+		<div class="notice-item" @click="titleClick(item)"  v-for="(item,index) in list" :key="index" >
+		 <el-badge v-if="item.is_read == 0" is-dot class="item">
+		    <el-image class="logo" src="./src/assets/icons/notice.png"></el-image>
+		  </el-badge>
+			   <el-image class="logo"  v-else   src="./src/assets/icons/notice.png"></el-image>
+			<label class="notices">{{item.title}}</label>
+		</div>
+	</div>
+	<div v-show="list.length < 1"  style="display: flex;justify-content: center;">
+			<label style="color: darkgray;"> 暂无新通知</label>
+	</div>
+	<el-dialog draggable v-model="centerDialogVisible" :title="notice.title" width="30%" center>
+	  <div class="flex flex-wrap break-all" v-html="notice.content"></div>
+	  <template #footer>
+	    <span class="dialog-footer">
+	      <el-button @click="readNotice">我知道了</el-button>
+	    </span>
+	  </template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import { Bell } from '@element-plus/icons-vue';
+	import router from '@/router';
+	import { noticeListMine, noticeDetail, noticeRead } from '@/api/notice/index';
+	const centerDialogVisible = ref(false)
+	const notice = ref({})
+	const list = ref({});
+	const readNotice = () => {
+		if(notice.value.id > 0){
+			noticeRead(notice.value.id);
+		}
+	  centerDialogVisible.value = false
+	}
+	const getList = () => {
+		noticeListMine({limit:3}).then(res => {
+			list.value = res.data;
+		})
+	};
+	const titleClick = (e) => {
+	  noticeDetail(e.id).then(res => {
+	    centerDialogVisible.value = true;
+	    notice.value.id = res.data.id
+	    notice.value.title = res.data.title
+	    notice.value.content = res.data.content
+	  })
+	}
+	const go2page = () =>{
+		router.push({ path: "/notice/mynotice" });
+	}
+	onMounted(() => {
+		getList();
+	});
+</script>
+
+<style lang="scss" scoped>
+	
+	.header-title {
+	  display: flex;
+	  align-items: center;
+	  justify-content:space-between;
+	  h4{
+		  margin-right: 50px;
+		  color: #29d;;
+	  }
+	}
+	.notice-item{
+		display: flex;
+		margin-top: 5px;
+	}
+	.notices{
+		margin-left: 10px;
+		line-height: 18px;;
+	}
+	.logo{
+		width: 18px;
+		height: 18px;
+	}
+</style>

src/views/dashboard/index.vue

@@ -1,9 +1,6 @@
 <template>
 	<el-card style="padding: 5px; 15px">
-		<div class="header-title"> <h3>最新通知 </h3> <h4>查看全部</h4></div>
-		<div class="noticebody">
-			
-		</div>
+		<notice></notice>
 	</el-card>
 	
 	<el-card shadow="always" style="margin-top: 20px;">
@@ -14,8 +11,10 @@
 </template>
 
 <script lang="ts" setup>
+
 import { checkPermission, getFirstPath } from '@/directives/permission';
 import router from '@/router';
+import notice from "./dataStatistics/notices.vue";
 import todayData from "./dataStatistics/todayData.vue";
 let path = getFirstPath(0);
 if (path) {
@@ -33,18 +32,6 @@ console.log('path', path)
   justify-content: flex-start;
   height: 100%;
 }
-
-.header-title {
-  display: flex;
-  align-items: center;
-  justify-content:space-between;
-  margin-bottom: 40px;
-  h4{
-	  margin-right: 50px;
-	  color: #29d;;
-  }
-}
-
 .logo {
   width: 80px;
   height: 80px;
@@ -89,6 +76,7 @@ p {
   background-color: #32a673;
 }
 .noticebody{
-	
+	display: flex;
+	flex-direction: column;
 }
 </style>