EXEED_manage/src/views/HomePage/index.vue

<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}}</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}}</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}}</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}}</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}}</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}}</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}}</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}}</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}}</div>
               </div>
           </div>
       </div>
       <div class="middle-charts" style="margin-top: 24px">
           <el-tabs v-model="playNumForm.type" @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 style="padding: 6px">
                <el-button @click="changeDateType(1)" size="default" text>今日</el-button>
                <el-button @click="changeDateType(2)" size="default" text>本周</el-button>
                <el-button @click="changeDateType(3)" size="default" text>本月</el-button>
                <el-button @click="changeDateType(4)" size="default" text>全年</el-button>
                <el-date-picker type="daterange" ></el-date-picker>
            </div>
        </div>
        <div class="chart-content">
            <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-button size="default" text>本周</el-button>
                <el-button size="default" text>本月</el-button>
                <el-button size="default" 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="address" label="地址" width="480"></el-table-column>
               <el-table-column prop="value" label="传播值">
                   <template #default="scope">
                       <span class="transValue-number">{{scope.row.value}}</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,
        });
        const playNumForm = reactive({
            dateCondition: 1,
            beginTime: undefined,
            endTime: undefined,
        })
        const totalData = ref({});
        const tableData = ref([]);
        const { proxy } = getCurrentInstance();
        return {
            form,playNumForm,proxy,
            tableData,totalData
        }
    },
    mounted() {
        this.getTotal();
        this.drawChart();
        this.getRank();
    },
    methods: {
        statusChange() {},
        getTotal() {
            this.proxy.$post("/statistics/data1", {}).then(res => {
                if(res.code == 200) {
                    this.totalData = res.data
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        },
        changeDateType(value) {
            this.playNumForm.dateCondition = value;
            this.drawChart();
        },
        drawChart() {
            let myChart = echarts.init(document.getElementById('chartItem'));
            this.proxy.$post("/statistics/data2", this.playNumForm).then(res => {
                
            }).catch(() => {});
            let option = {
                title: {
                    show: true,
                    text: '播放量趋势'
                },
                xAxis: { data: ['第一季度','第二季度','第三季度','第四季度'] },
                yAxis: { },
                series: [
                    {
                        type: 'bar',
                        data: [10,20,30,40],
                        barWidth: 20,
                        itemStyle: {
                            color: 'rgb(61,147,253)',
                        },
                    }
                ]
            };
            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;
                this.tableData = data.records;
            }).catch(() => {});
        },
        rankStatusChange() {
            this.getRank()
        }
    }
})
</script>

<style lang="less" scoped>
@import './title.less';
</style>