zhgdlarge/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue

<template>
	<Card title="锚杆内力监测">
		<div class="pit-right-first">
			<div class="pit-content">
				<div class="select-right">
					<div style="width: 33%; margin-right: 5%">
						<el-date-picker
							v-model="rangeTime"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							:clearable="false"
							size="small"
							@change="selectRangeTime"
						/>
					</div>
					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small">
						<el-option v-for="(item, index) in pointList" :key="index" :label="item.measurePointName" :value="item.measurePointNumber" />
					</el-select>
					<el-select v-model="sensorSn" style="width: 15%" size="small">
						<el-option v-for="(item, index) in timeList" :key="index" :label="item.sensorName" :value="item.sensorSn" />
					</el-select>
				</div>
				<div id="pitRightFirst" ref="pitRightFirst" style="width: 100%; height: 100%"></div>
				<div class="notoDta" v-if="yData1.length == 0">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";

import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { selectDeepExcavationCurrentDataList, selectDeepExcavationAllMeasurePointList, getSensorListByMeasurePointNumber } from "@/api/modules/securityManagement";

// 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("内力(kN)" as any);
// Y轴数据
let yData1 = ref([] as any);

// 图表数据项
let option = ref(null as any);
// 选中
let rangeTime = ref("");
let measurePointNumber = ref("");
let sensorSn = ref("");

// 当前对应的种类
// let nowType = ref("温度");
let pointList = ref([
	{
		value: 1,
		dayType: "基坑监测点001"
	},
	{
		value: 2,
		dayType: "基坑监测点002"
	},
	{
		value: 3,
		dayType: "基坑监测点003"
	},
	{
		value: 4,
		dayType: "基坑监测点004"
	}
]);

let timeList = ref([
	{
		value: 1,
		dayType: "本次内力"
	},
	{
		value: 2,
		dayType: "本次变化"
	}
]);

// 时间轴起止时间
let startValue = ref("2023-9-19 05:15:00" as any);
let endValue = ref("2023-9-21 05:15:00" as any);

function selectRangeTime(e: any) {
	// console.log("选择时间", e);
	// console.log(option.value.series[0].markLine, "数据");
	// option.value.series[0].markLine = null;
	startValue.value = e[0];
	endValue.value = e[1];
	drawChart();
}

function initOption() {
	option.value = {
		// backgroundColor: '#071c3a',
		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) {
				// console.log("tooltip", params);
				// let currentMarker = "";
				let currentState = "";
				if (params[0].value[1] > positiveAlarmValue.value || params[0].value[1] < negativeAlarmValue.value) {
					currentState = "超出报警值";
					// currentMarker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f00;"> </span>`;
				} else {
					// currentMarker = params[0].marker;
					currentState = "正常";
				}
				return (
					params[0].axisValueLabel +
					params[0].name +
					"<br/>" +
					// currentMarker +
					params[0].marker +
					"状态:" +
					currentState +
					"<br/>" +
					params[0].seriesName +
					":" +
					params[0].value[1] +
					"kN"
				);
			}
		},
		grid: {
			top: "35%",
			left: "7%",
			right: "3%",
			bottom: "20%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "time",
				// minInterval: 3600 * 1000 * 6,
				// min: startValue.value,
				// max: endValue.value,
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff",
					formatter: function (value) {
						//在这里写你需要的时间格式
						let t_date = new Date(value);
						return (
							[t_date.getMonth() + 1, t_date.getDate()].join("-") +
							" " +
							[t_date.getHours(), t_date.getMinutes()].join(":") +
							":00"
						);
					}
				},
				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",
				min: negativeAlarmValue.value,
				// min: -300,
				// max: 300,
				// 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: true,
				// symbol: `image://${symbolIcon2}`,
				// symbol: "circle",
				symbolSize: 8,
				smooth: true, //是否平滑
				name: "基坑监测点001",
				type: "line",
				// symbol: "emptyCircle",
				color: "#4AC0F3",
				data: yData1.value,
				itemStyle: {
					color: function (param) {
						// console.log("拐点", param);
						if (param.value[1] > 150) {
							return "red";
						} else {
							return "#4AC0F3";
						}
					}
					// borderColor: "#0000ff", //拐点边框颜色
					// borderWidth: 1 //拐点边框大小
				},
				markLine: {
					// 添加 MarkLine 组件配置
					data: [
						// { type: 'average', name: '平均值' }, // 平均值标注线
						{ yAxis: positiveAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
						// { yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
						{ yAxis: negativeAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
						// { yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
					],
					label: {
						normal: {
							// color: function (params) {
							// 	console.log(params, "特殊值");
							// 	// return params.lineStyle.color;
							// },
							color: "inherit",
							fontSize: 14,
							position: "insideEndBottom",
							distance: [15, -15],
							formatter: function (params) {
								return params.value;
							}
						}
					}
				}
			}
		]
	};
}

// function countTime() {
// 	// 设置起始时间和结束时间
// 	let startDate = new Date("2023-09-18T18:02:00");
// 	let endDate = new Date("2023-09-21T19:02:00");
// 	// 存放小时数
// 	let timeData = [];
// 	// 返回特定小时数
// 	const hours = [0, 6, 12, 18]; // 0时、6时、12时、18时
// 	for (let i = 0; i < 72; i++) {
// 		// 每次循环，将时间递增一小时
// 		const date = new Date(startDate);
// 		date.setHours(startDate.getHours() + i);

// 		// 仅将特定小时数进行处理
// 		if (hours.includes(date.getHours())) {
// 			// 格式化为mm-dd hh:00:00格式
// 			const month = ("0" + (date.getMonth() + 1)).slice(-2);
// 			const day = ("0" + date.getDate()).slice(-2);
// 			const hour = ("0" + date.getHours()).slice(-2);
// 			const formattedTime = `2023-${month}-${day} ${hour}:00:00`;
// 			timeData.push(formattedTime);
// 			// console.log(formattedTime, "时间");
// 		}
// 		// 超过结束时间，退出循环
// 		if (date >= endDate) {
// 			break;
// 		}
// 	}
// 	twenty_four_time.value = timeData;
// 	drawChart();
// }

function drawChart() {
	initOption();
	console.log("绘制前数据", yData1.value);
	let chartDom = document.getElementById("pitRightFirst");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let pitRightFirst = echarts.init(document.getElementById("pitRightFirst"));
	pitRightFirst.setOption(option.value);
}

//获取当前时间-24小时
// function generateTimes() {
// 	let timeArrays = new Array(24).fill("");
// 	timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
// 	return timeArrays;
// }
// 	"measurePointNumber": "测点编号",
// 	"relaId": "65",
// 	"sensorSn": "1",

// selectDeepExcavationAllMeasurePointList
// getSensorListByMeasurePointNumber
// 查测点列表
const getTestPointList = async () => {
	const res: any = await selectDeepExcavationAllMeasurePointList({ projectSn: store.sn, monitorTypeId: 1 });
	pointList.value = res.result;
	measurePointNumber.value = res.result[0].measurePointNumber;
	getDevList();
	console.log("查测点列表", res);
};
// 查传感器列表
const getDevList = async () => {
	const res: any = await getSensorListByMeasurePointNumber({ projectSn: store.sn, measurePointNumber: measurePointNumber.value});
	timeList.value = res.result;
	sensorSn.value = res.result[0].sensorSn;
	console.log("查传感器列表", res);
	getEdgeAlarmTrend();
};

let negativeAlarmValue = ref(0) as any; //负报警值
let positiveAlarmValue = ref(0) as any; //正报警值

// 锚杆内力监测
const getEdgeAlarmTrend = async () => {
	const res: any = await selectDeepExcavationCurrentDataList({ projectSn: store.sn, sensorSn: sensorSn.value, measurePointNumber: measurePointNumber.value, pageNo: 1, pageSize: 10 });
	if (res.result) {
		// option.value.xAxis.data = res.result.data.records.map((item: any) => item.x);
		// option.value.series[0].data = res.result.map((item: any) => Number(item.y));
		const twoDimensionalArray = res.result.data.records.map(item => [item.receiveTime, item.data]);
		yData1.value = twoDimensionalArray
		positiveAlarmValue.value = res.result.positiveAlarmValue
		negativeAlarmValue.value = res.result.negativeAlarmValue
	}
	// twenty_four_time.value = res.result.map((item: any) => item.x);
	// yData.value = res.result.map((item: any) => Number(item.y));
	console.log("锚杆内力监测", res);
	drawChart();
};

onMounted(async () => {
	// await getEdgeAlarmTrend();
	getTestPointList();
	// getDevList();
});
</script>

<style lang="scss" scoped>
.pit-right-first {
	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%;
		}
	}
	.pit-content {
		height: 100%;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		.select-right {
			position: absolute;
			display: flex;
			right: -25%;
			width: 100%;
			top: 5%;
			z-index: 9;
		}
	}
}
: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;
}
.notoDta {
	top: 15%;
	width: 40%;
	left: 30%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>