517 lines
15 KiB
Vue
517 lines
15 KiB
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/towerImg.png" 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="other-info">
|
|
<span :title="equipInfo.devNumber">设备编号: {{ equipInfo.devNumber ? equipInfo.devNumber : "" }}</span>
|
|
<span>安装日期: {{ equipInfo.installTime ? equipInfo.installTime : "" }}</span>
|
|
<!-- <span>终端编号: TD2374693</span> -->
|
|
<span>更新时间: {{ equipInfo.realTime ? equipInfo.realTime : "" }}</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.angle ? item.angle : 0 }}°</span>
|
|
</div>
|
|
<div class="info-list-item-aspect-item">
|
|
<span>倾角</span>
|
|
<span>{{ item.obliquity ? item.obliquity : 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.obliquityX ? item.obliquityX : 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.obliquityY ? item.obliquityY : 0 }}°</span>
|
|
</div>
|
|
</div>
|
|
<div class="info-list-item-aspect">
|
|
<div class="info-list-item-aspect-item">
|
|
<span>载重</span>
|
|
<span>{{ item.loading ? item.loading : 0 }}kg</span>
|
|
</div>
|
|
<div class="info-list-item-aspect-item">
|
|
<span>幅度</span>
|
|
<span>{{ item.ranger ? item.ranger : 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 {
|
|
getRealTimepPojectPage,
|
|
getRealTimeEngineeringPage,
|
|
towerCraneAlarmPage,
|
|
towerCraneDataPage,
|
|
towerCraneEquipAll,
|
|
operationData
|
|
} 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: "N·M",
|
|
img: new URL("@/assets/images/onlineSupervision/力矩.png", import.meta.url).href,
|
|
prop: "torque"
|
|
},
|
|
{
|
|
name: "载重",
|
|
value: 10,
|
|
unit: "kg",
|
|
img: new URL("@/assets/images/onlineSupervision/载重.png", import.meta.url).href,
|
|
prop: "loading"
|
|
},
|
|
{
|
|
name: "风速",
|
|
value: 10,
|
|
unit: "m/s",
|
|
img: new URL("@/assets/images/onlineSupervision/风速.png", import.meta.url).href,
|
|
prop: "windSpeed"
|
|
},
|
|
{
|
|
name: "高度",
|
|
value: 10,
|
|
unit: "m",
|
|
img: new URL("@/assets/images/onlineSupervision/高度.png", import.meta.url).href,
|
|
prop: "height"
|
|
},
|
|
{
|
|
name: "回转角度",
|
|
value: 10,
|
|
unit: "°",
|
|
img: new URL("@/assets/images/onlineSupervision/回转角度.png", import.meta.url).href,
|
|
prop: "angle"
|
|
},
|
|
{
|
|
name: "塔身倾角",
|
|
value: 10,
|
|
unit: "°",
|
|
img: new URL("@/assets/images/onlineSupervision/塔身倾角.png", import.meta.url).href,
|
|
prop: "obliquity"
|
|
},
|
|
{
|
|
name: "幅度",
|
|
value: 10,
|
|
unit: "m",
|
|
img: new URL("@/assets/images/onlineSupervision/幅度.png", import.meta.url).href,
|
|
prop: "ranger"
|
|
}
|
|
]);
|
|
const searchSn = ref("");
|
|
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
|
const proTable = ref();
|
|
|
|
// 报警项目转换
|
|
const alarmTransform = (obj: any) => {
|
|
let str = "";
|
|
if (obj["environmentAlarm"] == 1) str += "环境防碰撞报警,";
|
|
if (obj["forceAlarm"] == 1) str += "力矩报警,";
|
|
if (obj["heightLowerAlarm"] == 1) str += "高度下限位报警,";
|
|
if (obj["heightUpperAlarm"] == 1) str += "高度上限位报警,";
|
|
if (obj["maxRangeAlarm"] == 1) str += "幅度外限位报警,";
|
|
if (obj["minRangeAlarm"] == 1) str += "幅度内限位报警,";
|
|
if (obj["multiAntiCollisionAlarm"] == 1) str += "多机防撞报警,";
|
|
if (obj["negAngleAlarm"] == 1) str += "逆时针回转限位报警,";
|
|
if (obj["obliquityAlarm"] == 1) str += "倾角报警,";
|
|
if (obj["posAngleAlarm"] == 1) str += "顺时针回转限位报警,";
|
|
if (obj["standardHighAlarm"] == 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 towerCraneEquipAll(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 operationData(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 towerCraneDataPage(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;
|
|
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 towerCraneAlarmPage(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;
|
|
}
|
|
};
|
|
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 getRealTimepPojectPage(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 getRealTimeEngineeringPage(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>
|