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 @@
-
@@ -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