commit
099708158a
@ -0,0 +1,349 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 视频新增、编辑、查看表单 -->
|
||||||
|
<el-dialog
|
||||||
|
class="dialog"
|
||||||
|
:title="title"
|
||||||
|
:visible.sync="visible"
|
||||||
|
@close="close()"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
width="970px"
|
||||||
|
>
|
||||||
|
<div class="form_body">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules">
|
||||||
|
<el-form-item> <p>设备基础信息</p> </el-form-item>
|
||||||
|
<el-form-item> </el-form-item>
|
||||||
|
<el-form-item label="企业名称" prop="companyName">
|
||||||
|
<el-select
|
||||||
|
ref="companySelect"
|
||||||
|
v-model="form.companyName"
|
||||||
|
placeholder="请选择企业"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in form_list.company"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.companyName"
|
||||||
|
:value="item.id"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item> </el-form-item>
|
||||||
|
<el-form-item label="设备名称" prop="deviceName">
|
||||||
|
<el-input v-model="form.deviceName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备IP" prop="deviceIp">
|
||||||
|
<el-input v-model="form.deviceIp"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备大类" prop="deviceVideoParentType">
|
||||||
|
<el-select
|
||||||
|
v-model="form.deviceVideoParentType"
|
||||||
|
placeholder="请选择设备大类"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in form_list.parent_type"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:label="item.dictLabel"
|
||||||
|
:value="item.dictValue"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备小类" prop="deviceVideoSubType">
|
||||||
|
<el-select
|
||||||
|
v-model="form.deviceVideoSubType"
|
||||||
|
placeholder="请选择设备小类"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in form_list.son_type"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:label="item.dictLabel"
|
||||||
|
:value="item.dictValue"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登录账号" prop="account">
|
||||||
|
<el-input v-model="form.account"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登录密码" prop="password">
|
||||||
|
<el-input v-model="form.password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item> <p>视频通道信息</p> </el-form-item>
|
||||||
|
<el-form-item> </el-form-item>
|
||||||
|
<el-form-item label="通道编码" prop="gbsChannelNo">
|
||||||
|
<el-input v-model="form.gbsChannelNo"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="NVR编码" prop="gbsNvrNo">
|
||||||
|
<el-input v-model="form.gbsNvrNo"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="通道号" prop="channelNo">
|
||||||
|
<el-input v-model="form.channelNo"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="RTSP流地址" prop="rtspAddress">
|
||||||
|
<el-input v-model="form.rtspAddress"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item> <p>设备位置信息</p> </el-form-item>
|
||||||
|
<el-form-item> </el-form-item>
|
||||||
|
<el-form-item label="设备经度" prop="longitude">
|
||||||
|
<el-input v-model="form.longitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备纬度" prop="latitude">
|
||||||
|
<el-input v-model="form.latitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="U3D经度" prop="u3dLongitude">
|
||||||
|
<el-input v-model="form.u3dLongitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="U3D纬度" prop="u3dLatitude">
|
||||||
|
<el-input v-model="form.u3dLatitude"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备高度" prop="deviceHeight">
|
||||||
|
<el-input v-model="form.deviceHeight"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="U3D高度" prop="u3dHeight">
|
||||||
|
<el-input v-model="form.u3dHeight"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备方位" prop="orientation">
|
||||||
|
<el-select v-model="form.orientation" placeholder="请选择设备方位">
|
||||||
|
<el-option
|
||||||
|
v-for="item in form_list.orientation_types"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:label="item.dictLabel"
|
||||||
|
:value="item.dictValue"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="安装位置" prop="deviceAddress">
|
||||||
|
<el-input v-model="form.deviceAddress"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item> <p>设备其他信息</p> </el-form-item>
|
||||||
|
<el-form-item> </el-form-item>
|
||||||
|
<el-form-item label="设备品牌" prop="deviceBrand">
|
||||||
|
<el-input v-model="form.deviceBrand"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备厂家" prop="manufactor">
|
||||||
|
<el-input v-model="form.manufactor"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="厂家联系电话" prop="manufactorPhone">
|
||||||
|
<el-input v-model="form.manufactorPhone"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="SN号" prop="deviceSn">
|
||||||
|
<el-input v-model="form.deviceSn"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备MAC" prop="deviceMac">
|
||||||
|
<el-input v-model="form.deviceMac"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备端口" prop="devicePort">
|
||||||
|
<el-input v-model="form.devicePort"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="form_btn" slot="footer">
|
||||||
|
<el-button @click="save">保 存</el-button>
|
||||||
|
<el-button @click="close">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visible: false,
|
||||||
|
title: "新建",
|
||||||
|
form: {
|
||||||
|
companyName: "",
|
||||||
|
deviceName: "",
|
||||||
|
deviceIp: "",
|
||||||
|
deviceVideoParentType: "",
|
||||||
|
deviceVideoSubType: "",
|
||||||
|
account: "",
|
||||||
|
password: "",
|
||||||
|
gbsChannelNo: "",
|
||||||
|
gbsNvrNo: "",
|
||||||
|
channelNo: "",
|
||||||
|
rtspAddress: "",
|
||||||
|
longitude: "",
|
||||||
|
latitude: "",
|
||||||
|
u3dLongitude: "",
|
||||||
|
u3dLatitude: "",
|
||||||
|
deviceHeight: "",
|
||||||
|
u3dHeight: "",
|
||||||
|
orientation: "",
|
||||||
|
deviceAddress: "",
|
||||||
|
deviceBrand: "",
|
||||||
|
manufactor: "",
|
||||||
|
manufactorPhone: "",
|
||||||
|
deviceSn: "",
|
||||||
|
deviceMac: "",
|
||||||
|
devicePort: "",
|
||||||
|
},
|
||||||
|
form_list: {
|
||||||
|
company: [],
|
||||||
|
parent_type: [],
|
||||||
|
son_type: [],
|
||||||
|
orientation_types: [],
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
companyName: [
|
||||||
|
{ required: true, message: "请选择企业", trigger: "change" },
|
||||||
|
],
|
||||||
|
deviceName: [
|
||||||
|
{ required: true, message: "请填写设备名称", trigger: "blur" },
|
||||||
|
],
|
||||||
|
deviceIp: [
|
||||||
|
{ required: true, message: "请填写设备ip", trigger: "blur" },
|
||||||
|
],
|
||||||
|
deviceVideoParentType: [
|
||||||
|
{ required: true, message: "请选择设备大类", trigger: "change" },
|
||||||
|
],
|
||||||
|
deviceVideoSubType: [
|
||||||
|
{ required: true, message: "请选择设备小类", trigger: "change" },
|
||||||
|
],
|
||||||
|
gbsChannelNo: [
|
||||||
|
{ required: true, message: "请输入通道编码", trigger: "blur" },
|
||||||
|
],
|
||||||
|
gbsNvrNo: [
|
||||||
|
{ required: true, message: "请输入NVR编码", trigger: "blur" },
|
||||||
|
],
|
||||||
|
longitude: [
|
||||||
|
{ required: true, message: "请输入设备经度", trigger: "blur" },
|
||||||
|
],
|
||||||
|
latitude: [
|
||||||
|
{ required: true, message: "请输入设备经度", trigger: "blur" },
|
||||||
|
],
|
||||||
|
deviceAddress: [
|
||||||
|
{ required: true, message: "请输入安装位置", trigger: "blur" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.$refs["form"].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
console.log('submit');
|
||||||
|
} else {
|
||||||
|
this.$message.warning('请填入必填项')
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 关闭弹窗
|
||||||
|
close() {
|
||||||
|
// 表单清空
|
||||||
|
this.$refs["form"].resetFields();
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/.el-dialog {
|
||||||
|
.el-dialog__title {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
background-image: url("~@/assets/companyFile/dialogBack.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 750px;
|
||||||
|
|
||||||
|
/* 关闭弹窗叉号 */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form_body {
|
||||||
|
margin-top: 3%;
|
||||||
|
height: 600px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
background: url("~@/assets/companyFile/242112.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
p {
|
||||||
|
padding-top: 15px;
|
||||||
|
margin-left: 17px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form_body::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
background-color: #5e666a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form_body::-webkit-scrollbar-thumb {
|
||||||
|
width: 5px;
|
||||||
|
background-color: #3c4b4a;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.form_btn {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/.el-form {
|
||||||
|
/* 表单内容浮动布局，多行多列表单 */
|
||||||
|
width: 900px !important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 2vh;
|
||||||
|
.el-form-item {
|
||||||
|
/* 表单域名跟input浮动布局 */
|
||||||
|
display: flex;
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
width: 40%;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__content {
|
||||||
|
.el-input__inner {
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 0px;
|
||||||
|
// border: 0.5px dashed;
|
||||||
|
background: #3c4b4a;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询框点击颜色变化 */
|
||||||
|
.el-input__inner:focus,
|
||||||
|
.el-input__inner:hover {
|
||||||
|
border-color: #1b3736;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue