From a6fb1cdb74ca11c9dba798e64bf3d61bbfbdf05b Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期一, 11 九月 2023 16:17:29 +0800
Subject: [PATCH] 修复Web页面播放国标录像无声音的问题

---
 web_src/src/components/CloudRecord.vue |  146 ++++++++++++++++++++++++++----------------------
 1 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/web_src/src/components/CloudRecord.vue b/web_src/src/components/CloudRecord.vue
old mode 100644
new mode 100755
index c08a6cc..c13cdc4
--- a/web_src/src/components/CloudRecord.vue
+++ b/web_src/src/components/CloudRecord.vue
@@ -1,76 +1,69 @@
 <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="璇烽�夋嫨">
-            <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">
+        <el-page-header v-if="recordDetail" @back="backToList" content="浜戠褰曞儚"></el-page-header>
+        <div v-if="!recordDetail">浜戠褰曞儚</div>
+      </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" ></cloud-record-detail>
-			</el-main>
-		</el-container>
-	</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" style="width: 100%" :height="winHeight">
+        <el-table-column prop="app" label="搴旂敤鍚�" >
+        </el-table-column>
+        <el-table-column prop="stream" label="娴両D" >
+        </el-table-column>
+        <el-table-column prop="time" label="鏃堕棿" >
+        </el-table-column>
+        <el-table-column label="鎿嶄綔" width="360"  fixed="right">
+          <template slot-scope="scope">
+            <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>
+      <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>
+
+  </div>
 </template>
 
 <script>
-	import uiHeader from './UiHeader.vue'
-	import cloudRecordDetail from './CloudRecordDetail.vue'
+	import uiHeader from '../layout/UiHeader.vue'
   import MediaServer from './service/MediaServer'
 	export default {
 		name: 'app',
 		components: {
-			uiHeader, cloudRecordDetail
+      uiHeader
 		},
 		data() {
 			return {
         mediaServerList: [], // 婊呬綋鑺傜偣鍒楄〃
         mediaServerId: null, // 濯掍綋鏈嶅姟
+        mediaServerPath: null, // 濯掍綋鏈嶅姟鍦板潃
         recordList: [], // 璁惧鍒楄〃
         chooseRecord: null, // 濯掍綋鏈嶅姟
 
@@ -110,13 +103,29 @@
       },
       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
+            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;
@@ -129,8 +138,10 @@
           }
         }).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);
@@ -144,6 +155,7 @@
           console.log(val)
           this.total = 0;
           this.recordList = [];
+          this.setMediaServerPath(val);
           this.getRecordList();
       },
       showRecordDetail(row){
@@ -164,7 +176,7 @@
         // }).catch(function (error) {
         //   console.log(error);
         // });
-
+        this.$router.push(`/cloudRecordDetail/${row.app}/${row.stream}`)
       },
       deleteRecord(){
 			  // TODO
@@ -178,12 +190,14 @@
           }
         }).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);
         });
-      }
+      },
 
 
 		}

--
Gitblit v1.8.0