fix: 编写大型机器——卸料平台页面

src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomCenter.vue

@@ -1,16 +1,240 @@
 <template>
 	<Card title="实时告警">
-		<div class="unload-platform-content"></div>
+		<div class="concrete-right-bottom">
+			<div class="top-data">
+				<div class="data-left">严重: <span class="num">12</span>次</div>
+				<div class="data-center">较重: <span class="num">12</span>次</div>
+				<div class="data-right">一般: <span class="num">3</span>次</div>
+			</div>
+			<div class="monitor-list">
+				<el-scrollbar style="height: 100%">
+					<div class="monitor-item" v-for="item in list" :key="item.id">
+						<div class="item-top">
+							<div class="top-title">{{ item.monitorTitle }}</div>
+							<div class="top-state" :style="{ background: formworkOption[item.monitorType].color }">
+								<div>
+									{{ formworkOption[item.monitorType].label }}
+								</div>
+							</div>
+						</div>
+						<div class="item-bottom">
+							<div class="bottom-text">{{ item.monitorDetail }}</div>
+							<div class="bottom-text">{{ item.monitorTime }}</div>
+						</div>
+					</div>
+				</el-scrollbar>
+			</div>
+		</div>
 	</Card>
 </template>
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
+import { reactive, ref, onMounted } from "vue";
+import { GlobalStore } from "@/stores";
+const store = GlobalStore();
+
+let formworkOption = ref([
+	{
+		value: 0,
+		label: "严重",
+		color: "#EC6266"
+	},
+	{
+		value: 1,
+		label: "较重",
+		color: "#EEA959"
+	},
+	{
+		value: 2,
+		label: "一般",
+		color: "#468BE2"
+	}
+]);
+
+const list = reactive([
+	{
+		id: 1,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 0,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 2,
+		monitorTitle: "2#卸料平台",
+		monitorDetail: "2#卸料平台-重量预警",
+		monitorType: 1,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 3,
+		monitorTitle: "3#卸料平台",
+		monitorDetail: "3#卸料平台-重量预警",
+		monitorType: 2,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 4,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 0,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 5,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 1,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 6,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 0,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 7,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 2,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+
+	{
+		id: 8,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 0,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 9,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 2,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 10,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 0,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 11,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 0,
+		monitorTime: "2023.06.08 12:00:00"
+	},
+	{
+		id: 12,
+		monitorTitle: "1#卸料平台",
+		monitorDetail: "1#卸料平台-重量预警",
+		monitorType: 0,
+		monitorTime: "2023.06.08 12:00:00"
+	}
+]);
 </script>
 
 <style scoped lang="scss">
-.unload-platform-content {
+.concrete-right-bottom {
 	width: 100%;
 	height: 100%;
+	.top-data {
+		width: 100%;
+		height: 15%;
+		padding-top: 2%;
+		display: flex;
+		.num {
+			font-size: 20px;
+			font-family: OPPOSans-Bold, OPPOSans;
+			font-weight: bold;
+			color: #ffffff;
+			padding: 0% 5%;
+		}
+		.data-left {
+			box-sizing: border-box;
+			width: 30%;
+			margin-left: 3%;
+			font-size: 16px;
+			padding-top: 1%;
+			padding-left: 10%;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			color: #ffffff;
+			background: url("@/assets/images/unloadPlatform/listBg1.png") no-repeat;
+			background-size: 100% 100%;
+		}
+		.data-center {
+			box-sizing: border-box;
+			width: 30%;
+			margin-left: 3%;
+			font-size: 16px;
+			padding-top: 1%;
+			padding-left: 10%;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			color: #ffffff;
+			background: url("@/assets/images/unloadPlatform/listBg2.png") no-repeat;
+			background-size: 100% 100%;
+		}
+		.data-right {
+			box-sizing: border-box;
+			width: 30%;
+			margin-left: 3%;
+			font-size: 16px;
+			padding-top: 1%;
+			padding-left: 10%;
+			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			color: #ffffff;
+			background: url("@/assets/images/unloadPlatform/listBg3.png") no-repeat;
+			background-size: 100% 100%;
+		}
+	}
+	.monitor-list {
+		width: 100%;
+		height: 70%;
+		margin-top: 3%;
+		.monitor-item {
+			width: 94%;
+			margin: auto;
+			padding-bottom: 1%;
+			margin-bottom: 3%;
+			background: url("@/assets/images/concreteMonitor/listBg.png") no-repeat;
+			background-size: 100% 100%;
+			.item-top {
+				display: flex;
+				align-items: center;
+				padding-top: 1%;
+				padding-left: 3%;
+				.top-title {
+					font-size: 16px;
+					color: #fff;
+				}
+				.top-state {
+					padding: 0% 1%;
+					font-size: 12px;
+					margin-left: 2%;
+					color: #fff;
+					background: #ec6266;
+					border-radius: 2px 2px 2px 2px;
+				}
+			}
+			.item-bottom {
+				display: flex;
+				justify-content: space-between;
+				margin-left: 3%;
+				margin-top: 2%;
+				margin-right: 3%;
+				.bottom-text {
+					font-size: 12px;
+					color: #a1accb;
+				}
+			}
+		}
+	}
 }
 </style>

src/views/sevenLargeScreen/largeMachinery/unloadPlatform/bottomRight.vue

@@ -1,16 +1,412 @@
 <template>
 	<Card title="历史载重">
-		<div class="unload-platform-content"></div>
+		<div class="load-bottom-left">
+			<div class="choice-right">
+				<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">近七日</div>
+				<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">近一月</div>
+				<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">近一年</div>
+			</div>
+			<div class="load-content">
+				<div id="loadLine" ref="loadLine" style="width: 100%; height: 100%"></div>
+			</div>
+		</div>
 	</Card>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import Card from "@/components/card.vue";
+// import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
+
+import { onMounted, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+const store = GlobalStore();
+// x轴
+// let twenty_four_time = ref([] as any);
+// Y轴单位
+let unit = ref("" as any);
+// Y轴数据
+// let yData1 = ref([
+// 	["2023-9-19 05:15:00", 12],
+// 	["2023-9-19 15:15:00", 200],
+// 	["2023-9-19 17:15:00", 50],
+// 	["2023-9-19 19:15:00", 24],
+// 	["2023-9-20 05:15:00", 30],
+// 	["2023-9-20 15:15:00", 60]
+// ]);
+
+// 图表数据项
+let option = ref(null as any);
+// 选中
+// let rangeTime = ref("");
+let selectPoint = ref(1);
+let selectTime = ref("2023-09-01");
+
+// 选中
+let checked = ref(1);
+function getNowData(type: any) {
+	checked.value = type;
+	// 初始化option
+	drawChart();
+}
+function getWeekData(type: any) {
+	checked.value = type;
+	// 初始化option
+	drawChart();
+}
+function getMonthData(type: any) {
+	checked.value = type;
+	// 初始化option
+	drawChart();
+}
+
+let typeList = ref([
+	{
+		value: 1,
+		dayType: "最低值",
+		typeUnit: "℃"
+	},
+	{
+		value: 2,
+		dayType: "最高值",
+		typeUnit: "℃"
+	}
+]);
+
+// 时间轴起止时间
+let startValue = ref("2023-9-19 05:15:00" as any);
+let endValue = ref("2023-9-21 05:15:00" as any);
+
+function selectChange(e: any) {
+	console.log("当前日期", e);
+	drawChart();
+}
+
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		legend: {
+			align: "left",
+			top: "5%",
+			left: "2%",
+			textStyle: {
+				color: "#FFFFFF",
+				fontSize: 14,
+				padding: [0, 0, 0, 10]
+			},
+			icon: "rect",
+			itemGap: 25,
+			itemWidth: 10,
+			itemHeight: 10
+		},
+		// dataZoom: [
+		// 	{
+		// 		// orient: "vertical", //水平显示
+		// 		type: "slider",
+		// 		show: true, //显示滚动条
+		// 		height: 0,
+		// 		// startValue: startValue.value, //起始值
+		// 		// endValue: endValue.value, //结束值
+		// 		start: 0,
+		// 		end: 35,
+		// 		showDetail: false,
+		// 		bottom: "8%",
+		// 		moveHandleStyle: {
+		// 			color: "#4AC0F3"
+		// 		},
+		// 		backgroundColor: "#193C8D"
+		// 	}
+		// ],
+		tooltip: {
+			trigger: "axis",
+			backgroundColor: "rgba(0, 0, 0, 0.9)",
+			borderColor: "#010306",
+			textStyle: {
+				color: "#FFFFFF"
+			},
+			axisPointer: {
+				lineStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{
+								offset: 0,
+								color: "rgba(0, 255, 233,0)"
+							},
+							{
+								offset: 0.5,
+								color: "rgba(255, 255, 255,1)"
+							},
+							{
+								offset: 1,
+								color: "rgba(0, 255, 233,0)"
+							}
+						],
+						global: false
+					}
+				}
+			},
+			formatter: function (params: any) {
+				// console.log("tooltip", params);
+				let currentInnerHtml = "";
+				let nowTime = params[0].axisValueLabel;
+				for (let index = 0; index < params.length; index++) {
+					let pointType = params[index].seriesName;
+					let pointValue = params[index].data[1];
+					let currentTypeData = typeList.value.filter((item: any) => {
+						return item.dayType === params[index].seriesName;
+					});
+					let unit = currentTypeData[0].typeUnit;
+					// console.log(unit, "单位");
+					currentInnerHtml = currentInnerHtml + "</br>" + params[index].marker + pointType + " " + pointValue;
+				}
+				return nowTime + currentInnerHtml;
+			}
+		},
+		grid: {
+			top: "20%",
+			left: "13%",
+			right: "13%",
+			bottom: "10%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "category",
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff"
+					// formatter: function (value: any) {
+					// 	//需要的时间格式
+					// 	let t_date = new Date(value);
+					// 	let nowMinutes: any = t_date.getMinutes();
+					// 	if (nowMinutes < 10) {
+					// 		nowMinutes = "0" + nowMinutes;
+					// 	}
+					// 	let nowSeconds: any = t_date.getSeconds();
+					// 	if (nowSeconds < 10) {
+					// 		nowSeconds = "0" + nowSeconds;
+					// 	}
+					// 	return (
+					// 		[t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join("-") +
+					// 		" " +
+					// 		[t_date.getHours(), nowMinutes, nowSeconds].join(":")
+					// 	);
+					// }
+				},
+				splitLine: {
+					show: false
+				},
+				boundaryGap: false
+				// data: twenty_four_time.value
+			}
+		],
+
+		yAxis: [
+			{
+				name: unit.value,
+				nameGap: 25,
+				nameTextStyle: {
+					align: "right", // 将 Y 轴名称文字右对齐
+					verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
+					padding: [0, 5, 0, 0], // 设置名称文字的内边距，调整位置
+					color: "#fff",
+					nameLocation: "start"
+				},
+				type: "value",
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: []
+		// [
+		// 	// {
+		// 	// 	showAllSymbol: false,
+		// 	// 	smooth: true, //是否平滑
+		// 	// 	name: "监测点001",
+		// 	// 	type: "line",
+		// 	// 	showSymbol: false,
+		// 	// 	color: "#4AC0F3",
+		// 	// 	data: yData1.value
+		// 	// }
+		// ]
+	};
+
+	for (let i = 0; i < typeList.value.length; i++) {
+		// 根据点位的种类画图(立杆倾斜,水平位移,立杆轴力,地基沉降)
+
+		// 测试点位数据[x,y]
+		let data = [
+			["09.01", 42 * 2 * (i + 1)],
+			["09.02", 24 * 2 * (i + 1)],
+			["09.03", 35 * 2 * (i + 1)],
+			["09.04", 30 * 2 * (i + 1)],
+			["09.05", 20 * 2 * (i + 1)],
+			["09.06", 50 * 2 * (i + 1)],
+			["09.07", 24 * 2 * (i + 1)]
+		];
+		let lineObj = {
+			smooth: true, //是否平滑
+			name: typeList.value[i].dayType,
+			type: "line",
+			showSymbol: true,
+			symbol: "emptyCircle",
+			symbolSize: 6,
+			// color: "#4AC",
+			data: data
+		};
+		option.value.series.push(lineObj);
+	}
+}
+
+function drawChart() {
+	initOption();
+	// console.log("绘制前数据", option.value);
+	let chartDom = document.getElementById("loadLine");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let loadLine = echarts.init(document.getElementById("loadLine"));
+	loadLine.setOption(option.value);
+}
+
+onMounted(async () => {
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次mitts.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
 </script>
 
-<style scoped lang="scss">
-.unload-platform-content {
+<style lang="scss" scoped>
+.load-bottom-left {
 	width: 100%;
 	height: 100%;
+	position: relative;
+	.title {
+		height: 10%;
+		line-height: 33px;
+		text-align: left;
+		font-size: calc(100vw * 18 / 1920);
+		color: #ffffff;
+		background: url("@/assets/images/titleBig.webp") no-repeat;
+		background-size: 100% 100%;
+		i {
+			font-family: OPPOSansH;
+			margin-left: 6%;
+		}
+	}
+	.load-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		.select-right {
+			position: absolute;
+			display: flex;
+			right: 22%;
+			width: 10%;
+			top: 5%;
+			z-index: 9;
+		}
+	}
+}
+
+.choice-right {
+	width: 40%;
+	display: flex;
+	position: absolute;
+	z-index: 99;
+	color: #fff;
+	font-size: 10px;
+	text-align: center;
+	line-height: 20px;
+	right: 0%;
+	top: 5%;
+	.selected {
+		height: 5%;
+		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
+		background-size: 100% 100%;
+		cursor: pointer;
+	}
+	.day {
+		padding: 0 5%;
+		margin-right: 4%;
+		z-index: 99;
+	}
+	.week {
+		padding: 0 5%;
+		margin-right: 4%;
+		z-index: 99;
+	}
+	.month {
+		padding: 0 5%;
+		z-index: 99;
+	}
+	.active {
+		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
+		background-size: 100% 100%;
+	}
+}
+
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
+}
+:deep(.el-date-editor) {
+	width: 100%;
+}
+:deep(.el-range-separator) {
+	color: #fff;
+}
+:deep(.el-date-editor .el-range-input) {
+	color: #fff;
 }
 </style>

src/views/sevenLargeScreen/largeMachinery/unloadPlatform/load-ratio-circle.vue

@@ -0,0 +1,179 @@
+<template>
+	<div class="edge-top-right">
+		<div class="history-content">
+			<div id="loadRatio" ref="loadRatio" style="width: 100%; height: 100%"></div>
+			<div class="circle-icon">
+				<img src="@/assets/images/unloadPlatform/halfCircle.png" />
+			</div>
+			<div class="load-text">
+				<div class="num">{{ loadPercent }}%</div>
+				<div class="text">载重比</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+const store = GlobalStore();
+
+// 图表数据项
+let option = ref(null as any);
+
+// 载重比
+let loadPercent = ref("75" as any);
+
+function initOption() {
+	let numbers = {
+		max: 50,
+		value: 30
+	};
+
+	loadPercent.value = (numbers.value / numbers.max) * 100;
+	let axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+		{
+			offset: 0,
+			color: "#76ED92"
+		},
+		{
+			offset: 0.8,
+			color: "#1F3BCC"
+		}
+	]);
+	option.value = {
+		// tooltip: {
+		// 	formatter: "{a} <br/>{b} : {c}%"
+		// },
+		series: [
+			{
+				min: 90,
+				max: 100,
+				startAngle: 180,
+				endAngle: 0,
+				name: "业务指标",
+				type: "gauge",
+				axisLabel: {
+					show: false
+				},
+				axisLine: {
+					lineStyle: {
+						width: 30,
+						color: [[numbers.value / numbers.max, axislineColor]]
+					}
+				},
+				pointer: {
+					show: false
+				},
+				itemStyle: {
+					show: false,
+					color: "#bbb"
+				},
+				axisTick: {
+					distance: -30,
+					splitNumber: 5,
+					lineStyle: {
+						width: 0.2,
+						color: "#222222"
+					}
+				},
+				splitLine: {
+					distance: -30,
+					length: 15,
+					lineStyle: {
+						width: 0.3,
+						color: "#222222"
+					}
+				}
+				// data: [
+				// 	{
+				// 		value: numbers.value
+				// 	}
+				// ]
+			}
+		]
+	};
+}
+
+function drawChart() {
+	initOption();
+	// console.log("绘制前数据", yData.value);
+	let chartDom = document.getElementById("loadRatio");
+	if (chartDom) {
+		chartDom.removeAttribute("_echarts_instance_");
+	}
+	let loadRatio = echarts.init(document.getElementById("loadRatio"));
+	loadRatio.setOption(option.value);
+}
+
+onMounted(async () => {
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
+</script>
+
+<style lang="scss" scoped>
+.edge-top-right {
+	width: 100%;
+	height: 100%;
+	.history-content {
+		width: 60%;
+		height: 60%;
+		position: absolute;
+		right: -10%;
+		bottom: -20%;
+		.circle-icon {
+			width: 60%;
+			height: 42%;
+			position: absolute;
+			bottom: 50%;
+			right: 20%;
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+		.load-text {
+			position: absolute;
+			bottom: 50%;
+			right: 46%;
+			.text {
+				color: #a0b8e5;
+				font-size: 12px;
+				margin-top: 10%;
+				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+			}
+			.num {
+				font-size: 20px;
+				font-family: D-DIN-DIN-Bold, D-DIN-DIN;
+				font-weight: bold;
+				-webkit-text-stroke: 0px #ffffff;
+				text-stroke: 0px #ffffff;
+				background: linear-gradient(180deg, #ffffff 0%, #c7c9c8 100%);
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+		}
+	}
+}
+::v-deep .el-input__wrapper {
+	background: #112d59;
+}
+::v-deep .el-input__inner {
+	color: #fff;
+}
+::v-deep .el-select .el-input .el-select__caret {
+	color: #fff;
+}
+</style>

src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topCenter.vue

@@ -1,16 +1,118 @@
 <template>
 	<Card title="实时监测">
-		<div class="unload-platform-content"></div>
+		<div class="unload-platform-content">
+			<div class="select-right">
+				<el-select v-model="selectDay" style="width: 85%" size="small">
+					<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
+				</el-select>
+			</div>
+			<div class="current-load">当前载重: 116 t</div>
+			<div class="current-left"></div>
+			<div class="current-right">
+				<div class="warn-icon">
+					<img src="@/assets/images/unloadPlatform/warntype.png" />
+				</div>
+			</div>
+			<div class="load-ratio-circle">
+				<load-ratio-circle></load-ratio-circle>
+			</div>
+		</div>
 	</Card>
 </template>
 
 <script setup lang="ts">
 import Card from "@/components/card.vue";
+import loadRatioCircle from "@/views/sevenLargeScreen/largeMachinery/unloadPlatform/load-ratio-circle.vue";
+import { reactive, ref, onMounted } from "vue";
+
+// 当前对应的种类
+let selectDay = ref(1);
+let dayList = ref([
+	{
+		value: 1,
+		dayType: "卸料平台001"
+	},
+	{
+		value: 2,
+		dayType: "卸料平台002"
+	},
+	{
+		value: 3,
+		dayType: "卸料平台003"
+	},
+	{
+		value: 4,
+		dayType: "卸料平台004"
+	}
+]);
 </script>
 
 <style scoped lang="scss">
 .unload-platform-content {
 	width: 100%;
 	height: 100%;
+	position: relative;
+	.select-right {
+		position: absolute;
+		right: 1%;
+		width: 15%;
+		top: -13%;
+		z-index: 9;
+	}
+	.current-load {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		width: 30%;
+		height: 10%;
+		margin-top: 3%;
+		margin-left: 35%;
+		font-size: 20px;
+		font-family: OPPOSans-Bold, OPPOSans;
+		font-weight: bold;
+		color: #ffffff;
+		background: url("@/assets/images/listTitle.png") no-repeat;
+		background-size: 100% 100%;
+	}
+	.current-left {
+		position: absolute;
+		width: 50%;
+		height: 75%;
+		top: 20%;
+		left: 10%;
+		background: url("@/assets/images/unloadPlatform/realtimeIcon.jpeg") no-repeat;
+		background-size: 100% 100%;
+	}
+	.current-right {
+		position: absolute;
+		right: -2%;
+		top: 23%;
+		width: 30%;
+		height: 60%;
+		.warn-icon {
+			width: 50%;
+			height: 50%;
+			position: relative;
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+	}
+}
+.load-ratio-circle {
+	width: 100%;
+	height: 100%;
+}
+:deep(.el-input__wrapper) {
+	background: #112d59;
+}
+:deep(.el-input__inner) {
+	color: #fff;
+}
+:deep(.el-select .el-input .el-select__caret) {
+	color: #fff;
 }
 </style>

src/views/sevenLargeScreen/largeMachinery/unloadPlatform/topRight.vue

@@ -1,16 +1,276 @@
 <template>
 	<Card title="载重比分析">
-		<div class="unload-platform-content"></div>
+		<div class="unload-top-right">
+			<div class="history-content">
+				<div id="loadAnalysis" ref="loadAnalysis" style="width: 100%; height: 100%"></div>
+			</div>
+			<div class="select-right">
+				<el-date-picker v-model="selectTime" type="date" size="small" />
+			</div>
+		</div>
 	</Card>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import Card from "@/components/card.vue";
+import symbolIcon from "@/assets/images/lineSymbol.png";
+import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+// import { getSelectDataListApi } from "@/api/modules/distribution";
+// import Card from "@/components/card.vue";
+import { GlobalStore } from "@/stores";
+import mitts from "@/utils/bus"; //兄弟组件传值
+const store = GlobalStore();
+// x轴
+let twenty_four_time = ref(["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00"] as any);
+// Y轴单位
+let unit = ref("单位:V" as any);
+// Y轴数据
+let yData = ref([10, 65, 20, 25, 15, 25, 12, 20] as any);
+// 图表数据项
+let option = ref(null as any);
+
+let selectTime = ref("2023-05-01" as any);
+function initOption() {
+	option.value = {
+		// backgroundColor: '#071c3a',
+		title: {
+			// text: '日用气量分析',
+			textStyle: {
+				align: "center",
+				color: "#fff",
+				fontSize: 20
+			},
+			top: "2%",
+			left: "center"
+		},
+		tooltip: {
+			trigger: "axis",
+			axisPointer: {
+				lineStyle: {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [
+							{
+								offset: 0,
+								color: "rgba(0, 255, 233,0)"
+							},
+							{
+								offset: 0.5,
+								color: "rgba(255, 255, 255,1)"
+							},
+							{
+								offset: 1,
+								color: "rgba(0, 255, 233,0)"
+							}
+						],
+						global: false
+					}
+				}
+			}
+		},
+		grid: {
+			top: "15%",
+			left: "10%",
+			right: "10%",
+			bottom: "8%"
+			// containLabel: true
+		},
+		xAxis: [
+			{
+				type: "category",
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				splitArea: {
+					// show: true,
+					color: "#f00",
+					lineStyle: {
+						color: "#f00"
+					}
+				},
+				axisLabel: {
+					color: "#fff",
+					interval: 0
+				},
+				splitLine: {
+					show: false
+				},
+				boundaryGap: false,
+				data: twenty_four_time.value
+			}
+		],
+
+		yAxis: [
+			{
+				type: "value",
+				// name: unit.value,
+				nameTextStyle: {
+					color: "#fff",
+					nameLocation: "start"
+				},
+				min: 0,
+				// max: 140,
+				splitNumber: 3,
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: "#14346C"
+					}
+				},
+				interval: 10,
+				axisLabel: {
+					show: true,
+					margin: 20,
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				axisTick: {
+					show: true
+				}
+			}
+		],
+		series: [
+			{
+				type: "line",
+				// smooth: true, //是否平滑
+				showAllSymbol: true,
+				symbol: `image://${symbolIcon}`,
+				// symbol: "circle",
+				// smooth: 0.3,
+				symbolSize: 30,
+				label: {
+					show: false,
+					position: "top",
+					textStyle: {
+						color: "#fff"
+					}
+				},
+				itemStyle: {
+					color: "#4AC0F3",
+					borderColor: "#4AC0F3",
+					borderWidth: 5,
+					shadowColor: "rgba(0, 0, 0, .6)",
+					shadowBlur: 0,
+					lineStyle: {
+						width: 0.1,
+						normal: {
+							color: "#fff",
+							shadowBlur: 0
+						}
+					}
+				},
+				tooltip: {
+					show: true
+				},
+				areaStyle: {
+					normal: {
+						color: new echarts.graphic.LinearGradient(
+							0,
+							0,
+							0,
+							1,
+							[
+								{
+									offset: 0,
+									color: "rgba(74, 192, 243,0.5)"
+								},
+								{
+									offset: 1,
+									color: "rgba(74, 192, 243, 0.1)"
+								}
+							],
+							false
+						),
+						shadowColor: "rgba(74, 192, 243, 1)",
+						shadowBlur: 20
+					}
+				},
+				data: yData.value
+			}
+		]
+	};
+}
+
+function drawChart() {
+	initOption();
+	console.log("绘制前数据", yData.value);
+	let loadAnalysis = echarts.init(document.getElementById("loadAnalysis"));
+	loadAnalysis.setOption(option.value);
+}
+
+//获取当前前七天的日期
+// function generateWeek() {
+// 	// 获取当前日期
+// 	const today = new Date();
+// 	// 存放日期
+// 	let dateArr = [];
+// 	// 返回最近七天的日期
+// 	for (let i = 0; i < 7; i++) {
+// 		// 每次循环，将日期递减一天
+// 		const date = new Date(today);
+// 		date.setDate(today.getDate() - i);
+
+// 		// 格式化日期为yyyy-mm-dd格式
+// 		const dateString = date.toISOString().split("T")[0];
+// 		dateArr.unshift(dateString);
+// 		console.log(dateArr, "周日期");
+// 	}
+// 	twenty_four_time.value = dateArr;
+// }
+
+onMounted(async () => {
+	// generateWeek();
+	drawChart();
+});
+
+// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
+onBeforeUnmount(async () => {
+	mitts.off("devSn");
+});
 </script>
 
-<style scoped lang="scss">
-.unload-platform-content {
+<style lang="scss" scoped>
+.unload-top-right {
 	width: 100%;
 	height: 100%;
+	position: relative;
+	.history-content {
+		height: 100%;
+		background: url("@/assets/images/cardImg.png") no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+	}
+}
+.select-right {
+	position: absolute;
+	display: flex;
+	right: 5%;
+	width: 20%;
+	top: 5%;
+	z-index: 9;
+}
+::v-deep .el-input__wrapper {
+	background: #112d59;
+}
+::v-deep .el-input__inner {
+	color: #fff;
+}
+::v-deep .el-select .el-input .el-select__caret {
+	color: #fff;
 }
 </style>