jpcj-h5/src/views/lightMock/index.vue

<template>
	<div style="height: 100vh; background: #eeeeee">
		<m-nav-bar title="灯光模拟"></m-nav-bar>
		<div class="header-border"></div>
		<lightConfig
			@close="
				() => {
					lightConfigVisible = false;
				}
			"
			v-if="lightConfigVisible"></lightConfig>
		<composeTopicsMask
			v-if="singleTopicsVisible"
			@close="
				() => {
					singleTopicsVisible = false;
				}
			"
			@before="selectBeforeCom"
			@after="selectAfterCom"
			:title="singleTopicTitle"
			:list="listItem"
			:show="true"></composeTopicsMask>
		<van-cell
			@click="
				() => {
					lightConfigVisible = true;
				}
			"
			class="custom-cell"
			title="考试要求：随机抽取一组灯光进行考试"
			value="设置"
			is-link />
		<div class="gray-space-12"></div>
		<van-tabs class="custom-tabs" v-model:active="active">
			<van-tab title="组合">
				<composeTopicList @select="selectCom" :list="list1"></composeTopicList>
			</van-tab>
			<van-tab title="单项">
				<singleTopicList :list="list2"></singleTopicList>
			</van-tab>
		</van-tabs>
		<examTopicList
			@close="
				() => {
					examTopicListVisible = false;
				}
			"
			:comList="list1"
			:singleList="list2"
			v-if="examTopicListVisible"></examTopicList>
		<div
			@click="
				() => {
					examTopicListVisible = true;
				}
			"
			class="fixBottom">
			<div class="button-halo">
				<button>开始考试</button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import composeTopicList from "./components/composeTopicList.vue";
import composeTopicsMask from "./components/composeTopicsMask.vue";
import singleTopicList from "./components/singleTopicList.vue";
import lightConfig from "./components/lightConfig.vue";
import examTopicList from "./components/examTopicList.vue";
import { lightingCombinationList, lightingItemList, lightingCombinationId } from "@/api/";
import { Toast } from "vant";
const active = 0;
let examTopicListVisible = ref(false);
let lightConfigVisible = ref(false);
let list1Index = ref(-1);
let list1Ids = ref<Number[]>([])
let list1 = ref([
	{
		createTime: "2022-03-21 16:40:22",
		updateTime: "2022-03-21 16:51:11",
		id: 18,
		title: "新灯光01",
		operation: "开始-远近光交替-远近光交替-远光灯-近光灯-示廓灯/危险警示灯-结束",
		icon: "https://t1-1305573081.file.myqcloud.com/lighting/icon/6.png",
		itemId: "3,10,12,5,7,15,17",
	},
]);
let list2 = ref([
	{
		createTime: "2022-03-21 14:35:59",
		updateTime: "2022-03-21 15:54:27",
		id: 3,
		title: "下面将进行模拟夜间行驶灯光的考试，请在5秒内做出相应的灯光操作。【停顿】【停顿】【停顿】请开启前照灯",
		operation: "开始（准备）",
		icon: "https://t1-1305573081.file.myqcloud.com/lighting/icon/1.png",
		voice: "https://t1-1305573081.file.myqcloud.com/lighting/voice/common3.mp3",
		process: 1,
	},
]);
let listItem = ref([]);
let singleTopicsVisible = ref(false);
let singleTopicTitle = ref("");
lightingCombinationList().then((res) => {
	list1.value = res.rows;


	// console.log(list1);
});
lightingItemList().then((res) => {
	res.rows.forEach((item) => {
		item.operation = "灯光操作：" + item.operation;
	});
	list2.value = res.rows;
});
let selectCom = (item: any, index: number) => {
	list1Index.value = index;
	singleTopicsVisible.value = true;
	singleTopicTitle.value = item.titile;
	lightingCombinationId(item.id).then((res) => {
		listItem.value = res.data;
	});
};
let selectBeforeCom = () => {
	if (list1Index.value == 0) {
		Toast("已经到底了");
	} else {
		list1Index.value = list1Index.value - 1;
		let item = list1.value[list1Index.value];
		singleTopicTitle.value = item.titile;
		lightingCombinationId(item.id).then((res) => {
			listItem.value = res.data;
		});
	}
};

let selectAfterCom = () => {
	if (list1Index.value == list1.value.length - 1) {
		Toast("已经到底了");
	} else {
		list1Index.value = list1Index.value + 1;

		let item = list1.value[list1Index.value];
		singleTopicTitle.value = item.titile;
		console.log(list1, item);
		lightingCombinationId(item.id).then((res) => {
			listItem.value = res.data;
		});
	}
};
</script>

<style lang="scss" scoped>
.header-border {
	width: 100%;
	height: 2px;
	background: rgb(231, 231, 231);
}
.gray-space-12 {
	width: 100%;
	height: 12px;
	background: rgb(238, 238, 238);
}
.custom-cell {
	:deep .van-cell__title {
		white-space: nowrap;
	}
}
.custom-tabs {
	height: 440px;
	overflow-y: scroll;
	background: #fff;
	:deep .van-tabs__wrap {
		border-bottom: 1px solid rgb(238, 238, 238);
	}
	:deep .van-tabs__line {
		width: 30px;
		background: #01c18d;
	}
}
.fixBottom {
	position: fixed;
	bottom: 0;
	font-size: 14px;
	width: 100%;
	display: flex;
	justify-content: center;
	font-size: 16px;
	.button-halo{
		width: 80px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		background: rgb(255, 255, 255);
		border-radius: 50%;
		box-shadow: 0px 0px 3px rgb(121, 121, 121);




	}
	button {
		border: none;
		width: 60px;
		height: 60px;
		color: white;
		background: #01c18d;
		padding: 0 10px;
		border-radius: 50%;


	}
}
</style>