<template>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
:before-close="handleClose"
>
<el-row>
<el-form ref="form" :model="form" :rules="rules" label-width="135px">
<el-row>
<el-col :span="22">
<el-form-item label="所属管道" prop="pipeId">
<el-select
v-model="form.pipeId"
placeholder="请选择所属管道"
filterable
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
:key="item.pipeId"
:label="item.pipeName"
:value="item.pipeId"
>
</el-option>
</el-select>
</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-form-item label="设备型号" prop="deviceModel">
<el-input
v-model="form.deviceModel"
placeholder="请输入设备型号"
/>
</el-form-item>
</el-col>
</el-row>
<el-col :span="11">
<el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="物联网编号" prop="iotNo">
<el-input v-model="form.iotNo" placeholder="请输入物联网编号" />
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item label="经纬度坐标" prop="">
<el-card class="box-card">
<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
type="number"
maxlength="11"
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">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</template>
<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";
export default {
props: {
title: { type: String },
},
data() {
return {
form: {
deviceType: "1",
iconUrl:"",
},
type: DEVICE_TYPE.REGEULATORBOX,
dialogVisible: false,
fileList: [],
map: null,
obj: null,
gaoMap: null,
fileArr: [],
pipeList: [],
rules: {
pipeId: [
{ 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: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
//this.getPipeInfo();
},
hide() {
this.remove();
},
getFileInfo(res) {
this.form.iconUrl = res.url;
},
submitForm() {
console.log(this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.deviceId != null) {
updateDeviceInfo(this.form).then((response) => {
if (response.code == 200) {
this.dialogVisible = false;
const index = this.gaoMap.markers.indexOf(this.obj);
if (index >= 0) {
this.gaoMap.markers.splice(index, 1);
this.gaoMap.changePolineListNum = index;
}
this.map.remove(this.obj);
this.gaoMap.addMarker(
// this.form.deviceType,
//这个是上图用的type，跟后台的type不一致
this.type,
this.form,
() => {
const arr = this.gaoMap.markers.map((item) => {
return item.getExtData();
});
console.log(arr);
this.gaoMap.view.deviceClassify(arr);
this.gaoMap.view.pipeList();
}
);
this.msgSuccess("修改成功");
}
});
} else {
addDeviceInfo(this.form).then((response) => {
if (response.code == 200) {
this.remove();
this.map.remove(this.obj);
this.form.deviceId = response.data;
this.gaoMap.addMarker(this.type, this.form, () => {
const arr = this.gaoMap.markers.map((item) => {
return item.getExtData();
});
this.gaoMap.view.deviceClassify(arr);
this.gaoMap.view.pipeList();
});
//this.gaoMap.placeSearch.clear();
//this.gaoMap.closeAddMarker();
this.msgSuccess("新增成功");
} else {
// this.msgSuccess("新增失败");
}
});
}
}
});
},
listRemove(e) {
this.form.url = "";
this.form.iconUrl="";
this.fileArr = [];
},
handleClose(done) {
done();
},
getPipeInfos() {
pipeAllInfoList({}).then((response) => {
this.pipeList = response.data;
});
},
},
watch: {
dialogVisible(val) {
if (val) {
this.getPipeInfos();
}
},
},
};
</script>