528 lines
16 KiB
Vue
528 lines
16 KiB
Vue
<template>
|
|
<!-- 设备维保 -->
|
|
<vue-scroll style="height: 100%">
|
|
<div class="fullHeight">
|
|
<div class="searchBox 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')">
|
|
<!-- pleaseSelect 请选择 -->
|
|
<el-select
|
|
v-model="devSn"
|
|
:placeholder="
|
|
$t('message.lifter.pleaseSelect') + $t('message.lifter.devName')
|
|
"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in lifterList"
|
|
:key="index"
|
|
:label="item.devName"
|
|
:value="item.devSn"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="维保日期">
|
|
<el-date-picker
|
|
@change="getTime"
|
|
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="
|
|
pageNo = 1
|
|
pageSize = 10
|
|
getListData()
|
|
"
|
|
plain
|
|
>{{ $t('message.lifter.demand') }}</el-button
|
|
>
|
|
<!-- 刷新 -->
|
|
<el-button type="warning" plain @click="onSubmit">{{
|
|
$t('message.lifter.refresh')
|
|
}}</el-button>
|
|
<!-- 新增 -->
|
|
<el-button type="primary" @click="addBtn">{{
|
|
$t('message.videoManage.add')
|
|
}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="table_wrap 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" prop="devSn" :label="$t('message.lifter.devNumber')">
|
|
</el-table-column>
|
|
<!-- 维保单位 -->
|
|
<el-table-column
|
|
align="center"
|
|
prop="maintenanceUnit"
|
|
:label="$t('message.lifter.maintenanceUnit')"
|
|
>
|
|
</el-table-column>
|
|
<!-- 维保负责人 -->
|
|
<el-table-column
|
|
align="center"
|
|
prop="personLiable"
|
|
:label="$t('message.lifter.maintenanceSupervisor')"
|
|
>
|
|
</el-table-column>
|
|
<!-- 维保时间 -->
|
|
<el-table-column
|
|
align="center"
|
|
prop="maintenanceTime"
|
|
:label="$t('message.lifter.maintenanceTime')"
|
|
>
|
|
</el-table-column>
|
|
<!-- 维保状态 -->
|
|
<el-table-column
|
|
align="center"
|
|
prop="maintenanceStatus"
|
|
:label="$t('message.lifter.maintenanceState')"
|
|
>
|
|
<!-- normal正常 abnormalTow不正常 -->
|
|
<template slot-scope="scope">
|
|
{{
|
|
scope.row.maintenanceStatus == 1
|
|
? $t('message.lifter.normal')
|
|
: $t('message.lifter.abnormalTow')
|
|
}}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column
|
|
prop="maintenanceRecord"
|
|
:label="$t('message.lifter.maintenanceRecord')"
|
|
>
|
|
</el-table-column> -->
|
|
|
|
<!-- 维保照片 -->
|
|
<el-table-column
|
|
align="center"
|
|
prop="maintenanceImage"
|
|
:label="$t('message.lifter.maintenancePhotos')"
|
|
>
|
|
<template slot-scope="scope">
|
|
<!-- <img
|
|
:src="fileUrl + scope.row.maintenanceImage"
|
|
style="width: 40px; heigth: auto"
|
|
/> -->
|
|
<el-image
|
|
style="width: 40px; heigth: auto"
|
|
:src="fileUrl + scope.row.maintenanceImage"
|
|
:preview-src-list="[fileUrl + scope.row.maintenanceImage]"
|
|
>
|
|
</el-image>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 描述 -->
|
|
<el-table-column align="center" 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="Number(total)"
|
|
background
|
|
></el-pagination>
|
|
</div>
|
|
|
|
<!-- 新增 -->
|
|
|
|
<!-- addMaintenanceInfo 新增维保信息 -->
|
|
<el-dialog
|
|
:modal-append-to-body="false"
|
|
:title="$t('message.lifter.addMaintenanceInfo')"
|
|
:visible.sync="dialogVisible"
|
|
width="667px"
|
|
>
|
|
<div class="dialog_content">
|
|
<el-form
|
|
:model="maintenanceForm"
|
|
ref="maintenanceForm"
|
|
label-width="100px"
|
|
class="demo-ruleForm"
|
|
:rules="rules"
|
|
size="medium"
|
|
>
|
|
<!-- 维保设备 -->
|
|
<el-form-item
|
|
:label="$t('message.lifter.maintenanceEquipment')"
|
|
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 lifterList"
|
|
:key="index"
|
|
style="width: 100%"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 维保后状态 -->
|
|
<el-form-item
|
|
:label="$t('message.lifter.afterStatus')"
|
|
prop="maintenanceStatus"
|
|
>
|
|
<el-select
|
|
v-model="maintenanceForm.maintenanceStatus"
|
|
:placeholder="
|
|
$t('message.lifter.pleaseSelect') +
|
|
$t('message.lifter.devName')
|
|
"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
:label="$t('message.lifter.normal')"
|
|
:value="1"
|
|
></el-option>
|
|
<el-option
|
|
:label="$t('message.lifter.abnormalTow')"
|
|
:value="0"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- 维保时间 -->
|
|
<el-form-item
|
|
:label="$t('message.lifter.maintenanceTime')"
|
|
prop="maintenanceTime"
|
|
>
|
|
<el-date-picker
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
v-model="maintenanceForm.maintenanceTime"
|
|
type="datetime"
|
|
:placeholder="$t('message.lifter.selectDateAndTime')"
|
|
style="width: 100%"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<!-- 维保人 -->
|
|
<el-form-item
|
|
:label="$t('message.lifter.maintainer')"
|
|
prop="personLiable"
|
|
>
|
|
<el-input
|
|
v-model="maintenanceForm.personLiable"
|
|
:placeholder="$t('message.lifter.pleaseEnter')"
|
|
></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="$t('message.lifter.maintenanceUnit')"
|
|
prop="maintenanceUnit"
|
|
>
|
|
<el-input
|
|
v-model="maintenanceForm.maintenanceUnit"
|
|
:placeholder="$t('message.lifter.pleaseEnter')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- 描述 -->
|
|
<el-form-item :label="$t('message.lifter.describe')" prop="remark">
|
|
<el-input
|
|
v-model="maintenanceForm.remark"
|
|
:placeholder="$t('message.lifter.pleaseEnter')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- 上传图片 -->
|
|
<el-form-item
|
|
:label="$t('message.lifter.uploadPictures')"
|
|
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">{{
|
|
$t('message.lifter.cancel')
|
|
}}</el-button>
|
|
<!-- 确 定 -->
|
|
<el-button type="primary" @click="saveBtn" size="medium">{{
|
|
$t('message.lifter.determine')
|
|
}}</el-button>
|
|
</span>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</vue-scroll>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getLifterListApi,
|
|
getMaintenanceListApi,
|
|
getManagementInfoListApi,
|
|
addManagementInfoListApi,
|
|
} from "@/assets/js/api/lifter";
|
|
export default {
|
|
data() {
|
|
return {
|
|
projectSn: "",
|
|
lifterList: [],
|
|
devSn: "",
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
fileUrl: "",
|
|
uploadUrl: "",
|
|
tableData: [],
|
|
dialogVisible: false,
|
|
managementInfoList: [],
|
|
maintenanceForm: {
|
|
devSn: "",
|
|
devType: 2,
|
|
maintenanceStatus: "",
|
|
maintenanceTime: "",
|
|
personLiable: "",
|
|
maintenanceUnit: "",
|
|
remark: "",
|
|
maintenanceImage: "",
|
|
},
|
|
rules: {
|
|
// pleaseSelectADevice 请选择设备
|
|
devSn: [{ required: true, message: this.$t('message.lifter.pleaseSelectADevice'), trigger: "change" }],
|
|
// afterMaintenanceSta 请选择设备维保后状态
|
|
maintenanceStatus: [
|
|
{
|
|
required: true,
|
|
message: this.$t('message.lifter.afterMaintenanceSta'),
|
|
trigger: "change",
|
|
},
|
|
],
|
|
// pleaseSelectMainTime 请选择维保时间
|
|
maintenanceTime: [
|
|
{ required: true, message: this.$t('message.lifter.pleaseSelectMainTime'), trigger: "change" },
|
|
],
|
|
// pSelectAMaintainer 请选择维保人
|
|
personLiable: [
|
|
{ required: true, message: this.$t('message.lifter.pSelectAMaintainer'), trigger: "change" },
|
|
],
|
|
// pleaseUploadPictures 请上传图片
|
|
maintenanceImage: [
|
|
{ required: true, message: this.$t('message.lifter.pleaseUploadPictures'), trigger: "change" },
|
|
],
|
|
},
|
|
maintenanceEndTime: '',
|
|
maintenanceStartTime: '',
|
|
time: [],
|
|
|
|
};
|
|
},
|
|
created() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.uploadUrl = this.$store.state.UPLOADURL;
|
|
this.fileUrl = this.$store.state.FILEURL;
|
|
this.getLifterList();
|
|
this.getListData();
|
|
},
|
|
|
|
methods: {
|
|
//选择时间
|
|
getTime(val) {
|
|
if (val || val.length > 0) {
|
|
this.maintenanceEndTime = val[1];
|
|
this.maintenanceStartTime = val[0];
|
|
} else {
|
|
this.maintenanceEndTime = "";
|
|
this.maintenanceStartTime = "";
|
|
}
|
|
},
|
|
//获取设备列表下拉
|
|
getLifterList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
getLifterListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.lifterList = res.result;
|
|
}
|
|
});
|
|
},
|
|
|
|
//获取列表信息
|
|
getListData() {
|
|
let data = {
|
|
devType: 2,
|
|
projectSn: this.projectSn,
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
devSn: this.devSn,
|
|
maintenanceStartTime: this.maintenanceStartTime,
|
|
maintenanceEndTime: this.maintenanceEndTime,
|
|
|
|
};
|
|
getMaintenanceListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.tableData = res.result.records;
|
|
this.total = res.result.total;
|
|
}
|
|
});
|
|
},
|
|
//新增按钮
|
|
addBtn() {
|
|
this.dialogVisible = true;
|
|
this.maintenanceForm = {
|
|
devSn: "",
|
|
devType: 2,
|
|
maintenanceStatus: "",
|
|
maintenanceTime: "",
|
|
personLiable: "",
|
|
maintenanceUnit: "",
|
|
remark: "",
|
|
maintenanceImage: "",
|
|
};
|
|
this.getManagementInfoList();
|
|
setTimeout(() => {
|
|
this.$refs.maintenanceForm.clearValidate();
|
|
}, 200);
|
|
},
|
|
|
|
//获取维保人
|
|
getManagementInfoList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
};
|
|
getManagementInfoListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.managementInfoList = res.result;
|
|
}
|
|
});
|
|
},
|
|
//文件上传成功
|
|
handleAvatarSuccess(file) {
|
|
if (file.data.length > 0) {
|
|
this.maintenanceForm.maintenanceImage = file.data[0].imageUrl;
|
|
}
|
|
},
|
|
|
|
//保存
|
|
saveBtn() {
|
|
this.$refs["maintenanceForm"].validate((valid) => {
|
|
if (valid) {
|
|
let data = this.maintenanceForm;
|
|
data.projectSn = this.projectSn;
|
|
addManagementInfoListApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.dialogVisible = false;
|
|
this.getListData();
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
|
|
//刷新
|
|
onSubmit() {
|
|
this.pageNo = 1;
|
|
this.pageSize = 10;
|
|
this.devSn = "";
|
|
this.maintenanceEndTime = "";
|
|
this.maintenanceStartTime = "";
|
|
this.time=[]
|
|
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;
|
|
// }
|
|
// }
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.dialog_content {
|
|
margin: 0 20px;
|
|
}
|
|
</style>
|