zhgdlarge/src/views/agjtLiveScreen/liveScreen/leftCenter.vue

<template>
	<div class="leftCenter">
		<Card title="AI报警情况">
			<div class="mainContainer" v-if="isData">
				<!-- <div class="imgBox"><img src="@\assets\images\vehicleManagement\goCar.png"/></div> -->
				<div class="imgBox"><img :src="BASEURL + '/image/' + alarmInfo.imageUrl"/></div>
				<div class="textBox">
					<div>报警位置：{{alarmInfo.location || '--'}}</div>
					<div>报警时间：{{alarmInfo.createTime || '--'}}</div>
				</div>
			</div>
			<div class="not-data" v-else>
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import { ref, onMounted, watch } from "vue";
import { COMPANY } from "@/config/config";

//引入现场大屏API
import {
	getEnterpriseIdApi,
	selectAIPageListApi,
 } from "@/api/modules/agjtLiveApi";
const store = GlobalStore();

//是否有数据
const isData = ref(false as any)

//获取AI报警情况信息
const alarmInfo = ref({} as any)
async function getAlarmInfo() {
	//获取企业Id
	await getEnterpriseIdApi().then(res => {
		if(res.success){
			// console.log("获取企业id",res.result.id)
			selectAIPageListApi({
				pageNo: 1,
				pageSize: 1,
				enterpriseId: res.result.id,
				isPushed: 1,
				// projectSn: store.sn,
				projectSn: 'BD3137498CB84BF0969979E0342CDBCA', // yh001
				// projectSn: '471568F45EB247A3912A0D10EA1BFCEB', // agjt正式环境&&agjt测试环境---共用的
			}).then(res2 => {
				if(res2.success){
					if(res2.result.records && res2.result.records.length !== 0){
						alarmInfo.value = res2.result.records[0]
						isData.value = true
					}else{
						isData.value = false
					}
				}
			})
		}
	});
};

//父组件调用需要无感刷新的方法
const leftCenterMethod = async () => {
	getAlarmInfo()
}
//将方法暴露给父组件
defineExpose({
	leftCenterMethod
})

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

<style lang="scss" scoped>
.leftCenter {
	width: 100%;
	height: 100%;
	.mainContainer{
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		color: #fff;
		padding: 10px;
		.imgBox{
			width: 100%;
			height: 85%;
			img{
				width: 100%;
				height:100%;
				background-size: 100% 100%;
			}
		}
		.textBox{
			height: 15%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 22px;
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
}
.not-data {
	top: 40%;
	width: 30%;
	left: 35%;
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
</style>