fix: 甘特图终版 & 点检界面下拉框去除提示英文
This commit is contained in:
Zhao Zhao Shen
parent
847619bb3e
commit
cd08c70068
|
|
@ -6,14 +6,14 @@
|
|||
<!-- 甘特图条目 -->
|
||||
<div v-for="(item, index) in mappedData" :key="index" class="gantt-bar" :style="getBarStyle(item)" @click="handleChartClick(item)">
|
||||
<!-- 甘特图条目提示 -->
|
||||
<div class="gantt-bar-tooltip">
|
||||
<!-- <div class="gantt-bar-tooltip">
|
||||
<div>开始时间：{{ item.beginTime }}</div>
|
||||
<div>结束时间：{{ item.endTime }}</div>
|
||||
<div>生产步骤：{{ item.mixerStep || '--' }}</div>
|
||||
<div>流量：{{ item.productFlowRate || '--' }}</div>
|
||||
<div>配方：{{ item.formula || '--' }}</div>
|
||||
<div>持续时长：{{ item.duration || '--' }}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 甘特图间隙条目 -->
|
||||
<div v-for="(gap, index) in gaps" :key="'gap-' + index" class="gantt-bar gap-bar" :style="getGapStyle(gap)">
|
||||
|
|
@ -82,11 +82,10 @@ 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();
|
||||
} else {
|
||||
// 晚班：19:00 - 次日7:00
|
||||
if (hour >= 20) {
|
||||
if (hour >= 19) {
|
||||
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 19, 0, 0).getTime();
|
||||
} else {
|
||||
return new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 19, 0, 0).getTime();
|
||||
|
|
@ -119,8 +118,9 @@ const updateChart = () => {
|
|||
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;
|
||||
return itemEndTime >= startTime && itemStartTime <= endTime;
|
||||
});
|
||||
console.log("🚀 ~ updateChart ~ filteredData:", filteredData)
|
||||
|
||||
mappedData.value = mapDataToTimeline(filteredData, startTime, endTime);
|
||||
nextTick(() => {
|
||||
|
|
@ -196,9 +196,10 @@ const getStatusColor = (status) => {
|
|||
const colors = {
|
||||
'空闲': '#00E4FF',
|
||||
'生产': '#47D3BD',
|
||||
'调配': '#FFA849',
|
||||
'调配': '#FF00FF',
|
||||
'定容': '#f3feb0',
|
||||
'CIP': '#FFC107'
|
||||
'CIP': '#FFC107',
|
||||
'停机': '#FF4D4F',
|
||||
}
|
||||
return colors[status] || '#00E4FF'
|
||||
}
|
||||
|
|
@ -232,23 +233,25 @@ const getBarStyle = (item) => {
|
|||
const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0;
|
||||
|
||||
let chartStartTime;
|
||||
let chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime();
|
||||
switch (currentRange.value) {
|
||||
case '1h':
|
||||
chartStartTime = endTime - 60 * 60 * 1000;
|
||||
chartStartTime = chartEndTime - 60 * 60 * 1000;
|
||||
break;
|
||||
case '2h':
|
||||
chartStartTime = endTime - 2 * 60 * 60 * 1000;
|
||||
chartStartTime = chartEndTime - 2 * 60 * 60 * 1000;
|
||||
break;
|
||||
case 'shift':
|
||||
chartStartTime = getShiftStartTime(endTime);
|
||||
chartStartTime = getShiftStartTime(chartEndTime);
|
||||
break;
|
||||
case 'all':
|
||||
default:
|
||||
chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() : new Date().getTime();
|
||||
chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime();
|
||||
break;
|
||||
}
|
||||
|
||||
const totalChartDuration = endTime - chartStartTime;
|
||||
const totalChartDuration = chartEndTime - chartStartTime;
|
||||
const adjustedStartTime = startTime < chartStartTime ? chartStartTime : startTime;
|
||||
const adjustedDuration = endTime - adjustedStartTime;
|
||||
const barWidth = (adjustedDuration / totalChartDuration) * containerWidth;
|
||||
|
|
@ -267,23 +270,23 @@ const getGapStyle = (gap) => {
|
|||
const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0
|
||||
|
||||
let chartStartTime;
|
||||
let chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime(); // 使用历史时间或当前时间作为结束时间
|
||||
switch (currentRange.value) {
|
||||
case '1h':
|
||||
chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() - 60 * 60 * 1000 : now.getTime() - 60 * 60 * 1000;
|
||||
chartStartTime = chartEndTime - 60 * 60 * 1000;
|
||||
break;
|
||||
case '2h':
|
||||
chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() - 2* 60 * 60 * 1000 : now.getTime() - 2 * 60 * 60 * 1000;
|
||||
chartStartTime = chartEndTime - 2 * 60 * 60 * 1000;
|
||||
break;
|
||||
case 'shift':
|
||||
chartStartTime = getShiftStartTime(props.endTime);//new Date().getTime() - 12 * 60 * 60 * 1000;
|
||||
chartStartTime = getShiftStartTime(chartEndTime);//new Date().getTime() - 12 * 60 * 60 * 1000;
|
||||
break;
|
||||
case 'all':
|
||||
default:
|
||||
chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() : new Date().getTime();
|
||||
chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime();
|
||||
break;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
@ -322,7 +325,13 @@ const generateGaps = (startTime, endTime) => {
|
|||
let previousEndTime = startTime;
|
||||
for (let i = 0; i < props.processData.length; i++) {
|
||||
const currentStartTime = new Date(props.processData[i].beginTime).getTime();
|
||||
if (currentStartTime > previousEndTime) {
|
||||
if (i === 0 && currentStartTime < startTime) {
|
||||
// 如果第一条数据的开始时间小于X轴的开始时间，添加一个间隙
|
||||
gapsArray.push({
|
||||
startTime: startTime,
|
||||
endTime: currentStartTime
|
||||
});
|
||||
} else if (currentStartTime > previousEndTime) {
|
||||
gapsArray.push({
|
||||
startTime: previousEndTime,
|
||||
endTime: currentStartTime
|
||||
|
|
@ -336,8 +345,15 @@ const generateGaps = (startTime, endTime) => {
|
|||
endTime: endTime
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 如果没有数据，直接添加一个从 startTime 到 endTime 的间隙
|
||||
gapsArray.push({
|
||||
startTime: startTime,
|
||||
endTime: endTime
|
||||
});
|
||||
}
|
||||
gaps.value = gapsArray;
|
||||
console.log("🚀 ~ generateGaps ~ gaps.value:", gaps.value)
|
||||
}
|
||||
|
||||
// 获取 X 轴刻度样式
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
</IxDateInput>
|
||||
|
||||
<!-- 班次选择框 -->
|
||||
<IxSelect Outline id="triggerId" v-model="shift" label="班次" class="input-spacing" @valueChange="handleShiftChange">
|
||||
<IxSelect Outline id="triggerId" v-model="shift" label="班次" hideListHeader="true" class="input-spacing" @valueChange="handleShiftChange">
|
||||
<IxSelectItem icon="sun" label="白班" value="0"></IxSelectItem>
|
||||
<IxSelectItem icon="moon" label="晚班" value="1"></IxSelectItem>
|
||||
</IxSelect>
|
||||
|
||||
<!-- 状态选择框 -->
|
||||
<IxSelect Outline id="statusSelect" v-model="status" label="状态" Placeholder="状态" class="input-spacing">
|
||||
<IxSelect Outline id="statusSelect" v-model="status" label="状态" hideListHeader="true" class="input-spacing">
|
||||
<IxSelectItem icon="sun" label="全部" value="0"></IxSelectItem>
|
||||
<IxSelectItem icon="sun" label="正常" value="1"></IxSelectItem>
|
||||
<IxSelectItem label="报警" value="2"></IxSelectItem>
|
||||
|
|
|
|||
Loading…
Reference in New Issue