vent-template/src/views/vent/performance/progressLc/common/HistorySp.vue

<template>
    <div class="HistorySp">
        <div class="top-box">
            <div class="box-title">流程审批进度历史</div>
            <div class="box-content">
                <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }"
                    :pagination="pagination"></a-table>
            </div>
        </div>
        <div class="bottom-box">
            <div class="box-title">实时流程图</div>
            <div class="box-content">

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { columns } from '../HistorySp.data'

//数据列表
let dataSource = ref<any[]>([])

//分页参数配置
let pagination = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 总条目数，后端返回
    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
    showSizeChanger: true, // 是否可改变每页显示条数
    pageSizeOptions: ['10', '20', '50',], // 可选的每页显示条数
})

</script>

<style lang="less" scoped>
.HistorySp {
    position: relative;
    width: 100%;
    height: 100%;


    .top-box {
        width: 98%;
        height: 400px;
        margin: 15px auto;
        // background-color: rgba(255, 255, 255, 0.0666666667);
        box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
        border-radius: 2px;
        border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
        padding: 10px;
        box-sizing: border-box;

        .box-content {
            height: calc(100% - 40px);
        }
    }

    .bottom-box {
        width: 98%;
        height: 200px;
        margin: 15px auto;
        // background-color: rgba(255, 255, 255, 0.0666666667);
        box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
        border-radius: 2px;
        border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
        padding: 10px;
        box-sizing: border-box;

        .box-content {
            height: calc(100% - 40px);
            background: url('../../../../../assets/images/test1.png') no-repeat center;
            background-position: 320% 135%;
        }
    }

    .box-title {
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        color: #fff;
    }

}
</style>