对接经纬度转换和ppt分析

src/api/geoConvert.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 获取经纬度转换任务分页列表
+export function mediaPageList(query) {
+  return request({
+    url: '/admin/busGeoConvert/getBusGeoConvertPage',
+    method: 'post',
+    data: query
+  })
+}
+
+// 添加经纬度转换任务
+export function addBusGeoConvert(query) {
+  return request({
+    url: '/admin/busGeoConvert/addBusGeoConvert',
+    method: 'post',
+    data: query
+  })
+}
+
+// 删除经纬度转换任务
+export function deleteBusGeoConvertTask(taskId) {
+  return request({
+    url: '/admin/busGeoConvert/deleteBusGeoConvert/' + taskId,
+    method: 'post'
+  })
+}
+
+// 开始执行经纬度转换任务
+export function startBusGeoConvert(query) {
+  return request({
+    url: '/admin/busGeoConvert/start',
+    method: 'post',
+    data: query
+  })
+}
+
+// 导出经纬度转换结果
+export function exportBusGeoConvert(query) {
+  return request({
+    url: '/admin/busGeoConvert/export/' + query.id,
+    method: 'post',
+    responseType: 'blob'
+  })
+}

src/api/pptAnalysis.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+// 上传PPT分析文件
+export function uploadPPTAnalysisFile(query) {
+    return request({
+        url: '/upload',
+        method: 'post',
+        data: query,
+        timeout: 300000, // 300秒 = 5分钟，根据文件大小调整
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        }
+    })
+}
+
+// 获取PPT分析任务分页列表
+export function pptAnalysisTaskPageList(query) {
+    return request({
+        url: '/tasks',
+        method: 'get',
+        params: query
+    })
+}
+
+// 获取PPT分析统计
+export function pptAnalysisStatistics(query) {
+    return request({
+        url: '/statistics',
+        method: 'get',
+        params: query
+    })
+}
+
+// 删除PPT分析任务
+export function deletePPTAnalysisTask(taskId) {
+    return request({
+        url: '/tasks/' + taskId,
+        method: 'DELETE'
+    })
+}
+
+// 导出PPT分析报告
+export function exportPPTAnalysisReport(taskId) {
+    return request({
+        url: '/export/' + taskId,
+        method: 'get',
+        responseType: 'blob'
+    })
+}

src/assets/styles/ruoyi.scss

@@ -1297,12 +1297,14 @@ h6 {
   padding-bottom: 0px;
 }
 
+.myUsingDetail .el-form-item--default,
 .myMediaDetailForm .el-form-item--default,
 .mySmailDetailForm .el-form-item--default,
 .myDetailForm .el-form-item--default {
   margin-bottom: 0px;
 }
 
+.myUsingDetail .el-form--inline .el-form-item,
 .myMediaDetailForm .el-form--inline .el-form-item,
 .mySmailDetailForm .el-form--inline .el-form-item,
 .myDetailForm .el-form--inline .el-form-item {
@@ -1311,7 +1313,6 @@ h6 {
   vertical-align: middle;
 }
  
-.mySmailDetailForm .el-form-item__content,
 .myDetailForm .el-form-item__content {
   font-family: Microsoft YaHei;
   font-weight: 400;
@@ -1366,6 +1367,24 @@ h6 {
   /* 限制宽度 */
 }
 
+.myUsingDetail .el-form-item__content {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #1E1E1E;
+  display: block;
+  line-height: 40px;
+  padding-left: 20px;
+  overflow: hidden;
+  /* 隐藏溢出的内容 */
+  text-overflow: ellipsis;
+  /* 以省略号代替超出部分 */
+  white-space: nowrap;
+  /* 强制在一行内显示，不允许自动换行 */
+  width: 100%;
+  /* 限制宽度 */
+}
+
 // 多行内容显示
 .mySmailDetailForm .moreRowContent .el-form-item__label {
   font-family: Microsoft YaHei;
@@ -1416,6 +1435,18 @@ h6 {
   min-height: 120px;
 }
 
+.myUsingDetail .el-form-item__label {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #002865;
+  justify-content: end;
+  min-height: 40px;
+  line-height: 40px;
+  padding-left: 17px;
+  background: #EDF2F960;
+}
+
 .mySmailDetailForm .el-form-item__label {
   font-family: Microsoft YaHei;
   font-weight: 400;

src/views/index.vue

@@ -59,7 +59,9 @@
         </div>
       </div>
     </div>
-    <mediaTool ref="mediaToolRef" v-if="showTool" @handleGoBack="handleGoBack" />
+    <geoConvertIndex ref="geoConvertIndexRef" v-if="showGeoConvert" @handleGoBack="handleGeoConvertBack" />
+    <pptAnalysisIndex ref="PPTAnalysisIndexRef" v-if="showPPTAnalysis" @handleGoBack="handlePPTAnalysisBack" />
+    <calibrationIndex ref="calibrationIndexRef" v-if="showCalibration" @handleGoBack="handleCalibrationBack" />
   </div>
 </template>
 
@@ -76,10 +78,20 @@ import { useBackgroundStore } from '@/store/modules/background'
 import bigBackgroud from '@/assets/images/bigBackgroud.png'
 const bgStore = useBackgroundStore()
 
+import calibrationIndex from './mediaTool/calibrationIndex.vue';
+import pptAnalysisIndex from './mediaTool/pptAnalysisIndex.vue';
+import geoConvertIndex from './mediaTool/geoConvertIndex.vue'; 
 
-import mediaTool from './mediaTool/index.vue'
 const showTool = ref(false)
-const mediaToolRef = ref(null)
+// 校准平台组件
+const showCalibration = ref(false)
+const calibrationIndexRef = ref(null) 
+// ppt分析组件
+const showPPTAnalysis = ref(false)
+const PPTAnalysisIndexRef = ref(null)
+// 经纬度转换组件
+const showGeoConvert = ref(false)
+const geoConvertIndexRef = ref(null)
 
 const router = useRouter()
 // 初始化
@@ -136,29 +148,44 @@ const handleGoOutdoorMediaMap = () => {
 // 打开校准平台
 const handleGoCalibrationPlatform = () => {
   showTool.value = true
+  showCalibration.value = true
   nextTick(() => {
-    mediaToolRef.value.initTool(1)
+    calibrationIndexRef.value.initTool()
   })
 }
 
+// 关闭校准平台回调
+const handleCalibrationBack = () => {
+  showTool.value = false
+  showCalibration.value = false
+}
+
 // 打开PPT分析工具
 const handleGoPPTAnalysisTool = () => {
   showTool.value = true
+  showPPTAnalysis.value = true
   nextTick(() => {
-    mediaToolRef.value.initTool(2)
+    PPTAnalysisIndexRef.value.initTool()
   })
 }
+// 关闭PPT分析回调
+const handlePPTAnalysisBack = () => {
+  showTool.value = false
+  showPPTAnalysis.value = false
+}
 
 // 打开经纬度转换工具
 const handleGoLongitudeConversion = () => {
   showTool.value = true
+  showGeoConvert.value = true
   nextTick(() => {
-    mediaToolRef.value.initTool(3)
+    geoConvertIndexRef.value.initTool()
   })
 }
-// 关闭工具回调
+// 关闭经纬度抓换工具回调
-const handleGoBack = () => {
+const handleGeoConvertBack = () => {
   showTool.value = false
+  showGeoConvert.value = false
 }
 </script>
 <style scoped lang="scss">

src/views/mediaTool/calibrationIndex.vue

@@ -1,3 +1,4 @@
+<!-- 校准平台 -->
 <template>
     <div class="app-container">
         <el-card>
@@ -11,7 +12,7 @@
             </template>
             <div class="tool-content">
                 <el-row :gutter="20" style="margin: 0  -10px 30px -10px;">
-                    <el-col :span="toolType == 2 ? 12 : 24">
+                    <el-col :span="24">
                         <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">
@@ -24,11 +25,13 @@
                             </div>
                         </el-upload>
                     </el-col>
-                    <el-col v-if="toolType == 2" :span="12">
-                        <div class="toolItemTitle mb20">使用统计</div>
-                    </el-col>
                 </el-row>
-                <div class="toolItemTitle mb20">任务记录</div>
+                <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">
@@ -115,26 +118,25 @@
 <script setup>
 import { onMounted, nextTick, defineEmits, ref } from 'vue'
 import { Close } from '@element-plus/icons-vue'
+import { mediaPageList, addBusGeoConvert, deleteBusGeoConvertTask, startBusGeoConvert, exportBusGeoConvert } from "@/api/geoConvert"
+import { uploadFile } from "@/api/common"
 
 
 const { proxy } = getCurrentInstance()
 const emit = defineEmits(['handleGoBack']);
-
+const baseUrl = import.meta.env.VITE_APP_BASE_API
 const formTitle = ref('')
-// 工具类型  1-校准平台，2-PPT分析工具，3-经纬度转换
+
-const toolType = ref(null)
+// 上传文件列表
 const docUploadList = ref([])
+// 进度条颜色设置
 const colors = [
     { color: '#EDEDED', percentage: 0 },
     { color: '#FFC63D', percentage: 99 },
     { color: '#ADE8BD', percentage: 100 },
 ]
-
+// 任务列表
-const taskList = ref([
+const taskList = ref([])
-    { fileName: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX文件', process: 0, optionTime: '2024-09-23 14:36:28' },
-    { fileName: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX文件', process: 30, optionTime: '2024-09-23 14:36:28' },
-    { fileName: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX文件', process: 100, optionTime: '2024-09-23 14:36:28' },
-])
 const total = ref(0)
 const loading = ref(false)
 const data = reactive({
@@ -152,19 +154,29 @@ const getTaskRecordPageList = () => {
 
 }
 
-// 自定义上传文件资料
+// 自定义上传经纬度文件
 const requestDocUpload = (options) => {
     const { file } = options
     var formData = new FormData();
     formData.append('file', file);
-    // importVehicleModelTraining(formData).then(res => {
+    uploadFile(formData).then(res => {
-    //     if (res.code == 200) {
+        if (res.code == 200) {
-    //         proxy.$modal.msgSuccess("导入成功")
+            proxy.$modal.msgSuccess("上传成功")
-
+            docUploadList.value.push({
-    //     } else {
+                name: res.originalFilename,
-    //         proxy.$modal.msgError(res.msg);
+                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) => {
@@ -187,7 +199,7 @@ const removeDocUpload = (file, fileList) => {
 
 // 结果操作
 const handleResultOption = (row) => {
-    if (toolType.value == 1) open.value = true
+    open.value = true
 }
 // 关闭
 const handleClose = () => {
@@ -195,22 +207,8 @@ const handleClose = () => {
 }
 
 // 初始化
-const initTool = (_toolType) => {
+const initTool = () => {
-    toolType.value = _toolType
-    switch (_toolType) {
-        case 1:
      formTitle.value = '校准平台'
-            break;
-        case 2:
-            formTitle.value = 'PPT分析工具'
-            break;
-        case 3:
-            formTitle.value = '经纬度转换'
-            break;
-    }
-    nextTick(() => {
-
-    });
 }
 // 暴露方法\属性给父组件
 defineExpose({

src/views/mediaTool/geoConvertIndex.vue

@@ -0,0 +1,354 @@
+<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="24">
+                        <div class="toolItemTitle mb20">上传文件</div>
+                        <el-upload class="my-upload-demo" drag action="#" :http-request="requestDocUpload" :limit="1"
+                            :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">
+                                支持扩展名：.xlsx
+                            </div>
+                        </el-upload>
+                    </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="importFilePath" min-width="180"
+                        :show-overflow-tooltip="true">
+                        <template #default="scope">
+                            {{ extractFileName(scope.row.importFilePath) }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="任务进度" align="center" prop="progress" min-width="150">
+                        <template #default="scope">
+                            <el-progress class="myprogress" type="circle"
+                                :percentage="parseInt(scope.row.progress.replace('%', ''))" :width="40"
+                                :stroke-width="2" :color="colors" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作时间" align="center" prop="createTime" width="210" />
+                    <el-table-column label="操作" :width="160" align="center">
+                        <template #default="scope">
+                            <el-button v-if="scope.row.progress == '0'" link type="primary"
+                                @click="handleStartTask(scope.row)">开始执行</el-button>
+                            <el-button v-if="scope.row.progress != '0'" 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.pageIndex" v-model:limit="queryParams.pageSize"
+                    @pagination="getTaskRecordPageList" />
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, nextTick, defineEmits, ref } from 'vue'
+import { Close, Refresh } from '@element-plus/icons-vue'
+import { mediaPageList, addBusGeoConvert, deleteBusGeoConvertTask, startBusGeoConvert, exportBusGeoConvert } from "@/api/geoConvert"
+import { uploadFile } from "@/api/common"
+
+
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['handleGoBack']);
+const baseUrl = import.meta.env.VITE_APP_BASE_API
+const formTitle = 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: {
+        pageIndex: 1,
+        pageSize: 10
+    },
+    taskForm: {
+        progress: 0,
+        state: 0,
+        importFilePath: undefined
+    }
+})
+const { queryParams, taskForm } = toRefs(data)
+
+
+// 查询任务记录
+const getTaskRecordPageList = () => {
+    loading.value = true
+    mediaPageList(queryParams.value).then(res => {
+        taskList.value = res.data.list
+        total.value = res.data.total
+        loading.value = false
+    })
+}
+// 依据路径截取文件名
+const extractFileName = (path) => {
+    if (!path) return '';
+    // 处理Windows路径和Unix路径
+    const separators = ['\\', '/'];
+    for (let sep of separators) {
+        if (path.includes(sep)) {
+            return path.split(sep).pop();
+        }
+    }
+    return path; // 如果没有分隔符，返回原路径
+}
+// 自定义上传经纬度文件
+const requestDocUpload = (options) => {
+    const { file } = options
+    var formData = new FormData();
+    formData.append('file', file);
+    uploadFile(formData).then(res => {
+        if (res.code == 200) {
+            proxy.$modal.msgSuccess("上传成功")
+            docUploadList.value.push({
+                name: res.originalFilename,
+                url: baseUrl + res.fileName,
+                suffix: res.suffix
+            })
+            taskForm.value.importFilePath = res.fileName
+            addBusGeoConvertTask()
+        } else {
+            proxy.$modal.msgError(res.msg);
+        }
+    })
+}
+//自定义上传文件资料校验
+const beforeDocUpload = (file) => {
+    const type = [
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    ];
+    const isXlsx = type.includes(file.type);
+    // 检验文件格式
+    if (!isXlsx) {
+        proxy.$modal.msgError("文件格式错误，请上传.xlsx后缀的文件。");
+        return false;
+    }
+}
+// 移除已上传文件列表
+const removeDocUpload = (file, fileList) => {
+    docUploadList.value = docUploadList.value.filter(
+        item => item.name != file.name
+    );
+}
+// 添加任务
+const addBusGeoConvertTask = () => {
+    addBusGeoConvert(taskForm.value).then(res => {
+        if (res.code == 200) {
+            docUploadList.value = []
+            getTaskRecordPageList()
+        }
+        else proxy.$modal.msgError(res.msg)
+    })
+}
+// 开始执行
+const handleStartTask = (row) => {
+    // if (row.state == 1) {
+    //     proxy.$modal.msgSuccess("任务已经开始，请等待...")
+    //     return
+    // }
+    startBusGeoConvert({ id: row.id }).then(res => {
+        if (res.code == 200) {
+            getTaskRecordPageList()
+            proxy.$modal.msgSuccess("操作成功")
+        }
+    })
+}
+
+// 结果操作
+const handleResultOption = (row) => {
+    if (row.progress == '0') {
+
+        return
+    }
+    exportBusGeoConvert({ id: row.id }).then(res => {
+        const downLoadName = '转换结果_' + 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 handleDeleteTask = (row) => {
+    proxy.$modal.confirm('是否确认该任务？').then(function () {
+        return deleteBusGeoConvertTask(row.id)
+    }).then(() => {
+        getTaskRecordPageList()
+        proxy.$modal.msgSuccess("删除成功")
+    }).catch(() => { })
+}
+// 关闭
+const handleClose = () => {
+    emit('handleGoBack')
+}
+
+// 初始化
+const initTool = () => {
+    formTitle.value = '经纬度转换'
+    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;
+}
+
+.refreshIcon {
+    position: absolute;
+    top: 12px;
+    left: 116px;
+    cursor: pointer;
+    color: #467CF6;
+}
+</style>

src/views/mediaTool/pptAnalysisIndex.vue

@@ -0,0 +1,329 @@
+<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>