根据新版重新修改页面

src/assets/icons/svg/boiler2.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="1719295984715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="46864" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M192 128h768c35.346 0 64 28.654 64 64v576c0 35.346-28.654 64-64 64H192c-35.346 0-64-28.654-64-64V192c0-35.346 28.654-64 64-64z m0 64v576h768V192H192z m384 480c-70.692 0-128-57.308-128-128 0-47.128 42.667-132.462 128-256 85.333 123.538 128 208.872 128 256 0 70.692-57.308 128-128 128z m-67.378-212.19C489.318 498.418 480 527.348 480 544.847c0 53.02 42.98 96 96 96s96-42.98 96-96c0-17.5-9.318-46.429-28.622-85.035C627.375 427.803 604.906 389.83 576 346c-28.906 43.83-51.375 81.803-67.378 113.81zM896 771v189c0 35.346-28.654 64-64 64h-64c-35.346 0-64-28.654-64-64V832c0-35.346 28.654-64 64-64h64V173h64v598z m-576-3h64c35.346 0 64 28.654 64 64v128c0 35.346-28.654 64-64 64h-64c-35.346 0-64-28.654-64-64V181h64v587zM64 480h114v64H64v64c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V416c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v64z m512 192c-53.02 0-96-42.98-96-96 0-35.346 32-88.68 96-160 64 71.32 96 124.654 96 160 0 53.02-42.98 96-96 96z m-44.56-145.93C518.154 548.214 512 565.269 512 576.118c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-10.849-6.154-27.904-19.44-50.046C609.864 508.243 595.003 487.85 576 465c-19.003 22.85-33.864 43.243-44.56 61.07zM320 832v128h64V832h-64z m512 0h-64v128h64V832zM352 0c17.673 0 32 14.327 32 32v129c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V32c0-17.673 14.327-32 32-32z m448 0c17.673 0 32 14.327 32 32v129c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V32c0-17.673 14.327-32 32-32z" fill="#7E96FF" p-id="46865"></path></svg>

src/assets/styles/main.scss

@@ -20,7 +20,7 @@ page {
   --cyan: #1cbbb4;
   --blue: #409eff;
   --blue-1: #409eff;
-  --purple: #6739b6;
+  --purple: #6366f1;
   --mauve: #9c26b0;
   --pink: #e03997;
   --brown: #a5673f;
@@ -4289,9 +4289,9 @@ scroll-view.ui-steps .ui-item {
   overflow-y: scroll;
 }
 .box-card.cardSty{
-	background-color: #092a45;
-	color:#fff;
-	border:2px solid #2f516c;
+	border-radius: 16px;
+	background-color: #f2f7ff;
+	box-shadow: 0 0 4px 1px #e1e1e1;
 }
 .box-card.blueCard{
 	background-color: #1768a3;
@@ -4301,13 +4301,17 @@ scroll-view.ui-steps .ui-item {
 .inblock{
   display: inline-block;
 }
+.titleSty{
+	height: 32px;
+	font-weight: bold;
+}
 .sTitleSty{
 	position: absolute;
 	// top: 50%;
-	left: 0;
+	left: 5px;
 	height: 100%;
 	text-align: center;
-	color: #fff;
+	// color: #fff;
 	font-size: 0.9rem;
 	font-weight: bold;
 	// transform: translate(0, -50%);

src/components/Echarts/LineChart/index.vue

@@ -56,7 +56,7 @@
 				itemWidth: 22,
 				itemHeight: 10,
 				textStyle: {
-					 color: "#fff",
+					 // color: "#fff",
 					 fontSize: 11
 				}
 			},
@@ -72,7 +72,7 @@
 				type: 'category',
 				boundaryGap: false, //X轴贴边false不贴边true
 				axisLabel: {
-					color: '#fff',
+					// color: '#fff',
 					fontSize: 11,
 					showMaxLabel: true
 				},
@@ -83,7 +83,7 @@
 				type: 'value',
 				axisLabel: {
 					fontSize: 11,
-					color:"#fff",
+					// color:"#fff",
 					showMaxLabel: true
 				},
 				axisLine: {
@@ -95,7 +95,7 @@
 				splitLine: {
 					show: true,
 					lineStyle: {
-						color: ['#368e8f'],
+						color: ['#c6c6c6'],
 						type: "dashed"
 					}
 				}

src/components/Echarts/pieRoseTypeSimple/index.vue

@@ -47,76 +47,32 @@
 	}, );
 	const getOption = function(_data) {
 		let option = {
+			title: {
+				show: false,
+			},
+			tooltip: {
+				trigger: 'item'
+			},
+			legend: {
+				orient: 'vertical',
+				right: 'right',
+				top: 'center',
+				itemWidth: 16,
+				itemHeight: 10,
+				textStyle: {
+					fontSize: 11
+				}
+			},
+			color: ["#009dff", "#22e4ff", "#3bffd0", "#04e38a", "#9dff86", "#fee588", "#fea844", "#fe7044", "#fe4444", "#ff7c8c"],
 			series: [{
-				type: 'gauge',
-				// splitNumber: 12,
-				min: data.value.min,
-				max: data.value.max,
-				radius: '95%',
-				progress: {
-					show: true,
-					width: 8,
-					color: "#fff"
-				},
-				itemStyle: {
-				    color: '#009dff',
-				},
-				pointer: {
-					length: '45%',
-					width: 3,
-				},
-				axisLine: {
-					lineStyle: {
-						width: 8
-					}
-				},
-				axisTick: {
-					distance: 1,
-					lineStyle: {
-						width: 1,
-						color: '#999'
-					}
-				},
-				splitLine: {
-					length: 10,
-					distance: 1,
-					lineStyle: {
-						width: 1,
-						color: '#999'
-					}
-				},
-				axisLabel: {
-					distance: 8,
-					color: '#fff',
-					fontSize: 8
-				},
-				title: {
-					show: false
-				},
-				detail: {
-					valueAnimation: true,
-					fontSize: 20,
-					offsetCenter: [0, '92%'],
-					color: 'inherit',
-					formatter: function (value) {
-						return '{value|' + data.value.value + '}{unit|' + data.value.unit + '}';
-					},
-					rich: {
-						value: {
-							fontSize: 20,
-							fontWeight: 'bolder',
-							color: '#04e088'
-						},
-						unit: {
-							fontSize: 12,
-							color: '#04e088',
-							padding: [0, 0, 0, 5]
-						}
-					}
-				},
-				data: [{
-					value: data.value.value
-				}]
+				name: 'Access From',
+				type: 'pie',
+				radius: '65%',
+				center: ["45%", "45%"],
+				data: data.value,
+				label: {
+					formatter: '{d}%'
+				}
 			}]
 		};
 		return option;

src/components/Progress/index.vue

@@ -11,7 +11,7 @@
 			</el-progress>
 			<span class="text-sm">{{data.name}}</span>
 		</div>
-		<div class="text-xxl margin-left-sm">{{data.value}}{{data.unit}}</div>
+		<div class="text-xxl text-purple margin-left-sm">{{data.value}}{{data.unit}}</div>
 	</div>
 </template>
 
@@ -48,5 +48,8 @@
 	);
 </script>
 
-<style>
+<style scoped lang="scss">
+	::v-deep .el-progress-bar__outer{
+		background-color: #09dfc0;
+	}
 </style>

src/components/oilsBox/index.vue

@@ -0,0 +1,69 @@
+<template>
+	<div class="flex flex-direction align-center">
+		<div class="oilBox">
+			<div class="oilHeig" :style="{ height: (parseFloat(data.value)/parseFloat(data.max || max))*100 + '%'}">
+				<div class="oilTxt text-sm">
+					<span class="margin-lr-xs margin-right-xs text-bold">{{data.value}}</span>
+					<span>{{data.unit}}</span>
+				</div>
+			</div>
+		</div>
+		<div>{{data.name}}</div>
+	</div>
+</template>
+
+<script setup>
+	const { proxy } = getCurrentInstance();
+	const min = ref(0);
+	const max = ref(10);
+	const props = defineProps({
+		data: {
+		  type: Object,
+		  default: () => {
+		    return {
+				name: "",
+				value: 0,
+				min: 0,
+				max: 10,
+				unit: ""
+		    }
+		  }
+		}
+	});
+	const { height, name, data } = toRefs(props);
+	watch(data, (newValue) => {
+			
+		},{
+			deep: true
+		},
+	);
+</script>
+<style scoped lang="scss">
+	.oilBox{
+		position: relative;
+		width: 30%; 
+		height: 55%;
+		min-width: 55px;
+		min-height: 55px;
+		overflow: hidden;
+		border-radius: 4px; 
+		border: 2px solid #0e47b0;
+		border-top: none; 
+		.oilHeig{
+			position: absolute; 
+			bottom: 0px; 
+			left: 0px; 
+			right: 0px; 
+			height: 0%; 
+			background-color: #f08e3e; 
+			transition-duration: 0.1s;
+		}
+		.oilTxt{
+			position: absolute; 
+			top: 0px; 
+			left: 0px; 
+			right: 0px; 
+			transition-duration: 0.1s;
+		}
+	}
+</style>

src/layout/components/AppMain.vue

@@ -30,7 +30,7 @@ const cachedViews = computed(() => {
   width: 100%;
   position: relative;
   overflow: hidden;
-  background-color: #0d3f67;
+  background-color: #f1f5f9;
 }
 
 .fixed-header + .app-main {

src/router/index.js

@@ -72,6 +72,20 @@ export const constantRoutes = [
         affix: true
       }
     }]
+  },{
+	  path: '/statusMonitor',
+	  component: Layout,
+	  redirect: 'noredirect',
+	  children: [{
+	    path: 'statusMonitor',
+	    component: () => import('@/views/statusMonitor/index'),
+	    name: 'statusMonitor',
+	    meta: {
+	      title: '状态监测',
+	      icon: 'home',
+	      affix: true
+	    }
+	  }]
   },
   {
     path: '/efficiencyAnalysis',

src/views/efficiencyAnalysis/contRast/energyConsu/index.vue

@@ -0,0 +1,281 @@
+<template>
+	<el-row :gutter="10">
+		<el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
+			<el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
+				<div class="text-xs text-bold">能源输入</div>
+				<div class="flex flex-direction justify-center align-center" style="height: calc(66.66vh - 170px);">
+					<svg-icon icon-class="PowerSupply" style="font-size: 3.6rem;"/>
+					<div class="text-purple text-xl text-bold margin-top">10000</div>
+					<div class="text-xs text-bold">总能源输入</div>
+				</div>
+			</el-card>
+		</el-col>
+		<el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
+			<el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
+				<div class="text-xs text-bold">初级能量消耗端</div>
+				<div style="height: calc(66.66vh - 170px);">
+					<div :style="{ height: stem.num + '%' }" class="flex flex-direction justify-center align-center"
+						v-for="(stem, sndex) in energyStart" :key="sndex">
+						<svg-icon :icon-class="stem.icon" style="font-size: 1.8rem;"/>
+						<div class="text-purple text-sm text-bold">{{stem.value}}</div>
+						<div class="text-xs text-bold">{{stem.name}}</div>
+					</div>
+				</div>
+			</el-card>
+		</el-col>
+		<el-col :xl="11" :lg="11" :md="11" :sm="12" :xs="24">
+			<el-card class="text-xs box-card" :body-style="{ padding: '10px !important' }">
+				<div class="text-bold text-center">能源流传递及损耗</div>
+				<div class="grid col-3">
+					<div style="height: calc(66.66vh - 170px);padding-right: 8px;">
+						<div v-for="(ftem, fndex) in energyFlow1" :key="fndex"
+							:style="{ height: ftem.heig + '%' }" class="flex flex-direction"
+							:class="fndex == 2?'justify-center':'justify-around'">
+							<el-card class="box-card" :body-style="{ padding: '5px !important' }"
+								:class="fndex == 2?'margin-top':''"
+								 v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
+								<div class="flex justify-between align-center">
+									<span>{{ fstem.name }}</span>
+									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
+								</div>
+							</el-card>
+						</div>
+					</div>
+					<div style="height: calc(66.66vh - 170px);padding: 0 4px;">
+						<div v-for="(ftem, fndex) in energyFlow2" :key="fndex"
+							:style="{ height: ftem.heig + '%' }" class="flex flex-direction"
+							:class="fndex == 4?'justify-center':'justify-around'">
+							<el-card class="box-card" :body-style="{ padding: '5px !important' }"
+								:class="fndex == 4?'margin-top':''"
+								 v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
+								<div class="flex justify-between align-center">
+									<span>{{ fstem.name }}</span>
+									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
+								</div>
+							</el-card>
+						</div>
+					</div>
+					<div style="height: calc(66.66vh - 170px);padding-left: 8px;">
+						<div v-for="(ftem, fndex) in energyFlow3" :key="fndex"
+							:style="{ height: ftem.heig + '%' }" class="flex flex-direction"
+							:class="fndex == 4?'justify-center':'justify-around'">
+							<el-card class="box-card" :body-style="{ padding: '5px !important' }"
+								:class="fndex == 4?'margin-top':''"
+								 v-for="(fstem, fsndex) in ftem.rows" :key="fsndex">
+								<div class="flex justify-between align-center">
+									<span>{{ fstem.name }}</span>
+									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
+								</div>
+							</el-card>
+						</div>
+					</div>
+				</div>
+			</el-card>
+		</el-col>
+		<el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12">
+			<el-card class="text-xs box-card" :body-style="{ padding: '10px !important' }">
+				<div class="text-bold text-center">耗能末端</div>
+				<div style="height: calc(66.66vh - 170px);" class="flex flex-direction justify-around">
+					<el-card class="box-card" :body-style="{ padding: '4px 5px !important' }" 
+						v-for="(etem, endex) in energyEnd" :key="endex">
+						<div class="flex justify-between align-center">
+							<span>{{ etem.name }}</span>
+							<span class="text-purple" style="font-weight: bolder;">{{ etem.value }}</span>
+						</div>
+					</el-card>
+				</div>
+			</el-card>
+		</el-col>
+		<el-col :xl="3" :lg="3" :md="3" :sm="12" :xs="12">
+			<el-card class="box-card text-center" :body-style="{ padding: '10px !important' }">
+				<div class="text-xs text-bold">能源有效做功</div>
+				<div class="flex flex-direction justify-center align-center" style="height: calc(66.66vh - 170px);">
+					<svg-icon icon-class="energy" style="font-size: 3.6rem;"/>
+					<div class="text-purple text-xl text-bold margin-top">10000</div>
+					<div class="text-xs text-bold">能源有效做功</div>
+				</div>
+			</el-card>
+		</el-col>
+	</el-row>
+	<!-- height:  -->
+</template>
+
+<script setup>
+	const data = reactive({
+		energyStart: [{
+			name: "主机",
+			value: 466.1,
+			icon: "engine",
+			num: 30.8
+		},{
+			name: "辅机",
+			value: 466.1,
+			icon: "engine",
+			num: 30.8
+		},{
+			name: "废气锅炉",
+			value: 466.1,
+			icon: "boiler1",
+			num: 11.55
+		},{
+			name: "燃油锅炉",
+			value: 466.1,
+			icon: "boiler2",
+			num: 11.55
+		},{
+			name: "其他装置",
+			value: 466.1,
+			icon: "equipment",
+			num: 15.4
+		}],
+		energyFlow1: [{
+			heig: 30.8,
+			rows: [{
+				name: "其他损失",
+				value: 466.1
+			},{
+				name: "排烟",
+				value: 894.0
+			},{
+				name: "传动系统",
+				value: 12.3
+			},{
+				name: "冷却损失",
+				value: 45.01
+			}]
+		},{
+			heig: 30.8,
+			rows: [{
+				name: "电站其他损失",
+				value: 676.02
+			},{
+				name: "排烟",
+				value: 451.7
+			},{
+				name: "船舶电网",
+				value: 10000
+			},{
+				name: "冷却电网",
+				value: 105.05
+			}]
+		},{
+			heig: 25,
+			rows: [{
+				name: "蒸汽管路",
+				value: 861.2
+			},{
+				name: "锅炉热量损失",
+				value: 164.2
+			}],
+		},{
+			heig: 13.5,
+			rows: [{
+				name: "能量损失",
+				value: 81.3
+			}]
+		}],
+		energyFlow2: [{
+			heig: 15.4,
+			rows: [{
+				name: "排烟损失",
+				value: 466.1
+			}]
+		},{
+			heig: 15.4,
+			rows: [{
+				name: "螺旋桨",
+				value: 676.02
+			},{
+				name: "传动损失",
+				value: 451.7
+			}]
+		},{
+			heig: 15.4,
+			rows: [{
+				name: "排烟损失",
+				value: 676.02
+			}]
+		},{
+			heig: 15.4,
+			rows: [{
+				name: "电力负载",
+				value: 676.02
+			},{
+				name: "电网损失",
+				value: 676.02
+			}]
+		},{
+			heig: 25,
+			rows: [{
+				name: "蒸汽负载",
+				value: 861.2
+			},{
+				name: "管路热量损失",
+				value: 164.2
+			}],
+		}],
+		energyFlow3: [{
+			heig: 46.2,
+			rows: [{
+				name: "推进损失",
+				value: 466.1
+			}]
+		},{
+			heig: 15.4,
+			rows: [{
+				name: "负载损失",
+				value: 451.7
+			}]
+		},{
+			heig: 25,
+			rows: [{
+				name: "负载损失",
+				value: 164.2
+			}],
+		}],
+		energyEnd: [{
+			name: "辅机T/C回收",
+			value: 466.1
+		},{
+			name: "主机T/C回收",
+			value: 894.0
+		},{
+			name: "推进做功",
+			value: 12.3
+		},{
+			name: "机舱辅机",
+			value: 45.01
+		},{
+			name: "甲板机械",
+			value: 676.02
+		},{
+			name: "空调冷藏",
+			value: 451.7
+		},{
+			name: "厨房洗衣",
+			value: 10000
+		},{
+			name: "电器设备",
+			value: 105.05
+		},{
+			name: "货油舱加热",
+			value: 861.2
+		},{
+			name: "机舱加热",
+			value: 164.2
+		},{
+			name: "机械用蒸汽",
+			value: 81.3
+		},{
+			name: "其他用途",
+			value: 162.1
+		},{
+			name: "耗能做功",
+			value: 46.21
+		}]
+	});
+	const { energyStart, energyEnd, energyFlow1, energyFlow2, energyFlow3 } = toRefs(data);
+</script>
+
+<style>
+</style>

src/views/efficiencyAnalysis/contRast/index.vue

@@ -1,35 +1,34 @@
 <template>
 	<el-row :gutter="14">
-		<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-			<div style="max-height: calc(66.66vh - 90px);overflow: hidden;border-radius: 14px;">
-				<el-image style="width: 100%;" :src="engImg"></el-image>
-			</div>
+		<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+				<div class="text-sm text-bold margin-bottom-xs">全能量消耗分布图</div>
+				<energy-consu/>
+			</el-card>
 		</el-col>
-		<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-			<el-card class="box-card blueCard text-sm" :body-style="{ padding: '10px !important' }">
-				<div style="height: calc(14vh - 36px)" class="bg-white radius padding-xs">
-					<div class="text-bold">重油储存</div>
-					<div class="flex justify-around align-center text-center" style="height: calc(100% - 22px)">
-						<div v-for="(ztem, zndex) in 4" :key="zndex">
-							<div class="text-blue text-xxl text-bold">1222L</div>
-							<div>{{zndex+1}}号柜</div>
-						</div>
-					</div>
-				</div>
-				<div style="height: calc(14vh - 36px)" class="bg-white margin-tb-xs radius padding-xs">
-					<div class="text-bold">轻油储存</div>
-					<div class="flex justify-around align-center text-center" style="height: calc(100% - 22px)">
-						<div v-for="(qtem, qndex) in 4" :key="qndex">
-							<div class="text-blue text-xxl text-bold">1222L</div>
-							<div>{{qndex+1}}号柜</div>
-						</div>
-					</div>
-				</div>
+		<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+			<el-row :gutter="14">
+				<template v-for="(ltem, lndex) in OilStorage.oilLevel" :key="lndex">
+					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+						<el-card class="box-card cardSty text-sm margin-bottom-sm" :body-style="{ height: 'calc(34vh - 72px)',padding: '10px !important' }">
+							<div class="text-bold">{{lndex == 0?'轻':'重'}}油储存</div>
+							<div class="grid col-2 text-center" style="height: calc(100% - 22px)">
+								<div v-for="(qtem, qndex) in ltem" :key="qndex"
+									class="flex align-end justify-center" style="height: 50%;">
+									<oil-box :data="qtem"/>
+									<div class="text-blue text-xxl text-bold margin-left-sm">{{OilStorage.oilStorage[lndex][qndex].value}}L</div>
+								</div>
+							</div>
+						</el-card>
+					</el-col>
+				</template>
+			</el-row>
+			<el-card class="box-card cardSty text-sm" :body-style="{ padding: '10px !important' }">
 				<div class="flex">
 					<div style="width: 70%;">
-						<line-chart name="HostPressure" :data="oilsData" height="calc(38.66vh - 51px)"/>
+						<line-chart name="HostPressure" :data="oilsData" height="calc(32.66vh - 51px)"/>
 					</div>
-					<div style="width: 30%;padding: 0 2%;" class="text-white">
+					<div style="width: 30%;padding: 0 2%;">
 						<el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
 							<el-form-item style="margin-bottom: 8px;">
 								<div>时间单位：</div>
@@ -71,12 +70,12 @@
 			</el-card>
 		</el-col>
 		<el-col :span="24" :xs="24">
-			<el-card class="box-card blueCard margin-top-sm" :body-style="{ padding: '10px !important' }">
+			<el-card class="box-card cardSty margin-top-sm" :body-style="{ padding: '10px !important' }">
 				<el-row :gutter="20">
 					<template v-for="(item,index) in consumeData" :key="index">
-						<el-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24" style="position: relative;">
+						<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="position: relative;">
 							<pie-rose :name="item.name" :data="item.data" height="calc(33.33vh - 90px)"/>
-							<div class="text-sm text-white" style="position: absolute;bottom: 0;left: 36%;transform: translate(-50%, 0);">{{item.title}}</div>
+							<div class="text-sm text-bold" style="position: absolute;bottom: 0;left: 45%;transform: translate(-50%, 0);">{{item.title}}</div>
 						</el-col>
 					</template>
 				</el-row>
@@ -89,6 +88,9 @@
 <script setup>
 	import pieRose from "@/components/Echarts/pieRoseTypeSimple";
 	import lineChart from "@/components/Echarts/LineChart";
+	import OilBox from "@/components/oilsBox";
+	import EnergyConsu from "./energyConsu";
+	
 	import engImg from "@/assets/images/20240529135050.png";
 	const timeUnitOptions = ref([]);
 	const data = reactive({
@@ -208,10 +210,88 @@
 			timeUnit: null,
 			startTime: null,
 			endTime: null
+		},
+		OilStorage: {
+			"oilLevel": [[{
+				name: "左重油舱",
+				value: 0.90,
+				min: 0,
+				max: 2,
+				unit: "m"
+			},{
+				name: "右重油舱",
+				value: 1.52,
+				min: 0,
+				max: 2,
+				unit: "m"
+			},{
+				name: "燃油沉淀柜",
+				value: 0.67,
+				min: 0,
+				max: 2,
+				unit: "m"
+			},{
+				name: "燃油日用柜",
+				value: 0.83,
+				min: 0,
+				max: 2,
+				unit: "m"
+			}],
+			[{
+				name: "左轻油舱",
+				value: 1.33,
+				min: 0,
+				max: 2,
+				unit: "m"
+			},{
+				name: "右轻油舱",
+				value: 1.95,
+				min: 0,
+				max: 2,
+				unit: "m"
+			},{
+				name: "轻油沉淀柜",
+				value: 1.01,
+				min: 0,
+				max: 2,
+				unit: "m"
+			},{
+				name: "2号轻油日用柜",
+				value: 1.63,
+				min: 0,
+				max: 2,
+				unit: "m"
+			}]],
+			"oilStorage": [[{
+				value: 1523.00,
+				unit: "L"
+			},{
+				value: 12487.00,
+				unit: "L"
+			},{
+				value: 452.00,
+				unit: "L"
+			},{
+				value: 523.00,
+				unit: "L"
+			}],[{
+				value: 2060.50,
+				unit: "L"
+			},{
+				value: 2137.90,
+				unit: "L"
+			},{
+				value: 237.90,
+				unit: "L"
+			},{
+				value: 137.90,
+				unit: "L"
+			}]]
 		}
 	});
-	const { consumeData, oilsData, oilsForm } = toRefs(data);
+	const { consumeData, oilsData, oilsForm, OilStorage } = toRefs(data);
 </script>
 
-<style>
+<style scoped lang="scss">
+	
 </style>

src/views/efficiencyAnalysis/distriBution/index.vue

@@ -1,14 +1,14 @@
 <template>
 	<el-row :gutter="14">
 		<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-			<el-card class="box-card blueCard text-sm" :body-style="{ padding: '10px !important' }">
+			<el-card class="box-card cardSty text-sm" :body-style="{ padding: '10px !important' }">
 				<div class="flex" :class="undex == 0?'margin-bottom':''" 
 					v-for="(utem,undex) in unitConsData" :key="undex">
 					<div style="width: 70%;position: relative;">
 						<div class="sTitleSty" style="letter-spacing: 2px;">{{utem.name}}</div>
 						<line-chart :name="utem.className" :data="utem" height="calc(30vh - 65px)"/>
 					</div>
-					<div style="width: 30%;padding: 0 2%;" class="text-white">
+					<div style="width: 30%;padding: 0 2%;">
 						<el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
 							<el-form-item style="margin-bottom: 0px;">
 								<div>开始时间：</div>
@@ -39,14 +39,14 @@
 			</el-card>
 		</el-col>
 		<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-			<el-card class="box-card blueCard text-sm" :body-style="{ padding: '10px !important' }">
+			<el-card class="box-card cardSty text-sm" :body-style="{ padding: '10px !important' }">
 				<div class="flex" :class="sndex == 0?'margin-bottom':''" 
 					v-for="(stem,sndex) in timeConsData" :key="sndex">
 					<div style="width: 70%;position: relative;">
 						<div class="sTitleSty" style="letter-spacing: 2px;">{{stem.name}}</div>
 						<line-chart :name="stem.className" :data="stem" height="calc(30vh - 65px)"/>
 					</div>
-					<div style="width: 30%;padding: 0 2%;" class="text-white">
+					<div style="width: 30%;padding: 0 2%;">
 						<el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
 							<el-form-item style="margin-bottom: 0px;">
 								<div>开始时间：</div>
@@ -77,15 +77,40 @@
 			</el-card>
 		</el-col>
 		<el-col :span="24" :xs="24">
-			<el-card class="box-card blueCard margin-top-sm" :body-style="{ padding: '10px !important' }">
-				<el-row :gutter="20">
+			<el-card class="box-card cardSty margin-top-sm" :body-style="{ padding: '10px !important' }">
+				<el-row :gutter="30">
 					<template v-for="(item,index) in linesData" :key="index">
 						<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
 							<div style="position: relative;">
 								<div class="sTitleSty" style="letter-spacing: 2px;">{{item.name}}</div>
-								<line-chart :name="item.className" :data="item" height="calc(40vh - 88px)"/>
+								<line-chart :name="item.className" :data="item" height="calc(40vh - 116px)"/>
+							</div>
+							<div>
+								<el-form ref="oilsFormRef" class="flex" :model="oilsForm" label-width="100px">
+									<el-form-item style="margin-bottom: 0;" label="查询方式：">
+										<el-select v-model="oilsForm.equipId" placeholder="请选择" size="small" style="width: 100%;">
+											<el-option
+											  v-for="item in timeUnitOptions"
+											  :key="item.value"
+											  :label="item.label"
+											  :value="item.value">
+											</el-option>
+										</el-select>
+									</el-form-item>
+									<el-form-item label="时间：" style="margin-bottom: 0px;">
+										<div></div>
+										<el-date-picker
+										  v-model="oilsForm.startTime"
+										  type="daterange"
+										  size="small"
+										  style="width: 50%;"
+										  range-separator=" ~ "
+										  start-placeholder="开始日期"
+										  end-placeholder="结束日期">
+										</el-date-picker>
+									</el-form-item>
+								</el-form>
 							</div>
-							<div></div>
 						</el-col>
 					</template>
 				</el-row>

src/views/efficiencyAnalysis/historyPage/index.vue

@@ -2,7 +2,7 @@
 	<div class="margin-bottom">
 		<el-row :gutter="14">
 			<el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-				<el-card class="box-card blueCard" :body-style="{ padding: '10px !important' }">
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 					<el-form ref="systemFormRef" :model="systemForm" label-width="100px" class="grid">
 						<el-form-item label="系统选择：" class="flex-twice" style="margin-bottom: 8px;">
 							<el-select v-model="systemForm.systemId" placeholder="请选择" size="small" style="width: 100%;">
@@ -41,11 +41,11 @@
 						<div class="sTitleSty">轴转速</div>
 						<line-chart name="HostSpeed" :data="speedData" height="calc(33.33vh - 89px)"/>
 					</div>
-					<div class="margin-top-xs text-white text-bold">主机</div>
+					<div class="margin-top-xs text-bold">主机</div>
 				</el-card>
 			</el-col>
 			<el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-				<el-card class="box-card blueCard" :body-style="{ padding: '10px !important' }">
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 					<el-form ref="equipFormRef" :model="equipForm" label-width="100px" class="grid">
 						<el-form-item label="设备选择：" class="flex-twice" style="margin-bottom: 8px;">
 							<el-select v-model="equipForm.equipId" placeholder="请选择" size="small" style="width: 100%;">
@@ -76,7 +76,7 @@
 						<div class="sTitleSty">温度</div>
 						<line-chart name="EngiTempl" :data="eTemplData" height="calc(33.33vh - 88px)"/>
 					</div>
-					<div class="margin-tb" style="position: relative;">
+					<div style="position: relative;margin: 16px 0;">
 						<div class="sTitleSty">压力</div>
 						<line-chart name="EngiPressure" :data="ePressureData" height="calc(33.33vh - 88px)"/>
 					</div>
@@ -84,7 +84,7 @@
 						<div class="sTitleSty">功率</div>
 						<line-chart name="EngiPower" :data="powerData" height="calc(33.33vh - 89px)"/>
 					</div>
-					<div class="margin-top-xs text-white text-bold">辅机</div>
+					<div class="margin-top-xs text-bold">辅机</div>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -236,7 +236,7 @@
 
 <style scoped lang="scss">
 	::v-deep .el-form-item__label {
-	  color: #fff;
+	  line-height:  var(--el-component-size-small);;
 	}
 	
 </style>

src/views/efficiencyAnalysis/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="text-white padding">
+	<div class="padding">
 		<div class="margin-bottom">
 			<history-page v-if="tabPosition == 'history'"/>
 			<cont-rast v-if="tabPosition == 'contrast'"/>
@@ -11,7 +11,7 @@
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24" class="text-center text-sm">
 				<el-radio-group v-model="tabPosition" style="border-radius: 40px;overflow: hidden;">
 				    <el-radio-button label="history">历史数据查询</el-radio-button>
-				    <el-radio-button style="border-left: 1px solid #2f516c;border-right: 1px solid #2f516c;" label="contrast">能效指标对比分析</el-radio-button>
+				    <el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="contrast">能效指标对比分析</el-radio-button>
 				    <el-radio-button label="distribution">能效分布分析</el-radio-button>
 				</el-radio-group>
 			</el-col>
@@ -70,13 +70,13 @@
 
 <style scoped lang="scss">
 	::v-deep .el-radio-button__inner{
-		background-color: #2091de;
+		background-color: #2da5f0;
 		border: none;
 		color: #fff;
 		font-size: 0.75rem;
 	}
 	::v-deep .el-radio-button__original-radio:checked+.el-radio-button__inner{
-		background-color: #3b9a9c;
+		background-color: var(--purple);
 	}
 	::v-deep .el-radio-button:first-child .el-radio-button__inner{
 		border: none;

src/views/efficiencyMana/AlarmMana/index.vue

@@ -4,7 +4,7 @@
 			<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
 				<el-row :gutter="20">
 					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 							<div class="flex align-center justify-around" style="position: relative;padding-left: 40px;height: calc(36vh - 100px);">
 								<div class="sTitleSty" style="font-size: 1.2rem;letter-spacing: 4px;color: #000;">报警管理</div>
 								<div>
@@ -24,7 +24,7 @@
 						</el-card>
 					</el-col>
 					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 							<div style="position: relative;padding-left: 40px;">
 								<div class="sTitleSty" style="font-size: 1.2rem;letter-spacing: 4px;color: #000;">{{alarmProportion.title}}</div>
 								<pie-circular-chart :name="alarmProportion.name" :data="alarmProportion.data" height="calc(36vh - 100px)"/>
@@ -32,7 +32,7 @@
 						</el-card>
 					</el-col>
 				</el-row>
-				<el-card class="box-card margin-top" :body-style="{ padding: '10px !important' }">
+				<el-card class="box-card cardSty margin-top" :body-style="{ padding: '10px !important' }">
 					<div class="text-center margin-bottom-sm text-xl text-bold">{{alarmRepoData.name}}</div>
 					<bar-chart name="HostPressure" :data="alarmRepoData" height="calc(64vh - 127px)"/>
 				</el-card>
@@ -215,10 +215,6 @@
 
 
 <style scoped lang="scss">
-	.box-card{
-		border-radius: 16px;
-		box-shadow: 0 0 4px 1px #ccc;
-	}
 	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
 		background-color: #a9cbe2;
 	}

src/views/efficiencyMana/EnergyReport/FuelData/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+	<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 		<div class="text-center text-bold margin-bottom-xs">船舶燃油消耗数据收集计划</div>
 		<el-row :gutter="24">
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">

src/views/efficiencyMana/EnergyReport/ImproveEnergy/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+	<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 		<div class="text-center text-bold margin-bottom">提高能效的船舶管理计划</div>
 		<el-row :gutter="50">
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">

src/views/efficiencyMana/EnergyReport/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-row :gutter="14" style="color: #72819f;">
 		<el-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
-			<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 				<el-row>
 					<el-col :span="7" :xs="24">
 						<div class="flex align-center" style="height: calc(25vh - 72px);overflow: hidden;">
@@ -36,7 +36,7 @@
 			</el-card>
 		</el-col>
 		<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
-			<el-card class="box-card" :body-style="{ padding: '4px 10px !important' }">
+			<el-card class="box-card cardSty" :body-style="{ padding: '4px 10px !important' }">
 				<el-row :gutter="10">
 					<el-col :span="14" :xs="24">
 						<div class="flex text-sm text-bold align-center justify-around" style="height: calc(25vh - 60px);">
@@ -83,10 +83,6 @@
 </script>
 
 <style scoped lang="scss">
-	.box-card{
-		border-radius: 16px;
-		box-shadow: 0 0 4px 1px #ccc;
-	}
 	::v-deep .el-descriptions__label:not(.is-bordered-label){
 		margin-right: 0;
 		font-weight: bold;

src/views/efficiencyMana/FuelInfoMana/index.vue

@@ -2,7 +2,7 @@
 	<div>
 		<el-row :gutter="16">
 			<el-col :xl="7" :lg="7" :md="7" :sm="24" :xs="24">
-				<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 					<div class="flex align-center" style="height: calc(30vh - 88px);overflow: hidden;">
 						<div style="writing-mode: vertical-rl;" class="text-bold">燃油管理</div>
 						<el-image style="width: 50%;border-radius: 4px;" class="margin-lr-sm" :src="engImg"></el-image>
@@ -16,7 +16,7 @@
 				</el-card>
 			</el-col>
 			<el-col :xl="17" :lg="17" :md="17" :sm="24" :xs="24">
-				<el-card class="box-card" :body-style="{ padding: '4px 10px !important' }">
+				<el-card class="box-card cardSty" :body-style="{ padding: '4px 10px !important' }">
 					<el-row>
 						<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
 							<div style="position: relative;">
@@ -251,10 +251,6 @@
 </script>
 
 <style scoped lang="scss">
-	.box-card{
-		border-radius: 16px;
-		box-shadow: 0 0 4px 1px #ccc;
-	}
 	::v-deep .el-descriptions__label:not(.is-bordered-label){
 		margin-right: 0;
 		font-weight: bold;

src/views/efficiencyMana/RegionalMana/index.vue

@@ -2,7 +2,7 @@
 	<div>
 		<el-row :gutter="14">
 			<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
-				<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 					<div class="flex align-center justify-between text-bold text-center" style="height: calc(30vh - 80px);overflow: hidden;">
 						<div style="writing-mode: vertical-rl;" class="text-bold">ECA区域管理</div>
 						<div>
@@ -162,10 +162,6 @@
 </script>
 
 <style scoped lang="scss">
-	.box-card{
-		border-radius: 16px;
-		box-shadow: 0 0 4px 1px #ccc;
-	}
 	::v-deep .el-descriptions__label:not(.is-bordered-label){
 		margin-right: 0;
 		font-weight: bold;

src/views/efficiencyMana/VoyageMana/index.vue

@@ -11,7 +11,7 @@
 					<div>航路点</div>
 				</div>
 			</div>
-			<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 				<div class="flex align-center justify-between text-bold text-center" style="height: calc(30vh - 80px);overflow: hidden;">
 					<div style="writing-mode: vertical-rl;" class="text-bold">航次管理</div>
 					<div>
@@ -30,7 +30,7 @@
 			</el-card>
 		</el-col>
 		<el-col :xl="17" :lg="17" :md="17" :sm="24" :xs="24">
-			<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 				<el-row>
 					<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
 						<div class="flex" style="height: calc(30vh - 80px);overflow: hidden;">
@@ -121,10 +121,6 @@
 </script>
 
 <style scoped lang="scss">
-	.box-card{
-		border-radius: 16px;
-		box-shadow: 0 0 4px 1px #ccc;
-	}
 	.tabBtn{
 		width: 50px;
 		padding: 15px 0;

src/views/homePage/index.vue

@@ -320,10 +320,7 @@
 </script>
 
 <style scoped lang="scss">
-	.titleSty{
-		height: 32px;
-		font-weight: bold;
-	}
+	
 	.shTitleSty{
 		font-size: 0.9rem;
 		font-weight: bold;

src/views/statusMonitor/AuxiliarySystem/index.vue

@@ -0,0 +1,47 @@
+<template>
+	<div>
+		<el-row :gutter="14">
+			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
+				<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+					辅机结构图
+				</el-card>
+			</el-col>
+			<el-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
+				<el-row :gutter="14">
+					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+					</el-col>
+					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+							
+						</el-card>
+					</el-col>
+				</el-row>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+	import { reactive } from "vue";
+	const { proxy } = getCurrentInstance();
+	const data = reactive({
+		
+	});
+	const {  } = toRefs(data);
+</script>
+
+
+<style scoped lang="scss">
+	.box-card{
+		border-radius: 16px;
+		box-shadow: 0 0 4px 1px #ccc;
+	}
+</style>

src/views/statusMonitor/BoilerSystem/index.vue

@@ -0,0 +1,47 @@
+<template>
+	<div>
+		<el-row :gutter="14">
+			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
+				<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+					锅炉结构图
+				</el-card>
+			</el-col>
+			<el-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
+				<el-row :gutter="14">
+					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+						</el-card>
+					</el-col>
+					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+						<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+							
+						</el-card>
+					</el-col>
+				</el-row>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+	import { reactive } from "vue";
+	const { proxy } = getCurrentInstance();
+	const data = reactive({
+		
+	});
+	const {  } = toRefs(data);
+</script>
+
+
+<style scoped lang="scss">
+	.box-card{
+		border-radius: 16px;
+		box-shadow: 0 0 4px 1px #ccc;
+	}
+</style>

src/views/statusMonitor/PropulsionSystem/index.vue

@@ -0,0 +1,171 @@
+<template>
+	<div>
+		<el-row :gutter="14">
+			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
+				<el-card class="box-card" :body-style="{ padding: '10px !important' }">
+					<div style="height: calc(100vh - 190px);" class="flex flex-direction align-center justify-center">
+						<el-image style="width: 100%;" :src="propulsionImg"></el-image>
+					</div>
+					<div class="titleSty text-xl text-center">图. 主机结构</div>
+				</el-card>
+			</el-col>
+			<el-col :xl="11" :lg="11" :md="11" :sm="24" :xs="24">
+				<el-row :gutter="14">
+					<template v-for="(item,index) in dataForm" :key="index">
+						<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+							<el-card class="box-card" :body-style="{ padding: '10px !important' }"
+								 v-for="(vtem,vndex) in item" :key="vndex">
+								<div class="titleSty text-xl">{{ vtem.name }}</div>
+								<div :style="{ height: vtem.height }"
+									class="padding-sm flex flex-direction justify-around">
+									<div class="flex align-end" v-for="(stem,sndex) in vtem.data" :key="sndex">
+										<div class="flex-twice">{{ stem.name }}：</div>
+										<div class="flex-sub text-green text-bold text-xxl">{{ stem.value }}</div>
+										<div class="flex-sub">{{ stem.unit }}</div>
+									</div>
+								</div>
+							</el-card>
+						</el-col>
+					</template>
+				</el-row>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+	import { reactive } from "vue";
+	const { proxy } = getCurrentInstance();
+	import propulsionImg from "@/assets/images/propulsion.png";
+	const data = reactive({
+		dataForm: [[{
+			name: "涡轮增压器",
+			height: "calc(35vh - 99px)",
+			data: [{
+				name: "1号废气进口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "1号废气出口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "2号废气进口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "2号废气出口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "活塞",
+			height: "calc(27vh - 99px)",
+			data: [{
+				name: "活塞冷却油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "活塞冷却油进口压力",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "活塞冷却油出口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "主轴承",
+			height: "calc(19vh - 99px)",
+			data: [{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "滑油进口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "燃油系统",
+			height: "calc(19vh - 99px)",
+			data: [{
+				name: "燃油进机压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "燃油进机压力",
+				value: 123.2,
+				unit: "℃"
+			}]
+		}],[{
+			name: "气缸",
+			height: "calc(35vh - 99px)",
+			data: [{
+				name: "缸套冷却水进机压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "缸套冷却水进机温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "气缸冷却水出口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "气缸排气温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "扫气",
+			height: "calc(27vh - 99px)",
+			data: [{
+				name: "主机扫气压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "2号扫气箱温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "主机扫气箱温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "推力轴承",
+			height: "calc(19vh - 99px)",
+			data: [{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "滑油进口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "滑油系统",
+			height: "calc(19vh - 99px)",
+			data: [{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "℃"
+			}]
+		}]]
+	});
+	const { dataForm } = toRefs(data);
+</script>
+
+
+<style scoped lang="scss">
+	.box-card+.box-card{
+		margin-top: 15px;
+	}
+</style>

src/views/statusMonitor/index.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="text-white padding-tb padding-lr-lg">
+		<div class="margin-bottom">
+			<propulsion-system v-if="tabPosition == 'propulsionSystem'"/>
+			<auxiliary-system v-if="tabPosition == 'auxiliarySystem'"/>
+			<boiler-system v-if="tabPosition == 'boilerSystem'"/>
+		</div>
+		<div class="text-center text-sm">
+			<el-radio-group v-model="tabPosition" style="border-radius: 40px;overflow: hidden;">
+				<el-radio-button label="propulsionSystem">推进系统</el-radio-button>
+				<el-radio-button style="border-left: 1px solid #2f516c;border-right: 1px solid #2f516c;" label="auxiliarySystem">辅机系统</el-radio-button>
+				<el-radio-button label="boilerSystem">锅炉系统</el-radio-button>
+			</el-radio-group>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import PropulsionSystem from "./PropulsionSystem/index.vue";
+	import AuxiliarySystem from "./AuxiliarySystem/index.vue";
+	import BoilerSystem from "./BoilerSystem/index.vue";
+	const tabPosition = ref("propulsionSystem");
+	const data = reactive({
+		
+	});
+	const {  } = toRefs(data);
+</script>
+
+<style scoped lang="scss">
+	::v-deep .el-radio-button__inner{
+		background-color: #2091de;
+		border: none;
+		color: #fff;
+		font-size: 0.75rem;
+	}
+	::v-deep .el-radio-button__original-radio:checked+.el-radio-button__inner{
+		background-color: #3b9a9c;
+	}
+	::v-deep .el-radio-button:first-child .el-radio-button__inner{
+		border: none;
+	}
+</style>