380 lines
19 KiB
Vue
380 lines
19 KiB
Vue
<template>
|
||
<el-card class="box-card" shadow="always">
|
||
<div slot="header" class="clearfix">
|
||
<span>{{ title }}</span>
|
||
<el-button-group style="float: right;">
|
||
<el-button size="mini" type="primary" @click="executionSchedule">执行</el-button>
|
||
<el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
|
||
</el-button-group>
|
||
</div>
|
||
<div class="body-wrapper">
|
||
<el-descriptions title="检测场景" :column="2" border size="medium" >
|
||
<el-descriptions-item :labelStyle="{width: '200px'}">
|
||
<template slot="label">
|
||
检测场景
|
||
</template>
|
||
<div class="app-pts-web-card style-module__grid-item--2nHmp" style="height: 200px; width:40%;margin: 10px;">
|
||
<div class="app-pts-web-card__body">
|
||
<div class="app-pts-web-card__title">
|
||
<div class="app-pts-web-justify-grid">
|
||
<div class="app-pts-web-justify-grid__col app-pts-web-justify-grid__col--left">
|
||
<h3 class="app-pts-web-h3"><span class="" style="color: rgb(0, 0, 0);">简单模式</span></h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="app-pts-web-card__content">
|
||
<div class="app-pts-web-justify-grid">
|
||
<div class="app-pts-web-justify-grid__col app-pts-web-justify-grid__col--left">
|
||
<p class="" style="min-height: 50px; font-size: 12px; line-height: 20px;">使用我们的交互式 UI 组合接入数据源、定义数据模型、创建检测用例、执行检测任务、查看检测结果与报告生成。</p>
|
||
</div>
|
||
<div class="app-pts-web-justify-grid__col app-pts-web-justify-grid__col--right">
|
||
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjMuMzk5djEzLjUxN0gweiIvPjxwYXRoIGlkPSJjIiBkPSJNMCAwaDEwLjYydjYuMTQ1SDB6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZmlsbD0iI0VCRjRGRiIgZD0iTTkyLjQ2MyAzNy4zNTFsLTIwLjk4LTEyLjExMy0xNi42NzcgOS42OTEgMjAuOTggMTIuMTEyek01Ny44OTcgOTMuNDQ0bDI3LjMyIDE1LjkyMyAzMC4yODYtMTcuNzk3LTI3LjMxOC0xNS45MjN6Ii8+PHBhdGggZmlsbD0iI0E3Q0RGRiIgZD0iTTY2LjgyMiA1My4xNzdMMzYuNTM0IDcwLjk3NGw0OC42NDggMjguMzk4IDMwLjI4Ny0xNy43OTZ6Ii8+PHBhdGggZmlsbD0iIzAwNkVGRiIgZD0iTTY2LjgyMiA1My4xNzdsNDguNjQ3IDI4LjQtNC4yNTcgMi41TDYyLjU3OSA1NS42N3oiLz48cGF0aCBkPSJNNjEuODU0IDcwLjgxOWwyOS43ODIgMTcuNDA0IDkuNzQxLTUuNzNMNzEuNTk0IDY1LjA5bC05Ljc0IDUuNzN6bS00LjMwNiAyLjUzM0w4Ny4zMyA5MC43NTZsMi4xNDQtMS4yNjFMNTkuNjkgNzIuMDlsLTIuMTQyIDEuMjZ6bS00LjMwNyAyLjUzMmwyOS43ODMgMTcuNDA0IDIuMTQ0LTEuMjYtMjkuNzgyLTE3LjQwNi0yLjE0NSAxLjI2MnoiIGZpbGw9IiNFQkY0RkYiLz48cGF0aCBkPSJNNjcuNDAzIDU1Ljc3N2MtLjMyOS4xOTMtLjMyOS41MDYuMDAzLjcuMzMxLjE5My44NjguMTkzIDEuMTk3IDAgLjMyOC0uMTk0LjMyNS0uNTA3LS4wMDYtLjdhMS4yMDYgMS4yMDYgMCAwMC0uNTk4LS4xNDVjLS4yMTYgMC0uNDMxLjA0OC0uNTk2LjE0NXptMi40NjYgMS40MzljLS4zMjkuMTkzLS4zMjkuNTA2LjAwMy43LjMzMS4xOTMuODY4LjE5MyAxLjE5NiAwIC4zMjktLjE5NC4zMjYtLjUwNy0uMDA1LS43YTEuMjA3IDEuMjA3IDAgMDAtLjU5OC0uMTQ2Yy0uMjE2IDAtLjQzMS4wNDktLjU5Ni4xNDZ6bTIuNDY2IDEuNDRjLS4zMjkuMTkyLS4zMjkuNTA2LjAwMy43LjMzMS4xOTIuODY4LjE5MiAxLjE5NiAwIC4zMjktLjE5NC4zMjYtLjUwOC0uMDA1LS43YTEuMjA2IDEuMjA2IDAgMDAtLjU5OC0uMTQ1Yy0uMjE2IDAtLjQzMi4wNDgtLjU5Ni4xNDV6IiBmaWxsPSIjRkZGIi8+PHBhdGggc3Ryb2tlPSIjMDA2RUZGIiBkPSJNNjguNjY4IDM5LjU5TDM4IDU3LjUyNyA4Ny4yNTkgODYuMTVsMzAuNjY3LTE3LjkzN3pNNjQuMjM3IDQyLjE4MWw0OS4wMDEgMjguNTQ2Ii8+PHBhdGggZmlsbD0iI0VCRjRGRiIgZD0iTTAgNTAuNTcyTDI3Ljk0OSA2Ni41IDQ1LjM1IDU2LjUyIDE3LjQwMSA0MC41OXoiLz48cGF0aCBmaWxsPSIjQTdDREZGIiBkPSJNMTcuNDM1IDQwLjU5bDI3Ljk1IDE1LjkzLTIuNTQ5IDEuNDYtMjcuOTUtMTUuOTI3eiIvPjxwYXRoIGQ9Ik0yNS42NTkgNTEuMzc3YzEuOTQ2IDEuMTA1IDEuOTU0IDIuODkxLjAyMSAzLjk5NS0uODIyLjQ3LTEuODUyLjczLTIuOTAzLjgxMWwuMDExIDEuNTUxSDIxLjU5bC0uMDA5LTEuNTVjLTEuMDUxLS4wODQtMi4wODYtLjM0LTIuOTE0LS44MTItMS45NDYtMS4xMDQtMS45NTYtMi44ODktLjAyNC0zLjk5NCAxLjkzMy0xLjEwNCA1LjA3MS0xLjEwNSA3LjAxNiAwem0tNi4xOTQuNDczYy0xLjQ4Mi44NjEtMS40NzUgMi4yNTIuMDE4IDMuMTE0IDEuNDkzLjg2MiAzLjg5NC44NjIgNS4zNzYgMCAxLjQ4My0uODYyIDEuNDc1LTIuMjUyLS4wMTktMy4xMTQtMS40OTMtLjg2NC0zLjg5MS0uODY0LTUuMzc1IDB6IiBmaWxsPSIjMDA2RUZGIi8+PHBhdGggZmlsbD0iI0VCRjRGRiIgZD0iTTc0LjA3NiAxNy4zMjdsLTMuNTIxIDIuMDQ2LTcuMDkzLTQuMDk2IDMuNTItMi4wNDZ6Ii8+PHBhdGggZmlsbD0iI0E3Q0RGRiIgZD0iTTYyLjc1NyAxNS42ODZsLjcwNC0uNDA5IDcuMDk0IDQuMDk2LS43MDQuNDF6Ii8+PHBhdGggZmlsbD0iI0VCRjRGRiIgZD0iTTY5Ljg1MSAxOS43ODJsLTMuNTI3IDIuMDUtNy4wOTMtNC4wOTYgMy41MjYtMi4wNXoiLz48cGF0aCBmaWxsPSIjQTdDREZGIiBkPSJNNTguNTI3IDE4LjE0NWwuNzA0LS40MDkgNy4wOTMgNC4wOTYtLjcwNC40MXoiLz48cGF0aCBmaWxsPSIjRUJGNEZGIiBkPSJNODAuNDYgMjEuMDEzbC0zLjUyIDIuMDQ2LTUuNjc2LTMuMjc2IDMuNTItMi4wNDZ6Ii8+PHBhdGggZmlsbD0iI0E3Q0RGRiIgZD0iTTcwLjU2IDIwLjE5MWwuNzA0LS40MDkgNS42NzYgMy4yNzYtLjcwNC40MXoiLz48cGF0aCBmaWxsPSIjQTdDREZGIiBkPSJNNzQuNzg1IDE3LjczNmwtMy41MjEgMi4wNDYtLjcwNC40MS0zLjUyNyAyLjA1LS43MDQuNDA4LTMuNTI2IDIuMDUtLjcxLS40MSAzLjUyOC0yLjA0OS43MDQtLjQwOSAzLjUyNi0yLjA1LjcwNS0uNDA5IDMuNTItMi4wNDZ6Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjYuOTgyIDEyKSI+PG1hc2sgaWQ9ImIiIGZpbGw9IiNmZmYiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48L21hc2s+PHBhdGggZmlsbD0iI0E3Q0RGRiIgbWFzaz0idXJsKCNiKSIgZD0iTTIzLjM5OSAxMi4yODZsLTIuMTE5IDEuMjMxLTcuMDk0LTQuMDk1LS43MDgtLjQwOS01LjY3Ni0zLjI3Ny0uNzA5LS40MDlMMCAxLjIzMSAyLjExOSAweiIvPjwvZz48cGF0aCBmaWxsPSIjRUJGNEZGIiBkPSJNNzYuMjM2IDIzLjQ2OGwtMy41MjcgMi4wNS01LjY3Ni0zLjI3NyAzLjUyNy0yLjA1eiIvPjxwYXRoIGZpbGw9IiNBN0NERkYiIGQ9Ik02Ni4zMjkgMjIuNjVsLjcwNC0uNDA5IDUuNjc2IDMuMjc2LS43MDQuNDF6TTc3LjY0OSAyMy40NjhsNy4wOTMgNC4wOTYtLjcwNC40MDktNy4wOTMtNC4wOTZ6Ii8+PHBhdGggZmlsbD0iI0VCRjRGRiIgZD0iTTY2LjMyOSAyMi42NWw1LjY3NiAzLjI3Ni0zLjUyNyAyLjA1LTUuNjc1LTMuMjc3eiIvPjxwYXRoIGZpbGw9IiNBN0NERkYiIGQ9Ik04MS4xNjggMjEuNDIybC0zLjUyIDIuMDQ2LS43MDMuNDA5LTMuNTI3IDIuMDUtLjcwNS40MDktMy41MjUgMi4wNS0uNzEtLjQxIDMuNTI3LTIuMDUuNzA0LS40MDggMy41MjYtMi4wNS43MDUtLjQxIDMuNTItMi4wNDV6Ii8+PHBhdGggZmlsbD0iI0VCRjRGRiIgZD0iTTczLjQxNyAyNS45MjdsMy41MjctMi4wNSA3LjA5MyA0LjA5Ni0zLjUyNiAyLjA1eiIvPjxwYXRoIGZpbGw9IiNBN0NERkYiIGQ9Ik03My40MTcgMjUuOTI3bDcuMDk0IDQuMDk2LS43MDQuNDA5LTcuMDk0LTQuMDk2eiIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDY5LjE4NyAyNi4zMzYpIj48bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYyIvPjwvbWFzaz48cGF0aCBmaWxsPSIjRUJGNEZGIiBtYXNrPSJ1cmwoI2QpIiBkPSJNMCAyLjA1TDMuNTI2IDBsNy4wOTQgNC4wOTYtMy41MjcgMi4wNXoiLz48L2c+PHBhdGggZmlsbD0iI0VCRjRGRiIgZD0iTTgxLjE2OCAyMS40MjJsNy4wOTQgNC4wOTYtMy41MiAyLjA0Ni03LjA5NC00LjA5NnpNNTUgMjAuMTk0di4wMDFsNy4wOTMgNC4wOTUgMy41MjctMi4wNS03LjA5My00LjA5NXoiLz48cGF0aCBkPSJNNzkuODk2IDI5LjVjLTIuMzE4LTEuMzM3LTYuMDYtMS4zMzctOC4zNjIgMC0uMzYuMjEtLjY2Mi40MzgtLjkwOS42ODItMS4zMzQgMS4zMTMtMS4wMiAzLjAzNC45MzYgNC4xNjMgMi4zMTcgMS4zMzggNi4wNiAxLjMzOCA4LjM2MSAwIDEuOTQ0LTEuMTMgMi4yNC0yLjg1Ljg5LTQuMTYzYTQuMTA3IDQuMTA3IDAgMDAtLjQ2Mi0uMzg3IDUuNjQxIDUuNjQxIDAgMDAtLjQ1NC0uMjk0bS02Ljc4OCAxLjUxMmwxLjA0LS42MDUgMS41NzcuOTEgMS41NjctLjkxIDEuMDQ2LjYwNS0xLjU2Ni45MSAxLjU3Ny45MS0xLjA0LjYwNi0xLjU3Ny0uOTEyLTEuNTY3LjkxMi0xLjA0Ny0uNjA1IDEuNTY2LS45MTEtMS41NzYtLjkxIiBmaWxsPSIjMDA2RUZGIi8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTc4LjMzOCAzMS4wMTJsLTEuMDQ2LS42MDQtMS41NjcuOTEtMS41NzYtLjkxLTEuMDQuNjA0IDEuNTc2LjkxLTEuNTY3LjkxMSAxLjA0Ny42MDUgMS41NjctLjkxIDEuNTc2LjkxIDEuMDQxLS42MDUtMS41NzctLjkxeiIvPjwvZz48L3N2Zz4=" style="width: 120px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions >
|
||
<el-descriptions style="margin-top: 20px" title="任务信息" :column="2" :colon="false" border size="medium">
|
||
<el-descriptions-item :labelStyle="{width: '200px'}" :contentStyle="{width: '35%'}">
|
||
<template slot="label">
|
||
任务名称
|
||
</template>
|
||
{{form.jobName}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :labelStyle="{width: '200px'}">
|
||
<template slot="label">
|
||
任务类型
|
||
</template>
|
||
<template v-for="item in ruleItemOptions">
|
||
<span v-if="form.jobType == item.typeId" size="small" type="success">{{ item.typeName }}</span>
|
||
</template>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :labelStyle="{width: '200px'}" :contentStyle="{width: '35%'}">
|
||
<template slot="label">
|
||
cron表达式
|
||
</template>
|
||
{{form.cronExpression}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :labelStyle="{width: '200px'}">
|
||
<template slot="label">
|
||
定时状态
|
||
</template>
|
||
<template v-for="dict in statusOptions">
|
||
<el-tag v-if="form.status == dict.itemText && form.status == '1' " size="small" type="success">{{ selectDictLabel(statusOptions, form.status) }}</el-tag>
|
||
<el-tag v-if="form.status == dict.itemText && form.status != '1' " size="small" type="warning">{{ selectDictLabel(statusOptions, form.status) }}</el-tag>
|
||
</template>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :labelStyle="{width: '200px'}">
|
||
<template slot="label">
|
||
任务概述
|
||
</template>
|
||
{{form.remark}}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions style="margin-top: 20px" title="检测用例" :column="2" border size="medium" >
|
||
<el-descriptions-item :labelStyle="{width: '200px'}">
|
||
<template slot="label">
|
||
检测用例
|
||
</template>
|
||
<template v-for="item in checkCaseOptions">
|
||
<el-tag effect="plain" :key="item.id" style="margin-left: 20px">{{ item.ruleName }}</el-tag>
|
||
</template>
|
||
</el-descriptions-item>
|
||
</el-descriptions >
|
||
<el-descriptions style="margin-top: 20px" title="检测进度" :column="2" border size="medium" >
|
||
<el-descriptions-item :labelStyle="{width: '200px'}">
|
||
<template slot="label">
|
||
检测进度
|
||
</template>
|
||
<div style="height: 300px;">
|
||
<el-steps direction="vertical" v-if="scheduleOptions.showScheduleSteps" :active="scheduleOptions.scheduleActive">
|
||
<el-step title="连接数据源">
|
||
<template slot="description">
|
||
<div v-if="scheduleOptions.showScheduleDataSourceDesc1">正在连接数据源“数据平台”......</div>
|
||
<div v-if="scheduleOptions.showScheduleDataSourceDesc2">数据源连接成功！</div>
|
||
</template>
|
||
</el-step>
|
||
<el-step title="检测执行初始化">
|
||
<template slot="description">
|
||
<div v-if="scheduleOptions.showScheduleInitDesc1">开始进行检测执行初始化......</div>
|
||
<div v-if="scheduleOptions.showScheduleInitDesc2">检测执行前初始化成功！</div>
|
||
</template>
|
||
</el-step>
|
||
<el-step title="开始执行检测">
|
||
<template slot="description">
|
||
<div v-if="scheduleOptions.showScheduleResulteDesc1">开始执行检测......</div>
|
||
<div v-if="scheduleOptions.showScheduleResulteDesc2"><el-progress :percentage="scheduleOptions.percentage"></el-progress></div>
|
||
<div v-if="scheduleOptions.showScheduleResulteDesc3">检测执行成功！可在检测结果管理查看检测结果报告！</div>
|
||
</template>
|
||
</el-step>
|
||
</el-steps>
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions >
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import { updateCheckJob, getScheduleJobById } from '@/api/quality/checkjob'
|
||
import { pageCheckRule } from '@/api/quality/checkrule'
|
||
|
||
export default {
|
||
name: 'CheckJobDetail',
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: function () {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
title: '检测任务详情',
|
||
// 展示切换
|
||
showOptions: {
|
||
data: {},
|
||
showList: true,
|
||
showAdd: false,
|
||
showEdit: false,
|
||
showDetail: false
|
||
},
|
||
scheduleOptions:{
|
||
showScheduleDataSourceDesc1: false,
|
||
showScheduleDataSourceDesc2: false,
|
||
showScheduleInitDesc1: false,
|
||
showScheduleInitDesc2: false,
|
||
showScheduleResulteDesc1: false,
|
||
showScheduleResulteDesc2: false,
|
||
showScheduleResulteDesc3: false,
|
||
showScheduleSteps: false,
|
||
scheduleActive: 0,
|
||
percentage: 0
|
||
},
|
||
scheduleOptionsArr: [
|
||
{id:'showScheduleDataSourceDesc1', time: 1000},
|
||
{id:'showScheduleDataSourceDesc2', time: 2000},
|
||
{id:'showScheduleInitDesc1', time: 3000},
|
||
{id:'showScheduleInitDesc2', time: 4000},
|
||
{id:'showScheduleResulteDesc1', time: 5000},
|
||
{id:'showScheduleResulteDesc2', time: 6000}
|
||
],
|
||
// 保存按钮
|
||
loadingOptions: {
|
||
loading: false,
|
||
loadingText: '保存',
|
||
isDisabled: false
|
||
},
|
||
// 表单参数
|
||
form: {},
|
||
// 表单校验
|
||
rules: {
|
||
jobName: [
|
||
{ required: true, message: '任务名称不能为空', trigger: 'blur' }
|
||
],
|
||
jobType: [
|
||
{ required: true, message: '任务类型不能为空', trigger: 'change' }
|
||
],
|
||
cronExpression: [
|
||
{ required: true, message: 'cron表达式不能为空', trigger: 'blur' }
|
||
]
|
||
},
|
||
// 状态数据字典
|
||
statusOptions: [],
|
||
// 规则级别数据字典
|
||
ruleLevelOptions: [],
|
||
// 核查类型数据字典
|
||
ruleItemOptions: [
|
||
{ typeId: 'structure', typeName: '结构符合性' },
|
||
{ typeId: 'content', typeName: '内容符合性' },
|
||
{ typeId: 'relevance', typeName: '关联符合性' }
|
||
],
|
||
checkCaseOptions: [],
|
||
sourceOptions: [],
|
||
tableOptions: [],
|
||
columnOptions: [],
|
||
dictTypeOptions: [],
|
||
relatedColumnOptions: []
|
||
}
|
||
},
|
||
created() {
|
||
this.form.jobType = this.data.jobType
|
||
this.getDicts('sys_job_status').then(response => {
|
||
if (response.success) {
|
||
this.statusOptions = response.data
|
||
}
|
||
})
|
||
this.getCheckRule()
|
||
},
|
||
mounted() {
|
||
this.getCheckJob(this.data.id)
|
||
},
|
||
methods: {
|
||
/** 获取详情 */
|
||
async getCheckJob(id) {
|
||
this.form = await getScheduleJobById(id).then(response => {
|
||
if (response.success) {
|
||
console.log('response==', response)
|
||
return response.data
|
||
}
|
||
})
|
||
},
|
||
showCard() {
|
||
this.$emit('showCard', this.showOptions)
|
||
},
|
||
ruleItemSelectChanged(val) {
|
||
const item = this.ruleItemOptions.find(function (item) {
|
||
return item.typeId === val
|
||
})
|
||
this.form.jobType = item.typeId
|
||
},
|
||
getCheckRule() {
|
||
let ruleType = 'nr'
|
||
if(this.form.jobType == 'structure'){
|
||
ruleType = 'jg'
|
||
} else if(this.form.jobType == 'relevance'){
|
||
ruleType = 'gl'
|
||
}
|
||
let params = {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
projectId: '1111',
|
||
ruleTypeId: '',
|
||
ruleName: '',
|
||
ruleType: ruleType
|
||
}
|
||
this.checkCaseOptions = []
|
||
pageCheckRule(params).then(response => {
|
||
if (response.success) {
|
||
const { data } = response
|
||
this.checkCaseOptions = data.data
|
||
}
|
||
})
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm: function () {
|
||
this.$refs['form'].validate(valid => {
|
||
if (valid) {
|
||
this.loadingOptions.loading = true
|
||
this.loadingOptions.loadingText = '保存中...'
|
||
this.loadingOptions.isDisabled = true
|
||
updateCheckJob(this.form).then(response => {
|
||
if (response.success) {
|
||
this.$message.success('保存成功')
|
||
setTimeout(() => {
|
||
// 2秒后跳转列表页
|
||
this.$emit('showCard', this.showOptions)
|
||
}, 2000)
|
||
} else {
|
||
this.$message.error('保存失败')
|
||
this.loadingOptions.loading = false
|
||
this.loadingOptions.loadingText = '保存'
|
||
this.loadingOptions.isDisabled = false
|
||
}
|
||
}).catch(() => {
|
||
this.loadingOptions.loading = false
|
||
this.loadingOptions.loadingText = '保存'
|
||
this.loadingOptions.isDisabled = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
executionSchedule(){
|
||
this.scheduleOptions.showScheduleSteps = true
|
||
for(let i=0; i<this.scheduleOptionsArr.length; i++){
|
||
if(this.scheduleOptionsArr[i].id == 'showScheduleDataSourceDesc1'){
|
||
setTimeout(() => {
|
||
this.scheduleOptions.showScheduleDataSourceDesc1 = true
|
||
}, this.scheduleOptionsArr[i].time)
|
||
} else if(this.scheduleOptionsArr[i].id == 'showScheduleDataSourceDesc2'){
|
||
setTimeout(() => {
|
||
this.scheduleOptions.showScheduleDataSourceDesc2 = true
|
||
this.scheduleOptions.scheduleActive = 1
|
||
}, this.scheduleOptionsArr[i].time)
|
||
} else if(this.scheduleOptionsArr[i].id == 'showScheduleInitDesc1'){
|
||
setTimeout(() => {
|
||
this.scheduleOptions.showScheduleInitDesc1 = true
|
||
}, this.scheduleOptionsArr[i].time)
|
||
} else if(this.scheduleOptionsArr[i].id == 'showScheduleInitDesc2'){
|
||
setTimeout(() => {
|
||
this.scheduleOptions.showScheduleInitDesc2 = true
|
||
this.scheduleOptions.scheduleActive = 2
|
||
}, this.scheduleOptionsArr[i].time)
|
||
} else if(this.scheduleOptionsArr[i].id == 'showScheduleResulteDesc1'){
|
||
setTimeout(() => {
|
||
this.scheduleOptions.showScheduleResulteDesc1 = true
|
||
}, this.scheduleOptionsArr[i].time)
|
||
} else if(this.scheduleOptionsArr[i].id == 'showScheduleResulteDesc2'){
|
||
setTimeout(() => {
|
||
this.scheduleOptions.showScheduleResulteDesc2 = true
|
||
this.scheduleOptions.scheduleActive = 3
|
||
this.simulateProgress()
|
||
}, this.scheduleOptionsArr[i].time)
|
||
}
|
||
}
|
||
},
|
||
simulateProgress() {
|
||
let intervalId = setInterval(() => {
|
||
let randomValue = Math.floor(Math.random() * 50); // 生成0-1之间的随机数
|
||
this.scheduleOptions.percentage += randomValue; // 每次增加10%的进度
|
||
if (this.scheduleOptions.percentage >= 100) {
|
||
this.scheduleOptions.percentage = 100
|
||
this.scheduleOptions.showScheduleResulteDesc3 = true
|
||
clearInterval(intervalId); // 当进度达到100%时停止定时器
|
||
}
|
||
}, 1000); // 每秒更新一次进度
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.el-card ::v-deep .el-card__body {
|
||
height: calc(100vh - 230px);
|
||
overflow-y: auto;
|
||
}
|
||
.style-module__grid-container--29AQk{
|
||
display: grid;
|
||
grid-template-rows: var(--template-rows);
|
||
grid-template-columns: var(--template-cols);
|
||
grid-gap: var(--gap,0);
|
||
}
|
||
.style-module__grid-item--2nHmp{
|
||
grid-row: span var(--row-span,1);
|
||
grid-column: span var(--col-span,1);
|
||
margin: 0!important;
|
||
}
|
||
.app-pts-web-card{
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 4px 0 rgba(54,58,80,.32);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
box-sizing: border-box;
|
||
border-radius: 0;
|
||
color: rgba(0,0,0,.9);
|
||
}
|
||
.app-pts-web-justify-grid{
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
color: rgba(0,0,0,.9);
|
||
box-sizing: border-box;
|
||
}
|
||
.app-pts-web-card__body{
|
||
font-size: 12px;
|
||
padding: 20px;
|
||
}
|
||
.app-pts-web-card{
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 4px 0 rgba(54,58,80,.32);
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
box-sizing: border-box;
|
||
border-radius: 0;
|
||
color: rgba(0,0,0,.9);
|
||
}
|
||
</style>
|