|
|
@@ -1,91 +1,87 @@
|
|
|
<template>
|
|
|
<div class="Jugou">
|
|
|
<el-loading></el-loading>
|
|
|
- <el-card>
|
|
|
- <div style="padding: 0 100px">
|
|
|
- <div style="position: relative">
|
|
|
- <video
|
|
|
- controls
|
|
|
- autoplay
|
|
|
- ref="video"
|
|
|
- @timeupdate="timeupdate"
|
|
|
- @error="videoerror"
|
|
|
- @canplay="videoload"
|
|
|
- :src="videoUrl"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-show="videoerrorStart"
|
|
|
- class="videoerror"
|
|
|
- src="../../assets/img/videoerror.png"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div style="position: relative">
|
|
|
- <div
|
|
|
- class="chart"
|
|
|
- ref="chart"
|
|
|
- style="width: 100%; min-height: 300px"
|
|
|
- ></div>
|
|
|
- <div class="lineinfobackground" :style="'left:' + leftNum + 'px'">
|
|
|
- <div style="position: relative; width: 100%; height: 100%">
|
|
|
- <div class="line"></div>
|
|
|
- <el-row style="padding: 10px 0 0 20px">
|
|
|
- <el-col :span="6">
|
|
|
- <span class="icon" style="background-color: #e05c5c"></span>
|
|
|
- 流入
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <span class="icon" style="background-color: #6ab581"></span>
|
|
|
- 流出
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <span class="iconLine"></span>
|
|
|
- 收视率%
|
|
|
- <div style="float: right; padding: 0 5px 0 0">
|
|
|
- {{ tof(nowItem.audienceRating, 4) }}%
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <div style="padding: 5px 20px">
|
|
|
- 当前时间：{{
|
|
|
- nowItem.date ? nowItem.date.split(' ')[1] || '' : ''
|
|
|
- }}
|
|
|
- <div style="float: right">
|
|
|
- 人数: {{ formateNum(nowItem.uv) }}
|
|
|
+ <div style="padding: 0 100px">
|
|
|
+ <div style="position: relative">
|
|
|
+ <video
|
|
|
+ controls
|
|
|
+ autoplay
|
|
|
+ ref="video"
|
|
|
+ @timeupdate="timeupdate"
|
|
|
+ @error="videoerror"
|
|
|
+ @canplay="videoload"
|
|
|
+ :src="videoUrl"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="videoerrorStart"
|
|
|
+ class="videoerror"
|
|
|
+ src="../../assets/img/videoerror.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="position: relative">
|
|
|
+ <div
|
|
|
+ class="chart"
|
|
|
+ ref="chart"
|
|
|
+ style="width: 100%; min-height: 300px"
|
|
|
+ ></div>
|
|
|
+ <div class="lineinfobackground" :style="'left:' + leftNum + 'px'">
|
|
|
+ <div style="position: relative; width: 100%; height: 100%">
|
|
|
+ <div class="line"></div>
|
|
|
+ <el-row style="padding: 10px 0 0 20px">
|
|
|
+ <el-col :span="6">
|
|
|
+ <span class="icon" style="background-color: #e05c5c"></span>
|
|
|
+ 流入
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <span class="icon" style="background-color: #6ab581"></span>
|
|
|
+ 流出
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span class="iconLine"></span>
|
|
|
+ 收视率%
|
|
|
+ <div style="float: right; padding: 0 5px 0 0">
|
|
|
+ {{ tof(nowItem.audienceRating, 4) }}%
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <div style="padding: 0 20px">
|
|
|
- 流入排行
|
|
|
- <div>
|
|
|
- <div
|
|
|
- style="font-size: 12px; line-height: 22px"
|
|
|
- v-for="(item, i) in left"
|
|
|
- :key="i"
|
|
|
- v-text="item"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="padding: 5px 20px">
|
|
|
+ 当前时间：{{
|
|
|
+ nowItem.date ? nowItem.date.split(' ')[1] || '' : ''
|
|
|
+ }}
|
|
|
+ <div style="float: right">人数: {{ formateNum(nowItem.uv) }}</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="padding: 0 20px">
|
|
|
+ 流入排行
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="font-size: 12px; line-height: 22px"
|
|
|
+ v-for="(item, i) in left"
|
|
|
+ :key="i"
|
|
|
+ v-text="item"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div style="padding: 0 20px">
|
|
|
- 流出排行
|
|
|
- <div>
|
|
|
- <div
|
|
|
- style="font-size: 12px; line-height: 22px"
|
|
|
- v-for="(item, i) in right"
|
|
|
- :key="i"
|
|
|
- v-text="item"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="padding: 0 20px">
|
|
|
+ 流出排行
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="font-size: 12px; line-height: 22px"
|
|
|
+ v-for="(item, i) in right"
|
|
|
+ :key="i"
|
|
|
+ v-text="item"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </el-card>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -122,8 +118,13 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.list = [
|
|
|
- {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ if (!this.load) this.load = ElLoading.default.service();
|
|
|
+ let item = {
|
|
|
channelId: 1,
|
|
|
channelName: '陕西卫视',
|
|
|
videoUrl: '/video/20230814/1.mp4',
|
|
|
@@ -132,15 +133,7 @@ export default {
|
|
|
dt: '2023-08-14',
|
|
|
channelStatus: 0,
|
|
|
isDefault: 1,
|
|
|
- },
|
|
|
- ];
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- methods: {
|
|
|
- getData() {
|
|
|
- if (!this.load) this.load = ElLoading.default.service();
|
|
|
- let item = this.list[0];
|
|
|
+ };
|
|
|
this.videoUrl = config.base.Intranet + '/minio' + item.videoUrl;
|
|
|
defaultAjax({
|
|
|
url: item.dataUrl,
|
liyongli