kuailelunwen_new_houtai/src/views/agent/statisticalDetails.vue

<template>
    <div class="main-content12 expense-wrap">
        <div class="flex-common">
            <el-form>
                <div class="flex-between mb24">
                    <div class=" flex gap12">
                        <b>{{  }}turnitin中文站月详情</b>
                        <div class="flex gap12">
                            <span :class="['ver-anchor-point',]" v-for="item in serviceRanking" :key="item">{{ item }}</span>
                        </div>
                    </div>
                    <GuipSelect label="时间" :options="[{label:'asd',value:'9'}]"></GuipSelect>
                </div>
                <!-- show-summary  -->
                <GuipTable :tableData="monthTotalList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
                    <el-table-column prop="sort" label="排行" min-width="130px" v-if="rankFlag == 1"></el-table-column>
                    <el-table-column prop="date" label="日期" min-width="130px" v-if="detailFlag ==1"></el-table-column>
                    <el-table-column prop="date" label="站点排行" min-width="130px" v-if="totalType == '3' && detailFlag != 1"></el-table-column>
                    <el-table-column prop="date" label="服务排行" min-width="130px" v-if="totalType == '2' && detailFlag != 1"></el-table-column>
                    <el-table-column prop="profit" label="利润" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.profit }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="income" label="收入" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.profit ? scope.row.profit : '-' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="expenditure" label="支出" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.profit ? scope.row.profit : '-' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderVolume" label="单量" min-width="110px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.profit ? scope.row.profit : '-' }}
                            </div>
                        </template>
                    </el-table-column>
                    <!-- 这个可能进行循环渲染 -->
                    <el-table-column prop="profit" label="淘宝收/支/单量" v-if="detailFlag" min-width="160px">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.profit ? scope.row.profit : '-' }}
                            </div>
                        </template>
                    </el-table-column>
                </GuipTable>
            </el-form>
        </div>
    </div>
</template>
<script>
import GuipSelect from '@/components/GuipSelect.vue';
import GuipTable from '@/components/GuipTable.vue';

export default {
    components: {
        GuipTable,
        GuipSelect,
    },
    data() {
        return {
            totalType:'1',
            detailFlag:true,//是否是详情
            rankFlag:false,//是否展示排行
            tableLoading:false,
            monthTotalList:[
            {'sort':1,'profit':20,income:304,expenditure:280,orderVolume:47},
            {'sort':2,'profit':30,income:127,expenditure:89,orderVolume:36},
            ],
            serviceRanking:{
                '1':'利润排行',
                '2':'收入排行',
                '3':'支出排行',
                '4':'检测量排行',
            }
        }
    },
    mounted() {
        const {totalType,detailFlag,rankFlag} = this.$route.query
        this.totalType = totalType;
        this.detailFlag = detailFlag;
        this.rankFlag = rankFlag;
        this.getDetailList()
    },
    methods: {
        getDetailList() {
            console.log('调用了---');
            // this.tableLoading = true
            // try {
            //     const requestParams = {
            //         date:'2025-08',
            //         totalType:this.totalType
            //     }
            //     this.$http('POST', '/agentnew/ajax_get_check_order_list', requestParams).then(response => {
            //         this.tableLoading = false
            //         console.log(response,'====');
            //         // this.$nextTick(() => {
            //         //     if (this.intervalId && response.data.maxid && this.orderListPrevMaxId && response.data.maxid > this.orderListPrevMaxId) {
            //         //         console.log('有新订单了');
            //         //         this.playSound();
            //         //     }
            //         //     this.monthTotalList = response.data.list
            //         // })
            //     }).catch(error => {
            //         console.error(error, 'error')
            //     })
            // } catch (error) {
            //     console.error('数据加载失败:', error)
            // } finally {
            //     this.tableLoading = false
            // }
        },
    }
}

</script>
<style lang="scss" scoped>
.el-form-item{
    margin-bottom: 0 !important;
}
.expense-wrap{

    .ver-anchor-point {
        height: 28px;
        display: flex;
        align-items: center;
        padding: 4px 12px;
        white-space: nowrap;
        transition: all .3s;
        border-radius: 14px;
        background: #FFFFFF;
        box-sizing: border-box;
        border: 1px solid #DFE2E6;
        letter-spacing: 0.08em;
        color: #8A9099;
        cursor: pointer;
    }
    .ver-anchor-point:hover {
        border-color: transparent;
        transition: all .3s;
        color: #006AFF;
        background: #F2F3F5;
    }
    .pagetitle {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.08em;
        color: #1E2226;
        margin-top: 8px;
    }
    .monthTotal-wrap{
        display: grid;
        grid-gap: 12px;
        grid-template-columns: repeat(auto-fit, 287px);
    }

    .loss-tip{
        width: 50px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-radius: 4px;
        background: #FFF1F0;
        box-sizing: border-box;
        border: 1px solid #FFA39E;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        text-align: center;
        letter-spacing: 0.08em;
        color: #FF4D4F;
    }
    .total-item{
        padding: 14px 16px;
        font-size: 12px;
        letter-spacing: 0.03em;
        color: #23242B;
        box-sizing: border-box;
        border-radius: 4px;
        background: #F2F7FF;
        .price{
            text-align: left;
            font-size: 12px;
            font-weight: normal;
            line-height: 15px;
            letter-spacing: 0.08em;
            color: #1E2226;
            margin: 14px 0;
            b{
                font-size: 22px;
                line-height: 20px;
                letter-spacing: normal;
            }
        }
        .total-bottom{
            align-items: flex-start;
        }
    }
    .loss{
        background: #FFF1F0;
        .top-left b{
            color: #FF4D4F;
        }
    }
    .gain{
        background: #EFFFE0;
        .top-left b{
            color: #00C261;
        }
    }
}
</style>