<template>
|
<div class="params-container">
|
<el-form
|
ref="ruleForm"
|
size="mini"
|
label-position="top"
|
:model="params"
|
:rules="rules"
|
class="params-dialog bg-white"
|
>
|
<el-form-item label="机房名称" prop="stationName">
|
<el-select
|
v-model="homeName"
|
placeholder="请选择"
|
@change="change"
|
filterable
|
>
|
<el-option
|
v-for="item in homeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="详细地址" prop="address">
|
<el-input
|
type="textarea"
|
:rows="3"
|
resize="none"
|
placeholder="请输入详细地址"
|
v-model="params.address"
|
>
|
</el-input>
|
</el-form-item>
|
<div class="table-layout">
|
<div class="table-row">
|
<div class="table-cell">经度：{{ point.lng }}</div>
|
<div class="table-cell">纬度：{{ point.lat }}</div>
|
</div>
|
</div>
|
<div class="form-footer">
|
<three-btn @click="validData">确定</three-btn>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import { addMapStation } from "@/views/dataMager/js/station";
|
|
export default {
|
name: "AddPanel",
|
data() {
|
return {
|
homeName: "",
|
homeList: [],
|
point: {
|
lng: 0,
|
lat: 0,
|
},
|
params: {
|
stationName1: "", // 省
|
stationName2: "", // 市
|
stationName5: "", // 区县
|
stationName3: "", // 站点名称
|
stationName: "", // 站点全称
|
address: "", //机房物理信息
|
longitude: "", // 经度
|
latitude: "", // 纬度
|
information: "", //备注
|
stationId: '',
|
},
|
rules: {
|
stationName: [
|
{ required: true, message: "请选择要添加的机房", trigger: "change" },
|
],
|
address: [
|
{ required: true, message: "详细地址不能为空", trigger: "change" },
|
],
|
},
|
};
|
},
|
methods: {
|
// 根据选择的机房更新详细地址的省-市-区县
|
change(value) {
|
let name = this.homeList.filter((v) => v.value == value)[0].label;
|
this.params.stationId = value;
|
let infos = name.split("-");
|
// 解析的长度大于2
|
if (infos.length > 3) {
|
this.params.stationName1 = infos[0]; // 省
|
this.params.stationName2 = infos[1]; // 市
|
this.params.stationName5 = infos[2]; // 区县
|
this.params.stationName3 = infos[3]; // 机房名称
|
this.params.stationName = name; // 机房全称
|
this.params.address = infos[0] + "-" + infos[1] + "-" + infos[2] + "-"; // 省-市-区县-
|
}
|
},
|
init() {
|
this.homeName = ""; // 初始化下拉框
|
this.params.stationName1 = ""; // 省
|
this.params.stationName2 = ""; // 市
|
this.params.stationName5 = ""; // 区县
|
this.params.stationName3 = ""; // 机房名称
|
this.params.stationName = ""; // 机房全称
|
this.params.address = ""; // 地址
|
this.params.stationId = '';
|
},
|
validData() {
|
this.$refs.ruleForm.validate((valid) => {
|
// 校验通过
|
if (valid) {
|
// 设置经纬度
|
this.params.longitude = this.point.lng;
|
this.params.latitude = this.point.lat;
|
this.$layer.confirm(
|
"确认添加机房到该位置",
|
{ icon: 3, title: "系统提示" },
|
(index) => {
|
// 关闭弹出框
|
this.$layer.close(index);
|
// 添加机房到地图
|
this.addHome();
|
}
|
);
|
} else {
|
this.$layer.msg("存在校验未通过的数据！");
|
return false;
|
}
|
});
|
},
|
addHome() {
|
// 请求后台添加机房到地图
|
addMapStation(this.params)
|
.then((res) => {
|
let rs = res.data;
|
if (rs.code === 1) {
|
this.init(); // 初始化面板
|
this.$layer.msg("添加成功！");
|
this.$emit("handleEvent", 1);
|
} else {
|
this.$layer.msg("添加失败！");
|
this.$emit("handleEvent", 0);
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.params-container {
|
width: 320px;
|
background-color: #ffffff;
|
}
|
.table-layout {
|
margin-top: 16px;
|
}
|
.bg-white .table-cell {
|
color: #000000;
|
}
|
</style>
|
