422 lines
13 KiB
Vue
422 lines
13 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 :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="getMaintenanceList" plain>{{
|
||
|
|
$t("message.lifter.demand")
|
||
|
|
}}</el-button>
|
||
|
|
<el-button type="warning" plain @click="refresh">{{
|
||
|
|
$t("message.lifter.refresh")
|
||
|
|
}}</el-button>
|
||
|
|
<el-button type="primary" @click="addMaintenanceBtn">{{
|
||
|
|
$t("message.videoManage.add")
|
||
|
|
}}</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="devSn" :label="$t('message.lifter.devNumber')">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="maintenanceUnit"
|
||
|
|
:label="$t('message.lifter.maintenanceUnit')"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="personLiable"
|
||
|
|
:label="$t('message.lifter.maintenanceSupervisor')"
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="maintenanceTime"
|
||
|
|
: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="maintenanceStatus"
|
||
|
|
:label="$t('message.lifter.maintenanceState')"
|
||
|
|
>
|
||
|
|
<template slot-scope="scope">
|
||
|
|
{{ scope.row.maintenanceStatus == 1 ? "正常" : "不正常" }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="maintenanceImage" label="维保照片">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<img
|
||
|
|
:src="fileUrl + scope.row.maintenanceImage"
|
||
|
|
style="width: 40px; heigth: auto"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<!-- <el-table-column
|
||
|
|
prop="maintenanceRecord"
|
||
|
|
:label="$t('message.lifter.maintenanceRecord')"
|
||
|
|
>
|
||
|
|
</el-table-column> -->
|
||
|
|
<el-table-column prop="remark" :label="$t('message.lifter.describe')">
|
||
|
|
</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"
|
||
|
|
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 {
|
||
|
|
getTowerListApi,
|
||
|
|
getMaintenanceListApi,
|
||
|
|
getManagementInfoListApi,
|
||
|
|
addMaintenanceRecordApi,
|
||
|
|
} from "@/assets/js/api/towerCrane";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
projectSn: "",
|
||
|
|
towerList: [],
|
||
|
|
devSn: "",
|
||
|
|
time: [],
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 0,
|
||
|
|
tableData: [],
|
||
|
|
uploadUrl: "",
|
||
|
|
fileUrl: "",
|
||
|
|
dialogVisible: false,
|
||
|
|
managementInfoList: [],
|
||
|
|
maintenanceForm: {
|
||
|
|
devSn: "",
|
||
|
|
devType: 1,
|
||
|
|
maintenanceTime: "",
|
||
|
|
maintenanceStatus: "",
|
||
|
|
personLiable: "",
|
||
|
|
maintenanceUnit: "",
|
||
|
|
remark: "",
|
||
|
|
maintenanceImage: "",
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
devSn: [{ required: true, message: "请选择设备", trigger: "change" }],
|
||
|
|
maintenanceStatus: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: "请选择设备维保后状态",
|
||
|
|
trigger: "change",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
maintenanceTime: [
|
||
|
|
{ required: true, message: "请选择维保时间", trigger: "change" },
|
||
|
|
],
|
||
|
|
personLiable: [
|
||
|
|
{ required: true, message: "请选择维保人", trigger: "change" },
|
||
|
|
],
|
||
|
|
maintenanceImage: [
|
||
|
|
{ required: true, message: "请上传图片", trigger: "change" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
created() {
|
||
|
|
this.projectSn = this.$store.state.projectSn;
|
||
|
|
this.uploadUrl = this.$store.state.UPLOADURL;
|
||
|
|
this.fileUrl = this.$store.state.FILEURL;
|
||
|
|
this.getTowerList();
|
||
|
|
this.getMaintenanceList();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
//获取设备下拉
|
||
|
|
getTowerList() {
|
||
|
|
let data = {
|
||
|
|
projectSn: this.projectSn,
|
||
|
|
};
|
||
|
|
getTowerListApi(data).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.towerList = res.result;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
//获取维保列表
|
||
|
|
getMaintenanceList() {
|
||
|
|
let data = {
|
||
|
|
devType: 1,
|
||
|
|
projectSn: this.projectSn,
|
||
|
|
devSn: this.devSn,
|
||
|
|
pageNo: this.pageNo,
|
||
|
|
pageSize: this.pageSize,
|
||
|
|
};
|
||
|
|
getMaintenanceListApi(data).then((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.getMaintenanceList();
|
||
|
|
},
|
||
|
|
//新增按钮
|
||
|
|
addMaintenanceBtn() {
|
||
|
|
this.dialogVisible = true;
|
||
|
|
this.getManagementInfoList();
|
||
|
|
setTimeout(() => {
|
||
|
|
this.$refs.maintenanceForm.clearValidate();
|
||
|
|
}, 200);
|
||
|
|
},
|
||
|
|
//关闭弹窗前
|
||
|
|
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.getMaintenanceList();
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
this.pageNo = val;
|
||
|
|
this.getMaintenanceList();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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>
|