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">126560</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item">

           </div>
           <div class="grey-line"></div>
           <div class="top-number-item">

           </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">126560</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">
               
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">

           </div>
           <div class="top-number-item-small">

           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">

           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">

           </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 size="default" text>今日</el-button>
                <el-button size="default" text>本周</el-button>
                <el-button size="default" text>本月</el-button>
                <el-button 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.status" @tab-change="statusChange">
                <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"></el-table-column>
               <el-table-column prop="name" label="经销商名称" width="360"></el-table-column>
               <el-table-column prop="address" label="地址" ></el-table-column>
               <el-table-column prop="transValue" label="传播值"></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({
            status: 1,
        });
        const playNumForm = reactive({
            type: 1,
        })
        const tableData = ref([]);
        const { proxy } = getCurrentInstance();
        return {
            form,playNumForm,proxy,
            tableData
        }
    },
    mounted() {
        this.drawChart();
    },
    methods: {
        statusChange() {},
        drawChart() {
            let myChart = echarts.init(document.getElementById('chartItem'));
            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);
        }
    }
})
</script>

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