24kycj
805 lines
22 KiB
Vue
805 lines
22 KiB
Vue
<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="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="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="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 {
|
||
moveList: [
|
||
{
|
||
id: 1,
|
||
name: '校准打印机'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '校准上光驱'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '校准下光驱'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '校准盘仓'
|
||
}
|
||
],
|
||
actionList: [
|
||
{
|
||
id: 1,
|
||
name: '手动设置光驱'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '自动设置光驱'
|
||
}
|
||
],
|
||
serviceList: [
|
||
{
|
||
id: 1,
|
||
name: '重启设备'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '清除错误'
|
||
},
|
||
{
|
||
id: 3,
|
||
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) {
|
||
this.cdList = val.map((item) => {
|
||
item.cdType = 1
|
||
return item
|
||
})
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
methods: {
|
||
// 校准设备
|
||
handleMove(e) {
|
||
let that = this
|
||
switch (e.id) {
|
||
case 1:
|
||
// 校准设备
|
||
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:
|
||
// 校准上光驱
|
||
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:
|
||
// 校准下光驱
|
||
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('确定执行校准盘仓操作吗？', '温馨提示', {
|
||
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
|
||
}
|
||
},
|
||
// 设置设备
|
||
handleAction(e) {
|
||
let that = this
|
||
switch (e.id) {
|
||
case 1:
|
||
// 手动设置光驱
|
||
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
|
||
}
|
||
},
|
||
cdChange(index, e) {
|
||
let item = this.cdList[index]
|
||
item.cdType = e
|
||
this.$set(this.cdList, index, { ...item })
|
||
},
|
||
cdOpen(e) {
|
||
let item = this.cdList[e]
|
||
this.$store
|
||
.dispatch('chat/websocketsend', {
|
||
req_name: 'openCDDevByPath',
|
||
req_type: 2,
|
||
req_info: {
|
||
dev_path: item.dev_path
|
||
}
|
||
})
|
||
.then(() => {
|
||
this.$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 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
|
||
}
|
||
this.$store
|
||
.dispatch('chat/websocketsend', {
|
||
req_name: 'setCDDevice',
|
||
req_type: 2,
|
||
req_info: {
|
||
device_list: [
|
||
{
|
||
device_path: top[0].dev_path,
|
||
device_pos: 2
|
||
},
|
||
{
|
||
device_path: bottom[0].dev_path,
|
||
device_pos: 1
|
||
}
|
||
]
|
||
}
|
||
})
|
||
.then(() => {
|
||
this.$message({
|
||
message: '提交成功',
|
||
type: 'success'
|
||
})
|
||
this.cdShow = false
|
||
})
|
||
},
|
||
// 刷新时间
|
||
handleRefresh() {
|
||
this.$store.commit('chat/setData', {
|
||
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;
|
||
background: rgba(0, 195, 37, 0.12);
|
||
border-radius: 4px;
|
||
border: 1px solid rgba(0, 195, 37, 0.32);
|
||
line-height: 40px;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 19px;
|
||
color: #00c325;
|
||
margin: 6px;
|
||
}
|
||
}
|
||
.form_input {
|
||
width: 500px;
|
||
height: 42px;
|
||
background: #ffffff;
|
||
border-radius: 4px;
|
||
border: 1px solid #98e8a6;
|
||
overflow: hidden;
|
||
::v-deep {
|
||
.el-input-group__append {
|
||
font-size: 16px;
|
||
color: #000;
|
||
font-weight: 500;
|
||
}
|
||
.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: #00c325;
|
||
border-radius: 0px 4px 4px 0px;
|
||
}
|
||
}
|
||
}
|
||
|
||
::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: #00c325;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
</style>
|