Newer
Older
DH_Apicture / src / components / DateSelect / index.vue
@zhangqy zhangqy on 29 Nov 7 KB first commit
  1. <template>
  2. <!-- 日历组件 -->
  3. <el-date-picker
  4. ref="elPicker"
  5. :size="size"
  6. v-model="dateTimeValue"
  7. :type="dateType"
  8. :range-separator="rangeSeparator"
  9. :placeholder="placeholder"
  10. :start-placeholder="startPlaceholder"
  11. :end-placeholder="endPlaceholder"
  12. @change="changeDate"
  13. @focus="isShow($event)"
  14. @visible-change="closeAdd"
  15. :clearable="delClearable"
  16. :popper-class="`${popperClass} ${pickerId}`"
  17. :default-time="defaultTime"
  18. :format="format"
  19. :value-format="valueFormat"
  20. >
  21. <template #default="cell">
  22. <div class="el-date-table-cell" :class="{ current: cell.isCurrent }">
  23. <div class="day">{{ cell.text }}</div>
  24. <div class="holiday">
  25. <div class="onename">{{ filtrationTimeShow(cell.date) }}</div>
  26. <div class="twoname">{{ filtrationTimeShowtwo(cell.date) }}</div>
  27. </div>
  28. </div>
  29. </template>
  30. </el-date-picker>
  31. </template>
  32. <script setup>
  33. import { ref, reactive, onMounted } from 'vue';
  34. const { proxy } = getCurrentInstance();
  35. import { weatherDayList } from '@/components/DateSelect/DateSelectApi';
  36. import { guid } from '@/utils/ruoyi';
  37. const pickerId = ref('pikerid' + guid());
  38. const props = defineProps({
  39. dateType: {
  40. type: String,
  41. default: 'datetimerange',
  42. },
  43. size: {
  44. type: String,
  45. default: 'default',
  46. },
  47. //时间组
  48. dateTime: {
  49. type: [Array, String],
  50. },
  51. //时间格式化类型
  52. valueFormat: {
  53. type: String,
  54. default: 'YYYY-MM-DD HH:mm:ss',
  55. },
  56. format: {
  57. type: String,
  58. default: 'YYYY-MM-DD HH:mm:ss',
  59. },
  60. placeholder: {
  61. type: String,
  62. default: '请选择时间',
  63. },
  64. startPlaceholder: {
  65. type: String,
  66. default: '开始时间',
  67. },
  68. endPlaceholder: {
  69. type: String,
  70. default: '结束时间',
  71. },
  72. rangeSeparator: {
  73. type: String,
  74. default: '-',
  75. },
  76. // 样式class
  77. popperClass: {
  78. type: String,
  79. default: 'timePickerPopper',
  80. },
  81. // 默认开始结束时分秒
  82. defaultTime: {
  83. // type: [Array, String],
  84. // default: [new Date(2024, 1, 1, 12, 0, 0), new Date(2024, 2, 1, 8, 0, 0)],
  85. },
  86. // 是否显示清除
  87. delClearable: {
  88. type: Boolean,
  89. default: true,
  90. },
  91. });
  92. const badgeDate = ref([]);
  93. // const badgeDate = ref([
  94. // {
  95. // rainLevel: '中雨',
  96. // rain: '11.2',
  97. // time: '2023-07-08 00:00:00',
  98. // },
  99. // {
  100. // rainLevel: '晴天',
  101. // rain: '0',
  102. // time: '2023-07-09 00:00:00',
  103. // },
  104. // {
  105. // rainLevel: '暴雨',
  106. // rain: '35.55',
  107. // time: '2023-07-10 00:00:00',
  108. // },
  109. // {
  110. // rainLevel: '多云',
  111. // rain: '0',
  112. // time: '2023-07-22 00:00:00',
  113. // },
  114. // ]);
  115.  
  116. const dateTimeValue = ref(null);
  117. const emit = defineEmits();
  118.  
  119. watch(
  120. () => props.dateTime,
  121. val => {
  122. dateTimeValue.value = val;
  123. },
  124. { immediate: true }
  125. );
  126.  
  127. const datesYear = ref(new Date().getFullYear());
  128.  
  129. const changeDate = value => {
  130. // console.log(value);
  131. emit('update:dateTime', dateTimeValue.value);
  132. };
  133.  
  134. const filtrationTimeShow = Date => {
  135. let array = badgeDate.value;
  136. let getdate = proxy.moment(Date).format('YYYY-MM-DD');
  137. for (let index = 0; index < array.length; index++) {
  138. if (array[index].time.includes(getdate)) {
  139. if (array[index].rain == 0) {
  140. return '';
  141. } else {
  142. return array[index].rain;
  143. }
  144. }
  145. }
  146. };
  147.  
  148. const filtrationTimeShowtwo = Date => {
  149. let array = badgeDate.value;
  150. let getdate = proxy.moment(Date).format('YYYY-MM-DD');
  151. for (let index = 0; index < array.length; index++) {
  152. if (array[index].time.includes(getdate)) {
  153. if (array[index].rainLevel.includes('无雨')) {
  154. return '';
  155. } else {
  156. return array[index].rainLevel;
  157. }
  158. }
  159. }
  160. };
  161.  
  162. // 获取焦点 展示日期
  163. function isShow(e) {
  164. nextTick(() => {});
  165. monthChange();
  166. }
  167.  
  168. function closeAdd(value) {
  169. // console.log(value);
  170.  
  171. if (value) {
  172. document
  173. .querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria-label='后一年'],[aria-label='前一年']")
  174. .forEach(item => item.addEventListener('click', monthChange));
  175.  
  176. document
  177. .querySelectorAll(
  178. "[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']"
  179. )
  180. .forEach(item => item.addEventListener('click', monthChange));
  181. } else {
  182. document
  183. .querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria-label='后一年'],[aria-label='前一年']")
  184. .forEach(item => item.removeEventListener('click', monthChange));
  185.  
  186. document
  187. .querySelectorAll(
  188. "[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']"
  189. )
  190. .forEach(item => item.removeEventListener('click', monthChange));
  191. }
  192. }
  193.  
  194. // 获取降雨日历数据
  195. function GetweatherDayList() {
  196. let data = {
  197. start: datesYear.value + '-01-01',
  198. end: datesYear.value + '-12-31',
  199. };
  200.  
  201. weatherDayList(data).then(res => {
  202. // console.log('newget', res);
  203. badgeDate.value = res.data;
  204. });
  205. }
  206.  
  207. // 获取降雨日历数据
  208. function GetweatherDayListrange(year, year2) {
  209. let data = {
  210. start: year + '-01-01',
  211. end: year2 + '-12-31',
  212. };
  213.  
  214. weatherDayList(data).then(res => {
  215. // console.log('newget', res);
  216. badgeDate.value = res.data;
  217. });
  218. }
  219.  
  220. // 切换年月后重新调接口
  221. function monthChange() {
  222. let newclass = '.' + pickerId.value;
  223. // 获取动态的第一层
  224. var oParent = document.querySelector(newclass);
  225. if (oParent) {
  226. // console.log('props.dateType', props.dateType);
  227. if (props.dateType.includes('range')) {
  228. var two = oParent.querySelectorAll('.el-date-range-picker__header')[0];
  229. var twoyear = oParent.querySelectorAll('.el-date-range-picker__header')[1];
  230. if (two) {
  231. var year = two.querySelectorAll(':scope > div')[0].innerHTML.slice(0, 4);
  232. var year2 = twoyear.querySelectorAll(':scope > div')[0].innerHTML.slice(0, 4);
  233. // console.log('yearrange', year, year2);
  234. if (year != datesYear.value) {
  235. datesYear.value = year;
  236. if (year != year2) {
  237. GetweatherDayListrange(year, year2);
  238. } else {
  239. GetweatherDayList();
  240. }
  241. }
  242. }
  243. } else {
  244. // // 获取年月 单时间
  245. let year = oParent.querySelectorAll('.el-date-picker__header-label')[0].innerHTML.slice(0, 4);
  246. // console.log('yearsssssssssssss', year);
  247. if (year != datesYear.value) {
  248. datesYear.value = year;
  249. GetweatherDayList();
  250. }
  251. }
  252. }
  253. }
  254.  
  255. onMounted(() => {
  256. GetweatherDayList();
  257. });
  258. </script>
  259. <style lang="scss">
  260. .timePickerPopper {
  261. .available {
  262. // line-height: 30;
  263. // padding: 5px;
  264. }
  265. .holiday {
  266. position: absolute;
  267. // height: 20px;
  268. line-height: 12px;
  269. color: #409eff;
  270. top: 30px;
  271. left: 50%;
  272. transform: translateX(-50%);
  273. width: 100%;
  274. z-index: 999;
  275.  
  276. .onename {
  277. font-size: 12px !important;
  278. }
  279.  
  280. .twoname {
  281. font-size: 10px !important;
  282. }
  283. }
  284.  
  285. .el-date-table td .el-date-table-cell {
  286. height: 0.26rem !important;
  287. margin: 0 !important;
  288. }
  289.  
  290. .el-date-table td.start-date .el-date-table-cell {
  291. background: rgba(203, 225, 228, 1);
  292. }
  293. .el-date-table td.end-date .el-date-table-cell {
  294. background: rgba(203, 225, 228, 1);
  295. }
  296.  
  297. .current {
  298. color: #409eff !important;
  299. }
  300. }
  301. </style>