优化代码
This commit is contained in:
@@ -49,92 +49,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<template v-if="!currentStep || currentStep < 8">
|
<template v-if="!currentStep || currentStep < 8">
|
||||||
<el-popover v-model="setShow" placement="bottom-end" trigger="click" @show="initSet">
|
<div @click="openSetDialog" class="flex_box work_top_set">
|
||||||
<div class="set_box">
|
|
||||||
<div class="set_list">
|
|
||||||
<!-- <div class="flex_box set_item">
|
|
||||||
<div class="set_label">优先级:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-select v-model="setForm.priority" placeholder="请选择">
|
|
||||||
<el-option v-for="item in priorityList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">目标工作站:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-select v-model="setForm.stage" placeholder="请选择">
|
|
||||||
<el-option v-for="item in stageList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">刻录速率:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-select v-model="setForm.speed" placeholder="请选择">
|
|
||||||
<el-option v-for="item in speedList" :key="item.value" :label="item.label" :value="item.value">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">刻录完成后校验光盘:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-switch v-model="setForm.isCheck" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">刻录完成后关闭光盘:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-switch v-model="setForm.isClose" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">刻录完成后删除缓存:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-switch v-model="setForm.isDel" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">作业失败打印标签:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-switch v-model="setForm.isPrint" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">允许跨盘:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-switch v-model="setForm.isArrow" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box set_item">
|
|
||||||
<div class="set_label">是否虚拟刻录:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-switch v-model="setForm.is_sim" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="setForm.isArrow" class="flex_box flex_col_top set_item">
|
|
||||||
<div class="set_label">分盘设置:</div>
|
|
||||||
<div class="set_val">
|
|
||||||
<el-radio-group v-model="setForm.disk">
|
|
||||||
<el-radio :label="item.id" v-for="(item, index) in diskSet" :key="index">
|
|
||||||
<div class="set_disk_name">{{ item.name }}</div>
|
|
||||||
<div class="set_disk_desc">{{ item.desc }}</div>
|
|
||||||
</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box flex_row_center set_btns">
|
|
||||||
<el-button @click="setCancel" class="set_btn1">取消</el-button>
|
|
||||||
<el-button @click="setSure" class="set_btn2" type="primary">确定</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex_box work_top_set" slot="reference">
|
|
||||||
<img src="@/assets/images/Setting_icon.png" />
|
<img src="@/assets/images/Setting_icon.png" />
|
||||||
<div>高级作业设置</div>
|
<div>高级作业设置</div>
|
||||||
</div>
|
</div>
|
||||||
</el-popover>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<el-popover v-if="guideStep" :placement="guideStep[11].placement" width="250" trigger="manual"
|
<el-popover v-if="guideStep" :placement="guideStep[11].placement" width="250" trigger="manual"
|
||||||
@@ -152,7 +70,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div slot="reference" :class="{ 'guide_body': currentStep == 11}">
|
<div slot="reference" :class="{ 'guide_body': currentStep == 11}">
|
||||||
<div class="flex_box work_top_set">
|
<div @click="openSetDialog" class="flex_box work_top_set">
|
||||||
<img src="@/assets/images/Setting_icon.png" />
|
<img src="@/assets/images/Setting_icon.png" />
|
||||||
<div>高级作业设置</div>
|
<div>高级作业设置</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -313,6 +231,95 @@
|
|||||||
<input type="file" accept=".csv" @change="fileLoad2" ref="refFile2" style="display: none" />
|
<input type="file" accept=".csv" @change="fileLoad2" ref="refFile2" style="display: none" />
|
||||||
<input type="file" accept="..zip,.rar" @change="fileLoad3" ref="refFile3" style="display: none" />
|
<input type="file" accept="..zip,.rar" @change="fileLoad3" ref="refFile3" style="display: none" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
<!-- 高级作业设置弹窗 -->
|
||||||
|
<el-dialog title="高级作业设置" :visible.sync="setShow" width="600px" @open="initSet">
|
||||||
|
<div class="set_box">
|
||||||
|
<div class="set_list">
|
||||||
|
<!-- <div class="flex_box set_item">
|
||||||
|
<div class="set_label">优先级:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-select v-model="setForm.priority" placeholder="请选择">
|
||||||
|
<el-option v-for="item in priorityList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">目标工作站:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-select v-model="setForm.stage" placeholder="请选择">
|
||||||
|
<el-option v-for="item in stageList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">刻录速率:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-select v-model="setForm.speed" placeholder="请选择">
|
||||||
|
<el-option v-for="item in speedList" :key="item.value" :label="item.label" :value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">刻录完成后校验光盘:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-switch v-model="setForm.isCheck" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">刻录完成后关闭光盘:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-switch v-model="setForm.isClose" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">刻录完成后删除缓存:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-switch v-model="setForm.isDel" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">作业失败打印标签:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-switch v-model="setForm.isPrint" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">允许跨盘:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-switch v-model="setForm.isArrow" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">是否虚拟刻录:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-switch v-model="setForm.is_sim" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="setForm.isArrow" class="flex_box flex_col_top set_item">
|
||||||
|
<div class="set_label">分盘设置:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-radio-group v-model="setForm.disk">
|
||||||
|
<el-radio :label="item.id" v-for="(item, index) in diskSet" :key="index">
|
||||||
|
<div class="set_disk_name">{{ item.name }}</div>
|
||||||
|
<div class="set_disk_desc">{{ item.desc }}</div>
|
||||||
|
</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box set_item">
|
||||||
|
<div class="set_label">新手引导:</div>
|
||||||
|
<div class="set_val">
|
||||||
|
<el-switch v-model="tempHideStep" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex_box flex_row_center set_btns">
|
||||||
|
<el-button @click="setCancel" class="set_btn1">取消</el-button>
|
||||||
|
<el-button @click="setSure" class="set_btn2" type="primary">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -521,6 +528,7 @@ export default {
|
|||||||
// 新手引导
|
// 新手引导
|
||||||
guideStep: null,
|
guideStep: null,
|
||||||
currentStep: 0,
|
currentStep: 0,
|
||||||
|
tempHideStep: false, // 临时存储新手引导开关状态
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@@ -631,7 +639,7 @@ export default {
|
|||||||
const diskSize = disk.size
|
const diskSize = disk.size
|
||||||
let t = diskSize ? parseFloat(this.$accDiv(this.totalSize, diskSize)) * 100 : 0
|
let t = diskSize ? parseFloat(this.$accDiv(this.totalSize, diskSize)) * 100 : 0
|
||||||
return t > 100 ? 100 : t
|
return t > 100 ? 100 : t
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let workForm = localStorage.getItem('workForm')
|
let workForm = localStorage.getItem('workForm')
|
||||||
@@ -644,9 +652,10 @@ export default {
|
|||||||
this.$store.dispatch('setDatas', { name: 'setForm', data: JSON.parse(setForm) })
|
this.$store.dispatch('setDatas', { name: 'setForm', data: JSON.parse(setForm) })
|
||||||
}
|
}
|
||||||
// 新手引导
|
// 新手引导
|
||||||
this.guideStep = JSON.parse(localStorage.getItem('guideStep'))
|
const guideStepStr = localStorage.getItem('guideStep')
|
||||||
this.currentStep = localStorage.getItem('currentStep')
|
this.guideStep = guideStepStr ? JSON.parse(guideStepStr) : null
|
||||||
if (this.guideStep[this.currentStep]) {
|
this.currentStep = localStorage.getItem('currentStep') || -1
|
||||||
|
if (this.guideStep && this.guideStep[this.currentStep]) {
|
||||||
this.guideStep[this.currentStep].show = false
|
this.guideStep[this.currentStep].show = false
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.guideStep[this.currentStep].show = true
|
this.guideStep[this.currentStep].show = true
|
||||||
@@ -1135,6 +1144,10 @@ export default {
|
|||||||
this.$emit('close')
|
this.$emit('close')
|
||||||
},
|
},
|
||||||
// 高级设置
|
// 高级设置
|
||||||
|
openSetDialog() {
|
||||||
|
this.initSet()
|
||||||
|
this.setShow = true
|
||||||
|
},
|
||||||
setCancel() {
|
setCancel() {
|
||||||
this.setShow = false
|
this.setShow = false
|
||||||
},
|
},
|
||||||
@@ -1143,10 +1156,109 @@ export default {
|
|||||||
this.$store.dispatch('chat/setDatas', { name: 'workStatus', data: true })
|
this.$store.dispatch('chat/setDatas', { name: 'workStatus', data: true })
|
||||||
this.$store.dispatch('setDatas', { name: 'setForm', data: this.setForm })
|
this.$store.dispatch('setDatas', { name: 'setForm', data: this.setForm })
|
||||||
localStorage.setItem('setForm', JSON.stringify(this.setForm))
|
localStorage.setItem('setForm', JSON.stringify(this.setForm))
|
||||||
|
// 根据临时变量更新 hideStep
|
||||||
|
if (this.tempHideStep) {
|
||||||
|
// 开启新手引导:设置 hideStep 为 0
|
||||||
|
localStorage.setItem('hideStep', 0)
|
||||||
|
// 初始化 guideStep(如果不存在)
|
||||||
|
const guideStepStr = localStorage.getItem('guideStep')
|
||||||
|
if (!guideStepStr) {
|
||||||
|
this.initGuideStep()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 关闭新手引导:设置 hideStep 为 1
|
||||||
|
localStorage.setItem('hideStep', 1)
|
||||||
|
// 关闭当前显示的引导
|
||||||
|
if (this.guideStep) {
|
||||||
|
for (let key in this.guideStep) {
|
||||||
|
this.guideStep[key].show = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.currentStep = -1
|
||||||
|
localStorage.setItem('currentStep', this.currentStep)
|
||||||
|
if (this.guideStep) {
|
||||||
|
localStorage.setItem('guideStep', JSON.stringify(this.guideStep))
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
initSet() {
|
initSet() {
|
||||||
this.setForm = { ...this.$store.state.user.setForm }
|
this.setForm = { ...this.$store.state.user.setForm }
|
||||||
console.log(this.$store.state.user.setForm)
|
console.log(this.$store.state.user.setForm)
|
||||||
|
// 初始化新手引导开关状态
|
||||||
|
const hideStep = localStorage.getItem('hideStep')
|
||||||
|
this.tempHideStep = !hideStep || hideStep == 0
|
||||||
|
},
|
||||||
|
// 初始化新手引导步骤
|
||||||
|
initGuideStep() {
|
||||||
|
const guideStep = [
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'right',
|
||||||
|
step: '系统状态面板,显示系统名称,耗材信息等,通过下拉菜单可以执行设置光盘桶等常见操作。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'left',
|
||||||
|
step: '光驱状态面板,显示当前光驱工作状态,刻录进度和速度等相关信息。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'left',
|
||||||
|
step: '日志面板,显示当前日志动态。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'top',
|
||||||
|
step: '作业列表面板,显示当前作业信息。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'bottom',
|
||||||
|
step: '服务启动和停止切换按钮。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'bottom',
|
||||||
|
step: '任务统计面板。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'bottom',
|
||||||
|
step: '系统设置按钮,详情请见软件使用手册。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'bottom',
|
||||||
|
step: '新建作业和打开作业按钮。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'bottom',
|
||||||
|
step: '选择作业的光盘类型和任务类型。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'right',
|
||||||
|
step: '作业内容面板,选择文件夹和文件作为光盘刻录内容,修改光盘卷标名称。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'left',
|
||||||
|
step: '作业标签面板,选择或创建一个光盘标签,也可以通过下拉菜单选择默认标签,默认标签路径为软件目录下User Templates文件夹中。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'bottom',
|
||||||
|
step: '高级作业设置按钮,配置刻录速度,校验,跨盘,虚拟刻录等详细的作业设置。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: false,
|
||||||
|
placement: 'top',
|
||||||
|
step: '点击保存作业或提交按钮,还可以点击链接查看更多软件使用手册。',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
localStorage.setItem('guideStep', JSON.stringify(guideStep))
|
||||||
|
localStorage.setItem('currentStep', 0)
|
||||||
},
|
},
|
||||||
// 退出新手引导
|
// 退出新手引导
|
||||||
exitGuide() {
|
exitGuide() {
|
||||||
|
|||||||
@@ -147,7 +147,7 @@
|
|||||||
<div class="device_info_box">
|
<div class="device_info_box">
|
||||||
<div class="device_info_main" :class="{ device_info_main1: infoStatus === 1 }">
|
<div class="device_info_main" :class="{ device_info_main1: infoStatus === 1 }">
|
||||||
<div class="device_info_item">
|
<div class="device_info_item">
|
||||||
<div class="device_info_title">同方光盘刻录一体机{{ printer_info.printer_name }}<span v-if="printer_info.printer_path">({{ printer_info.printer_path }})</span></div>
|
<div class="device_info_title">国产光盘刻录一体机 DP-{{ printer_info.printer_name }}<span v-if="printer_info.printer_path">({{ printer_info.printer_path }})</span></div>
|
||||||
<div class="flex_box flex_row_between device_info_options">
|
<div class="flex_box flex_row_between device_info_options">
|
||||||
<div v-if="printer_info.strongList[2]" class="device_info_option">
|
<div v-if="printer_info.strongList[2]" class="device_info_option">
|
||||||
<div class="device_info_option_box">
|
<div class="device_info_option_box">
|
||||||
@@ -510,11 +510,10 @@
|
|||||||
width="400px"
|
width="400px"
|
||||||
>
|
>
|
||||||
<div class="about_box">
|
<div class="about_box">
|
||||||
<img src="@/assets/images/logo.png" style="height: 60px" />
|
<div class="company-name">国产光盘打印刻录系统 DiscWorker</div>
|
||||||
<div class="company-name">Disc Worker</div>
|
<div class="version">版本1.0</div>
|
||||||
<div class="version">版本1.0.1</div>
|
|
||||||
<div class="copyright">
|
<div class="copyright">
|
||||||
(c) 2023 上海卡树信息科技有限公司 保留所有权利
|
© 2023 cardsoon Co., Ltd. All rights reserved.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -1356,67 +1355,67 @@ export default {
|
|||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'right',
|
placement: 'right',
|
||||||
step: '第1步',
|
step: '系统状态面板,显示系统名称,耗材信息等,通过下拉菜单可以执行设置光盘桶等常见操作。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'left',
|
placement: 'left',
|
||||||
step: '第2步',
|
step: '光驱状态面板,显示当前光驱工作状态,刻录进度和速度等相关信息。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'left',
|
placement: 'left',
|
||||||
step: '第3步',
|
step: '日志面板,显示当前日志动态。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
step: '第4步',
|
step: '作业列表面板,显示当前作业信息。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
step: '第5步',
|
step: '服务启动和停止切换按钮。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
step: '第6步',
|
step: '任务统计面板。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
step: '第7步',
|
step: '系统设置按钮,详情请见软件使用手册。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
step: '第8步',
|
step: '新建作业和打开作业按钮。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
step: '第9步',
|
step: '选择作业的光盘类型和任务类型。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'right',
|
placement: 'right',
|
||||||
step: '第10步',
|
step: '作业内容面板,选择文件夹和文件作为光盘刻录内容,修改光盘卷标名称。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'left',
|
placement: 'left',
|
||||||
step: '第11步',
|
step: '作业标签面板,选择或创建一个光盘标签,也可以通过下拉菜单选择默认标签,默认标签路径为软件目录下User Templates文件夹中。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'bottom',
|
placement: 'bottom',
|
||||||
step: '第12步',
|
step: '高级作业设置按钮,配置刻录速度,校验,跨盘,虚拟刻录等详细的作业设置。',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
show: false,
|
show: false,
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
step: '第13步',
|
step: '点击保存作业或提交按钮,还可以点击链接查看更多软件使用手册。',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
localStorage.setItem('guideStep', JSON.stringify(guideStep))
|
localStorage.setItem('guideStep', JSON.stringify(guideStep))
|
||||||
|
|||||||
@@ -2,18 +2,20 @@
|
|||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<img class="login_bg" src="@/assets/images/login_bg.jpg" />
|
<img class="login_bg" src="@/assets/images/login_bg.jpg" />
|
||||||
<div class="flex_box form_box">
|
<div class="flex_box form_box">
|
||||||
<el-form class="flex_box flex_col flex_row_center login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
|
<el-form class="flex_box flex_col flex_row_center login-form" autoComplete="on" :model="loginForm"
|
||||||
|
:rules="loginRules" ref="loginForm" label-position="left">
|
||||||
<img class="login_logo" src="@/assets/images/logo.png" />
|
<img class="login_logo" src="@/assets/images/logo.png" />
|
||||||
<div class="login_box">
|
<div class="login_box">
|
||||||
<div class="login_title">用户登录</div>
|
<div class="login_title">用户登录</div>
|
||||||
<div class="login_label">用户名</div>
|
<div class="login_label">用户名</div>
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
|
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on"
|
||||||
|
placeholder="username" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div class="login_label">密码</div>
|
<div class="login_label">密码</div>
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
|
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
|
||||||
placeholder="password"></el-input>
|
autoComplete="on" placeholder="password"></el-input>
|
||||||
<span class="show-pwd" @click="showPwd">
|
<span class="show-pwd" @click="showPwd">
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
@@ -24,11 +26,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button class="login_btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
|
<el-button class="login_btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">{{
|
||||||
|
$t('login.logIn') }}</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
<el-popover v-if="guideStep" :placement="guideStep[0].placement" width="250" trigger="manual"
|
||||||
|
v-model="guideStep[0].show">
|
||||||
|
<div class="guide_box">
|
||||||
|
<div class="guide_title">新手引导<span>({{ parseInt(currentStep) + 1 }}/{{ guideStep.length }})</span>
|
||||||
|
</div>
|
||||||
|
<div class="guide_desc">{{ guideStep[0].step }}</div>
|
||||||
|
<div class="guide_btns">
|
||||||
|
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">跳过引导</el-button>
|
||||||
|
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">上一步</el-button>
|
||||||
|
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep ==
|
||||||
|
guideStep.length
|
||||||
|
- 1 ? '完成引导' : '下一步' }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -119,6 +138,7 @@ $light_gray:#000000;
|
|||||||
background: #F1F1F1;
|
background: #F1F1F1;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
color: #000;
|
color: #000;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
@@ -128,6 +148,7 @@ $light_gray:#000000;
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
|
|
||||||
&:-webkit-autofill {
|
&:-webkit-autofill {
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
|
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
|
||||||
@@ -136,23 +157,25 @@ $light_gray:#000000;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||||
$bg: #F1F1F1;
|
$bg: #F1F1F1;
|
||||||
$dark_gray: #889aa4;
|
$dark_gray: #889aa4;
|
||||||
$light_gray: #eee;
|
$light_gray: #eee;
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.login_bg {
|
.login_bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form_box {
|
.form_box {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -162,18 +185,22 @@ $light_gray:#eee;
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 0 0 120px;
|
padding: 0 0 0 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.login_logo {
|
.login_logo {
|
||||||
width: 844px;
|
width: 844px;
|
||||||
height: 158px;
|
height: 158px;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login_box {
|
.login_box {
|
||||||
width: 450px;
|
width: 450px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
padding: 48px;
|
padding: 48px;
|
||||||
|
|
||||||
.login_title {
|
.login_title {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
@@ -182,40 +209,48 @@ $light_gray:#eee;
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login_label {
|
.login_label {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: #B2B2B2;
|
color: #B2B2B2;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login_check {
|
.login_check {
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.el-checkbox {
|
.el-checkbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__inner {
|
.el-checkbox__inner {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||||
background-color: #00C325;
|
background-color: #00C325;
|
||||||
border-color: #00C325;
|
border-color: #00C325;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__inner::after {
|
.el-checkbox__inner::after {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
left: 8px;
|
left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__label {
|
.el-checkbox__label {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||||
color: #00C325;
|
color: #00C325;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login_btn {
|
.login_btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
@@ -227,26 +262,31 @@ $light_gray:#eee;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-container {
|
.svg-container {
|
||||||
padding: 6px 5px 6px 15px;
|
padding: 6px 5px 6px 15px;
|
||||||
color: $dark_gray;
|
color: $dark_gray;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&_login {
|
&_login {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -255,6 +295,7 @@ $light_gray:#eee;
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-pwd {
|
.show-pwd {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
|
|||||||
Reference in New Issue
Block a user