|
@@ -0,0 +1,327 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <a-row :gutter="24" style="margin-bottom: 20px;">
|
|
|
+ <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
|
|
|
+ <a-card class="card-content echarts-card">
|
|
|
+ <div slot="title">
|
|
|
+ 数据总览 更新时间:{{updateAccountEchart||'-'}}
|
|
|
+ </div>
|
|
|
+ <div class="person-content-title" slot="extra">
|
|
|
+
|
|
|
+ <div class="content-title-acount"></div>
|
|
|
+ <div class="content-title-checkout">
|
|
|
+ <span class="title-checkout-time">
|
|
|
+ <a-range-picker v-model="dateEchart" :range="dateRanges" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="accountIndexEchart" ref="accountIndexEchart"
|
|
|
+ style="width: 90%;height: 315px;margin: 0 auto;">
|
|
|
+ <a-empty />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :sm="6" :md="6" :xl="6" class="keep-manage-col">
|
|
|
+ <a-card title="运营个人数据" class="card-content">
|
|
|
+ <div style="width: 100%;height: 315px;">
|
|
|
+ <ul class="group-keep-ul">
|
|
|
+ <li>
|
|
|
+ 今日消耗: <span style="font-weight: bold;">21,233.958</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span style="margin-left:20%;" v-if="personData < 0">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
|
|
|
+ <span style="color: green;">10%</span>
|
|
|
+ </span>
|
|
|
+ <span style="margin-left:20%;" v-else-if="personData>= 0">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
|
|
|
+ <span style="color: red;">10%</span>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 消耗:118,2335.112
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>环比:</span>
|
|
|
+ <span style="margin-left: 10%;" v-if="personData < 0">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
|
|
|
+ <span style="color: green;">10%</span>
|
|
|
+ </span>
|
|
|
+ <span style="margin-left: 10%;" v-else-if="personData>= 0">
|
|
|
+ <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
|
|
|
+ <span style="color: red;">10%</span>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 月消耗:12,520.525
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 月激励:12,520.525
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 月框返:12,520.525
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ 团队内排名:1/86
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col>
|
|
|
+ <a-card title="项目列表" >
|
|
|
+ <div class="person-content-title" slot="extra">
|
|
|
+ <div class="content-title-acount"></div>
|
|
|
+ <div class="content-title-checkout">
|
|
|
+ <span style="margin-right: 20px;">
|
|
|
+ <a-button type="link">
|
|
|
+ 自定义列
|
|
|
+ </a-button>
|
|
|
+ </span>
|
|
|
+ <span style="margin-right: 20px;">
|
|
|
+ <a-range-picker
|
|
|
+ v-model="dateMiddleProject"
|
|
|
+ :ranges="dateRanges"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <a-radio-group v-model="projectAccount" >
|
|
|
+ <a-radio-button value="a">
|
|
|
+ 项目
|
|
|
+ </a-radio-button>
|
|
|
+ <a-radio-button value="b">
|
|
|
+ 账户
|
|
|
+ </a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-table
|
|
|
+ size="middle"
|
|
|
+ :dataSource="echartsDataProject"
|
|
|
+ :columns="columnsProject"
|
|
|
+ bordered
|
|
|
+ id="outTable"
|
|
|
+ :pagination="echartsIpaginationProject"
|
|
|
+ :loading="echartsLoading"
|
|
|
+ ref="accountTable"
|
|
|
+ ></a-table>
|
|
|
+
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ import keepPersonData from '../keep-manage/keep-manage-data.js';
|
|
|
+ import moment from 'moment';
|
|
|
+ // 引入基本模板
|
|
|
+ var echarts = require('echarts');
|
|
|
+ // 引入折线图组件
|
|
|
+ require('echarts/lib/chart/line');
|
|
|
+ // 引入提示框和title组件
|
|
|
+ require('echarts/lib/component/tooltip');
|
|
|
+ require('echarts/lib/component/title');
|
|
|
+ require('echarts/lib/component/graphic');
|
|
|
+ require('echarts/lib/component/toolbox');
|
|
|
+ require('echarts/lib/component/legend');
|
|
|
+ export default{
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ updateAccountEchart:'2021-12-22 8:00:00',
|
|
|
+ dateEchart:[moment(), moment()],
|
|
|
+ dateRanges: keepPersonData.setTimeRange(),
|
|
|
+ personData:0,
|
|
|
+ dateMiddleProject:[moment(), moment()],
|
|
|
+ echartsDataProject:[],
|
|
|
+ echartsLoading: false,
|
|
|
+ projectAccount:'a',
|
|
|
+ echartsIpaginationProject:{
|
|
|
+ current: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
+ },
|
|
|
+ showQuickJumper: true,
|
|
|
+ // showSizeChanger: true,
|
|
|
+ // pageSizeOptions: ['10', '30', '50'],
|
|
|
+ total: 0,
|
|
|
+ onChange: (current, pageSize) => {
|
|
|
+ // 切换分页时的回调,
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
+ this.echartsIpaginationProject.current = current
|
|
|
+ this.echartsIpaginationProject.pageSize = pageSize
|
|
|
+ },
|
|
|
+ },
|
|
|
+ columnsProject:[
|
|
|
+ {
|
|
|
+ title: '项目名称',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '账户数量',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '运营人员',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '花费',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: '',
|
|
|
+ sorter: true,
|
|
|
+ },{
|
|
|
+ title: '花费环比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '花费同比',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '上新素材数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '有效素材数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '爆款素材数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '激活数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '激活单价',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },{
|
|
|
+ title: '行为数',
|
|
|
+ align: "center",
|
|
|
+ dataIndex: ''
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getQueryNewlyData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getQueryNewlyData(){
|
|
|
+ this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
|
|
|
+ },
|
|
|
+ //获取echart的值
|
|
|
+ initEchart(idName, optionName) {
|
|
|
+ let that = this;
|
|
|
+ const chart = this.$refs[idName]
|
|
|
+ // // console.log(res);(chart)
|
|
|
+ if (chart) {
|
|
|
+ console.log(chart);
|
|
|
+ const myChart = echarts.init(document.getElementById(idName))
|
|
|
+ // myChart.showLoading({
|
|
|
+ // text: "图表数据正在努力加载..."
|
|
|
+ // });
|
|
|
+ myChart.clear()
|
|
|
+ myChart.setOption(optionName)
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
+ that.clientWidth = document.documentElement.clientWidth - 224
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //趋势图echarts配置
|
|
|
+ initAccountIndexEchart() {
|
|
|
+ // this.clientWidth = document.documentElement.clientWidth - 224
|
|
|
+ // var myChart = echarts.init(document.getElementById('accountIndexEchart'))
|
|
|
+ let option = {
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['today','yesterday']
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+
|
|
|
+ },
|
|
|
+ // toolbox: {
|
|
|
+ // feature: {
|
|
|
+ // saveAsImage: {}
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'today',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ lineStyle: {
|
|
|
+ color: '#00BFFF',
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ itemStyle:{
|
|
|
+ color:'#00BFFF',
|
|
|
+ borderWidth:2,
|
|
|
+ borderColor:'#00BFFF'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'yesterday',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ lineStyle: {
|
|
|
+ color: '#00FF7F',
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ itemStyle:{
|
|
|
+ color:'#00FF7F',
|
|
|
+ borderWidth:2,
|
|
|
+ borderColor:'#00FF00'
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return option
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "../keep-manage/keep-manage.less";
|
|
|
+ .group-keep-ul li{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+</style>
|