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

<template>
	<div class="entire-box" v-waterMarker>
		<layoutTop></layoutTop>
		<div class="operate-box">
			<div class="alarm-data">
				<LeftMenu
					v-model="alarmActive"
					:tabs="['项目名称', '工程名称']"
					:records="records"
					:pageable="alarmPages"
					class="LeftMenu"
					@search="onSearchInput"
					@change-page="onCurChange"
				>
					<template #default="{ data }">
						<div class="leftProject" @click="onSearch(data)">
							<span class="projectName">{{ data.projectName || data.engineeringName }}</span>
							<div class="leftMenu_item flx-justify-between">
								<div class="flx-justify-between">
									<img src="@/assets/images/AIwaring/升降机.png" alt="" />
									<span class="middleSize">接入升降机总数：{{ data.deviceNum ? data.deviceNum : 0 }}</span>
								</div>
								<div>
									<img src="@/assets/images/AIwaring/报警.png" alt="" />
									<span class="middleSize">今日报警次数：{{ data.alarmNum ? data.alarmNum : 0 }}</span>
								</div>
							</div>

							<!-- <div class="bottom_item flx-justify-between" style="margin-top: 6px">
								<div>
									<span class="bottomSize"
										>今日待整改问题：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.questionNum }}</span
									>
								</div>
								<div>
									<span class="bottomSize"
										>今日已整改问题：{{ data.aiAlarmStat === null ? 0 : parse(data.aiAlarmStat)?.solveQuestionNum }}</span
									>
								</div>
							</div> -->
						</div>
					</template>
				</LeftMenu>
			</div>
			<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="" />
						<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.maxHeight ? equipInfo.maxHeight : 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 :title="equipInfo.filingNumber">备案编号: {{ equipInfo.filingNumber ? equipInfo.filingNumber : "" }}</span>
							<span>安装日期: {{ equipInfo.installTime ? equipInfo.installTime : "" }}</span>
							<span :title="equipInfo.devNumber">终端编号: {{ 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="onActiveCurChange"
				>
					<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 class="no-data" v-if="alarmList.length == 0">
								<img src="@/assets/images/notData.png" alt="notData" />
								<div>暂无数据</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 class="no-data" v-if="monitorList.length == 0">
								<img src="@/assets/images/notData.png" alt="notData" />
								<div>暂无数据</div>
							</div>
						</div>
					</template>
				</LeftMenuPlus>
			</div>
		</div>
	</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 LeftMenuPlus from "@/components/LeftMenuPlus/LeftMenu.vue";
import layoutTop from "@/components/layoutTop/index.vue";
import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
import {
	getLifterRealTimePojectPage,
	getLifterRealTimeEngineeringPage,
	lifterAlarmPage,
	lifterDataPage,
	lifterEquipAll,
	lifterOperationData
} from "@/api/modules/goverment";
const equipActive = ref(0);
const monitorList = ref([]);
const alarmList = ref([]);
const equipList = ref([]);
const equipInfo = ref({});
const records = ref([]);
const alarmActive = ref(0);
const leftMenuSearchForm = ref({
	name: ""
});
const searchForm = ref({
	timeRange: []
});
const active = ref(0);
const alarmPages = ref({
	pageNo: 1,
	pageSize: 10,
	total: 0
});
const pages = ref({
	pageNo: 1,
	pageSize: 10,
	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"
	}
]);
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 getEquipList = async () => {
	let requestData = {} as any;
	if (alarmActive.value == 0) {
		requestData.projectSn = searchSn.value;
	} else {
		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 {
			equipInfo.value = {};
			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 getMonitorList = async () => {
	let requestData = {
		pageNo: pages.value.pageNo,
		pageSize: pages.value.pageSize,
		devId: equipInfo.value.id
	} as any;
	if (alarmActive.value == 0) {
		requestData.projectSn = searchSn.value;
	} else {
		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(requestData, "历史监测信息");
	// console.log(res);
	if (searchSn.value !== "" && 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;
	if (alarmActive.value == 0) {
		requestData.projectSn = searchSn.value;
	} else {
		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 (searchSn.value !== "" && 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;
	}
};
function parse(val) {
	return val.trim() ? JSON.parse(val) : {};
}
// 页面的项目名称和工程名称的div点击事件
const onSearch = async (params: any) => {
	console.log(params);
	alarmActive.value === 0 ? (searchSn.value = params.projectSn) : (searchSn.value = params.engineeringSn);
	getEquipList();
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
};
// leftMenu页面的搜索按钮
const onSearchInput = async (params: string) => {
	leftMenuSearchForm.value.name = params;
	if (alarmActive.value === 0) {
		getProPage();
	} else {
		getEngPage();
	}
};
// leftMenu页面的分页
const onCurChange = async (params: number) => {
	alarmPages.value.pageNo = params;
	if (alarmActive.value === 0) {
		getProPage();
	} else {
		getEngPage();
	}
};
// 右侧报警数据分页
const onActiveCurChange = async (params: number) => {
	pages.value.pageNo = params;
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
};
// 右侧报警数据搜索
const search = () => {
	console.log(666);
	if (active.value === 0) {
		getAlarmList();
	} else {
		getMonitorList();
	}
};
// 获取项目名称分页
const getProPage = async () => {
	let requestData = {
		...pages.value,
		projectName: leftMenuSearchForm.value.name
	};
	const { result } = await getLifterRealTimePojectPage(requestData);
	records.value = result.records;
	pages.value.total = Number(result.total);
};
// 获取工程名称分页
const getEngPage = async () => {
	let requestData = {
		...pages.value,
		engineeringName: leftMenuSearchForm.value.name
	};
	const { result } = await getLifterRealTimeEngineeringPage(requestData);
	records.value = result.records;
	pages.value.total = +result.total;
};
watch(
	() => active.value,
	n => {
		searchForm.value.timeRange = [];
		if (n === 0) {
			getAlarmList();
		} else {
			getMonitorList();
		}
	}
);
watch(
	() => alarmActive.value,
	async (value: number) => {
		pages.value.pageNo = 1;
		pages.value.total = 0;
		leftMenuSearchForm.value.name = "";
		if (value === 0) {
			await getProPage();
			onSearch(records.value[0]);
		} else {
			await getEngPage();
			onSearch(records.value[0]);
		}
	},
	{
		deep: true
	}
);
onMounted(async () => {
	await getProPage();
	onSearch(records.value[0]);
	searchSn.value = (records.value as any)[0].projectSn;
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>