zxl
2025-06-12 9f16b5c553b479ea12fe368a7ecc748872ea8b98
web_src/src/components/MediaServerManger.vue
old mode 100644 new mode 100755
@@ -1,43 +1,39 @@
<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>
                <el-button icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">编辑</el-button>
                <el-button 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>
            </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 {
@@ -127,7 +123,6 @@
          }
        }
        console.log("aadada:    "+ resultVal)
        return resultVal;
      },
         dateFormat: function(/** timestamp=0 **/) {
@@ -160,6 +155,13 @@
    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;
@@ -174,6 +176,13 @@
    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;
  }