直播管理

src/views/yqrange/live-manage.vue

@@ -3,7 +3,13 @@
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <div class="yqrange-index-content screenSet" id="screenSet">
       <div class="header-title">直播管理</div>
-      <el-form ref="searchForm" :model="searchForm" label-width="75px" label-suffix=":" :inline="true">
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="75px"
+        label-suffix=":"
+        :inline="true"
+      >
         <el-row :gutter="30" type="flex" style="margin-top: 10px">
           <el-col :span="10">
             <el-form-item label="直播名称">
@@ -12,13 +18,18 @@
           </el-col>
           <el-col :span="10">
             <el-form-item label="直播状态">
-              <el-select v-model="searchForm.liveStatus" placeholder="请选择发布状态" clearable style="margin-left:20px;">
+              <el-select
+                v-model="searchForm.liveStatus"
+                placeholder="请选择发布状态"
+                clearable
+                style="margin-left:20px;"
+              >
                 <el-option
                   v-for="item in statusList"
                   :key="item.value"
                   :label="item.label"
-                    :value="item.label">
-                </el-option>
+                  :value="item.label"
+                ></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -45,7 +56,7 @@
         <el-table-column prop="endTime" label="结束时间" min-width="100" align="center"></el-table-column>
         <el-table-column label="操作" min-width="300" align="center">
           <template slot-scope="scope">
-            <el-button @click="reviewLive(scope.row)" type="text" size="small">设置回放</el-button>
+            <!-- <el-button @click="reviewLive(scope.row)" type="text" size="small">设置回放</el-button> -->
             <el-button @click="liveLink(scope.row)" type="text" size="small">直播链接</el-button>
             <el-button @click="countLive(scope.row)" type="text" size="small">数据统计</el-button>
             <el-button @click="editLive(scope.row)" type="text" size="small">编辑</el-button>
@@ -65,59 +76,96 @@
           :total="totalRows"
         ></el-pagination>
       </div>
+
+      <el-dialog
+        title="数据统计"
+        :visible.sync="dialogStatisticsVisible"
+        width="500px"
+        :close-on-click-modal="false"
+        @close="handleTypeClose"
+        center
+      >
+        <!-- <el-table-column prop="peopleNum" label="观看人次" min-width="50" align="center"></el-table-column>
+        <el-table-column prop="liveDuration" label="直播时长" min-width="50" align="center"></el-table-column>-->
+
+        <el-table :data="dialogStatisticsData" align="center">
+          <el-table-column property="peopleNum" label="观看人次" align="center"></el-table-column>
+          <el-table-column property="liveDuration" label="直播时长" align="center"></el-table-column>
+        </el-table>
+      </el-dialog>
     </div>
   </div>
 </template>
 <script>
-  import BreadCrumb from "@/components/breadcrumb.vue";
-  export default {
+let vm = null;
+import BreadCrumb from "@/components/breadcrumb.vue";
+export default {
   components: {
     BreadCrumb
   },
-    data(){
-      return{
-        curmbFirst: '云鹊小圈',
-        curmbSecond: '直播管理',
+  data() {
+    return {
+      curmbFirst: "云鹊小圈",
+      curmbSecond: "直播管理",
+      dialogStatisticsVisible: false,
       searchForm: {
-          liveName: '',
-          liveStatus: '',
+        liveName: "",
+        liveStatus: "",
         pageNo: 1,
-          pageSize: 10,
+        pageSize: 10
       },
       totalRows: 0,
-        statusList: [{
-          value: '1',
-          label: '预告'
-        }, {
-          value: '2',
-          label: '直播中'
-        }, {
-          value: '3',
-          label: '已结束'
-        }],
+      statusList: [
+        {
+          value: "1",
+          label: "预告"
+        },
+        {
+          value: "2",
+          label: "直播中"
+        },
+        {
+          value: "3",
+          label: "已结束"
+        }
+      ],
       tableData: [
         {
-            liveName: '浙江医学大会第二场',
-            liveStatus: 1,
-            createTime: '',
-            startTime: '',
-            endTime: '',
+          liveName: "浙江医学大会第二场",
+          liveStatus: 3,
+          createTime: "",
+          startTime: "",
+          endTime: "",
+          rtcId: 0,
         }
       ],
+      dialogStatisticsData: [
+        {
+          peopleNum: 234,
+          liveDuration: "38分钟"
         }
+      ],
+      circleId: null
+    };
+  },
+  created() {
+    vm = this;
+    this.circleId = this.$route.query.id;
+    vm.getLiveList("", "");
   },
   methods: {
     searchList() {
-        console.log('查询')
+      console.log("查询");
+      this.getLiveList(this.searchForm.liveName, this.searchForm.liveStatus);
     },
     resetForm() {
-        console.log('重置')
+      console.log("重置");
     },
     //新建直播
     createLive() {
       this.$router.push({
-          path: '/create-live',
-        })
+        path: "/create-live"
+      });
     },
     //直播链接
     liveLink(row) {},
@@ -125,39 +173,67 @@
     reviewLive(row) {},
     //数据统计
     countLive(row) {
-        this.$msgbox({
-          title: '直播链接',
-          message: '这是一段内容',
-          showCancelButton: true
-          // confirmButtonText: '确定',
-          // cancelButtonText: '取消'
-        }).then(action => {
-          this.$message({
-            type: 'info',
-            message: 'action: ' + action
+      this.dialogStatisticsVisible = true;
+      this.getStatisticsData();
+    },
+    getStatisticsData() {
+      console.log("getStatisticsData() : this.circleId = " + this.circleId);
+      let req = {
+        rtcId: this.circleId
+      };
+      vm.GET("liveAdmin/data", req).then(res => {
+        if (res.code == "000000") {
+          let listData = [];
+          let obj = {
+            peopleNum: res.data.viewedPersonTime,
+            liveDuration: res.data.liveDuration
+          };
+          listData.push(obj);
+          this.dialogStatisticsData = listData;
+        } else {
+          this.dialogStatisticsData = [];
+        }
       });
-        })
     },
     //编辑直播
     editLive(row) {
       this.$router.push({
-          path: '/create-live',
+        path: "/create-live",
         query: {
           // rtcId: "1"
           rtcId: row.id
         }
-        })
+      });
     },
     //删除直播
     deleteLive(row) {
-        this.$confirm(`确定删除“${row.liveName}”吗？`, '', {
-          confirmButtonText: '删除',
-          cancelButtonText: '取消',
-          type: 'warning',
-          customClass: 'range-make-box',
-        }).then(() => {
+      this.$confirm(`确定删除“${row.liveName}”吗？`, "", {
+        confirmButtonText: "删除",
+        cancelButtonText: "取消",
+        type: "warning"
+        // customClass: 'range-make-box',
+      })
+        .then(() => {
           //  confirm
-        }).catch(() => {
+          let req = {
+            rtcId: row.rtcId,
+          };
+          vm.DELETE("liveAdmin", req).then(res => {
+            if (res.code == "000000") {
+              vm.$message({
+                  type: "success",
+                  message: "删除成功"
+                });
+              this.getLiveList("", "")
+            } else {
+              vm.$message({
+                  type: "success",
+                  message: "删除失败"
+                });
+            }
+          });
+        })
+        .catch(() => {
           //  cancel
         });
     },
@@ -170,35 +246,65 @@
       this.searchForm.pageNo = val;
       this.searchList();
     },
-    },
+    getLiveList(name, status) {
+      let req = {
+        circleId: this.circleId,
+        name: name,
+        liveStatus: status,
+        pageNo: 1,
+        pageSize: 30
+      };
+      console.log("alex name = " + name + ", status = " + status);
+      vm.GET("liveAdmin/list", req).then(res => {
+        if (res.code == "000000") {
+          // console.log(res);
+          let listData = [];
+          for (let i = 0; i < data.length; i++) {
+            let obj = {
+              liveName: res.data.pageContents[i].name,
+              liveStatus: res.data.pageContents[i].liveStatus,
+              createTime: res.data.pageContents[i].createdTime,
+              startTime: res.data.pageContents[i].openTime,
+              endTime: res.data.pageContents[i].endTime,
+              rtcId: res.data.pageContents[i].rtcIntroduces[0].rtcId,
+            };
+            listData.push(obj);
           }
+          this.tableData = listData;
+        } else {
+          this.tableData = [];
+        }
+      });
+    }
+  }
+};
 </script>
 <style lang="scss">
-  .yqrange-index-wrapper{
-    .yqrange-index-content{
+.yqrange-index-wrapper {
+  .yqrange-index-content {
     background: #fff;
     padding: 10px;
-      .header-title{
+    .header-title {
       padding: 10px 12px;
       font-size: 12px;
       color: #449284;
       border-bottom: 1px solid #efefef;
     }
   }
-    .el-button--text{
+  .el-button--text {
     color: #449284;
     font-size: 14px;
-      &::after{
-        content: '';
+    &::after {
+      content: "";
       position: relative;
       height: 14px;
       /*border-right: 1px solid #EBEEF5;*/
       border-right: 1px solid #aaaaaa;
       padding-right: 10px;
     }
-      &:last-of-type{
-        &::after{
-          content: '';
+    &:last-of-type {
+      &::after {
+        content: "";
         position: relative;
         width: 1px;
         height: 14px;
@@ -206,5 +312,5 @@
       }
     }
   }
-  }
+}
 </style>

src/views/yqrange/yq-range.vue

@@ -142,7 +142,7 @@ export default {
     //直播管理
     liveManage(row) {
       this.$router.push({
-        path: '/live-manage',
+        path: '/live-manage?id=' + row.id,
       })
     },
     //成员管理