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