- <template>
- <!-- 日历组件 -->
- <el-date-picker
- ref="elPicker"
- :size="size"
- v-model="dateTimeValue"
- :type="dateType"
- :range-separator="rangeSeparator"
- :placeholder="placeholder"
- :start-placeholder="startPlaceholder"
- :end-placeholder="endPlaceholder"
- @change="changeDate"
- @focus="isShow($event)"
- @visible-change="closeAdd"
- :clearable="delClearable"
- :popper-class="`${popperClass} ${pickerId}`"
- :default-time="defaultTime"
- :format="format"
- :value-format="valueFormat"
- >
- <template #default="cell">
- <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
- <div class="day">{{ cell.text }}</div>
- <div class="holiday">
- <div class="onename">{{ filtrationTimeShow(cell.date) }}</div>
- <div class="twoname">{{ filtrationTimeShowtwo(cell.date) }}</div>
- </div>
- </div>
- </template>
- </el-date-picker>
- </template>
- <script setup>
- import { ref, reactive, onMounted } from 'vue';
- const { proxy } = getCurrentInstance();
- import { weatherDayList } from '@/components/DateSelect/DateSelectApi';
- import { guid } from '@/utils/ruoyi';
- const pickerId = ref('pikerid' + guid());
- const props = defineProps({
- dateType: {
- type: String,
- default: 'datetimerange',
- },
- size: {
- type: String,
- default: 'default',
- },
- //时间组
- dateTime: {
- type: [Array, String],
- },
- //时间格式化类型
- valueFormat: {
- type: String,
- default: 'YYYY-MM-DD HH:mm:ss',
- },
- format: {
- type: String,
- default: 'YYYY-MM-DD HH:mm:ss',
- },
- placeholder: {
- type: String,
- default: '请选择时间',
- },
- startPlaceholder: {
- type: String,
- default: '开始时间',
- },
- endPlaceholder: {
- type: String,
- default: '结束时间',
- },
- rangeSeparator: {
- type: String,
- default: '-',
- },
- // 样式class
- popperClass: {
- type: String,
- default: 'timePickerPopper',
- },
- // 默认开始结束时分秒
- defaultTime: {
- // type: [Array, String],
- // default: [new Date(2024, 1, 1, 12, 0, 0), new Date(2024, 2, 1, 8, 0, 0)],
- },
- // 是否显示清除
- delClearable: {
- type: Boolean,
- default: true,
- },
- });
- const badgeDate = ref([]);
- // const badgeDate = ref([
- // {
- // rainLevel: '中雨',
- // rain: '11.2',
- // time: '2023-07-08 00:00:00',
- // },
- // {
- // rainLevel: '晴天',
- // rain: '0',
- // time: '2023-07-09 00:00:00',
- // },
- // {
- // rainLevel: '暴雨',
- // rain: '35.55',
- // time: '2023-07-10 00:00:00',
- // },
- // {
- // rainLevel: '多云',
- // rain: '0',
- // time: '2023-07-22 00:00:00',
- // },
- // ]);
-
- const dateTimeValue = ref(null);
- const emit = defineEmits();
-
- watch(
- () => props.dateTime,
- val => {
- dateTimeValue.value = val;
- },
- { immediate: true }
- );
-
- const datesYear = ref(new Date().getFullYear());
-
- const changeDate = value => {
- // console.log(value);
- emit('update:dateTime', dateTimeValue.value);
- };
-
- const filtrationTimeShow = Date => {
- let array = badgeDate.value;
- let getdate = proxy.moment(Date).format('YYYY-MM-DD');
- for (let index = 0; index < array.length; index++) {
- if (array[index].time.includes(getdate)) {
- if (array[index].rain == 0) {
- return '';
- } else {
- return array[index].rain;
- }
- }
- }
- };
-
- const filtrationTimeShowtwo = Date => {
- let array = badgeDate.value;
- let getdate = proxy.moment(Date).format('YYYY-MM-DD');
- for (let index = 0; index < array.length; index++) {
- if (array[index].time.includes(getdate)) {
- if (array[index].rainLevel.includes('无雨')) {
- return '';
- } else {
- return array[index].rainLevel;
- }
- }
- }
- };
-
- // 获取焦点 展示日期
- function isShow(e) {
- nextTick(() => {});
- monthChange();
- }
-
- function closeAdd(value) {
- // console.log(value);
-
- if (value) {
- document
- .querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria-label='后一年'],[aria-label='前一年']")
- .forEach(item => item.addEventListener('click', monthChange));
-
- document
- .querySelectorAll(
- "[class='el-picker-panel__icon-btn d-arrow-left'],[class='el-picker-panel__icon-btn arrow-left'],[class='el-picker-panel__icon-btn arrow-right'],[class='el-picker-panel__icon-btn d-arrow-right']"
- )
- .forEach(item => item.addEventListener('click', monthChange));
- } else {
- document
- .querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria-label='后一年'],[aria-label='前一年']")
- .forEach(item => item.removeEventListener('click', monthChange));
-
- document
- .querySelectorAll(
- "[class='el-picker-panel__icon-btn d-arrow-left'],[class='el-picker-panel__icon-btn arrow-left'],[class='el-picker-panel__icon-btn arrow-right'],[class='el-picker-panel__icon-btn d-arrow-right']"
- )
- .forEach(item => item.removeEventListener('click', monthChange));
- }
- }
-
- // 获取降雨日历数据
- function GetweatherDayList() {
- let data = {
- start: datesYear.value + '-01-01',
- end: datesYear.value + '-12-31',
- };
-
- weatherDayList(data).then(res => {
- // console.log('newget', res);
- badgeDate.value = res.data;
- });
- }
-
- // 获取降雨日历数据
- function GetweatherDayListrange(year, year2) {
- let data = {
- start: year + '-01-01',
- end: year2 + '-12-31',
- };
-
- weatherDayList(data).then(res => {
- // console.log('newget', res);
- badgeDate.value = res.data;
- });
- }
-
- // 切换年月后重新调接口
- function monthChange() {
- let newclass = '.' + pickerId.value;
- // 获取动态的第一层
- var oParent = document.querySelector(newclass);
- if (oParent) {
- // console.log('props.dateType', props.dateType);
- if (props.dateType.includes('range')) {
- var two = oParent.querySelectorAll('.el-date-range-picker__header')[0];
- var twoyear = oParent.querySelectorAll('.el-date-range-picker__header')[1];
- if (two) {
- var year = two.querySelectorAll(':scope > div')[0].innerHTML.slice(0, 4);
- var year2 = twoyear.querySelectorAll(':scope > div')[0].innerHTML.slice(0, 4);
- // console.log('yearrange', year, year2);
- if (year != datesYear.value) {
- datesYear.value = year;
- if (year != year2) {
- GetweatherDayListrange(year, year2);
- } else {
- GetweatherDayList();
- }
- }
- }
- } else {
- // // 获取年月 单时间
- let year = oParent.querySelectorAll('.el-date-picker__header-label')[0].innerHTML.slice(0, 4);
- // console.log('yearsssssssssssss', year);
- if (year != datesYear.value) {
- datesYear.value = year;
- GetweatherDayList();
- }
- }
- }
- }
-
- onMounted(() => {
- GetweatherDayList();
- });
- </script>
- <style lang="scss">
- .timePickerPopper {
- .available {
- // line-height: 30;
- // padding: 5px;
- }
- .holiday {
- position: absolute;
- // height: 20px;
- line-height: 12px;
- color: #409eff;
- top: 30px;
- left: 50%;
- transform: translateX(-50%);
- width: 100%;
- z-index: 999;
-
- .onename {
- font-size: 12px !important;
- }
-
- .twoname {
- font-size: 10px !important;
- }
- }
-
- .el-date-table td .el-date-table-cell {
- height: 0.26rem !important;
- margin: 0 !important;
- }
-
- .el-date-table td.start-date .el-date-table-cell {
- background: rgba(203, 225, 228, 1);
- }
- .el-date-table td.end-date .el-date-table-cell {
- background: rgba(203, 225, 228, 1);
- }
-
- .current {
- color: #409eff !important;
- }
- }
- </style>