update

src/api/list.js

@@ -89,3 +89,16 @@ export function PageQueryOrgQuotaAdjustRecordList(data) {
     data
   });
 }
+
+/**
+ * 分页查询任务直播详情列表
+ * @param { Object } data
+ */
+export function PageQueryTaskLiveDetailList(data) {
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_FileServer,
+    params: getRequestParameter('live_quota_manager-PageQueryTaskLiveDetailList'),
+    data
+  });
+}

src/router/index.js

@@ -210,6 +210,16 @@ const routes = [
           meta.title = params.orgName;
           next();
         }
+      },
+      {
+        path: 'liveDetail/:taskId/:orgName',
+        component: () => import('@/views/quota/LiveDetail.vue'),
+        meta: { title: '' },
+        props: true,
+        beforeEnter: ({ meta, params }, from, next) => {
+          meta.title = params.orgName;
+          next();
+        }
       }
     ]
   },

src/views/quota/LiveDetail.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="usage-record">
+    <div class="quota-info">
+      <span class="quota-info-item">{{ course_name }} - {{ task_name }} - {{ teacher_name }}</span>
+    </div>
+    <div class="usage-record-list">
+      <div class="title">直播人数：</div>
+
+      <el-table :data="data_list">
+        <el-table-column prop="live_room_id" label="直播间ID" width="115" />
+        <el-table-column prop="live_id" label="直播ID" width="115" />
+        <el-table-column label="类型" width="115">
+          <template slot-scope="{ row }"> {{ onlineTypeList[row.online_type].label }} </template>
+        </el-table-column>
+        <el-table-column prop="person_count" label="人数" width="115" />
+        <el-table-column prop="v_duration" label="直播时长" width="115" />
+        <el-table-column label="连线时长" width="115">
+          <template slot-scope="{ row }"> {{ row.duration_online }}小时 </template>
+        </el-table-column>
+        <el-table-column label="费用" width="115">
+          <template slot-scope="{ row }">{{ row.money_online }}元</template>
+        </el-table-column>
+        <el-table-column prop="begin_time" label="开始时间" width="115" />
+        <el-table-column prop="end_time" label="结束时间" width="115" />
+        <el-table-column label="是否分组">
+          <template slot-scope="{ row }">
+            {{ row.is_group === 'true' ? '是' : '否' }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <el-pagination
+      background
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="page_capacity"
+      layout="prev, pager, next, total, sizes, jumper"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage"
+      @next-click="changePage"
+      @current-change="changePage"
+      @size-change="changePageSize"
+    />
+  </div>
+</template>
+
+<script>
+import { onlineTypeList } from './data';
+import { PageQueryTaskLiveDetailList } from '@/api/list';
+
+export default {
+  props: {
+    taskId: {
+      type: String,
+      default: ''
+    },
+    orgName: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      teacher_name: '',
+      course_name: '',
+      task_name: '',
+      onlineTypeList,
+      data_list: [],
+      page_capacity: 10,
+      total_count: 0,
+      cur_page: 1
+    };
+  },
+  created() {
+    this.pageQueryTaskLiveDetailList();
+  },
+  methods: {
+    pageQueryTaskLiveDetailList() {
+      PageQueryTaskLiveDetailList({
+        task_id: this.taskId,
+        page_capacity: this.page_capacity,
+        cur_page: this.cur_page
+      }).then(({ total_count, cur_page, teacher_name, course_name, task_name, data_list }) => {
+        this.total_count = total_count;
+        this.cur_page = cur_page;
+        this.teacher_name = teacher_name;
+        this.course_name = course_name;
+        this.task_name = task_name;
+        this.data_list = data_list;
+      });
+    },
+    changePage(newPage) {
+      this.cur_page = newPage;
+      this.pageQueryOrgQuotaAdjustRecordList();
+    },
+    changePageSize(pageSize) {
+      this.page_capacity = pageSize;
+      this.pageQueryOrgQuotaAdjustRecordList();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/mixin';
+
+.usage-record {
+  @include container;
+  @include pagination;
+
+  .quota-info {
+    padding-top: 26px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #000;
+
+    &-item {
+      margin-right: 24px;
+    }
+  }
+
+  &-list {
+    @include list;
+
+    padding: 24px;
+
+    .title {
+      margin-bottom: 16px;
+      font-weight: bold;
+      color: #000;
+    }
+
+    ::v-deep .el-table th.el-table__cell {
+      color: #000;
+    }
+  }
+}
+</style>

src/views/quota/SetQuota.vue

@@ -1,11 +1,19 @@
 <template>
-  <el-dialog width="666px" title="设置配额" :visible="visible" :before-close="close" :close-on-click-modal="false">
+  <el-dialog width="988px" title="设置配额" :visible="visible" :before-close="close" :close-on-click-modal="false">
     <div class="quota-set">
-      <div>
+      <div class="quota-set-item cur-balance">
         <span class="quota-set-label">当前余额：</span>
-        <div>{{ org_quota_lave }}小时</div>
+        <div class="quota-set-item">
+          <span class="quota-set-label">1v1：</span>
+          {{ org_quota_lave_1v1_online }}小时 {{ org_money_lave_1v1_online }}元
+        </div>
+        <div class="quota-set-item">
+          <span class="quota-set-label">1v多：</span>
+          {{ org_quota_lave_1vm_online }}小时 {{ org_money_lave_1vm_online }}元
+        </div>
       </div>
-      <div>
+
+      <div class="quota-set-item flex-items-center">
         <span class="quota-set-label">设置配额：</span>
         <div class="quota-option-two">
           <el-input v-model="quota_add" @input="setQuota">
@@ -13,34 +21,60 @@
               <el-option v-for="{ value, label } in quota_options" :key="value" :label="label" :value="value" />
             </el-select>
           </el-input>
-          <span>&nbsp;小时</span>
+          <span class="unit-price">小时/{{ curOnlineTypePrice }}元</span>
+          <span>{{ onlineTotal }}元</span>
         </div>
       </div>
-      <div>
+
+      <div class="quota-set-item flex-items-center">
+        <span class="quota-set-label">配额类型：</span>
+        <div>
+          <el-select v-model="online_type">
+            <el-option v-for="{ value, label } in onlineTypeList" :key="value" :label="label" :value="value" />
+          </el-select>
+        </div>
+      </div>
+
+      <div class="quota-set quota-set-item">
         <span class="quota-set-label">修改原因：</span>
         <div>
           <el-input v-model="memo" class="textarea" type="textarea" resize="none" rows="4" />
         </div>
       </div>
-      <div class="quota-button">
+
+      <div class="quota-button quota-set-item">
         <span class="quota-set-label"></span>
         <div>
           <el-button class="confrim" @click="adjustOrgQuota">确认</el-button>
         </div>
       </div>
     </div>
+
     <div class="quota-list">
       <div class="quota-list-title">修改记录：</div>
       <el-table :data="data_list">
         <el-table-column prop="operate_time" label="操作时间" width="150" />
-        <el-table-column prop="quota_lave_adjust_pre" label="修改前" width="122" />
-        <el-table-column prop="quota_lave_adjust_after" label="修改后" width="122" />
-        <el-table-column prop="quota_add" label="操作记录" width="122">
+        <el-table-column prop="quota_lave_adjust_pre" label="修改前" width="90">
+          <template slot-scope="{ row }"> {{ row.quota_lave_adjust_pre }}小时 </template>
+        </el-table-column>
+        <el-table-column label="修改后" width="90">
+          <template slot-scope="{ row }"> {{ row.quota_lave_adjust_after }}小时 </template>
+        </el-table-column>
+        <el-table-column prop="quota_add" label="操作记录" width="112">
           <template slot-scope="{ row }">
             <span>{{ row.quota_add > 0 ? '增加' : '减少' }} {{ Math.abs(row.quota_add) }} 小时</span>
           </template>
         </el-table-column>
+        <el-table-column label="类型" width="112">
+          <template slot-scope="{ row }">
+            {{ onlineTypeList[row.online_type].label }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="quota_add" label="金额" width="112">
+          <template slot-scope="{ row }">{{ row.money_add }}元</template>
+        </el-table-column>
         <el-table-column prop="operator_name" label="操作人" />
+        <el-table-column prop="operator_name" label="修改原因" />
       </el-table>
       <div class="quota-list-pagination">
         <div>共 {{ total_count }} 项记录</div>
@@ -60,9 +94,11 @@
 </template>
 
 <script>
+import { onlineTypeList } from './data';
 import { AdjustOrgQuota } from '@/api/org';
 import { PageQueryOrgQuotaAdjustRecordList } from '@/api/list';
 import { twoDecimal } from '@/utils/validate';
+import { GetLiveRoomConfig } from '@/api/settings';
 
 export default {
   props: {
@@ -82,6 +118,11 @@ export default {
       org_quota_lave: 0,
       quota_multiply: 1,
       quota_add: 0,
+      online_type: 1,
+      org_quota_lave_1v1_online: 0,
+      org_money_lave_1v1_online: 0,
+      org_quota_lave_1vm_online: 0,
+      org_money_lave_1vm_online: 0,
       quota_options: [
         {
           value: 1,
@@ -92,12 +133,21 @@ export default {
           label: '减少'
         }
       ],
+      onlineTypeList,
       page_capacity: 5,
       cur_page: 1,
       total_count: 0,
       memo: ''
     };
   },
+  computed: {
+    curOnlineTypePrice() {
+      return this.onlineTypeList[this.online_type].price;
+    },
+    onlineTotal() {
+      return this.curOnlineTypePrice * this.quota_add * this.quota_multiply;
+    }
+  },
   watch: {
     orgId(newVal) {
       if (!newVal) return;
@@ -114,27 +164,51 @@ export default {
       this.memo = '';
     }
   },
+  created() {
+    GetLiveRoomConfig().then(({ unit_price_1v1, unit_price_1vm }) => {
+      this.onlineTypeList[0].price = unit_price_1vm;
+      this.onlineTypeList[1].price = unit_price_1v1;
+    });
+  },
   methods: {
     pageQueryOrgQuotaAdjustRecordList() {
       PageQueryOrgQuotaAdjustRecordList({
         org_id: this.orgId,
         page_capacity: this.page_capacity,
         cur_page: this.cur_page
-      }).then(({ total_count, cur_page, org_quota_lave, data_list }) => {
-        this.total_count = total_count;
-        this.cur_page = cur_page;
-        this.org_quota_lave = org_quota_lave;
-        this.data_list = data_list;
-      });
+      }).then(
+        ({
+          total_count,
+          org_quota_lave_1v1_online,
+          org_money_lave_1v1_online,
+          org_quota_lave_1vm_online,
+          org_money_lave_1vm_online,
+          cur_page,
+          org_quota_lave,
+          data_list
+        }) => {
+          this.total_count = total_count;
+          this.org_quota_lave_1v1_online = org_quota_lave_1v1_online;
+          this.org_money_lave_1v1_online = org_money_lave_1v1_online;
+          this.org_quota_lave_1vm_online = org_quota_lave_1vm_online;
+          this.org_money_lave_1vm_online = org_money_lave_1vm_online;
+          this.cur_page = cur_page;
+          this.org_quota_lave = org_quota_lave;
+          this.data_list = data_list;
+        }
+      );
     },
 
     adjustOrgQuota() {
-      AdjustOrgQuota({ org_id: this.orgId, quota_add: this.quota_add * this.quota_multiply, memo: this.memo }).then(
-        () => {
-          this.$message.success('调整机构配额成功');
-          this.pageQueryOrgQuotaAdjustRecordList();
-        }
-      );
+      AdjustOrgQuota({
+        org_id: this.orgId,
+        quota_add: this.quota_add * this.quota_multiply,
+        memo: this.memo,
+        online_type: this.online_type
+      }).then(() => {
+        this.$message.success('调整机构配额成功');
+        this.pageQueryOrgQuotaAdjustRecordList();
+      });
     },
 
     setQuota(val) {
@@ -154,10 +228,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  padding-top: 0;
+}
+
 .quota-set {
-  > div {
+  color: #000;
+
+  &-item {
     display: flex;
-    padding: 8px 0;
+
+    &.cur-balance {
+      flex-direction: column;
+      row-gap: 12px;
+    }
+
+    &.flex-items-center {
+      align-items: center;
+    }
+  }
+
+  > div {
+    padding-top: 8px;
 
     ::v-deep .textarea textarea {
       width: 280px;
@@ -171,6 +263,11 @@ export default {
       .el-input {
         width: 150px;
       }
+
+      .unit-price {
+        margin-right: 20px;
+        margin-left: 8px;
+      }
     }
 
     .set-quota {
@@ -185,10 +282,13 @@ export default {
 
   &-label {
     width: 76px;
+    margin-right: 8px;
+    text-align: right;
   }
 }
 
 .quota-list {
+  margin-top: 24px;
   border-top: 1px solid #f0f0f0;
 
   &-title {

src/views/quota/UsageRecord.vue

@@ -2,20 +2,34 @@
   <div class="usage-record">
     <div class="quota-info">
       <span class="quota-info-item">{{ orgName }}</span>
-      <span class="quota-info-item">当前余额：{{ org_quota_lave }}小时</span>
-      <span class="quota-info-item">累计使用：{{ org_quota_used }}小时</span>
+      <span class="quota-info-item">
+        1v1 余量：{{ org_quota_lave_1v1_online }}小时 余额：{{ org_money_lave_1v1_online }}元
+      </span>
+      <span class="quota-info-item">
+        1v多 余量：{{ org_quota_lave_1vm_online }}小时 余额：{{ org_money_lave_1vm_online }}元
+      </span>
     </div>
     <div class="usage-record-list">
       <div class="title">使用记录</div>
 
       <el-table :data="data_list">
-        <el-table-column prop="teacher_name" label="教师" width="120" />
-        <el-table-column prop="course_name" label="课程名称" width="157" />
+        <el-table-column label="课程名称" width="157">
+          <template slot-scope="{ row }">
+            <router-link :to="`/quota/liveDetail/${row.task_id}/${row.org_name}`">
+              {{ row.course_name }}
+            </router-link>
+          </template>
+        </el-table-column>
         <el-table-column prop="task_name" label="任务名称" width="157" />
+        <el-table-column prop="teacher_name" label="老师" width="120" />
         <el-table-column prop="person_count" label="直播人数" width="96" />
         <el-table-column prop="duration" label="直播时长" width="96" />
-        <el-table-column prop="duration_1v1_online" label="1v1" width="96" />
-        <el-table-column prop="duration_1vm_online" label="1v多" width="96" />
+        <el-table-column prop="duration_1v1_online" label="1v1" width="96">
+          <template slot-scope="{ row }"> {{ row.duration_1v1_online }}小时/{{ row.money_1v1_online }}元 </template>
+        </el-table-column>
+        <el-table-column prop="duration_1vm_online" label="1v多" width="96">
+          <template slot-scope="{ row }"> {{ row.duration_1vm_online }}小时/{{ row.money_1vm_online }}元 </template>
+        </el-table-column>
         <el-table-column prop="use_time" label="使用时间" />
       </el-table>
     </div>
@@ -52,8 +66,10 @@ export default {
   },
   data() {
     return {
-      org_quota_lave: 0,
-      org_quota_used: 0,
+      org_quota_lave_1v1_online: 0,
+      org_money_lave_1v1_online: 0,
+      org_quota_lave_1vm_online: 0,
+      org_money_lave_1vm_online: 0,
       data_list: [],
       page_capacity: 10,
       total_count: 0,
@@ -69,13 +85,25 @@ export default {
         org_id: this.orgId,
         page_capacity: this.page_capacity,
         cur_page: this.cur_page
-      }).then(({ total_count, cur_page, org_quota_lave, org_quota_used, data_list }) => {
-        this.total_count = total_count;
-        this.cur_page = cur_page;
-        this.org_quota_lave = org_quota_lave;
-        this.org_quota_used = org_quota_used;
-        this.data_list = data_list;
-      });
+      }).then(
+        ({
+          total_count,
+          cur_page,
+          org_quota_lave_1v1_online,
+          org_money_lave_1v1_online,
+          org_quota_lave_1vm_online,
+          org_money_lave_1vm_online,
+          data_list
+        }) => {
+          this.total_count = total_count;
+          this.cur_page = cur_page;
+          this.org_quota_lave_1v1_online = org_quota_lave_1v1_online;
+          this.org_money_lave_1v1_online = org_money_lave_1v1_online;
+          this.org_quota_lave_1vm_online = org_quota_lave_1vm_online;
+          this.org_money_lave_1vm_online = org_money_lave_1vm_online;
+          this.data_list = data_list;
+        }
+      );
     },
     changePage(newPage) {
       this.cur_page = newPage;
@@ -104,6 +132,10 @@ export default {
 
     &-item {
       margin-right: 24px;
+
+      &:nth-child(2) {
+        margin-right: 42px;
+      }
     }
   }
 

src/views/quota/data.js

@@ -0,0 +1,12 @@
+export const onlineTypeList = [
+  {
+    value: 0,
+    label: '1v多',
+    price: 0
+  },
+  {
+    value: 1,
+    label: '1v1',
+    price: 0
+  }
+];

src/views/quota/index.vue

@@ -2,15 +2,25 @@
   <div class="quota">
     <div class="quota-list">
       <el-table :data="data_list">
-        <el-table-column label="机构" width="500">
+        <el-table-column label="机构" width="176">
           <template slot-scope="{ row }">
             <router-link :to="`/quota/usageRecord/${row.org_id}/${row.org_name}`">
               {{ row.org_name }}
             </router-link>
           </template>
         </el-table-column>
-        <el-table-column prop="quota_lave" label="剩余配额" width="160" />
-        <el-table-column prop="quota_used" label="累计已用" width="160" />
+        <el-table-column prop="quota_lave" label="1v1余量" width="160">
+          <template slot-scope="{ row }"> {{ row.quota_lave_1v1_online }}小时 </template>
+        </el-table-column>
+        <el-table-column prop="quota_lave" label="1v1余额" width="160">
+          <template slot-scope="{ row }"> {{ row.money_lave_1v1_online }}元 </template>
+        </el-table-column>
+        <el-table-column prop="quota_lave" label="1v多余量" width="160">
+          <template slot-scope="{ row }"> {{ row.quota_lave_1vm_online }}小时 </template>
+        </el-table-column>
+        <el-table-column prop="quota_lave" label="1v多余额" width="160">
+          <template slot-scope="{ row }"> {{ row.money_lave_1vm_online }}元 </template>
+        </el-table-column>
         <el-table-column prop="quota_status" label="状态" width="160">
           <template slot-scope="{ row }">
             <span :style="{ color: row.quota_status ? '#019319' : '#CA0000' }">

src/views/settings/configure/LiveRoomConfig.vue

@@ -1,13 +1,19 @@
 <template>
   <!-- 场景视频对接配置 -->
   <div class="live-config">
-    <el-form ref="form" :model="form" label-width="120px">
+    <el-form ref="form" :model="form" label-width="180px">
       <el-form-item label="授权用户 ID">
         <el-input v-model="form.user_id" />
       </el-form-item>
       <el-form-item label="接口对接键值">
         <el-input v-model="form.api_key" />
       </el-form-item>
+      <el-form-item label="1v1直播单价（元/小时）">
+        <el-input v-model="form.unit_price_1v1" />
+      </el-form-item>
+      <el-form-item label="1v多直播单价（元/小时）">
+        <el-input v-model="form.unit_price_1vm" />
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="setLiveRoomConfig">应用</el-button>
       </el-form-item>
@@ -23,7 +29,9 @@ export default {
     return {
       form: {
         user_id: '',
-        api_key: ''
+        api_key: '',
+        unit_price_1v1: 0,
+        unit_price_1vm: 0
       }
     };
   },
@@ -32,13 +40,13 @@ export default {
   },
   methods: {
     getLiveRoomConfig() {
-      GetLiveRoomConfig().then(({ user_id, api_key }) => {
-        this.form = { user_id, api_key };
+      GetLiveRoomConfig().then(({ user_id, api_key, unit_price_1v1, unit_price_1vm }) => {
+        this.form = { user_id, api_key, unit_price_1v1, unit_price_1vm };
       });
     },
 
     setLiveRoomConfig() {
-      SetLiveRoomConfig({ user_id: this.form.user_id, api_key: this.form.api_key }).then(() => {
+      SetLiveRoomConfig(this.form).then(() => {
         this.$message.success('设置场景视频对接配置成功');
       });
     }