421 lines
15 KiB
Vue
421 lines
15 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')
|
|
"
|
|
clearable
|
|
>
|
|
<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>
|
|
<el-date-picker
|
|
class="serarch_picker"
|
|
size="medium"
|
|
v-model="value1"
|
|
@change="selectTime"
|
|
type="daterange"
|
|
range-separator="-"
|
|
:start-placeholder="$t('message.lifter.startDate')"
|
|
:end-placeholder="$t('message.lifter.deadline')"
|
|
></el-date-picker>
|
|
</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="getGantryCraneAlarmList" plain>
|
|
{{
|
|
$t("message.lifter.demand")
|
|
}}
|
|
</el-button>
|
|
<el-button type="warning" plain @click="refresh">
|
|
{{
|
|
$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 align="center" prop="devName" :label="$t('message.lifter.devName')"></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
width="180px"
|
|
prop="devSn"
|
|
:label="$t('message.lifter.devNumber')"
|
|
></el-table-column>
|
|
<!-- 龙门吊报警时间 -->
|
|
<el-table-column align="center" width="180px" prop="reportTime" label="上传时间">
|
|
<template slot-scope="scope">{{transformTimestamp(scope.row.reportTime) }}</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="rotationAngle" label="回转"></el-table-column>
|
|
<el-table-column align="center" prop="weight" label="重量"></el-table-column>
|
|
<el-table-column align="center" prop="moment" label="力矩"></el-table-column>
|
|
<el-table-column align="center" prop="windSpeed" 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="Number(total)"
|
|
background
|
|
></el-pagination>
|
|
</div>
|
|
<!-- <el-dialog-->
|
|
<!-- :modal-append-to-body="false"-->
|
|
<!-- title="新增维保信息"-->
|
|
<!-- :visible.sync="dialogVisible"-->
|
|
<!-- :before-close="handleClose"-->
|
|
<!-- width="667px"-->
|
|
<!-- >-->
|
|
<!-- <div class="dialog_content">-->
|
|
<!-- <el-form-->
|
|
<!-- :model="maintenanceForm"-->
|
|
<!-- ref="maintenanceForm"-->
|
|
<!-- label-width="120px"-->
|
|
<!-- class="demo-ruleForm"-->
|
|
<!-- :rules="rules" size="medium"-->
|
|
<!-- >-->
|
|
<!-- <el-form-item label="维保设备" prop="devSn">-->
|
|
<!-- <el-select-->
|
|
<!-- v-model="maintenanceForm.devSn"-->
|
|
<!-- :placeholder="-->
|
|
<!-- $t('message.lifter.pleaseSelect') +-->
|
|
<!-- $t('message.lifter.devName')-->
|
|
<!-- "-->
|
|
<!-- style="width: 100%"-->
|
|
<!-- >-->
|
|
<!-- <el-option-->
|
|
<!-- :label="item.devName"-->
|
|
<!-- clearable-->
|
|
<!-- :value="item.devSn"-->
|
|
<!-- v-for="(item, index) in towerList"-->
|
|
<!-- :key="index"-->
|
|
<!-- style="width: 100%"-->
|
|
<!-- ></el-option>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="维保后状态" prop="maintenanceStatus">-->
|
|
<!-- <el-select-->
|
|
<!-- v-model="maintenanceForm.maintenanceStatus"-->
|
|
<!-- :placeholder="-->
|
|
<!-- $t('message.lifter.pleaseSelect') +-->
|
|
<!-- $t('message.lifter.devName')-->
|
|
<!-- "-->
|
|
<!-- style="width: 100%"-->
|
|
<!-- >-->
|
|
<!-- <el-option label="正常" :value="1"></el-option>-->
|
|
<!-- <el-option label="不正常" :value="0"></el-option>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="维保时间" prop="maintenanceTime">-->
|
|
<!-- <el-date-picker-->
|
|
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
|
|
<!-- v-model="maintenanceForm.maintenanceTime"-->
|
|
<!-- type="datetime"-->
|
|
<!-- placeholder="选择日期时间"-->
|
|
<!-- style="width: 100%"-->
|
|
<!-- >-->
|
|
<!-- </el-date-picker>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="维保人" prop="personLiable">-->
|
|
<!-- <el-input-->
|
|
<!-- v-model="maintenanceForm.personLiable"-->
|
|
<!-- placeholder="请输入"-->
|
|
<!-- ></el-input>-->
|
|
<!-- <!– <el-select-->
|
|
<!-- v-model="maintenanceForm.personLiable"-->
|
|
<!-- :placeholder="-->
|
|
<!-- $t('message.lifter.pleaseSelect') +-->
|
|
<!-- $t('message.lifter.devName')-->
|
|
<!-- "-->
|
|
<!-- style="width: 100%"-->
|
|
<!-- >-->
|
|
<!-- <el-option-->
|
|
<!-- :label="item.workerName"-->
|
|
<!-- :value="item.id"-->
|
|
<!-- v-for="(item, index) in managementInfoList"-->
|
|
<!-- :key="index"-->
|
|
<!-- ></el-option>-->
|
|
<!-- </el-select> –>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="维保单位" prop="maintenanceUnit">-->
|
|
<!-- <el-input-->
|
|
<!-- v-model="maintenanceForm.maintenanceUnit"-->
|
|
<!-- placeholder="请输入"-->
|
|
<!-- ></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="描述" prop="remark">-->
|
|
<!-- <el-input-->
|
|
<!-- v-model="maintenanceForm.remark"-->
|
|
<!-- placeholder="请输入"-->
|
|
<!-- ></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item label="上传图片" prop="maintenanceImage">-->
|
|
<!-- <el-upload-->
|
|
<!-- :action="uploadUrl"-->
|
|
<!-- list-type="picture-card"-->
|
|
<!-- name="files"-->
|
|
<!-- :show-file-list="false"-->
|
|
<!-- :on-success="handleAvatarSuccess"-->
|
|
<!-- >-->
|
|
<!-- <img-->
|
|
<!-- v-if="maintenanceForm.maintenanceImage"-->
|
|
<!-- :src="fileUrl + maintenanceForm.maintenanceImage"-->
|
|
<!-- style="width: 100%; height: 100%"-->
|
|
<!-- />-->
|
|
<!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
<!-- </el-upload>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-form>-->
|
|
<!-- <span slot="footer" class="dialog-footer">-->
|
|
<!-- <el-button @click="dialogVisible = false" size="medium">取 消</el-button>-->
|
|
<!-- <el-button type="primary" @click="saveBtn" size="medium">确 定</el-button>-->
|
|
<!-- </span>-->
|
|
<!-- </div>-->
|
|
<!-- </el-dialog>-->
|
|
</div>
|
|
</vue-scroll>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getGantryCranelistApi,
|
|
getGantryCraneAlarmListApi,
|
|
getManagementInfoListApi,
|
|
addMaintenanceRecordApi
|
|
} from "@/assets/js/api/gantryCrane";
|
|
import {
|
|
getCranePageApi,
|
|
gettrucklistApi
|
|
} from "@/assets/js/api/projectLevel/callData.js";
|
|
export default {
|
|
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: "" //开始结束时间
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.uploadUrl = this.$store.state.UPLOADURL;
|
|
this.fileUrl = this.$store.state.FILEURL;
|
|
console.log(this.$store.state.FILEURL);
|
|
this.getTowerList();
|
|
this.getGantryCraneAlarmList();
|
|
},
|
|
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: {
|
|
//监听时间选择
|
|
selectTime(val) {
|
|
// console.log(this.transformTimestamp(this.value1[0]));
|
|
// console.log(val);
|
|
// console.log(this.value1);
|
|
},
|
|
//获取设备下拉
|
|
getTowerList() {
|
|
let data = {
|
|
projectSn: this.projectSn
|
|
};
|
|
gettrucklistApi(data).then(res => {
|
|
if (res.code == 200) {
|
|
this.towerList = res.result;
|
|
}
|
|
});
|
|
},
|
|
|
|
//获取报警数据列表
|
|
getGantryCraneAlarmList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
devSn: this.devSn,
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
reportTime_begin: !this.value1
|
|
? undefined
|
|
: this.transformTimestamp(this.value1[0]),
|
|
reportTime_end: !this.value1
|
|
? undefined
|
|
: this.transformTimestamp(this.value1[1])
|
|
};
|
|
getCranePageApi(data).then(res => {
|
|
// console.log(res);
|
|
if (res.code == 200) {
|
|
this.tableData = res.result.records;
|
|
this.total = res.result.total;
|
|
}
|
|
});
|
|
},
|
|
|
|
//刷新
|
|
refresh() {
|
|
this.devSn = "";
|
|
this.pageNo = 1;
|
|
this.pageSize = 10;
|
|
this.value1 = "";
|
|
this.getGantryCraneAlarmList();
|
|
},
|
|
// //关闭弹窗前
|
|
// handleClose() {
|
|
// this.dialogVisible = false;
|
|
// },
|
|
// 文件上传成功
|
|
// handleAvatarSuccess(file) {
|
|
// if (file.data.length > 0) {
|
|
// this.maintenanceForm.maintenanceImage = file.data[0].imageUrl;
|
|
// }
|
|
// },
|
|
|
|
//获取维保人
|
|
// getManagementInfoList() {
|
|
// let data = {
|
|
// projectSn: this.projectSn,
|
|
// };
|
|
// getManagementInfoListApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// this.managementInfoList = res.result;
|
|
// }
|
|
// });
|
|
// },
|
|
|
|
// //保存按钮
|
|
// saveBtn() {
|
|
// this.$refs["maintenanceForm"].validate((valid) => {
|
|
// if (valid) {
|
|
// let data = this.maintenanceForm;
|
|
// data.projectSn = this.projectSn;
|
|
// addMaintenanceRecordApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// this.dialogVisible = false;
|
|
// this.getMaintenanceList();
|
|
// }
|
|
// });
|
|
// } else {
|
|
// return false;
|
|
// }
|
|
// });
|
|
// },
|
|
|
|
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: 720px;
|
|
// background-color: #ffffff;
|
|
}
|
|
}
|
|
.demo-ruleForm {
|
|
width: 90%;
|
|
}
|
|
.dialog_content {
|
|
margin: 0 20px;
|
|
}
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|