优化列表展示效果

648540858
1 parent c801ee62
Showing 7 changed files with 127 additions and 127 deletions
src/main/java/com/genersoft/iot/vmp/service/impl/GbStreamServiceImpl.java
web_src/src/components/CloudRecord.vue
web_src/src/components/DeviceList.vue
web_src/src/components/ParentPlatformList.vue
web_src/src/components/PushVideoList.vue
web_src/src/components/StreamProxyList.vue
web_src/src/components/channelList.vue
@@ -106,7 +106,8 @@ public class GbStreamServiceImpl implements IGbStreamService {
         deviceChannel.setStatus(1);
         deviceChannel.setParentId(catalogId ==null?gbStream.getCatalogId():catalogId);
         deviceChannel.setRegisterWay(1);
-        if (catalogId.length() <= 10) { // 父节点是行政区划,则设置CivilCode使用此行政区划
+        if (catalogId.length() > 0 && catalogId.length() <= 10) {
+            // 父节点是行政区划,则设置CivilCode使用此行政区划
             deviceChannel.setCivilCode(catalogId);
         }else {
             deviceChannel.setCivilCode(platform.getAdministrativeDivision());
@@ -18,19 +18,17 @@
     <div v-if="!recordDetail">
       <!--设备列表-->
-      <el-table :data="recordList" border style="width: 100%" :height="winHeight">
-        <el-table-column prop="app" label="应用名" align="center">
+      <el-table :data="recordList" style="width: 100%" :height="winHeight">
+        <el-table-column prop="app" label="应用名" >
         </el-table-column>
-        <el-table-column prop="stream" label="流ID" align="center">
+        <el-table-column prop="stream" label="流ID" >
         </el-table-column>
-        <el-table-column prop="time" label="时间" align="center">
+        <el-table-column prop="time" label="时间" >
         </el-table-column>
-        <el-table-column label="操作" width="360" align="center" fixed="right">
+        <el-table-column label="操作" width="360"  fixed="right">
           <template slot-scope="scope">
-            <el-button-group>
-              <el-button size="mini" icon="el-icon-video-camera-solid" type="primary" @click="showRecordDetail(scope.row)">查看</el-button>
-              <!--                  <el-button size="mini" icon="el-icon-delete" type="danger"  @click="deleteRecord(scope.row)">删除</el-button>-->
-            </el-button-group>
+            <el-button size="medium" icon="el-icon-folder-opened" type="text" @click="showRecordDetail(scope.row)">查看</el-button>
+            <!--                  <el-button size="mini" icon="el-icon-delete" type="danger"  @click="deleteRecord(scope.row)">删除</el-button>-->
           </template>
         </el-table-column>
       </el-table>
@@ -7,34 +7,33 @@
                    @click="getDeviceList()"></el-button>
       </div>
     </div>
-    <!-- <devicePlayer ref="devicePlayer"></devicePlayer> -->
     <!--设备列表-->
     <el-table :data="deviceList" style="width: 100%;font-size: 12px;" :height="winHeight" header-row-class-name="table-header">
-      <el-table-column prop="name" label="名称" >
+      <el-table-column prop="name" label="名称" min-width="160">
       </el-table-column>
-      <el-table-column prop="deviceId" label="设备编号" width="180" >
+      <el-table-column prop="deviceId" label="设备编号" min-width="200" >
       </el-table-column>
-      <el-table-column label="地址" width="180" >
+      <el-table-column label="地址" min-width="160" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="manufacturer" label="厂家" >
+      <el-table-column prop="manufacturer" label="厂家" min-width="120" >
       </el-table-column>
-      <el-table-column label="流传输模式"  width="120">
+      <el-table-column label="流传输模式"  min-width="160" >
         <template slot-scope="scope">
-          <el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="请选择">
+          <el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="请选择" style="width: 120px">
             <el-option key="UDP" label="UDP" value="UDP"></el-option>
             <el-option key="TCP-ACTIVE" label="TCP主动模式" :disabled="true" value="TCP-ACTIVE"></el-option>
             <el-option key="TCP-PASSIVE" label="TCP被动模式" value="TCP-PASSIVE"></el-option>
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column prop="channelCount" label="通道数" >
+      <el-table-column prop="channelCount" label="通道数" min-width="120" >
       </el-table-column>
-      <el-table-column label="状态" width="120" >
+      <el-table-column label="状态" min-width="120">
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.online == 1">在线</el-tag>
@@ -42,32 +41,32 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="keepaliveTime" label="最近心跳"  width="140">
+      <el-table-column prop="keepaliveTime" label="最近心跳" min-width="160" >
       </el-table-column>
-      <el-table-column prop="registerTime" label="最近注册"  width="140">
-      </el-table-column>
-      <el-table-column prop="updateTime" label="更新时间"  width="140">
-      </el-table-column>
-      <el-table-column prop="createTime" label="创建时间"  width="140">
+      <el-table-column prop="registerTime" label="最近注册"  min-width="160">
       </el-table-column>
+<!--      <el-table-column prop="updateTime" label="更新时间"  width="140">-->
+<!--      </el-table-column>-->
+<!--      <el-table-column prop="createTime" label="创建时间"  width="140">-->
+<!--      </el-table-column>-->
-      <el-table-column label="操作" width="450"  fixed="right">
+      <el-table-column label="操作" min-width="450" fixed="right">
         <template slot-scope="scope">
-          <el-button type="text" size="mini" v-bind:disabled="scope.row.online==0" icon="el-icon-refresh" @click="refDevice(scope.row)"
+          <el-button type="text" size="medium" v-bind:disabled="scope.row.online==0" icon="el-icon-refresh" @click="refDevice(scope.row)"
                      @mouseover="getTooltipContent(scope.row.deviceId)">刷新
           </el-button>
           <el-divider direction="vertical"></el-divider>
-          <el-button type="text" size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"
+          <el-button type="text" size="medium" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"
                      @click="showChannelList(scope.row)">通道
           </el-button>
           <el-divider direction="vertical"></el-divider>
-          <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="text"
+          <el-button size="medium" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="text"
                      @click="showDevicePosition(scope.row)">定位
           </el-button>
           <el-divider direction="vertical"></el-divider>
-          <el-button size="mini" icon="el-icon-edit" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button size="medium" icon="el-icon-edit" type="text" @click="edit(scope.row)">编辑</el-button>
           <el-divider direction="vertical"></el-divider>
-          <el-button size="mini" icon="el-icon-delete" type="text" @click="deleteDevice(scope.row)" style="color: #f56c6c">删除</el-button>
+          <el-button size="medium" icon="el-icon-delete" type="text" @click="deleteDevice(scope.row)" style="color: #f56c6c">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -4,14 +4,15 @@
       <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="addParentPlatform">添加</el-button>
+        <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
       </div>
     </div>
     <!--设备列表-->
-    <el-table :data="platformList" border style="width: 100%" :height="winHeight">
-      <el-table-column prop="name" label="名称" align="center"></el-table-column>
-      <el-table-column prop="serverGBId" label="平台编号" align="center"></el-table-column>
-      <el-table-column label="是否启用" width="120" align="center">
+    <el-table :data="platformList" style="width: 100%" :height="winHeight">
+      <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" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
@@ -19,7 +20,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="状态" width="120" align="center">
+      <el-table-column label="状态" min-width="80" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.status">在线</el-tag>
@@ -27,17 +28,17 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="地址" width="180" align="center">
+      <el-table-column label="地址" min-width="160" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium">{{ scope.row.serverIP}}:{{scope.row.serverPort }}</el-tag>
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="deviceGBId" label="设备国标编号" width="200" align="center"></el-table-column>
-      <el-table-column prop="transport" label="信令传输模式" width="120" align="center"></el-table-column>
-      <el-table-column prop="channelCount" label="通道数" width="120" align="center"></el-table-column>
-      <el-table-column label="订阅信息" width="240" align="center" fixed="right">
+      <el-table-column prop="deviceGBId" label="设备国标编号" min-width="200" ></el-table-column>
+      <el-table-column prop="transport" label="信令传输模式" min-width="120" ></el-table-column>
+      <el-table-column prop="channelCount" label="通道数" min-width="120" ></el-table-column>
+      <el-table-column label="订阅信息" min-width="120"  fixed="right">
         <template slot-scope="scope">
           <i v-if="scope.row.alarmSubscribe" style="font-size: 20px" title="报警订阅" class="iconfont icon-gbaojings subscribe-on " ></i>
           <i v-if="!scope.row.alarmSubscribe" style="font-size: 20px" title="报警订阅" class="iconfont icon-gbaojings subscribe-off " ></i>
@@ -48,11 +49,11 @@
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="300" align="center" fixed="right">
+      <el-table-column label="操作" min-width="240" fixed="right">
         <template slot-scope="scope">
-          <el-button size="mini" icon="el-icon-edit" @click="editPlatform(scope.row)">编辑</el-button>
-          <el-button size="mini" icon="el-icon-share"  type="primary"  @click="chooseChannel(scope.row)">选择通道</el-button>
-          <el-button size="mini" icon="el-icon-delete"  type="danger" @click="deletePlatform(scope.row)">删除</el-button>
+          <el-button size="medium" icon="el-icon-edit" type="text" @click="editPlatform(scope.row)">编辑</el-button>
+          <el-button size="medium" icon="el-icon-share"  type="text"  @click="chooseChannel(scope.row)">选择通道</el-button>
+          <el-button size="medium" icon="el-icon-delete"  type="text" style="color: #f56c6c" @click="deletePlatform(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -168,6 +169,9 @@ export default {
         console.log(error);
       });
+    },
+    refresh: function (){
+      this.initData();
     }
   }
@@ -34,52 +34,54 @@
         <el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;"
                    :disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除
         </el-button>
+        <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
       </div>
     </div>
     <devicePlayer ref="devicePlayer"></devicePlayer>
     <addStreamTOGB ref="addStreamTOGB"></addStreamTOGB>
-    <el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight"
+    <el-table ref="pushListTable" :data="pushList" style="width: 100%" :height="winHeight"
               @selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
-      <el-table-column align="center" type="selection" :reserve-selection="true" width="55">
+      <el-table-column  type="selection" :reserve-selection="true" min-width="55">
       </el-table-column>
-      <el-table-column prop="name" label="名称" align="center">
+      <el-table-column prop="name" label="名称" min-width="200">
       </el-table-column>
-      <el-table-column prop="app" label="APP" align="center">
+      <el-table-column prop="app" label="APP" min-width="200">
       </el-table-column>
-      <el-table-column prop="stream" label="流ID" align="center">
+      <el-table-column prop="stream" label="流ID" min-width="200">
       </el-table-column>
-      <el-table-column prop="gbId" label="国标编码" width="200" align="center">
+      <el-table-column prop="gbId" label="国标编码" min-width="200" >
       </el-table-column>
-      <el-table-column prop="mediaServerId" label="流媒体" width="200" align="center">
+      <el-table-column prop="mediaServerId" label="流媒体" min-width="200" >
       </el-table-column>
-      <el-table-column label="开始时间" align="center" width="200">
+      <el-table-column label="开始时间"  min-width="200">
         <template slot-scope="scope">
           <el-button-group>
             {{ dateFormat(parseInt(scope.row.createStamp)) }}
           </el-button-group>
         </template>
       </el-table-column>
-      <el-table-column label="正在推流" align="center" width="100">
+      <el-table-column label="正在推流"  min-width="100">
         <template slot-scope="scope">
           {{ (scope.row.status == false && scope.row.gbId == null) || scope.row.status ? '是' : '否' }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="360" align="center" fixed="right">
+      <el-table-column label="操作" min-width="360"  fixed="right">
         <template slot-scope="scope">
-          <el-button-group>
-            <el-button size="mini" icon="el-icon-video-play"
-                       v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status"
-                       @click="playPush(scope.row)">播放
-            </el-button>
-            <el-button size="mini" icon="el-icon-delete" type="danger" @click="stopPush(scope.row)">移除</el-button>
-            <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId"
-                       @click="addToGB(scope.row)">加入国标
-            </el-button>
-            <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId"
-                       @click="removeFromGB(scope.row)">移出国标
-            </el-button>
-          </el-button-group>
+          <el-button size="medium" icon="el-icon-video-play"
+                     v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status"
+                     @click="playPush(scope.row)" type="text">播放
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-delete" type="text" @click="stopPush(scope.row)" style="color: #f56c6c" >移除</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-position" type="text" v-if="!!!scope.row.gbId"
+                     @click="addToGB(scope.row)">加入国标
+          </el-button>
+          <el-divider v-if="!!!scope.row.gbId" direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-position" type="text" v-if="!!scope.row.gbId"
+                     @click="removeFromGB(scope.row)">移出国标
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -284,6 +286,9 @@ export default {
     handleSelectionChange: function (val) {
       this.multipleSelection = val;
     },
+    refresh: function () {
+      this.initData();
+    },
   }
 };
 </script>
@@ -5,14 +5,15 @@
       <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>
+        <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></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="流ID" align="center" show-overflow-tooltip/>
-      <el-table-column label="流地址" width="400" align="center" show-overflow-tooltip >
+    <el-table :data="streamProxyList" style="width: 100%" :height="winHeight">
+      <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip/>
+      <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="400"  show-overflow-tooltip >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
@@ -27,8 +28,8 @@
           </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">
+      <el-table-column prop="mediaServerId" label="流媒体" min-width="180" ></el-table-column>
+      <el-table-column label="类型" width="100" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium">{{scope.row.type}}</el-tag>
@@ -36,8 +37,8 @@
         </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">
+      <el-table-column prop="gbId" label="国标编码" min-width="180"  show-overflow-tooltip/>
+      <el-table-column label="状态" min-width="120" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.status">在线</el-tag>
@@ -45,7 +46,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="启用" width="120" align="center">
+      <el-table-column label="启用" min-width="120" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
@@ -53,8 +54,8 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="创建时间" align="center" width="150" show-overflow-tooltip/>
-      <el-table-column label="转HLS" width="120" align="center">
+      <el-table-column prop="createTime" label="创建时间"  min-width="150" show-overflow-tooltip/>
+      <el-table-column label="转HLS" min-width="120" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.enable_hls">已启用</el-tag>
@@ -62,7 +63,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="MP4录制" width="120" align="center">
+      <el-table-column label="MP4录制" min-width="120" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.enable_mp4">已启用</el-tag>
@@ -70,7 +71,7 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column label="无人观看自动删除" width="160" align="center">
+      <el-table-column label="无人观看自动删除" min-width="160" >
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
             <el-tag size="medium" v-if="scope.row.enable_remove_none_reader">已启用</el-tag>
@@ -80,14 +81,15 @@
       </el-table-column>
-      <el-table-column label="操作" width="360" align="center" fixed="right">
+      <el-table-column label="操作" width="360"  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>
+          <el-button size="medium" icon="el-icon-video-play" type="text" v-if="scope.row.enable" @click="play(scope.row)">播放</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-switch-button" type="text" v-if="scope.row.enable" @click="stop(scope.row)">停用</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-check" type="text" :loading="startBtnLaoding" v-if="!scope.row.enable" @click="start(scope.row)">启用</el-button>
+          <el-divider v-if="!scope.row.enable" direction="vertical"></el-divider>
+          <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c" @click="deleteStreamProxy(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -305,8 +307,10 @@
 					console.log(error);
 					that.getListLoading = false;
 				});
-			}
-
+			},
+      refresh: function (){
+        this.initData();
+      }
 		}
 	};
 </script>
@@ -2,10 +2,8 @@
   <div id="channelList" style="width: 100%">
     <div class="page-header">
       <div class="page-title">
-        <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">
-          返回
-        </el-button>
-        通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</div>
+        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" ></el-button>
+        通道列表</div>
       <div class="page-header-btn">
       搜索:
       <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
@@ -25,73 +23,73 @@
         <el-option label="在线" value="true"></el-option>
         <el-option label="离线" value="false"></el-option>
       </el-select>
-      <el-checkbox size="mini" v-model="autoList" @change="autoListChange">
-        自动刷新
-      </el-checkbox>
+      <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
     </div>
   </div>
   <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
   <!--设备列表-->
   <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%" header-row-class-name="table-header">
-    <el-table-column prop="channelId" label="通道编号" width="200">
+    <el-table-column prop="channelId" label="通道编号" min-width="200">
+    </el-table-column>
+    <el-table-column prop="deviceId" label="设备编号" min-width="200">
     </el-table-column>
-    <el-table-column prop="name" label="通道名称" >
+    <el-table-column prop="name" label="通道名称" min-width="200">
     </el-table-column>
-    <el-table-column label="快照" width="80">
+    <el-table-column label="快照" min-width="120">
       <template slot-scope="scope">
         <el-image
           :src="getSnap(scope.row)"
           :preview-src-list="getBigSnap(scope.row)"
           @error="getSnapErrorEvent(scope.row.deviceId, cope.row.channelId)"
-          :fit="'contain'">
+          :fit="'contain'"
+          style="width: 60px">
           <div slot="error" class="image-slot">
             <i class="el-icon-picture-outline"></i>
           </div>
         </el-image>
       </template>
     </el-table-column>
-    <el-table-column prop="subCount" label="子节点数" width="120">
+    <el-table-column prop="subCount" label="子节点数" min-width="120">
     </el-table-column>
-    <el-table-column prop="manufacture" label="厂家" width="120">
+    <el-table-column prop="manufacture" label="厂家" min-width="120">
     </el-table-column>
-    <el-table-column label="位置信息" width="180">
+    <el-table-column label="位置信息"  min-width="200">
       <template slot-scope="scope">
         <span v-if="scope.row.longitude*scope.row.latitude > 0">{{ scope.row.longitude }},<br>{{ scope.row.latitude }}</span>
         <span v-if="scope.row.longitude*scope.row.latitude === 0">无</span>
       </template>
     </el-table-column>
-    <el-table-column prop="ptztypeText" label="云台类型" width="120" />
-    <el-table-column label="开启音频" >
+    <el-table-column prop="ptztypeText" label="云台类型" min-width="120"/>
+    <el-table-column label="开启音频" min-width="120">
       <template slot-scope="scope">
         <el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
         </el-switch>
       </template>
     </el-table-column>
-    <el-table-column label="状态" width="240" >
+    <el-table-column label="状态" min-width="120">
       <template slot-scope="scope">
         <div slot="reference" class="name-wrapper">
-          <el-tag size="medium" v-if="scope.row.status == 1">开启</el-tag>
-          <el-tag size="medium" type="info" v-if="scope.row.status == 0">关闭</el-tag>
+          <el-tag size="medium" v-if="scope.row.status == 1">在线</el-tag>
+          <el-tag size="medium" type="info" v-if="scope.row.status == 0">离线</el-tag>
         </div>
       </template>
     </el-table-column>
-    <el-table-column label="操作" width="280" fixed="right">
+    <el-table-column label="操作" min-width="280" fixed="right">
       <template slot-scope="scope">
         <!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">播放</el-button> -->
-        <el-button size="mini" icon="el-icon-video-play" type="text" @click="sendDevicePush(scope.row)">播放</el-button>
-        <el-button size="mini" icon="el-icon-switch-button" type="text"  style="color: #f56c6c" v-if="!!scope.row.streamId"
+        <el-button size="medium" icon="el-icon-video-play" type="text" @click="sendDevicePush(scope.row)">播放</el-button>
+        <el-button size="medium" icon="el-icon-switch-button" type="text"  style="color: #f56c6c" v-if="!!scope.row.streamId"
                    @click="stopDevicePush(scope.row)">停止
         </el-button>
         <el-divider direction="vertical"></el-divider>
-        <el-button size="mini" icon="el-icon-s-open" type="text" v-if="scope.row.subCount > 0 || scope.row.parental === 1"
+        <el-button size="medium" icon="el-icon-s-open" type="text" v-if="scope.row.subCount > 0 || scope.row.parental === 1"
                    @click="changeSubchannel(scope.row)">查看
         </el-button>
         <el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1" direction="vertical"></el-divider>
-        <el-button size="mini" icon="el-icon-video-camera" type="text" @click="queryRecords(scope.row)">设备录像
+        <el-button size="medium" icon="el-icon-video-camera" type="text" @click="queryRecords(scope.row)">设备录像
         </el-button>
-        <!--                             <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
       </template>
     </el-table-column>
   </el-table>
@@ -130,17 +128,12 @@ export default {
       total: 0,
       beforeUrl: "/deviceList",
       isLoging: false,
-      autoList: true,
       loadSnap: {}
     };
   },
   mounted() {
     this.initData();
-    if (this.autoList) {
-      this.updateLooper = setInterval(this.initData, 5000);
-    }
-
   },
   destroyed() {
     this.$destroy('videojs');
@@ -342,12 +335,8 @@ export default {
         console.log(JSON.stringify(res));
       });
     },
-    autoListChange: function () {
-      if (this.autoList) {
-        this.updateLooper = setInterval(this.initData, 1500);
-      } else {
-        window.clearInterval(this.updateLooper);
-      }
+    refresh: function () {
+      this.initData();
     }
   }