lukeyan
1 year ago
parent
24a1f9d89c
commit
94d0963b91
@ -0,0 +1,3 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
export default new Vue
|
||||
@ -0,0 +1,451 @@
|
||||
<template>
|
||||
<!-- 视频监控新建或者修改 -->
|
||||
<el-dialog
|
||||
class="dialog"
|
||||
:title="dialogTitle"
|
||||
:visible.sync="visible"
|
||||
:close-on-click-modal="false"
|
||||
width="970px"
|
||||
>
|
||||
<div class="form_body">
|
||||
<!-- 设备基础信息表单 -->
|
||||
<div class="equipment_form">
|
||||
<p>设备基础信息</p>
|
||||
<el-form
|
||||
ref="equipmentForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<el-form-item label="企业名称" prop="companyName">
|
||||
<el-select v-model="form.companyName" placeholder="请选择企业">
|
||||
<el-option
|
||||
v-for="item in form.company"
|
||||
:key="item.id"
|
||||
:label="item.companyName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</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="deviceParentType">
|
||||
<el-select
|
||||
v-model="form.deviceParentType"
|
||||
placeholder="请选择设备大类"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in form.perception_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.video_type"
|
||||
:key="item.dictValue"
|
||||
:label="item.dictLabel"
|
||||
:value="item.dictValue"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号">
|
||||
<el-input v-model="form.account"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码">
|
||||
<el-input v-model="form.password"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 视频通道信息表单 -->
|
||||
<div class="video_form">
|
||||
<p>视频通道信息</p>
|
||||
<el-form
|
||||
ref="videoForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<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="通道号">
|
||||
<el-input v-model="form.channelNo"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="RTSP流地址">
|
||||
<el-input v-model="form.rtspAddress"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 设备位置信息表单 -->
|
||||
<div class="equipment_address_form">
|
||||
<p>设备位置信息</p>
|
||||
<el-form
|
||||
ref="addressForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<el-form-item label="设备经度">
|
||||
<el-input v-model="form.longitude" prop="longitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备纬度">
|
||||
<el-input v-model="form.latitude" prop="latitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="U3D经度">
|
||||
<el-input v-model="form.u3dLongitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="U3D纬度">
|
||||
<el-input v-model="form.u3dLatitude"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备高度">
|
||||
<el-input v-model="form.deviceHeight"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="U3D高度">
|
||||
<el-input v-model="form.u3dHeight"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备方位">
|
||||
<el-select v-model="form.orientation" placeholder="请选择设备方位">
|
||||
<el-option
|
||||
v-for="item in form.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>
|
||||
</div>
|
||||
<!-- 设备其他信息表单 -->
|
||||
<div class="other_form">
|
||||
<p>设备其他信息</p>
|
||||
<el-form ref="otherForm" :model="form" :disabled="disabled">
|
||||
<el-form-item label="设备品牌">
|
||||
<el-input v-model="form.deviceBrand"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备厂家">
|
||||
<el-input v-model="form.manufactor"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="厂家联系电话">
|
||||
<el-input v-model="form.manufactorPhone"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="SN号">
|
||||
<el-input v-model="form.deviceSn"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备MAC">
|
||||
<el-input v-model="form.deviceMac"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备端口">
|
||||
<el-input v-model="form.devicePort"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="saveFormData('equipmentForm','videoForm','addressForm','otherForm')">保 存</el-button>
|
||||
<el-button>取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
commonDict,
|
||||
getCompanyList,
|
||||
addVideoList,
|
||||
} from "@/api/correlationEquipment";
|
||||
import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
|
||||
export default {
|
||||
name: "addVideoDialog",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
dialogTitle: "新建",
|
||||
form: {
|
||||
// 设备基础信息表单
|
||||
companyId: "",
|
||||
companyName: "",
|
||||
company: [],
|
||||
deviceName: "",
|
||||
deviceIp: "",
|
||||
deviceVideoParentType: "",
|
||||
deviceParentType: "", // 大类
|
||||
video_type: [],
|
||||
deviceVideoSubType: "", // 小类
|
||||
perception_type: [],
|
||||
account: "",
|
||||
password: "",
|
||||
// 视频通道信息表单
|
||||
gbsChannelNo: "",
|
||||
gbsNvrNo: "",
|
||||
channelNo: "",
|
||||
rtspAddress: "",
|
||||
// 设备位置信息表单
|
||||
longitude: "",
|
||||
latitude: "",
|
||||
u3dLongitude: "",
|
||||
u3dLatitude: "",
|
||||
deviceHeight: "",
|
||||
u3dHeight: "",
|
||||
orientation: "",
|
||||
orientation_types: [],
|
||||
deviceAddress: "",
|
||||
// 设备其他信息表单
|
||||
deviceBrand: "",
|
||||
manufactor: "",
|
||||
manufactorPhone: "",
|
||||
deviceSn: "",
|
||||
deviceMac: "",
|
||||
devicePort: "",
|
||||
isDoorwayVideo: "",
|
||||
isShowVideo: "",
|
||||
},
|
||||
disabled: false, // 表单是否禁用
|
||||
rules: {
|
||||
companyName: [
|
||||
{ required: true, message: "请选择企业", trigger: "change" },
|
||||
],
|
||||
deviceName: [
|
||||
{ required: true, message: "请填写设备名称", trigger: "blur" },
|
||||
],
|
||||
deviceIp: [
|
||||
{ required: true, message: "请填写设备ip", trigger: "blur" },
|
||||
],
|
||||
deviceParentType: [
|
||||
{ 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" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
dictType: "device_video_sub_type",
|
||||
};
|
||||
commonDict(params).then((res) => {
|
||||
this.form.video_type = res.data;
|
||||
});
|
||||
const val = {
|
||||
dictType: "device_perception_sub_type",
|
||||
};
|
||||
commonDict(val).then((res) => {
|
||||
this.form.perception_type = res.data;
|
||||
});
|
||||
const param_op = {
|
||||
dictType: "orientation",
|
||||
};
|
||||
commonDict(param_op).then((res) => {
|
||||
this.form.orientation_types = res.data;
|
||||
});
|
||||
getCompanyList().then((res) => {
|
||||
this.form.company = res.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
open(num, row) {
|
||||
this.visible = true;
|
||||
if (num === "1") {
|
||||
this.dialogTitle = "新建";
|
||||
} else if (num === "2") {
|
||||
this.dialogTitle = "编辑";
|
||||
this.form = row;
|
||||
} else if (num === "5") {
|
||||
this.dialogTitle = "详情";
|
||||
this.form = row;
|
||||
this.disabled = true
|
||||
}
|
||||
},
|
||||
saveFormData: debounce(function (formName1,formName2,formName3) {
|
||||
this.$refs[formName1].validate((valid1) => {
|
||||
console.log('valid1',valid1);
|
||||
if (valid1) {
|
||||
this.$message.warning("请填入必填项");
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}); // 设备基础必填验证
|
||||
this.$refs[formName2].validate((valid2) => {
|
||||
console.log('valid2',valid2);
|
||||
if (valid2) {
|
||||
this.$message.warning("请填入必填项");
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}); // 视频通道信息必填验证
|
||||
this.$refs[formName3].validate((valid3) => {
|
||||
console.log('valid3',valid3);
|
||||
if (valid3) {
|
||||
this.$message.warning("请填入必填项");
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}); // 视频通道信息必填验证
|
||||
delete this.form.company;
|
||||
delete this.form.video_type;
|
||||
delete this.form.perception_type;
|
||||
delete this.form.orientation_types;
|
||||
const params = this.form;
|
||||
console.log("this.form", this.form);
|
||||
if (this.dialogTitle === "新建") {
|
||||
addVideoList(params).then((res) => {
|
||||
console.log("res78", res);
|
||||
if (res.code === 200) {
|
||||
this.visible = false;
|
||||
} else {
|
||||
this.$message.warning("新建失败");
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 300),
|
||||
},
|
||||
};
|
||||
</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: 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;
|
||||
p {
|
||||
padding-top: 15px;
|
||||
margin-left: 17px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
}
|
||||
.equipment_form,
|
||||
.video_form,
|
||||
.equipment_address_form,
|
||||
.other_form {
|
||||
background: url("~@/assets/companyFile/242112.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.el-form {
|
||||
/* 表单内容浮动布局，多行多列表单 */
|
||||
width: 900px !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.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