@ -1,22 +1,276 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 新建或者修改 -->
|
<!-- 新建或者修改 -->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
|
class="dialog"
|
||||||
:title="dialogTitle"
|
:title="dialogTitle"
|
||||||
:visible.sync="visible"
|
:visible.sync="visible"
|
||||||
width="1300px"
|
:close-on-click-modal="false"
|
||||||
@close="close"
|
width="970px"
|
||||||
>
|
>
|
||||||
<div>123</div>
|
<div class="form_body">
|
||||||
|
<!-- 设备基础信息表单 -->
|
||||||
|
<div class="equipment_form">
|
||||||
|
<p>设备基础信息</p>
|
||||||
|
<el-form ref="equipmentForm" :model="equipmentForm">
|
||||||
|
<el-form-item label="企业名称">
|
||||||
|
<el-select
|
||||||
|
v-model="equipmentForm.company.villageName"
|
||||||
|
placeholder="请选择企业"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in equipmentForm.company"
|
||||||
|
:key="item.villageCode"
|
||||||
|
:label="item.villageName"
|
||||||
|
:value="item.villageCode"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备名称">
|
||||||
|
<el-input v-model="equipmentForm.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备IP">
|
||||||
|
<el-input v-model="equipmentForm.ip"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备大类">
|
||||||
|
<el-input v-model="equipmentForm.big"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备小类">
|
||||||
|
<el-input v-model="equipmentForm.small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登录账号">
|
||||||
|
<el-input v-model="equipmentForm.passUser"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登录密码">
|
||||||
|
<el-input v-model="equipmentForm.passNum"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<!-- 视频通道信息表单 -->
|
||||||
|
<div class="video_form">
|
||||||
|
<p>视频通道信息</p>
|
||||||
|
<el-form ref="videoForm" :model="videoForm">
|
||||||
|
<el-form-item label="通道编码">
|
||||||
|
<el-input v-model="videoForm.channelCode"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="NVR编码">
|
||||||
|
<el-input v-model="videoForm.NVRCode"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="通道号">
|
||||||
|
<el-input v-model="videoForm.channelNum"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="RTSP流地址">
|
||||||
|
<el-input v-model="videoForm.address"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<!-- 设备位置信息表单 -->
|
||||||
|
<div class="equipment_address_form">
|
||||||
|
<p>设备位置信息</p>
|
||||||
|
<el-form ref="addressForm" :model="addressForm">
|
||||||
|
<el-form-item label="设备经度">
|
||||||
|
<el-input v-model="addressForm.longitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备纬度">
|
||||||
|
<el-input v-model="addressForm.latitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="U3D经度">
|
||||||
|
<el-input v-model="addressForm.U3D_longitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="U3D纬度">
|
||||||
|
<el-input v-model="addressForm.U3D_latitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备高度">
|
||||||
|
<el-input v-model="addressForm.equipemnt_hight"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="U3D高度">
|
||||||
|
<el-input v-model="addressForm.U3D_hight"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备方位">
|
||||||
|
<el-select
|
||||||
|
v-model="addressForm.equipment_orientation.orientationCode"
|
||||||
|
placeholder="请选择设备方位"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in addressForm.equipment_orientation"
|
||||||
|
:key="item.orientationCode"
|
||||||
|
:label="item.orientation"
|
||||||
|
:value="item.orientationCode"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="安装位置">
|
||||||
|
<el-input v-model="addressForm.equipment_position"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<!-- 设备其他信息表单 -->
|
||||||
|
<div class="other_form">
|
||||||
|
<p>设备其他信息</p>
|
||||||
|
<el-form ref="otherForm" :model="otherForm">
|
||||||
|
<el-form-item label="设备品牌">
|
||||||
|
<el-input v-model="otherForm.brand"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备厂家">
|
||||||
|
<el-input v-model="otherForm.manufacturer"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="厂家联系电话">
|
||||||
|
<el-input v-model="otherForm.manufacturer_phone"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="SN号">
|
||||||
|
<el-input v-model="otherForm.SN_num"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备MAC">
|
||||||
|
<el-input v-model="otherForm.MAC"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备端口">
|
||||||
|
<el-input v-model="otherForm.port"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="saveFormData">保 存</el-button>
|
||||||
|
<el-button>取 消</el-button>
|
||||||
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import {debounce} from '@/utils/publicMethod_lxy/debounce.js'
|
||||||
export default {
|
export default {
|
||||||
|
name: "AddDialog",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
visible: false,
|
visible: false,
|
||||||
|
dialogTitle: "新建",
|
||||||
|
equipmentForm: {
|
||||||
|
// 设备基础信息表单
|
||||||
|
company: [],
|
||||||
|
},
|
||||||
|
// 视频通道信息表单
|
||||||
|
videoForm: {
|
||||||
|
channelCode: "",
|
||||||
|
NVRCode: "",
|
||||||
|
channelNum: "",
|
||||||
|
address: "",
|
||||||
|
},
|
||||||
|
// 设备位置信息表单
|
||||||
|
addressForm: {
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
U3D_longitude: "",
|
||||||
|
U3D_latitude: "",
|
||||||
|
equipemnt_hight: "",
|
||||||
|
U3D_hight: "",
|
||||||
|
equipment_orientation: [],
|
||||||
|
equipment_position: "",
|
||||||
|
},
|
||||||
|
// 设备其他信息表单
|
||||||
|
otherForm: {
|
||||||
|
brand: "",
|
||||||
|
manufacturer: "",
|
||||||
|
manufacturer_phone: "",
|
||||||
|
SN_num: "",
|
||||||
|
MAC: "",
|
||||||
|
port: "",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
saveFormData:debounce(function() {
|
||||||
|
this.$message.success('232324234')
|
||||||
|
},300)
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
/deep/.el-dialog {
|
||||||
|
.el-dialog__title {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
background-image: url("~@/assets/companyFile/22136.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 720px;
|
||||||
|
/* 关闭弹窗叉号 */
|
||||||
|
.el-dialog__headerbtn {
|
||||||
|
.el-dialog__close {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-button {
|
||||||
|
width: 70px;
|
||||||
|
border: 1px solid #4a6072;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 0px !important;
|
||||||
|
background: #323f43;
|
||||||
|
}
|
||||||
|
.el-button:focus,
|
||||||
|
.el-button:hover {
|
||||||
|
color: #34e1b3;
|
||||||
|
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
|
||||||
|
background-size: 100% 100% !important;
|
||||||
|
}
|
||||||
|
.form_body {
|
||||||
|
height: 600px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
.form_body::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
background-color: #5e666a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.form_body::-webkit-scrollbar-thumb {
|
||||||
|
width: 9px;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.el-form {
|
||||||
|
/* 表单内容浮动布局，多行多列表单 */
|
||||||
|
width: 900px !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.el-form-item {
|
||||||
|
/* 表单域名跟input浮动布局 */
|
||||||
|
display: flex;
|
||||||
|
width: 30%;
|
||||||
|
.el-form-item__label {
|
||||||
|
width: 40%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-form-item__content {
|
||||||
|
.el-input__inner {
|
||||||
|
width: 170px;
|
||||||
|
border-radius: 0px;
|
||||||
|
background: #3c4b4a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/* 查询框点击颜色变化 */
|
||||||
|
.el-input__inner:focus,
|
||||||
|
.el-input__inner:hover {
|
||||||
|
border-color: #1b3736;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in new issue