From d1bf846d1ef407da9200fb319d8f8f4ed3984d53 Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期五, 02 八月 2024 10:32:02 +0800
Subject: [PATCH] 增加上片状态显示和推送
---
UI-Project/src/views/GlassStorage/MaterialRackManagement.vue | 539 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 377 insertions(+), 162 deletions(-)
diff --git a/UI-Project/src/views/GlassStorage/MaterialRackManagement.vue b/UI-Project/src/views/GlassStorage/MaterialRackManagement.vue
index 2b7b9cc..0f132b5 100644
--- a/UI-Project/src/views/GlassStorage/MaterialRackManagement.vue
+++ b/UI-Project/src/views/GlassStorage/MaterialRackManagement.vue
@@ -1,13 +1,14 @@
<template>
- <div >
+ <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="storage()">鍘熺墖浠撳偍璇︽儏</el-button>
<el-button type="success" size="mini" @click="handleInbound()">鍏ュ簱</el-button>
- <el-button type="success" size="mini" @click="handleInbound()">鍚婅浣嶅叆搴�</el-button>
- <el-button type="success" size="mini" @click="handleInbound()">娣诲姞鍘熺墖</el-button>
+ <el-button type="success" size="mini" >鍚婅浣嶅叆搴�</el-button>
+
</div>
<!-- 鍙充晶閫夋嫨妗� -->
@@ -20,9 +21,9 @@
</el-form-item>
</div>
-
+<el-dialog v-model="Hidden" top="10vh" width="80%" >
<el-table
- :data="tableData"
+ :data="tableData" v-model="dialogVisible3"
style="width: 98%; height: 200px"
@selection-change="handleSelectionChange"
@@ -47,25 +48,39 @@
min-width="80"
prop="shelf_status"
>
- <template #default="scope">
- <el-tag :type="getTagType(scope.row.shelf_status)">
- {{ scope.row.shelf_status === 1 ? '鍚敤' : '鏈惎鐢�' }}
- </el-tag>
- </template>
+<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="300">
+ <el-table-column label="鎿嶄綔" width="250">
<template #default="{ row }">
- <el-button type="primary" size="mini" @click="handleEdit(row)">淇敼</el-button>
+ <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
+
+ </el-table>
+ <el-pagination
+ v-if="totalItems > 0"
+ background
+ layout="prev, pager, next"
+ :total="totalItems"
+ :page-size="pageSize"
+ @current-change="handleCurrentChange"
+ ></el-pagination>
+
+
+ </el-dialog>
+
+
+ <el-table
:data="tasktableData"
style="width: 98%; height: 150px"
@selection-change="handleSelectionChange"
@@ -73,9 +88,16 @@
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="taskStatus" label="浠诲姟鐘舵��"></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>
@@ -97,16 +119,25 @@
<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="handleDelete(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>
-
+
+
+
+
+ <div class="img-ypcc" >
+
+
+ <div class="img-car1" :style="'z-index:999;left:397px;top:205px;position:absolute;'">
+ <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
+ </div>
+
+ </div>
<!-- 鍏ュ簱瀵硅瘽妗� -->
<el-dialog
@@ -149,7 +180,73 @@
<el-button type="primary" @click="handleConfirmInbound">纭� 瀹�</el-button>
</div>
</el-dialog>
- <div ref="chart" id="chart" style="width: 100%; height: 400px;"></div>
+
+
+ <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.width" required style="width: 250px; font-size: 20px" @focus="clearInput('wid')"></el-input>
+ </el-form-item>
+
+ <el-form-item label="楂樺害">
+ <el-input v-model="formData.height" required style="width: 250px; font-size: 20px" @focus="clearInput('heig')"></el-input>
+ </el-form-item>
+
+ <el-form-item label="鍘氬害">
+ <el-input v-model="formData.thickness" 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.quantity" 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-item label="闀垮害">
+ <el-input v-model="editForm.length"></el-input>
+ </el-form-item>
+ <el-form-item label="楂樺害">
+ <el-input v-model="editForm.height"></el-input>
+ </el-form-item>
+ <el-form-item label="鍘氬害">
+ <el-input v-model="editForm.thickness"></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>
</template>
@@ -159,67 +256,26 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'; // 瀵煎叆 Vue 3 鐨勬ā鍧�
import * as echarts from 'echarts';
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {tableData} from '@/stores/tableData.js';
+
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',
- batchnumber:"444",
- shelf_status: 1
- },
- {
- location: '2',
- type: 'Type B',
- length: '120',
- height: '60',
- thickness: '12',
- quantity: '10',
- entry_time: '2024-06-18',
- batchnumber:"444",
- shelf_status: 0
- },
- {
- location: '3',
- type: 'Type B',
- length: '120',
- height: '60',
- thickness: '12',
- quantity: '10',
- entry_time: '2024-06-18',
- batchnumber:"444",
- shelf_status: 1
- },
- {
- location: '4',
- type: 'Type B',
- length: '120',
- height: '60',
- thickness: '12',
- quantity: '10',
- entry_time: '2024-06-18',
- batchnumber:"444",
- shelf_status: 1
- },
- {
- location: '5',
- type: 'Type B',
- length: '120',
- height: '60',
- thickness: '12',
- quantity: '10',
- entry_time: '2024-06-18',
- batchnumber:"444",
- shelf_status: 1
- }
- // Add more data as needed
- ]);
+
+
+ const Hidden = ref(false)
+
+
+ const totalItems = ref(0);
+ totalItems.value = 10;
+ const pageSize = 10;
+ let currentPage = ref(1);
+ const handleCurrentChange = (val) => {
+
+ currentPage.value = val;
+
+ };
const getTagType2 =(status) => {
switch (status) {
@@ -240,6 +296,12 @@
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([
@@ -276,25 +338,49 @@
});
- const handleEdit = (row) => {
- // 澶勭悊淇敼鏁伴噺閫昏緫
- console.log('Edit Quantity:', row);
- };
-
+
const handleDelete = (row) => {
- // 澶勭悊鍒犻櫎閫昏緫
- console.log('Delete:', row);
- };
+ // 浣跨敤 Element UI 鐨� MessageBox.confirm 鏂规硶杩涜浜屾纭
+ ElMessageBox.confirm('纭畾瑕佹墽琛屽垹闄ゆ搷浣滃悧锛�', '纭鍒犻櫎', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(() => {
+ // 鐐瑰嚮纭鎸夐挳鐨勫洖璋冿紝鎵ц鍑哄簱鎿嶄綔
+ console.log('鎵ц鍒犻櫎鎿嶄綔', row);
+ }).catch(() => {
+ // 鐐瑰嚮鍙栨秷鎸夐挳鐨勫洖璋冿紝涓嶆墽琛屼换浣曟搷浣�
+ console.log('鍙栨秷鍒犻櫎鎿嶄綔');
+ });
+};
+
const handleCheckout = (row) => {
- // 澶勭悊鍑哄簱閫昏緫
- console.log('Checkout:', row);
- };
+ // 浣跨敤 Element UI 鐨� MessageBox.confirm 鏂规硶杩涜浜屾纭
+ ElMessageBox.confirm('纭畾瑕佹墽琛屽嚭搴撴搷浣滃悧锛�', '纭鍑哄簱', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(() => {
+ // 鐐瑰嚮纭鎸夐挳鐨勫洖璋冿紝鎵ц鍑哄簱鎿嶄綔
+ console.log('鎵ц鍑哄簱鎿嶄綔', row);
+ }).catch(() => {
+ // 鐐瑰嚮鍙栨秷鎸夐挳鐨勫洖璋冿紝涓嶆墽琛屼换浣曟搷浣�
+ console.log('鍙栨秷鍑哄簱鎿嶄綔');
+ });
+};
+
const handleInbound = () => {
// 鎵撳紑鍏ュ簱瀵硅瘽妗�
dialogVisible.value = true;
};
+
+ const storage = () => {
+ // 鎵撳紑鍏ュ簱瀵硅瘽妗�
+ Hidden.value = true;
+ };
+
const handleCloseDialog = () => {
// 鍏抽棴瀵硅瘽妗嗘椂閲嶇疆琛ㄥ崟鏁版嵁
@@ -315,91 +401,220 @@
// 鍏抽棴瀵硅瘽妗�
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
+ };
- let chartInstance = null;
-onMounted(() => {
- // Initialize the chart
- chartInstance = echarts.init(document.getElementById('chart'));
+ const editdialogVisible = ref(false);
+ const editForm = ref({
+ quantity: '',
+ batchnumber: '',
+ length:'',
+ height:'',
+ thickness:''
+ });
+ const editFormRef = ref(null);
+ let currentRow = ref(null);
- // 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 edithandleRowClick = (row) => {
+ currentRow.value = row;
+ console.log(row)
+ editForm.value.quantity = row.quantity.toString();
+ editForm.value.batchnumber = row.batchnumber;
+ editForm.value.length = row.length;
+ editForm.value.height = row.height;
+ editForm.value.thickness = row.thickness;
+ editdialogVisible.value = true;
+ console.log(editForm.value)
+ };
- 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)
- }
- }))
- }))
- };
+ // 娣诲姞淇濆瓨缂栬緫鍐呭
+ const editsaveEdit = () => {
+ if (!currentRow.value) return;
- 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
- }
- }
+ // 鏇存柊褰撳墠琛屾暟鎹�
+ currentRow.value.quantity = parseInt(editForm.value.quantity);
+ currentRow.value.batchnumber = editForm.value.batchnumber;
- // Set options and render chart
- if (chartInstance) {
- chartInstance.setOption(options);
- }
-});
+ // 鍏抽棴瀵硅瘽妗�
+ editdialogVisible.value = false;
+ };
-onBeforeUnmount(() => {
- if (chartInstance) {
- chartInstance.dispose();
- chartInstance = null;
- }
-});
+ // 瀵硅瘽妗嗗叧闂椂閲嶇疆缂栬緫琛ㄥ崟鍜屽綋鍓嶈鏁版嵁
+ const edithandleDialogClose = () => {
+ editForm.value.quantity = '';
+ editForm.value.batchnumber = '';
+ editForm.value.width = '';
+ editForm.value.height = '';
+ editForm.value.thickness = '';
+
-const handleSelectionChange = (selection) => {
- console.log('Selection changed:', selection);
+ 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('鍙栨秷浠诲姟瀹屾垚鎿嶄綔');
+ });
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
</script>
-<style>
+<style scoped>
+
+#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
+#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
+#dialog-footer{
+ text-align: center;
+ margin-top: -15px;
+}
+
+
+
+.img-ypcc{
+ margin-left: 80px;
+ background-image:url('../../assets/ypcc.png');
+ background-repeat: no-repeat;
+ background-attachment: local;
+ min-height: 600px;
+ width: 1400px;
+ max-width: 100%;
+ background-size: 1400px 600px;
+ overflow: hidden;
+ position:relative;
+ margin-top:0px
+}
+
+.img-car1{
+ background-image:url('../../assets/ypccche.png');
+ position: absolute;
+ background-repeat: no-repeat;
+ background-attachment: local;
+ min-height: 400px;
+ width: 200px;
+ max-width: 100%;
+ background-size: 200px 170px;
+ overflow: hidden;
+ position:relative
+}
+
+.custom-dialog {
+ max-height: 90vh; /* 鏈�澶ч珮搴︿负瑙嗗彛楂樺害鐨�90% */
+ overflow-y: auto; /* 瀵硅瘽妗嗗唴閮ㄥ嚭鐜板瀭鐩存粴鍔ㄦ潯 */
+}
</style>
--
Gitblit v1.8.0