改版了主机、锅炉

src/api/regionalMana/index.js

@@ -0,0 +1,153 @@
+import request from '@/utils/request'
+
+// 查询商品信息列表
+export function listRegionals(query) {
+	return new Promise((resolve, reject) => {
+		let response = [{
+			refuelId: 1356,
+			oilName: "广州猎德大桥",
+			mapRows: [{
+				oilName: "ECA点-1",
+				longitude: 117.670323,
+				latitude: 38.831509,
+			},{
+				oilName: "ECA点-2",
+				longitude: 117.695141,
+				latitude: 38.800045,
+			},{
+				oilName: "ECA点-3",
+				longitude: 117.659597,
+				latitude: 38.785127,
+			},{
+				oilName: "ECA点-4",
+				longitude: 117.620267,
+				latitude: 38.808076,
+			},{
+				oilName: "ECA点-5",
+				longitude: 117.670323,
+				latitude: 38.831509,
+			}]
+		},{
+			refuelId: 1236,
+			oilName: "广州海心沙大桥",
+			mapRows: [{
+				oilName: "ECA点-1",
+				longitude: 119.325,
+				latitude: 37.295833,
+			},{
+				oilName: "ECA点-2",
+				longitude: 119.416667,
+				latitude: 37.295833,
+			},{
+				oilName: "ECA点-3",
+				longitude: 119.313833,
+				latitude: 37.1945,
+			},{
+				oilName: "ECA点-4",
+				longitude: 119.234667,
+				latitude: 37.208333,
+			},{
+				oilName: "ECA点-5",
+				longitude: 119.325,
+				latitude: 37.295833,
+			}]
+		},{
+			refuelId: 2314,
+			oilName: "广州琶洲大桥",
+			mapRows: [{
+				"oilName": "ECA点-1",
+				"longitude": 113.63450425210995,
+				"latitude": 22.546098312607935
+			},
+			{
+				"oilName": "ECA点-2",
+				"longitude": 113.67801087579336,
+				"latitude": 22.545796187077745
+			},
+			{
+				"oilName": "ECA点-3",
+				"longitude": 113.67075977184614,
+				"latitude": 22.495945474596027
+			},
+			{
+				"oilName": "ECA点-4",
+				"longitude": 113.62725314816271,
+				"latitude": 22.496851851186605
+			}]
+		},{
+			refuelId: 3236,
+			oilName: "广州南沙大桥",
+			mapRows: [{
+				"oilName": "ECA点-1",
+				"longitude": 113.64362338337796,
+				"latitude": 22.64419740275247
+			},
+			{
+				"oilName": "ECA点-2",
+				"longitude": 113.65578254504979,
+				"latitude": 22.647985636619836
+			},
+			{
+				"oilName": "ECA点-3",
+				"longitude": 113.66586426201387,
+				"latitude": 22.63863725304392
+			},
+			{
+				"oilName": "ECA点-4",
+				"longitude": 113.66005963709516,
+				"latitude": 22.626905948164342
+			},
+			{
+				"oilName": "ECA点-5",
+				"longitude": 113.6471672596441,
+				"latitude": 22.62776135581181
+			},
+			{
+				"oilName": "ECA点-6",
+				"longitude": 113.63561911112161,
+				"latitude": 22.634665717537814
+			}]
+		}]
+		resolve(JSON.parse(JSON.stringify(response)));
+	})
+    // return request({
+    //     url: '/regional/list',
+    //     method: 'get',
+    //     params: query
+    // })
+}
+
+// 查询商品信息详细
+export function getRegionals(refuelId) {
+    return request({
+        url: '/regional/' + refuelId,
+        method: 'get'
+    })
+}
+
+// 新增商品信息
+export function addRegional(data) {
+    return request({
+        url: '/regional',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改商品信息
+export function updateRegional(data) {
+    return request({
+        url: '/regional',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除商品信息
+export function delRegional(refuelId) {
+    return request({
+        url: '/regional/' + refuelId,
+        method: 'delete'
+    })
+}
+

src/assets/icons/svg/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720579989151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9296" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M567.02 36.49H456.98v558.04h110.04V36.49z m199.11 136.23l-81.22 81.22c50.65 29.69 90.38 69.86 119.21 120.52 28.82 50.65 43.23 106.11 43.23 166.36 0 60.26-14.85 116.15-44.54 167.68-29.69 51.52-70.3 92.13-121.82 121.82-51.53 29.69-107.85 44.54-168.98 44.54-61.13 0-117.46-14.85-168.98-44.54-51.53-29.69-92.13-70.3-121.83-121.82-29.69-51.53-44.54-107.42-44.54-167.68 0-60.26 14.41-115.71 43.23-166.36s67.68-90.82 116.59-120.52l-78.6-81.22c-59.39 41.92-106.54 94.75-141.48 158.5C81.47 394.98 64 464.41 64 539.51c0 80.34 20.08 155.01 60.26 224S219.01 887.08 288 927.25c68.99 40.17 143.66 60.26 224 60.26s155.01-20.09 224-60.26c68.99-40.17 123.57-94.75 163.74-163.74 40.17-68.99 60.26-143.66 60.26-224 0-75.1-17.47-144.53-52.4-208.28s-82.09-116.59-141.47-158.51z" p-id="9297" fill="#ffffff"></path></svg>

src/components/AlarmSetting/index.vue

@@ -5,7 +5,6 @@
 			:before-close="handleClose" 
 			direction="rtl" 
 			class="demo-drawer"
-			modal-class="el-subscribe-drawer" 
 			size="50%">
 			<div class="margin-bottom-xs flex justify-between">
 				<el-button type="success" @click="handleNew">新增一行</el-button>

src/components/FuelRecord/drawer.vue

@@ -0,0 +1,25 @@
+<template>
+    <el-drawer v-model="open" :title="`添加加油记录`" :before-close="handleClose" direction="rtl" size="80%">
+		<Index @handleClance="handleClose" :closes="open"/>
+    </el-drawer>
+</template>
+
+
+<script setup>
+import Index from "./index.vue"
+const open = ref(false);
+
+const show = () => {
+    open.value = true;
+}
+
+const handleClose = () => {
+    open.value = false;
+}
+
+defineExpose({
+    show,
+    handleClose,
+});
+
+</script>

src/components/FuelRecord/index.vue

@@ -1,16 +1,10 @@
 <template>
-	<el-drawer v-model="open" 
-		:title="`添加加油记录`" 
-		:before-close="handleClose" 
-		direction="rtl" 
-		class="demo-drawer"
-		modal-class="el-subscribe-drawer" 
-		size="80%">
+	<div>
 		<div class="margin-bottom-xs flex justify-between">
 			<el-button type="success" @click="handleNew">新增一行</el-button>
 			<div>
-				<el-button plain @click="handleClose">取 消</el-button>
-				<el-button :disabled="disabled" type="primary" @click="submitForm">提 交</el-button>
+				<el-button plain @click="handleClance">取 消</el-button>
+				<el-button :disabled="!formRecord.tableData.length" type="primary" @click="submitForm">提 交</el-button>
 			</div>
 		</div>
 		<el-form ref="formRecordRefs" :rules="rules" :model="formRecord">
@@ -101,12 +95,20 @@
 				</el-table-column>
 			</el-table>
 		</el-form>
-	</el-drawer>
+	</div>
 </template>
 
 <script setup>
-	const open = ref(false);
+import { watch } from 'vue';
+	const emit = defineEmits(["handleClance"]);
 	const disabled = ref(true);
+	const props = defineProps({
+		closes: {
+			type: Boolean,
+			default: false
+		}
+	});
+	const { closes } = toRefs(props);
 	const data = reactive({
 		formRecord: {
 			tableData: []
@@ -174,19 +176,6 @@
 	})
 	
 	const { formRecord, rules, oilsTypeOptions } = toRefs(data);
-	// 显示弹框
-	function show() {
-		open.value = true;
-		formRecord.value.tableData = []
-	}
-	// 关闭按钮
-	function handleClose() {
-		formRecord.value = {
-			tableData: []
-		}
-		open.value = false;
-		// emit("close");
-	}
 	/** 提交按钮 */
 	function submitForm() {
 		proxy.$refs["formRecordRef"].validate(valid => {
@@ -212,10 +201,14 @@
 	function handleDel(index){
 		formRecord.value.tableData.splice(index, 1);
 	}
-	defineExpose({
-		show,
-		handleClose,
-	});
+	function handleClance(){
+		emit("handleClance");
+	}
+	watch(closes, (newValue) => {
+		if(newValue){
+			formRecord.value.tableData = [];
+		}
+	})
 </script>
 
 <style>

src/components/Map/ECAMap/map-1.vue

@@ -0,0 +1,122 @@
+<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: {
+				refuelId: undefined,
+				oilName: "",
+				mapRows: []
+			}
+		}
+	});
+	const { data, finishSta } = toRefs(props);
+	const map = ref(null);
+	let gpsInfos = {
+		"lon": [],
+		"lat": []
+	};
+	let 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(){
+		var plygon, Polygona = [];
+		let _obj = data.value;
+		if(_obj.length){
+			for(let i = 0;i<_obj.length;i++){
+				Polygona.push([_obj[i].longitude,_obj[i].latitude]);
+			}
+		}
+		var plygon = new Polygon([Polygona]);
+		map.value.getView().animate({
+			center: Polygona[0],
+			duration: 300,
+		});
+		var feature = new Feature({
+			geometry: (plygon)
+		});
+		source.addFeature(feature);
+		mapModify.setActive(true);
+	}
+	function addInterPolygon() {
+		mapPolygonDraw = new Draw({ 
+			source: source, 
+			type: "Polygon"//Polygon，Circle
+		}); 
+		map.value.addInteraction(mapPolygonDraw); 
+		mapPolygonDraw.on('drawend', function(e) {
+			mapPolygonDraw.setActive(false);
+			const geometry = e.feature.getGeometry();
+			getPiont(geometry);
+			mapModify.setActive(true);
+		})
+	};
+	function getPiont(_event){
+		let _obj = data.value;
+		const corrdinates = _event.flatCoordinates;
+		for(let i=0;i<corrdinates.length;i+=2){
+			_obj[i]["longitude"] = corrdinates[i];
+			_obj[i]["latitude"] = corrdinates[i+1];
+		}
+		// emit("gpsPoints", gpsInfos);
+	}
+	//选中修改几何图形
+	function selectModify(){
+		let mapSelect = new Select({
+			multi:false //取消多选
+		})
+		map.value.addInteraction(mapSelect);
+		mapModify = new Modify({
+			features: mapSelect.getFeatures()//将选中的要素添加修改功能
+		})
+		map.value.addInteraction(mapModify)
+		//监听要素修改时
+		mapModify.on("modifyend",function (evt) {
+			let newFeature = evt.features.item(0);
+			if(newFeature){
+				getPiont(newFeature["geometryChangeKey_"]["target"]);
+				// mapModify.setActive(false);//结束编辑
+			}
+		})
+	}
+	const handleMapReady = () => {
+		map.value = proxy.$refs["mapMap"].map;
+		if (source == null) {
+			source = new VectorSource({ wrapX: false }); 
+			vector.setSource(source);
+			map.value.addLayer(vector);
+			addInterPolygon();
+			selectModify();
+			mapModify.setActive(false);
+			mapPolygonDraw.setActive(false);
+		}
+	}
+	watch(data, (newValue) => {
+		source.clear();
+		showHysi();
+	}, { deep: true });
+</script>

src/components/Map/ECAMap/map.vue

@@ -10,15 +10,25 @@
 	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 { Polygon, Circle, LineString } from "ol/geom";
 	import { Feature } from "ol";
+	import { transform } from 'ol/proj';
+	import { getLength, getDistance } from 'ol/sphere';
 	const { proxy } = getCurrentInstance();
 	const props = defineProps({
 		data: {
 			type: Object,
 			default: {
-				fence_type: 1
+				group_name: "",
+				pid: 0,
+				type: "0",
+				fence_type: null,
+				add_userid: 1
 			}
+		},
+		finishSta: {
+			type: Boolean,
+			default: false
 		}
 	});
 	const { data, finishSta } = toRefs(props);
@@ -42,17 +52,86 @@
 			}) 
 		}) 
 	}); 
-	function showHysi(_obj){
+	function addInterCircle() {
+		mapCircleDraw = new Draw({ 
+			source: source, 
+			type: "Circle"
+		}); 
+		map.value.addInteraction(mapCircleDraw); 
+		mapCircleDraw.on('drawend', function(e) {
+			mapCircleDraw.setActive(false);
+			const geometry = e.feature.getGeometry();
+			getPiont(geometry);
+			mapModify.setActive(true);
+		})
+	}; 
+	function addInterPolygon() {
+		mapPolygonDraw = new Draw({ 
+			source: source, 
+			type: "Polygon"//Polygon，Circle
+		}); 
+		map.value.addInteraction(mapPolygonDraw); 
+		mapPolygonDraw.on('drawend', function(e) {
+			mapPolygonDraw.setActive(false);
+			const geometry = e.feature.getGeometry();
+			getPiont(geometry);
+			mapModify.setActive(true);
+		})
+	};
+	//选中修改几何图形
+	function selectModify(){
+		let mapSelect = new Select({
+			multi:false //取消多选
+		})
+		map.value.addInteraction(mapSelect);
+		mapModify = new Modify({
+			features: mapSelect.getFeatures()//将选中的要素添加修改功能
+		})
+		map.value.addInteraction(mapModify)
+		//监听要素修改时
+		mapModify.on("modifyend",function (evt) {
+			let newFeature = evt.features.item(0);
+			if(newFeature){
+				getPiont(newFeature["geometryChangeKey_"]["target"]);
+				// mapModify.setActive(false);//结束编辑
+			}
+		})
+	}
+	function getPiont(_event){
+		if(data.value.type == 1&&data.value.fence_type == 0){
+			const _lonlat = _event.getCenter();
+			const _radius = _event.getRadius()*103360;
+			gpsInfos = {
+				"lon": [_lonlat[0]],
+				"lat": [_lonlat[1]],
+				"radius": _radius
+			};
+		}else if(data.value.type == 1&&data.value.fence_type == 1){
+			const corrdinates = _event.flatCoordinates;
+			let _lon = [], _lat = [];
+			for(let i=0;i<corrdinates.length;i+=2){
+				let xy = [corrdinates[i],corrdinates[i+1]];
+				_lon.push(corrdinates[i]);
+				_lat.push(corrdinates[i+1]);
+			}
+			gpsInfos = {
+				"lon": _lon,
+				"lat": _lat,
+				"radius": 0
+			};
+		}
+		// console.log(gpsInfos)
+	}
+	function showHysi(_data){
 		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]]);
+		let _obj = _data.gpsInfo;
+		if(_obj.length){
+			for(let i = 0;i<_obj.length;i++){
+				Polygona.push([_obj[i].longitude, _obj[i].latitude]);
 			}
 		}
 		var plygon = new Polygon([Polygona]);
-		var circle = new Circle(Polygona[0], parseFloat(_obj.gpsInfo.radius)/103360);
+		var circle = new Circle(Polygona[0], 0/103360);
 		map.value.getView().animate({
 			center: Polygona[0],
 			duration: 300,
@@ -69,10 +148,41 @@
 			source = new VectorSource({ wrapX: false }); 
 			vector.setSource(source);
 			map.value.addLayer(vector);
+			addInterCircle(); 
+			addInterPolygon(); 
+			selectModify();
+			mapModify.setActive(false);
+			mapCircleDraw.setActive(false);
+			mapPolygonDraw.setActive(false);
+			// showHysi();
 		}
 	}
 	watch(data, (newValue) => {
-		source.clear();
-		showHysi(newValue);
+		if(newValue.operate != undefined&&!newValue.operate){
+			source.clear();
+			mapModify.setActive(false);
+			mapCircleDraw.setActive(false);
+			mapPolygonDraw.setActive(false);
+			if(newValue.type == 1&&newValue.fence_type != null){
+				if(newValue.fence_type == 0){
+					mapCircleDraw.setActive(true);
+				}else{
+					mapPolygonDraw.setActive(true);
+				}
+			}
+		}else if(newValue.gpsInfo != undefined){
+			showHysi(newValue);
+		}
 	}, { deep: true });
+	watch(finishSta, (newValue) => {
+		if(newValue){
+			emit("gpsPoints", gpsInfos);
+			gpsInfos = {
+				"lon": [],
+				"lat": [],
+				"radius": 0
+			};
+			mapModify.setActive(false);
+		}
+	});
 </script>

src/components/Map/ECAMap/mapdui.vue

@@ -0,0 +1,158 @@
+<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, LineString } from "ol/geom";
+	import { Feature } from "ol";
+	import { transform } from 'ol/proj';
+	import { getLength, getDistance } from 'ol/sphere';
+	const { proxy } = getCurrentInstance();
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: {
+				operateType: "edit",
+				mapRows: []
+			}
+		},
+		finishSta: {
+			type: Boolean,
+			default: false
+		}
+	});
+	const { data, finishSta } = toRefs(props);
+	const map = ref(null);
+	let gpsInfos = [];
+	let 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 addInterPolygon() {
+		mapPolygonDraw = new Draw({ 
+			source: source, 
+			type: "Polygon"//Polygon\
+		}); 
+		map.value.addInteraction(mapPolygonDraw); 
+		mapPolygonDraw.on('drawend', function(e) {
+			mapPolygonDraw.setActive(false);
+			const geometry = e.feature.getGeometry();
+			getPiont(geometry, "end");
+			mapModify.setActive(true);
+		})
+	};
+	//选中修改几何图形
+	function selectModify(){
+		let mapSelect = new Select({
+			multi:false //取消多选
+		})
+		map.value.addInteraction(mapSelect);
+		mapModify = new Modify({
+			features: mapSelect.getFeatures()//将选中的要素添加修改功能
+		})
+		map.value.addInteraction(mapModify)
+		//监听要素修改时
+		mapModify.on("modifyend",function (evt) {
+			let newFeature = evt.features.item(0);
+			if(newFeature){
+				getPiont(newFeature["geometryChangeKey_"]["target"]);
+				// mapModify.setActive(false);//结束编辑
+			}
+		})
+	}
+	// 获取绘制的经纬度点
+	function getPiont(_event){
+		const corrdinates = _event.flatCoordinates;
+		let _obj = JSON.parse(JSON.stringify(gpsInfos));
+		if(_obj.length == (parseInt(corrdinates.length)/2)){
+			for(let i=0;i<corrdinates.length;i+=2){
+				_obj[i/2]["longitude"] = corrdinates[i];
+				_obj[i/2]["latitude"] = corrdinates[i+1];
+			}
+		}else if(_obj.length < (parseInt(corrdinates.length)/2)){
+			for(let i=0;i<corrdinates.length;i+=2){
+				let _item = _obj.filter(item => (item.longitude == corrdinates[i]&&item.latitude == corrdinates[i+1]));
+				if(!_item.length){
+					_obj.splice(i/2, 0, {
+						oilName: "ECA点-"+(_obj.length + 1),
+						longitude: corrdinates[i],
+						latitude: corrdinates[i+1],
+					})
+				}
+			}
+		}
+		gpsInfos = _obj;
+		emit("gpsPoints", gpsInfos);
+	}
+	function showHysi(_obj){
+		var plygon, Polygona = [];
+		if(_obj.length){
+			for(let i = 0;i<_obj.length;i++){
+				Polygona.push([_obj[i].longitude, _obj[i].latitude]);
+			}
+		}
+		var plygon = new Polygon([Polygona]);
+		map.value.getView().animate({
+			center: Polygona[0],
+			duration: 300,
+		});
+		var feature = new Feature({
+			geometry: plygon
+		});
+		source.addFeature(feature);
+		// console.log(data.value)
+		if(data.value.operateType == "edit"){
+			mapModify.setActive(true);
+		}else{
+			mapModify.setActive(false);
+		}
+	}
+	// 地图初始化
+	const handleMapReady = () => {
+		map.value = proxy.$refs["mapMap"].map;
+		if (source == null) {
+			source = new VectorSource({ wrapX: false }); 
+			vector.setSource(source);
+			map.value.addLayer(vector);
+			addInterPolygon(); 
+			selectModify();
+			mapModify.setActive(false);
+			mapPolygonDraw.setActive(false);
+			// showHysi();
+		}
+	}
+	watch(data, (newValue) => {
+		source.clear();
+		if(newValue.mapRows&&newValue.mapRows.length){
+			gpsInfos = newValue.mapRows;
+			showHysi(newValue.mapRows);
+		}else if(newValue.operateType&&newValue.operateType == "add"){
+			mapModify.setActive(false);
+			mapPolygonDraw.setActive(true);
+		}
+	}, { deep: true });
+	watch(finishSta, (newValue) => {
+		if(newValue){
+			emit("gpsPoints", gpsInfos);
+			mapModify.setActive(false);
+		}
+	});
+</script>

src/components/TimeZone/index.vue

@@ -112,7 +112,12 @@
 </script>
 
 <style lang='scss' scoped>
-	::v-deep .el-form-item__label {
+	::v-deep .el-form-item__label,::v-deep .el-input__inner,::v-deep .el-select .el-input .el-select__caret {
 	  color: #fff;
 	}
+	::v-deep .el-input__wrapper{
+		border: 1px solid #fff;
+		box-shadow: none;
+		background-color: transparent;
+	}
 </style>

src/layout/components/Navbar.vue

@@ -32,7 +32,9 @@
 					</template>
 				</el-dropdown>
 			</div>
-			<elIcon class="margin-right-sm pointer"><SwitchButton/></elIcon>
+			<div class="margin-right-sm pointer">
+				<svg-icon icon-class="close"/>
+			</div>
 		</div>
 	</div>
 </template>

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,8 +3,8 @@
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
-          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+          <!-- <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/> -->
+          <template #title><span class="menu-title text-df text-bold" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
         </el-menu-item>
       </app-link>
     </template>

src/layout/components/Sidebar/index.vue

@@ -50,6 +50,6 @@ const activeMenu = computed(() => {
 </script>
 <style scoped lang="scss">
 	::v-deep .el-menu-item.is-active {
-		border-bottom: #fff solid 2px !important;
+		border-bottom: #fff solid 3px !important;
 	}
 </style>

src/main.js

@@ -42,6 +42,7 @@ import {
 
 import {
 	formatTime,
+	setBlankData
 } from "@/utils/index"
 
 // 分页组件
@@ -78,6 +79,7 @@ app.config.globalProperties.useDict = useDict
 app.config.globalProperties.download = download
 app.config.globalProperties.parseTime = parseTime
 app.config.globalProperties.formatTime = formatTime
+app.config.globalProperties.setBlankData = setBlankData
 app.config.globalProperties.resetForm = resetForm
 app.config.globalProperties.handleTree = handleTree
 app.config.globalProperties.addDateRange = addDateRange

src/router/index.js

@@ -68,7 +68,6 @@ export const constantRoutes = [
       name: 'Index',
       meta: {
         title: '首页',
-        icon: 'home',
         affix: true
       }
     }]
@@ -82,7 +81,6 @@ export const constantRoutes = [
 	    name: 'statusMonitor',
 	    meta: {
 	      title: '状态监测',
-	      icon: 'home',
 	      affix: true
 	    }
 	  }]
@@ -97,7 +95,6 @@ export const constantRoutes = [
       name: 'efficiencyAnalysis',
       meta: {
         title: '能效分析',
-        icon: 'home',
         affix: true
       }
     }]
@@ -112,7 +109,6 @@ export const constantRoutes = [
       name: 'efficiencyMana',
       meta: {
         title: '能效管理',
-        icon: 'home',
         affix: true
       }
     }]

src/utils/gpsToDu.js

@@ -0,0 +1,169 @@
+/** Created by postbird on 2016/4/1.  ...*/
+/**
+ *      @postbird
+ *      1、本插件采用js编写，可直接将函数复制到个人js文件，减少get请求数
+ *      2、author：powered by postbird
+ *      3、email： ptbird@yeah.net
+ *      4、site：http://www.ptbird.cn
+ * */
+/**
+ 文件说明：将gps的坐标转换成度形式的坐标方便计算 gpsToDu.js
+ 功能说明：
+        将str1 和 str2 形式的坐标转换成 str3形式  【 度分秒格式和度分格式 转换成 度格式 】
+             var str1="W 39°55′44″";//d-m-s  或者  str1="39°55′44″ W";
+             var str2="N 39°55.7333′";//d-m   或者  str2="39°55.7333′ E";
+             to:
+             var str3="39.9288888885"; // d
+ */
+/**
+ *  函数使用说明：
+ *      1、直接调用函数  gpsToDu(gpsStr);
+ *  返回说明： 返回结果数组
+ *      1 gpsDu[0] 表示方向 ，小写字母 s w e n
+ *      2 gpsDu[1] 表示计算的结果 ， 数字-19.8222222
+ * */
+/**
+ *  优点： 自动处理空格与其他无关字符，只处理表示方向、小数点、数字三种字符
+ *  缺点： 小数点必须为半角的小数点 .  不能是全角小数点
+ * */
+
+ // 注：1、将gps数据转换成小数点格式即度格式: W 39°55′44″->39.9288888885 或 39°55.7333 ' N ->39.9288888885
+ // 注： 2、其中： W S N E 分别表示经纬度方向 返回结果中 W S 将返回负值
+export function gpsToDu(gpsStr) {
+  var gpsStr = (gpsStr+'').toLowerCase();
+  gpsStr = gpsStr.replace(/\s+/g, "");
+  var tempStrArray = new Array();
+  var flag = 1;
+  var lastFlag = 0;
+  var strLength = gpsStr.length;
+  var gpsDu = new Array();
+  var gpsDir;
+  var tempcount = 0;
+  var tempString = "";
+  var tempPointFlag = 0;
+  if (gpsStr[0] == 'w' || gpsStr[0] == 's') {
+    flag = -1;
+    lastFlag = 0;
+    gpsDir = gpsStr[0];
+  } else if (gpsStr[strLength - 1] == 'w' || gpsStr[strLength - 1] == 's') {
+    flag = -1;
+    lastFlag = 1;
+    gpsDir = gpsStr[strLength - 1];
+  }
+  for (var i = 0; i <= strLength; i++) {
+    if (gpsStr[i] >= '0' && gpsStr[i] <= '9') {
+      tempString += gpsStr[i];
+      continue;
+    } else if (gpsStr[i] == '.') {
+      tempStrArray[tempcount] = tempString;
+      tempString = "";
+      tempcount++;
+      tempStrArray[tempcount] = '.';
+      tempPointFlag = 1;
+      tempcount++;
+    } else if (tempString.length > 0) {
+      tempStrArray[tempcount] = tempString;
+      tempString = "";
+      tempcount++;
+    }
+  }
+  if (tempPointFlag == 0) {
+    var num1 = parseInt(tempStrArray[0], 10);
+    var num2 = parseInt(tempStrArray[1], 10);
+    var num3 = parseInt(tempStrArray[2], 10);
+    console.log(num1 + '  ' + num2 / 60 + ' ' + num3 / (60 * 60));
+    gpsDu[1] = num1 + num2 / 60 + num3 / (60 * 60);
+    gpsDu[1] = gpsDu[1] * flag;
+    gpsDu[0] = gpsDir;
+  } else if (tempPointFlag == 1) {
+    var num1 = parseInt(tempStrArray[0], 10);
+    var num2 = parseFloat(tempStrArray[1] + '.' + tempStrArray[3], 10);
+    gpsDu[1] = num1 + num2 / 60;
+    gpsDu[1] = gpsDu[1] * flag;
+    gpsDu[0] = gpsDir;
+  }
+  return gpsDu;
+}
+
+// 注：1、将小数点格式即度格式转换成gps数据中的DMS格式: 39.9288888885->W 39°55′44″
+// 注： 2、其中： W S N E 分别表示经纬度方向
+export function duToGpsDMS(duStr, duDir) {
+  duStr = (duStr+'').toLowerCase();
+  duStr = duStr.replace(/\s+/g, "");
+  duDir = duDir.toUpperCase();
+  var strLength = duStr.length;
+  var tempString = "";
+  var tempStrArray = new Array();
+  var tempCount = 0;
+  var tempPointFlag = 0;
+  var gpsDMS;
+  for (var i = 0; i <= strLength; i++) {
+    if (duStr[i] >= '0' && duStr[i] <= '9') {
+      tempString += duStr[i];
+      continue;
+    } else if (duStr[i] == '.') {
+      tempStrArray[tempCount] = tempString;
+      tempString = "";
+      tempCount++;
+      tempStrArray[tempCount] = '.';
+      tempPointFlag = 1;
+      tempCount++;
+    } else if (tempString.length > 0) {
+      tempStrArray[tempCount] = tempString;
+      tempString = "";
+      tempCount++;
+    }
+  }
+  if (tempPointFlag == 1) {
+    var num1 = tempStrArray[0];
+    var num2 = parseFloat('0' + tempStrArray[1] + tempStrArray[2], 10) * 60;
+    var num3 = parseInt(parseFloat((num2 - parseInt(num2, 10)) * 60, 10), 10);
+    num2 = parseInt(num2, 10);
+    // console.log(tempStrArray);
+    // console.log(num1 + "   " + num2 + "   " + num3 + " ");
+    gpsDMS = duDir + " " + num1 + "°" + num2 + "′" + num3 + "″";
+    //gpsDMS=+num1+"°"+num2+"′"+num3+"″"+" "+duDir;
+    // console.log(gpsDMS);
+  }
+  return gpsDMS;
+}
+
+// 注：1、将小数点格式即度格式转换成gps数据中的DM格式: 39.9288888885->W 39°55.7333′
+// 注： 2、其中： W S N E 分别表示经纬度方向
+export function duToGpsDM(duStr, duDir) {
+  // console.log(duStr, duDir);
+  duStr = (duStr+'').toLowerCase();
+  duStr = duStr.replace(/\s+/g, "");
+  duDir = duDir.toUpperCase();
+  var strLength = duStr.length;
+  var tempString = "";
+  var tempStrArray = new Array();
+  var tempCount = 0;
+  var tempPointFlag = 0;
+  var gpsDM;
+  for (var i = 0; i <= strLength; i++) {
+    if (duStr[i] >= '0' && duStr[i] <= '9') {
+      tempString += duStr[i];
+      continue;
+    } else if (duStr[i] == '.') {
+      tempStrArray[tempCount] = tempString;
+      tempString = "";
+      tempCount++;
+      tempStrArray[tempCount] = '.';
+      tempPointFlag = 1;
+      tempCount++;
+    } else if (tempString.length > 0) {
+      tempStrArray[tempCount] = tempString;
+      tempString = "";
+      tempCount++;
+    }
+  }
+  if (tempPointFlag == 1) {
+    var num1 = tempStrArray[0];
+    var num2 = parseFloat('0' + tempStrArray[1] + tempStrArray[2], 10) * 60;
+    gpsDM = num1 + "°" + num2.toFixed(4)+" "+duDir;
+    //gpsDM=+num1+"°"+num2+"′"+" "+duDir;
+    // console.log(gpsDM);
+  }
+  return gpsDM;
+}

src/utils/index.js

@@ -5,16 +5,14 @@ import Store from '@/store'
 /**
  * 表格时间格式化
  */
-export function formatDate(cellValue) {
-  if (cellValue == null || cellValue == "") return "";
-  var date = new Date(cellValue)
-  var year = date.getFullYear()
-  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
-  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
-  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+export function setBlankData(data, max) {
+  let obj = data;
+  let tol = max - obj.length;
+  let arr = [];
+  for(let i=0;i<tol;i++){
+	  arr.push({ idn: (100+i) });
+  }
+  return obj.push(...arr);
 }
 
 /**

src/views/desktop/index.vue

@@ -7,7 +7,4 @@
 <script setup name="Index">
 import homePage from "@/views/homePage/index.vue";
 </script>
-{"imageTime":1717667579000,"updateDate":0,"msgType":"wsjjc","dealState":"N","faceImg":"","msgTypeCn":"玩手机监测","msgLevel":"1","channelAlias":"驾驶室内左","areaId":0,"videoUrl":"/data/YBX/out_image/2024-06-06/20240606175259_004_playphone.jpeg","areaName":"","cameraId":0,"imageUrl":"http://127.0.0.1:8170/faceImg/businessFile/20240606/wsjjc/20240606175259_004_playphone.jpeg","id":0,"taskId":0,"createDate":1717667579000}
-
-{"imageTime":1717615506000,"updateDate":0,"msgType":"wsjjc","dealState":"N","faceImg":"","msgTypeCn":"玩手机监测","msgLevel":"1","channelAlias":"货控室","areaId":0,"videoUrl":"/data/YBX/out_image/2024-06-06/20240606032506_001_playphone.jpeg","areaName":"","cameraId":0,"imageUrl":"http://127.0.0.1:8170/faceImg/businessFile/20240606/wsjjc/20240606032506_001_playphone.jpeg","id":0,"taskId":0,"createDate":1717615506000}
 

src/views/efficiencyAnalysis/contRast/index.vue

@@ -26,7 +26,8 @@
 			<el-card class="box-card cardSty text-sm" :body-style="{ padding: '10px !important' }">
 				<div class="flex">
 					<div style="width: 70%;">
-						<line-chart name="HostPressure" :data="oilsData" height="calc(32.66vh - 51px)"/>
+						<div class="text-bold">{{oilsData.title}}</div>
+						<line-chart name="HostPressure" :data="oilsData" height="calc(32.66vh - 73px)"/>
 					</div>
 					<div style="width: 30%;padding: 0 2%;">
 						<el-form ref="oilsFormRef" :model="oilsForm" label-width="0px">
@@ -97,10 +98,11 @@
 	const timeUnitOptions = ref([]);
 	const data = reactive({
 		oilsData: {
+			title: "燃油存量数据查询",
 			name: "",
 			xAxis: ["2024/5/1", "2024/5/2", "2024/5/3", "2024/5/4", "2024/5/5", "2024/5/6"],
 			data: [{
-				name: '进机温度',
+				name: '重油',
 				type: 'line',
 				stack: 'Total',
 				unit: "℃",
@@ -108,7 +110,7 @@
 				areaStyle: {},
 				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
 			},{
-				name: '出口温度',
+				name: '轻油',
 				type: 'line',
 				stack: 'Total',
 				smooth: true,

src/views/efficiencyAnalysis/distriBution/index.vue

@@ -92,7 +92,8 @@
 							<div>
 								<el-form v-if="index == 0" ref="voyageFormRef" class="flex justify-center" :model="voyageForm" label-width="100px">
 									<el-form-item style="margin-bottom: 0;" label="航次消耗对比：">
-										<el-select v-model="voyageForm.voyageId" placeholder="请选择" size="small" style="width: 100%;">
+										<el-select v-model="voyageForm.voyageId" placeholder="请选择" 
+											multiple collapse-tags size="small" style="width: 100%;">
 											<el-option
 											  v-for="item in voyageOptions"
 											  :key="item.value"
@@ -103,7 +104,7 @@
 									</el-form-item>
 								</el-form>
 								<el-form v-if="index == 1" ref="cotwoFormRef" class="flex justify-center" :model="cotwoForm" label-width="100px">
-									<el-form-item style="margin-bottom: 0;" label="查询方式：">
+									<el-form-item style="margin-bottom: 0;width: 40%;" label="查询方式：">
 										<el-select v-model="cotwoForm.cotwoId" placeholder="请选择" size="small" style="width: 100%;">
 											<el-option
 											  v-for="item in cotwoOptions"
@@ -113,8 +114,18 @@
 											</el-option>
 										</el-select>
 									</el-form-item>
-									<el-form-item label="时间：" style="margin-bottom: 0px;">
-										<div></div>
+									<el-form-item label="航次选择：" style="margin-bottom: 0px;width: 60%;" v-if="cotwoForm.cotwoId == 1">
+										<el-select v-model="voyageForm.voyageId" placeholder="请选择"
+											size="small" style="width: 100%;">
+											<el-option
+											  v-for="item in voyageOptions"
+											  :key="item.value"
+											  :label="item.label"
+											  :value="item.value">
+											</el-option>
+										</el-select>
+									</el-form-item>
+									<el-form-item label="时间：" style="margin-bottom: 0px;width: 60%;" v-else>
 										<el-date-picker
 										  v-model="cotwoForm.startEndTime"
 										  type="daterange"

src/views/efficiencyMana/AlarmMana/index.vue

@@ -13,8 +13,8 @@
 								</div>
 								<div class="text-sm">
 									<div v-for="(items,indexs) in tabEquipment" :key="indexs" 
-										class="margin-bottom" @click="handleChange(items.type)">
-										<el-button circle type="primary" :plain="equipmentType != items.type">
+										class="margin-bottom pointer" @click="handleChange(items.type)">
+										<el-button circle type="primary" :plain="!equipmentType[items.type]">
 											<svg-icon :icon-class="items.type"/>
 										</el-button>
 										<span class="margin-left-xs">{{ items.name }}</span>
@@ -43,8 +43,8 @@
 						<el-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
 							<div class="flex text-xs">
 								<div v-for="(item,index) in tabEquipment" :key="index" 
-									class="margin-right" @click="handleChange(item.type)">
-									<el-button circle type="primary" :plain="equipmentType != item.type">
+									class="margin-right pointer" @click="handleChange(item.type)">
+									<el-button circle type="primary" :plain="!equipmentType[item.type]">
 										<svg-icon :icon-class="item.type"/>
 									</el-button>
 									<span class="margin-left-xs text-black">{{ item.name }}</span>
@@ -82,10 +82,12 @@
 				<el-table :data="alarmLogData" stripe style="width: 100%"
 					height="calc(100vh - 190px)"
 					:cell-style="{ fontSize: '0.75rem' }"
+					@row-click="handleRowClick"
+					:row-class-name="rowClassName"
 					: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>
+							<span style="color: #0672fc;" :style="{ opacity: scope.row.deviceName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</span>
 						</template>
 					</el-table-column>
 					<el-table-column align="center" prop="deviceName" label="设备名称"></el-table-column>
@@ -106,7 +108,9 @@
 	import AlarmSetDrawer from "@/components/AlarmSetting"
 	import BarChart from "@/components/Echarts/BarChart";
 	import pieCircularChart from "@/components/Echarts/pieCircularChart";
-	const equipmentType = ref('engineRoom');
+	const clickedRowIndex = ref(null);
+	const alarmLogData = ref([]);
+	
 	const data = reactive({
 		tabEquipment: [{
 			name: "机舱",
@@ -118,6 +122,11 @@
 			name: "锅炉",
 			type: "boiler"
 		}],
+		equipmentType: {
+			"engineRoom": true,
+			"alternator": true,
+			"boiler": true
+		},
 		refuelForm: {},
 		alarmRepoData: {
 			name: "报警统计",
@@ -152,8 +161,26 @@
 				value: 30,
 				name: "锅炉"
 			}]
-		},
-		alarmLogData: [{
+		}
+	});
+	const { refuelForm, alarmProportion, alarmRepoData, tabEquipment, equipmentType } = toRefs(data);
+	const handleChange = function(val){
+		let _sta = equipmentType.value[val];
+		equipmentType.value[val] = _sta == undefined?true:!_sta;
+	}
+	const handleAddSet = function(){
+		proxy.$refs["AlarmSetDrawerRef"].show()
+	}
+	const handleRowClick = function(row, event, column) {
+		clickedRowIndex.value = alarmLogData.value.indexOf(row);
+	};
+	const rowClassName = function({rowIndex}) {
+		if (clickedRowIndex.value === rowIndex) {
+	        return 'highlight-row';
+		}
+	}
+	const getList = function(){
+		alarmLogData.value = [{
 			deviceName: "主机转速",
 			content: "主机转速过高",
 			alarmTime: "2024-06-20 15:35:36",
@@ -201,15 +228,10 @@
 			alarmTime: "2024-06-20 15:35:36",
 			alarmPosi: "",
 			alarmValue: "2999"
-		},{},{},{},{},{},{},{},{},{},{},{},{}]
-	});
-	const { alarmLogData, refuelForm, alarmProportion, alarmRepoData, tabEquipment } = toRefs(data);
-	const handleChange = function(val){
-		equipmentType.value = val;
-	}
-	const handleAddSet = function(){
-		proxy.$refs["AlarmSetDrawerRef"].show()
+		}];
+		proxy.setBlankData(alarmLogData.value, 21);
 	}
+	getList()
 </script>
 
 

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

@@ -8,6 +8,7 @@
 					<el-form ref="upLogFormRefs" :rules="rules" :model="upLogForm">
 						<el-table :data="upLogForm.upLogData" stripe style="width: 100%" 
 							height="calc(37vh - 65px)"
+							:highlight-current-row="true"
 							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
 							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 							<el-table-column prop="date" label="日期/时间线">
@@ -50,6 +51,7 @@
 					<el-form ref="equiFuelRefs" :rules="rules" :model="upLogForm">
 						<el-table :data="upLogForm.equiFuelData" stripe 
 							style="width: 100%" 
+							:highlight-current-row="true"
 							height="calc(32vh - 65px)"
 							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
 							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
@@ -116,6 +118,7 @@
 					<el-form ref="modifyRecordRefs" :rules="rules" :model="upLogForm">
 						<el-table :data="upLogForm.modifyRecordsData" stripe 
 							style="width: 100%" 
+							:highlight-current-row="true"
 							height="calc(26.66vh - 56px)"
 							:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
 							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
@@ -334,6 +337,14 @@
 		}
 	});
 	const { upLogForm, rules } = toRefs(data);
+	const handleRowClick = function(row, event, column) {
+		clickedRowIndex.value = alarmLogData.value.indexOf(row);
+	};
+	const rowClassName = function({rowIndex}) {
+		if (clickedRowIndex.value === rowIndex) {
+	        return 'highlight-row';
+		}
+	}
 </script>
 
 <style scoped lang="scss">

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

@@ -8,7 +8,7 @@
 					<el-form ref="eupLogRefs" :rules="rules" :model="increaseForm">
 						<el-table :data="increaseForm.eupLogData" stripe style="width: 100%" 
 							height="calc(75vh - 156px)"
-							@row-dblclick="changeEdit"
+							@cell-dblclick="changeEdit"
 							:highlight-current-row="true"
 							:cell-style="{ fontSize: '0.75rem' }"
 							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
@@ -58,6 +58,7 @@
 					<el-form ref="measuresRefs" :rules="rules" :model="increaseForm">
 						<el-table :data="increaseForm.measuresData" stripe style="width: 100%" 
 							height="calc(75vh - 156px)"
+							:highlight-current-row="true"
 							:cell-style="{ fontSize: '0.75rem' }"
 							:header-cell-style="{ backgroundColor: '#a9cbe2',color: '#4a4a4a' }">
 							<el-table-column prop="date" label="能效措施">
@@ -323,14 +324,19 @@
 	});
 	const { increaseForm, rules } = toRefs(data);
 	const changeEdit = function(row, column, event){
-		eupLogEdit.value[row.id] = true;
+		console.log(row, column, event)
+		// eupLogEdit.value[row.id] = true;
+	}
+	const handleRowClick = function(row, event, column) {
+		clickedRowIndex.value = alarmLogData.value.indexOf(row);
+	};
+	const rowClassName = function({rowIndex}) {
+		if (clickedRowIndex.value === rowIndex) {
+	        return 'highlight-row';
+		}
 	}
 </script>
 
 <style scoped lang="scss">
-	::v-deep .el-table--striped .el-table__body tr.el-table__row:hover,
-	::v-deep .el-table__body tr.current-row >td,
-	::v-deep .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell{
-		background-color: var(--greenShadow);
-	}
+	
 </style>

src/views/efficiencyMana/EnergyReport/index.vue

@@ -2,14 +2,14 @@
 	<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-row class="align-center">
 					<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="shipImg"></el-image>
+						<div class="flex justify-center align-center" style="height: calc(25vh - 72px);overflow: hidden;position: relative;">
+							<div style="letter-spacing:0;font-size: 1rem;" class="sTitleSty">船舶基础信息</div>
+							<el-image style="width:66%;border-radius: 4px;" :src="shipImg"></el-image>
 						</div>
 					</el-col>
-					<el-col :span="8" :xs="24" style="height: calc(25vh - 72px);">
+					<el-col :span="8" :xs="24">
 						<el-descriptions title="" :column="2">
 						    <el-descriptions-item label="船名：">易站1号</el-descriptions-item>
 							<el-descriptions-item label="船宽：">35米</el-descriptions-item>
@@ -21,7 +21,7 @@
 							<el-descriptions-item label="型深：">131米</el-descriptions-item>
 						</el-descriptions>
 					</el-col>
-					<el-col :span="9" :xs="24" style="height: calc(25vh - 72px);">
+					<el-col :span="9" :xs="24">
 						<el-descriptions title="" :column="2">
 						    <el-descriptions-item label="总吨：">31t</el-descriptions-item>
 							<el-descriptions-item label="船旗：">中国</el-descriptions-item>

src/views/efficiencyMana/FuelInfoMana/index.vue

@@ -48,6 +48,7 @@
 							<div class="flex">
 								<el-form-item label="" style="margin-bottom: 8px;">
 									<el-input
+										class="radiusInp"
 										placeholder="请输入名称"
 										v-model="refuelForm.oilName">
 										<template #suffix><elIcon><Search/></elIcon></template>
@@ -67,19 +68,19 @@
 						</el-col>
 						<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
 							<div class="flex justify-end text-xs">
-								<div>
-									<el-button circle type="danger"><elIcon><Delete/></elIcon></el-button>
+								<div @click="handleDel">
+									<el-button circle type="danger" :disabled="!itemRow.id"><elIcon><Delete/></elIcon></el-button>
 									<span class="margin-left-xs text-black">删除</span>
 								</div>	
-								<div class="margin-lr">
+								<!-- <div class="margin-lr">
 									<el-button circle type="success"><elIcon><DocumentChecked/></elIcon></el-button>
 									<span class="margin-left-xs text-black">保存</span>
-								</div>
-								<div>
+								</div> -->
+								<div class="margin-lr">
 									<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
 									<span class="margin-left-xs text-black">刷新</span>
 								</div>
-								<div class="margin-left">
+								<div>
 									<el-button round @click="handleAddRecord">
 										<elIcon><Plus/></elIcon>
 										<span class="text-xs">添加加油记录</span>
@@ -91,11 +92,13 @@
 				</el-form>
 				<el-table :data="upLogData" stripe style="width: 100%"
 					height="calc(70vh - 132px)"
+					@row-click="handleRowClick"
+					:row-class-name="rowClassName"
 					:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
 					: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>
+							<span style="color: #0672fc;" :style="{ opacity: scope.row.oilName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</span>
 						</template>
 					</el-table-column>
 					<el-table-column prop="oilName" label="名称"></el-table-column>
@@ -117,10 +120,13 @@
 <script setup>
 	import { reactive } from "vue";
 	const { proxy } = getCurrentInstance();
-	import FuelRecordDrawer from "@/components/FuelRecord";
+	import FuelRecordDrawer from "@/components/FuelRecord/drawer";
 	import AnnularChart from "@/components/Echarts/annularChart";
 	import BarChart from "@/components/Echarts/BarChart";
 	import shipImg from "@/assets/images/shipImg.jpg";
+	const clickedRowIndex = ref(null);
+	const itemRow = ref({});
+	const upLogData = ref([]);
 	const data = reactive({
 		refuelForm: {},
 		oilsRepoData: {
@@ -158,8 +164,39 @@
 			name: "lubricatOil",
 			value: 12.3,
 			unit: "L"
-		}],
-		upLogData: [{
+		}]
+	});
+	const { refuelForm, oilsTotal, oilsRepoData } = toRefs(data);
+	const formatVal = function(val){
+		return val
+	}
+	const handleAddRecord = function(){
+		proxy.$refs["FuelRecordDrawerRef"].show()
+	}
+	const handleRowClick = function(row, event, column) {
+		itemRow.value = JSON.parse(JSON.stringify(row));
+		clickedRowIndex.value = upLogData.value.indexOf(row);
+	};
+	const rowClassName = function({rowIndex}) {
+		if (clickedRowIndex.value === rowIndex) {
+	        return 'highlight-row';
+		}
+	}
+	const handleDel = function(){
+		if(itemRow.value.id){
+			proxy.$modal.confirm('是否确认"' + itemRow.value.oilName + '"的加油记录？').then(function () {
+				return true;
+			    // return delCertificate(certificateIds);
+			}).then(() => {
+			    // getList();
+			    proxy.$modal.msgSuccess("删除成功");
+			}).catch(() => { });
+		}
+		
+	}
+	const getList = function(){
+		upLogData.value = [{
+			id: 125,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -170,6 +207,7 @@
 			oilsMoney: "1539.4",
 			person: "王小虎"
 		},{
+			id: 3654,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -180,6 +218,7 @@
 			oilsMoney: "1539.4",
 			person: "王小虎"
 		},{
+			id: 356,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -190,6 +229,7 @@
 			oilsMoney: "1539.4",
 			person: "王小虎"
 		},{
+			id: 573,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -200,6 +240,7 @@
 			oilsMoney: "1539.4",
 			person: "王小虎"
 		},{
+			id: 451,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -210,6 +251,7 @@
 			oilsMoney: "1539.4",
 			person: "王小虎"
 		},{
+			id: 572,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -220,6 +262,7 @@
 			oilsMoney: "1539.4",
 			person: "王小虎"
 		},{
+			id: 231,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -230,6 +273,7 @@
 			oilsMoney: "1539.4",
 			person: "王小虎"
 		},{
+			id: 245,
 			oilName: "加油记录-1",
 			longitude: "113.23656",
 			latitude: "23.64589",
@@ -239,16 +283,12 @@
 			oilsType: "重油",
 			oilsMoney: "1539.4",
 			person: "王小虎"
-		},{},{},{},{},{},{},{},{},{},{}]
-	});
-	const { upLogData, refuelForm, oilsTotal, oilsRepoData } = toRefs(data);
-	const formatVal = function(val){
-		return val
-	}
-	const handleAddRecord = function(){
-		proxy.$refs["FuelRecordDrawerRef"].show()
+		}];
+		proxy.setBlankData(upLogData.value, 21);
 	}
+	getList();
 </script>
 
 <style scoped lang="scss">
+	
 </style>

src/views/efficiencyMana/RegionalMana/index.vue

@@ -30,6 +30,7 @@
 								<div class="flex">
 									<el-form-item label="" style="margin-bottom: 8px;">
 										<el-input
+											class="radiusInp"
 											placeholder="请输入名称"
 											v-model="refuelForm.oilName">
 											<template #suffix><elIcon><Search/></elIcon></template>
@@ -37,20 +38,32 @@
 									</el-form-item>
 								</div>
 							</el-col>
-							<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-								<div class="flex justify-end text-xs">
-									<div>
-										<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
-										<span class="margin-left-xs text-black">刷新</span>
+							<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24" class="text-xs">
+								<div class="flex justify-end" v-if="detailVis">
+									<div @click="detailVis = false">
+										<el-button type="success" circle>
+											<elIcon><DocumentChecked/></elIcon>
+										</el-button>
+										<span class="margin-left-xs text-black">保存</span>
 									</div>
-									<div class="margin-left" v-if="detailVis" @click="detailVis = false">
+									<div class="margin-left" @click="handleBack">
 										<el-button circle>
 											<svg-icon icon-class="back"/>
 										</el-button>
 										<span class="margin-left-xs text-black">返回</span>
 									</div>
-									<div class="margin-left">
-										<el-button round @click="handleAddRegional">
+								</div>
+								<div class="flex justify-end" v-else>
+									<div>
+										<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
+										<span class="margin-left-xs text-black">刷新</span>
+									</div>
+									<div @click="handleDel" class="margin-lr">
+										<el-button circle type="danger" :disabled="!detailData.refuelId"><elIcon><Delete/></elIcon></el-button>
+										<span class="margin-left-xs text-black">删除</span>
+									</div>	
+									<div>
+										<el-button round @click="handleAddRegional" v-if="!detailVis">
 											<elIcon><Plus/></elIcon>
 											<span class="text-xs">添加ECA区域数据</span>
 										</el-button>
@@ -59,150 +72,202 @@
 							</el-col>
 						</el-row>
 					</el-form>
-					<el-table :data="upLogData" stripe style="width: 100%"
+					<el-table :data="refuelRecoData" stripe style="width: 100%"
 						height="calc(70vh - 140px)"
-						 v-if="!detailVis"
+						@row-click="handleRowClick"
+						:row-class-name="rowClassName"
+						v-if="!detailVis"
 						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
 						: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>
+								<span style="color: #0672fc;" :style="{ opacity: scope.row.oilName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</span>
 							</template>
 						</el-table-column>
 						<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
-						<el-table-column align="center" prop="count" label="ECA区域点数"></el-table-column>
+						<el-table-column align="center" prop="count" label="ECA区域点数">
+							<template #default="scope">
+								<span v-if="scope.row.mapRows">{{ scope.row.mapRows?scope.row.mapRows.length:0 }}</span>
+							</template>
+						</el-table-column>
 						<el-table-column align="center" label="ECA区域查看">
 							<template #default="scope">
-								<el-tooltip class="item" effect="dark" content="查看详情" placement="top">
-									<elIcon v-if="scope.row.row" style="font-size: 1rem;" @click="handleDetail(scope)"><View class="pointer text-blue"/></elIcon>
+								<el-tooltip class="item" effect="dark" content="查看详情" placement="top" v-if="scope.row.mapRows">
+									<elIcon style="font-size: 1rem;" @click="handleDetail(scope.row)"><View class="pointer text-blue"/></elIcon>
 								</el-tooltip>
 							</template>
 						</el-table-column>
-						
 					</el-table>
-					<el-table :data="detailData.row" stripe style="width: 100%"
+					<el-table :data="detailData.mapRows" stripe style="width: 100%"
 						height="calc(70vh - 140px)"
+						:highlight-current-row="true"
 						v-if="detailVis"
 						:cell-style="{ padding: '3px 0',fontSize: '0.75rem' }"
 						: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>
+								<span :style="{ opacity: scope.row.oilName?1:0 }" style="color: #0672fc;" class="text-bold text-sm">{{scope.$index+1}}</span>
 							</template>
 						</el-table-column>
 						<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
-						<el-table-column align="center" prop="longitude" label="经度"></el-table-column>
-						<el-table-column align="center" prop="latitude" label="纬度"></el-table-column>
+						<el-table-column align="center" prop="longitude" label="经度">
+							<template #default="scope">
+								{{duToGpsDMS(scope.row.longitude, 'E')}}
+							</template>
+						</el-table-column>
+						<el-table-column align="center" prop="latitude" label="纬度">
+							<template #default="scope">
+								{{duToGpsDMS(scope.row.latitude, 'N')}}
+							</template>
+						</el-table-column>
+						<el-table-column align="center" label="操作" width="60">
+							<template #default="scope">
+								<elIcon style="font-size: 1rem;" @click="delMapRow(scope.row)"><Delete class="pointer text-red"/></elIcon>
+							</template>
+						</el-table-column>
 					</el-table>
 				</div>
 			</el-col>
 			<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"/>
+					<eca-map :data="regionForm" :finishSta="finishSta" @gpsPoints="handleFinish"/>
 				</div>
 			</el-col>
 		</el-row>
-		<eca-regional-drawer ref="EcaRegionalDrawerRef"/>
+		<el-dialog
+		  title="添加ECA区域数据"
+		  v-model="dialogVisible"
+		  width="30%">
+			<el-form :model="detailData" :rules="rules">
+				<el-form-item label="区域名称" prop="oilName">
+					<el-input v-model="detailData.oilName" autocomplete="off"></el-input>
+				</el-form-item>
+		    </el-form>
+		    <div slot="footer" class="dialog-footer text-right">
+				<el-button @click="dialogVisible = false">取 消</el-button>
+				<el-button type="primary" @click="handleConfim">确 定</el-button>
+		    </div>
+		</el-dialog>
+		<!-- <eca-regional-drawer ref="EcaRegionalDrawerRef"/> -->
 	</div>
 </template>
 
 <script setup>
 	import { reactive } from "vue";
+	import { listRegionals, getRegionals, addRegional, updateRegional, delRegional } from "@/api/regionalMana";
+	import { duToGpsDMS } from "@/utils/gpsToDu";
 	const { proxy } = getCurrentInstance();
-	import EcaRegionalDrawer from "@/components/EcaRegional";
-	import ecaMap from "@/components/Map/ECAMap/map";
+	// import EcaRegionalDrawer from "@/components/EcaRegional";
+	import ecaMap from "@/components/Map/ECAMap/mapdui";
 	import shipImg from "@/assets/images/shipImg.jpg";
 	const detailVis = ref(false);
 	const detailData = ref({});
+	const finishSta = ref(false);
+	const dialogVisible = ref(false);
 	const regionForm = ref({});
+	const refuelRecoData = ref([]);
+	const clickedRowIndex = ref(null);
+	const operateType = ref("edit");
 	const data = reactive({
-		refuelForm: {},
-		upLogData: [{
-			oilName: "加油记录-1",
-			count: 2,
-			row: [{
-				oilName: "加油记录-1",
-				longitude: "113.23656",
-				latitude: "23.64589",
-			},{
-				oilName: "加油记录-2",
-				longitude: "113.23656",
-				latitude: "23.64589",
-			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
-		},{
-			oilName: "加油记录-2",
-			count: 1,
-			row: [{
-				oilName: "加油记录-2",
-				longitude: "113.23656",
-				latitude: "23.64589",
-			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
-		},{
-			oilName: "加油记录-3",
-			count: 1,
-			row: [{
-				oilName: "加油记录-2",
-				longitude: "113.23656",
-				latitude: "23.64589",
-			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
-		},{
-			oilName: "加油记录-4",
-			count: 1,
-			row: [{
-				oilName: "加油记录-2",
-				longitude: "113.23656",
-				latitude: "23.64589",
-			},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
-		},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
+		rules: {
+			oilName: [{
+				required: true,
+				message: "请输入区域名称",
+				trigger: "blur"
+			}]
+		},
+		refuelForm: {}
 		
 	});
-	const { refuelForm, upLogData } = toRefs(data);
+	const { refuelForm, rules } = toRefs(data);
+	// 查看区域数据
 	const handleDetail = function(_row){
-		detailData.value = _row.row;
+		hasReset();
+		detailData.value = JSON.parse(JSON.stringify(_row));
+		regionForm.value  = {
+			operateType: (detailData.value.mapRows.length?"edit":"add"),
+			mapRows: detailData.value.mapRows
+		};
+		clickedRowIndex.value = refuelRecoData.value.indexOf(_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
+	}
+	// 初始化数据
+	const hasReset = function(){
+		detailData.value = {
+			refuelId: undefined,
+			oilName: "",
+			mapRows: []
+		};
+		regionForm.value  = {};
+	}
+	// 新增区域
+	const handleAddRegional = function(){
+		hasReset();
+		dialogVisible.value = true;
+		// proxy.$refs["EcaRegionalDrawerRef"].show()
+	}
+	function handleFinish(ev){
+		console.log(ev)
+		detailData.value.mapRows = ev;
+	}
+	// 新增、编辑区域确定按钮
+	function handleConfim(){
+		let _obj = refuelRecoData.value;
+		_obj.push({
+			refuelId: parseInt(Math.random()*1000),
+			oilName: detailData.value.oilName,
+			mapRows: []
+		});
+		refuelRecoData.value = _obj;
+		dialogVisible.value = false;
+		// handleRowClick()
+	}
+	// 单击表格
+	const handleRowClick = function(row, event, column) {
+		if(event){
+			detailData.value = JSON.parse(JSON.stringify(row));
+			regionForm.value  = {
+				operateType: "see",
+				mapRows: detailData.value.mapRows
 			};
+			clickedRowIndex.value = refuelRecoData.value.indexOf(row);
+		}
+	};
+	// 单击表格选择样式添加
+	const rowClassName = function({rowIndex}) {
+		if (clickedRowIndex.value === rowIndex) {
+	        return 'highlight-row';
 		}
-		regionForm.value = _obj;
 	}
-	const handleAddRegional = function(){
-		proxy.$refs["EcaRegionalDrawerRef"].show()
+	// 删除整个区域数据
+	const handleDel = function(){
+		if(detailData.value.refuelId){
+			proxy.$modal.confirm('是否确认"' + detailData.value.oilName + '"的ECA区域信息？').then(function () {
+				detailData.value = {};
+				return true;
+			    // return delCertificate(certificateIds);
+			}).then(() => {
+			    // getList();
+			    proxy.$modal.msgSuccess("删除成功");
+			}).catch(() => { });
+		}
+	}
+	// 删除单个经纬度
+	const delMapRow = function(row){
+		
+	}
+	// 返回
+	const handleBack =  function(row){
+		detailVis.value = false;
+		regionForm.value.operateType = "see";
+	}
+	const getRecodList = function(){
+		listRegionals().then(resopnes =>{
+			refuelRecoData.value = resopnes;
+			proxy.setBlankData(refuelRecoData.value, 21);
+		})
 	}
+	getRecodList();
 </script>
 
 <style scoped lang="scss">

src/views/efficiencyMana/VoyageMana/index.vue

@@ -1,24 +1,29 @@
 <template>
 	<el-row :gutter="15">
 		<el-col :xl="7" :lg="7" :md="7" :sm="24" :xs="24" style="position: relative;padding-left: 90px;">
-			<div style="position: absolute;left: 6px;bottom: 0;">
-				<div class="tabBtn" :class="radioVal == 0?'active':''" @click="radioVal = 0">
-					<svg-icon icon-class="route"/>
-					<div>航线</div>
+			<div style="position: absolute;left: 6px;bottom: 0;height: 100%;">
+				<div style="height: 50%;" class="flex align-end">
+					<div class="tabBtn" :class="radioVal == 0?'active':''" @click="radioVal = 0">
+						<svg-icon icon-class="route"/>
+						<div>航线</div>
+					</div>
 				</div>
-				<div class="tabBtn margin-top" :class="radioVal == 1?'active':''" @click="radioVal = 1">
-					<svg-icon icon-class="routePoints"/>
-					<div>航路点</div>
+				<div style="height: 50%;" class="flex align-end">
+					<div class="tabBtn" :class="radioVal == 1?'active':''" @click="radioVal = 1">
+						<svg-icon icon-class="routePoints"/>
+						<div>航路点</div>
+					</div>
 				</div>
 			</div>
 			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
-				<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 class="flex align-center justify-around" 
+					style="height: calc(30vh - 88px);overflow: hidden;position: relative;padding-left: 10%;">
+					<div style="letter-spacing:0;font-size: 1rem;" class="sTitleSty">航次管理</div>
 					<div>
 						<div class="reportSty">
 							<div><span>9</span></div>
 						</div>
-						<div class="text-sm margin-top-sm">航路点总数</div>
+						<div class="text-sm margin-top-sm text-bold  text-center">{{radioVal == 0?'航线':'航路点'}}总数</div>
 					</div>
 					<el-descriptions title="" :column="1">
 						<el-descriptions-item label="船名：">易站1号</el-descriptions-item>
@@ -33,7 +38,7 @@
 			<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
 				<el-row>
 					<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
-						<div class="flex" style="height: calc(30vh - 80px);overflow: hidden;">
+						<div class="flex" style="height: calc(30vh - 88px);overflow: hidden;">
 							<div class="flex justify-center flex-direction align-center flex-twice">
 								<el-image style="width: 89%;border-radius: 4px;" :src="shipImg"></el-image>
 								<div class="margin-top-xs text-sm text-bold">易站1号</div>
@@ -122,18 +127,19 @@
 
 <style scoped lang="scss">
 	.tabBtn{
-		width: 50px;
+		width: 46px;
+		height: fit-content;
 		padding: 15px 0;
 		color: #7e96ff;
 		cursor: pointer;
-		font-size: 0.7rem;
+		font-size: 0.6rem;
 		text-align: center;
-		border-radius: 16px;
+		border-radius: 13px;
 		border: 1px solid #7e96ff;
 		background-color: #fff;
 		.svg-icon{
-			font-size: 1.5rem;
-			margin-bottom: 2px;
+			font-size: 1.2rem;
+			margin-bottom: 10px;
 		}
 		&.active{
 			color: #fff;

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

@@ -5,21 +5,26 @@
 				<div class="flex">
 					<el-form-item label="" style="margin-bottom: 8px;">
 						<el-input
+							class="radiusInp"
 							placeholder="请输入名称"
 							v-model="routeForm.oilName">
 							<template #suffix><elIcon><Search/></elIcon></template>
 						</el-input>
 					</el-form-item>
-					<el-button class="margin-left-sm" type="primary">查询</el-button>
+					<!-- <el-button class="margin-left-sm" type="primary">查询</el-button> -->
 				</div>
 			</el-col>
 			<el-col :span="12" :xs="24">
 				<div class="flex justify-end text-xs">
 					<div>
+						<el-button circle type="danger"><elIcon><Delete/></elIcon></el-button>
+						<span class="margin-left-xs text-black">删除</span>
+					</div>	
+					<div class="margin-lr">
 						<el-button circle><elIcon><RefreshRight/></elIcon></el-button>
 						<span class="margin-left-xs text-black">刷新</span>
 					</div>
-					<div class="margin-left">
+					<div>
 						<el-button round>
 							<elIcon><Plus/></elIcon>
 							<span class="text-xs">添加航线数据</span>
@@ -30,12 +35,13 @@
 		</el-row>
 	</el-form>
 	<el-table :data="routeData" stripe style="width: 100%"
-		height="calc(70vh - 140px)"
+		height="calc(70vh - 132px)"
+		:highlight-current-row="true"
 		:cell-style="{ padding: '6px 0',fontSize: '0.75rem' }"
 		: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>
+				<span style="color: #0672fc;" :style="{ opacity: scope.row.oilName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</span>
 			</template>
 		</el-table-column>
 		<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
@@ -58,6 +64,7 @@
 </template>
 
 <script setup>
+	const { proxy } = getCurrentInstance();
 	import { reactive } from "vue";
 	const data = reactive({
 		routeForm: {},
@@ -141,9 +148,18 @@
 			oilsType: "重油",
 			oilsMoney: "1539.4",
 			person: "王小虎"
-		},{},{},{},{},{},{},{},{},{},{}]
+		}]
 	});
 	const { routeData, routeForm } = toRefs(data);
+	proxy.setBlankData(routeData.value, 18);
+	const handleRowClick = function(row, event, column) {
+		clickedRowIndex.value = alarmLogData.value.indexOf(row);
+	};
+	const rowClassName = function({rowIndex}) {
+		if (clickedRowIndex.value === rowIndex) {
+	        return 'highlight-row';
+		}
+	}
 </script>
 
 <style scoped lang="scss">

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

@@ -5,12 +5,13 @@
 				<div class="flex">
 					<el-form-item label="" style="margin-bottom: 8px;">
 						<el-input
+							class="radiusInp"
 							placeholder="请输入名称"
 							v-model="wayPointForm.oilName">
 							<template #suffix><elIcon><Search/></elIcon></template>
 						</el-input>
 					</el-form-item>
-					<el-button class="margin-left-sm" type="primary">查询</el-button>
+					<!-- <el-button class="margin-left-sm" type="primary">查询</el-button> -->
 				</div>
 			</el-col>
 			<el-col :span="12" :xs="24">
@@ -38,12 +39,13 @@
 		</el-row>
 	</el-form>
 	<el-table :data="wayPointData" stripe style="width: 100%"
-		height="calc(70vh - 140px)"
+		height="calc(70vh - 132px)"
+		:highlight-current-row="true"
 		:cell-style="{ padding: '6px 0',fontSize: '0.75rem' }"
 		: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>
+				<span style="color: #0672fc;" :style="{ opacity: scope.row.oilName?1:0 }" class="text-bold text-sm">{{scope.$index+1}}</span>
 			</template>
 		</el-table-column>
 		<el-table-column align="center" prop="oilName" label="名称"></el-table-column>
@@ -60,6 +62,7 @@
 </template>
 
 <script setup>
+	const { proxy } = getCurrentInstance();
 	import { reactive } from "vue";
 	const data = reactive({
 		wayPointForm: {},
@@ -143,9 +146,18 @@
 			oilsType: "重油",
 			oilsMoney: "1539.4",
 			person: "王小虎"
-		},{},{},{},{},{},{},{},{},{},{}]
+		}]
 	});
 	const { wayPointData, wayPointForm } = toRefs(data);
+	proxy.setBlankData(wayPointData.value, 18);
+	const handleRowClick = function(row, event, column) {
+		clickedRowIndex.value = alarmLogData.value.indexOf(row);
+	};
+	const rowClassName = function({rowIndex}) {
+		if (clickedRowIndex.value === rowIndex) {
+	        return 'highlight-row';
+		}
+	}
 </script>
 
 <style scoped lang="scss">

src/views/efficiencyMana/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="text-white padding-tb padding-lr-lg">
+	<div class="text-white padding-tb padding-lr-xl">
 		<div class="margin-bottom">
 			<energy-report v-if="tabPosition == 'EnergyReport'"/>
 			<fuel-info-mana v-if="tabPosition == 'FuelInformation'"/>
@@ -25,7 +25,7 @@
 	import RegionalMana from "./RegionalMana/index.vue";
 	import VoyageMana from "./VoyageMana/index.vue";
 	import AlarmMana from "./AlarmMana/index.vue";
-	const tabPosition = ref("EnergyReport");
+	const tabPosition = ref("RegionalMana");
 	const data = reactive({
 		
 	});
@@ -56,4 +56,18 @@
 	::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
 		background-color: #a9cbe2;
 	}
+	::v-deep .radiusInp .el-input__wrapper{
+		border-radius: 16px;
+	}
+	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+		background-color: var(--greenShadow);
+	}
+	::v-deep .el-table .highlight-row, ::v-deep .el-table__body tr.el-table__row--striped.highlight-row td.el-table__cell{
+		background: var(--greenShadow) !important;
+	}
+	// ::v-deep .el-table--striped .el-table__body tr.el-table__row:hover,
+	// ::v-deep .el-table__body tr.current-row >td,
+	// ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell{
+	// 	background-color: var(--greenShadow);
+	// }
 </style>

src/views/homePage/index.vue

@@ -5,7 +5,7 @@
 				<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 class="titleSty" style="line-height: 36px;">{{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>
@@ -62,7 +62,7 @@
 				<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 class="titleSty" style="line-height: 36px;">{{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>
@@ -77,7 +77,7 @@
 							<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: 2.8rem;vertical-align: middle;" class="margin-right-sm text-purple"></svg-icon>
-									<span class="text-bold text-xxl">{{witem.value}}</span> 
+									<span class="text-bold text-xxl text-purple">{{witem.value}}</span> 
 									<span>{{witem.unit}}</span>
 								</div>
 							</div>

src/views/statusMonitor/BoilerSystem/index.vue

@@ -1,17 +1,20 @@
 <template>
 	<div>
 		<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>
+			<div class="flex justify-center text-black" style="height: calc(100vh - 157px);">
 				<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>
+				<el-card style="margin-top: 7%;max-height: 180px;">
+					<template #header>
+						<span class="text-bold text-bGray">锅炉</span>
+					</template>
+					<div class="text-sm text-bGray">
+						<div>锅炉燃油温度：<span class="text-purple text-bold text-xxl margin-left">463.1</span> ℃</div>
+						<div class="margin-tb-sm">锅炉燃油压力：<span class="text-purple text-bold text-xxl margin-left">121.2</span> Mpa</div>
+						<div>锅炉蒸汽压力：<span class="text-purple text-bold text-xxl margin-left">23.01</span> Mpa</div>
+					</div>
+				</el-card>
 			</div>
-			<div class="titleSty text-xl text-center">锅炉结构图</div>
+			<!-- <div class="titleSty text-xl text-center">锅炉结构图</div> -->
 		</el-card>
 	</div>
 </template>

src/views/statusMonitor/PropulsionSystem/index - 副本.vue

@@ -0,0 +1,203 @@
+<template>
+	<div>
+		<el-row :gutter="14">
+			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
+				<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>
+				</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 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-purple text-bold text-xxl">{{ stem.value }}</div>
+										<div class="flex-sub">{{ stem.unit }}</div>
+									</div>
+								</div>
+							</el-card>
+						</el-col>
+					</template>
+				</el-row>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+	import { reactive } from "vue";
+	const { proxy } = getCurrentInstance();
+	import propulsionImg from "@/assets/images/propulsion.png";
+	const tabActive = ref(0);
+	const data = reactive({
+		dataForm: [[{
+			name: "涡轮增压器",
+			height: "calc(33vh - 99px)",
+			data: [{
+				name: "1号废气进口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "1号废气出口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "2号废气进口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "2号废气出口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "活塞",
+			height: "calc(27vh - 99px)",
+			data: [{
+				name: "活塞冷却油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "活塞冷却油进口压力",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "活塞冷却油出口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "主轴承",
+			height: "calc(20vh - 99px)",
+			data: [{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "滑油进口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "燃油系统",
+			height: "calc(20vh - 99px)",
+			data: [{
+				name: "燃油进机压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "燃油进机压力",
+				value: 123.2,
+				unit: "℃"
+			}]
+		}],[{
+			name: "气缸",
+			height: "calc(33vh - 99px)",
+			data: [{
+				name: "缸套冷却水进机压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "缸套冷却水进机温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "气缸冷却水出口温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "气缸排气温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "扫气",
+			height: "calc(27vh - 99px)",
+			data: [{
+				name: "主机扫气压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "2号扫气箱温度",
+				value: 123.2,
+				unit: "℃"
+			},{
+				name: "主机扫气箱温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "推力轴承",
+			height: "calc(20vh - 99px)",
+			data: [{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "滑油进口温度",
+				value: 123.2,
+				unit: "℃"
+			}]
+		},{
+			name: "滑油系统",
+			height: "calc(20vh - 99px)",
+			data: [{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "Mpa"
+			},{
+				name: "滑油进口压力",
+				value: 123.2,
+				unit: "℃"
+			}]
+		}]]
+	});
+	const { dataForm } = toRefs(data);
+</script>
+
+
+<style scoped lang="scss">
+	.box-card+.box-card{
+		margin-top: 15px;
+	}
+	.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/PropulsionSystem/index.vue

@@ -1,51 +1,69 @@
 <template>
-	<div>
-		<el-row :gutter="14">
-			<el-col :xl="13" :lg="13" :md="13" :sm="24" :xs="24">
-				<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 class="flex justify-center align-center">
+		<!-- <el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }"> -->
+			<div class="flex align-center" style="height: calc(100vh - 135px);width: 66%;position: relative;">
+				<el-image style="width: 100%;" class="margin-top-xl" :src="propulsionImg"></el-image>
+				<div style="position: absolute;top: 0;left: 0;width: 100%;" class="flex">
+					<el-card :body-style="{ padding: '10px !important' }">
+						<template #header>
+							<span class="text-bold text-bGray">燃油系统</span>
+						</template>
+						<div class="text-sm text-bGray">
+							<div>进机压力：<span class="text-purple text-bold text-xl margin-left">463.1</span> Mpa</div>
+							<div class="margin-top-sm">进机温度：<span class="text-purple text-bold text-xl margin-left">121.2</span> ℃</div>
+						</div>
+					</el-card>
+					<el-card style="margin-left: calc(4% + 20px)" :body-style="{ padding: '10px !important' }">
+						<template #header>
+							<span class="text-bold text-bGray">滑油系统</span>
+						</template>
+						<div class="text-sm text-bGray">
+							<div>进机压力：<span class="text-purple text-bold text-xl margin-left">463.1</span> Mpa</div>
+							<div class="margin-top-sm">进机温度：<span class="text-purple text-bold text-xl margin-left">121.2</span> ℃</div>
+						</div>
+					</el-card>
+				</div>
+				<div class="flex" :style="btem.style" v-for="(btem, bndex) in realData.dataBear" :key="bndex">
+					<el-card :body-style="{ padding: '10px !important' }">
+						<template #header>
+							<span class="text-bold text-bGray">{{ btem.name }}</span>
+						</template>
+						<div class="text-sm text-bGray">
+							<div :class="bsndex>0?'margin-top-sm':''" v-for="(bstem,bsndex) in btem.data" :key="bsndex">
+								{{ bstem.name }}：
+								<span class="text-purple text-bold text-xl margin-left">{{ bstem.value }}</span> 
+								{{ bstem.unit }}
+							</div>
+						</div>
+					</el-card>
+				</div>
+				<div class="text-sm text-black" v-for="(ctem,cndex) in realData.dataCool" :key="cndex"
+					:style="ctem.style">
+					<div class="flex text-bold" :class="rndex>0?'margin-top-xs':''" v-for="(rtem,rndex) in ctem.rows" :key="rndex">
+						<el-tooltip class="item" effect="dark" :content="rtem.name" placement="top">
+							<div class="ellipsis">{{rtem.name}}：</div>
+						</el-tooltip>
+						<div class="text-center flex justify-between" style="width: 61%;">
+							<div class="bg-blue radius" style="padding: 3px 0;width: 13%;" v-for="(stem,sndex) in rtem.data" :key="sndex">
+								{{stem.value}}
 							</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>
+					</div>
+				</div>
+				<div class="text-sm text-black" style="position: absolute;left: -6.5%;bottom:29.5%;width: 48%;">
+					<div class="flex text-bold" :class="index>0?'margin-top-sm':''" v-for="(item,index) in realData.dataPiston" :key="index">
+						<el-tooltip class="item" effect="dark" :content="item.name" placement="top">
+							<div class="ellipsis">{{item.name}}：</div>
+						</el-tooltip>
+						<div class="text-center flex justify-between" style="width: 61%;">
+							<div class="bg-blue radius" style="padding: 3px 0;width: 13%;" v-for="(ditem,dindex) in item.data" :key="dindex">
+								{{ditem.value}}
 							</div>
-							<el-image style="width: 100%;" :src="propulsionImg"></el-image>
 						</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">
-					<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-twice">{{ stem.name }}：</div>
-										<div class="flex-sub text-purple text-bold text-xxl">{{ stem.value }}</div>
-										<div class="flex-sub">{{ stem.unit }}</div>
-									</div>
-								</div>
-							</el-card>
-						</el-col>
-					</template>
-				</el-row>
-			</el-col>
-		</el-row>
+				</div>
+			</div>
+		<!-- </el-card> -->
 	</div>
 </template>
 
@@ -53,151 +71,292 @@
 	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(33vh - 99px)",
-			data: [{
-				name: "1号废气进口温度",
-				value: 123.2,
-				unit: "℃"
-			},{
-				name: "1号废气出口温度",
-				value: 123.2,
-				unit: "℃"
-			},{
-				name: "2号废气进口温度",
-				value: 123.2,
-				unit: "℃"
-			},{
-				name: "2号废气出口温度",
-				value: 123.2,
-				unit: "℃"
-			}]
-		},{
-			name: "活塞",
-			height: "calc(27vh - 99px)",
-			data: [{
-				name: "活塞冷却油进口压力",
-				value: 123.2,
-				unit: "Mpa"
-			},{
-				name: "活塞冷却油进口压力",
-				value: 123.2,
-				unit: "℃"
+	const realData = computed(() => {
+		let _obj = {
+			dataBear: [{
+				name: "涡轮增压器",
+				style: { position: 'absolute', right: 0, top: ' 18%', width: '45%' },
+				data: [{
+					name: "进气温度",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "出气温度",
+					value: 123.2,
+					unit: "℃"
+				}]
 			},{
-				name: "活塞冷却油出口温度",
-				value: 123.2,
-				unit: "℃"
-			}]
-		},{
-			name: "主轴承",
-			height: "calc(20vh - 99px)",
-			data: [{
-				name: "滑油进口压力",
-				value: 123.2,
-				unit: "Mpa"
-			},{
-				name: "滑油进口温度",
-				value: 123.2,
-				unit: "℃"
-			}]
-		},{
-			name: "燃油系统",
-			height: "calc(20vh - 99px)",
-			data: [{
-				name: "燃油进机压力",
-				value: 123.2,
-				unit: "Mpa"
-			},{
-				name: "燃油进机压力",
-				value: 123.2,
-				unit: "℃"
-			}]
-		}],[{
-			name: "气缸",
-			height: "calc(33vh - 99px)",
-			data: [{
-				name: "缸套冷却水进机压力",
-				value: 123.2,
-				unit: "Mpa"
-			},{
-				name: "缸套冷却水进机温度",
-				value: 123.2,
-				unit: "℃"
+				name: "推力轴承",
+				style: { position: 'absolute', right: 0, bottom:' 44%', width: '33%' },
+				data: [{
+					name: "滑油压力",
+					value: 123.2,
+					unit: "Mpa"
+				},{
+					name: "滑油温度",
+					value: 123.2,
+					unit: "℃"
+				}]
 			},{
-				name: "气缸冷却水出口温度",
-				value: 123.2,
-				unit: "℃"
+				name: "主轴承",
+				style: { position: 'absolute', right: 0, bottom: '11%', width: '48%' },
+				data: [{
+					name: "轴转速",
+					value: 123.2,
+					unit: "RPM"
+				},{
+					name: "滑油温度",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "滑油压力",
+					value: 123.2,
+					unit: "Mpa"
+				}]
+			}],
+			dataCool: [{
+				style: { position: 'absolute', left: '-10%', bottom: '63%', width: '48%' },
+				rows: [{
+					name: "气缸排气温度（℃）",
+					data: [{
+						name: "1#缸",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "2#缸",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "3#缸",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "4#缸",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "5#缸",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "6#缸",
+						value: 123.2,
+						unit: "℃"
+					}]
+				},{
+					name: "冷却水出口温度（℃）",
+					data: [{
+						name: "1#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "2#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "3#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "4#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "5#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "6#冷却水",
+						value: 123.2,
+						unit: "℃"
+					}]
+				}]
 			},{
-				name: "气缸排气温度",
-				value: 123.2,
-				unit: "℃"
-			}]
-		},{
-			name: "扫气",
-			height: "calc(27vh - 99px)",
-			data: [{
-				name: "主机扫气压力",
-				value: 123.2,
-				unit: "Mpa"
-			},{
-				name: "2号扫气箱温度",
-				value: 123.2,
-				unit: "℃"
+				style: { position: 'absolute', left: '-8.5%', bottom: '55%', width: '48%' },
+				rows: [{
+					name: "冷却水进口温度（℃）",
+					data: [{
+						name: "1#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "2#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "3#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "4#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "5#冷却水",
+						value: 123.2,
+						unit: "℃"
+					},{
+						name: "6#冷却水",
+						value: 123.2,
+						unit: "℃"
+					}]
+				},{
+					name: "冷却水进口压力（MPa）",
+					data: [{
+						name: "1#冷却水",
+						value: 123.2,
+						unit: "MPa"
+					},{
+						name: "2#冷却水",
+						value: 123.2,
+						unit: "MPa"
+					},{
+						name: "3#冷却水",
+						value: 123.2,
+						unit: "MPa"
+					},{
+						name: "4#冷却水",
+						value: 123.2,
+						unit: "MPa"
+					},{
+						name: "5#冷却水",
+						value: 123.2,
+						unit: "MPa"
+					},{
+						name: "6#冷却水",
+						value: 123.2,
+						unit: "MPa"
+					}]
+				}]
+			}],
+			dataPiston: [{
+				name: "扫气箱温度（℃）",
+				data: [{
+					name: "1#扫气箱",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "2#扫气箱",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "3#扫气箱",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "4#扫气箱",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "5#扫气箱",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "6#扫气箱",
+					value: 123.2,
+					unit: "℃"
+				}]
 			},{
-				name: "主机扫气箱温度",
-				value: 123.2,
-				unit: "℃"
-			}]
-		},{
-			name: "推力轴承",
-			height: "calc(20vh - 99px)",
-			data: [{
-				name: "滑油进口压力",
-				value: 123.2,
-				unit: "Mpa"
+				name: "活塞冷却油进口压力（Mpa）",
+				data: [{
+					name: "1#活塞",
+					value: 123.2,
+					unit: "Mpa"
+				},{
+					name: "2#活塞",
+					value: 123.2,
+					unit: "Mpa"
+				},{
+					name: "3#活塞",
+					value: 123.2,
+					unit: "Mpa"
+				},{
+					name: "4#活塞",
+					value: 123.2,
+					unit: "Mpa"
+				},{
+					name: "5#活塞",
+					value: 123.2,
+					unit: "Mpa"
+				},{
+					name: "6#活塞",
+					value: 123.2,
+					unit: "Mpa"
+				}]
 			},{
-				name: "滑油进口温度",
-				value: 123.2,
-				unit: "℃"
-			}]
-		},{
-			name: "滑油系统",
-			height: "calc(20vh - 99px)",
-			data: [{
-				name: "滑油进口压力",
-				value: 123.2,
-				unit: "Mpa"
+				name: "活塞冷却油进口温度（℃）",
+				data: [{
+					name: "1#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "2#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "3#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "4#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "5#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "6#活塞",
+					value: 123.2,
+					unit: "℃"
+				}]
 			},{
-				name: "滑油进口压力",
-				value: 123.2,
-				unit: "℃"
+				name: "活塞冷却油出口温度（℃）",
+				data: [{
+					name: "1#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "2#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "3#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "4#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "5#活塞",
+					value: 123.2,
+					unit: "℃"
+				},{
+					name: "6#活塞",
+					value: 123.2,
+					unit: "℃"
+				}]
 			}]
-		}]]
+		};
+		return _obj;
+	})
+	const data = reactive({
+		
 	});
-	const { dataForm } = toRefs(data);
+	const {  } = toRefs(data);
 </script>
 
 
 <style scoped lang="scss">
-	.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;
-		}
+	.ellipsis{
+		width: 39%;
+		padding-right: 5%;
+		color: var(--bGray);
+		text-align: right;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
+	
 </style>

src/views/statusMonitor/index.vue

@@ -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("auxiliarySystem");
+	const tabPosition = ref("propulsionSystem");
 	const data = reactive({
 		
 	});