XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加新版本web页面

Browse Source
This commit is contained in:
lin
2025-04-28 15:04:06 +08:00
parent 3c1c68d327
commit 113743a065
268 changed files with 45419 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
web/src/views/platform/edit.vue Normal file
View File

@@ -0,0 +1,281 @@
<template>
<div id="PlatformEdit" style="width: 100%">
<div id="shared" style="text-align: right; margin-top: 1rem; background-color: #FFFFFF; padding-top: 2rem;">
<el-row :gutter="24">
<el-col :span="11">
<el-form ref="platform1" :rules="rules" :model="value" size="medium" label-width="160px">
<el-form-item label="名称" prop="name">
<el-input v-model="value.name" />
</el-form-item>
<el-form-item label="SIP服务国标编码" prop="serverGBId">
<el-input v-model="value.serverGBId" clearable @input="serverGBIdChange" />
</el-form-item>
<el-form-item label="SIP服务国标域" prop="serverGBDomain">
<el-input v-model="value.serverGBDomain" clearable />
</el-form-item>
<el-form-item label="SIP服务IP" prop="serverIp">
<el-input v-model="value.serverIp" clearable />
</el-form-item>
<el-form-item label="SIP服务端口" prop="serverPort">
<el-input v-model="value.serverPort" clearable type="number" />
</el-form-item>
<el-form-item label="设备国标编号" prop="deviceGBId">
<el-input v-model="value.deviceGBId" clearable @input="deviceGBIdChange" />
</el-form-item>
<el-form-item label="本地IP" prop="deviceIp">
<el-select v-model="value.deviceIp" placeholder="请选择与上级相通的网卡" style="width: 100%">
<el-option
v-for="ip in deviceIps"
:key="ip"
:label="ip"
:value="ip"
/>
</el-select>
</el-form-item>
<el-form-item label="本地端口" prop="devicePort">
<el-input v-model="value.devicePort" :disabled="true" type="number" />
</el-form-item>
<el-form-item label="SIP认证用户名" prop="username">
<el-input v-model="value.username" />
</el-form-item>
<el-form-item label="SIP认证密码" prop="password">
<el-input v-model="value.password" />
</el-form-item>
<el-form-item label="注册周期(秒)" prop="expires">
<el-input v-model="value.expires" />
</el-form-item>
<el-form-item label="心跳周期(秒)" prop="keepTimeout">
<el-input v-model="value.keepTimeout" />
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form ref="platform2" :rules="rules" :model="value" size="medium" label-width="160px">
<el-form-item label="SDP发流IP" prop="sendStreamIp">
<el-input v-model="value.sendStreamIp" />
</el-form-item>
<el-form-item label="信令传输" prop="transport">
<el-select
v-model="value.transport"
style="width: 100%"
placeholder="请选择信令传输方式"
>
<el-option label="UDP" value="UDP" />
<el-option label="TCP" value="TCP" />
</el-select>
</el-form-item>
<el-form-item label="保密属性">
<el-select v-model="value.secrecy" style="width: 100%" placeholder="请选择保密属性">
<el-option label="不涉密" :value="0" />
<el-option label="涉密" :value="1" />
</el-select>
</el-form-item>
<el-form-item label="目录分组" prop="catalogGroup">
<el-select
v-model="value.catalogGroup"
style="width: 100%"
placeholder="请选择目录分组"
>
<el-option label="1" value="1" />
<el-option label="2" value="2" />
<el-option label="4" value="4" />
<el-option label="8" value="8" />
</el-select>
</el-form-item>
<el-form-item label="字符集" prop="characterSet">
<el-select
v-model="value.characterSet"
style="width: 100%"
placeholder="请选择字符集"
>
<el-option label="GB2312" value="GB2312" />
<el-option label="UTF-8" value="UTF-8" />
</el-select>
</el-form-item>
<el-form-item label="行政区划" prop="civilCode">
<el-input v-model="value.civilCode" clearable />
</el-form-item>
<el-form-item label="平台厂商" prop="manufacturer">
<el-input v-model="value.manufacturer" clearable />
</el-form-item>
<el-form-item label="平台型号" prop="model">
<el-input v-model="value.model" clearable />
</el-form-item>
<el-form-item label="平台安装地址" prop="address">
<el-input v-model="value.address" clearable />
</el-form-item>
<el-form-item label="其他选项">
<div style="text-align: left">
<el-checkbox v-model="value.enable" label="启用" @change="checkExpires" />
<!-- <el-checkbox label="云台控制" v-model="value.ptz"></el-checkbox>-->
<el-checkbox v-model="value.rtcp" label="RTCP保活" @change="rtcpCheckBoxChange" />
<el-checkbox v-model="value.asMessageChannel" label="消息通道" />
<el-checkbox v-model="value.autoPushChannel" label="主动推送通道" />
<el-checkbox
v-model="value.catalogWithPlatform"
label="推送平台信息"
:true-label="1"
:false-label="0"
/>
<el-checkbox
v-model="value.catalogWithGroup"
label="推送分组信息"
:true-label="1"
:false-label="0"
/>
<el-checkbox
v-model="value.catalogWithRegion"
label="推送行政区划"
:true-label="1"
:false-label="0"
/>
</div>
</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>
</div>
</template>
<script>
export default {
name: 'PlatformEdit',
components: {},
props: ['value', 'closeEdit', 'deviceIps'],
data() {
var deviceGBIdRules = async(rule, value, callback) => {
console.log(value)
if (value === '') {
callback(new Error('请输入设备国标编号'))
} else {
var exit = await this.deviceGBIdExit(value)
if (exit) {
callback(new Error('设备国标编号格式错误或已存在'))
} else {
callback()
}
}
}
return {
listChangeCallback: null,
showDialog: false,
isLoging: false,
onSubmit_text: '保存',
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: [{ validator: deviceGBIdRules, trigger: 'blur' }],
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' }],
deviceIp: [{ required: true, message: '请选择本地IP', trigger: 'blur' }]
},
saveLoading: false
}
},
watch: {
value(newValue, oldValue) {
this.streamProxy = newValue
}
},
created() {
},
methods: {
onSubmit: function() {
this.saveLoading = true
if (this.value.id) {
this.$store.dispatch('platform/update', this.value)
.then(data => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
if (this.closeEdit) {
this.closeEdit()
}
})
.catch(error => {
console.log(error)
})
.finally(() => {
this.saveLoading = false
})
} else {
this.$store.dispatch('platform/add', this.value)
.then(data => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
if (this.closeEdit) {
this.closeEdit()
}
})
.catch(error => {
console.log(error)
})
.finally(() => {
this.saveLoading = false
})
}
},
serverGBIdChange: function() {
if (this.value.serverGBId.length > 10) {
this.value.serverGBDomain = this.value.serverGBId.substr(0, 10)
}
},
deviceGBIdChange: function() {
this.value.username = this.value.deviceGBId
},
checkExpires: function() {
if (this.value.enable && this.value.expires === '0') {
this.value.expires = '3600'
}
},
rtcpCheckBoxChange: function(result) {
if (result) {
this.$message({
showClose: true,
message: '开启RTCP保活需要上级平台支持，可以避免无效推流',
type: 'warning'
})
}
},
deviceGBIdExit: async function(deviceGbId) {
let result = false
await this.$store.dispatch('platform/exit', deviceGbId)
.then((data) => {
result = data
}).catch((error) => {
console.log(error)
})
return result
},
close: function() {
this.closeEdit()
}
}
}
</script>

325
web/src/views/platform/index.vue Executable file
View File

@@ -0,0 +1,325 @@
<template>
<div id="app" class="app-container">
<div v-if="!platform" style="height: calc(100vh - 124px);">
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
style="margin-right: 1rem; width: auto;"
size="mini"
placeholder="关键字"
prefix-icon="el-icon-search"
clearable
@input="getPlatformList"
/>
</el-form-item>
<el-form-item>
<el-button
icon="el-icon-plus"
size="mini"
style="margin-right: 1rem;"
type="primary"
@click="addParentPlatform"
>添加
</el-button>
</el-form-item>
<el-form-item style="float: right;">
<el-button icon="el-icon-refresh-right" circle @click="refresh()" />
</el-form-item>
</el-form>
<!--设备列表-->
<el-table
size="small"
:data="platformList"
style="width: 100%"
height="calc(100% - 64px)"
:loading="loading"
>
<el-table-column prop="name" label="名称" />
<el-table-column prop="serverGBId" label="平台编号" min-width="200" />
<el-table-column label="是否启用" min-width="80">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag v-if="scope.row.enable && myServerId !== scope.row.serverId" size="medium" style="border-color: #ecf1af">已启用</el-tag>
<el-tag v-if="scope.row.enable && myServerId === scope.row.serverId" size="medium">已启用</el-tag>
<el-tag v-if="!scope.row.enable" size="medium" type="info">未启用</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="状态" min-width="80">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag v-if="scope.row.status" size="medium">在线</el-tag>
<el-tag v-if="!scope.row.status" size="medium" type="info">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="地址" min-width="160">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.serverIp }}:{{ scope.row.serverPort }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="deviceGBId" label="设备国标编号" min-width="200" />
<el-table-column prop="transport" label="信令传输模式" min-width="120" />
<el-table-column prop="channelCount" label="通道数" min-width="120" />
<el-table-column label="订阅信息" min-width="120" fixed="right">
<template v-slot:default="scope">
<i
v-if="scope.row.alarmSubscribe"
style="font-size: 20px"
title="报警订阅"
class="iconfont icon-gbaojings subscribe-on "
/>
<i
v-if="!scope.row.alarmSubscribe"
style="font-size: 20px"
title="报警订阅"
class="iconfont icon-gbaojings subscribe-off "
/>
<i v-if="scope.row.catalogSubscribe" title="目录订阅" class="iconfont icon-gjichus subscribe-on" />
<i v-if="!scope.row.catalogSubscribe" title="目录订阅" class="iconfont icon-gjichus subscribe-off" />
<i
v-if="scope.row.mobilePositionSubscribe"
title="位置订阅"
class="iconfont icon-gxunjians subscribe-on"
/>
<i
v-if="!scope.row.mobilePositionSubscribe"
title="位置订阅"
class="iconfont icon-gxunjians subscribe-off"
/>
</template>
</el-table-column>
<el-table-column label="操作" min-width="260" fixed="right">
<template v-slot:default="scope">
<el-button size="medium" icon="el-icon-edit" type="text" @click="editPlatform(scope.row)">编辑</el-button>
<el-button size="medium" icon="el-icon-share" type="text" @click="chooseChannel(scope.row)">通道共享
</el-button>
<el-button
size="medium"
icon="el-icon-top"
type="text"
:loading="pushChannelLoading"
@click="pushChannel(scope.row)"
>推送通道
</el-button>
<el-button
size="medium"
icon="el-icon-delete"
type="text"
style="color: #f56c6c"
@click="deletePlatform(scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: right"
:current-page="currentPage"
:page-size="count"
:page-sizes="[15, 25, 35, 50]"
layout="total, sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="currentChange"
/>
</div>
<platformEdit
v-if="platform"
ref="platformEdit"
v-model="platform"
:close-edit="closeEdit"
:device-ips="deviceIps"
/>
<shareChannel ref="shareChannel" />
</div>
</template>
<script>
import shareChannel from '../dialog/shareChannel.vue'
import platformEdit from './edit.vue'
import Vue from 'vue'
export default {
name: 'Platform',
components: {
shareChannel,
platformEdit
},
data() {
return {
loading: false,
platformList: [], // 设备列表
deviceIps: [], // 设备列表
defaultPlatform: null,
platform: null,
pushChannelLoading: false,
searchSrt: '',
currentPage: 1,
count: 15,
total: 0
}
},
computed: {
Vue() {
return Vue
},
myServerId() {
return this.$store.getters.serverId
}
},
mounted() {
this.initData()
this.updateLooper = setInterval(this.initData, 10000)
},
destroyed() {
clearTimeout(this.updateLooper)
},
methods: {
addParentPlatform: function() {
this.platform = this.defaultPlatform
},
editPlatform: function(platform) {
this.platform = platform
},
closeEdit: function() {
this.platform = null
this.getPlatformList()
},
deletePlatform: function(platform) {
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deletePlatformCommit(platform)
})
},
deletePlatformCommit: function(platform) {
this.loading = true
this.$store.dispatch('platform/remove', platform.id)
.then(() => {
this.$message.success({
showClose: true,
message: '删除成功'
})
this.initData()
})
.catch((error) => {
this.loading = false
this.$message.error({
showClose: true,
message: error
})
})
.finally(() => {
this.loading = false
})
},
chooseChannel: function(platform) {
this.$refs.shareChannel.openDialog(platform.id, this.initData)
},
pushChannel: function(row) {
this.pushChannelLoading = true
this.$store.dispatch('platform/pushChannel', row.id)
.then((data) => {
this.$message.success({
showClose: true,
message: '推送成功'
})
})
.catch((error) => {
this.$message.error({
showClose: true,
message: error
})
})
.finally(() => {
this.pushChannelLoading = false
})
},
initData: function() {
this.$store.dispatch('platform/getServerConfig')
.then((data) => {
this.deviceIps = data.deviceIp.split(',')
this.defaultPlatform = {
id: null,
enable: true,
ptz: true,
rtcp: false,
asMessageChannel: false,
autoPushChannel: false,
name: null,
serverGBId: null,
serverGBDomain: null,
serverIp: null,
serverPort: null,
deviceGBId: data.username,
deviceIp: this.deviceIps[0],
devicePort: data.devicePort,
username: data.username,
password: data.password,
expires: 3600,
keepTimeout: 60,
transport: 'UDP',
characterSet: 'GB2312',
startOfflinePush: false,
customGroup: false,
catalogWithPlatform: 0,
catalogWithGroup: 0,
catalogWithRegion: 0,
manufacturer: null,
model: null,
address: null,
secrecy: 1,
catalogGroup: 1,
civilCode: null,
sendStreamIp: data.sendStreamIp
}
})
this.getPlatformList()
},
currentChange: function(val) {
this.currentPage = val
this.getPlatformList()
},
handleSizeChange: function(val) {
this.count = val
this.getPlatformList()
},
getPlatformList: function() {
this.$store.dispatch('platform/query', {
count: this.count,
page: this.currentPage,
query: this.searchSrt
})
.then((data) => {
this.total = data.total
this.platformList = data.list
})
.catch(function(error) {
console.log(error)
})
},
refresh: function() {
this.initData()
}
}
}
</script>
<style>
.subscribe-on {
color: #409EFF;
font-size: 18px;
}
.subscribe-off {
color: #afafb3;
font-size: 18px;
}
</style>