| | |
| | | <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); |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | |
| | | } |