2020-11-23 18:17:20 +08:00
|
|
|
<template>
|
|
|
|
|
<div id="addlatform" v-loading="isLoging">
|
|
|
|
|
<el-dialog title="添加平台" width="70%" top="2rem" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
|
|
|
|
|
<div id="shared" style="text-align: right; margin-top: 1rem;">
|
|
|
|
|
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
<el-col :span="11">
|
|
|
|
|
<el-form ref="platform1" :rules="rules" :model="platform" label-width="160px" >
|
|
|
|
|
<el-form-item label="名称" prop="name">
|
|
|
|
|
<el-input v-model="platform.name"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="SIP服务国标编码" prop="serverGBId">
|
|
|
|
|
<el-input v-model="platform.serverGBId" clearable></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="SIP服务国标域" prop="serverGBDomain">
|
|
|
|
|
<el-input v-model="platform.serverGBDomain" clearable></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="SIP服务IP" prop="serverIP">
|
|
|
|
|
<el-input v-model="platform.serverIP" clearable></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="SIP服务端口" prop="serverPort">
|
|
|
|
|
<el-input v-model="platform.serverPort" clearable></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="设备国标编号" prop="deviceGBId">
|
|
|
|
|
<el-input v-model="platform.deviceGBId" clearable></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="本地IP" prop="deviceIp">
|
|
|
|
|
<el-input v-model="platform.deviceIp" :disabled="true"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="本地端口" prop="devicePort">
|
|
|
|
|
<el-input v-model="platform.devicePort" :disabled="true"></el-input>
|
|
|
|
|
</el-form-item>
|
2020-11-24 16:41:00 +08:00
|
|
|
|
2020-11-23 18:17:20 +08:00
|
|
|
</el-form>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-form ref="platform2" :rules="rules" :model="platform" label-width="160px">
|
|
|
|
|
<el-form-item label="SIP认证用户名" prop="username">
|
|
|
|
|
<el-input v-model="platform.username"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="SIP认证密码" prop="password">
|
|
|
|
|
<el-input v-model="platform.password" type="password"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="注册周期(秒)" prop="expires">
|
|
|
|
|
<el-input v-model="platform.expires"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="心跳周期(秒)" prop="keepTimeout">
|
|
|
|
|
<el-input v-model="platform.keepTimeout"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="信令传输" prop="transport">
|
|
|
|
|
<el-select v-model="platform.transport" style="width:100%" placeholder="请选择信令传输方式">
|
|
|
|
|
<el-option label="UDP" value="UDP"></el-option>
|
|
|
|
|
<el-option label="TCP" value="TCP"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="字符集" prop="characterSet">
|
|
|
|
|
<el-select v-model="platform.characterSet" style="width:100%" placeholder="请选择字符集">
|
|
|
|
|
<el-option label="GB2312" value="GB2312"></el-option>
|
|
|
|
|
<el-option label="UTF-8" value="UTF-8"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="其他选项" >
|
|
|
|
|
<el-checkbox label="启用" v-model="platform.enable" ></el-checkbox>
|
2020-11-24 16:41:00 +08:00
|
|
|
<el-checkbox label="云台控制" v-model="platform.PTZEnable"></el-checkbox>
|
|
|
|
|
<el-checkbox label="RTCP保活" v-model="platform.rtcp"></el-checkbox>
|
2020-11-23 18:17:20 +08:00
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="onSubmit">{{onSubmit_text}}</el-button>
|
|
|
|
|
<el-button @click="close">取消</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: 'platformEdit',
|
|
|
|
|
props: {},
|
|
|
|
|
computed: {
|
2020-11-24 16:41:00 +08:00
|
|
|
|
2020-11-23 18:17:20 +08:00
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
data() {
|
2020-11-24 16:41:00 +08:00
|
|
|
var deviceGBIdRules = async (rule, value, callback) => {
|
|
|
|
|
console.log(value)
|
|
|
|
|
if (value === '') {
|
|
|
|
|
callback(new Error('请输入设备国标编号'));
|
|
|
|
|
} else {
|
|
|
|
|
var exit = await this.deviceGBIdExit(value);
|
|
|
|
|
console.log(exit)
|
|
|
|
|
console.log(exit == "true")
|
|
|
|
|
console.log(exit === "true")
|
|
|
|
|
if (exit) {
|
|
|
|
|
callback(new Error('设备国标编号已存在'));
|
|
|
|
|
}else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
2020-11-23 18:17:20 +08:00
|
|
|
return {
|
|
|
|
|
listChangeCallback: null,
|
|
|
|
|
showDialog: false,
|
|
|
|
|
isLoging: false,
|
|
|
|
|
onSubmit_text:"立即创建",
|
|
|
|
|
// platform: {
|
|
|
|
|
// enable: false,
|
|
|
|
|
// PTZEnable: true,
|
|
|
|
|
// rtcp: false,
|
|
|
|
|
// name: null,
|
|
|
|
|
// serverGBId: null,
|
|
|
|
|
// serverGBDomain: null,
|
|
|
|
|
// serverIP: null,
|
|
|
|
|
// serverPort: null,
|
|
|
|
|
// deviceGBId: null,
|
|
|
|
|
// deviceIp: null,
|
|
|
|
|
// devicePort: null,
|
|
|
|
|
// username: null,
|
|
|
|
|
// password: null,
|
|
|
|
|
// expires: 300,
|
|
|
|
|
// keepTimeout: 60,
|
|
|
|
|
// transport: "UDP",
|
|
|
|
|
// characterSet: "GB2312",
|
|
|
|
|
// },
|
|
|
|
|
platform: {
|
|
|
|
|
enable: true,
|
|
|
|
|
PTZEnable: true,
|
|
|
|
|
rtcp: false,
|
|
|
|
|
name: "测试001",
|
|
|
|
|
serverGBId: "34020000002000000001",
|
|
|
|
|
serverGBDomain: "3402000000",
|
|
|
|
|
serverIP: "192.168.1.141",
|
|
|
|
|
serverPort: "5060",
|
|
|
|
|
deviceGBId: "34020000001320001101",
|
|
|
|
|
deviceIp: "192.168.1.20",
|
|
|
|
|
devicePort: "5060",
|
|
|
|
|
username: "34020000001320001101",
|
|
|
|
|
password: "12345678",
|
|
|
|
|
expires: 300,
|
|
|
|
|
keepTimeout: 60,
|
|
|
|
|
transport: "UDP",
|
|
|
|
|
characterSet: "GB2312",
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
name: [
|
|
|
|
|
{ required: true, message:"请输入平台名称", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
serverGBId: [
|
|
|
|
|
{ required: true, message:"请输入SIP服务国标编码", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
serverGBDomain: [
|
|
|
|
|
{ required: true, message:"请输入SIP服务国标域", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
serverIP: [
|
|
|
|
|
{ required: true, message:"请输入SIP服务IP", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
serverPort: [
|
|
|
|
|
{ required: true, message:"请输入SIP服务端口", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
deviceGBId: [
|
2020-11-24 16:41:00 +08:00
|
|
|
{validator: deviceGBIdRules, trigger: 'blur' }
|
2020-11-23 18:17:20 +08:00
|
|
|
],
|
|
|
|
|
username: [
|
|
|
|
|
{ required: false, message:"请输入SIP认证用户名", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
password: [
|
|
|
|
|
{ required: false, message:"请输入SIP认证密码", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
expires: [
|
|
|
|
|
{ required: true, message:"请输入注册周期", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
keepTimeout: [
|
|
|
|
|
{ required: true, message:"请输入心跳周期", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
transport: [
|
|
|
|
|
{ required: true, message:"请选择信令传输", trigger: 'blur' }
|
|
|
|
|
],
|
|
|
|
|
characterSet: [
|
|
|
|
|
{ required: true, message:"请选择编码字符集", trigger: 'blur' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
openDialog: function (platform, callback) {
|
|
|
|
|
this.showDialog = true;
|
|
|
|
|
this.listChangeCallback = callback;
|
|
|
|
|
if (platform != null) {
|
|
|
|
|
this.platform = platform;
|
|
|
|
|
this.onSubmit_text = "保存"
|
|
|
|
|
}
|
2020-11-24 16:41:00 +08:00
|
|
|
|
2020-11-23 18:17:20 +08:00
|
|
|
},
|
|
|
|
|
onSubmit: function () {
|
|
|
|
|
console.log('onSubmit');
|
|
|
|
|
var that = this;
|
|
|
|
|
that.$axios.post(`/api/platforms/save`, that.platform)
|
|
|
|
|
.then(function (res) {
|
|
|
|
|
console.log(res)
|
|
|
|
|
console.log(res.data == "success")
|
|
|
|
|
if (res.data == "success") {
|
|
|
|
|
that.$message({
|
|
|
|
|
showClose: true,
|
|
|
|
|
message: '保存成功',
|
|
|
|
|
type: 'success'
|
|
|
|
|
});
|
|
|
|
|
that.showDialog = false;
|
|
|
|
|
if (that.listChangeCallback != null) {
|
|
|
|
|
that.listChangeCallback()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
close: function () {
|
|
|
|
|
console.log('关闭添加视频平台');
|
|
|
|
|
this.showDialog = false;
|
|
|
|
|
this.$refs.platform1.resetFields();
|
|
|
|
|
this.$refs.platform2.resetFields();
|
2020-11-24 16:41:00 +08:00
|
|
|
},
|
|
|
|
|
deviceGBIdExit: async function (deviceGbId) {
|
|
|
|
|
var result = false;
|
|
|
|
|
var that = this
|
|
|
|
|
await that.$axios.post(`/api/platforms/exit/${deviceGbId}`)
|
|
|
|
|
.then(function (res) {
|
|
|
|
|
result = res.data;
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
|
2020-11-23 18:17:20 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.control-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 6.25rem;
|
|
|
|
|
height: 6.25rem;
|
|
|
|
|
max-width: 6.25rem;
|
|
|
|
|
max-height: 6.25rem;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
margin-top: 2.5rem;
|
|
|
|
|
margin-left: 0.5rem;
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-panel {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 5rem;
|
|
|
|
|
height: 11rem;
|
|
|
|
|
max-height: 11rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 44%;
|
|
|
|
|
height: 44%;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
border: 1px solid #78aee4;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
transition: all 0.3s linear;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-btn i {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #78aee4;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-round {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 21%;
|
|
|
|
|
left: 21%;
|
|
|
|
|
width: 58%;
|
|
|
|
|
height: 58%;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-round-inner {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 13%;
|
|
|
|
|
top: 13%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 70%;
|
|
|
|
|
height: 70%;
|
|
|
|
|
font-size: 40px;
|
|
|
|
|
color: #78aee4;
|
|
|
|
|
border: 1px solid #78aee4;
|
|
|
|
|
border-radius: 100%;
|
|
|
|
|
transition: all 0.3s linear;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-inner-btn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 60%;
|
|
|
|
|
height: 60%;
|
|
|
|
|
background: #fafafa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-top {
|
|
|
|
|
top: -8%;
|
|
|
|
|
left: 27%;
|
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
|
border-radius: 5px 100% 5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-top i {
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
border-radius: 5px 100% 5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-top .control-inner {
|
|
|
|
|
left: -1px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
border-top: 1px solid #78aee4;
|
|
|
|
|
border-right: 1px solid #78aee4;
|
|
|
|
|
border-radius: 0 100% 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-top .fa {
|
|
|
|
|
transform: rotate(45deg) translateY(-7px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-left {
|
|
|
|
|
top: 27%;
|
|
|
|
|
left: -8%;
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
border-radius: 5px 0 5px 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-left i {
|
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-left .control-inner {
|
|
|
|
|
right: -1px;
|
|
|
|
|
top: -1px;
|
|
|
|
|
border-bottom: 1px solid #78aee4;
|
|
|
|
|
border-left: 1px solid #78aee4;
|
|
|
|
|
border-radius: 0 0 0 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-left .fa {
|
|
|
|
|
transform: rotate(-45deg) translateX(-7px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-right {
|
|
|
|
|
top: 27%;
|
|
|
|
|
right: -8%;
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
border-radius: 5px 100% 5px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-right i {
|
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-right .control-inner {
|
|
|
|
|
left: -1px;
|
|
|
|
|
bottom: -1px;
|
|
|
|
|
border-top: 1px solid #78aee4;
|
|
|
|
|
border-right: 1px solid #78aee4;
|
|
|
|
|
border-radius: 0 100% 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-right .fa {
|
|
|
|
|
transform: rotate(-45deg) translateX(7px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-bottom {
|
|
|
|
|
left: 27%;
|
|
|
|
|
bottom: -8%;
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
border-radius: 0 5px 100% 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-bottom i {
|
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-bottom .control-inner {
|
|
|
|
|
top: -1px;
|
|
|
|
|
left: -1px;
|
|
|
|
|
border-bottom: 1px solid #78aee4;
|
|
|
|
|
border-right: 1px solid #78aee4;
|
|
|
|
|
border-radius: 0 0 100% 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control-bottom .fa {
|
|
|
|
|
transform: rotate(-45deg) translateY(7px);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
