<template>
|
<div class="SettingBox">
|
<div class="title">算力设置</div>
|
|
<div class="settingBody">
|
<div class="settingItem">
|
<div class="label">总算力:</div>
|
<div class="data">{{ total }}通道</div>
|
<div class="label">实时算力:</div>
|
<div class="data">{{ realTime.total }}通道</div>
|
</div>
|
|
<div class="settingItem">
|
<div class="label">轮询时间:</div>
|
<el-input-number
|
class="time"
|
v-model="formdata.poll_period"
|
:controls="false"
|
:min="0"
|
:max="60 * 24 * 1"
|
></el-input-number
|
>分钟
|
</div>
|
|
<div class="settingItem">
|
<div class="label">轮询开关:</div>
|
<el-switch
|
v-model="formdata.enable"
|
active-color="#D4E3FA"
|
inactive-color="#E9EBEE"
|
:width="56"
|
>
|
</el-switch>
|
</div>
|
|
<div class="settingItem">
|
<div class="label">轮询算力:</div>
|
<el-input-number
|
v-model="formdata.pollChannelCount"
|
controls-position="right"
|
:max="limit"
|
:min="0"
|
@change="changePoll"
|
></el-input-number
|
>分钟
|
</div>
|
|
<div class="settingItem">
|
<div class="label">数据栈算力:</div>
|
<el-input-number
|
v-model="stack.total"
|
controls-position="right"
|
:max="limit"
|
:min="0"
|
@change="changeStack"
|
></el-input-number
|
>分钟
|
</div>
|
|
<div class="btns">
|
<div class="cancel button" @click="close()">取消</div>
|
<div class="submit button" @click="save()">保存</div>
|
</div>
|
</div>
|
|
<div class="close iconfont" @click="close()"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getPollConfig,
|
deviceStatisticRunInfo,
|
savePollConfig,
|
} from "@/api/clusterManage";
|
export default {
|
props: {
|
id: {},
|
},
|
data() {
|
return {
|
realTime: {},
|
total: "",
|
polling: {},
|
stack: {},
|
formdata: {
|
deviceId: "",
|
delay: 10,
|
enable: true,
|
pollChannelCount: 0,
|
poll_period: 0,
|
videoChannelCount: 0,
|
},
|
stackChannel: 0,
|
limit: 100,
|
};
|
},
|
created() {
|
this.getFormData();
|
this.chooseDevice();
|
},
|
|
methods: {
|
async getFormData() {
|
const res = await getPollConfig({ deviceId: this.id });
|
this.formdata.deviceId = this.id;
|
this.formdata.enable = res.data.enable;
|
this.formdata.poll_period = res.data.poll_period;
|
this.formdata.pollChannelCount = res.data.pollChannelCount;
|
this.$set(this.formdata, "pollChannelCount", res.data.pollChannelCount);
|
this.$forceUpdate();
|
},
|
async chooseDevice() {
|
const res1 = await deviceStatisticRunInfo({ deviceId: [this.id] });
|
if (res1 && res1.success) {
|
this.total = res1.data.channelTotal;
|
this.realTime = {
|
total: res1.data.realValidCount,
|
valid: res1.data.realTotal,
|
invalid: res1.data.realInvalidCount,
|
run: res1.data.realRunningCount,
|
noDeal:
|
res1.data.realTotal -
|
res1.data.realRunningCount -
|
res1.data.realInvalidCount,
|
};
|
this.polling = {
|
valid: res1.data.pollTotal,
|
total: res1.data.pollChannelCount,
|
invalid: res1.data.pollInvalidCount,
|
run: res1.data.pollRunningCount,
|
noDeal:
|
res1.data.pollTotal -
|
res1.data.pollRunningCount -
|
res1.data.pollInvalidCount,
|
};
|
|
this.stack = {
|
total: res1.data.stackChannelCount,
|
valid: res1.data.stackTotal,
|
invalid: res1.data.stackInvalidCount,
|
run: res1.data.stackRunningCount,
|
noDeal:
|
res1.data.stackTotal -
|
res1.data.stackInvalidCount -
|
res1.data.stackRunningCount,
|
};
|
|
this.limit = this.total - this.realTime.total;
|
|
this.$forceUpdate();
|
}
|
},
|
close() {
|
this.$emit("close");
|
},
|
//监听轮询算力
|
changePoll(newVal, oldVal) {
|
if (newVal > oldVal) {
|
this.stack.total--;
|
}
|
if (newVal < oldVal) {
|
this.stack.total++;
|
}
|
this.$forceUpdate();
|
},
|
//监听数据栈算力
|
changeStack(newVal, oldVal) {
|
if (newVal > oldVal) {
|
this.formdata.pollChannelCount--;
|
}
|
if (newVal < oldVal) {
|
this.formdata.pollChannelCount++;
|
}
|
},
|
async save() {
|
this.formdata.videoChannelCount = this.stack.total;
|
const res = await savePollConfig(this.formdata);
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功",
|
});
|
}
|
this.close();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.SettingBox {
|
position: fixed;
|
width: 424px;
|
height: 442px;
|
top: 50%;
|
left: 50%;
|
margin-top: -221px;
|
margin-left: -212px;
|
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
|
z-index: 3;
|
background-color: #fff;
|
|
.title {
|
padding: 20px;
|
font-size: 16px;
|
font-weight: 700;
|
border-bottom: 1px solid #e9ebee;
|
}
|
|
.settingBody {
|
box-sizing: border-box;
|
padding: 20px;
|
|
.settingItem {
|
margin-bottom: 30px;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
.label {
|
margin-right: 10px;
|
color: #666;
|
}
|
.data {
|
margin-right: 30px;
|
font-weight: 700;
|
}
|
.el-switch ::v-deep {
|
height: 24px;
|
.el-switch__core {
|
height: 24px;
|
border-radius: 16px;
|
}
|
.el-switch__core::after {
|
margin-top: 2px;
|
margin-left: 3px;
|
width: 16px;
|
height: 16px;
|
background-color: #999999;
|
}
|
}
|
.el-switch.is-checked ::v-deep {
|
.el-switch__core::after {
|
margin-left: -20px;
|
|
background-color: #0065ff;
|
}
|
}
|
|
.el-input-number ::v-deep {
|
width: 109px;
|
border-radius: 0;
|
|
input {
|
width: 64px;
|
height: 32px;
|
border-radius: 0;
|
padding: 0 0;
|
}
|
|
.el-input-number__decrease {
|
line-height: 16px;
|
bottom: 3px;
|
}
|
|
.el-input-number__increase {
|
top: 3px;
|
line-height: 16px;
|
}
|
}
|
|
.time {
|
width: 70px;
|
height: 32px;
|
}
|
}
|
|
.btns {
|
margin-top: 10px;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
line-height: 40px;
|
font-size: 14px;
|
|
.cancel {
|
margin-right: 10px;
|
width: 104px;
|
height: 40px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.submit {
|
width: 104px;
|
height: 40px;
|
color: #fff;
|
background-color: #0065ff;
|
border: 1px solid #0065ff;
|
}
|
}
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 12px;
|
color: #666;
|
cursor: pointer;
|
}
|
}
|
</style>
|
