优化网页表格使用统一高度

web_src/src/App.vue

@@ -69,7 +69,7 @@ body,
   background-color: #f0f2f5;
   color: #333;
   text-align: center;
-  padding-top: 0px !important;
+  padding: 0 20px;
 }
 
 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

web_src/src/components/ChannelEdit.vue

@@ -2,9 +2,7 @@
   <div id="ChannelEdit" v-loading="locading" style="width: 100%">
     <div class="page-header">
       <div class="page-title">
-        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
+        <el-page-header @back="close" content="编辑通道"></el-page-header>
-        <el-divider direction="vertical"></el-divider>
-        编辑通道
       </div>
       <div class="page-header-btn">
         <div style="display: inline;">

web_src/src/components/CloudRecord.vue

@@ -44,7 +44,7 @@
       </div>
     </div>
     <!--设备列表-->
-    <el-table size="medium"  :data="recordList" style="width: 100%" :height="winHeight">
+    <el-table size="medium"  :data="recordList" style="width: 100%" :height="$tableHeght">
       <el-table-column
         type="selection"
         width="55">

web_src/src/components/DeviceList.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
     <!--设备列表-->
-    <el-table size="medium" :data="deviceList" style="width: 100%;font-size: 12px;" :height="winHeight" header-row-class-name="table-header">
+    <el-table size="medium" :data="deviceList" style="width: 100%;font-size: 12px;" :height="$tableHeght" header-row-class-name="table-header">
       <el-table-column prop="name" label="名称" min-width="160">
       </el-table-column>
       <el-table-column prop="deviceId" label="设备编号" min-width="160" >
@@ -141,7 +141,6 @@ export default {
       videoComponentList: [],
       updateLooper: 0, //数据刷新轮训标志
       currentDeviceChannelsLenth: 0,
-      winHeight: window.innerHeight - 200,
       currentPage: 1,
       count: 15,
       total: 0,

web_src/src/components/PlatformEdit.vue

@@ -2,9 +2,7 @@
   <div id="PlatformEdit" style="width: 100%">
     <div class="page-header">
       <div class="page-title">
-        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
+        <el-page-header @back="close" content="添加上级平台"></el-page-header>
-        <el-divider direction="vertical"></el-divider>
-        添加上级平台
       </div>
       <div class="page-header-btn">
         <div style="display: inline;">

web_src/src/components/PlatformList.vue

@@ -15,7 +15,7 @@
       </div>
 
       <!--设备列表-->
-      <el-table size="medium" :data="platformList" style="width: 100%" :height="winHeight" :loading="loading">
+      <el-table size="medium" :data="platformList" style="width: 100%" :height="$tableHeght" :loading="loading">
         <el-table-column prop="name" label="名称"></el-table-column>
         <el-table-column prop="serverGBId" label="平台编号" min-width="200"></el-table-column>
         <el-table-column label="是否启用" min-width="80">
@@ -113,7 +113,6 @@ export default {
       defaultPlatform: null,
       platform: null,
       pushChannelLoading: false,
-      winHeight: window.innerHeight - 260,
       searchSrt: "",
       currentPage: 1,
       count: 15,

web_src/src/components/RecordPLan.vue

@@ -16,7 +16,7 @@
           </div>
         </div>
       </div>
-      <el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="winHeight" style="width: 100%"
+      <el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="$tableHeght" style="width: 100%"
                 header-row-class-name="table-header" >
         <el-table-column type="selection" width="55" >
         </el-table-column>
@@ -67,7 +67,6 @@ export default {
     return {
       recordPlanList: [],
       searchSrt: "",
-      winHeight: window.innerHeight - 180,
       currentPage: 1,
       count: 15,
       total: 0,

web_src/src/components/StreamProxyEdit.vue

@@ -2,9 +2,7 @@
   <div id="StreamProxyEdit" style="width: 100%">
     <div class="page-header">
       <div class="page-title">
-        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
+        <el-page-header @back="close" content="编辑拉流代理信息"></el-page-header>
-        <el-divider direction="vertical"></el-divider>
-        编辑拉流代理信息
       </div>
       <div class="page-header-btn">
         <div style="display: inline;">

web_src/src/components/StreamProxyList.vue

@@ -32,7 +32,7 @@
         </div>
       </div>
       <devicePlayer ref="devicePlayer"></devicePlayer>
-      <el-table size="medium"  :data="streamProxyList" style="width: 100%" :height="winHeight">
+      <el-table size="medium"  :data="streamProxyList" style="width: 100%" :height="$tableHeght" >
         <el-table-column prop="app" label="流应用名" min-width="120" show-overflow-tooltip/>
         <el-table-column prop="stream" label="流ID" min-width="120" show-overflow-tooltip/>
         <el-table-column label="流地址" min-width="250"  show-overflow-tooltip >
@@ -127,7 +127,6 @@
 				currentPusher: {}, //当前操作设备对象
 				updateLooper: 0, //数据刷新轮训标志
 				currentDeviceChannelsLenth:0,
-				winHeight: window.innerHeight - 250,
 				currentPage:1,
 				count:15,
 				total:0,

web_src/src/components/StreamPushEdit.vue

@@ -2,9 +2,7 @@
   <div id="ChannelEdit" style="width: 100%">
     <div class="page-header">
       <div class="page-title">
-        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
+        <el-page-header @back="close" content="编辑推流信息"></el-page-header>
-        <el-divider direction="vertical"></el-divider>
-        编辑推流信息
       </div>
       <div class="page-header-btn">
         <div style="display: inline;">

web_src/src/components/StreamPushList.vue

@@ -40,7 +40,7 @@
           <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
         </div>
       </div>
-      <el-table size="medium"  ref="pushListTable" :data="pushList" style="width: 100%" :height="winHeight" :loading="loading"
+      <el-table size="medium"  ref="pushListTable" :data="pushList" style="width: 100%" :height="$tableHeght" :loading="loading"
                 @selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
         <el-table-column  type="selection" :reserve-selection="true" min-width="55">
         </el-table-column>
@@ -133,7 +133,6 @@ export default {
       currentPusher: {}, //当前操作设备对象
       updateLooper: 0, //数据刷新轮训标志
       currentDeviceChannelsLenth: 0,
-      winHeight: window.innerHeight - 250,
       mediaServerObj: new MediaServer(),
       currentPage: 1,
       count: 15,

web_src/src/components/UserManager.vue

@@ -8,11 +8,10 @@
         <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addUser">
           添加用户
         </el-button>
-
       </div>
     </div>
     <!--用户列表-->
-    <el-table size="medium"  :data="userList" style="width: 100%;font-size: 12px;" :height="winHeight"
+    <el-table size="medium"  :data="userList" style="width: 100%;font-size: 12px;" :height="$tableHeght"
               header-row-class-name="table-header">
       <el-table-column prop="username" label="用户名" min-width="160"/>
       <el-table-column prop="pushKey" label="pushkey" min-width="160"/>
@@ -69,7 +68,6 @@ export default {
       videoComponentList: [],
       updateLooper: 0, //数据刷新轮训标志
       currentUserLenth: 0,
-      winHeight: window.innerHeight - 200,
       currentPage: 1,
       count: 15,
       total: 0,

web_src/src/components/channelList.vue

@@ -2,9 +2,7 @@
   <div id="channelList" style="width: 100%">
     <div v-if="!editId" class="page-header">
       <div class="page-title">
-        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" ></el-button>
+        <el-page-header @back="showDevice" content="通道列表"></el-page-header>
-        <el-divider direction="vertical"></el-divider>
-        通道列表
       </div>
       <div class="page-header-btn">
         <div v-if="!showTree" style="display: inline;">
@@ -43,12 +41,7 @@
       </div>
     </div>
     <devicePlayer ref="devicePlayer"></devicePlayer>
-    <el-container v-if="!editId" v-loading="isLoging" style="height: 82vh;">
+    <el-table size="medium"  ref="channelListTable" :data="deviceChannelList" :height="$tableHeght"
-      <el-aside width="auto" style="height: 82vh; background-color: #ffffff; overflow: auto" v-if="showTree">
-        <DeviceTree ref="deviceTree" :device="device" :onlyCatalog="true" :clickEvent="treeNodeClickEvent"></DeviceTree>
-      </el-aside>
-      <el-main style="padding: 5px;">
-        <el-table size="medium"  ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%"
               header-row-class-name="table-header">
       <el-table-column prop="name" label="名称" min-width="180">
       </el-table-column>
@@ -166,10 +159,7 @@
       layout="total, sizes, prev, pager, next"
       :total="total">
     </el-pagination>
-      </el-main>
-    </el-container>
     <channel-edit v-if="editId" :id="editId" :closeEdit="closeEdit"></channel-edit>
-    <!--设备列表-->
 
   </div>
 </template>

web_src/src/components/group.vue

@@ -5,7 +5,7 @@
         <GroupTree ref="groupTree" :show-header="true" :edit="true" :clickEvent="treeNodeClickEvent"
                    :onChannelChange="onChannelChange" :enableAddChannel="true" :addChannelToGroup="addChannelToGroup"></GroupTree>
       </el-aside>
-      <el-main style="padding: 5px;">
+      <el-main style="padding: 0 0 0 5px;">
         <div class="page-header">
           <div class="page-title">
             <el-breadcrumb separator="/" v-if="regionParents.length > 0">
@@ -46,7 +46,7 @@
             </div>
           </div>
         </div>
-        <el-table size="medium" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
+        <el-table size="medium" ref="channelListTable" :data="channelList" :height="$tableHeght" style="width: 100%"
                   header-row-class-name="table-header" @selection-change="handleSelectionChange"
                   @row-dblclick="rowDblclick">
           <el-table-column type="selection" width="55" >
@@ -113,7 +113,6 @@ export default {
       channelType: "",
       online: "",
       hasGroup: "false",
-      winHeight: window.innerHeight - 180,
       currentPage: 1,
       count: 15,
       total: 0,

web_src/src/components/region.vue

@@ -5,7 +5,7 @@
         <RegionTree ref="regionTree" :showHeader=true :edit="true" :clickEvent="treeNodeClickEvent"
                     :onChannelChange="onChannelChange" :enableAddChannel="true" :addChannelToCivilCode="addChannelToCivilCode"></RegionTree>
       </el-aside>
-      <el-main style="padding: 5px;">
+      <el-main style="padding: 0 0 0 5px;">
         <div class="page-header">
           <div class="page-title">
             <el-breadcrumb separator="/" v-if="regionParents.length > 0">
@@ -45,7 +45,7 @@
             </div>
           </div>
         </div>
-        <el-table size="medium" ref="channelListTable" :data="channelList" :height="winHeight" style="width: 100%"
+        <el-table size="medium" ref="channelListTable" :data="channelList" :height="$tableHeght" style="width: 100%"
                   header-row-class-name="table-header" @selection-change="handleSelectionChange"
                   @row-dblclick="rowDblclick">
           <el-table-column type="selection" width="55">
@@ -109,7 +109,6 @@ export default {
       searchSrt: "",
       channelType: "",
       online: "",
-      winHeight: window.innerHeight - 180,
       currentPage: 1,
       count: 15,
       total: 0,

web_src/src/layout/index.vue

@@ -4,11 +4,7 @@
       <ui-header/>
     </el-header>
     <el-main>
-      <el-container>
-        <transition name="fade">
       <router-view></router-view>
-        </transition>
-      </el-container>
     </el-main>
   </el-container>
 </template>

web_src/src/main.js

@@ -75,6 +75,7 @@ axios.interceptors.request.use(
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$cookies.config(60 * 30);
+Vue.prototype.$tableHeght = window.innerHeight - 170;
 
 new Vue({
   router: router,