Commit 9a38e9f1 authored by 纪泽龙's avatar 纪泽龙

优化页面逻辑

parent b0f0ffea
...@@ -9,7 +9,11 @@ ...@@ -9,7 +9,11 @@
<el-row> <el-row>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="所属管道" prop="pipeCode"> <el-form-item label="所属管道" prop="pipeCode">
<el-select v-model="form.pipeCode" placeholder="请选择所属管道" style="width: 100%"> <el-select
v-model="form.pipeCode"
placeholder="请选择所属管道"
style="width: 100%"
>
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
:key="item.pipeCode" :key="item.pipeCode"
...@@ -75,7 +79,12 @@ ...@@ -75,7 +79,12 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item label="联系电话" prop="phone"> <el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" /> <el-input
type="number"
maxlength="11"
v-model="form.phone"
placeholder="请输入联系电话"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -171,7 +180,10 @@ export default { ...@@ -171,7 +180,10 @@ export default {
{ required: true, message: "请输入物联网编号", trigger: "blur" }, { required: true, message: "请输入物联网编号", trigger: "blur" },
], ],
linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }], linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
phone: [{ 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" }], iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
installationTime: [ installationTime: [
{ {
...@@ -232,19 +244,19 @@ export default { ...@@ -232,19 +244,19 @@ export default {
this.form.url = ""; this.form.url = "";
this.fileArr = []; this.fileArr = [];
}, },
getPipeInfos(){ getPipeInfos() {
pipeAllInfoList({}).then((response) => { pipeAllInfoList({}).then((response) => {
this.pipeList = response.data; this.pipeList = response.data;
}); });
} },
}, },
watch:{ watch: {
dialogVisible(val){ dialogVisible(val) {
if(val){ if (val) {
this.getPipeInfos(); this.getPipeInfos();
} }
} },
} },
}; };
</script> </script>
......
...@@ -2,13 +2,18 @@ ...@@ -2,13 +2,18 @@
<el-dialog <el-dialog
:title="title" :title="title"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
:before-close="handleClose"> :before-close="handleClose"
>
<el-row> <el-row>
<el-form ref="form" :model="form" :rules="rules" label-width="135px"> <el-form ref="form" :model="form" :rules="rules" label-width="135px">
<el-row> <el-row>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="所属管道" prop="pipeCode"> <el-form-item label="所属管道" prop="pipeCode">
<el-select v-model="form.pipeCode" placeholder="请选择所属管道" style="width: 100%"> <el-select
v-model="form.pipeCode"
placeholder="请选择所属管道"
style="width: 100%"
>
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
:key="item.pipeCode" :key="item.pipeCode"
...@@ -24,13 +29,19 @@ ...@@ -24,13 +29,19 @@
<el-row> <el-row>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="设备名称" prop="deviceName"> <el-form-item label="设备名称" prop="deviceName">
<el-input v-model="form.deviceName" placeholder="请输入设备名称" /> <el-input
v-model="form.deviceName"
placeholder="请输入设备名称"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="设备型号" prop="deviceModel"> <el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.deviceModel" placeholder="请输入设备型号" /> <el-input
v-model="form.deviceModel"
placeholder="请输入设备型号"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -69,7 +80,12 @@ ...@@ -69,7 +80,12 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item label="联系电话" prop="phone"> <el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" /> <el-input
type="number"
maxlength="11"
v-model="form.phone"
placeholder="请输入联系电话"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -157,7 +173,10 @@ export default { ...@@ -157,7 +173,10 @@ export default {
{ required: true, message: "请输入物联网编号", trigger: "blur" }, { required: true, message: "请输入物联网编号", trigger: "blur" },
], ],
linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }], linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
phone: [{ 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" }], iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
installationTime: [ installationTime: [
{ {
......
...@@ -2,13 +2,18 @@ ...@@ -2,13 +2,18 @@
<el-dialog <el-dialog
:title="title" :title="title"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
:before-close="handleClose"> :before-close="handleClose"
>
<el-row> <el-row>
<el-form ref="form" :model="form" :rules="rules" label-width="135px"> <el-form ref="form" :model="form" :rules="rules" label-width="135px">
<el-row> <el-row>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="所属管道" prop="pipeCode"> <el-form-item label="所属管道" prop="pipeCode">
<el-select v-model="form.pipeCode" placeholder="请选择所属管道" style="width: 100%"> <el-select
v-model="form.pipeCode"
placeholder="请选择所属管道"
style="width: 100%"
>
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
:key="item.pipeCode" :key="item.pipeCode"
...@@ -24,13 +29,19 @@ ...@@ -24,13 +29,19 @@
<el-row> <el-row>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="设备名称" prop="deviceName"> <el-form-item label="设备名称" prop="deviceName">
<el-input v-model="form.deviceName" placeholder="请输入设备名称" /> <el-input
v-model="form.deviceName"
placeholder="请输入设备名称"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="设备型号" prop="deviceModel"> <el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.deviceModel" placeholder="请输入设备型号" /> <el-input
v-model="form.deviceModel"
placeholder="请输入设备型号"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -69,7 +80,12 @@ ...@@ -69,7 +80,12 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item label="联系电话" prop="phone"> <el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" /> <el-input
type="number"
maxlength="11"
v-model="form.phone"
placeholder="请输入联系电话"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -118,126 +134,128 @@ ...@@ -118,126 +134,128 @@
</template> </template>
<script> <script>
import {
getAllDeviceInfo,
addDeviceInfo,
updateDeviceInfo,
} from "@/api/device/deviceInfo";
import { pipeAllInfoList } from "@/api/device/pipe";
import MyFileUpload from "@/components/MyFileUpload";
import { DEVICE_TYPE } from "utils/gaodeMap.js";
import { getAllDeviceInfo ,addDeviceInfo, updateDeviceInfo } from "@/api/device/deviceInfo"; export default {
import { pipeAllInfoList } from "@/api/device/pipe"; props: {
import MyFileUpload from "@/components/MyFileUpload"; title: { type: String },
import { DEVICE_TYPE } from "utils/gaodeMap.js"; },
data() {
export default { return {
props: { form: {
title: { type: String } deviceType: "1",
},
dialogVisible: false,
fileList: [],
map: null,
obj: null,
gaoMap: null,
fileArr: [],
pipeList: [],
rules: {
pipeCode: [
{ required: true, message: "请选择所属管道", trigger: "blur" },
// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
deviceName: [
{ required: true, message: "请输入设备名称", trigger: "blur" },
],
deviceModel: [
{ required: true, message: "请输入设备型号", trigger: "blur" },
],
deviceAddr: [
{ 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: [
{
// type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
},
};
},
components: {
MyFileUpload,
},
methods: {
show() {
this.dialogVisible = true;
//this.getPipeInfo();
}, },
data () { hide() {
return { this.remove();
form : {
deviceType : "1"
},
dialogVisible : false,
fileList: [],
map : null,
obj : null,
gaoMap : null,
fileArr: [],
pipeList: [],
rules: {
pipeCode: [
{ required: true, message: "请选择所属管道", trigger: "blur" },
// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
deviceName: [
{ required: true, message: "请输入设备名称", trigger: "blur" },
],
deviceModel: [
{ required: true, message: "请输入设备型号", trigger: "blur" },
],
deviceAddr: [
{ required: true, message: "请输入所在地址", trigger: "blur" },
],
iotNo: [
{ required: true, message: "请输入物联网编号", trigger: "blur" },
],
linkman: [
{ required: true, message: "请输入联系人", trigger: "blur" },
],
phone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
],
iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
installationTime: [
{
// type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
},
}
}, },
components: { getFileInfo(res) {
MyFileUpload this.form.iconUrl = res.url;
}, },
methods: { submitForm() {
show () { this.$refs["form"].validate((valid) => {
this.dialogVisible = true; if (valid) {
//this.getPipeInfo(); if (this.form.deviceId != null) {
}, updateDeviceInfo(this.form).then((response) => {
hide () { this.dialogVisible = false;
this.remove() this.map.remove(this.obj);
}, this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
getFileInfo(res){ this.msgSuccess("修改成功");
this.form.iconUrl = res.url; });
}, } else {
submitForm() { addDeviceInfo(this.form).then((response) => {
this.$refs["form"].validate(valid => { if (response.code == 200) {
if (valid) { this.remove();
if (this.form.deviceId != null) {
updateDeviceInfo(this.form).then(response => {
this.dialogVisible = false;
this.map.remove(this.obj); this.map.remove(this.obj);
this.gaoMap.addMarker(this.gaoMap.deviceType,this.form); this.form.deviceId = response.data;
this.msgSuccess("修改成功"); this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
}); //this.gaoMap.placeSearch.clear();
} else { this.gaoMap.closeAddMarker();
addDeviceInfo(this.form).then(response => { this.msgSuccess("新增成功");
if(response.code == 200){ } else {
this.remove(); this.msgSuccess("新增失败");
this.map.remove(this.obj); }
this.form.deviceId = response.data; });
this.gaoMap.addMarker(this.gaoMap.deviceType,this.form);
//this.gaoMap.placeSearch.clear();
this.gaoMap.closeAddMarker();
this.msgSuccess("新增成功");
}else{
this.msgSuccess("新增失败");
}
});
}
} }
});
},
listRemove(e) {
this.form.url = "";
this.fileArr = [];
},
handleClose(done) {
done();
},
getPipeInfos(){
pipeAllInfoList({}).then((response) => {
this.pipeList = response.data;
});
}
},
watch:{
dialogVisible(val){
if(val){
this.getPipeInfos();
} }
});
},
listRemove(e) {
this.form.url = "";
this.fileArr = [];
},
handleClose(done) {
done();
},
getPipeInfos() {
pipeAllInfoList({}).then((response) => {
this.pipeList = response.data;
});
},
},
watch: {
dialogVisible(val) {
if (val) {
this.getPipeInfos();
} }
} },
} },
};
</script> </script>
...@@ -2,13 +2,18 @@ ...@@ -2,13 +2,18 @@
<el-dialog <el-dialog
:title="title" :title="title"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
:before-close="handleClose"> :before-close="handleClose"
>
<el-row> <el-row>
<el-form ref="form" :model="form" :rules="rules" label-width="135px"> <el-form ref="form" :model="form" :rules="rules" label-width="135px">
<el-row> <el-row>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="所属管道" prop="pipeCode"> <el-form-item label="所属管道" prop="pipeCode">
<el-select v-model="form.pipeCode" placeholder="请选择所属管道" style="width: 100%"> <el-select
v-model="form.pipeCode"
placeholder="请选择所属管道"
style="width: 100%"
>
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
:key="item.pipeCode" :key="item.pipeCode"
...@@ -24,13 +29,19 @@ ...@@ -24,13 +29,19 @@
<el-row> <el-row>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="设备名称" prop="deviceName"> <el-form-item label="设备名称" prop="deviceName">
<el-input v-model="form.deviceName" placeholder="请输入设备名称" /> <el-input
v-model="form.deviceName"
placeholder="请输入设备名称"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="设备型号" prop="deviceModel"> <el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.deviceModel" placeholder="请输入设备型号" /> <el-input
v-model="form.deviceModel"
placeholder="请输入设备型号"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -68,7 +79,12 @@ ...@@ -68,7 +79,12 @@
<el-col :span="11"> <el-col :span="11">
<el-form-item label="联系电话" prop="phone"> <el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" /> <el-input
type="number"
maxlength="11"
v-model="form.phone"
placeholder="请输入联系电话"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -117,125 +133,127 @@ ...@@ -117,125 +133,127 @@
</template> </template>
<script> <script>
import {
getAllDeviceInfo,
addDeviceInfo,
updateDeviceInfo,
} from "@/api/device/deviceInfo";
import { pipeAllInfoList } from "@/api/device/pipe";
import MyFileUpload from "@/components/MyFileUpload";
import { DEVICE_TYPE } from "utils/gaodeMap.js";
import { getAllDeviceInfo ,addDeviceInfo, updateDeviceInfo } from "@/api/device/deviceInfo"; export default {
import { pipeAllInfoList } from "@/api/device/pipe"; props: {
import MyFileUpload from "@/components/MyFileUpload"; title: { type: String },
import { DEVICE_TYPE } from "utils/gaodeMap.js"; },
data() {
export default { return {
props: { form: {
title: { type: String } deviceType: "2",
},
dialogVisible: false,
fileList: [],
map: null,
obj: null,
gaoMap: null,
fileArr: [],
pipeList: [],
rules: {
pipeCode: [
{ required: true, message: "请选择所属管道", trigger: "blur" },
// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
deviceName: [
{ required: true, message: "请输入设备名称", trigger: "blur" },
],
deviceModel: [
{ required: true, message: "请输入设备型号", trigger: "blur" },
],
deviceAddr: [
{ 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: [
{
// type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
},
};
},
components: {
MyFileUpload,
},
methods: {
show() {
this.dialogVisible = true;
}, },
data () { hide() {
return { this.remove();
form : {
deviceType : "2"
},
dialogVisible : false,
fileList: [],
map : null,
obj : null,
gaoMap : null,
fileArr: [],
pipeList: [],
rules: {
pipeCode: [
{ required: true, message: "请选择所属管道", trigger: "blur" },
// { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
deviceName: [
{ required: true, message: "请输入设备名称", trigger: "blur" },
],
deviceModel: [
{ required: true, message: "请输入设备型号", trigger: "blur" },
],
deviceAddr: [
{ required: true, message: "请输入所在地址", trigger: "blur" },
],
iotNo: [
{ required: true, message: "请输入物联网编号", trigger: "blur" },
],
linkman: [
{ required: true, message: "请输入联系人", trigger: "blur" },
],
phone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
],
iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
installationTime: [
{
// type: "date",
required: true,
message: "请选择日期",
trigger: "change",
},
],
},
}
}, },
components: { getFileInfo(res) {
MyFileUpload, this.form.iconUrl = res.url;
}, },
methods: { submitForm() {
show () { this.$refs["form"].validate((valid) => {
this.dialogVisible = true; if (valid) {
}, if (this.form.deviceId != null) {
hide () { updateDeviceInfo(this.form).then((response) => {
this.remove() this.dialogVisible = false;
}, this.map.remove(this.obj);
getFileInfo(res){ this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
this.form.iconUrl = res.url; this.msgSuccess("修改成功");
}, });
submitForm() { } else {
this.$refs["form"].validate(valid => { addDeviceInfo(this.form).then((response) => {
if (valid) { if (response.code == 200) {
if (this.form.deviceId != null) { this.remove();
updateDeviceInfo(this.form).then(response => {
this.dialogVisible = false;
this.map.remove(this.obj); this.map.remove(this.obj);
this.gaoMap.addMarker(this.gaoMap.deviceType,this.form); this.form.deviceId = response.data;
this.msgSuccess("修改成功"); this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
}); //this.gaoMap.placeSearch.clear();
} else { this.gaoMap.closeAddMarker();
addDeviceInfo(this.form).then(response => { this.msgSuccess("新增成功");
if(response.code == 200){ } else {
this.remove(); this.msgSuccess("新增失败");
this.map.remove(this.obj); }
this.form.deviceId = response.data; });
this.gaoMap.addMarker(this.gaoMap.deviceType,this.form);
//this.gaoMap.placeSearch.clear();
this.gaoMap.closeAddMarker();
this.msgSuccess("新增成功");
}else{
this.msgSuccess("新增失败");
}
});
}
} }
});
},
handleClose(done) {
done();
},
listRemove(e) {
this.form.url = "";
this.fileArr = [];
},
getPipeInfos(){
pipeAllInfoList({}).then((response) => {
this.pipeList = response.data;
});
}
},
watch:{
dialogVisible(val){
if(val){
this.getPipeInfos();
} }
});
},
handleClose(done) {
done();
},
listRemove(e) {
this.form.url = "";
this.fileArr = [];
},
getPipeInfos() {
pipeAllInfoList({}).then((response) => {
this.pipeList = response.data;
});
},
},
watch: {
dialogVisible(val) {
if (val) {
this.getPipeInfos();
} }
} },
} },
};
</script> </script>
...@@ -131,6 +131,18 @@ export default { ...@@ -131,6 +131,18 @@ export default {
ok() { ok() {
this.$refs.formData.validate((valid) => { this.$refs.formData.validate((valid) => {
if (valid) { if (valid) {
if (
moment(this.formData.beginTime).valueOf() >
moment(this.formData.endTime).valueOf()
) {
this.msgError(
"开始时间不能大于结束时间"
);
this.formData.endTime = "";
return;
}
this.okLoading = true; this.okLoading = true;
this.formData.beginTime = moment(this.formData.beginTime).format( this.formData.beginTime = moment(this.formData.beginTime).format(
"YYYY-MM-DD HH:mm:ss" "YYYY-MM-DD HH:mm:ss"
...@@ -138,6 +150,7 @@ export default { ...@@ -138,6 +150,7 @@ export default {
this.formData.endTime = moment(this.formData.endTime).format( this.formData.endTime = moment(this.formData.endTime).format(
"YYYY-MM-DD HH:mm:ss" "YYYY-MM-DD HH:mm:ss"
); );
console.log(this.formData); console.log(this.formData);
// 找到哪个值班人员 // 找到哪个值班人员
...@@ -176,7 +189,7 @@ export default { ...@@ -176,7 +189,7 @@ export default {
message: res.msg, message: res.msg,
}); });
this.dialogVisible = false; this.dialogVisible = false;
this.gaodeMap.trackBack(target, arr,data) this.gaodeMap.trackBack(target, arr, data);
} }
}); });
} }
......
...@@ -758,7 +758,7 @@ export default { ...@@ -758,7 +758,7 @@ export default {
// 左边的bar // 左边的bar
.leftBar-wrapper { .leftBar-wrapper {
position: fixed; position: fixed;
left: 100px; left: 10px;
top: 150px; top: 150px;
.box { .box {
width: 180px; width: 180px;
...@@ -976,13 +976,13 @@ input[type="radio"] { ...@@ -976,13 +976,13 @@ input[type="radio"] {
.search-input { .search-input {
position: fixed; position: fixed;
top: 100px; top: 100px;
left: 7%; left: 10px;
width: 240px; width: 240px;
} }
.search-but { .search-but {
position: fixed; position: fixed;
top: 100px; top: 100px;
left: 23%; left: 260px;
width: 85px; width: 85px;
color: white; color: white;
background-color: #053b6a; background-color: #053b6a;
...@@ -991,7 +991,7 @@ input[type="radio"] { ...@@ -991,7 +991,7 @@ input[type="radio"] {
.refresh-but { .refresh-but {
position: fixed; position: fixed;
top: 100px; top: 100px;
left: 28%; left: 345px;
width: 85px; width: 85px;
color: white; color: white;
background-color: #053b6a; background-color: #053b6a;
......
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