2024-01-30 18:15:05 +08:00

218 lines
6.2 KiB
Vue

<template>
<!-- 报警信息 -->
<vue-scroll style="height: 100%">
<div class="alarmInfo">
<div class="title whiteBlock">
<el-form :inline="true" size="medium" 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.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 towerList"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('message.lifter.alarmTime')">
<el-date-picker
v-model="time"
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>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" plain>{{
$t("message.lifter.demand")
}}</el-button>
<el-button type="warning" plain @click="refreshBtn">{{
$t("message.lifter.refresh")
}}</el-button>
</el-form-item>
</el-form>
</div>
<div class="content whiteBlock">
<el-table
:data="tableData"
class="tables"
style="width: 100%"
height="600px"
>
<!-- <el-table-column prop="devName" :label="$t('message.lifter.devName')">
</el-table-column> -->
<!-- 设备名称 -->
<el-table-column prop="devName" :label="$t('message.unload.devName')"> </el-table-column>
<!-- 报警类型 -->
<el-table-column prop="alarmType" :label="$t('message.unload.alarmType')"> </el-table-column>
<!-- <el-table-column prop="alarmLevel" label="报警等级">
<template slot-scope="scope">
<div>
{{
scope.row.alarmLevel == 1
? '紧急告警'
: scope.row.alarmLevel == 2
? '重要告警'
: scope.row.alarmLevel == 3
? '次要告警'
: scope.row.alarmLevel == 4
? '提示告警'
: ''
}}
</div>
</template>
</el-table-column> -->
<el-table-column prop="status" label="报警等级">
<template slot-scope="scope">
<div>
{{
scope.row.status == 1
? '严重'
: scope.row.status == 2
? '较重'
: scope.row.status == 3
? '一般'
: ''
}}
</div>
</template>
</el-table-column>
<!-- 载重 -->
<el-table-column prop="loading" :label="$t('message.unload.load')"> </el-table-column>
<!-- 位移 -->
<el-table-column prop="displacement" :label="$t('message.unload.displacement')"> </el-table-column>
<!-- X倾角 -->
<el-table-column prop="xdipAngle" :label="$t('message.unload.XDip')+'(°)'"> </el-table-column>
<!-- Y倾角 -->
<el-table-column prop="ydipAngle" :label="$t('message.unload.YDip')+'(°)'"> </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="Number(total)"
background
></el-pagination>
</div>
</div>
</vue-scroll>
</template>
<script>
import {
getUnloadListApi,
getUpdateAlarmListApi,
} from "@/assets/js/api/unloadManage";
export default {
data() {
return {
projectSn: "",
towerList: [],
devSn: "",
time: [],
pageNo: 1,
pageSize: 10,
total: 0,
tableData: [],
};
},
created() {
this.projectSn = this.$store.state.projectSn;
this.getTowerList();
this.getListData();
},
methods: {
//获取设备下拉
getTowerList() {
let data = {
projectSn: this.projectSn,
};
getUnloadListApi(data).then((res) => {
if (res.code == 200) {
this.towerList = res.result;
}
});
},
//查询数据
getListData() {
let data = {
startTime: this.time.length > 0 ? this.time[0] : "",
endTime: this.time.length > 0 ? this.time[1] : "",
pageNo: this.pageNo,
pageSize: this.pageSize,
projectSn: this.projectSn,
devSn: this.devSn,
};
getUpdateAlarmListApi(data).then((res) => {
if (res.code == 200) {
this.tableData = res.result.records;
this.total = res.result.total;
}
});
},
//查询数据
onSubmit() {
this.getListData();
},
//刷新
refreshBtn() {
this.time = [];
this.pageNo = 1;
this.pageSize = 10;
this.devSn = "";
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;
}
}
</style>