CNCEC_APP/pages/index/board/index.vue

<template>
	<view class="custom-wrap u-padding-30">
		<view class="custom-tabs u-flex box-shadow">
			<view :class="['custom-tabs-tab', tabIndx ? '' : 'custom-tabs-tab_active']" @click="handleChangeTab(0)">
				<u-icon name="anquan" custom-prefix="custom-icon" size="80" />
				<text class="u-margin-top-20">安全生产数据</text>
			</view>
			<view :class="['custom-tabs-tab', tabIndx ? 'custom-tabs-tab_active' : '']" @click="handleChangeTab(1)">
				<u-icon name="zhiliang" custom-prefix="custom-icon" size="80" />
				<text class="u-margin-top-20">质量焊接数据</text>
			</view>
		</view>
		<u-transition :show="tabIndx === 0" name="slide-right">
			<view v-if="tabIndx == 0">
				<ProjectCard />
				<view style="margin-top: -60rpx; padding: 0 20rpx 40rpx">
					<block v-for="(i, idx) in safeComponent">
						<!-- 安全工时 -->
						<SafeHoursCard v-if="i === 1" />
						<!-- 组织机构人员 -->
						<OrganizerCard v-if="i === 2" />
						<!-- 教育培训 -->
						<EducationCard v-if="i === 3" />
						<!-- 安全隐患排查治理 -->
						<DefectTreatmentCard v-if="i === 4" />
						<!-- 安全费用 -->
						<CostCard v-if="i === 5" />
						<!-- 安全费用 -->
						<SpecialEquipCard v-if="i === 6" />
						<!-- 危大工程管控数据 -->
						<BigCrisisCard v-if="i === 7" />
						<!-- 风险分级管控 -->
						<RiskRankingCard v-if="i === 8" />
						<!-- 高风险作业许可 -->
						<WorkCard v-if="i === 9" />
						<!-- 应急管理数据 -->
						<EmergencyCard v-if="i === 10" />
					</block>
				</view>
			</view>
		</u-transition>
		<u-transition :show="tabIndx === 1" name="slide-right">
			<view v-if="tabIndx == 1">
				<!-- 组织机构人员 -->
				<OrgPersonCard />
				<!-- 星级标准化工地建设 -->
				<StarLevelCard />
				<!-- 教育培训 -->
				<EducationCard1 />
				<!-- 计量器具数据 -->
				<MeasuringCard />
				<!-- 报验记录 -->
				<InspectionRecord />
				<!-- 工程划分 -->
				<ProjectItem />
				<!-- 优质工程 -->
				<HighQuality />
				<!-- QC活动 -->
				<QCActivity />
				<!-- 施工方案 -->
				<ConstructionScheme />
				<!-- 图纸会审/技术交底 -->
				<ReviewAndBriefing />
				<!-- 安全隐患排查治理 -->
				<QmsInspect />
				<!-- 质量验收数据 -->
				<AcceptanceData />
				<!-- 焊接数据 -->
				<WeldingData />
			</view>
		</u-transition>
	</view>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';

/* 加载组件
	-------------------------------------------------------------*/
// 安全
import ProjectCard from './safe/projectCard.vue';
import SafeHoursCard from './safe/safeHoursCard.vue';
import OrganizerCard from './safe/organizerCard.vue';
import EducationCard from './safe/educationCard.vue';
import DefectTreatmentCard from './safe/defectTreatmentCard.vue';
import CostCard from './safe/costCard.vue';
import SpecialEquipCard from './safe/specialEquipCard.vue';
import BigCrisisCard from './safe/bigCrisisCard.vue';
import RiskRankingCard from './safe/riskRankingCard.vue';
import WorkCard from './safe/workCard.vue';
import EmergencyCard from './safe/emergencyCard.vue';
// 质量
import OrgPersonCard from './qms/orgPersonCard.vue';
import StarLevelCard from './qms/starLevelCard.vue';
import EducationCard1 from './qms/educationCard.vue';
import MeasuringCard from './qms/measuringCard.vue';
import InspectionRecord from './qms/inspectionRecord.vue';
import ProjectItem from './qms/projectItemCard.vue';
import HighQuality from './qms/highQuality.vue';
import QCActivity from './qms/QCActivity.vue';
import ConstructionScheme from './qms/constructionScheme.vue';
import ReviewAndBriefing from './qms/reviewAndBriefing.vue';
import QmsInspect from './qms/qmsInspect.vue';
import AcceptanceData from './qms/acceptanceData.vue';
import WeldingData from './qms/weldingData.vue';

const safeComponent = ref([2, 1, 3, 4, 5, 6, 7, 8, 9, 10]);

const tabIndx = ref(0);

const handleChangeTab = (idx) => {
	tabIndx.value = idx;
};
</script>

<style lang="scss"></style>