2022-06-08 14:51:11 +08:00

241 lines
9.6 KiB
Vue

<template>
<!-- 报警数据 -->
<div class="alarmInfo">
<div class="content whiteBlock">
<el-table
:data="tableData"
class="tables"
style="width: 100%"
height="650"
>
<!-- 设备名称 -->
<el-table-column align="center" prop="devName" :label="$t('message.towerCrane.equipmentName')">
</el-table-column>
<!-- 设备编号 -->
<el-table-column align="center" width="180px" prop="nutHostId" :label="$t('message.towerCrane.equipmentNumber')">
</el-table-column>
<!-- 螺母数 -->
<el-table-column align="center" width="180px" prop="afterAnalysisData.nutNum" :label="$t('message.towerCrane.numberOfNuts')">
</el-table-column>
<!-- 离线数量 -->
<el-table-column
prop="afterAnalysisData.offLineNum"
:label="$t('message.towerCrane.offlineQuantity')"
align="center"
>
</el-table-column>
<!-- 预警数量 -->
<el-table-column
prop="afterAnalysisData.alarmNum"
:label="$t('message.towerCrane.earlyWarningQuantity')"
align="center"
>
</el-table-column>
<!-- 操作 -->
<el-table-column
prop="dipYAlarm"
:label="$t('message.towerCrane.operation')"
align="center"
>
<template slot-scope="scope">
<span @click="nutDetails(scope.row.afterAnalysisData)" style="color: #5181f6;cursor:pointer;">
<!-- 查看详情 -->
{{ $t('message.towerCrane.viewDetails') }}
</span>
</template>
</el-table-column>
<!-- <el-table-column prop="date" :label="$t('message.lifter.reportTime')"> </el-table-column> -->
<!-- <el-table-column
prop="maintenanceRecord"
:label="$t('message.lifter.maintenanceRecord')"
>
</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>
<!-- 螺母信息 -->
<el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible" :before-close="handleClose" :title="$t('message.towerCrane.nutInformation')">
<vue-scroll style="height: 100%">
<el-table
:data="details"
class="tables"
style="width: 100%"
height="650"
>
<!-- 设备编号 -->
<el-table-column align="center" prop="nutNo" :label="$t('message.towerCrane.equipmentNumber')">
</el-table-column>
<!-- 是否在线 -->
<el-table-column align="center" prop="onLine" :label="$t('message.towerCrane.isOnline')">
<template slot-scope="scope">
<!-- 在线':'离线 -->
<span>{{scope.row.onLine == 1? $t('message.towerCrane.onLine') : $t('message.towerCrane.offLine') }}</span>
</template>
</el-table-column>
<!-- 是否预警 -->
<el-table-column align="center" prop="alarm" :label="$t('message.towerCrane.alertOrNot')">
<template slot-scope="scope">
<!-- '正常':'预警' -->
<span>{{scope.row.alarm == 0? $t('message.towerCrane.normal') : $t('message.towerCrane.earlyWarning') }}</span>
</template>
</el-table-column>
</el-table>
</vue-scroll>
</el-dialog>
</div>
</template>
<script>
import {
selectTowerNutByNutHostIdApi,//通过id查询螺栓信息
selectTowerNutListApi//列表
} from "@/assets/js/api/towerCrane";
export default {
props:['sn'],
data() {
return {
projectSn: "",
towerList: [],
devSn: "",
time: [],
pageNo: 1,
pageSize: 10,
total: 0,
tableData: [],
uploadUrl: "",
fileUrl: "",
dialogVisible: false,
managementInfoList: [],
maintenanceForm: {
devSn: "",
devType: 3,
maintenanceTime: "",
maintenanceStatus: "",
personLiable: "",
maintenanceUnit: "",
remark: "",
maintenanceImage: "",
},
value1:"",//开始结束时间
details:''
};
},
created() {
this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
this.uploadUrl = this.$store.state.UPLOADURL;
this.fileUrl = this.$store.state.FILEURL;
this.selectTowerNutListApi()
},
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: {
handleClose(){
this.dialogVisible = false
},
//监听时间选择
selectTime(val){
// console.log(this.transformTimestamp(this.value1[0]));
// console.log(val);
// console.log(this.value1);
},
//获取详情
nutDetails(obj){
this.dialogVisible = true
this.details = obj.list
console.log(this.details);
},
//获取螺母列表
selectTowerNutListApi() {
let data = {
projectSn: this.projectSn,
};
selectTowerNutListApi(data).then((res) => {
console.log(res.result);
if (res.code == 200) {
res.result.forEach(item => {
item.afterAnalysisData = JSON.parse(item.afterAnalysisData)
})
this.tableData = res.result;
}
});
},
//刷新
refresh() {
this.devSn = "";
this.pageNo = 1;
this.pageSize = 10;
this.value1 = ""
this.getGantryCraneAlarmList();
},
handleSizeChange(val) {
this.pageSize = val;
this.getGantryCraneAlarmList();
},
handleCurrentChange(val) {
this.pageNo = val;
this.getGantryCraneAlarmList();
},
},
};
</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: 100%;
// background-color: #ffffff;
}
}
.demo-ruleForm {
width: 90%;
}
.dialog_content{
margin: 0 20px;
}
.dialog-footer{
display: flex;
justify-content: flex-end;
}
</style>