shenze-sysMan/src/views/device/viewLogs/index.vue

<template>
	<!--  修改logo  -->
	<div class="page flex-col">
		<s-header :name="$t('device.viewLogs')" :noback="false"></s-header>
		<div class="block2 flex-row justify-between">
			<div class="block3 flex-col"></div>
			<span class="info2">{{ $t('device.equipmentName') }}：{{ deviceDetail ? deviceDetail.name : '' }}</span>
		</div>
		<div class="wrap1 flex-col o-pt-15">
			<van-field v-model="logsTime" is-link readonly label="日期" placeholder="点击选择时间" @click="chooseTime()" />
			<van-popup v-model:show="showPicker" round position="bottom">
				<van-datetime-picker v-model="logsTime" type="date" :min-date="minDate" :max-date="maxDate"
					@confirm="selectTime" @cancel="showPicker = false" />
			</van-popup>
			<van-button v-if="!downloading" round :disabled="logsTime === ''" type="primary" class="volumeChangeButton"
				@click="downloadBtn">{{ $t('device.download') }}</van-button>
			<van-button v-else disabled loading round class="volumeChangeButton" type="primary"
				:loading-text="$t('device.downloading')" />
		</div>
	</div>
</template>

<script>
	import {
		onMounted,
		computed,
		ref
	} from 'vue';
	import sHeader from "@/components/SimpleHeader.vue";
	import {
		downloadLog,
		getDeviceDetal
	} from "@/service/device";
	import { $M_ExportFile } from "@/common/js/utils";
	import {
		Toast
	} from "vant";
	import {
		useRoute
	} from "vue-router";
	import dateUtil from "@/utils/dateUtil";
	// import {useI18n} from "vue-i18n";

	export default ({
		components: {
			sHeader
		},
		setup() {
			// const { t } = useI18n();
			const route = useRoute();
			const deviceId = route.query.deviceId;
			const deviceDetail = ref(null);
			const showPicker = ref(false);
			const downloading = ref(false);
			const logsTime = ref(null);
			const curDate = new Date(); // 获取当前时间日期

			// 计算最小日期为当前日期7天前
			const minDate = computed(() => {
				const minTimestamp = curDate.getTime() - 6 * 24 * 3600 * 1000;
				const minDate = dateUtil.formateDate(new Date(minTimestamp), "yyyy-MM-dd");
				return new Date(minDate);
			});

			// 计算最大日期为当前日期
			const maxDate = computed(() => {
				return curDate;
			});


			// 初始化页面获取列表
			onMounted(async () => {
				await getDeviceDetailFun();
				// console.log(deviceDetail.value.name);
			});

			// 选择时间
			const chooseTime = () => {
				// console.log('chooseTime function is called');
				showPicker.value = true;
				console.log(showPicker.value);
			};


			const selectTime = (time) => {
				// console.log('selectTime function is called', time);
				logsTime.value = dateUtil.formateDate(time, "yyyy-MM-dd");
				showPicker.value = false;
			};

			const getDeviceDetailFun = async () => {
				const {
					data
				} = await getDeviceDetal({
					id: deviceId
				});
				if (data.code === '00000') {
					deviceDetail.value = data.data;
				} else {
					Toast.fail(data.message);
				}
			}

			const downloadBtn = async () => {
				const pattern = /^\d{4}-\d{2}-\d{2}$/;
				if(!pattern.test(logsTime.value)) {
					Toast.fail('日期格式有误');
					return;
				}
				const formattedDate = logsTime.value.replace(/-/g, '');
				downloading.value = true;
				try {
					const {
						headers, data
					} = await downloadLog({
						equipmentId: deviceId,
						day: formattedDate,
					});
					console.log('请求成功', headers, data);
					$M_ExportFile(data, headers);
				} catch (error) {
					if (error.code === 'ECONNABORTED') {
					    // 处理请求超时的错误
					    console.error('请求超时：', error);
						Toast.fail("请求超时");
					} else {
					    // 处理其他请求错误
					    console.error('请求失败：', error);
						Toast.fail("请求失败");
					}
				} finally {
					downloading.value = false;
				}
			}

			return {
				deviceDetail,
				downloadBtn,
				chooseTime,
				selectTime,
				showPicker,
				logsTime,
				minDate,
				maxDate,
				downloading,
			}
		},

	});
</script>

<style lang="less" scoped>
	@import "../../../common/style/common";

	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 100%;
		height: calc(100vh - 44px);
		overflow: hidden;

		.volumeChangeButton {
			background-color: #4d6add;
			width: 220px;
			height: 34px;
			margin: 49px auto;

			.van-button__text {
				font-size: 15px;
			}
		}

		.wrap1 {
			width: 100%;
			height: 274px;
		}

		.block2 {
			width: 162px;
			height: 20px;
			margin: 18px 0 0 15px;

			.block3 {
				background-color: rgba(128, 150, 236, 1);
				border-radius: 2px;
				width: 4px;
				height: 12px;
				margin-top: 4px;
			}

			.info2 {
				width: 150px;
				height: 20px;
				overflow-wrap: break-word;
				color: rgba(64, 77, 116, 1);
				font-size: 14px;
				font-family: PingFangSC-Medium;
				text-align: left;
				white-space: nowrap;
				line-height: 20px;
				display: block;
			}
		}
	}
</style>