~zhoushihao/YiWuProject.git

New file
			@@ -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>