examTeamApp/pages/PublicCards/contrast.vue

<template>
	<view class="content">
		<view class="tabbar">
			<scroll-view class="scroll-menu" scroll-x="true" style="white-space: nowrap;">
				<view v-for="(item,index) in labellist" :class="[active==index?'active':'']"
					@click="handleActive(item,index)">
					<text>{{item}}</text>
				</view>
			</scroll-view>
		</view>
		<view class=" calendar">
			<!-- 日历 -->
			<ren-calendar ref='ren' :markDays='markDays' @onDayClick='onDayClick' @onMonthClickPre='onMonthClickPre'
				v-if="isShow">
			</ren-calendar>
			<!--  -->
			<view class="box" v-if="infoList.length">
				<view class="list" v-for="(item,index) in infoList" :key="index" @click="addMemberTags(item.id,item)">
					<view class="item">
						<view class="check">
							<uni-icons :type="isActive.indexOf(item.id)!=-1?'checkbox-filled':'circle'" size="22"
								:color="isActive.indexOf(item.id)!=-1?'#FEC407':'#dfdfdf'"></uni-icons>
						</view>
						<view>{{item.v1}}<text>{{item.v1_name}}</text></view>
						<view v-if="item.v2">{{item.v2}}<text>{{item.v2_name}}</text></view>
						<view v-if="item.v3">{{item.v3}}<text>{{item.v3_name}}</text></view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="bottom">
				<view class="list" v-for="(ite,ind) in ActiveDays" :key="ind" v-if="isActive"
					@click="addMemberTags(ite.id,ite)">
					<view class="item borderRadius">
						<view class="time">{{ite.r_t}}</view>
						<view>{{ite.v1}}<text>{{ite.v1_name}}</text></view>
						<view v-if="ite.v2">{{ite.v2}}<text>{{ite.v2_name}}</text></view>
						<view v-if="ite.v3">{{ite.v3}}<text>{{ite.v3_name}}</text></view>
						<view class="check">
							<uni-icons type="clear" size="22" color="#999"></uni-icons>
						</view>
					</view>
				</view>
				<view class="pkclass" v-if="length==2">vs</view>
				<!-- <view :class="{'active':length!=2}" class="btn" @click="handlePK">对比</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/element/ren-calendar/ren-calendar.vue';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				markDays: [],
				infoList: [],
				list: [],
				isActive: [],
				ActiveDays: [],
				token: null,
				startM: null,
				endM: null,
				isShow: true,
				acd_id: "",
				active: 0,
				labelName: "",
			}
		},
		components: {
			RenCalendar,
		},
		computed: {
			...mapState(["user", "TrendPk", "labelList"]),
			labellist() {
				let that = this
				let list = []
				that.labelList.forEach(ite => {
					if (ite.acd_id == that.acd_id) {
						list = ite.list
						that.labelName = ite.list[0]
					}
				})
				return list
			},
			length() {
				return this.isActive.length
			},
			endDate() {
				return this.$tools.getDate("start")
			},
		},
		onLoad(optoins) {
			let that = this
			that.acd_id = optoins.acd_id
			that.startM = that.$tools.getDate("m").substring(0, 10)
			that.endM = that.$tools.getDate("m").substring(11, 21)
			that.markDays = []
			that.list = []
			that.isActive = []
			that.ActiveDays = []
			that.$nextTick(() => {
				that.isShow = true
				that.getList(that.startM, that.endM)
			})
		},
		methods: {
			getList(start, end) {
				let that = this
				that.$model.getPublicResultdiff({
					aud_id: uni.getStorageSync('userid'),
					acd_id: that.acd_id,
					s_time: start,
					e_time: end,
					name: that.labelName
				}).then(res => {
					if (res) {
						that.markDays = res.Dlist
						that.list = res.data
						for (var i = 0; i < res.data.length; i++) {
							if (Date.parse(that.endDate) == Date.parse(res.data[i].r_t)) {
								that.infoList.push(res.data[i])
							}
						}
						console.log("对比", res, )
					}
				})
			},
			onMonthClickPre(data) {
				console.log("onMonthClickPre", data)
				let that = this
				let start = data.substring(0, 10)
				let end = data.substring(11, 21)
				that.infoList = []
				that.markDays = []
				that.list = []
				that.getList(start, end)
			},
			onDayClick(data) {
				let that = this
				this.infoList = []
				for (var i = 0; i < that.list.length; i++) {
					if (Date.parse(data.date) == Date.parse(that.list[i].r_t)) { //includes 检测数组是否有某个值
						this.infoList.push(that.list[i]);
					}
				}
			},
			addMemberTags(index, item) {
				var that = this;
				console.log("addMemberTags", index, item)
				if (that.isActive.indexOf(index) == -1) {
					that.isActive.push(index);
					that.ActiveDays.push(item);
				} else {
					that.isActive.splice(that.isActive.indexOf(index), 1);
					that.ActiveDays.splice(that.ActiveDays.indexOf(item), 1);
				}
				if (that.isActive.length > 2) {
					that.isActive.splice(0, 1)
					that.ActiveDays.splice(0, 1);
				}
			},
			handlePK() {
				let that = this
				if (that.isActive.length != 2) {
					that.$tools.msg("请先选择数据！")
					return
				}
				let info = {}
				info.type = that.acd_id
				info.before_id = that.isActive[0]
				info.after_id = that.isActive[1]
				console.log("1111", info, that.isActive)
				uni.navigateTo({
					url: "/pages/compk/pkdetail?info=" + JSON.stringify(info)
				})
			},
			handleActive(ite, ind) {
				let that = this
				that.active = ind
				that.labelName = ite
				that.startM = that.$tools.getDate("m").substring(0, 10)
				that.endM = that.$tools.getDate("m").substring(11, 21)
				that.list = []
				that.infoList = []
				that.markDays = []
				that.isActive = []
				that.ActiveDays = []
				that.$nextTick(() => {
					that.isShow = true
					that.getList(that.startM, that.endM)
				})
			},
		},

	}
</script>

<style scoped lang="scss">
	.calendar {
		padding-top: 60px;
	}

	/deep/.calendar-wrapper {
		margin: 15px;

		.header {
			background-color: #fff;
			color: $maincolor;
			border-radius: 10px 10px 0 0;
		}
		/deep/uni-icons {
		    color: $maincolor;
		}
	}

	.item {
		font-size: 30rpx !important;
	}

	.tabbar {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		justify-content: space-between;
		border-bottom: 1px solid #f7f7f7;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
		background-color: #fff;

		.scroll-menu {
			width: 100%;
			white-space: nowrap;

			view {
				height: 55px;
				line-height: 55px;
				display: inline-block;
				min-width: 100px;
				margin: 0 10px;
				text-align: center;
			}
		}

		.active {
			color: $maincolor;
			font-weight: bold;
			border-bottom: 2px solid $maincolor;
		}
	}
</style>