EDFS-MCU/src/views/stationData/components/onLineTransferDlg.vue

<template>
  <EdfsDialog
    :title="isBatchTransfer ? '批量迁移' : '数据迁移'"
    :is-show="visible"
    width="580px"
    @on-close="close"
    @on-save="onSave"
  >
    <div class="flex-col gap-10 w-80% m-x-30px">
      <el-row>
        <div class="label">
          <span class="require">*</span>
          数据开始时间:
        </div>
        <el-date-picker
          v-model="startTime"
          value-format="YYYY-MM-DD HH:mm"
          format="YYYY-MM-DD HH:mm"
          class="flex-1"
          type="datetime"
          placeholder="请选择开始时间"
          :disabled-date="disabledDate"
          :disabled-time="disabledStartTime"
          @change="handleStartTimeChange"
        />
      </el-row>

      <el-row>
        <div class="label">
          <span class="require">*</span>
          数据结束时间:
        </div>
        <el-date-picker
          v-model="endTime"
          class="flex-1"
          value-format="YYYY-MM-DD HH:mm"
          format="YYYY-MM-DD HH:mm"
          type="datetime"
          placeholder="请选择结束时间"
          :disabled-date="disabledDate"
          :disabled-time="disabledEndTime"
          @change="handleEndTimeChange"
        />
      </el-row>
    </div>
  </EdfsDialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { getPubInitData, type PublishMsg } from '@/utils/zmq'
import type { IOnlineDevice } from '../type'
import { useMessage } from '@/composables/useMessage'
const message = useMessage()

const emit = defineEmits<{
  'on-save': [PublishMsg<'export'>, IOnlineDevice]
}>()

const props = defineProps<{
  isBatchTransfer: boolean
}>()

const visible = ref(false)
const startTime = ref('')
const endTime = ref('')

const disabledDate = (time: Date) => {
  return dayjs(time).isAfter(dayjs())
}

const disabledStartTime = (date: Date) => {
  if (endTime.value) {
    const end = dayjs(endTime.value)
    const current = dayjs(date)
    if (current.isSame(end, 'day')) {
      return {
        hours: () => Array.from({ length: 24 }, (_, i) => i).filter(h => h > end.hour()),
        minutes: () => Array.from({ length: 60 }, (_, i) => i).filter(m => m > end.minute())
      }
    }
  }
  return {}
}

const disabledEndTime = (date: Date) => {
  if (startTime.value) {
    const start = dayjs(startTime.value)
    const current = dayjs(date)
    if (current.isSame(start, 'day')) {
      return {
        hours: () => Array.from({ length: 24 }, (_, i) => i).filter(h => h < start.hour()),
        minutes: () => Array.from({ length: 60 }, (_, i) => i).filter(m => m < start.minute())
      }
    }
  }
  return {}
}

function handleStartTimeChange(val: string) {
  if (val && endTime.value) {
    if (dayjs(val).isAfter(dayjs(endTime.value))) {
      message.warning('开始时间不能晚于结束时间')
      startTime.value = ''
    }
  }
}

function handleEndTimeChange(val: string) {
  if (val && startTime.value) {
    if (dayjs(val).isBefore(dayjs(startTime.value))) {
      message.warning('结束时间不能早于开始时间')
      endTime.value = ''
    }
  }
}

const curDevice = ref<IOnlineDevice>()

const batchClientIp = ref('')
const batchPath = ref('')

function open(item: IOnlineDevice, clientIps: string, paths: string) {
  curDevice.value = item
  visible.value = true
  batchClientIp.value = clientIps
  batchPath.value = paths
}

function onSave() {
  if (!verifyData()) return
  if (!curDevice.value) {
    message.error('请选择设备')
    return
  }
  const params = [
    `${props.isBatchTransfer ? batchClientIp.value : curDevice.value.clientIp}`,
    '',
    '',
    '',
    '',
    '',
    `${
      props.isBatchTransfer
        ? batchPath.value
        : `${curDevice.value.site_id}/${curDevice.value.sn}`
    }`,
    `${dayjs(startTime.value).valueOf()},${dayjs(endTime.value).valueOf()}`,
  ]
  const msg = getPubInitData<'export'>('export', params)
  emit('on-save', msg, curDevice.value as IOnlineDevice)
  close()
}

function close() {
  startTime.value = ''
  endTime.value = ''
  visible.value = false
  curDevice.value = undefined
  batchClientIp.value = ''
  batchPath.value = ''
}

function verifyData() {
  if(!startTime.value) {
    message.error('请选择开始时间')
    return false
  }

  if(!endTime.value) {
    message.error('请选择结束时间')
    return false
  }

  return true
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.el-row {
  @apply h-32px;
  column-gap: 8px;

  .label {
    color: var(--label-color);
    line-height: 33px;
    text-align: right;
    width: 110px;
    .require {
      color: red;
    }
  }
}
</style>