zheng_xie_ui/work/pages/report/report.vue

<template>
	<view class="zxbox">
		<view class="navbox">
			<uni-nav-bar color="#ffffff" rightWidth="200rpx" @clickLeft="getBack"  title="年度履职报告" :background-color="backgroundColor" :border="false"
				statusBar='true' fixed="true">
				<block slot="left">
					<view class="topl">
						<image :src="backimg" ></image>
					</view>
				</block>
				<block slot="right">
					<picker mode="date" fields="year" value="nd" class="infolist_a" @change='bindDateChange'>
						<view class="picks">
							<view :class="nd?'':'f16 co80'">{{nd||"请选择"}}</view>
							<image :src="upimg"></image>
						</view>
					</picker>
				</block>
			</uni-nav-bar>
		</view>
		<image :src="bgimg" class="bgimg"></image>
		<view class="mbox">
			<view class="head flexc mb18">
				<image :src="headimg" class="headimg"></image>
				<view class="hinfo">
					<view class="tit">何潇潇</view>
					<view class="medal flexc">
						<view class="bg bg1">
							<image :src="medala"></image>
							界别<text></text>中国共产党
						</view>
						<view class="bg bg2">
							<image :src="medalb"></image>
							党派<text></text>中国共产党
						</view>
					</view>
				</view>
			</view>
			<view class="jinfo">
				<view class="tit mb14">基本信息</view>
				<view class="flex mb11">
					<view class="imgs"><image :src="infoa" class="imga"></image></view>
					<view class="txt">身份证号 | 32000019810205003X</view>
				</view>
				<view class="flex mb11">
					<view class="imgs"><image :src="infob" class="imgb"></image></view>
					<view class="txt">联系方式 | 13700558100</view>
				</view>
				<view class="flex mb11">
					<view class="imgs"><image :src="infoc" class="imgc"></image></view>
					<view class="txt">工作单位及职务 | 潜山市政协委员会 委员</view>
				</view>
				<view class="flex mb11">
					<view class="imgs"><image :src="infod" class="imgd"></image></view>
					<view class="txt">乡镇(经开区)委员工作室 | 黄铺镇工作室</view>
				</view>
			</view>
			<!-- 分 -->
			<view class="score flexcj mb20">
				<view class="scorea">
					<image :src="bga"></image>
					<view class="box flexccc">
						<view class="num">85</view>
						<view class="f12 fw coe2">履职得分情况</view>
						<view class="f12 co22">(满分100分)</view>
					</view>
				</view>
				<view class="scorea">
					<image :src="bgb"></image>
					<view class="box flexccc">
						<view class="num">85</view>
						<view class="f12 fw co83">综合排名</view>
						<view class="f12 co22">(共436名)</view>
					</view>
				</view>
			</view>
			<!-- tab -->
			<view class="tabs mb27">
				<view v-for="(ite,idx) in tabList" @click="getTabFn(ite.val)" :class="tabval==ite.val?'act':''" class="tab" :key="ite.val">{{ite.tit}}</view>
			</view>
			<view class="flexcw mb28">
				<view class="nums bga">
					<view class="tit flex1">政协提案</view>
					<view class="txt"><text>5</text>件</view>
				</view>
				<view class="nums bgb">
					<view class="tit flex1">社情民意</view>
					<view class="txt"><text>5</text>件</view>
				</view>
				<view class="nums bga">
					<view class="tit flex1">全会</view>
					<view class="txt"><text>5</text>件</view>
				</view>
				<view class="nums bgb">
					<view class="tit flex1">活动</view>
					<view class="txt"><text>5</text>件</view>
				</view>
				<view class="nums bga">
					<view class="tit flex1">普通会议</view>
					<view class="txt"><text>5</text>件</view>
				</view>
				<view class="nums bgb">
					<view class="tit flex1">会议发言</view>
					<view class="txt"><text>5</text>件</view>
				</view>
			</view>
			<!-- 雷达图 -->
			<view class="mb32">
				<qiun-data-charts type="radar" :opts="opts" :chartData="chartData"></qiun-data-charts>
			</view>
			<!-- 各项得分 -->
			<view class="jinfo">
				<view class="tit mb14">各项得分</view>
				<view class="gsbox">
					<view class="gslist">
						<view class="gtit">活动</view>
						<view class="gtxt">3.1</view>
					</view>
					<view class="gslist">
						<view class="gtit">会议 </view>
						<view class="gtxt">3.1</view>
					</view>
					<view class="gslist">
						<view class="gtit">社情民意</view>
						<view class="gtxt">3.1</view>
					</view>
					<view class="gslist">
						<view class="gtit">政协提案</view>
						<view class="gtxt">3.1</view>
					</view>
					<view class="gslist">
						<view class="gtit">会议发言</view>
						<view class="gtxt">3.1</view>
					</view>
					<view class="gslist">
						<view class="gtit">其他</view>
						<view class="gtxt">3.1</view>
					</view>
				</view>
			</view>
			<!-- 提案方便 -->
			<view class="list">
				<report-list type='2' :wtdt="wtdt" :datalist="tabList"></report-list>
				<view class="upmore flexccc">
					<image :src="upmimg"></image>
					<view>下拉更多</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import reportList from "@/work/components/report/list.vue"
	export default {
		components:{reportList},
		data() {
			return {
				headimg:require("@/static/images/mine/header.png"),
				backimg:require("@/work/static/images/back.png"),
				bgimg: require("@/work/static/images/report/bg.png"),
				infoa:require("@/work/static/images/report/infoa.png"),
				infob:require("@/work/static/images/report/infob.png"),
				infoc:require("@/work/static/images/report/infoc.png"),
				infod:require("@/work/static/images/report/infod.png"),
				bga:require("@/work/static/images/report/bga.png"),
				bgb:require("@/work/static/images/report/bgb.png"),
				medala:require("@/work/static/images/report/medala.png"),
				medalb:require("@/work/static/images/report/medalb.png"),
				upimg:require("@/work/static/images/report/up.png"),
				upmimg:require("@/static/images/home/up.png"),
				backgroundColor:'transparent',
				nd:'2024',
				tabval:0,
				wtdt:'',
				tabList:[{tit:'履职状况',val:'0'},{tit:'提案方面',val:'1'},{tit:'社情民意方面',val:'2'},{tit:'会议参与情况',val:'3'},{tit:'活动参与情况',val:'4'}],
				chartData:{
					categories: ["活动","其他","维度3","维度4","维度5","维度6"],
					series: [{ name: "成交量1", data: [90,110,165,195,187,172]},],				
				},
				opts: {
				    color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				      padding: [5,5,5,5],
				      dataLabel: false,
				      enableScroll: false,
				      legend: {
				        show: true,
				        position: "right",
				        lineHeight: 25
				      },
					  "legend": {"show": false,},
				      extra: {
				        radar: {
				          gridType: "radar",
				          gridColor: "#CCCCCC",
				          gridCount: 3,
				          opacity: 0.2,
				          max: 200,
				          labelShow: true,
				          border: true
				        }
				      }
				    }
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			var listTop=Number(this.listTop)-Number(this.nvaHeight)
			if (scrollTop <=this.nvaHeight) {
				const opacity = scrollTop / 100 // 计算透明度值
				const color = `rgba(29, 100, 226, ${opacity})`
				this.backgroundColor = color // 更新盒子背景颜色
			} else {
				this.backgroundColor = '#1D64E2'
			}
		},
		onLoad() {
		},
		methods: {
			getBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getTabFn(val){
				this.tabval=val
			}
		}
	}
</script>

<style lang="scss">
page {background-color: #ffffff;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;
	.topl{width: 60rpx;height: 60rpx;display: flex;align-items: center;justify-content: center;
		image{width: 40rpx;height: 30rpx;}
	}
	.topr{width: 36rpx;height: 36rpx;position: relative;margin-right: 10rpx;
		image{width: 100%;height: 100%;}
		.cir{width: 14rpx;height: 14rpx;background: #DF0024;border-radius: 50%;position: absolute;right: -7rpx;top: -7rpx;}
	}	
}
.zxbox{
	.bgimg{width: 100%;height: 196rpx;}
	.mbox{margin-top: -34rpx;padding: 34rpx 24rpx 30rpx;z-index: 1;position: relative;border-radius: 30rpx 30rpx 0 0;background-color: #ffffff;
		.head{
			.headimg{width: 140rpx;height: 140rpx;flex: 0 0 auto;margin-right: 34rpx;}
			.hinfo{
				.tit{font-weight: bold;font-size: 34rpx;color: #222327;margin-bottom: 26rpx;}
				.medal{
					.bg{position: relative;height: 40rpx;border-radius: 4rpx;min-width: 200rpx;font-weight: 500;
font-size: 20rpx;padding-left: 16rpx;box-sizing: border-box;text-align: center;
color: #FFFFFF;line-height: 40rpx;
text{border-right: 2rpx solid #ffffff;margin: 0 8rpx;}
					&.bg1{background: #C8A46D;margin-right: 36rpx;}
					&.bg2{background: #BC2828;}
						image{width: 32rpx;height: 40rpx;position: absolute;left: -16rpx;top: 0;}
					}
				}
			}
		}
		.jinfo{padding-bottom: 22rpx;
			.tit{font-weight: bold;font-size: 30rpx;color: #222327;}
			.imgs{width: 30rpx;height: 34rpx;display: flex;align-items: center;justify-content: center;margin-right: 14rpx;
				.imga{width:30rpx;height: 24rpx;}
				.imgb{width:18rpx;height: 26rpx;}
				.imgc{width:30rpx;height: 26rpx;}
				.imgd{width:26rpx;height: 26rpx;}
			}
			.txt{font-weight: 500;font-size: 26rpx;color: #222327;}
			.gsbox{background: #ECF1FD;border-radius: 10rpx;padding: 48rpx 26rpx 18rpx;display: flex;flex-wrap: wrap;justify-content: space-between;
				.gslist{width: 242rpx;display: flex;align-items: center;margin-bottom: 28rpx;flex: 0 1 auto;
					.gtit{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;}
					.gtxt{font-weight: bold;font-size: 30rpx;color: #004BF6;flex:1;text-align: right;}
				}
			}
		}
		.score{
			.scorea{width: 334rpx;height: 146rpx;position: relative;
				image{width: 100%;height: 100%;}
				.box{position: absolute;left: 0;right: 0;top: 0;bottom: 0;text-align: center;
					.num{font-weight: 800;font-size: 40rpx;color: #222327;}	
				}
			}
		}
		.tabs{display: flex;align-items: center;overflow-x: auto;
			.tab{font-weight: 500;font-size: 26rpx;color: #666666;position: relative;height: 88rpx;line-height: 88rpx;margin-right: 40rpx;flex: 0 0 auto;
				&.act{font-size: 30rpx;font-weight: bold;color: #222327;
					&::after{content: '';width:52rpx;height: 10rpx;background: #1D64E2;border-radius: 6rpx;position: absolute;left: 50%;margin-left: -26rpx;bottom: 0rpx;}
				}
			}
		}
		.nums{width: 332rpx;height: 110rpx;border-radius: 10rpx;display: flex;align-items: center;padding: 0 26rpx;margin-bottom: 24rpx;margin-right: 38rpx;
			&:nth-child(2n){margin-right: 0;}
			.tit{font-weight: bold;font-size: 30rpx;}
			.txt{font-weight: 500;font-size: 24rpx;
				text{font-weight: 500;font-size: 40rpx;color: #343434;margin-right: 8rpx;}
			}
			&.bga{background: #E8EFFF;
				.tit{color: #004BF6;}
				text{color: #004BF6;}
			}
			&.bgb{background: #FFECE3;
				.tit{color: #FF4E00;}
				text{color: #FF4E00;}
			}
			
		}
	}
}
.picks{
	width: 160rpx;height: 56rpx;background-color: rgba(15, 57, 116, 0.5);display: flex;align-items: center;padding: 0 24rpx;box-sizing: border-box;border-radius: 10rpx;
		image{width: 16rpx;height: 10rpx;flex: 0 0 auto;}
		view{font-weight: bold;font-size: 26rpx;color: #FFFFFF;flex: 1;}
}
.upmore{
	image{width: 40rpx;height: 32rpx;margin-bottom: 16rpx;}
	view{font-weight: 500;font-size: 26rpx;color: #AAAAAA;}	
}
</style>