24kycj
954 lines
32 KiB
Vue
954 lines
32 KiB
Vue
<template>
|
||
<div class="container_box">
|
||
<!-- 头部 -->
|
||
<div class="flex_box flex_row_between top_box">
|
||
<div class="flex_box top_left">
|
||
<div @click="showWork" class="flex_box flex_row_center top_btn1">
|
||
<img src="@/assets/images/Plus1_icon.png" />
|
||
<div>新建作业</div>
|
||
</div>
|
||
<div class="flex_box flex_row_center top_btn2">
|
||
<img src="@/assets/images/Search_icon.png" />
|
||
<div>打开作业文件</div>
|
||
</div>
|
||
<div @click="$router.push({ path: '/manage' })" class="flex_box flex_row_center top_btn2">
|
||
<img src="@/assets/images/Setting_icon.png" />
|
||
<div>系统设置</div>
|
||
</div>
|
||
<div class="top_left_line"></div>
|
||
<el-switch class="top_left_status" v-model="workStatus" active-color="#07C160" inactive-color="#aaa"> </el-switch>
|
||
<div class="flex_box top_left_option">
|
||
<div class="top_left_text">完成拷贝数:</div>
|
||
<div class="top_left_num">9</div>
|
||
</div>
|
||
<div class="flex_box top_left_option">
|
||
<div class="top_left_text">废弃拷贝数:</div>
|
||
<div class="top_left_num top_left_num1">2</div>
|
||
</div>
|
||
<div class="flex_box top_left_option">
|
||
<div class="top_left_text">错误:</div>
|
||
<div class="top_left_num">0</div>
|
||
</div>
|
||
<div class="top_left_line"></div>
|
||
</div>
|
||
<user-info></user-info>
|
||
</div>
|
||
<!-- 设备 -->
|
||
<div class="flex_box device_box">
|
||
<!-- 左侧 -->
|
||
<div class="device_left">
|
||
<div class="flex_box device_left_top">
|
||
<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_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">{{$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">{{$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">
|
||
<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 v-if="infoStatus === 1" @click="infoStatus = 0" class="device_info_right_item">
|
||
<img src="@/assets/images/Arrow_right1_icon.png" />
|
||
</div>
|
||
<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 device_status${printer_info.printer_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 @click="handleRun" 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">{{ 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">{{ 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>
|
||
<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="work_box">
|
||
<div class="flex_box work_top">
|
||
<div class="work_top_text">作业列表</div>
|
||
</div>
|
||
<el-table max-height="250" class="work_table" :data="task_list" empty-text="暂无作业列表">
|
||
<el-table-column type="expand">
|
||
<template slot-scope="scope">
|
||
<el-table max-height="250" :data="scope.row.ass_task">
|
||
<el-table-column width="50" label=""></el-table-column>
|
||
<el-table-column type="index" width="80" label="序号">
|
||
<template slot-scope="child">
|
||
<div>{{ scope.$index+1 }}_{{ child.$index+1 }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<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>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="start_time" label="开始时间"></el-table-column>
|
||
<el-table-column prop="finish_time" label="结束时间"></el-table-column>
|
||
<el-table-column label="进度">
|
||
<template slot-scope="child">
|
||
<div class="work_progress">
|
||
<el-progress :text-inside="true" :percentage="child.row.copy_scheduler" status="success"></el-progress>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="task_status" label="状态">
|
||
<template slot-scope="child">
|
||
<div class="flex_box work_status_box">
|
||
<div>{{ statusList[child.row.task_status] }}</div>
|
||
<!-- <i class="el-icon-caret-bottom"></i> -->
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column type="index" width="80" label="序号"></el-table-column>
|
||
<el-table-column prop="task_uuid" label="作业ID"></el-table-column>
|
||
<el-table-column prop="task_name" label="任务名称"></el-table-column>
|
||
<!-- <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>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="task_size" label="大小">
|
||
<template slot-scope="scope">
|
||
<div>{{ $filterSize(scope.row.task_size) }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="CreateTime" label="开始时间"></el-table-column> -->
|
||
<!-- <el-table-column prop="FinishTime" label="结束时间"></el-table-column> -->
|
||
<el-table-column label="完成">
|
||
<template slot-scope="scope">
|
||
<div>{{ scope.row.finish_freq }}/{{ scope.row.total_freq }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="task_status" label="状态">
|
||
<template slot-scope="scope">
|
||
<div class="flex_box work_status_box">
|
||
<div>{{ statusList[scope.row.task_status] }}</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,
|
||
// 工作状态
|
||
infoStatus: 0,
|
||
runText: '',
|
||
runVal: 1,
|
||
runList: [
|
||
{
|
||
value: 1,
|
||
label: '重启设备'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '清除错误'
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '校准光盘桶'
|
||
},
|
||
{
|
||
value: 4,
|
||
label: '校准打印机'
|
||
},
|
||
{
|
||
value: 5,
|
||
label: '自动设置刻录机'
|
||
},
|
||
{
|
||
value: 6,
|
||
label: '设置左右盘仓'
|
||
}
|
||
],
|
||
// 剩余容量
|
||
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': '等待中',
|
||
'2': '文件准备中',
|
||
'3': '正在刻录',
|
||
'4': '正在打印',
|
||
'5': '已失败',
|
||
'6': '已取消',
|
||
'7': '已完成'
|
||
},
|
||
// 设备信息
|
||
printer_info: {},
|
||
// g光盘信息
|
||
cd_list: [],
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.state.chat.task_list': {
|
||
handler(val) {
|
||
if (val && val.length) {
|
||
let list = []
|
||
val.forEach((item) => {
|
||
let task_size = 0
|
||
item.ass_task.forEach((item2) => {
|
||
task_size = this.$accAdd(task_size, item2.task_size)
|
||
})
|
||
item.task_size = task_size
|
||
list.push(item)
|
||
})
|
||
this.task_list = list
|
||
}
|
||
},
|
||
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: {
|
||
...mapGetters(['name', 'roles'])
|
||
},
|
||
mounted() {
|
||
that = this
|
||
},
|
||
methods: {
|
||
// 执行
|
||
handleRun() {
|
||
const index = that.runList.findIndex((item) => item.value == that.runVal)
|
||
that.$message({
|
||
message: that.runList[index].label,
|
||
type: 'success'
|
||
})
|
||
},
|
||
// 新建作业
|
||
showWork() {
|
||
that.$refs.workAdd.show()
|
||
},
|
||
// 退出登录
|
||
goOut() {
|
||
this.$store.dispatch('FedLogOut').then(() => {
|
||
location.reload()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
$green: #00c325;
|
||
$yellow: #f5a623;
|
||
$red: #ff0000;
|
||
|
||
.container_box {
|
||
height: 100vh;
|
||
.top_box {
|
||
height: 78px;
|
||
padding: 0 32px;
|
||
background-color: #ffffff;
|
||
.top_left {
|
||
.top_btn1 {
|
||
cursor: pointer;
|
||
padding: 0 16px;
|
||
height: 30px;
|
||
background: #00c325;
|
||
border-radius: 6px;
|
||
margin-right: 16px;
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
color: #ffffff;
|
||
img {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
.top_btn2 {
|
||
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: 16px;
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
color: #00c325;
|
||
img {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
.top_left_line {
|
||
width: 2px;
|
||
height: 30px;
|
||
background: #e0e0e0;
|
||
margin: 0 16px;
|
||
}
|
||
.top_left_status {
|
||
padding: 0 16px;
|
||
zoom: 1.3;
|
||
}
|
||
.top_left_option {
|
||
margin-left: 16px;
|
||
.top_left_text {
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
color: #000000;
|
||
text-decoration: underline;
|
||
}
|
||
.top_left_num {
|
||
padding: 0 10px;
|
||
height: 28px;
|
||
background: #00c325;
|
||
border-radius: 6px;
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
color: #ffffff;
|
||
line-height: 28px;
|
||
margin-left: 12px;
|
||
}
|
||
.top_left_num1 {
|
||
background: #b8b8b8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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_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;
|
||
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;
|
||
}
|
||
.device_info_option_b_text1 {
|
||
width: 36px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
}
|
||
.el-icon-caret-bottom {
|
||
transition: all 0.5s;
|
||
}
|
||
}
|
||
.device_info_option_b1 {
|
||
.el-icon-caret-bottom {
|
||
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%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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_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;
|
||
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 {
|
||
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 - 640px);
|
||
.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_progress {
|
||
width: 80%;
|
||
::v-deep {
|
||
.el-progress-bar__outer {
|
||
height: 16px!important;
|
||
line-height: 16px!important;
|
||
.el-progress-bar__innerText {
|
||
font-size: 12px!important;
|
||
color: #fff!important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|