From f1d079f9c0b3d384090477ca54e0548373d62b57 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Thu, 16 Jan 2025 11:56:39 +0800
Subject: [PATCH] 配置修改
---
web_src/src/components/MediaServerManger.vue | 181 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 181 insertions(+), 0 deletions(-)
diff --git a/web_src/src/components/MediaServerManger.vue b/web_src/src/components/MediaServerManger.vue
new file mode 100644
index 0000000..1d3c057
--- /dev/null
+++ b/web_src/src/components/MediaServerManger.vue
@@ -0,0 +1,181 @@
+<template>
+ <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 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 '../layout/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-default{
+ position: absolute;
+ left: 20px;
+ top: 20px;
+ color: #808080;
+ font-size: 18px;
+ }
+ .server-card:hover {
+ border: 1px solid #adadad;
+ }
+</style>
--
Gitblit v1.9.3