优化调整

This commit is contained in:
24kycj
2024-11-14 13:25:03 +08:00
parent ca9448b60f
commit 5e0c2dfc1a
5 changed files with 289 additions and 146 deletions
+117 -49
View File
@@ -50,11 +50,11 @@
<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 class="device_info_option_cap_box" :class="{'device_info_option_cap_box1': printer_info.strongList[1].cd_num < 30, 'device_info_option_cap_box2': printer_info.strongList[1].cd_num < 10}" :style="{height: $accDiv(printer_info.strongList[1].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">{{$store.state.chat.CDTypes[printer_info.strong_list[0].cd_type]}} {{printer_info.strong_list[0].cd_num}}</div>
<div class="device_info_option_b_text">{{CDTypes[printer_info.strongList[1].cd_type]}} {{printer_info.strongList[1].cd_num}}</div>
<i v-if="runVal===6" class="el-icon-caret-bottom"></i>
</div>
</div>
@@ -62,11 +62,11 @@
<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 class="device_info_option_cap_box" :class="{'device_info_option_cap_box1': printer_info.strongList[2].cd_num < 30, 'device_info_option_cap_box2': printer_info.strongList[2].cd_num < 10}" :style="{height: $accDiv(printer_info.strongList[2].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">{{$store.state.chat.CDTypes[printer_info.strong_list[1].cd_type]}} {{printer_info.strong_list[1].cd_num}}</div>
<div class="device_info_option_b_text">{{CDTypes[printer_info.strongList[2].cd_type]}} {{printer_info.strongList[2].cd_num}}</div>
<i v-if="runVal===6" class="el-icon-caret-bottom"></i>
</div>
</div>
@@ -125,12 +125,16 @@
<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_img">
<img v-if="cd_list[0].total_size" src="@/assets/images/device3.png" />
<img v-if="!cd_list[0].total_size" src="@/assets/images/device2.png" />
<div class="device_right_top_img_text" :class="{'device_right_top_img_text1': cd_list[0].total_size}">{{ diskTypes[cd_list[0].dev_type] }}</div>
</div>
<div class="device_right_top_content">
<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 class="device_right_top_progress_box" :style="{ width: cd_list[0].cd_taskid.copy_scheduler + '%' }"></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>
@@ -141,12 +145,16 @@
</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_img">
<img v-if="cd_list[1].total_size" src="@/assets/images/device3.png" />
<img v-if="!cd_list[1].total_size" src="@/assets/images/device2.png" />
<div class="device_right_top_img_text" :class="{'device_right_top_img_text1': cd_list[1].total_size}">{{ diskTypes[cd_list[1].dev_type] }}</div>
</div>
<div class="device_right_top_content">
<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 class="device_right_top_progress_box" :style="{ width: cd_list[1].cd_taskid.copy_scheduler + '%' }"></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>
@@ -162,19 +170,30 @@
<img src="@/assets/images/inform1_icon.png" />
<div>动态</div>
</div>
<div class="flex_box notice_all">
<div @click="showAll = !showAll" class="flex_box notice_all">
<img src="@/assets/images/Calendar_icon.png" />
<div>全部日志</div>
<div>{{ showAll?'最新日志':'全部日志' }}</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 }}
<template v-if="!showAll">
<div v-for="(item, index) in logList" :key="index" :class="`flex_box flex_row_between notice_item notice_${item.status}`">
<div class="notice_content">
<span>{{ index + 1 }}</span
>[{{ item.status }}]{{ item.text }}
</div>
<div class="notice_time">{{ item.time.split(' ')[0] }}</div>
</div>
<div class="notice_time">{{ item.createtime }}</div>
</div>
</template>
<template v-if="showAll">
<div v-for="(item, index) in allLogList" :key="index" :class="`flex_box flex_row_between notice_item notice_${item.status}`">
<div class="notice_content">
<span>{{ index + 1 }}</span
>[{{ item.status }}]{{ item.text }}
</div>
<div class="notice_time">{{ item.time.split(' ')[0] }}</div>
</div>
</template>
</div>
</div>
</div>
@@ -226,7 +245,7 @@
<!-- <el-table-column prop="DataSource" label="来源"></el-table-column> -->
<el-table-column label="类型">
<template slot-scope="scope">
<div>{{ typeList[scope.row.ass_task[0].cd_type] }}</div>
<div>{{ CDTypes[scope.row.ass_task[0].cd_type] }}</div>
</template>
</el-table-column>
<el-table-column prop="task_size" label="大小">
@@ -311,27 +330,8 @@ export default {
],
// 剩余容量
progressW: 75,
// 日志
noticeList: [
{
id: 1,
message: '[2024-11-07 17:58:18][文件刻录 20241107175818][执行任务完成]',
createtime: '2024 10-13'
},
{
id: 2,
message: '[2024-11-07 17:53:13][文件刻录 20241107175313][开始执行文件刻录任务]',
createtime: '2024 10-13'
}
// {
// id: 3,
// message: '[2024-11-07 17:52:28][文件刻录 20241107175228][接收到任务]',
// createtime: '2024 10-13'
// },
],
// 作业列表
task_list: [],
typeList: ['', 'CD', 'DVD', 'DVD_DL', 'BD', 'BD_DL', 'BD_TL', 'BD_QL'],
statusList: {
'0': '新建',
'1': '等待中',
@@ -344,8 +344,14 @@ export default {
},
// 设备信息
printer_info: {},
// g光盘信息
// 光盘信息
diskTypes: {},
CDTypes: {},
cd_list: [],
// 日志信息
logList: [],
allLogList: [],
showAll: false
}
},
watch: {
@@ -374,14 +380,35 @@ export default {
} else {
this.runText = this.$store.state.chat.PrinterStatus[val.printer_status]
}
this.printer_info = val
this.printer_info = {...val}
},
deep: true,
immediate: true
},
'$store.state.chat.diskTypes': {
handler(val) {
this.diskTypes = {...val}
},
deep: true,
immediate: true
},
'$store.state.chat.CDTypes': {
handler(val) {
this.CDTypes = {...val}
},
deep: true,
immediate: true
},
'$store.state.chat.cd_list': {
handler(val) {
this.cd_list = val
this.cd_list = [...val]
},
deep: true,
immediate: true
},
'$store.state.chat.logList': {
handler(val) {
this.logList = [...val]
},
deep: true,
immediate: true
@@ -559,10 +586,16 @@ $red: #ff0000;
bottom: 0;
width: 100%;
height: 0;
background: linear-gradient( 90deg, #92324E 0%, #CC224B 10%, #CC224B 90%, #94314E 100%);
background-color: $green;
border-radius: 4px;
z-index: 4;
}
.device_info_option_cap_box1 {
background-color: $yellow;
}
.device_info_option_cap_box2 {
background-color: $red;
}
}
}
.device_info_option_img {
@@ -748,8 +781,32 @@ $red: #ff0000;
.device_right_top_item {
width: calc(50% - 25px);
.device_right_top_img {
width: 116px;
height: 101px;
width: 120px;
height: 120px;
position: relative;
img {
width: 100%;
height: 100%;
}
.device_right_top_img_text {
position: absolute;
background: #000;
border-radius: 4px;
padding: 4px 10px;
font-size: 15px;
font-weight: 500;
color: #fff;
text-align: center;
left: 15px;
bottom: 45px;
}
.device_right_top_img_text1 {
left: 0;
bottom: 0;
padding: 6px;
font-size: 18px;
width: 100%;
}
}
.device_right_top_content {
width: calc(100% - 136px);
@@ -841,13 +898,6 @@ $red: #ff0000;
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;
@@ -867,6 +917,24 @@ $red: #ff0000;
line-height: 24px;
}
}
.notice_INFO {
.notice_content,
.notice_time {
color: $green;
}
}
.notice_DEBUG {
.notice_content,
.notice_time {
color: $yellow;
}
}
.notice_ERROR {
.notice_content,
.notice_time {
color: $red;
}
}
}
}
}