|  |  | 
 |  |  | <template> | 
 |  |  |    <div id="app" style="width: 100%"> | 
 |  |  |     <div class="page-header"> | 
 |  |  |       <div class="page-title">云端录像</div> | 
 |  |  |       <div class="page-title"> | 
 |  |  |         <el-page-header v-if="recordDetail" @back="backToList" content="云端录像"></el-page-header> | 
 |  |  |         <div v-if="!recordDetail">云端录像</div> | 
 |  |  |       </div> | 
 |  |  |  | 
 |  |  |       <div class="page-header-btn"> | 
 |  |  |         节点选择: | 
 |  |  |         <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail"> | 
 |  |  | 
 |  |  |     <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> | 
 |  |  | 
 |  |  |           that.mediaServerList = data.data; | 
 |  |  |           if (that.mediaServerList.length > 0) { | 
 |  |  |             that.mediaServerId = that.mediaServerList[0].id | 
 |  |  |             let port = that.mediaServerList[0].httpPort; | 
 |  |  |             if (location.protocol === "https:" && that.mediaServerList[0].httpSSlPort) { | 
 |  |  |               port = that.mediaServerList[0].httpSSlPort | 
 |  |  |             } | 
 |  |  |             that.mediaServerPath = location.protocol + "//" + that.mediaServerList[0].streamIp + ":" + port | 
 |  |  |             that.setMediaServerPath(that.mediaServerId); | 
 |  |  |             that.getRecordList(); | 
 |  |  |           } | 
 |  |  |         }) | 
 |  |  |       }, | 
 |  |  |       setMediaServerPath: function (serverId) { | 
 |  |  |         let that = this; | 
 |  |  |         let i; | 
 |  |  |         for (i = 0; i < that.mediaServerList.length; i++) { | 
 |  |  |           if (serverId === that.mediaServerList[i].id) { | 
 |  |  |             break; | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |         let port = that.mediaServerList[i].httpPort; | 
 |  |  |         if (location.protocol === "https:" && that.mediaServerList[i].httpSSlPort) { | 
 |  |  |           port = that.mediaServerList[i].httpSSlPort | 
 |  |  |         } | 
 |  |  |         that.mediaServerPath = location.protocol + "//" + that.mediaServerList[i].streamIp + ":" + port | 
 |  |  |         console.log(that.mediaServerPath) | 
 |  |  |       }, | 
 |  |  |       getRecordList: function (){ | 
 |  |  |         let that = this; | 
 |  |  | 
 |  |  |           } | 
 |  |  |         }).then(function (res) { | 
 |  |  |           console.log(res) | 
 |  |  |           that.total = res.data.data.total; | 
 |  |  |           that.recordList = res.data.data.list; | 
 |  |  |           if (res.data.code === 0) { | 
 |  |  |             that.total = res.data.data.total; | 
 |  |  |             that.recordList = res.data.data.list; | 
 |  |  |           } | 
 |  |  |           that.loading = false; | 
 |  |  |         }).catch(function (error) { | 
 |  |  |           console.log(error); | 
 |  |  | 
 |  |  |           console.log(val) | 
 |  |  |           this.total = 0; | 
 |  |  |           this.recordList = []; | 
 |  |  |           this.setMediaServerPath(val); | 
 |  |  |           this.getRecordList(); | 
 |  |  |       }, | 
 |  |  |       showRecordDetail(row){ | 
 |  |  | 
 |  |  |           } | 
 |  |  |         }).then(function (res) { | 
 |  |  |           console.log(res) | 
 |  |  |           that.total = res.data.data.total; | 
 |  |  |           that.recordList = res.data.data.list; | 
 |  |  |           if (res.data.code === 0) { | 
 |  |  |             that.total = res.data.data.total; | 
 |  |  |             that.recordList = res.data.data.list; | 
 |  |  |           } | 
 |  |  |         }).catch(function (error) { | 
 |  |  |           console.log(error); | 
 |  |  |         }); | 
 |  |  |       } | 
 |  |  |       }, | 
 |  |  |  | 
 |  |  |  | 
 |  |  |       } |