424 lines
13 KiB
Vue
424 lines
13 KiB
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>
|