<template>
|
<div class="SettingBox">
|
<div class="title">重启设置</div>
|
<div class="period">
|
<div class="label">重启周期</div>
|
|
<el-select
|
v-model="every"
|
placeholder="请选择"
|
popper-class="equipmentSelect"
|
>
|
<el-option
|
v-for="item in periodOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div class="time" v-if="every != 'close'">
|
<div class="label">重启时间</div>
|
<el-cascader
|
v-model="time"
|
:options="timeOptions"
|
:props="{ expandTrigger: 'hover' }"
|
popper-class="selectCascader"
|
separator=":"
|
></el-cascader>
|
</div>
|
|
<div class="date" v-if="every == 'weekly'">
|
<div class="label">重启日期</div>
|
<el-select
|
v-model="cronValueObj.week"
|
placeholder="请选择"
|
popper-class="equipmentSelect"
|
>
|
<el-option
|
v-for="item in weeks"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div class="date" v-if="every == 'monthly'">
|
<div class="label">重启日期</div>
|
<el-select
|
v-model="cronValueObj.day"
|
placeholder="请选择"
|
popper-class="equipmentSelect"
|
>
|
<el-option
|
v-for="item in days"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div class="btns">
|
<div class="button cancel" @click="close">取消</div>
|
<div class="button confirm" @click="save">确定</div>
|
</div>
|
|
<div class="close iconfont" @click="close"></div>
|
</div>
|
</template>
|
|
<script>
|
import { setRestartTask, getRestartTask } from "@/api/device";
|
export default {
|
name: "SettingBox",
|
props: {
|
id: {},
|
},
|
created() {
|
let mins = [];
|
let hours = [];
|
for (let i = 1; i <= 61; i++) {
|
if (i < 10) {
|
mins.push({ value: `0${i}`, label: `${i}分` });
|
} else {
|
mins.push({ value: i, label: `${i}分` });
|
}
|
}
|
|
console.log(mins);
|
for (let j = 1; j <= 25; j++) {
|
if (j < 10) {
|
hours.push({ value: `0${j}`, label: `${j}时`, children: mins });
|
} else {
|
hours.push({ value: j, label: `${j}时`, children: mins });
|
}
|
}
|
this.timeOptions = hours;
|
this.getTask();
|
},
|
data() {
|
return {
|
every: "close",
|
periodOptions: [
|
{
|
value: "close",
|
label: "关闭",
|
},
|
{
|
value: "daily",
|
label: "每日",
|
},
|
{
|
value: "weekly",
|
label: "每周",
|
},
|
{
|
value: "monthly",
|
label: "每月",
|
},
|
],
|
weeks: [
|
{ label: "星期一", value: "1" },
|
{ label: "星期二", value: "2" },
|
{ label: "星期三", value: "3" },
|
{ label: "星期四", value: "4" },
|
{ label: "星期五", value: "5" },
|
{ label: "星期六", value: "6" },
|
{ label: "星期日", value: "7" },
|
],
|
time: "",
|
timeOptions: [],
|
cronValueObj: {
|
min: "",
|
hour: "",
|
day: "",
|
month: "*",
|
week: "",
|
},
|
rebootCron: "",
|
cronText: "",
|
};
|
},
|
methods: {
|
close() {
|
this.$emit("close");
|
},
|
async save() {
|
if (this.every === "close") {
|
this.cronText = "";
|
const res = await setRestartTask({
|
nodeId: this.id,
|
task: "",
|
});
|
if (res.success) {
|
this.$notify({
|
title: "成功",
|
message: res.data,
|
type: "success",
|
});
|
} else {
|
this.$notify.error({
|
title: "错误",
|
message: "修改失败",
|
});
|
}
|
return;
|
}
|
if (this.every === "monthly") {
|
this.cronValueObj.week = "*";
|
}
|
if (this.every === "weekly") {
|
this.cronValueObj.day = "*";
|
}
|
if (this.every === "daily") {
|
this.cronValueObj.day = "*";
|
this.cronValueObj.week = "*";
|
}
|
|
if (this.time.length) {
|
this.cronValueObj.hour = this.time[0];
|
this.cronValueObj.min = this.time[1];
|
}
|
let obj = this.cronValueObj;
|
this.cronText =
|
obj.min +
|
" " +
|
obj.hour +
|
" " +
|
obj.day +
|
" " +
|
obj.month +
|
" " +
|
obj.week;
|
const res = await setRestartTask({
|
nodeId: this.id,
|
task: this.cronText,
|
});
|
|
if (res.success) {
|
this.$notify({
|
title: "成功",
|
message: res.data,
|
type: "success",
|
});
|
} else {
|
this.$notify.error({
|
title: "错误",
|
message: "修改失败",
|
});
|
}
|
},
|
async getTask() {
|
const res = await getRestartTask({
|
nodeId: this.id,
|
userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
|
});
|
this.rebootCron = res.data;
|
this.resolveExp();
|
},
|
resolveExp() {
|
// "准备反解析", this.expression;
|
if (this.rebootCron.length) {
|
let arr = this.rebootCron.split(" ");
|
if (arr.length >= 5) {
|
//6 位以上是合法表达式
|
this.cronValueObj.min = arr[0];
|
this.cronValueObj.hour = arr[1];
|
this.cronValueObj.day = arr[2];
|
this.cronValueObj.month = "*";
|
this.cronValueObj.week = arr[4];
|
}
|
|
if (this.cronValueObj.week != "*") {
|
this.every = "weekly";
|
} else if (this.cronValueObj.day != "*") {
|
this.every = "monthly";
|
} else {
|
this.every = "daily";
|
}
|
this.time = [`${this.cronValueObj.hour}`, `${this.cronValueObj.min}`];
|
} else {
|
//没有传入的表达式 则还原
|
this.clearCron();
|
}
|
},
|
clearCron() {
|
this.cronValueObj.min = "*";
|
this.cronValueObj.hour = "*";
|
this.cronValueObj.day = "";
|
this.cronValueObj.month = "*";
|
this.cronValueObj.week = "";
|
},
|
},
|
computed: {
|
days: () => {
|
let arr = [];
|
for (let i = 1; i < 32; i++) {
|
arr.push({
|
label: i + "日",
|
value: i + "",
|
});
|
}
|
return arr;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.SettingBox {
|
position: relative;
|
box-sizing: border-box;
|
position: fixed;
|
top: 230px;
|
left: 50%;
|
margin-left: -212px;
|
padding: 20px;
|
width: 424px;
|
height: 342px;
|
font-size: 14px;
|
background: #ffffff;
|
box-shadow: 0px 2px 16px rgba(0, 43, 106, 0.25);
|
z-index: 2;
|
|
.title {
|
margin-bottom: 30px;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.period,
|
.date,
|
.time {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
height: 40px;
|
}
|
|
.label {
|
margin-right: 10px;
|
}
|
|
::v-deep .el-input__inner {
|
padding: 10px 20px;
|
border-color: #c0c5cc;
|
|
&::-webkit-input-placeholder {
|
font-size: 14px;
|
color: #999;
|
}
|
}
|
|
::v-deep .el-radio__input {
|
.el-radio__inner {
|
border-color: #c0c5cc;
|
}
|
&.is-checked .el-radio__inner {
|
border-color: #c0c5cc;
|
background-color: #fff;
|
|
&::after {
|
width: 7px;
|
height: 7px;
|
background-color: #0065ff;
|
}
|
}
|
}
|
|
.el-select {
|
width: 318px;
|
|
::v-deep input:focus {
|
border-color: #0065ff;
|
}
|
|
::v-deep .el-input.is-focus .el-input__inner {
|
border-color: #0065ff;
|
}
|
|
::v-deep input {
|
border-radius: 0;
|
}
|
}
|
|
.el-cascader {
|
width: 318px;
|
|
::v-deep input:focus {
|
border-color: #0065ff;
|
}
|
|
::v-deep .el-input.is-focus .el-input__inner {
|
border-color: #0065ff;
|
}
|
::v-deep input {
|
border-radius: 0;
|
}
|
}
|
|
.btns {
|
position: absolute;
|
right: 20px;
|
bottom: 20px;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
line-height: 40px;
|
|
.confirm {
|
margin-left: 10px;
|
width: 104px;
|
height: 40px;
|
background: #0065ff;
|
color: #fff;
|
}
|
|
.cancel {
|
width: 104px;
|
height: 40px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
}
|
|
.close {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
font-size: 12px;
|
color: 187, 187, 187;
|
cursor: pointer;
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.equipmentSelect.el-select-dropdown.el-popper {
|
margin: 0;
|
|
.el-scrollbar {
|
width: 318px;
|
|
height: 120px;
|
}
|
|
.el-select-dropdown__wrap {
|
overflow-x: hidden;
|
}
|
|
.popper__arrow,
|
.popper__arrow::after {
|
display: none;
|
}
|
|
.el-select-dropdown__list {
|
padding: 0;
|
|
.el-select-dropdown__item {
|
width: 318px;
|
height: 40px;
|
border-radius: 4px;
|
color: #3d3d3d !important;
|
font-weight: normal !important;
|
font-size: 14px;
|
|
&:hover {
|
background-color: #f0f5fa;
|
span {
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.el-icon-arrow-up:before {
|
font-size: 18px;
|
}
|
}
|
|
.el-popper.el-cascader__dropdown.selectCascader {
|
width: 318px;
|
border: none;
|
margin: 0;
|
overflow-x: hidden;
|
|
.el-cascader-panel {
|
height: 120px;
|
}
|
|
* {
|
color: #3d3d3d;
|
border-color: rgba(255, 255, 2555, 0.1);
|
}
|
|
.in-active-path {
|
span {
|
color: #0065ff;
|
font-weight: normal;
|
}
|
}
|
|
.el-cascader-node.is-active {
|
span {
|
color: #0065ff;
|
font-weight: normal;
|
}
|
}
|
|
.el-icon-check {
|
display: none;
|
}
|
|
.el-cascader-node {
|
padding-left: 0;
|
height: 40px;
|
}
|
|
.el-cascader-node:hover {
|
background: #f0f5fa;
|
}
|
|
.el-scrollbar__view {
|
padding: 0;
|
}
|
|
.popper__arrow::after,
|
.popper__arrow {
|
display: none;
|
}
|
|
.el-cascader-node__label {
|
text-align: left;
|
}
|
|
.el-cascader-menu__wrap {
|
height: 175px;
|
}
|
}
|
</style>
|
