Skip to content

G
gassafety
Commit 4ca0eff7 authored by 王晓倩's avatar 王晓倩
Browse files
Options

管道列表页、设备信息列表页

parent 26d35ba5
Show whitespace changes
Inline Side-by-side
Showing with 122 additions and 88 deletions
gassafety-web/src/views/device/deviceInfo/index.vue
View file @ 4ca0eff7
...@@ -10,10 +10,10 @@ ...@@ -10,10 +10,10 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="设备型号" prop="deviceModel"> <el-form-item label="设备编号" prop="deviceCode">
<el-input <el-input
v-model="queryParams.deviceModel" v-model="queryParams.deviceCode"
placeholder="请输入设备型号" placeholder="请输入设备编号"
clearable clearable
size="small" size="small"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
...@@ -29,15 +29,6 @@ ...@@ -29,15 +29,6 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="物联网编号" prop="iotNo">
<el-input
v-model="queryParams.iotNo"
placeholder="请输入物联网编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
...@@ -55,7 +46,7 @@ ...@@ -55,7 +46,7 @@
v-hasPermi="['device:deviceInfo:add']" v-hasPermi="['device:deviceInfo:add']"
>新增</el-button> >新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <!--<el-col :span="1.5">
<el-button <el-button
type="success" type="success"
plain plain
...@@ -87,14 +78,13 @@ ...@@ -87,14 +78,13 @@
@click="handleExport" @click="handleExport"
v-hasPermi="['device:deviceInfo:export']" v-hasPermi="['device:deviceInfo:export']"
>导出</el-button> >导出</el-button>
</el-col> </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="deviceInfoList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="deviceInfoList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="所属管道" align="center" prop="pipeId" />-->
<el-table-column label="设备名称" align="center" prop="deviceName" /> <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="deviceCode" />
<el-table-column label="设备类型" align="center" prop="deviceType"> <el-table-column label="设备类型" align="center" prop="deviceType">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -106,7 +96,6 @@ ...@@ -106,7 +96,6 @@
</el-table-column> </el-table-column>
<el-table-column label="设备型号" align="center" prop="deviceModel" /> <el-table-column label="设备型号" align="center" prop="deviceModel" />
<el-table-column label="所在地址" align="center" prop="deviceAddr" /> <el-table-column label="所在地址" align="center" prop="deviceAddr" />
<el-table-column label="物联网编号" align="center" prop="iotNo" />
<el-table-column label="安装时间" align="center" prop="installationTime" width="180"> <el-table-column label="安装时间" align="center" prop="installationTime" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.installationTime) }}</span> <span>{{ parseTime(scope.row.installationTime) }}</span>
...@@ -146,25 +135,20 @@ ...@@ -146,25 +135,20 @@
/> />
<!-- 添加或修改设备信息对话框 --> <!-- 添加或修改设备信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="850px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<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-form-item label="所属管道" prop="pipeId">
<el-input v-model="form.pipeId" placeholder="请输入所属管道" /> <el-select v-model="form.pipeId" placeholder="请选择所属管道" clearable size="small" style="width: 600px">
</el-form-item> <el-option
<el-form-item label="设备名称" prop="deviceName"> v-for="item in options"
<el-input v-model="form.deviceName" placeholder="请输入设备名称" /> :key="item.pipeId"
</el-form-item> :label="item.pipeName"
<el-form-item label="设备编号" prop="deviceCode"> :value="item.pipeId"
<el-input v-model="form.deviceCode" placeholder="请输入设备编号" /> ></el-option>
</el-form-item> </el-select>
<el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
</el-form-item>
<el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
</el-form-item> </el-form-item>
<el-form-item label="设备类型"> <el-form-item label="设备类型">
<el-select v-model="form.deviceType" placeholder="请选择设备类型"> <el-select v-model="form.deviceType" placeholder="请选择设备类型" style="width: 600px">
<el-option <el-option
v-for="dict in typeOptions" v-for="dict in typeOptions"
:key="dict.dictValue" :key="dict.dictValue"
...@@ -173,15 +157,34 @@ ...@@ -173,15 +157,34 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="经度" prop="longitude"> <el-form-item label="设备名称" prop="deviceName">
<el-input v-model="form.longitude" placeholder="请输入经度" /> <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>
<el-form-item label="纬度" prop="latitude"> <el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.latitude" placeholder="请输入纬度" /> <el-input v-model="form.deviceModel" placeholder="请输入设备型号" style="width: 600px" />
</el-form-item> </el-form-item>
<el-form-item label="物联网编号" prop="iotNo"> <el-form-item label="物联网编号" prop="iotNo">
<el-input v-model="form.iotNo" placeholder="请输入物联网编号" /> <el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
</el-form-item> </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>
</el-row>
</el-form-item>
<el-form-item label="设备图片上传" prop="iconUrl"> <el-form-item label="设备图片上传" prop="iconUrl">
<MyFileUpload <MyFileUpload
listType="picture-card" listType="picture-card"
...@@ -217,7 +220,8 @@ ...@@ -217,7 +220,8 @@
</template> </template>
<script> <script>
import { listDeviceInfo, getDeviceInfo, delDeviceInfo, addDeviceInfo, updateDeviceInfo, exportDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo"; import { listDeviceInfo, getDeviceInfo, addDeviceInfo, updateDeviceInfo, exportDeviceInfo } from "@/api/device/deviceInfo";
import { pipeAllInfoList } from "@/api/device/pipe";
import MyFileUpload from '@/components/MyFileUpload'; import MyFileUpload from '@/components/MyFileUpload';
export default { export default {
...@@ -247,6 +251,8 @@ export default { ...@@ -247,6 +251,8 @@ export default {
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 管道列表
options: [],
// 上传文件列表 // 上传文件列表
fileList: [], fileList: [],
// 设备类型字典 // 设备类型字典
...@@ -256,8 +262,8 @@ export default { ...@@ -256,8 +262,8 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
enterpriseId: null, enterpriseId: null,
pipeId: null,
deviceName: null, deviceName: null,
deviceCode: null,
deviceAddr: null, deviceAddr: null,
deviceModel: null, deviceModel: null,
deviceType: null, deviceType: null,
...@@ -348,12 +354,18 @@ export default { ...@@ -348,12 +354,18 @@ export default {
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.reset();
pipeAllInfoList().then(response => {
this.options = response.data;
this.open = true; this.open = true;
this.title = "添加设备信息"; this.title = "添加设备信息";
});
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
pipeAllInfoList().then(response => {
this.options = response.data;
});
const deviceId = row.deviceId || this.ids const deviceId = row.deviceId || this.ids
getDeviceInfo(deviceId).then(response => { getDeviceInfo(deviceId).then(response => {
this.form = response.data; this.form = response.data;
...@@ -388,17 +400,18 @@ export default { ...@@ -388,17 +400,18 @@ export default {
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const deviceIds = row.deviceId || this.ids; row.isDel = "1";
this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", { this.$confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function() { }).then(function () {
return delDeviceInfo(deviceIds); return updateDeviceInfo(row);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.msgSuccess("删除成功"); this.msgSuccess("已删除");
}).catch(() => {}); }).catch(() => {
});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
...@@ -418,3 +431,9 @@ export default { ...@@ -418,3 +431,9 @@ export default {
} }
}; };
</script> </script>
<style>
.el-col {
margin-left: 0;
margin-right: 10px;
}
</style>
gassafety-web/src/views/device/pipe/index.vue
View file @ 4ca0eff7
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="管道名称" prop="pipeName"> <el-form-item label="管道名称" prop="pipeName">
<el-input <el-input
v-model="queryParams.pipeName" v-model="queryParams.pipeName"
...@@ -10,6 +10,15 @@ ...@@ -10,6 +10,15 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="管道编号" prop="pipeCode">
<el-input
v-model="queryParams.pipeCode"
placeholder="请输入管道编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="管道类型" prop="pipeType"> <el-form-item label="管道类型" prop="pipeType">
<el-select v-model="queryParams.pipeType" placeholder="请选择管道类型" size="small"> <el-select v-model="queryParams.pipeType" placeholder="请选择管道类型" size="small">
<el-option <el-option
...@@ -37,7 +46,7 @@ ...@@ -37,7 +46,7 @@
v-hasPermi="['device:pipe:add']" v-hasPermi="['device:pipe:add']"
>新增</el-button> >新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <!--<el-col :span="1.5">
<el-button <el-button
type="success" type="success"
plain plain
...@@ -69,16 +78,13 @@ ...@@ -69,16 +78,13 @@
@click="handleExport" @click="handleExport"
v-hasPermi="['device:pipe:export']" v-hasPermi="['device:pipe:export']"
>导出</el-button> >导出</el-button>
</el-col> </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-loading="loading" :data="pipeList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="pipeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="管道名称" align="center" prop="pipeName" /> <el-table-column label="管道名称" align="center" prop="pipeName" />
<el-table-column label="所在地址" align="center" prop="pipeAddr" /> <el-table-column label="管道编号" align="center" prop="pipeCode" />
<el-table-column label="管道坐标" align="center" prop="coordinates" />
<el-table-column label="管道长度" align="center" prop="pipeLength" />
<el-table-column label="管道类型" align="center" prop="pipeType" > <el-table-column label="管道类型" align="center" prop="pipeType" >
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.pipeType == 1">地埋管线</span> <span v-if="scope.row.pipeType == 1">地埋管线</span>
...@@ -93,6 +99,8 @@ ...@@ -93,6 +99,8 @@
<span v-if="scope.row.pipePressure == 4">高压</span> <span v-if="scope.row.pipePressure == 4">高压</span>
</template> </template>
</el-table-column> </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="installationTime" width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.installationTime)}}</span> <span>{{ parseTime(scope.row.installationTime)}}</span>
...@@ -132,25 +140,10 @@ ...@@ -132,25 +140,10 @@
/> />
<!-- 添加或修改管道信息对话框 --> <!-- 添加或修改管道信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="850px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<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="pipeName">
<el-input v-model="form.pipeName" placeholder="请输入管道名称" />
</el-form-item>
<el-form-item label="管道编号" prop="pipeCode">
<el-input v-model="form.pipeCode" placeholder="请输入管道编号" />
</el-form-item>
<el-form-item label="所在地址" prop="pipeAddr">
<el-input v-model="form.pipeAddr" placeholder="请输入所在地址" />
</el-form-item>
<el-form-item label="管道坐标" prop="coordinates">
<el-input v-model="form.coordinates" type="textarea" placeholder="请输入坐标" />
</el-form-item>
<el-form-item label="管道长度" prop="pipeLength">
<el-input v-model="form.pipeLength"placeholder="请输入管道长度" />
</el-form-item>
<el-form-item label="管道类型"> <el-form-item label="管道类型">
<el-select v-model="form.pipeType" placeholder="请选择管道类型"> <el-select v-model="form.pipeType" placeholder="请选择管道类型" style="width: 600px">
<el-option <el-option
v-for="dict in typeOptions" v-for="dict in typeOptions"
:key="dict.dictValue" :key="dict.dictValue"
...@@ -159,8 +152,14 @@ ...@@ -159,8 +152,14 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="管道名称" prop="pipeName">
<el-input v-model="form.pipeName" placeholder="请输入管道名称" style="width: 600px"/>
</el-form-item>
<el-form-item label="管道编号" prop="pipeCode">
<el-input v-model="form.pipeCode" placeholder="请输入管道编号" style="width: 600px" />
</el-form-item>
<el-form-item label="管道压力"> <el-form-item label="管道压力">
<el-select v-model="form.pipePressure" placeholder="请选择管道压力"> <el-select v-model="form.pipePressure" placeholder="请选择管道压力" style="width: 600px">
<el-option <el-option
v-for="dict in pressureOptions" v-for="dict in pressureOptions"
:key="dict.dictValue" :key="dict.dictValue"
...@@ -169,6 +168,20 @@ ...@@ -169,6 +168,20 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="所在地址" prop="pipeAddr">
<el-input v-model="form.pipeAddr" placeholder="请输入所在地址" style="width: 600px" />
</el-form-item>
<el-form-item label="管道长度" prop="pipeLength">
<el-input v-model="form.pipeLength"placeholder="请输入管道长度" style="width: 600px" />
</el-form-item>
<el-form-item label="管道坐标" prop="coordinates">
<el-col :span="18">
<el-input v-model="form.coordinates" type="textarea" placeholder="请输入坐标" />
</el-col>
<el-col :span="5">
<el-button type="primary" plain @click="MapdialogFun">选择坐标</el-button>
</el-col>
</el-form-item>
<el-form-item label="设备图片上传" prop="iconUrl"> <el-form-item label="设备图片上传" prop="iconUrl">
<MyFileUpload <MyFileUpload
listType="picture-card" listType="picture-card"
...@@ -186,7 +199,7 @@ ...@@ -186,7 +199,7 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="备注" prop="remarks"> <el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" placeholder="请输入备注" /> <el-input v-model="form.remarks" placeholder="请输入备注" style="width: 600px" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -305,6 +318,7 @@ export default { ...@@ -305,6 +318,7 @@ export default {
inspectionTime: null, inspectionTime: null,
remarks: null remarks: null
}; };
this.fileList = [];
this.resetForm("form"); this.resetForm("form");
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
...@@ -366,17 +380,18 @@ export default { ...@@ -366,17 +380,18 @@ export default {
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
const pipeIds = row.pipeId || this.ids; row.isDel = "1";
this.$confirm('是否确认删除管道信息编号为"' + pipeIds + '"的数据项?', "警告", { this.$confirm('是否确认删除管道名称为"' + row.pipeName + '"的数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function() { }).then(function () {
return delPipe(pipeIds); return updatePipe(row);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.msgSuccess("删除成功"); this.msgSuccess("已删除");
}).catch(() => {}); }).catch(() => {
});
}, },
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
......
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