<template>
|
<div class="card flex-c">
|
<div class="card-title">
|
<div class="flex-r">
|
{{ title }}
|
</div>
|
<el-checkbox v-model="checked1" @change="changed"></el-checkbox>
|
</div>
|
<div class="card-content">
|
<div class="col">
|
实时:
|
<div :class="['value', { alarm: !!value }]">
|
{{ value ? "告警" : "正常" }}
|
</div>
|
</div>
|
<div class="col">
|
模拟:
|
<div class="btn">
|
<gradient-btn
|
:active="setFlag"
|
:disabled="!hasPermission"
|
@click="handlerClick"
|
size="xs"
|
>{{ setFlag ? "执行中" : "执行" }}</gradient-btn
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import gradientBtn from "@/components/gradientBtn.vue";
|
import { setAlarm } from "../js/apis";
|
import changeBinaryBits from "@/assets/js/changeBinaryBits";
|
import getBit from "@/assets/js/getBit";
|
import setBitAtPositions from "@/assets/js/setBitAtPositions";
|
|
export default {
|
name: "",
|
props: {
|
option: {
|
type: Object,
|
required: true,
|
},
|
datas: {
|
type: Object,
|
required: true,
|
},
|
checked: {
|
type: Boolean,
|
required: true,
|
},
|
},
|
watch: {
|
checked(n) {
|
this.checked1 = n;
|
},
|
},
|
data() {
|
return {
|
checked1: this.checked,
|
};
|
},
|
computed: {
|
hasPermission() {
|
return this.$store.state.user.downloadFlag == 1;
|
},
|
title() {
|
return this.option.label;
|
},
|
setFlag() {
|
let { flag, childrenCount, index } = this.option;
|
if (childrenCount) {
|
// 通过index获得它在flag数组中的index
|
let propIdx = Math.floor(index / 25);
|
let prop_flag = flag[propIdx];
|
let _flag = this.datas[prop_flag];
|
return !!getBit(_flag, index % 25);
|
} else {
|
return !!this.datas[flag];
|
}
|
},
|
value() {
|
let {
|
datas,
|
option: { key0, key1, childrenCount, index },
|
} = this;
|
if (childrenCount) {
|
// 通过index获得它在flag数组中的index
|
let propIdx = Math.floor(index / 25);
|
let prop_key0 = key0[propIdx];
|
let prop_key1 = key1[propIdx];
|
let _key0 = datas[prop_key0];
|
let _key1 = datas[prop_key1];
|
return !this.setFlag
|
? getBit(_key0, index % 25)
|
: getBit(_key1, index % 25);
|
} else {
|
return this.setFlag ? datas[key1] : datas[key0];
|
}
|
},
|
},
|
components: {
|
gradientBtn,
|
},
|
methods: {
|
changed() {
|
this.$emit("update:checked", this.checked1);
|
},
|
handlerClick() {
|
let title = "";
|
let pflag = 0;
|
if (this.setFlag) {
|
title = "是否取消执行?";
|
pflag = 0;
|
} else {
|
title = "是否执行?";
|
pflag = 1;
|
}
|
this.$confirm(title, "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
let loading = this.$layer.loading();
|
let params = { logList: [], rsAlmSet: {} };
|
let { key1, flag } = this.option;
|
params.rsAlmSet[key1] = 1;
|
params.rsAlmSet[flag] = pflag;
|
params["logList"].push({
|
param: flag,
|
paramCn: this.title,
|
fake: pflag || undefined,
|
st: pflag,
|
});
|
setAlarm(params)
|
.then((res) => {
|
let { code, data, msg } = res.data;
|
this.$layer.close(loading);
|
this.$message(msg);
|
})
|
.catch((err) => {
|
console.log(err);
|
this.$layer.close(loading);
|
});
|
})
|
.catch(() => {});
|
},
|
},
|
|
mounted() {},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.flex-r {
|
display: flex;
|
flex-direction: row;
|
}
|
.flex-c {
|
display: flex;
|
flex-direction: column;
|
}
|
.card {
|
height: 100px;
|
border: 1px solid #77edf6;
|
border-radius: 4px;
|
color: #fff;
|
overflow: hidden;
|
.card-title {
|
background: #011f39;
|
height: 30px;
|
color: #77edf6;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-left: 6px;
|
padding-right: 6px;
|
border-bottom: 1px solid #77edf6;
|
}
|
.i {
|
cursor: pointer;
|
margin-left: 4px;
|
margin-right: 6px;
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
background: #77edf6 url("../../../assets/images/gantan.png") 50% 50% / auto
|
60% no-repeat;
|
}
|
.card-content {
|
flex: 1;
|
background: #0c4d77;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 6px;
|
}
|
.col {
|
display: flex;
|
align-items: center;
|
}
|
.value {
|
flex: 1;
|
color: #77edf6;
|
margin-left: 6px;
|
margin-right: 6px;
|
padding-left: 6px;
|
height: 26px;
|
line-height: 26px;
|
border-radius: 6px;
|
&.alarm {
|
color: #ff4f45;
|
font-weight: 700;
|
}
|
}
|
.input {
|
color: #000;
|
flex: 1;
|
margin-left: 6px;
|
margin-right: 6px;
|
:deep(.el-input__inner) {
|
color: inherit;
|
}
|
}
|
.btn {
|
width: 76px;
|
padding-left: 8px;
|
}
|
}
|
</style>
|
