yangchunjin/SoonWorkerD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面完善

Browse Source
This commit is contained in:
24kycj
2024-11-07 17:06:51 +08:00
parent d375616372
commit ca1a2e11b5
58 changed files with 5467 additions and 837 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/manage/index.vue
+327
View File
@@ -0,0 +1,327 @@
<template>
<div class="container_box">
<!-- 头部 -->
<tab-bar :active="1"></tab-bar>
<!-- 内容 -->
<div class="form_box">
<div class="form_item">
<div class="flex_box form_title">
<div class="flex_box flex_col">
<div class="form_title_text">系统管理</div>
<div class="form_title_line"></div>
</div>
</div>
<div class="form_content">
<div class="flex_box form_option">
<div class="form_label">移动卡片到</div>
<div class="form_val">
<div class="flex_box flex_wrap form_tabs">
<div v-for="(item, index) in moveList" :key="index" class="form_tab">{{ item.name }}</div>
</div>
</div>
</div>
<div class="flex_box form_option">
<div class="form_label">维护工作站</div>
<div class="form_val">
<div class="flex_box flex_wrap form_tabs">
<div v-for="(item, index) in actionList" :key="index" class="form_tab">{{ item.name }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="form_item">
<div class="flex_box form_title">
<div class="flex_box flex_col">
<div class="form_title_text">系统</div>
<div class="form_title_line"></div>
</div>
</div>
<div class="form_content">
<div class="flex_box form_option">
<div class="form_label">刷新时间</div>
<div class="form_val">
<div class="flex_box flex_col_top form_input">
<el-input border="none" v-model="refreshTime" placeholder="请输入刷新时间"></el-input>
<el-button type="primary">执行</el-button>
</div>
</div>
</div>
<div class="flex_box form_option">
<div class="form_label">休眠时间</div>
<div class="form_val">
<div class="flex_box flex_col_top form_input">
<el-input border="none" v-model="refreshTime" placeholder="请输入刷新时间"></el-input>
<el-button type="primary">执行</el-button>
</div>
</div>
</div>
<div class="flex_box form_option">
<div class="form_label">清除任务</div>
<div class="form_val">
<el-checkbox v-model="isDel">服务重启时是否删除已完成和已取消任务?</el-checkbox>
</div>
</div>
</div>
</div>
<div class="form_item">
<div class="flex_box form_title">
<div class="flex_box flex_col">
<div class="form_title_text">语言</div>
<div class="form_title_line"></div>
</div>
</div>
<div class="form_content">
<div class="flex_box form_option">
<div class="form_label">切换语言</div>
<div class="form_val">
<div class="flex_box form_select">
<el-select v-model="langVal" placeholder="请选择">
<el-option
v-for="item in langList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import TabBar from '@/components/tabBar/tabBar.vue';
export default {
name: 'manage',
components: { TabBar },
data() {
return {
moveList: [
{
id: 1,
name: '读卡器'
},
{
id: 2,
name: '废卡盒'
},
{
id: 3,
name: '出卡口'
},
{
id: 4,
name: '等待'
},
{
id: 5,
name: '待取口'
},
{
id: 6,
name: '后出卡口'
}
],
actionList: [
{
id: 1,
name: '重置工作站'
},
{
id: 2,
name: '重置工作站（有卡）'
},
{
id: 3,
name: '核准色带灯'
},
{
id: 4,
name: '初始化进卡槽'
},
{
id: 5,
name: '清洁工作站'
}
],
refreshTime: 3000,
sleepTime: 300000,
isDel: true,
langVal: 'zhCN',
langList: [
{
label: '简体中文',
value: 'zhCN'
},
{
label: 'English',
value: 'en'
},
{
label: '繁体中文',
value: 'zhYW'
}
]
}
},
computed: {
...mapGetters(['name', 'roles'])
},
methods: {
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container_box {
.form_box {
padding: 0 32px;
.form_item {
padding: 10px 0;
.form_title {
border-bottom: 2px solid #E1F5E5;
.form_title_text {
font-weight: 500;
font-size: 25px;
color: #000000;
line-height: 37px;
}
.form_title_line {
width: 100%;
height: 6px;
background: #98E8A6;
border-radius: 4px;
}
}
.form_content {
padding: 10px 0;
.form_option {
padding: 16px 0;
}
.form_label {
width: 140px;
font-weight: 500;
font-size: 19px;
color: #000000;
}
.form_val {
max-width: 1100px;
.form_tabs {
.form_tab {
width: 250px;
height: 42px;
cursor: pointer;
background: rgba(0,195,37,0.12);
border-radius: 4px;
border: 1px solid rgba(0,195,37,0.32);
line-height: 40px;
text-align: center;
font-weight: 500;
font-size: 19px;
color: #00C325;
margin: 6px;
}
}
.form_input {
width: 500px;
height: 42px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #98E8A6;
overflow: hidden;
::v-deep {
.el-input__inner {
width: 360px;
height: 40px;
line-height: 40px;
border: none;
font-weight: 500;
font-size: 19px;
color: #000000;
}
.el-input__icon {
font-size: 19px;
height: 40px;
line-height: 40px;
font-weight: bold;
color: #000;
}
.el-button {
width: 140px;
height: 40px;
border: none;
padding: 0;
background: #00C325;
border-radius: 0px 4px 4px 0px;
}
}
}
::v-deep {
.el-checkbox {
display: flex;
align-items: center;
}
.el-checkbox__inner {
width: 24px;
height: 24px;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #00C325;
border-color: #00C325;
}
.el-checkbox__inner::after {
width: 6px;
height: 14px;
left: 8px;
}
.el-checkbox__label {
font-size: 24px;
line-height: 24px;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #00C325;
}
}
.form_select {
width: 500px;
height: 42px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #98E8A6;
.el-select {
width: 100%;
padding-left: 10px;
::v-deep {
.el-input__inner {
border: none;
font-weight: 500;
background-color: transparent;
font-size: 20px;
height: 42px;
line-height: 42px;
color: #000000;
}
.el-input__icon {
font-size: 20px;
height: 42px;
line-height: 42px;
font-weight: bold;
color: #000;
}
}
}
}
}
}
}
}
}
</style>