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/dashboard/index.vue
+650 -49
View File
@@ -1,8 +1,9 @@
<template>
<div class="container_box">
<!-- 头部 -->
<div class="flex_box flex_row_between top_box">
<div class="flex_box top_left">
<div class="flex_box flex_row_center top_btn1">
<div @click="showWork" class="flex_box flex_row_center top_btn1">
<img src="@/assets/images/Plus1_icon.png" />
<div>新建作业</div>
</div>
@@ -10,7 +11,7 @@
<img src="@/assets/images/Search_icon.png" />
<div>打开作业文件</div>
</div>
<div class="flex_box flex_row_center top_btn2">
<div @click="$router.push({ path: '/manage' })" class="flex_box flex_row_center top_btn2">
<img src="@/assets/images/Setting_icon.png" />
<div>系统设置</div>
</div>
@@ -35,32 +36,286 @@
</div>
<div class="top_left_line"></div>
</div>
<div @click="goOut" class="flex_box top_right">
<div class="top_right_name">你好，admin</div>
<div class="top_right_btn">登出</div>
<user-info></user-info>
</div>
<!-- 设备 -->
<div class="flex_box device_box">
<!-- 左侧 -->
<div class="device_left">
<div class="flex_box device_left_top">
<img class="flex_shrink device_img" src="@/assets/images/device1.png" />
<div class="flex_box flex_row_between device_info">
<div class="device_info_box">
<div class="device_info_main" :class="{'device_info_main1': infoStatus===1}">
<div class="device_info_item">
<div class="device_info_text">系统序列号：4F524201</div>
<div class="device_info_text">主机名：DGF031</div>
<div class="device_info_text">主机IP：192.168.1.25</div>
<div class="device_info_text">缓存空间：123G（共200G）</div>
</div>
<div class="device_info_item">
<div class="device_info_title">Disc Publisher 4200 Series</div>
<div class="flex_box device_info_options">
<div class="device_info_option">
<div class="device_info_option_box">
<img src="@/assets/images/device4.png" />
</div>
<div class="flex_box flex_row_center device_info_option_b">
<div class="device_info_option_b_text">CD 5张</div>
<i class="el-icon-caret-bottom"></i>
</div>
</div>
<div class="device_info_option">
<div class="device_info_option_box">
<img src="@/assets/images/device4.png" />
</div>
<div class="flex_box flex_row_center device_info_option_b">
<div class="device_info_option_b_text">DVD 15张</div>
</div>
</div>
<div class="device_info_option">
<img class="device_info_option_img" src="@/assets/images/device5.png" />
<div class="flex_box flex_row_center device_info_option_b">
<div class="device_info_option_b_text">75%</div>
<i class="el-icon-caret-bottom"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="device_info_right">
<div @click="infoStatus=0" class="device_info_right_item">
<img v-if="infoStatus===0" src="@/assets/images/Arrow_right_icon.png" />
<img v-if="infoStatus===1" src="@/assets/images/Arrow_right1_icon.png" />
</div>
<div @click="infoStatus=1" class="device_info_right_item">
<img v-if="infoStatus===1" src="@/assets/images/Arrow_left_icon.png" />
<img v-if="infoStatus===0" src="@/assets/images/Arrow_left1_icon.png" />
</div>
</div>
</div>
</div>
<div class="flex_box device_status">
<div class="device_status_dot"></div>
<div class="device_status_text">{{runText}}</div>
</div>
<div class="flex_box device_run">
<div class="flex_box device_run_input">
<el-select v-model="runVal" placeholder="请选择">
<el-option
v-for="item in runList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<el-button type="primary" class="device_run_btn">执行</el-button>
</div>
</div>
<!-- 右侧 -->
<div class="device_right">
<div class="flex_box device_right_top">
<div class="flex_box flex_row_between device_right_top_item">
<img class="device_right_top_img" src="@/assets/images/device2.png" />
<div class="device_right_top_content">
<div class="device_right_top_title">BD驱动器(S)(顶部)</div>
<div class="device_right_top_text">状态：插入光盘中</div>
<div class="device_right_top_text">任务：文件刻录_20210323095213</div>
<div class="device_right_top_text">光盘：56210323002</div>
</div>
</div>
<div class="device_right_top_line"></div>
<div class="flex_box flex_row_between device_right_top_item">
<img class="device_right_top_img" src="@/assets/images/device2.png" />
<div class="device_right_top_content">
<div class="device_right_top_title">21032200009(H)(底部)</div>
<div class="flex_box device_right_top_progress">
<div class="device_right_top_progress_box" :style="{width: progressW+'%'}"></div>
</div>
<div class="device_right_top_text">15GB可用，共60GB</div>
<div class="device_right_top_text">状态：插入光盘中</div>
<div class="device_right_top_text">任务：文件刻录_20210323095213</div>
<div class="device_right_top_text">光盘：56210323002</div>
</div>
</div>
</div>
<div class="notice_box">
<div class="flex_box flex_row_between notice_top">
<div class="flex_box notice_title">
<img src="@/assets/images/inform1_icon.png" />
<div>动态</div>
</div>
<div class="flex_box notice_all">
<img src="@/assets/images/Calendar_icon.png" />
<div>全部日志</div>
</div>
</div>
<div class="notice_list">
<div v-for="(item, index) in noticeList" :key="index" class="flex_box flex_row_between notice_item">
<div class="notice_content"><span>{{ index+1 }}</span>{{ item.message }}</div>
<div class="notice_time">{{ item.createtime }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="device_box">
<!-- 作业队列 -->
<div class="work_box">
<div class="flex_box work_top">
<div class="work_top_text">作业列表</div>
</div>
<el-table max-height="250" class="work_table" :data="workList" empty-text="暂无作业列表">
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="jId" label="作业ID"></el-table-column>
<el-table-column prop="DataSource" label="作业来源"></el-table-column>
<el-table-column prop="PrinterID" label="工作站"></el-table-column>
<el-table-column prop="PrinterType" label="存储卡类型"></el-table-column>
<el-table-column prop="TaskCapacity" label="拷贝数"></el-table-column>
<el-table-column prop="CreateTime" label="开始时间"></el-table-column>
<el-table-column prop="FinishTime" label="结束时间"></el-table-column>
<el-table-column prop="JobCompletion" label="完成"></el-table-column>
<el-table-column prop="JobStatus" label="状态">
<template slot-scope="scope">
<div class="flex_box work_status_box">
<div>{{scope.row.JobStatus==1?'成功':'失败'}}</div>
<i class="el-icon-caret-bottom"></i>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- 底部 -->
<div class="flex_box flex_row_center footer_box">
<div>Copyright @ 2023 CARDSOON Corporation</div>
<div class="footer_line"></div>
<div class="footer_text">帮助</div>
<div class="footer_line"></div>
<div class="footer_text">关于我们</div>
</div>
<!-- 新建作业 -->
<work-add ref="workAdd"></work-add>
</div>
</template>
<script>
let that
import { mapGetters } from 'vuex'
import UserInfo from '@/components/userInfo/userInfo.vue';
import WorkAdd from '@/components/workAdd/workAdd.vue';
export default {
name: 'dashboard',
components: { UserInfo, WorkAdd },
data() {
return {
workStatus: true
// 设备运行状态
workStatus: true,
// 工作状态
infoStatus: 0,
runText: '设备门盖被打开，请关闭门盖。',
runVal: 1,
runList: [
{
value: 1,
label: '检查打印机',
},
{
value: 2,
label: '打印机换纸',
},
{
value: 3,
label: '校准打印机',
}
],
// 剩余容量
progressW: 50,
// 日志
noticeList: [
{
id: 1,
message: '《CRMEB 开源/标准版商城系统客服配置教程》',
createtime: '2024 10-13'
},
{
id: 2,
message: '《CRMEB 开源/标准版商城系统客服配置教程》',
createtime: '2024 10-13'
},
{
id: 3,
message: '《CRMEB 开源/标准版商城系统客服配置教程》',
createtime: '2024 10-13'
}
],
// 作业列表
workList: [
{
ID: '1',
jId: '202410145423408',
DataSource: '127.0.0.1',
PrinterID: '002A',
PrinterType: '4GB丨2.0',
TaskCapacity: '1GB278MB',
CreateTime: '10-14 15:46:24',
FinishTime: '10-14 16:10:01',
JobCompletion: '5/10',
JobStatus: '1'
},
{
ID: '1',
jId: '202410145423408',
DataSource: '127.0.0.1',
PrinterID: '002A',
PrinterType: '4GB丨2.0',
TaskCapacity: '1GB278MB',
CreateTime: '10-14 15:46:24',
FinishTime: '10-14 16:10:01',
JobCompletion: '5/10',
JobStatus: '1'
},
{
ID: '1',
jId: '202410145423408',
DataSource: '127.0.0.1',
PrinterID: '002A',
PrinterType: '4GB丨2.0',
TaskCapacity: '1GB278MB',
CreateTime: '10-14 15:46:24',
FinishTime: '10-14 16:10:01',
JobCompletion: '5/10',
JobStatus: '1'
},
{
ID: '1',
jId: '202410145423408',
DataSource: '127.0.0.1',
PrinterID: '002A',
PrinterType: '4GB丨2.0',
TaskCapacity: '1GB278MB',
CreateTime: '10-14 15:46:24',
FinishTime: '10-14 16:10:01',
JobCompletion: '5/10',
JobStatus: '1'
},
]
}
},
computed: {
...mapGetters(['name', 'roles'])
},
mounted() {
that = this
},
methods: {
// 新建作业
showWork() {
that.$refs.workAdd.show()
},
// 退出登录
goOut() {
this.$store.dispatch('FedLogOut').then(() => {
location.reload()// In order to re-instantiate the vue-router object to avoid bugs
@@ -72,71 +327,72 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.container_box {
min-height: 100vh;
background-color: #F8F8F8;
height: 100vh;
.top_box {
height: 90px;
padding: 0 48px;
height: 78px;
padding: 0 32px;
background-color: #ffffff;
.top_left {
.top_btn1 {
padding: 0 24px;
height: 45px;
cursor: pointer;
padding: 0 16px;
height: 30px;
background: #00C325;
border-radius: 6px;
margin-right: 24px;
margin-right: 16px;
font-weight: 500;
font-size: 21px;
font-size: 15px;
color: #FFFFFF;
img {
width: 27px;
height: 27px;
margin-right: 12px;
width: 18px;
height: 18px;
margin-right: 8px;
}
}
.top_btn2 {
padding: 0 24px;
height: 45px;
cursor: pointer;
padding: 0 16px;
height: 30px;
background: rgba(0,195,37,0.12);
border: 2px solid rgba(0,195,37,0.32);
border-radius: 6px;
margin-right: 24px;
margin-right: 16px;
font-weight: 500;
font-size: 21px;
font-size: 15px;
color: #00C325;
img {
width: 27px;
height: 27px;
margin-right: 12px;
width: 18px;
height: 18px;
margin-right: 8px;
}
}
.top_left_line {
width: 2px;
height: 45px;
height: 30px;
background: #E0E0E0;
margin: 0 24px;
margin: 0 16px;
}
.top_left_status {
padding: 0 24px;
transform: scale(1.6);
padding: 0 16px;
zoom: 1.3;
}
.top_left_option {
margin-left: 24px;
margin-left: 16px;
.top_left_text {
font-weight: 500;
font-size: 21px;
font-size: 15px;
color: #000000;
text-decoration: underline;
}
.top_left_num {
padding: 0 14px;
height: 36px;
padding: 0 10px;
height: 28px;
background: #00C325;
border-radius: 6px;
font-weight: 500;
font-size: 21px;
font-size: 15px;
color: #FFFFFF;
line-height: 36px;
line-height: 28px;
margin-left: 12px;
}
.top_left_num1 {
@@ -144,20 +400,365 @@ export default {
}
}
}
.top_right {
.top_right_name {
font-weight: 500;
font-size: 21px;
color: #000000;
padding: 0 24px;
}
.device_box {
padding: 16px;
background-color: #F8F8F8;
.device_left {
width: 50%;
padding: 0 45px;
.device_left_top {
margin-bottom: 24px;
.device_img {
width: 255px;
height: 180px;
margin-right: 35px;
}
.device_info {
width: calc(100% - 290px);
.device_info_box {
width: calc(100% - 50px);
overflow: hidden;
.device_info_main {
white-space: nowrap;
transition: all 0.5s;
.device_info_item {
width: 100%;
display: inline-block;
.device_info_text {
font-weight: 500;
font-size: 19px;
color: #000000;
line-height: 38px;
}
.device_info_title {
font-weight: bold;
font-size: 25px;
color: #000000;
line-height: 38px;
margin-bottom: 42px;
}
.device_info_options {
.device_info_option {
margin-right: 30px;
&:last-child {
margin-right: 0;
}
.device_info_option_box {
width: 84px;
height: 67px;
position: relative;
img {
width: 100%;
}
}
.device_info_option_img {
width: 118px;
height: 67px;
}
.device_info_option_b {
height: 30px;
padding-top: 10px;
font-size: 24px;
.device_info_option_b_text {
font-weight: 500;
font-size: 18px;
color: #000000;
}
.el-icon-caret-bottom {
transition: all 0.5s;
}
}
.device_info_option_b1 {
.el-icon-caret-bottom {
transform: rotate(90deg);
}
}
}
}
}
}
.device_info_main1 {
transform: translateX(-100%);
}
}
.device_info_right {
.device_info_right_item {
width: 28px;
padding: 8px 0;
cursor: pointer;
img {
width: 28px;
height: 28px;
}
}
}
}
}
.top_right_btn {
font-weight: 500;
font-size: 21px;
.device_status {
height: 44px;
background: #FFFFFF;
border-radius: 4px;
margin-bottom: 24px;
padding: 0 18px;
.device_status_dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: #E54D4D;
margin-right: 18px;
}
.device_status_text {
font-weight: 500;
font-size: 19px;
color: #E54D4D;
line-height: 30px;
}
}
.device_run {
width: 100%;
height: 44px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0px 5 9px 2px rgba(102,102,102,0.18);
border-radius: 6px;
.device_run_input {
width: calc(100% - 140px);
height: 44px;
border: 2px solid #00BCC3;
overflow: hidden;
border-radius: 6px 0 0 6px;
.el-select {
width: 100%;
padding-left: 10px;
::v-deep {
.el-input__inner {
border: none;
font-weight: 500;
background-color: transparent;
font-size: 20px;
height: 40px;
line-height: 40px;
color: #000000;
}
.el-input__icon {
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: bold;
color: #000;
}
}
}
}
.device_run_btn {
width: 140px;
height: 44px;
background: #00BCC3;
border-radius: 0px 6px 6px 0px;
font-weight: 500;
font-size: 19px;
margin: 0;
color: #FFFFFF;
}
}
}
.device_right {
width: 50%;
.device_right_top {
height: 200px;
background: #FFFFFF;
border-radius: 4px;
margin-bottom: 18px;
padding: 0 24px;
.device_right_top_item {
width: calc(50% - 25px);
.device_right_top_img {
width: 116px;
height: 101px;
}
.device_right_top_content {
width: calc(100% - 136px);
.device_right_top_title {
font-weight: 500;
font-size: 19px;
color: #000000;
line-height: 34px;
}
.device_right_top_text {
font-weight: 500;
font-size: 16px;
color: #666666;
line-height: 30px;
}
.device_right_top_progress {
height: 18px;
background: #FFFFFF;
border-radius: 3px;
border: 2px solid #707070;
margin: 2px 0 2px;
.device_right_top_progress_box {
width: 0;
height: 15px;
background: #00C325;
transition: all 0.5s;
}
}
}
}
.device_right_top_line {
width: 2px;
height: 150px;
background: #E1F5E5;
margin: 0 24px;
}
}
.notice_box {
background: #FFFFFF;
border-radius: 6px;
.notice_top {
height: 75px;
padding: 0 30px;
border-bottom: 2px solid #E1F5E5;
.notice_title {
font-weight: 500;
font-size: 19px;
color: #000000;
img {
width: 28px;
height: 28px;
margin-right: 18px;
}
}
.notice_all {
font-weight: 500;
font-size: 19px;
color: #00C325;
cursor: pointer;
img {
width: 28px;
height: 28px;
margin-right: 18px;
}
}
}
.notice_list {
max-height: 200px;
overflow-y: scroll;
padding: 6px;
::-webkit-scrollbar {
width: 6px; /* 设置滚动条的宽度 */
height: 6px;
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #b5b5b5; /* 设置滑块背景颜色 */
}
/* 滚动条轨道hover状态样式 */
::-webkit-scrollbar-track:hover {
background-color: #efefef; /* 设置轨道hover状态时的背景颜色 */
}
/* 滚动条滑块hover状态样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #b5b5b5; /* 设置滑块hover状态时的背景颜色 */
}
.notice_item {
height: 42px;
background-color: #F8F8F8;
margin-bottom: 3px;
cursor: pointer;
&:hover {
background-color: #FFE6E6;
.notice_content,
.notice_time {
color: #FF0000;
}
}
.notice_content {
width: calc(100% - 108px);
font-size: 16px;
color: #000000;
line-height: 24px;
span {
display: inline-block;
width: 42px;
text-align: center;
}
}
.notice_time {
width: 108px;
text-align: center;
font-size: 14px;
color: #000000;
line-height: 24px;
}
}
}
}
}
}
.work_box {
height: calc(100vh - 590px);
.work_top {
height: 72px;
.work_top_text {
width: 132px;
height: 72px;
background: linear-gradient( 180deg, #C1FFCD 0%, #FFFFFF 100%);
font-weight: bold;
font-size: 19px;
color: #00C325;
line-height: 72px;
text-align: center;
}
}
.work_table {
background-color: #F8F8F8;
::v-deep {
tr {
background-color: #F8F8F8;
}
td.el-table__cell {
background-color: #F8F8F8;
border-bottom: 3px solid #ffffff;
}
th.el-table__cell {
background-color: #F2F9F4;
border-bottom: 3px solid #ffffff;
}
.el-table__cell {
padding: 6px 0;
}
.cell {
line-height: 28px;
font-size: 12px;
color: #000000;
}
}
.work_status_box {
font-weight: 500;
font-size: 14px;
color: #000000;
height: 30px;
}
}
}
.footer_box {
height: 36px;
background: #DCF5E1;
font-weight: 500;
font-size: 14px;
color: #666666;
.footer_line {
width: 2px;
height: 14px;
background-color: #666666;
margin: 0 20px;
}
.footer_text {
cursor: pointer;
&:hover {
color: #00C325;
line-height: 50px;
padding-left: 24px;
cursor: pointer;
}
}
}