wisdomisitezwfront-web/src/views/project/liftSupervision/historyData/realTimeData/index.vue

<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="报警数据"
			:columns="columns"
			:requestApi="getTableList"
			:dataCallback="dataCallback"
			:tool-button="false"
			:pagination="true"
			background
			:isShowSearch="false"
			:initParam="initParam"
			:onReset="true"
		>
			<template #equipInfo="{ row }">
				<span>设备名称: {{ row.devName }}</span>
				<br />
				<span>设备编号: {{ row.devNumber }}</span>
				<br />
				<span>司机姓名: {{ row.driverName }}</span>
				<br />
				<span>司机身份证号: {{ row.driverIdCard }}</span>
				<br />
				<span>角度: {{ row.angle ? row.angle : 0 }}°</span>
				<br />
				<span>高度: {{ row.height ? row.height : 0 }}m</span>
				<br />
				<span>载重比: {{ row.loadRatio ? row.loadRatio : 0 }}%</span>
				<br />
				<span>载重: {{ row.loading ? row.loading : 0 }}kg</span>
				<br />
				<span>倾角: {{ row.obliquity ? row.obliquity : 0 }}°</span>
				<br />
				<span>倾角X: {{ row.obliquityX ? row.obliquityX : 0 }}°</span>
				<br />
				<span>倾角Y: {{ row.obliquityY ? row.obliquityY : 0 }}°</span>
				<br />
				<span>幅度: {{ row.ranger ? row.ranger : 0 }}m</span>
				<br />
				<span>倍率: {{ row.multiple ? row.multiple : 0 }}</span>
				<br />
				<span>数据接受时间: {{ row.createTime ? row.createTime : "" }}</span>
				<br />
				<span>力矩: {{ row.torque ? row.torque : 0 }}kg.m</span>
				<br />
				<span>力矩比: {{ row.torqueRatio ? row.torqueRatio : 0 }}%</span>
				<br />
				<span>风速: {{ row.windSpeed ? row.windSpeed : 0 }}m/s</span>
				<br />
				<span
					>回转状态:
					{{
						row.rotationState == 0 ? "停止回转" : row.rotationState == 1 ? "向右回转" : row.rotationState == 2 ? "向左回转" : ""
					}}</span
				>
				<br />
				<span
					>起升状态:
					{{
						row.liftingState == 0 ? "停止升降" : row.liftingState == 1 ? "向下落勾" : row.liftingState == 2 ? "向上起勾" : ""
					}}</span
				>
				<br />
				<span
					>变幅状态:
					{{
						row.rangerState == 0 ? "停止变幅" : row.rangerState == 1 ? "向外变幅" : row.rangerState == 2 ? "向内变幅" : ""
					}}</span
				>
			</template>
			<template #alarmInfo="{ row }">
				<div class="table-data">
					<span
						>禁入区报警:
						<span :style="{ color: row.forbidEntryAlarm == 0 ? '#333' : '#E70000' }">{{
							row.forbidEntryAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>禁入区左转报警:
						<span :style="{ color: row.forbidEntryLeftAlarm == 0 ? '#333' : '#E70000' }">{{
							row.forbidEntryLeftAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>禁入区右转报警:
						<span :style="{ color: row.forbidEntryRightAlarm == 0 ? '#333' : '#E70000' }">{{
							row.forbidEntryRightAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>A类禁吊区域报警:
						<span :style="{ color: row.forbidSuspendAlarmA == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendAlarmA == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>A类禁吊区左转报警:
						<span :style="{ color: row.forbidSuspendLeftAlarmA == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendLeftAlarmA == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>A类禁吊区右转报警:
						<span :style="{ color: row.forbidSuspendRightAlarmA == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendRightAlarmA == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>A类禁吊区向外变幅报警:
						<span :style="{ color: row.forbidSuspendOutAlarmA == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendOutAlarmA == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>B类禁吊区域报警:
						<span :style="{ color: row.forbidSuspendAlarmB == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendAlarmB == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>B类禁吊区左转报警:
						<span :style="{ color: row.forbidSuspendLeftAlarmB == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendLeftAlarmB == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>B类禁吊区右转报警:
						<span :style="{ color: row.forbidSuspendRightAlarmB == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendRightAlarmB == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>B类禁吊区向外变幅报警:
						<span :style="{ color: row.forbidSuspendOutAlarmB == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendOutAlarmB == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>B类禁吊区向内变幅报警:
						<span :style="{ color: row.forbidSuspendBackAlarmB == 0 ? '#333' : '#E70000' }">{{
							row.forbidSuspendBackAlarmB == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>高度上限位报警:
						<span :style="{ color: row.heightUpperAlarm == 0 ? '#333' : '#E70000' }">{{
							row.heightUpperAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>高度下限位报警:
						<span :style="{ color: row.heightLowerAlarm == 0 ? '#333' : '#E70000' }">{{
							row.heightLowerAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>幅度外限位报警:
						<span :style="{ color: row.maxRangeAlarm == 0 ? '#333' : '#E70000' }">{{
							row.maxRangeAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>幅度内限位报警:
						<span :style="{ color: row.minRangeAlarm == 0 ? '#333' : '#E70000' }">{{
							row.minRangeAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>力矩报警:
						<span :style="{ color: row.forceAlarm == 0 ? '#333' : '#E70000' }">{{
							row.forceAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>多机防撞报警:
						<span :style="{ color: row.multiAntiCollisionAlarm == 0 ? '#333' : '#E70000' }">{{
							row.multiAntiCollisionAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>多机防撞向内变幅报警:
						<span :style="{ color: row.multiAntiCollisionBackAlarm == 0 ? '#333' : '#E70000' }">{{
							row.multiAntiCollisionBackAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>多机防撞左转报警:
						<span :style="{ color: row.multiAntiCollisionLeftAlarm == 0 ? '#333' : '#E70000' }">{{
							row.multiAntiCollisionLeftAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>多机防撞向外变幅报警:
						<span :style="{ color: row.multiAntiCollisionOutAlarm == 0 ? '#333' : '#E70000' }">{{
							row.multiAntiCollisionOutAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>多机防撞右转报警:
						<span :style="{ color: row.multiAntiCollisionRightAlarm == 0 ? '#333' : '#E70000' }">{{
							row.multiAntiCollisionRightAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>逆时针回转限位报警:
						<span :style="{ color: row.negAngleAlarm == 0 ? '#333' : '#E70000' }">{{
							row.negAngleAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>倾角报警:
						<span :style="{ color: row.obliquityAlarm == 0 ? '#333' : '#E70000' }">{{
							row.obliquityAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>倾角X报警:
						<span :style="{ color: row.obliquityXAlarm == 0 ? '#333' : '#E70000' }">{{
							row.obliquityXAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>倾角Y报警:
						<span :style="{ color: row.obliquityYAlarm == 0 ? '#333' : '#E70000' }">{{
							row.obliquityYAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>顺时针回转限位报警:
						<span :style="{ color: row.posAngleAlarm == 0 ? '#333' : '#E70000' }">{{
							row.posAngleAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>风速报警:
						<span :style="{ color: row.windSpeedAlarm == 0 ? '#333' : '#E70000' }">{{
							row.windSpeedAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
			</template>
			<template #faultInfo="{ row }">
				<div class="table-data">
					<span
						>角度传感器故障:
						<span :style="{ color: row.angleError == 0 ? '#333' : '#E70000' }">{{
							row.angleError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>GPS故障:
						<span :style="{ color: row.gpsError == 0 ? '#333' : '#E70000' }">{{
							row.gpsError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>高度传感器故障:
						<span :style="{ color: row.heightError == 0 ? '#333' : '#E70000' }">{{
							row.heightError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>身份识别模块故障:
						<span :style="{ color: row.identificationError == 0 ? '#333' : '#E70000' }">{{
							row.identificationError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>有无任何外设故障:
						<span :style="{ color: row.peripheralError == 0 ? '#333' : '#E70000' }">{{
							row.peripheralError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>倾角传感器故障:
						<span :style="{ color: row.obliquityError == 0 ? '#333' : '#E70000' }">{{
							row.obliquityError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>幅度传感器故障:
						<span :style="{ color: row.rangeError == 0 ? '#333' : '#E70000' }">{{
							row.rangeError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>载重传感器故障:
						<span :style="{ color: row.weightError == 0 ? '#333' : '#E70000' }">{{
							row.weightError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>风速传感器故障:
						<span :style="{ color: row.windSpeedError == 0 ? '#333' : '#E70000' }">{{
							row.windSpeedError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
			</template>
		</ProTable>
		<!-- 侧边栏选择 -->
		<engineeringEngDrawer v-model="engVisable" :active="activeValue" ref="engDrawer" :engList="engList" @select="tabsSelect">
			<template #default="{ data }">
				<span style="margin-left: 10px" @click="onUpdate(data)">{{
					activeValue == "eng" ? data.engineeringName : data.projectName
				}}</span>
			</template>
		</engineeringEngDrawer>
		<allEngineering @click="engVisable = true" />
	</div>
</template>

<script setup lang="tsx" name="ProjectSupervisionRecord">
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { getRelevanceList } from "@/api/modules/common";
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
import allEngineering from "@/components/allEngineering/index.vue";
import { getEngineeringName, towerCraneDataPage } from "@/api/modules/project";

const activeValue = ref("eng");
const engList = ref([]);
const engVisable = ref(false);
const searchSn = ref("");
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	solveFlag: 1,
	engineeringSn: ""
});
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
	{ type: "index", label: "序号", width: 200 },
	{
		prop: "devName",
		label: "设备名称",
		isShow: false,
		search: { el: "input" }
	},
	{
		prop: "type",
		label: "报警类型",
		isShow: false,
		search: { el: "select" },
		enum: [
			{ label: "报警", value: 1 },
			{ label: "预警", value: 2 }
		]
	},
	{
		prop: "createTime",
		label: "数据接受时间",
		isShow: false,
		search: {
			el: "date-picker",
			props: {
				type: "daterange",
				format: "YYYY-MM-DD",
				valueFormat: "YYYY-MM-DD"
				// defaultTime: defaultTime2
			}
		}
	},
	{
		prop: "equipInfo",
		label: "设备信息",
		align: "left",
		width: 400
	},
	// 多级 prop
	{ prop: "alarmInfo", label: "报警信息", align: "left", width: 800 },
	{ prop: "faultInfo", label: "故障信息", align: "left" }
];
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
	// console.log(data);
	return {
		list: data.records,
		total: Number(data.total),
		pageNo: Number(data.current),
		pageSize: Number(data.size)
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	let newParams = JSON.parse(JSON.stringify(params));
	if (newParams.createTime) {
		newParams.createTime_begin = newParams.createTime[0];
		newParams.createTime_end = newParams.createTime[1];
		delete newParams.createTime;
	}
	if (searchSn.value) {
		if (activeValue.value == "eng") {
			newParams.engineeringSn = searchSn.value;
		} else if (activeValue.value == "project") {
			newParams.projectSn = searchSn.value;
		}
	} else {
		return { result: { current: "1", pages: "1", records: [], size: "10", total: "0" } };
	}
	return towerCraneDataPage(newParams);
};

// 抽屉tab选择时
const tabsSelect = val => {
	activeValue.value = val;
	if (val == "eng") {
		getengineering();
	} else if (val == "project") {
		getProject();
	}
};
// 获取项目信息
const getProject = async () => {
	const res = await getEngineeringName();
	engList.value = [res.result];
	if (res.result) {
		searchSn.value = res.result.projectSn;
	}
	proTable.value.getTableList();
	console.log(res);
};
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;
	}
	proTable.value.getTableList();
	console.log(res);
};
// 点击抽屉的工程名称更新页面
const onUpdate = async row => {
	if (activeValue.value == "eng") {
		searchSn.value = row.engineeringSn;
	} else if (activeValue.value == "project") {
		searchSn.value = row.projectSn;
	}
	proTable.value.getTableList();
	ElMessage.success("页面已更新");
};
onMounted(() => {
	getengineering();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>