From 09a010c5dc11c68a866a6075a74bd1bbefb4a9a8 Mon Sep 17 00:00:00 2001
From: wu <731351411@qq.com>
Date: 星期一, 24 六月 2024 16:38:23 +0800
Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes
---
UI-Project/src/views/GlassStorage/MaterialRackManagement.vue | 412 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 412 insertions(+), 0 deletions(-)
diff --git a/UI-Project/src/views/GlassStorage/MaterialRackManagement.vue b/UI-Project/src/views/GlassStorage/MaterialRackManagement.vue
new file mode 100644
index 0000000..23b2204
--- /dev/null
+++ b/UI-Project/src/views/GlassStorage/MaterialRackManagement.vue
@@ -0,0 +1,412 @@
+<template>
+ <div >
+ <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" @click="handleInbound()">鍚婅浣嶅叆搴�</el-button>
+ <el-button type="success" size="mini" @click="handleInbound()">娣诲姞鍘熺墖</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)">
+ {{ scope.row.shelf_status === 1 ? '鍚敤' : '鏈惎鐢�' }}
+ </el-tag>
+ </template>
+</el-table-column>
+
+ <!-- 鎿嶄綔鍒� -->
+ <el-table-column label="鎿嶄綔" width="300">
+ <template #default="{ row }">
+ <el-button type="primary" size="mini" @click="handleEdit(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>
+
+ </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="handleDelete(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>
+ <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';
+
+
+ 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 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 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 handleEdit = (row) => {
+ // 澶勭悊淇敼鏁伴噺閫昏緫
+ console.log('Edit Quantity:', row);
+ };
+
+ const handleDelete = (row) => {
+ // 澶勭悊鍒犻櫎閫昏緫
+ console.log('Delete:', row);
+ };
+
+ const handleCheckout = (row) => {
+ // 澶勭悊鍑哄簱閫昏緫
+ console.log('Checkout:', row);
+ };
+
+ 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;
+ };
+
+
+
+ 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>
+
+</style>
--
Gitblit v1.8.0