加入地图

package.json

@@ -29,8 +29,9 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
     "nprogress": "0.2.0",
-    "ol": "^7.0.0",
+    "ol": "^9.2.4",
     "pako": "^2.0.4",
+    "proj4": "^2.11.0",
     "qrcode.vue": "^3.3.3",
     "vant": "^4.0.0-alpha.0",
     "vue": "3.2.31",

src/assets/styles/index.scss

@@ -7,6 +7,7 @@
 @import './ruoyi.scss';
 @import './main.scss';
 @import './vant.scss';
+@import './print.scss';
 
 body {
   height: 100%;
@@ -164,11 +165,11 @@ aside {
 
 .link-type,
 .link-type:focus {
-  color: #337ab7;
+  color: var(--el-color-primary);
   cursor: pointer;
 
   &:hover {
-    color: rgb(32, 160, 255);
+    color: var(--el-color-primary-light-3);
   }
 }
 
@@ -203,15 +204,13 @@ aside {
 
 .mobile {
 	.app-main.showNavBar{
-		padding-top:82px;
+		padding-top:46px;
 		.mobile-app-container.van-pull-refresh{
-			height: calc(100vh - 82px);
+			height: calc(100vh - 46px);
 			overflow-y: auto;
 		}
 	}
-	.app-main.showNewNavBar{
-		padding-top:82px;
-	}
+	
 	.app-main{
 		.mobile-app-container.van-pull-refresh{
 			height: calc(100vh);

src/assets/styles/main.scss

@@ -27,6 +27,7 @@ page {
   --grey: #909399;
   --black: #333333;
   --darkGray: #666666;
+  --bGray: #72819f;
   --gray: rgb(151, 168, 190);
   --ghostWhite: #f4f4f5;
   --white: #ffffff;
@@ -4258,6 +4259,11 @@ scroll-view.ui-steps .ui-item {
 .lines-white {
   color: var(--white);
 }
+.text-bGray,
+.line-bGray,
+.lines-bGray{
+	color: var(--bGray);
+}
 
 .hidden {
   overflow: hidden;
@@ -4289,7 +4295,8 @@ scroll-view.ui-steps .ui-item {
   overflow-y: scroll;
 }
 .box-card.cardSty{
-	border-radius: 16px;
+	color: var(--bGray);
+	border-radius: 24px;
 	background-color: #f2f7ff;
 	box-shadow: 0 0 4px 1px #e1e1e1;
 }
@@ -4302,6 +4309,7 @@ scroll-view.ui-steps .ui-item {
   display: inline-block;
 }
 .titleSty{
+	color: var(--bGray);
 	height: 32px;
 	font-weight: bold;
 }
@@ -4311,7 +4319,7 @@ scroll-view.ui-steps .ui-item {
 	left: 5px;
 	height: 100%;
 	text-align: center;
-	// color: #fff;
+	color: var(--bGray);
 	font-size: 0.9rem;
 	font-weight: bold;
 	// transform: translate(0, -50%);
@@ -4328,7 +4336,7 @@ scroll-view.ui-steps .ui-item {
 	background-color: #fff;
 	box-shadow: 0 0 8px 1px #ccc;
 	&.active{
-		background-color: #3b9a9c;
+		background-color: #2da5f0;
 		color: #fff;
 	}
 }

src/assets/styles/print.scss

@@ -0,0 +1,35 @@
+.print{
+	
+	
+	table {
+		font-size: 12px;
+		text-align: center;
+		width: 100%;
+		border-collapse: collapse;
+		border: none;
+		// color: #333;
+		// background-color: #fff;
+	
+		tr {
+	
+			th,
+			td {
+				border: solid #666 1px;
+	
+	
+	
+				// .el-textarea__inner,
+				// .el-input__inner {
+				// 	border: 1px solid #DCDFE6 !important;
+				// 	// color: #444 !important;
+				// 	background-color: rgba(0, 0, 0, 0.01) !important;
+				// }
+	
+	
+			}
+		}
+	
+	
+	}
+	
+}

src/components/Echarts/BarChart/index.vue

@@ -9,6 +9,7 @@
 	import useResize from "@/hooks/useResize";
 	const { proxy } = getCurrentInstance();
 	var echartInstance = null;
+	var _color = "#72819f";
 	const props = defineProps({
 		height: {
 			type: String,
@@ -56,7 +57,7 @@
 				itemWidth: 22,
 				itemHeight: 10,
 				textStyle: {
-					 color: "#000",
+					 color: _color,
 					 fontSize: 10
 				}
 			},
@@ -71,7 +72,7 @@
 			xAxis: {
 				type: 'category',
 				axisLabel: {
-					color: '#000',
+					color: _color,
 					fontSize: 10,
 					showMaxLabel: true
 				},
@@ -81,7 +82,7 @@
 				type: 'value',
 				axisLabel: {
 					fontSize: 10,
-					color:"#000",
+					color: _color,
 					showMaxLabel: true
 				},
 				axisLine: {

src/components/Echarts/LineChart/index.vue

@@ -9,6 +9,7 @@
 	import useResize from "@/hooks/useResize";
 	const { proxy } = getCurrentInstance();
 	var echartInstance = null;
+	var _color = "#72819f";
 	const props = defineProps({
 		height: {
 			type: String,
@@ -56,7 +57,7 @@
 				itemWidth: 22,
 				itemHeight: 10,
 				textStyle: {
-					 // color: "#fff",
+					 color: _color,
 					 fontSize: 11
 				}
 			},
@@ -72,7 +73,7 @@
 				type: 'category',
 				boundaryGap: false, //X轴贴边false不贴边true
 				axisLabel: {
-					// color: '#fff',
+					color: _color,
 					fontSize: 11,
 					showMaxLabel: true
 				},
@@ -83,7 +84,7 @@
 				type: 'value',
 				axisLabel: {
 					fontSize: 11,
-					// color:"#fff",
+					color: _color,
 					showMaxLabel: true
 				},
 				axisLine: {

src/components/Echarts/pieCircularChart/index.vue

@@ -11,6 +11,7 @@
 		proxy
 	} = getCurrentInstance();
 	var echartInstance = null;
+	var _color = "#72819f";
 	const props = defineProps({
 		height: {
 			type: String,
@@ -51,7 +52,7 @@
 				itemHeight: 7,
 				itemGap: 5,
 				textStyle: {
-					color: "#000",
+					color: _color,
 					fontSize: 10
 				}
 			},
@@ -69,7 +70,8 @@
 				radius: ['40%', '60%'],
 				center: ["50%", "50%"],
 				label: {
-					formatter: '{d}%'
+					formatter: '{d}%',
+					color: _color
 				},
 				data: data.value,
 			}],

src/components/Echarts/pieRoseTypeSimple/index.vue

@@ -11,6 +11,7 @@
 		proxy
 	} = getCurrentInstance();
 	var echartInstance = null;
+	var _color = "#72819f";
 	const props = defineProps({
 		height: {
 			type: String,
@@ -60,7 +61,9 @@
 				itemWidth: 16,
 				itemHeight: 10,
 				textStyle: {
-					fontSize: 11
+					fontSize: 11,
+					color: _color
+						
 				}
 			},
 			color: ["#009dff", "#22e4ff", "#3bffd0", "#04e38a", "#9dff86", "#fee588", "#fea844", "#fe7044", "#fe4444", "#ff7c8c"],
@@ -71,7 +74,8 @@
 				center: ["45%", "45%"],
 				data: data.value,
 				label: {
-					formatter: '{d}%'
+					formatter: '{d}%',
+					color: _color
 				}
 			}]
 		};

src/components/Map/ECAMap/map.vue

@@ -0,0 +1,78 @@
+<template>
+	<MapMap ref="mapMap" @ready="handleMapReady"/>
+</template>
+
+<script setup>
+	const emit = defineEmits(["gpsPoints"]);
+	import MapMap from "@/components/Map/map";
+	import Fill from "ol/style/Fill";
+	import VectorLayer from "ol/layer/Vector";
+	import VectorSource from "ol/source/Vector";
+	import { Style, Icon, Stroke } from "ol/style";
+	import { Draw, Modify, Select, Snap } from "ol/interaction";
+	import { Polygon, Circle } from "ol/geom";
+	import { Feature } from "ol";
+	const { proxy } = getCurrentInstance();
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: {
+				fence_type: 1
+			}
+		}
+	});
+	const { data, finishSta } = toRefs(props);
+	const map = ref(null);
+	let gpsInfos = {
+		"lon": [],
+		"lat": [],
+		"radius": 0
+	};
+	let mapCircleDraw = null, mapPolygonDraw = null, mapModify = null;
+	let source = null;
+	let vector = new VectorLayer({ 
+		source: source, 
+		style: new Style({ 
+			fill: new Fill({ 
+				color: "rgba(37,241,239,0.2)" ,
+			}), 
+			stroke: new Stroke({ 
+				color: "#264df6", 
+				width:2 ,
+			}) 
+		}) 
+	}); 
+	function showHysi(_obj){
+		var circle, plygon, Polygona = [];
+		if(_obj.gpsInfo.lon.length){
+			let _lon = _obj.gpsInfo.lon;
+			let _lat = _obj.gpsInfo.lat;
+			for(let i = 0;i<_lon.length;i++){
+				Polygona.push([_lon[i],_lat[i]]);
+			}
+		}
+		var plygon = new Polygon([Polygona]);
+		var circle = new Circle(Polygona[0], parseFloat(_obj.gpsInfo.radius)/103360);
+		map.value.getView().animate({
+			center: Polygona[0],
+			duration: 300,
+		});
+		var feature = new Feature({
+			geometry: (_obj.fence_type == 0?circle:plygon)
+		});
+		source.addFeature(feature);
+		mapModify.setActive(true);
+	}
+	const handleMapReady = () => {
+		map.value = proxy.$refs["mapMap"].map;
+		if (source == null) {
+			source = new VectorSource({ wrapX: false }); 
+			vector.setSource(source);
+			map.value.addLayer(vector);
+		}
+	}
+	watch(data, (newValue) => {
+		source.clear();
+		showHysi(newValue);
+	}, { deep: true });
+</script>

src/components/Map/ShipList/index.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="bg-el-color" style="position: relative;height: 100%;width: 100%;">
+		<MapShipListMap ref="mapShipListMap" :coordinates="coordinates" :style="$store.state.settings.sideTheme == 'theme-dark'? 'opacity: .8;' : ''" />
+	</div>
+</template>
+
+<script setup>
+import MapShipListMap from "@/components/Map/ShipList/map";
+import { getHistoricalTrack } from "@/api/shipApi/index";
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const loading = ref(false);
+const coordinates = ref([{
+    lat: 113.1047683,
+    lng: 22.1617233,
+    time: proxy.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
+    x0a9: 0,
+    x0aA: 0,
+}]);
+const props = defineProps({
+	data: {
+		type: String,
+		default: ""
+	}
+});
+const { data } = toRefs(props);
+const handleGetHistoricalTrack = function(){
+	loading.value = true;
+	getHistoricalTrack()
+	.then((response) => {
+		coordinates.value = response;
+		loading.value = false;
+    })
+    .catch((response) => {
+		proxy.$modal.error(response.msg);
+		loading.value = false;
+    });
+};
+handleGetHistoricalTrack()
+</script>

src/components/Map/ShipList/map - 副本.vue

@@ -0,0 +1,251 @@
+<template>
+	<MapMap ref="mapMap" @ready="handleMapReady" />
+</template>
+
+<script setup>
+	import MapMap from "@/components/Map/map";
+	import Fill from "ol/style/Fill";
+	import Text from "ol/style/Text";
+	import VectorLayer from "ol/layer/Vector";
+	import VectorSource from "ol/source/Vector";
+	import {
+		Feature,
+		Overlay
+	} from "ol";
+	import {
+		Point
+	} from "ol/geom";
+	import {
+		Style,
+		Icon
+	} from "ol/style";
+	import markerIcon3 from "@/assets/images/ship3.png";
+	import markerIcon4 from "@/assets/images/ship4.png";
+	import markerIcon5 from "@/assets/images/ship5.png";
+	import markerIcon6 from "@/assets/images/ship6.png";
+	import selectIcon from "@/assets/images/ship_tblr.png";
+
+	const {
+		proxy
+	} = getCurrentInstance();
+
+	const map = ref(null);
+
+	let shipListSource = new VectorSource({
+		features: [],
+	});
+
+	let shipListLayer = new VectorLayer({
+		source: shipListSource,
+	});
+
+	watch(
+		() => proxy.$store.state.data.shipList,
+		(newValue, oldValue) => {
+			if (map.value != null) {
+				if (newValue.length != oldValue.length && oldValue.length == 0) {
+					proxy.$refs["mapMap"].moveToShipBySn(proxy.$store.state.data.curAnalogSn);
+				}
+				updateFeatures();
+			}
+		}
+	);
+
+	watch(
+		() => proxy.$store.state.data.curAnalogSn,
+		(newValue) => {
+			if (map.value != null) {
+				updateFeatures();
+				proxy.$refs["mapMap"].moveToShipBySn(newValue);
+			}
+		}
+	);
+
+	const handleMapReady = () => {
+		map.value = proxy.$refs["mapMap"].map;
+		map.value.addLayer(shipListLayer);
+		updateFeatures();
+
+		map.value.on("pointermove", function(evt) {
+			// console.log(evt)
+			proxy.$emit("pointermove", evt);
+			var pixel = this.getEventPixel(evt.originalEvent);
+			var feature = this.forEachFeatureAtPixel(pixel, function(feature) {
+				return feature;
+			});
+			if (feature == undefined) {
+				this.getTargetElement().style.cursor = "auto";
+			} else {
+				// console.log(feature);
+				if (feature.id_ && feature.id_.indexOf("3800") == 0) {
+					this.getTargetElement().style.cursor = "pointer";
+				}
+			}
+		});
+
+		map.value.on("singleclick", function(evt) {
+			// console.log("singleclick");
+
+			var pixel = this.getEventPixel(evt.originalEvent);
+			var feature = this.forEachFeatureAtPixel(pixel, function(feature) {
+				return feature;
+			});
+			// console.log(feature);
+
+			if (feature == undefined) {} else {
+				console.log(feature);
+				proxy.$store.state.data.curAnalogSn = feature.id_;
+				// moveToShipBySn(proxy.$store.state.data.curAnalogSn, zoom);
+				// if (feature.id_.indexOf("3800") == 0) {
+				//   proxy.$router.push(`/view/ship?sn=${feature.id_}`);
+				//   proxy.$emit("singleclick", feature);
+				// }
+			}
+		});
+	};
+
+	/**
+	 * 设置Style
+	 */
+	const getStyls = (feature, analog) => {
+		//////////// console.log(feature);
+		//////////// console.log(analog);
+		let rotation = Number(analog["0aA"]) * (Math.PI / 180);
+		rotation = isNaN(rotation) ? 0 : rotation;
+		let Styles = [];
+		if (analog.sn == proxy.$store.state.data.curAnalogSn) {
+			Styles.push(
+				new Style({
+					image: new Icon({
+						src: selectIcon,
+						scale: map.value.getView().getZoom() / 20,
+						anchor: [0.5, 0.7], // 偏移的 x 与 y 方向值，注意此值与 Cesium 等GIS库偏向方向正好相反
+						rotation: rotation,
+					}),
+				})
+			);
+		}
+		Styles.push(
+			new Style({
+				image: new Icon({
+					src: (analog["isSail"] == 1?markerIcon3:(analog["isSail"] == 2?markerIcon4:(analog["isSail"] == 3?markerIcon5:markerIcon6))),
+					scale: map.value.getView().getZoom() / 20,
+					anchor: [0.5, 0.7], // 偏移的 x 与 y 方向值，注意此值与 Cesium 等GIS库偏向方向正好相反
+					rotation: rotation,
+				}),
+			})
+		);
+		Styles.push(
+			new Style({
+				text: new Text({
+					textAlign: "center",
+					text: `  ${feature.values_.name}  `,
+					offsetX: 0,
+					offsetY: 15,
+					fill: new Fill({
+						//文字填充色
+						color: "#2520ff",
+					}),
+					backgroundFill: new Fill({
+						color: "rgba(255,255,255,0)",
+					}),
+				}),
+			})
+		);
+		return Styles;
+	};
+
+	/**
+	 * 添加一个新的标注（矢量要素）
+	 * @param {ol.Coordinate} coordinate 坐标点 [x,y]
+	 */
+	const addFeature = (analog) => {
+		//新建一个要素 Feature
+		var newFeature = new Feature({
+			//几何信息
+			geometry: new Point([Number(analog["0a4"]), Number(analog["0a5"])]),
+			//名称属性
+			name: analog["iboatName"],
+		});
+
+		// 设置ID
+		newFeature.setId(analog["sn"]);
+		// 设置样式
+		newFeature.setStyle(getStyls(newFeature, analog));
+		//将新要素添加到数据源中
+		shipListSource.addFeature(newFeature);
+
+		//////////// console.log(shipListSource.idIndex_[analog["sn"]]);
+		// setTimeout(() => {
+		//   shipListSource.idIndex_[analog["sn"]].setGeometry(new Point([118.766, 32]));
+		// }, 3000);
+	};
+
+	const setFeature = (analog) => {
+		shipListSource.idIndex_[analog["sn"]].setStyle(
+			getStyls(shipListSource.idIndex_[analog["sn"]], analog)
+		);
+		shipListSource.idIndex_[analog["sn"]].setGeometryName(analog["iboatName"]);
+		shipListSource.idIndex_[analog["sn"]].setGeometry(
+			new Point([Number(analog["0a4"]), Number(analog["0a5"])])
+		);
+	};
+
+	const updateFeatures = () => {
+		//// console.log(`updateFeatures`);
+		for (let i = 0; i < proxy.$store.state.data.shipList.length; i++) {
+			let item = proxy.$store.state.data.shipList[i];
+			if (
+				shipListSource.idIndex_[item["sn"]] != undefined &&
+				map.value.getOverlayById(item["sn"])
+			) {
+				setFeature(item);
+				let className;
+				if (
+					item["isSail"] == 1 &&
+					new Date().getTime() - new Date(item["time"]).getTime() <
+					proxy.$store.state.data.timeout
+				) {
+					////// console.log("online isSail");
+					className = `animation breathe sm sn-${item["sn"]}`;
+				} else {
+					className = `sn-${item["sn"]}`;
+				}
+				map.value.getOverlayById(item["sn"]).element.children[0].className =
+					className;
+				map.value
+					.getOverlayById(item["sn"])
+					.setPosition([Number(item["0a4"]), Number(item["0a5"])]);
+			} else {
+				let breatheAnimationPoint = document.createElement("div");
+				// breatheAnimationPoint.className = `animation breathe sn-${item["sn"]}`
+				let className;
+				if (
+					item["isSail"] == 1 &&
+					new Date().getTime() - new Date(item["time"]).getTime() <
+					proxy.$store.state.data.timeout
+				) {
+					////// console.log("online isSail");
+					className = `animation breathe sm sn-${item["sn"]}`;
+				} else {
+					className = `sn-${item["sn"]}`;
+				}
+				breatheAnimationPoint.className = className;
+				breatheAnimationPoint.id = `${item["sn"]}`;
+				breatheAnimationPoint.onclick = (e) => {
+					// console.log(e);
+					proxy.$store.state.data.curAnalogSn = e.target.id;
+				};
+				let point_overlay = new Overlay({
+					id: item["sn"],
+					element: breatheAnimationPoint,
+					positioning: "center-center",
+				});
+				// console.log(map);
+				map.value.addOverlay(point_overlay);
+				point_overlay.setPosition([Number(item["0a4"]), Number(item["0a5"])]);
+				addFeature(item);
+			}
+		}
+	};
+</script>

src/components/Map/ShipList/map.vue

@@ -0,0 +1,209 @@
+<template>
+	<MapMap ref="mapMap" @ready="handleMapReady" />
+</template>
+
+<script setup>
+	import MapMap from "@/components/Map/map";
+	import Fill from "ol/style/Fill";
+	import Text from "ol/style/Text";
+	import VectorLayer from "ol/layer/Vector";
+	import VectorSource from "ol/source/Vector";
+	import {
+		Feature
+	} from "ol";
+	import {
+		Point,
+		LineString
+	} from "ol/geom";
+	import {
+		Style,
+		Icon,
+		Stroke
+	} from "ol/style";
+	import markerIcon from "@/assets/images/ship3.png";
+	// import { duToGpsDM } from "@/utils/gpsToDu";
+	// import { getCurrencyConfigByMid } from "@/utils/index";
+
+	const {
+		proxy
+	} = getCurrentInstance();
+
+	const props = defineProps({
+		coordinates: {
+			type: Array,
+			default: () => [{
+				lat: null,
+				lng: null,
+				time: null,
+				x0a9: null,
+				x0aA: null,
+			}, ],
+		}
+	});
+
+	const {
+		coordinates
+	} = toRefs(props);
+
+	const map = ref(null);
+	const zoom = 17;
+	let timer;
+	let carPoints = [];
+	let routeLayer = new VectorLayer({
+		source: new VectorSource({
+			features: [],
+		}),
+	});
+	let featureMove;
+	let shipListSource = new VectorSource({
+		features: [],
+	});
+	let shipListLayer = new VectorLayer({
+		source: shipListSource,
+	});
+	watch(() => coordinates.value, (newValue) => {
+		nextTick(() => {
+			if (map != null) {
+				let nowPos = {
+					"0a4": 113.119904,
+					"0a5": 22.169388,
+					"iboatName": "测试1号",
+					"sn": "4800000012",
+					"0aA": 76
+				};
+				newValue.push({
+					lat: nowPos["0a4"],
+					lng: nowPos["0a5"],
+					x0aA: 76
+				})
+				let lat = (newValue[0].lat + newValue[newValue.length - 1].lat) / 2;
+				let lng = (newValue[0].lng + newValue[newValue.length - 1].lng) / 2;
+				proxy.$refs["mapMap"].moveTo([nowPos["0a4"], nowPos["0a5"]], zoom, 0);
+				deleteFeatures();
+				// 画轨迹线
+				drawLine();
+				addFeature(nowPos);
+			}
+		});
+	});
+	const handleMapReady = () => {
+		map.value = proxy.$refs["mapMap"].map;
+		map.value.addLayer(routeLayer);
+		map.value.addLayer(shipListLayer);
+	};
+	//轨迹线  把每个点连起来
+	const drawLine = () => {
+		let comDots = [];
+		let wireFeature = {};
+		coordinates.value.map((item) => {
+			comDots.push([item.lat, item.lng]);
+			wireFeature = new Feature({
+				geometry: new LineString(comDots),
+			});
+			wireFeature.setStyle(
+				new Style({
+					stroke: new Stroke({
+						// 设置边的样式
+						color: "#5470c6",
+						width: 4,
+					}),
+				})
+			);
+
+			let iconFeature = new Feature({
+				geometry: new Point([item.lat, item.lng]), //绘制图形（点）
+			});
+			let rotation = (Number(item.x0aA) - 90) * (Math.PI / 180);
+			rotation = isNaN(rotation) ? 0 : rotation;
+			// //// console.log(rotation);
+
+			iconFeature.setStyle(
+				new Style({
+					image: new Icon({
+						scale: 0.5,
+						rotation: rotation,
+						snapToPixel: true,
+						src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVQ4T63TsQ0CMQyF4f/NgMQQ0CBR0FIx190cFIiWhhFoKdgEiRUeSoF0gO8cjkub+Evs2OLPpc9422dgBRwlNZn/BtjeApdOUJsh0QuuwKYWiYAFcAKWHaSR1EbpfAHlkO0ICdMJgV+QXmAAmUu6v9IZA8wkPVKgtg7TF7H25t4UbN+A9ahGmqqVD8AO2GdzUF45+I3ZJJb9JxbwRhEhB66xAAAAAElFTkSuQmCC",
+					}),
+					text: new Text({
+						// 字体与大小
+						font: "10px",
+						// 文字填充色
+						fill: new Fill({
+							color: "#000",
+						}),
+						textAlign: "center",
+						// 显示文本，数字需要转换为文本string类型！
+						//   {m}-{d}
+						text: (item.level?(`电量消耗：${item.level}L `):''),
+						offsetX: -40,
+						offsetY: -6,
+						// backgroundStroke: new Stroke({
+						// 	// color: "#000",
+						// }),
+						padding: [1, 4, 1, 4]
+						// rotation: 30 * (Math.PI / 180),
+					}),
+				})
+			);
+			routeLayer.getSource().addFeatures([iconFeature]);
+		});
+		routeLayer.getSource().addFeatures([wireFeature]);
+	};
+	// 删除轨迹
+	const deleteFeatures = () => {
+		if (routeLayer) {
+			routeLayer.getSource().clear();
+		}
+	};
+	
+	const getStyls = (feature, analogData) => {
+		let rotation = Number(analogData["0aA"]) * (Math.PI / 180);
+		rotation = isNaN(rotation) ? 0 : rotation;
+		let Styles = [];
+		Styles.push(
+			new Style({
+				image: new Icon({
+					src: markerIcon,
+					scale: map.value.getView().getZoom() / 20,
+					anchor: [0.5, 0.7], // 偏移的 x 与 y 方向值，注意此值与 Cesium 等GIS库偏向方向正好相反
+					rotation: rotation,
+				}),
+			})
+		);
+		Styles.push(
+			new Style({
+				text: new Text({
+					textAlign: "center",
+					text: `${feature.values_.name}`,
+					offsetX: 0,
+					offsetY: 18,
+					fill: new Fill({
+						//文字填充色
+						color: "#2520ff",
+					}),
+					backgroundFill: new Fill({
+						color: "rgba(255,255,255,0)",
+					}),
+				}),
+			})
+		);
+		return Styles;
+	};
+	const addFeature = (analogData) => {
+		//新建一个要素 Feature
+		var newFeature = new Feature({
+			//几何信息
+			geometry: new Point([Number(analogData["0a4"]), Number(analogData["0a5"])]),
+			//名称属性
+			name: analogData["iboatName"],
+		});
+	
+		// 设置ID
+		newFeature.setId(analogData["sn"]);
+		// 设置样式
+		newFeature.setStyle(getStyls(newFeature, analogData));
+		//将新要素添加到数据源中
+		shipListSource.addFeature(newFeature);
+	};
+</script>

src/components/Map/map.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="bg-gray" style="height: 100%;width: 100%;" :style="$store.state.settings.sideTheme == 'theme-dark'? 'opacity: .8;' : ''"></div>
+</template>
+
+<script setup>
+import "ol/ol.css";
+import Image from "ol/layer/Image";
+import ImageWMS from "ol/source/ImageWMS";
+import TileLayer from "ol/layer/Tile";
+import XYZ from "ol/source/XYZ";
+import { createXYZ } from "ol/tilegrid";
+import { Map, View } from "ol";
+import { transform } from "ol/proj";
+import { register } from "ol/proj/proj4";
+import proj4 from "proj4";
+
+const { proxy } = getCurrentInstance();
+
+const map = ref(null);
+const zoom = 13;
+const center = [121.757423,30.208547];
+const tiandituUrl = "http://t{0-7}.tianditu.gov.cn/";
+const hangdaotuUrl = "http://36.156.155.131:8090/";
+
+// 解决海图图片偏移问题
+proj4.defs(
+  "EPSG:3395",
+  "+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs"
+);
+register(proj4);
+// 解决海图图片偏移问题
+
+const curAnalog = computed(
+  () =>
+    proxy.$store.state.data.shipList.find(
+      (item) => item.sn == proxy.$store.state.data.curAnalogSn
+    ) || {}
+);
+
+// watch(
+//   () => proxy.$store.state.data.curAnalogSn,
+//   (newValue) => {
+//     moveToShipBySn(newValue);
+//   }
+// );
+
+/**
+ * 初始化地图
+ */
+const initMap = () => {
+  map.value = new Map({
+    target: proxy.$el,
+    layers: [
+      new TileLayer({
+        source: new XYZ({
+          tileSize: 256 * 1,//地图vec_w 卫星图img_w
+          url: `${tiandituUrl}DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`, // 天地图
+        }),
+      }),
+
+      // new TileLayer({
+      // 	source: new XYZ({
+      // 		tileSize: 256 * 1,
+      // 		url: `http://nas.ehanghai.cn:90/{z}/{y}/{x}.png`, // 电子海图（只有大比例）
+      // 	}),
+      // }),
+      // new TileLayer({
+      // 	source: new XYZ({
+      // 		tileSize: 256 * 1,
+      // 		url: `http://pngchart.ehanghai.cn/htcx/{z}/{y}/{x}.png`, // 电子海图（有缺失）
+      // 	}),
+      // }),
+      // new TileLayer({
+      //   source: new XYZ({
+      //     tileSize: 256 * 1,
+      //     url: `https://www.chart.msa.gov.cn/arcgis/rest/services/CHARTCELL/MapServer/tile/{z}/{y}/{x}?token=L8JzeJcgFnXBEIp0UxqBdhJaeaLP6TQL6bJxgptU-BMfLe19_p0BkNsZoxOCz-P1jQQY97vUzTxWeznVIa3eVw..`, // 电子海图（只有沿海）
+      //   }),
+      // }),
+
+      new TileLayer({
+        opacity: 0.5,
+        source: new XYZ({
+          url: "http://m12.shipxy.com/tile.c?l=Na&m=o&y={y}&x={x}&z={z}", // 海图
+          projection: "EPSG:3395",
+          tileGrid: createXYZ({
+            extent: [
+              -20037508.342789244, -20037508.342789244, 20037508.342789244,
+              20037508.342789244,
+            ],
+          }),
+        }),
+      }),
+
+      // new Image({
+      // 	source: new ImageWMS({
+      // 		url: `${hangdaotuUrl}geoserver/CJ/wms`, // 长江航道图
+      // 		params: {
+      // 			SERVICE: "WMS",
+      // 			VERSION: "1.1.1",
+      // 			REQUEST: "GetMap",
+      // 			FORMAT: "image/png",
+      // 			TRANSPARENT: true,
+      // 			tiled: true,
+      // 			STYLES: "",
+      // 			LAYERS: "CJ:G_CJ_NJ",
+      // 			CJAUTH: "CJUSER",
+      // 			WIDTH: 256,
+      // 			HEIGHT: 256,
+      // 			SRS: "EPSG:3857",
+      // 		},
+      // 	}),
+      // }),
+
+      new TileLayer({
+        source: new XYZ({
+          tileSize: 256 * 1,
+          url: `${tiandituUrl}DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235`, // 天地图标注
+        }),
+      }),
+    ],
+    view: new View({
+      // 指定地图投影模式
+      projection: "EPSG:4326",
+      // 定义地图显示的坐标
+      center: [
+        Number(curAnalog.value["0a4"] || center[0]),
+        Number(curAnalog.value["0a5"] || center[1]),
+      ],
+      // 限制地图中心范围，但无法限制缩小范围
+      // extent: [110, 26, 114, 30],
+      // 定义地图显示层级为16
+      zoom: zoom,
+      // 限制缩放级别，可以和extent同用限制范围
+      maxZoom: 19,
+      // 最小级别，越大则面积越大
+      minZoom: 4,
+      // 禁止地图旋转
+      enableRotation: false,
+    }),
+    controls: [],
+  });
+
+  //地图拖动事件
+  map.value.on("moveend", function (evt) {
+    proxy.$emit("moveend", evt);
+  });
+
+  map.value.on("change", function (evt) {
+    proxy.$emit("change", evt);
+    if (source.getState() === "ready") {
+      // 获取数据集
+      // features = source.getFeatures();
+      // console.log(source.getFeatures())
+    }
+  });
+
+  map.value.on("pointermove", function (evt) {
+    // console.log(evt)
+    proxy.$emit("pointermove", evt);
+  });
+
+  map.value.on("singleclick", function (evt) {
+    // console.log("singleclick");
+    proxy.$emit("singleclick", evt);
+
+    // var pixel = this.getEventPixel(evt.originalEvent);
+    // var feature = this.forEachFeatureAtPixel(pixel, function (feature) {
+    //   return feature;
+    // });
+    // console.log(feature);
+
+    // if (feature == undefined) {
+    // } else {
+    //   console.log(feature);
+    //   proxy.$store.state.data.curAnalogSn = feature.id_;
+    //   moveToShipBySn(proxy.$store.state.data.curAnalogSn, zoom);
+    //   // if (feature.id_.indexOf("3800") == 0) {
+    //   //   proxy.$router.push(`/view/ship?sn=${feature.id_}`);
+    //   //   proxy.$emit("singleclick", feature);
+    //   // }
+    // }
+  });
+
+  // console.log(map.value);
+  proxy.$emit("ready", map.value);
+};
+
+const moveTo = (center = center, zoom, duration = 300) => {
+  // map.value.getView().setCenter(center);
+  if (typeof zoom == "number") {
+    map.value.getView().setZoom(zoom);
+  }
+  // console.log(center);
+  map.value.getView().animate({
+    center: center,
+    duration: duration,
+  });
+  //    map.value.getView().adjustZoom()
+};
+
+const moveToShipBySn = (sn, zoom) => {
+  // console.log(sn);
+  let analog =
+    proxy.$store.state.data.shipList.find((item) => item.sn == sn) || {};
+  let center = [Number(analog["0a4"]), Number(analog["0a5"])];
+  if (
+    analog["0a4"] == null ||
+    analog["0a5"] == null ||
+    isNaN(center[0]) ||
+    isNaN(center[1])
+  ) {
+    proxy.$modal.msgError("经纬度错误");
+    return;
+  }
+  moveTo(center, zoom);
+};
+
+nextTick(() => {
+  initMap();
+});
+
+defineExpose({
+  moveTo,
+  moveToShipBySn,
+  map,
+});
+</script>

src/components/Progress/index.vue

@@ -9,7 +9,7 @@
 				:stroke-width="data.swid" 
 				:percentage="parseFloat(data.max)>100?(parseFloat(data.value)/parseFloat(data.max))*100:data.value">
 			</el-progress>
-			<span class="text-sm">{{data.name}}</span>
+			<span class="text-sm text-bGray">{{data.name}}</span>
 		</div>
 		<div class="text-xxl text-purple margin-left-sm">{{data.value}}{{data.unit}}</div>
 	</div>

src/components/oilsBox/index.vue

@@ -1,14 +1,14 @@
 <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">
+			<div class="oilHeig" :class="type == 'heavy'?'heavy':''" :style="{ height: (parseFloat(data.value)/parseFloat(data.max || max))*100 + '%'}">
+				<div class="oilTxt text-sm text-black">
 					<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 class="text-xs margin-top-xs">{{data.name}}</div>
 	</div>
 </template>
 
@@ -28,9 +28,13 @@
 				unit: ""
 		    }
 		  }
+		},
+		type: {
+			type: String,
+			default: '',
 		}
 	});
-	const { height, name, data } = toRefs(props);
+	const { height, type, data } = toRefs(props);
 	watch(data, (newValue) => {
 			
 		},{
@@ -57,6 +61,9 @@
 			height: 0%; 
 			background-color: #f08e3e; 
 			transition-duration: 0.1s;
+			&.heavy{
+				background-color: #b05409;
+			}
 		}
 		.oilTxt{
 			position: absolute; 

src/layout/components/Navbar.vue

@@ -3,17 +3,18 @@
 		<div class="left-menu">
 			<logo/>
 		</div>
-		<div class="left-menu" style="width:calc(100% - 734px);">
+		<div class="left-menu" style="width:calc(100% - 766px);">
 			<sidebar/>
 		</div>
 		<div class="right-menu">
 			<time-zone/>
-			<div class="avatar-container">
+			<div>
 				<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
 					<div class="avatar-wrapper flex align-center">
+						<svg-icon icon-class="user"/>
 						<div class="margin-left-xs">
-							<div class="text-df text-bold">{{ $store.state.user.user.nickName }}</div>
-							<div class="text-sm">{{ $store.state.user.user.userName }}</div>
+							<div class="text-df text-bold" style="text-decoration: underline;">{{ $store.state.user.user.nickName }}</div>
+							<!-- <div class="text-sm">{{ $store.state.user.user.userName }}</div> -->
 						</div>
 					</div>
 					<template #dropdown>
@@ -31,6 +32,7 @@
 					</template>
 				</el-dropdown>
 			</div>
+			<elIcon class="margin-right-sm pointer"><SwitchButton/></elIcon>
 		</div>
 	</div>
 </template>
@@ -87,7 +89,7 @@
 		overflow: hidden;
 		position: relative;
 		color: #fff;
-		background: #3b9a9c;
+		background: #2da5f0;
 		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 		.left-menu{
 			float: left;
@@ -107,8 +109,8 @@
 				padding: 0 8px;
 				height: 100%;
 				font-size: 18px;
-				color: #5a5e66;
-				vertical-align: text-bottom;
+				color: #fff;
+				vertical-align: center;
 				&.hover-effect {
 					cursor: pointer;
 					transition: background 0.3s;

src/layout/components/Sidebar/index.vue

@@ -5,12 +5,13 @@
         :default-active="activeMenu"
         :collapse="isCollapse"
         :unique-opened="true"
-        active-text-color="#000"
+        active-text-color="#fff"
         :collapse-transition="false"
 		text-color="#fff"
-		background-color="#3b9a9c"
+		background-color="#2da5f0"
         mode="horizontal"
 		class="justify-center"
+		style="border-bottom: none;"
       >
         <sidebar-item
           v-for="(route, index) in sidebarRouters"
@@ -47,3 +48,8 @@ const activeMenu = computed(() => {
 })
 
 </script>
+<style scoped lang="scss">
+	::v-deep .el-menu-item.is-active {
+		border-bottom: #fff solid 2px !important;
+	}
+</style>

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

@@ -2,30 +2,30 @@
 	<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="text-xs text-bold text-bGray">能源输入</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 class="text-xs text-bold text-bGray">总能源输入</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 class="text-xs text-bold text-bGray">初级能量消耗端</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 class="text-xs text-bold text-bGray">{{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="text-bold text-center text-bGray">能源流传递及损耗</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"
@@ -35,7 +35,7 @@
 								: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-bGray">{{ fstem.name }}</span>
 									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
 								</div>
 							</el-card>
@@ -49,7 +49,7 @@
 								: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-bGray">{{ fstem.name }}</span>
 									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
 								</div>
 							</el-card>
@@ -63,7 +63,7 @@
 								: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-bGray">{{ fstem.name }}</span>
 									<span class="text-purple" style="font-weight: bolder;">{{ fstem.value }}</span>
 								</div>
 							</el-card>
@@ -74,12 +74,12 @@
 		</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 class="text-bold text-center text-bGray">耗能末端</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-bGray">{{ etem.name }}</span>
 							<span class="text-purple" style="font-weight: bolder;">{{ etem.value }}</span>
 						</div>
 					</el-card>
@@ -88,11 +88,11 @@
 		</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="text-xs text-bold text-bGray">能源有效做功</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 class="text-xs text-bold text-bGray">能源有效做功</div>
 				</div>
 			</el-card>
 		</el-col>
@@ -277,5 +277,8 @@
 	const { energyStart, energyEnd, energyFlow1, energyFlow2, energyFlow3 } = toRefs(data);
 </script>
 
-<style>
+<style scoped lang="scss">
+	.box-card{
+		border-radius: 16px;
+	}
 </style>

src/views/efficiencyAnalysis/contRast/index.vue

@@ -15,7 +15,7 @@
 							<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"/>
+									<oil-box :data="qtem" :type="lndex == 1?'heavy':''"/>
 									<div class="text-blue text-xxl text-bold margin-left-sm">{{OilStorage.oilStorage[lndex][qndex].value}}L</div>
 								</div>
 							</div>
@@ -74,6 +74,7 @@
 				<el-row :gutter="20">
 					<template v-for="(item,index) in consumeData" :key="index">
 						<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24" style="position: relative;">
+							<div v-if="index == 0" class="sTitleSty" style="letter-spacing: 0;left: 12px;">船舶设备能量分布</div>
 							<pie-rose :name="item.name" :data="item.data" height="calc(33.33vh - 90px)"/>
 							<div class="text-sm text-bold" style="position: absolute;bottom: 0;left: 45%;transform: translate(-50%, 0);">{{item.title}}</div>
 						</el-col>
@@ -91,7 +92,6 @@
 	import OilBox from "@/components/oilsBox";
 	import EnergyConsu from "./energyConsu";
 	
-	import engImg from "@/assets/images/20240529135050.png";
 	const timeUnitOptions = ref([]);
 	const data = reactive({
 		oilsData: {
@@ -213,60 +213,59 @@
 		},
 		OilStorage: {
 			"oilLevel": [[{
-				name: "左重油舱",
-				value: 0.90,
+				name: "左轻油舱",
+				value: 1.33,
 				min: 0,
 				max: 2,
 				unit: "m"
 			},{
-				name: "右重油舱",
-				value: 1.52,
+				name: "右轻油舱",
+				value: 1.95,
 				min: 0,
 				max: 2,
 				unit: "m"
 			},{
-				name: "燃油沉淀柜",
-				value: 0.67,
+				name: "轻油沉淀柜",
+				value: 1.01,
 				min: 0,
 				max: 2,
 				unit: "m"
 			},{
-				name: "燃油日用柜",
-				value: 0.83,
+				name: "2号轻油日用柜",
+				value: 1.63,
 				min: 0,
 				max: 2,
 				unit: "m"
-			}],
-			[{
-				name: "左轻油舱",
-				value: 1.33,
+			}],[{
+				name: "左重油舱",
+				value: 0.90,
 				min: 0,
 				max: 2,
 				unit: "m"
 			},{
-				name: "右轻油舱",
-				value: 1.95,
+				name: "右重油舱",
+				value: 1.52,
 				min: 0,
 				max: 2,
 				unit: "m"
 			},{
-				name: "轻油沉淀柜",
-				value: 1.01,
+				name: "燃油沉淀柜",
+				value: 0.67,
 				min: 0,
 				max: 2,
 				unit: "m"
 			},{
-				name: "2号轻油日用柜",
-				value: 1.63,
+				name: "燃油日用柜",
+				value: 0.83,
 				min: 0,
 				max: 2,
 				unit: "m"
 			}]],
 			"oilStorage": [[{
-				value: 1523.00,
+				value: 152.00,
 				unit: "L"
 			},{
-				value: 12487.00,
+				value: 124.00,
 				unit: "L"
 			},{
 				value: 452.00,
@@ -275,10 +274,10 @@
 				value: 523.00,
 				unit: "L"
 			}],[{
-				value: 2060.50,
+				value: 206.50,
 				unit: "L"
 			},{
-				value: 2137.90,
+				value: 213.90,
 				unit: "L"
 			},{
 				value: 237.90,

src/views/efficiencyAnalysis/distriBution/index.vue

@@ -17,7 +17,7 @@
 								  type="date"
 								  size="small"
 								  style="width: 100%;"
-								  start-placeholder="开始日期">
+								  placeholder="开始日期">
 								</el-date-picker>
 							</el-form-item>
 							<el-form-item style="margin-bottom: 8px;">
@@ -27,7 +27,7 @@
 								  type="date"
 								  size="small"
 								  style="width: 100%;"
-								  end-placeholder="结束日期">
+								  placeholder="结束日期">
 								</el-date-picker>
 							</el-form-item>
 							<el-form-item style="margin-bottom: 0;">
@@ -55,7 +55,7 @@
 								  type="date"
 								  size="small"
 								  style="width: 100%;"
-								  start-placeholder="开始日期">
+								  placeholder="开始日期">
 								</el-date-picker>
 							</el-form-item>
 							<el-form-item style="margin-bottom: 8px;">
@@ -65,7 +65,7 @@
 								  type="date"
 								  size="small"
 								  style="width: 100%;"
-								  end-placeholder="结束日期">
+								  placeholder="结束日期">
 								</el-date-picker>
 							</el-form-item>
 							<el-form-item style="margin-bottom: 0;">
@@ -86,8 +86,8 @@
 								<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-form ref="oilsFormRef" class="flex justify-center" :model="oilsForm" label-width="100px">
+									<el-form-item style="margin-bottom: 0;" label="航次消耗对比：" v-if="index == 0">
 										<el-select v-model="oilsForm.equipId" placeholder="请选择" size="small" style="width: 100%;">
 											<el-option
 											  v-for="item in timeUnitOptions"
@@ -97,7 +97,17 @@
 											</el-option>
 										</el-select>
 									</el-form-item>
-									<el-form-item label="时间：" style="margin-bottom: 0px;">
+									<el-form-item style="margin-bottom: 0;" label="查询方式：" v-if="index != 0">
+										<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;" v-if="index != 0">
 										<div></div>
 										<el-date-picker
 										  v-model="oilsForm.startTime"
@@ -307,6 +317,10 @@
 </script>
 
 <style scoped lang="scss">
+	::v-deep .el-form-item__label {
+		color: var(--bGray);
+		font-weight: initial;
+	}
 	.sTitleSty{
 		font-size: 0.8rem;
 	}

src/views/efficiencyAnalysis/historyPage/index.vue

@@ -41,7 +41,7 @@
 						<div class="sTitleSty">轴转速</div>
 						<line-chart name="HostSpeed" :data="speedData" height="calc(33.33vh - 89px)"/>
 					</div>
-					<div class="margin-top-xs text-bold">主机</div>
+					<div class="margin-top-xs text-bold text-black">主机</div>
 				</el-card>
 			</el-col>
 			<el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
@@ -62,7 +62,7 @@
 							  v-model="equipForm.sendTime"
 							  type="daterange"
 							  size="small"
-							   style="width: 100%;"
+							  style="width: 100%;"
 							  range-separator=" - "
 							  start-placeholder="开始日期"
 							  end-placeholder="结束日期">
@@ -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-bold">辅机</div>
+					<div class="margin-top-xs text-bold text-black">辅机</div>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -236,7 +236,8 @@
 
 <style scoped lang="scss">
 	::v-deep .el-form-item__label {
-	  line-height:  var(--el-component-size-small);;
+		line-height:  var(--el-component-size-small);
+		color: var(--bGray);
+		font-weight: 700;
 	}
-	
 </style>

src/views/efficiencyAnalysis/index.vue

@@ -11,8 +11,8 @@
 			<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 #cbcbcb;border-right: 1px solid #cbcbcb;" label="contrast">能效指标对比分析</el-radio-button>
-				    <el-radio-button label="distribution">能效分布分析</el-radio-button>
+				    <el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="distribution">能效指标对比分析</el-radio-button>
+				    <el-radio-button label="contrast">能效分布分析</el-radio-button>
 				</el-radio-group>
 			</el-col>
 			<el-col :xl="4" :lg="4" :md="4" :sm="12" :xs="12"><progress-bar :data="oilList.lubricatOil"/></el-col>
@@ -81,4 +81,5 @@
 	::v-deep .el-radio-button:first-child .el-radio-button__inner{
 		border: none;
 	}
+	
 </style>

src/views/efficiencyMana/AlarmMana/index.vue

@@ -6,7 +6,7 @@
 					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
 						<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 class="sTitleSty" style="font-size: 1.2rem;letter-spacing: 4px;">报警管理</div>
 								<div>
 									<div class="reportSty"><div><span>9</span></div></div>
 									<div class="text-center text-bold margin-top-sm">警告总数</div>
@@ -26,7 +26,7 @@
 					<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
 						<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>
+								<div class="sTitleSty" style="font-size: 1.2rem;letter-spacing: 4px;">{{alarmProportion.title}}</div>
 								<pie-circular-chart :name="alarmProportion.name" :data="alarmProportion.data" height="calc(36vh - 100px)"/>
 							</div>
 						</el-card>
@@ -47,7 +47,7 @@
 									<el-button circle type="primary" :plain="equipmentType != item.type">
 										<svg-icon :icon-class="item.type"/>
 									</el-button>
-									<span class="margin-left-xs">{{ item.name }}</span>
+									<span class="margin-left-xs text-black">{{ item.name }}</span>
 								</div>
 								<el-form-item label="" class="margin-right">
 									<el-date-picker
@@ -65,15 +65,15 @@
 							<div class="flex justify-end text-xs">
 								<div>
 									<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
-									<span class="margin-left-xs">刷新</span>
+									<span class="margin-left-xs text-black">刷新</span>
 								</div>
 								<div class="margin-lr">
 									<el-button circle type="primary"><elIcon><Download/></elIcon></el-button>
-									<span class="margin-left-xs">导出</span>
+									<span class="margin-left-xs text-black">导出</span>
 								</div>	
 								<div @click="handleAddSet">
 									<el-button circle type="success"><elIcon><Setting/></elIcon></el-button>
-									<span class="margin-left-xs">设置</span>
+									<span class="margin-left-xs text-black">设置</span>
 								</div>
 							</div>
 						</el-col>
@@ -82,7 +82,7 @@
 				<el-table :data="alarmLogData" stripe style="width: 100%"
 					height="calc(100vh - 190px)"
 					:cell-style="{ fontSize: '0.75rem' }"
-					:header-cell-style="{ backgroundColor: '#a9cbe2' }">
+					:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 					<el-table-column label="id" width="80" align="center">
 						<template #default="scope">
 							<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
@@ -106,7 +106,6 @@
 	import AlarmSetDrawer from "@/components/AlarmSetting"
 	import BarChart from "@/components/Echarts/BarChart";
 	import pieCircularChart from "@/components/Echarts/pieCircularChart";
-	import engImg from "@/assets/images/20240529135050.png";
 	const equipmentType = ref('engineRoom');
 	const data = reactive({
 		tabEquipment: [{
@@ -202,7 +201,7 @@
 			alarmTime: "2024-06-20 15:35:36",
 			alarmPosi: "",
 			alarmValue: "2999"
-		}]
+		},{},{},{},{},{},{},{},{},{},{},{},{}]
 	});
 	const { alarmLogData, refuelForm, alarmProportion, alarmRepoData, tabEquipment } = toRefs(data);
 	const handleChange = function(val){
@@ -215,7 +214,5 @@
 
 
 <style scoped lang="scss">
-	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
-		background-color: #a9cbe2;
-	}
+	
 </style>

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

@@ -4,66 +4,139 @@
 		<el-row :gutter="24">
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
 				<div style="position: relative;padding-left: 40px;">
-					<div class="sTitleSty" style="letter-spacing:0;color: #000;">审核和更新日志</div>
-					<el-table :data="upLogData" stripe style="width: 100%" 
-						height="calc(37vh - 65px)"
-						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
-						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2' }">
-						<el-table-column prop="date" label="日期/时间线"></el-table-column>
-						<el-table-column prop="address" label="更新部分"></el-table-column>
-						<el-table-column prop="name" label="编制者"></el-table-column>
-						<el-table-column prop="name" label="执行者"></el-table-column>
-					</el-table>
+					<div class="sTitleSty" style="letter-spacing:0;">审核和更新日志</div>
+					<el-form ref="upLogFormRefs" :rules="rules" :model="upLogForm">
+						<el-table :data="upLogForm.upLogData" stripe style="width: 100%" 
+							height="calc(37vh - 65px)"
+							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
+							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
+							<el-table-column prop="date" label="日期/时间线">
+								<template #default="scope">
+									<el-form-item :prop="`upLogData.${scope.$index}.date`" :rules="rules.date" style="margin: 0;">
+										<el-date-picker
+										  v-model="scope.row.date"
+										  type="date"
+										  placeholder="日期/时间线">
+										</el-date-picker>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="updateSection" label="更新部分">
+								<template #default="scope">
+									<el-form-item :prop="`upLogData.${scope.$index}.updateSection`" :rules="rules.updateSection" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.updateSection" placeholder="更新部分"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="creator" label="编制者">
+								<template #default="scope">
+									<el-form-item :prop="`upLogData.${scope.$index}.creator`" :rules="rules.creator" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.creator" placeholder="编制者"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="performer" label="执行者">
+								<template #default="scope">
+									<el-form-item :prop="`upLogData.${scope.$index}.performer`" :rules="rules.performer" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.performer" placeholder="执行者"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+						</el-table>
+					</el-form>
 				</div>
 				<div style="position: relative;padding-left: 40px;margin-top:40px;">
-					<div class="sTitleSty" style="letter-spacing:0;color: #000;">设备燃油类型</div>
-					<el-table :data="upLogData" stripe 
-						style="width: 100%" 
-						height="calc(32vh - 65px)"
-						:cell-style="{ fontSize: '0.75rem' }"
-						:header-cell-style="{ backgroundColor: '#a9cbe2' }">
-						<el-table-column prop="date" label="设备"></el-table-column>
-						<el-table-column prop="address" label="功率"></el-table-column>
-						<el-table-column prop="name" label="燃油类型"></el-table-column>
-					</el-table>
+					<div class="sTitleSty" style="letter-spacing:0;">设备燃油类型</div>
+					<el-form ref="equiFuelRefs" :rules="rules" :model="upLogForm">
+						<el-table :data="upLogForm.equiFuelData" stripe 
+							style="width: 100%" 
+							height="calc(32vh - 65px)"
+							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
+							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
+							<el-table-column prop="equipmentName" label="设备">
+								<template #default="scope">
+									<el-form-item :prop="`equiFuelData.${scope.$index}.equipmentName`" :rules="rules.equipmentName" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.equipmentName" placeholder="设备"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="power" label="功率">
+								<template #default="scope">
+									<el-form-item :prop="`equiFuelData.${scope.$index}.power`" :rules="rules.power" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.power" placeholder="功率"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="oilType" label="燃油类型">
+								<template #default="scope">
+									<el-select v-model="scope.row.oilType" size="small" placeholder="选择加油类型">
+										<el-option
+										  v-for="item in oilsTypeOptions"
+										  :key="item.value"
+										  :label="item.label"
+										  :value="item.value">
+										</el-option>
+									</el-select>
+								</template>
+							</el-table-column>
+						</el-table>
+					</el-form>
 				</div>
 			</el-col>
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
 				<div>
 					<div class="text-bold text-sm">测量燃油消耗量的方法</div>
 					<el-input
-					  placeholder="描述"
+					  placeholder="方法"
 					  class="margin-bottom-sm margin-top-xs"
-					  v-model="distanceArea">
+					  v-model="upLogForm.fuelConsMethod">
 					</el-input>
 					<el-input
 					  type="textarea"
 					  placeholder="描述"
 					  class="areaInput"
 					  style="height: calc(23.33vh - 110px);"
-					  v-model="distanceArea">
+					  v-model="upLogForm.fuelConsRemark">
 					</el-input>
 				</div>
 				<div class="margin-tb">
 					<div class="text-bold text-sm">测量航行距离的方法</div>
 					<el-input
 					  type="textarea"
-					  placeholder="描述"
+					  placeholder="方法"
 					  class="margin-top-xs areaInput"
 					  style="height: calc(20vh - 80px);"
-					  v-model="distanceArea">
+					  v-model="upLogForm.sailDistaMethod">
 					</el-input>
 				</div>
 				<div>
 					<div class="text-bold text-sm margin-bottom-xs">燃油消耗数据收集计划修改记录</div>
-					<el-table :data="upLogData" stripe 
-						style="width: 100%" 
-						height="calc(26.66vh - 56px)"
-						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
-						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2' }">
-						<el-table-column prop="date" label="修改日期"></el-table-column>
-						<el-table-column prop="address" label="修改条款"></el-table-column>
-					</el-table>
+					<el-form ref="modifyRecordRefs" :rules="rules" :model="upLogForm">
+						<el-table :data="upLogForm.modifyRecordsData" stripe 
+							style="width: 100%" 
+							height="calc(26.66vh - 56px)"
+							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
+							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
+							<el-table-column prop="date" label="修改日期">
+								<template #default="scope">
+									<el-form-item :prop="`modifyRecordsData.${scope.$index}.modificDate`" :rules="rules.modificDate" style="margin: 0;">
+										<el-date-picker
+										  v-model="scope.row.modificDate"
+										  type="date"
+										  placeholder="修改日期">
+										</el-date-picker>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="address" label="修改条款">
+								<template #default="scope">
+									<el-form-item :prop="`modifyRecordsData.${scope.$index}.modificTxt`" :rules="rules.modificTxt" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.modificTxt" placeholder="修改条款"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+						</el-table>
+					</el-form>
 				</div>
 			</el-col>
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
@@ -71,10 +144,10 @@
 					<div class="text-bold text-sm">测量航行小时数的方法</div>
 					<el-input
 					  type="textarea"
-					  placeholder="评估程序"
+					  placeholder="方法"
 					  class="margin-top-xs areaInput"
 					  style="height: calc(23.33vh - 90px);"
-					  v-model="distanceArea">
+					  v-model="upLogForm.sailHourMethod">
 					</el-input>
 				</div>
 				<div class="margin-tb-xl">
@@ -84,17 +157,17 @@
 					  placeholder="评估程序"
 					  class="margin-top-xs areaInput"
 					  style="height: calc(23.33vh - 90px);"
-					  v-model="distanceArea">
+					  v-model="upLogForm.evaluaProcedure">
 					</el-input>
 				</div>
 				<div>
 					<div class="text-bold text-sm">数据质量</div>
 					<el-input
 					  type="textarea"
-					  placeholder="评估程序"
+					  placeholder="数据质量"
 					  class="margin-top-xs areaInput"
 					  style="height: calc(23.33vh - 90px);"
-					  v-model="distanceArea">
+					  v-model="upLogForm.dataQuality">
 					</el-input>
 				</div>
 				<div class="margin-top">
@@ -109,42 +182,153 @@
 <script setup>
 	import { reactive } from "vue";
 	const distanceArea = ref("");
+	const oilsTypeOptions = ref([]);
 	const data = reactive({
-		upLogData: [{
-			date: '2016-05-02',
-			name: '王小虎',
-			address: '上海市'
-        },{
-			date: '2016-05-04',
-			name: '王小虎',
-			address: '普陀区'
-        },{
-			date: '2016-05-01',
-			name: '王小虎',
-			address: '金沙江路'
-        },{
-			date: '2016-05-03',
-			name: '王小虎',
-			address: '1516弄'
-        },{
-			date: '2016-05-02',
-			name: '王小虎',
-			address: '上海市'
-        },{
-			date: '2016-05-04',
-			name: '王小虎',
-			address: '普陀区'
-        },{
-			date: '2016-05-01',
-			name: '王小虎',
-			address: '金沙江路'
-        },{
-			date: '2016-05-03',
-			name: '王小虎',
-			address: '1516弄'
-        }]
+		rules: {
+			performer: [{
+				required: true,
+				message: "请输入执行者",
+				trigger: "blur"
+			}],
+			creator: [{
+				required: true,
+				message: "请输入编制者",
+				trigger: "blur"
+			}],
+			updateSection: [{
+				required: true,
+				message: "请输入更新部分",
+				trigger: "blur"
+			}],
+			date: [{
+				required: true,
+				message: "请选择时间",
+				trigger: "blur"
+			}],
+			equipmentName: [{
+				required: true,
+				message: "请输入设备名称",
+				trigger: "blur"
+			}],
+			power: [{
+				required: true,
+				message: "请输入功率",
+				trigger: "blur"
+			}],
+			oilType: [{
+				required: true,
+				message: "请选择燃油类型",
+				trigger: "blur"
+			}],
+			modificDate: [{
+				required: true,
+				message: "请选择时间",
+				trigger: "blur"
+			}],
+			modificTxt: [{
+				required: true,
+				message: "请输入修改条款",
+				trigger: "blur"
+			}]
+		},
+		upLogForm: {
+			fuelConsMethod: "",
+			fuelConsRemark: "",
+			sailDistaMethod: "",
+			sailHourMethod: "",
+			evaluaProcedure: "",
+			dataQuality: "",
+			equiFuelData: [{
+				equipmentName: "主机",
+				power: "123.5",
+				oilType: 1
+			},{
+				equipmentName: "辅机",
+				power: "3123.5",
+				oilType: 2
+			},{
+				equipmentName: "锅炉",
+				power: "123.5",
+				oilType: 1
+			},{
+				equipmentName: "主机",
+				power: "123.5",
+				oilType: 1
+			},{
+				equipmentName: "辅机",
+				power: "123.5",
+				oilType: 1
+			},{
+				equipmentName: "锅炉",
+				power: "123.5",
+				oilType: 1
+			}],
+			modifyRecordsData: [{
+				modificDate: "2016-05-02",
+				modificTxt: "修改了哈哈哈"
+			},{
+				modificDate: "2016-05-03",
+				modificTxt: "修改了哈哈哈"
+			},{
+				modificDate: "2016-05-04",
+				modificTxt: "修改了哈哈哈"
+			},{
+				modificDate: "2016-05-05",
+				modificTxt: "修改了哈哈哈"
+			},{
+				modificDate: "2016-05-06",
+				modificTxt: "修改了哈哈哈"
+			},{
+				modificDate: "2016-05-07",
+				modificTxt: "修改了哈哈哈"
+			},{
+				modificDate: "2016-05-08",
+				modificTxt: "修改了哈哈哈"
+			}],
+			upLogData: [{
+				date: '2016-05-02',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			},{
+				date: '2016-05-04',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			},{
+				date: '2016-05-01',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			},{
+				date: '2016-05-03',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			},{
+				date: '2016-05-02',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			},{
+				date: '2016-05-04',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			},{
+				date: '2016-05-01',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			},{
+				date: '2016-05-03',
+				updateSection: "更新了哈哈哈",
+				creator: '王小虎',
+				performer: '温大壮'
+			}],
+		}
 	});
-	const { upLogData } = toRefs(data);
+	const { upLogForm, rules } = toRefs(data);
 </script>
 
 <style scoped lang="scss">

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

@@ -4,29 +4,83 @@
 		<el-row :gutter="50">
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
 				<div style="position: relative;padding-left: 30px;">
-					<div class="sTitleSty" style="letter-spacing:0;color: #000;">审核和更新日志</div>
-					<el-table :data="upLogData" stripe style="width: 100%" 
-						height="calc(75vh - 156px)"
-						:cell-style="{ fontSize: '0.75rem' }"
-						:header-cell-style="{ backgroundColor: '#a9cbe2' }">
-						<el-table-column prop="date" label="日期/时间线"></el-table-column>
-						<el-table-column prop="address" label="更新部分"></el-table-column>
-						<el-table-column prop="name" label="编制者"></el-table-column>
-						<el-table-column prop="name" label="执行者"></el-table-column>
-					</el-table>
+					<div class="sTitleSty" style="letter-spacing:0;">审核和更新日志</div>
+					<el-form ref="eupLogRefs" :rules="rules" :model="increaseForm">
+						<el-table :data="increaseForm.eupLogData" stripe style="width: 100%" 
+							height="calc(75vh - 156px)"
+							:cell-style="{ fontSize: '0.75rem' }"
+							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
+							<el-table-column prop="timeLine" label="日期/时间线">
+								<template #default="scope">
+									<el-form-item :prop="`eupLogData.${scope.$index}.timeLine`" :rules="rules.timeLine" style="margin: 0;">
+										<el-date-picker
+										  v-model="scope.row.timeLine"
+										  type="date"
+										  placeholder="日期/时间线">
+										</el-date-picker>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="upSection" label="更新部分">
+								<template #default="scope">
+									<el-form-item :prop="`eupLogData.${scope.$index}.upSection`" :rules="rules.upSection" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.upSection" placeholder="输入加油量"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="eCreator" label="编制者">
+								<template #default="scope">
+									<el-form-item :prop="`eupLogData.${scope.$index}.eCreator`" :rules="rules.eCreator" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.eCreator" placeholder="输入加油量"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="ePerformer" label="执行者">
+								<template #default="scope">
+									<el-form-item :prop="`eupLogData.${scope.$index}.ePerformer`" :rules="rules.ePerformer" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.ePerformer" placeholder="输入加油量"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+						</el-table>
+					</el-form>
 				</div>
 			</el-col>
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
 				<div style="position: relative;padding-left: 30px;">
-					<div class="sTitleSty" style="letter-spacing:0;color: #000;">措施</div>
-					<el-table :data="upLogData" stripe style="width: 100%" 
-						height="calc(75vh - 156px)"
-						:cell-style="{ fontSize: '0.75rem' }"
-						:header-cell-style="{ backgroundColor: '#a9cbe2' }">
-						<el-table-column prop="date" label="能效措施"></el-table-column>
-						<el-table-column prop="address" label="执行(包括开始日期)"></el-table-column>
-						<el-table-column prop="name" label="负责人员" width="100px"></el-table-column>
-					</el-table>
+					<div class="sTitleSty" style="letter-spacing:0;">措施</div>
+					<el-form ref="measuresRefs" :rules="rules" :model="increaseForm">
+						<el-table :data="increaseForm.measuresData" stripe style="width: 100%" 
+							height="calc(75vh - 156px)"
+							:cell-style="{ fontSize: '0.75rem' }"
+							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
+							<el-table-column prop="date" label="能效措施">
+								<template #default="scope">
+									<el-form-item :prop="`measuresData.${scope.$index}.energyMeasures`" :rules="rules.energyMeasures" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.energyMeasures" placeholder="能效措施"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="address" label="执行(包括开始日期)">
+								<template #default="scope">
+									<el-form-item :prop="`measuresData.${scope.$index}.executionDate`" :rules="rules.executionDate" style="margin: 0;">
+										<el-date-picker
+										  v-model="scope.row.executionDate"
+										  type="date"
+										  placeholder="选择时间">
+										</el-date-picker>
+									</el-form-item>
+								</template>
+							</el-table-column>
+							<el-table-column prop="name" label="负责人员">
+								<template #default="scope">
+									<el-form-item :prop="`measuresData.${scope.$index}.person`" :rules="rules.person" style="margin: 0;">
+										<el-input type="text" v-model="scope.row.person" placeholder="输入加油量"/>
+									</el-form-item>
+								</template>
+							</el-table-column>
+						</el-table>
+					</el-form>
 				</div>
 			</el-col>
 			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24" style="padding-right: 40px;">
@@ -41,7 +95,7 @@
 							</el-date-picker>
 						</el-form-item>
 						<el-form-item label="编制者" style="margin-bottom: 8px;">
-							<el-select v-model="increaseForm.compilationId" placeholder="请选择"
+							<el-select v-model="increaseForm.creator" placeholder="请选择"
 							  size="small">
 								<el-option
 								  v-for="item in compilationOptions"
@@ -62,7 +116,7 @@
 							</el-date-picker>
 						</el-form-item>
 						<el-form-item label="执行者" style="margin-bottom: 8px;">
-							<el-select v-model="increaseForm.executionId" placeholder="请选择"
+							<el-select v-model="increaseForm.performer" placeholder="请选择"
 							  size="small">
 								<el-option
 								  v-for="item in executionOptions"
@@ -76,7 +130,7 @@
 					<div class="flex">
 						<el-form-item label="计划的下次评估日期" label-width="140px" class="flex-twice" style="margin-bottom: 8px;">
 							<el-date-picker
-							  v-model="increaseForm.compilationDate"
+							  v-model="increaseForm.evaluationDate"
 							  type="date"
 							  size="small"
 							  placeholder="选择日期">
@@ -86,33 +140,33 @@
 					</div>
 				</el-form>
 				<div style="position: relative;padding-left: 30px;">
-					<div class="sTitleSty" style="letter-spacing:0;color: #000;">目标</div>
+					<div class="sTitleSty" style="letter-spacing:0;">目标</div>
 					<el-input
 					  type="textarea"
 					  placeholder="可测量的目标"
 					  class="margin-top-xs areaInput"
 					  style="height: calc(23.33vh - 100px);"
-					  v-model="distanceArea">
+					  v-model="increaseForm.target">
 					</el-input>
 				</div>
 				<div style="position: relative;padding-left: 30px;" class="margin-tb">
-					<div class="sTitleSty" style="letter-spacing:0;color: #000;">监测</div>
+					<div class="sTitleSty" style="letter-spacing:0;">监测</div>
 					<el-input
 					  type="textarea"
 					  placeholder="监测工具的描述"
 					  class="margin-top-xs areaInput"
 					  style="height: calc(23.33vh - 100px);"
-					  v-model="distanceArea">
+					  v-model="increaseForm.monitor">
 					</el-input>
 				</div>
 				<div style="position: relative;padding-left: 30px;">
-					<div class="sTitleSty" style="letter-spacing:0;color: #000;">评估</div>
+					<div class="sTitleSty" style="letter-spacing:0;">评估</div>
 					<el-input
 					  type="textarea"
 					  placeholder="评估程序"
 					  class="margin-top-xs areaInput"
 					  style="height: calc(23.33vh - 100px);"
-					  v-model="distanceArea">
+					  v-model="increaseForm.assessment">
 					</el-input>
 				</div>
 			</el-col>
@@ -127,42 +181,121 @@
 	const compilationOptions = ref([]);
 	const executionOptions = ref([]);
 	const data = reactive({
-		increaseForm: {},
-		upLogData: [{
-			date: '2016-05-02',
-			name: '王小虎',
-			address: '上海市'
-        },{
-			date: '2016-05-04',
-			name: '王小虎',
-			address: '普陀区'
-        },{
-			date: '2016-05-01',
-			name: '王小虎',
-			address: '金沙江路'
-        },{
-			date: '2016-05-03',
-			name: '王小虎',
-			address: '1516弄'
-        },{
-			date: '2016-05-02',
-			name: '王小虎',
-			address: '上海市'
-        },{
-			date: '2016-05-04',
-			name: '王小虎',
-			address: '普陀区'
-        },{
-			date: '2016-05-01',
-			name: '王小虎',
-			address: '金沙江路'
-        },{
-			date: '2016-05-03',
-			name: '王小虎',
-			address: '1516弄'
-        }]
+		rules: {
+			person: [{
+				required: true,
+				message: "请输入负责人",
+				trigger: "blur"
+			}],
+			energyMeasures: [{
+				required: true,
+				message: "请输入能效措施",
+				trigger: "blur"
+			}],
+			executionDate: [{
+				required: true,
+				message: "请选择执行日期",
+				trigger: "blur"
+			}],
+			ePerformer: [{
+				required: true,
+				message: "请输入执行者",
+				trigger: "blur"
+			}],
+			eCreator: [{
+				required: true,
+				message: "请输入编制者",
+				trigger: "blur"
+			}],
+			upSection: [{
+				required: true,
+				message: "请输入更新部分",
+				trigger: "blur"
+			}],
+			timeLine: [{
+				required: true,
+				message: "请选择时间",
+				trigger: "blur"
+			}],
+		},
+		increaseForm: {
+			eupLogData: [{
+				timeLine: '2016-05-02',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			},{
+				timeLine: '2016-05-04',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			},{
+				timeLine: '2016-05-01',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			},{
+				timeLine: '2016-05-03',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			},{
+				timeLine: '2016-05-02',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			},{
+				timeLine: '2016-05-04',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			},{
+				timeLine: '2016-05-01',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			},{
+				timeLine: '2016-05-03',
+				upSection: "更新了哈哈哈",
+				eCreator: '王小虎',
+				ePerformer: '温大壮'
+			}],
+			measuresData: [{
+				executionDate: '2016-05-02',
+				person: '王小虎',
+				energyMeasures: '上海市'
+			},{
+				executionDate: '2016-05-04',
+				person: '王小虎',
+				energyMeasures: '普陀区'
+			},{
+				executionDate: '2016-05-01',
+				person: '王小虎',
+				energyMeasures: '金沙江路'
+			},{
+				executionDate: '2016-05-03',
+				person: '王小虎',
+				energyMeasures: '1516弄'
+			},{
+				executionDate: '2016-05-02',
+				person: '王小虎',
+				energyMeasures: '上海市'
+			},{
+				executionDate: '2016-05-04',
+				person: '王小虎',
+				energyMeasures: '普陀区'
+			},{
+				executionDate: '2016-05-01',
+				person: '王小虎',
+				energyMeasures: '金沙江路'
+			},{
+				executionDate: '2016-05-03',
+				person: '王小虎',
+				energyMeasures: '1516弄'
+			}],
+		}
 	});
-	const { upLogData, increaseForm } = toRefs(data);
+	const { increaseForm, rules } = toRefs(data);
 </script>
 
 <style scoped lang="scss">

src/views/efficiencyMana/EnergyReport/index.vue

@@ -1,12 +1,12 @@
 <template>
-	<el-row :gutter="14" style="color: #72819f;">
+	<el-row :gutter="14">
 		<el-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
 			<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;">
 							<div style="writing-mode: vertical-rl;" class="margin-right-sm text-bold">船舶基础信息</div>
-							<el-image style="width: 76%;border-radius: 4px;" :src="engImg"></el-image>
+							<el-image style="width: 76%;border-radius: 4px;" :src="shipImg"></el-image>
 						</div>
 					</el-col>
 					<el-col :span="8" :xs="24" style="height: calc(25vh - 72px);">
@@ -70,11 +70,11 @@
 
 <script setup>
 	import { reactive } from "vue";
-	import engImg from "@/assets/images/20240529135050.png";
+	import shipImg from "@/assets/images/shipImg.jpg";
 	import FuelData from "./FuelData/index.vue";
 	import ImproveEnergy from "./ImproveEnergy/index.vue";
 	const calendarVal = ref("");
-	const reportTye = ref(0);
+	const reportTye = ref(1);
 	const data = reactive({
 		
 	});
@@ -83,13 +83,6 @@
 </script>
 
 <style scoped lang="scss">
-	::v-deep .el-descriptions__label:not(.is-bordered-label){
-		margin-right: 0;
-		font-weight: bold;
-	}
-	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
-		background-color: #a9cbe2;
-	}
     ::v-deep .areaInput .el-textarea__inner{
 		height: 100%;
 	}
@@ -115,4 +108,12 @@
 	::v-deep .el-calendar-table tr td:first-child{
 		border-left: none;
 	}
+	::v-deep .el-form-item__label {
+		color: var(--bGray);
+		font-weight: 700;
+	}
+	::v-deep table .el-input__wrapper{
+		background-color: transparent;
+		box-shadow: none;
+	}
 </style>

src/views/efficiencyMana/FuelInfoMana/index.vue

@@ -5,7 +5,7 @@
 				<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>
+						<el-image style="width: 45%;border-radius: 4px;" class="margin-lr-sm" :src="shipImg"></el-image>
 						<el-descriptions title="" :column="1">
 							<el-descriptions-item label="船名：">易站1号</el-descriptions-item>
 							<el-descriptions-item label="船舶编号：">49312567</el-descriptions-item>
@@ -20,7 +20,7 @@
 					<el-row>
 						<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
 							<div style="position: relative;">
-								<div class="sTitleSty" style="letter-spacing: 0;color: #000;font-size: 1rem;">{{oilsRepoData.name}}</div>
+								<div class="sTitleSty" style="letter-spacing: 0;font-size: 1rem;">{{oilsRepoData.name}}</div>
 								<bar-chart name="HostPressure" :data="oilsRepoData" height="calc(30vh - 76px)"/>
 							</div>
 						</el-col>
@@ -69,15 +69,15 @@
 							<div class="flex justify-end text-xs">
 								<div>
 									<el-button circle type="danger"><elIcon><Delete/></elIcon></el-button>
-									<span class="margin-left-xs">删除</span>
+									<span class="margin-left-xs text-black">删除</span>
 								</div>	
 								<div class="margin-lr">
 									<el-button circle type="success"><elIcon><DocumentChecked/></elIcon></el-button>
-									<span class="margin-left-xs">保存</span>
+									<span class="margin-left-xs text-black">保存</span>
 								</div>
 								<div>
 									<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
-									<span class="margin-left-xs">刷新</span>
+									<span class="margin-left-xs text-black">刷新</span>
 								</div>
 								<div class="margin-left">
 									<el-button round @click="handleAddRecord">
@@ -92,7 +92,7 @@
 				<el-table :data="upLogData" stripe style="width: 100%"
 					height="calc(70vh - 132px)"
 					:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
-					:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2' }">
+					:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 					<el-table-column label="id" width="80" align="center">
 						<template #default="scope">
 							<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
@@ -120,7 +120,7 @@
 	import FuelRecordDrawer from "@/components/FuelRecord";
 	import AnnularChart from "@/components/Echarts/annularChart";
 	import BarChart from "@/components/Echarts/BarChart";
-	import engImg from "@/assets/images/20240529135050.png";
+	import shipImg from "@/assets/images/shipImg.jpg";
 	const data = reactive({
 		refuelForm: {},
 		oilsRepoData: {
@@ -239,7 +239,7 @@
 			oilsType: "重油",
 			oilsMoney: "1539.4",
 			person: "王小虎"
-		}]
+		},{},{},{},{},{},{},{},{},{},{}]
 	});
 	const { upLogData, refuelForm, oilsTotal, oilsRepoData } = toRefs(data);
 	const formatVal = function(val){
@@ -251,19 +251,4 @@
 </script>
 
 <style scoped lang="scss">
-	::v-deep .el-descriptions__label:not(.is-bordered-label){
-		margin-right: 0;
-		font-weight: bold;
-	}
-	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
-		background-color: #a9cbe2;
-	}
-	::v-deep .el-progress-circle{
-		width: 12vh !important;
-		height: 12vh !important;
-	}
-	::v-deep .el-progress--circle .el-progress__text{
-		font-weight: bold;
-		font-size: 1.4rem !important;
-	}
 </style>

src/views/efficiencyMana/RegionalMana/index.vue

@@ -1,9 +1,9 @@
 <template>
 	<div>
 		<el-row :gutter="14">
-			<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24">
+			<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
 				<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 class="flex align-center justify-around text-bold text-center" style="height: calc(30vh - 80px);overflow: hidden;">
 						<div style="writing-mode: vertical-rl;" class="text-bold">ECA区域管理</div>
 						<div>
 							<div class="reportSty">
@@ -12,7 +12,7 @@
 							<div class="text-sm margin-top-sm">ECA区域总数</div>
 						</div>
 						<div>
-							<el-image style="height: calc(20vh - 60px);border-radius: 4px;" class="margin-lr-sm" :src="engImg"></el-image>
+							<el-image style="height: calc(20vh - 60px);border-radius: 4px;" class="margin-lr-sm" :src="shipImg"></el-image>
 							<div class="text-sm margin-top-sm">ECA区域总数</div>
 						</div>
 						<el-descriptions title="" :column="1">
@@ -41,18 +41,18 @@
 								<div class="flex justify-end text-xs">
 									<div>
 										<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
-										<span class="margin-left-xs">刷新</span>
+										<span class="margin-left-xs text-black">刷新</span>
 									</div>
 									<div class="margin-left" v-if="detailVis" @click="detailVis = false">
 										<el-button circle>
 											<svg-icon icon-class="back"/>
 										</el-button>
-										<span class="margin-left-xs">返回</span>
+										<span class="margin-left-xs text-black">返回</span>
 									</div>
 									<div class="margin-left">
 										<el-button round @click="handleAddRegional">
 											<elIcon><Plus/></elIcon>
-											<span class="text-xs">添加加油记录</span>
+											<span class="text-xs">添加ECA区域数据</span>
 										</el-button>
 									</div>
 								</div>
@@ -63,7 +63,7 @@
 						height="calc(70vh - 140px)"
 						 v-if="!detailVis"
 						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
-						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2' }">
+						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 						<el-table-column label="id" width="80" align="center">
 							<template #default="scope">
 								<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
@@ -74,7 +74,7 @@
 						<el-table-column align="center" label="ECA区域查看">
 							<template #default="scope">
 								<el-tooltip class="item" effect="dark" content="查看详情" placement="top">
-									<elIcon style="font-size: 1rem;" @click="handleDetail(scope.row)"><View class="pointer text-blue"/></elIcon>
+									<elIcon v-if="scope.row.row" style="font-size: 1rem;" @click="handleDetail(scope)"><View class="pointer text-blue"/></elIcon>
 								</el-tooltip>
 							</template>
 						</el-table-column>
@@ -84,7 +84,7 @@
 						height="calc(70vh - 140px)"
 						v-if="detailVis"
 						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
-						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2' }">
+						:header-cell-style="{ padding: '5px 0',height: '30px !important',backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 						<el-table-column label="id" width="80" align="center">
 							<template #default="scope">
 								<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
@@ -96,8 +96,10 @@
 					</el-table>
 				</div>
 			</el-col>
-			<el-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24">
-				<div style="height: calc(100vh - 133px);" class="bg-black radius"></div>
+			<el-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
+				<div style="height: calc(100vh - 133px);" class="bg-black radius">
+					<eca-map :data="regionForm"/>
+				</div>
 			</el-col>
 		</el-row>
 		<eca-regional-drawer ref="EcaRegionalDrawerRef"/>
@@ -107,10 +109,12 @@
 <script setup>
 	import { reactive } from "vue";
 	const { proxy } = getCurrentInstance();
-	import EcaRegionalDrawer from "@/components/EcaRegional"
-	import engImg from "@/assets/images/20240529135050.png";
+	import EcaRegionalDrawer from "@/components/EcaRegional";
+	import ecaMap from "@/components/Map/ECAMap/map";
+	import shipImg from "@/assets/images/shipImg.jpg";
 	const detailVis = ref(false);
 	const detailData = ref({});
+	const regionForm = ref({});
 	const data = reactive({
 		refuelForm: {},
 		upLogData: [{
@@ -124,7 +128,7 @@
 				oilName: "加油记录-2",
 				longitude: "113.23656",
 				latitude: "23.64589",
-			}]
+			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
 		},{
 			oilName: "加油记录-2",
 			count: 1,
@@ -132,7 +136,7 @@
 				oilName: "加油记录-2",
 				longitude: "113.23656",
 				latitude: "23.64589",
-			}]
+			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
 		},{
 			oilName: "加油记录-3",
 			count: 1,
@@ -140,7 +144,7 @@
 				oilName: "加油记录-2",
 				longitude: "113.23656",
 				latitude: "23.64589",
-			}]
+			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
 		},{
 			oilName: "加油记录-4",
 			count: 1,
@@ -148,13 +152,53 @@
 				oilName: "加油记录-2",
 				longitude: "113.23656",
 				latitude: "23.64589",
-			}]
-		}]
+			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
+		},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
+		
 	});
 	const { refuelForm, upLogData } = toRefs(data);
 	const handleDetail = function(_row){
-		detailData.value = _row;
+		detailData.value = _row.row;
 		detailVis.value = true;
+		let _obj = {};
+		if(_row["$index"] == 0){
+			_obj = {
+				"gpsInfo": {
+					"lon":[117.670323, 117.695141, 117.659597, 117.620267, 117.670323],
+					"lat":[38.831509, 38.800045, 38.785127, 38.808076, 38.831509],
+					"radius": 0,
+				},
+				"fence_type": 1
+			};
+		}else if(_row["$index"] == 1){
+			_obj = {
+				"gpsInfo": {
+					"lon":[117.628775],
+					"lat":[38.604317],
+					"radius": 1783.6604,
+				},
+				"fence_type": 0
+			};
+		}else if(_row["$index"] == 2){
+			_obj = {
+				"gpsInfo": {
+					"lon":[122.27364514766231, 122.38097317161841, 122.43951573013992, 122.34584763650551, 122.27104325617246, 122.27364514766231],
+					"lat":[30.482269795850222, 30.504385873513904, 30.419173927221483, 30.400310213920108, 30.417872981476563, 30.482269795850222],
+					"radius": 0,
+				},
+				"fence_type": 1
+			};
+		}else{
+			_obj = {
+				"gpsInfo": {
+					"lon":[121.75587804760742],
+					"lat":[30.200393084594726],
+					"radius": 2750.8393248556604,
+				},
+				"fence_type": 0
+			};
+		}
+		regionForm.value = _obj;
 	}
 	const handleAddRegional = function(){
 		proxy.$refs["EcaRegionalDrawerRef"].show()
@@ -162,11 +206,5 @@
 </script>
 
 <style scoped lang="scss">
-	::v-deep .el-descriptions__label:not(.is-bordered-label){
-		margin-right: 0;
-		font-weight: bold;
-	}
-	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
-		background-color: #a9cbe2;
-	}
+	
 </style>

src/views/efficiencyMana/VoyageMana/index.vue

@@ -12,7 +12,7 @@
 				</div>
 			</div>
 			<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 class="flex align-center justify-around text-bold text-center" style="height: calc(30vh - 80px);overflow: hidden;">
 					<div style="writing-mode: vertical-rl;" class="text-bold">航次管理</div>
 					<div>
 						<div class="reportSty">
@@ -35,7 +35,7 @@
 					<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
 						<div class="flex" style="height: calc(30vh - 80px);overflow: hidden;">
 							<div class="flex justify-center flex-direction align-center flex-twice">
-								<el-image style="width: 89%;border-radius: 4px;" :src="engImg"></el-image>
+								<el-image style="width: 89%;border-radius: 4px;" :src="shipImg"></el-image>
 								<div class="margin-top-xs text-sm text-bold">易站1号</div>
 							</div>
 							<div class="flex-treble text-sm text-bold flex justify-center flex-direction padding-lr-sm">
@@ -76,7 +76,7 @@
 	import WayPoint from "./waypoint";
 	import AnnularChart from "@/components/Echarts/annularChart";
 	import BarChart from "@/components/Echarts/BarChart";
-	import engImg from "@/assets/images/20240529135050.png";
+	import shipImg from "@/assets/images/shipImg.jpg";
 	const radioVal = ref("0");
 	const data = reactive({
 		refuelForm: {},
@@ -141,19 +141,4 @@
 			background-color: #7e96ff;
 		}
 	}
-	::v-deep .el-descriptions__label:not(.is-bordered-label){
-		margin-right: 0;
-		font-weight: bold;
-	}
-	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
-		background-color: #a9cbe2;
-	}
-	::v-deep .el-progress-circle{
-		width: 12vh !important;
-		height: 12vh !important;
-	}
-	::v-deep .el-progress--circle .el-progress__text{
-		font-weight: bold;
-		font-size: 1.4rem !important;
-	}
 </style>

src/views/efficiencyMana/VoyageMana/route/index.vue

@@ -17,7 +17,7 @@
 				<div class="flex justify-end text-xs">
 					<div>
 						<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
-						<span class="margin-left-xs">刷新</span>
+						<span class="margin-left-xs text-black">刷新</span>
 					</div>
 					<div class="margin-left">
 						<el-button round>
@@ -32,7 +32,7 @@
 	<el-table :data="routeData" stripe style="width: 100%"
 		height="calc(70vh - 140px)"
 		:cell-style="{ padding: '6px 0',fontSize: '0.75rem' }"
-		:header-cell-style="{ backgroundColor: '#a9cbe2' }">
+		:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 		<el-table-column label="id" width="80" align="center">
 			<template #default="scope">
 				<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
@@ -49,7 +49,7 @@
 		<el-table-column align="center" prop="person" label="航线查看">
 			<template #default="scope">
 				<el-tooltip class="item" effect="dark" content="航线查看" placement="top">
-					<elIcon style="font-size: 1rem;"><View class="pointer text-blue"/></elIcon>
+					<elIcon v-if="scope.row.oilName" style="font-size: 1rem;"><View class="pointer text-blue"/></elIcon>
 				</el-tooltip>
 			</template>
 		</el-table-column>
@@ -141,7 +141,7 @@
 			oilsType: "重油",
 			oilsMoney: "1539.4",
 			person: "王小虎"
-		}]
+		},{},{},{},{},{},{},{},{},{},{}]
 	});
 	const { routeData, routeForm } = toRefs(data);
 </script>

src/views/efficiencyMana/VoyageMana/waypoint/index.vue

@@ -17,15 +17,15 @@
 				<div class="flex justify-end text-xs">
 					<div>
 						<el-button circle type="danger"><elIcon><Delete/></elIcon></el-button>
-						<span class="margin-left-xs">删除</span>
+						<span class="margin-left-xs text-black">删除</span>
 					</div>	
 					<div class="margin-lr">
 						<el-button circle type="success"><elIcon><DocumentChecked/></elIcon></el-button>
-						<span class="margin-left-xs">保存</span>
+						<span class="margin-left-xs text-black">保存</span>
 					</div>
 					<div>
 						<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
-						<span class="margin-left-xs">刷新</span>
+						<span class="margin-left-xs text-black">刷新</span>
 					</div>
 					<div class="margin-left">
 						<el-button round>
@@ -40,7 +40,7 @@
 	<el-table :data="wayPointData" stripe style="width: 100%"
 		height="calc(70vh - 140px)"
 		:cell-style="{ padding: '6px 0',fontSize: '0.75rem' }"
-		:header-cell-style="{ backgroundColor: '#a9cbe2' }">
+		:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 		<el-table-column label="id" width="80" align="center">
 			<template #default="scope">
 				<span style="color: #0672fc;" class="text-bold text-sm">{{scope.$index}}</span>
@@ -143,7 +143,7 @@
 			oilsType: "重油",
 			oilsMoney: "1539.4",
 			person: "王小虎"
-		}]
+		},{},{},{},{},{},{},{},{},{},{}]
 	});
 	const { wayPointData, wayPointForm } = toRefs(data);
 </script>

src/views/efficiencyMana/index.vue

@@ -10,9 +10,9 @@
 		<div class="text-center text-sm">
 			<el-radio-group v-model="tabPosition" style="border-radius: 40px;overflow: hidden;">
 				<el-radio-button label="EnergyReport">能效报告管理</el-radio-button>
-				<el-radio-button style="border-left: 1px solid #2f516c;border-right: 1px solid #2f516c;" label="FuelInformation">燃料信息管理</el-radio-button>
+				<el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="FuelInformation">燃料信息管理</el-radio-button>
 				<el-radio-button label="AlarmMana">报警管理</el-radio-button>
-				<el-radio-button style="border-left: 1px solid #2f516c;border-right: 1px solid #2f516c;" label="VoyageMana">航次管理</el-radio-button>
+				<el-radio-button style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="VoyageMana">航次管理</el-radio-button>
 				<el-radio-button label="RegionalMana">ECA区域管理</el-radio-button>
 			</el-radio-group>
 		</div>
@@ -34,15 +34,26 @@
 
 <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;
 	}
+	::v-deep .el-descriptions__label:not(.is-bordered-label){
+		margin-right: 0;
+		font-weight: bold;
+		color: var(--bGray);
+	}
+	::v-deep .el-descriptions__body{
+		background-color: transparent;
+	}
+	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
+		background-color: #a9cbe2;
+	}
 </style>

src/views/homePage/index - 副本.vue

@@ -0,0 +1,336 @@
+<template>
+	<div class="padding">
+		<el-row :gutter="12">
+			<el-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div class="titleSty">轴功率仪</div>
+					<el-row :gutter="12" class="text-center">
+						<template v-for="(item,index) in shaftMeter" :key="index">
+							<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
+								<gaugeChart :name="item.name" :data="item" height="calc(29vh - 118px)"/>
+								<div class="titleSty text-ngreen">{{item.title}}</div>
+							</el-col>
+						</template>
+					</el-row>
+				</el-card>
+				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ padding: '10px !important' }">
+					<div class="grid col-4">
+						<div class="flex align-center" style="height: calc(51vh - 75px);position: relative;" 
+							v-for="(pitem,pndex) in typeData.oilsProg" :key="pndex">
+							<div class="shTitleSty">{{pitem.name}}</div>
+							<div style="margin-top:calc(46vh - 100px);" >
+								<div style="transform: rotate(-90deg);transform-origin: left center;margin-left: 20px;">
+									<el-progress 
+										:show-text="false" 
+										color="#c8753b" 
+										style="width: calc(46vh - 100px);" 
+										:stroke-width="12" 
+										:percentage="pitem.value"></el-progress>
+								</div>
+								<div class="text-xl text-ngreen">{{pitem.value}}{{pitem.unit}}</div>
+							</div>
+						</div>
+					</div>
+				</el-card>
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div class="grid col-2">
+						<div v-for="(item,index) in typeData.oilsForm" :key="index">
+							<div class="titleSty">{{ item.name }}</div>
+							<div style="height: calc(20vh - 87px);" class="flex align-center text-bold text-ngreen">
+								<svg-icon style="font-size: 2.2rem;" class="text-white margin-right-xs" :icon-class="item.icon"/>
+								<template v-for="(sitem,sindex) in getValue(item.value)" :key="sindex">
+									<span class="margin-right-xs txtSty">{{sitem}}</span>
+								</template>
+								<span>{{ item.unit }}</span>
+							</div>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
+				<!-- 航速航向 -->
+				<el-card class="box-card cardSty" :body-style="{ height: 'calc(14.5vh - 20px)',padding: '10px !important' }">
+					<div class="grid col-4 text-ngreen">
+						<div v-for="(aitem,andex) in aisForm" :key="andex">
+							<div class="titleSty">{{aitem.name}}：</div>
+							<div style="height: calc(14.5vh - 74px);line-height: calc(13.5vh - 74px);" class="text-center text-bold text-xl">
+								{{aitem.value}}{{aitem.unit}}
+							</div>
+						</div>
+					</div>
+				</el-card>
+				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ height: 'calc(70vh - 84px)',padding: '10px !important' }">
+					嗨咦
+				</el-card>
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div class="flex align-center" style="height: 100%;">
+						<div class="shTitleSty">碳排放</div>
+						<div class="flex justify-around" style="width: calc(100% - 30px);">
+							<div v-for="(citem,cndex) in coForm" :key="cndex">
+								<div class="titleSty">{{citem.name}}</div>
+								<div style="height: calc(15.5vh - 72px);line-height: calc(15.5vh - 72px);" 
+									class="text-center text-bold text-xl text-ngreen">
+									<svg-icon v-if="citem.icon" 
+										style="font-size: 2.2rem;vertical-align: middle;" 
+										class="text-white margin-right" :icon-class="citem.icon"/>
+									<span>{{citem.value}}{{citem.unit}}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :xl="5" :lg="5" :md="5" :sm="24" :xs="24">
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div class="grid col-2">
+						<div v-for="(witem,wndex) in windForm" :key="wndex">
+							<div class="titleSty text-ngreen">{{witem.name}}</div>
+							<div style="height: calc(14.5vh - 72px);line-height: calc(13.5vh - 72px);" class="text-center text-bold text-xl">
+								<div>
+									<svg-icon :icon-class="witem.icon" style="font-size: 2rem;vertical-align: middle;" class="margin-right-sm"></svg-icon>
+									<span>{{witem.value}} {{witem.unit}}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</el-card>
+				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ padding: '5px 10px !important' }">
+					<div style="height: calc(25vh - 30px);" class="flex align-center">
+						<div style="width: 20%;"><div class="shTitleSty">船舶吃水</div></div>
+						<div style="width: 80%;height: 100%;">
+							<div class="flex align-center text-center" style="height: 33.33%;" 
+								v-for="(dtem,dndex) in dritForm" :key="dndex">
+								<div class="text-bold text-xl text-ngreen flex-sub">
+									{{dtem.value1}}{{dtem.unit}}
+								</div>
+								<div class="flex-sub">
+									<svg-icon :icon-class="dtem.icon" style="font-size: 2.6rem;"></svg-icon>
+								</div>
+								<div class="flex-sub">
+									<span class="text-sm" v-if="isNaN(parseFloat(dtem.value2))">{{dtem.value2}}</span>
+									<span class="text-bold text-xl text-ngreen" v-else>{{dtem.value2}}{{dtem.unit}}</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</el-card>
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div style="height: calc(10.75vh - 22px);" class="flex align-center"
+						v-for="(htem,hndex) in tiltForm" :key="hndex">
+						<div style="width: 20%;"><div class="shTitleSty">{{htem.name}}</div></div>
+						<div class="flex align-center justify-around" style="width: 80%;">
+							<div class="text-bold text-xl text-ngreen">
+								{{htem.type == "left"?"-":"+"}}{{htem.value}}{{htem.unit}}
+							</div>
+							<div :style="{ transform: 'rotate('+(htem.type == 'left'?htem.value:'-'+htem.value)+'deg)','transform-origin': 'center' }">
+								<svg-icon :icon-class="htem.icon" style="font-size: 3.2rem;"></svg-icon>
+							</div>
+							<div class="text-bold text-xl text-ngreen">
+								{{htem.type == "left"?"+":"-"}}{{htem.value}}{{htem.unit}}
+							</div>
+						</div>
+					</div>
+				</el-card>
+				<el-card class="box-card cardSty margin-tb-sm" 
+					:body-style="{ height: 'calc(14.5vh - 22px)',padding: '10px !important' }">
+					<div class="flex flex-direction justify-around" style="height: 100%;">
+						<div class="text-ngreen text-bold"><span class="inblock" style="width: 30%;">纬度</span><span>33°05678E</span></div>
+						<div class="text-ngreen text-bold"><span class="inblock" style="width: 30%;">经度</span><span>113°56243N</span></div>
+					</div>
+				</el-card>
+				<el-card class="box-card cardSty" :body-style="{ height: 'calc(22.5vh - 48px)',padding: '10px !important' }">
+					<div class="text-ngreen text-bold">提示：</div>
+					<div class="flex justify-center align-center text-ngreen text-xxl" style="height:calc(100% - 40px);">
+						目前一切正常
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+	import { getManyShip } from "@/api/shipxy";
+	import gaugeChart from "@/components/Echarts/gaugeChart";
+	const typeData = computed(() => {
+		return {
+			oilsForm: 1 == 1?[{
+				name: "年度总燃料消耗量",
+				value: 25,
+				unit: "L",
+				icon: "jiayouzhan"
+			},{
+				name: "燃油航次消耗量",
+				value: 44,
+				unit: "L",
+				icon: "jiayouzhan_1"
+			}]:[{
+				name: "年度总电量消耗量",
+				value: 25,
+				unit: "kw",
+				icon: "electric"
+			},{
+				name: "电量航次消耗量",
+				value: 44,
+				unit: "kw",
+				icon: "electricfill"
+			}],
+			oilsProg: 1 == 1?[{
+				name: "燃油日消耗量",
+				value: 70,
+				unit: "t"
+			},{
+				name: "燃油小时消耗量",
+				value: 13,
+				unit: "t"
+			},{
+				name: "单位运输功燃油消耗量",
+				value: 84,
+				unit: "t"
+			},{
+				name: "单位航行距离燃油消耗量",
+				value: 25,
+				unit: "t"
+			}]:[{
+				name: "电量日消耗量",
+				value: 70,
+				unit: "kwh"
+			},{
+				name: "电量小时消耗量",
+				value: 13,
+				unit: "kwh"
+			},{
+				name: "单位运输功电量消耗量",
+				value: 84,
+				unit: "kwh"
+			},{
+				name: "单位航行距离电量消耗量",
+				value: 25,
+				unit: "kwh"
+			}]
+		}
+	});
+	const data = reactive({
+		windForm: [{
+			name: "风速",
+			value: 12.5,
+			unit: "m/s",
+			icon: "fengsu"
+		},{
+			name: "风向",
+			value: 31.6,
+			unit: "°",
+			icon: "fengsufengxiangyi"
+		}],
+		aisForm: [{
+			name: "航向",
+			value: 270,
+			unit: "°"
+		},{
+			name: "船艏向",
+			value: 270,
+			unit: "°"
+		},{
+			name: "航速",
+			value: 13,
+			unit: "Kn"
+		},{
+			name: "对水航速",
+			value: 13,
+			unit: "Kn"
+		}],
+		
+		coForm: [{
+			name: "单位航行距离CO2排放量",
+			value: 217,
+			unit: "t",
+			icon: "CO2nongdu"
+		},{
+			name: "单位运输功CO2排放量",
+			value: 27,
+			unit: "t"
+		},{
+			name: "EEOI",
+			value: 20,
+			unit: ""
+		},{
+			name: "CII",
+			value: 70,
+			unit: ""
+		}],
+		tiltForm: [{
+		 	name: "横倾",
+		 	value: 7,
+			type: "left",
+		 	unit: "°",
+			icon: "a-jizhuangxiangchuanxin"
+		},{
+		 	name: "纵倾",
+		 	value: 5,
+			type: "right",
+		 	unit: "°",
+			icon: "inclination"
+		}],
+		dritForm: [{
+		 	name: "",
+		 	value1: 10,
+			value2: 10,
+		 	unit: "M",
+			icon: "inclination"
+		},{
+		 	name: "纵倾",
+		 	value1: 8,
+			value2: 8,
+		 	unit: "M",
+			icon: "a-jizhuangxiangchuanxin"
+		},{
+		 	name: "纵倾",
+		 	value1: 27,
+			value2: "富余水深",
+		 	unit: "M",
+			icon: "draft"
+		}],
+		shaftMeter: [{
+			title: "轴转速",
+			name: "shaftSpeed",
+			value: 162,
+			min: 0,
+			max: 500,
+			unit: "KN*m"
+		},{
+			title: "轴功率",
+			name: "shaftPower",
+			value: 2062,
+			min: 0,
+			max: 5000,
+			unit: "Kw"
+		},{
+			title: "扭矩",
+			name: "torque",
+			value: 62,
+			min: 0,
+			max: 150,
+			unit: "r/min"
+		}]
+	});
+	const { aisForm, oilsForm, coForm, oilsProg, windForm, dritForm, tiltForm, shaftMeter } = toRefs(data);
+	const getValue = function(value){
+		return (value+"").split("")
+	}
+</script>
+
+<style scoped lang="scss">
+	
+	.shTitleSty{
+		font-size: 0.9rem;
+		font-weight: bold;
+		writing-mode: vertical-rl;
+		letter-spacing: 6px;
+	}
+	.txtSty{
+		font-size: 1.8rem;
+		padding: 2px 10px;
+		background-color: #000;
+		border: 1px solid var(--ngreen);
+	}
+</style>

src/views/homePage/index.vue

@@ -1,67 +1,46 @@
 <template>
-	<div class="padding">
-		<el-row :gutter="12">
+	<div class="padding-lg">
+		<el-row :gutter="20">
 			<el-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
-				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
-					<div class="titleSty">轴功率仪</div>
-					<el-row :gutter="12" class="text-center">
-						<template v-for="(item,index) in shaftMeter" :key="index">
-							<el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
-								<gaugeChart :name="item.name" :data="item" height="calc(29vh - 118px)"/>
-								<div class="titleSty text-ngreen">{{item.title}}</div>
-							</el-col>
-						</template>
-					</el-row>
-				</el-card>
-				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ padding: '10px !important' }">
-					<div class="grid col-4">
-						<div class="flex align-center" style="height: calc(51vh - 75px);position: relative;" 
-							v-for="(pitem,pndex) in typeData.oilsProg" :key="pndex">
-							<div class="shTitleSty">{{pitem.name}}</div>
-							<div style="margin-top:calc(46vh - 100px);" >
-								<div style="transform: rotate(-90deg);transform-origin: left center;margin-left: 20px;">
-									<el-progress 
-										:show-text="false" 
-										color="#c8753b" 
-										style="width: calc(46vh - 100px);" 
-										:stroke-width="12" 
-										:percentage="pitem.value"></el-progress>
-								</div>
-								<div class="text-xl text-ngreen">{{pitem.value}}{{pitem.unit}}</div>
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px 20px !important' }">
+					<div class="grid col-3">
+						<div v-for="(stem,sndex) in sailForm" :key="sndex">
+							<div class="titleSty">{{stem.name}}</div>
+							<div style="height: calc(14vh - 72px);line-height: calc(14vh - 72px);">
+								<span class="text-bold text-purple" style="font-size: 1.8rem;">{{stem.value}}</span> {{stem.unit}}
 							</div>
 						</div>
 					</div>
 				</el-card>
+				<el-card class="box-card cardSty margin-tb" :body-style="{ padding: '10px !important' }">
+					<div class="titleSty padding-left-sm">燃油日消耗量</div>
+					<line-chart name="dayFuelConsu" :data="dayFuelData" height="calc(23vh - 84px)"/>
+				</el-card>
 				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
-					<div class="grid col-2">
-						<div v-for="(item,index) in typeData.oilsForm" :key="index">
-							<div class="titleSty">{{ item.name }}</div>
-							<div style="height: calc(20vh - 87px);" class="flex align-center text-bold text-ngreen">
-								<svg-icon style="font-size: 2.2rem;" class="text-white margin-right-xs" :icon-class="item.icon"/>
-								<template v-for="(sitem,sindex) in getValue(item.value)" :key="sindex">
-									<span class="margin-right-xs txtSty">{{sitem}}</span>
-								</template>
-								<span>{{ item.unit }}</span>
-							</div>
-						</div>
-					</div>
+					<div class="titleSty padding-left-sm">燃油小时消耗量</div>
+					<line-chart name="hourFuelConsu" :data="hourFuelData" height="calc(23vh - 84px)"/>
+				</el-card>
+				<el-card class="box-card cardSty margin-top" :body-style="{ padding: '10px !important' }">
+					<bar-chart name="compFuel" :data="compFuelData" height="calc(40vh - 89px)"/>
 				</el-card>
 			</el-col>
 			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
 				<!-- 航速航向 -->
-				<el-card class="box-card cardSty" :body-style="{ height: 'calc(14.5vh - 20px)',padding: '10px !important' }">
-					<div class="grid col-4 text-ngreen">
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div class="grid col-4 text-purple">
 						<div v-for="(aitem,andex) in aisForm" :key="andex">
-							<div class="titleSty">{{aitem.name}}：</div>
-							<div style="height: calc(14.5vh - 74px);line-height: calc(13.5vh - 74px);" class="text-center text-bold text-xl">
+							<div class="titleSty">{{aitem.name}}</div>
+							<div style="height: calc(14vh - 72px);line-height: calc(14vh - 72px);font-size: 1.8rem;" class="text-center text-bold text-purple">
 								{{aitem.value}}{{aitem.unit}}
 							</div>
 						</div>
 					</div>
 				</el-card>
-				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ height: 'calc(70vh - 84px)',padding: '10px !important' }">
-					嗨咦
+				<!-- 地图 -->
+				<el-card class="box-card cardSty margin-tb" :body-style="{ height: 'calc(70.5vh - 96px)',padding: '0 !important' }">
+					<ship-map/>
 				</el-card>
+				<!-- 碳排放 -->
 				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 					<div class="flex align-center" style="height: 100%;">
 						<div class="shTitleSty">碳排放</div>
@@ -69,10 +48,7 @@
 							<div v-for="(citem,cndex) in coForm" :key="cndex">
 								<div class="titleSty">{{citem.name}}</div>
 								<div style="height: calc(15.5vh - 72px);line-height: calc(15.5vh - 72px);" 
-									class="text-center text-bold text-xl text-ngreen">
-									<svg-icon v-if="citem.icon" 
-										style="font-size: 2.2rem;vertical-align: middle;" 
-										class="text-white margin-right" :icon-class="citem.icon"/>
+									class="text-center text-bold text-xxl text-purple">
 									<span>{{citem.value}}{{citem.unit}}</span>
 								</div>
 							</div>
@@ -81,67 +57,92 @@
 				</el-card>
 			</el-col>
 			<el-col :xl="5" :lg="5" :md="5" :sm="24" :xs="24">
+				<!-- 消耗量 -->
 				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div class="grid col-2 text-center">
+						<div v-for="(otem,ondex) in oilsForm" :key="ondex">
+							<div class="titleSty">{{otem.name}}</div>
+							<div style="height: calc(14vh - 72px);line-height: calc(14vh - 72px);" class="text-bold text-xxl text-purple">
+								<span>{{otem.value}} {{otem.unit}}</span>
+							</div>
+						</div>
+					</div>
+				</el-card>
+				<!-- 风速、风向 -->
+				<el-card class="box-card cardSty margin-tb" :body-style="{ padding: '10px !important' }">
 					<div class="grid col-2">
 						<div v-for="(witem,wndex) in windForm" :key="wndex">
-							<div class="titleSty text-ngreen">{{witem.name}}</div>
-							<div style="height: calc(14.5vh - 72px);line-height: calc(13.5vh - 72px);" class="text-center text-bold text-xl">
+							<div class="titleSty">{{witem.name}}</div>
+							<div style="height: calc(14vh - 76px);line-height: calc(14vh - 72px);" class="text-center text-bold text-xl">
 								<div>
-									<svg-icon :icon-class="witem.icon" style="font-size: 2rem;vertical-align: middle;" class="margin-right-sm"></svg-icon>
-									<span>{{witem.value}} {{witem.unit}}</span>
+									<svg-icon :icon-class="witem.icon" style="font-size: 2.8rem;vertical-align: middle;" class="margin-right-sm text-purple"></svg-icon>
+									<span class="text-bold text-xxl">{{witem.value}}</span> 
+									<span>{{witem.unit}}</span>
 								</div>
 							</div>
 						</div>
 					</div>
 				</el-card>
-				<el-card class="box-card cardSty margin-tb-sm" :body-style="{ padding: '5px 10px !important' }">
-					<div style="height: calc(25vh - 30px);" class="flex align-center">
+				<!-- 船舶吃水 -->
+				<el-card class="box-card cardSty" :body-style="{ padding: '5px 10px !important' }">
+					<div style="height: calc(21vh - 52px);" class="flex align-center">
 						<div style="width: 20%;"><div class="shTitleSty">船舶吃水</div></div>
 						<div style="width: 80%;height: 100%;">
-							<div class="flex align-center text-center" style="height: 33.33%;" 
+							<div class="flex align-center text-center" style="height: 50%;" 
 								v-for="(dtem,dndex) in dritForm" :key="dndex">
-								<div class="text-bold text-xl text-ngreen flex-sub">
+								<div class="text-bold text-xxl text-purple flex-sub">
 									{{dtem.value1}}{{dtem.unit}}
 								</div>
 								<div class="flex-sub">
-									<svg-icon :icon-class="dtem.icon" style="font-size: 2.6rem;"></svg-icon>
+									<svg-icon :icon-class="dtem.icon" style="font-size: 2.8rem;"></svg-icon>
 								</div>
 								<div class="flex-sub">
-									<span class="text-sm" v-if="isNaN(parseFloat(dtem.value2))">{{dtem.value2}}</span>
-									<span class="text-bold text-xl text-ngreen" v-else>{{dtem.value2}}{{dtem.unit}}</span>
+									<span class="text-bold text-xxl text-purple">{{dtem.value2}}{{dtem.unit}}</span>
 								</div>
 							</div>
 						</div>
 					</div>
 				</el-card>
-				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
-					<div style="height: calc(10.75vh - 22px);" class="flex align-center"
+				<!-- 横倾、纵倾 -->
+				<el-card class="box-card cardSty margin-tb" :body-style="{ padding: '10px !important' }">
+					<div style="height: calc(10.5vh - 33px);" class="flex align-center"
 						v-for="(htem,hndex) in tiltForm" :key="hndex">
 						<div style="width: 20%;"><div class="shTitleSty">{{htem.name}}</div></div>
 						<div class="flex align-center justify-around" style="width: 80%;">
-							<div class="text-bold text-xl text-ngreen">
+							<div class="text-bold text-xxl text-purple">
 								{{htem.type == "left"?"-":"+"}}{{htem.value}}{{htem.unit}}
 							</div>
 							<div :style="{ transform: 'rotate('+(htem.type == 'left'?htem.value:'-'+htem.value)+'deg)','transform-origin': 'center' }">
-								<svg-icon :icon-class="htem.icon" style="font-size: 3.2rem;"></svg-icon>
+								<svg-icon :icon-class="htem.icon" style="font-size: 2.8rem;"></svg-icon>
 							</div>
-							<div class="text-bold text-xl text-ngreen">
+							<div class="text-bold text-xxl text-purple">
 								{{htem.type == "left"?"+":"-"}}{{htem.value}}{{htem.unit}}
 							</div>
 						</div>
 					</div>
 				</el-card>
-				<el-card class="box-card cardSty margin-tb-sm" 
-					:body-style="{ height: 'calc(14.5vh - 22px)',padding: '10px !important' }">
-					<div class="flex flex-direction justify-around" style="height: 100%;">
-						<div class="text-ngreen text-bold"><span class="inblock" style="width: 30%;">纬度</span><span>33°05678E</span></div>
-						<div class="text-ngreen text-bold"><span class="inblock" style="width: 30%;">经度</span><span>113°56243N</span></div>
+				<!-- 富余水深、状态 -->
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px 14px !important' }">
+					<div style="height: calc(10.5vh - 33px);" class="flex align-center text-center"
+						v-for="(wtem,hndex) in waterDepth" :key="hndex">
+						<div class="text-bold text-df flex-sub text-left">
+							{{wtem.name}}
+						</div>
+						<div class=" flex-sub">
+							<svg-icon :icon-class="wtem.icon" style="font-size: 2.8rem;"></svg-icon>
+						</div>
+						<div class="text-bold text-xl text-purple flex-sub">
+							<span class="text-xxl" v-if="isNaN(parseFloat(wtem.value))">{{wtem.value}}</span>
+							<span class="text-xxl" v-else>{{wtem.value}}{{wtem.unit}}</span>
+						</div>
 					</div>
 				</el-card>
-				<el-card class="box-card cardSty" :body-style="{ height: 'calc(22.5vh - 48px)',padding: '10px !important' }">
-					<div class="text-ngreen text-bold">提示：</div>
-					<div class="flex justify-center align-center text-ngreen text-xxl" style="height:calc(100% - 40px);">
-						目前一切正常
+				<!-- 经纬度 -->
+				<el-card class="box-card cardSty margin-top" 
+					:body-style="{ height: 'calc(9vh - 9px)',padding: '10px !important' }">
+					<div class="flex justify-around align-center text-bold text-bGray" style="height: 100%;">
+						<div><span>纬度</span><span class="text-purple text-xl margin-left">33°05678E</span></div>
+						<div><span>经度</span><span class="text-purple text-xl margin-left">113°56243N</span></div>
 					</div>
 				</el-card>
 			</el-col>
@@ -150,8 +151,9 @@
 </template>
 
 <script setup>
-	import { getManyShip } from "@/api/shipxy";
-	import gaugeChart from "@/components/Echarts/gaugeChart";
+	import lineChart from "@/components/Echarts/LineChart";
+	import BarChart from "@/components/Echarts/BarChart";
+	import shipMap from "@/components/Map/ShipList/index";
 	const typeData = computed(() => {
 		return {
 			oilsForm: 1 == 1?[{
@@ -211,6 +213,69 @@
 		}
 	});
 	const data = reactive({
+		sailForm: [{
+			name: "轴转速",
+			value: 270,
+			unit: "KN*m"
+		},{
+			name: "轴功率",
+			value: 25,
+			unit: "Kw"
+		},{
+			name: "扭矩",
+			value: 25,
+			unit: "r/min"
+		}],
+		dayFuelData: {
+			name: "",
+			xAxis: ["1", "2", "3", "4", "5", "6"],
+			data: [{
+				name: '燃油日消耗量',
+				type: 'line',
+				stack: 'Total',
+				unit: "L",
+				smooth: true,
+				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
+			}]
+		},
+		hourFuelData: {
+			name: "",
+			xAxis: ["09:00", "10:00", "11:00", "1200", "13:00", "14:00"],
+			data: [{
+				name: '燃油小时消耗量',
+				type: 'line',
+				stack: 'Total',
+				unit: "L",
+				smooth: true,
+				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
+			}]
+		},
+		compFuelData: {
+			name: "",
+			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
+			data: [{
+				name: '单位运输功燃油消耗量',
+				type: 'bar',
+				color: "#009dff",
+				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
+			},{
+				name: '单位航行距离燃油消耗量',
+				type: 'bar',
+				color: "#22e4ff",
+				data: [10, 14, 18, 19, 13, 10]
+			}],
+		},
+		oilsForm: [{
+			name: "燃油航次消耗量",
+			value: 44,
+			unit: "L",
+			icon: "jiayouzhan_1"
+		},{
+			name: "年度总燃料消耗量",
+			value: 25,
+			unit: "L",
+			icon: "jiayouzhan"
+		}],
 		windForm: [{
 			name: "风速",
 			value: 12.5,
@@ -243,8 +308,7 @@
 		coForm: [{
 			name: "单位航行距离CO2排放量",
 			value: 217,
-			unit: "t",
-			icon: "CO2nongdu"
+			unit: "t"
 		},{
 			name: "单位运输功CO2排放量",
 			value: 27,
@@ -263,7 +327,7 @@
 		 	value: 7,
 			type: "left",
 		 	unit: "°",
-			icon: "a-jizhuangxiangchuanxin"
+			icon: "hengqin"
 		},{
 		 	name: "纵倾",
 		 	value: 5,
@@ -278,17 +342,22 @@
 		 	unit: "M",
 			icon: "inclination"
 		},{
-		 	name: "纵倾",
+		 	name: "",
 		 	value1: 8,
 			value2: 8,
 		 	unit: "M",
-			icon: "a-jizhuangxiangchuanxin"
-		},{
-		 	name: "纵倾",
-		 	value1: 27,
-			value2: "富余水深",
+			icon: "hengqin"
+		}],
+		waterDepth: [{
+		 	name: "富余水深",
+		 	value: 27,
 		 	unit: "M",
-			icon: "draft"
+			icon: "lunchuan"
+		},{
+		 	name: "船舶状态",
+		 	value: "航行",
+		 	unit: "",
+			icon: "shipsaili"
 		}],
 		shaftMeter: [{
 			title: "轴转速",
@@ -313,7 +382,21 @@
 			unit: "r/min"
 		}]
 	});
-	const { aisForm, oilsForm, coForm, oilsProg, windForm, dritForm, tiltForm, shaftMeter } = toRefs(data);
+	const { 
+		aisForm, 
+		oilsForm, 
+		coForm, 
+		oilsProg, 
+		windForm, 
+		dritForm, 
+		tiltForm, 
+		shaftMeter, 
+		waterDepth, 
+		sailForm,
+		dayFuelData,
+		hourFuelData,
+		compFuelData
+	} = toRefs(data);
 	const getValue = function(value){
 		return (value+"").split("")
 	}
@@ -322,7 +405,7 @@
 <style scoped lang="scss">
 	
 	.shTitleSty{
-		font-size: 0.9rem;
+		font-size: 1rem;
 		font-weight: bold;
 		writing-mode: vertical-rl;
 		letter-spacing: 6px;

src/views/statusMonitor/AuxiliarySystem/index.vue

@@ -2,27 +2,47 @@
 	<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 class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div style="height: calc(100vh - 190px);" class="flex align-center justify-center">
+						<div style="position: relative;">
+							<div style="position: absolute;left: 29.3%;top: 40px;width: 35.6%;z-index: 111;">
+								<div class="text-bold text-bGray margin-bottom-sm">气缸切换：</div>
+								<div class="flex justify-around">
+									<div v-for="(items,indexs) in 6" :key="indexs" 
+										:class="tabActive == indexs?'active':''"
+										@click="tabActive = indexs"
+										class="text-center padding-tb-xs bg-blue radius pointer" style="width: 9%;">
+										{{indexs+1}}
+									</div>
+								</div>
+							</div>
+							<el-image style="width: 100%;" :src="auxiliaryImg"></el-image>
+							<div style="position: absolute;left: 50%;bottom:0;transform: translate(-50%, 0);">
+								功率：<span class="flex-sub text-purple text-bold text-xxl">321.2</span> KW
+							</div>
+						</div>
+					</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">
-					<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>
+					<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 cardSty" :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-treble">{{ stem.name }}：</div>
+										<div class="flex-sub text-purple text-bold text-xxl">{{ stem.value }}</div>
+										<div class="flex-sub text-center">{{ stem.unit }}</div>
+									</div>
+								</div>
+							</el-card>
+						</el-col>
+					</template>
 				</el-row>
 			</el-col>
 		</el-row>
@@ -32,16 +52,104 @@
 <script setup>
 	import { reactive } from "vue";
 	const { proxy } = getCurrentInstance();
+	import auxiliaryImg from "@/assets/images/auxiliary.png";
+	const tabActive = ref(0);
 	const data = reactive({
-		
+		dataForm: [[{
+			name: "排气",
+			height: "calc(35vh - 99px)",
+			data: [{
+				name: "123缸排气进涡轮增压器温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "456缸排气进涡轮增压器温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "涡轮增压器废气进口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "气缸排气温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "燃油系统",
+			height: "calc(21.6vh - 99px)",
+			data: [{
+				name: "燃油进机压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "燃油进机温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "滑油系统",
+			height: "calc(21.6vh - 99px)",
+			data: [{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "滑油进口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "冷却系统",
+			height: "calc(21.6vh - 99px)",
+			data: [{
+				name: "高温淡水进机压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "高温淡水进口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		}],[{
+			name: "轴承",
+			height: "calc(27vh - 99px)",
+			data: [{
+				name: "轴承温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "前轴承温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "后轴承温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		}]]
 	});
-	const {  } = toRefs(data);
+	const { dataForm } = toRefs(data);
 </script>
 
 
 <style scoped lang="scss">
-	.box-card{
-		border-radius: 16px;
-		box-shadow: 0 0 4px 1px #ccc;
+	.box-card+.box-card{
+		margin-top: 15px;
+	}
+	.active{
+		position: relative;
+		background-color: var(--purple);
+		&::after{
+			content: "";
+			position: absolute;
+			bottom: -26px;
+			left: 15%;
+			width: 70%;
+			border-top: 10px solid var(--purple);
+			border-right: 10px solid transparent;
+			border-left: 10px solid transparent;
+			border-bottom: 10px solid transparent;
+		}
 	}
 </style>

src/views/statusMonitor/BoilerSystem/index.vue

@@ -1,36 +1,24 @@
 <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>
+		<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+			<div style="height: calc(100vh - 189px);position: relative;" class="text-center text-black">
+				<div style="position: absolute;left: 0;top: 34%;width: 100%;z-index: 111;">
+					<div>组合锅炉燃油温度：<span class="flex-sub text-purple text-bold text-xxl">463.1</span> ℃</div>
+				</div>
+				<el-image style="height: 100%;" :src="boilerImg"></el-image>
+				<div style="position: absolute;left: 0;bottom: 17%;width: 100%;">
+					<div class="margin-bottom-sm">锅炉燃油压力：<span class="flex-sub text-purple text-bold text-xxl">121.2</span> Mpa</div>
+					<div>组合锅炉蒸汽压力：<span class="flex-sub text-purple text-bold text-xxl">23.01</span> Mpa</div>
+				</div>
+			</div>
+			<div class="titleSty text-xl text-center">锅炉结构图</div>
+		</el-card>
 	</div>
 </template>
 
 <script setup>
 	import { reactive } from "vue";
+	import boilerImg from "@/assets/images/boiler.png";
 	const { proxy } = getCurrentInstance();
 	const data = reactive({
 		

src/views/statusMonitor/PropulsionSystem/index.vue

@@ -2,25 +2,41 @@
 	<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>
+				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
+					<div style="height: calc(100vh - 190px);" class="flex align-center justify-center">
+						<div style="position: relative;">
+							<div style="position: absolute;left: 8.3%;top: -20px;width: 29.6%;z-index: 111;">
+								<div class="text-bold text-bGray margin-bottom-sm">气缸切换：</div>
+								<div class="flex justify-around">
+									<div v-for="(items,indexs) in 6" :key="indexs" 
+										:class="tabActive == indexs?'active':''"
+										@click="tabActive = indexs"
+										class="text-center padding-tb-xs bg-blue radius pointer" style="width: 11%;">
+										{{indexs+1}}
+									</div>
+								</div>
+							</div>
+							<div style="position: absolute;right: 0;bottom:44%;width: 62%;text-align: center;">
+								轴转速：<span class="flex-sub text-purple text-bold text-xxl">321.2</span> RPM
+							</div>
+							<el-image style="width: 100%;" :src="propulsionImg"></el-image>
+						</div>
 					</div>
-					<div class="titleSty text-xl text-center">图. 主机结构</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' }"
+							<el-card class="box-card cardSty" :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 text-purple text-bold text-xxl">{{ stem.value }}</div>
 										<div class="flex-sub">{{ stem.unit }}</div>
 									</div>
 								</div>
@@ -37,10 +53,11 @@
 	import { reactive } from "vue";
 	const { proxy } = getCurrentInstance();
 	import propulsionImg from "@/assets/images/propulsion.png";
+	const tabActive = ref(0);
 	const data = reactive({
 		dataForm: [[{
 			name: "涡轮增压器",
-			height: "calc(35vh - 99px)",
+			height: "calc(33vh - 99px)",
 			data: [{
 				name: "1号废气进口温度",
 				value: 123.2,
@@ -76,7 +93,7 @@
 			}]
 		},{
 			name: "主轴承",
-			height: "calc(19vh - 99px)",
+			height: "calc(20vh - 99px)",
 			data: [{
 				name: "滑油进口压力",
 				value: 123.2,
@@ -88,7 +105,7 @@
 			}]
 		},{
 			name: "燃油系统",
-			height: "calc(19vh - 99px)",
+			height: "calc(20vh - 99px)",
 			data: [{
 				name: "燃油进机压力",
 				value: 123.2,
@@ -100,7 +117,7 @@
 			}]
 		}],[{
 			name: "气缸",
-			height: "calc(35vh - 99px)",
+			height: "calc(33vh - 99px)",
 			data: [{
 				name: "缸套冷却水进机压力",
 				value: 123.2,
@@ -136,7 +153,7 @@
 			}]
 		},{
 			name: "推力轴承",
-			height: "calc(19vh - 99px)",
+			height: "calc(20vh - 99px)",
 			data: [{
 				name: "滑油进口压力",
 				value: 123.2,
@@ -148,7 +165,7 @@
 			}]
 		},{
 			name: "滑油系统",
-			height: "calc(19vh - 99px)",
+			height: "calc(20vh - 99px)",
 			data: [{
 				name: "滑油进口压力",
 				value: 123.2,
@@ -168,4 +185,19 @@
 	.box-card+.box-card{
 		margin-top: 15px;
 	}
+	.active{
+		position: relative;
+		background-color: var(--purple);
+		&::after{
+			content: "";
+			position: absolute;
+			bottom: -26px;
+			left: 15%;
+			width: 70%;
+			border-top: 10px solid var(--purple);
+			border-right: 10px solid transparent;
+			border-left: 10px solid transparent;
+			border-bottom: 10px solid transparent;
+		}
+	}
 </style>

src/views/statusMonitor/index.vue

@@ -8,7 +8,7 @@
 		<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 style="border-left: 1px solid #cbcbcb;border-right: 1px solid #cbcbcb;" label="auxiliarySystem">辅机系统</el-radio-button>
 				<el-radio-button label="boilerSystem">锅炉系统</el-radio-button>
 			</el-radio-group>
 		</div>
@@ -19,7 +19,7 @@
 	import PropulsionSystem from "./PropulsionSystem/index.vue";
 	import AuxiliarySystem from "./AuxiliarySystem/index.vue";
 	import BoilerSystem from "./BoilerSystem/index.vue";
-	const tabPosition = ref("propulsionSystem");
+	const tabPosition = ref("auxiliarySystem");
 	const data = reactive({
 		
 	});
@@ -28,13 +28,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;