From 77f356b4f1dfdf3686f1cb13dfd0f7e0235dffa7 Mon Sep 17 00:00:00 2001 From: Zhao Zhao Shen Date: Sun, 2 Mar 2025 19:27:19 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=98=E7=89=B9?= =?UTF-8?q?=E5=9B=BE=E4=BB=A5=E5=8F=8A=E8=87=AA=E5=8A=A8=E5=88=B7=E6=96=B0?= =?UTF-8?q?bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProcessGanttChart.vue | 119 +++++++++------------------ src/views/Dashboard/index.vue | 30 +++---- src/views/layout/vueLayout.vue | 23 +++++- 3 files changed, 69 insertions(+), 103 deletions(-) diff --git a/src/components/ProcessGanttChart.vue b/src/components/ProcessGanttChart.vue index 8b37825..e3a8237 100644 --- a/src/components/ProcessGanttChart.vue +++ b/src/components/ProcessGanttChart.vue @@ -43,6 +43,10 @@ const props = defineProps({ currentRange: { type: String, default: 'all' + }, + endTime: { + type: String, + default: null } }) @@ -74,11 +78,12 @@ const initChart = () => { } // 获取当班开始时间 -const getShiftStartTime = (now) => { +const getShiftStartTime = (endTime) => { + const now = endTime ? new Date(endTime) : new Date(); const hour = now.getHours(); if (hour >= 7 && hour < 19) { // 白班：8:00 - 20:00 - return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 7, 0, 0).getTime(); + return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 7, 0, 0).getTime(); } else { // 晚班：19:00 - 次日7:00 if (hour >= 20) { @@ -93,32 +98,34 @@ const getShiftStartTime = (now) => { const updateChart = () => { const now = new Date(); let startTime; + let endTime = props.endTime ? new Date(props.endTime).getTime() : now.getTime(); switch (currentRange.value) { case '1h': - startTime = now.getTime() - 60 * 60 * 1000; + startTime = endTime - 60 * 60 * 1000; break; case '2h': - startTime = now.getTime() - 2 * 60 * 60 * 1000; + startTime = endTime - 2 * 60 * 60 * 1000; break; case 'shift': - // 当班逻辑修改，根据当前时间 判断属于白班或晚班 - startTime = getShiftStartTime(now);//now.getTime() - 12 * 60 * 60 * 1000; + startTime = getShiftStartTime(endTime); break; case 'all': default: startTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() : now.getTime(); break; } + const filteredData = props.processData.filter(item => { const itemStartTime = new Date(item.beginTime).getTime(); const itemEndTime = new Date(item.endTime).getTime(); return itemStartTime >= startTime || itemEndTime >= startTime; }); - mappedData.value = mapDataToTimeline(filteredData, startTime); + + mappedData.value = mapDataToTimeline(filteredData, startTime, endTime); nextTick(() => { - generateXTicks(); - generateGaps(); + generateXTicks(startTime, endTime); + generateGaps(startTime, endTime); }); } @@ -131,12 +138,11 @@ const formatTime = (timeString) => { } // 将数据映射到时间轴 -const mapDataToTimeline = (data = props.processData, startTime) => { +const mapDataToTimeline = (data, startTime, endTime) => { return data.map(item => { const beginTime = new Date(item.beginTime); - const endTime = new Date(item.endTime); const adjustedBeginTime = beginTime.getTime() < startTime ? new Date(startTime) : beginTime; - const adjustedDuration = endTime - adjustedBeginTime; + const adjustedDuration = endTime - adjustedBeginTime.getTime(); return { id: item.id, stopReason: item.stopReason, @@ -218,21 +224,20 @@ const handleChartClick = (data) => { // 获取甘特图条目样式 const getBarStyle = (item) => { - const startTime = new Date(item.beginTime).getTime() - const endTime = new Date(item.endTime).getTime() - const totalDuration = endTime - startTime - const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0 + const startTime = new Date(item.beginTime).getTime(); + const endTime = new Date(item.endTime).getTime(); + const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0; let chartStartTime; switch (currentRange.value) { case '1h': - chartStartTime = new Date().getTime() - 60 * 60 * 1000; + chartStartTime = endTime - 60 * 60 * 1000; break; case '2h': - chartStartTime = new Date().getTime() - 2 * 60 * 60 * 1000; + chartStartTime = endTime - 2 * 60 * 60 * 1000; break; case 'shift': - chartStartTime = getShiftStartTime(new Date());//new Date().getTime() - 12 * 60 * 60 * 1000; + chartStartTime = getShiftStartTime(endTime); break; case 'all': default: @@ -240,36 +245,34 @@ const getBarStyle = (item) => { break; } - const chartEndTime = new Date().getTime(); // 使用当前时间作为结束时间 - const totalChartDuration = chartEndTime - chartStartTime + const totalChartDuration = endTime - chartStartTime; const adjustedStartTime = startTime < chartStartTime ? chartStartTime : startTime; const adjustedDuration = endTime - adjustedStartTime; - const barWidth = (adjustedDuration / totalChartDuration) * containerWidth - const leftPosition = ((adjustedStartTime - chartStartTime) / totalChartDuration) * containerWidth + const barWidth = (adjustedDuration / totalChartDuration) * containerWidth; + const leftPosition = ((adjustedStartTime - chartStartTime) / totalChartDuration) * containerWidth; return { width: `${barWidth / 16}rem`, // 将 px 转换为 rem backgroundColor: item.itemStyle.color, left: `calc(${leftPosition / 16}rem + 1rem)` // 将 px 转换为 rem，并增加 1rem 的 gap - } + }; } // 获取甘特图间隙条目样式 const getGapStyle = (gap) => { const startTime = new Date(gap.startTime).getTime() const endTime = new Date(gap.endTime).getTime() - const totalDuration = endTime - startTime const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0 let chartStartTime; switch (currentRange.value) { case '1h': - chartStartTime = new Date().getTime() - 60 * 60 * 1000; + chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() - 60 * 60 * 1000 : now.getTime() - 60 * 60 * 1000; break; case '2h': - chartStartTime = new Date().getTime() - 2 * 60 * 60 * 1000; + chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() - 2* 60 * 60 * 1000 : now.getTime() - 2 * 60 * 60 * 1000; break; case 'shift': - chartStartTime = getShiftStartTime(new Date());//new Date().getTime() - 12 * 60 * 60 * 1000; + chartStartTime = getShiftStartTime(props.endTime);//new Date().getTime() - 12 * 60 * 60 * 1000; break; case 'all': default: @@ -277,7 +280,7 @@ const getGapStyle = (gap) => { break; } - const chartEndTime = new Date().getTime(); // 使用当前时间作为结束时间 + const chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime(); // 使用历史时间或当前时间作为结束时间 const totalChartDuration = chartEndTime - chartStartTime const adjustedStartTime = startTime < chartStartTime ? chartStartTime : startTime; const adjustedDuration = endTime - adjustedStartTime; @@ -292,36 +295,8 @@ const getGapStyle = (gap) => { } // 生成 X 轴刻度 -const generateXTicks = () => { - const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0 - let startTime, endTime; - - const now = new Date(); - if (props.processData.length > 0) { - startTime = new Date(props.processData[0].beginTime).getTime(); - } else { - startTime = now.getTime(); - } - - switch (currentRange.value) { - case '1h': - startTime = now.getTime() - 60 * 60 * 1000; - endTime = now.getTime(); - break; - case '2h': - startTime = now.getTime() - 2 * 60 * 60 * 1000; - endTime = now.getTime(); - break; - case 'shift': - startTime = getShiftStartTime(now);// now.getTime() - 12 * 60 * 60 * 1000; - endTime = now.getTime(); - break; - case 'all': - default: - endTime = now.getTime(); - break; - } - +const generateXTicks = (startTime, endTime) => { + const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0; const totalDuration = endTime - startTime; const tickInterval = totalDuration / 10; // 将时间段分为10个刻度 const ticks = []; @@ -338,27 +313,8 @@ const generateXTicks = () => { } // 生成甘特图间隙 -const generateGaps = () => { +const generateGaps = (startTime, endTime) => { const gapsArray = []; - let startTime; - - const now = new Date(); - switch (currentRange.value) { - case '1h': - startTime = now.getTime() - 60 * 60 * 1000; - break; - case '2h': - startTime = now.getTime() - 2 * 60 * 60 * 1000; - break; - case 'shift': - startTime = getShiftStartTime(now);//now.getTime() - 12 * 60 * 60 * 1000; - break; - case 'all': - default: - startTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() : now.getTime(); - break; - } - if (props.processData.length > 0) { let previousEndTime = startTime; for (let i = 0; i < props.processData.length; i++) { @@ -371,11 +327,10 @@ const generateGaps = () => { } previousEndTime = new Date(props.processData[i].endTime).getTime(); } - const currentTime = new Date().getTime(); - if (currentTime > previousEndTime) { + if (endTime > previousEndTime) { gapsArray.push({ startTime: previousEndTime, - endTime: currentTime + endTime: endTime }); } } diff --git a/src/views/Dashboard/index.vue b/src/views/Dashboard/index.vue index 75c848f..beecdb1 100644 --- a/src/views/Dashboard/index.vue +++ b/src/views/Dashboard/index.vue @@ -174,7 +174,7 @@ -
+
@@ -220,7 +220,7 @@
-
+
@@ -267,7 +267,7 @@
-
@@ -279,7 +279,7 @@ 流量：{{ productFlowRate }} 配方：{{ formula }} 持续时长：{{ duration }} - {{ selectedReason ? '停机原因：' + selectedReason : '请选择停机原因' }} + {{ selectedReason ? '停机原因：' + selectedReason : '请选择停机原因 ▲' }} @@ -325,7 +325,7 @@ const juiceTankData = ref({}) // 果汁无菌罐数据 const pulpTankData = ref({}) // 果肉无菌罐数据 const dynamicMixerData = ref({}) // 动态混合器数据 -const currentTime = ref('') +// const currentTime = ref('') const totalTrafficJuice = ref(0); // 果汁调配 累计流量 const totalTrafficPulp = ref(0); // 果汁调配 累计流量 const progressList = ref([])// 果汁调配 进度条 @@ -376,13 +376,13 @@ const mixerStep = ref(''); // 增加 step 字段 const currentRange = ref('all'); // 增加 currentRange 响应式变量 const ganttChart = ref(null); // 增加 ganttChart 引用 -const currentTitle = ref('生产进度'); +const currentTitle = ref(''); // 全局响应式变量 const globalDeviceId = ref(null); const globalTime = ref(moment().tz(timezone).format('YYYY-MM-DD HH:mm')); const isAutoUpdate = ref(true); // 是否自动更新 -const deviceType = ref(true); +const deviceType = ref(false); // 新增响应式变量 const selectedReason = ref(''); // 新增响应式变量 @@ -395,8 +395,7 @@ const removeStatus = (id) => { statuses.value = statuses.value.filter(status => status.id !== id); }; -const updateCurrentInfo = (segment) => { - +const updateCurrentInfo = (segment) => { id.value = segment.id; currentStatus.value = segment.deviceStatus; startTimeFormatted.value = formatTime(segment.beginTime); @@ -419,10 +418,6 @@ const changeTimeRange = (range) => { } }; -const updateTime = () => { - const now = moment(); - currentTime.value = now.format('YYYY-MM-DD HH:mm'); -} //#TODO:主数据 // 处理接口返回的数据 const processDataFromAPI = (apiData) => { @@ -497,6 +492,7 @@ const updateData = (processedData) => { // 设置默认值 if (juiceData.value.deviceId) { globalDeviceId.value = juiceData.value.deviceId; + currentTitle.value = juiceData.value.data[0].name; } // 累计流量 totalTrafficJuice.value = juiceData.value.totalTraffic; @@ -618,7 +614,7 @@ const processGanttDataResponse = (response) => { lineId: item.lineId, stopReason: item.stopReason })); - + processData.value = ganttData; formattedProcessData.value = formatDates(ganttData); if (ganttChart.value && ganttChart.value.updateChart) { @@ -751,8 +747,6 @@ onMounted(async () => { await fetchData(); fetchGanttData(); fetchStopReason(); - updateTime(); - setInterval(updateTime, 1000); const setupAutoUpdate = () => { if (isAutoUpdate.value) { @@ -895,7 +889,7 @@ onUnmounted(() => { /* 进度条样式 */ .progress-bar { - height: 1rem; + height: 1.2rem; /* 调整高度 */ background: #000028; border-radius: 0.5rem; @@ -1098,4 +1092,4 @@ onUnmounted(() => { .btnStyle { pointer-events: none; } - + diff --git a/src/views/layout/vueLayout.vue b/src/views/layout/vueLayout.vue index 427d386..89b32c4 100644 --- a/src/views/layout/vueLayout.vue +++ b/src/views/layout/vueLayout.vue @@ -53,7 +53,8 @@ const appSwitchConfig = { iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg', url: '/#/inspection', description: '其他系统描述', - target: '_blank', + target: '_self', + // target: '_blank', }, ], }; @@ -61,6 +62,7 @@ const appSwitchConfig = { const currentTime = ref(''); const showDatetimePicker = ref(false); const selectedDatetime = ref(''); +const isAutoUpdate = ref(true); const updateTime = () => { const now = new Date(); @@ -81,6 +83,7 @@ const handleReset = () => { const event = new CustomEvent('reset'); updateTime(); window.dispatchEvent(event); + isAutoUpdate.value = true; // 重置后恢复自动刷新 }; const handleDatetimePickerDone = (event) => { @@ -89,6 +92,7 @@ const handleDatetimePickerDone = (event) => { // 将所选数据传到主页 console.log('Selected Datetime:', selectedDatetime.value); updateHistory(selectedDatetime.value); + isAutoUpdate.value = false; // 选择完历史时间后停止自动刷新 }; const updateHistory = (datetime) => { @@ -116,7 +120,10 @@ const updateHistory = (datetime) => { onMounted(() => { updateTime(); - const interval = setInterval(updateTime, 60000); // 每分钟更新一次 + const interval = setInterval(() => { + if (showDatetimePicker.value || !isAutoUpdate.value) return; // 如果显示日期时间选择器或停止自动刷新，则不更新时间 + updateTime(); + }, 60000); // 每分钟更新一次 onUnmounted(() => clearInterval(interval)); }); @@ -219,7 +226,8 @@ ix-application { } :deep(ix-datetime-picker){ - --theme-menu--background: #23233C; + --theme-menu--background: #23233C; + border: 1px solid #fff; } :deep(IxApplication) { @@ -242,5 +250,14 @@ ix-application { :global(.visible) { --theme-modal--background:#23233C !important; + --theme-color-ghost--selected:#23233C !important; +} + +:host .AppEntry.Selected { + border:none !important; +} + +:deep(:host .AppEntry.Selected){ + border:none !important; } \ No newline at end of file