zhgdyun/src/views/sevenLargeScreen/digitalConstruction/aIEarlyWarning/topLeft.vue

<template>
	<Card title="今日告警趋势">
		<div class="top-left-box">
			<div class="today-content">
				<!-- <div class="selectRight">
				<el-select v-model="value" class="m-2" placeholder="Select" size="small" @change="selectChange">
					<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div> -->
				<div id="AITodayTrend" ref="AITodayTrend" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</Card>
</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 { getAlarmTrendList } from "@/api/modules/aIEarlyWarn";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
let twenty_four_time = ref(["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00"] as any);
// Y轴单位
let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 5, 20, 25, 15, 25, 12, 13, 14, 20] as any);
// 图表数据项
let option = ref(null 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: "10%",
			left: "10%",
			right: "4%",
			bottom: "8%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "category",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff"
				},
				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"
					}
				},
				axisLabel: {
					show: true,
					margin: 20,
					textStyle: {
						color: "#fff"
					}
				},
				axisTick: {
					show: true
				}
			}
		],
		series: [
			{
				type: "line",
				// smooth: true, //是否平滑
				showAllSymbol: true,
				symbol: `image://${symbolIcon}`,
				// symbol: 'image://./static/images/guang-circle.png',
				// symbol: "circle",
				symbolSize: 25,
				label: {
					show: false,
					position: "top",
					textStyle: {
						color: "#fff"
					}
				},
				itemStyle: {
					color: "#D2FFF9",
					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(130, 251, 234, 0.40)"
								},
								{
									offset: 1,
									color: "rgba(130, 251, 234, 0.1)"
								}
							],
							false
						),
						shadowColor: "rgba(130, 251, 234, 1)",
						shadowBlur: 20
					}
				},
				data: yData.value
			}
		]
	};
}

function drawChart() {
	initOption();
	// console.log("绘制前数据", yData.value);
	let AITodayTrend = echarts.init(document.getElementById("AITodayTrend"));
	AITodayTrend.setOption(option.value);
}

const memberCareList = ref({} as any);
//获取今日告警趋势
const getMemberCareList = async () => {
	const res: any = await getAlarmTrendList({ projectSn: store.sn, selectType: 3 });
	console.log("获取今日告警趋势", res);
	if (res.result.length > 0) {
		memberCareList.value = res.result;
		let xDetail = [];
		let yDetail = [];
		for (let i = 0; i < res.result.length; i++) {
			xDetail.push(res.result[i].dayTitle);
			yDetail.push(res.result[i].totalNum);
		}
		twenty_four_time.value = xDetail;
		yData.value = yDetail;
	}
	drawChart();
};

onMounted(async () => {
	getMemberCareList();
	// drawChart();
});

// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
	mitts.off("devSn");
});
</script>

<style lang="scss" scoped>
.top-left-box {
	width: 100%;
	height: 100%;
	.title {
		height: 8%;
		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%;
		}
	}
	.today-content {
		margin-top: 10px;
		height: 100%;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		.selectRight {
			position: absolute;
			left: 42%;
			width: 6%;
			top: 71%;
			z-index: 9;
		}
	}
}
</style>