<template>
|
<div class="app-container">
|
<el-card style="flex: 1; margin-left: 10px; " :loading="loading">
|
<div slot="header" class="clearfix" style="display: flex; align-items: center;">
|
|
<!-- 左侧按钮组 -->
|
<div >
|
<el-button type="success" size="mini" @click="handleInbound()">入库</el-button>
|
<el-button type="success" size="mini" >吊装位入库</el-button>
|
|
</div>
|
|
<!-- 右侧选择框 -->
|
<el-form-item style="margin-top: 15px; width: 150px;">
|
<el-select v-model="formData2.dzw" placeholder="请选择吊装位">
|
<el-option label="吊装位1" value="吊装位1"></el-option>
|
<el-option label="吊装位2" value="吊装位2"></el-option>
|
<!-- 根据实际情况添加更多选项 -->
|
</el-select>
|
</el-form-item>
|
|
</div>
|
|
<el-table
|
:data="tableData"
|
|
style="width: 98%; height: 200px"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
|
ref="table"
|
|
empty-text="No Data"
|
>
|
|
<el-table-column prop="location" label="库位号"></el-table-column>
|
<el-table-column prop="type" label="类型"></el-table-column>
|
<el-table-column prop="length" label="长度(mm)"></el-table-column>
|
<el-table-column prop="height" label="高度(mm)"></el-table-column>
|
<el-table-column prop="thickness" label="厚度(mm)"></el-table-column>
|
<el-table-column prop="quantity" label="数量"></el-table-column>
|
<el-table-column prop="entry_time" label="入库时间"></el-table-column>
|
<el-table-column prop="batchnumber" label="批次号"></el-table-column>
|
|
<el-table-column
|
align="center"
|
label="料架状态"
|
min-width="80"
|
prop="shelf_status"
|
>
|
<template #default="scope">
|
<el-tag :type="getTagType(scope.row.shelf_status)" @click="toggleStatus(scope.row)">
|
{{ scope.row.shelf_status === 1 ? '启用' : '未启用' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<!-- 操作列 -->
|
<el-table-column label="操作" width="350">
|
<template #default="{ row }">
|
<el-button type="primary" size="mini" @click="edithandleRowClick(row)">修改</el-button>
|
<el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
|
<el-button type="warning" size="mini" @click="handleCheckout(row)">出库</el-button>
|
<el-button type="success" size="mini" @click="addglass()">添加原片</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<el-table
|
:data="tasktableData"
|
style="width: 98%; height: 150px"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{ background: '#F2F3F5', color: '#1D2129' }"
|
ref="table"
|
empty-text="No Data"
|
>
|
|
|
<template #header>
|
<div style="display: flex; align-items: center;">
|
<span style="font-size: 16px; font-weight: bold; margin-right: 20px;">任务列表</span>
|
|
</div>
|
</template>
|
<el-table-column prop="Glassid" label="Glassid"></el-table-column>
|
<el-table-column prop="taskDescription" label="任务描述" width="250"></el-table-column>
|
<el-table-column prop="glassThickness" label="玻璃厚度"></el-table-column>
|
<el-table-column prop="glassFilm" label="玻璃膜系"></el-table-column>
|
<el-table-column prop="creationTime" label="创建时间"></el-table-column>
|
|
<el-table-column
|
align="center"
|
label="任务状态"
|
min-width="80"
|
prop="taskStatus"
|
>
|
<template #default="scope">
|
<el-tag :type="getTagType2(scope.row.taskStatus)">
|
{{ scope.row.taskStatus == 'completed' ? '完成' : '进行中' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
|
<!-- 操作列 -->
|
<el-table-column label="操作" width="350">
|
<template #default="{ row }">
|
<el-button type="primary" size="mini" @click="handleRestart(row)">重新开始</el-button>
|
<el-button type="danger" size="mini" @click="handleDeletetask(row)">删除任务</el-button>
|
<el-button type="success" size="mini" @click="handleComplete(row)">任务完成</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-card>
|
|
<div ref="chart" id="chart" style="width: 100%; height: 250px;"></div>
|
|
|
<!-- 入库对话框 -->
|
<el-dialog
|
title="入库"
|
v-model="dialogVisible"
|
width="30%"
|
:before-close="handleCloseDialog"
|
>
|
<el-form :model="formData" ref="form" label-width="80px">
|
<el-form-item label="进库料架">
|
<el-select v-model="formData.shelf" placeholder="请选择进库料架">
|
<el-option label="A1" value="A1"></el-option>
|
<el-option label="B2" value="B2"></el-option>
|
<!-- 根据实际情况添加更多选项 -->
|
</el-select>
|
</el-form-item>
|
<el-form-item label="颜色膜系">
|
<el-select v-model="formData.color" placeholder="请选择颜色膜系">
|
<el-option label="Red" value="Red"></el-option>
|
<el-option label="Blue" value="Blue"></el-option>
|
<!-- 根据实际情况添加更多选项 -->
|
</el-select>
|
</el-form-item>
|
<el-form-item label="宽度">
|
<el-input v-model.number="formData.width" placeholder="请输入宽度"></el-input>
|
</el-form-item>
|
<el-form-item label="高度">
|
<el-input v-model.number="formData.height" placeholder="请输入高度"></el-input>
|
</el-form-item>
|
<el-form-item label="厚度">
|
<el-input v-model.number="formData.thickness" placeholder="请输入厚度"></el-input>
|
</el-form-item>
|
<el-form-item label="数量">
|
<el-input v-model.number="formData.quantity" placeholder="请输入数量"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="handleConfirmInbound">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
|
<el-dialog title="添加原片" v-model="dialogVisible3" width="50%">
|
<el-form :model="formData3" ref="form" label-width="80px">
|
<el-form-item label="颜色膜系">
|
<el-input v-model="formData.selectedColor" readonly style="width: 250px; height: 35px; font-size: 20px"></el-input>
|
<el-dropdown @command="handleCommand">
|
<span class="el-dropdown-link">
|
选择<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item v-for="color in colors" :key="color['0_glass_id']" :command="color['0_glass_id']">
|
{{ color['0_glass_id'] }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</el-form-item>
|
|
<el-form-item label="长度">
|
<el-input v-model="formData.wid" required style="width: 250px; font-size: 20px" @focus="clearInput('wid')"></el-input>
|
</el-form-item>
|
|
<el-form-item label="高度">
|
<el-input v-model="formData.heig" required style="width: 250px; font-size: 20px" @focus="clearInput('heig')"></el-input>
|
</el-form-item>
|
|
<el-form-item label="厚度">
|
<el-input v-model="formData.thinkness" required style="width: 250px; font-size: 20px" @focus="clearInput('thinkness')"></el-input>
|
</el-form-item>
|
|
<el-form-item label="数量">
|
<el-input-number v-model="formData.num" required :min="0" :max="9000" style="width: 250px; font-size: 20px" @focus="clearInput('num')"></el-input-number>
|
</el-form-item>
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible3 = false">关闭</el-button>
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
</span>
|
</el-dialog>
|
|
<el-dialog title="编辑" v-model="editdialogVisible" width="30%" @close="edithandleDialogClose">
|
<el-form :model="editForm" ref="editFormRef" label-width="80px">
|
<el-form-item label="数量">
|
<el-input v-model="editForm.quantity"></el-input>
|
</el-form-item>
|
<el-form-item label="批次号">
|
<el-input v-model="editForm.batchnumber"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<div class="dialog-footer">
|
<el-button @click="editdialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="editsaveEdit">保存</el-button>
|
</div>
|
</el-dialog>
|
|
|
<!-- <div ref="chart" id="chart" style="width: 100%; height: 400px;"></div> -->
|
</div>
|
</template>
|
|
|
|
|
<script setup>
|
import { ref, onMounted, onBeforeUnmount } from 'vue'; // 导入 Vue 3 的模块
|
import * as echarts from 'echarts';
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
const loading = ref(false);
|
const tableData = ref([
|
{
|
location: '1',
|
type: 'Type A',
|
length: '100',
|
height: '50',
|
thickness: '10',
|
quantity: '5',
|
entry_time: '2024-06-19 10:00:00',
|
batchnumber:"444",
|
shelf_status: 1
|
},
|
{
|
location: '2',
|
type: 'Type B',
|
length: '120',
|
height: '60',
|
thickness: '12',
|
quantity: '10',
|
entry_time: '2024-06-19 10:00:00',
|
batchnumber:"444",
|
shelf_status: 0
|
},
|
{
|
location: '3',
|
type: 'Type B',
|
length: '120',
|
height: '60',
|
thickness: '12',
|
quantity: '10',
|
entry_time: '2024-06-19 10:00:00',
|
batchnumber:"444",
|
shelf_status: 1
|
},
|
{
|
location: '4',
|
type: 'Type B',
|
length: '120',
|
height: '60',
|
thickness: '12',
|
quantity: '10',
|
entry_time: '2024-06-19 10:00:00',
|
batchnumber:"444",
|
shelf_status: 1
|
},
|
{
|
location: '5',
|
type: 'Type B',
|
length: '120',
|
height: '60',
|
thickness: '12',
|
quantity: '10',
|
entry_time: '2024-06-19 10:00:00',
|
batchnumber:"444",
|
shelf_status: 1
|
}
|
// Add more data as needed
|
]);
|
|
const getTagType2 =(status) => {
|
switch (status) {
|
case 'completed':
|
return 'success';
|
case 'in-progress':
|
return 'info';
|
case 'warning':
|
return 'warning';
|
case 'danger':
|
return 'danger';
|
default:
|
return '';
|
}
|
}
|
|
const getTagType =(status) => {
|
return status === 1 ? 'success' : 'danger';
|
// 根据状态值决定标签类型，这里假设状态为1时为成功（绿色），否则为失败（红色）
|
}
|
|
const toggleStatus = (row) => {
|
// 切换料架状态的逻辑
|
row.shelf_status = 1 - row.shelf_status; // Toggle between 0 and 1
|
// 此处可以添加保存状态的逻辑，比如调用 API 更新数据
|
};
|
|
const tasktableData=ref([
|
|
{
|
Glassid: 'G001',
|
taskDescription: '从吊装位【99】到仓位【56】',
|
taskStatus: 'in-progress',
|
glassThickness: '5mm',
|
glassFilm: '膜系A',
|
creationTime: '2024-06-19 10:00:00'
|
},
|
{
|
Glassid: 'G002',
|
taskDescription: '从吊装位【99】到仓位【56】',
|
taskStatus: 'completed',
|
glassThickness: '10mm',
|
glassFilm: '膜系B',
|
creationTime: '2024-06-19 11:00:00'
|
}
|
]);
|
|
const dialogVisible = ref(false);
|
const formData = ref({
|
shelf: '',
|
color: '',
|
width: '',
|
height: '',
|
thickness: '',
|
quantity: ''
|
});
|
|
const formData2 = ref({
|
dzw: '',
|
|
});
|
|
|
const handleDelete = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm('确定要执行删除操作吗？', '确认删除', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
// 点击确认按钮的回调，执行出库操作
|
console.log('执行删除操作', row);
|
}).catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log('取消删除操作');
|
});
|
};
|
|
|
const handleCheckout = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm('确定要执行出库操作吗？', '确认出库', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
// 点击确认按钮的回调，执行出库操作
|
console.log('执行出库操作', row);
|
}).catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log('取消出库操作');
|
});
|
};
|
|
|
const handleInbound = () => {
|
// 打开入库对话框
|
dialogVisible.value = true;
|
};
|
|
const handleCloseDialog = () => {
|
// 关闭对话框时重置表单数据
|
formData.value = {
|
shelf: '',
|
color: '',
|
width: '',
|
height: '',
|
thickness: '',
|
quantity: ''
|
};
|
dialogVisible.value = false;
|
};
|
|
const handleConfirmInbound = () => {
|
// 处理确认入库逻辑，可以在这里提交表单或者执行其他操作
|
console.log('Confirm Inbound:', formData.value);
|
// 关闭对话框
|
dialogVisible.value = false;
|
};
|
|
|
|
|
|
const dialogVisible3 = ref(false);
|
const colors = ref([
|
{ '0_glass_id': 'Red' },
|
{ '0_glass_id': 'Green' },
|
{ '0_glass_id': 'Blue' }
|
// Add more colors as needed
|
]);
|
|
const formData3 = ref({
|
selectedColor: '',
|
wid: '',
|
heig: '',
|
thinkness: '',
|
num: ''
|
});
|
|
|
const addglass = () => {
|
// 打开入库对话框
|
dialogVisible3.value = true;
|
};
|
const handleCommand = (command) => {
|
formData.value.selectedColor = command;
|
};
|
|
const clearInput = (field) => {
|
formData.value[field] = '';
|
};
|
|
const submitForm = () => {
|
console.log('提交数据:', formData.value);
|
dialogVisible3.value = false;
|
// Add your submit logic here
|
};
|
|
|
|
|
const editdialogVisible = ref(false);
|
const editForm = ref({
|
quantity: '',
|
batchnumber: ''
|
});
|
const editFormRef = ref(null);
|
let currentRow = ref(null);
|
|
// 处理行点击事件
|
const edithandleRowClick = (row) => {
|
currentRow.value = row;
|
editForm.value.quantity = row.quantity.toString();
|
editForm.value.batchnumber = row.batchnumber;
|
editdialogVisible.value = true;
|
console.log(editForm.value)
|
};
|
|
// 添加保存编辑内容
|
const editsaveEdit = () => {
|
if (!currentRow.value) return;
|
|
// 更新当前行数据
|
currentRow.value.quantity = parseInt(editForm.value.quantity);
|
currentRow.value.batchnumber = editForm.value.batchnumber;
|
|
// 关闭对话框
|
editdialogVisible.value = false;
|
};
|
|
// 对话框关闭时重置编辑表单和当前行数据
|
const edithandleDialogClose = () => {
|
editForm.value.quantity = '';
|
editForm.value.batchnumber = '';
|
currentRow.value = null;
|
};
|
|
|
|
|
|
|
|
|
const handleRestart = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm('确定要执行重新开始操作吗？', '确认重新开始', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
// 点击确认按钮的回调
|
console.log('执行重新开始操作', row);
|
}).catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log('取消重新开始操作');
|
});
|
};
|
|
|
const handleDeletetask = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm('确定要执行删除任务操作吗？', '确认删除任务', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
// 点击确认按钮的回调
|
console.log('执行删除任务操作', row);
|
}).catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log('取消删除任务操作');
|
});
|
};
|
|
|
|
const handleComplete = (row) => {
|
// 使用 Element UI 的 MessageBox.confirm 方法进行二次确认
|
ElMessageBox.confirm('确定要执行任务完成操作吗？', '确认任务完成', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
// 点击确认按钮的回调
|
console.log('执行任务完成操作', row);
|
}).catch(() => {
|
// 点击取消按钮的回调，不执行任何操作
|
console.log('取消任务完成操作');
|
});
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let chartInstance = null;
|
|
onMounted(() => {
|
// Initialize the chart
|
chartInstance = echarts.init(document.getElementById('chart'));
|
|
// Simulated data for demonstration
|
const chartData = {
|
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
|
datasets: [
|
{ name: '使用情况统计', data: [{ remaining: 4, total: 5 }, { remaining: 9, total: 10 }, { remaining: 0, total: 30 }, { remaining: 0, total: 10 },{ remaining: 4, total: 5 }] }
|
]
|
};
|
|
const options = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
data: ['使用情况统计']
|
},
|
xAxis: {
|
type: 'category',
|
data: chartData.labels
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: chartData.datasets.map(item => ({
|
name: item.name,
|
type: 'bar',
|
stack: '总量',
|
label: {
|
show: true,
|
position: 'inside',
|
formatter: '{c}%'
|
},
|
data: item.data.map(dataItem => ({
|
value: (dataItem.remaining / dataItem.total * 100).toFixed(2), // 计算剩余量占比，保留两位小数
|
remaining: dataItem.remaining,
|
total: dataItem.total,
|
itemStyle: {
|
color: getColorByRemaining(dataItem.remaining, dataItem.total)
|
}
|
}))
|
}))
|
};
|
|
function getColorByRemaining(remaining, total) {
|
// 根据剩余量与总量的比例，设置不同的颜色逻辑
|
const percentage = remaining / total;
|
if (percentage >= 0.8) {
|
return '#FF6666'; // Red
|
} else if (percentage >= 0.5) {
|
return '#FFCC66'; // Yellow
|
} else {
|
return '#66CC66'; // Green
|
}
|
}
|
|
// Set options and render chart
|
if (chartInstance) {
|
chartInstance.setOption(options);
|
}
|
});
|
|
onBeforeUnmount(() => {
|
if (chartInstance) {
|
chartInstance.dispose();
|
chartInstance = null;
|
}
|
});
|
|
const handleSelectionChange = (selection) => {
|
console.log('Selection changed:', selection);
|
};
|
|
</script>
|
|
<style scoped>
|
html, body {
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden; /* 禁止出现滚动条 */
|
}
|
|
.app-container {
|
|
flex-direction: column;
|
height: 100vh; /* 使用视口高度 */
|
}
|
|
|
|
|
|
.custom-dialog {
|
max-height: 90vh; /* 最大高度为视口高度的90% */
|
overflow-y: auto; /* 对话框内部出现垂直滚动条 */
|
}
|
</style>
|
