429 lines
16 KiB
Vue

<template>
<!-- 报警信息 -->
<vue-scroll style="height: 100%">
<div class="alarmInfo">
<div class="title">
<el-form
:inline="true"
size="medium"
:model="formInline"
class="demo-form-inline"
>
<!-- <el-form-item label="设备编号">
<el-input
v-model="formInline.user"
placeholder="请输入设备编号"
></el-input>
</el-form-item> -->
<!-- 报警类型 -->
<el-form-item :label="$t('message.lifter.alarmType')">
<el-select style="margin-right: 20px" v-model="selectAlarmType" clearable size="medium" :placeholder="$t('message.lifter.pleaseSelect')">
<el-option
v-for="item in alarmTypeList"
:key="item.id"
:label="item.type"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<!-- 设备名称 -->
<el-form-item :label="$t('message.lifter.devName')">
<el-select
v-model="devSn"
:placeholder="
$t('message.lifter.pleaseSelect') + $t('message.lifter.devName')
"
>
<el-option
:label="item.devName"
:value="item.devSn"
v-for="(item, index) in lifterList"
:key="index"
></el-option>
</el-select>
</el-form-item>
<!-- 报警时间 -->
<el-form-item :label="$t('message.lifter.alarmTime')">
<el-date-picker
v-model="time"
@change="getTime"
type="daterange"
value-format="yyyy-MM-dd"
:range-separator="$t('message.lifter.to')"
:start-placeholder="$t('message.lifter.startDate')"
:end-placeholder="$t('message.lifter.deadline')"
>
</el-date-picker>
<!-- to到 startDate开始日期 deadline结束日期 -->
</el-form-item>
<el-form-item>
<!-- 查询 -->
<el-button type="primary" @click="getListData" plain>{{
$t("message.lifter.demand")
}}</el-button>
<!-- 刷新 -->
<el-button type="warning" plain @click="onSubmit">{{
$t("message.lifter.refresh")
}}</el-button>
</el-form-item>
</el-form>
</div>
<div class="content">
<el-table
:data="tableData"
class="tables"
style="width: 100%"
height="600px"
>
<!-- <el-table-column prop="name" :label="$t('message.lifter.devName')"> </el-table-column>
<el-table-column prop="devNumber" :label="$t('message.lifter.devNumber')"> </el-table-column>
<el-table-column prop="name2" :label="$t('message.lifter.maintenanceUnit')"> </el-table-column>
<el-table-column prop="name2" :label="$t('message.lifter.maintenanceSupervisor')"> </el-table-column>
<el-table-column prop="name2" :label="$t('message.lifter.maintenanceTime')"> </el-table-column>
<el-table-column prop="date" :label="$t('message.lifter.reportTime')"> </el-table-column>
<el-table-column prop="status" :label="$t('message.lifter.maintenanceState')"> </el-table-column>
<el-table-column prop="name2" :label="$t('message.lifter.maintenanceRecord')"> </el-table-column>
<el-table-column prop="name2" :label="$t('message.lifter.describe')"> </el-table-column> -->
<!-- 设备名称 -->
<el-table-column prop="devName" :label="$t('message.lifter.devName')"></el-table-column>
<!-- 报警时间 -->
<el-table-column prop="addTime" width="180" :label="$t('message.lifter.alarmTime')">
<template slot-scope="scope">
{{transformTimestamp(scope.row.addTime)}}
</template>
</el-table-column>
<!-- 下限位报警 -->
<el-table-column prop="bottomAlarm" :label="$t('message.lifter.lowerLimitAlarm')">
<template slot-scope="scope">
<!-- normal 正常 alarm 报警 earlyWarning 预警 -->
<span :class="{ 'alarm_statu2' : scope.row.bottomAlarm == 1 }" >
{{ scope.row.bottomAlarm == 0? $t('message.lifter.normal') : scope.row.bottomAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 防坠器报警 -->
<el-table-column prop="fallAlarm" :label="$t('message.lifter.fallArresterAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.fallAlarm == 1 }" >
{{ scope.row.fallAlarm == 0? $t('message.lifter.normal') : scope.row.fallAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
<!-- normal 正常 alarm 报警 earlyWarning 预警 -->
</template>
</el-table-column>
<!-- <el-table-column prop="name2" label="力矩"> </el-table-column>
<el-table-column prop="name2" label="力矩比"> </el-table-column> -->
<!-- 高度报警 -->
<el-table-column prop="heightAlarm" :label="$t('message.lifter.altitudeAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.heightAlarm == 1 }" >
{{ scope.row.heightAlarm == 0? $t('message.lifter.normal') : scope.row.heightAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 1号电机报警 -->
<el-table-column prop="motor1Alarm" :label="$t('message.lifter.firstAlarm')">
<template slot-scope="scope">
<!-- normal 正常 alarm 报警 earlyWarning 预警 -->
<span :class="{ 'alarm_statu2' : scope.row.motor1Alarm == 1 }" >
{{ scope.row.motor1Alarm == 0? $t('message.lifter.normal') : scope.row.motor1Alarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 2号电机报警 -->
<el-table-column prop="motor2Alarm" :label="$t('message.lifter.secondAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.motor2Alarm == 1 }" >
{{ scope.row.motor2Alarm == 0? $t('message.lifter.normal') : scope.row.motor2Alarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 3号电机报警 -->
<el-table-column prop="motor3Alarm" :label="$t('message.lifter.thirdAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.motor3Alarm == 1 }" >
{{ scope.row.motor3Alarm == 0? $t('message.lifter.normal') : scope.row.motor3Alarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- <el-table-column prop="speed" label="运行时刻"> </el-table-column> -->
<!-- 倾角X报警 -->
<el-table-column prop="obliguityXAlarm" :label="$t('message.lifter.inclinationXAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.obliguityXAlarm == 1 }" >
{{ scope.row.obliguityXAlarm == 0? $t('message.lifter.normal') : scope.row.obliguityXAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 倾角Y报警 -->
<el-table-column prop="obliguityYAlarm" :label="$t('message.lifter.inclinationYAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.obliguityYAlarm == 1 }" >
{{ scope.row.obliguityYAlarm == 0? $t('message.lifter.normal') : scope.row.obliguityYAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 人数报警 -->
<el-table-column prop="peopleCntAlarm" :label="$t('message.lifter.numberAlarm')">
<template slot-scope="scope">
<!-- normal 正常 alarm 报警 earlyWarning 预警 -->
<span :class="{ 'alarm_statu2' : scope.row.peopleCntAlarm == 1 }" >
{{ scope.row.peopleCntAlarm == 0? $t('message.lifter.normal') : scope.row.peopleCntAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 速度报警 -->
<el-table-column prop="speedAlarm" :label="$t('message.lifter.speedAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.speedAlarm == 1 }" >
{{ scope.row.speedAlarm == 0? $t('message.lifter.normal') : scope.row.speedAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
<!-- normal 正常 alarm 报警 earlyWarning 预警 -->
</template>
</el-table-column>
<!-- 防冲顶报警 -->
<el-table-column prop="topAlarm" :label="$t('message.lifter.antiImpactRoofAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.topAlarm == 1 }" >
{{ scope.row.topAlarm == 0? $t('message.lifter.normal') : scope.row.topAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 载重报警 -->
<el-table-column prop="weightAlarm" :label="$t('message.lifter.loadAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.weightAlarm == 1 }" >
{{ scope.row.weightAlarm == 0? $t('message.lifter.normal') : scope.row.weightAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
</template>
</el-table-column>
<!-- 风速报警 -->
<el-table-column prop="windSpeedAlarm" :label="$t('message.lifter.windSpeedAlarm')">
<template slot-scope="scope">
<span :class="{ 'alarm_statu2' : scope.row.windSpeedAlarm == 1 }" >
{{ scope.row.windSpeedAlarm == 0? $t('message.lifter.normal') : scope.row.windSpeedAlarm == 1? $t('message.lifter.alarm') : $t('message.lifter.earlyWarning')}}
</span>
<!-- normal 正常 alarm 报警 earlyWarning 预警 -->
</template>
</el-table-column>
<!-- <el-table-column prop="name2" label="正常工作预警状态"> </el-table-column>
<el-table-column prop="isAlarm" label="正常工作报警状态">
<template slot-scope="scope">
{{scope.row.isAlarm==1?'是':'否'}}
</template>
</el-table-column>
<el-table-column prop="name2" label="正常工作违章状态"> </el-table-column> -->
</el-table>
<el-pagination
class="pagerBox"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNo"
:page-sizes="$store.state.PAGESIZRS"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total"
background
></el-pagination>
</div>
</div>
</vue-scroll>
</template>
<script>
import { getLifterListApi, getLifterAlarmApi } from "@/assets/js/api/lifter";
export default {
data() {
return {
projectSn: "",
lifterList: [],
devSn: "",
endTime: "",
startTime: "",
formInline: {
user: "",
region: "",
},
time: [],
pageNo: 1,
pageSize: 10,
total: 0,
tableData: [],
selectAlarmType:'',
alarmTypeList:[
{
type: this.$t('message.lifter.numberAlarm'), // 人数报警
id:1
},
{
type: this.$t('message.lifter.loadAlarm'), // 载重报警
id:2
},
{
type: this.$t('message.lifter.speedAlarm'), // 速度报警
id:3
},
{
type: this.$t('message.lifter.altitudeAlarm'), // 高度报警
id:4
},
{
type: this.$t('message.lifter.inclinationXAlarm'), // 倾角X报警
id:5
},
{
type: this.$t('message.lifter.inclinationYAlarm'), // 倾角Y报警
id:6
},
{
type: this.$t('message.lifter.windSpeedAlarm'), // 风速报警
id:7
},
{
type: this.$t('message.lifter.firstAlarm'), // 1号电机报警
id:8
},
{
type: this.$t('message.lifter.secondAlarm'), // 2号电机报警
id:9
},
{
type: this.$t('message.lifter.thirdAlarm'), // 3号电机报警
id:10
},
{
type: this.$t('message.lifter.antiImpactRoofAlarm'), // 防冲顶报警
id:11
},
{
type: this.$t('message.lifter.fallArresterAlarm'), // 防坠器报警
id:12
},
{
type: this.$t('message.lifter.lowerLimitAlarm'), // 下限位报警
id:13
}
]
};
},
created() {
this.projectSn = this.$store.state.projectSn;
this.getLifterList();
this.getListData();
},
computed:{
transformTimestamp(){
return function(timestamp){
if(timestamp){
let a = new Date(timestamp).getTime();
const date = new Date(a);
const Y = date.getFullYear() + '-';
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
const s = date.getSeconds() ; //
const dateString = Y + M + D + h + m + s;
return dateString;
}
}
},
},
methods: {
//获取设备列表下拉
getLifterList() {
let data = {
projectSn: this.projectSn,
};
getLifterListApi(data).then((res) => {
if (res.code == 200) {
this.lifterList = res.result;
}
});
},
//选择时间
getTime(val) {
if (val || val.length > 0) {
this.endTime = val[1];
this.startTime = val[0];
} else {
this.endTime = "";
this.startTime = "";
}
},
//获取列表
getListData() {
console.log(this.devSn);
let data = {
startTime: this.startTime,
endTime: this.endTime,
devSn: this.devSn,
pageNo: this.pageNo,
pageSize: this.pageSize,
projectSn: this.projectSn,
selectAlarmType:this.selectAlarmType
};
getLifterAlarmApi(data).then((res) => {
if (res.code == 200) {
console.log(res.result);
this.tableData = res.result.records;
this.total = res.result.total;
}
});
},
onSubmit() {
this.pageSize = 10;
this.pageNo = 1;
this.startTime='';
this.endTime='';
this.time=[];
this.devSn = '';
this.selectAlarmType = ''
this.getListData();
},
handleSizeChange(val) {
this.pageSize = val;
this.getListData();
},
handleCurrentChange(val) {
this.pageNo = val;
this.getListData();
},
},
};
</script>
<style lang="less" scoped>
.alarmInfo {
width: 100%;
height: 100%;
.title {
background-color: #ffffff;
padding: 0 20px;
padding-top: 17px;
height: 70px;
box-sizing: border-box;
}
.content {
margin-top: 10px;
box-sizing: border-box;
width: 100%;
height: 720px;
background-color: #ffffff;
}
.alarm_statu2{
color: #f76462;
}
}
</style>