611 lines
21 KiB
Python
611 lines
21 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<div style="margin-top:10px">
|
||
<el-date-picker
|
||
v-model="dataValue"
|
||
type="daterange"
|
||
align="right"
|
||
unlink-panels
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:picker-options="pickerOptions"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
:default-time="['00:00:00', '23:59:59']">
|
||
</el-date-picker>
|
||
<el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
|
||
<div style="margin-top:10px"></div>
|
||
</div>
|
||
</el-card>
|
||
<el-card style="margin-top:10px">
|
||
<div id="main" style="width:1000px;height:600px;margin-top: 50px;"></div>
|
||
<div id="userMain" style="width:1000px;height:600px;margin-top: 50px;"></div>
|
||
<div id="orgMain" style="width:1000px;height:600px;margin-top: 50px;"></div>
|
||
</el-card>
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
import FileSaver from "file-saver";
|
||
import XLSX from "xlsx";
|
||
import { groupByCategoryView,groupByUserView,groupByOrgView } from '@/api/video'
|
||
export default{
|
||
data () {
|
||
return {
|
||
cateChart:null,
|
||
userChart:null,
|
||
orgChart:null,
|
||
dataValue:'',
|
||
dataQuery:{
|
||
start_time:'',
|
||
end_time:'',
|
||
limit:500
|
||
},
|
||
pickerOptions: {
|
||
shortcuts: [{
|
||
text: '最近一天',
|
||
onClick(picker) {
|
||
let end = new Date();
|
||
let start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近一周',
|
||
onClick(picker) {
|
||
let end = new Date();
|
||
let start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近一个月',
|
||
onClick(picker) {
|
||
let end = new Date();
|
||
let start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近三个月',
|
||
onClick(picker) {
|
||
let end = new Date();
|
||
let start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}]
|
||
},
|
||
};
|
||
},
|
||
mounted(){
|
||
let dateNow = new Date();
|
||
let yeear = dateNow.getFullYear();
|
||
let month = dateNow.getMonth()+1;
|
||
let day = dateNow.getDate();
|
||
this.dataQuery.start_time=yeear+'-'+month+'-'+'01 00:00:00';
|
||
this.dataQuery.end_time=yeear+'-'+month+'-'+day+' 23:59:59';
|
||
this.dataValue = [this.dataQuery.start_time,this.dataQuery.end_time];
|
||
this.getCategoryView();
|
||
this.getUserView();
|
||
this.getGroupView();
|
||
},
|
||
methods: {
|
||
getCategoryView(){
|
||
groupByCategoryView(this.dataQuery).then(res=>{
|
||
let data = res.data;
|
||
let xAxisOptions = [],data1 = [],data2 = [],data3 = [];
|
||
data.forEach(item=>{
|
||
xAxisOptions.push(item.视频大类);
|
||
data1.push(item.视频数量);
|
||
data2.push(item.观看总次数);
|
||
data3.push(item.观看总人数);
|
||
})
|
||
let chartDom = document.getElementById('main');
|
||
this.cateChart = echarts.init(chartDom);
|
||
let labelOption = {
|
||
show: true,
|
||
position: 'insideBottom',
|
||
distance: 5,
|
||
align: 'left',
|
||
verticalAlign: 'middle',
|
||
rotate: 90,
|
||
formatter: '{c}',
|
||
fontSize: 12,
|
||
rich: {
|
||
name: {}
|
||
}
|
||
};
|
||
let option = {
|
||
title: { text: '视频大类观看统计' },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['视频数量', '观看总次数', '观看总人数']
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: {
|
||
show: true,
|
||
title: '数据视图',
|
||
lang: ['视频大类观看统计', '关闭', '导出Excel'], // 按钮
|
||
contentToOption: function (opts) {
|
||
$('#tableExcel').table2excel({
|
||
exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
|
||
filename: '最大需量', // 文件名称
|
||
name: 'Excel Document Name.xls',
|
||
exclude_img: true,
|
||
exclude_links: true,
|
||
exclude_inputs: true
|
||
})
|
||
},
|
||
optionToContent: function (opt) {
|
||
var axisData = opt.xAxis[0].data //坐标轴
|
||
var series = opt.series //折线图的数据
|
||
console.log(series);
|
||
var tdHeads =
|
||
'<td style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
|
||
var tdBodys = ''
|
||
series.forEach(function (item) {
|
||
tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
|
||
})
|
||
var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
|
||
for (var i = 0, l = axisData.length; i < l; i++) {
|
||
for (var j = 0; j < series.length; j++) {
|
||
if (series[j].data[i] == undefined) {
|
||
tdBodys += `<td>${'-'}</td>`
|
||
} else {
|
||
tdBodys += `<td>${series[j].data[i]}</td>`
|
||
}
|
||
}
|
||
table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
|
||
tdBodys = ''
|
||
}
|
||
table += '</tbody></table>'
|
||
return table
|
||
},
|
||
contentToOption: function (HTMLDomElement, opt) {
|
||
let et = XLSX.utils.table_to_book(
|
||
document.getElementById("table-content")
|
||
); //此处传入table的DOM节点
|
||
let etout = XLSX.write(et, {
|
||
bookType: "xlsx",
|
||
bookSST: true,
|
||
type: "array",
|
||
});
|
||
try {
|
||
FileSaver.saveAs(
|
||
new Blob([etout], {
|
||
type: "application/octet-stream",
|
||
}),
|
||
"统计数据.xlsx"
|
||
); //trade-publish.xlsx 为导出的文件名
|
||
} catch (e) {
|
||
}
|
||
return etout;
|
||
},
|
||
},
|
||
magicType: { show: true, type: ['line', 'stack'] },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: { show: false },
|
||
data: xAxisOptions,
|
||
axisLabel: {
|
||
interval:0,
|
||
rotate:60//角度顺时针计算的
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '视频数量',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '观看总次数',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data2
|
||
},
|
||
{
|
||
name: '观看总人数',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data3
|
||
}
|
||
]
|
||
};
|
||
this.cateChart.setOption(option);
|
||
|
||
})
|
||
},
|
||
getGroupView(){
|
||
groupByOrgView(this.dataQuery).then(res=>{
|
||
debugger;console.log(res.data)
|
||
let data = res.data.reverse();
|
||
let xAxisOptions = [],data1 = [],data2 = [],data3 = [],data4=[];
|
||
data.forEach(item=>{
|
||
xAxisOptions.push(item.单位名称);
|
||
data1.push(item.观看完成视频总数);
|
||
data2.push(item.观看视频总数);
|
||
data3.push(item.观看总次数);
|
||
data4.push(item.观看总时间);
|
||
})
|
||
let chartDom = document.getElementById('orgMain');
|
||
this.orgChart = echarts.init(chartDom);
|
||
let labelOption = {
|
||
show: true,
|
||
position: 'insideBottom',
|
||
distance: 5,
|
||
align: 'left',
|
||
verticalAlign: 'middle',
|
||
rotate: 90,
|
||
formatter: '{c}',
|
||
fontSize: 12,
|
||
rich: {
|
||
name: {}
|
||
}
|
||
};
|
||
let option = {
|
||
title: { text: '单位观看量统计' },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['观看完成视频总数','观看视频总数', '观看总次数', '观看总时间']
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: {
|
||
show: true,
|
||
title: '数据视图',
|
||
lang: ['单位观看量统计', '关闭', '导出Excel'], // 按钮
|
||
contentToOption: function (opts) {
|
||
$('#tableExcel').table2excel({
|
||
exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
|
||
filename: '最大需量', // 文件名称
|
||
name: 'Excel Document Name.xls',
|
||
exclude_img: true,
|
||
exclude_links: true,
|
||
exclude_inputs: true
|
||
})
|
||
},
|
||
optionToContent: function (opt) {
|
||
var axisData = opt.yAxis[0].data //坐标轴
|
||
var series = opt.series //折线图的数据
|
||
console.log(series);
|
||
var tdHeads =
|
||
'<td style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
|
||
var tdBodys = ''
|
||
series.forEach(function (item) {
|
||
tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
|
||
})
|
||
var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
|
||
for (var i = 0, l = axisData.length; i < l; i++) {
|
||
for (var j = 0; j < series.length; j++) {
|
||
if (series[j].data[i] == undefined) {
|
||
tdBodys += `<td>${'-'}</td>`
|
||
} else {
|
||
tdBodys += `<td>${series[j].data[i]}</td>`
|
||
}
|
||
}
|
||
table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
|
||
tdBodys = ''
|
||
}
|
||
table += '</tbody></table>'
|
||
return table
|
||
},
|
||
contentToOption: function (HTMLDomElement, opt) {
|
||
let et = XLSX.utils.table_to_book(
|
||
document.getElementById("table-content")
|
||
); //此处传入table的DOM节点
|
||
let etout = XLSX.write(et, {
|
||
bookType: "xlsx",
|
||
bookSST: true,
|
||
type: "array",
|
||
});
|
||
try {
|
||
FileSaver.saveAs(
|
||
new Blob([etout], {
|
||
type: "application/octet-stream",
|
||
}),
|
||
"统计数据.xlsx"
|
||
); //trade-publish.xlsx 为导出的文件名
|
||
} catch (e) {
|
||
}
|
||
return etout;
|
||
},
|
||
},
|
||
magicType: { show: true, type: [ 'stack'] },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: { show: false },
|
||
data: xAxisOptions,
|
||
// axisLabel: {
|
||
// interval:0,
|
||
// rotate:60//角度顺时针计算的
|
||
// }
|
||
}
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '观看完成视频总数',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '观看视频总数',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data2
|
||
},
|
||
{
|
||
name: '观看总次数',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data3
|
||
}
|
||
,
|
||
{
|
||
name: '观看总时间',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data4
|
||
}
|
||
]
|
||
};
|
||
this.orgChart.setOption(option);
|
||
|
||
})
|
||
},
|
||
getUserView(){
|
||
groupByUserView(this.dataQuery).then(res=>{
|
||
debugger;
|
||
console.log(res.data);
|
||
let data = res.data.reverse();
|
||
let xAxisOptions = [],data1 = [],data2 = [],data3 = [],data4=[];
|
||
data.forEach(item=>{
|
||
xAxisOptions.push(item.姓名);
|
||
data1.push(item.观看完成视频总数);
|
||
data2.push(item.观看视频总数);
|
||
data3.push(item.观看总次数);
|
||
data4.push(item.观看总时间);
|
||
})
|
||
let chartDom = document.getElementById('userMain');
|
||
this.userChart = echarts.init(chartDom);
|
||
let labelOption = {
|
||
show: true,
|
||
position: 'insideBottom',
|
||
distance: 5,
|
||
align: 'left',
|
||
verticalAlign: 'middle',
|
||
rotate: 90,
|
||
formatter: '{c}',
|
||
fontSize: 12,
|
||
rich: {
|
||
name: {}
|
||
}
|
||
};
|
||
let option = {
|
||
title: { text: '个人观看量统计' },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['观看完成视频总数','观看视频总数', '观看总次数', '观看总时间']
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: {
|
||
show: true,
|
||
title: '数据视图',
|
||
lang: ['个人观看量统计', '关闭', '导出Excel'], // 按钮
|
||
contentToOption: function (opts) {
|
||
$('#tableExcel').table2excel({
|
||
exclude: '.noExl', //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
|
||
filename: '最大需量', // 文件名称
|
||
name: 'Excel Document Name.xls',
|
||
exclude_img: true,
|
||
exclude_links: true,
|
||
exclude_inputs: true
|
||
})
|
||
},
|
||
optionToContent: function (opt) {
|
||
var axisData = opt.yAxis[0].data //坐标轴
|
||
var series = opt.series //折线图的数据
|
||
console.log(series);
|
||
var tdHeads =
|
||
'<td style="margin-top:10px; padding: 0 15px">视频大类</td>' //表头
|
||
var tdBodys = ''
|
||
series.forEach(function (item) {
|
||
tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
|
||
})
|
||
var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
|
||
for (var i = 0, l = axisData.length; i < l; i++) {
|
||
for (var j = 0; j < series.length; j++) {
|
||
if (series[j].data[i] == undefined) {
|
||
tdBodys += `<td>${'-'}</td>`
|
||
} else {
|
||
tdBodys += `<td>${series[j].data[i]}</td>`
|
||
}
|
||
}
|
||
table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
|
||
tdBodys = ''
|
||
}
|
||
table += '</tbody></table>'
|
||
return table
|
||
},
|
||
contentToOption: function (HTMLDomElement, opt) {
|
||
let et = XLSX.utils.table_to_book(
|
||
document.getElementById("table-content")
|
||
); //此处传入table的DOM节点
|
||
let etout = XLSX.write(et, {
|
||
bookType: "xlsx",
|
||
bookSST: true,
|
||
type: "array",
|
||
});
|
||
try {
|
||
FileSaver.saveAs(
|
||
new Blob([etout], {
|
||
type: "application/octet-stream",
|
||
}),
|
||
"统计数据.xlsx"
|
||
); //trade-publish.xlsx 为导出的文件名
|
||
} catch (e) {
|
||
}
|
||
return etout;
|
||
},
|
||
},
|
||
magicType: { show: true, type: [ 'stack'] },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
axisTick: { show: false },
|
||
data: xAxisOptions,
|
||
// axisLabel: {
|
||
// interval:0,
|
||
// rotate:60//角度顺时针计算的
|
||
// }
|
||
}
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '观看完成视频总数',
|
||
type: 'bar',
|
||
barGap: 0,
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '观看视频总数',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data2
|
||
},
|
||
{
|
||
name: '观看总次数',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data3
|
||
}
|
||
,
|
||
{
|
||
name: '观看总时间',
|
||
type: 'bar',
|
||
label: labelOption,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: data4
|
||
}
|
||
]
|
||
};
|
||
this.userChart.setOption(option);
|
||
})
|
||
|
||
},
|
||
handleFilter(){
|
||
this.cateChart.resize();
|
||
this.userChart.resize();
|
||
this.orgChart.resize();
|
||
this.dataQuery.start_time = this.dataValue[0];
|
||
this.dataQuery.end_time = this.dataValue[1];
|
||
this.getCategoryView();
|
||
this.getGroupView();
|
||
this.getUserView();
|
||
},
|
||
},
|
||
}
|
||
</script>
|