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-12 14:23:50 +08:00
parent ef2607a5fd
commit 5d635afeb1
6 changed files with 349 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/dashboard/index.vue
+170 -42
View File
@@ -38,60 +38,77 @@
<!-- 左侧 -->
<div class="device_left">
<div class="flex_box device_left_top">
<img class="flex_shrink device_img" src="@/assets/images/device.png" />
<img v-if="printer_info.cover_flag" class="flex_shrink device_img" src="@/assets/images/device.png" />
<img v-else class="flex_shrink device_img" src="@/assets/images/device-open.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="device_info_title">{{ printer_info.printer_name }}</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 class="device_info_option_cap">
<div class="device_info_option_cap_box" :style="{height: $accDiv(printer_info.strong_list[0].cd_num, 50) * 100 + '%'}"></div>
</div>
</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 class="device_info_option_b_text">{{$store.state.chat.CDTypes[printer_info.strong_list[0].cd_type]}} {{printer_info.strong_list[0].cd_num}}张</div>
<i v-if="runVal===6" 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 class="device_info_option_cap">
<div class="device_info_option_cap_box" :style="{height: $accDiv(printer_info.strong_list[0].cd_num, 50) * 100 + '%'}"></div>
</div>
</div>
<div class="flex_box flex_row_center device_info_option_b">
<div class="device_info_option_b_text">DVD 15张</div>
<div class="device_info_option_b_text">{{$store.state.chat.CDTypes[printer_info.strong_list[1].cd_type]}} {{printer_info.strong_list[1].cd_num}}张</div>
<i v-if="runVal===6" class="el-icon-caret-bottom"></i>
</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 class="flex_box flex_row_between device_info_option_list">
<div class="device_info_option_item device_info_option_blue">
<div :style="{width: printer_info.blue_last+'%'}" class="device_info_option_content"></div>
</div>
<div class="device_info_option_item device_info_option_red">
<div :style="{width: printer_info.red_last+'%'}" class="device_info_option_content"></div>
</div>
<div class="device_info_option_item device_info_option_yellow">
<div :style="{width: printer_info.yellow_last+'%'}" class="device_info_option_content"></div>
</div>
</div>
<div class="flex_box flex_row_between device_info_option_b">
<div class="device_info_option_b_text device_info_option_b_text1">{{printer_info.blue_last}}%</div>
<div class="device_info_option_b_text device_info_option_b_text1">{{printer_info.red_last}}%</div>
<div class="device_info_option_b_text device_info_option_b_text1">{{printer_info.yellow_last}}%</div>
</div>
</div>
</div>
</div>
<div class="device_info_item">
<div class="device_info_text">系统序列号：</div>
<div class="device_info_text">主机名：{{ printer_info.system_name }}</div>
<div class="device_info_text">主机IP：{{ printer_info.system_ip }}</div>
<div class="device_info_text">缓存空间：0G（共0G）</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 v-if="infoStatus === 1" @click="infoStatus = 0" class="device_info_right_item">
<img 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 v-if="infoStatus === 0" @click="infoStatus = 1" class="device_info_right_item">
<img src="@/assets/images/Arrow_left1_icon.png" />
</div>
</div>
</div>
</div>
<div class="flex_box device_status">
<div :class="`flex_box device_status device_status${printer_info.printer_status}`">
<div class="device_status_dot"></div>
<div class="device_status_text">{{ runText }}</div>
</div>
@@ -110,24 +127,32 @@
<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">任务：</div>
<div class="device_right_top_text">光盘：</div>
<div class="device_right_top_title">{{ cd_list[0].dev_path || '' }}({{ $store.state.chat.CDName[cd_list[0].cd_pos] }})</div>
<template v-if="cd_list[0].total_size">
<div class="flex_box device_right_top_progress">
<div class="device_right_top_progress_box" :style="{ width: $accMul($accDiv(cd_list[0].use_size, cd_list[0].total_size), 100) + '%' }"></div>
</div>
<div class="device_right_top_text">{{ $filterSize($accSub(cd_list[0].total_size, cd_list[0].use_size)) }}可用，共{{ $filterSize(cd_list[0].total_size) }}</div>
</template>
<div class="device_right_top_text">状态：{{ $store.state.chat.CDStatus[cd_list[0].cd_status] }}</div>
<div class="device_right_top_text">任务：{{ cd_list[0].cd_taskid || '' }}</div>
<div class="device_right_top_text">光盘：{{ cd_list[0].cd_assid || '' }}</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/device3.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">任务：文件刻录_20241107175818</div>
<div class="device_right_top_text">光盘：56210323002</div>
<div class="device_right_top_title">{{ cd_list[1].dev_path || '' }}({{ $store.state.chat.CDName[cd_list[1].cd_pos] }})</div>
<template v-if="cd_list[1].total_size">
<div class="flex_box device_right_top_progress">
<div class="device_right_top_progress_box" :style="{ width: $accMul($accDiv(cd_list[1].use_size, cd_list[1].total_size), 100) + '%' }"></div>
</div>
<div class="device_right_top_text">{{ $filterSize($accSub(cd_list[1].total_size, cd_list[1].use_size)) }}可用，共{{ $filterSize(cd_list[1].total_size) }}</div>
</template>
<div class="device_right_top_text">状态：{{ $store.state.chat.CDStatus[cd_list[1].cd_status] }}</div>
<div class="device_right_top_text">任务：{{ cd_list[1].cd_taskid || '' }}</div>
<div class="device_right_top_text">光盘：{{ cd_list[1].cd_assid || '' }}</div>
</div>
</div>
</div>
@@ -172,7 +197,7 @@
<el-table-column prop="task_label" label="子任务名称"></el-table-column>
<el-table-column prop="task_size" label="大小">
<template slot-scope="child">
<div>{{ filterSize(child.row.task_size) }}</div>
<div>{{ $filterSize(child.row.task_size) }}</div>
</template>
</el-table-column>
<el-table-column prop="start_time" label="开始时间"></el-table-column>
@@ -206,7 +231,7 @@
</el-table-column>
<el-table-column prop="task_size" label="大小">
<template slot-scope="scope">
<div>{{ filterSize(scope.row.task_size) }}</div>
<div>{{ $filterSize(scope.row.task_size) }}</div>
</template>
</el-table-column>
<!-- <el-table-column prop="CreateTime" label="开始时间"></el-table-column> -->
@@ -243,7 +268,7 @@
<script>
let that
import { mapGetters } from 'vuex'
import { accAdd, filterSize } from '@/utils'
import UserInfo from '@/components/userInfo/userInfo.vue'
import WorkAdd from '@/components/workAdd/workAdd.vue'
@@ -256,7 +281,7 @@ export default {
workStatus: true,
// 工作状态
infoStatus: 0,
runText: '设备门盖被打开，请关闭门盖。',
runText: '',
runVal: 1,
runList: [
{
@@ -317,6 +342,10 @@ export default {
'6': '已取消',
'7': '已完成'
},
// 设备信息
printer_info: {},
// g光盘信息
cd_list: [],
}
},
watch: {
@@ -327,7 +356,7 @@ export default {
val.forEach((item) => {
let task_size = 0
item.ass_task.forEach((item2) => {
task_size = accAdd(task_size, item2.task_size)
task_size = this.$accAdd(task_size, item2.task_size)
})
item.task_size = task_size
list.push(item)
@@ -337,6 +366,25 @@ export default {
},
deep: true,
immediate: true
},
'$store.state.chat.printer_info': {
handler(val) {
if (!val.cover_flag) {
this.runText = '设备门盖被打开，请关闭门盖。'
} else {
this.runText = this.$store.state.chat.PrinterStatus[val.printer_status]
}
this.printer_info = val
},
deep: true,
immediate: true
},
'$store.state.chat.cd_list': {
handler(val) {
this.cd_list = val
},
deep: true,
immediate: true
}
},
computed: {
@@ -358,9 +406,6 @@ export default {
showWork() {
that.$refs.workAdd.show()
},
filterSize(size) {
return filterSize(size)
},
// 退出登录
goOut() {
this.$store.dispatch('FedLogOut').then(() => {
@@ -372,6 +417,10 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$green: #00c325;
$yellow: #f5a623;
$red: #ff0000;
.container_box {
height: 100vh;
.top_box {
@@ -497,6 +546,24 @@ export default {
img {
width: 100%;
}
.device_info_option_cap {
position: absolute;
left: 20px;
bottom: 20px;
width: 42px;
height: 47px;
z-index: 3;
.device_info_option_cap_box {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: linear-gradient( 90deg, #92324E 0%, #CC224B 10%, #CC224B 90%, #94314E 100%);
border-radius: 4px;
z-index: 4;
}
}
}
.device_info_option_img {
width: 118px;
@@ -511,6 +578,11 @@ export default {
font-size: 18px;
color: #000000;
}
.device_info_option_b_text1 {
width: 36px;
text-align: center;
font-size: 16px;
}
.el-icon-caret-bottom {
transition: all 0.5s;
}
@@ -520,6 +592,45 @@ export default {
transform: rotate(90deg);
}
}
.device_info_option_list {
width: 150px;
.device_info_option_item {
width: 36px;
height: 67px;
border-radius: 2px;
background: linear-gradient( 270deg, #E1FBFE 0%, #FFFFFF 50%, #E5F9FF 100%);
border: 1px solid #B1CDD0;
position: relative;
.device_info_option_content {
position: absolute;
bottom: 0;
left: 0;
width: 34px;
height: 32px;
}
}
.device_info_option_blue {
background: linear-gradient( 270deg, #E1FBFE 0%, #FFFFFF 50%, #E5F9FF 100%);
border: 1px solid #B1CDD0;
.device_info_option_content {
background: linear-gradient( 90deg, #279FD0 0%, #80E1F7 48%, #2FB0E0 100%);
}
}
.device_info_option_red {
background: linear-gradient( 270deg, #FBE5F7 0%, #FFFFFF 50%, #F6E1F1 100%);
border: 1px solid #E6BCD6;
.device_info_option_content {
background: linear-gradient( 90deg, #D02886 0%, #F56ABE 48%, #D02991 100%);
}
}
.device_info_option_yellow {
background: linear-gradient( 270deg, #FEFDC5 0%, #FFFFFF 50%, #FEFDC5 100%);
border: 1px solid #EAECC6;
.device_info_option_content {
background: linear-gradient( 90deg, #F7EA32 0%, #FEFAAA 48%, #F8E94B 100%);
}
}
}
}
}
}
@@ -561,6 +672,23 @@ export default {
line-height: 30px;
}
}
.device_statusI {
.device_status_dot {
background-color: $green;
}
.device_status_text {
color: $green;
}
}
.device_statusB,
.device_statusP {
.device_status_dot {
background-color: $yellow;
}
.device_status_text {
color: $yellow;
}
}
.device_run {
width: 100%;
height: 44px;