添加推流列表和拉流代理，下一步与国标关联

panlinlin

2021-03-30 56859d09df8d4226882d43934acf32d60a3b51d7

 web_src/src/components/ParentPlatformList.vue

@@ -8,49 +8,45 @@
        <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>
        <devicePlayer ref="devicePlayer"></devicePlayer>
        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
            <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button>
        </div>
        <!--设备列表-->
        <el-table :data="deviceList" border style="width: 100%" :height="winHeight">
          <el-table-column prop="name" label="名称" width="180" align="center">
          </el-table-column>
          <el-table-column prop="deviceId" label="平台编号" width="240" align="center">
          </el-table-column>
          <el-table-column prop="deviceId" label="是否启用" width="50" align="center">
          </el-table-column>
          <el-table-column label="状态" width="180" align="center">
        <el-table :data="platformList" border style="width: 100%" :height="winHeight">
          <el-table-column prop="name" label="名称" width="240" align="center"></el-table-column>
          <el-table-column prop="serverGBId" label="平台编号" width="180" align="center"></el-table-column>
          <el-table-column label="是否启用" width="120" align="center">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <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>
                <el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
                <el-tag size="medium" v-if="!scope.row.enable">未启用</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="120" align="center">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" v-if="scope.row.status">在线</el-tag>
                <el-tag size="medium" type="info" v-if="!scope.row.status">离线</el-tag>
              </div>
            </template>
          </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.host.address }}</el-tag>
                <el-tag size="medium">{{ scope.row.serverIP}}:{{scope.row.serverPort }}</el-tag>
              </div>
            </template>
            <el-table-column prop="deviceId" label="设备国标编号" width="240" align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="deviceGBId" label="设备国标编号" width="240" align="center"></el-table-column>
          <el-table-column prop="transport" label="信令传输模式" width="120" align="center"></el-table-column>
          <el-table-column prop="channelCount" label="通道数" align="center"></el-table-column>

          <el-table-column label="流传输模式" align="center" width="160">
          <el-table-column label="操作" width="300" align="center" fixed="right">
            <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="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" icon="el-icon-edit" @click="editPlatform(scope.row)">编辑</el-button>
              <el-button size="mini" icon="el-icon-share"  type="primary"  @click="chooseChannel(scope.row)">选择通道</el-button>
              <el-button size="mini" icon="el-icon-delete"  type="danger" @click="deletePlatform(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -64,48 +60,38 @@
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>

      <platformEdit ref="platformEdit" ></platformEdit>
      <chooseChannelDialog ref="chooseChannelDialog" ></chooseChannelDialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import devicePlayer from './gb28181/devicePlayer.vue'
import platformEdit from './dialog/platformEdit.vue'
import uiHeader from './UiHeader.vue'
import chooseChannelDialog from './dialog/chooseChannel.vue'
export default {
  name: 'app',
  components: {
    devicePlayer,
    uiHeader
    platformEdit,
    uiHeader,
    chooseChannelDialog
  },
  data() {
    return {
      deviceList: [], //设备列表
      currentDevice: {}, //当前操作设备对象
      platformList: [], //设备列表

      videoComponentList: [],
      updateLooper: 0, //数据刷新轮训标志
      currentDeviceChannelsLenth:0,
      winHeight: window.innerHeight - 200,
      winHeight: window.innerHeight - 260,
      currentPage:1,
      count:15,
      total:0
    };
  },
  computed: {
    getcurrentDeviceChannels: function() {
      let data = this.currentDevice['channelMap'];
      let channels = null;
      if (data) {
        channels = Object.keys(data).map(key => {
          return data[key];
        });
        this.currentDeviceChannelsLenth = channels.length;
      }

      console.log("数据：" + JSON.stringify(channels));
      return channels;
    getcurrentDeviceChannels: function() {

    }
  },
  mounted() {
@@ -113,146 +99,73 @@
    this.updateLooper = setInterval(this.initData, 10000);
  },
  destroyed() {
    this.$destroy('videojs');
    clearTimeout(this.updateLooper);
  },
  methods: {
    addParentPlatform: function() {
      this.$refs.platformEdit.openDialog(null, this.initData)
    },
    editPlatform: function(platform) {
      console.log(platform)
      this.$refs.platformEdit.openDialog(platform, this.initData)
    },
    deletePlatform: function(platform) {
        var that = this;
        that.$confirm('确认删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                that.deletePlatformCommit(platform)
            })
    },
    deletePlatformCommit: function(platform) {
        var that = this;
        that.$axios.post(`/api/platforms/delete`, platform)
            .then(function (res) {
                if (res.data == "success") {
                    that.$message({
                        showClose: true,
                        message: '删除成功',
                        type: 'success'
                    });
                    that.initData()
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    },
    chooseChannel: function(platform) {
       this.$refs.chooseChannelDialog.openDialog(platform.serverGBId, ()=>{
         this.initData()
       })
    },
    initData: function() {
      this.getDeviceList();
      this.getPlatformList();
    },
    currentChange: function(val){
      this.currentPage = val;
      this.getDeviceList();
      this.getPlatformList();
    },
    handleSizeChange: function(val){
      this.count = val;
      this.getDeviceList();
      this.getPlatformList();
    },
    getDeviceList: function() {
    getPlatformList: function() {
      let that = this;

      this.$axios.get(`/api/devices`,{
        params: {
          page: that.currentPage - 1,
          count: that.count
        }
      } )
      this.$axios.get(`/api/platforms/${that.count}/${that.currentPage}`)
        .then(function (res) {
          console.log(res);
          that.total = res.data.total;
          that.deviceList = res.data.data;
          that.platformList = res.data.list;
        })
        .catch(function (error) {
          console.log(error);
        });

    },
    showChannelList: function(row) {
      console.log(JSON.stringify(row))
      this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
    },


    //gb28181平台对接
    //刷新设备信息
    refDevice: function(itemData) {
      ///api/devices/{deviceId}/sync
      console.log("刷新对应设备:" + itemData.deviceId);
      this.$axios({
        method: 'post',
        url: '/api/devices/' + itemData.deviceId + '/sync'
      }).then(function(res) {
        // console.log("刷新设备结果："+JSON.stringify(res));
      }).catch(function(e) {
        that.$message({
          showClose: true,
          message: '请求成功',
          type: 'success'
        });
      });;
    },
    //通知设备上传媒体流
    sendDevicePush: function(itemData) {
      let deviceId = this.currentDevice.deviceId;
      let channelId = itemData.channelId;
      console.log("通知设备推流1：" + deviceId + " : " + channelId);
      let that = this;
      this.$axios({
        method: 'get',
        url: '/api/play/' + deviceId + '/' + channelId
      }).then(function(res) {
        let ssrc = res.data.ssrc;
        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) {
      });
    }

  }
};
</script>

<style>
.videoList {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.video-item {
  position: relative;
  width: 15rem;
  height: 10rem;
  margin-right: 1rem;
  background-color: #000000;
}

.video-item-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.video-item-img:after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  background-image: url("../assets/loading.png");
  background-size: cover;
  background-color: #000000;
}

.video-item-title {
  position: absolute;
  bottom: 0;
  color: #000000;
  background-color: #ffffff;
  line-height: 1.5rem;
  padding: 0.3rem;
  width: 14.4rem;
}
</style>