Commit 565013a7 authored by 王晓倩's avatar 王晓倩

设备信息详情、管道详情

parent ee8f7bd4
......@@ -74,13 +74,13 @@ public class TDeviceInfo extends BaseEntity
private String phone;
/** 安装时间 */
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Excel(name = "安装时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "安装时间", width = 30, dateFormat = "yyyy-MM-dd")
private Date installationTime;
/** 最后巡检时间 */
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Excel(name = "最后巡检时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "最后巡检时间", width = 30, dateFormat = "yyyy-MM-dd")
private Date inspectionTime;
/** 是否删除 */
......
......@@ -57,13 +57,13 @@ public class TPipe extends BaseEntity
private String iconUrl;
/** 安装时间 */
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Excel(name = "安装时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "安装时间", width = 30, dateFormat = "yyyy-MM-dd")
private Date installationTime;
/** 最后巡检时间 */
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Excel(name = "最后巡检时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "最后巡检时间", width = 30, dateFormat = "yyyy-MM-dd")
private Date inspectionTime;
/** 是否删除 */
......
......@@ -88,16 +88,16 @@
<el-table-column label="设备编号" align="center" prop="deviceCode" />
<el-table-column label="设备类型" align="center" prop="deviceType">
<template slot-scope="scope">
<span v-if="scope.row.deviceType == 1">调压</span>
<span v-if="scope.row.deviceType == 1">调压</span>
<span v-if="scope.row.deviceType == 2">阀门井</span>
<span v-if="scope.row.deviceType == 3">流量计</span>
<span v-if="scope.row.deviceType == 4">智能燃气</span>
<span v-if="scope.row.deviceType == 4">压力</span>
</template>
</el-table-column>
<el-table-column label="设备型号" align="center" prop="deviceModel" />
<el-table-column label="所在地址" align="center" prop="deviceAddr" />
<el-table-column label="安装时间" align="center" prop="installationTime" width="180" />
<el-table-column label="最后巡检时间" align="center" prop="inspectionTime" width="180" />
<el-table-column label="安装日期" align="center" prop="installationTime" width="180" />
<el-table-column label="最后巡检日期" align="center" prop="inspectionTime" width="180" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
......@@ -133,20 +133,31 @@
/>
<!-- 添加或修改设备信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-dialog :title="title" :visible.sync="open" append-to-body @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="135px">
<el-col :span="11">
<el-form-item label="所属管道" prop="pipeId">
<el-select v-model="form.pipeId" placeholder="请选择所属管道" clearable size="small" style="width: 600px">
<el-select v-model="form.pipeId" placeholder="请选择所属管道" style="width: 100%" >
<el-option
v-for="item in options"
:key="item.pipeId"
:label="item.pipeName"
:value="item.pipeId"
></el-option>
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类型">
<el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 600px">
</el-col>
<el-col :span="12">
<el-form-item label="设备编号" prop="deviceCode">
<el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 100%" >
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
......@@ -155,34 +166,72 @@
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="form.deviceName" placeholder="请输入设备名称" style="width: 600px" />
</el-form-item>
<el-form-item label="设备编号" prop="deviceCode">
<el-input v-model="form.deviceCode" placeholder="请输入设备编号" style="width: 600px" />
<el-input
v-model="form.deviceName"
placeholder="请输入设备名称"
/>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.deviceModel" placeholder="请输入设备型号" style="width: 600px" />
<el-input
v-model="form.deviceModel"
placeholder="请输入设备型号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物联网编号" prop="iotNo">
<el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" style="width: 600px" />
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
</el-form-item>
<el-form-item label="经纬度" >
</el-col>
<el-col :span="23">
<el-form-item label="经纬度坐标" prop="longitude">
<el-row>
<el-col :span="8">
<el-input v-model.number="form.longitude" placeholder="请输入经度" />
</el-col>
<el-col :span="8">
<el-col :span="8" style="margin-left: 10px">
<el-input v-model.number="form.latitude" placeholder="请输入纬度"/>
</el-col>
<el-col :span="5">
<el-col :span="5" style="margin-left: 10px">
<el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="联系人" prop="linkman">
<el-input v-model="form.linkman" placeholder="请输入联系人" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input
type="number"
maxlength="12"
v-model="form.phone"
placeholder="请输入联系电话"
/>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="设备图片上传" prop="iconUrl">
<MyFileUpload
listType="picture-card"
......@@ -190,31 +239,44 @@
@remove="listRemove"
:fileArr="fileList"
/>
<el-input v-show="false" disabled v-model="form.iconUrl"></el-input>
</el-form-item>
<el-form-item label="联系人" prop="linkman">
<el-input v-model="form.linkman" placeholder="请输入联系人" />
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入电话" />
</el-form-item>
<el-form-item label="安装时间" prop="installationTime">
</el-col>
<el-col>
<el-form-item label="安装日期" prop="installationTime">
<el-col :span="11">
<el-date-picker clearable size="small"
style="width: 100%"
v-model="form.installationTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择安装时间">
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择安装日期">
</el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" />
</el-col>
<el-col :span="23">
<el-form-item label="备注信息" prop="remarks">
<el-input type="textarea" v-model="form.remarks" placeholder="请输入备注信息" />
</el-form-item>
</el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- <Mapdialog v-if="loadmap" :dialogTableVisible="dialogTableVisible" @dialogcancelFun="dialogcancelFun" :slat="form.latitude" :slng="form.longitude" @confirm="qrFun" />-->
<Mapdialog
v-if="loadmap"
:dialogTableVisible="dialogTableVisible"
@dialogcancelFun="dialogcancelFun"
:slat="form.latitude"
:slng="form.longitude"
@confirmFun="confirmFun($event)"
></Mapdialog>
</div>
</template>
......@@ -222,12 +284,13 @@
import { listDeviceInfo, getDeviceInfo, addDeviceInfo, updateDeviceInfo, exportDeviceInfo } from "@/api/device/deviceInfo";
import { pipeAllInfoList } from "@/api/device/pipe";
import MyFileUpload from '@/components/MyFileUpload';
// import Mapdialog from "@/components/maplnglat.vue";
import Mapdialog from "@/components/mapDialog/checkDeviceLoaction.vue";
export default {
name: "DeviceInfo",
components: {
MyFileUpload,
Mapdialog
},
data() {
return {
......@@ -284,6 +347,43 @@ export default {
form: {},
// 表单校验
rules: {
pipeId: [
{ required: true, message: "请选择所属管道", trigger: "blur" },
],
deviceType: [
{ required: true, message: "请选择设备类型", trigger: "blur" },
],
deviceName: [
{ required: true, message: "请输入设备名称", trigger: "blur" },
],
deviceCode: [
{ required: true, message: "请输入设备编号", trigger: "blur" },
],
deviceModel: [
{ required: true, message: "请输入设备型号", trigger: "blur" },
],
deviceAddr: [
{ required: true, message: "请输入所在地址", trigger: "blur" },
],
longitude: [
{ required: true, message: "请输入经纬度", trigger: "blur" },
],
iotNo: [
{ required: true, message: "请输入物联网编号", trigger: "blur" },
],
/*linkman: [
{ required: true, message: "请输入联系人", trigger: "blur" }
],
phone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
{ min: 11, max: 11, message: "长度11个数字", trigger: "blur" },
],
iconUrl: [
{ required: true, message: "请上传图片", trigger: "change" }
],
installationTime: [
{ required: true, message: "请选择日期", trigger: "change" },
],*/
}
};
},
......@@ -307,22 +407,22 @@ export default {
this.form.iconUrl = res.url;
},
listRemove(e) {
this.form.url = "";
this.form.iconUrl = "";
this.fileList = [];
},
// qrFun(res) {
// //确认选择经纬度
// this.form.longitude = res.lng;
// this.form.latitude = res.lat;
// },
// MapdialogFun() {
// this.loadmap = true;
// this.dialogTableVisible = true;
// },
// dialogcancelFun() {
// this.loadmap = false;
// this.dialogTableVisible = false;
// },
confirmFun(res) {
//确认选择经纬度
this.form.longitude = res.lng;
this.form.latitude = res.lat;
},
MapdialogFun() {
this.loadmap = true;
this.dialogTableVisible = true;
},
dialogcancelFun() {
this.loadmap = false;
this.dialogTableVisible = false;
},
// 取消按钮
cancel() {
this.open = false;
......@@ -373,7 +473,7 @@ export default {
pipeAllInfoList().then(response => {
this.options = response.data;
this.open = true;
this.title = "添加设备信息";
this.title = "新增设备信息";
});
},
/** 修改按钮操作 */
......@@ -385,14 +485,14 @@ export default {
const deviceId = row.deviceId || this.ids
getDeviceInfo(deviceId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改设备信息";
});
if (this.form.iconUrl) {
this.fileList.push({
url: this.form.iconUrl,
});
}
this.open = true;
this.title = "修改设备信息";
});
},
/** 提交按钮 */
submitForm() {
......@@ -457,8 +557,15 @@ export default {
};
</script>
<style>
.el-col {
margin-left: 0;
margin-right: 10px;
.notice {
background: white;
position: fixed;
top: 102px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 80%;
border: solid 1px;
}
</style>
......@@ -32,7 +32,7 @@
<el-form-item label="设备型号:" prop="deviceModel">
<font>{{form.deviceModel}}</font>
</el-form-item>
<el-form-item label="物联网编号:" prop="iotNo" v-if="form.iotNo != null || form.iotNo != ''">
<el-form-item label="物联网编号:" prop="iotNo">
<font>{{form.iotNo}}</font>
</el-form-item>
<el-form-item label="联系人:" prop="linkman">
......@@ -70,7 +70,7 @@
</el-form>
</div>
<div id="marbox" style="width: 700px;height: 400px;float: left;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
<div id="marbox" style="width: 700px;height: 390px;float: left;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</div>
......@@ -106,12 +106,9 @@
this.gaoMap = gaoMap;
},
methods: {
/** 获取巡检计划详情 */
getDetail (){
getDeviceInfo(this.deviceId).then(response =>{
this.form = response.data;
console.log("this.form",this.form)
this.gaoMap.resetMapCenter([this.form.longitude, this.form.latitude]);
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, this.form)
});
......
......@@ -101,8 +101,8 @@
</el-table-column>
<el-table-column label="管道长度" align="center" prop="pipeLength" />
<el-table-column label="所在地址" align="center" prop="pipeAddr" />
<el-table-column label="安装时间" align="center" prop="installationTime" width="180" />
<el-table-column label="最后巡检时间" align="center" prop="inspectionTime" width="180" />
<el-table-column label="安装日期" align="center" prop="installationTime" width="180" />
<el-table-column label="最后巡检日期" align="center" prop="inspectionTime" width="180" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
......@@ -138,84 +138,120 @@
/>
<!-- 添加或修改管道信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-dialog :title="title" :visible.sync="open" append-to-body @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="135px">
<el-form-item label="管道类型">
<el-select v-model="form.pipeType" placeholder="请选择管道类型" style="width: 600px">
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-col :span="23">
<el-form-item label="管道名称" prop="pipeName">
<el-input v-model="form.pipeName" placeholder="请输入管道名称" style="width: 600px"/>
<el-input v-model="form.pipeName" placeholder="请输入管道名称" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="管道编号" prop="pipeCode">
<el-input v-model="form.pipeCode" placeholder="请输入管道编号" style="width: 600px" />
</el-form-item>
<el-form-item label="管道压力">
<el-select v-model="form.pipePressure" placeholder="请选择管道压力" style="width: 600px">
<el-option
v-for="dict in pressureOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所在地址" prop="pipeAddr">
<el-input v-model="form.pipeAddr" placeholder="请输入所在地址" style="width: 600px" />
<el-input v-model="form.pipeCode" placeholder="请输入管道编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="管道长度" prop="pipeLength">
<el-input v-model="form.pipeLength"placeholder="请输入管道长度" style="width: 600px" />
<el-input type="number" min="0" v-model="form.pipeLength" placeholder="请输入管道长度">
<i
slot="suffix"
style="color: #000; font-style: normal; margin-right: 10px"
></i
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="管道所在地址" prop="pipeAddr">
<el-input v-model="form.pipeAddr" placeholder="请输入管道所在地址" />
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="管道坐标" prop="coordinates">
<el-col :span="18">
<el-input v-model="form.coordinates" type="textarea" placeholder="请输入坐标" />
<el-input type="textarea" v-model="form.coordinates" placeholder="请输入管道坐标" />
</el-col>
<el-col :span="5">
<el-button type="primary" plain @click="MapdialogFun">选择坐标</el-button>
<el-col :span="5" style="margin-left: 10px">
<el-button type="primary" plain @click="MapdialogFun">选择管道坐标</el-button>
</el-col>
</el-form-item>
<el-form-item label="设备图片上传" prop="iconUrl">
</el-col>
<el-col>
<el-form-item label="管道类型" prop="pipeType">
<el-radio-group v-model="form.pipeType">
<el-radio label="1">地埋管线</el-radio>
<el-radio label="2">地表管线</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="管道压力" prop="pipePressure">
<!-- select -->
<el-radio-group v-model="form.pipePressure">
<!-- 1低压,2中压,3次高压,4高压 -->
<el-radio label="1">低压</el-radio>
<el-radio label="2">中压</el-radio>
<el-radio label="3">次高压</el-radio>
<el-radio label="4">高压</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="管道图片上传" prop="iconUrl">
<MyFileUpload
listType="picture-card"
@resFun="getFileInfo"
@remove="listRemove"
:fileArr="fileList"
/>
<el-input v-show="false" disabled v-model="form.iconUrl"></el-input>
</el-form-item>
<el-form-item label="安装时间" prop="installationTime">
</el-col>
<el-col>
<el-form-item label="安装日期" prop="installationTime">
<el-col :span="11">
<el-date-picker clearable size="small"
style="width: 100%"
v-model="form.installationTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择安装时间">
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择安装日期">
</el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" style="width: 600px" />
</el-col>
<el-col :span="23">
<el-form-item label="备注信息" prop="remarks">
<el-input v-model="form.remarks" type="textarea" placeholder="请输入备注信息" />
</el-form-item>
</el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<Mapdialog
v-if="loadmap"
:dialogTableVisible="dialogTableVisible"
@dialogcancelFun="dialogcancelFun"
@confirmFun="confirmFun($event)"
:str="str"
></Mapdialog>
</div>
</template>
<script>
import { listPipe, getPipe, delPipe, addPipe, updatePipe, exportPipe } from "@/api/device/pipe";
import { listPipe, getPipe, addPipe, updatePipe, exportPipe } from "@/api/device/pipe";
import MyFileUpload from '@/components/MyFileUpload';
// import Mapdialog from "@/components/mapDialog/checkPipeLineLocation.vue";
export default {
name: "Pipe",
components: {
MyFileUpload
MyFileUpload,
Mapdialog
},
data() {
return {
......@@ -241,9 +277,10 @@ export default {
open: false,
// 上传文件列表
fileList: [],
// 管道类型字典
typeOptions: [],
// 管道压力字典
// 地图
loadmap: false,
dialogTableVisible: false,
// 管道压力数据字典
pressureOptions: [],
// 查询参数
queryParams: {
......@@ -262,9 +299,42 @@ export default {
remarks: null
},
// 表单参数
form: {},
form: {
pipeName: "",
pipeType: "1",
pipePressure: "1",
iconUrl: "",
coordinates: ""
},
// 表单校验
rules: {
pipeName: [
{ required: true, message: "请输入管道名称", trigger: "blur" },
],
pipeCode: [
{ required: true, message: "请输入管道编号", trigger: "blur" },
],
pipeLength: [
{ required: true, message: "请输入管道长度", trigger: "blur" },
],
pipeAddr: [
{ required: true, message: "请输入管道所在地址", trigger: "blur" },
],
pipeType: [
{ required: true, message: "请选择管道类型", trigger: "blur" },
],
pipePressure: [
{ required: true, message: "请选择管道压力", trigger: "blur" },
],
coordinates: [
{ required: true, message: "请选择管道坐标", trigger: "blur" },
],
/*iconUrl: [
{ required: true, message: "请上传图片", trigger: "change" },
],
installationTime: [
{ required: true, message: "请选择日期", trigger: "change" },
],*/
}
};
},
......@@ -291,9 +361,22 @@ export default {
this.form.iconUrl = res.url;
},
listRemove(e) {
this.form.url = "";
this.form.iconUrl = "";
this.fileList = [];
},
confirmFun(res) {
//确认选择经纬度
this.form.longitude = res.lng;
this.form.latitude = res.lat;
},
MapdialogFun() {
this.loadmap = true;
this.dialogTableVisible = true;
},
dialogcancelFun() {
this.loadmap = false;
this.dialogTableVisible = false;
},
// 取消按钮
cancel() {
this.open = false;
......@@ -316,7 +399,6 @@ export default {
inspectionTime: null,
remarks: null
};
this.fileList = [];
this.resetForm("form");
},
/** 搜索按钮操作 */
......@@ -339,7 +421,7 @@ export default {
handleAdd() {
this.reset();
this.open = true;
this.title = "添加管道信息";
this.title = "新增管道信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
......@@ -347,13 +429,13 @@ export default {
const pipeId = row.pipeId || this.ids
getPipe(pipeId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改管道信息";
if (this.form.iconUrl) {
this.fileList.push({
name: this.form.iconUrl,
url: this.form.iconUrl,
});
}
this.open = true;
this.title = "修改管道信息";
});
},
/** 提交按钮 */
......@@ -423,3 +505,17 @@ export default {
}
};
</script>
<style>
.notice {
background: white;
position: fixed;
top: 102px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 80%;
border: solid 1px;
}
</style>
......@@ -56,7 +56,7 @@
</el-form>
</div>
<div id="marbox" style="width: 700px;height: 400px;float: left;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
<div id="marbox" style="width: 700px;height: 390px;float: left;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</div>
......@@ -92,12 +92,9 @@
this.gaoMap = gaoMap;
},
methods: {
/** 获取巡检计划详情 */
getDetail (){
getPipe(this.pipeId).then(response =>{
this.form = response.data;
console.log("this.form",this.form)
this.gaoMap.resetMapCenter([this.form.longitude, this.form.latitude]);
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, this.form)
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment