diff --git a/pages/index.vue b/pages/index.vue
index 31a4944..54b3d0f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -114,6 +114,7 @@
 <style scoped lang="scss">
 	.container {
 		position: relative;
+		background-color: #f5f6f7;
 
 		.no-data {
 			padding-top: 180rpx;
@@ -131,9 +132,8 @@
 		left: 0;
 		width: 100%;
 		z-index: 2;
-		padding: 40rpx 30rpx;
-		padding-bottom: 60rpx;
-		background: linear-gradient(to bottom, #9fc1f3, #f7fbff 80%, rgba(255, 255, 255, 0) 100%);
+		padding: 30rpx 30rpx;
+		background: #ffffff;
 
 		.btns {
 			border: none;
@@ -142,22 +142,18 @@
 			font-size: 26rpx;
 			line-height: 64rpx;
 			color: #19242d;
-			background: linear-gradient(to bottom, #d9e7fc, #f7fbff);
+			background: #d9e7fc;
 
 			&.active-btn {
-				background: linear-gradient(to bottom, #4c7af3, #4b7bf4);
+				background: #4c7af3;
 				color: #fff;
 			}
 		}
 	}
 
-	.scroll-y {
-		z-index: 1;
-	}
-
 	.content {
-		background-color: #ffffff;
 		padding: 170rpx 40rpx 120rpx 40rpx;
+		z-index: 1;
 	}
 
 	// 工单列表
@@ -169,6 +165,7 @@
 		line-height: 40rpx;
 		margin-bottom: 30rpx;
 		border: 1px solid #eee;
+		background: #ffffff;
 
 		// 标题
 		.item-title {
diff --git a/pages/work/bmsdcc/index.vue b/pages/work/bmsdcc/index.vue
index bb124ab..2fdec8b 100644
--- a/pages/work/bmsdcc/index.vue
+++ b/pages/work/bmsdcc/index.vue
@@ -1,49 +1,66 @@
 <template>
 	<view class="page-container">
 		<uni-collapse ref="collapse" accordion v-if="list.length > 0">
-			<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmsdcc'" :open="index===0"
-				:title="`${index+1}#${item.parentDeviceName?`${item.parentDeviceName} —> ` : ''}${item.deviceName}`"
-				:class="item.workStatus === '0' ? 'running' :'danger'">
-				<view>
-					<uni-group mode="card" class="work-group">
+			<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmscc'" :open="index===0"
+				class="common-collapse-item" :class="{
+					'timing-collapse-item':!['0','2'].includes(item.workStatus),
+					        'warning-collapse-item':item.workStatus === '2',
+					        'running-collapse-item':item.workStatus === '0'
+				}">
+
+				<template v-slot:title>
+					<view class='title-wrapper'>
+						<view class="top">
+							<view class="status">{{workStatusOptions[item.workStatus] || '暂无数据'}}</view>
+							<text
+								class="name">{{`${item.parentDeviceName?`${item.parentDeviceName} -> ` : ''}${item.deviceName}`}}</text>
+						</view>
+					</view>
+				</template>
+				<view class='content'>
+					<!-- 设备状态栏 -->
+					<uni-group mode="card" class="status-card-group">
 						<uni-grid :column="3" :showBorder="false">
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">工作状态</view>
-									<text class="text status">{{workStatusOptions[item.workStatus]}}</text>
+									<text
+										class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">与PCS通信</view>
 									<text
-										class="text">{{communicationStatusOptions[item.pcsCommunicationStatus]}}</text>
+										class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">与EMS通信</view>
 									<text
-										class="text">{{communicationStatusOptions[item.emsCommunicationStatus]}}</text>
+										class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 						</uni-grid>
 					</uni-group>
-					<uni-group mode="card">
-						<uni-grid :column="3" :showBorder="false">
-							<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
-								:key="infoDataIndex+'infoData'">
-								<view class="grid-item-box">
-									<view class="title">{{infoDataItem.label}}</view>
-									<text class="text">{{item[infoDataItem.attr] | formatNumber}}
-										<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
-									</text>
+					<!-- 设备数据 -->
+					<uni-group mode="card" class="data-card-group">
+						<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
+							class="data-row">
+							<uni-col :span="8">
+								<view class="title">{{infoDataItem.label}}</view>
+							</uni-col>
+							<uni-col :span="16">
+								<view class="value">{{item[infoDataItem.attr] | formatNumber}}
+									<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
 								</view>
-							</uni-grid-item>
-						</uni-grid>
+							</uni-col>
+						</uni-row>
 					</uni-group>
-					<uni-group mode="card" style="margin-bottom: 25px;">
-						<uni-table border stripe emptyText="暂无数据">
+					<!-- 子设备表格 -->
+					<uni-group mode="card" class="child-card-group" style="margin-bottom:20rpx;">
+						<uni-table border stripe emptyText="暂无数据" class="child-table">
 							<!-- 表头行 -->
 							<uni-tr>
 								<uni-th align="center">名称</uni-th>
@@ -188,62 +205,4 @@
 			})
 		}
 	}
-</script>
-
-<style lang="scss" scoped>
-	.page-container {}
-
-	.grid-item-box {
-		flex: 1;
-		// position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 10px;
-		background-color: #fff;
-
-		.title {
-			font-size: 14px;
-			color: #666;
-		}
-
-		.text {
-			margin-top: 10px;
-			font-size: 16px;
-			font-weight: 500;
-			color: #666;
-			overflow-wrap: anywhere;
-		}
-
-	}
-
-	::v-deep {
-		.uni-collapse-item__wrap {
-			background-color: #eee;
-		}
-
-		.running {
-			.uni-collapse-item__title-text {
-				color: #05AEA3;
-			}
-
-			.status {
-				color: #05AEA3;
-			}
-
-		}
-
-		.danger {
-			.uni-collapse-item__title-text {
-				color: #FC6B69;
-			}
-
-			.status {
-				color: #FC6B69;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/pages/work/bmszl/index.vue b/pages/work/bmszl/index.vue
index d15a3ab..e66cfeb 100644
--- a/pages/work/bmszl/index.vue
+++ b/pages/work/bmszl/index.vue
@@ -2,47 +2,64 @@
 	<view class="page-container">
 		<uni-collapse ref="collapse" accordion v-if="list.length > 0">
 			<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'bmszl'" :open="index===0"
-				:title="`${index+1}#${item.deviceName}`" :class="item.workStatus === '0' ? 'running' :'danger'">
-				<view>
-					<uni-group mode="card" class="work-group">
+				class="common-collapse-item" :class="{
+					'timing-collapse-item':!['0','2'].includes(item.workStatus),
+					        'warning-collapse-item':item.workStatus === '2',
+					        'running-collapse-item':item.workStatus === '0'
+				}">
+
+				<template v-slot:title>
+					<view class='title-wrapper'>
+						<view class="top">
+							<view class="status">{{workStatusOptions[item.workStatus] || '暂无数据'}}</view>
+							<text class="name">{{item.deviceName}}</text>
+						</view>
+					</view>
+				</template>
+				<view class='content'>
+					<!-- 设备状态栏 -->
+					<uni-group mode="card" class="status-card-group">
 						<uni-grid :column="3" :showBorder="false">
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">工作状态</view>
-									<text class="text status">{{workStatusOptions[item.workStatus]}}</text>
+									<text
+										class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">与PCS通信</view>
 									<text
-										class="text">{{communicationStatusOptions[item.pcsCommunicationStatus]}}</text>
+										class="text">{{communicationStatusOptions[item.pcsCommunicationStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">与EMS通信</view>
 									<text
-										class="text">{{communicationStatusOptions[item.emsCommunicationStatus]}}</text>
+										class="text">{{communicationStatusOptions[item.emsCommunicationStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 						</uni-grid>
 					</uni-group>
-					<uni-group mode="card">
-						<uni-grid :column="3" :showBorder="false">
-							<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
-								:key="infoDataIndex+'infoData'">
-								<view class="grid-item-box">
-									<view class="title">{{infoDataItem.label}}</view>
-									<text class="text">{{item[infoDataItem.attr] | formatNumber}}
-										<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
-									</text>
+					<!-- 设备数据 -->
+					<uni-group mode="card" class="data-card-group">
+						<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
+							class="data-row">
+							<uni-col :span="8">
+								<view class="title">{{infoDataItem.label}}</view>
+							</uni-col>
+							<uni-col :span="16">
+								<view class="value">{{item[infoDataItem.attr] | formatNumber}}
+									<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
 								</view>
-							</uni-grid-item>
-						</uni-grid>
+							</uni-col>
+						</uni-row>
 					</uni-group>
-					<uni-group mode="card" style="margin-bottom: 25px;">
-						<uni-table border stripe emptyText="暂无数据">
+					<!-- 子设备表格 -->
+					<uni-group mode="card" class="child-card-group" style="margin-bottom:20rpx;">
+						<uni-table border stripe emptyText="暂无数据" class="child-table">
 							<!-- 表头行 -->
 							<uni-tr>
 								<uni-th align="center">簇号</uni-th>
@@ -193,60 +210,4 @@
 			})
 		}
 	}
-</script>
-
-<style lang="scss" scoped>
-	.grid-item-box {
-		flex: 1;
-		// position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 10px;
-		background-color: #fff;
-
-		.title {
-			font-size: 14px;
-			color: #666;
-		}
-
-		.text {
-			margin-top: 10px;
-			font-size: 16px;
-			font-weight: 500;
-			color: #666;
-			overflow-wrap: anywhere;
-		}
-
-	}
-
-	::v-deep {
-		.uni-collapse-item__wrap {
-			background-color: #eee;
-		}
-
-		.running {
-			.uni-collapse-item__title-text {
-				color: #05AEA3;
-			}
-
-			.status {
-				color: #05AEA3;
-			}
-
-		}
-
-		.danger {
-			.uni-collapse-item__title-text {
-				color: #FC6B69;
-			}
-
-			.status {
-				color: #FC6B69;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/pages/work/db/index.vue b/pages/work/db/index.vue
index 01785aa..afa99f9 100644
--- a/pages/work/db/index.vue
+++ b/pages/work/db/index.vue
@@ -1,43 +1,42 @@
 <template>
 	<view class="page-container">
-		<uni-collapse ref="collapse">
-			<uni-collapse-item open v-for="(item,index) in list" :key="index+'dbList'"
-				:class="item.emsCommunicationStatus !== '0' ? 'danger' :'running'">
+		<uni-collapse ref="collapse" accordion v-if="list.length > 0">
+			<uni-collapse-item v-for="(item,index) in list" :key="index+'dbList'" :open="index===0"
+				class="common-collapse-item" :class="{
+					'timing-collapse-item':!['0','2'].includes(item.emsCommunicationStatus),
+							'warning-collapse-item':item.emsCommunicationStatus === '2',
+							'running-collapse-item':item.emsCommunicationStatus === '0'
+				}">
 				<template v-slot:title>
-					<view class="title-row">
-						<view class="title">{{index+1}}#{{item.deviceName || ''}}</view>
-						<view class="msg">
-							<view>{{communicationStatusOptions[item.emsCommunicationStatus] || ''}}</view>
-							<view>数据更新时间：{{item.dataUpdateTime || ''}}</view>
+					<view class='title-wrapper'>
+						<view class="top">
+							<view class="status">{{communicationStatusOptions[item.emsCommunicationStatus] || '暂无数据'}}
+							</view>
+							<text class="name">{{item.deviceName}}</text>
 						</view>
 					</view>
 				</template>
-				<uni-group mode="card">
-					<uni-grid :column="2" showBorder class="info-grid">
-						<uni-grid-item v-for="(tempDataItem,tempDataIndex) in
-							deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'">
-							<view class="grid-item-box">
+				<view class='content' v-if="deviceIdTypeMsg[item.deviceId]">
+					<uni-group mode="card" class="data-card-group">
+						<uni-row v-for="(tempDataItem,tempDataIndex) in
+						deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" class="data-row">
+							<uni-col :span="8">
 								<view class="title">{{tempDataItem.name}}</view>
-								<text class="text">{{item[tempDataItem.attr]}}
+							</uni-col>
+							<uni-col :span="16">
+								<view class="value">{{item[tempDataItem.attr] | formatNumber}}
 									<!-- <text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text> -->
-								</text>
-							</view>
-						</uni-grid-item>
-					</uni-grid>
-
-					<!-- <uni-row v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]"
-						:key="tempDataIndex+'dbTempData'">
-						<uni-col :span="8">
-							<view>{{tempDataItem.name}}</view>
-						</uni-col>
-						<uni-col :span="16">
-							<view>{{item[tempDataItem.attr]}}</view>
-						</uni-col>
-					</uni-row> -->
-				</uni-group>
+								</view>
+							</uni-col>
+						</uni-row>
+					</uni-group>
+				</view>
+				<view v-else class='unknow-bd-device'>未知的电表数据</view>
 			</uni-collapse-item>
 		</uni-collapse>
-
+		<view class="no-data" v-else>
+			暂无数据
+		</view>
 	</view>
 
 </template>
@@ -167,131 +166,13 @@
 		}
 	}
 </script>
-
 <style lang="scss" scoped>
-	.title-row {
-		padding: 0 15px;
-		position: relative;
-		height: 50px;
-
-		.title {
-			font-weight: 500;
-			line-height: 50px;
-		}
-
-		.msg {
-			position: absolute;
-			right: 15px;
-			top: 50%;
-			transform: translateY(-50%);
-			text-align: right;
-		}
-	}
-
-	.grid-item-box {
-		flex: 1;
-		// position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 10px;
+	.unknow-bd-device {
+		text-align: center;
+		padding: 20rpx;
+		font-size: 28rpx;
+		line-height: 50rpx;
 		background-color: #fff;
-
-		.title {
-			font-size: 14px;
-			color: #666;
-		}
-
-		.text {
-			margin-top: 10px;
-			font-size: 16px;
-			font-weight: 500;
-			color: #666;
-			overflow-wrap: anywhere;
-		}
-
-		.status-danger {
-			color: #FC6B69;
-		}
-
-		.status-running {
-			color: #05AEA3;
-		}
-
-	}
-
-	::v-deep {
-		.info-grid {
-			.uni-grid-item {
-				height: 80px !important;
-
-				.grid-item-box {
-					padding: 0;
-				}
-			}
-		}
-
-		.uni-group__title {
-			background-color: #959595;
-
-			.uni-group__title-text {
-				color: #fff;
-			}
-		}
-
-		.uni-collapse-item__wrap-content {
-			.uni-group--card:last-child {
-				margin-bottom: 25px;
-			}
-		}
-
-		// row-行样式
-		.uni-group__content {
-			padding: 10px 15px;
-
-			.uni-row {
-				padding: 5px 0;
-			}
-
-
-		}
-
-		// 折叠面板内容区域背景颜色
-		.uni-collapse-item__wrap {
-			background-color: #eee;
-		}
-
-		// 运行状态颜色区分
-		.running {
-			.uni-group__title {
-				background-color: #05AEA3;
-			}
-
-			.uni-collapse-item__title-text {
-				color: #05AEA3;
-			}
-
-			.title-row {
-				color: #05AEA3;
-			}
-
-		}
-
-		.danger {
-			.uni-group__title {
-				background-color: #FC6B69;
-			}
-
-			.uni-collapse-item__title-text {
-				color: #FC6B69;
-			}
-
-			.title-row {
-				color: #FC6B69;
-			}
-		}
+		color: #000;
 	}
 </style>
\ No newline at end of file
diff --git a/pages/work/dtdc/Chart.vue b/pages/work/dtdc/Chart.vue
deleted file mode 100644
index d41c22f..0000000
--- a/pages/work/dtdc/Chart.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-	<uni-popup ref="popup" type="center" @maskClick="show = false" :animation="false">
-		<view class="chart-popup">
-			<uni-datetime-picker v-model="range" type="daterange" :end="end" rangeSeparator="至" @change="changeTime"
-				style="margin-bottom: 10px;" />
-			<!-- <view class="button-group" style="text-align: center;margin-top:20px;">
-				<button type="default" size="mini" @click="onReset">重置</button>
-				<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
-			</view> -->
-			<view class="chart-container">
-				<!-- <qiun-data-charts type="line" :reload="show" :opts="options" :optsWatch='false'
-					:inScrollView="true" :pageScrollTop="pageScrollTop" :ontouch="true" :chartData="chartsData" /> -->
-				<qiun-data-charts type="line" :reshow="show" :optsWatch='false' :opts="options" :chartData="chartsData"
-					:ontouch="true" :inScrollView="true" :pageScrollTop="pageScrollTop" />
-			</view>
-		</view>
-	</uni-popup>
-</template>
-
-<script>
-	import {
-		getSingleBatteryData
-	} from '@/api/ems/site.js'
-	export default {
-		props: {
-			pageScrollTop: {
-				type: Number,
-				default: 0
-			}
-		},
-		data() {
-			return {
-				// {update:true,enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true,scrollAlign:'current'}}
-				options: {
-					// xAxis: {
-					// 	scrollShow: true,
-					// 	itemCount: 3,
-					// 	disableGrid: true,
-					// 	scrollAlign: 'current'
-					// },
-					// enableScroll: true,
-					// update: true,
-					dataLabel: false,
-					enableScroll: true,
-					xAxis: {
-						scrollShow: true,
-						itemCount: 3,
-						disableGrid: true
-					},
-					duration: 0,
-					animation: false,
-				},
-				show: false,
-				range: [],
-				end: Date.now(),
-				siteId: '',
-				deviceId: '',
-				clusterDeviceId: '',
-				dataType: '', //展示的数据类型 空值展示所有数据
-				loading: false,
-				chartsData: {},
-			}
-		},
-
-		methods: {
-			open({
-				siteId,
-				clusterDeviceId,
-				deviceId
-			}, dataType) {
-				this.$refs.popup.open()
-				this.loading = false
-				this.siteId = siteId
-				this.clusterDeviceId = clusterDeviceId
-				this.deviceId = deviceId
-				this.dataType = dataType
-				this.range = []
-				this.$nextTick(() => {
-					this.show = true
-					this.getData()
-					// setTimeout(() => {
-
-					// }, 300)
-				})
-			},
-			changeTime(val) {
-				this.range = val || []
-				this.getData()
-			},
-			onReset() {
-				this.range = []
-				this.getData()
-			},
-			onSearch() {
-				this.getData()
-			},
-			getData() {
-				if (this.loading) return
-				this.loading = true;
-				const {
-					siteId,
-					deviceId,
-					clusterDeviceId,
-					range: [startDate = '', endDate = '']
-				} = this;
-				this.chartsData = {}
-				return getSingleBatteryData({
-					siteId,
-					deviceId,
-					clusterDeviceId,
-					startDate,
-					endDate
-				}).then(response => {
-					console.log('单体电池图表返回数据', response.data)
-					this.handledata(response?.data || [])
-				}).finally(() => {
-					this.loading = false;
-				})
-			},
-			handledata(data) {
-				let obj = {
-						voltage: '电压',
-						temperature: '温度',
-						soc: 'SOC',
-						soh: 'SOH',
-					},
-					categories = [],
-					dataTypeList = []
-				if (this.dataType) {
-					dataTypeList = [{
-						attr: this.dataType,
-						title: obj[this.dataType],
-						data: []
-					}]
-				} else {
-					dataTypeList = Object.entries(obj).map(([key, value]) => {
-						return {
-							attr: key,
-							title: value,
-							data: []
-						}
-					})
-
-				}
-				data.forEach(item => {
-					categories.push(item.dataTimestamp)
-					dataTypeList.forEach(i => {
-						i.data.push(item[i.attr] || undefined)
-					})
-				})
-				const series = dataTypeList.map(item => {
-					return {
-						"name": item.title,
-						"data": item.data
-					}
-				})
-				this.chartsData = JSON.parse(JSON.stringify({
-					categories,
-					series
-				}))
-				console.log('this.chartsData', this.chartsData)
-			}
-		},
-	}
-</script>
-
-<style lang="scss" scoped>
-	.chart-popup {
-		width: 360px;
-		background-color: #fff;
-		padding: 10px 15px;
-
-		.chart-container {
-			width: 100%;
-			height: 250px;
-			margin-top: 20px;
-		}
-
-		::v-deep {
-			uni-canvas {
-				height: 250px;
-				width: 100%;
-			}
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/pages/work/dtdc/index.vue b/pages/work/dtdc/index.vue
index c989869..3373500 100644
--- a/pages/work/dtdc/index.vue
+++ b/pages/work/dtdc/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="container">
 		<view class="search-icon" @click="openSearch">
-			<uni-icons type="search" size="40" color="#fff"></uni-icons>
+			<uni-icons type="search" size="25" color="#fff"></uni-icons>
 		</view>
 		<view class="list-container">
 			<view class="no-data" v-if="list.length === 0">暂无数据</view>
@@ -10,7 +10,7 @@
 					<template v-slot:header>
 						<view class="list-header">
 							单体编号:{{item.deviceId}}
-							<button type="primary" size="mini" class="charts" @click="toDetail(item)">图表</button>
+							<button type="primary" size="mini" class="charts-btn" @click="toDetail(item)">图表</button>
 						</view>
 					</template>
 					<template v-slot:body>
@@ -19,16 +19,17 @@
 								<uni-col :span="8">
 									<view>簇号</view>
 								</uni-col>
-								<uni-col :span="14">
-									<view class="right">{{item.clusterDeviceId}}</view>
+								<uni-col :span="16">
+									<view class="right">{{item.clusterDeviceId || '-'}}</view>
 								</uni-col>
 							</uni-row>
 							<uni-row>
 								<uni-col :span="8">
 									<view>电压（V）</view>
 								</uni-col>
-								<uni-col :span="14">
-									<view class="right color" @click="toDetail(item,'voltage')">{{item.voltage}}
+								<uni-col :span="16">
+									<view class="right color">
+										<text @click="toDetail(item,'voltage')">{{item.voltage | formatNumber}}</text>
 									</view>
 								</uni-col>
 							</uni-row>
@@ -36,9 +37,10 @@
 								<uni-col :span="8">
 									<view>温度（℃）</view>
 								</uni-col>
-								<uni-col :span="14">
-									<view class="right color" @click="toDetail(item,'temperature')">
-										{{item.temperature}}
+								<uni-col :span="16">
+									<view class="right color">
+										<text
+											@click="toDetail(item,'temperature')">{{item.temperature | formatNumber}}</text>
 									</view>
 								</uni-col>
 							</uni-row>
@@ -46,16 +48,20 @@
 								<uni-col :span="8">
 									<view>SOC（%）</view>
 								</uni-col>
-								<uni-col :span="14">
-									<view class="right color" @click="toDetail(item,'soc')">{{item.soc}}</view>
+								<uni-col :span="16">
+									<view class="right color">
+										<text @click="toDetail(item,'soc')">{{item.soc | formatNumber}}</text>
+									</view>
 								</uni-col>
 							</uni-row>
 							<uni-row>
 								<uni-col :span="8">
 									<view>SOH（%）</view>
 								</uni-col>
-								<uni-col :span="14">
-									<view class="right color" @click="toDetail(item,'soh')">{{item.soh}}</view>
+								<uni-col :span="16">
+									<view class="right color">
+										<text @click="toDetail(item,'soh')">{{item.soh | formatNumber}}</text>
+									</view>
 								</uni-col>
 							</uni-row>
 						</view>
@@ -382,21 +388,18 @@
 <style lang="scss" scoped>
 	.container {
 		position: relative;
+		background: #f5f5f5;
 
-		// position: fixed;
-		// width: 100%;
-		// height: 100%;
-		// overflow-y: auto;
 		.search-icon {
 			position: fixed;
-			bottom: 20px;
-			right: 20px;
+			bottom: 40rpx;
+			right: 40rpx;
 			z-index: 1;
-			height: 50px;
-			width: 50px;
+			height: 60rpx;
+			width: 60rpx;
 			background-color: #007aff;
 			border-radius: 100%;
-			line-height: 50px;
+			line-height: 60rpx;
 			text-align: center;
 		}
 
@@ -407,20 +410,26 @@
 		}
 
 		.list-container {
-			// z-index: 10;
-			padding-top: 20px;
-			padding-bottom: 50px;
-			background: #ffffff;
+			padding-top: 40rpx;
+			padding-bottom: 100rpx;
+			background: transparent;
 
 			::v-deep {
+				.uni-list {
+					background: transparent;
+				}
+
 				.uni-list-item {
-					padding: 12px 15px;
+					padding: 10rpx 30rpx;
+					background-color: transparent !important;
 				}
 
 				.uni-list-item__container {
+					background-color: #ffffff;
 					padding: 0;
 					display: block;
-					box-shadow: 0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+					border-radius: 10rpx;
+					box-shadow: 0 1px 16rpx 1px rgba($color: #a5a5a5, $alpha: 0.2);
 				}
 
 				.uni-list--border-top,
@@ -431,61 +440,63 @@
 			}
 
 			.list-header {
-				background-color: #05AEA3;
-				color: #fff;
-				padding: 10px 15px;
-				border-radius: 5px 5px 0 0;
+				border-radius: 14rpx 14rpx 0 0;
+				border-bottom: 1px solid #eee;
+				padding: 20rpx 30rpx;
+				font-weight: 700;
 				position: relative;
+				color: #333;
 
-				.charts {
+				.charts-btn {
 					position: absolute;
 					top: 50%;
-					right: 15px;
+					right: 20rpx;
 					transform: translateY(-50%);
-					// background-color: #ff7300;
+					background-color: #4c7af3;
 				}
 			}
 
 			.list-body {
-				padding: 10px 15px;
-				border: 1px solid #eee;
-				border-top: none;
-				border-radius: 0 0 5px 5px;
-				font-size: 14px;
-				color: #666;
+				padding: 10rpx 0;
 
-				.right {
+				>.uni-row {
+					font-size: 26rpx;
+					line-height: 36rpx;
 					color: #000;
-				}
+					padding: 12rpx 30rpx;
 
-				.color {
-					color: #007aff;
-				}
+					.left {
+						color: #333;
+						text-align: left;
+					}
 
-				.uni-row {
-					margin-bottom: 10px;
+					.right {
+						text-align: right;
 
-					&:last-child {
-						margin-bottom: 0;
+						&.color {
+							color: #4c7af3;
+							font-weight: 700;
+						}
 					}
 				}
+
 			}
 		}
 
 		.chart-popup {
-			width: 360px;
+			width: 720rpx;
 			background-color: #fff;
-			padding: 10px 15px;
+			padding: 20rpx 30rpx;
 
 			.chart-container {
 				width: 100%;
-				height: 250px;
-				margin-top: 20px;
+				height: 500rpx;
+				margin-top: 40rpx;
 			}
 
 			::v-deep {
 				uni-canvas {
-					height: 250px;
+					height: 500rpx;
 					width: 100%;
 				}
 			}
diff --git a/pages/work/pcs/index.vue b/pages/work/pcs/index.vue
index eef2d56..d867a0d 100644
--- a/pages/work/pcs/index.vue
+++ b/pages/work/pcs/index.vue
@@ -1,79 +1,83 @@
 <template>
 	<view class="page-container">
 		<!-- 顶部6个数据 -->
-		<uni-grid class="info-grid" :column="2" :showBorder="false" style="margin-bottom: 10px;">
+		<uni-grid class="info-grid" :square="false" :column="2" :showBorder="false">
 			<uni-grid-item v-for="(item,index) in runningHeadData" :key="index+'head'">
 				<view class="grid-item-box">
+					<img :src="require('@/static/images/ems/pcs/'+item.img+'.jpg')" class="icon" alt="">
 					<view class="title">{{item.title}}</view>
-					<text class="text">{{runningHeadInfo[item.attr] | formatNumber}}</text>
+					<view class="text">{{runningHeadInfo[item.attr] | formatNumber}}</view>
 				</view>
 			</uni-grid-item>
 		</uni-grid>
 
 		<uni-collapse ref="collapse" accordion v-if="list.length > 0">
-			<uni-collapse-item v-for="(item,index) in list" :key="item.deviceId+'pcs'" :open="index===0"
-				class="device-list"
-				:class="item.workStatus === '2' ? 'danger' : item.workStatus === '1' ? 'close' : 'running'">
+			<uni-collapse-item v-for="(item,index) in list" :key="index+'pcs'" :open="index===0"
+				class="common-collapse-item" :class="{
+					'timing-collapse-item':!['0','2'].includes(item.workStatus),
+					        'warning-collapse-item':item.workStatus === '2',
+					        'running-collapse-item':item.workStatus === '0'
+				}">
+
 				<template v-slot:title>
-					<view class="title-row">
-						<view class="title">{{index+1}}#{{item.deviceName || ''}}</view>
-						<view class="msg">
-							<view>{{communicationStatusOptions[item.communicationStatus] || ''}}</view>
-							<view>数据更新时间：{{item.dataUpdateTime || ''}}</view>
+					<view class='title-wrapper'>
+						<view class="top">
+							<view class="status">{{workStatusOptions[item.workStatus] || '暂无数据'}}</view>
+							<text class="name">{{item.deviceName}}</text>
 						</view>
 					</view>
 				</template>
-				<view>
-					<uni-group mode="card">
+				<view class='content'>
+					<!-- 设备状态栏 -->
+					<uni-group mode="card" class="status-card-group no-wrapper-padding">
 						<uni-grid :column="4" :showBorder="false">
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">工作状态</view>
-									<text class="text"
-										:class="item.workStatus === '0' ? 'status-running' : 'status-danger'">{{workStatusOptions[item.workStatus]}}</text>
+									<text
+										class="text work-status-color">{{workStatusOptions[item.workStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">并网状态</view>
-									<text class="text">{{gridStatusOptions[item.gridStatus]}}</text>
+									<text class="text">{{gridStatusOptions[item.gridStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">设备状态</view>
-									<text class="text"
-										:class="item.deviceStatus === '1' ? 'status-running' : 'status-danger'">{{deviceStatusOptions[item.deviceStatus]}}</text>
+									<text class="text">{{deviceStatusOptions[item.deviceStatus] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">控制模式</view>
-									<text class="text">{{controlModeOptions[item.controlMode]}}</text>
+									<text class="text">{{controlModeOptions[item.controlMode] || '-'}}</text>
 								</view>
 							</uni-grid-item>
 						</uni-grid>
 					</uni-group>
-					<!-- infoData -->
-					<uni-group mode="card"
+					<!-- 设备数据 -->
+					<uni-group mode="card" class="data-card-group"
 						:style="{marginBottom:!item.pcsBranchInfoList || item.pcsBranchInfoList.length === 0 ?'25px' : ''}">
-						<uni-grid :column="2" showBorder class="info-grid">
-							<uni-grid-item v-for="(infoDataItem,infoDataIndex) in infoData"
-								:key="infoDataIndex+'infoData'">
-								<view class="grid-item-box">
-									<view class="title">{{infoDataItem.label}}</view>
-									<text class="text">{{item[infoDataItem.attr] | formatNumber}}
-										<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
-									</text>
+						<uni-row v-for="(infoDataItem,infoDataIndex) in infoData" :key="infoDataIndex+'infoData'"
+							class="data-row">
+							<uni-col :span="8">
+								<view class="title">{{infoDataItem.label}}</view>
+							</uni-col>
+							<uni-col :span="16">
+								<view class="value">{{item[infoDataItem.attr] | formatNumber}}
+									<text v-if="infoDataItem.unit" v-html="infoDataItem.unit"></text>
 								</view>
-							</uni-grid-item>
-						</uni-grid>
+							</uni-col>
+						</uni-row>
 					</uni-group>
 					<!-- 支路 -->
-					<uni-group class="pcs-branch-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
+					<uni-group class="branch-card-group" :title="`支路${pcsBranchIndex+1}`" mode="card"
 						v-for="(pcsBranchItem,pcsBranchIndex) in item.pcsBranchInfoList"
 						:key="pcsBranchIndex+'pcsBranchInfoList'">
-						<uni-grid :column="3" :showBorder="false" class="info-grid">
+						<uni-grid :column="3" :square="false" :showBorder="false">
 							<uni-grid-item>
 								<view class="grid-item-box">
 									<view class="title">直流功率</view>
@@ -132,27 +136,33 @@
 				runningHeadData: [{
 					title: '实时有功功率（kW）',
 					bgColor: '#FFF2CB',
-					attr: 'totalActivePower'
+					attr: 'totalActivePower',
+					img: 'ssyggl'
 				}, {
 					title: '实时无功功率（kVar）',
 					bgColor: '#CBD6FF',
-					attr: 'totalReactivePower'
+					attr: 'totalReactivePower',
+					img: 'sswggl'
 				}, {
 					title: '电池堆SOC',
 					bgColor: '#DCCBFF',
-					attr: 'soc'
+					attr: 'soc',
+					img: 'soc'
 				}, {
 					title: '电池堆SOH',
 					bgColor: '#FFD4CB',
-					attr: 'soh'
+					attr: 'soh',
+					img: 'soh'
 				}, {
 					title: '今日充电量（kWh）',
 					bgColor: '#FFD6F8',
-					attr: 'dayChargedCap'
+					attr: 'dayChargedCap',
+					img: 'jrcdl'
 				}, {
 					title: '今日放电量（kWh）',
 					bgColor: '#E1FFCA',
-					attr: 'dayDisChargedCap'
+					attr: 'dayDisChargedCap',
+					img: 'jrfdl'
 				}],
 				runningHeadInfo: {},
 				list: [],
@@ -281,134 +291,40 @@
 		}
 	}
 </script>
-
 <style lang="scss" scoped>
-	.title-row {
-		padding: 0 15px;
-		position: relative;
-		height: 50px;
+	.info-grid {
+		background: #fff;
+		padding: 0 20rpx;
 
-		.title {
-			font-weight: 500;
-			line-height: 50px;
-		}
+		.uni-grid-item {
+			padding: 20rpx;
 
-		.msg {
-			position: absolute;
-			right: 15px;
-			top: 50%;
-			transform: translateY(-50%);
-			text-align: right;
-		}
-	}
+			.grid-item-box {
+				box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.08);
+				border-radius: 20rpx;
 
-	// 九宫格
-	.grid-item-box {
-		flex: 1;
-		// position: relative;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 10px;
-		background-color: #fff;
-
-		.title {
-			font-size: 14px;
-			color: #666;
-		}
-
-		.text {
-			margin-top: 10px;
-			font-size: 16px;
-			font-weight: 500;
-			color: #666;
-			overflow-wrap: anywhere;
-		}
-
-		.status-danger {
-			color: #FC6B69;
-		}
-
-		.status-running {
-			color: #05AEA3;
-		}
-
-	}
-
-	//todo 列表
-	.device-list {
-		.uni-collapse-item__title-box {}
-	}
-
-	::v-deep {
-		.info-grid {
-			.uni-grid-item {
-				height: 80px !important;
-
-				.grid-item-box {
-					padding: 0;
+				.title {
+					color: #333;
+					margin-top: 10rpx;
 				}
-			}
-		}
 
-		.uni-collapse-item__wrap {
-			background-color: #eee;
-		}
-
-		.running {
-			.uni-collapse-item__title-text {
-				color: #05AEA3;
-			}
-
-			.title-row {
-				color: #05AEA3;
-			}
-
-
-		}
-
-		.danger {
-			.uni-collapse-item__title-text {
-				color: #FC6B69;
-			}
-
-			.title-row {
-				color: #FC6B69;
-			}
-		}
-
-		.close {
-			.uni-collapse-item__title-text {
-				color: #666666;
-			}
-
-			.title-row {
-				color: #666666;
-			}
-		}
-
-		// 支路样式
-		.pcs-branch-group {
-			.uni-group__title {
-				background-color: #959595;
-
-				.uni-group__title-text {
-					color: #fff;
+				.text {
+					color: #000;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					width: 100%;
+					overflow-x: hidden;
+					text-align: center;
 				}
 			}
 
-			.uni-group__content {
-				padding: 0;
-
-			}
-
-			&.uni-group--card:last-child {
-				margin-bottom: 25px;
-			}
 		}
 
+		.icon {
+			height: 100rpx;
+			width: 100rpx;
+			display: block;
+			border-radius: 20rpx;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/static/images/ems/pcs/jrcdl.jpg b/static/images/ems/pcs/jrcdl.jpg
new file mode 100644
index 0000000..2d36b14
Binary files /dev/null and b/static/images/ems/pcs/jrcdl.jpg differ
diff --git a/static/images/ems/pcs/jrfdl.jpg b/static/images/ems/pcs/jrfdl.jpg
new file mode 100644
index 0000000..5c2c3e3
Binary files /dev/null and b/static/images/ems/pcs/jrfdl.jpg differ
diff --git a/static/images/ems/pcs/soc.jpg b/static/images/ems/pcs/soc.jpg
new file mode 100644
index 0000000..0942044
Binary files /dev/null and b/static/images/ems/pcs/soc.jpg differ
diff --git a/static/images/ems/pcs/soh.jpg b/static/images/ems/pcs/soh.jpg
new file mode 100644
index 0000000..dd94940
Binary files /dev/null and b/static/images/ems/pcs/soh.jpg differ
diff --git a/static/images/ems/pcs/sswggl.jpg b/static/images/ems/pcs/sswggl.jpg
new file mode 100644
index 0000000..d9465d2
Binary files /dev/null and b/static/images/ems/pcs/sswggl.jpg differ
diff --git a/static/images/ems/pcs/ssyggl.jpg b/static/images/ems/pcs/ssyggl.jpg
new file mode 100644
index 0000000..0e1cc01
Binary files /dev/null and b/static/images/ems/pcs/ssyggl.jpg differ
diff --git a/static/scss/global.scss b/static/scss/global.scss
index 9d693d6..c145170 100644
--- a/static/scss/global.scss
+++ b/static/scss/global.scss
@@ -98,4 +98,249 @@
 	line-height: 100px;
 	height: 100px;
 	font-size: 18px;
+}
+// 九宫格
+.grid-item-box {
+	flex: 1;
+	// position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 20rpx;
+	background-color: #fff;
+
+	.title {
+		font-size: 26rpx;
+		color: #666;
+	}
+
+	.text {
+		margin-top: 20rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #666;
+		overflow-wrap: anywhere;
+	}
+
+}
+// 设备详情页面 状态公共样式
+.common-collapse-item{
+	.content{
+		    background: linear-gradient(to bottom, #22bb5873, #45db7a26);
+		    padding: 1rpx 0 1rpx 0;
+	}
+	// 标题
+	.title-wrapper{
+	// 设备状态栏
+		padding:20rpx 30rpx;
+		font-size: 28rpx;
+		line-height: 30rpx;
+		font-weight: 700;
+		color: #000000;
+		.top{
+			.status{
+				display: inline-block;
+				vertical-align: middle;
+				color:#fff;
+				padding:4rpx 10rpx;
+				margin-right: 10rpx;
+				font-size: 22rpx;
+				border-radius: 10rpx;
+			}
+			.name{
+				display: inline-block;
+				vertical-align: middle;
+			}
+		}
+	}
+	// 设备状态卡片
+	.status-card-group{
+		&.no-wrapper-padding{
+			.uni-group__content{
+				padding:0;
+			}
+		}
+		.uni-group__content{
+			padding-top:0;
+			padding-bottom:0;
+		}
+		// 设备状态九宫格
+		.grid-item-box{
+			background-color: transparent;
+			.title{
+				color:#333;
+			}
+			.text{
+				color:#000;
+				font-weight: bolder;
+				&.work-status-color{
+					color:#000;
+				}
+			}
+			
+		}
+	}
+	// 设备数据卡片
+	.data-card-group{
+		.uni-group__content{
+			padding-top:0;
+			padding-bottom:0;
+		}
+		// 数据列表
+		.data-row{
+			font-size: 26rpx;
+			line-height: 36rpx;
+			color: #000;
+			padding:24rpx 0;
+			&:not(:last-child){
+				border-bottom: 1px solid #ebedf0;
+			}
+			.title{
+				color:#333;
+				text-align: left;
+			}
+			.value{
+				text-align: right;
+			}
+		}
+	}
+	// 子设备表格卡片
+	.child-card-group{
+		.child-table{
+			.uni-table-th{
+				color:#333;
+			}
+			.uni-table-td{
+				color:#000;
+			}
+			.table--border{
+				border-color:#ebedf0;
+			}
+		}
+	}
+	// 支路卡片
+	 .branch-card-group{
+		 .uni-group__title {
+		 	background-color: #959595;
+			height: 70rpx;
+		 	.uni-group__title-text {
+		 		color: #fff;
+				font-size:26rpx;
+				line-height: 30rpx;
+		 	}
+		 }
+		 .uni-group__content {
+		 	padding: 0;
+			.title{
+				color:#333;
+			}
+			.text{
+				color:#000;
+				font-weight: normal;
+			}
+		 }
+		 &.uni-group--card:last-child {
+		 	margin-bottom: 50rpx;
+		 }
+	 }
+}
+//运行中
+.running-collapse-item{
+	// 标题
+	.title-wrapper{
+		.top{
+			.status{
+				background-color: #30be95;
+			}
+		}
+	}
+	.content{
+		    background: linear-gradient(to bottom, #22bb5873, #45db7a26);
+	}
+	// 状态九宫格
+	.status-card-group{
+		.grid-item-box{
+			.text{
+				&.work-status-color{
+					color:#30be95;
+				}
+			}
+			
+		}
+	}
+	//支路设备
+	.branch-card-group{
+		 .uni-group__title {
+			background-color: #30be95;
+		 }
+	}
+}
+
+//故障
+.warning-collapse-item{
+	// 标题
+	.title-wrapper{
+		.top{
+			.status{
+				background-color: #ed7876;
+			}
+		}
+	}
+	.content{
+		    background: linear-gradient(to bottom, #f5604e73, #f5604e26);
+	}
+	// 状态九宫格
+	.status-card-group{
+		.grid-item-box{
+			.text{
+				&.work-status-color{
+					color:#ed7876;
+				}
+			}
+			
+		}
+	}
+	//支路设备
+	.branch-card-group{
+		 .uni-group__title {
+			background-color: #ed7876;
+		 }
+	}
+	
+}
+// 停机
+.timing-collapse-item{
+	// 标题
+	.title-wrapper{
+		.top{
+			.status{
+				background-color: #000;
+			}
+		}
+	}
+	.content{
+		    background: linear-gradient(to bottom, #8c8c8c73, #8c8c8c26);
+	}
+	// 状态九宫格
+	.status-card-group{
+		.grid-item-box{
+			.text{
+				&.work-status-color{
+					color:#000;
+				}
+			}
+			
+		}
+	}
+	//支路设备
+	.branch-card-group{
+		 .uni-group__title {
+			background-color: #000;
+		 }
+	}
+	
+	
 }
\ No newline at end of file