Skip to content

G
gassafety
Commit 74a73389 authored by 王晓倩's avatar 王晓倩
Browse files
Options

设备信息获取经纬度、管道信息获取坐标

parent ae570df8
Hide whitespace changes
Inline Side-by-side
Showing with 651 additions and 543 deletions
gassafety-system/src/main/java/com/zehong/system/domain/vo/DeviceInfoVo.java
View file @ 74a73389
......@@ -79,13 +79,13 @@ public class DeviceInfoVo 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;
/** 是否删除 */
......
gassafety-system/src/main/java/com/zehong/system/domain/vo/PipeVo.java
View file @ 74a73389
......@@ -63,13 +63,13 @@ public class PipeVo 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;
/** 是否删除 */
......
gassafety-web/src/views/device/deviceInfo/index.vue
View file @ 74a73389
......@@ -133,306 +133,407 @@
/>
<!-- 添加或修改设备信息对话框 -->
<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="所属管道" prop="pipeId">
<el-select v-model="form.pipeId" placeholder="请选择所属管道" clearable size="small" style="width: 600px">
<el-option
v-for="item in options"
:key="item.pipeId"
:label="item.pipeName"
:value="item.pipeId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类型">
<el-select v-model="form.deviceType" 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-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-form-item>
<el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.deviceModel" placeholder="请输入设备型号" style="width: 600px" />
</el-form-item>
<el-form-item label="物联网编号" prop="iotNo">
<el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
</el-form-item>
<el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" style="width: 600px" />
</el-form-item>
<el-form-item label="经纬度" >
<el-row>
<el-col :span="8">
<el-input v-model.number="form.longitude" placeholder="请输入经度" />
</el-col>
<el-col :span="8">
<el-input v-model.number="form.latitude" placeholder="请输入纬度"/>
</el-col>
<el-col :span="5">
<el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
<el-col :span="11">
<el-form-item label="所属管道" prop="pipeId">
<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-select>
</el-form-item>
</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"
:label="dict.dictLabel"
:value="dict.dictValue"
></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="请输入设备名称"
/>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="设备型号" prop="deviceModel">
<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="请输入所在地址" />
</el-form-item>
</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" style="margin-left: 10px">
<el-input v-model.number="form.latitude" placeholder="请输入纬度"/>
</el-col>
<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"
@resFun="getFileInfo"
@remove="listRemove"
:fileArr="fileList"
/>
<el-input v-show="false" disabled v-model="form.iconUrl"></el-input>
</el-form-item>
</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="date"
value-format="yyyy-MM-dd"
placeholder="请选择安装日期">
</el-date-picker>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="设备图片上传" prop="iconUrl">
<MyFileUpload
listType="picture-card"
@resFun="getFileInfo"
@remove="listRemove"
:fileArr="fileList"
/>
</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-date-picker clearable size="small"
v-model="form.installationTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择安装时间">
</el-date-picker>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" />
</el-form-item>
</el-form-item>
</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>
<script>
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 { listDeviceInfo, getDeviceInfo, addDeviceInfo, updateDeviceInfo, exportDeviceInfo } from "@/api/device/deviceInfo";
import { pipeAllInfoList } from "@/api/device/pipe";
import MyFileUpload from '@/components/MyFileUpload';
import Mapdialog from "@/components/mapDialog/checkDeviceLoaction.vue";
export default {
name: "DeviceInfo",
components: {
MyFileUpload,
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备信息表格数据
deviceInfoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 管道列表
options: [],
// 上传文件列表
fileList: [],
// 地图
loadmap: false,
dialogTableVisible: false,
// 设备类型字典
typeOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
enterpriseId: null,
deviceName: null,
deviceCode: null,
deviceAddr: null,
deviceModel: null,
deviceType: null,
longitude: null,
latitude: null,
iotNo: null,
iconUrl: null,
linkman: null,
phone: null,
installationTime: null,
inspectionTime: null,
remarks: null
},
// 表单参数
form: {},
// 表单校验
rules: {
}
};
},
created() {
this.getList();
this.getDicts("t_device_type").then(response => {
this.typeOptions = response.data;
});
},
methods: {
/** 查询设备信息列表 */
getList() {
this.loading = true;
listDeviceInfo(this.queryParams).then(response => {
this.deviceInfoList = response.rows;
this.total = response.total;
this.loading = false;
});
export default {
name: "DeviceInfo",
components: {
MyFileUpload,
Mapdialog
},
getFileInfo(res){
this.form.iconUrl = res.url;
},
listRemove(e) {
this.form.url = "";
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;
// },
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.fileList = [];
},
// 表单重置
reset() {
this.form = {
deviceId: null,
enterpriseId: null,
pipeId: null,
deviceName: null,
deviceAddr: null,
deviceModel: null,
deviceType: null,
longitude: null,
latitude: null,
iotNo: null,
iconUrl: null,
linkman: null,
phone: null,
installationTime: null,
inspectionTime: null,
remarks: null
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备信息表格数据
deviceInfoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 管道列表
options: [],
// 上传文件列表
fileList: [],
// 地图
loadmap: false,
dialogTableVisible: false,
// 设备类型字典
typeOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
enterpriseId: null,
deviceName: null,
deviceCode: null,
deviceAddr: null,
deviceModel: null,
deviceType: null,
longitude: null,
latitude: null,
iotNo: null,
iconUrl: null,
linkman: null,
phone: null,
installationTime: null,
inspectionTime: null,
remarks: null
},
// 表单参数
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" },
],*/
}
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
created() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.deviceId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
pipeAllInfoList().then(response => {
this.options = response.data;
this.open = true;
this.title = "添加设备信息";
this.getDicts("t_device_type").then(response => {
this.typeOptions = response.data;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
pipeAllInfoList().then(response => {
this.options = response.data;
});
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,
methods: {
/** 查询设备信息列表 */
getList() {
this.loading = true;
listDeviceInfo(this.queryParams).then(response => {
this.deviceInfoList = response.rows;
this.total = response.total;
this.loading = false;
});
}
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.deviceId != null) {
updateDeviceInfo(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDeviceInfo(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
},
getFileInfo(res){
this.form.iconUrl = res.url;
},
listRemove(e) {
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;
this.reset();
this.fileList = [];
},
// 表单重置
reset() {
this.form = {
deviceId: null,
enterpriseId: null,
pipeId: null,
deviceName: null,
deviceAddr: null,
deviceModel: null,
deviceType: null,
longitude: null,
latitude: null,
iotNo: null,
iconUrl: null,
linkman: null,
phone: null,
installationTime: null,
inspectionTime: null,
remarks: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.deviceId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
pipeAllInfoList().then(response => {
this.options = response.data;
this.open = true;
this.title = "新增设备信息";
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
pipeAllInfoList().then(response => {
this.options = response.data;
});
const deviceId = row.deviceId || this.ids
getDeviceInfo(deviceId).then(response => {
this.form = response.data;
if (this.form.iconUrl) {
this.fileList.push({
url: this.form.iconUrl,
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
row.isDel = "1";
this.$confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return updateDeviceInfo(row);
}).then(() => {
this.getList();
this.msgSuccess("已删除");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有设备信息数据项?', "警告", {
this.open = true;
this.title = "修改设备信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.deviceId != null) {
updateDeviceInfo(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
console.log(this.form, "this.form");
addDeviceInfo(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
row.isDel = "1";
this.$confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return updateDeviceInfo(row);
}).then(() => {
this.getList();
this.msgSuccess("已删除");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有设备信息数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
......@@ -443,22 +544,29 @@ export default {
this.download(response.msg);
this.exportLoading = false;
}).catch(() => {});
},
/** 详细信息跳转 */
showDetail(row) {
this.$router.push({
path: '/device/deviceInfoDetail',
query: {
deviceId: row.deviceId
}
})
},
}
};
},
/** 详细信息跳转 */
showDetail(row) {
this.$router.push({
path: '/device/deviceInfoDetail',
query: {
deviceId: row.deviceId
}
})
},
}
};
</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>
gassafety-web/src/views/device/pipe/index.vue
View file @ 74a73389
......@@ -211,7 +211,7 @@
<el-form-item label="安装日期" prop="installationTime">
<el-col :span="11">
<el-date-picker clearable size="small"
style="width: 100%"
style="width: 100%"
v-model="form.installationTime"
type="date"
value-format="yyyy-MM-dd"
......@@ -243,245 +243,245 @@
</template>
<script>
import { listPipe, getPipe, addPipe, updatePipe, exportPipe } from "@/api/device/pipe";
import MyFileUpload from '@/components/MyFileUpload';
// import Mapdialog from "@/components/mapDialog/checkPipeLineLocation.vue";
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,
Mapdialog
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 管道信息表格数据
pipeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 上传文件列表
fileList: [],
// 地图
loadmap: false,
dialogTableVisible: false,
// 管道压力数据字典
pressureOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
enterpriseId: null,
pipeName: null,
pipeAddr: null,
coordinates: null,
pipeLength: null,
pipeType: null,
pipePressure: null,
iconUrl: null,
installationTime: null,
inspectionTime: null,
remarks: null
},
// 表单参数
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" },
],*/
}
};
},
created() {
this.getList();
this.getDicts("t_pipe_type").then(response => {
this.typeOptions = response.data;
});
this.getDicts("t_pipe_pressure").then(response => {
this.pressureOptions = response.data;
});
},
methods: {
/** 查询管道信息列表 */
getList() {
this.loading = true;
listPipe(this.queryParams).then(response => {
this.pipeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getFileInfo(res){
this.form.iconUrl = res.url;
},
listRemove(e) {
this.form.iconUrl = "";
this.fileList = [];
},
confirmFun(res) {
//确认选择经纬度
this.form.longitude = res.lng;
this.form.latitude = res.lat;
},
MapdialogFun() {
this.loadmap = true;
this.dialogTableVisible = true;
export default {
name: "Pipe",
components: {
MyFileUpload,
Mapdialog
},
dialogcancelFun() {
this.loadmap = false;
this.dialogTableVisible = false;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.fileList = [];
},
// 表单重置
reset() {
this.form = {
pipeId: null,
enterpriseId: null,
pipeName: null,
pipeAddr: null,
coordinates: null,
pipeLength: null,
pipeType: null,
pipePressure: null,
iconUrl: null,
installationTime: null,
inspectionTime: null,
remarks: null
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 管道信息表格数据
pipeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 上传文件列表
fileList: [],
// 地图
loadmap: false,
dialogTableVisible: false,
str: "",
// 管道压力数据字典
pressureOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
enterpriseId: null,
pipeName: null,
pipeAddr: null,
coordinates: null,
pipeLength: null,
pipeType: null,
pipePressure: null,
iconUrl: null,
installationTime: null,
inspectionTime: null,
remarks: null
},
// 表单参数
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" },
],*/
}
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
created() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.pipeId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增管道信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const pipeId = row.pipeId || this.ids
getPipe(pipeId).then(response => {
this.form = response.data;
if (this.form.iconUrl) {
this.fileList.push({
url: this.form.iconUrl,
});
}
this.open = true;
this.title = "修改管道信息";
this.getDicts("t_pipe_type").then(response => {
this.typeOptions = response.data;
});
this.getDicts("t_pipe_pressure").then(response => {
this.pressureOptions = response.data;
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.pipeId != null) {
updatePipe(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPipe(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
methods: {
/** 查询管道信息列表 */
getList() {
this.loading = true;
listPipe(this.queryParams).then(response => {
this.pipeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getFileInfo(res){
this.form.iconUrl = res.url;
},
listRemove(e) {
this.form.iconUrl = "";
this.fileList = [];
},
confirmFun(res) {
//确认选择坐标
this.form.coordinates = res;
},
MapdialogFun() {
this.loadmap = true;
this.dialogTableVisible = true;
},
dialogcancelFun() {
this.loadmap = false;
this.dialogTableVisible = false;
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.fileList = [];
},
// 表单重置
reset() {
this.form = {
pipeId: null,
enterpriseId: null,
pipeName: null,
pipeAddr: null,
coordinates: null,
pipeLength: null,
pipeType: null,
pipePressure: null,
iconUrl: null,
installationTime: null,
inspectionTime: null,
remarks: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.pipeId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增管道信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const pipeId = row.pipeId || this.ids
getPipe(pipeId).then(response => {
this.form = response.data;
if (this.form.iconUrl) {
this.fileList.push({
url: this.form.iconUrl,
});
}
this.open = true;
this.title = "修改管道信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.pipeId != null) {
updatePipe(this.form).then(response => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addPipe(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
row.isDel = "1";
var devices = " ";
for(var i = 0; i < row.deviceInfoList.length; i++){
var obj = row.deviceInfoList[i];
devices = devices + obj.deviceName + " ";
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
row.isDel = "1";
var devices = " ";
for(var i = 0; i < row.deviceInfoList.length; i++){
var obj = row.deviceInfoList[i];
devices = devices + obj.deviceName + " ";
}
this.$confirm('请确认是否删除管道名称为"' + row.pipeName + '"的数据项，该管道下包含的设备（' + devices + '）将一并被删除', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return updatePipe(row);
}).then(() => {
this.getList();
this.msgSuccess("已删除");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有管道信息数据项?', "警告", {
this.$confirm('请确认是否删除管道名称为"' + row.pipeName + '"的数据项，该管道下包含的设备（' + devices + '）将一并被删除', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return updatePipe(row);
}).then(() => {
this.getList();
this.msgSuccess("已删除");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有管道信息数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
......@@ -492,18 +492,18 @@ export default {
this.download(response.msg);
this.exportLoading = false;
}).catch(() => {});
},
/** 详细信息跳转 */
showDetail(row) {
this.$router.push({
path: '/device/pipeDetail',
query: {
pipeId: row.pipeId
}
})
},
}
};
},
/** 详细信息跳转 */
showDetail(row) {
this.$router.push({
path: '/device/pipeDetail',
query: {
pipeId: row.pipeId
}
})
},
}
};
</script>
<style>
......
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