|
|
@@ -9,7 +9,63 @@
|
|
|
@canplay="videoload"
|
|
|
:src="props.item.video_url"
|
|
|
></video>
|
|
|
- <div ref="chartEle"></div>
|
|
|
+ <div style="position: relative">
|
|
|
+ <div ref="chartEle"></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 10px">
|
|
|
+ <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(jindu.audienceRating, 4) }}%
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="padding: 5px 10px">
|
|
|
+ 当前时间：{{ jindu.date ? jindu.date.split(' ')[1] || '' : '' }}
|
|
|
+ <div style="float: right">人数: {{ formateNum(jindu.uv) }}</div>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="padding: 0 10px">
|
|
|
+ 流入排行
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="font-size: 12px; line-height: 22px"
|
|
|
+ v-for="(item, i) in jindu.lrTop"
|
|
|
+ :key="i"
|
|
|
+ v-text="item"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div style="padding: 0 10px">
|
|
|
+ 流出排行
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ style="font-size: 12px; line-height: 22px"
|
|
|
+ v-for="(item, i) in jindu.lcTop"
|
|
|
+ :key="i"
|
|
|
+ v-text="item"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -17,20 +73,26 @@
|
|
|
// @ is an alias to /src
|
|
|
import { defaultAjax } from '@/api/index';
|
|
|
import { ref, defineProps, onMounted } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
const video = ref(null);
|
|
|
const bg = ref(null);
|
|
|
+const leftNum = ref(100);
|
|
|
const chartEle = ref(null);
|
|
|
const props = defineProps({
|
|
|
item: Object,
|
|
|
});
|
|
|
-import * as echarts from 'echarts';
|
|
|
+const jindu = ref({});
|
|
|
let chart = undefined;
|
|
|
let timeout = undefined;
|
|
|
let isClick = false;
|
|
|
+let list = [];
|
|
|
+let sec = 0,
|
|
|
+ stepNum = 6.8,
|
|
|
+ page = 0;
|
|
|
onMounted(() => {
|
|
|
chart = echarts.init(chartEle.value);
|
|
|
chart.resize({
|
|
|
- height: (bg.value.offsetWidth * 6) / 20,
|
|
|
+ height: 300,
|
|
|
width: bg.value.offsetWidth,
|
|
|
});
|
|
|
|
|
|
@@ -50,17 +112,51 @@ onMounted(() => {
|
|
|
});
|
|
|
});
|
|
|
|
|
|
-props.item.flow_url &&
|
|
|
- defaultAjax({
|
|
|
- url: props.item.flow_url,
|
|
|
- }).then(r => {
|
|
|
- console.log(r);
|
|
|
- draw(r);
|
|
|
- });
|
|
|
+defaultAjax({
|
|
|
+ url: props.item.flow_url,
|
|
|
+}).then(r => {
|
|
|
+ const li = r || {};
|
|
|
+ const Ir = [],
|
|
|
+ Ic = [],
|
|
|
+ ad = [],
|
|
|
+ keys = [];
|
|
|
+
|
|
|
+ for (const key in li) {
|
|
|
+ if (!Object.hasOwnProperty.call(li, key)) continue;
|
|
|
+ const v = li[key];
|
|
|
+ keys.push(key);
|
|
|
+ Ic.push(-1 * v.lc);
|
|
|
+ Ir.push(v.lr);
|
|
|
+ ad.push(v.audienceRating * 100);
|
|
|
+ v.date = key;
|
|
|
+ list.push(v);
|
|
|
+ }
|
|
|
+ draw(keys, Ir, Ic, ad);
|
|
|
+ jindu.value = list[0];
|
|
|
+});
|
|
|
|
|
|
-function timeupdate() {
|
|
|
+function timeupdate(v) {
|
|
|
// 播放中
|
|
|
- // console.log('播放中');
|
|
|
+ if (sec === Math.floor(v.srcElement.currentTime)) return;
|
|
|
+ sec = Math.floor(v.srcElement.currentTime);
|
|
|
+ let width = bg.value.offsetWidth - 100;
|
|
|
+ let item = list[sec] || {};
|
|
|
+ let s = chart.getOption().dataZoom[0].startValue,
|
|
|
+ e = chart.getOption().dataZoom[0].endValue;
|
|
|
+ let iW = width / (e - s),
|
|
|
+ cheng = sec - s < 0 ? 0 : sec - s;
|
|
|
+ let step = iW * cheng > width ? 0 : iW * cheng;
|
|
|
+ if (!item.lrTop) return;
|
|
|
+ jindu.value = item;
|
|
|
+ leftNum.value = 100 + step;
|
|
|
+ if (iW * cheng <= width) return;
|
|
|
+ page++;
|
|
|
+ chart.setOption({
|
|
|
+ dataZoom: {
|
|
|
+ start: stepNum * page,
|
|
|
+ end: stepNum * (page + 1),
|
|
|
+ },
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
function videoerror(err) {
|
|
|
@@ -72,20 +168,30 @@ function videoload() {
|
|
|
console.log('可以播放', video.value);
|
|
|
}
|
|
|
|
|
|
-function draw(r) {
|
|
|
+function formateNum(n) {
|
|
|
+ let num = n;
|
|
|
+ if (isNaN(n)) num = '0';
|
|
|
+ else if (n >= 100000000)
|
|
|
+ num =
|
|
|
+ ((n / 100000000).toFixed(2) - 0 + '').replace(
|
|
|
+ /\B(?=(?:\d{3})+\b)/g,
|
|
|
+ ','
|
|
|
+ ) + '亿';
|
|
|
+ else if (n >= 10000)
|
|
|
+ num =
|
|
|
+ ((n / 10000).toFixed(2) - 0 + '').replace(/\B(?=(?:\d{3})+\b)/g, ',') +
|
|
|
+ '万';
|
|
|
+ else num = (num + '').replace(/\B(?=(?:\d{3})+\b)/g, ',');
|
|
|
+ return num;
|
|
|
+}
|
|
|
+
|
|
|
+function tof(num, t) {
|
|
|
+ return Number(num * 100).toFixed(t || 2);
|
|
|
+}
|
|
|
+
|
|
|
+function draw(key, Ir, Ic, ad) {
|
|
|
// 绘图
|
|
|
- const key = Object.keys(r);
|
|
|
- const value = Object.values(r);
|
|
|
- const Ir = [],
|
|
|
- Ic = [],
|
|
|
- ad = [];
|
|
|
- let stepNum = 6.8,
|
|
|
- page = 0;
|
|
|
- value.map(v => {
|
|
|
- Ic.push(-1 * v.lc);
|
|
|
- Ir.push(v.lr);
|
|
|
- ad.push(v.audienceRating * 100);
|
|
|
- });
|
|
|
+ let stepNum = 6.8;
|
|
|
let option = {
|
|
|
dataZoom: [
|
|
|
{
|
|
|
@@ -182,7 +288,7 @@ function draw(r) {
|
|
|
},
|
|
|
],
|
|
|
grid: {
|
|
|
- left: 50,
|
|
|
+ left: 100,
|
|
|
right: 50,
|
|
|
},
|
|
|
series: [
|
|
|
@@ -242,5 +348,43 @@ function draw(r) {
|
|
|
margin: 0 auto;
|
|
|
display: block;
|
|
|
}
|
|
|
+
|
|
|
+ .lineinfobackground {
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 9px;
|
|
|
+ position: absolute;
|
|
|
+ width: 305px;
|
|
|
+ height: 200px;
|
|
|
+ top: 30px;
|
|
|
+ left: 50px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ transform: translateX(-50%);
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ position: absolute;
|
|
|
+ width: 2px;
|
|
|
+ height: 110%;
|
|
|
+ margin-top: -5%;
|
|
|
+ margin-left: 50%;
|
|
|
+ background-color: #888;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconLine {
|
|
|
+ background-color: #50abfd;
|
|
|
+ display: inline-block;
|
|
|
+ width: 30px;
|
|
|
+ height: 2px;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
liyongli