fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 src/components/CommonDateTime.vue

@@ -1,84 +1,149 @@
<template>
    <div class="common-date-time">
        <el-date-picker
            v-model="newTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
         </el-date-picker>
         <div class="time-card">
            <div class="card-item" :class="item==checked?'active':''" v-for="item in timeList" @click="timeClick(item)">
                {{ item }}
            </div>
         </div>
  <div class="common-date-time">
    <el-date-picker
      v-model="model"
      type="daterange"
      value-format="YYYY-MM-DD"
      range-separator="-"
      start-placeholder="开始日期"
      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" :key="index"
        @click="timeClick(item,index)"
      >
        {{ timeListStr[index] }}
      </div>
    </div>
  </div>
</template>

<script setup>
const newTime = ref([]);
let timeList = ['今日','本周','本月','本年' ];
import dayjs from 'dayjs';
import { useStore } from 'vuex'
import { ref, defineEmits } from 'vue';

let checked = ref('今日');
let timeClick = (item) => {
    checked.value = item;
}
const store = useStore()
const emit = defineEmits(['change']);

const model = defineModel();

let timeList = ['today', 'week', 'month', 'year'];
let timeListStr = ['今日', '本周', '本月', '本年'];
let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
let checked = ref('today');

const getDateRange = unit => {
  if (unit === 'today') {
    return [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
  }
  return [dayjs().startOf(unit).format('YYYY-MM-DD'), dayjs().endOf(unit).format('YYYY-MM-DD')];
};

const dateRanges = {
  today: getDateRange('today'),
  week: getDateRange('week'),
  month: getDateRange('month'),
  year: getDateRange('year'),
};

const change = value => {
  // todo 待对接
  // emit('change', value);
};

let timeClick = (item,index) => {
  checked.value = item;
  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">
    .common-date-time {
        position: relative;
        top: 19px;
        display: flex ;
        justify-content: space-between;
        :deep(.el-date-editor) {
            background: rgba(0,15,34,0.5);
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #306FCA;
            height: 28px;
            
            .el-input__wrapper {
                background-color: transparent;
                box-shadow: 0 0 0 1px #0070FF;
                
                &.is-focus {
                    box-shadow: 0 0 0 1px #0070FF;
                }
            }
.common-date-time {
  position: relative;
  display: flex;
  justify-content: space-between;
:deep(.el-date-editor .el-range__close-icon--hidden){
    width: 0 !important;

            .el-range-input {
                background-color: transparent;
                color: #fff;
                height: 28px;
                &::placeholder {
                    color: rgba(255, 255, 255, 0.6);
                }
            }
        }
        .time-card {
            width: 156px;
            height: 28px;
            background: linear-gradient( 270deg, #195BAD 0%, rgba(25,91,173,0) 100%);
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #306FCA;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            display: flex;
            .card-item {
                width: 40px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                cursor: pointer;
            }
            .active {
                background: linear-gradient( 270deg, #19AD8D 0%, rgba(25,173,141,0) 100%);
                box-shadow: inset 0px 0px 8px 0px rgba(0,255,200,0.6);
                border-radius: 0px 0px 0px 0px;
                border: 1px solid #30CAA9;
            }
        }
}
: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;

    background: rgba(0, 15, 34, 0.5);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #306fca;
    height: 28px;

    .el-input__wrapper {
      background-color: transparent;
      box-shadow: 0 0 0 1px #0070ff;

      &.is-focus {
        box-shadow: 0 0 0 1px #0070ff;
      }
    }
</style>

    .el-range-input {
      background-color: transparent;
      color: #fff;
      height: 28px;

      &::placeholder {
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }

  .time-card {
    text-align: center;
    background: linear-gradient(270deg, #195bad 0%, rgba(25, 91, 173, 0) 100%);
    border: 1px solid #306fca;
    font-family: Source Han Sans CN, Source Han Sans CN, serif;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    height: 28px;

    .card-item {
      width: 39px;
      height: 100%;
      line-height: 26px;
      cursor: pointer;
    }

    .active {
      background: linear-gradient(270deg, #19ad8d 0%, rgba(25, 173, 141, 0) 100%);
      box-shadow: inset 0px 0px 8px 0px rgba(0, 255, 200, 0.6);
      border-radius: 0px 0px 0px 0px;
    }
  }
}
</style>