Commit 0ad1f947 authored by 纪泽龙's avatar 纪泽龙

优化

parent 30f5d6c6
...@@ -7,31 +7,41 @@ ...@@ -7,31 +7,41 @@
> >
<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-col :span="22"> <el-row>
<el-form-item label="所属管道" prop="pipeCode"> <el-col :span="22">
<el-select v-model="form.pipeCode" placeholder="请选择所属管道"> <el-form-item label="所属管道" prop="pipeCode">
<el-option <el-select v-model="form.pipeCode" placeholder="请选择所属管道">
v-for="item in pipeList" <el-option
:key="item.pipeCode" v-for="item in pipeList"
:label="item.pipeName" :key="item.pipeCode"
:value="item.pipeCode" :label="item.pipeName"
> :value="item.pipeCode"
</el-option> >
</el-select> </el-option>
</el-form-item> </el-select>
</el-col> </el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="form.deviceName"
placeholder="请输入设备名称"
/>
</el-form-item>
</el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="设备名称" prop="deviceName"> <el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="form.deviceName" placeholder="请输入设备名称" /> <el-input
</el-form-item> v-model="form.deviceModel"
</el-col> placeholder="请输入设备型号"
/>
</el-form-item>
</el-col>
</el-row>
<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="11"> <el-col :span="11">
<el-form-item label="所在地址" prop="deviceAddr"> <el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" /> <el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
...@@ -46,7 +56,7 @@ ...@@ -46,7 +56,7 @@
<el-col :span="22"> <el-col :span="22">
<el-form-item label="经纬度坐标" prop=""> <el-form-item label="经纬度坐标" prop="">
<el-card class="box-card"> <el-card shadow="newver" class="box-card">
<div v-text="`[[${form.longitude},${form.latitude}]]`"></div> <div v-text="`[[${form.longitude},${form.latitude}]]`"></div>
</el-card> </el-card>
</el-form-item> </el-form-item>
...@@ -143,7 +153,7 @@ export default { ...@@ -143,7 +153,7 @@ export default {
gaoMap: null, gaoMap: null,
fileArr: [], fileArr: [],
pipeList: [], pipeList: [],
rules: { rules: {
pipeCode: [ pipeCode: [
{ required: true, message: "请选择所属管道", trigger: "blur" }, { required: true, message: "请选择所属管道", trigger: "blur" },
...@@ -161,12 +171,8 @@ export default { ...@@ -161,12 +171,8 @@ export default {
iotNo: [ iotNo: [
{ required: true, message: "请输入物联网编号", trigger: "blur" }, { required: true, message: "请输入物联网编号", trigger: "blur" },
], ],
linkman: [ linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
{ required: true, message: "请输入联系人", trigger: "blur" }, phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
],
phone: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
],
iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }], iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
installationTime: [ installationTime: [
{ {
...@@ -203,23 +209,22 @@ export default { ...@@ -203,23 +209,22 @@ export default {
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
}); });
} else { } else {
addDeviceInfo(this.form).then(response => { addDeviceInfo(this.form).then((response) => {
if(response.code == 200){ if (response.code == 200) {
this.remove(); this.remove();
this.map.remove(this.obj); this.map.remove(this.obj);
this.form.deviceId = response.data; this.form.deviceId = response.data;
this.gaoMap.addMarker(this.gaoMap.deviceType,this.form); this.gaoMap.addMarker(this.gaoMap.deviceType, this.form);
//this.gaoMap.placeSearch.clear(); //this.gaoMap.placeSearch.clear();
this.gaoMap.closeAddMarker(); this.gaoMap.closeAddMarker();
this.msgSuccess("新增成功"); this.msgSuccess("新增成功");
}else{ } else {
this.msgSuccess("新增失败"); this.msgSuccess("新增失败");
} }
}); });
}
} }
} }
); });
}, },
handleClose(done) { handleClose(done) {
done(); done();
......
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
<el-col> <el-col>
<el-form-item v-show="false" label="企业id" prop="enterpriseId"> <el-form-item v-show="false" label="企业id" prop="enterpriseId">
<el-input disabled v-model="editForm.enterpriseId"></el-input> <el-input disabled v-model="editForm.enterpriseId"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -41,7 +40,7 @@ ...@@ -41,7 +40,7 @@
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item label="管道长度" prop="pipeLength"> <el-form-item label="管道长度" prop="pipeLength">
<el-input type="number" min=0 v-model="editForm.pipeLength"> <el-input type="number" min="0" v-model="editForm.pipeLength">
<i <i
slot="suffix" slot="suffix"
style="color: #000; font-style: normal; margin-right: 10px" style="color: #000; font-style: normal; margin-right: 10px"
...@@ -229,10 +228,20 @@ export default { ...@@ -229,10 +228,20 @@ export default {
console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength); console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
if (this.lineData?.pipeId) { if (this.lineData?.pipeId) {
this.editForm = { ...this.lineData }; this.editForm = { ...this.lineData };
} else {
// 如果是新建的里面天蝎过东西就存档
console.log("内部lineDate", this.target.getExtData());
const { lineData } = this.target.getExtData();
console.log(lineData)
if (lineData) {
this.editForm = { ...lineData };
}
} }
this.editForm.coordinates = getString(this.lnglatsArr); this.editForm.coordinates = getString(this.lnglatsArr);
// 如果有图片路径就赋显,如果没有就啥也没有 // 如果有图片路径就赋显,如果没有就啥也没有
this.fileArr = this.lineData.pipeId ? [{ url: this.editForm.iconUrl }] : []; this.fileArr = this.editForm?.iconUrl
? [{ url: this.editForm.iconUrl }]
: [];
}, },
methods: { methods: {
mouseup() { mouseup() {
...@@ -293,11 +302,17 @@ export default { ...@@ -293,11 +302,17 @@ export default {
this.remove(); this.remove();
}, },
handleClose(done) { handleClose(done) {
this.$confirm("确认关闭?") let options = this.target.getExtData();
.then((_) => { options.lineData = { ...this.editForm };
done(); this.target.setExtData(options);
}) // 把值带出去
.catch((_) => {}); done();
// this.$confirm("确认关闭?")
// .then((_) => {
// done();
// })
// .catch((_) => {});
}, },
// 图片上传成功 // 图片上传成功
fileFinshed(e) { fileFinshed(e) {
......
...@@ -3,62 +3,121 @@ ...@@ -3,62 +3,121 @@
:title="title" :title="title"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="80%" width="80%"
:before-close="handleClose"> :before-close="handleClose"
<el-form ref="form" :model="form" :rules="rules" label-width="135px"> >
<el-form-item label="所属管道" prop="pipeCode"> <el-row>
<el-select v-model="form.pipeCode" placeholder="请选择所属管道"> <el-form ref="form" :model="form" :rules="rules" label-width="135px">
<el-option <el-row>
v-for="item in pipeList" <el-col :span="22">
:key="item.pipeCode" <el-form-item label="所属管道" prop="pipeCode">
:label="item.pipeName" <el-select v-model="form.pipeCode" placeholder="请选择所属管道">
:value="item.pipeCode"> <el-option
</el-option> v-for="item in pipeList"
</el-select> :key="item.pipeCode"
</el-form-item> :label="item.pipeName"
<el-form-item label="设备名称" prop="deviceName"> :value="item.pipeCode"
<el-input v-model="form.deviceName" placeholder="请输入设备名称" /> >
</el-form-item> </el-option>
<el-form-item label="所在地址" prop="deviceAddr"> </el-select>
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" /> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="设备型号" prop="deviceModel"> </el-row>
<el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
</el-form-item> <el-row>
<el-form-item label="经度" prop="longitude"> <el-col :span="11">
<el-input v-model="form.longitude" placeholder="请输入经度" /> <el-form-item label="设备名称" prop="deviceName">
</el-form-item> <el-input
<el-form-item label="纬度" prop="latitude"> v-model="form.deviceName"
<el-input v-model="form.latitude" placeholder="请输入纬度" /> placeholder="请输入设备名称"
</el-form-item> />
<el-form-item label="物联网编号" prop="iotNo"> </el-form-item>
<el-input v-model="form.iotNo" placeholder="请输入物联网编号" /> </el-col>
</el-form-item>
<el-form-item label="设备图片上传" prop="iconUrl"> <el-col :span="11">
<MyFileUpload <el-form-item label="设备型号" prop="deviceModel">
listType="picture-card" <el-input
@resFun="getFileInfo" v-model="form.deviceModel"
@remove="listRemove" placeholder="请输入设备型号"
:fileArr="fileArr" />
/> </el-form-item>
</el-form-item> </el-col>
<el-form-item label="联系人" prop="linkman"> </el-row>
<el-input v-model="form.linkman" placeholder="请输入联系人" />
</el-form-item> <el-col :span="11">
<el-form-item label="电话" prop="phone"> <el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="form.phone" placeholder="请输入电话" /> <el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
</el-form-item> </el-form-item>
<el-form-item label="安装时间" prop="installationTime"> </el-col>
<el-date-picker clearable size="small"
v-model="form.installationTime" <el-col :span="11">
type="datetime" <el-form-item label="物联网编号" prop="iotNo">
value-format="yyyy-MM-dd HH:mm:ss" <el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
placeholder="选择安装时间"> </el-form-item>
</el-date-picker> </el-col>
</el-form-item>
<el-form-item label="备注" prop="remarks"> <el-col :span="22">
<el-input v-model="form.remarks" placeholder="请输入备注" /> <el-form-item label="经纬度坐标" prop="">
</el-form-item> <el-card shadow="newver" class="box-card">
</el-form> <div v-text="`[[${form.longitude},${form.latitude}]]`"></div>
</el-card>
</el-form-item>
</el-col>
<!-- <el-col>
<el-form-item label="纬度" prop="latitude">
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</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="11">
<el-form-item label="联系电话" prop="phone">
<el-input 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="fileArr"
/>
<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-date-picker
clearable
size="small"
v-model="form.installationTime"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择安装时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item label="备注" prop="remarks">
<el-input
type="textarea"
v-model="form.remarks"
placeholder="请输入备注"
/>
</el-form-item>
</el-col>
</el-form>
</el-row>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
...@@ -67,88 +126,90 @@ ...@@ -67,88 +126,90 @@
</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: "4",
},
dialogVisible: false,
fileList: [],
// 表单校验
rules: {},
map: null,
obj: null,
gaoMap: null,
fileArr: [],
pipeList: [],
};
},
components: {
MyFileUpload,
},
methods: {
show() {
this.dialogVisible = true;
}, },
data () { hide() {
return { this.remove();
form : {
deviceType : "4"
},
dialogVisible : false,
fileList: [],
// 表单校验
rules: {
},
map : null,
obj : null,
gaoMap : null,
fileArr: [],
pipeList: []
}
}, },
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 = [];
}
},
mounted(){
pipeAllInfoList({}).then(response => {
this.pipeList = response.data;
}); });
} },
} handleClose(done) {
done();
},
listRemove(e) {
this.form.url = "";
this.fileArr = [];
},
},
mounted() {
pipeAllInfoList({}).then((response) => {
this.pipeList = response.data;
});
},
};
</script> </script>
...@@ -152,7 +152,6 @@ class gaodeMap { ...@@ -152,7 +152,6 @@ class gaodeMap {
options.scrollWheel = true; options.scrollWheel = true;
map.setStatus(options); map.setStatus(options);
}); });
that.markerInfoWindow = infoWindow;
let marker = new AMap.Marker({ let marker = new AMap.Marker({
position: [data.longitude, data.latitude], position: [data.longitude, data.latitude],
map: map, map: map,
...@@ -226,6 +225,8 @@ class gaodeMap { ...@@ -226,6 +225,8 @@ class gaodeMap {
map.setStatus(options); map.setStatus(options);
infoWindow.setContent(e.target.content); infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition()); infoWindow.open(map, e.target.getPosition());
that.markerInfoWindow = infoWindow;
} }
} }
...@@ -522,8 +523,9 @@ class gaodeMap { ...@@ -522,8 +523,9 @@ class gaodeMap {
} }
} }
// 新建line增加编辑以及右键菜单 // 新建line增加编辑以及右键菜单
closeLineInfoWindow() { closeInfoWindow() {
this.showInfoWindow && this.showInfoWindow.close(); this.showInfoWindow && this.showInfoWindow.close();
this.markerInfoWindow && this.markerInfoWindow.close();
} }
// 新line与老line添加点击事件 // 新line与老line添加点击事件
newLineAddEvent(obj) { newLineAddEvent(obj) {
...@@ -563,6 +565,7 @@ class gaodeMap { ...@@ -563,6 +565,7 @@ class gaodeMap {
const pipeLength = obj.getLength(); const pipeLength = obj.getLength();
// 传回来的数据 如果是新管道就是空 // 传回来的数据 如果是新管道就是空
const lineData = type == "newLine" ? {} : obj.getExtData().lineData; const lineData = type == "newLine" ? {} : obj.getExtData().lineData;
// const lineData = obj.getExtData().lineData;
console.log("lineData===================>传入组件的数据", lineData); console.log("lineData===================>传入组件的数据", lineData);
this.infoWindowPipelineView({ this.infoWindowPipelineView({
target: obj, target: obj,
......
...@@ -235,8 +235,8 @@ export default { ...@@ -235,8 +235,8 @@ export default {
this.gaoMap.lineType = 0; this.gaoMap.lineType = 0;
this.gaoMap.mouseTool.close(); this.gaoMap.mouseTool.close();
} }
// 关闭当前线条的infowindow // 关闭当前的infowindow
this.gaoMap.closeLineInfoWindow(); this.gaoMap.closeInfoWindow();
this.deviceType = !this.deviceType; this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add"; this.gaoMap.mapOperateType = "add";
...@@ -294,6 +294,8 @@ export default { ...@@ -294,6 +294,8 @@ export default {
// this.gaoMap.placeSearch.clear(); // this.gaoMap.placeSearch.clear();
this.gaoMap.closeAddMarker(); this.gaoMap.closeAddMarker();
} }
// 关闭当前的infowindow
this.gaoMap.closeInfoWindow();
this.createReset(); this.createReset();
}, },
deleteDevice() { deleteDevice() {
...@@ -313,6 +315,8 @@ export default { ...@@ -313,6 +315,8 @@ export default {
//this.gaoMap.placeSearch.clear(); //this.gaoMap.placeSearch.clear();
this.gaoMap.closeAddMarker(); this.gaoMap.closeAddMarker();
} }
// 关闭当前的infowindow
this.gaoMap.closeInfoWindow();
this.createReset(); this.createReset();
}, },
selectDeviceType(val) { selectDeviceType(val) {
...@@ -384,7 +388,7 @@ export default { ...@@ -384,7 +388,7 @@ export default {
console.log("window"); console.log("window");
this.deviceType = false; this.deviceType = false;
// 关闭当前线条的infowindow // 关闭当前线条的infowindow
this.gaoMap.closeLineInfoWindow() this.gaoMap.closeInfoWindow()
// 如果没有选择的时候点window 则高亮消失 // 如果没有选择的时候点window 则高亮消失
if (this.targetNum == 1 && this.iconClass == "icon-create") { if (this.targetNum == 1 && this.iconClass == "icon-create") {
this.targetNum = 0; this.targetNum = 0;
......
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