From 8e197d065d700d83a8906f496fdcefcceebe863b Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Tue, 22 Feb 2022 13:11:41 +0800 Subject: [PATCH] fixed DateRangePicker styles --- web/src/assets/scss/_user.scss | 1 + .../scss/theme/plugins/_react-datetime.scss | 35 ++++++ web/src/components/MyEMS/Meter/MeterEnergy.js | 103 +++++++++--------- web/src/i18n.js | 48 +++++++- 4 files changed, 132 insertions(+), 55 deletions(-) diff --git a/web/src/assets/scss/_user.scss b/web/src/assets/scss/_user.scss index 39721af2..f0e7cf0e 100644 --- a/web/src/assets/scss/_user.scss +++ b/web/src/assets/scss/_user.scss @@ -15,6 +15,7 @@ border-radius: 6px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.17); white-space: nowrap; + z-index: 2000; } .rc-cascader-menus-hidden { display: none; diff --git a/web/src/assets/scss/theme/plugins/_react-datetime.scss b/web/src/assets/scss/theme/plugins/_react-datetime.scss index f3f45970..aada5fba 100644 --- a/web/src/assets/scss/theme/plugins/_react-datetime.scss +++ b/web/src/assets/scss/theme/plugins/_react-datetime.scss @@ -23,3 +23,38 @@ } } } + +.rs-picker-has-value, +.rs-btn, +.rs-picker-toggle-value, +.rs-picker-has-value, +.rs-picker-toggle, +.rs-picker-toggle-value{color:$gray-300 !important;} + +.rs-picker-toggle-textbox {color: $gray-800;background-color: $white !important;} + +.rs-picker-toggle-value{font-size: 1rem;line-height: 1.3;color: $gray-900!important;} + +.rs-picker-has-value, +.rs-btn, +.rs-picker-toggle-value, +.rs-picker-has-value, +.rs-picker-toggle, +.rs-picker-toggle-value{color: $gray-900 !important;} + +.rs-picker-default, +.rs-picker-toggle, +.rs-picker-input, +.rs-picker-input, +.rs-picker-toggle {--rs-input-bg:$white;background-color: $white;border: 1px solid $white !important;} + +.rs-picker-default:not(.rs-picker-disabled), +.rs-btn-active, +.rs-picker-default:not(.rs-picker-disabled), +.rs-btn:focus, .rs-picker-default:not(.rs-picker-disabled), +.rs-btn:hover, .rs-picker-default:not(.rs-picker-disabled), +.rs-picker-toggle-active, .rs-picker-default:not(.rs-picker-disabled), +.rs-picker-toggle:focus, .rs-picker-default:not(.rs-picker-disabled), + + +.rs-picker-toggle:hover {border-color: $white !important;} \ No newline at end of file diff --git a/web/src/components/MyEMS/Meter/MeterEnergy.js b/web/src/components/MyEMS/Meter/MeterEnergy.js index 22ece156..7646aac9 100644 --- a/web/src/components/MyEMS/Meter/MeterEnergy.js +++ b/web/src/components/MyEMS/Meter/MeterEnergy.js @@ -67,8 +67,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [periodType, setPeriodType] = useState('daily'); const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month')); const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months')); - const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true); - const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true); + const [basePeriodDatetimeDisabled, setBasePeriodDatetimeDisabled] = useState(true); const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month')); const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const [cascaderOptions, setCascaderOptions] = useState(undefined); @@ -96,6 +95,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]); + const [baseValues, setBaseValues] = useState([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]); + const local = { + sunday: t('sunday'), + monday: t('monday'), + tuesday: t('tuesday'), + wednesday: t('wednesday'), + thursday: t('thursday'), + friday: t('friday'), + saturday: t('friday'), + ok: t('ok'), + today: t('today'), + yesterday: t('yesterday'), + hours: t('hours'), + minutes: t('minutes'), + seconds: t('seconds'), + last7Days: t('last7Days') + }; + const styles = { display: 'block', zIndex: 10}; useEffect(() => { let isResponseOK = false; @@ -218,24 +235,21 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { console.log(target.value); setComparisonType(target.value); if (target.value === 'year-over-year') { - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); + setBasePeriodDatetimeDisabled(true); setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years')); } else if (target.value === 'month-on-month') { - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); + setBasePeriodDatetimeDisabled(true); setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months')); } else if (target.value === 'free-comparison') { - setBasePeriodBeginsDatetimeDisabled(false); - setBasePeriodEndsDatetimeDisabled(false); + setBasePeriodDatetimeDisabled(true); } else if (target.value === 'none-comparison') { setBasePeriodBeginsDatetime(undefined); setBasePeriodEndsDatetime(undefined); - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); + setBasePeriodDatetimeDisabled(true); } + setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]); }; const onSearchMeter = ({ target }) => { @@ -255,12 +269,12 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { }; }; - let onBasePeriodBeginsDatetimeChange = (newDateTime) => { - setBasePeriodBeginsDatetime(newDateTime); - }; - - let onBasePeriodEndsDatetimeChange = (newDateTime) => { - setBasePeriodEndsDatetime(newDateTime); + let onBasePeriodChange = (DateRange) => { + let startDate = moment(DateRange[0]); + let endDate = moment(DateRange[1]); + setValues([DateRange[0], DateRange[1]]); + setReportingPeriodBeginsDatetime(startDate); + setReportingPeriodEndsDatetime(endDate); }; let onChange = (DateRange) => { @@ -279,26 +293,15 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { } else if (comparisonType === 'month-on-month') { setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months')); } + setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]); }; let onClean = event => { setValues([]); }; - var getValidBasePeriodBeginsDatetimes = function (currentDate) { - return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); - }; - - var getValidBasePeriodEndsDatetimes = function (currentDate) { - return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); - }; - - var getValidReportingPeriodBeginsDatetimes = function (currentDate) { - return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); - }; - - var getValidReportingPeriodEndsDatetimes = function (currentDate) { - return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); + let onBaseClean = event => { + setValues([]); }; // Handler @@ -540,27 +543,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { - - - - - - - + @@ -570,17 +565,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { -

+
@@ -646,4 +643,4 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { ); }; -export default withTranslation()(withRedirect(MeterEnergy)); +export default withTranslation()(withRedirect(MeterEnergy)); \ No newline at end of file diff --git a/web/src/i18n.js b/web/src/i18n.js index f8cccec1..aa774c7d 100644 --- a/web/src/i18n.js +++ b/web/src/i18n.js @@ -786,7 +786,21 @@ const resources = { 'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value', 'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found', 'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found', - + //DateRangePicker + 'sunday': 'Su', + 'monday': 'Mo', + 'tuesday': 'Tu', + 'wednesday': 'We', + 'thursday': 'Th', + 'friday': 'Fr', + 'saturday': 'Sa', + 'ok': 'OK', + 'today': 'Today', + 'yesterday': 'Yesterday', + 'hours': 'Hours', + 'minutes': 'Minutes', + 'seconds': 'Seconds', + 'last7Days': 'Last 7 Days' } }, de: { @@ -1582,6 +1596,21 @@ const resources = { 'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value', 'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found', 'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found', + //DateRangePicker + 'sunday': 'So', + 'monday': 'Mo', + 'tuesday': 'Di', + 'wednesday': 'Mi', + 'thursday': 'Do', + 'friday': 'Fr', + 'saturday': 'Sa', + 'ok': 'OKAY', + 'today': 'Heute', + 'yesterday': 'Gestern', + 'hours': 'Stunden', + 'minutes': 'Protokoll', + 'seconds': 'Nachschlag', + 'last7Days': 'Letzte 7 Tage' } }, zh_CN: { @@ -2349,7 +2378,22 @@ const resources = { 'API.VIRTUAL_METER_OF_VARIABLE_NOT_FOUND': 'Virtual meter of variable not found', 'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value', 'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found', - 'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found' + 'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found', + //DateRangePicker + 'sunday': '日', + 'monday': '一', + 'tuesday': '二', + 'wednesday': '三', + 'thursday': '四', + 'friday': '五', + 'saturday': '六', + 'ok': '确定', + 'today': '今天', + 'yesterday': '昨天', + 'hours': '时', + 'minutes': '分', + 'seconds': '秒', + 'last7Days': '最近七天', } } };