fix: 修改甘特图bug 页面标题随页面修改

This commit is contained in:
Zhao Zhao Shen 2025-03-02 23:01:50 +08:00
parent 77f356b4f1
commit 417d28752d
4 changed files with 51 additions and 15 deletions

View File

@ -142,7 +142,8 @@ const mapDataToTimeline = (data, startTime, endTime) => {
return data.map(item => {
const beginTime = new Date(item.beginTime);
const adjustedBeginTime = beginTime.getTime() < startTime ? new Date(startTime) : beginTime;
const adjustedDuration = endTime - adjustedBeginTime.getTime();
const adjustedEndTime = new Date(item.endTime);
const adjustedDuration = adjustedEndTime.getTime() - adjustedBeginTime.getTime();
return {
id: item.id,
stopReason: item.stopReason,
@ -150,8 +151,8 @@ const mapDataToTimeline = (data, startTime, endTime) => {
value: adjustedDuration,
deviceStatus: item.deviceStatus,
mixerStep: item.mixerStep,
beginTime: formatTime(adjustedBeginTime),
endTime: formatTime(endTime),
beginTime: formatTime(beginTime), //
endTime: formatTime(adjustedEndTime), //
productFlowRate: item.productFlowRate,
formula: item.formula,
duration: `${Math.floor(adjustedDuration / 1000)}`,

View File

@ -257,13 +257,20 @@
</div>
<div class="lower-section">
<div class="block">
<div class="flex-row">
<div class="flex-row-footer">
<h2 class="juice-title">{{ currentTitle }}</h2>
<div style="padding: 0.5rem 2rem 0 0;">
<IxButton Outline @click="changeTimeRange('all')">全部</IxButton>
<div style="padding: 0.5rem 2rem 0 2rem;">
<!-- <IxButton Outline @click="changeTimeRange('all')">全部</IxButton>
<IxButton Outline @click="changeTimeRange('1h')">一小时</IxButton>
<IxButton Outline @click="changeTimeRange('2h')">二小时</IxButton>
<IxButton Outline @click="changeTimeRange('shift')">当班</IxButton>
<IxButton Outline @click="changeTimeRange('shift')">当班</IxButton> -->
<IxTabs :selected="selectedTab">
<IxTabItem @click="changeTimeRange('all')">全部</IxTabItem>
<IxTabItem @click="changeTimeRange('1h')">一小时</IxTabItem>
<IxTabItem @click="changeTimeRange('2h')">二小时</IxTabItem>
<IxTabItem @click="changeTimeRange('shift')">当班</IxTabItem>
</IxTabs>
</div>
</div>
<div class="spacing"></div>
@ -305,13 +312,19 @@
<script setup>
import moment from 'moment';
import momentTimezone from 'moment-timezone';
import { ref, onMounted, getCurrentInstance, onUnmounted } from 'vue'
import { IxChip, IxButton, IxDropdown, IxDropdownItem, IxDropdownHeader, IxDivider } from '@siemens/ix-vue'; // Chip
import { ref, onMounted, getCurrentInstance, onUnmounted, defineEmits } from 'vue'
import { IxChip, IxButton, IxDropdown, IxDropdownItem, IxDropdownHeader, IxDivider, IxTabItem, IxTabs } from '@siemens/ix-vue'; // Chip
import { getCurrentReport, getHistoryReport, getGanttData, getStopReason, setStopReason } from '@/api/dashboard.js';
import GradientProgressBar from '@/components/GradientProgressBar.vue'
import ProcessStatusBar from '@/components/ProcessStatusBar.vue'
import ProcessGanttChart from '@/components/ProcessGanttChart.vue'
const emit = defineEmits(['send-data']);
const sendDataToParent = () => {
emit('send-data', 'SIEMENS MIS 1.0 前处理界面');
};
// "Asia/Shanghai"
const timezone = 'Asia/Shanghai';
@ -740,6 +753,9 @@ const fetchStopReason = async () => {
}
};
const selectedTab = ref('');
const changeTab = (tabId) => (selectedTab.value = tabId);
let autoUpdateInterval = null;
//
@ -747,6 +763,7 @@ onMounted(async () => {
await fetchData();
fetchGanttData();
fetchStopReason();
sendDataToParent();
const setupAutoUpdate = () => {
if (isAutoUpdate.value) {
@ -859,7 +876,12 @@ onUnmounted(() => {
justify-content: space-between;
align-items: center;
height: 2.5rem;
/* 调整高度 */
}
.flex-row-footer {
display: flex;
align-items: center;
height: 2.5rem;
}
/* 标题和流量标签样式 */

View File

@ -60,12 +60,18 @@
</template>
<script setup>
import { ref, computed, getCurrentInstance, onMounted } from 'vue';
import { ref, computed, getCurrentInstance, onMounted, defineEmits } from 'vue';
import { IxDatetimePicker, IxButton, IxDivider, IxDropdown, IxDropdownHeader, IxDropdownItem, IxEventList, IxEventListItem, IxSelect } from '@siemens/ix-vue';
import InspectionForm from './InspectionForm.vue';
import { getInspectionCurrent, getInspectionData } from '@/api/inspection';
import { color } from 'echarts';
const emit = defineEmits(['send-data']);
const sendDataToParent = () => {
emit('send-data', '点检界面');
};
//
const shiftOptions = [
{ label: '白班', value: 'day' },
@ -212,6 +218,7 @@ const fetchInspectionData = async () => {
onMounted(() => {
fetchCurrentValues();
fetchInspectionData();
sendDataToParent();
});
</script>

View File

@ -1,6 +1,6 @@
<template>
<IxApplication :appSwitchConfig="appSwitchConfig" theme="classic-dark">
<IxApplicationHeader name="SIEMENS MIS 1.0 前处理界面" :applicationSwitchButton="true">
<IxApplicationHeader :name="appName" :applicationSwitchButton="true">
<!-- 添加实时显示时间 -->
<div class="time-display">{{ currentTime }}</div>
@ -11,7 +11,7 @@
</IxApplicationHeader>
<IxContent class="mainContent">
<router-view @update-history="updateHistory" @reset="reset"></router-view>
<router-view @update-history="updateHistory" @reset="reset" @send-data="handleDataFromChild"></router-view>
</IxContent>
<!-- 添加 IxDatetimePicker 组件 -->
@ -32,7 +32,8 @@ import {
IxIconButton,
IxDatetimePicker,
} from '@siemens/ix-vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router';
const appSwitchConfig = {
i18nAppSwitch: '切换应用',
@ -63,6 +64,7 @@ const currentTime = ref('');
const showDatetimePicker = ref(false);
const selectedDatetime = ref('');
const isAutoUpdate = ref(true);
const appName = ref('SIEMENS MIS 1.0 前处理界面');
const updateTime = () => {
const now = new Date();
@ -118,13 +120,17 @@ const updateHistory = (datetime) => {
window.dispatchEvent(event);
};
const handleDataFromChild = (data) => {
appName.value = data;
};
onMounted(() => {
updateTime();
const interval = setInterval(() => {
if (showDatetimePicker.value || !isAutoUpdate.value) return; //
updateTime();
}, 60000); //
onUnmounted(() => clearInterval(interval));
onUnmounted(() => clearInterval(interval)); //
});
</script>