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 | 115 ++++++++++++++++++++++++++++----------------------------- 1 files changed, 56 insertions(+), 59 deletions(-) diff --git a/web_src/src/components/CloudRecord.vue b/web_src/src/components/CloudRecord.vue index e39cd5b..1d0819b 100644 --- a/web_src/src/components/CloudRecord.vue +++ b/web_src/src/components/CloudRecord.vue @@ -1,66 +1,57 @@ <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: 5rem; top: 0.3rem;"> - 鑺傜偣閫夋嫨: - <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> - </div> - <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 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" ></cloud-record-detail> - </el-main> - </el-container> - </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" :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 { @@ -72,6 +63,7 @@ return { mediaServerList: [], // 婊呬綋鑺傜偣鍒楄〃 mediaServerId: null, // 濯掍綋鏈嶅姟 + mediaServerPath: null, // 濯掍綋鏈嶅姟鍦板潃 recordList: [], // 璁惧鍒楄〃 chooseRecord: null, // 濯掍綋鏈嶅姟 @@ -111,10 +103,15 @@ }, getMediaServerList: function (){ let that = this; - that.mediaServerObj.getMediaServerList((data)=>{ + that.mediaServerObj.getOnlineMediaServerList((data)=>{ 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.getRecordList(); } }) -- Gitblit v1.8.0