suojin
/
jonhon-mes-web
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

排产看板样式调整

Browse Source
dev-scheduling
zhangdi 3 days ago
parent 480217af12
commit 446784a596
2 changed files with 182 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/page/index/top/index.vue
  2. 244
      src/views/productionSchedulingPlan/schedulingDashboard/index.vue

2
src/page/index/top/index.vue
Unescape View File

@ -113,7 +113,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<top-setting></top-setting>
<!-- <top-setting></top-setting> -->
<el-dialog title="请选择身份信息后切换" append-to-body v-model="userBox" width="400px">
<avue-form :option="userOption" v-model="userForm" @submit="toAll" />
</el-dialog>

244
src/views/productionSchedulingPlan/schedulingDashboard/index.vue
Unescape View File

@ -3,9 +3,15 @@
<el-form label-width="80px" :model="formLabelAlign">
<el-row>
<!-- 新增查询条件 -->
<el-col :span="4">
<el-col :span="5">
<el-form-item label="班组:">
<el-select v-model="formLabelAlign.teamName" clearable filterable placeholder="请选择">
<el-select
v-model="formLabelAlign.teamName"
clearable
filterable
placeholder="请选择"
size="small"
>
<el-option
v-for="(item, index) in selectTeamOptions"
:label="item"
@ -15,9 +21,15 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-col :span="5">
<el-form-item label="设备:">
<el-select v-model="formLabelAlign.equipName" clearable filterable placeholder="请选择">
<el-select
v-model="formLabelAlign.equipName"
clearable
filterable
placeholder="请选择"
size="small"
>
<el-option
v-for="(item, index) in selectEquipOptions"
:label="item"
@ -27,10 +39,16 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-col :span="5">
<el-form-item label="工序:">
<!-- <el-input v-model="formLabelAlign.processName" placeholder="请输入"></el-input> -->
<el-select v-model="formLabelAlign.processName" clearable filterable placeholder="请选择">
<el-select
v-model="formLabelAlign.processName"
clearable
filterable
placeholder="请选择"
size="small"
>
<el-option
v-for="(item, index) in selectProcessOptions"
:label="item.name"
@ -40,20 +58,23 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="4">
<el-col :span="5">
<el-form-item label="时间:">
<el-date-picker
v-model="formLabelAlign.startTime"
type="date"
value-format="YYYY-MM-DD"
placeholder="选择日期"
size="small"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="4">
<div style="float: right">
<el-button type="primary" icon="el-icon-search" @click="handleSubmit"> 搜索 </el-button>
<el-button icon="el-icon-delete" @click="handleReset"> 清空 </el-button>
<el-button type="primary" icon="el-icon-search" @click="handleSubmit" size="small">
搜索
</el-button>
<el-button icon="el-icon-delete" @click="handleReset" size="small"> 清空 </el-button>
</div>
</el-col>
</el-row>
@ -87,23 +108,25 @@
<div class="info-title-cell info-title-no">零件号</div>
<div class="info-title-cell">批次号</div>
<div class="info-title-cell info-title-num">数量</div>
<div class="info-title-cell">质量等级</div>
<div class="info-title-cell info-title-num">质量等级</div>
</div>
<div
v-for="(order, index) in currentPageOrders"
:key="index"
:style="{
height: getRowHeight(order.woCode) + 'px',
borderBottom: '1px solid #ccc',
lineHeight: getRowHeight(order.woCode) + 'px',
}"
>
<div class="info-item">
<div class="info-cell info-title-no">{{ order.woCode }}</div>
<div class="info-cell info-title-no">{{ order.partCode }}</div>
<div class="info-cell">{{ order.batchNo }}</div>
<div class="info-cell info-title-num">{{ order.makeQty }}</div>
<div class="info-cell">{{ order.productIdent }}</div>
<div class="info-container">
<div
v-for="(order, index) in currentPageOrders"
:key="index"
:style="{
height: getRowHeight(order.woCode) + 'px',
borderBottom: '1px solid #ccc',
lineHeight: getRowHeight(order.woCode) + 'px',
}"
>
<div class="info-item">
<div class="info-cell info-title-no">{{ order.woCode }}</div>
<div class="info-cell info-title-no">{{ order.partCode }}</div>
<div class="info-cell">{{ order.batchNo }}</div>
<div class="info-cell info-title-num">{{ order.makeQty }}</div>
<div class="info-cell info-title-num">{{ order.productIdent }}</div>
</div>
</div>
</div>
</div>
@ -131,6 +154,16 @@
{{ time }}
</div>
</div>
<div v-if="zoomLevel >= 3" class="quarter-labels">
<div
v-for="(time, index) in quarterTickLabels"
:key="index"
class="quarter-label"
:style="{ left: `${(index / (24 * 4)) * 100}%` }"
>
{{ time }}
</div>
</div>
</div>
<div class="tick-lines" :style="{ width: `${timelineWidth}%` }">
<div
@ -147,6 +180,14 @@
:style="{ left: `${(index / (24 * 2)) * 100}%` }"
></div>
</div>
<div v-if="zoomLevel >= 3" class="quarter-tick-lines">
<div
v-for="(time, index) in quarterTickLabels"
:key="index"
class="quarter-tick-line"
:style="{ left: `${(index / (24 * 4)) * 100}%` }"
></div>
</div>
<div class="axis-base-line"></div>
<!-- 当前时间线 -->
<div class="current-time-line" :style="{ left: `${currentTimePosition}%` }"></div>
@ -169,7 +210,7 @@
v-for="(order, index) in currentPageOrders"
:key="index"
class="device-task-row"
:style="{ height: getRowHeight(order.woCode) + 'px' }"
:style="{ height: getRowChartHeight(order.woCode) + 'px' }"
>
<template
v-for="(layer, layerIndex) in getLayeredTasks(order.woCode)"
@ -205,7 +246,7 @@
</div>
</div>
<!-- 分页控件 sizes :page-sizes="[10, 20, 50]"-->
<!-- 分页控件 sizes :page-sizes="[10, 20, 50]" ,sizes-->
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@ -289,11 +330,7 @@
</template>
<script>
import {
getData,
selectEquip,
selectTeam,
} from '@/api/productionSchedulingPlan/scheduling';
import { getData, selectEquip, selectTeam } from '@/api/productionSchedulingPlan/scheduling';
import { getProcessSet } from '@/api/productionSchedulingPlan/basic';
export default {
name: 'GanttChart',
@ -306,7 +343,7 @@ export default {
processName: '', //工序
woCode: '', //车间订单号
},
zoomLevel: 3, // 缩放级别 (1-4)
zoomLevel: 12, // 缩放级别 (1-4)
minZoom: 1,
maxZoom: 4,
@ -318,7 +355,7 @@ export default {
// 分页参数
currentPage: 1,
pageSize: 7,
pageSize: 10,
// 提示框相关
tooltipVisible: false,
@ -328,6 +365,7 @@ export default {
// 样式相关
baseRowHeight: 36,
baseRowChartHeight: 37,
rowHeights: {},
selectTeamOptions: [],
selectEquipOptions: [],
@ -352,6 +390,30 @@ export default {
}
return labels;
},
quarterTickLabels() {
const labels = [];
for (let hour = 0; hour < 24; hour++) {
labels.push(''); // 0分位置留空（与小时刻度重叠）
labels.push(`${hour}:15`);
labels.push(''); // 30分位置留空（与半小时刻度重叠）
labels.push(`${hour}:45`);
}
return labels;
},
tenMinuteTickLabels() {
const labels = [];
for (let hour = 0; hour < 24; hour++) {
// 每小时包含6个10分钟刻度（0,10,20,30,40,50）
// 0分和30分位置留空避免与已有刻度重叠
labels.push(''); // 0分
labels.push(`${hour}:10`);
labels.push(`${hour}:20`);
labels.push(''); // 30分
labels.push(`${hour}:40`);
labels.push(`${hour}:50`);
}
return labels;
},
},
mounted() {
this.formLabelAlign.startTime = new Date().toISOString().substr(0, 10);
@ -361,9 +423,9 @@ export default {
this.getData();
this.calcCurrentTimePosition();
// 定时更新当前时间线位置
setInterval(() => {
this.calcCurrentTimePosition();
}, 60000); // 每分钟更新一次
// setInterval(() => {
// this.calcCurrentTimePosition();
// }, 60000); // 每分钟更新一次
},
methods: {
// 计算当前时间在时间轴上的位置百分比
@ -442,6 +504,7 @@ export default {
partCode: firstTask.partCode,
batchNo: firstTask.batchNo,
makeQty: firstTask.makeQty,
productIdent: firstTask.productIdent,
});
}
// 处理任务数据
@ -584,7 +647,7 @@ export default {
this.tooltipVisible = false;
},
// 行高计算
// 左侧行高计算
getRowHeight(device) {
const layers = this.getLayeredTasks(device);
const layerCount = layers.length;
@ -592,21 +655,29 @@ export default {
this.rowHeights[device] = height;
return height;
},
// 右侧行高计算
getRowChartHeight(device) {
const layers = this.getLayeredTasks(device);
const layerCount = layers.length;
const height = Math.max(this.baseRowChartHeight, layerCount * this.baseRowChartHeight);
this.rowHeights[device] = height;
return height;
},
getLayerOffset(layerIndex, totalLayers, device) {
const rowHeight = this.getRowHeight(device);
const rowHeight = this.getRowChartHeight(device);
if (totalLayers <= 1) return 2;
const totalSpacing = totalLayers * 4;
const availableHeight = rowHeight - totalSpacing;
const layerHeight = availableHeight / totalLayers;
return layerIndex * (layerHeight + 18) + 2;
return layerIndex * (layerHeight + 18) + 4;
},
getLayerTaskHeight(totalLayers, device) {
const rowHeight = this.getRowHeight(device);
const rowHeight = this.getRowChartHeight(device);
if (totalLayers <= 1) {
return rowHeight - 18;
} else {
const totalSpacing = totalLayers * 4;
const totalSpacing = totalLayers * 18;
const availableHeight = rowHeight - totalSpacing;
return availableHeight / totalLayers;
}
@ -662,10 +733,11 @@ export default {
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
height: calc(100% - 72px);
}
.gantt-header {
height: 40px;
height: 15px;
margin-bottom: 10px;
}
@ -701,33 +773,37 @@ export default {
.gantt-wrapper {
display: flex;
height: calc(100% - 120px);
border: 1px solid #eee;
height: calc(100% - 180px);
/* border: 1px solid #eee; */
overflow: hidden;
}
/* 左侧信息列表样式 */
.info-list {
width: 450px;
width: 480px;
background-color: #f8f9fa;
border-right: 1px solid #eee;
/* border-right: 1px solid #eee; */
flex-shrink: 0;
}
.info-container {
/* margin-bottom:-16px;
padding-bottom:16px */
}
.info-item-title {
display: flex;
background: #284c89;
color: #fff;
font-weight: bold;
height: 36px;
height: 25px;
}
.info-title-cell {
flex: 1;
text-align: center;
line-height: 36px;
line-height: 25px;
border-right: 1px solid #eee;
font-size:14px;
font-size: 12px;
}
.info-title-num {
width: 50px;
@ -746,7 +822,7 @@ export default {
.info-cell {
flex: 1;
text-align: center;
padding: 5px;
/* padding: 5px; */
box-sizing: border-box;
border-right: 1px solid #eee;
overflow: hidden;
@ -760,11 +836,13 @@ export default {
display: flex;
flex-direction: column;
overflow-y: hidden;
/* 添加固定高度，确保滚动条不会挤压内容 */
/* height: calc(100vh - 240px); */
}
/* 图表X轴区域样式 */
.chart-axis {
height: 36px;
height: 25px;
position: relative;
}
@ -773,7 +851,7 @@ export default {
top: 0;
left: 0;
width: 100%;
height: 30px;
height: 25px;
display: flex;
background-color: #284c89;
}
@ -782,11 +860,11 @@ export default {
position: absolute;
top: 0;
left: 0;
font-size: 16px;
font-size: 14px;
color: #fff;
font-weight: 500;
white-space: nowrap;
line-height: 30px;
line-height: 25px;
}
.minor-labels {
@ -801,10 +879,10 @@ export default {
position: absolute;
top: 0;
left: 0;
font-size: 13px;
font-size: 12px;
color: #fff;
white-space: nowrap;
line-height: 30px;
line-height: 25px;
padding: 0 2px;
}
@ -833,12 +911,47 @@ export default {
width: 100%;
height: 100%;
}
/* 15分钟刻度样式 */
.quarter-labels {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.quarter-label {
position: absolute;
top: 0;
left: 0;
font-size: 11px;
color: #e0e0e0;
white-space: nowrap;
line-height: 30px;
padding: 0 2px;
}
.quarter-tick-lines {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.quarter-tick-line {
position: absolute;
bottom: 0;
width: 1px;
height: 2px;
background-color: #e0e0e0;
transform: translateX(-50%);
}
.minor-tick-line {
position: absolute;
bottom: 0;
width: 1px;
height: 4px;
height: 3px;
background-color: #fff;
transform: translateX(-50%);
}
@ -855,13 +968,13 @@ export default {
/* 当前时间线样式 */
.current-time-line {
position: absolute;
top: 0;
top: 0px;
bottom: 0;
width: 2px;
/* background-color: #ff4d4f; */
transform: translateX(-50%);
z-index: 10;
height: 100vh;
height: calc(100vh - 130px);
border-left: 1px dashed #ccc;
}
@ -871,6 +984,9 @@ export default {
position: relative;
overflow-y: auto;
overflow-x: auto;
/* 预留横向滚动条高度 */
/* padding-bottom: 16px;
margin-bottom: -16px; */
}
.grid-lines {
@ -893,8 +1009,9 @@ export default {
.tasks-container {
position: relative;
width: 100%;
height: 100%;
/* overflow:hidden; */
min-height: 100%;
/* height:500px; */
overflow-x: hidden;
}
@ -990,6 +1107,7 @@ export default {
background-color: #fff; /* 增加背景色避免与内容重叠时看不清 */
padding: 10px; /* 增加内边距 */
z-index: 10;
/* width:100%; */
}
:deep(.el-button--primary) {

Write Preview
Loading…
Cancel
Save