Merge branch 'tj-user'

# Conflicts:
#	src/views/dataStatistics/userStatistics/index.vue
#	src/views/dataStatistics/userStatistics/summaryStatistics.vue

src/api/dataStatistics/userStatistics.ts

@@ -21,13 +21,20 @@ export function statisticUserList(params?: object) {
 /**
  * 用户统计-今日数据
  */
-export function statisticUserTodayData() {
-  return http.get('/statistic/users/today');
+export function statisticUserTodayData(params?: object) {
+  return http.get('/statistic/users/today',params);
 }
 
 /**
  * 用户统计-今日数据
  */
-export function statisticUserHistoryData() {
-  return http.get('/statistic/users/stats');
-}
+export function statisticUserHistoryData(params?: object) {
+  return http.get('/statistic/users/stats',params);
+}
+
+/**
+ * 首页--今日数据统计
+ */
+export function statisticHomeTodayData(params?: object) {
+  return http.get('/statistic/home',params);
+}

src/router/index.ts

@@ -14,7 +14,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       {
         path: '',
         name: 'Dashboard',
-        meta: { title: 'home', icon: 'home', hidden: true },
+        meta: { title: 'home', icon: 'home',hidden:true },
         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/dataStatistics/todayData.vue

@@ -0,0 +1,162 @@
+<template>
+	<p class="title">今日数据 <label style="color: #909399; margin-left: 50px;">注: 以下数据为当日所有小程序的累计数据，如需查看各个小程序数据，可前往<span @click="go2tj" style="color: #29d;">数据统计</span>进行查看</label></p>
+	<div class="data-line">
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新增用户的定义：不在其他推广链接染色时间范围内且被成功绑定到当前链接的用户，即为当前链接对应优化师的新增用户<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户：</label>
+			<p class="text-base">{{ todayChargeData.new_user_num || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新增用户中今日充值的人数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户充值人数：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_num || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_num || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_vip_num || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新用户充值人数/新增用户<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户付费率：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_rate || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日新增用户的充值总额<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户充值金额：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_total || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新用户充值总额/新用户充值人数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户人均充值：</label>
+			<p class="text-base">{{ todayChargeData.new_user_mean || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日累计充值总金额<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值金额：</label>
+			<p class="text-base">{{ todayChargeData.recharge_total || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.recharge_coin_total || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.recharge_coin_total || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日累计充值笔数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值笔数：</label>
+			<p class="text-base">{{ todayChargeData.recharge_num || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 充值金额/充值笔数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值单价：</label>
+			<p class="text-base">{{ todayChargeData.recharge_mean || '0' }}</p>
+			
+		</div>
+		
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { checkPermission } from '@/directives/permission';
+import { InfoFilled } from '@element-plus/icons-vue';
+import Cache from '@/support/cache';
+import { statisticHomeTodayData } from '@/api/dataStatistics/userStatistics';
+import router from '@/router';
+const todayChargeData = ref({});
+const miniprogram_idJ = ref(0);
+
+const init = () => {
+	statisticHomeTodayData({ miniprogram_id: miniprogram_idJ.value }).then(
+		res => {
+			todayChargeData.value = res.data;
+		}
+	);
+};
+
+onMounted(() => {
+	if (JSON.parse(Cache.get('nav_data'))?.app.id) {
+		miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id;
+	}
+	init();
+});
+
+const go2tj=()=>{
+	router.push({ path: "/statistic/userStatistical" });
+}
+</script>
+
+<style  lang="scss" scoped>
+.data-line{
+  display: flex;   /* flex布局 */
+  justify-content: space-between;   /* 左对齐 */
+  flex-wrap: wrap;   /* 换行 */
+}
+.title{
+	margin-left: 15px;
+}
+.box-card{
+	margin-top: 20px;
+	border-radius: 10px;
+	margin-right: 10px;
+	background-color: cornsilk;
+	padding:15px 20px;
+	height: 200px;
+	width: calc((100% - 60px) / 4);
+	justify-content: flex-start;
+
+
+}
+.box-card:nth-of-type(4n+0) {
+	 margin-right: 0;
+}
+.text-sm{
+
+}
+.text-base{
+	font-size:40px;
+	margin: 20px 0px;
+}
+.text-pt{
+	font-size:10px;
+	margin-top: 15px;
+}
+</style>

src/views/dashboard/index.vue

@@ -1,21 +1,13 @@
 <template>
-  <el-card v-if="!path" shadow="always" class="flex justify-center h-full" :body-style="{ padding: '20px' }">
-    <div class="welcome">
-      <div class="header">
-        <!-- <img src="@/assets/logo.png" alt="logo" class="logo"> -->
-        <h1>追剧云平台</h1>
-      </div>
-      <div class="content">
-        <h2>欢迎使用</h2>
-        <p>点击左侧菜单进行操作</p>
-      </div>
-    </div>
-  </el-card>
+
+  
 </template>
 
 <script lang="ts" setup>
+
 import { checkPermission, getFirstPath } from '@/directives/permission';
 import router from '@/router';
+
 let path = getFirstPath(0);
 if (path) {
   router.push({ path: path });
@@ -24,20 +16,14 @@ console.log('path', path)
 </script>
 
 <style lang="scss" scoped>
+
 .welcome {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
   height: 100%;
 }
-
-.header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 40px;
-}
-
 .logo {
   width: 80px;
   height: 80px;
@@ -81,4 +67,9 @@ p {
 .button:hover {
   background-color: #32a673;
 }
+.noticebody{
+	display: flex;
+	flex-direction: column;
+}
+
 </style>

src/views/dataStatistics/userStatistics/index.vue

@@ -31,6 +31,132 @@
           :title_obj="titleObj" :extro_params="{ is_all: true, ...query }">
         </exportExcel>
       </template>
+     
+    </Search>
+	<div style="margin:8px 6px;">
+	          <el-card shadow="hover" :body-style="{ padding: '20px' }">
+	            <div class="stat-wrapper">
+	              <div>所选时间段内累计充新增用户数:
+	                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_num || '暂无数据' }}</span>
+	              </div>
+	              <div>累计新用户充值人数:
+	                <span class="ml-2 mr-4 stat">{{ statisticalData.new_user_recharge_num || '暂无数据' }}</span>
+	              </div>
+	            </div>
+	          </el-card>
+	        </div>
+	        <div class="table-default" >
+	          <el-table :data="tableData" class="mt-3" v-loading="loading">
+	            <el-table-column prop="date" min-width="120px" label="时间" />
+	            <el-table-column  v-if="!rolesIdentify.includes('optimizer')" prop="username" label="优化师" min-width="160px" />
+	            <el-table-column prop="miniprogram_name" label="小程序名称" min-width="160px" />
+	            <el-table-column label="当日新增用户数" prop="new_user_num" min-width="160px">
+	              <template #header>
+	                <div class="flex items-center">
+						<el-tooltip placement="top">
+						  <template #content>
+						    当天的新增用户<br />
+						  </template>
+						  <el-icon>
+						    <InfoFilled />
+						  </el-icon>
+						</el-tooltip>
+	                  <span>当日新增用户数</span>
+	                </div>
+	              </template>
+	              <template #default="scope">
+	                <div class="wrapper">
+	                  <div>{{ scope.row.new_user_num }}</div>
+	                </div>
+	              </template>
+	            </el-table-column>
+	            <el-table-column label="当日新增用户充值人数" prop="pay_count" min-width="180px">
+	              <template #header>
+	                <div class="flex items-center">
+						<el-tooltip placement="top">
+						  <template #content>
+						    当日新增用户充值人数<br />
+						  </template>
+						  <el-icon>
+						    <InfoFilled />
+						  </el-icon>
+						</el-tooltip>
+	                  <span>当日新增用户充值人数</span>
+	                  
+	                </div>
+	              </template>
+	              <template #default="scope">
+	                <div class="wrapper">
+	                  <div>{{ scope.row.new_user_recharge_num }}</div>
+	                </div>
+	              </template>
+	            </el-table-column>
+	           <el-table-column label="当日新增用户充率" prop="recharge_rate" min-width="180px">
+	             <template #header>
+	               <div class="flex items-center">
+	           		<el-tooltip placement="top">
+	           		  <template #content>
+	           		    当日新增用户充率<br />
+	           		  </template>
+	           		  <el-icon>
+	           		    <InfoFilled />
+	           		  </el-icon>
+	           		</el-tooltip>
+	                 <span>当日新增用户充率</span>
+	                 
+	               </div>
+	             </template>
+	             <template #default="scope">
+	               <div class="wrapper">
+	                 <div>{{ scope.row.recharge_rate }}</div>
+	               </div>
+	             </template>
+	           </el-table-column>
+	           	<el-table-column label="当日新增用户充总额" prop="new_user_recharge_total" min-width="180px">
+	           	  <template #header>
+	           	    <div class="flex items-center">
+	           			<el-tooltip placement="top">
+	           			  <template #content>
+	           			    当日新增用户充总额<br />
+	           			  </template>
+	           			  <el-icon>
+	           			    <InfoFilled />
+	           			  </el-icon>
+	           			</el-tooltip>
+	           	      <span>当日新增用户充总额</span>
+	           	      
+	           	    </div>
+	           	  </template>
+	           	  <template #default="scope">
+	           	    <div class="wrapper">
+	           	      <div>{{ scope.row.new_user_recharge_total }}</div>
+	           	    </div>
+	           	  </template>
+	           	</el-table-column>
+				<el-table-column label="新增用户人均充值" prop="recharge_mean" min-width="180px">
+				  <template #header>
+				    <div class="flex items-center">
+						<el-tooltip placement="top">
+						  <template #content>
+						    新增用户人均充值<br />
+						  </template>
+						  <el-icon>
+						    <InfoFilled />
+						  </el-icon>
+						</el-tooltip>
+				      <span>新增用户人均充值</span>
+				      
+				    </div>
+				  </template>
+				  <template #default="scope">
+				    <div class="wrapper">
+				      <div>{{ scope.row.recharge_mean }}</div>
+				    </div>
+				  </template>
+				</el-table-column>		   
+	          </el-table>
+	          <Paginate />
+	        </div>
       <template v-slot:content>
         <div style="margin:8px 6px;">
           <el-card shadow="hover" :body-style="{ padding: '20px' }">

src/views/dataStatistics/userStatistics/summaryStatistics.vue

@@ -221,17 +221,17 @@ const initTodayCharge = () => {
   })
 }
 const init = () => {
-
-  statisticUserHistoryData({ miniprogram_id: miniprogram_idJ.value }).then(res => {
-    currentMonth.value = res.data.month;
-    lastMonth.value = res.data.lastMonth;
-    totalData.value = res.data.history;
-  })
+  
+    statisticUserHistoryData({miniprogram_id:miniprogram_idJ.value}).then(res => {
+		currentMonth.value = res.data.month;
+		lastMonth.value = res.data.lastMonth;
+		totalData.value = res.data.history;
+    })
 }
 
 onMounted(() => {
-  if (JSON.parse(Cache.get('nav_data'))?.app.id) {
-    miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id
+ if (JSON.parse(Cache.get('nav_data'))?.app.id) {
+	miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id
   }
   init()
   initTodayCharge()

src/views/notice/mynotice/dataStatistics/notices.vue

@@ -0,0 +1,107 @@
+<template>
+	<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">
+		    <img class="logo" src="@/assets/notice.png" />
+		  </el-badge>
+			   <img class="logo"  v-else   src="@/assets/notice.png"/>
+			<div class="msg">
+				<label class="notices" >{{item.title}}</label>
+				<label class="notices" >{{item.created_at}}</label>
+			</div>
+		</div>
+	</div>
+	<div v-if="list.lenght < 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 notice_img from "";
+	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 = () => {
+		console.log('11111111111',notice.value);
+		if(notice.value.id > 0 && notice.value.is_read == 0){
+			noticeRead(notice.value.id).then(res => {
+				getList();
+			})
+			
+		}
+	  centerDialogVisible.value = false
+	}
+	const getList = () => {
+		noticeListMine({limit:3}).then(res => {
+			list.value = res.data;
+		})
+	};
+	const titleClick = (e) => {
+		notice.value = 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>
+	
+	.msg{
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		margin-right: 50px;
+	}
+	.header-title {
+	  display: flex;
+	  align-items: center;
+	  justify-content:space-between;
+	  h4{
+		  margin-right: 50px;
+		  color: #409EFF;
+	  }
+	}
+	.notice-item{
+		display: flex;
+		margin-top: 18px;
+	}
+	.notices{
+		margin-left: 10px;
+		line-height: 16px;;
+	}
+	.logo{
+		width: 18px;
+		height: 18px;
+	}
+	.notices{
+		font-size: 18px;
+		margin-left: 10px;
+		line-height: 16px;;
+	}
+	.n-time-text{
+		margin-top: 5px;
+		font-size: 16px;
+	}
+</style>

src/views/notice/mynotice/dataStatistics/todayData.vue

@@ -0,0 +1,162 @@
+<template>
+	<p class="title">今日数据 <label style="color: #909399; margin-left: 50px;">注: 以下数据为当日所有小程序的累计数据，如需查看各个小程序数据，可前往<span @click="go2tj" style="color: #29d;">数据统计</span>进行查看</label></p>
+	<div class="data-line">
+		<div class="box-card">
+		<!-- 	<el-tooltip placement="top">
+				<template #content> 新增用户的定义：不在其他推广链接染色时间范围内且被成功绑定到当前链接的用户，即为当前链接对应优化师的新增用户<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip> -->
+			<label class="text-sm">新增用户：</label>
+			<p class="text-base">{{ todayChargeData.new_user_num || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新增用户中今日充值的人数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户充值人数：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_num || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_num || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_vip_num || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新用户充值人数/新增用户<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户付费率：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_rate || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日新增用户的充值总额<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户充值金额：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_total || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新用户充值总额/新用户充值人数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户人均充值：</label>
+			<p class="text-base">{{ todayChargeData.new_user_mean || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日累计充值总金额<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值金额：</label>
+			<p class="text-base">{{ todayChargeData.recharge_total || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.recharge_coin_total || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.recharge_coin_total || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日累计充值笔数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值笔数：</label>
+			<p class="text-base">{{ todayChargeData.recharge_num || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 充值金额/充值笔数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值单价：</label>
+			<p class="text-base">{{ todayChargeData.recharge_mean || '0' }}</p>
+			
+		</div>
+		
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { checkPermission } from '@/directives/permission';
+import { InfoFilled } from '@element-plus/icons-vue';
+import Cache from '@/support/cache';
+import { statisticHomeTodayData } from '@/api/dataStatistics/userStatistics';
+import router from '@/router';
+const todayChargeData = ref({});
+const miniprogram_idJ = ref(0);
+
+const init = () => {
+	statisticHomeTodayData({ miniprogram_id: miniprogram_idJ.value }).then(
+		res => {
+			todayChargeData.value = res.data;
+		}
+	);
+};
+
+onMounted(() => {
+	if (JSON.parse(Cache.get('nav_data'))?.app.id) {
+		miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id;
+	}
+	init();
+});
+
+const go2tj=()=>{
+	router.push({ path: "/statistic/userStatistical" });
+}
+</script>
+
+<style  lang="scss" scoped>
+.data-line{
+  display: flex;   /* flex布局 */
+  justify-content: space-between;   /* 左对齐 */
+  flex-wrap: wrap;   /* 换行 */
+}
+.title{
+	margin-left: 15px;
+}
+.box-card{
+	margin-top: 20px;
+	border-radius: 10px;
+	margin-right: 10px;
+	background-color: cornsilk;
+	padding:15px 20px;
+	height: 200px;
+	width: calc((100% - 60px) / 4);
+	justify-content: flex-start;
+
+
+}
+.box-card:nth-of-type(4n+0) {
+	 margin-right: 0;
+}
+.text-sm{
+
+}
+.text-base{
+	font-size:40px;
+	margin: 20px 0px;
+}
+.text-pt{
+	font-size:10px;
+	margin-top: 15px;
+}
+</style>

src/views/notice/mynotice/index.vue

@@ -1,64 +1,149 @@
 <template>
-  <el-tabs type="border-card" v-model="activeName" class="tabs" @tab-click="handleClick">
-    <el-tab-pane v-for="item in noticesTypes" :key="item.id" :label="item.name" :name="item.id">
-      <el-table :data="currentTableData" class="mt-3" v-loading="loading">
-        <el-table-column prop="created_at" width="200" label="时间" />
-        <el-table-column prop="title" label="标题">
-          <template #default="scope">
-            <el-tag type="success" class="title" size="default" effect="dark" @click="titleClick(scope.row)">{{
-              scope.row.title }}</el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Paginate />
-    </el-tab-pane>
-  </el-tabs>
-  <el-dialog draggable v-model="centerDialogVisible" :title="notice.title" width="30%" center>
-    <div class="flex flex-wrap break-all" v-html="notice.content"></div>
+	
+	<div v-show="showAll == false"> 
+		<el-card style="padding: 5px; 15px;height: calc(24vh);">
+			<div class="header-title"> <p>最新通知 </p> <lable  @click="go2page">查看全部</lable></div>
+			<noticeBlock></noticeBlock>
+		</el-card>
+
+		<el-card shadow="always"  v-action="'statistic.HomeStatistics.statistics'"  v-ac style="margin-top: 20px;height: calc(70vh);">
+			<todayData></todayData>
+		</el-card>
+	</div>
+	<div  v-show="showAll == true">
+		<el-row :gutter="20">
+			<el-col :span="8">
+				<el-tabs  type="border-card" v-model="activeName" class="tabs" @tab-click="handleClick">
+				  <el-tab-pane v-for="item in noticesTypes" :key="item.id" :label="item.name" :name="item.id">
+				<!-- 	<el-table style="height: 800px;" :data="currentTableData" class="mt-3" v-loading="loading">
+					  <el-table-column prop="created_at" width="200" label="时间" />
+					  <el-table-column prop="title" label="">
+						<template #default="scope">
+						  <el-tag type="success" class="title" size="default" effect="dark" @click="titleClick(scope.row)">{{
+							scope.row.title }}</el-tag>
+						</template>
+					  </el-table-column>
+					</el-table> -->
+						<div class="noticebody h-full">
+							<div class="notice-item itme" :class="item.id == notice.id ? 'active':'' " @click="titleClick(item)"  v-for="(item,index) in currentTableData" :key="index" >
+							 <el-badge v-if="item.is_read == 0" is-dot class="item">
+								<el-icon><Bell /></el-icon>
+							  </el-badge>
+							  <el-icon   v-else ><Bell /></el-icon>
+								<label class="notices" >
+								{{item.title}}
+								<p class="n-time-text">{{item.created_at}}</p>
+								</label>
+								
+							</div>
+						</div>
+						<div v-if="JSON.stringify(notice) === '{}'"  style="display: flex;justify-content: center;">
+							<label style="color: darkgray;"> 暂无新通知</label>
+						</div>
+				  </el-tab-pane>
+				  <Paginate />
+				</el-tabs>
+			</el-col>
+			<el-col :span="0"  >
+				<div > </div>
+			</el-col>
+			<el-col :span="16" style="background-color: #fff;">
+				<div style="width: 100%;height: 40px;background-color: #fff;"><el-button class="bak-txt" @click="go2page">返回</el-button></div>
+				 <div sclass="flex h-full flex-wrap break-all" v-html="notice.content"></div>
+			</el-col>
+		</el-row>
+	</div>
+  <el-dialog draggable v-model="centerDialogVisible" :title="popuNotice.title" width="30%" center>
+    <div class="flex flex-wrap break-all" v-html="popuNotice.content"></div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="readNotice">我知道了</el-button>
+        <el-button @click="popuReadNotice">我知道了</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import {
-  useGetList
-} from '@/hook/curd/useGetList';
+import { useGetList} from '@/hook/curd/useGetList';
+import noticeBlock from "./dataStatistics/notices.vue";
+import todayData from "./dataStatistics/todayData.vue";
+import { Bell } from '@element-plus/icons-vue';
 import { ref } from 'vue'
+
 import type { TabsPaneContext } from 'element-plus'
-import { noticesTypesList, noticeDetail, noticeRead, noticePopup } from '@/api/notice/index';
+import {noticeListMine, noticesTypesList, noticeDetail, noticeRead, noticePopup } from '@/api/notice/index';
+import showVue from '@/components/admin/buttons/show.vue';
 const api = 'system/notices/notice/mine';
-const { data, query, search, reset, loading } = useGetList(api, true);
-const currentTableData = computed(() => data.value?.data);
+
 const centerDialogVisible = ref(false)
 const notice = ref({})
+const popuNotice = ref({});
 const noticesTypes = ref<object>([]);
 const activeName = ref(0)
+const showAll = ref(false)
+const { data, query, search, reset, loading } = useGetList(api, true);
+const currentTableData = computed(() => data.value?.data);
 
 const readNotice = () => {
-  noticeRead(notice.value.id).then(res => {
-    console.log(res);
-    search();
-  })
-  centerDialogVisible.value = false
+	if(notice.value.id > 0 && notice.value.is_read == 0){
+	  noticeRead(notice.value.id).then(res => {
+		search();
+	  })
+	
+	}
+ 
 }
-
+const popuReadNotice = () => {
+	if(popuNotice.value.id > 0){
+	  noticeRead(popuNotice.value.id).then(res => {
+		search();
+	  })
+	}
+	 centerDialogVisible.value = false
+}
+const getFistNotice = async () => {
+	let param  = query.value;
+	param.limit = 1;
+	await	noticeListMine(param).then(res => {
+		let temp = res.data.shift(0);
+		if(temp){
+			if(showAll.value == true){
+				titleClick(temp);
+			}
+			notice.value = temp;
+		}else{
+			notice.value = {};
+		}
+	})
+	 query.value.limit = 10;
+};
 const initNoticeOtion = (params: object) => {
   noticesTypesList(params).then(res => {
     noticesTypes.value = res.data
     noticesTypes.value.unshift({ id: 0, name: '全部' })
   })
 }
+const go2page = () =>{
+	showAll.value = !showAll.value;
+	if(showAll.value == true){
+		if(notice.value.id){
+			titleClick(notice.value);
+		}
+		
+	}
+}
 
 const titleClick = (e) => {
+	notice.value = e;
   noticeDetail(e.id).then(res => {
     console.log(res);
-    centerDialogVisible.value = true;
+    // centerDialogVisible.value = true;
     notice.value.id = res.data.id
     notice.value.title = res.data.title
     notice.value.content = res.data.content
+	
+	readNotice();
+
+	
   })
 }
 
@@ -67,30 +152,80 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
   activeName.value = Number(tab?.props?.name)
   query.value.notice_type_id = tab.props.name;
   search();
+  getFistNotice();
 }
 
-onMounted(() => {
+onMounted(async () => {
   noticePopup().then(res => {
     if (res.data.id) {
       centerDialogVisible.value = true;
-      notice.value.id = res.data.id
-      notice.value.title = res.data.title
-      notice.value.content = res.data.content
+      popuNotice.value.id = res.data.id
+      popuNotice.value.title = res.data.title
+      popuNotice.value.content = res.data.content
     }
   })
-  query.value.notice_type_id = activeName;
-  search();
-  initNoticeOtion({})
+	query.value.notice_type_id = activeName;
+	await search();
+	initNoticeOtion({})
+	getFistNotice();
 });
 </script>
-<style>
+
+<style lang="scss" scoped>
+	
+.header-title {
+	margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content:space-between;
+	
+  lable{
+	  font-size: 18px;
+	  margin-right: 50px;
+	  color:  #409EFF;
+  }
+  p{
+	font-size: 18px;
+  }
+}
+.bak-txt{
+	border-color: aliceblue;
+	line-height: 40px;
+	float: right;
+	margin-top: 20px;
+	margin-right: 40px;
+}
 .tabs>.el-tabs__content {
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
+  
 }
 
+
 .title {
   cursor: pointer;
 }
+.notice-item{
+	display: flex;
+	margin-top: 15px;
+}
+.active{
+	color:#409EFF;
+}
+.notices{
+	font-size: 16px;
+	margin-left: 10px;
+	line-height: 18px;;
+}
+.n-time-text{
+	margin-top: 5px;
+	font-size: 14px;
+}
+.logo{
+	width: 18px;
+}
+.h-full{
+	height: calc(75vh);
+}
 </style>