|
|
|
|
@ -0,0 +1,427 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="mappsetBox">
|
|
|
|
|
<!-- cmdid -->
|
|
|
|
|
<div class="modelCheck">
|
|
|
|
|
<div class="checkgroup">
|
|
|
|
|
<el-checkbox v-model="mappForm.mntnMode">运维模式</el-checkbox>
|
|
|
|
|
<el-checkbox v-model="mappForm.quickHbMode">快心跳模式</el-checkbox>
|
|
|
|
|
<el-checkbox v-model="mappForm.separateNetwork"
|
|
|
|
|
>运维使用独立网络（SIM卡2）</el-checkbox
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
<div class="cmdMsg serveBox">
|
|
|
|
|
<div class="cmdLeft">
|
|
|
|
|
<h4>Server</h4>
|
|
|
|
|
<el-input v-model="mappForm.server" size="mini"></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cmdRight portRight">
|
|
|
|
|
<h4>Port</h4>
|
|
|
|
|
<el-input v-model="mappForm.port" size="mini"></el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="gropBtn">
|
|
|
|
|
<el-button type="primary" size="mini" @click="dellClick"
|
|
|
|
|
>默认主站</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
<div class="cmdMsg serveBox">
|
|
|
|
|
<div class="cmdLeft">
|
|
|
|
|
<h4>心跳模式</h4>
|
|
|
|
|
<el-select
|
|
|
|
|
size="mini"
|
|
|
|
|
v-model="mappForm.usingAbsHbTime"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in hbModelOptions"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
<div class="cmdMsg">
|
|
|
|
|
<div class="cmdLeft heartClass">
|
|
|
|
|
<h4>心跳周期</h4>
|
|
|
|
|
<el-input v-model="mappForm.heartbeat" size="mini"></el-input>
|
|
|
|
|
<b>分钟（默认10分钟）</b>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cmdRight qualityClass">
|
|
|
|
|
<h4>快心跳周期</h4>
|
|
|
|
|
<el-input v-model="mappForm.quickHeartbeat" size="mini"></el-input>
|
|
|
|
|
<b>秒（默认60分钟）</b>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
<div class="timeBox">
|
|
|
|
|
<h4>固定心跳时间</h4>
|
|
|
|
|
<div class="timeList">
|
|
|
|
|
<span
|
|
|
|
|
class="timeMsg"
|
|
|
|
|
v-for="(item, index) in timearr"
|
|
|
|
|
:key="index"
|
|
|
|
|
:class="{ selected: index === selectedIndex }"
|
|
|
|
|
@click="selectItem(index)"
|
|
|
|
|
>
|
|
|
|
|
{{ item }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btngroup">
|
|
|
|
|
<el-button type="primary" @click="addTime">添加</el-button>
|
|
|
|
|
<el-button type="danger" @click="deleteTime">删除</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
<div class="cmdMsg">
|
|
|
|
|
<div class="cmdLeft mpappClass">
|
|
|
|
|
<h4>保活检测时间</h4>
|
|
|
|
|
<el-input v-model="mappForm.mpappMonitorTimeout" size="mini"></el-input>
|
|
|
|
|
<b>分钟（有效值5-35，默认30）</b>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cmdRight logClass">
|
|
|
|
|
<h4>日志保存时间</h4>
|
|
|
|
|
<el-input v-model="mappForm.timeForKeepingLogs" size="mini"></el-input>
|
|
|
|
|
<b>天（有效值5-60，默认15）</b>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeDialog" v-if="dialogVisible">
|
|
|
|
|
<div class="dialogContain">
|
|
|
|
|
<div class="head">
|
|
|
|
|
<span>输入时间</span>
|
|
|
|
|
<span
|
|
|
|
|
@click="dialogVisible = false"
|
|
|
|
|
class="el-dialog__close el-icon el-icon-close"
|
|
|
|
|
></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timeselectClass">
|
|
|
|
|
<h4>选择时间</h4>
|
|
|
|
|
<el-time-picker format v-model="timeVal" placeholder="任意时间点">
|
|
|
|
|
</el-time-picker>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="pushTime">确 定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
props: ["terimMsgid"],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
timearr: [], //时间数组
|
|
|
|
|
timeVal: "", //选择时间
|
|
|
|
|
selectedIndex: null, // 用于跟踪被选中的span的索引
|
|
|
|
|
secondsArray: [], //转换后的时间
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
mappForm: {
|
|
|
|
|
mntnMode: false, //运维模式
|
|
|
|
|
quickHbMode: false, //快心跳模式
|
|
|
|
|
separateNetwork: false, //运维使用独立网络（SIM卡2）
|
|
|
|
|
server: "", //Server
|
|
|
|
|
port: "", //Port
|
|
|
|
|
usingAbsHbTime: "", //心跳模式
|
|
|
|
|
heartbeat: "", //心跳周期
|
|
|
|
|
quickHeartbeat: "", //快心跳周期
|
|
|
|
|
absHeartbeats: [], //固定心跳时间
|
|
|
|
|
mpappMonitorTimeout: "", //保活检测时间
|
|
|
|
|
timeForKeepingLogs: "", //日志保存时间
|
|
|
|
|
},
|
|
|
|
|
hbModelOptions: [
|
|
|
|
|
{
|
|
|
|
|
value: 1,
|
|
|
|
|
label: "每天固定时间",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 2,
|
|
|
|
|
label: "周期性时间",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
originalmAppForm: {}, // 用于存储 appForm 的初始值
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// 组件创建时，将 channelForm 的值深拷贝到 originalChannelForm
|
|
|
|
|
this.originalmAppForm = JSON.parse(JSON.stringify(this.mappForm));
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
// 计算属性，返回已更改的字段对象
|
|
|
|
|
changedmappFields() {
|
|
|
|
|
const changes = {};
|
|
|
|
|
for (const key in this.mappForm) {
|
|
|
|
|
if (
|
|
|
|
|
this.mappForm.hasOwnProperty(key) &&
|
|
|
|
|
this.mappForm[key] !== this.originalmAppForm[key]
|
|
|
|
|
) {
|
|
|
|
|
changes[key] = this.mappForm[key];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return changes;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
methods: {
|
|
|
|
|
//DELL主站
|
|
|
|
|
dellClick() {
|
|
|
|
|
this.mappForm.server = "61.169.135.146";
|
|
|
|
|
this.mappForm.port = "6891";
|
|
|
|
|
},
|
|
|
|
|
//添加时间
|
|
|
|
|
addTime() {
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
},
|
|
|
|
|
// 将时间字符串转换为秒数
|
|
|
|
|
convertToSeconds(timeStr) {
|
|
|
|
|
const [hours, minutes, seconds] = timeStr.split(":").map(Number);
|
|
|
|
|
return hours * 3600 + minutes * 60 + seconds;
|
|
|
|
|
},
|
|
|
|
|
//把事件push进去
|
|
|
|
|
pushTime() {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
console.log(this.timeVal);
|
|
|
|
|
this.timeVal = this.$moment(this.timeVal).format("HH:mm:ss");
|
|
|
|
|
if (!this.timearr.includes(this.timeVal)) {
|
|
|
|
|
// 如果不存在，则添加到数组中
|
|
|
|
|
this.timearr.push(this.timeVal);
|
|
|
|
|
}
|
|
|
|
|
console.log(this.timearr);
|
|
|
|
|
this.secondsArray = this.timearr.map(this.convertToSeconds);
|
|
|
|
|
console.log(this.secondsArray);
|
|
|
|
|
},
|
|
|
|
|
//选中添加背景色
|
|
|
|
|
selectItem(index) {
|
|
|
|
|
this.selectedIndex = index; // 更新被选中的索引
|
|
|
|
|
},
|
|
|
|
|
// 删除当前选中的时间项
|
|
|
|
|
deleteTime() {
|
|
|
|
|
if (
|
|
|
|
|
this.selectedIndex !== null &&
|
|
|
|
|
this.timearr[this.selectedIndex] !== undefined
|
|
|
|
|
) {
|
|
|
|
|
// 从数组中移除选中的项
|
|
|
|
|
this.timearr.splice(this.selectedIndex, 1);
|
|
|
|
|
// 重置选中索引（如果需要）
|
|
|
|
|
this.selectedIndex = null;
|
|
|
|
|
// 如果删除后索引超出范围，可以选择不重置或将其设置为最后一个元素的索引
|
|
|
|
|
// 例如：this.selectedIndex = this.timearr.length - 1; 但要注意边界条件
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//点击确定
|
|
|
|
|
handleConfim() {
|
|
|
|
|
console.log(this.mappForm);
|
|
|
|
|
console.log(this.changedmappFields); // 查看哪些字段被更改了
|
|
|
|
|
const result = [];
|
|
|
|
|
for (const [key, value] of Object.entries(this.changedmappFields)) {
|
|
|
|
|
console.log(value);
|
|
|
|
|
let type, valueToStore;
|
|
|
|
|
if (typeof value === "string") {
|
|
|
|
|
// 尝试将字符串转换为整数（如果可能），但这里我们保持为字符串
|
|
|
|
|
// 注意：这里不转换，以保持原始指示
|
|
|
|
|
type = 1; // 字符串
|
|
|
|
|
valueToStore = value;
|
|
|
|
|
} else if (typeof value === "number") {
|
|
|
|
|
if (Number.isInteger(value)) {
|
|
|
|
|
} else {
|
|
|
|
|
type = 2; // 浮点数
|
|
|
|
|
}
|
|
|
|
|
valueToStore = value;
|
|
|
|
|
} else if (typeof value === "boolean") {
|
|
|
|
|
type = 0; // 布尔值转换为整数
|
|
|
|
|
valueToStore = value ? 1 : 0;
|
|
|
|
|
}
|
|
|
|
|
if (key == "mpappMonitorTimeout") {
|
|
|
|
|
type = 0; // 布尔值转换为整数
|
|
|
|
|
valueToStore = value * 60000;
|
|
|
|
|
}
|
|
|
|
|
if (key == "absHeartbeats") {
|
|
|
|
|
type = 1; // 布尔值转换为整数
|
|
|
|
|
valueToStore = this.secondsArray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
result.push({ name: key, value: valueToStore, type: type });
|
|
|
|
|
}
|
|
|
|
|
console.log(result);
|
|
|
|
|
var params = {
|
|
|
|
|
action: "upd_cfg",
|
|
|
|
|
termIds: [this.terimMsgid.id],
|
|
|
|
|
path: " /sdcard/com.xypower.mpmaster/data/",
|
|
|
|
|
fn: "Master.json",
|
|
|
|
|
packageName: "com.xypower.mpmaster",
|
|
|
|
|
configs: result,
|
|
|
|
|
};
|
|
|
|
|
console.log(params);
|
|
|
|
|
console.log(this.$parent.$parent.$parent);
|
|
|
|
|
this.$parent.$parent.handleclose();
|
|
|
|
|
this.$parent.$parent.$parent.changeIssue(params);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.mappsetBox {
|
|
|
|
|
max-height: 442px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
padding-right: 12px;
|
|
|
|
|
.el-divider--horizontal {
|
|
|
|
|
margin: 6px 0px;
|
|
|
|
|
background-color: #edeaea;
|
|
|
|
|
}
|
|
|
|
|
h4 {
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
b {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
.modelCheck {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.cmdMsg {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.cmdLeft {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 40px;
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 220px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cmdRight {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.gropBtn {
|
|
|
|
|
margin-left: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.heartClass {
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 108px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.qualityClass {
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.mpappClass {
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 62px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.logClass {
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 100px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.timeBox {
|
|
|
|
|
display: flex;
|
|
|
|
|
.timeList {
|
|
|
|
|
width: 290px;
|
|
|
|
|
height: 160px;
|
|
|
|
|
border: 1px solid #dcdfe6;
|
|
|
|
|
margin-right: 12px;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
span {
|
|
|
|
|
height: 24px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding-left: 8px;
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #169e8c;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.selected {
|
|
|
|
|
background-color: #169e8c;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btngroup {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.el-button + .el-button {
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.timeDialog {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
z-index: 3000;
|
|
|
|
|
.dialogContain {
|
|
|
|
|
width: 300px;
|
|
|
|
|
//height: 200px;
|
|
|
|
|
background: #fcc;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translate(-50%, -50%); /* 完美居中 */
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.head {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
span {
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #303133;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.el-dialog__close {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
color: #909399;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #169e8c;
|
|
|
|
|
background: #e2e2e2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.timeselectClass {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 12px;
|
|
|
|
|
h4 {
|
|
|
|
|
width: 80px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dialog-footer {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
fanluyan
11 months ago