project_process_h5/pages/index/index.vue

<template>
	<view class="content">
		<!-- 项目总览 -->
		<view class="projectAll">
			<view class="all-text">项目总览</view>
			<view class="all-more">查看更多</view>
			<view class="all-select">
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==0">今日</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(0)">今日</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==1">本周</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(1)">本周</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==2">本月</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(2)">本月</view>
			</view>
			<view class="all-num">
				<view class="shuzi" v-for="(item,index) in allList">
					<view class="shu-num">{{item.num}}</view>
					<view>{{item.txt}}</view>
				</view>
			</view>
		</view>
		<!-- 项目列表 -->
		<view class="projectlist">
			<view class="all-text">项目列表</view>
			<view class="all-cui">催办</view>
			<view class="all-more" style="margin: -59rpx 0 0 581rpx;">查看更多</view>
			<view class="all-select">
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==0">今日</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(0)">今日</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==1">本周</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(1)">本周</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==2">本月</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(2)">本月</view>
			</view>
			<!-- 列表 -->
			<view class="projectL" v-for="(item,index) in list" :key="index">
				<view class="projectName">{{item.name}}</view>
				<view class="all-cui" style="margin: -44rpx 0 0 581rpx;">催办</view>
				<view style="margin: 10rpx 0 0 19rpx;">结束时间：{{item.time}}</view>
				<view style="margin: 20rpx 0 0 19rpx;">参与成员：{{item.people}}</view>
				<progress v-if="item.batteryName!='/'" :percent="item.batteryName" activeColor="rgba(0, 97, 255, 1)" border-radius="50" stroke-width="12" show-info font-size='12' active='true' />
				<view class="projectLine" v-if="list.length>1&&(index<=list.length-1)"></view>
			</view>
		</view>
		<!-- 未完成清单 -->
		<view class="projectlist" style="height: 100%;">
			<view class="all-text">未完成清单</view>
			<view class="wei-title1 title1" v-if="qingdan==0">
				<view>问题清单</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title1" style="rgba(0, 0, 0, 1)" v-else @click="qingdan=0">
				问题清单
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="wei-title1 title2" v-if="qingdan==1">
				<view>预警清单</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title2" style="rgba(0, 0, 0, 1)" v-else @click="qingdan=1">
				预警清单
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="all-cui" style="margin: -35px 0 0 581rpx;">催办</view>
			<view class="all-select">
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==0">今日</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(0)">今日</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==1">本周</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(1)">本周</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==2">本月</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(2)">本月</view>
			</view>
			<!-- 未完成清单表格 -->
			<view style="margin: 24rpx 0 0 20rpx;width: 710rpx;">
				<uni-table ref="table" :loading="loading" emptyText="暂无更多数据"
				 style="width:710rpx;table-layout: fixed; word-wrap: break-word;">
					<uni-tr style="background-color: rgba(245, 246, 250, 1);color: rgba(90, 96, 127, 1);font-size: 24rpx;">
						<uni-th align="center">姓名</uni-th>
						<uni-th align="center">项目名称</uni-th>
						<uni-th align="center">项目任务</uni-th>
						<uni-th align="center">情况状态</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index" style="color: rgba(0, 0, 0, 1);">
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.proname }}</view>
						</uni-td>
						<uni-td align="center">{{ item.proren }}</uni-td>
						<uni-td align="center">{{ item.prozhuang }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			
		</view>
		<!-- 部门排行榜 -->
		<view class="projectlist" style="height: 100%;">
			<view class="all-text">部门排行榜</view>
			<view class="wei-title1 title1" v-if="qingdan==0">
				<view>评分</view>
				<view class="wei-line1" style="margin: 10rpx 0 0 -8rpx;"></view>
			</view>
			<view class="title1" style="rgba(0, 0, 0, 1)" v-else @click="qingdan=0">
				评分
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="wei-title1 title2" v-if="qingdan==1">
				<view>完成率</view>
				<view class="wei-line1" style="margin: 10rpx 0 0 4rpx;"></view>
			</view>
			<view class="title2" style="rgba(0, 0, 0, 1)" v-else @click="qingdan=1">
				完成率
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="all-select">
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==0">今日</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(0)">今日</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==1">本周</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(1)">本周</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==2">本月</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(2)">本月</view>
			</view>
			<!-- 部门排行榜表格 -->
			<view style="margin: 24rpx 0 0 20rpx;width: 710rpx;">
				<uni-table ref="table" :loading="loading" emptyText="暂无更多数据"
				 style="width:710rpx;table-layout: fixed; word-wrap: break-word;">
					<uni-tr style="background-color: rgba(245, 246, 250, 1);color: rgba(90, 96, 127, 1);font-size: 24rpx;">
						<uni-th align="center">排行</uni-th>
						<uni-th align="center">部门名称</uni-th>
						<uni-th align="center">评分</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index" style="color: rgba(0, 0, 0, 1);">
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.proname }}</view>
						</uni-td>
						<uni-td align="center">{{ item.proren }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			
		</view>
		<!-- 消息预警推送汇总 -->
		<view class="projectlist" style="height: 100%;">
			<view class="all-text">消息预警推送汇总</view>
			<view class="wei-title1 title1" v-if="qingdan==0">
				<view>汇总</view>
				<view class="wei-line1" style="margin: 10rpx 0 0 -8rpx;"></view>
			</view>
			<view class="title1" style="rgba(0, 0, 0, 1)" v-else @click="qingdan=0">
				汇总
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="wei-title1 title2" v-if="qingdan==1">
				<view>明细</view>
				<view class="wei-line1" style="margin: 10rpx 0 0 -8rpx;"></view>
			</view>
			<view class="title2" style="rgba(0, 0, 0, 1)" v-else @click="qingdan=1">
				明细
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="all-select">
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==0">今日</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(0)">今日</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==1">本周</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(1)">本周</view>
				<view class="all-list" style="margin-left: 25rpx;" v-if="change==2">本月</view>
				<view class="all-list2" style="margin-left: 25rpx;" v-else @click="changeTime(2)">本月</view>
			</view>
			<!-- 汇总表格 -->
			<view style="margin: 24rpx 0 0 20rpx;width: 710rpx;" v-if="qingdan==0">
				<view class="hui-kuang" v-for="(item,index) in xiaoban" :key="index">
					<view class="hui-left">{{item.dan}}</view>
					<view>
						<view class="hui-center">提醒次数</view>
						<view class="hui-center">{{item.num1}}次</view>
					</view>
					<view>
						<view class="hui-center">预警次数</view>
						<view class="hui-center">{{item.num2}}次</view>
					</view>
				</view>
			</view>
			<!-- 消息预警推送汇总明细表格 -->
			<view style="margin: 24rpx 0 0 20rpx;width: 710rpx;" v-if="qingdan==1">
				<uni-table ref="table" :loading="loading" emptyText="暂无更多数据"
				 style="width:710rpx;table-layout: fixed; word-wrap: break-word;">
					<uni-tr style="background-color: rgba(245, 246, 250, 1);color: rgba(90, 96, 127, 1);font-size: 24rpx;">
						<uni-th align="center">项目</uni-th>
						<uni-th align="center">任务</uni-th>
						<uni-th align="center">类型</uni-th>
						<uni-th align="center">发生时间</uni-th>
						<uni-th align="center">部门</uni-th>
						<uni-th align="center">姓名</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index" style="color: rgba(0, 0, 0, 1);">
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.proname }}</view>
						</uni-td>
						<uni-td align="center">{{ item.proren }}</uni-td>
						<uni-td align="center">2024-01-11 12:11:11</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.proname }}</view>
						</uni-td>
						<uni-td align="center">{{ item.proren }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<view style="width: 100%;height:120rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allList:[
					{num:5,txt:'超时在办'},
					{num:5,txt:'正常在办'},
					{num:5,txt:'预警在办'},
					{num:5,txt:'超时办结'},
					{num:5,txt:'正常办结'},
				],
				change:0,
				list:[
					{name:'a项目',time:'2024-06-25  15:00',people:'参与成员：张三  |  李四',batteryName:70,},
					{name:'a项目',time:'2024-06-25  15:00',people:'参与成员：张三  |  李四',batteryName:60,},
				],
				qingdan:0,
				// 未完成清单
				tableData:[
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
					{name:'张三',proname:'xx项目',proren:'xx任务',prozhuang:'紧急'},
				],
				
				// 校办
				xiaoban:[
					{dan:'校办',num1:'3',num2:'5'},
					{dan:'校办',num1:'3',num2:'5'},
					{dan:'校办',num1:'3',num2:'5'},
					{dan:'校办',num1:'3',num2:'5'},
				],
			}
		},
		onLoad() {

		},
		methods: {
			//修改时间框
			changeTime(a){
				this.change=a
				if(a==1){
					
				}
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* 项目总览 */
	.projectAll{
		margin-top: 26rpx;
		width: 100%;
		height: 350rpx;
		background: #FFFFFF;
	}
	.all-text{
		margin: 27rpx 0 0 19rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
	.all-more{
		margin: -47rpx 0 0 581rpx;
		width: 149rpx;
		height: 59rpx;
		border-radius: 92rpx;
		background: #0061FF;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
		line-height: 59rpx;
		text-align: center;
	}
	.all-select{
		display: flex;
		margin: 31rpx 0 0  19rpx;
		width: 712rpx;
		height: 90rpx;
		border-radius: 7rpx;
		background: rgba(242, 247, 255, 1);
		align-items: center;
	}
	.all-list{
		width: 211rpx;
		height: 71rpx;
		border-radius: 7rpx;
		background: rgba(0, 97, 255, 0.1);
		border: 1rpx solid rgba(0, 97, 255, 1);
		font-size: 28rpx;
		line-height: 71rpx;
		color: rgba(0, 97, 255, 1);
		text-align: center;
	}
	.all-list2{
		width: 211rpx;
		height: 71rpx;
		border-radius: 7rpx;
		font-size: 28rpx;
		line-height: 71rpx;
		color: rgba(56, 56, 56, 1);
		text-align: center;
	}
	.all-num{
		display: flex;
		margin: 31rpx 0 0  19rpx;
		width: 712rpx;
	}
	.shuzi{
		width: 20%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
	}
	.shu-num{
		font-size: 40rpx;
		color: rgba(0, 0, 0, 1);
		font-weight: 500;
	}
	/* 项目列表 */
	.projectlist{
		margin-top: 20rpx;
		width: 100%;
		height: 741rpx;
		background: #FFFFFF;
	}
	.all-cui{
		margin: -47rpx 0 0 412rpx;
		width: 149rpx;
		height: 59rpx;
		border-radius: 92rpx;
		border: 1rpx solid rgba(0, 97, 255, 1);
		font-size: 28rpx;
		color: rgba(0, 97, 255, 1);
		line-height: 59rpx;
		text-align: center;
	}
	/* 列表 */
	.projectL{
		margin-top: 10rpx;
		width: 100%;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 1);
	}
	.projectName{
		margin: 45rpx 0 0 20rpx;
		font-size: 28rpx;
		font-weight: 500;
	}
	>>>.uni-progress-bar {
	    border-radius: 129rpx;  
	}  
	>>>.uni-progress-inner-bar {  
	    border-radius: 129rpx;  
	}
	>>>.uni-progress-info {
		margin-top: 0;
		margin-bottom: 0;
		min-width: 2em;
		margin-left: 15px;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 1);
	}
	>>>uni-progress {
	    width: 90%;
		margin: 25rpx 0 0 20rpx;
	}
	.projectLine{
		margin: 40rpx 0 0 20rpx;
		width: 711rpx;
		height: 1rpx;
		background: rgba(230, 230, 230, 1);
	}
	/* 未完成清单 */
	.wei-title1{
		color: rgba(0, 97, 255, 1);
	}
	.title1{
		margin: 37rpx 0 0 20rpx;
		font-size: 28rpx;
	}
	.title2{
		margin: -29px 0 0 197rpx;
		font-size: 28rpx;
	}
	.wei-line1{
		margin: 10rpx 0 0 15rpx;
		width: 79rpx;
		height: 8rpx;
		border-radius: 75rpx;
		background: rgba(0, 97, 255, 1);
	}
	>>>.uni-table[data-v-6cd49106] {
		position: relative;
		width: 710rpx;
		border-radius: 5px;
		background-color: #fff;
		box-sizing: border-box;
		display: table;
    /* overflow-x: inherit; */
}

/* 消息预警汇总表格 */
.hui-kuang{
	display: flex;
	width: 710rpx;
	height: 120rpx;
	/* border: 1rpx solid rgba(215, 219, 236, 1); */
	font-size: 24rpx;
	color: rgba(90, 96, 127, 1);
}
.hui-left{
	width: 171rpx;
	height: 120rpx;
	background: rgba(245, 246, 250, 1);
	line-height: 120rpx;
	text-align: center;
}
.hui-center{
	width: 270rpx;
	height: 60rpx;
	border: 1rpx solid rgba(215, 219, 236, 1);
	line-height: 60rpx;
	text-align: center;
}
</style>