|
|
<template>
|
|
|
<div class="home-page-content">
|
|
|
<div class="top-number">
|
|
|
<div class="top-number-item">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_renwu_slices/ic_renwu.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 34px">总任务数</span>
|
|
|
</div>
|
|
|
<!-- <div class="top-number-content-tag">
|
|
|
<span class="average" style="padding: 10px">日均</span>
|
|
|
<span class="average-number" style="padding: 10px">15000</span>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.taskNum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line"></div>
|
|
|
<div class="top-number-item">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_sucai_slices/ic_sucai.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 34px">总素材数</span>
|
|
|
</div>
|
|
|
<!-- <div class="top-number-content-tag">
|
|
|
<span class="average" style="padding: 10px">日均</span>
|
|
|
<span class="average-number" style="padding: 10px">15000</span>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.referenceNum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line"></div>
|
|
|
<div class="top-number-item">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_xiansuo_slices/ic_xiansuo.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 34px">总线索数</span>
|
|
|
</div>
|
|
|
<!-- <div class="top-number-content-tag">
|
|
|
<span class="average" style="padding: 10px">日均</span>
|
|
|
<span class="average-number" style="padding: 10px">15000</span>
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.customerActionNoteNum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line-cross"></div>
|
|
|
<div class="top-number">
|
|
|
<div class="top-number-item-small">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_bofang_slices/ic_bofang.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 32px">总播放数</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.playNumSum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line"></div>
|
|
|
<div class="top-number-item-small">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_dianzan_slices/ic_dianzan.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 32px">总点赞数</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.commendNumSum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line"></div>
|
|
|
<div class="top-number-item-small">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_shoucang_slices/ic_shoucang.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 32px">总收藏数</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.collectionNumSum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line"></div>
|
|
|
<div class="top-number-item-small">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_pinglun_slices/ic_pinglun.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 32px">总评论数</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.commentNumSum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line"></div>
|
|
|
<div class="top-number-item-small">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_zhuanfa_slices/ic_zhuanfa.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 32px">总转发数</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.reSendNumSum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="grey-line"></div>
|
|
|
<div class="top-number-item-small">
|
|
|
<div class="top-number-content">
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
<div class="top-number-content-title">
|
|
|
<img src="@/assets/ic_tuijian_slices/ic_tuijian.png" alt="" />
|
|
|
<span style="margin-left: 12px;width: 120px;line-height: 32px">总推荐数</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-number-total">{{totalData.commendNumSum || 0}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="middle-charts" style="margin-top: 24px">
|
|
|
<el-tabs v-model="playNumFormType" @tab-change="statusChange">
|
|
|
<el-tab-pane label="播放" :name="1"></el-tab-pane>
|
|
|
<el-tab-pane label="点赞" :name="2"></el-tab-pane>
|
|
|
<el-tab-pane label="收藏" :name="3"></el-tab-pane>
|
|
|
<el-tab-pane label="评论" :name="4"></el-tab-pane>
|
|
|
<el-tab-pane label="转发" :name="5"></el-tab-pane>
|
|
|
<el-tab-pane label="推荐" :name="6"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div class="middle-tab">
|
|
|
<el-form :inline="true">
|
|
|
<el-form-item label="用户">
|
|
|
<el-select clearable v-model="playNumForm.userId" @change="statusChange">
|
|
|
<el-option v-for="(item) in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="任务">
|
|
|
<el-select clearable v-model="playNumForm.taskId" @change="statusChange">
|
|
|
<el-option v-for="(item) in taskList" :key="item.id" :label="item.title" :value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-radio-group style="margin-left: 12px" @change="changeDateType" v-model="playNumForm.dateCondition" size="default">
|
|
|
<el-radio-button :label="2">本周</el-radio-button>
|
|
|
<el-radio-button :label="3">本月</el-radio-button>
|
|
|
<el-radio-button :label="4">全年</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-date-picker style="margin-left: 12px" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" v-model="selTime" @change="dateRangeChange"></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button @click="toExcel">导出Excel</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-content">
|
|
|
<div class="chart-title">
|
|
|
{{playNumFormType==1?'播放量趋势':playNumFormType==2?'点赞数趋势':playNumFormType==3?'收藏数趋势':playNumFormType==4?'评论数趋势':playNumFormType==5?'转发数趋势':'推荐数趋势'}}
|
|
|
<!-- ({{playNumForm.dateCondition==1?'今日':playNumForm.dateCondition==2?'本周':playNumForm.dateCondition==3?'本月':'全年'}}) -->
|
|
|
</div>
|
|
|
<div class="chart-item" id="chartItem"></div>
|
|
|
</div>
|
|
|
<div class="bottom-table" style="margin-top: 24px">
|
|
|
<el-tabs v-model="form.type" @tab-change="rankStatusChange">
|
|
|
<el-tab-pane label="经销商统计" :name="1"></el-tab-pane>
|
|
|
<el-tab-pane label="员工统计" :name="2"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div style="padding: 6px">
|
|
|
<el-radio-group @change="changeRankDateType" v-model="form.dateCondition" size="default">
|
|
|
<el-radio-button :label="2">本周</el-radio-button>
|
|
|
<el-radio-button :label="3">本月</el-radio-button>
|
|
|
<el-radio-button :label="4">全年</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
<!-- <el-button size="default" @click="changeRankDateType(2)" text>本周</el-button>
|
|
|
<el-button size="default" @click="changeRankDateType(3)" text>本月</el-button>
|
|
|
<el-button size="default" @click="changeRankDateType(4)" text>全年</el-button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-content">
|
|
|
<el-table :data="tableData" size="large" stripe
|
|
|
:header-cell-style="{background: '#FAFAFA'}">
|
|
|
<el-table-column prop="sort" label="排序" width="180">
|
|
|
<template #default="scope">
|
|
|
<img v-if="scope.$index == 0" src="@/assets/ic_diyi_slices/ic_diyi.png" alt="" />
|
|
|
<img v-else-if="scope.$index == 1" src="@/assets/ic_dier_slices/ic_dier.png" alt="" />
|
|
|
<img v-else-if="scope.$index == 2" src="@/assets/ic_disan_slices/ic_disan.png" alt="" />
|
|
|
<span v-else>{{scope.$index+1}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="title" :label="form.type==1?'经销商名称':'员工名称'" width="480"></el-table-column>
|
|
|
<el-table-column prop="subtitle" :label="form.type==1?'地址':'部门'" width="480"></el-table-column>
|
|
|
<el-table-column prop="effectValue" label="传播值">
|
|
|
<template #default="scope">
|
|
|
<span class="transValue-number">{{scope.row.effectValue}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from "echarts";
|
|
|
import {defineComponent, reactive, ref, getCurrentInstance} from 'vue'
|
|
|
export default defineComponent({
|
|
|
name: 'v-home',
|
|
|
setup() {
|
|
|
const form = reactive({
|
|
|
type: 1,
|
|
|
dateCondition: 2
|
|
|
});
|
|
|
const playNumForm = reactive({
|
|
|
taskId: undefined,
|
|
|
userId: undefined,
|
|
|
dateCondition: 2,
|
|
|
beginTime: undefined,
|
|
|
endTime: undefined,
|
|
|
})
|
|
|
const playNumFormType = ref(1);
|
|
|
const totalData = ref({});
|
|
|
const tableData = ref([]);
|
|
|
const selTime = ref([]);
|
|
|
const myChart = ref();
|
|
|
const userList = ref([]);
|
|
|
const taskList = ref([]);
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
return {
|
|
|
form,playNumForm,proxy,playNumFormType,myChart,selTime,
|
|
|
tableData,totalData,userList,taskList
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getApi();
|
|
|
this.getTotal();
|
|
|
this.drawChart();
|
|
|
this.getRank();
|
|
|
},
|
|
|
methods: {
|
|
|
statusChange() {
|
|
|
this.drawChart();
|
|
|
},
|
|
|
getApi() {
|
|
|
let obj = {pageNum: 1, pageSize: 1000}
|
|
|
this.proxy.$post("/task/list", obj).then(res => {
|
|
|
if(res.code == 200) {
|
|
|
const data = res.data.records
|
|
|
this.taskList = data
|
|
|
} else {
|
|
|
this.$message.error(res.msg)
|
|
|
}
|
|
|
}).catch(() => {});
|
|
|
this.proxy.$post("/user/list", obj).then(res => {
|
|
|
if(res.code == 200) {
|
|
|
const data = res.data.records
|
|
|
this.userList = data
|
|
|
} else {
|
|
|
this.$message.error(res.msg)
|
|
|
}
|
|
|
}).catch(() => {});
|
|
|
},
|
|
|
getTotal() {
|
|
|
this.proxy.$post("/statistics/data1", {}).then(res => {
|
|
|
if(res.code == 200) {
|
|
|
this.totalData = res.data
|
|
|
} else {
|
|
|
this.$message.error(res.msg)
|
|
|
}
|
|
|
}).catch(() => {});
|
|
|
},
|
|
|
changeDateType() {
|
|
|
this.selTime = [];
|
|
|
this.playNumForm.beginTime = undefined;
|
|
|
this.playNumForm.endTime = undefined;
|
|
|
this.drawChart();
|
|
|
},
|
|
|
changeRankDateType() {
|
|
|
this.getRank();
|
|
|
},
|
|
|
dateRangeChange(value) {
|
|
|
this.playNumForm.dateCondition = undefined;
|
|
|
this.playNumForm.beginTime = value[0];
|
|
|
this.playNumForm.endTime = value[1];
|
|
|
this.drawChart();
|
|
|
},
|
|
|
drawChart() {
|
|
|
if(this.myChart != null && this.myChart != '' && this.myChart != undefined) {
|
|
|
this.myChart.dispose();
|
|
|
}
|
|
|
this.myChart = echarts.init(document.getElementById('chartItem'));
|
|
|
this.proxy.$post("/statistics/data2", this.playNumForm).then(res => {
|
|
|
let dx = []; let dy = [];
|
|
|
res.data.forEach(ele => {
|
|
|
dx.push(ele.dat);
|
|
|
if(this.playNumFormType == 1) {
|
|
|
dy.push(ele.playNumSum)
|
|
|
} else if(this.playNumFormType == 2) {
|
|
|
dy.push(ele.commendNumSum)
|
|
|
} else if(this.playNumFormType == 3) {
|
|
|
dy.push(ele.collectionNumSum)
|
|
|
} else if(this.playNumFormType == 4) {
|
|
|
dy.push(ele.commentNumSum)
|
|
|
} else if(this.playNumFormType == 5) {
|
|
|
dy.push(ele.reSendNumSum)
|
|
|
} else if(this.playNumFormType == 6) {
|
|
|
dy.push(ele.recommendNumSum)
|
|
|
};
|
|
|
});
|
|
|
this.setOption(dx,dy);
|
|
|
}).catch(() => {});
|
|
|
},
|
|
|
setOption(dx, dy) {
|
|
|
//type数据类型 1播放2点赞3收藏4评论5转发6推荐，date日期类型 1今日2本周3本月4全年
|
|
|
let option = {
|
|
|
xAxis: [{ data: dx }],
|
|
|
yAxis: [{
|
|
|
type: 'value'
|
|
|
}],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: { type: 'shadow' }
|
|
|
},
|
|
|
grid: { containLabel: true },
|
|
|
series: [
|
|
|
{
|
|
|
type: 'bar',
|
|
|
data: dy,
|
|
|
barWidth: 20,
|
|
|
itemStyle: {
|
|
|
color: 'rgb(61,147,253)',
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
textStyle: { fontSize: 12 }
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
this.myChart.setOption(option);
|
|
|
},
|
|
|
getRank() {
|
|
|
let obj = Object.assign({pageNum: 1,pageSize: 10},this.form)
|
|
|
this.proxy.$post("/statistics/data3", obj).then(res => {
|
|
|
let data = res.data.records;
|
|
|
this.tableData = data;
|
|
|
}).catch(() => {});
|
|
|
},
|
|
|
rankStatusChange() {
|
|
|
this.getRank()
|
|
|
},
|
|
|
toExcel() {
|
|
|
let date = new Date()
|
|
|
this.proxy.$download("/statistics/excel2", this.playNumForm, '播放量趋势'+date.toLocaleString()+'.xlsx').then(res => {
|
|
|
console.log(res);
|
|
|
}).catch(() => {});
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@import './title.less';
|
|
|
</style> |
