old mode 100644
new mode 100755
| | |
| | | <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> |
| | | <div id="mediaServerManger" style="width: 100%"> |
| | | <div class="page-header"> |
| | | <div class="page-title">节点列表</div> |
| | | <div class="page-header-btn"> |
| | | <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加节点</el-button> |
| | | </div> |
| | | </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> |
| | | <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 v-if="item.type === 'zlm'" class="card-img-zlm"></div> |
| | | <div v-if="item.type === 'abl'" class="card-img-abl"></div> |
| | | <div style="padding: 14px;text-align: left"> |
| | | <span style="font-size: 16px">{{item.id}}</span> |
| | | <el-button v-if="!item.defaultServer" icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">编辑</el-button> |
| | | <el-button v-if="item.defaultServer" icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">查看</el-button> |
| | | <el-button v-if="!item.defaultServer" icon="el-icon-delete" style="margin-right: 10px;padding: 0;float: right;" type="text" @click="del(item)">移除</el-button> |
| | | <div style="margin-top: 13px; line-height: 12px; "> |
| | | <span style="font-size: 14px; color: #999; margin-top: 5px; ">{{item.ip}}</span> |
| | | <span style="font-size: 14px; color: #999; margin-top: 5px; float: right;">{{item.createTime}}</span> |
| | | </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> |
| | | <i v-if="item.defaultServer" class="server-card-default" >默认</i> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | <mediaServerEdit ref="mediaServerEdit" ></mediaServerEdit> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import uiHeader from './UiHeader.vue' |
| | | import uiHeader from '../layout/UiHeader.vue' |
| | | import MediaServer from './service/MediaServer' |
| | | import mediaServerEdit from './dialog/MediaServerEdit' |
| | | export default { |
| | |
| | | edit: function (row){ |
| | | this.$refs.mediaServerEdit.openDialog(row, this.initData) |
| | | }, |
| | | del: function (row){ |
| | | this.$confirm('确认删除此节点?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | this.mediaServerObj.delete(row.id, (data)=>{ |
| | | if (data.code === 0) { |
| | | this.$message({ |
| | | type: 'success', |
| | | message: '删除成功!' |
| | | }); |
| | | } |
| | | }) |
| | | |
| | | }).catch(() => { |
| | | }); |
| | | |
| | | }, |
| | | getNumberByWidth(){ |
| | | let candidateNums = [1, 2, 3, 4, 6, 8, 12, 24] |
| | | let clientWidth = window.innerWidth - 30; |
| | |
| | | } |
| | | } |
| | | |
| | | console.log("aadada: "+ resultVal) |
| | | return resultVal; |
| | | }, |
| | | dateFormat: function(/** timestamp=0 **/) { |
| | |
| | | background-size: contain; |
| | | margin: 0 auto; |
| | | } |
| | | .card-img-abl{ |
| | | width: 200px; height: 200px; |
| | | background: url('~@static/images/abl-logo.jpg') no-repeat center; |
| | | background-position: center; |
| | | background-size: contain; |
| | | margin: 0 auto; |
| | | } |
| | | .server-card-status-online{ |
| | | position: absolute; |
| | | right: 20px; |
| | |
| | | color: #808080; |
| | | font-size: 18px; |
| | | } |
| | | .server-card-default{ |
| | | position: absolute; |
| | | left: 20px; |
| | | top: 20px; |
| | | color: #808080; |
| | | font-size: 18px; |
| | | } |
| | | .server-card:hover { |
| | | border: 1px solid #adadad; |
| | | } |