From 5d901b5e3f033e8b04e53420d68626cbd87431c8 Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期五, 06 五月 2022 10:12:34 +0800 Subject: [PATCH] 使用阿里代码规范。规范代码写法 --- web_src/src/components/CloudRecord.vue | 137 ++++++++++++++++++++++----------------------- 1 files changed, 66 insertions(+), 71 deletions(-) diff --git a/web_src/src/components/CloudRecord.vue b/web_src/src/components/CloudRecord.vue index c269270..1d0819b 100644 --- a/web_src/src/components/CloudRecord.vue +++ b/web_src/src/components/CloudRecord.vue @@ -1,65 +1,59 @@ <template> - <div id="app"> - <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 style="position: absolute; right: 1rem; top: 0.3rem;"> - <el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button> - <el-button v-if="recordDetail" icon="el-icon-arrow-left" circle size="mini" @click="backToList()"></el-button> - </div> - </div> - <div v-if="!recordDetail"> - <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;"> - 鑺傜偣閫夋嫨: <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServer" placeholder="璇烽�夋嫨" default-first-option> - <el-option - v-for="item in mediaServerList" - :key="item.generalMediaServerId" - :label="item.generalMediaServerId + '( ' + item.wanIp + ' )'" - :value="item"> - </el-option> - </el-select> - </div> - <!--璁惧鍒楄〃--> - <el-table :data="recordList" border style="width: 100%" :height="winHeight"> - <el-table-column prop="app" label="搴旂敤鍚�" align="center"> - </el-table-column> - <el-table-column prop="stream" label="娴両D" align="center"> - </el-table-column> - <el-table-column prop="time" label="鏃堕棿" align="center"> - </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-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> - </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> - </div> - <cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServer="mediaServer" ></cloud-record-detail> - </el-main> - </el-container> - </div> + <div id="app" style="width: 100%"> + <div class="page-header"> + <div class="page-title">浜戠褰曞儚</div> + <div class="page-header-btn"> + 鑺傜偣閫夋嫨: + <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="璇烽�夋嫨" :disabled="recordDetail"> + <el-option + v-for="item in mediaServerList" + :key="item.id" + :label="item.id" + :value="item.id"> + </el-option> + </el-select> + <el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button> + </div> + </div> + <div v-if="!recordDetail"> + + <!--璁惧鍒楄〃--> + <el-table :data="recordList" border style="width: 100%" :height="winHeight"> + <el-table-column prop="app" label="搴旂敤鍚�" align="center"> + </el-table-column> + <el-table-column prop="stream" label="娴両D" align="center"> + </el-table-column> + <el-table-column prop="time" label="鏃堕棿" align="center"> + </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-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> + </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> + </div> + <cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" :mediaServerPath="mediaServerPath" ></cloud-record-detail> + + </div> </template> <script> - import uiHeader from './UiHeader.vue' + import uiHeader from '../layout/UiHeader.vue' import cloudRecordDetail from './CloudRecordDetail.vue' + import MediaServer from './service/MediaServer' export default { name: 'app', components: { @@ -68,7 +62,8 @@ data() { return { mediaServerList: [], // 婊呬綋鑺傜偣鍒楄〃 - mediaServer: null, // 濯掍綋鏈嶅姟 + mediaServerId: null, // 濯掍綋鏈嶅姟 + mediaServerPath: null, // 濯掍綋鏈嶅姟鍦板潃 recordList: [], // 璁惧鍒楄〃 chooseRecord: null, // 濯掍綋鏈嶅姟 @@ -78,6 +73,7 @@ count:15, total:0, loading: false, + mediaServerObj : new MediaServer(), recordDetail: false }; @@ -107,26 +103,24 @@ }, getMediaServerList: function (){ let that = this; - this.$axios({ - method: 'get', - url:`/api/server/media_server/list`, - }).then(function (res) { - console.log(res) - that.mediaServerList = res.data; + that.mediaServerObj.getOnlineMediaServerList((data)=>{ + that.mediaServerList = data.data; if (that.mediaServerList.length > 0) { - that.mediaServer = that.mediaServerList[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.getRecordList(); } - - }).catch(function (error) { - console.log(error); - }); + }) }, getRecordList: function (){ let that = this; this.$axios({ method: 'get', - url:`/record_proxy/${that.mediaServer.generalMediaServerId}/api/record/list`, + url:`/record_proxy/${that.mediaServerId}/api/record/list`, params: { page: that.currentPage, count: that.count @@ -146,7 +140,8 @@ }, chooseMediaChange(val){ console.log(val) - this.mediaServer = val; + this.total = 0; + this.recordList = []; this.getRecordList(); }, showRecordDetail(row){ -- Gitblit v1.8.0