|
|
@@ -0,0 +1,205 @@
|
|
|
+<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>
|
