318 lines
11 KiB
Vue
318 lines
11 KiB
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="toolType == 2 ? 12 : 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">
|
|||
|
|
<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-col v-if="toolType == 2" :span="12">
|
|||
|
|
<div class="toolItemTitle mb20">使用统计</div>
|
|||
|
|
</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.pageIndex" v-model:limit="queryParams.pageSize"
|
|||
|
|
@pagination="getTaskRecordPageList" />
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
<!-- 比对结果查看对话框 -->
|
|||
|
|
<el-dialog title="比对结果" v-model="open" width="1450px" class="my_dialog" align-center :destroy-on-close="true"
|
|||
|
|
:close-on-click-modal="false">
|
|||
|
|
<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="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="供应商" align="left" prop="fileName" min-width="180"
|
|||
|
|
:show-overflow-tooltip="true" />
|
|||
|
|
<el-table-column label="城市" align="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="媒体名称" align="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="购买周期" align="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="刊例价" align="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="折扣" align="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="单日覆盖人流量/人次" align="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="SOV" align="center" prop="optionTime" width="100" />
|
|||
|
|
<el-table-column label="比对结果" align="center" prop="optionTime" width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-badge is-dot class="mybadge1"></el-badge>
|
|||
|
|
<el-text class="myMedioStatus1">新增</el-text>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" :width="160" align="center">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-button link type="primary" v-hasPermi="['system:pptTemplate:remove']">
|
|||
|
|
删除
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<el-button class="my-cancel-btn" @click="open = false">取 消</el-button>
|
|||
|
|
<el-button class="my-confirm-btn" type="primary">存为历史报价</el-button>
|
|||
|
|
<el-button class="my-confirm-btn" type="primary">导出Excel</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { onMounted, nextTick, defineEmits, ref } from 'vue'
|
|||
|
|
import { Close } from '@element-plus/icons-vue'
|
|||
|
|
|
|||
|
|
|
|||
|
|
const { proxy } = getCurrentInstance()
|
|||
|
|
const emit = defineEmits(['handleGoBack']);
|
|||
|
|
|
|||
|
|
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([
|
|||
|
|
{ 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({
|
|||
|
|
queryParams: {
|
|||
|
|
pageIndex: 1,
|
|||
|
|
pageSize: 10
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
const { queryParams } = toRefs(data)
|
|||
|
|
|
|||
|
|
const open = ref(false)
|
|||
|
|
|
|||
|
|
// 查询任务记录
|
|||
|
|
const getTaskRecordPageList = () => {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自定义上传文件资料
|
|||
|
|
const requestDocUpload = (options) => {
|
|||
|
|
const { file } = options
|
|||
|
|
var formData = new FormData();
|
|||
|
|
formData.append('file', file);
|
|||
|
|
// importVehicleModelTraining(formData).then(res => {
|
|||
|
|
// if (res.code == 200) {
|
|||
|
|
// proxy.$modal.msgSuccess("导入成功")
|
|||
|
|
|
|||
|
|
// } 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 handleResultOption = (row) => {
|
|||
|
|
if (toolType.value == 1) open.value = true
|
|||
|
|
}
|
|||
|
|
// 关闭
|
|||
|
|
const handleClose = () => {
|
|||
|
|
emit('handleGoBack')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化
|
|||
|
|
const initTool = (_toolType) => {
|
|||
|
|
toolType.value = _toolType
|
|||
|
|
switch (_toolType) {
|
|||
|
|
case 1:
|
|||
|
|
formTitle.value = '校准平台'
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
formTitle.value = 'PPT分析工具'
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
formTitle.value = '经纬度转换'
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
nextTick(() => {
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 暴露方法\属性给父组件
|
|||
|
|
defineExpose({
|
|||
|
|
initTool
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.tool-content {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 30px 420px 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;
|
|||
|
|
}
|
|||
|
|
</style>
|