ezhizao_dms_app/pages/queryLotInfo/index.vue

<template>
	<view class="tab-container">
		<view :class="['tab-item', isActiveId === 1 ? 'active': '']" @click="handleClickTab(1)">批次信息</view>
		<view :class="['tab-item', isActiveId === 2 ? 'active': '']" @click="handleClickTab(2)">领料信息</view>
		<view :class="['tab-item', isActiveId === 3 ? 'active': '']" @click="handleClickTab(3)">历史报工</view>
		<view :class="['tab-item', isActiveId === 4 ? 'active': '']" @click="handleClickTab(4)">检查信息</view>
		<view :class="['tab-item', isActiveId === 5 ? 'active': '']" @click="handleClickTab(5)">分选信息</view>
	</view>
	<scroll-view class="scroll-container" scroll-y scroll-with-animation :scroll-into-view="scrollToId"
		:scroll-top="scrollTop" @scrolltoupper="handleScrollToUpper" @scrolltolower="handleScrollToLower"
		@scroll="handleScroll">
		<!-- 批次信息 -->
		<view id="item1" class="scroll-item">
			<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">批次信息</text>
			</view>
			<view v-if="lotData==null" class="no-date">
				<text>暂无数据</text>
			</view>
			<view v-else>
				<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label">批次号:</text>
					<text class="label right" style="font-size: 30rpx;color: black;">{{ lotData['lotCode'] }}</text>
				</view>
				<view class="item-info uni-row"> <text class="label">产品描述:</text>
					<text class="label right ">{{ lotData['productDescription'] }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">箱号:</text>
					<text class="label right">{{ lotData['carrierName']}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">投产量:</text>
					<text
						class="label right">{{ lotData['prevProcess'] ? lotData['processQualifiedNum'] : lotData['productionQuantity']}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">合格数量:</text>
					<text class="label right">{{ lotData['totalQuantityNum']}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">上道工序:</text>
					<text
						class="label right">{{ lotData.prevProcess && lotData['prevProcess'] != "" ? lotData['prevProcess'].processAlias : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">当前工序:</text>
					<view class="label right uni-row">
						<text
							class="label right">{{ lotData.currentProcess && lotData['currentProcess'] != "" ? lotData['currentProcess'].processAlias : '-'}}</text>
						(<view style="color:  #1684fc;" @click.stop="handleClickProcessList(lotData)">&nbsp;工艺列表&nbsp;
						</view>)
					</view>
				</view>
				<view class="item-info uni-row">
					<text class="label">下道工序:</text>
					<text
						class="label right">{{ lotData.nextProcess && lotData['nextProcess'] != "" ? lotData['nextProcess'].processAlias : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">当前设备:</text>
					<text
						class="label right">{{ lotData['currentEquipmentCode'] && lotData['currentEquipmentCode'] != "" ? lotData['currentEquipmentCode'] : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">当前操作者:</text>
					<text class="label right">{{ lotData['currentNickName']}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">批次状态:</text>
					<text
						class="label right">{{ lotData['status'] == 1 ?"进行中":lotData['status'] == 3?"周转中":lotData['status'] == 2?"待领取":lotData['status'] == 4?"已送达":lotData['status'] == 5?"已完成":"未开始"}}</text>
				</view>
			</view>
		</view>
		<!-- 领料信息 -->
		<view id="item2" class="scroll-item">
			<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">领料信息</text></view>
			<view v-if="furnaceData==null" class="no-date">
				<text>暂无数据</text>
			</view>
			<view v-else>
				<view class="item-info uni-row" style="margin-top: 16rpx;">
					<text class="label">炉号</text>
					<text id="manufacturer"
						class="label right">{{furnaceData['furnaceNumber'] ? furnaceData['furnaceNumber'] : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">计划单号</text>
					<text id="manufacturer"
						class="label right">{{ furnaceData['productionPlanNo'] ? furnaceData['productionPlanNo'] : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">序号</text>
					<text class="label right">{{ furnaceData['lineNumber'] ? furnaceData['lineNumber'] : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">厂家</text>
					<text class="label right">{{ furnaceData['factory'] ? furnaceData['factory'] : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">牌号</text>
					<text class="label right">{{ furnaceData['brandNumber'] ?furnaceData['brandNumber'] : '-' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">规格</text>
					<text class="label right">{{ furnaceData['spec'] ?furnaceData['spec'] : '-' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">形状</text>
					<text class="label right">{{ furnaceData['shape'] ?furnaceData['shape'] : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">材料直径</text>
					<text class="label right">{{ furnaceData['diameter'] ? furnaceData['diameter'] : '-' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">原料编码</text>
					<text
						class="label right">{{ furnaceData['rawMaterialCode'] ? furnaceData['rawMaterialCode'] : '-' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">来料日期</text>
					<text
						class="label right">{{ furnaceData['incomingDate'] ? furnaceData['incomingDate'] : '-' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">技术要求1</text>
					<text
						class="label right">{{ furnaceData['firstTechnicalRequirement'] ? furnaceData['firstTechnicalRequirement'] : '-' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">技术要求2</text>
					<text
						class="label right">{{ furnaceData['secondTechnicalRequirement'] ?furnaceData['secondTechnicalRequirement'] : '-' }}</text>
				</view>
			</view>
		</view>
		<!-- 历史报工 -->
		<view id="item3" class="scroll-item">
			<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">历史报工</text></view>
			<view v-if="historyData.length == 0" class="no-date">
				<text>暂无数据</text>
			</view>
			<view v-for="(item, index) in historyData" :key="index" class="list-item" id="historyData">
				<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">工序:</text>
					<text class="label right">{{ item['processAlias'] }}</text>
				</view>
				<view class="item-info uni-row"> <text class="label">投产量:</text>
					<text class="label right ">{{ item['prodNum'] }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">合格数量:</text>
					<text class="label right">{{ item['qualifiedNum']}}</text>
				</view>
				<view v-for="(info, index) in item.rejectList" :key="index">
					<view class="item-info uni-row">
						<text class="label">废品信息:</text>
						<text class="label right">{{ info['reason']!=""?info['reason']:'-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">废品数量:</text>
						<text class="label right">{{ info['rejectNum']}}</text>
					</view>
				</view>
				<view class="item-info uni-row">
					<text class="label">设备:</text>
					<text class="label right">{{ item['equipmentDetailCode'] ?item['equipmentDetailCode']:'-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">操作者:</text>
					<text class="label right">{{ item['nickName']}}</text>
				</view>
				<view v-if="index!=historyData.length-1" class='middle'>
					<view class='segment'></view>
					<view class='segment'></view>
				</view>
			</view>
		</view>
		<!-- 检查信息 -->
		<view id="item4" class="scroll-item">
			<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">检查信息</text></view>
			<view v-if="inspectionData.length == 0" class="no-date">
				<text>暂无数据</text>
			</view>
			<view v-else v-for="(item, index) in inspectionData" :key="index" class="list-item" id="inspectionData">
				<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">检查类型:</text>
					<text class="label right">{{ getType(item.type) }}</text>
				</view>
				<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">工序:</text>
					<text class="label right">{{ item['processAlias'] }}</text>
				</view>
				<view class="item-info uni-row"> <text class="label">检查员:</text>
					<text class="label right ">{{ item['nickName'] }}</text>
				</view>
				<view v-if="item.processInspectionDetails && item.processInspectionDetails.length>0"
					v-for="(info, index) in item.processInspectionDetails" :key="index">
					<view class="item-info uni-row">
						<text class="label">检测项目:</text>
						<text class="label right">{{ info['checkStandard']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">检测结果:</text>
						<text class="label right">{{ info['checkResult'] !=""?info['checkResult'] :'-'}}</text>
					</view>
					<view v-if="item.type =='outsourcedInspection '" class="item-info uni-row">
						<text class="label">废品数量:</text>
						<text class="label right">{{ info['rejectNum']}}</text>
					</view>
				</view>
				<!-- 拍照上传部分 -->
				<view v-if="item.processInspectionPictureList && item.processInspectionPictureList.length>0"
					class="item-info uni-row">
					<text class="label">拍照上传:</text>
					<text class=" label right">
						<uni-file-picker v-model="item.processInspectionPictureList" :readonly="true"
							return-type="array" :image-styles="imageStyles" file-mediatype="image"
							class="my-files"></uni-file-picker>
					</text>
				</view>

				<view v-for="(data, index) in item.dayworkItemConsults" :key="index">
					<view class="item-info uni-row">
						<text class="label">咨询信息:</text>
						<text class="label right">{{ data['content']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">咨询结果:</text>
						<text class="label right">{{ data['status'] == 0?"未回复":data['status'] == 1?"不合格":"合格"}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">技术人员:</text>
						<text class="label right">{{ data['technicianName']}}</text>
					</view>
				</view>
				<view class="item-info uni-row">
					<text class="label">备注:</text>
					<text class="label right">{{ item['remark'] !="" ?item['remark']:'-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">检查结果:</text>
					<text class="label right">{{ item['status'] == 0?"待确认":item['status'] == 1?"合格":"不合格"}}</text>
				</view>
				<view v-if="index!=inspectionData.length -1" class='middle'>
					<view class='segment'></view>
					<view class='segment'></view>
				</view>
			</view>
		</view>
		<!-- 分选信息 -->
		<view id="item5" class="scroll-item">
			<view> <text style="font-size: 32rpx;display: flex;justify-content: center;">分选信息</text></view>
			<view v-if="sortData.length == 0" class="no-date">
				<text>暂无数据</text>
			</view>
			<view v-else v-for="(item, index) in sortData" :key="index" class="list-item" id="sortData">

				<view class="item-info uni-row" style="margin-top: 16rpx;"> <text class="label ">工序:</text>
					<text class="label right">{{ item['processAlias'] }}</text>
				</view>
				<view class="item-info uni-row"> <text class="label">分选人员:</text>
					<text class="label right ">{{ item['nickName'] }}</text>
				</view>
				<view v-for="(info, index) in item.rejectList" :key="index">
					<view class="item-info uni-row">
						<text class="label">检测项目:</text>
						<text class="label right">{{ info['checkStandard']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">检测结果:</text>
						<text class="label right">{{ info['reason'] !=""?info['reason'] :'-'}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">废品数量:</text>
						<text class="label right">{{ info['rejectNum']}}</text>
					</view>
				</view>
				<view v-for="(data, index) in item.consults" :key="index">
					<view class="item-info uni-row">
						<text class="label">咨询信息:</text>
						<text class="label right">{{ data['content']}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">咨询结果:</text>
						<text class="label right">{{ data['status'] == 0?"未回复":data['status'] == 1?"不合格":"合格"}}</text>
					</view>
					<view class="item-info uni-row">
						<text class="label">技术人员:</text>
						<text class="label right">{{ data['technicianName']}}</text>
					</view>
				</view>
				<view class="item-info uni-row">
					<text class="label">备注:</text>
					<text class="label right">{{ item['remark'] !="" ?item['remark']:'-'}}</text>
				</view>
				<view v-if="index!=sortData.length -1" class='middle'>
					<view class='segment'></view>
					<view class='segment'></view>
				</view>
			</view>
		</view>
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<view style="text-align: center; font-size: 48rpx; padding: 48rpx 0 24rpx 0;">工艺列表</view>
			<view style="font-size: 24rpx;text-align: center;color: red; margin-bottom: 16rpx;">
				蓝色工序为当前工序
			</view>
			<scroll-view scroll-y="true" style="height: 82%;" @touchmove.stop>
				<view v-for="(item,index) in curProcessAfte" :key="index"
					style="padding: 8rpx 5% 8rpx 14%; border-top: 1px solid #cccccc">
					<text :style="{ color: showStatusColor(item) }">{{ index + 1 }}.{{item.processAlias}}</text>
				</view>
			</scroll-view>
		</uni-drawer>
	</scroll-view>
	<view class="bottom-btn-container uni-row">
		<button class="bottom-btn" @click="init()">扫码查询</button>
	</view>
	<dialog-selectLot ref="selectLotDialog" @submit="handleDoIt" />
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getLotInformation
	} from '@/api/business/dayWork.js'
	import {
		getFurnaceNoInfoByDaywork
	} from '@/api/business/furnaceNoInfo.js'
	import {
		getDayworkCarrierByCarrierCode
	} from '@/api/business/dayworkCarrier.js'
	import {
		getDayworkItemByDayworkId,
		getSortItemByDayworkId
	} from '@/api/business/dayWorkItem.js'
	import {
		getProcessInspectionByDayworkId
	} from '@/api/business/processInspection.js'

	const scrollTop = ref(0)
	// scrollToId 默认值为空
	const scrollToId = ref('')
	const selectLotDialog = ref(null)
	const selectedInfo = ref({})
	const curProcessAfte = ref([])
	const lotData = ref(null) //批次信息
	const furnaceData = ref(null) //领料信息
	const historyData = ref([]) //历史报工
	const inspectionData = ref([]) //检查信息
	const sortData = ref([]) //分选信息
	const showRight = ref(null) // 抽屉
	const dayworkId = ref(null)
	const isActiveId = ref(1)
	const urlList = JSON.parse(uni.getStorageSync('baseUrl'))
	const webHost = ref(urlList.baseUrl)
	const imageStyles = {
		width: 50,
		height: 50
	}
	// 查询主对象
	let query = null
	// 定义tab2的【SelectorQuery】对象
	let item2Query = null

	// 定义tab3的【SelectorQuery】对象
	let item3Query = null

	// 定义tab4的【SelectorQuery】对象
	let item4Query = null

	onLoad(() => {
		init();
	})

	function init() {
		handleScanCode()
	}
	onReady(() => {
		query = uni.createSelectorQuery().in(this)
		// 获取 tab2 的【SelectorQuery】，一定要在页面加载完之后，获取该对象，不要在【滚动】事件中获取，
		// 那会创建很多个【SelectorQuery】，导致效率低下
		item2Query = query.select("#item2").boundingClientRect((data) => {
			if (data.top >= 32 && data.top <= 80) {
				isActiveId.value = 2
			}
		})
		item3Query = query.select("#item3").boundingClientRect((data) => {
			if (data.top >= 32 && data.top <= 80) {
				isActiveId.value = 3
			}
		})
		item4Query = query.select("#item4").boundingClientRect((data) => {
			if (data.top >= 32 && data.top <= 80) {
				isActiveId.value = 4
			}
		})
	})
	//扫码
	function handleScanCode() {
		//引入原生插件
		const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		if (mpaasScanModule) {
			// 调用插件的 mpaasScan 方法
			mpaasScanModule.mpaasScan({
					// 扫码识别类型，参数可多选，qrCode、barCode，
					// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
					scanType: ["qrCode", "barCode"],
					// 是否隐藏相册，默认false不隐藏
					hideAlbum: false,
				},
				(ret) => {
					console.log(ret);
					let vehicleObj = {
						carrierCode: ret.resp_result
					};
					if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
						uni.showToast({
							icon: "none",
							title: "请扫载具码",
							duration: 1000
						})
						return;
					}
					getDayworkCarrierByCarrierCode({
						carrierCode: vehicleObj.carrierCode,
					}).then(response => {
						if (response.code == 200) {
							if (response.data.length > 0) {
								if (response.data.length > 1) {
									selectLotDialog.value.open(response.data);
								} else {
									handleDoIt(response.data[0])
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: "该箱未绑定批次,请重新扫码",
									duration: 2000
								})
							}
						}
					})
				}
			);
		} else {
			// 测试时用
			getDayworkCarrierByCarrierCode({
				carrierCode: '000267'
			}).then(res => {
				if (res.code == 200) {
					if (res.data.length > 0) {
						if (res.data.length > 1) {
							selectLotDialog.value.open(res.data);
						} else {
							handleDoIt(res.data[0])
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: "该箱未绑定批次,请重新扫码",
							duration: 2000
						})
					}
				}
			})
		}
	}

	function handleDoIt(data) {
		dayworkId.value = data.value
		getLotInfo()
		getFurnaceInfo()
		getHistoryReport()
		getInspection()
		getSortReport()
	}
	//查询批次信息
	function getLotInfo() {
		getLotInformation({
			id: dayworkId.value,
		}).then(response => {
			if (response.code == 200) {
				lotData.value = response.data
			}
		})
	}
	//查询领料信息
	function getFurnaceInfo() {
		getFurnaceNoInfoByDaywork({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				furnaceData.value = response.data
			}
		})
	}
	//查询历史报工
	function getHistoryReport() {
		getDayworkItemByDayworkId({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				historyData.value = response.data
			}
		})
	}
	//查询检查信息
	function getInspection() {
		getProcessInspectionByDayworkId({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				response.data.forEach(item => {
					if (item.processInspectionPictureList && item.processInspectionPictureList.length >
						0) {
						item.processInspectionPictureList.forEach(i => {
							i.url = webHost.value + i.url
						})
					}
				})
				inspectionData.value = response.data
			}
		})
	}
	//查询分选信息
	function getSortReport() {
		getSortItemByDayworkId({
			dayworkId: dayworkId.value
		}).then(response => {
			if (response.code == 200) {
				sortData.value = response.data
			}
		})
	}

	function handleClickProcessList(item) {
		let curProcessAfterList = [];
		console.log("工序列表", item)

		let nextIndex = 0;
		// for (let i = 0; i < item.processSequence.length; i++) {
		// 	if (item.currentProcess.processStepNumber == item.processSequence[i].processStepNumber) {
		// 		nextIndex = i;
		// 	}
		// }
		// for (let i = 0; i < item.processSequence.length; i++) {
		// 	if (i >= nextIndex) {
		// 		curProcessAfterList.push(item.processSequence[i]);
		// 	}
		// }
		// if (item.status == 3) {
		// 	curProcessAfterList.splice(0, 1)
		// }
		// console.log(curProcessAfterList)
		// curProcessAfte.value = curProcessAfterList;
		curProcessAfte.value = item.processSequence
		showRight.value.open();
	}
	//获得检测类型
	function getType(data) {
		if (data == "outsourcedInspection") {
			return "外协检"
		} else if (data == "patrolInspection") {
			return "巡检"
		} else if (data == "deliveryInspection") {
			return "交检"
		} else if (data == "factoryInspection") {
			return "出厂检"
		} else if (data == "firstArticleInspection") {
			return "首件检"
		} else {
			return "仪器室检"
		}
	}
	const showStatusColor = (item) => {
		// console.log(status)
		console.log(item, 111)
		console.log(lotData.value, 222)
		if (item.processStepNumber == lotData.value.currentProcess.processStepNumber) {
			return '#3482ff'
		}

	}
	const handleClickTab = (val) => {
		//scrollTop.value = top
		scrollToId.value = 'item' + val
		isActiveId.value = val
	}
	const handleScrollToUpper = () => {
		isActiveId.value = 1
	}
	const handleScrollToLower = () => {
		isActiveId.value = 5
	}
	const handleScroll = () => {
		// 在滚动时候，把scrollToId的值清空，否则，会有点击tab，页面不滚动的情况，比如：先点击了tab1，然后滚动到最低端，这时候，再点击tab1，将没反应。
		// 原因是：scroll-view 的 【scroll-into-view】属性值未改变时，将不会触发滚动
		scrollToId.value = ''

		// 这里的item2Query……等对象，必须在最外层定义好，滚动的时候，只获取结果，执行回调
		item2Query.exec()
		item3Query.exec()
		item4Query.exec()
	}
</script>

<style lang="scss">
	.tab-container {
		display: flex;
		flex-direction: row;
		height: 32px;

		.tab-item {
			display: flex;
			flex-direction: row;
			flex: 1;
			font-size: 14px;
			color: #666;
			align-items: center;
			justify-content: center;
		}
	}

	.scroll-container {
		height: calc(100% - 82px);
		background-color: #f5f5f5;
	}

	.tab-item.active {
		color: rgba(25, 137, 250, 1);
		font-weight: 700;
	}

	.scroll-item {
		background-color: #fff;
		padding: 24rpx;
		margin: 0 24rpx;
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;

		.no-date {
			text-align: center;
			font-size: 12px;
			color: #666;
			padding-top: 16px;
		}

		.title-container {
			justify-content: space-between;
			margin-top: 8rpx;
			margin-bottom: 16rpx;

			.title {
				height: 48rpx;
				align-items: center;

				.label {
					color: #1684fc;
					font-size: 32rpx;
					font-weight: bold;

					&.code {
						color: #000000;
						margin-left: 32rpx;
					}
				}
			}

		}

		.middle {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center
		}

		.segment {
			width: 80%;
			background-color: rgba(213, 213, 213, 1);
			border: 1rpx solid rgba(213, 213, 213, 1);
			margin: 16px 0;
		}

		.item-info {
			margin-bottom: 16rpx;

			.label {
				font-size: 28rpx;
				width: 160rpx;
				color: #808080;

				&.right {
					flex: 1;
					color: #000000;
				}
			}
		}

		.right-info {
			justify-content: flex-end;
			margin-top: 2rpx;

			.label {
				font-size: 28rpx;
				color: #808080;
			}
		}
	}

	.bottom-btn-container {
		height: 50px;
		border-top: 1px solid #999999;
		padding: 0 32px;
		align-items: center;
		background-color: #fff;

		.bottom-btn {
			flex: 1;
			font-size: 28rpx;
			color: #FFFFFF;
			background-color: #1684fc;
		}
	}

	.my-files {
		display: flex;
		justify-content: center;

		:deep(.uni-file-picker__container) {
			flex-direction: row;

		}
	}
</style>