eta_front/src/views/dataSource_manage/components/StatisticTable.vue

<template>
    <div class="statistic-table-wrap">
        <div>
            <img src="~@/assets/img/data_m/set_icon.png" alt="" style="cursor: pointer;float:right" @click="showSetTableCols=true">
        </div>
        <el-table
            v-loading="tableLoading"
            ref="tableIns"
            :data="tableData"
            border
        >
            <el-table-column
                v-for="col in tableColOpts"
                :key="col.ColumnKey"
                :column-key="col.ColumnKey"
                :label="col.ColumnName"
                :prop="col.ColumnKey"
                align="center"
                :width="getColWidth(col.ColumnKey)"
            >
                <template slot="header" slot-scope="scope">
                    <span>{{col.ColumnName}}</span>
                    <el-tooltip 
                        effect="dark" 
                        placement="top-start"
                    >
                        <i class="el-icon-info" v-if="tipsKeysArr.includes(col.ColumnKey)"></i>
                        <div slot="content" v-html="getTableHeadTips(col.ColumnKey)"></div>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <span 
                        v-if="col.ColumnKey==='UpdateFailedNum'" 
                        style="color:#409EFF;cursor: pointer;"
                        @click="handleShowFail(scope.row)"
                    >{{scope.row.UpdateFailedNum}}</span>
                    <span v-else>{{scope.row[col.ColumnKey]}}</span>
                </template>
            </el-table-column>
            <div slot="empty">
                <tableNoData :text="$t('Confirm.prompt_slogan')"/>
            </div>
        </el-table>
        <el-pagination
          layout="total,prev,pager,next,jumper"
          background
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          :total="total"
          style="float: right;margin-top:20px"
        />
        <!-- 自定义列表 -->
        <SetTableCols v-model="showSetTableCols" :ColumnType="2" @change="handleTableColChange"/>

        <!-- 刷新失败详情 -->
        <GLRefreshFailDetail v-model="showFail" :TerminalCode="TerminalCode" :date="filterState.dateVal"/>
    </div>
</template>

<script>
import {apiDataSource} from '@/api/modules/dataSource'
import SetTableCols from './SetTableCols.vue'
import GLRefreshFailDetail from './GLRefreshFailDetail.vue'
export default {
    components:{SetTableCols,GLRefreshFailDetail},
    data() {
        return {
            tipsKeysArr:['NeedRefreshNum','HasRefreshNum','RefreshSuccessNum','RefreshFailedNum','UpdateFailedNum','UpdateSuccessNum'],
            tableColOpts:[],
            tableData:[],
            pageSize:15,
            page:1,
            total:0,
            filterState:{
                dateVal:this.$moment().format('YYYY-MM-DD')||''
            },

            showSetTableCols:false,
            tableLoading:false,

            showFail:false,
            TerminalCode:''
        }
    },
    created() {
        this.getTableColOpts()
    },
    methods: {
        //获取表格数据
        getTableList(){
            this.tableLoading=true
            apiDataSource.GLStatisticTableList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                CreateTime:this.filterState.dateVal,
            }).then(res=>{
                this.tableLoading=false
                if(res.Ret===200){
                    const arr=res.Data.List||[]
                    this.tableData=arr
                    this.total=res.Data.Paging.Totals
                }
            })
        },

        handleCurrentChange(e){
            this.page=e
            this.getTableList()
        },

        // 筛选项刷新列表
        handleRefreshList(){
            this.page=1
            this.getTableList()
        },

        // 获取表格列配置项
        getTableColOpts(){
            this.tableLoading=true
            this.tableColOpts=[]
            apiDataSource.GLTableColOpts({ColumnType:2}).then(res=>{
                if(res.Ret===200){
                    this.tableColOpts=res.Data.List||[]
                    this.$nextTick(()=>{
                        // this.$refs.tableIns.doLayout()
                        this.tableLoading=false
                    })
                    this.getTableList()
                }
            })
        },

        handleTableColChange(){
            this.getTableColOpts()
        },

        handleShowSetTableCol(){
            this.showSetTableCols=true
        },

        handleShowFail(e){
            this.TerminalCode=e.TerminalCode
            this.showFail=true
        },

        // table说明文案
        getTableHeadTips(key){
            const tipsMap={
                NeedRefreshNum:this.$t('DataReportManage.GlStatisticTable.table_tips07')||'1、今日该终端需定时刷新的指标数量<br>2、今日需刷新指标数=今日已更新指标数+今日更新失败指标数',
                HasRefreshNum:this.$t('DataReportManage.GlStatisticTable.table_tips08')||'1、今日该终端发起刷新任务的指标数量<br>2、今日发起刷新任务指标数=今日已刷新成功指标数+今日刷新失败指标数',
                RefreshSuccessNum:this.$t('DataReportManage.GlStatisticTable.table_tips09')||'今日该终端刷新成功的指标数量',
                RefreshFailedNum:this.$t('DataReportManage.GlStatisticTable.table_tips10')||'今日该终端刷新失败的指标数量',
                UpdateFailedNum:this.$t('DataReportManage.GlStatisticTable.table_tips11')||'今日该终端成功发起刷新任务，但指标数据未变化的指标数量',
                UpdateSuccessNum:this.$t('DataReportManage.GlStatisticTable.table_tips12')||' 今日该终端数据发生变化的指标数量'
            }
            return tipsMap[key]
        },

        // 设置列的宽度
        getColWidth(key){
            const widthMap={
                NeedUpdateNum:'200px',
                HasUpdateNum:'200px',
                UpdateSuccessNum:'200px'
            }

            return widthMap[key]
        }
    },
}
</script>

<style lang="scss" scoped>
.statistic-table-wrap{
    .top-wrap{
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
        .set-icon{
            width: 40px;
            cursor: pointer;
        }
    }
}
</style>