update code
parent
624b6b1575
commit
0bb7e4401c
|
|
@ -0,0 +1,22 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
const doCompile=(data)=>{
|
||||
return request({
|
||||
url:'/inference/compile',
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
const doDeploy=(data)=>{
|
||||
return request({
|
||||
url:'/inference/deploy',
|
||||
method:'post',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
export default{
|
||||
doCompile,
|
||||
doDeploy
|
||||
}
|
||||
|
|
@ -12,7 +12,17 @@ const userOperationNotice=()=>{
|
|||
method: "get"
|
||||
});
|
||||
}
|
||||
|
||||
//获取用户操作详情
|
||||
const userOperation=(operation_id)=>{
|
||||
return request({
|
||||
url: `/logs/user_operation/${operation_id}`,
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
serverState,
|
||||
userOperationNotice
|
||||
userOperationNotice,
|
||||
userOperation
|
||||
}
|
||||
|
|
@ -1,134 +1,202 @@
|
|||
<template>
|
||||
<el-card style="margin-top:12px" class="simulation-add-add-step31">
|
||||
<template #header>已选择模型</template>
|
||||
<el-row class="model-info">
|
||||
<el-col :span="8">
|
||||
<span>模型名称:</span>
|
||||
<span>{{ modelInfo.model_name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span>模型类型:</span>
|
||||
<span>{{ modelInfo.modl_main_type_name+"/"+modelInfo.modl_sub_type_name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span>互联名称:</span>
|
||||
<span>{{ modelInfo.connection_name }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card style="margin-top:12px;position: relative;" class="simulation-add-add-step32">
|
||||
<template #header>
|
||||
<span>设备选择</span>
|
||||
<el-form ref="queryFormRef" :inline="true"
|
||||
style="flex-grow: 1;text-align: right;position: absolute;top:4px;right:0px;">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery"><i-ep-refresh />刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-card style="margin-top: 12px" class="simulation-add-add-step31">
|
||||
<template #header>已选择模型</template>
|
||||
<el-row class="model-info">
|
||||
<el-col :span="8">
|
||||
<span>模型名称:</span>
|
||||
<span>{{ modelInfo.model_name }}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span>模型类型:</span>
|
||||
<span>{{
|
||||
modelInfo.modl_main_type_name + "/" + modelInfo.modl_sub_type_name
|
||||
}}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<span>互联名称:</span>
|
||||
<span>{{ modelInfo.connection_name }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card style="margin-top: 12px; position: relative" class="simulation-add-add-step32">
|
||||
<template #header>
|
||||
<span>设备选择</span>
|
||||
<el-form ref="queryFormRef" :inline="true" style="
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0px;
|
||||
">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<i-ep-refresh />刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" ref="dataTb" :data="info.tableData" stripe @row-click="doRowClick">
|
||||
<el-table-column width="55">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.checked" :disabled="!scope.row.available" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备名称" align="left" prop="device_name" />
|
||||
<el-table-column label="AI芯片信息" align="left" prop="hardware_chip" />
|
||||
<el-table-column label="已部署模型名称" align="left" prop="deployed_model_name" width="120" />
|
||||
<el-table-column label="已部署模型网络类型" align="left" prop="deployed_model_net_type" />
|
||||
<el-table-column label="部署时间" align="left" prop="deployed_time" width="160" />
|
||||
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160">
|
||||
<template #default="scope">
|
||||
<span class="args-state state-2">{{
|
||||
scope.row.tool_params_name ? scope.row.tool_params_name : "请选择"
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" width="100">
|
||||
<template #default="scope">
|
||||
<span :class="'device-state state-'">{{
|
||||
scope.row.available ? "可用" : "不可用"
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="info.state > 0" class="remark"></div>
|
||||
</el-card>
|
||||
|
||||
<el-table v-loading="loading" ref="dataTb" :data="info.tableData" stripe @row-click="doRowClick">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="设备名称" align="left" prop="device_name" />
|
||||
<el-table-column label="AI芯片信息" align="left" prop="hardware_chip" />
|
||||
<el-table-column label="已部署模型名称" align="left" prop="deployed_model_name" width="120" />
|
||||
|
||||
<el-table-column label="已部署模型网络类型" align="left" prop="deployed_model_net_type" />
|
||||
<el-table-column label="互联名称" align="left" prop="connection_name" width="120" />
|
||||
<el-table-column label="部署时间" align="left" prop="deployed_time" width="160" />
|
||||
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160">
|
||||
<template #default="scope">
|
||||
<span class="args-state state-2">{{ scope.row.tool_params_name ? scope.row.tool_params_name : '请选择'
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" width="100">
|
||||
<template #default="scope">
|
||||
<span :class="'device-state state-'">{{
|
||||
scope.row.available? '可用' : '不可用' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<div style="margin-top:12px;font-size:12px;font-weight: bold;margin-left:8px;">编译结果</div>
|
||||
<el-card style="" class="simulation-add-add-step33">
|
||||
|
||||
</el-card>
|
||||
<div style="margin-top: 12px;font-size: 12px;font-weight: bold;margin-left: 8px;">
|
||||
编译结果
|
||||
</div>
|
||||
<el-card style="" class="simulation-add-add-step33">
|
||||
<div class="scroll log-content">
|
||||
<div v-for="(it, idx) in info.logs" :key="idx" class="log-item" :class="it.type">
|
||||
{{ it.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import taskApi from '@/api/task'
|
||||
let dataTb = ref()
|
||||
import taskApi from "@/api/task";
|
||||
const props = defineProps({
|
||||
modelInfo: {
|
||||
type: Object,
|
||||
require: true,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
let dataTb = ref();
|
||||
|
||||
const loading = ref(false); // 加载状态
|
||||
const doRowClick = (row) => {
|
||||
dataTb.value.toggleRowSelection(row)
|
||||
}
|
||||
const info=reactive({
|
||||
tableData:[]
|
||||
})
|
||||
const doRowClick = (row, a, b) => {
|
||||
if (b.target.classList.contains("el-checkbox__inner")) {
|
||||
return;
|
||||
}
|
||||
if (row.available) {
|
||||
row.checked = !row.checked;
|
||||
}
|
||||
};
|
||||
const info = reactive({
|
||||
tableData: [],
|
||||
state: 0,
|
||||
logs: [],
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
modelInfo: {
|
||||
type: Object,
|
||||
require: true,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
/** 查询 */
|
||||
function handleQuery() {
|
||||
loading.value = true;
|
||||
let m=props.modelInfo;
|
||||
taskApi.availableDevices({
|
||||
connection_id:m.connection_id,
|
||||
model_id:m.model_id
|
||||
}).then(d=>{
|
||||
loading.value=false;
|
||||
info.tableData=(d.data.data.available_device_list||[]).map(it=>{
|
||||
it.id=it.device_id;
|
||||
return it;
|
||||
});
|
||||
loading.value = true;
|
||||
let m = props.modelInfo;
|
||||
taskApi
|
||||
.availableDevices({
|
||||
connection_id: m.connection_id,
|
||||
model_id: m.model_id,
|
||||
})
|
||||
.then((d) => {
|
||||
loading.value = false;
|
||||
info.tableData = (d.data.data.available_device_list || []).map((it) => {
|
||||
it.id = it.device_id;
|
||||
it.checked = false;
|
||||
return it;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const checkForm = () => {
|
||||
let rows = info.dataTb.getSelectionRows();
|
||||
return rows.length == 0 ? null : rows;
|
||||
let rows = info.tableData.filter((d) => d.checked);
|
||||
return rows.length == 0 ? null : rows;
|
||||
};
|
||||
onMounted(()=>{
|
||||
handleQuery();
|
||||
const updateState = (s) => {
|
||||
info.state = s;
|
||||
};
|
||||
const updateLogs = (logs) => {
|
||||
info.logs = logs;
|
||||
};
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
});
|
||||
defineExpose({
|
||||
checkForm
|
||||
})
|
||||
checkForm,
|
||||
updateState,
|
||||
updateLogs,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model-info {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.remark {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #00000033;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
.log-item {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
border-bottom: dotted 1px #ccc;
|
||||
line-height: 24px;
|
||||
|
||||
&.info {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang='scss'>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.simulation-add-add-step32 {
|
||||
.device-state {
|
||||
&.state-1 {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
&.state-2 {
|
||||
color:var(--el-color-success);
|
||||
}
|
||||
.device-state {
|
||||
&.state-1 {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.args-state{
|
||||
&.state-2{
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&.state-2 {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
.result-state{
|
||||
color:var(--el-color-danger);
|
||||
}
|
||||
|
||||
.args-state {
|
||||
&.state-2 {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.result-state {
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,161 +1,269 @@
|
|||
<template>
|
||||
<div class="app-container simulation-add-task">
|
||||
<el-card class="card-step">
|
||||
<el-steps style="width: 900px;max-width: 900px;" :space="200" :active="active" finish-status="success">
|
||||
<el-step title="Step1" :class="active == 0 ? 'active' : ''" description="评估基本信息填写" />
|
||||
<el-step title="Step2" :class="active == 1 ? 'active' : ''" description="选择模型" />
|
||||
<el-step title="Step3" :class="active == 2 ? 'active' : ''" description="选择设备" />
|
||||
<el-step title="Step4" :class="active == 3 ? 'active' : ''" description="评估数据集选择" />
|
||||
</el-steps>
|
||||
</el-card>
|
||||
<div style="margin-bottom:100px;" class="card-content">
|
||||
<addStep1 ref="step1" v-if="active == 1" />
|
||||
<addStep2 ref="step2" v-if="active == 2"/>
|
||||
<addStep3 ref="step3" v-if="active == 3" :modelInfo="modelInfo"/>
|
||||
<addStep4 ref="step4" v-if="active == 4" />
|
||||
</div>
|
||||
<el-card class="card-footer">
|
||||
<el-button type="primary" v-if="active == 3" @click="doCompile">编译部署</el-button>
|
||||
<el-button type="primary" v-if="active == 4" @click="doStart">开始</el-button>
|
||||
<el-button type="primary" v-if="active > 0 && active <= 4" @click="doPrev">上一步</el-button>
|
||||
<el-button @click="doNext" v-if="active < 4">下一步</el-button>
|
||||
</el-card>
|
||||
<div class="app-container simulation-add-task">
|
||||
<el-card class="card-step">
|
||||
<el-steps style="width: 900px;max-width: 900px;" :space="200" :active="active" finish-status="success">
|
||||
<el-step title="Step1" :class="active == 0 ? 'active' : ''" description="评估基本信息填写" />
|
||||
<el-step title="Step2" :class="active == 1 ? 'active' : ''" description="选择模型" />
|
||||
<el-step title="Step3" :class="active == 2 ? 'active' : ''" description="选择设备" />
|
||||
<el-step title="Step4" :class="active == 3 ? 'active' : ''" description="评估数据集选择" />
|
||||
</el-steps>
|
||||
</el-card>
|
||||
<div style="margin-bottom:100px;" class="card-content">
|
||||
<addStep1 ref="step1" v-if="active == 1" />
|
||||
<addStep2 ref="step2" v-if="active == 2" />
|
||||
<addStep3 ref="step3" v-if="active == 3" :modelInfo="modelInfo" />
|
||||
<addStep4 ref="step4" v-if="active == 4" />
|
||||
</div>
|
||||
<el-card class="card-footer">
|
||||
<el-button type="primary" v-if="active == 3 && state == 0" @click="doCompile">编译部署</el-button>
|
||||
<el-button type="primary" v-if="active == 3 && state == 1" loading disabled>编译中...</el-button>
|
||||
<el-button type="primary" v-if="active == 3 && state == 2" loading disabled>部署中...</el-button>
|
||||
<el-button type="primary" v-if="active == 4" @click="doStart">开始</el-button>
|
||||
<el-button type="primary" v-if="active > 0 && active <= 4 && active != 3" @click="doPrev">上一步</el-button>
|
||||
<template v-if="active == 3 && (state == 0 || state == 3)">
|
||||
<el-button type="primary" @click="doPrev">上一步</el-button>
|
||||
</template>
|
||||
<template v-if="active == 3 && state == 3">
|
||||
<el-button @click="doNext">下一步</el-button>
|
||||
</template>
|
||||
<el-button @click="doNext" v-if="active < 3">下一步</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import inferenceApi from '@/api/inference'
|
||||
import logsApi from '@/api/log'
|
||||
import request from 'axios'
|
||||
import addStep1 from './addStep1.vue'
|
||||
import addStep2 from './addStep2.vue'
|
||||
import addStep3 from './addStep3.vue'
|
||||
import addStep4 from './addStep4.vue'
|
||||
const router = useRouter();
|
||||
const active = ref(1)
|
||||
const step1=ref()
|
||||
const step2=ref()
|
||||
const step3=ref()
|
||||
const step4=ref()
|
||||
let taskInfo=reactive({});
|
||||
let modelInfo=reactive({});
|
||||
let devices=reactive([]);
|
||||
let datas=reactive({});
|
||||
const step1 = ref()
|
||||
const step2 = ref()
|
||||
const step3 = ref()
|
||||
const step4 = ref()
|
||||
let modelInfo = reactive({});
|
||||
let state = ref(0);
|
||||
|
||||
let info = reactive({
|
||||
devices: [],
|
||||
taskInfo: null,
|
||||
optIds: [],
|
||||
logs: [],
|
||||
})
|
||||
const doStart = () => {
|
||||
let tmp=step4.value.checkForm();
|
||||
if(tmp){
|
||||
datas=tmp;
|
||||
ElMessage.success("开始执行!");
|
||||
setTimeout(()=>{
|
||||
router.push({ path: "/simulationEvaluation/execution" });
|
||||
},1000);
|
||||
}else{
|
||||
ElMessage.error("请选择数据集!");
|
||||
}
|
||||
let tmp = step4.value.checkForm();
|
||||
if (tmp) {
|
||||
datas = tmp;
|
||||
ElMessage.success("开始执行!");
|
||||
setTimeout(() => {
|
||||
router.push({ path: "/simulationEvaluation/execution" });
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error("请选择数据集!");
|
||||
}
|
||||
}
|
||||
const doCompile = () => {
|
||||
let tmp=step3.value.checkForm();
|
||||
if(tmp){
|
||||
devices=tmp;
|
||||
ElMessage.success("开始编译部署!");
|
||||
}else{
|
||||
ElMessage.error("请选择设备!");
|
||||
}
|
||||
let tmp = step3.value.checkForm();
|
||||
if (tmp) {
|
||||
info.devices = tmp;
|
||||
state.value = 1;
|
||||
step3.value.updateState(state.value);
|
||||
startComplie();//开始编译
|
||||
//ElMessage.success("开始编译部署!");
|
||||
} else {
|
||||
ElMessage.error("请选择设备!");
|
||||
}
|
||||
}
|
||||
//开始编译
|
||||
const startComplie = () => {
|
||||
let ajaxs = info.devices.map(d => {
|
||||
return inferenceApi.doCompile({
|
||||
model_id: modelInfo.model_id,
|
||||
modl_net_type: modelInfo.modl_net_type,
|
||||
tool_params_id: d.tool_params_id,
|
||||
device_id: d.device_id
|
||||
});
|
||||
})
|
||||
addLogs({ msg: "开始编译....", type: "info" })
|
||||
request.all(ajaxs).then(d => {
|
||||
info.optIds = d.map(it => {
|
||||
return {
|
||||
id: it.data.data.operation_id, //op_id
|
||||
state: 0 //状态 1为完成
|
||||
}
|
||||
});
|
||||
doGetComplieLogs();//获取编译日志
|
||||
});
|
||||
|
||||
};
|
||||
const addLogs = msg => {
|
||||
info.logs = [msg, ...info.logs];
|
||||
step3.value.updateLogs(info.logs);
|
||||
}
|
||||
//获取编译日志
|
||||
const doGetComplieLogs = () => {
|
||||
let ajaxs = info.optIds.filter(d => d.state == 0).map(o => {
|
||||
return logsApi.userOperation(o.id);
|
||||
})
|
||||
request.all(ajaxs).then(d => {
|
||||
d.forEach((it, idx) => {
|
||||
let msg = it.data.data;
|
||||
addLogs({ msg: msg.operation_result });
|
||||
info.optIds[idx].state = msg.operation_finished ? 1 : 0;
|
||||
});
|
||||
if (info.optIds.filter(d => d.state == 0).length > 0) {
|
||||
setTimeout(doGetComplieLogs, 2000);
|
||||
} else {
|
||||
doDeploy();
|
||||
}
|
||||
});
|
||||
}
|
||||
const doDeploy = () => {
|
||||
state.value = 2;
|
||||
step3.value.updateState(state.value);
|
||||
addLogs({ msg: "开始部署....", type: 'info' })
|
||||
let ajaxs = info.devices.map(d => {
|
||||
return inferenceApi.doDeploy({
|
||||
model_id: modelInfo.model_id,
|
||||
modl_net_type: modelInfo.modl_net_type,
|
||||
device_id: d.device_id
|
||||
});
|
||||
});
|
||||
request.all(ajaxs).then(d => {
|
||||
info.optIds = d.map(it => {
|
||||
return {
|
||||
id: it.data.data.operation_id, //op_id
|
||||
state: 0 //状态 1为完成
|
||||
}
|
||||
});
|
||||
doGetDeployLogs();//获取编译日志
|
||||
})
|
||||
};
|
||||
|
||||
const doGetDeployLogs = () => {
|
||||
let ajaxs = info.optIds.filter(d => d.state == 0).map(o => {
|
||||
return logsApi.userOperation(o.id);
|
||||
})
|
||||
request.all(ajaxs).then(d => {
|
||||
d.forEach((it, idx) => {
|
||||
let msg = it.data.data;
|
||||
addLogs({ msg: msg.operation_result });
|
||||
info.optIds[idx].state = msg.operation_finished ? 1 : 0;
|
||||
});
|
||||
if (info.optIds.filter(d => d.state == 0).length > 0) {
|
||||
setTimeout(doGetDeployLogs, 2000);
|
||||
} else {
|
||||
addLogs({ msg: "编译部署完成", type: 'success' })
|
||||
state.value = 3;
|
||||
step3.value.updateState(state.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const doPrev = () => {
|
||||
active.value--;
|
||||
active.value--;
|
||||
if (active.value == 3) {
|
||||
state.value = 0;
|
||||
info.logs = [];
|
||||
info.optIds = [];
|
||||
}
|
||||
}
|
||||
const doNext = () => {
|
||||
if(active.value==1){
|
||||
step1.value.checkForm().then(d=>{
|
||||
if(d){
|
||||
taskInfo=step1.value.getFormData();
|
||||
active.value++;
|
||||
}
|
||||
});
|
||||
}else if(active.value==2){
|
||||
let tmp=step2.value.checkForm();
|
||||
if(tmp){
|
||||
modelInfo=tmp;
|
||||
active.value++;
|
||||
}else{
|
||||
ElMessage.error("请选择模型!");
|
||||
}
|
||||
}else if(active.value==3){
|
||||
let tmp=step3.value.checkForm();
|
||||
if(tmp){
|
||||
devices=tmp;
|
||||
active.value++;
|
||||
}else{
|
||||
ElMessage.error("请选择设备!");
|
||||
}
|
||||
}else if(active.value==4){
|
||||
|
||||
}else{
|
||||
if (active.value == 1) {
|
||||
step1.value.checkForm().then(d => {
|
||||
if (d) {
|
||||
info.taskInfo = step1.value.getFormData();
|
||||
active.value++;
|
||||
}
|
||||
});
|
||||
} else if (active.value == 2) {
|
||||
let tmp = step2.value.checkForm();
|
||||
if (tmp) {
|
||||
modelInfo = tmp;
|
||||
state.value = 0;
|
||||
info.logs = [];
|
||||
info.optIds = [];
|
||||
active.value++;
|
||||
} else {
|
||||
ElMessage.error("请选择模型!");
|
||||
}
|
||||
} else if (active.value == 3) {
|
||||
active.value++;
|
||||
} else if (active.value == 4) {
|
||||
|
||||
} else {
|
||||
active.value++;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.simulation-add-task {
|
||||
.card-step {
|
||||
.el-card__body {
|
||||
padding-left: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.card-step {
|
||||
.el-card__body {
|
||||
padding-left: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.el-steps {
|
||||
flex-grow: 1;
|
||||
margin-left: 100px;
|
||||
.el-steps {
|
||||
flex-grow: 1;
|
||||
margin-left: 100px;
|
||||
|
||||
.el-step {
|
||||
&.active {}
|
||||
.el-step {
|
||||
&.active {}
|
||||
|
||||
.el-step__main {
|
||||
position: relative;
|
||||
.el-step__main {
|
||||
position: relative;
|
||||
|
||||
.el-step__title {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
left: -65px;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
left: -65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-step__title {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
left: -65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.el-card__header {
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: fixed;
|
||||
width: calc(100% - 215px);
|
||||
bottom: 0px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
|
||||
.el-pagination {
|
||||
justify-content: end;
|
||||
.el-step__description {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
left: -65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: relative;
|
||||
|
||||
.el-card__header {
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
position: fixed;
|
||||
width: calc(100% - 215px);
|
||||
bottom: 0px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
|
||||
.el-pagination {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue