1

.env

@@ -1,3 +1,3 @@
 VUE_APP_AXIOS_BASE_URL = ''
 VUE_APP_ROUTER="/platlive"
-VUE_APP_LIVE_URL='rtmp://124.71.143.119/live'
+VUE_APP_LIVE_URL='rtmp://124.71.143.119/live/'

src/views/superAdminCenter/index.vue

@@ -50,6 +50,7 @@ import productSolicit from './productSolicit/index.vue';
 import updatepwd from './xiugai/xiugai.vue';
 import Journ from './Journ/index.vue';
 import channel from './channel/index.vue';
+import monitor from './monitor/index.vue';
 import heads from '@/layout/userCenter/heads.vue';
 import foot from '@/layout/live/foot.vue';
 
@@ -82,6 +83,7 @@ export default {
     updatepwd,
     Journ,
     channel,
+    monitor,
   },
   data: function() {
     return {

src/views/superAdminCenter/monitor/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="8" class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="24" class="title">
+            <span>[{{ item.room_id }}]</span>{{ item.title }}
+          </el-col>
+          <el-col :span="24" class="video">
+            <div class="h5video" :id="item.room_id"></div>
+          </el-col>
+          <el-col :span="24" class="btn">
+            <el-button type="danger" size="mini">强制关闭直播</el-button>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [],
+    };
+  },
+  async created() {
+    await this.search();
+    this.$nextTick(() => {
+      this.searchLive();
+    });
+  },
+  methods: {
+    ...dock(['query']),
+    async search() {
+      let res = await this.query({ status: '1' });
+      let arr = await this.query({ status: '2' });
+      var newData = res.data.concat(arr.data);
+      if (this.$checkRes(newData)) {
+        this.$set(this, `list`, newData);
+      }
+    },
+    searchLive() {
+      var envUrl = process.env.VUE_APP_LIVE_URL;
+      var swfStr = '/platlive/swf/flowplayer-3.2.18.swf';
+      var obj_1 = {
+        clip: {
+          provider: 'rtmp',
+          bufferLength: 0,
+          bufferTime: 0,
+          autoPlay: true,
+          live: true,
+        },
+        plugins: {
+          rtmp: {
+            url: 'flowplayer.rtmp-3.2.13.swf',
+          },
+        },
+      };
+      for (const val of this.list) {
+        val.url = envUrl + val.room_id;
+        var videoRoom = document.getElementById(val.room_id);
+        videoRoom.setAttribute('data-rtmp', val.url);
+        videoRoom.setAttribute('href', val.url);
+        const obj_2 = JSON.parse(JSON.stringify(obj_1));
+        obj_2.plugins.rtmp.netConnectionUrl = val.url;
+        flowplayer(val.room_id, swfStr, obj_2);
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .list {
+    width: 32%;
+    height: 295px;
+    margin: 0 10px 10px 0;
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 0 5px #ccc;
+    .title {
+      text-align: center;
+      font-size: 18px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      word-break: break-all;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      font-weight: bold;
+      height: 54px;
+      line-height: 25px;
+      span {
+        font-size: 16px;
+        color: #ff0000;
+      }
+    }
+    .video {
+      height: 180px;
+      overflow: hidden;
+      margin: 0 0 10px 0;
+      text-align: center;
+      border: 1px solid #f1f1f1;
+      .h5video {
+        width: 100%;
+        height: 180px;
+        overflow: hidden;
+      }
+    }
+    .btn {
+      text-align: center;
+    }
+  }
+  .list:nth-child(3n) {
+    margin: 0 0 10px 0;
+  }
+  .list:hover {
+    cursor: pointer;
+    box-shadow: 0 0 5px #666;
+    .title {
+      color: #409eff;
+    }
+  }
+}
+</style>