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

<template>
	<div class="centerBottomRight">
		<Card title="质量待办">
			<div class="mainContainer" v-if="qualityData.length != 0">
				<el-scrollbar style="height:107%">
					<div class="itemBox" v-for="(item,i) in qualityData" :key="i">
						<div class="itemLine1">{{item.dangerItemContent || '--'}}</div>
						<div class="itemLine2">
							<div class="line2Inner1">整改结果：<span style="color:#19bfef">{{
								item.status == 2 ? '待整改' : item.status == 3 ? '待复查' : item.status == 4 ? '待核验' : 
								item.status == 5 ? '合格' : item.status == 6 ? '已撤回' : '--'
							}}</span></div>
							<div class="line2Inner2">责任单位：<span style="color:#19bfef">{{item.enterpriseName || '--'}}</span></div>
						</div>
						<div class="itemLine3">
							<div class="line3Inner1">整改人：<span style="color:#19bfef">{{item.changeName || '--'}}</span></div>
							<div class="line3Inner2">检查人：<span style="">{{item.inspectManName || '--'}}</span></div>
							<div class="line3Inner3">检查时间：<span style="">{{item.inspectTime || '--'}}</span></div>
						</div>
					</div>
				</el-scrollbar>
			</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 { ref, watch, onMounted } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import { GlobalStore } from "@/stores";
import { COMPANY } from "@/config/config";
//引入现场大屏API
import { 
	getEnterpriseIdApi,
	qualityPageApi,
 } from "@/api/modules/agjtLiveApi";
const store = GlobalStore();

//获取质量待办信息
const qualityData = ref([] as any)
async function getQualityData() {

	//获取企业Id
	await getEnterpriseIdApi().then(res => {
		if(res.success){
			qualityPageApi({
				page: 1,
				pageSize: 9999,
				status: 60,
				// enterpriseId: res.result.id,
				// projectSn: store.sn,
				projectSn: 'BD3137498CB84BF0969979E0342CDBCA', // yh001
				// projectSn: '471568F45EB247A3912A0D10EA1BFCEB', // agjt正式环境&&agjt测试环境---共用的
			}).then(res2 => {
				if(res2.success){
					qualityData.value = res2.result.page.records
				}
			});
		}
	});
};


//父组件调用需要无感刷新的方法
const centerBottomRightMethod = async () => {

}
//将方法暴露给父组件
defineExpose({
	centerBottomRightMethod
})

onMounted( async () => {
	getQualityData()
});

</script>

<style lang="scss" scoped>
.centerBottomRight {
	width: 100%;
	height: 100%;
	.mainContainer{
		width: calc(100% - 22px);
		height: calc(100% - 26px);
		padding: 10px 10px;
		.itemBox{
			// width: 100%;
			// height: 30%;
			border: 1px solid #0c58a2;
			color: #fff;
			padding: 5px 10px;
			margin-bottom: 12px;
  			box-shadow: inset 0 0 8px 2px rgba($color: #0c58a2, $alpha: 1.0); /* 使用box-shadow属性添加发光效果，参数分别代表向内扩散、水平偏移、垂直偏移、模糊半径、阴影尺寸和颜色 */
			// box-shadow: inset 0 0 5px 2px rgba(255, 255, 255, 0.7); /* 向内发光效果 */
			.itemLine1{
				font-size: 14px;
				white-space: nowrap; /* 防止文字换行 */
				overflow: hidden; /* 超出部分隐藏 */
				text-overflow: ellipsis; /* 超出部分显示省略号 */
			}
			.itemLine2{
				font-size: 11px;
				line-height: 20px;
				display: flex;
				justify-content: flex-start;
				.line2Inner1{
					width: 28%;
				}
				.line2Inner2{
					width: 72%;
				}
			}
			.itemLine3{
				font-size: 11px;
				line-height: 20px;
				display: flex;
				justify-content: space-between;
				.line3Inner1{
					width: 28%;
				}
				.line3Inner2{
					width: 28%;
				}
				.line3Inner3{
					width: 44%;
				}
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
	margin-top: 4%;
}
.not-data {
	top: 40%;
	width: 30%;
	left: 35%;
	position: absolute;
	text-align: center;
	img {
		width: 50%;
	}
	p {
		color: #fff;
		font-size: 14px;
	}
}
</style>