添加发送媒体流, 添加媒体服务器节点管理ui,修复修改密码
This commit is contained in:
648540858
159
web_src/src/components/MediaServerManger.vue
Normal file
159
web_src/src/components/MediaServerManger.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div id="mediaServerManger">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<uiHeader></uiHeader>
|
||||
</el-header>
|
||||
<el-main id="msMain">
|
||||
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
|
||||
<span style="font-size: 1rem; font-weight: bold;">节点列表</span>
|
||||
</div>
|
||||
<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
|
||||
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加节点</el-button>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="num" v-for="item in mediaServerList" :key="item.id">
|
||||
<el-card shadow="hover" :body-style="{ padding: '0px'}" class="server-card">
|
||||
<div class="card-img-zlm"></div>
|
||||
<div style="padding: 14px;text-align: left">
|
||||
<span style="font-size: 16px">{{item.id}}</span>
|
||||
<div style="margin-top: 13px; line-height: 12px; ">
|
||||
<span style="font-size: 14px; color: #999; margin-top: 5px">创建时间： {{item.createTime}}</span>
|
||||
<el-button icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">编辑</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<i v-if="item.status" class="iconfont icon-online server-card-status-online" title="在线"></i>
|
||||
<i v-if="!item.status" class="iconfont icon-online server-card-status-offline" title="离线"></i>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<mediaServerEdit ref="mediaServerEdit" ></mediaServerEdit>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiHeader from './UiHeader.vue'
|
||||
import MediaServer from './service/MediaServer'
|
||||
import mediaServerEdit from './dialog/MediaServerEdit'
|
||||
export default {
|
||||
name: 'mediaServerManger',
|
||||
components: {
|
||||
uiHeader,mediaServerEdit
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mediaServerObj : new MediaServer(),
|
||||
mediaServerList: [], //设备列表
|
||||
winHeight: window.innerHeight - 200,
|
||||
updateLooper: false,
|
||||
currentPage:1,
|
||||
count:15,
|
||||
num: this.getNumberByWidth(),
|
||||
total:0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
this.updateLooper = setInterval(this.initData, 2000);
|
||||
},
|
||||
destroyed() {
|
||||
clearTimeout(this.updateLooper);
|
||||
},
|
||||
methods: {
|
||||
initData: function() {
|
||||
this.getServerList()
|
||||
},
|
||||
currentChange: function(val){
|
||||
this.currentPage = val;
|
||||
this.getServerList();
|
||||
},
|
||||
handleSizeChange: function(val){
|
||||
this.count = val;
|
||||
this.getServerList();
|
||||
},
|
||||
getServerList: function(){
|
||||
this.mediaServerObj.getMediaServerList((data)=>{
|
||||
this.mediaServerList = data.data;
|
||||
})
|
||||
},
|
||||
add: function (){
|
||||
this.$refs.mediaServerEdit.openDialog(null, this.initData)
|
||||
},
|
||||
edit: function (row){
|
||||
this.$refs.mediaServerEdit.openDialog(row, this.initData)
|
||||
},
|
||||
getNumberByWidth(){
|
||||
let candidateNums = [1, 2, 3, 4, 6, 8, 12, 24]
|
||||
let clientWidth = window.innerWidth - 30;
|
||||
let interval = 20;
|
||||
let itemWidth = 360;
|
||||
let num = (clientWidth + interval)/(itemWidth + interval)
|
||||
let result = Math.ceil(24/num);
|
||||
let resultVal = 24;
|
||||
for (let i = 0; i < candidateNums.length; i++) {
|
||||
let value = candidateNums[i]
|
||||
if (i + 1 >= candidateNums.length) {
|
||||
return 24;
|
||||
}
|
||||
if (value <= result && candidateNums[i + 1] > result ) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("aadada: "+ resultVal)
|
||||
return resultVal;
|
||||
},
|
||||
dateFormat: function(/** timestamp=0 **/) {
|
||||
var ts = arguments[0] || 0;
|
||||
var t,y,m,d,h,i,s;
|
||||
t = ts ? new Date(ts*1000) : new Date();
|
||||
y = t.getFullYear();
|
||||
m = t.getMonth()+1;
|
||||
d = t.getDate();
|
||||
h = t.getHours();
|
||||
i = t.getMinutes();
|
||||
s = t.getSeconds();
|
||||
// 可根据需要在这里定义时间格式
|
||||
return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.server-card{
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-img-zlm{
|
||||
width: 200px; height: 200px;
|
||||
background: url('~@static/images/zlm-logo.png') no-repeat center;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.server-card-status-online{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: #3caf36;
|
||||
font-size: 18px;
|
||||
}
|
||||
.server-card-status-offline{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: #808080;
|
||||
font-size: 18px;
|
||||
}
|
||||
.server-card:hover {
|
||||
border: 1px solid #adadad;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user