forked from drone/command-center-dashboard

罗广辉
2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7
src/components/CommonDateTime.vue
@@ -9,12 +9,13 @@
      end-placeholder="结束日期"
      @change="change"
      disabled
    :clearable="false"
    />
    <div class="time-card">
      <div
        class="card-item"
        :class="item === checked ? 'active' : ''"
        v-for="(item, index) in timeList"
        v-for="(item, index) in timeList" :key="index"
        @click="timeClick(item,index)"
      >
        {{ timeListStr[index] }}
@@ -25,8 +26,10 @@
<script setup>
import dayjs from 'dayjs';
import { useStore } from 'vuex'
import { ref, defineEmits } from 'vue';
const store = useStore()
const emit = defineEmits(['change']);
const model = defineModel();
@@ -51,15 +54,27 @@
};
const change = value => {
  // todo 我对接
  // todo 待对接
  // emit('change', value);
};
let timeClick = (item,index) => {
  checked.value = item;
  model.value = dateRanges[item];
  emit('change', dateRanges[item],timeListEnum[index]);
  const newDateRange = dateRanges[item];
  model.value = newDateRange;
  emit('change', newDateRange, timeListEnum[index],checked.value);
};
onMounted(() => {
  // 如果父组件传入了值,就使用父组件的值 by cpz
  if (model.value && model.value.length === 2) {
    // 根据传入的日期判断是哪个时间范围
    const startDate = model.value[0];
    const endDate = model.value[1];
    if (startDate !== endDate) {
      checked.value = 'week';
    }
  }
});
</script>
<style scoped lang="scss">
@@ -67,12 +82,19 @@
  position: relative;
  display: flex;
  justify-content: space-between;
:deep(.el-date-editor .el-range__close-icon--hidden){
    width: 0 !important;
}
:deep(.el-date-editor .el-range-input){
width: 48% !important;
font-size: 13px !important;
}
  :deep(.el-date-editor) {
    box-shadow: none;
    width: 0;
    flex: 1;
    margin-right: 4px;
    // margin-right: 4px;
    background: rgba(0, 15, 34, 0.5);
    border-radius: 0px 0px 0px 0px;