zhgdlarge/src/views/sevenLargeScreen/towerCraneMonitoring/leftBottom.vue

<template>
	<Card title="施工塔吊维保">
		<div class="leftBottom">
			<div class="time">
				<el-date-picker
					v-model="rangeTime"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="timeChange"
					value-format="YYYY-MM-DD"
					:clearable="false"
				/>
			</div>
			<div class="listDiv">
				<el-scrollbar>

				<div class="list" v-for="item in towerData">
					<div class="listLeft"><img :src="BASEURL + '/image/' +item.maintenanceImage" alt="" /></div>
					<div class="listRight">
						<div style="display: flex; justify-content: space-between; align-items: center">
							<p style="font-size: 14px; margin-top: 3%">{{ item.devName }}</p>
							<div class="devStatus">
								<div v-if="item.maintenanceStatus ==1" style="font-size: 14px; color: #65d7f9">正常</div>
								<div v-else style="font-size: 14px; color: #ec6266">不正常</div>
							</div>
						</div>
						<div style="margin-top: -5%; color: #a1accb">时间:{{ item.maintenanceTime }}</div>
					</div>
				</div>
				<div class="notoDta" v-if="towerData.length == 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
			</el-scrollbar>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Card from "@/components/card.vue";
import { getBigDevicesMaintenanceApi } from "@/api/modules/tower";
import { GlobalStore } from "@/stores";
const BASEURL = import.meta.env.VITE_API_URL;
const towerData=ref([] as any)
const store = GlobalStore();
let rangeTime = ref("" as any);
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
const selectNowDate = () => {
	var date = new Date(),
		year = date.getFullYear(),
		month = date.getMonth() + 1,
		day = date.getDate(),
		hours = date.getHours(), //获取当前小时数(0-23)
		minutes = date.getMinutes(), //获取当前分钟数(0-59)
		seconds = date.getSeconds();
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	day >= 0 && day <= 9 ? (day = "0" + day) : "";
	hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
	minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
	seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
	// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
	var timer = year + "-" + month + "-" + day;
	rangeTime.value = [timer, timer];
	console.log(timer);
	// return timer;
};
//获取施工塔吊维保数据
const getList = async () => {
	const res = await getBigDevicesMaintenanceApi({
		devType: 1,
		projectSn: store.sn,
		maintenanceStartTime:rangeTime.value[0],
		maintenanceEndTime:rangeTime.value[1]
	});
	if(res.result){
		towerData.value=res.result.records
	}
	console.log("施工塔吊维保", res);
};
function timeChange(e: any) {
	if (e) {
		getList();
	}
}
onMounted(() => {
	selectNowDate()
	getList();
});
</script>
<style lang="scss" scoped>
.leftBottom {
	width: 100%;
	height: 100%;
	position: relative;
	.time {
		position: absolute;
		z-index: 999;
		left: 59%;
		margin-top: 2%;
	}
	.listDiv {
		width: 89%;
		height: 74%;
		margin-top: 10%;
		margin-left: 6%;
		position: absolute;

		.list {
			width: 100%;
			height: 40%;
			background-color: orange;
			background: url("@/assets/images/towerCraneMonitoring/carContent.png") no-repeat;
			background-size: 100% 100%;
			margin-top: 2%;
			display: flex;
			position: relative;
			.listLeft {
				width: 10%;
				margin-left: 3%;
				img {
					height: 80%;
					width: 100%;
					margin-top: 11%;
				}
			}
			.listRight {
				color: #fff;
				margin-left: 3%;
				.devStatus {
					position: absolute;
					right: 5%;
					top: 15%;
				}
			}
		}
	}
}
.notoDta {
	img {
		width: 16%;
		margin: 6% 36%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -5% 38%;
	}
}
::v-deep .el-input__wrapper {
	width: 87%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
</style>