|
@@ -1,9 +1,9 @@
|
|
<template>
|
|
<template>
|
|
<div class="live">
|
|
<div class="live">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb separator="/">
|
|
- <el-breadcrumb-item :to="{ path: '/all_aedia/overview' }"
|
|
|
|
- >全媒体平台</el-breadcrumb-item
|
|
|
|
- >
|
|
|
|
|
|
+ <el-breadcrumb-item :to="{ path: '/all_aedia/overview' }">
|
|
|
|
+ 全媒体平台
|
|
|
|
+ </el-breadcrumb-item>
|
|
<el-breadcrumb-item>直播排行</el-breadcrumb-item>
|
|
<el-breadcrumb-item>直播排行</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</el-breadcrumb>
|
|
<el-form
|
|
<el-form
|
|
@@ -12,18 +12,29 @@
|
|
:model="search"
|
|
:model="search"
|
|
class="demo-form-inline"
|
|
class="demo-form-inline"
|
|
>
|
|
>
|
|
- <el-form-item label="中心">
|
|
|
|
- <el-select v-model="search.center">
|
|
|
|
- <el-option label="创新中心" value="1" />
|
|
|
|
- <el-option label="新闻中心" value="2" />
|
|
|
|
- </el-select>
|
|
|
|
- </el-form-item>
|
|
|
|
<el-form-item label="部门">
|
|
<el-form-item label="部门">
|
|
<el-select v-model="search.department">
|
|
<el-select v-model="search.department">
|
|
- <el-option label="部门1" value="1" />
|
|
|
|
- <el-option label="部门2" value="2" />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="v in datas.department"
|
|
|
|
+ :label="v"
|
|
|
|
+ :value="v"
|
|
|
|
+ :key="v"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="栏目">
|
|
|
|
+ <el-select v-model="search.column">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="v in datas.column"
|
|
|
|
+ :label="v.title"
|
|
|
|
+ :value="v.title"
|
|
|
|
+ :key="v.title"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-form-item label="关键词">
|
|
|
|
+ <el-input clearable v-model="search.keyword" />
|
|
|
|
+ </el-form-item>
|
|
<el-form-item label="日期">
|
|
<el-form-item label="日期">
|
|
<el-date-picker
|
|
<el-date-picker
|
|
v-model="search.date"
|
|
v-model="search.date"
|
|
@@ -31,43 +42,227 @@
|
|
range-separator="-"
|
|
range-separator="-"
|
|
start-placeholder="开始时间"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
end-placeholder="结束时间"
|
|
|
|
+ :disabled-date="disabledDate"
|
|
/>
|
|
/>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-button type="primary" @click="() => getlist()"> 提交 </el-button>
|
|
|
|
+ </el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
- <el-table border :data="tableData" stripe style="width: 100%">
|
|
|
|
- <el-table-column align="center" header-align="center" type="index" label="排行" width="50" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="直播名" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="中心" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="部门" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="创建人" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="直播开始时间" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="观看人次" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="总停留时长(秒)" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="点赞数" />
|
|
|
|
- <el-table-column align="center" header-align="center" prop="" label="评论数" />
|
|
|
|
|
|
+ <el-table
|
|
|
|
+ :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
|
|
|
|
+ border
|
|
|
|
+ :data="tableData"
|
|
|
|
+ stripe
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ @row-click="getIncome"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ type="index"
|
|
|
|
+ label="排行"
|
|
|
|
+ width="50"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="title"
|
|
|
|
+ label="直播名"
|
|
|
|
+ width="300"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="centerName"
|
|
|
|
+ label="中心"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="column"
|
|
|
|
+ label="栏目"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="displayName"
|
|
|
|
+ label="创建人"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="start"
|
|
|
|
+ label="直播开始时间"
|
|
|
|
+ >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ {{ timeFormat(scope.row.start) }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="views"
|
|
|
|
+ label="观看人次"
|
|
|
|
+ >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <countTo
|
|
|
|
+ :startVal="scope.row.views || 0"
|
|
|
|
+ :endVal="scope.row.views || 0"
|
|
|
|
+ :duration="100"
|
|
|
|
+ ></countTo>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="money"
|
|
|
|
+ label="收入"
|
|
|
|
+ >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <countTo
|
|
|
|
+ :startVal="scope.row.money || 0"
|
|
|
|
+ :endVal="scope.row.money || 0"
|
|
|
|
+ :duration="100"
|
|
|
|
+ ></countTo>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
<br />
|
|
<br />
|
|
- <el-pagination layout="prev, pager, next" :total="1000" />
|
|
|
|
|
|
+ <el-pagination
|
|
|
|
+ @current-change="currentChange"
|
|
|
|
+ :current-value="search.page"
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
+ :total="search.total"
|
|
|
|
+ />
|
|
|
|
+
|
|
|
|
+ <el-dialog v-model="dialogList.length" :title="clickRowData.title" width="50%">
|
|
|
|
+ <el-table
|
|
|
|
+ :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
|
|
|
|
+ border
|
|
|
|
+ :data="dialogList"
|
|
|
|
+ stripe
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ type="userName"
|
|
|
|
+ label="付款人"
|
|
|
|
+ >
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ {{ scope.row.userName }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ prop="money"
|
|
|
|
+ label="付款金额"
|
|
|
|
+ />
|
|
|
|
+ </el-table>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-// 概览
|
|
|
|
|
|
+// 直播
|
|
|
|
+import countTo from '@/components/counto/vue-countTo.vue';
|
|
|
|
+import {
|
|
|
|
+ getCloudLive,
|
|
|
|
+ getCenter,
|
|
|
|
+ getCloudLiveList,
|
|
|
|
+ getIncomeist,
|
|
|
|
+} from '@/api/newMdeiaApi.js';
|
|
|
|
+import dayjs from 'dayjs';
|
|
|
|
+const T = dayjs(Date.now() - 86400000);
|
|
export default {
|
|
export default {
|
|
name: 'live',
|
|
name: 'live',
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ T,
|
|
|
|
+ dialogVisible: false,
|
|
search: {
|
|
search: {
|
|
- center: '',
|
|
|
|
|
|
+ column: '',
|
|
department: '',
|
|
department: '',
|
|
- date: [],
|
|
|
|
|
|
+ date: [T.format('YYYY-MM-DD'), T.format('YYYY-MM-DD')],
|
|
|
|
+ keyword: '',
|
|
|
|
+ page: 1,
|
|
|
|
+ size: 10,
|
|
|
|
+ total: 0,
|
|
|
|
+ },
|
|
|
|
+ datas: {
|
|
|
|
+ department: [],
|
|
|
|
+ column: [],
|
|
},
|
|
},
|
|
tableData: [],
|
|
tableData: [],
|
|
|
|
+ dialogList: [],
|
|
|
|
+ clickRowData: {},
|
|
};
|
|
};
|
|
},
|
|
},
|
|
- mounted() {},
|
|
|
|
- methods: {},
|
|
|
|
- components: {},
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+ Promise.all([getCloudLive(), getCenter()]).then(li => {
|
|
|
|
+ this.datas.department = ['全部', ...li[1]];
|
|
|
|
+ this.search.department = this.datas.department[0];
|
|
|
|
+ this.datas.column = [
|
|
|
|
+ {
|
|
|
|
+ id: -1,
|
|
|
|
+ title: '全部',
|
|
|
|
+ },
|
|
|
|
+ ...li[0],
|
|
|
|
+ ];
|
|
|
|
+ this.search.column = this.datas.column[0].title;
|
|
|
|
+ this.getlist();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getlist() {
|
|
|
|
+ const column = this.search.column === '全部' ? '' : this.search.column;
|
|
|
|
+ const center =
|
|
|
|
+ this.search.department === '全部' ? '' : this.search.department;
|
|
|
|
+ const st = dayjs(this.search.date[0]);
|
|
|
|
+ const et = dayjs(this.search.date[1]);
|
|
|
|
+ getCloudLiveList({
|
|
|
|
+ start: st.format('YYYY-MM-DD'),
|
|
|
|
+ end: et.format('YYYY-MM-DD'),
|
|
|
|
+ column,
|
|
|
|
+ center,
|
|
|
|
+ keyword: this.search.keyword,
|
|
|
|
+ page: this.search.page,
|
|
|
|
+ pageSize: this.search.size,
|
|
|
|
+ }).then(r => {
|
|
|
|
+ this.search.total = r.total || 0;
|
|
|
|
+ this.tableData = r.records || [];
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ disabledDate(time) {
|
|
|
|
+ let out = true;
|
|
|
|
+ if (time.getTime() < Date.now()) out = false;
|
|
|
|
+ return out;
|
|
|
|
+ },
|
|
|
|
+ timeFormat(t) {
|
|
|
|
+ const d = dayjs(t);
|
|
|
|
+ return d.format('YYYY-MM-DD');
|
|
|
|
+ },
|
|
|
|
+ currentChange(page) {
|
|
|
|
+ this.search.page = page;
|
|
|
|
+ this.getlist();
|
|
|
|
+ },
|
|
|
|
+ getIncome(row) {
|
|
|
|
+ getIncomeist(row.id).then(r => {
|
|
|
|
+ if (!r || !r.length) {
|
|
|
|
+ this.dialogList = [];
|
|
|
|
+ this.clickRowData = {};
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ this.clickRowData = row;
|
|
|
|
+ this.dialogList = r;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ components: {
|
|
|
|
+ countTo,
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang="scss">
|
|
<style lang="scss">
|