From fb843d41c1e186b2109bfeea73509cad2b135cdc Mon Sep 17 00:00:00 2001
From: xiaoxie <hotcoffie@163.com>
Date: 星期四, 21 四月 2022 12:33:10 +0800
Subject: [PATCH] 1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等
---
web_src/src/components/StreamProxyList.vue | 209 +++++++++++++++++++++++++---------------------------
1 files changed, 101 insertions(+), 108 deletions(-)
diff --git a/web_src/src/components/StreamProxyList.vue b/web_src/src/components/StreamProxyList.vue
index 9ecb933..d553392 100644
--- a/web_src/src/components/StreamProxyList.vue
+++ b/web_src/src/components/StreamProxyList.vue
@@ -1,115 +1,108 @@
<template>
- <div id="streamProxyList">
- <el-container>
- <el-header>
- <uiHeader></uiHeader>
- </el-header>
- <el-main>
- <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="addStreamProxy">娣诲姞浠ｇ悊</el-button>
- <el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">鎼滅储ONVIF</el-button>
- </div>
- <devicePlayer ref="devicePlayer"></devicePlayer>
- <el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
- <el-table-column prop="name" label="鍚嶇О" align="center" show-overflow-tooltip/>
- <el-table-column prop="app" label="娴佸簲鐢ㄥ悕" align="center" show-overflow-tooltip/>
- <el-table-column prop="stream" label="娴両D" align="center" show-overflow-tooltip/>
- <el-table-column label="娴佸湴鍧�" width="400" align="center" show-overflow-tooltip >
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
+ <div id="streamProxyList" 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="addStreamProxy">娣诲姞浠ｇ悊</el-button>
+ <el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">鎼滅储ONVIF</el-button>
+ </div>
+ </div>
+ <devicePlayer ref="devicePlayer"></devicePlayer>
+ <el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
+ <el-table-column prop="name" label="鍚嶇О" align="center" show-overflow-tooltip/>
+ <el-table-column prop="app" label="娴佸簲鐢ㄥ悕" align="center" show-overflow-tooltip/>
+ <el-table-column prop="stream" label="娴両D" align="center" show-overflow-tooltip/>
+ <el-table-column label="娴佸湴鍧�" width="400" align="center" show-overflow-tooltip >
+ <template slot-scope="scope">
+ <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.type == 'default'">
- <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
- {{scope.row.url}}
- </el-tag>
- <el-tag size="medium" v-if="scope.row.type != 'default'">
- <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.src_url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
- {{scope.row.src_url}}
- </el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="mediaServerId" label="娴佸獟浣�" width="150" align="center"></el-table-column>
- <el-table-column label="绫诲瀷" width="100" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium">{{scope.row.type}}</el-tag>
- </div>
- </template>
- </el-table-column>
+ <el-tag size="medium" v-if="scope.row.type == 'default'">
+ <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
+ {{scope.row.url}}
+ </el-tag>
+ <el-tag size="medium" v-if="scope.row.type != 'default'">
+ <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.src_url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
+ {{scope.row.src_url}}
+ </el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="mediaServerId" label="娴佸獟浣�" width="150" align="center"></el-table-column>
+ <el-table-column label="绫诲瀷" width="100" align="center">
+ <template slot-scope="scope">
+ <div slot="reference" class="name-wrapper">
+ <el-tag size="medium">{{scope.row.type}}</el-tag>
+ </div>
+ </template>
+ </el-table-column>
- <el-table-column prop="gbId" label="鍥芥爣缂栫爜" width="180" align="center" show-overflow-tooltip/>
- <el-table-column label="鐘舵��" width="120" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.status">鍦ㄧ嚎</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.status">绂荤嚎</el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="鍚敤" width="120" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.enable">宸插惎鐢�</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.enable">鏈惎鐢�</el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" align="center" width="150" show-overflow-tooltip/>
- <el-table-column label="杞琀LS" width="120" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.enable_hls">宸插惎鐢�</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.enable_hls">鏈惎鐢�</el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="MP4褰曞埗" width="120" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.enable_mp4">宸插惎鐢�</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.enable_mp4">鏈惎鐢�</el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="鏃犱汉瑙傜湅鑷姩鍒犻櫎" width="160" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.enable_remove_none_reader">宸插惎鐢�</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.enable_remove_none_reader">鏈惎鐢�</el-tag>
- </div>
- </template>
- </el-table-column>
+ <el-table-column prop="gbId" label="鍥芥爣缂栫爜" width="180" align="center" show-overflow-tooltip/>
+ <el-table-column label="鐘舵��" width="120" align="center">
+ <template slot-scope="scope">
+ <div slot="reference" class="name-wrapper">
+ <el-tag size="medium" v-if="scope.row.status">鍦ㄧ嚎</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.status">绂荤嚎</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍚敤" width="120" align="center">
+ <template slot-scope="scope">
+ <div slot="reference" class="name-wrapper">
+ <el-tag size="medium" v-if="scope.row.enable">宸插惎鐢�</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable">鏈惎鐢�</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" align="center" width="150" show-overflow-tooltip/>
+ <el-table-column label="杞琀LS" width="120" align="center">
+ <template slot-scope="scope">
+ <div slot="reference" class="name-wrapper">
+ <el-tag size="medium" v-if="scope.row.enable_hls">宸插惎鐢�</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable_hls">鏈惎鐢�</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="MP4褰曞埗" width="120" align="center">
+ <template slot-scope="scope">
+ <div slot="reference" class="name-wrapper">
+ <el-tag size="medium" v-if="scope.row.enable_mp4">宸插惎鐢�</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable_mp4">鏈惎鐢�</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="鏃犱汉瑙傜湅鑷姩鍒犻櫎" width="160" align="center">
+ <template slot-scope="scope">
+ <div slot="reference" class="name-wrapper">
+ <el-tag size="medium" v-if="scope.row.enable_remove_none_reader">宸插惎鐢�</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable_remove_none_reader">鏈惎鐢�</el-tag>
+ </div>
+ </template>
+ </el-table-column>
- <el-table-column label="鎿嶄綔" width="360" align="center" fixed="right">
- <template slot-scope="scope">
- <el-button-group>
- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.enable" @click="play(scope.row)">鎾斁</el-button>
- <el-button size="mini" icon="el-icon-close" type="success" v-if="scope.row.enable" @click="stop(scope.row)">鍋滅敤</el-button>
- <el-button size="mini" icon="el-icon-check" type="primary" :loading="startBtnLaoding" v-if="!scope.row.enable" @click="start(scope.row)">鍚敤</el-button>
- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStreamProxy(scope.row)">鍒犻櫎</el-button>
- </el-button-group>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- style="float: right"
- @size-change="handleSizeChange"
- @current-change="currentChange"
- :current-page="currentPage"
- :page-size="count"
- :page-sizes="[15, 25, 35, 50]"
- layout="total, sizes, prev, pager, next"
- :total="total">
- </el-pagination>
- <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
- <onvifEdit ref="onvifEdit" ></onvifEdit>
- </el-main>
- </el-container>
+ <el-table-column label="鎿嶄綔" width="360" align="center" fixed="right">
+ <template slot-scope="scope">
+ <el-button-group>
+ <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.enable" @click="play(scope.row)">鎾斁</el-button>
+ <el-button size="mini" icon="el-icon-close" type="success" v-if="scope.row.enable" @click="stop(scope.row)">鍋滅敤</el-button>
+ <el-button size="mini" icon="el-icon-check" type="primary" :loading="startBtnLaoding" v-if="!scope.row.enable" @click="start(scope.row)">鍚敤</el-button>
+ <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStreamProxy(scope.row)">鍒犻櫎</el-button>
+ </el-button-group>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-pagination
+ style="float: right"
+ @size-change="handleSizeChange"
+ @current-change="currentChange"
+ :current-page="currentPage"
+ :page-size="count"
+ :page-sizes="[15, 25, 35, 50]"
+ layout="total, sizes, prev, pager, next"
+ :total="total">
+ </el-pagination>
+ <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
+ <onvifEdit ref="onvifEdit" ></onvifEdit>
</div>
</template>
@@ -117,7 +110,7 @@
import streamProxyEdit from './dialog/StreamProxyEdit.vue'
import onvifEdit from './dialog/onvifEdit.vue'
import devicePlayer from './dialog/devicePlayer.vue'
- import uiHeader from './UiHeader.vue'
+ import uiHeader from '../layout/UiHeader.vue'
export default {
name: 'streamProxyList',
components: {
--
Gitblit v1.8.0