diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue index 00e1132..f8d02c7 100644 --- a/src/views/oneMap/components/ZHHM_JCFX.vue +++ b/src/views/oneMap/components/ZHHM_JCFX.vue @@ -1,4 +1,5 @@ @@ -201,6 +243,46 @@ #ZHHM_JCFX { width: 100%; height: 100%; + .centerSuggest { + position: absolute; + left: 480px; + top: 110px; + z-index: 90; + background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%); + border-radius: 6px; + border: 1px solid #15d2fd; + padding: 15px; + width: calc(100vw - 1000px); + box-shadow: inset 0 0 10px 10px #47eef38a; + .part { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #ffffff; + width: 31.8%; + margin-left: 10px; + text-align: center; + background: linear-gradient(0deg, rgba(0, 252, 255, 0.8) 0%, rgba(0, 43, 67, 0.2) 100%); + border-radius: 2px; + border: 1px solid #74dde1; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); + padding: 6px 0px; + .left { + border-right: 1px solid #74dde1; + width: 30%; + } + .right { + flex: 1; + span { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #00f2ff; + cursor: pointer; + } + } + } + } .chartHeight { width: 100%; height: calc(100vh - 720px); diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue index 00e1132..f8d02c7 100644 --- a/src/views/oneMap/components/ZHHM_JCFX.vue +++ b/src/views/oneMap/components/ZHHM_JCFX.vue @@ -1,4 +1,5 @@ @@ -201,6 +243,46 @@ #ZHHM_JCFX { width: 100%; height: 100%; + .centerSuggest { + position: absolute; + left: 480px; + top: 110px; + z-index: 90; + background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%); + border-radius: 6px; + border: 1px solid #15d2fd; + padding: 15px; + width: calc(100vw - 1000px); + box-shadow: inset 0 0 10px 10px #47eef38a; + .part { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 14px; + color: #ffffff; + width: 31.8%; + margin-left: 10px; + text-align: center; + background: linear-gradient(0deg, rgba(0, 252, 255, 0.8) 0%, rgba(0, 43, 67, 0.2) 100%); + border-radius: 2px; + border: 1px solid #74dde1; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); + padding: 6px 0px; + .left { + border-right: 1px solid #74dde1; + width: 30%; + } + .right { + flex: 1; + span { + font-family: Source Han Sans CN; + font-weight: bold; + font-size: 16px; + color: #00f2ff; + cursor: pointer; + } + } + } + } .chartHeight { width: 100%; height: calc(100vh - 720px); diff --git a/src/views/oneMap/components/monitorCalender.vue b/src/views/oneMap/components/monitorCalender.vue index d35e6cc..66a7531 100644 --- a/src/views/oneMap/components/monitorCalender.vue +++ b/src/views/oneMap/components/monitorCalender.vue @@ -47,12 +47,30 @@ style="position: relative" >
{{ moment(data.day).format('DD') }}
-
+
{{ - scheduleData[moment(data.day).format('YYYY-MM-DD')] == 0.0 - ? '' - : scheduleData[moment(data.day).format('YYYY-MM-DD')] - ? scheduleData[moment(data.day).format('YYYY-MM-DD')] + 'mm' + rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '1' + ? '小雨' + : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '2' + ? '中雨' + : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '3' + ? '大雨' + : rainLevel(scheduleData[moment(data.day).format('YYYY-MM-DD')]) == '4' + ? '暴雨' : '' }}
@@ -78,8 +96,8 @@ const { proxy } = getCurrentInstance(); const curDate = props.defaultDate ? proxy.moment(props.defaultDate).format('YYYY-MM') : proxy.moment().format('YYYY-MM'); const curDateNew = props.defaultDate ? new Date(props.defaultDate) : new Date(); -const datevalue = ref(curDate); -const datevalueNew = ref(curDateNew); +const datevalue = ref('2024-08'); //curDate +const datevalueNew = ref('2024-08-07'); //curDateNew const emits = defineEmits(['change', 'close']); const selectVal = ref(props.defaultDate); const scheduleData = ref({}); @@ -91,16 +109,17 @@ ]); function timeChange(val) { + console.log(val); datevalueNew.value = new Date(val); getRainTimeDayData(); } //获取降雨日历数据 const getRainTimeDayData = () => { - // let data = { - // fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'), - // toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'), - // }; + let data = { + fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'), + toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'), + }; // loading.value = true; // rainTimeDay(data) // .then(res => { @@ -112,6 +131,14 @@ // .finally(() => { // loading.value = false; // }); + let datas = [ + { rainTime: '2024-08-07', rainCumulative: 35 }, + { rainTime: '2024-08-08', rainCumulative: 52 }, + { rainTime: '2024-08-15', rainCumulative: 8 }, + ]; + datas.forEach(item => { + scheduleData.value[item.rainTime] = item.rainCumulative; + }); }; // 降雨日历点击事件 const changepeople = val => { @@ -119,10 +146,6 @@ emits('change', val); }; -const close = () => { - emits('close'); -}; - function changeDate(val) { dateIndex.value = val; let valueFormat = @@ -130,6 +153,19 @@ datevalue.value = proxy.moment().format(valueFormat); } +// 根据降雨量计算对应等级 +function rainLevel(val) { + if (val > 0 && val <= 10) { + return '1'; //小雨 + } else if (val > 10 && val <= 25) { + return '2'; //中雨 + } else if (val > 25 && val <= 50) { + return '3'; //大雨 + } else if (val > 50) { + return '4'; //暴雨 + } +} + onMounted(() => { getRainTimeDayData(); }); @@ -266,7 +302,7 @@ background-color: #1effff; color: #042e77; .datadiv { - bottom: -20px; + bottom: -15px; } } } @@ -281,7 +317,12 @@ width: 100%; position: absolute; bottom: -10px; - font-size: 12px; + font-size: 11px; + height: 16px; + line-height: 16px; + text-align: center; + padding-left: 2px; + color: #fff; } }