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="统计周期">
                                {{ detailForm.mediaName }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="周期剩余天数">
                                {{ detailForm.mediaCategoryStr }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="处理PPT文件数">
                                {{ detailForm.displayFormStr }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="提取图片总数">
                                {{ detailForm.mediaSize }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="生成报告总数">
                                {{ detailForm.provinceName }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="汇总报告数量">
                                {{ detailForm.address }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="分项报告数量">
                                {{ detailForm.advantages }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="Adobe图片数量">
                                {{ detailForm.advantages }}
                            </el-form-item>
                            <div class="splineBar" />
                            <el-form-item label="最后更新时间">
                                {{ detailForm.advantages }}
                            </el-form-item>
                            <div class="splineBar" />
                        </el-form>
                    </el-col>
                </el-row>
                <div class="toolItemTitle mb20">任务记录</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="fileName" min-width="180"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="任务进度" align="center" prop="process" min-width="150">
                        <template #default="scope">
                            <el-progress class="myprogress" type="circle" :percentage="scope.row.process" width="40"
                                stroke-width="2" :color="colors" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" align="center" prop="optionTime" width="210" />
                    <el-table-column label="操作" :width="160" align="center">
                        <template #default="scope">
                            <el-button v-if="scope.row.process == 0" link type="primary"
                                v-hasPermi="['system:pptTemplate:edit']">
                                <span v-if="toolType == 1">开始比对</span>
                                <span v-if="toolType == 2">开始分析</span>
                                <span v-if="toolType == 3">开始执行</span>
                            </el-button>
                            <el-button v-if="scope.row.process != 0" link type="primary"
                                @click="handleResultOption(scope.row)" v-hasPermi="['system:pptTemplate:remove']">
                                <span v-if="toolType == 1">比对结果</span>
                                <span v-else>导出结果</span>
                            </el-button>
                            <el-button link type="primary" v-hasPermi="['system:pptTemplate:remove']">
                                删除
                            </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({})

// 上传文件列表
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);
    uploadPPTAnalysisFile(formData).then(res => {
        if (res.code == 200) {
            proxy.$modal.msgSuccess("上传成功")
            docUploadList.value.push({
                name: res.originalFilename,
                url: baseUrl + res.fileName,
                suffix: res.suffix
            })
            // form.value.fileUrl = baseUrl + res.fileName
            // form.value.fileName = res.fileName
            // form.value.newFileName = res.newFileName
            // form.value.originalFileName = res.originalFilename
            // form.value.size = res.size
            // form.value.suffix = res.suffix
        } else {
            proxy.$modal.msgError(res.msg);
        }
    })
}
//自定义上传文件资料校验
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 handleResultOption = (row) => {

}
// 获取使用统计
const getStatistics = () => {
    pptAnalysisStatistics().then(res => {
        console.log('统计信息', res)
    })
}
// 获取分析任务列表
const getTaskRecordPageList = () => {
    loading.value = true
    pptAnalysisTaskPageList(queryParams.value).then(res => {
        console.log('分析任务列表', res)
        // taskList.value = res.data.list
        // total.value = res.data.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>