diff --git a/.env.dev b/.env.dev
index 1e5dfdbb..567d9745 100644
--- a/.env.dev
+++ b/.env.dev
@@ -14,7 +14,7 @@ VUE_APP_TITLE = 上上电缆
 # 芋道管理系统/开发环境
 
 # VUE_APP_BASE_API = 'http://192.168.0.31:48080'
-VUE_APP_BASE_API = 'http://172.16.32.236:48080'
+VUE_APP_BASE_API = 'http://172.16.15.221:48080'
 # VUE_APP_BASE_API = 'http://line.kszny.picaiba.com'
 
 # 路由懒加载
diff --git a/dist.zip b/dist.zip
new file mode 100644
index 00000000..82c6d21e
Binary files /dev/null and b/dist.zip differ
diff --git a/src/api/ssdl/taskList.js b/src/api/ssdl/taskList.js
index b1092fca..4c44962e 100644
--- a/src/api/ssdl/taskList.js
+++ b/src/api/ssdl/taskList.js
@@ -58,3 +58,11 @@ export function createPCTask(data) {
     data: data
   })
 }
+
+export function cancelUpdateTask(query) {
+	return request({
+		url: '/wms/job-main-task/update/task',
+		method: 'post',
+		params: query ,
+	});
+}
diff --git a/src/api/visualization/visualization.js b/src/api/visualization/visualization.js
index 5e60a9f4..f63b1b5f 100644
--- a/src/api/visualization/visualization.js
+++ b/src/api/visualization/visualization.js
@@ -7,3 +7,35 @@ export function getLineEdgeLibraryList(data) {
 		params: data,
 	});
 }
+
+export function getAgvAlarmInfo(data) {
+  return request({
+		url: '/wms/large-screen/real-time/display',
+		method: 'post',
+		data: data,
+	});
+}
+
+export function getTaskTypeToday(data) {
+	return request({
+		url: '/wms/job-main-task/task/type/proportion/today',
+		method: 'get',
+		data,
+	});
+}
+
+export function getTaskStatusToday(data) {
+	return request({
+		url: '/wms/job-main-task/task/state/distribution/today',
+		method: 'get',
+		data,
+	});
+}
+
+export function getAgvExample(data) {
+	return request({
+		url: 'wms/large-screen/example',
+		method: 'post',
+		data,
+	});
+}
diff --git a/src/assets/icons/svg/greenLight.svg b/src/assets/icons/svg/greenLight.svg
new file mode 100644
index 00000000..6d80bdc6
--- /dev/null
+++ b/src/assets/icons/svg/greenLight.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779174119304" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5762" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 434.517333a159.402667 159.402667 0 0 1 159.402667 159.402667v159.402667h-318.805334V593.92A159.402667 159.402667 0 0 1 512 434.517333m0-34.133333a193.877333 193.877333 0 0 0-193.536 193.536v193.536h387.072V593.92A193.877333 193.877333 0 0 0 512 400.384zM772.437333 830.464H251.562667a18.773333 18.773333 0 0 0 0 37.205333h520.874666a18.773333 18.773333 0 0 0 0-37.205333zM170.666667 341.333333a17.066667 17.066667 0 0 0-14.677334 8.533334 17.408 17.408 0 0 0 6.144 23.552L273.066667 438.954667a16.042667 16.042667 0 0 0 8.533333 2.389333 17.408 17.408 0 0 0 15.018667-8.533333 17.066667 17.066667 0 0 0-5.12-23.210667l-112.64-65.194667A15.36 15.36 0 0 0 170.666667 341.333333zM318.805333 204.8a17.408 17.408 0 0 0-8.192 2.389333 17.066667 17.066667 0 0 0-6.485333 23.210667l65.194667 112.981333a17.066667 17.066667 0 0 0 14.677333 8.533334 18.773333 18.773333 0 0 0 8.533333-2.389334 17.066667 17.066667 0 0 0 6.144-23.210666l-64.853333-111.616A17.066667 17.066667 0 0 0 318.805333 204.8zM716.8 204.8a17.066667 17.066667 0 0 0-14.677333 8.533333L637.952 327.68a17.066667 17.066667 0 0 0 6.144 23.210667 20.138667 20.138667 0 0 0 8.533333 2.389333 17.066667 17.066667 0 0 0 15.018667-8.533333l64.853333-112.981334a17.066667 17.066667 0 0 0-6.144-23.210666A18.773333 18.773333 0 0 0 716.8 204.8zM518.485333 156.330667a17.066667 17.066667 0 0 0-17.066666 17.066666V303.786667a17.066667 17.066667 0 0 0 17.066666 17.066666 17.408 17.408 0 0 0 17.066667-17.066666V173.397333a17.408 17.408 0 0 0-17.066667-17.066666zM853.333333 341.333333a15.36 15.36 0 0 0-8.533333 2.389334L732.501333 409.6a17.066667 17.066667 0 0 0-6.485333 23.210667 17.408 17.408 0 0 0 15.018667 8.533333 16.042667 16.042667 0 0 0 8.533333-2.389333l112.64-64.853334a17.408 17.408 0 0 0 6.144-23.552A17.066667 17.066667 0 0 0 853.333333 341.333333z" fill="#1afa29" p-id="5763"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/svg/redLight.svg b/src/assets/icons/svg/redLight.svg
new file mode 100644
index 00000000..e6f0fe0c
--- /dev/null
+++ b/src/assets/icons/svg/redLight.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1779174119304" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5762" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 434.517333a159.402667 159.402667 0 0 1 159.402667 159.402667v159.402667h-318.805334V593.92A159.402667 159.402667 0 0 1 512 434.517333m0-34.133333a193.877333 193.877333 0 0 0-193.536 193.536v193.536h387.072V593.92A193.877333 193.877333 0 0 0 512 400.384zM772.437333 830.464H251.562667a18.773333 18.773333 0 0 0 0 37.205333h520.874666a18.773333 18.773333 0 0 0 0-37.205333zM170.666667 341.333333a17.066667 17.066667 0 0 0-14.677334 8.533334 17.408 17.408 0 0 0 6.144 23.552L273.066667 438.954667a16.042667 16.042667 0 0 0 8.533333 2.389333 17.408 17.408 0 0 0 15.018667-8.533333 17.066667 17.066667 0 0 0-5.12-23.210667l-112.64-65.194667A15.36 15.36 0 0 0 170.666667 341.333333zM318.805333 204.8a17.408 17.408 0 0 0-8.192 2.389333 17.066667 17.066667 0 0 0-6.485333 23.210667l65.194667 112.981333a17.066667 17.066667 0 0 0 14.677333 8.533334 18.773333 18.773333 0 0 0 8.533333-2.389334 17.066667 17.066667 0 0 0 6.144-23.210666l-64.853333-111.616A17.066667 17.066667 0 0 0 318.805333 204.8zM716.8 204.8a17.066667 17.066667 0 0 0-14.677333 8.533333L637.952 327.68a17.066667 17.066667 0 0 0 6.144 23.210667 20.138667 20.138667 0 0 0 8.533333 2.389333 17.066667 17.066667 0 0 0 15.018667-8.533333l64.853333-112.981334a17.066667 17.066667 0 0 0-6.144-23.210666A18.773333 18.773333 0 0 0 716.8 204.8zM518.485333 156.330667a17.066667 17.066667 0 0 0-17.066666 17.066666V303.786667a17.066667 17.066667 0 0 0 17.066666 17.066666 17.408 17.408 0 0 0 17.066667-17.066666V173.397333a17.408 17.408 0 0 0-17.066667-17.066666zM853.333333 341.333333a15.36 15.36 0 0 0-8.533333 2.389334L732.501333 409.6a17.066667 17.066667 0 0 0-6.485333 23.210667 17.408 17.408 0 0 0 15.018667 8.533333 16.042667 16.042667 0 0 0 8.533333-2.389333l112.64-64.853334a17.408 17.408 0 0 0 6.144-23.552A17.066667 17.066667 0 0 0 853.333333 341.333333z" fill="#d81e06" p-id="5763"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/threeDimensionalChartBg.png b/src/assets/img/threeDimensionalChartBg.png
index 1db16755..bd0f3ef8 100644
Binary files a/src/assets/img/threeDimensionalChartBg.png and b/src/assets/img/threeDimensionalChartBg.png differ
diff --git a/src/views/areavisual/overview/components/ringChart.vue b/src/views/areavisual/overview/components/ringChart.vue
index fefeddae..10eb8718 100644
--- a/src/views/areavisual/overview/components/ringChart.vue
+++ b/src/views/areavisual/overview/components/ringChart.vue
@@ -1,125 +1,138 @@
-<template>
-	<div
-		:class="className"
-		:style="{ height: height, width: width, marginLeft: '10px' }" />
-</template>
-
-<script>
-import * as echarts from 'echarts';
-require('echarts/theme/macarons'); // echarts theme
-import resize from '@/utils/chartMixins/resize';
-
-const animationDuration = 1000;
-export default {
-	mixins: [resize],
-	props: {
-		className: {
-			type: String,
-			default: 'chart',
-		},
-		title: {
-			type: String,
-			default: '',
-		},
-		width: {
-			type: String,
-			default: '100%',
-		},
-		height: {
-			type: String,
-			default: '300px',
-		},
-		ringData: {
-			type: Object,
-			default: () => {},
-		},
-	},
-	data() {
-		return {
-			chart: null,
-			targetId: '',
-		};
-	},
-	beforeDestroy() {
-		if (!this.chart) {
-			return;
-		}
-		this.chart.dispose();
-		this.chart = null;
-	},
-	methods: {
-		initChart() {
-			this.chart = echarts.init(this.$el, 'macarons');
-			const _this = this;
-			this.chart.setOption({
-				title: {
-					text: this.title
-						? '{space|}{tip|}{space|}{value|' + this.title + '}'
-						: '',
-					textStyle: {
-						rich: {
-							tip: {
-								width: 6,
-								height: 6,
-								borderRadius: 50,
-								backgroundColor: '#288AFF',
-							},
-							space: {
-								width: 8,
-							},
-							value: {
-								fontSize: 14,
-								color: 'black',
-							},
-						},
-					},
-				},
-				color: ['#33B36B', '#3A8DFF', '#F59A23'],
-				tooltip: {
-					trigger: 'axis',
-					axisPointer: {
-						type: 'cross',
-						crossStyle: {
-							color: '#999',
-						},
-					},
-				},
-				legend: {
-					data: ['当前满位', '当前空位', '在途'],
-				},
-				grid: {
-					containLabel: true,
-				},
-				series: [
-					{
-						// name: '投入',
-						type: 'pie',
-						radius: '50%',
-						data: [
-							{
-								name: '当前满位',
-								value: this.ringData.occupiedQuantity
-							},
-							{
-								name: '当前空位',
-								value: this.ringData.idleQuantity
-							},
-							{
-								name: '在途',
-								value: this.ringData.transitQuantity
-							},
-						],
-						emphasis: {
-							itemStyle: {
-								shadowBlur: 10,
-								shadowOffsetX: 0,
-								shadowColor: 'rgba(0, 0, 0, 0.5)'
-							}
-						}
-					}
-				],
-			});
-		},
-	},
-};
-</script>
+<template>
+	<div
+		:class="className"
+		:style="{ height: height, width: width, marginLeft: '10px' }" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '@/utils/chartMixins/resize';
+
+const animationDuration = 1000;
+export default {
+	mixins: [resize],
+	props: {
+		className: {
+			type: String,
+			default: 'chart',
+		},
+		title: {
+			type: String,
+			default: '',
+		},
+		width: {
+			type: String,
+			default: '100%',
+		},
+		height: {
+			type: String,
+			default: '300px',
+		},
+		ringData: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	data() {
+		return {
+			chart: null,
+			targetId: '',
+		};
+  },
+  watch: {
+    ringData: {
+      handler() {
+        this.$nextTick(() => {
+          this.initChart();
+        });
+      },
+      deep: true,
+      immediate: false,
+    },
+  },
+	beforeDestroy() {
+		if (!this.chart) {
+			return;
+		}
+		this.chart.dispose();
+		this.chart = null;
+	},
+	methods: {
+    initChart() {
+      console.log(this.ringData,'ringData');
+
+			this.chart = echarts.init(this.$el, 'macarons');
+			const _this = this;
+			this.chart.setOption({
+				title: {
+					text: this.title
+						? '{space|}{tip|}{space|}{value|' + this.title + '}'
+						: '',
+					textStyle: {
+						rich: {
+							tip: {
+								width: 6,
+								height: 6,
+								borderRadius: 50,
+								backgroundColor: '#288AFF',
+							},
+							space: {
+								width: 8,
+							},
+							value: {
+								fontSize: 14,
+								color: 'black',
+							},
+						},
+					},
+				},
+				color: ['#33B36B', '#3A8DFF', '#F59A23'],
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'cross',
+						crossStyle: {
+							color: '#999',
+						},
+					},
+				},
+				legend: {
+					data: ['当前满位', '当前空位', '在途'],
+				},
+				grid: {
+					containLabel: true,
+				},
+				series: [
+					{
+						// name: '投入',
+						type: 'pie',
+						radius: '50%',
+						data: [
+							{
+								name: '当前满位',
+								value: this.ringData.occupiedQuantity
+							},
+							{
+								name: '当前空位',
+								value: this.ringData.idleQuantity
+							},
+							{
+								name: '在途',
+								value: this.ringData.transitQuantity
+							},
+						],
+						emphasis: {
+							itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								shadowColor: 'rgba(0, 0, 0, 0.5)'
+							}
+						}
+					}
+				],
+			});
+		},
+	},
+};
+</script>
diff --git a/src/views/areavisual/overview/index.vue b/src/views/areavisual/overview/index.vue
index cc35c458..a85814af 100644
--- a/src/views/areavisual/overview/index.vue
+++ b/src/views/areavisual/overview/index.vue
@@ -1,687 +1,715 @@
 <template>
-	<div class="app-container">
-		<el-row class="overview-container">
-			<el-col :span="4" class="overview-container-left">
-				<el-row style="font-size: 18px; font-weight: bold; line-height: 36px">
-					库区选择
-				</el-row>
-				<el-input
-					v-model="areaSearchForm.regionName"
-					placeholder="库区名称"
-					@blur="getArea"
-					clearable />
-				<el-tree
-					:data="areaList"
-					:node-key="'id'"
-					:props="{ label: 'regionName' }"
-					@node-click="nodeClick" />
-			</el-col>
-			<el-col
-				:span="16"
-				v-if="changeType === 0"
-				class="overview-container-main">
-				<el-row>
-					<el-col
-						:span="8"
-						class="allarea-box"
-						v-for="item in allAreaList"
-						:key="item.id">
-						<div class="areainfo-box">
-							<div class="areainfo-box-header">
-								{{ item.regionName }}
-							</div>
-							<div class="areainfo-box-line">
-								<div
-									class="areainfo-box-line-item"
-									:style="{
-										width: `${(
-											(item.occupiedQuantity /
-												(item.totalInventory + item.transitQuantity)) *
-											100
-										).toFixed(2)}%`,
-										backgroundColor: '#33B36B',
-									}"></div>
-								<div
-									class="areainfo-box-line-item"
-									:style="{
-										width: `${(
-											(item.idleQuantity /
-												(item.totalInventory + item.transitQuantity)) *
-											100
-										).toFixed(2)}%`,
-										backgroundColor: '#3A8DFF',
-									}"></div>
-								<div
-									class="areainfo-box-line-item"
-									:style="{
-										width: `${(
-											(item.transitQuantity /
-												(item.totalInventory + item.transitQuantity)) *
-											100
-										).toFixed(2)}%`,
-										backgroundColor: '#F59A23',
-									}"></div>
-							</div>
-							<el-row class="areainfo-box-info">
-								<el-col class="areainfo-box-info-item" :span="6">
-									<p class="areainfo-box-info-item-count">
-										{{ item.totalInventory }}
-									</p>
-									<p class="areainfo-box-info-item-title">库位总数</p>
-								</el-col>
-								<el-col class="areainfo-box-info-item" :span="6">
-									<p
-										class="areainfo-box-info-item-count"
-										style="color: #33b36b">
-										{{ item.occupiedQuantity }}
-									</p>
-									<p class="areainfo-box-info-item-title">占</p>
-								</el-col>
-								<el-col class="areainfo-box-info-item" :span="6">
-									<p
-										class="areainfo-box-info-item-count"
-										style="color: #3a8dff">
-										{{ item.idleQuantity }}
-									</p>
-									<p class="areainfo-box-info-item-title">空</p>
-								</el-col>
-								<el-col class="areainfo-box-info-item" :span="6">
-									<p
-										class="areainfo-box-info-item-count"
-										style="color: #f59a23">
-										{{ item.transitQuantity }}
-									</p>
-									<p class="areainfo-box-info-item-title">在途</p>
-								</el-col>
-							</el-row>
-						</div>
-					</el-col>
-				</el-row>
-			</el-col>
-			<el-col
-				:span="4"
-				v-if="changeType === 0"
-				class="overview-container-right">
-				<el-tabs v-model="activeName" @tab-click="handleClickRight">
-					<el-tab-pane label="概览" name="first">
-						<el-row class="overview-container-right-alloverview">
-							<el-col
-								class="overview-container-right-alloverview-item"
-								:span="8">
-								<p class="overview-container-right-alloverview-item-count">
-									{{ allAreaInfo.totalInventory }}
-								</p>
-								<p class="overview-container-right-alloverview-item-title">
-									库位总数
-								</p>
-							</el-col>
-							<el-col
-								class="overview-container-right-alloverview-item"
-								:span="8">
-								<p class="overview-container-right-alloverview-item-count">
-									{{ allAreaInfo.occupiedQuantity }}
-								</p>
-								<p class="overview-container-right-alloverview-item-title">
-									当前满位
-								</p>
-							</el-col>
-							<el-col
-								class="overview-container-right-alloverview-item"
-								:span="8">
-								<p class="overview-container-right-alloverview-item-count">
-									{{ allAreaInfo.idleQuantity }}
-								</p>
-								<p class="overview-container-right-alloverview-item-title">
-									当前空位
-								</p>
-							</el-col>
-							<el-col
-								class="overview-container-right-alloverview-item"
-								:span="8">
-								<p class="overview-container-right-alloverview-item-count">
-									{{ allAreaInfo.transitQuantity }}
-								</p>
-								<p class="overview-container-right-alloverview-item-title">
-									在途
-								</p>
-							</el-col>
-						</el-row>
-						<ringChart :ring-data="allAreaInfo" ref="ringChart" />
-					</el-tab-pane>
-					<el-tab-pane label="在途任务" name="second">在途任务</el-tab-pane>
-				</el-tabs>
-			</el-col>
-			<el-col
-				:span="20"
-				v-if="changeType === 1"
-				class="overview-container-main">
-				<div class="stat-card">
-					<div class="stat-icon">
-						<i class="el-icon-s-grid" style="color: #fff"></i>
-					</div>
-					<div class="stat-title">库区信息</div>
-					<div class="stat-content">
-						<div class="stat-value">{{ getAreaInfoInfo.regionName }}</div>
-						<div class="stat-label">{{ getAreaInfoInfo.regionCode }}</div>
-					</div>
-				</div>
-				<div class="area-body">
-					<div v-for="item in Object.keys(areaInfo)" :key="item">
-						<el-button size="mini" style="width:189px;" type="primary" @click="clearAll(item)">
-							一键清空
-						</el-button>
-						<div class="potTitle">{{ item }}</div>
-						<div class="potList">
-							<div v-for="sitem in areaInfo[item]" :key="sitem.id">
-								<div v-if="sitem.empty" class="area-div-empty" />
-								<div v-else class="area-div" :title="sitem.lineEdgeLibraryName">
-									<el-popover
-										placement="top-start"
-										:title="sitem.lineEdgeLibraryCode"
-										width="200"
-										trigger="hover">
-										<div class="point" />
-										<span style="font-weight: 600">名称:</span>
-										{{ sitem.lineEdgeLibraryName }}
-										<br />
-										<div class="point" />
-										<span style="font-weight: 600">状态:</span>
-										{{
-											sitem.usableState == 3
-												? '锁定'
-												: sitem.usableState == 2
-												? '不可用'
-												: sitem.lineEdgeLibraryState == 1
-												? '满位'
-												: '空闲'
-										}}
-										<br />
-										<span
-											v-if="sitem.usableState == 3 ||
-												(sitem.usableState == 1 &&
-												sitem.lineEdgeLibraryState == 1)
-											">
-											<span style="font-weight: 600">物料:</span>
-											{{ sitem.materialCode || '' }}
-											<br />
-											<span style="font-weight: 600">设备:</span>
-											{{ sitem.equipmentName || '' }}
-											<br />
-											<span style="font-weight: 600">套号:</span>
-											{{ sitem.suiteCode || '' }}
-											<br />
-										</span>
-										<el-button type="text" @click="clearLine(sitem)">
-											清空
-										</el-button>
-										<el-button type="text" @click="addLine(sitem)">
-											添加
-										</el-button>
-										<div
-											class="area-icon"
-											:style="{
-												backgroundColor:
-													sitem.usableState == 3
-														? '#E6A23C'
-														: sitem.usableState == 2
-														? 'gray'
-														: sitem.lineEdgeLibraryState == 1
-														? '#67C23A'
-														: '',
-											}"
-											slot="reference">
-											<i
-												:class="
-													sitem.usableState == 3
-														? 'el-icon-lock'
-														: 'el-icon-s-grid'
-												"
-												style="color: #fff"></i>
-										</div>
-									</el-popover>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</el-col>
-		</el-row>
-		<base-dialog
-			:dialogTitle="addOrEditTitle"
-			:dialogVisible="addOrUpdateVisible"
-			@cancel="handleCancel"
-			@confirm="handleConfirm"
-			:before-close="handleCancel"
-			destroy-on-close
-			width="50%">
-			<add-or-update
-				ref="addOrUpdate"
-				@refreshDataList="successSubmit"></add-or-update>
-		</base-dialog>
-	</div>
+  <div class="app-container">
+    <el-row class="overview-container">
+      <el-col :span="4" class="overview-container-left">
+        <el-row style="font-size: 18px; font-weight: bold; line-height: 36px">
+          库区选择
+        </el-row>
+        <el-input v-model="areaSearchForm.regionName" placeholder="库区名称" @blur="getArea" clearable />
+        <el-tree :data="areaList" :node-key="'id'" :props="{ label: 'regionName' }" @node-click="nodeClick">
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span style="margin-right: 6px;color: red;" v-if="data.regionState === 2">
+              <i class="el-icon-lock"></i>
+            </span>
+            <span>{{ node.label }}</span>
+
+          </span>
+
+        </el-tree>
+      </el-col>
+      <el-col :span="16" v-if="changeType === 0" class="overview-container-main">
+        <el-row>
+          <el-col :span="8" class="allarea-box" v-for="item in allAreaList" :key="item.id">
+            <div class="areainfo-box">
+              <div class="areainfo-box-header">
+                {{ item.regionName }}
+              </div>
+              <div class="areainfo-box-line">
+                <div class="areainfo-box-line-item" :style="{
+                  width: `${(
+                    (item.occupiedQuantity /
+                      (item.totalInventory + item.transitQuantity)) *
+                    100
+                  ).toFixed(2)}%`,
+                  backgroundColor: '#33B36B',
+                }"></div>
+                <div class="areainfo-box-line-item" :style="{
+                  width: `${(
+                    (item.idleQuantity /
+                      (item.totalInventory + item.transitQuantity)) *
+                    100
+                  ).toFixed(2)}%`,
+                  backgroundColor: '#3A8DFF',
+                }"></div>
+                <div class="areainfo-box-line-item" :style="{
+                  width: `${(
+                    (item.transitQuantity /
+                      (item.totalInventory + item.transitQuantity)) *
+                    100
+                  ).toFixed(2)}%`,
+                  backgroundColor: '#F59A23',
+                }"></div>
+              </div>
+              <el-row class="areainfo-box-info">
+                <el-col class="areainfo-box-info-item" :span="6">
+                  <p class="areainfo-box-info-item-count">
+                    {{ item.totalInventory }}
+                  </p>
+                  <p class="areainfo-box-info-item-title">库位总数</p>
+                </el-col>
+                <el-col class="areainfo-box-info-item" :span="6">
+                  <p class="areainfo-box-info-item-count" style="color: #33b36b">
+                    {{ item.occupiedQuantity }}
+                  </p>
+                  <p class="areainfo-box-info-item-title">占</p>
+                </el-col>
+                <el-col class="areainfo-box-info-item" :span="6">
+                  <p class="areainfo-box-info-item-count" style="color: #3a8dff">
+                    {{ item.idleQuantity }}
+                  </p>
+                  <p class="areainfo-box-info-item-title">空</p>
+                </el-col>
+                <el-col class="areainfo-box-info-item" :span="6">
+                  <p class="areainfo-box-info-item-count" style="color: #f59a23">
+                    {{ item.transitQuantity }}
+                  </p>
+                  <p class="areainfo-box-info-item-title">在途</p>
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="4" v-if="changeType === 0" class="overview-container-right">
+        <el-tabs v-model="activeName" @tab-click="handleClickRight">
+          <el-tab-pane label="概览" name="first">
+            <el-row class="overview-container-right-alloverview">
+              <el-col class="overview-container-right-alloverview-item" :span="8">
+                <p class="overview-container-right-alloverview-item-count">
+                  {{ allAreaInfo.totalInventory }}
+                </p>
+                <p class="overview-container-right-alloverview-item-title">
+                  库位总数
+                </p>
+              </el-col>
+              <el-col class="overview-container-right-alloverview-item" :span="8">
+                <p class="overview-container-right-alloverview-item-count">
+                  {{ allAreaInfo.occupiedQuantity }}
+                </p>
+                <p class="overview-container-right-alloverview-item-title">
+                  当前满位
+                </p>
+              </el-col>
+              <el-col class="overview-container-right-alloverview-item" :span="8">
+                <p class="overview-container-right-alloverview-item-count">
+                  {{ allAreaInfo.idleQuantity }}
+                </p>
+                <p class="overview-container-right-alloverview-item-title">
+                  当前空位
+                </p>
+              </el-col>
+              <el-col class="overview-container-right-alloverview-item" :span="8">
+                <p class="overview-container-right-alloverview-item-count">
+                  {{ allAreaInfo.transitQuantity }}
+                </p>
+                <p class="overview-container-right-alloverview-item-title">
+                  在途
+                </p>
+              </el-col>
+            </el-row>
+            <ringChart :ring-data="allAreaInfo" ref="ringChart" />
+          </el-tab-pane>
+          <el-tab-pane label="在途任务" name="second">在途任务</el-tab-pane>
+        </el-tabs>
+      </el-col>
+      <el-col :span="20" v-if="changeType === 1" class="overview-container-main">
+        <div class="stat-card">
+          <div class="stat-icon">
+            <i class="el-icon-s-grid" style="color: #fff"></i>
+          </div>
+          <div class="stat-title">库区信息</div>
+          <div class="stat-content">
+            <div class="stat-value">{{ getAreaInfoInfo.regionName }}</div>
+            <div class="stat-label">{{ getAreaInfoInfo.regionCode }}</div>
+          </div>
+        </div>
+
+        <div class="area-body">
+          <div v-for="item in Object.keys(areaInfo)" :key="item" class="lane-box">
+            <el-button size="mini" style="width:189px;" type="primary" @click="clearAll(item)">
+              一键清空
+            </el-button>
+            <div class="potTitle" :style="{ backgroundColor: isLaneStateTwo(item) ? 'red' : 'rgb(169, 235, 249)' }">
+              {{ item }}
+            </div>
+            <div class="potList">
+              <div v-for="sitem in areaInfo[item]" :key="sitem.id">
+                <div v-if="sitem.empty" class="area-div-empty" />
+                <div v-else class="area-div" :title="sitem.lineEdgeLibraryName">
+                  <el-popover placement="top-start" :title="sitem.lineEdgeLibraryCode" width="200" trigger="hover">
+                    <div class="point" />
+                    <span style="font-weight: 600">名称:</span>
+                    {{ sitem.lineEdgeLibraryName }}
+                    <br />
+                    <div class="point" />
+                    <span style="font-weight: 600">状态:</span>
+                    {{
+                    sitem.lineEdgeLibraryState == 0 && sitem.usableState == 1
+                    ? '空闲'
+                    : sitem.usableState == 2
+                    ? '不可用'
+                    : sitem.lineEdgeLibraryState == 1 && sitem.usableState == 1
+                    ? '满位' : sitem.lineEdgeLibraryState == 0 && sitem.usableState == 3
+                    ? '预入'
+                    : sitem.lineEdgeLibraryState == 1 && sitem.usableState == 3 ? '预出' : ''
+                    }}
+                    <br />
+                    <span v-if="sitem.usableState == 3 ||
+                      (sitem.usableState == 1 &&
+                        sitem.lineEdgeLibraryState == 1)
+                    ">
+                      <span style="font-weight: 600">物料:</span>
+                      {{ sitem.materialCode || '' }}
+                      <br />
+                      <span style="font-weight: 600">设备:</span>
+                      {{ sitem.equipmentName || '' }}
+                      <br />
+                      <span style="font-weight: 600">套号:</span>
+                      {{ sitem.suiteCode || '' }}
+                      <br />
+                    </span>
+                    <el-button type="text" @click="clearLine(sitem)">
+                      清空
+                    </el-button>
+                    <el-button type="text" @click="addLine(sitem)">
+                      添加
+                    </el-button>
+                    <div class="area-icon" :style="{
+                      backgroundColor: (sitem.lineEdgeLibraryState == 0 && sitem.usableState == 3) ||
+                              (sitem.lineEdgeLibraryState == 1 && sitem.usableState == 3)
+                              ? '#E6A23C'
+                              : sitem.usableState == 2
+                                ? 'gray'
+                                : sitem.lineEdgeLibraryState == 1 && sitem.usableState == 1
+                                  ? '#67C23A'
+                                  : ''
+                    }" slot="reference">
+                      <div v-if="sitem.laneState !== 2" style="color: #000000;font-size: 14px;">
+                        {{ sitem.lineEdgeLibraryState == 0 && sitem.usableState == 3
+                        ? '预入'
+                        : sitem.lineEdgeLibraryState == 1 && sitem.usableState == 3 ? '预出' : '' }}
+                      </div>
+                    </div>
+                  </el-popover>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 🔥 最后追加：排数说明列 -->
+          <div class="row-number-column" v-if="maxRowCount > 0">
+            <div class="row-number-item" v-for="(_, idx) in maxRowCount" :key="idx">
+              第 {{ idx + 1 }} 排
+            </div>
+          </div>
+
+        </div>
+      </el-col>
+    </el-row>
+    <base-dialog :dialogTitle="addOrEditTitle" :dialogVisible="addOrUpdateVisible" @cancel="handleCancel"
+      @confirm="handleConfirm" :before-close="handleCancel" destroy-on-close width="50%">
+      <add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update>
+    </base-dialog>
+  </div>
 </template>
 
 <script>
-// import basicPage from '@/mixins/basic-page';
 import ringChart from './components/ringChart.vue';
 import AddOrUpdate from './components/add-or-updata';
 import basicPage from '@/mixins/basic-page';
 import {
-	getAreaList,
-	postAllAreaInfo,
-	postAllAreaOverview,
-	postAreaInfo,
+  getAreaList,
+  postAllAreaInfo,
+  postAllAreaOverview,
+  postAreaInfo,
 } from '@/api/areavisual/overview';
-import { QKLineEdgeLibrary,AllQKLineEdgeLibrary } from '@/api/areavisual/lineEdgeLibrary';
+import { QKLineEdgeLibrary, AllQKLineEdgeLibrary } from '@/api/areavisual/lineEdgeLibrary';
 
 export default {
-	name: 'overview',
-	mixins: [basicPage],
-	data() {
-		return {
-			areaList: [
-				{
-					id: 0,
-					regionName: '全部库区',
-				},
-			],
-			areaSearchForm: {
-				pageNo: 1,
-				pageSize: 100,
-				regionName: '',
-			},
-			changeType: 0,
-			allAreaList: [],
-			allAreaInfo: {
-				totalInventory: 0,
-				occupiedQuantity: 0,
-				idleQuantity: 0,
-				transitQuantity: 0,
-			},
-			areaInfo: {},
-			activeName: 'first',
-			getAreaInfoInfo: {},
-		};
-	},
-	components: {
-		ringChart,
-		AddOrUpdate,
-	},
-	async created() {
-		this.getArea();
-		this.getAllAreaInfo();
-		this.getAllAreaOverview();
-	},
-	watch: {
-		activeName: (val) => {
-			if (val === 'first') {
-				this.getAllAreaOverview();
-			} else if (val === 'second') {
-				this.getNowTaskList();
-			}
-		},
-	},
-	methods: {
-		// 获取库区列表
-		async getArea() {
-			const res = await getAreaList(this.areaSearchForm);
-			if (res.code === 0 && res.data) {
-				(this.areaList = [
-					{
-						id: 0,
-						regionName: '全部库区',
-					},
-				]),
-					this.areaList.push(...res.data.list);
-			}
-		},
-		// 库区选择
-		nodeClick(data, node, components) {
-			if (data.id === 0) {
-				this.changeType = 0;
-				this.activeName = 'first';
-				this.getAllAreaInfo();
-			} else {
-				this.getAreaInfoInfo = data; //把库区存下，方便刷新
-				this.changeType = 1;
-				this.getAreaInfo(data.id);
-			}
-		},
-		// 获取全部库区概览信息
-		async getAllAreaInfo() {
-			const res = await postAllAreaInfo([]);
-			console.log(res);
-			if (res.code === 0 && res.data) {
-				this.allAreaList = res.data;
-			}
-		},
-		// 获取库区概览
-		async getAllAreaOverview() {
-			const res = await postAllAreaOverview([]);
-			console.log(res);
-			if (res.code === 0 && res.data) {
-				this.allAreaInfo = res.data;
-				this.$refs.ringChart.initChart();
-			}
-		},
-		// 获取在途任务
-		async getNowTaskList() {},
-		// 获取单库区信息
-		async getAreaInfo(id) {
-			const res = await postAreaInfo({ id });
-			if (res.code === 0 && res.data) {
-				// 按巷道号分组
-				this.areaInfo = res.data.reduce((result, item) => {
-					// 提取巷道号
-					const laneNumber = item.lineEdgeLibraryCode.substring(3, 5) + ' 巷道';
+  name: 'overview',
+  mixins: [basicPage],
+  data() {
+    return {
+      areaList: [
+        {
+          id: 0,
+          regionName: '全部库区',
+        },
+      ],
+      areaSearchForm: {
+        pageNo: 1,
+        pageSize: 100,
+        regionName: '',
+      },
+      changeType: 0,
+      allAreaList: [],
+      allAreaInfo: {
+        totalInventory: 0,
+        occupiedQuantity: 0,
+        idleQuantity: 0,
+        transitQuantity: 0,
+      },
+      areaInfo: {},
+      activeName: 'first',
+      getAreaInfoInfo: {},
+      maxRowCount: 0, // 最大排数
+    };
+  },
+  components: {
+    ringChart,
+    AddOrUpdate,
+  },
+  async created() {
+    this.getArea();
+    this.getAllAreaInfo();
+    this.getAllAreaOverview();
+  },
+  watch: {
+    activeName(val){
+      if (val === 'first') {
+        this.getAllAreaOverview();
+      } else if (val === 'second') {
+        this.getNowTaskList();
+      }
+    },
+  },
+  methods: {
+    isLaneStateTwo(laneName) {
+      const laneData = this.areaInfo[laneName];
+      if (!laneData || !Array.isArray(laneData)) return false;
+      // 如果该车道的任意一个车位满足 laneState === 2，则返回 true
+      return laneData.some(item => item.laneState === 2);
+    },
+    async getArea() {
+      const res = await getAreaList(this.areaSearchForm);
+      if (res.code === 0 && res.data) {
+        (this.areaList = [
+          {
+            id: 0,
+            regionName: '全部库区',
+          },
+        ]),
+          this.areaList.push(...res.data.list);
+      }
+    },
+    nodeClick(data, node, components) {
+      console.log(data,'data.id');
 
-					// 如果该巷道还没有分组，创建一个空数组
-					if (!result[laneNumber]) {
-						result[laneNumber] = [];
-					}
+      if (data.id === 0) {
+        this.changeType = 0;
+        this.activeName = 'first';
+        this.getAllAreaInfo();
+        this.getAllAreaOverview()
+      } else {
+        this.getAreaInfoInfo = data;
+        this.changeType = 1;
+        this.getAreaInfo(data.id);
+      }
+    },
+    async getAllAreaInfo() {
+      const res = await postAllAreaInfo([]);
+      if (res.code === 0 && res.data) {
+        console.log('res.data',res.data);
 
-					// 将当前项添加到对应巷道的数组中
-					result[laneNumber].push(item);
+        this.allAreaList = res.data;
+      }
+    },
+    async getAllAreaOverview() {
+      const res =await postAllAreaOverview([]);
+      if (res.code === 0 && res.data) {
+        this.allAreaInfo = res.data;
+      }
+    },
+    async getNowTaskList() { },
+    async getAreaInfo(id) {
+      const res = await postAreaInfo({ id });
+      if (res.code === 0 && res.data) {
+        this.areaInfo = res.data.reduce((result, item) => {
+          const laneNumber = item.lineEdgeLibraryCode.substring(3, 5) + ' 巷道';
+          if (!result[laneNumber]) {
+            result[laneNumber] = [];
+          }
+          result[laneNumber].push(item);
+          return result;
+        }, {});
 
-					return result;
-				}, {});
-				Object.keys(this.areaInfo).forEach((key) => {
-					const arr = this.areaInfo[key];
-					let emptyNum = 0;
-					let insetEmpty = [];
-					arr.forEach((item, index) => {
-						if (
-							!item.empty &&
-							item.lineEdgeLibraryCode.substring(5, 7) !=
-								Math.floor(index / 2) + 1 + emptyNum &&
-							item.lineEdgeLibraryCode[item.lineEdgeLibraryCode.length - 1] ==
-								'L'
-						) {
-							let num =
-								Number(item.lineEdgeLibraryCode.substring(5, 7)) -
-								(Math.floor(index / 2) + 1 + emptyNum);
-							insetEmpty.push({
-								index,
-								num,
-							});
-							emptyNum += num;
-						}
-					});
-					insetEmpty.forEach((item) => {
-						const arrEmpty = Array.from({ length: item.num * 2 }, () => ({
-							empty: true,
-						}));
-						arr.splice(item.index, 0, ...arrEmpty);
-					});
-				});
-			}
-		},
-		getDataList() {},
-		// 全部库区右侧分页点击
-		handleClickRight(tab, event) {
-			console.log(tab, event);
-		},
-		clearLine(val) {
-			if (val.usableState == 3) {
-				this.$confirm(
-					`当前库位为锁定状态，代表该库位有未完成的任务关联，是否确认清空${
-						'线边库名称为  ' + val.lineEdgeLibraryName + '  '
-					}的数据项?`,
-					'锁定库位清空提示',
-					{
-						confirmButtonText: '确定',
-						cancelButtonText: '取消',
-						type: 'warning',
-					}
-				)
-					.then(() => {
-						QKLineEdgeLibrary({
-							...val,
-							lineEdgeLibraryState: 0,
-							usableState: 1,
-						}).then(({ data }) => {
-							this.$message({
-								message: data,
-								type: 'success',
-								duration: 1500,
-								onClose: () => {
-									this.getAreaInfo(this.getAreaInfoInfo.id);
-								},
-							});
-						});
-					})
-					.catch(() => {});
-			} else {
-				QKLineEdgeLibrary({
-					...val,
-					lineEdgeLibraryState: 0,
-					usableState: 1,
-				}).then(({ data }) => {
-					this.$message({
-						message: data,
-						type: 'success',
-						duration: 1500,
-						onClose: () => {
-							this.getAreaInfo(this.getAreaInfoInfo.id);
-						},
-					});
-				});
-			}
-		},
-		addLine(val) {
-			this.addOrEditTitle = '添加货物';
-			this.addOrUpdateVisible = true;
-			this.$nextTick(() => {
-				this.$refs.addOrUpdate.init();
-				this.$refs.addOrUpdate.showLine(val);
-			});
-		},
-		// dialog的父组件方法this.$emit("refreshDataList");
-		successSubmit() {
-			this.handleCancel();
-			this.getAreaInfo(this.getAreaInfoInfo.id);
-		},
-		clearAll(item) {
-			if (this.areaInfo[item].length > 0) {
-				AllQKLineEdgeLibrary({
-					...this.areaInfo[item][0],
-					lineEdgeLibraryState: 0,
-					usableState: 1,
-				}).then(({ data }) => {
-					this.$message({
-						message: data,
-						type: 'success',
-						duration: 1500,
-						onClose: () => {
-							this.getAreaInfo(this.getAreaInfoInfo.id);
-						},
-					});
-				});
-			}
-		},
-	},
+        let maxLen = 0;
+        console.log('key', this.areaInfo);
+
+        Object.keys(this.areaInfo).forEach((key) => {
+          console.log(key);
+
+          const arr = this.areaInfo[key];
+          if (arr.length > maxLen) maxLen = arr.length;
+
+          let emptyNum = 0;
+          let insetEmpty = [];
+          arr.forEach((item, index) => {
+            if (
+              !item.empty &&
+              item.lineEdgeLibraryCode.substring(5, 7) !=
+              Math.floor(index / 2) + 1 + emptyNum &&
+              item.lineEdgeLibraryCode[item.lineEdgeLibraryCode.length - 1] ==
+              'L'
+            ) {
+              let num =
+                Number(item.lineEdgeLibraryCode.substring(5, 7)) -
+                (Math.floor(index / 2) + 1 + emptyNum);
+              insetEmpty.push({ index, num });
+              emptyNum += num;
+            }
+          });
+          insetEmpty.forEach((item) => {
+            const arrEmpty = Array.from({ length: item.num * 2 }, () => ({ empty: true }));
+            arr.splice(item.index, 0, ...arrEmpty);
+          });
+        });
+
+        // 计算最大排数
+        this.maxRowCount = Math.ceil(maxLen / 2);
+        console.log(this.maxRowCount, 'this.maxRowCount');
+
+      }
+    },
+    getDataList() { },
+    handleClickRight(tab, event) {
+      console.log(tab, event);
+    },
+    clearLine(val) {
+      if (val.usableState == 3) {
+        this.$confirm(
+          `当前库位为锁定状态，代表该库位有未完成的任务关联，是否确认清空${'线边库名称为  ' + val.lineEdgeLibraryName + '  '
+          }的数据项?`,
+          '锁定库位清空提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+        )
+          .then(() => {
+            QKLineEdgeLibrary({
+              ...val,
+              lineEdgeLibraryState: 0,
+              usableState: 1,
+            }).then(({ data }) => {
+              this.$message({
+                message: data,
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getAreaInfo(this.getAreaInfoInfo.id);
+                },
+              });
+            });
+          })
+          .catch(() => { });
+      } else {
+        QKLineEdgeLibrary({
+          ...val,
+          lineEdgeLibraryState: 0,
+          usableState: 1,
+        }).then(({ data }) => {
+          this.$message({
+            message: data,
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getAreaInfo(this.getAreaInfoInfo.id);
+            },
+          });
+        });
+      }
+    },
+    addLine(val) {
+      this.addOrEditTitle = '添加货物';
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init();
+        this.$refs.addOrUpdate.showLine(val);
+      });
+    },
+    successSubmit() {
+      this.handleCancel();
+      this.getAreaInfo(this.getAreaInfoInfo.id);
+    },
+    clearAll(item) {
+      this.$confirm('是否确认一键清空?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (this.areaInfo[item].length > 0) {
+          const firstItem = this.areaInfo[item].find(ele => !ele || ele.empty === undefined);
+          AllQKLineEdgeLibrary({
+            ...firstItem,
+            lineEdgeLibraryState: 0,
+            usableState: 1,
+          }).then(({ data }) => {
+            this.$message({
+              message: data,
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getAreaInfo(this.getAreaInfoInfo.id);
+              },
+            });
+          });
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消该操作'
+        });
+      });
+
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .overview-container {
-	max-height: calc(100vh - 120px - 8px);
-	overflow: scroll;
-	.overview-container-left {
-		padding-right: 12px;
-	}
-	.overview-container-main {
-		.allarea-box {
-			padding: 10px;
-			.areainfo-box {
-				border: 1px solid #bbb;
-				border-radius: 5px;
-				padding: 10px;
-				.areainfo-box-header {
-					font-size: 16px;
-					font-weight: bold;
-					white-space: nowrap; /* 禁止换行 */
-					overflow: hidden; /* 隐藏溢出内容 */
-					text-overflow: ellipsis; /* 溢出部分显示省略号 */
-				}
-				.areainfo-box-line {
-					width: 100%;
-					.areainfo-box-line-item {
-						height: 5px;
-						display: inline-block;
-					}
-				}
-				.areainfo-box-info {
-					.areainfo-box-info-item {
-						text-align: center;
-						font-size: 12px;
-						.areainfo-box-info-item-count {
-							font-weight: bold;
-							font-size: 14px;
-						}
-					}
-				}
-			}
-		}
-	}
-	.overview-container-right {
-		.overview-container-right-alloverview {
-			.overview-container-right-alloverview-item {
-				text-align: center;
-				.overview-container-right-alloverview-item-count {
-					font-size: 14px;
-					font-weight: bold;
-				}
-			}
-		}
-	}
+  max-height: calc(100vh - 120px - 8px);
+  display: flex;
+  overflow: hidden;
+
+  .overview-container-left {
+    padding-right: 12px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .overview-container-main {
+    overflow-y: auto;
+    overflow-x: auto;
+    padding: 0 10px;
+
+    .allarea-box {
+      padding: 10px;
+
+      .areainfo-box {
+        border: 1px solid #bbb;
+        border-radius: 5px;
+        padding: 10px;
+
+        .areainfo-box-header {
+          font-size: 16px;
+          font-weight: bold;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .areainfo-box-line {
+          width: 100%;
+
+          .areainfo-box-line-item {
+            height: 5px;
+            display: inline-block;
+          }
+        }
+
+        .areainfo-box-info {
+          .areainfo-box-info-item {
+            text-align: center;
+            font-size: 12px;
+
+            .areainfo-box-info-item-count {
+              font-weight: bold;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .overview-container-right {
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .overview-container-right-alloverview {
+      .overview-container-right-alloverview-item {
+        text-align: center;
+
+        .overview-container-right-alloverview-item-count {
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
 }
 </style>
 
 <style lang="scss">
 .el-tree-node__content {
-	height: 40px;
-	line-height: 40px;
+  height: 40px;
+  line-height: 40px;
 }
+
 .el-tree-node__label {
-	display: block;
-	width: calc(100% - 24px);
-	text-align: center;
-	white-space: nowrap; /* 禁止换行 */
-	overflow: hidden; /* 隐藏溢出内容 */
-	text-overflow: ellipsis; /* 溢出部分显示省略号 */
+  display: block;
+  width: calc(100% - 24px);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
 
 <style scoped>
 .area-body {
-	margin-top: 10px;
-	margin-left: 10px;
-	overflow-x: auto;
-	display: flex;
+  margin-top: 10px;
+  margin-left: 10px;
+  overflow-x: auto;
+  display: flex;
 }
+
+.lane-box {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+}
+
 .potTitle {
-	width: 190px;
-	background-color: rgb(169, 235, 249);
-	border-radius: 3px;
-	margin-right: 5px;
-	text-align: center;
-	color: #000000;
-	letter-spacing: 1px;
-	margin-bottom: 10px;
-	font-size: 16px;
+  width: 190px;
+  /* background-color: ; */
+  border-radius: 3px;
+  margin-right: 5px;
+  text-align: center;
+  color: #000000;
+  letter-spacing: 1px;
+  margin-bottom: 10px;
+  font-size: 16px;
   padding: 5px;
 }
+
 .potList {
-	width: 190px;
-	display: grid;
-	grid-template-columns: 90px 90px;
-	gap: 8px;
+  width: 190px;
+  display: grid;
+  grid-template-columns: 90px 90px;
+  gap: 8px;
 }
+
 .area-div {
-	padding: 10px;
-	background: white;
-	border-radius: 12px;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	transition: all 0.3s ease;
-	border: 4px solid #1a56db;
-	margin-bottom: 30px;
+  padding: 10px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  border: 4px solid #1a56db;
+  margin-bottom: 30px;
 }
+
 .area-div-empty {
-	background: white;
-	width: 90px;
-	height: 88px;
-	margin-bottom: 30px;
+  background: white;
+  width: 90px;
+  height: 88px;
+  margin-bottom: 30px;
 }
+
 .point {
-	width: 5px;
-	height: 5px;
-	border-radius: 50%;
-	background-color: #409eff;
-	float: left;
-	margin-top: 7px;
-	margin-right: 5px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: #409eff;
+  float: left;
+  margin-top: 7px;
+  margin-right: 5px;
 }
+
 .area-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: auto;
-	width: 60px;
-	height: 60px;
-	border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+}
+
+/* 🔥 最后一列：排数样式 */
+.row-number-column {
+  display: flex;
+  flex-direction: column;
+  width: 90px;
+  margin-top: 68px;
+  margin-left: 5px;
+}
+
+.row-number-item {
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* background: #e8f4ff; */
+  color: #1a56db;
+  font-weight: bold;
+  font-size: 14px;
+  /* border-radius: 6px; */
+  margin-bottom: 38px;
+  /* border: 1px dashed #409eff; */
 }
 </style>
 
 <style scoped>
 .stat-card {
-	margin-top: 10px;
-	display: flex;
-	align-items: center;
-	padding: 10px;
-	background: white;
-	border-radius: 12px;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	transition: all 0.3s ease;
-	border-left: 4px solid;
-	border-color: #1a56db;
-	margin-bottom: 30px;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  border-left: 4px solid;
+  border-color: #1a56db;
+  margin-bottom: 30px;
 }
 
-/* .stat-card:hover {
-	transform: translateY(-5px);
-	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-} */
 .stat-title {
-	margin: 0 10px;
-	color: #0051ff;
-	font-size: 20px;
+  margin: 0 10px;
+  color: #0051ff;
+  font-size: 20px;
 }
+
 .stat-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 60px;
-	height: 60px;
-	border-radius: 12px;
-	margin-right: 15px;
-	background: linear-gradient(to right, #1a56db, #0d47a1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  margin-right: 15px;
+  background: linear-gradient(to right, #1a56db, #0d47a1);
 }
 
 .stat-content {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .stat-value {
-	font-size: 28px;
-	font-weight: 700;
-	line-height: 1.2;
-	color: #1a56db;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #1a56db;
 }
 
 .stat-label {
-	font-size: 14px;
-	color: #64748b;
+  font-size: 14px;
+  color: #64748b;
 }
 </style>
diff --git a/src/views/productionVisualization/equipmentBoard/components/agvStatus.vue b/src/views/productionVisualization/equipmentBoard/components/agvStatus.vue
index 8b7d23d6..16e5cf7b 100644
--- a/src/views/productionVisualization/equipmentBoard/components/agvStatus.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/agvStatus.vue
@@ -2,36 +2,32 @@
   <div style="flex: 1">
     <div class="agvStatusContent">
       <div class="title">AGV状态</div>
-      <div class="agvDetailData">
-        <div class="item" v-for="(agv, index) in agvList" :key="agv.id">
-          <img class="car" src="../../../../assets/img/agvCar.png" alt="AGV小车">
-          <div class="eqInfo">
-            <div class="eqCode">
-              <div class="num">{{ index + 1 }}</div>
-              <div class="code">{{ agv.code }}</div>
-            </div>
-            <div class="eqStatusData">
-              <!-- 状态图标 -->
-              <img style="width: 16px; height: 16px; margin-right: 4px;" :src="require(`@/assets/img/${agv.statusImg}`)"
-                :alt="agv.status">
-              <!-- 状态文字（固定宽度） -->
-              <div class="runningState" :style="getStatusColor(agv.status)">
-                {{ agv.status }}
+      <!-- 添加滚动容器 -->
+      <div class="agvDetailDataWrapper">
+        <div class="agvDetailData">
+          <div class="item" v-for="(agv, index) in agvList" :key="agv.id">
+            <img class="car" src="../../../../assets/img/agvCar.png" alt="AGV小车">
+            <div class="eqInfo">
+              <div class="eqCode">
+                <div class="num">{{ index + 1 }}</div>
+                <div class="code">{{ agv.deviceName }}</div>
               </div>
-              <!-- 动态栅格容器 -->
-              <div class="charge" :class="{
-                'charge--run': agv.status !== '充电中',  // 运行中/待命用run背景
-                'charge--charge': agv.status === '充电中'  // 充电中用charge背景
-              }">
-                <div class="grid-item" :style="{ backgroundColor: getGridColor(agv.status) }"
-                  v-for="(grid, idx) in generateGridArray(getGridCount(agv.progress))" :key="idx"
-                  ></div>
+              <div class="eqStatusData">
+                <!-- 状态图标 -->
+                <img style="width: 14px; height: 14px; margin-right: 4px;" :src="getStatusImage(agv.alarmTrigger)"
+                  :alt="agv.status">
+                <!-- 状态文字 -->
+                <div class="runningState" :style="getStatusColor(agv.status)">
+                  {{ agv.alarmTrigger === true ? '报警' : '正常' }}
+                </div>
+
               </div>
+
+            </div>
+            <div style="margin-left: 130px;">
+              <svg-icon style="font-size: 60px;"
+                :icon-class="agv.alarmTrigger ? 'redLight' : 'greenLight'" />
             </div>
-          </div>
-          <div class="qty">
-            <div class="num">{{ agv.completed }}</div>
-            <div class="qtyTitle">今日完成</div>
           </div>
         </div>
       </div>
@@ -44,58 +40,25 @@ export default {
   name: 'AGVStatus',
   components: {},
   props: {
-    energyObj: {
-      type: Object,
-      default: () => ({
-        electricComu: 0,
-        steamComu: 0
-      })
-    }
-  },
-  data() {
-    return {
-      agvList: [
-        {
-          id: 1,
-          code: '设备编号1212121',
-          status: '运行中',
-          statusImg: 'runCircle.png',
-          completed: 47,
-          progress: 80 // 进度80% → 显示4个栅格
-        },
-        {
-          id: 2,
-          code: '设备编号3434343',
-          status: '待命',
-          statusImg: 'standbyCircle.png',
-          completed: 23,
-          progress: 40 // 进度40% → 显示2个栅格
-        },
-        {
-          id: 3,
-          code: '设备编号5656565',
-          status: '充电中',
-          statusImg: 'chargeCircle.png',
-          completed: 15,
-          progress: 100 // 进度100% → 显示5个栅格
-        },
-        {
-          id: 4,
-          code: '设备编号7878787',
-          status: '充电中',
-          statusImg: 'chargeCircle.png',
-          completed: 31,
-          progress: 60 // 进度60% → 显示3个栅格
-        }
-      ]
+    agvList: {
+      type: Array,
+      default: () => []
     }
   },
   methods: {
+    getStatusImage(alarmTrigger) {
+      // alarmTrigger: true → 报警(chargeCircle)，false → 正常(runCircle)
+      if (alarmTrigger) {
+        return require('@/assets/img/chargeCircle.png')
+      } else {
+        return require('@/assets/img/runCircle.png')
+      }
+    },
     // 获取状态文字颜色
     getStatusColor(status) {
       const baseStyle = {
-        color: '', // 默认颜色
-        letterSpacing: '0px' // 默认字间距
+        color: '',
+        letterSpacing: '0px'
       };
 
       switch (status) {
@@ -104,37 +67,16 @@ export default {
           break;
         case '待命':
           baseStyle.color = 'rgba(245, 154, 36, 1)';
-          baseStyle.letterSpacing = '8px'; // 待命状态单独加字间距（可调整数值）
+          baseStyle.letterSpacing = '8px';
           break;
         case '充电中':
           baseStyle.color = 'rgba(0, 225, 37, 1)';
           break;
         default:
-          baseStyle.color = '';
+          baseStyle.color = '#666';
       }
 
       return baseStyle;
-    },
-    // 根据状态获取背景图
-    getBgImage(status) {
-      return status === '充电中' ? 'chargeBg.png' : 'run.png';
-    },
-    // 根据状态获取栅格颜色
-    getGridColor(status) {
-      return status === '充电中'
-        ? 'rgba(0, 225, 37, 1)'
-        : 'rgba(120, 138, 221, 1)';
-    },
-    getGridCount(progress) {
-      // 总栅格位置为5个，进度0%→0个，100%→5个，按比例取整
-      const totalGrids = 5;
-      return Math.ceil((progress / 100) * totalGrids);
-    },
-
-    // 生成栅格数组（用于v-for遍历）
-    generateGridArray(count) {
-      // 生成 [1,2,...,count] 的数组，长度为count
-      return Array.from({ length: count }, (_, i) => i + 1);
     }
   }
 }
@@ -147,6 +89,8 @@ export default {
   background: #FFFFFF;
   border-radius: 8px;
   padding: 16px 18px 26px;
+  display: flex;
+  flex-direction: column;
 
   .title {
     font-family: PingFangSC, PingFang SC;
@@ -159,6 +103,7 @@ export default {
     font-style: normal;
     position: relative;
     padding-left: 12px;
+    flex-shrink: 0;
 
     &::before {
       content: '';
@@ -172,45 +117,65 @@ export default {
     }
   }
 
-  .agvDetailData {
+  // 滚动容器包装器
+  .agvDetailDataWrapper {
+    flex: 1;
+    overflow-y: auto;
     margin-top: 15px;
+
+    // 隐藏滚动条
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      background: transparent;
+    }
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .agvDetailData {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 8px; // 减小间距
 
     .item {
+      transform: scale(0.8); // 缩小到80%
       width: 332px;
       height: 101px;
       padding: 22px 0 0 10px;
       display: flex;
       background: url('../../../../assets/img/agvItemBg.png') no-repeat;
       background-size: cover;
+      flex-shrink: 0;
+      margin: -10px 0; // 负边距抵消缩放带来的空白
 
+      // 调整内部元素大小
       .car {
-        width: 66px;
-        height: 57px;
+        width: 53px; // 从66px缩小
+        height: 46px; // 从57px缩小
       }
 
       .eqInfo {
         margin-left: 6px;
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: 6px; // 减小间距
 
         .eqCode {
           display: flex;
           align-items: center;
 
           .num {
-            width: 21px;
-            height: 24px;
+            width: 17px; // 从21px缩小
+            height: 19px; // 从24px缩小
             background: #0065FF;
             backdrop-filter: blur(1.5px);
             font-family: PingFangSC, PingFang SC;
             font-weight: 400;
-            font-size: 16px;
+            font-size: 13px; // 从16px缩小
             color: #FFFFFF;
-            line-height: 18px;
+            line-height: 19px;
             text-align: center;
           }
 
@@ -218,7 +183,7 @@ export default {
             margin-left: 4px;
             font-family: PingFangSC, PingFang SC;
             font-weight: 400;
-            font-size: 16px;
+            font-size: 13px; // 从16px缩小
             color: #020203;
             line-height: 18px;
           }
@@ -228,69 +193,14 @@ export default {
           display: flex;
           align-items: center;
 
-          // 状态文字固定宽度（确保三种状态宽度一致）
           .runningState {
             font-family: PingFangSC, PingFang SC;
             font-weight: 400;
-            font-size: 16px;
+            font-size: 13px; // 从16px缩小
             line-height: 20px;
-            width: 48px; // 固定宽度，适配三种状态文字
-            text-align: left; // 左对齐，避免空格填充
+            width: 48px;
+            text-align: left;
           }
-
-          // 栅格容器样式
-          .charge {
-            width: 73px;
-            height: 27px;
-            margin-left: 5px;
-            background-size: 100% 100% !important;
-            background-repeat: no-repeat !important;
-            display: flex;
-            justify-content: flex-start;
-            gap: 1px;
-            padding: 5px 0px 4px 3px;
-
-            // 运行中/待命状态的背景图
-            &.charge--run {
-              background-image: url('../../../../assets/img/runBg.png');
-            }
-
-            // 充电中状态的背景图
-            &.charge--charge {
-              background-image: url('../../../../assets/img/chargeBg.png');
-            }
-
-            .grid-item {
-              width: 12px;
-              height: 18px;
-              border-radius: 2px;
-            }
-          }
-        }
-      }
-
-      .qty {
-        display: flex;
-        flex-direction: column;
-        margin-left: 24px;
-        gap: 12px;
-
-        .num {
-          font-family: PingFangSC, PingFang SC;
-          font-weight: 400;
-          font-size: 31px;
-          color: #000000;
-          line-height: 18px;
-          text-align: center;
-        }
-
-        .qtyTitle {
-          font-family: PingFangSC, PingFang SC;
-          font-weight: 400;
-          font-size: 14px;
-          color: rgba(2, 2, 3, 0.6);
-          line-height: 18px;
-          text-align: center;
         }
       }
     }
diff --git a/src/views/productionVisualization/equipmentBoard/components/alarm.vue b/src/views/productionVisualization/equipmentBoard/components/alarm.vue
index 4e8dbfd5..9ee3dc31 100644
--- a/src/views/productionVisualization/equipmentBoard/components/alarm.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/alarm.vue
@@ -2,14 +2,14 @@
   <div style="flex: 1">
     <div class="agvStatusContent">
       <div class="title">异常报警</div>
-      <div class="alarm-item" style="margin-top: 13px;">
+      <!-- <div class="alarm-item" style="margin-top: 13px;">
         <div class="item">
           9:05:21|FMS|AGV-03顶升失败，任务TSK25-1004中断
         </div>
         <div class="item">
           9:05:21|FMS|AGV-03顶升失败，任务TSK25-1004中断
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
diff --git a/src/views/productionVisualization/equipmentBoard/components/alarmInfo.vue b/src/views/productionVisualization/equipmentBoard/components/alarmInfo.vue
new file mode 100644
index 00000000..d51d4406
--- /dev/null
+++ b/src/views/productionVisualization/equipmentBoard/components/alarmInfo.vue
@@ -0,0 +1,928 @@
+<template>
+  <div style="flex: 1">
+    <div class="agvStatusContent">
+      <div class="title">报警详情</div>
+
+      <!-- 有 deviceName 时：网格布局，固定显示5个 -->
+      <div v-if="hasDeviceName" class="agvDetailDataGrid">
+        <div class="item" v-for="(agv, index) in agvList" :key="agv.id || index">
+          <div class="agvBasicInfo">
+            <div class="eqInfo">
+              <div class="eqCode">
+                <div class="num">{{ index + 1 }}</div>
+                <div class="code">{{ agv.deviceName }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="alarmDetailWrapper" v-if="agv.data && agv.data.length > 0">
+            <div class="alarmDetailTitle">
+              <span class="titleText">告警详情</span>
+              <span class="alarmCount" v-if="agv.data.length > 1">({{ agv.data.length }})</span>
+            </div>
+            <div class="alarmDetailScroll" :ref="`scroll_${index}`" @mouseenter="pauseAutoScroll(index)"
+              @mouseleave="resumeAutoScroll(index)">
+              <div class="alarmDetailList">
+                <div class="alarmItem" v-for="(alarm, alarmIndex) in agv.data" :key="alarmIndex">
+                  <div class="alarmHeader" v-if="agv.data.length > 1">
+                    <span class="alarmIndex">告警 {{ alarmIndex + 1 }}</span>
+                  </div>
+                  <div class="alarmField" v-if="alarm.warnName">
+                    <span class="fieldLabel">警告名称：</span>
+                    <span class="fieldValue">{{ alarm.warnName }}</span>
+                  </div>
+                  <div class="alarmField" v-if="alarm.faultComponent">
+                    <span class="fieldLabel">故障部件：</span>
+                    <span class="fieldValue">{{ alarm.faultComponent }}</span>
+                  </div>
+                  <div class="alarmField" v-if="alarm.faultEventName">
+                    <span class="fieldLabel">故障事件：</span>
+                    <span class="fieldValue">{{ alarm.faultEventName }}</span>
+                  </div>
+                  <div class="alarmField" v-if="alarm.eventCause">
+                    <span class="fieldLabel">事件原因：</span>
+                    <span class="fieldValue">{{ alarm.eventCause }}</span>
+                  </div>
+                  <div class="alarmField" v-if="alarm.troubleshootStep">
+                    <span class="fieldLabel">排查步骤：</span>
+                    <span class="fieldValue">{{ alarm.troubleshootStep }}</span>
+                  </div>
+                  <div class="alarmDivider" v-if="agv.data.length > 1 && alarmIndex < agv.data.length - 1"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="noAlarm" v-else>
+            <span class="noAlarmText">暂无告警信息</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 没有 deviceName 时：轮播滚动，同时显示2个 -->
+      <div v-else class="agvDetailDataWrapper" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
+        <div class="carouselContainer" :style="{ transform: `translateY(-${currentOffset}px)` }">
+          <div v-for="(item, index) in displayList" :key="item.id || index" class="carouselItemGroup">
+            <div class="carouselItem">
+              <div class="alarmBasicInfo">
+                <div class="eqCode">
+                  <div class="num">{{ index + 1 }}</div>
+                  <div class="code">{{ item.warnName || '告警信息' }}</div>
+                </div>
+              </div>
+
+              <div class="alarmDetailWrapper">
+                <div class="alarmDetailList">
+                  <div class="alarmItem">
+                    <div class="alarmField" v-if="item.warnName">
+                      <span class="fieldLabel">警告名称：</span>
+                      <span class="fieldValue">{{ item.warnName }}</span>
+                    </div>
+                    <div class="alarmField" v-if="item.faultComponent">
+                      <span class="fieldLabel">故障部件：</span>
+                      <span class="fieldValue">{{ item.faultComponent }}</span>
+                    </div>
+                    <div class="alarmField" v-if="item.faultEventName">
+                      <span class="fieldLabel">故障事件：</span>
+                      <span class="fieldValue">{{ item.faultEventName }}</span>
+                    </div>
+                    <div class="alarmField" v-if="item.eventCause">
+                      <span class="fieldLabel">事件原因：</span>
+                      <span class="fieldValue">{{ item.eventCause }}</span>
+                    </div>
+                    <div class="alarmField" v-if="item.troubleshootStep">
+                      <span class="fieldLabel">排查步骤：</span>
+                      <span class="fieldValue">{{ item.troubleshootStep }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AGVStatus',
+  components: {},
+  props: {
+    agvList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      currentOffset: 0,
+      carouselInterval: null,
+      isPaused: false,
+      itemHeight: 0,
+      itemsPerView: 2,
+      // 永久保存：仅记录【无deviceName】时的轮播位置
+      savedCarouselIndex: 0,
+      lastHasDeviceName: false,
+      autoScrollTimers: {},
+      scrollPausedStatus: {},
+      currentAlarmIndex: {},
+      // 标记是否已经初始化过轮播
+      isCarouselInitialized: false,
+      // 优化：防抖和缓存
+      updateTimer: null,
+      pendingUpdate: false,
+      _retryCount: 0,
+      _cachedScrollElements: null,
+      _cachedAlarmItems: null,
+      resizeObserver: null
+    }
+  },
+  computed: {
+    hasDeviceName() {
+      if (!this.agvList || this.agvList.length === 0) return false
+      return this.agvList[0] && this.agvList[0].deviceName !== undefined
+    },
+    displayList() {
+      return this.agvList || []
+    }
+  },
+  watch: {
+    // 优化1：使用防抖优化模式切换
+    hasDeviceName(newVal, oldVal) {
+      if (newVal === oldVal) return
+
+      console.log('模式切换:', '旧值=', oldVal, '新值=', newVal, '保存的位置=', this.savedCarouselIndex)
+
+      // 从有 deviceName 切换到无 deviceName
+      if (newVal === false && oldVal === true) {
+        console.log('切换到无deviceName模式，使用保存的位置:', this.savedCarouselIndex)
+        this.isCarouselInitialized = false
+        this.stopCarousel()
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.initCarousel()
+          }, 100)
+        })
+      }
+      // 从无 deviceName 切换到有 deviceName
+      else if (newVal === true && oldVal === false) {
+        console.log('切换到有deviceName模式，保存当前位置:', this.currentIndex)
+        this.saveCurrentCarouselPosition()
+        this.stopCarousel()
+      }
+
+      this.lastHasDeviceName = newVal
+    },
+
+    // 优化2：使用防抖和深度比较优化数据监听
+    agvList: {
+      handler(newList, oldList) {
+        // 避免重复初始化
+        if (this.pendingUpdate) return
+        this.pendingUpdate = true
+
+        // 使用防抖
+        if (this.updateTimer) clearTimeout(this.updateTimer)
+        this.updateTimer = setTimeout(() => {
+          // 只在数据真正变化时才重新初始化
+          const hasChanged = JSON.stringify(newList) !== JSON.stringify(oldList)
+
+          if (hasChanged) {
+            if (!this.hasDeviceName) {
+              // 无 deviceName 模式：数据变化后重新初始化轮播
+              console.log('无deviceName模式数据更新，保存的位置:', this.savedCarouselIndex)
+              this.stopCarousel()
+              this.isCarouselInitialized = false
+              this.$nextTick(() => {
+                setTimeout(() => {
+                  this.initCarousel()
+                }, 50)
+              })
+            } else {
+              // 有 deviceName 模式：重新初始化自动滚动
+              this.stopAllAutoScroll()
+              // 清理缓存
+              this._cachedScrollElements = null
+              this._cachedAlarmItems = null
+              this.$nextTick(() => this.initAutoScroll())
+            }
+          }
+
+          this.pendingUpdate = false
+        }, 200) // 增加防抖延迟
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // 尝试从 localStorage 读取保存的位置
+    this.loadSavedPosition()
+    this.lastHasDeviceName = this.hasDeviceName
+
+    if (!this.hasDeviceName) {
+      this.initCarousel()
+    }
+    if (this.hasDeviceName) {
+      this.initAutoScroll()
+    }
+
+    // 使用 ResizeObserver 监听容器大小变化
+    this.initResizeObserver()
+  },
+  beforeDestroy() {
+    // 清理定时器
+    if (this.updateTimer) clearTimeout(this.updateTimer)
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+
+    // 保存位置
+    if (!this.hasDeviceName) {
+      this.saveCurrentCarouselPosition()
+    }
+
+    this.stopCarousel()
+    this.stopAllAutoScroll()
+
+    // 清理缓存
+    this._cachedScrollElements = null
+    this._cachedAlarmItems = null
+  },
+  methods: {
+    /**
+     * 初始化 ResizeObserver
+     */
+    initResizeObserver() {
+      if (window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(() => {
+          if (!this.hasDeviceName && this.isCarouselInitialized) {
+            // 容器大小变化时重新计算高度
+            this.recalculateItemHeight()
+          }
+        })
+
+        const container = this.$el?.querySelector('.agvDetailDataWrapper')
+        if (container) {
+          this.resizeObserver.observe(container)
+        }
+      }
+    },
+
+    /**
+     * 重新计算项目高度
+     */
+    recalculateItemHeight() {
+      const item = this.$el?.querySelector('.carouselItem')
+      if (item) {
+        const newHeight = item.offsetHeight + 12
+        if (newHeight !== this.itemHeight) {
+          this.itemHeight = newHeight
+          this.currentOffset = this.currentIndex * this.itemHeight
+        }
+      }
+    },
+
+    /**
+     * 从 localStorage 加载保存的位置
+     */
+    loadSavedPosition() {
+      try {
+        const saved = localStorage.getItem('agv_carousel_position')
+        if (saved !== null) {
+          const position = parseInt(saved, 10)
+          if (!isNaN(position) && position >= 0) {
+            this.savedCarouselIndex = position
+            console.log('从 localStorage 加载轮播位置:', position)
+          }
+        }
+      } catch (e) {
+        console.error('读取 localStorage 失败:', e)
+      }
+    },
+
+    /**
+     * 保存当前轮播位置到 localStorage
+     */
+    saveCurrentCarouselPosition() {
+      // 只有在无 deviceName 模式下才保存
+      if (!this.hasDeviceName && this.displayList.length > 0) {
+        const maxIndex = Math.max(0, this.displayList.length - this.itemsPerView)
+        // 确保保存的位置在有效范围内
+        let saveIndex = this.currentIndex
+        if (saveIndex > maxIndex) {
+          saveIndex = maxIndex
+        }
+        if (saveIndex >= 0) {
+          this.savedCarouselIndex = saveIndex
+          console.log('保存轮播位置到内存:', saveIndex)
+
+          // 同时保存到 localStorage
+          try {
+            localStorage.setItem('agv_carousel_position', saveIndex)
+            console.log('保存轮播位置到 localStorage:', saveIndex)
+          } catch (e) {
+            console.error('保存到 localStorage 失败:', e)
+          }
+        }
+      }
+    },
+
+    /**
+     * 优化后的轮播初始化
+     */
+    initCarousel() {
+      // 防止重复初始化
+      if (this.isCarouselInitialized) {
+        console.log('轮播已初始化，跳过')
+        return
+      }
+
+      // 使用 requestAnimationFrame 代替 setTimeout
+      requestAnimationFrame(() => {
+        const container = this.$el?.querySelector('.carouselContainer')
+        const item = this.$el?.querySelector('.carouselItem')
+
+        if (!container || !item) {
+          // 最多重试3次
+          if (this._retryCount < 3) {
+            this._retryCount++
+            console.log(`DOM未就绪，第${this._retryCount}次重试`)
+            requestAnimationFrame(() => this.initCarousel())
+          }
+          return
+        }
+
+        this._retryCount = 0
+        this.itemHeight = item.offsetHeight + 12
+        const maxIndex = Math.max(0, this.displayList.length - this.itemsPerView)
+
+        // 读取保存的位置
+        let idx = this.savedCarouselIndex
+
+        // 如果内存中的位置是0，尝试从localStorage读取
+        if (idx === 0 && this.displayList.length > this.itemsPerView) {
+          try {
+            const saved = localStorage.getItem('agv_carousel_position')
+            if (saved !== null) {
+              const savedIdx = parseInt(saved, 10)
+              if (!isNaN(savedIdx) && savedIdx > 0 && savedIdx <= maxIndex) {
+                idx = savedIdx
+                this.savedCarouselIndex = idx
+                console.log('从 localStorage 恢复到位置:', idx)
+              }
+            }
+          } catch (e) {
+            console.error('读取 localStorage 失败:', e)
+          }
+        }
+
+        // 边界检查
+        idx = Math.min(idx, maxIndex)
+        idx = Math.max(0, idx)
+
+        this.currentIndex = idx
+        this.currentOffset = idx * this.itemHeight
+
+        // 标记已初始化
+        this.isCarouselInitialized = true
+
+        console.log('轮播初始化完成，从位置继续：', this.currentIndex, '保存的位置：', this.savedCarouselIndex, '最大索引：', maxIndex)
+
+        // 启动轮播
+        this.startCarousel()
+      })
+    },
+
+    /**
+     * 启动轮播
+     */
+    startCarousel() {
+      this.stopCarousel()
+
+      // 如果数据不足一页，不需要轮播
+      if (this.displayList.length <= this.itemsPerView) {
+        console.log('数据不足一页，不启动轮播')
+        return
+      }
+
+      this.carouselInterval = setInterval(() => {
+        // 暂停时 或 有 deviceName 模式时，不滚动也不保存
+        if (this.isPaused || this.hasDeviceName) return
+
+        const step = this.itemsPerView
+        let newIndex
+
+        if (this.currentIndex + step < this.displayList.length) {
+          newIndex = this.currentIndex + step
+        } else {
+          newIndex = 0
+        }
+
+        this.currentIndex = newIndex
+        this.currentOffset = this.currentIndex * this.itemHeight
+
+        // 保存当前位置
+        this.saveCurrentCarouselPosition()
+      }, 5000)
+
+      console.log('轮播已启动，间隔5秒')
+    },
+
+    /**
+     * 优化后的自动滚动初始化
+     */
+    initAutoScroll() {
+      // 使用 requestAnimationFrame 批量处理
+      requestAnimationFrame(() => {
+        this.agvList.forEach((agv, index) => {
+          if (agv.data && agv.data.length) {
+            // 延迟初始化，避免同时渲染
+            setTimeout(() => {
+              if (!this.currentAlarmIndex[index]) {
+                this.$set(this.currentAlarmIndex, index, 0)
+              }
+              this.scrollToAlarm(index, 0)
+              this.startAutoScroll(index)
+            }, index * 50) // 错开初始化时间
+          }
+        })
+      })
+    },
+
+    /**
+     * 优化：缓存 DOM 查询结果的滚动方法
+     */
+    scrollToAlarm(index, alarmIndex) {
+      const ref = this.$refs[`scroll_${index}`]
+      if (!ref) return
+
+      // 缓存元素查询结果
+      if (!this._cachedScrollElements) {
+        this._cachedScrollElements = {}
+      }
+
+      const el = ref[0] || ref
+      if (this._cachedScrollElements[index] !== el) {
+        this._cachedScrollElements[index] = el
+        this._cachedAlarmItems = null // 清除缓存
+      }
+
+      // 获取或缓存告警项
+      if (!this._cachedAlarmItems || !this._cachedAlarmItems[index]) {
+        if (!this._cachedAlarmItems) this._cachedAlarmItems = {}
+        this._cachedAlarmItems[index] = el.querySelectorAll('.alarmItem')
+      }
+
+      const items = this._cachedAlarmItems[index]
+      if (items && items[alarmIndex]) {
+        // 使用 requestAnimationFrame 优化滚动性能
+        requestAnimationFrame(() => {
+          el.scrollTo({
+            top: items[alarmIndex].offsetTop - el.offsetTop,
+            behavior: 'smooth'
+          })
+        })
+      }
+    },
+
+    /**
+     * 启动单个AGV的告警自动滚动
+     */
+    startAutoScroll(index) {
+      if (this.autoScrollTimers[index]) {
+        clearInterval(this.autoScrollTimers[index])
+      }
+
+      const len = this.agvList[index]?.data?.length
+      if (!len || len <= 1) return
+
+      this.autoScrollTimers[index] = setInterval(() => {
+        if (this.scrollPausedStatus[index]) return
+
+        const newIndex = (this.currentAlarmIndex[index] + 1) % len
+        this.currentAlarmIndex[index] = newIndex
+        this.scrollToAlarm(index, newIndex)
+      }, 10000)
+    },
+
+    /**
+     * 停止单个AGV的告警自动滚动
+     */
+    stopAutoScroll(index) {
+      if (this.autoScrollTimers[index]) {
+        clearInterval(this.autoScrollTimers[index])
+        delete this.autoScrollTimers[index]
+      }
+    },
+
+    /**
+     * 暂停单个AGV的告警自动滚动
+     */
+    pauseAutoScroll(index) {
+      this.$set(this.scrollPausedStatus, index, true)
+    },
+
+    /**
+     * 恢复单个AGV的告警自动滚动
+     */
+    resumeAutoScroll(index) {
+      this.$set(this.scrollPausedStatus, index, false)
+    },
+
+    /**
+     * 停止所有告警自动滚动
+     */
+    stopAllAutoScroll() {
+      Object.keys(this.autoScrollTimers).forEach(key => {
+        clearInterval(this.autoScrollTimers[key])
+      })
+      this.autoScrollTimers = {}
+    },
+
+    /**
+     * 停止轮播
+     */
+    stopCarousel() {
+      if (this.carouselInterval) {
+        clearInterval(this.carouselInterval)
+        this.carouselInterval = null
+      }
+      this.isCarouselInitialized = false
+    },
+
+    /**
+     * 暂停轮播（鼠标悬停时）
+     */
+    pauseCarousel() {
+      this.isPaused = true
+    },
+
+    /**
+     * 恢复轮播（鼠标离开时）
+     */
+    resumeCarousel() {
+      this.isPaused = false
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.agvStatusContent {
+  width: 100%;
+  height: 442px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 16px;
+    letter-spacing: 1px;
+    text-align: left;
+    font-style: normal;
+    position: relative;
+    padding-left: 12px;
+    flex-shrink: 0;
+    margin-bottom: 16px;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 16px;
+      background: #0A4BFF;
+      border-radius: 1px;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+
+  // 有 deviceName 时：网格布局
+  .agvDetailDataGrid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+    align-content: start;
+    max-height: 100%;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    .item {
+      background: #F8F9FC;
+      border-radius: 8px;
+      padding: 12px 16px;
+      height: 376px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+  }
+
+  // 无 deviceName 时：轮播容器
+  .agvDetailDataWrapper {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .carouselContainer {
+    transition: transform 0.5s ease-in-out;
+    will-change: transform; // 优化动画性能
+  }
+
+  .carouselItemGroup {
+    margin-bottom: 0;
+  }
+
+  .carouselItem {
+    background: #F8F9FC;
+    border-radius: 8px;
+    padding: 12px 16px;
+    margin-bottom: 12px;
+
+    .alarmDetailWrapper {
+      margin-top: 8px;
+
+      .alarmDetailList {
+        gap: 6px;
+
+        .alarmItem {
+          padding: 6px;
+
+          .alarmField {
+            margin-bottom: 4px;
+            font-size: 11px;
+
+            .fieldLabel {
+              width: 65px;
+              font-size: 11px;
+            }
+
+            .fieldValue {
+              font-size: 11px;
+            }
+          }
+        }
+      }
+    }
+
+    .alarmBasicInfo {
+      padding-bottom: 8px;
+
+      .eqCode {
+        .num {
+          width: 20px;
+          height: 20px;
+          font-size: 11px;
+          line-height: 20px;
+        }
+
+        .code {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .agvBasicInfo {
+    display: flex;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    flex-shrink: 0;
+
+    .eqInfo {
+      .eqCode {
+        display: flex;
+        align-items: center;
+
+        .num {
+          width: 20px;
+          height: 20px;
+          background: #0065FF;
+          border-radius: 2px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 500;
+          font-size: 12px;
+          color: #FFFFFF;
+          line-height: 20px;
+          text-align: center;
+        }
+
+        .code {
+          margin-left: 6px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 500;
+          font-size: 14px;
+          color: #020203;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+
+  .alarmBasicInfo {
+    display: flex;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    flex-shrink: 0;
+
+    .eqCode {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .num {
+        width: 24px;
+        height: 24px;
+        background: #0065FF;
+        border-radius: 4px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: center;
+        flex-shrink: 0;
+      }
+
+      .code {
+        margin-left: 8px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        font-size: 14px;
+        color: #020203;
+        line-height: 18px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .alarmDetailWrapper {
+    margin-top: 12px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    .alarmDetailTitle {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-bottom: 8px;
+      flex-shrink: 0;
+
+      .titleText {
+        font-size: 13px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 18px;
+      }
+
+      .alarmCount {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+      }
+    }
+
+    .alarmDetailScroll {
+      flex: 1;
+      overflow-y: auto;
+      background: rgba(0, 0, 0, 0.02);
+      border-radius: 6px;
+      padding: 8px;
+      min-height: 0;
+      scroll-behavior: smooth;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: 2px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 2px;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+
+    .alarmDetailList {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .alarmItem {
+        padding: 8px;
+        background: #FFFFFF;
+        border-radius: 6px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+        transition: all 0.3s ease;
+
+        .alarmHeader {
+          margin-bottom: 8px;
+          padding-bottom: 6px;
+          border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
+
+          .alarmIndex {
+            font-size: 12px;
+            font-weight: 500;
+            color: #0A4BFF;
+          }
+        }
+
+        .alarmField {
+          display: flex;
+          margin-bottom: 6px;
+          font-size: 12px;
+          line-height: 1.5;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .fieldLabel {
+            flex-shrink: 0;
+            width: 70px;
+            color: rgba(0, 0, 0, 0.45);
+          }
+
+          .fieldValue {
+            flex: 1;
+            color: rgba(0, 0, 0, 0.85);
+            word-break: break-word;
+          }
+        }
+
+        .alarmDivider {
+          height: 1px;
+          background: rgba(0, 0, 0, 0.06);
+          margin: 8px 0 4px;
+        }
+      }
+    }
+  }
+
+  .noAlarm {
+    margin-top: 12px;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 6px;
+
+    .noAlarmText {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  .emptyState {
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.45);
+    background: #f5f5f5;
+    border-radius: 8px;
+  }
+}
+</style>
diff --git a/src/views/productionVisualization/equipmentBoard/components/alarmTop.vue b/src/views/productionVisualization/equipmentBoard/components/alarmTop.vue
index dfd4d050..2ae71c9c 100644
--- a/src/views/productionVisualization/equipmentBoard/components/alarmTop.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/alarmTop.vue
@@ -1,7 +1,7 @@
 <template>
   <div style="flex: 1">
     <div class="agvStatusContent">
-      <div class="title">异常原因Top5</div>
+      <!-- <div class="title">异常原因Top5</div>
       <div class="alarm-item" style="margin-top: 14px;">
         <div class="item top1">
           <div class="item-data">
@@ -78,7 +78,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -111,7 +111,7 @@ export default {
 
 <style lang='scss' scoped>
 .agvStatusContent {
-  width: 402px;
+  width: 1344px;
   height: 442px;
   background: #FFFFFF;
   border-radius: 8px;
diff --git a/src/views/productionVisualization/equipmentBoard/components/pieChart.vue b/src/views/productionVisualization/equipmentBoard/components/pieChart.vue
index aeabfec7..6075f519 100644
--- a/src/views/productionVisualization/equipmentBoard/components/pieChart.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/pieChart.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- 动态绑定 ref：使用 props 中的 chartRef，而非硬编码 -->
   <div :ref="chartRef" id="coreLineChart" style="height: 170px; width: 100%;"></div>
 </template>
 
@@ -9,21 +8,23 @@ import * as echarts from 'echarts';
 export default {
   name: 'Container',
   props: {
-    // 1. 重命名 props：ref → chartRef，避免关键字冲突，同时定义类型和默认值
     chartRef: {
       type: String,
-      required: true, // 强制父组件传值，避免获取不到 DOM
-      // validator: (value) => {
-      //   // 验证：ref 名不能为空，确保有效
-      //   return value.trim() !== '';
-      // }
-    }
+      required: true,
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
   },
-  components: {},
-  data() {
-    return {};
+  watch: {
+    data: {
+      handler() {
+        this.initData();
+      },
+      deep: true
+    },
   },
-  computed: {},
   mounted() {
     this.$nextTick(() => {
       this.initData();
@@ -31,243 +32,122 @@ export default {
   },
   methods: {
     initData() {
-      // 2. 动态获取 DOM：通过 props 中的 chartRef 拿到对应的 ref 元素
       const chartDom = this.$refs[this.chartRef];
       if (!chartDom) {
         console.error(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
         return;
       }
+
+      if (!this.data || this.data.length === 0) {
+        console.warn('未传入数据或数据为空');
+        return;
+      }
+
       const myChart = echarts.init(chartDom);
 
-      // 自定义颜色数组（与系列一一对应）
-      const customColors = [
-        'rgba(113, 100, 255, 1)',
-        'rgba(40, 138, 255, 1)',
-        'rgba(118, 218, 190, 1)',
-        'rgba(255, 206, 106, 1)',
-      ];
+      // 主任务类型映射
+      const taskTypeMap = {
+        1: '满盘搬运',
+        2: '空盘搬运',
+        3: '备货搬运',
+      };
 
+      // 按你原有顺序定义颜色（顺序按映射顺序排）
+      const colorMap = {
+        1: 'rgba(40, 138, 255, 1)',   // 满盘搬运
+        2: 'rgba(168, 233, 255, 1)',  // 空盘搬运
+        3: 'rgba(143, 146, 255, 1)',  // 备货搬运
+      };
+
+      // 转换数据格式
+      const seriesData = this.data.map(item => ({
+        name: taskTypeMap[item.mainTaskType] || '未知类型',
+        value: item.mainTaskCount,
+        percent: item.percentage,
+        originalType: item.mainTaskType,
+      }));
+
+      // 生成 series 配置
       const option = {
-        // 标题配置（主标题+副标题）
-        // title: [
-        //   {
-        //     text: '月度',
-        //     left: 'center',
-        //     top: '35%',
-        //     textStyle: {
-        //       fontSize: 24,
-        //       letterSpacing: 5,
-        //       color: 'rgba(0, 0, 0, 0.85)',
-        //       fontFamily: 'PingFangSC, PingFang SC'
-        //     }
-        //   },
-        //   {
-        //     text: '单位:万m²',
-        //     left: 'center',
-        //     top: '50%',
-        //     textStyle: {
-        //       fontSize: 16,
-        //       color: 'rgba(0, 0, 0, 0.55)',
-        //       fontFamily: 'PingFangSC, PingFang SC'
-        //     }
-        //   }
-        // ],
         series: [
           {
-            // name: '销量',
             type: 'pie',
-            radius: ['60%', '90%'],
+            radius: ['50%', '80%'],
             center: ['50%', '50%'],
             avoidLabelOverlap: false,
             label: {
               show: true,
               position: 'outside',
               distance: 10,
-              formatter: '{c}万m²\n{b}',
+              formatter: (params) => {
+                const percent = (params.percent).toFixed(1);
+                return `${params.value}万m²\n${params.name}`;
+              },
               textStyle: {
                 fontSize: 14,
                 color: 'rgba(0, 0, 0, 0.7)',
                 fontFamily: 'PingFangSC, PingFang SC',
-                lineHeight: 1.5
-              }
+                lineHeight: 1.5,
+              },
             },
             labelLine: {
               show: true,
               length: 0,
               length2: 30,
               lineStyle: {
-                color: (params) => customColors[params.dataIndex]
-              }
+                color: (params) => colorMap[seriesData[params.dataIndex].originalType],
+              },
             },
             itemStyle: {
-              color: (params) => customColors[params.dataIndex]
+              color: (params) => colorMap[seriesData[params.dataIndex].originalType],
             },
-            data: [
-              {
-                value: 348, name: '临时搬运',
-                label: {
-                  normal: {
-                    align: 'left',
-                    distanceToLabelLine: 2,
-                    formatter: (params) => [
-                      `{b|${params.name.toLocaleString()}}`,
-                      `{c|${params.percent.toFixed(1)}% ${params.value}}`
-                    ].join('\n'),
-                    rich: {
-                      b: {
-                        color: 'rgba(140, 140, 140, 1)',
-                        fontSize: 14,
-                        padding: [0, 0, 0, 0]
-                      },
-                      c: {
-                        color: 'rgba(0, 0, 0, 0.65)',
-                        fontSize: 14,
-                        padding: [30, 0, 0, 0]
-                      }
-                    }
-                  }
+            data: seriesData.map(item => ({
+              ...item,
+              label: {
+                show: true,
+                align: 'left',
+                distanceToLabelLine: 2,
+                formatter: (params) => {
+                  const percent = (params.percent).toFixed(1);
+                  return [
+                    `{b|${params.name}}`,
+                    `{c|${percent}% ${params.value}}`
+                  ].join('\n');
                 },
-                labelLine: {
-                  lineStyle: { color: 'rgba(80, 181, 255, 1)' }
+                rich: {
+                  b: {
+                    color: 'rgba(140, 140, 140, 1)',
+                    fontSize: 14,
+                    padding: [0, 0, 0, 0],
+                  },
+                  c: {
+                    color: 'rgba(0, 0, 0, 0.65)',
+                    fontSize: 14,
+                    padding: [30, 0, 0, 0],
+                  },
                 },
-                itemStyle: { color: 'rgba(80, 181, 255, 1)' }
               },
-              {
-                value: 435, name: '满盘搬运',
-                label: {
-                  normal: {
-                    align: 'left',
-                    distanceToLabelLine: 2,
-                    formatter: (params) => [
-                      `{b|${params.name.toLocaleString()}}`,
-                      `{c|${params.percent.toFixed(1)}% ${params.value}}`
-                    ].join('\n'),
-                    rich: {
-                      b: {
-                        color: 'rgba(140, 140, 140, 1)',
-                        fontSize: 14,
-                        padding: [0, 0, 0, 0]
-                      },
-                      c: {
-                        color: 'rgba(0, 0, 0, 0.65)',
-                        fontSize: 14,
-                        padding: [30, 0, 0, 0]
-                      }
-                    }
-                  }
-                },
-                labelLine: {
-                  length: 10,
-                  length2: 20,
-                  lineStyle: { color: 'rgba(40, 138, 255, 1)' }
-                },
-                itemStyle: { color: 'rgba(40, 138, 255, 1)' }
+              labelLine: {
+                lineStyle: { color: colorMap[item.originalType] },
               },
-              {
-                value: 580, name: '备料搬运',
-                label: {
-                  normal: {
-                    align: 'left',
-                    distanceToLabelLine: 2,
-                    formatter: (params) => [
-                      `{b|${params.name.toLocaleString()}}`,
-                      `{c| ${params.value} ${params.percent.toFixed(1)}%}`
-                    ].join('\n'),
-                    rich: {
-                      b: {
-                        color: 'rgba(140, 140, 140, 1)',
-                        fontSize: 14,
-                        padding: [0, 0, 0, 0]
-                      },
-                      c: {
-                        color: 'rgba(0, 0, 0, 0.65)',
-                        fontSize: 14,
-                        padding: [30, 0, 0, 0]
-                      }
-                    }
-                  }
-                },
-                labelLine: {
-                  lineStyle: { color: 'rgba(143, 146, 255, 1)' }
-                },
-                itemStyle: { color: 'rgba(143, 146, 255, 1)' }
-              },
-              {
-                value: 484, name: '空盘搬运',
-                label: {
-                  normal: {
-                    align: 'left',
-                    distanceToLabelLine: 2,
-                    formatter: (params) => [
-                      `{b|${params.name.toLocaleString()}}`,
-                      `{c| ${params.value} ${params.percent.toFixed(1)}%}`
-                    ].join('\n'),
-                    rich: {
-                      b: {
-                        color: 'rgba(140, 140, 140, 1)',
-                        fontSize: 14,
-                        padding: [0, 0, 0, 0]
-                      },
-                      c: {
-                        color: 'rgba(0, 0, 0, 0.65)',
-                        fontSize: 14,
-                        padding: [30, 0, 0, 0]
-                      }
-                    }
-                  }
-                },
-                // label: {
-                //   normal: {
-                //     align: 'left',
-                //     distanceToLabelLine: 2,
-                //     formatter: (params) => [
-                //       `{b|${params.value.toLocaleString()}}`,
-                //       `{c|${params.name}}`
-                //     ].join('\n'),
-                //     rich: {
-                //       // hr: {
-                //       //   color: 'rgba(168, 233, 255, 1)',
-                //       //   fontSize: 20,
-                //       //   padding: [26, 8, 0, 0]
-                //       // },
-                //       b: {
-                //         color: 'rgba(0, 0, 0, 0.65)',
-                //         fontSize: 18,
-                //         padding: [0, 0, 0, 0]
-                //       },
-                //       c: {
-                //         color: 'rgba(0, 0, 0, 0.65)',
-                //         fontSize: 14,
-                //         padding: [30, 0, 0, -5]
-                //       }
-                //     }
-                //   }
-                // },
-                labelLine: {
-                  lineStyle: { color: 'rgba(168, 233, 255, 1)' }
-                },
-                itemStyle: { color: 'rgba(168, 233, 255, 1)' }
-              }
-            ]
-          }
-        ]
+              itemStyle: { color: colorMap[item.originalType] },
+            })),
+          },
+        ],
       };
 
-      option && myChart.setOption(option);
+      myChart.setOption(option);
 
       // 窗口缩放监听
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
+      const resizeHandler = () => myChart.resize();
+      window.addEventListener('resize', resizeHandler);
 
       // 组件销毁清理
       this.$once('hook:destroyed', () => {
-        window.removeEventListener('resize', () => {
-          myChart.resize();
-        });
+        window.removeEventListener('resize', resizeHandler);
         myChart.dispose();
       });
-    }
+    },
   },
 };
 </script>
diff --git a/src/views/productionVisualization/equipmentBoard/components/pieChartStatus.vue b/src/views/productionVisualization/equipmentBoard/components/pieChartStatus.vue
index cc071222..e0cdb212 100644
--- a/src/views/productionVisualization/equipmentBoard/components/pieChartStatus.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/pieChartStatus.vue
@@ -5,11 +5,11 @@
     <div :ref="chartRef" id="coreLineChart" class="chart-container"></div>
     <!-- 自定义图例（三排三列 + 带数值） -->
     <div class="custom-legend">
-      <div class="legend-item" v-for="(item, index) in chartData" :key="index"
-        >
+      <div class="legend-item" v-for="(item, index) in chartData" :key="index" @click="handleLegendClick(index)"
+        :class="{ unselected: !selectedStatus[index] }">
         <!-- 左侧：颜色块 + 名称（垂直居中对齐） -->
         <div class="legend-left">
-          <div class="legend-color" :style="{ backgroundColor: customColors[index] }"></div>
+          <div class="legend-color" :style="{ backgroundColor: customColors[index % customColors.length] }"></div>
           <span class="legend-name">{{ item.name }}</span>
         </div>
         <!-- 右侧：数值（与左侧垂直居中对齐） -->
@@ -28,7 +28,11 @@ export default {
     chartRef: {
       type: String,
       required: true
-    }
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
   },
   data() {
     return {
@@ -45,35 +49,97 @@ export default {
         'rgba(80, 181, 255, 1)',
         'rgba(168, 233, 255, 1)',
       ],
-      chartData: [
-        { value: 348, name: '暂停中' },
-        { value: 435, name: '已终止-回收' },
-        { value: 580, name: '已终止-待回收' },
-        { value: 484, name: '已终止' },
-        { value: 484, name: '已完成' },
-        { value: 484, name: '执行中' },
-        { value: 484, name: '异常' },
-        { value: 484, name: '待执行' },
-        { value: 484, name: '待下发' },
-
-      ]
+      // 状态映射
+      stateMap: {
+        0: '待下发',
+        1: '待执行',
+        2: '执行中',
+        3: '取货完成',
+        4: '完成',
+        5: '暂停中',
+        6: '取消',
+        7: '异常',
+      }
     };
   },
+  computed: {
+    // 处理图表数据
+    chartData() {
+      if (!this.data || this.data.length === 0) {
+        return [];
+      }
+
+      return this.data
+        .map(item => ({
+          name: this.stateMap[item.mainTaskState] || `状态${item.mainTaskState}`,
+          value: item.mainTaskCount,
+          state: item.mainTaskState,
+          percentage: item.percentage
+        }));
+    },
+
+    // 计算总数
+    total() {
+      return this.chartData.reduce((sum, item) => sum + item.value, 0);
+    }
+  },
+  watch: {
+    // 监听数据变化，重新渲染图表
+    chartData: {
+      handler() {
+        this.initChart();
+      },
+      deep: true
+    },
+    // 监听选中状态变化，更新图表
+    selectedStatus: {
+      handler() {
+        if (this.myChart) {
+          this.updateChartSelection();
+        }
+      },
+      deep: true
+    }
+  },
   mounted() {
     this.$nextTick(() => {
-      this.initData();
+      this.initChart();
     });
   },
   methods: {
-    initData() {
+    initChart() {
       const chartDom = this.$refs[this.chartRef];
       if (!chartDom) {
         console.error(`图表容器未找到！请确认父组件传递的 chartRef 为 "${this.chartRef}"`);
         return;
       }
+
+      // 初始化或重置图表
+      if (this.myChart) {
+        this.myChart.dispose();
+      }
+
       this.myChart = echarts.init(chartDom);
+
+      // 初始化选中状态（全部选中）
       this.selectedStatus = this.chartData.map(() => true);
-      const total = this.chartData.reduce((sum, item) => sum + item.value, 0);
+
+      this.renderChart();
+
+      // 窗口缩放监听
+      const resizeHandler = () => this.myChart?.resize();
+      window.addEventListener('resize', resizeHandler);
+
+      this.$once('hook:destroyed', () => {
+        window.removeEventListener('resize', resizeHandler);
+        this.myChart?.dispose();
+      });
+    },
+
+    renderChart() {
+      if (!this.myChart || this.chartData.length === 0) {
+        return;
+      }
 
       const option = {
         legend: { show: false },
@@ -83,8 +149,6 @@ export default {
           backgroundColor: '#FFFFFF',
           boxShadow: '0px 4px 8px 0px rgba(0, 0, 0, 0.16)',
           borderRadius: '4px',
-          width: 153,
-          height: 42,
           borderWidth: 0,
           textStyle: {
             color: 'rgba(0, 0, 0, 0.85)',
@@ -92,8 +156,8 @@ export default {
             lineHeight: 1.5
           },
           formatter: (params) => {
-            const color = this.customColors[params.dataIndex];
-            const percent = ((params.value / total) * 100).toFixed(1);
+            const color = this.customColors[params.dataIndex % this.customColors.length];
+            const percent = ((params.value / this.total) * 100).toFixed(1);
             return `
               <div style="display: flex; align-items: center; gap: 8px;">
                 <div style="width: 12px; height: 12px; background: ${color};"></div>
@@ -107,7 +171,7 @@ export default {
         },
         title: [
           {
-            text: total.toString(),
+            text: this.total.toString(),
             left: 'center',
             top: '35%',
             textStyle: {
@@ -137,39 +201,43 @@ export default {
             label: { show: false },
             labelLine: { show: false },
             itemStyle: {
-              color: (params) => this.customColors[params.dataIndex],
+              color: (params) => this.customColors[params.dataIndex % this.customColors.length],
               borderWidth: 2,
               borderColor: '#fff'
             },
             data: this.chartData.map((item, index) => ({
-              ...item,
-              itemStyle: { color: this.customColors[index] }
+              name: item.name,
+              value: item.value,
+              itemStyle: { color: this.customColors[index % this.customColors.length] }
             })),
-            selected: this.selectedStatus.reduce((obj, selected, index) => {
-              obj[this.chartData[index].name] = selected;
-              return obj;
-            }, {})
+            selected: this.getSelectedMap()
           }
         ]
       };
 
-      option && this.myChart.setOption(option);
-      window.addEventListener('resize', () => this.myChart?.resize());
-      this.$once('hook:destroyed', () => {
-        window.removeEventListener('resize', () => this.myChart?.resize());
-        this.myChart?.dispose();
-      });
+      this.myChart.setOption(option, true);
     },
-    handleLegendClick(index) {
-      this.selectedStatus[index] = !this.selectedStatus[index];
+
+    getSelectedMap() {
+      const selectedMap = {};
+      this.chartData.forEach((item, index) => {
+        selectedMap[item.name] = this.selectedStatus[index];
+      });
+      return selectedMap;
+    },
+
+    updateChartSelection() {
+      if (!this.myChart) return;
+
       this.myChart.setOption({
         series: [{
-          selected: this.selectedStatus.reduce((obj, selected, i) => {
-            obj[this.chartData[i].name] = selected;
-            return obj;
-          }, {})
+          selected: this.getSelectedMap()
         }]
       });
+    },
+
+    handleLegendClick(index) {
+      this.$set(this.selectedStatus, index, !this.selectedStatus[index]);
     }
   }
 };
@@ -196,19 +264,24 @@ export default {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(3, 1fr); // 三列
-  grid-template-rows: repeat(3, 1fr); // 两行（6个item刚好2行3列）
-  // gap: 15px 10px; // 行列间距
-  align-items: center; // 网格内垂直居中
+  gap: 10px 15px;
+  align-items: center;
+  flex: 1;
 }
 
 // 单个图例项：横向排列，垂直居中
 .legend-item {
   display: flex;
-  align-items: left; // 内部元素垂直居中
-  flex-direction: column;
+  align-items: center; // 内部元素垂直居中
+  justify-content: space-between;
   width: 100%;
   cursor: pointer;
-  // gap: 10px; // 左右两部分间距
+  padding: 4px 0;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+  }
 }
 
 // 左侧：颜色块 + 名称（垂直居中）
@@ -238,22 +311,21 @@ export default {
 // 数值
 .legend-value {
   font-size: 14px;
-  margin-left: 16px;
   color: rgba(0, 0, 0, 0.65);
   font-weight: 500;
   white-space: nowrap; // 防止换行
 }
 
 // 未选中状态
-// .legend-item.unselected {
+.legend-item.unselected {
 
-//   .legend-name,
-//   .legend-value {
-//     color: rgba(0, 0, 0, 0.3);
-//   }
+  .legend-name,
+  .legend-value {
+    color: rgba(0, 0, 0, 0.3);
+  }
 
-//   .legend-color {
-//     opacity: 0.5;
-//   }
-// }
+  .legend-color {
+    opacity: 0.3;
+  }
+}
 </style>
diff --git a/src/views/productionVisualization/equipmentBoard/components/realTask.vue b/src/views/productionVisualization/equipmentBoard/components/realTask.vue
index d7d9bb1f..5a354dc6 100644
--- a/src/views/productionVisualization/equipmentBoard/components/realTask.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/realTask.vue
@@ -1,9 +1,9 @@
 <template>
   <div style="flex: 1">
     <div class="agvStatusContent">
-      <div class="title">实时任务</div>
+      <!-- <div class="title">实时任务</div>
       <base-table style="width: 100%;margin-top: 6px;height: 300px;" :page="1" :limit="10" :show-index="true" :beilv="1"
-        :tableConfig="tableProps" :table-data="maintenanceTasks" />
+        :tableConfig="tableProps" :table-data="maintenanceTasks" /> -->
     </div>
   </div>
 </template>
diff --git a/src/views/productionVisualization/equipmentBoard/components/taskStatus.vue b/src/views/productionVisualization/equipmentBoard/components/taskStatus.vue
index c6b8aa0f..e3c16096 100644
--- a/src/views/productionVisualization/equipmentBoard/components/taskStatus.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/taskStatus.vue
@@ -2,7 +2,7 @@
   <div style="flex: 1">
     <div class="agvStatusContent">
       <div class="title">任务状态占比 ·今日</div>
-      <pieChart :chartRef=" 'taskStatusRef' " />
+      <pieChart :chartRef=" 'taskStatusRef' " :data="data" />
     </div>
   </div>
 </template>
@@ -13,12 +13,9 @@ export default {
   name: 'AGVStatus',
   components: { pieChart },
   props: {
-    energyObj: {
-      type: Object,
-      default: () => ({
-        electricComu: 0,
-        steamComu: 0
-      })
+    data: {
+      type: Array,
+      default: () => ([])
     }
   },
   data() {
diff --git a/src/views/productionVisualization/equipmentBoard/components/taskType.vue b/src/views/productionVisualization/equipmentBoard/components/taskType.vue
index 8a3850b7..7fd9ae48 100644
--- a/src/views/productionVisualization/equipmentBoard/components/taskType.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/taskType.vue
@@ -2,7 +2,7 @@
   <div style="flex: 1">
     <div class="agvStatusContent">
       <div class="title">任务类型占比 ·今日</div>
-      <pieChart :chartRef=" 'taskTypeRef' " />
+      <pieChart :chartRef=" 'taskTypeRef' " :data ='data' />
     </div>
   </div>
 </template>
@@ -13,12 +13,9 @@ export default {
   name: 'AGVStatus',
   components: { pieChart },
   props: {
-    energyObj: {
-      type: Object,
-      default: () => ({
-        electricComu: 0,
-        steamComu: 0
-      })
+    data: {
+      type: Array,
+      default: () => ([])
     }
   },
   data() {
diff --git a/src/views/productionVisualization/equipmentBoard/components/threeDimensionalChart.vue b/src/views/productionVisualization/equipmentBoard/components/threeDimensionalChart.vue
index 34beab98..cd0a4c49 100644
--- a/src/views/productionVisualization/equipmentBoard/components/threeDimensionalChart.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/threeDimensionalChart.vue
@@ -1178,7 +1178,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道1 -->
           <div v-for="i in 3" :key="`BM1010${i}`" :ref="`BM1010${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '706px'
           }">
             <div :ref="`BM1010${i}L`" style="width: 11px;
@@ -1195,7 +1195,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道2 -->
           <div v-for="i in 3" :key="`BM1020${i}`" :ref="`BM1020${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '740px'
           }">
             <div :ref="`BM1020${i}L`" style="width: 11px;
@@ -1212,7 +1212,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道3 -->
           <div v-for="i in 3" :key="`BM1030${i}`" :ref="`BM1030${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '774px'
           }">
             <div :ref="`BM1030${i}L`" style="width: 11px;
@@ -1229,7 +1229,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道4 -->
           <div v-for="i in 3" :key="`BM1040${i}`" :ref="`BM1040${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '808px'
           }">
             <div :ref="`BM1040${i}L`" style="width: 11px;
@@ -1239,14 +1239,14 @@ padding: 1.5px;">
             </div>
             <div :ref="`BM1040${i}R`" style="width: 11px;
 height: 11px;
-padding: 1.5px;">
+padding: 1..5px;">
               <div :class="getPositionClass(`BM1040${i}R`)"></div>
             </div>
           </div>
 
           <!-- 满盘缓存区2巷道5 -->
           <div v-for="i in 3" :key="`BM1050${i}`" :ref="`BM1050${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '842px'
           }">
             <div :ref="`BM1050${i}L`" style="width: 11px;
@@ -1263,7 +1263,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道6 -->
           <div v-for="i in 3" :key="`BM1060${i}`" :ref="`BM1060${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '878px'
           }">
             <div :ref="`BM1060${i}L`" style="width: 11px;
@@ -1280,7 +1280,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道7 -->
           <div v-for="i in 3" :key="`BM1070${i}`" :ref="`BM1070${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '910px'
           }">
             <div :ref="`BM1070${i}L`" style="width: 11px;
@@ -1297,7 +1297,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道8 -->
           <div v-for="i in 3" :key="`BM1080${i}`" :ref="`BM1080${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '946px'
           }">
             <div :ref="`BM1080${i}L`" style="width: 11px;
@@ -1314,7 +1314,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道9 -->
           <div v-for="i in 3" :key="`BM1090${i}`" :ref="`BM1090${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '980px'
           }">
             <div :ref="`BM1090${i}L`" style="width: 11px;
@@ -1331,7 +1331,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道10 -->
           <div v-for="i in 3" :key="`BM1100${i}`" :ref="`BM1100${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '1012px'
           }">
             <div :ref="`BM1100${i}L`" style="width: 11px;
@@ -1348,7 +1348,7 @@ padding: 1.5px;">
 
           <!-- 满盘缓存区2巷道11 -->
           <div v-for="i in 3" :key="`BM1110${i}`" :ref="`BM1110${i}`" class="location" :style="{
-            top: `${201 + (i - 1) * 13}px`,
+            top: `${201 + (3 - i) * 13}px`,
             left: '1048px'
           }">
             <div :ref="`BM1110${i}L`" style="width: 11px;
@@ -1362,7 +1362,6 @@ padding: 1.5px;">
               <div :class="getPositionClass(`BM1110${i}R`)"></div>
             </div>
           </div>
-
           <!-- 满盘缓存区3巷道1 -->
           <div v-for="i in 4" :key="`BM2010${i}`" :ref="`BM2010${i}`" class="location" :style="{
             top: `${250 + (i - 1) * 13}px`,
@@ -1694,12 +1693,12 @@ padding: 1.5px;">
             <div :ref="`AM1010${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1010${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1010${i}L`)"></div>
             </div>
             <div :ref="`AM1010${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1010${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1010${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝A线满盘缓存区第2巷道1排 -->
@@ -1710,12 +1709,12 @@ padding: 1.5px;">
             <div :ref="`AM1020${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1020${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1020${i}L`)"></div>
             </div>
             <div :ref="`AM1020${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1020${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1020${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝A线满盘缓存区第3巷道1排 -->
@@ -1726,12 +1725,12 @@ padding: 1.5px;">
             <div :ref="`AM1030${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1030${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1030${i}L`)"></div>
             </div>
             <div :ref="`AM1030${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1030${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1030${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝A线满盘缓存区第4巷道1排 -->
@@ -1742,12 +1741,12 @@ padding: 1.5px;">
             <div :ref="`AM1040${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1040${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1040${i}L`)"></div>
             </div>
             <div :ref="`AM1040${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1040${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1040${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝A线满盘缓存区第5巷道1排 -->
@@ -1758,12 +1757,12 @@ padding: 1.5px;">
             <div :ref="`AM1050${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1050${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1050${i}L`)"></div>
             </div>
             <div :ref="`AM1050${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1050${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1050${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝A线满盘缓存区第6巷道1排 -->
@@ -1774,12 +1773,12 @@ padding: 1.5px;">
             <div :ref="`AM1060${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1060${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1060${i}L`)"></div>
             </div>
             <div :ref="`AM1060${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1060${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1060${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝A线满盘缓存区第7巷道1排 -->
@@ -1790,12 +1789,12 @@ padding: 1.5px;">
             <div :ref="`AM1070${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1070${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1070${i}L`)"></div>
             </div>
             <div :ref="`AM1070${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1070${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1070${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝A线满盘缓存区第8巷道1排 -->
@@ -1806,12 +1805,12 @@ padding: 1.5px;">
             <div :ref="`AM1080$${i}L`" style="width: 11px;
               height: 11px;
               padding: 1.5px;">
-              <div :class="getPositionClass(`AM1080$${i}L`)" ></div>
+              <div :class="getPositionClass(`AM1080$${i}L`)"></div>
             </div>
             <div :ref="`AM1080$${i}R`" style="width: 11px;
             height: 11px;
             padding: 1.5px; ">
-              <div :class="getPositionClass(`AM1080$${i}R`)" ></div>
+              <div :class="getPositionClass(`AM1080$${i}R`)"></div>
             </div>
           </div>
 
@@ -1824,12 +1823,12 @@ padding: 1.5px;">
             <div :ref="`AM2010${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2010${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2010${i}L`)"></div>
             </div>
             <div :ref="`AM2010${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2010${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2010${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝B线满盘缓存区第2巷道1排 -->
@@ -1840,12 +1839,12 @@ padding: 1.5px;">
             <div :ref="`AM2020${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2020${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2020${i}L`)"></div>
             </div>
             <div :ref="`AM2020${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2020${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2020${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝B线满盘缓存区第3巷道1排 -->
@@ -1856,12 +1855,12 @@ padding: 1.5px;">
             <div :ref="`AM2030${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2030${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2030${i}L`)"></div>
             </div>
             <div :ref="`AM2030${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2030${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2030${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝B线满盘缓存区第4巷道1排 -->
@@ -1872,12 +1871,12 @@ padding: 1.5px;">
             <div :ref="`AM2040${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2040${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2040${i}L`)"></div>
             </div>
             <div :ref="`AM2040${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2040${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2040${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝B线满盘缓存区第5巷道1排 -->
@@ -1888,12 +1887,12 @@ padding: 1.5px;">
             <div :ref="`AM2050${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2050${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2050${i}L`)"></div>
             </div>
             <div :ref="`AM2050${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2050${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2050${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝B线满盘缓存区第6巷道1排 -->
@@ -1904,12 +1903,12 @@ padding: 1.5px;">
             <div :ref="`AM2060${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2060${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2060${i}L`)"></div>
             </div>
             <div :ref="`AM2060${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2060${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2060${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝B线满盘缓存区第7巷道1排 -->
@@ -1920,12 +1919,12 @@ padding: 1.5px;">
             <div :ref="`AM2070${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2070${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2070${i}L`)"></div>
             </div>
             <div :ref="`AM2070${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2070${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2070${i}R`)"></div>
             </div>
           </div>
           <!-- 拉丝B线满盘缓存区第8巷道1排 -->
@@ -1936,12 +1935,12 @@ padding: 1.5px;">
             <div :ref="`AM2080${i}L`" style="width: 11px;
     height: 11px;
     padding: 1.5px;">
-              <div :class="getPositionClass(`AM2080${i}L`)" ></div>
+              <div :class="getPositionClass(`AM2080${i}L`)"></div>
             </div>
             <div :ref="`AM2080${i}R`" style="width: 11px;
   height: 11px;
   padding: 1.5px; ">
-              <div :class="getPositionClass(`AM2080${i}R`)" ></div>
+              <div :class="getPositionClass(`AM2080${i}R`)"></div>
             </div>
           </div>
           <!-- 循环渲染状态项 -->
@@ -2035,8 +2034,6 @@ export default {
   }
 }
 </script>
-"lineEdgeLibraryState": 1,
-"usableState": 3,
 <style lang='scss' scoped>
 .threeDimensionalChart {
   width: 1493px;
diff --git a/src/views/productionVisualization/equipmentBoard/index.vue b/src/views/productionVisualization/equipmentBoard/index.vue
index ff76e686..bf064d69 100644
--- a/src/views/productionVisualization/equipmentBoard/index.vue
+++ b/src/views/productionVisualization/equipmentBoard/index.vue
@@ -1,49 +1,39 @@
 <template>
-	<div id="dayReport" class="dayReport" :style="styles">
-		<ReportHeader top-title="车间生产看板" />
-		<div
-			class="main-body"
-			style="
+  <div id="dayReport" class="dayReport" :style="styles">
+    <ReportHeader top-title="车间生产看板" />
+    <div class="main-body" style="
 				flex: 1;
 				display: flex;
 				padding: 16px 20px 22px 24px;
 				flex-direction: column;
 			">
-			<div class="top" style="display: flex; gap: 16px">
-				<div
-					class="top-three"
-					style="display: grid; gap: 12px; grid-template-columns: 367px 1493px">
-					<agvStatus />
-					<threeDimensionalChart :dataList="dataList" />
-				</div>
-			</div>
-			<div class="top" style="display: flex; gap: 16px; margin-top: 6px">
-				<div
-					class="bottom-three"
-					style="
+      <div class="top" style="display: flex; gap: 16px">
+        <div class="top-three" style="display: grid; gap: 12px; grid-template-columns: 367px 1493px">
+          <agvStatus :agvList='agvAlarmListData' />
+          <threeDimensionalChart :dataList="dataList" />
+        </div>
+      </div>
+      <div class="top" style="display: flex; gap: 16px; margin-top: 6px">
+        <div class="bottom-three" style="
 						display: grid;
 						gap: 12px;
-						grid-template-columns: 512px 930px 402px;
+						grid-template-columns: 1344px 512px;
 					">
-					<div
-						class="left-three"
-						style="display: grid; gap: 16px; grid-template-rows: 213px 213px">
-						<taskType />
-						<taskStatus />
-					</div>
-					<div
-						class="center-three"
-						style="display: grid; gap: 16px; grid-template-rows: 330px 92px">
-						<realTask />
-						<alarm />
 
-						<!-- <taskStatus /> -->
-					</div>
-					<alarmTop />
-				</div>
-			</div>
-		</div>
-	</div>
+          <div class="center-three" style="">
+            <!-- <realTask /> -->
+            <alarmInfo :agvList='agvAlarmInfo' />
+
+            <!-- <taskStatus /> -->
+          </div>
+          <div class="left-three" style="display: grid; gap: 16px; grid-template-rows: 213px 213px">
+            <taskType :data="taskTypeToday" />
+            <taskStatus :data="taskStatusToday" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 import ReportHeader from './components/Header.vue';
@@ -52,12 +42,12 @@ import agvStatus from './components/agvStatus.vue';
 import taskType from './components/taskType.vue';
 import realTask from './components/realTask.vue';
 import alarm from './components/alarm.vue';
-import alarmTop from './components/alarmTop.vue';
+import alarmInfo from './components/alarmInfo.vue';
 
 import taskStatus from './components/taskStatus.vue';
 
 import threeDimensionalChart from './components/threeDimensionalChart.vue';
-import { getLineEdgeLibraryList } from '../../../api/visualization/visualization';
+import { getLineEdgeLibraryList, getAgvAlarmInfo, getTaskTypeToday, getTaskStatusToday, getAgvExample } from '../../../api/visualization/visualization';
 
 // import financeCosts from './components/financeCosts.vue'
 // import keyProductionIndicators from './components/keyProductionIndicators.vue'
@@ -75,21 +65,28 @@ export default {
 		taskStatus,
 		realTask,
 		alarm,
-		alarmTop,
+    alarmInfo,
 	},
 	data() {
 		return {
 			// isFullScreen: false,
 			timer: null,
 			beilv: 1,
-			value: 100,
+      value: 100,
+      taskTypeToday: [],
+      taskStatusToday: [],
+      agvAlarmInfo: [],
+      agvAlarmListData: [],
+      agvAlarmInfoData:[],
+      timer: null, // 存储定时器
 			dataList: [],
 		};
 	},
 
 	created() {
-		// this.init()
-		this.windowWidth(document.documentElement.clientWidth);
+    // this.init()
+    this.windowWidth(document.documentElement.clientWidth);
+    localStorage.removeItem('agv_carousel_position');
 	},
 	computed: {
 		// ...mapGetters(['sidebar']),
@@ -109,7 +106,7 @@ export default {
 				this.beilv2 = this.clientWidth / 1920;
 				this.timer = true;
 				let _this = this;
-				setTimeout(function () {
+				setTimeout(function () {·
 					_this.timer = false;
 				}, 500);
 			}
@@ -133,89 +130,224 @@ export default {
 				_this.clientWidth = `${document.documentElement.clientWidth}`;
 				this.beilv = _this.clientWidth / baseWidth;
 			})();
-		};
-		this.getData();
-	},
-	methods: {
-		getData(data) {
-			console.log(data);
-			getLineEdgeLibraryList().then((res) => {
-				console.log('res', res);
+    };
+    this.getData();
+    this.loadAgvExampleData()
+    this.timer = setInterval(() => {
+      this.getData();
+    }, 30000);
 
-				this.dataList = res.data;
-			});
-		},
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  },
+	methods: {
+    async getData(data) {
+      console.log(data);
+      const [lineEdgeRes, taskTypeRes, taskStatusRes, agvAlarmRes] = await Promise.all([
+        getLineEdgeLibraryList(),
+        getTaskTypeToday(),
+        getTaskStatusToday(),
+        getAgvAlarmInfo()
+      ]);
+
+      this.dataList = lineEdgeRes.data;
+      this.taskTypeToday = taskTypeRes.data;
+      this.taskStatusToday = taskStatusRes.data;
+      this.agvAlarmListData = agvAlarmRes;
+      // this.agvAlarmListData = [
+      //   {
+      //     "deviceName": "AGV-01",
+      //     "alarmTrigger": false,
+      //     "data": [
+      //       {
+      //         "createTime": "2024-01-15 08:30:25",
+      //         "updateTime": "2024-01-15 09:15:30",
+      //         "creator": "admin",
+      //         "updater": "operator1",
+      //         "deleted": false,
+      //         "id": 1001,
+      //         "type": 1,
+      //         "code": "ERR-001",
+      //         "name": "电机过载保护",
+      //         "solutionContent": "检查电机负载，清理轨道障碍物",
+      //         "warnName": "电机异常",
+      //         "faultComponent": "驱动电机",
+      //         "faultEventName": "电机电流过高",
+      //         "eventCause": "轨道异物卡滞",
+      //         "troubleshootStep": "1.停止AGV运行 2.检查轨道 3.清理异物 4.重启设备",
+      //         "classification": 2,
+      //         "remark": "需要及时处理，避免电机损坏",
+      //         "status": 1,
+      //         "sort": 1,
+      //         "version": 1
+      //       },
+      //       {
+      //         "createTime": "2024-01-15 08:30:25",
+      //         "updateTime": "2024-01-15 09:15:30",
+      //         "creator": "admin",
+      //         "updater": "operator1",
+      //         "deleted": false,
+      //         "id": 1001,
+      //         "type": 1,
+      //         "code": "ERR-001",
+      //         "name": "电机过载保护",
+      //         "solutionContent": "检查电机负载，清理轨道障碍物",
+      //         "warnName": "电机异常",
+      //         "faultComponent": "驱动电机",
+      //         "faultEventName": "电机电流过高",
+      //         "eventCause": "轨道异物卡滞",
+      //         "troubleshootStep": "1.停止AGV运行 2.检查轨道 3.清理异物 4.重启设备",
+      //         "classification": 2,
+      //         "remark": "需要及时处理，避免电机损坏",
+      //         "status": 1,
+      //         "sort": 1,
+      //         "version": 1
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     "deviceName": "AGV-02",
+      //     "alarmTrigger": false,
+      //     "data": [
+      //       {
+      //         "createTime": "2024-01-15 10:20:15",
+      //         "updateTime": "2024-01-15 10:45:22",
+      //         "creator": "admin",
+      //         "updater": "operator2",
+      //         "deleted": false,
+      //         "id": 1002,
+      //         "type": 2,
+      //         "code": "ERR-002",
+      //         "name": "电池电量过低",
+      //         "solutionContent": "AGV已自动返回充电桩充电",
+      //         "warnName": "电量告警",
+      //         "faultComponent": "锂电池组",
+      //         "faultEventName": "电压低于阈值",
+      //         "eventCause": "连续运行时间过长，未及时充电",
+      //         "troubleshootStep": "1.等待AGV自动充电 2.检查充电桩连接 3.手动更换电池",
+      //         "classification": 1,
+      //         "remark": "电量剩余15%，需关注充电状态",
+      //         "status": 2,
+      //         "sort": 2,
+      //         "version": 1
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     "deviceName": "AGV-03",
+      //     "alarmTrigger": false,
+      //     "data": [
+      //       {
+      //         "createTime": "2024-01-15 14:35:42",
+      //         "updateTime": "2024-01-15 15:00:18",
+      //         "creator": "admin",
+      //         "updater": "operator3",
+      //         "deleted": false,
+      //         "id": 1003,
+      //         "type": 3,
+      //         "code": "ERR-003",
+      //         "name": "激光雷达通讯故障",
+      //         "solutionContent": "检查雷达连接线，重启雷达驱动",
+      //         "warnName": "传感器异常",
+      //         "faultComponent": "激光雷达",
+      //         "faultEventName": "通讯超时",
+      //         "eventCause": "线束松动或电磁干扰",
+      //         "troubleshootStep": "1.检查雷达指示灯 2.重新插拔连接线 3.重启系统 4.更换雷达",
+      //         "classification": 3,
+      //         "remark": "影响导航定位功能",
+      //         "status": 1,
+      //         "sort": 3,
+      //         "version": 2
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     "deviceName": "AGV-04",
+      //     "alarmTrigger": false,
+      //     "data": [
+      //       {
+      //         "createTime": "2024-01-15 09:45:33",
+      //         "updateTime": "2024-01-15 10:30:45",
+      //         "creator": "admin",
+      //         "updater": "operator1",
+      //         "deleted": false,
+      //         "id": 1004,
+      //         "type": 1,
+      //         "code": "ERR-004",
+      //         "name": "举升机构异常",
+      //         "solutionContent": "检查液压系统，补充液压油",
+      //         "warnName": "机械故障",
+      //         "faultComponent": "举升液压缸",
+      //         "faultEventName": "压力不足",
+      //         "eventCause": "液压油泄漏或油泵故障",
+      //         "troubleshootStep": "1.检查液压油位 2.排查泄漏点 3.更换密封圈 4.测试压力",
+      //         "classification": 2,
+      //         "remark": "举升高度不达标，需紧急处理",
+      //         "status": 1,
+      //         "sort": 4,
+      //         "version": 1
+      //       }
+      //     ]
+      //   },
+      //   {
+      //     "deviceName": "AGV-05",
+      //     "alarmTrigger": false,
+      //     "data": [
+      //       {
+      //         "createTime": "2024-01-15 16:20:55",
+      //         "updateTime": "2024-01-15 17:05:33",
+      //         "creator": "admin",
+      //         "updater": "operator2",
+      //         "deleted": false,
+      //         "id": 1005,
+      //         "type": 2,
+      //         "code": "ERR-005",
+      //         "name": "导航定位偏移",
+      //         "solutionContent": "重新标定导航路径，更新地图",
+      //         "warnName": "定位异常",
+      //         "faultComponent": "导航系统",
+      //         "faultEventName": "定位精度超差",
+      //         "eventCause": "地面二维码磨损或反光柱被遮挡",
+      //         "troubleshootStep": "1.清洁二维码/反光柱 2.重新标定 3.更新导航地图 4.校准传感器",
+      //         "classification": 3,
+      //         "remark": "偏差超过5cm，需重新校准",
+      //         "status": 2,
+      //         "sort": 5,
+      //         "version": 1
+      //       }
+      //     ]
+      //   }
+      // ];
+      // 根据告警状态决定显示内容
+      if (this.isAllAlarmTriggered()) {
+        console.log('无告警，加载示例数据');
+        // await this.loadAgvExampleData();
+        this.agvAlarmInfo = this.agvAlarmInfoData
+      } else {
+        console.log('有告警，使用真实数据');
+        this.agvAlarmInfo = agvAlarmRes;
+        // this.agvAlarmInfo = this.agvAlarmListData;
+
+      }
+    },
+    async loadAgvExampleData() {
+      const res = await getAgvExample()
+      console.log('getAgvExample 接口返回:', res);
+      this.agvAlarmInfoData = res
+    },
+    isAllAlarmTriggered() {
+      if (!this.agvAlarmListData || this.agvAlarmListData.length === 0) return false;
+      return this.agvAlarmListData.every(agv => agv.alarmTrigger === false);
+    },
 		windowWidth(value) {
 			this.clientWidth = value;
 			this.beilv2 = this.clientWidth / 1920;
 		},
-		// change() {
-		//   this.isFullScreen = screenfull.isFullscreen
-		// },
-		// init() {
-		//   if (!screenfull.isEnabled) {
-		//     this.$message({
-		//       message: 'you browser can not work',
-		//       type: 'warning'
-		//     })
-		//     return false
-		//   }
-		//   screenfull.on('change', this.change)
-		// },
-		// destroy() {
-		//   if (!screenfull.isEnabled) {
-		//     this.$message({
-		//       message: 'you browser can not work',
-		//       type: 'warning'
-		//     })
-		//     return false
-		//   }
-		//   screenfull.off('change', this.change)
-		// },
-		// // 全屏
-		// screenfullChange() {
-		//   console.log('screenfull.enabled', screenfull.isEnabled);
-
-		//   if (!screenfull.isEnabled) {
-		//     this.$message({
-		//       message: 'you browser can not work',
-		//       type: 'warning'
-		//     })
-		//     return false
-		//   }
-		//   screenfull.toggle(this.$refs.dayReportB)
-		// },
-		// changeDate(val) {
-		//   this.date = val
-		//   // this.weekDay = this.weekArr[moment(this.date).format('e')]
-		//   // this.getData()
-		//   if (this.date === moment().format('yyyy-MM-DD')) {
-		//     this.loopTime()
-		//   } else {
-		//     clearInterval(this.timer)
-		//   }
-		// },
-		// 导出
-		// exportPDF() {
-		//   this.$message.success('正在导出，请稍等！')
-		//   const element = document.getElementById('dayRepDom')
-		//   element.style.display = 'block'
-		//   const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
-		//   html2canvas(element, {
-		//     dpi: 300, // Set to 300 DPI
-		//     scale: 3 // Adjusts your resolution
-		//   }).then(function(canvas) {
-		//     const imgWidth = 595.28
-		//     const imgHeight = 841.89
-		//     const pageData = canvas.toDataURL('image/jpeg', 1.0)
-		//     const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
-		//     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-		//     setTimeout(() => {
-		//       PDF.save(fileName) // 导出文件名
-		//     }, 1000)
-		//   })
-		//   element.style.display = 'none'
-		// }
 	},
 };
 </script>
diff --git a/src/views/taskCenter/taskList/components/subSpan3.vue b/src/views/taskCenter/taskList/components/subSpan3.vue
index 6b86d4ef..a40e11ff 100644
--- a/src/views/taskCenter/taskList/components/subSpan3.vue
+++ b/src/views/taskCenter/taskList/components/subSpan3.vue
@@ -6,9 +6,9 @@
  * @Description:
 -->
 <template>
-	<div>
-		<div style="display: flex; align-items: center">
-			<div
+  <div>
+    <div style="display: flex; align-items: center">
+      <!-- <div
 				style="
 					width: 16px;
 					height: 16px;
@@ -20,13 +20,15 @@
           margin-right:5px
 				">
 				L
-			</div>
-      <span v-if="injectData.prop==='val4'">{{injectData.leftMaterialName+'-'+injectData.leftMaterialCode}}</span>
-      <span v-else-if="injectData.prop==='val5'">{{injectData.leftLibraryStartName}}</span>
-      <span v-else-if="injectData.prop==='val6'">{{injectData.leftLibraryStartName}}</span>
-		</div>
-		<div style="display: flex; align-items: center">
-			<div
+			</div> -->
+      <!-- <span v-if="injectData.prop === 'val4'">{{ injectData.leftMaterialCode }}</span> -->
+
+      <span v-if="injectData.prop==='val4'">{{ injectData.leftMaterialCode + '-' + injectData.leftMaterial }}</span>
+      <span v-else-if="injectData.prop==='val5'">{{ removeSuffix(injectData.leftLibraryStartName, '左侧') }}</span>
+      <span v-else-if="injectData.prop==='val6'">{{ removeSuffix(injectData.leftLibraryEndName, '左侧') }}</span>
+    </div>
+    <div style="display: flex; align-items: center">
+      <!-- <div
 				style="
 					width: 16px;
 					height: 16px;
@@ -38,12 +40,12 @@
           margin-right:5px
 				">
 				R
-			</div>
-      <span v-if="injectData.prop==='val4'">{{injectData.rightMaterialName+'-'+injectData.rightMaterialCode}}</span>
-      <span v-else-if="injectData.prop==='val5'">{{injectData.rightLibraryStartName}}</span>
-      <span v-else-if="injectData.prop==='val6'">{{injectData.rightLibraryEndName}}</span>
-		</div>
-	</div>
+			</div> -->
+      <!-- <span v-if="injectData.prop==='val4'">{{injectData.rightMaterialName+'-'+injectData.rightMaterialCode}}</span> -->
+      <span v-if="injectData.prop==='val5'"> {{ removeSuffix(injectData.leftLibraryStartCode, 'L') }}</span>
+      <span v-else-if="injectData.prop==='val6'">{{ removeSuffix(injectData.leftLibraryEndCode, 'L')  }}</span>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -59,6 +61,10 @@ export default {
 	},
 	created() {
   },
-	methods: {},
+  methods: {
+    removeSuffix(str, suffix) {
+      return str?.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
+    }
+},
 };
 </script>
diff --git a/src/views/taskCenter/taskList/index.vue b/src/views/taskCenter/taskList/index.vue
index 96c9e0e1..a38eda9a 100644
--- a/src/views/taskCenter/taskList/index.vue
+++ b/src/views/taskCenter/taskList/index.vue
@@ -1,94 +1,48 @@
 <template>
-	<div class="app-container">
-		<div>
-			<search-bar
-				:formConfigs="formConfig"
-				ref="searchBarForm"
-				@headBtnClick="buttonClick" />
-			<div style="font-size: 14px">
-				自动刷新(10s)
-				<el-switch v-model="autoRefresh"></el-switch>
-			</div>
-		</div>
-		<base-table
-			v-loading="dataListLoading"
-			:table-props="tableProps"
-			:page="listQuery.pageNo"
-			:limit="listQuery.pageSize"
-			:max-height="tableH"
-			:table-data="tableData"
-			@emitFun="getDataList">
-			<method-btn
-				v-if="tableBtn.length"
-				slot="handleBtn"
-				:width="100"
-				label="操作"
-				:method-list="tableBtn"
-				@clickBtn="handleClick" />
-		</base-table>
-		<pagination
-			:limit.sync="listQuery.pageSize"
-			:page.sync="listQuery.pageNo"
-			:total="listQuery.total"
-			@pagination="getDataList" />
-		<!-- //新增 -->
-		<base-dialog
-			:dialogTitle="'新建人工任务'"
-			:dialogVisible="addOrUpdateVisible"
-			@cancel="handleCancel"
-			@confirm="handleConfirm"
-			:before-close="handleCancel"
-			:destroy-on-close="true"
-			width="70%">
-			<add-or-update
-				ref="addOrUpdate"
-				@setSN="setStepNum"
-				@refreshDataList="successSubmit"></add-or-update>
-			<template #footer>
-				<slot name="footer">
-					<el-row slot="footer" type="flex" justify="end">
-						<el-col :span="24">
-							<el-button
-								v-if="stepNum > 1"
-								size="small"
-								class="btnTextStyle"
-								@click="handleConfirm('up')">
-								上一步
-							</el-button>
-							<el-button
-								size="small"
-								class="btnTextStyle"
-								@click="handleCancel">
-								取消
-							</el-button>
-							<el-button
-								type="primary"
-								class="btnTextStyle"
-								size="small"
-								@click="handleConfirm">
-								{{ stepNum < 3 ? '下一步' : '创建任务' }}
-							</el-button>
-						</el-col>
-					</el-row>
-				</slot>
-			</template>
-		</base-dialog>
-		<!-- //详情 -->
-		<detail-drawer
-			ref="detailDrawer"
-			@closeDrawer="closeDrawer"></detail-drawer>
-		<!-- //有货终止 -->
-		<base-dialog
-			:dialogTitle="'终止任务'"
-			:dialogVisible="stopStockVisible"
-			@cancel="handleCancelStopStock"
-			@confirm="handleConfirmStopStock"
-			:before-close="handleCancelStopStock"
-			:destroy-on-close="true"
-			width="50%">
-			<stop-in-stock ref="StopStockRef"></stop-in-stock>
-		</base-dialog>
-	</div>
+  <div class="app-container">
+    <div>
+      <search-bar :formConfigs="formConfig" ref="searchBarForm" isFold @headBtnClick="buttonClick" />
+      <div style="font-size: 14px">
+        自动刷新(10s)
+        <el-switch v-model="autoRefresh"></el-switch>
+      </div>
+    </div>
+    <base-table v-loading="dataListLoading" :table-props="tableProps" :page="listQuery.pageNo"
+      :limit="listQuery.pageSize" :max-height="tableH" :table-data="tableData" @emitFun="getDataList">
+      <method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn"
+        @clickBtn="handleClick" />
+    </base-table>
+    <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
+      @pagination="getDataList" />
+    <!-- //新增 -->
+    <base-dialog :dialogTitle="'新建人工任务'" :dialogVisible="addOrUpdateVisible" @cancel="handleCancel"
+      @confirm="handleConfirm" :before-close="handleCancel" :destroy-on-close="true" width="70%">
+      <add-or-update ref="addOrUpdate" @setSN="setStepNum" @refreshDataList="successSubmit"></add-or-update>
+      <template #footer>
+        <slot name="footer">
+          <el-row slot="footer" type="flex" justify="end">
+            <el-col :span="24">
+              <el-button v-if="stepNum > 1" size="small" class="btnTextStyle" @click="handleConfirm('up')">
+                上一步
+              </el-button>
+              <el-button size="small" class="btnTextStyle" @click="handleCancel">
+                取消
+              </el-button>
+              <el-button type="primary" class="btnTextStyle" size="small" @click="handleConfirm">
+                {{ stepNum < 3 ? '下一步' : '创建任务' }} </el-button>
+            </el-col>
+          </el-row>
+        </slot>
+      </template>
+    </base-dialog>
+    <!-- //详情 -->
+    <detail-drawer ref="detailDrawer" @closeDrawer="closeDrawer"></detail-drawer>
+    <!-- //有货终止 -->
+    <base-dialog :dialogTitle="'终止任务'" :dialogVisible="stopStockVisible" @cancel="handleCancelStopStock"
+      @confirm="handleConfirmStopStock" :before-close="handleCancelStopStock" :destroy-on-close="true" width="50%">
+      <stop-in-stock ref="StopStockRef"></stop-in-stock>
+    </base-dialog>
+  </div>
 </template>
 
 <script>
@@ -102,9 +56,14 @@ import detailDrawer from './components/detailDrawer.vue';
 import stopInStock from './components/stopInStock.vue';
 import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 import { parseTime } from '@/filter/code-filter';
-import { getTaskPage } from '@/api/ssdl/taskList';
+import { getTaskPage, cancelUpdateTask } from '@/api/ssdl/taskList';
 
 const tableProps = [
+  {
+    prop: 'id',
+    label: '任务号',
+    width: 140,
+  },
 	{
 		prop: 'mainTaskCode',
 		label: '任务编号',
@@ -127,19 +86,19 @@ const tableProps = [
 	},
 	{
 		prop: 'val4',
-		label: '搬运对象(L/R)',
+		label: '搬运对象',
 		subcomponent: subSpan3,
 		width: 220,
 	},
 	{
 		prop: 'val5',
-		label: '起点(L/R)',
+		label: '起点',
 		subcomponent: subSpan3,
 		width: 220,
 	},
 	{
 		prop: 'val6',
-		label: '终点(L/R)',
+		label: '终点',
 		subcomponent: subSpan3,
 		width: 220,
 	},
@@ -171,28 +130,34 @@ export default {
 					type: 'detail',
 					btnName: '详情',
 				},
-				// {
-				// 	type: 'stop',
-				// 	btnName: '终止',
-				// 	showParam: {
-				// 		type: '&',
-				// 		data: [
-				// 			{
-				// 				type: 'equal',
-				// 				name: 'mainTaskState',
-				// 				value: 2,
-				// 			},
-				// 		],
-				// 	},
-				// },
+				{
+          type: 'cancel',
+					btnName: '取消',
+					showParam: {
+						type: '&',
+						data: [
+							{
+								type: 'equal',
+                name: 'mainTaskState',
+								value: 0,
+							},
+						],
+					},
+				},
 			].filter((v) => v),
 			tableData: [],
 			listQuery: {
 				//分页
 				pageSize: 10,
 				pageNo: 1,
-				total: 1,
-			},
+        total: 1,
+        startTime: undefined, // ✅ 必须加
+        endTime: undefined,   // ✅ 必须加
+      },
+      urlOptions: {
+        // getDataListURL: getProductPage,
+        cancelURL: cancelUpdateTask,
+      },
 			formConfig: [
 				{
 					type: 'select',
@@ -272,10 +237,45 @@ export default {
 				},
 				{
 					type: 'input',
-					label: '任务编号',
-					placeholder: '任务编号',
-					param: 'code',
-				},
+          label: '任务号',
+					placeholder: '任务号',
+					param: 'id',
+        },
+        {
+          type: 'datePicker',
+          label: '时间',
+          dateType: 'datetimerange',
+          format: 'yyyy-MM-dd HH:mm:ss',
+          valueFormat: 'yyyy-MM-dd HH:mm:ss',
+          rangeSeparator: '-',
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          param: 'timeSlot',
+        },
+        {
+          type: 'input',
+          label: '物料编码',
+          placeholder: '物料编码',
+          param: 'materialCode',
+        },
+        {
+          type: 'input',
+          label: '起点编号',
+          placeholder: '起点编号',
+          param: 'startCode',
+        },
+        {
+          type: 'input',
+          label: '终点编号',
+          placeholder: '终点编号',
+          param: 'endCode',
+        },
+        {
+          type: 'input',
+          label: 'agv',
+          placeholder: 'agv',
+          param: 'agv',
+        },
 				{
 					type: 'button',
 					btnName: '搜索',
@@ -293,13 +293,13 @@ export default {
 				{
 					type: 'separate',
 				},
-				{
-					type: 'button',
-					btnName: '新增',
-					name: 'add',
-					color: 'success',
-					plain: true,
-				},
+				// {
+				// 	type: 'button',
+				// 	btnName: '新增',
+				// 	name: 'add',
+				// 	color: 'success',
+				// 	plain: true,
+				// },
 			],
 			addOrUpdateVisible: false, //dialog状态
 			dataListLoading: false,
@@ -344,7 +344,9 @@ export default {
 		this.autoRefresh = true;
 	},
 	methods: {
-		buttonClick(val) {
+    buttonClick(val) {
+
+
 			switch (val.btnName) {
 				case 'search':
 					this.listQuery.pageNo = 1;
@@ -352,14 +354,21 @@ export default {
 					this.listQuery.mainTaskType = val.val1 || null;
 					this.listQuery.taskAttribute = val.val2 || null;
 					this.listQuery.mainTaskState = val.val3 || null;
-					this.listQuery.mainTaskCode = val.code || null;
+          this.listQuery.materialCode = val.materialCode || null;
+          this.listQuery.startCode = val.startCode || null;
+          this.listQuery.endCode = val.endCode || null;
+          this.listQuery.agv = val.agv || null;
+
+          this.listQuery.startTime = val.timeSlot ? val.timeSlot[0] : undefined
+          this.listQuery.endTime = val.timeSlot ? val.timeSlot[1] : undefined
+          console.log('val', this.listQuery);
 					this.getDataList();
 					break;
 				case 'add':
 					this.addOrUpdateHandle();
 					break;
 				case 'reset':
-					this.listQuery.code = null;
+          this.listQuery.id = null;
 					this.listQuery = {
 						pageSize: 10,
 						pageNo: 1,
@@ -373,7 +382,9 @@ export default {
 		},
 		// 获取数据列表
 		getDataList() {
-			this.dataListLoading = true;
+      this.dataListLoading = true;
+      console.log(this.listQuery,'listQuery');
+
 			getTaskPage(this.listQuery).then((response) => {
 				this.tableData = response.data.list;
 				this.listQuery.total = response.data.total;
@@ -405,8 +416,8 @@ export default {
 		},
 		//tableBtn点击
 		handleClick(val) {
-			if (val.type === 'stop') {
-				this.stopFun(val.data);
+      if (val.type === 'cancel') {
+        this.cancelFun(val.data.id);
 				// if (val.data === '无货') {
 				// 	this.stopFun(val.data);
 				// } else {
@@ -420,7 +431,30 @@ export default {
 					this.$refs.detailDrawer.init(val.data.id, 'detail');
 				});
 			}
-		},
+    },
+    cancelFun(id) {
+      this.$confirm(`确认取消任务号为${id}的任务, 是否继续?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.urlOptions.cancelURL({ id }).then(({ data }) => {
+          this.$message({
+            message: "操作成功",
+            type: "success",
+            duration: 1500,
+            onClose: () => {
+              this.getDataList();
+            },
+          });
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消操作'
+        });
+      });
+    },
 		stopFun(val) {
 			this.$prompt(
 				'确认终止该任务？此操作任务立即终止，车辆保持暂停，请人工回收货物，释放车辆!',