YiWuProject.git

			@@ -5,6 +5,7 @@

			<!-- 左侧按钮组 -->
			<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" >吊装位入库</el-button>

			@@ -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"
			@@ -64,6 +65,7 @@
			</template>
			</el-table-column>
			</el-table>


			<el-table
			:data="tasktableData"
			@@ -109,11 +111,21 @@
			</template>
			</el-table-column>
			</el-table>

			</el-dialog>
			</el-card>

			<div ref="chart" id="chart" style="width: 100%; height: 250px;"></div>

			<!-- <div ref="chart" id="chart" style="width: 100%; height: 250px;"></div> -->



			<div class="img-ypcc" >


			<div class="img-car1" :style="'z-index:999;left:297px;top:158px;position:absolute;'">
			<div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
			</div>

			</div>

			<!-- 入库对话框 -->
			<el-dialog
			@@ -214,7 +226,6 @@
			</el-dialog>


			<!-- <div ref="chart" id="chart" style="width: 100%; height: 400px;"></div> -->
			</div>
			</template>

			@@ -286,6 +297,8 @@
			}
			// Add more data as needed
			]);

			const Hidden = ref(false)

			const getTagType2 =(status) => {
			switch (status) {
			@@ -385,6 +398,12 @@
			// 打开入库对话框
			dialogVisible.value = true;
			};

			const storage = () => {
			// 打开入库对话框
			Hidden.value = true;
			};


			const handleCloseDialog = () => {
			// 关闭对话框时重置表单数据
			@@ -561,85 +580,8 @@



			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>

			@@ -659,7 +601,31 @@



			.img-ypcc{
			margin-left: 80px;
			background-image:url('../../assets/ypcc.png');
			background-repeat: no-repeat;
			background-attachment: local;
			min-height: 800px;
			width: 1600px;
			max-width: 100%;
			background-size: 1400px 800px;
			overflow: hidden;
			position:relative
			}

			.img-car1{
			background-image:url('../../assets/ypccche.png');
			position: absolute;
			background-repeat: no-repeat;
			background-attachment: local;
			min-height: 200px;
			width: 200px;
			max-width: 100%;
			background-size: 200px 70px;
			overflow: hidden;
			position:relative
			}

			.custom-dialog {
			max-height: 90vh; /* 最大高度为视口高度的90% */