Files
SoonWorkerD/src/renderer/views/manage/index.vue
T
2025-06-07 21:46:58 +08:00

1172 lines
31 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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 @click="handleAction(item)" v-for="(item, index) in actionList" :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 @click="handleMove(item)" 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 @click="handleService(item)" v-for="(item, index) in serviceList" :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.number="refreshTime" placeholder="请输入刷新时间">
<template slot="append"></template>
</el-input>
<el-button @click="handleRefresh" 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>
<!-- 手动校准驱动 -->
<el-dialog center title="手动设置光驱" :visible.sync="cdShow" width="1000px">
<div class="cd_box" v-loading="cdList.length === 0">
<div class="cd_title">请通过点击按钮弹出光驱托盘判断并设置光驱</div>
<div class="cd_desc">需对光驱进行手动设置</div>
<div class="cd_desc">使用下拉方框来指定设备中的哪个光驱是上光驱哪个是下光驱</div>
<div class="cd_list">
<div class="flex_box flex_row_between cd_item" v-for="(item, index) in cdList" :key="index">
<div class="cd_name">{{ item.dev_name }}({{ item.dev_path }})</div>
<div class="flex_box cd_r">
<el-select v-model="item.cdType" @change="cdChange(index, item.cdType)">
<el-option v-for="type in cdOptions" :key="type.value" :label="type.label" :value="type.value"> </el-option>
</el-select>
<el-button @click="cdOpen(index)" type="success">打开</el-button>
<el-button @click="cdClose(index)" type="danger">关闭</el-button>
</div>
</div>
</div>
<div class="flex_box flex_row_center cd_footer">
<el-button @click="cdCancel" class="cd_footer_btn1">取消</el-button>
<el-button @click="cdSubmit" class="cd_footer_btn2" type="primary">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import TabBar from '@/components/tabBar/tabBar.vue'
export default {
name: 'manage',
components: { TabBar },
data() {
return {
printer_info: {},
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: '自动设置光驱'
// }
],
serviceList: [
{
id: 4,
name: '刷新光盘桶'
},
{
id: 1,
name: '重启设备'
},
{
id: 2,
name: '清除错误'
},
{
id: 3,
name: '进入运输模式'
},
{
id: 5,
name: '进入循环模式'
}
],
refreshTime: 10,
sleepTime: 300000,
isDel: true,
langVal: 'zhCN',
langList: [
{
label: '简体中文',
value: 'zhCN'
},
{
label: 'English',
value: 'en'
},
{
label: '繁体中文',
value: 'zhYW'
}
],
cdList: [],
cdShow: false,
cdOptions: [
{
value: 1,
label: '不在设备中'
},
{
value: 2,
label: '上光驱'
},
{
value: 3,
label: '下光驱'
}
]
}
},
computed: {
...mapGetters(['name', 'roles'])
},
watch: {
'$store.state.chat.refreshTime': {
handler(val) {
this.refreshTime = val
},
immediate: true,
deep: true
},
'$store.state.chat.cdList': {
handler(val) {
if (!val || val.length === 0) {
this.cdList = []
return
}
this.cdList = val.map((item) => {
item.cdType = 1
return item
})
},
deep: true,
immediate: true
},
'$store.state.chat.printer_info': {
handler(val) {
let data = { ...val }
this.printer_info = { ...data }
if (val.printer_name && val.printer_name === 'SE3') {
this.moveList = [
{
id: 4,
name: '校准光盘桶'
},
{
id: 5,
name: '校准打印头'
},
{
id: 6,
name: '清洗打印头'
}
]
this.cdOptions = [
{
value: 1,
label: '不在设备中'
},
{
value: 2,
label: '上光驱'
}
]
this.serviceList = [
{
id: 4,
name: '刷新光盘桶'
},
{
id: 1,
name: '重启设备'
},
{
id: 2,
name: '清除错误'
},
{
id: 5,
name: '进入循环模式'
}
]
} else {
this.moveList = [
{
id: 1,
name: '校准打印机'
},
{
id: 2,
name: '校准上光驱'
},
{
id: 3,
name: '校准下光驱'
},
{
id: 4,
name: '校准光盘桶'
},
{
id: 5,
name: '校准打印头'
},
{
id: 6,
name: '清洗打印头'
}
]
this.cdOptions = [
{
value: 1,
label: '不在设备中'
},
{
value: 2,
label: '上光驱'
},
{
value: 3,
label: '下光驱'
}
]
this.serviceList = [
{
id: 4,
name: '刷新光盘桶'
},
{
id: 1,
name: '重启设备'
},
{
id: 2,
name: '清除错误'
},
{
id: 3,
name: '进入运输模式'
},
{
id: 5,
name: '进入循环模式'
}
]
}
},
deep: true,
immediate: true
}
},
mounted() {
let type = this.$route.query.type
if (type && type === 'cddev') {
this.handleAction(this.actionList[0])
}
},
methods: {
// 校准设备
handleMove(e) {
let that = this
switch (e.id) {
case 1:
// 校准打印机上的托盘
that.$store
.dispatch('chat/websocketsend', {
req_name: 'openPrinterClay',
req_type: 2,
req_info: {}
})
.then(() => {
that
.$confirm('请在打印机托盘放入一张光盘,点击确定后将自动校准打印机', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'CaliPrinter',
req_type: 2,
req_info: {
cali_num: 2
}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
})
break
case 2:
// 校准上光驱
if (that.printer_info.is_set_cddev == 1) {
that.$message('请先设置上下光驱')
setTimeout(() => {
this.handleAction(this.actionList[0])
}, 1000)
return
}
that.$store
.dispatch('chat/websocketsend', {
req_name: 'openCDDevByPath',
req_type: 2,
req_info: {
dev_path: that.$store.state.chat.cd_list[0].dev_path
}
})
.then(() => {
that
.$confirm('请在上光驱放入一张光盘,点击确定后将自动校准上光驱', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'CaliPrinter',
req_type: 2,
req_info: {
cali_num: 0
}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
})
break
case 3:
// 校准下光驱
if (that.printer_info.is_set_cddev == 1) {
that.$message('请先设置上下光驱')
setTimeout(() => {
this.handleAction(this.actionList[0])
}, 1000)
return
}
that.$store
.dispatch('chat/websocketsend', {
req_name: 'openCDDevByPath',
req_type: 2,
req_info: {
dev_path: that.$store.state.chat.cd_list[1].dev_path
}
})
.then(() => {
that
.$confirm('请在下光驱放入一张光盘,点击确定后将自动校准下光驱', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'CaliPrinter',
req_type: 2,
req_info: {
cali_num: 1
}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
})
break
case 4:
// 校准光盘桶
that
.$confirm('请在所有光盘桶放置一张光盘,点击确定后将校准每一个光盘桶的数量为 1', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'CaliCDStone',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
case 5:
// 校准墨盒上的打印头
that
.$confirm('请在进盘仓放入一张空白的可打印光盘,再点击确定', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'CaliPrinterHead',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
case 6:
// 清洗墨盒上的打印头
that
.$confirm('请在进盘仓放入一张空白的可打印光盘,再点击确定', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'CleanPrinterHead',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
}
},
// 设置设备
handleAction(e) {
let that = this
switch (e.id) {
case 1:
console.log('手动设置光驱')
// 手动设置光驱
that.$store
.dispatch('chat/websocketsend', {
req_name: 'get_all_cd',
req_type: 2,
req_info: {}
})
.then(() => {
that.cdShow = true
})
break
case 2:
// 自动设置光驱
that
.$confirm('请再左右光盘桶至少放入一张光盘,点击确认后将自动设置上下光驱,如果自动设置失败请手动设置光驱', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'autoSetCDDev',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
}
},
// 维护设备
handleService(e) {
let that = this
switch (e.id) {
case 1:
// 重启设备
that
.$confirm('点击确定将执行重启设备操作', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'resetPrinter',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
case 2:
// 清除错误
that
.$confirm('点击确定将执行清除错误操作', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'cleanError',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
case 3:
// 进入运输模式
that
.$confirm('请确保已经取掉左右光盘桶托架,点击确定后设备将进入运输模式', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'TransportMode',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
case 4:
// 刷新光盘桶
that
.$confirm('点击确定后将刷新所有光盘桶的光盘数量。', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'RefreshCdNum',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
case 5:
// 进入循环模式
that
.$confirm('请确保已经取掉左右光盘桶托架,点击确定后设备将进入循环模式', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.$store
.dispatch('chat/websocketsend', {
req_name: 'CycleMode',
req_type: 2,
req_info: {}
})
.then(() => {
that.$message({
message: '已发送指令',
type: 'success'
})
})
})
break
}
},
cdChange(index, e) {
let item = this.cdList[index]
item.cdType = e
this.$set(this.cdList, index, { ...item })
},
cdOpen(e) {
let that = this
let item = that.cdList[e]
that.$store
.dispatch('chat/websocketsend', {
req_name: 'openCDDevByPath',
req_type: 2,
req_info: {
dev_path: item.dev_path
}
})
.then(() => {
setTimeout(() => {
that.cdClose(e)
}, 5000)
that.$message({
message: '已发送指令',
type: 'success'
})
})
},
cdClose(e) {
let item = this.cdList[e]
this.$store
.dispatch('chat/websocketsend', {
req_name: 'closeCDDevByPath',
req_type: 2,
req_info: {
dev_path: item.dev_path
}
})
.then(() => {
this.$message({
message: '已发送指令',
type: 'success'
})
})
},
cdCancel() {
this.cdShow = false
},
cdSubmit() {
let device_list = [
{
device_path: this.cdList[0].dev_path,
device_pos: 2
}
]
if (this.printer_info.printer_name !== 'SE3') {
let top = this.cdList.filter((item) => item.cdType === 2)
let bottom = this.cdList.filter((item) => item.cdType === 3)
if (!top || top.length === 0) {
this.$message({
message: '请设置上光驱',
type: 'error'
})
return
}
if (!bottom || bottom.length === 0) {
this.$message({
message: '请设置下光驱',
type: 'error'
})
return
}
if (top.length > 1) {
this.$message({
message: '上光驱只能设置一个',
type: 'error'
})
return
}
if (bottom.length > 1) {
this.$message({
message: '下光驱只能设置一个',
type: 'error'
})
return
}
device_list = [
{
device_path: top[0].dev_path,
device_pos: 2
},
{
device_path: bottom[0].dev_path,
device_pos: 1
}
]
} else {
if (!this.cdList[0].cdType) {
this.$message({
message: '请设置光驱',
type: 'error'
})
return
}
}
this.$store
.dispatch('chat/websocketsend', {
req_name: 'setCDDevice',
req_type: 2,
req_info: {
device_list: device_list
}
})
.then(() => {
this.$message({
message: '提交成功',
type: 'success'
})
this.cdShow = false
})
},
// 刷新时间
handleRefresh() {
this.$store.dispatch('chat/setDatas', {
name: 'refreshTime',
data: this.refreshTime
})
this.$message({
message: '设置成功',
type: 'success'
})
}
}
}
</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;
color: #333;
border: 1px solid #999;
border-radius: 4px;
line-height: 40px;
text-align: center;
font-weight: 500;
font-size: 19px;
margin: 6px;
&:hover {
background: rgba(0, 195, 37, 0.12);
border: 1px solid rgba(0, 195, 37, 0.32);
color: #00c325;
}
}
}
.form_input {
width: 500px;
height: 42px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #999;
overflow: hidden;
::v-deep {
.el-input-group__append {
font-size: 16px;
color: #000;
font-weight: 500;
border-radius: 0;
}
.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: transparent;
border-radius: 0px 4px 4px 0px;
color: #333;
font-weight: bold;
font-size: 16px;
&:hover {
background: #00c325;
color: #fff;
border: none;
}
}
}
}
::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: 19px;
line-height: 24px;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #333;
}
}
.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;
}
}
}
}
}
}
}
}
}
.cd_box {
.el-input {
height: 40px;
line-height: 40px;
}
::v-deep {
.el-input__inner {
width: 240px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #000;
font-weight: 500;
}
.el-input__icon {
font-size: 16px;
height: 40px;
line-height: 40px;
font-weight: bold;
color: #000;
}
}
.cd_title {
font-size: 16px;
font-weight: 500;
color: #000;
line-height: 28px;
}
.cd_desc {
font-size: 13px;
font-weight: 500;
color: #666;
line-height: 24px;
}
.cd_list {
padding: 32px 0;
.cd_item {
padding: 12px 0;
}
.el-button {
margin: 0;
padding: 0;
width: 80px;
height: 40px;
font-size: 15px;
}
.cd_name {
font-size: 14px;
color: #000;
line-height: 24px;
}
.cd_r {
gap: 24px;
}
}
.cd_footer {
gap: 24px;
.cd_footer_btn1 {
width: 120px;
height: 40px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #000000;
font-weight: 500;
font-size: 16px;
color: #000000;
padding: 0;
margin: 0 12px;
}
.cd_footer_btn2 {
width: 120px;
height: 40px;
background: #00c325;
border-radius: 4px;
font-weight: 500;
font-size: 16px;
padding: 0;
margin: 0 12px;
}
}
}
::v-deep .el-dialog__title {
font-size: 24px;
}
</style>
t: 24px;
}
.cd_list {
padding: 32px 0;
.cd_item {
padding: 12px 0;
}
.el-button {
margin: 0;
padding: 0;
width: 80px;
height: 40px;
font-size: 15px;
}
.cd_name {
font-size: 14px;
color: #000;
line-height: 24px;
}
.cd_r {
gap: 24px;
}
}
.cd_footer {
gap: 24px;
.cd_footer_btn1 {
width: 120px;
height: 40px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #000000;
font-weight: 500;
font-size: 16px;
color: #000000;
padding: 0;
margin: 0 12px;
}
.cd_footer_btn2 {
width: 120px;
height: 40px;
background: #00c325;
border-radius: 4px;
font-weight: 500;
font-size: 16px;
padding: 0;
margin: 0 12px;
}
}
}
::v-deep .el-dialog__title {
font-size: 24px;
}
</style>