zhgdyun/src/views/sevenLargeScreen/towerCraneMonitoring/leftTop.vue

<template>
	<Card title="今日塔机工作情况" v-if="towerSituationData">
		<div class="box">
			<div class="leftDiv">
				<div class="menu">
					<div class="menStyle">
						<span class="text1">违章总数</span>
						<span class="num1 num" style="color: #ec6266">{{ towerSituationData.alarmCount.violationNum }}</span>
					</div>
					<div class="menStyle">
						<span class="text">相比昨日同一时段</span>
						<span class="num2 num">
							<span style="color: #82fbea; margin-right: 15%">{{
								towerSituationData.alarmCount.violationNumYesterdaySameTime
							}}</span>
							<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/bottom.png" alt="" />
						</span>
					</div>
					<div class="menStyle">
						<span class="text">相比过去30日平均值</span>
						<span class="num3 num">
							<span style="color: #ec6266; margin-right: 15%">{{ towerSituationData.alarmCount.violationNumBefore30Day }}</span>
							<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
						</span>
					</div>
				</div>
				<div class="menu">
					<div class="menStyle">
						<span class="text1">预警总数</span>
						<span class="num1 num" style="color: #eea959">{{ towerSituationData.alarmCount.warningNum }}</span>
					</div>
					<div class="menStyle">
						<span class="text">相比昨日同一时段</span>
						<span class="num2 num">
							<span style="color: #ec6266; margin-right: 15%">{{
								towerSituationData.alarmCount.warningNumYesterdaySameTime
							}}</span>
							<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
						</span>
					</div>
					<!-- <div class="menStyle">
						<span class="text">相比行业平均值</span>
						<span class="num3 num">
							<span style="color: #ec6266; margin-right: 15%">{{  }}</span>
							<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
						</span>
					</div> -->
				</div>
			</div>
			<div class="rightDiv">
				<div class="menu">
					<div class="menStyle">
						<span class="text1">报警总数</span>
						<span class="num1 numMax" style="color: #ec6266">{{ towerSituationData.alarmCount.alarmNum }}</span>
					</div>
					<div class="menStyle">
						<span class="text">相比昨日同一时段</span>
						<span class="num2 numMax">
							<span style="color: #ec6266; margin-right: 15%">{{ towerSituationData.alarmCount.alarmNumYesterdaySameTime }}</span>
							<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
						</span>
					</div>
					<!-- <div class="menStyle">
						<span class="text">相比行业平均值</span>
						<span class="num3 numMax">
							<span style="color: #ec6266; margin-right: 15%">7.9</span>
							<img style="width: 40%" src="@/assets/images/towerCraneMonitoring/top.png" alt="" />
						</span>
					</div> -->
				</div>
				<div class="menu">
					<div class="menStyle">
						<span class="text1">在线设备/设备总数</span>
						<span class="num1 numMax" style="color: #65d7f9"
							>{{ towerSituationData.devCount.devOnline }}/{{ towerSituationData.devCount.devNum }}</span
						>
					</div>
					<el-scrollbar style="height: 50%">
						<div class="menStyleList" v-for="item in towerSituationData.deviceList" :key="item.id">
							<span class="text">{{ item.devName }}</span>
							<span class="devState" v-if="item.devOnline == 1" style="color: #82fbea"> 在线 </span>
							<span class="devState" v-else style="color: #ec6266"> 离线 </span>
						</div>
					</el-scrollbar>
				</div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
// import * as echarts from "echarts";
import { getTowerNumAndAlarmApi } from "@/api/modules/tower";
// import Card from "@/components/card.vue";
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();

let towerSituationData = ref(null as any);
const getTowerNumAndAlarmList = async () => {
	const res: any = await getTowerNumAndAlarmApi({
		projectSn: store.sn
	});
	if (res.result) {
		towerSituationData.value = res.result;
		console.log("塔吊左上今日塔机数据", res.result);
	}
};

onMounted(async () => {
	await getTowerNumAndAlarmList();
});
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	display: flex;
	.leftDiv {
		width: 50%;
		height: 80%;
		margin: 0% 2%;
	}
	.rightDiv {
		width: 50%;
		height: 80%;
		margin: 0% 2%;
	}
	.menu {
		width: 100%;
		height: 52%;
		margin-top: 5%;
		background: url("@/assets/images/towerCraneMonitoring/leftTopImg.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
		font-size: calc(100vw * 12 / 1920);
		.menStyleList {
			margin-top: 1%;
			margin-left: 6%;
			padding-top: 1%;
			.devState {
				margin-left: 100px;
			}
			.text1 {
				display: inline-block;
				color: #fff;
				font-size: calc(100vw * 14 / 1920);
				margin-top: 4%;
			}
			.text {
				color: #a1accb;
			}
			.num {
				position: absolute;
				left: 11%;
			}
			.numMax {
				position: absolute;
				left: 24%;
			}
			.num1 {
				font-size: calc(100vw * 26 / 1920);
				font-family: pmzd;
			}
		}
		.menStyle {
			margin-top: 1%;
			margin-left: 6%;
			padding-top: 1%;
			.text1 {
				display: inline-block;
				color: #fff;
				font-size: calc(100vw * 14 / 1920);
				margin-top: 4%;
			}
			.text {
				color: #a1accb;
			}
			.num {
				position: absolute;
				left: 11%;
			}
			.numMax {
				position: absolute;
				left: 24%;
			}
			.num1 {
				font-size: calc(100vw * 26 / 1920);
				font-family: pmzd;
			}
		}
	}
}
// .towerList {
// 	overflow: scroll;
// 	height: 50px;
// }
</style>