data-marketing-platform/src/views/count/engagement/interval/index.vue

<template>
  <div class="layout-padding">
    <div class="engagement-time">
      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <SelectForm :type="type" :form="form" :title="'使用间隔'" />
        </el-col>
      </el-row>
      <el-row :gutter="12" style="padding: 0 12px 12px; row-gap: 12px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <Interval :type="type" :form="form" ref="intervalRef" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" name="engagementTime" setup>
import { reactive } from 'vue'
import Interval from './Interval.vue';
import SelectForm from '../components/SelectForm.vue';
import { formatDate } from '/@/utils/formatTime';

const type = ref('daterange');

const form = reactive({
  dateArray: [new Date().getTime() - 1000 * 60 * 60 * 24 * 7, new Date().getTime()],
  date: new Date().getTime(),
  selectedDates: [] as string[], // 存储多个选中的日期
  timeCompare: 'time1',
  channel: 'all',
  version: 'all'
})
const intervalRef = ref<InstanceType<typeof Interval>>();

watch(form, (newVal) => {
  console.log([`${formatDate(new Date(newVal.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(newVal.dateArray[1]), 'YYYY-mm-dd')}`]);
  nextTick(() => {
    intervalRef.value?.handleDateChange([`${formatDate(new Date(newVal.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(newVal.dateArray[1]), 'YYYY-mm-dd')}`]);
  })
}, { deep: true, immediate: true })

onMounted(() => {
  nextTick(() => {
    intervalRef.value?.handleDateChange([`${formatDate(new Date(form.dateArray[0]), 'YYYY-mm-dd')} - ${formatDate(new Date(form.dateArray[1]), 'YYYY-mm-dd')}`]);
  })
})

</script>
<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';

svg {
  vertical-align: middle;
  margin: 0 0 0 12px;
}

.engagement-time {

  .select-form {
    margin-top: 20px;

    form {
      // height: 30px;
    }

    .el-form-item__content {
      .el-select {
        width: 147px !important;
        min-width: 147px !important;
      }
    }
  }
}

</style>