YouKeChuanMei_VUE/src/views/mediaTool/pptAnalysisIndex.vue

<template>
    <div class="app-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>{{ formTitle }}</span>
                    <el-icon style="float: right;cursor: pointer;" @click="handleClose">
                        <Close />
                    </el-icon>
                </div>
            </template>
            <div class="tool-content">
                <el-row :gutter="20" style="margin: 0  -10px 30px -10px;">
                    <el-col :span="12">
                        <div class="toolItemTitle mb20">上传文件</div>
                        <el-upload class="my-upload-demo" drag action="#" :http-request="requestDocUpload"
                            :file-list="docUploadList" :before-upload="beforeDocUpload" :on-remove="removeDocUpload">
                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                            <div class="el-upload__text">
                                <span class="upload_tip">将文件拖曳至此区域，或</span> <em>点击上传</em>
                            </div>
                            <div class="el-upload__text">
                                支持扩展名：.pptx
                            </div>
                        </el-upload>
                    </el-col>
                    <el-col :span="12">
                        <div class="toolItemTitle mb20">使用统计</div>
                        <el-form ref="detailFormRef" :model="detailForm" label-width="160px" class="myUsingDetail">
                            <div class="splineBar" />
                            <el-form-item label="处理PPT文件数">
                                {{ detailForm.analysis_statistics.unique_tools }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="提取图片总数">
                                {{ detailForm.analysis_statistics.total_images }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="生成报告总数">
                                {{ detailForm.task_statistics.completed_tasks }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="生成失败报告数量">
                                {{ detailForm.task_statistics.failed_tasks }}
                            </el-form-item>
                            <div class="splineBar" /> 
                            <el-form-item label="Adobe图片数量">
                                {{ detailForm.analysis_statistics.adobe_images }}
                            </el-form-item>
                            <div class="splineBar" />
                        </el-form>
                    </el-col>
                </el-row>
                <div class="toolItemTitle mb20">
                    任务记录
                    <el-icon class="refreshIcon" @click="getTaskRecordPageList">
                        <Refresh />
                    </el-icon>
                </div>
                <el-table v-loading="loading" :data="taskList" height="calc(100% - 422px)">
                    <el-table-column label="序号" align="center" width="80">
                        <template #default="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="文件名称" align="left" prop="file_name" min-width="180"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="任务进度" align="center" prop="progress" min-width="150">
                        <template #default="scope">
                            <el-progress class="myprogress" type="circle"
                                :percentage="scope.row.progress == null ? 0 : scope.row.progress" :width="40"
                                :stroke-width="2" :color="colors" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" align="center" prop="completed_at" width="210">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.completed_at) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" :width="160" align="center">
                        <template #default="scope">
                            <el-button v-if="scope.row.progress == 100" link type="primary"
                                @click="handleResultOption(scope.row)">
                                导出结果
                            </el-button>
                            <el-button link type="primary" @click="handleDeleteTask(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.per_page"
                    @pagination="getTaskRecordPageList" />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { onMounted, nextTick, defineEmits, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { uploadPPTAnalysisFile, pptAnalysisTaskPageList, pptAnalysisStatistics, deletePPTAnalysisTask, exportPPTAnalysisReport } from "@/api/pptAnalysis"


const { proxy } = getCurrentInstance()
const emit = defineEmits(['handleGoBack']);
const baseUrl = import.meta.env.VITE_APP_BASE_API
const formTitle = ref('')
const detailForm = ref({
    analysis_statistics: {},
    task_statistics: {}
})

// 上传文件列表
const docUploadList = ref([])
// 进度条颜色设置
const colors = [
    { color: '#EDEDED', percentage: 0 },
    { color: '#FFC63D', percentage: 99 },
    { color: '#ADE8BD', percentage: 100 },
]
// 任务列表
const taskList = ref([])
const total = ref(0)
const loading = ref(false)
const data = reactive({
    queryParams: {
        page: 1,
        per_page: 10
    }
})
const { queryParams } = toRefs(data)

// 自定义上传经纬度文件
const requestDocUpload = (options) => {
    const { file } = options
    var formData = new FormData();
    formData.append('file', file);
    proxy.$modal.loading('正在上传文件，请耐心等待...')
    uploadPPTAnalysisFile(formData).then(res => {
        proxy.$modal.msgSuccess("上传成功")
        proxy.$modal.closeLoading()
        docUploadList.value = []
        getTaskRecordPageList()
    }).catch(res => {
        proxy.$modal.msgError(res.msg);
        proxy.$modal.closeLoading()
    })
}
//自定义上传文件资料校验
const beforeDocUpload = (file) => {
    const type = [
        'application/vnd.openxmlformats-officedocument.presentationml.presentation'
    ];
    const isXlsx = type.includes(file.type);
    // 检验文件格式
    if (!isXlsx) {
        proxy.$modal.msgError("文件格式错误，请上传.pptx后缀的文件。");
        return false;
    }
}
// 移除已上传文件列表
const removeDocUpload = (file, fileList) => {
    docUploadList.value = docUploadList.value.filter(
        item => item.name != file.name
    );
}

// 删除任务
const handleDeleteTask = (row) => {
    proxy.$modal.confirm('是否确认该任务？').then(function () {
        return deletePPTAnalysisTask(row.task_id)
    }).then(() => {
        getTaskRecordPageList()
        proxy.$modal.msgSuccess("删除成功")
    }).catch(() => { })
}
// 结果操作
const handleResultOption = (row) => {
    if (row.progress == 0) {
        return
    }
    exportPPTAnalysisReport(row.task_id).then(res => {
        const downLoadName = 'PPT分析结果_' + getCurrentTime() + '.xlsx'
        // 通过a标签打开新页面下载文件
        const a = document.createElement('a')
        a.href = URL.createObjectURL(res)
        // a标签里有download属性可以自定义文件名
        a.setAttribute('download', downLoadName)
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    })
}
const getCurrentTime = () => {
    //获取当前时间并打印 
    var getTime = new Date().getTime(); //获取到当前时间戳
    var time = new Date(getTime); //创建一个日期对象
    var year = time.getFullYear(); // 年
    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
    var date = time.getDate().toString().padStart(2, '0'); // 日
    var hour = time.getHours().toString().padStart(2, '0'); // 时
    var minute = time.getMinutes().toString().padStart(2, '0'); // 分
    var second = time.getSeconds().toString().padStart(2, '0'); // 秒 
    var gettime = year + month + date + hour + minute + second
    return gettime
}
// 获取使用统计
const getStatistics = () => {
    pptAnalysisStatistics().then(res => { 
        detailForm.value = res
    })

}
// 获取分析任务列表
const getTaskRecordPageList = () => {
    loading.value = true
    pptAnalysisTaskPageList(queryParams.value).then(res => { 
        taskList.value = res.tasks
        total.value = res.pagination.total
        loading.value = false
    })
}
// 关闭
const handleClose = () => {
    emit('handleGoBack')
}

// 初始化
const initTool = () => {
    formTitle.value = 'PPT分析工具'
    getStatistics()
    getTaskRecordPageList()
}
// 暴露方法\属性给父组件
defineExpose({
    initTool
});
</script>
<style lang="scss">
.tool-content {
    width: 100%;
    padding: 30px 20% 10px;
    height: calc(100vh - 180px);
    overflow-y: auto;
}

.toolItemTitle {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    font-size: 22px;
    text-align: left;
    color: #1E1E1E;
    padding-left: 20px;
}

.toolItemTitle::before {
    content: "■";
    position: absolute;
    left: 0px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    color: #ffc63d;
}

.my-upload-demo .el-upload-dragger {
    background: #0090ff05;
    border: 1px dashed #1A75E6;
    border-radius: 6px;
}

.my-upload-demo .upload_tip {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
}

.my-upload-demo em {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #1A75E6;
}

.my-upload-demo .el-upload__text {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #8C8C8C;
}

.myprogress .el-progress__text {
    min-width: 40px !important;
}

.myprogress .el-progress__text span {
    font-family: Arial;
    font-weight: 700;
    font-size: 14px;
    color: #8F8F8F;
}


.mybadge1 .el-badge__content.is-dot {
    width: 6px;
    height: 6px;
    background-color: #126601;
    margin-right: 10px;
}

.myMedioStatus1 {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #126601;
}

.mybadge2 .el-badge__content.is-dot {
    width: 6px;
    height: 6px;
    background-color: #E12500;
    margin-right: 10px;
}

.myMedioStatus2 {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #E12500;
}

// 分割线
.splineBar {
    width: 100%;
    height: 1px;
    background: #D9DFE5;
}
</style>