Skip to content

G
gassafety
Commit 9d89014e authored by 王晓倩's avatar 王晓倩
Browse files
Options

设备信息维护详情页加按钮

parent 534d911c
Hide whitespace changes
Inline Side-by-side
Showing with 487 additions and 33 deletions
gassafety-web/src/views/device/deviceInfo/index.vue
View file @ 9d89014e
......@@ -83,9 +83,9 @@
</el-row>
<el-table v-loading="loading" :data="deviceInfoList.slice((pageNum-1)*pageSize,pageNum*pageSize)" @selection-change="handleSelectionChange">
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="所属管道" align="center" prop="pipeName" />
<el-table-column label="设备编号" align="center" prop="deviceCode" />
<el-table-column label="设备名称" align="center" prop="deviceName" width="240px"/>
<el-table-column label="所属管道" align="center" prop="pipeName" width="240px"/>
<el-table-column label="设备编号" align="center" prop="deviceCode" width="240px"/>
<el-table-column label="设备类型" align="center" prop="deviceType">
<template slot-scope="scope">
<span v-if="scope.row.deviceType == 1">调压阀</span>
......@@ -95,9 +95,9 @@
</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="deviceAddr" width="280px"/>
<el-table-column label="安装日期" align="center" prop="installationTime" />
<el-table-column label="最后巡检日期" align="center" prop="inspectionTime" >
<template slot-scope="scope">
<span v-if="scope.row.inspectionTime != null">{{ scope.row.inspectionTime }}</span>
<span v-if="scope.row.inspectionTime == null">-</span>
......
gassafety-web/src/views/device/deviceInfoDetail/index.vue
View file @ 9d89014e
......@@ -17,7 +17,7 @@
<div style="color: #31EAEA;height: 25px;">
<ul><li>详细信息</li></ul>
</div>
</el-col>
</el-col>
</el-row>
<el-row style="width: 100%;padding: 10px;padding-left: 40px;">
......@@ -82,34 +82,206 @@
<div style="width: 100%;height: 100%" id="container"></div>
</div>
</el-col>
</el-row>
<!-- <div style="width: 100%;height: 440px;">
<div style="float: left;width: 50%;">
</div>
</div> -->
<div class="" style="width: 95%; height: 60px;margin-left: 50px;text-align: center;">
<el-button
size="normal"
type="primary"
icon="el-icon-edit"
@click="handleUpdate(form)"
v-hasPermi="['device:deviceInfo:edit']"
>修改</el-button>
<el-button
size="normal"
type="primary"
icon="el-icon-delete"
@click="handleDelete(form)"
v-hasPermi="['device:deviceInfo:remove']"
>删除</el-button>
<el-dialog :title="title" :visible.sync="open" append-to-body @close="cancel">
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="135px">
<el-col :span="11">
<el-form-item label="所属管道" prop="pipeId">
<el-select v-model="editForm.pipeId" placeholder="请选择所属管道" filterable 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="editForm.deviceCode" placeholder="请输入设备编号" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="editForm.deviceType" placeholder="请选择设备类型" filterable 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="editForm.deviceName"
placeholder="请输入设备名称"
/>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="设备型号" prop="deviceModel">
<el-input
v-model="editForm.deviceModel"
placeholder="请输入设备型号"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="物联网编号" prop="iotNo">
<el-input v-model="editForm.iotNo" placeholder="请输入物联网编号" />
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="editForm.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="editForm.longitude" placeholder="请输入经度" />
</el-col>
<el-col :span="8" style="margin-left: 10px">
<el-input v-model.number="editForm.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="editForm.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="editForm.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="editForm.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="editForm.installationTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择安装日期">
</el-date-picker>
</el-col>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="备注信息" prop="remarks">
<el-input type="textarea" v-model="editForm.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="editForm.latitude"
:slng="editForm.longitude"
@confirmFun="confirmFun($event)"
></Mapdialog>
</div>
</div>
</div>
</template>
<script>
import { getDeviceInfo } from "@/api/device/deviceInfo";
import { updateDeviceInfo, getDeviceInfo } from "@/api/device/deviceInfo";
import { pipeAllInfoList } from "@/api/device/pipe";
import MyFileUpload from '@/components/MyFileUpload';
import Mapdialog from "@/components/mapDialog/checkDeviceLoaction.vue";
import gaodeMap from "utils/gaodeMap.js";
import { DEVICE_TYPE } from "utils/gaodeMap.js";
export default {
name: "DeviceInfoDetail",
components: {
MyFileUpload,
Mapdialog
},
data() {
return {
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 管道列表
options: [],
// 上传文件列表
fileList: [],
// 地图
loadmap: false,
dialogTableVisible: false,
// 设备类型字典
typeOptions: [],
// 表单参数
form: { },
editForm: {},
// 表单校验
rules: { }
};
......@@ -118,6 +290,9 @@
// 如果是跳转来的，则接受初始化参数
this.deviceId = this.$route.query.deviceId;
this.getDetail();
this.getDicts("t_device_type").then(response => {
this.typeOptions = response.data;
});
},
mounted(){
let gaoMap = new gaodeMap("石家庄");
......@@ -131,6 +306,75 @@
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, this.form)
});
},
getFileInfo(res){
this.editForm.iconUrl = res.url;
},
listRemove(e) {
this.editForm.iconUrl = "";
this.fileList = [];
},
confirmFun(res) {
//确认选择经纬度
this.editForm.longitude = res.lng;
this.editForm.latitude = res.lat;
},
MapdialogFun() {
this.loadmap = true;
this.dialogTableVisible = true;
},
dialogcancelFun() {
this.loadmap = false;
this.dialogTableVisible = false;
},
// 取消按钮
cancel() {
this.open = false;
this.fileList = [];
},
/** 修改按钮操作 */
handleUpdate(res) {
pipeAllInfoList().then(response => {
this.options = response.data;
});
getDeviceInfo(res.deviceId).then(response => {
this.editForm = response.data;
if (this.editForm.iconUrl) {
this.fileList.push({
url: this.editForm.iconUrl,
});
}
this.open = true;
this.title = "修改设备信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["editForm"].validate(valid => {
if (valid) {
console.log(this.editForm);
updateDeviceInfo(this.editForm).then(response => {
this.msgSuccess("修改成功");
this.open = false;
location.reload();
});
}
});
},
/** 删除按钮操作 */
handleDelete(res) {
res.isDel = "1";
this.$confirm('是否确认删除设备名称为"' + res.deviceName + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return updateDeviceInfo(res);
}).then(() => {
this.$router.go(-1);
this.msgSuccess("已删除");
}).catch(() => {
});
},
}
}
</script>
......
gassafety-web/src/views/device/pipe/index.vue
View file @ 9d89014e
......@@ -83,8 +83,8 @@
</el-row>
<el-table v-loading="loading" :data="pipeList.slice((pageNum-1)*pageSize,pageNum*pageSize)" @selection-change="handleSelectionChange">
<el-table-column label="管道名称" align="center" prop="pipeName" />
<el-table-column label="管道编号" align="center" prop="pipeCode" />
<el-table-column label="管道名称" align="center" prop="pipeName" width="280px"/>
<el-table-column label="管道编号" align="center" prop="pipeCode" width="240px"/>
<el-table-column label="管道类型" align="center" prop="pipeType" >
<template slot-scope="scope">
<span v-if="scope.row.pipeType == 1">地埋管线</span>
......@@ -100,7 +100,7 @@
</template>
</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="pipeAddr" width="280px"/>
<el-table-column label="安装日期" align="center" prop="installationTime" width="180" />
<el-table-column label="最后巡检日期" align="center" prop="inspectionTime" width="180" >
<template slot-scope="scope">
......@@ -162,8 +162,7 @@
<i
slot="suffix"
style="color: #000; font-style: normal; margin-right: 10px"
>米</i
>
>米</i>
</el-input>
</el-form-item>
</el-col>
......
gassafety-web/src/views/device/pipeDetail/index.vue
View file @ 9d89014e
......@@ -18,7 +18,7 @@
<div style="color: #31EAEA;height: 25px;">
<ul><li>详细信息</li></ul>
</div>
</el-col>
</el-col>
</el-row>
<el-row style="width: 100%;padding: 10px;padding-left: 40px;">
<el-col :span="5">
......@@ -70,32 +70,164 @@
</el-col>
</el-row>
<!-- <div style="width: 100%;height: 440px;">
<div style="float: left;width: 50%;">
</div>
<div class="" style="width: 95%; height: 60px;margin-left: 50px;text-align: center;">
<el-button
size="normal"
type="primary"
icon="el-icon-edit"
@click="handleUpdate(form)"
v-hasPermi="['device:pipe:edit']"
>修改</el-button>
<el-button
size="normal"
type="primary"
icon="el-icon-delete"
@click="handleDelete(form)"
v-hasPermi="['device:pipe:remove']"
>删除</el-button>
<!-- 添加或修改管道信息对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body @close="cancel">
<el-form ref="editForm" :model="editForm" :rules="rules" label-width="135px">
<el-col :span="23">
<el-form-item label="管道名称" prop="pipeName">
<el-input v-model="editForm.pipeName" placeholder="请输入管道名称" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="管道编号" prop="pipeCode">
<el-input v-model="editForm.pipeCode" placeholder="请输入管道编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="管道长度" prop="pipeLength">
<el-input type="number" min="0" v-model="editForm.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="editForm.pipeAddr" placeholder="请输入管道所在地址" />
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="管道坐标" prop="coordinates">
<el-col :span="18">
<el-input type="textarea" v-model="editForm.coordinates" placeholder="请输入管道坐标" />
</el-col>
<el-col :span="5" style="margin-left: 10px">
<el-button type="primary" plain @click="MapdialogFun">选择管道坐标</el-button>
</el-col>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="管道类型" prop="pipeType">
<el-radio-group v-model="editForm.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="editForm.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="editForm.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="editForm.installationTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择安装日期">
</el-date-picker>
</el-col>
</el-form-item>
</el-col>
<el-col :span="23">
<el-form-item label="备注信息" prop="remarks">
<el-input v-model="editForm.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>
</div> -->
<Mapdialog
v-if="loadmap"
:dialogTableVisible="dialogTableVisible"
@dialogcancelFun="dialogcancelFun"
@confirmFun="confirmFun($event)"
:str="str"
></Mapdialog>
</div>
</div>
</div>
</template>
<script>
import { getPipe } from "@/api/device/pipe";
import { updatePipe, getPipe } from "@/api/device/pipe";
import gaodeMap from "utils/gaodeMap.js";
import { DEVICE_TYPE } from "utils/gaodeMap.js";
import MyFileUpload from '@/components/MyFileUpload';
import Mapdialog from "@/components/mapDialog/checkPipeLineLocation.vue";
export default {
name: "PipeDetail",
components: {
MyFileUpload,
Mapdialog
},
data() {
return {
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 上传文件列表
fileList: [],
// 地图
loadmap: false,
dialogTableVisible: false,
// 管道类型字典
typeOptions: [],
str: "",
// 管道压力数据字典
pressureOptions: [],
// 表单参数
form: { },
form: {
},
editForm: {
},
// 表单校验
rules: { }
};
......@@ -104,6 +236,12 @@
// 如果是跳转来的，则接受初始化参数
this.pipeId = this.$route.query.pipeId;
this.getDetail();
this.getDicts("t_pipe_type").then(response => {
this.typeOptions = response.data;
});
this.getDicts("t_pipe_pressure").then(response => {
this.pressureOptions = response.data;
});
},
mounted(){
let gaoMap = new gaodeMap("石家庄");
......@@ -116,6 +254,79 @@
this.gaoMap.onlyLine(this.form);
});
},
getFileInfo(res){
this.editForm.iconUrl = res.url;
},
listRemove(e) {
this.editForm.iconUrl = "";
this.fileList = [];
},
confirmFun(res) {
//确认选择坐标
this.editForm.coordinates = res;
},
MapdialogFun() {
this.loadmap = true;
this.dialogTableVisible = true;
},
dialogcancelFun() {
this.loadmap = false;
this.dialogTableVisible = false;
},
// 取消按钮
cancel() {
this.open = false;
this.fileList = [];
},
/** 修改按钮操作 */
handleUpdate(res) {
getPipe(res.pipeId).then(response => {
this.editForm = response.data;
if (this.editForm.iconUrl) {
this.fileList.push({
url: this.editForm.iconUrl,
});
}
if(this.editForm.coordinates){
this.str = this.editForm.coordinates;
}
this.open = true;
this.title = "修改管道信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["editForm"].validate(valid => {
if (valid) {
console.log(this.editForm);
updatePipe(this.editForm).then(response => {
this.msgSuccess("修改成功");
this.open = false;
location.reload();
});
}
});
},
/** 删除按钮操作 */
handleDelete(res) {
res.isDel = "1";
var devices = " ";
for(var i = 0; i < res.deviceInfoList.length; i++){
var obj = res.deviceInfoList[i];
devices = devices + obj.deviceName + " ";
}
this.$confirm('请确认是否删除管道名称为"' + res.pipeName + '"的数据项，该管道下包含的设备（' + devices + '）将一并被删除', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return updatePipe(res);
}).then(() => {
this.$router.go(-1);
this.msgSuccess("已删除");
}).catch(() => {
});
},
}
}
</script>
......
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