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.height ? row.height : 0 }}m</span>
				<br />
				<span>停止运行高度: {{ row.stopHeight ? row.stopHeight : 0 }}m</span>
				<br />
				<span>高度比: {{ row.heightRatio ? row.heightRatio : 0 }}m</span>
				<br />
				<span>载重: {{ row.loading ? row.loading : 0 }}kg</span>
				<br />
				<span>最大载重比: {{ row.loadRatio ? row.loadRatio : 0 }}%</span>
				<br />
				<span>倾斜度: {{ row.biasAngle ? row.angle : 0 }}°</span>
				<br />
				<span>倾角X: {{ row.dipAngleX ? row.dipAngleX : 0 }}°</span>
				<br />
				<span>倾角Y: {{ row.dipAngleY ? row.dipAngleY : 0 }}°</span>
				<br />
				<span>楼层数: {{ row.floorNum ? row.floorNum : 0 }}</span>
				<br />
				<span>人数: {{ row.peopleNumber ? row.peopleNumber : 0 }}</span>
				<br />
				<span>风速: {{ row.windSpeed ? row.windSpeed : 0 }}m/s</span>
				<br />
				<span>前门状态: {{ row.frontDoorState == 1 ? "关" : row.frontDoorState == 2 ? "开" : "" }}</span>
				<br />
				<span>运行状态: {{ row.runningState == 1 ? "上升" : row.runningState == 2 ? "下降" : "" }}</span>
				<br />
				<span>数据接受时间: {{ row.createTime ? row.createTime : "" }}</span>
				<br />
			</template>
			<template #alarmInfo="{ row }">
				<div class="table-data">
					<span
						>下限位报警:
						<span :style="{ color: row.bottomAlarm == 0 ? '#333' : '#E70000' }">{{
							row.bottomAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>防坠器报警:
						<span :style="{ color: row.fallAlarm == 0 ? '#333' : '#E70000' }">{{
							row.fallAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>高度报警:
						<span :style="{ color: row.heightAlarm == 0 ? '#333' : '#E70000' }">{{
							row.heightAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>高度预警:
						<span :style="{ color: row.heightPreAlarm == 0 ? '#333' : '#E70000' }">{{
							row.heightPreAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>1号电机报警:
						<span :style="{ color: row.motor1Alarm == 0 ? '#333' : '#E70000' }">{{
							row.motor1Alarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>2号电机报警:
						<span :style="{ color: row.motor2Alarm == 0 ? '#333' : '#E70000' }">{{
							row.motor2Alarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>3号电机报警:
						<span :style="{ color: row.motor3Alarm == 0 ? '#333' : '#E70000' }">{{
							row.motor3Alarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>无任何报警:
						<span :style="{ color: row.noAlarm == 0 ? '#E70000' : '#333' }">{{
							row.noAlarm == 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
						>无任何预警:
						<span :style="{ color: row.noPreAlarm == 0 ? '#E70000' : '#333' }">{{
							row.noPreAlarm == 0 ? "有预警" : "无任何预警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>倾角X预警:
						<span :style="{ color: row.obliquityXPreAlarm == 0 ? '#333' : '#E70000' }">{{
							row.obliquityXPreAlarm == 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.peopleCntAlarm == 0 ? '#333' : '#E70000' }">{{
							row.peopleCntAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>倾角Y预警:
						<span :style="{ color: row.obliquityYPreAlarm == 0 ? '#333' : '#E70000' }">{{
							row.obliquityYPreAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>速度预警:
						<span :style="{ color: row.speedPreAlarm == 0 ? '#333' : '#E70000' }">{{
							row.speedPreAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>防冲顶报警:
						<span :style="{ color: row.topAlarm == 0 ? '#333' : '#E70000' }">{{
							row.topAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>载重报警:
						<span :style="{ color: row.weightAlarm == 0 ? '#333' : '#E70000' }">{{
							row.weightAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>速度报警:
						<span :style="{ color: row.speedAlarm == 0 ? '#333' : '#E70000' }">{{
							row.speedAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>风速预警:
						<span :style="{ color: row.windSpeedPreAlarm == 0 ? '#333' : '#E70000' }">{{
							row.windSpeedPreAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
					<span
						>载重预警:
						<span :style="{ color: row.weightPreAlarm == 0 ? '#333' : '#E70000' }">{{
							row.weightPreAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>风速报警:
						<span :style="{ color: row.windSpeedAlarm == 0 ? '#333' : '#E70000' }">{{
							row.windSpeedAlarm == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
			</template>
			<template #faultInfo="{ row }">
				<div class="table-data">
					<span
						>风速传感器故障:
						<span :style="{ color: row.windSpeedError == 0 ? '#333' : '#E70000' }">{{
							row.windSpeedError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>楼层呼叫装置故障:
						<span :style="{ color: row.wirelessError == 0 ? '#333' : '#E70000' }">{{
							row.wirelessError == 0 ? "正常" : "报警"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>楼层传感器故障:
						<span :style="{ color: row.floorError == 0 ? '#333' : '#E70000' }">{{
							row.floorError == 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.idError == 0 ? '#333' : '#E70000' }">{{
							row.idError == 0 ? "无故障" : "有故障"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>无任何外设故障:
						<span :style="{ color: row.noError == 0 ? '#E70000' : '#333' }">{{
							row.noError == 0 ? "有外设故障" : "无任何外设故障"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>倾角X传感器故障:
						<span :style="{ color: row.obliquityXError == 0 ? '#333' : '#E70000' }">{{
							row.obliquityXError == 0 ? "无故障" : "有故障"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>倾角Y传感器故障:
						<span :style="{ color: row.obliquityYError == 0 ? '#333' : '#E70000' }">{{
							row.obliquityYError == 0 ? "无故障" : "有故障"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>人数识别装置故障:
						<span :style="{ color: row.peopleCntError == 0 ? '#333' : '#E70000' }">{{
							row.peopleCntError == 0 ? "无故障" : "有故障"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>载重传感器故障:
						<span :style="{ color: row.windSpeedAlarm == 0 ? '#333' : '#E70000' }">{{
							row.windSpeedAlarm == 0 ? "无故障" : "有故障"
						}}</span></span
					>
				</div>
				<br />
				<div class="table-data">
					<span
						>速度传感器故障:
						<span :style="{ color: row.speedError == 0 ? '#333' : '#E70000' }">{{
							row.speedError == 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, lifterDataPage } 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 lifterDataPage(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>