wonderzhao
/
cola-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 甘特图终版 & 点检界面下拉框去除提示英文

This commit is contained in:
Zhao Zhao Shen 2025-03-06 18:51:15 +08:00
parent 847619bb3e
commit cd08c70068
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ProcessGanttChart.vue
View File

@ -6,14 +6,14 @@
<!-- 甘特图条目 --> <!-- 甘特图条目 -->
<div v-for="(item, index) in mappedData" :key="index" class="gantt-bar" :style="getBarStyle(item)" @click="handleChartClick(item)"> <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.beginTime }}</div>
<div>结束时间：{{ item.endTime }}</div> <div>结束时间：{{ item.endTime }}</div>
<div>生产步骤：{{ item.mixerStep || '--' }}</div> <div>生产步骤：{{ item.mixerStep || '--' }}</div>
<div>流量：{{ item.productFlowRate || '--' }}</div> <div>流量：{{ item.productFlowRate || '--' }}</div>
<div>配方：{{ item.formula || '--' }}</div> <div>配方：{{ item.formula || '--' }}</div>
<div>持续时长：{{ item.duration || '--' }}</div> <div>持续时长：{{ item.duration || '--' }}</div>
</div> </div> -->
</div> </div>
<!-- 甘特图间隙条目 --> <!-- 甘特图间隙条目 -->
<div v-for="(gap, index) in gaps" :key="'gap-' + index" class="gantt-bar gap-bar" :style="getGapStyle(gap)"> <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 now = endTime ? new Date(endTime) : new Date();
const hour = now.getHours(); const hour = now.getHours();
if (hour >= 7 && hour < 19) { 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 { } else {
// 晚班：19:00 - 次日7:00 // 晚班：19:00 - 次日7:00
if (hour >= 20) { if (hour >= 19) {
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 19, 0, 0).getTime(); return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 19, 0, 0).getTime();
} else { } else {
return new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 19, 0, 0).getTime(); 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 filteredData = props.processData.filter(item => {
const itemStartTime = new Date(item.beginTime).getTime(); const itemStartTime = new Date(item.beginTime).getTime();
const itemEndTime = new Date(item.endTime).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); mappedData.value = mapDataToTimeline(filteredData, startTime, endTime);
nextTick(() => { nextTick(() => {
@ -196,9 +196,10 @@ const getStatusColor = (status) => {
const colors = { const colors = {
'空闲': '#00E4FF', '空闲': '#00E4FF',
'生产': '#47D3BD', '生产': '#47D3BD',
'调配': '#FFA849', '调配': '#FF00FF',
'定容': '#f3feb0', '定容': '#f3feb0',
'CIP': '#FFC107' 'CIP': '#FFC107',
'停机': '#FF4D4F',
} }
return colors[status] || '#00E4FF' return colors[status] || '#00E4FF'
} }
@ -232,23 +233,25 @@ const getBarStyle = (item) => {
const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0; const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0;
let chartStartTime; let chartStartTime;
let chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime();
switch (currentRange.value) { switch (currentRange.value) {
case '1h': case '1h':
chartStartTime = endTime - 60 * 60 * 1000; chartStartTime = chartEndTime - 60 * 60 * 1000;
break; break;
case '2h': case '2h':
chartStartTime = endTime - 2 * 60 * 60 * 1000; chartStartTime = chartEndTime - 2 * 60 * 60 * 1000;
break; break;
case 'shift': case 'shift':
chartStartTime = getShiftStartTime(endTime); chartStartTime = getShiftStartTime(chartEndTime);
break; break;
case 'all': case 'all':
default: default:
chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() : new Date().getTime(); 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; break;
} }
const totalChartDuration = endTime - chartStartTime; const totalChartDuration = chartEndTime - chartStartTime;
const adjustedStartTime = startTime < chartStartTime ? chartStartTime : startTime; const adjustedStartTime = startTime < chartStartTime ? chartStartTime : startTime;
const adjustedDuration = endTime - adjustedStartTime; const adjustedDuration = endTime - adjustedStartTime;
const barWidth = (adjustedDuration / totalChartDuration) * containerWidth; const barWidth = (adjustedDuration / totalChartDuration) * containerWidth;
@ -267,23 +270,23 @@ const getGapStyle = (gap) => {
const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0 const containerWidth = ganttChart.value ? ganttChart.value.clientWidth : 0
let chartStartTime; let chartStartTime;
let chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime(); // 使用历史时间或当前时间作为结束时间
switch (currentRange.value) { switch (currentRange.value) {
case '1h': 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; break;
case '2h': 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; break;
case 'shift': case 'shift':
chartStartTime = getShiftStartTime(props.endTime);//new Date().getTime() - 12 * 60 * 60 * 1000; chartStartTime = getShiftStartTime(chartEndTime);//new Date().getTime() - 12 * 60 * 60 * 1000;
break; break;
case 'all': case 'all':
default: default:
chartStartTime = props.processData.length > 0 ? new Date(props.processData[0].beginTime).getTime() : new Date().getTime(); 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; break;
} }
const chartEndTime = props.endTime ? new Date(props.endTime).getTime() : new Date().getTime(); // 使用历史时间或当前时间作为结束时间
const totalChartDuration = chartEndTime - chartStartTime const totalChartDuration = chartEndTime - chartStartTime
const adjustedStartTime = startTime < chartStartTime ? chartStartTime : startTime; const adjustedStartTime = startTime < chartStartTime ? chartStartTime : startTime;
const adjustedDuration = endTime - adjustedStartTime; const adjustedDuration = endTime - adjustedStartTime;
@ -322,7 +325,13 @@ const generateGaps = (startTime, endTime) => {
let previousEndTime = startTime; let previousEndTime = startTime;
for (let i = 0; i < props.processData.length; i++) { for (let i = 0; i < props.processData.length; i++) {
const currentStartTime = new Date(props.processData[i].beginTime).getTime(); 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({ gapsArray.push({
startTime: previousEndTime, startTime: previousEndTime,
endTime: currentStartTime endTime: currentStartTime
@ -336,8 +345,15 @@ const generateGaps = (startTime, endTime) => {
endTime: endTime endTime: endTime
}); });
} }
} else {
// 如果没有数据，直接添加一个从 startTime 到 endTime 的间隙
gapsArray.push({
startTime: startTime,
endTime: endTime
});
} }
gaps.value = gapsArray; gaps.value = gapsArray;
console.log("🚀 ~ generateGaps ~ gaps.value:", gaps.value)
} }
// 获取 X 轴刻度样式 // 获取 X 轴刻度样式

4
src/views/Inspection/index.vue
View File

@ -7,13 +7,13 @@
</IxDateInput> </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="sun" label="白班" value="0"></IxSelectItem>
<IxSelectItem icon="moon" label="晚班" value="1"></IxSelectItem> <IxSelectItem icon="moon" label="晚班" value="1"></IxSelectItem>
</IxSelect> </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="0"></IxSelectItem>
<IxSelectItem icon="sun" label="正常" value="1"></IxSelectItem> <IxSelectItem icon="sun" label="正常" value="1"></IxSelectItem>
<IxSelectItem label="报警" value="2"></IxSelectItem> <IxSelectItem label="报警" value="2"></IxSelectItem>