fix: 修复甘特图以及自动刷新bug
This commit is contained in:
Zhao Zhao Shen
parent
fd2c2f303d
commit
77f356b4f1
|
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item" style="padding: 1rem 0 0 0;">
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
|
||||
<polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
|
||||
</svg>
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="info-item">
|
||||
<div class="info-item" style="padding: 0.5rem 0 0 0;">
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
|
||||
<polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
|
||||
</svg>
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="spacing"></div>
|
||||
<ProcessGanttChart ref="ganttChart" :process-data="formattedProcessData" :current-range="currentRange"
|
||||
<ProcessGanttChart ref="ganttChart" :process-data="formattedProcessData" :current-range="currentRange" :end-time="globalTime"
|
||||
@segment-click="handleSegmentClick" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -279,7 +279,7 @@
|
|||
<IxButton Outline class="btnStyle"> 流量：{{ productFlowRate }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 配方：{{ formula }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton>
|
||||
<IxButton Outline id="triggerId"> {{ selectedReason ? '停机原因：' + selectedReason : '请选择停机原因' }} </IxButton>
|
||||
<IxButton Outline id="triggerId"> {{ selectedReason ? '停机原因：' + selectedReason : '请选择停机原因 ▲' }} </IxButton>
|
||||
<IxDropdown trigger="triggerId" class="drop-down">
|
||||
<IxDropdownHeader label="停机原因"></IxDropdownHeader>
|
||||
<IxDropdownItem v-for="reason in stopReasons" :key="reason" :label="reason" @click="handleReasonChange(id, reason)"></IxDropdownItem>
|
||||
|
|
@ -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(''); // 新增响应式变量
|
||||
|
|
@ -396,7 +396,6 @@ const removeStatus = (id) => {
|
|||
};
|
||||
|
||||
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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
});
|
||||
</script>
|
||||
|
|
@ -220,6 +227,7 @@ ix-application {
|
|||
|
||||
:deep(ix-datetime-picker){
|
||||
--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;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue