wvp-GB28181-pro/web_src/src/components/MediaServerManger.vue

<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>
                <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>
	</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)
      },
      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;
        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;
          }
        }

        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>