修正个别错误

Lawrence

2021-01-11 a47a7ccb5475d288e64939fce5a0f35e55a9de53

 web_src/src/components/videoList.vue

@@ -1,7 +1,6 @@
<template>
   <div id="app">
      <el-container>

         <el-header>
            <uiHeader></uiHeader>
         </el-header>
@@ -9,7 +8,7 @@
            <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 icon="el-icon-refresh-right" circle size="mini" @click="getDeviceList()"></el-button>
                  <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading" @click="getDeviceList()"></el-button>
               </div>
            </div>
            <devicePlayer ref="devicePlayer"></devicePlayer>
@@ -22,7 +21,7 @@
               <el-table-column label="地址" width="180" align="center">
                  <template slot-scope="scope">
                     <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.host.address }}</el-tag>
                        <el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
                     </div>
                  </template>
               </el-table-column>
@@ -30,22 +29,30 @@
               </el-table-column>
               <el-table-column prop="model" label="固件版本" align="center">
               </el-table-column>
               <el-table-column prop="transport" label="通讯方式" align="center">
               <el-table-column label="流传输模式" align="center" width="160">
            <template slot-scope="scope">
              <el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="请选择">
                <el-option key="UDP" label="UDP" value="UDP"></el-option>
                <el-option key="TCP-ACTIVE" label="TCP主动模式" :disabled="true" value="TCP-ACTIVE"></el-option>
                <el-option key="TCP-PASSIVE" label="TCP被动模式"  value="TCP-PASSIVE"></el-option>
              </el-select>
            </template>
               </el-table-column>
               <el-table-column prop="channelCount" label="通道数" align="center">
               </el-table-column>
               <el-table-column label="状态" width="180" align="center">
                  <template slot-scope="scope">
                     <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.online==1?'在线' :'离线'}}</el-tag>
                        <el-tag size="medium" v-if="scope.row.online == 1">在线</el-tag>
                        <el-tag size="medium" type="info" v-if="scope.row.online == 0">离线</el-tag>
                     </div>
                  </template>
               </el-table-column>

               <el-table-column label="操作" width="240" align="center" fixed="right">
                  <template slot-scope="scope">
                     <el-button size="mini" icon="el-icon-refresh"  @click="refDevice(scope.row)">刷新</el-button>
                     <el-button size="mini" icon="el-icon-s-open"  type="primary" @click="showChannelList(scope.row)">查看通道</el-button>
                     <el-button size="mini" :ref="scope.row.deviceId + 'refbtn' " icon="el-icon-refresh"  @click="refDevice(scope.row)">刷新通道</el-button>
                     <el-button size="mini" icon="el-icon-s-open" v-bind:disabled="scope.row.online==0"  type="primary" @click="showChannelList(scope.row)">查看通道</el-button>
                  </template>
               </el-table-column>
            </el-table>
@@ -66,12 +73,10 @@
</template>

<script>
    import devicePlayer from './gb28181/devicePlayer.vue'
    import uiHeader from './UiHeader.vue'
   export default {
      name: 'app',
      components: {
         devicePlayer,
         uiHeader
      },
      data() {
@@ -85,7 +90,8 @@
            winHeight: window.innerHeight - 200,
            currentPage:1,
            count:15,
            total:0
            total:0,
            getDeviceListLoading: false
         };
      },
      computed: {
@@ -125,7 +131,7 @@
         },
         getDeviceList: function() {
            let that = this;

            this.getDeviceListLoading = true;
            this.$axios.get(`/api/devices`,{
               params: {
                  page: that.currentPage - 1,
@@ -134,11 +140,14 @@
            } )
            .then(function (res) {
               console.log(res);
               console.log(res.data.list);
               that.total = res.data.total;
               that.deviceList = res.data.data;
               that.deviceList = res.data.list;
               that.getDeviceListLoading = false;
            })
            .catch(function (error) {
               console.log(error);
               that.getDeviceListLoading = false;
            });

         },
@@ -153,17 +162,31 @@
         refDevice: function(itemData) {
            ///api/devices/{deviceId}/sync
            console.log("刷新对应设备:" + itemData.deviceId);
            var that = this;
            that.$refs[itemData.deviceId + 'refbtn' ].loading = true;
            this.$axios({
               method: 'post',
               url: '/api/devices/' + itemData.deviceId + '/sync'
            }).then(function(res) {
               // console.log("刷新设备结果："+JSON.stringify(res));
               console.log("刷新设备结果："+JSON.stringify(res));
               if (!res.data.deviceId) {
                  that.$message({
                     showClose: true,
                     message: res.data,
                     type: 'error'
                  });
               }else{
                  that.$message({
                     showClose: true,
                     message: '请求成功',
                     type: 'success'
                  });
               }
               that.initData()
               that.$refs[itemData.deviceId + 'refbtn' ].loading = false;
            }).catch(function(e) {
               that.$message({
                  showClose: true,
                  message: '请求成功',
                  type: 'success'
               });
               console.error(e)
               that.$refs[itemData.deviceId + 'refbtn' ].loading = false;
            });;
         },
         //通知设备上传媒体流
@@ -180,7 +203,19 @@
               that.$refs.devicePlayer.play(ssrc,deviceId,channelId);
            }).catch(function(e) {
            });
         }
         },
      transportChange: function (row) {
        console.log(row);
        console.log(`修改传输方式为 ${row.streamMode}：${row.deviceId} `);
        let that = this;
        this.$axios({
          method: 'get',
          url: '/api/devices/' + row.deviceId + '/transport/' + row.streamMode
        }).then(function(res) {

        }).catch(function(e) {
        });
      }

      }
   };