333 lines
9.5 KiB
Plaintext
333 lines
9.5 KiB
Plaintext
<template>
|
|
<div>
|
|
<div class="main" v-if="isshow">
|
|
<FullCalendar
|
|
ref="fullCalendar"
|
|
eventOrder="order"
|
|
defaultView="dayGridMonth"
|
|
initialDate="2022-01-01"
|
|
locale="zh-cn"
|
|
:header="{
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: '',
|
|
}"
|
|
:showNonCurrentDates="false"
|
|
:buttonText="buttonText"
|
|
:plugins="calendarPlugins"
|
|
:weekends="calendarWeekends"
|
|
:events="calendarEvents"
|
|
:eventLimit="true"
|
|
eventLimitText="更多"
|
|
@dateClick="Dayclick"
|
|
@dayRender="dayRender"
|
|
/>
|
|
</div>
|
|
<el-dialog
|
|
:modal="false"
|
|
title="点检计划"
|
|
:visible.sync="dialogVisible"
|
|
width="50%"
|
|
>
|
|
<el-form
|
|
label-width="120px"
|
|
ref="formData"
|
|
:model="formData"
|
|
style="padding-right: 10px"
|
|
>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="设备名称" prop="deviceName">
|
|
<el-input
|
|
type="text"
|
|
v-model="formData.deviceName"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<el-form-item label="设备编号">
|
|
<el-input
|
|
type="text"
|
|
v-model="formData.deviceCode"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="规格型号">
|
|
<el-input
|
|
type="text"
|
|
v-model="formData.specification"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="保养编号">
|
|
<el-input type="text" v-model="formData.maintenanceCode" :disabled="disableShow"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="保养模板">
|
|
<el-select
|
|
clearable
|
|
style="width: 100%"
|
|
v-model="formData.templateId"
|
|
placeholder="选择模板"
|
|
:disabled="disableShow"
|
|
>
|
|
<el-option
|
|
v-for="(template, index) in checkedList"
|
|
:label="template.name"
|
|
:value="template.id"
|
|
:key="index"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="状态">
|
|
<el-select
|
|
clearable
|
|
style="width: 100%"
|
|
v-model="formData.dictStatus"
|
|
placeholder="选中状态"
|
|
:disabled="disableShow"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in statusArr1"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
:key="index"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="结果">
|
|
<el-input type="text" v-model="formData.result" :disabled="disableShow"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="保养人">
|
|
<el-input type="text" v-model="formData.maintenancePeople" :disabled="disableShow"> </el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="备注">
|
|
<el-input type="text" v-model="formData.memo" :disabled="disableShow"> </el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item style="float: right; margin-right: 20px" v-show="!disableShow">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="save('formData')"
|
|
>确 定</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script >
|
|
import FullCalendar from "@fullcalendar/vue";
|
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
|
import interactionPlugin from "@fullcalendar/interaction";
|
|
//dayGridMonth,timeGridWeek,timeGridDay,listWeek
|
|
export default {
|
|
name: "fullcalendarplan",
|
|
props: {
|
|
layerid: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
lydata: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
},
|
|
components: {
|
|
FullCalendar,
|
|
},
|
|
data() {
|
|
return {
|
|
statusArr1: [
|
|
{ id: 0, name: "待执行" },
|
|
{ id: 10, name: "执行中" },
|
|
{ id: 20, name: "已完成" },
|
|
], //点检状态
|
|
checkedList: [], //设备点检模板
|
|
formData: {},
|
|
dialogVisible: false,
|
|
planarr: [],
|
|
buttonText: {
|
|
today: "今天",
|
|
month: "月",
|
|
week: "周",
|
|
day: "天",
|
|
list: "列表",
|
|
},
|
|
isshow: false,
|
|
calendarPlugins: [
|
|
dayGridPlugin,
|
|
timeGridPlugin,
|
|
interactionPlugin, // needed for dateClick
|
|
],
|
|
disableShow:false,
|
|
calendarWeekends: true,
|
|
calendarEvents: [
|
|
// initial event data
|
|
// {
|
|
// start: "2022-01-01",
|
|
// end: "2022-01-01",
|
|
// backgroundColor: "red",
|
|
// },
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
save() {
|
|
this.$refs["formData"].validate((valid) => {
|
|
if (valid) {
|
|
let params = this.formData;
|
|
this.$EquipmentMaintenance.updatecheckRecord(params).then((resp) => {
|
|
if (resp.data.code == 200) {
|
|
this.$message.success("修改成功");
|
|
this.dialogVisible = false;
|
|
this.isshow = false;
|
|
this.getList();
|
|
this.dayRender();
|
|
} else {
|
|
this.$message.error(resp.data.message);
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
Dayclick(info) {
|
|
let id = info.dayEl.getAttribute("isid"); //点击的这个的id
|
|
console.log(this.formData,"拿到传递数据")
|
|
this.planarr.forEach((e) => {
|
|
if (e.maintenanceTime && e.maintenanceTime.substr(0, 10) == info.dateStr) {
|
|
this.dialogVisible = true;
|
|
this.getDetail(id);
|
|
switch (e.dictStatus) {
|
|
case 0:
|
|
this.disableShow = false;
|
|
break;
|
|
default:
|
|
this.disableShow = true;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getDetail(id) {
|
|
this.$EquipmentMaintenance.checkRecordList({ id }).then((resp) => {
|
|
console.log(resp,"这边是哪里的数据")
|
|
if (resp.data.code == 200) {
|
|
this.formData = resp.data.data.data[0];
|
|
}
|
|
});
|
|
},
|
|
dayRender(date, cell) {
|
|
this.planarr.forEach((e) => {
|
|
if (e.maintenanceTime) {
|
|
// console.log(date.el.getAttribute("data-date"),"这都是什么啊")
|
|
if (date.el.getAttribute("data-date") == e.maintenanceTime.substr(0, 10)) {
|
|
date.el.setAttribute("isId", e.id);
|
|
if (e.dictStatus == 0) {
|
|
date.el.style.backgroundColor = "orange";
|
|
} else if (e.dictStatus == 20) {
|
|
date.el.style.backgroundColor = "green";
|
|
} else if (e.dictStatus == 10) {
|
|
date.el.style.backgroundColor = "yellow";
|
|
}
|
|
}
|
|
}
|
|
});
|
|
// console.log(cell,"hahahh")
|
|
let date1 = new Date(date.date);
|
|
let y = date1.getFullYear();
|
|
let m = date1.getMonth() + 1;
|
|
m = m < 10 ? "0" + m : m;
|
|
let d = date1.getDate();
|
|
d = d < 10 ? "0" + d : d;
|
|
const time = y + "-" + m + "-" + d;
|
|
// console.log(time,"拿到")
|
|
},
|
|
getCalendarEvents(info, successCallback, failureCallback) {
|
|
console.log(info, successCallback, failureCallback, "切换");
|
|
this.calendarEvents.push({
|
|
start: "2022-01-01",
|
|
end: "2022-01-05",
|
|
backgroundColor: "red",
|
|
});
|
|
const events = [...this.calendarEvents];
|
|
successCallback(events);
|
|
},
|
|
getCheckTemplate() {
|
|
let params = {
|
|
templateCategory: 15,
|
|
templateType: 5,
|
|
};
|
|
this.$tempConfig.getList(params).then((data) => {
|
|
if (data.data.code === 200) {
|
|
this.checkedList = data.data.data.data;
|
|
} else {
|
|
this.$message.error("获取模板列表异常");
|
|
}
|
|
});
|
|
},
|
|
mGetDate(year, month) {
|
|
var d = new Date(year, month, 0);
|
|
return d.getDate();
|
|
},
|
|
getList() {
|
|
let parmas = {
|
|
deviceCode: this.lydata.deviceCode,
|
|
};
|
|
this.$EquipmentMaintenance.checkRecordList(parmas).then((resp) => {
|
|
if (resp.data.code == 200) {
|
|
this.planarr = resp.data.data.data;
|
|
this.isshow = true;
|
|
} else {
|
|
this.$message.error(resp.data.message || resp.data.msg);
|
|
}
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
// this.getFrequencyList();
|
|
},
|
|
created() {
|
|
this.getList();
|
|
this.getCheckTemplate();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss" >
|
|
@import "~@fullcalendar/core/main.css";
|
|
// @import "~@fullcalendar/daygrid/main.css";
|
|
// @import "~@fullcalendar/timegrid/main.css";
|
|
>>> .el-dialog__body {
|
|
padding: 15px 20px;
|
|
}
|
|
</style>
|