<template>
<div class="app-container detail inspectiondetail" style="background-color: rgb(238, 241, 245);">
<!-- 巡检计划信息 -->
<div style="padding-top: 10px;background: #fff;height: 100%;">
<el-row v-if="resourceId == undefined">
<el-col :span="24" style="padding-left: 15px;margin-bottom: -10px;">
<div style="height: 45px;" @click="$router.go(-1)">
<el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
</el-button>
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png"
style="width: 25px;" alt=""></div>
</div>
</el-col>
</el-row>
<el-row style="width: 100%;height: 40px;">
<el-col :span="24">
<div style="">
<ul>
<li style="list-style: none;font-weight: 900;font-size: 20px;color: #053b6a;">设备巡检详情</li>
</ul>
</div>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row style="width: 100%;margin-top: -15px;">
<el-col :span="24">
<div style="color: #31EAEA;height: 25px;">
<ul>
<li>详细信息</li>
</ul>
</div>
</el-col>
</el-row>
<el-row style="width: 100%;padding: 10px;margin-bottom: -5px;margin-top: -5px;">
<el-col :span="12">
<el-col :span="12">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px"
style="width: 100%;margin-bottom: 25px;">
<el-form-item label="计划名称:" prop="planName">
<font>{{form.planName}}</font>
</el-form-item>
<el-form-item label="检测地点:" prop="address">
<font>{{form.address}}</font>
</el-form-item>
<el-form-item label="计划描述:" prop="remarks" style="width: 170%;">
<font>{{form.remarks}}</font>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="width: 100%;">
<el-form-item label="计划执行时间:" prop="startTime">
<font>{{form.startTime}}至{{form.endTime}}</font>
</el-form-item>
<el-form-item label="计划状态:" prop="planStatus">
<font v-if="form.planStatus == 0">未生成工单</font>
<font v-if="form.planStatus == 1">已生成工单</font>
<font v-if="form.planStatus == 2">进行中</font>
<font v-if="form.planStatus == 3">已完成</font>
</el-form-item>
</el-form>
</el-col>
<el-col :span="24">
<el-table :data="form.inspectionDataList" height="130" style="width: 89%;margin-left: 30px;margin-top: -15px;">
<el-table-column label="设备名称" align="center" prop="deviceName">
</el-table-column>
<el-table-column label="设备编号" align="center" prop="deviceCode">
</el-table-column>
<el-table-column label="设备类型" align="center" prop="deviceType">
</el-table-column>
<el-table-column label="处理状态" align="center" prop="dealStatus">
<template slot-scope="scope">
<span v-if="scope.row.dealStatus == null || scope.row.dealStatus == ''">未处理</span>
<span v-if="scope.row.dealStatus == 1">不需处理</span>
<span v-if="scope.row.dealStatus == 2">已处理完成</span>
<span v-if="scope.row.dealStatus == 3">未处理完成</span>
</template>
</el-table-column>
<el-table-column label="是否存在隐患" align="center" prop="isHiddenDanger">
<template slot-scope="scope">
<span v-if="scope.row.isHiddenDanger == null || scope.row.isHiddenDanger == ''">-</span>
<span v-if="scope.row.isHiddenDanger == 1">是</span>
<span v-if="scope.row.isHiddenDanger == 2">否</span>
</template>
</el-table-column>
</el-table>
</el-col>
</el-col>
<el-col :span="12">
<div id="marbox" style="width: 100%;height: 270px;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
<div style="width: 100%;height: 100%" id="containerInspect"></div>
</div>
</el-col>
</el-row>
<!-- 接单信息 -->
<el-row v-if="this.form.orderId != null && this.form.orderId != ''">
<el-divider></el-divider>
<el-col :span="24" style="margin-top: -15px;margin-bottom: -10px;">
<div style="color: #31EAEA;width: 100%;height: 40px;">
<ul>
<li>接单信息</li>
</ul>
</div>
</el-col>
<el-row style="width: 100%;padding: 10px;">
<el-col :span="5" style="">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
<el-form-item label="下发人员:" prop="appointInspectorName">
<font>{{form.appointInspectorName}}</font>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
<el-form-item label="下发时间:" prop="allotTime">
<font>{{form.allotTime}}</font>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
<el-form-item label="工单编号:" prop="orderId">
<!--<!– <font>{{form.orderId}}</font> –>-->
<template slot-scope="scope">
<font v-if="resourceId != undefined">{{form.orderId}}</font>
<el-button type="text" @click="showDetail(form.orderId)" v-if="resourceId == undefined">
{{form.orderId}}</el-button>
</template>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-row>
<div>
</div>
<!-- <el-divider></el-divider> -->
<div class="" style="width: 95%; height: 60px;margin-left: 50px;text-align: center;margin-top: 15px;"
v-if="form.planStatus == 0">
<el-button size="normal" type="primary" icon="el-icon-edit" @click="handleIssue(form.planId)"
v-hasPermi="['workOrder:basicsInfo:add']">生成工单
</el-button>
<el-button size="normal" type="primary" icon="el-icon-edit" @click="handleUpdate(form.planId)"
v-hasPermi="['deviceInspection:inspectionPlan:edit']">修改
</el-button>
<el-button size="normal" type="primary" icon="el-icon-delete" @click="handleIsDel(form)"
v-hasPermi="['deviceInspection:inspectionPlan:edit']">作废
</el-button>
<el-dialog :title="title1" :visible.sync="open1" width="800px" append-to-body @close="cancel">
<el-form ref="form1" :model="form1" :rules="rules1" label-width="120px">
<el-form-item label="巡检计划名称" prop="planName">
<el-input v-model="form1.planName" placeholder="请输入巡检计划名称" />
</el-form-item>
<el-form-item label="巡检设备" prop="devices">
<el-cascader v-model="form1.devices" :options="options" :props="props" :show-all-levels="false"
@change="handleChange" filterable clearable style="width: 640px"></el-cascader>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker clearable size="small" v-model="form1.startTime" type="date"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker clearable size="small" v-model="form1.endTime" type="date"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间">
</el-date-picker>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form1.address" type="textarea" placeholder="请输入地址" />
</el-form-item>
<el-form-item label="计划描述" prop="remarks">
<el-input type="textarea" v-model="form1.remarks" placeholder="请输入计划描述" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm1">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog :title="title2" :visible.sync="open2" width="800px" append-to-body @close="cancel">
<el-form ref="form2" :model="form2" :rules="rules2" label-width="120px">
<el-form-item label="巡检计划名称">
<font>{{form2.planName}}</font>
</el-form-item>
<el-form-item label="计划时间">
<font>{{ parseTime(form2.startTime, '{y}-{m}-{d}') }} 至
{{ parseTime(form2.endTime, '{y}-{m}-{d}') }}</font>
</el-form-item>
<el-form-item label="地址">
<font>{{form2.address}}</font>
</el-form-item>
<el-form-item label="工单名称" prop="orderName">
<el-input v-model="form2.orderName" placeholder="请输入工单名称" />
</el-form-item>
<el-form-item label="指定执行人员" prop="appointInspector">
<el-select v-model="form2.appointInspector" placeholder="请选择执行人员" clearable size="small">
<el-option v-for="item in inspector" :key="item.userId" :label="item.nickName" :value="item.userId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="工单描述" prop="remarks">
<el-input type="textarea" v-model="form2.remarks" placeholder="请输入工单描述" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm2">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</div>
<el-dialog title="工单信息" lock-scroll :visible.sync="dialogVisible" width="70%">
<div style="height:80vh;overflow:auto">
<workOrder :linkOrderId="form.orderId" />
</div>
</el-dialog>
</div>
</template>
<script>
import { listInspectionPlan, getInspectionPlan, addInspectionPlan, updateInspectionPlan } from "@/api/deviceInspection/inspectionPlan";
import { addBasicsInfo } from "@/api/workOrder/basicsInfo";
import gaodeMap from "utils/gaodeMap.js";
import { DEVICE_TYPE } from "utils/gaodeMap.js";
import { inspectorList } from "@/api/system/user";
import { deviceTree } from "@/api/device/deviceInfo";
import { deviceNodeTree } from "@/api/device/deviceInfo";
export default {
props: ["resourceId"],
name: "InspectionPlanDetail",
components: {
workOrder: ()=> import('../../workOrder/detail/index.vue')
},
data() {
return {
dialogVisible: false,
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 设备树选项
defaultProps: {
children: "childList",
label: "label"
},
deviceOptions: [
{
label: "设备列表",
childList: []
}
],
// 巡检计划表单参数
form1: {
},
form2: {
},
// 巡检员列表
inspector: [],
props: {
multiple: true,
value: "id",
label: "name",
level: "level",
children: "childList",
},
// 弹出层标题
title2: "",
// 非单个禁用
single: true,
// 是否显示弹出层
open1: false,
// 是否显示弹出层
open2: false,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
title1: "",
// 总条数
total: 0,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
planName: null,
orderId: null,
startTime: null,
endTime: null,
planStatus: null,
remarks: null
},
// 设备级联
options: [],
// 表单参数
form: {},
// 表单校验
rules: {
},
rules1: {
planName: [
{ required: true, message: "请输入计划名称", trigger: "blur" }
],
devices: [
{ required: true, message: "请选择巡检设备", trigger: "blur" }
],
startTime: [
{ required: true, message: "请选择开始时间", trigger: "blur" }
],
endTime: [
{ required: true, message: "请选择结束时间", trigger: "blur" }
],
address: [
{ required: true, message: "请输入地址", trigger: "blur" }
],
},
rules2: {
orderName: [
{ required: true, message: "请输入工单名称", trigger: "blur" }
],
appointInspector: [
{ required: true, message: "请选择巡检人员", trigger: "blur" }
],
}
};
},
created() {
// 如果是跳转来的，则接受初始化参数
// this.user_id = this.$route.query.id; //详细信息页接收参数
this.getList();
if (this.resourceId) {
this.planId = this.resourceId;
} else {
this.planId = this.$route.query.planId;
}
// this.getDetail();
},
mounted() {
// let gaoMap = new gaodeMap("石家庄");
// this.gaoMap = gaoMap;
this.getDetail();
},
methods: {
/** 查询巡检计划列表 */
getList() {
this.loading = true;
listInspectionPlan(this.queryParams).then(response => {
this.inspectionPlanList = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleChange(value) {
console.log(this.form1.devices);
},
getInspectorList() {
this.loading = true;
inspectorList().then(response => {
this.inspector = response.data;
this.loading = false;
});
},
/** 获取巡检计划详情 */
getDetail() {
getInspectionPlan(this.planId).then(response => {
this.form = response.data;
console.log("this.form", this.form)
this.active = parseInt(response.data.orderStatus) + 1;
const deviceNum = this.form?.deviceList?.length;
const pipeNum = this.form?.pipeList?.length;
console.log(deviceNum, pipeNum)
if (deviceNum > 0 && pipeNum > 0) {
let obj = this.form.deviceList[0];
let gaoMap = new gaodeMap(process.env.VUE_APP_MAP_CENTER, null, "containerInspect");
this.gaoMap = gaoMap;
for (let i = 0; i < this.form.deviceList.length; i++) {
if ("1" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.REGEULATORBOX, this.form.deviceList[i], "false")
}
if ("2" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, this.form.deviceList[i], "false")
}
if ("3" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, this.form.deviceList[i], "false")
}
if ("4" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, this.form.deviceList[i], "false")
}
}
for (var i = 0; i < this.form.pipeList.length; i++) {
let obj = this.form.pipeList[i];
this.gaoMap.onlyLine(obj);
}
} else if (deviceNum > 0 && pipeNum == 0) {
let obj = this.form.deviceList[0];
let gaoMap = new gaodeMap(process.env.VUE_APP_MAP_CENTER, [obj.longitude, obj.latitude], "containerInspect");
this.gaoMap = gaoMap;
for (let i = 0; i < this.form.deviceList.length; i++) {
if ("1" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.REGEULATORBOX, this.form.deviceList[i], "false")
}
if ("2" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, this.form.deviceList[i], "false")
}
if ("3" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, this.form.deviceList[i], "false")
}
if ("4" == obj.deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, this.form.deviceList[i], "false")
}
}
} else if (deviceNum == 0 && pipeNum > 0) {
const { coordinates } = this.form.pipeList[0];
const path1 = eval(coordinates)[0];
const path2 = eval(coordinates)[1];
const path3 = [(Number(path1[0]) + Number(path2[0])) / 2, (Number(path1[1]) + Number(path2[1])) / 2];
let gaoMap = new gaodeMap(process.env.VUE_APP_MAP_CENTER, path3, "containerInspect");
this.gaoMap = gaoMap;
for (var i = 0; i < this.form.pipeList.length; i++) {
let obj = this.form.pipeList[i];
this.gaoMap.onlyLine(obj);
}
}
if (this.form.orderType == '1') {
// 获取设备列表树
let data = {
key1: this.form.deviceList,
key2: this.form.pipeList
};
deviceTree(data).then(response => {
this.deviceOptions[0].childList = response.data;
});
}
});
},
// 节点单击事件
handleNodeClick(data) {
},
// 取消按钮
cancel() {
this.open1 = false;
this.open2 = false;
this.reset();
},
/** 生成工单提交按钮 */
submitForm2() {
this.$refs["form2"].validate(valid => {
if (valid) {
this.form2.resourceId = this.form2.planId;
this.form2.orderType = "1";
addBasicsInfo(this.form2).then(response => {
this.msgSuccess("生成工单成功");
this.open2 = false;
location.reload();
});
}
});
},
/** 新增修改巡检计划提交按钮 */
submitForm1() {
this.$refs["form1"].validate(valid => {
console.log("form1", this.$refs["form1"]);
if (valid) {
// 二维数组转字符串（处理设备级联选项的值）
var arr = this.form1.devices;
var arrLen = arr.length;
var str = "[";
for (var i = 0; i < arrLen; i++) {
str += "[";
for (var j = 0; j < arr[i].length; j++) {
str += arr[i][j];
if (j < arr[i].length - 1) {
str += ",";
}
}
str += "]";
if (i < arrLen - 1) {
str += ",";
}
}
str += "]";
this.form1.deviceIds = str;
if (this.title1 == "修改巡检计划") {
updateInspectionPlan(this.form1).then(response => {
this.msgSuccess("修改成功");
this.open1 = false;
this.getList();
location.reload();
});
} else if (this.title1 == "新增巡检计划") {
addInspectionPlan(this.form1).then(response => {
this.msgSuccess("添加成功");
this.open1 = false;
this.getList();
});
}
}
});
},
/** 作废按钮操作 */
handleIsDel(row) {
row.isDel = "1";
this.$confirm('是否确认作废巡检计划名称为"' + row.planName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return updateInspectionPlan(row);
}).then(() => {
this.$router.go(-1);
this.msgSuccess("已作废");
}).catch(() => {
});
},
// 表单重置
reset() {
this.form1 = {
planId: null,
planName: null,
orderId: null,
startTime: null,
endTime: null,
planStatus: null,
updateTime: null,
createTime: null,
remarks: null
};
this.resetForm("form1");
this.form2 = {
planId: null,
planName: null,
orderId: null,
orderName: null,
startTime: null,
endTime: null,
planStatus: null,
appointInspector: null,
updateTime: null,
createTime: null,
remarks: null
};
this.resetForm("form2");
},
/** 修改按钮操作 */
handleUpdate(planId) {
this.reset();
deviceNodeTree().then(response => {
this.options = response.data;
});
getInspectionPlan(planId).then(response => {
this.form1 = response.data;
this.form1.devices = eval(this.form1.deviceIds);
this.open1 = true;
this.title1 = "修改巡检计划";
});
},
/** 下发按钮操作 */
handleIssue(planId) {
this.getInspectorList();
// const planId = row.planId || this.ids
getInspectionPlan(planId).then(response => {
this.form2 = response.data;
this.form2.remarks = "";
this.open2 = true;
this.title2 = "填写工单信息";
});
},
/** 详细信息跳转 */
showDetail(orderId) {
/*this.$router.push({
path: '/workOrder/detail',
query: {
orderId: orderId
}
}) //带参跳转*/
this.dialogVisible = true;
},
/** 归档按钮操作 */
handleFinish(res) {
// this.reset();
getInspectionPlan(res).then(response => {
this.form = response.data;
this.open = true;
this.title = "工单信息归档";
});
},
}
}
</script>
<style>
.el-tree-node__content {
width: 150px;
}
.el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 20px 0;
}
.feedbackTime-div {
float: left;
margin-left: 150px;
margin-top: 10px;
}
.feedbackTime {
height: 120px;
width: 120px;
float: left;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.el-card__body {
padding: 5px 20px 20px 20px;
}
.detail .el-form {
width: 20%;
}
.detail .el-form-item {
margin-bottom: 0px;
}
.el-tree {
margin-top: 5px;
}
.avatar-uploader {
width: 25%;
float: left;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
li {
font-size: 15px;
font-weight: 900;
}
.el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
</style>