wisdomisitezwfront-web/src/views/enterprise/liftSupervision/operatingData/index.vue

<template>
	<div class="operate-box">
		<div class="monitor-data" v-if="equipList.length > 0">
			<div class="monitor-title">
				<span>{{ equipInfo.devName }}</span>
				<span :style="{ color: equipInfo.online == 1 ? '#0f64da' : '#C3C3C3' }">{{
					equipInfo.online == 1 ? "在线" : "离线"
				}}</span>
			</div>
			<div class="monitor-content">
				<div class="monitor-tool">
					<img src="@/assets/images/onlineSupervision/liftImg.jpg" alt="" />
					<!-- <span class="property-one">尾臂长: {{ equipInfo.posteriorArmLength ? equipInfo.posteriorArmLength : 0 }}m</span>
					<span class="property-two">臂长: {{ equipInfo.forearmLength ? equipInfo.forearmLength : 0 }}m</span>
					<span class="property-three">塔身高: {{ equipInfo.towerHeight ? equipInfo.towerHeight : 0 }}m</span> -->
					<div class="common-info">
						<span>最大载重: {{ equipInfo.maxLoad ? equipInfo.maxLoad : 0 }}kg</span>
						<span>额定人数: {{ equipInfo.ratedPeopleNum ? equipInfo.ratedPeopleNum : 0 }}人</span>
						<span>当前楼层数: {{ equipInfo.floorNum ? equipInfo.floorNum : 0 }}</span>
						<span>最大高度: {{ equipInfo.height ? equipInfo.height : 0 }}m</span>
						<span>高度百分比: {{ equipInfo.heightRatio ? equipInfo.heightRatio : 0 }}%</span>
						<!-- <span>额定上行速度: {{ equipInfo.maxHeight ? equipInfo.maxHeight : 0 }}m</span>
						<span>额定下行速度: {{ equipInfo.maxHeight ? equipInfo.maxHeight : 0 }}m</span> -->
					</div>
					<div class="other-info">
						<span>备案编号: {{ equipInfo.filingNumber ? equipInfo.filingNumber : "" }}</span>
						<span>安装日期: {{ equipInfo.installTime ? equipInfo.installTime : "" }}</span>
						<span>终端编号: {{ equipInfo.devNumber ? equipInfo.devNumber : "" }}</span>
						<span>更新时间: {{ equipInfo.realTime ? equipInfo.realTime : "" }}</span>
						<!-- <span>安装时间: {{ equipInfo.installTime ? equipInfo.installTime : "" }}</span> -->
					</div>
				</div>
				<div class="monitor-aspect">
					<div class="monitor-aspect-item" v-for="(item, index) in aspectList" :key="index">
						<div>
							<span>{{ item.name }}</span>
							<img :src="item.img" alt="" srcset="" />
						</div>
						<div>
							<span>{{ equipInfo[item.prop] ? equipInfo[item.prop] : 0 }}</span>
							<span>{{ item.unit }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="monitor-equip">
				<div
					:class="equipActive == index ? 'active-class' : ''"
					class="monitor-state"
					v-for="(item, index) in equipList"
					:key="index"
					@click="getEquipInfo(item)"
				>
					<div>
						<img :src="item.installImage" alt="" />
						<span :style="{ backgroundColor: item.online == 1 ? '#008bff' : '#C3C3C3' }">{{
							item.online == 1 ? "在线" : "离线"
						}}</span>
					</div>
					<span>{{ item.devName }}</span>
				</div>
			</div>
		</div>
		<div class="no-data" v-else>
			<img src="@/assets/images/notData.png" alt="notData" />
			<div>暂无数据</div>
		</div>
		<div class="history-data">
			<LeftMenuPlus
				v-model="active"
				:tabs="['历史报警', '历史监测信息']"
				:pageable="pages"
				class="LeftMenu"
				@change-page="onCurChange"
			>
				<template #default>
					<div class="search-wrapper">
						<el-date-picker
							style="margin-right: 5px"
							v-model="searchForm.timeRange"
							type="daterange"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						/>
						<el-button class="search-btn" type="primary" @click="search">查询</el-button>
					</div>
					<div class="alarm-list" v-if="active == 0">
						<div class="alarm-list-item" v-for="(item, index) in alarmList" :key="index">
							<div>
								<span>设备名称: </span>
								<span>{{ item.devName }}</span>
							</div>
							<div>
								<span>设备编号: </span>
								<span style="color: #0f64da">{{ item.devNumber }}</span>
							</div>
							<div>
								<span>报警项目: </span>
								<span>{{ alarmTransform(item) }}</span>
							</div>
							<div>
								<span>报警时间: </span>
								<span>{{ item.createTime }}</span>
							</div>
						</div>
					</div>
					<div class="info-list" v-if="active == 1">
						<div class="info-list-item" v-for="(item, index) in monitorList" :key="index">
							<div>{{ item.devName }}</div>
							<div class="info-list-item-aspect">
								<div class="info-list-item-aspect-item">
									<span>制动距离</span>
									<span>{{ item.brakingDistance ? item.brakingDistance : 0 }}m</span>
								</div>
								<div class="info-list-item-aspect-item">
									<span>倾斜角</span>
									<span>{{ item.biasAngle ? item.biasAngle : 0 }}°</span>
								</div>
							</div>
							<div class="info-list-item-aspect">
								<div class="info-list-item-aspect-item">
									<span>高度</span>
									<span>{{ item.height ? item.height : 0 }}m</span>
								</div>
								<div class="info-list-item-aspect-item">
									<span>倾角X</span>
									<span>{{ item.dipAngleX ? item.dipAngleX : 0 }}°</span>
								</div>
							</div>
							<div class="info-list-item-aspect">
								<div class="info-list-item-aspect-item">
									<span>载重比</span>
									<span>{{ item.loadRatio ? item.loadRatio : 0 }}%</span>
								</div>
								<div class="info-list-item-aspect-item">
									<span>倾角Y</span>
									<span>{{ item.dipAngleY ? item.dipAngleY : 0 }}°</span>
								</div>
							</div>
							<div class="info-list-item-aspect">
								<div class="info-list-item-aspect-item">
									<span>准载</span>
									<span>{{ item.maxLoad ? item.maxLoad : 0 }}kg</span>
								</div>
								<div class="info-list-item-aspect-item">
									<span>运行速度</span>
									<span>{{ item.speed ? item.speed : 0 }}m</span>
								</div>
							</div>
							<div>监测时间: {{ item.createTime ? item.createTime : "" }}</div>
						</div>
					</div>
				</template>
			</LeftMenuPlus>
		</div>
		<!-- 侧边栏选择 -->
		<engineeringEngDrawer v-model="engVisable" ref="engDrawer" :engList="engList">
			<template #default="{ data }">
				<span style="margin-left: 10px" @click="onUpdate(data)">{{ data.engineeringName }}</span>
			</template>
		</engineeringEngDrawer>
		<allEngineering @click="engVisable = true" />
	</div>
</template>

<script setup lang="tsx" name="ProjectSupervisionRecord">
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { getRelevanceList } from "@/api/modules/common";
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
import allEngineering from "@/components/allEngineering/index.vue";
import { lifterEquipAll, lifterOperationData, lifterAlarmPage, lifterDataPage } from "@/api/modules/enterpriseApi";
import LeftMenuPlus from "@/components/LeftMenuPlus/LeftMenu.vue";
const equipActive = ref(0);
const monitorList = ref([]);
const alarmList = ref([]);
const equipList = ref([]);
const equipInfo = ref({});
const activeValue = ref("eng");
const searchForm = ref({
	timeRange: []
});
const active = ref(0);
const pages = ref({
	pageNo: 1,
	pageSize: 6,
	total: 0
});
const aspectList = ref([
	{
		name: "载重",
		value: 10,
		unit: "kg",
		img: new URL("@/assets/images/onlineSupervision/载重.png", import.meta.url).href,
		prop: "loading"
	},
	{
		name: "人数",
		value: 10,
		unit: "人",
		img: new URL("@/assets/images/onlineSupervision/力矩.png", import.meta.url).href,
		prop: "peopleNumber"
	},
	{
		name: "倾角X",
		value: 10,
		unit: "°",
		img: new URL("@/assets/images/onlineSupervision/塔身倾角.png", import.meta.url).href,
		prop: "dipAngleX"
	},
	{
		name: "倾角Y",
		value: 10,
		unit: "°",
		img: new URL("@/assets/images/onlineSupervision/塔身倾角.png", import.meta.url).href,
		prop: "dipAngleY"
	},
	{
		name: "高度",
		value: 10,
		unit: "m",
		img: new URL("@/assets/images/onlineSupervision/高度.png", import.meta.url).href,
		prop: "height"
	},
	{
		name: "风速",
		value: 10,
		unit: "m/s",
		img: new URL("@/assets/images/onlineSupervision/风速.png", import.meta.url).href,
		prop: "windSpeed"
	},
	{
		name: "运行速度",
		value: 10,
		unit: "m/s",
		img: new URL("@/assets/images/onlineSupervision/风速.png", import.meta.url).href,
		prop: "speed"
	}
	// {
	// 	name: "运行速度",
	// 	value: 10,
	// 	unit: "m/s",
	// 	img: new URL("@/assets/images/onlineSupervision/回转角度.png", import.meta.url).href,
	// 	prop: "speed"
	// }

	// {
	// 	name: "下行速度",
	// 	value: 10,
	// 	unit: "m",
	// 	img: new URL("@/assets/images/onlineSupervision/幅度.png", import.meta.url).href,
	// 	prop: "ranger"
	// }
]);
const engList = ref([]);
const engVisable = ref(false);
const searchSn = ref("");
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();
// 报警项目转换
const alarmTransform = (obj: any) => {
	let str = "";
	if (obj["fallAlarm"] == 1) str += "防坠机报警,";
	if (obj["heightAlarm"] == 1) str += "高度报警,";
	if (obj["motor1Alarm"] == 1) str += "1号电机报警,";
	if (obj["motor2Alarm"] == 1) str += "2号电机报警,";
	if (obj["motor3Alarm"] == 1) str += "3号电机报警,";
	if (obj["obliquityXAlarm"] == 1) str += "倾角X报警,";
	if (obj["obliquityYAlarm"] == 1) str += "倾角Y报警,";
	if (obj["peopleCntAlarm"] == 1) str += "人数报警,";
	if (obj["speedAlarm"] == 1) str += "速度报警,";
	if (obj["topAlarm"] == 1) str += "防冲顶报警,";
	if (obj["weightAlarm"] == 1) str += "载重报警,";
	if (obj["windSpeedAlarm"] == 1) str += "风速报警";
	return str;
};
// 获取历史检测信息
const getMonitorList = async () => {
	let requestData = {
		pageNo: pages.value.pageNo,
		pageSize: pages.value.pageSize,
		devId: equipInfo.value.id
	} as any;
	requestData.engineeringSn = searchSn.value;
	if (searchForm.value.timeRange && searchForm.value.timeRange.length > 0) {
		requestData.createTime_begin = searchForm.value.timeRange[0];
		requestData.createTime_end = searchForm.value.timeRange[1];
	}
	const res = await lifterDataPage(requestData);
	console.log(res);
	if (res && res.result && res.result.records.length > 0) {
		monitorList.value = res.result.records;
		pages.value.total = +res.result.total;
	} else {
		monitorList.value = [];
		pages.value.total = 0;
	}
};
// 获取历史报警列表
const getAlarmList = async () => {
	let requestData = {
		pageNo: pages.value.pageNo,
		pageSize: pages.value.pageSize,
		devId: equipInfo.value.id
	} as any;
	requestData.engineeringSn = searchSn.value;
	if (searchForm.value.timeRange && searchForm.value.timeRange.length > 0) {
		requestData.createTime_begin = searchForm.value.timeRange[0];
		requestData.createTime_end = searchForm.value.timeRange[1];
	}
	const res = await lifterAlarmPage(requestData);
	console.log(res);
	if (res && res.result && res.result.records.length > 0) {
		alarmList.value = res.result.records;
		pages.value.total = +res.result.total;
	} else {
		alarmList.value = [];
		pages.value.total = 0;
	}
};
// 获取设备列表
const getEquipList = async () => {
	let requestData = {} as any;
	requestData.engineeringSn = searchSn.value;
	if (searchSn.value) {
		const res = await lifterEquipAll(requestData);
		console.log(res);
		if (res && res.result && res.result.length > 0) {
			equipList.value = res.result;
			getEquipInfo(res.result[0]);
		} else {
			equipList.value = [];
		}
	} else {
		equipInfo.value = {};
		equipList.value = [];
	}
};
// 获取设备信息
const getEquipInfo = async (obj: any) => {
	equipActive.value = equipList.value.findIndex(item => item.id == obj.id);
	let requestData = {
		id: obj.id
	};
	const res = await lifterOperationData(requestData);
	console.log(res);
	if (res && res.result) {
		equipInfo.value = { ...obj, ...res.result };
	} else {
		equipInfo.value = { ...obj };
	}
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
};
// 右侧报警数据搜索
const search = () => {
	console.log(666);
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
};
// 页面的分页
const onCurChange = async (params: number) => {
	console.log(params);
	pages.value.pageNo = params;
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
};
const getengineering = async () => {
	// let newParams = JSON.parse(JSON.stringify(params));
	const res = await getRelevanceList();
	engList.value = res.result;
	if (res.result && res.result.length > 0) {
		searchSn.value = res.result[0].engineeringSn;
	}
	getEquipList();
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
	console.log(res);
};
// 点击抽屉的工程名称更新页面
const onUpdate = async row => {
	searchSn.value = row.engineeringSn;
	getEquipList();
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
	ElMessage.success("页面已更新");
};
watch(
	() => active.value,
	n => {
		searchForm.value.timeRange = [];
		if (n === 0) {
			getAlarmList();
		} else {
			getMonitorList();
		}
	}
);
onMounted(async () => {
	await getengineering();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>