<template>
|
<div class="card flex-c">
|
<div class="card-title">
|
<div class="flex-r">
|
<div class="i"></div>
|
{{ title }}
|
</div>
|
<el-checkbox v-model="checked1" @change="changed"></el-checkbox>
|
</div>
|
<div class="card-content">
|
<div class="row">
|
实时:
|
<div class="value">{{ value }}</div>
|
<div class="btn"></div>
|
</div>
|
<div class="row">
|
模拟:
|
<el-select
|
class="input"
|
v-if="isSelect"
|
:disabled="setFlag"
|
v-model="num"
|
size="mini"
|
>
|
<el-option
|
v-for="(item, idx) in selectOptions"
|
:key="'select_' + idx"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
<el-input-number
|
v-else
|
class="input"
|
size="mini"
|
:disabled="setFlag"
|
v-model="num"
|
:step="1"
|
></el-input-number>
|
<div class="btn">
|
<gradient-btn
|
:active="setFlag"
|
size="xs"
|
:disabled="!hasPermission"
|
@click="confirm"
|
>{{ setFlag ? btnText + "中" : btnText }}</gradient-btn
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import gradientBtn from "@/components/gradientBtn.vue";
|
import { updateStateHrStop } from "../js/apis";
|
export default {
|
name: "",
|
props: {
|
option: {
|
type: Object,
|
required: true,
|
},
|
datas: {
|
type: Object,
|
required: true,
|
},
|
btnText: {
|
type: String,
|
default: "执行",
|
},
|
checked: {
|
type: Boolean,
|
required: true,
|
},
|
},
|
computed: {
|
title() {
|
return this.option.label;
|
},
|
setFlag() {
|
return !!this.datas[this.option.flag];
|
},
|
isSelect() {
|
return !!this.option.option;
|
},
|
selectOptions() {
|
if (this.isSelect) {
|
let option = this.option.option;
|
if (Object.prototype.toString.call(option) == "[object Array]") {
|
return option
|
.map((v, i) => ({ label: v, value: i + "" }))
|
.filter((v) => !!v.label);
|
} else if (
|
Object.prototype.toString.call(option) == "[object Object]"
|
) {
|
return Object.keys(option)
|
.map((v) => ({ label: option[v], value: v }))
|
.filter((v) => !!v.label);
|
} else {
|
return [];
|
}
|
} else {
|
return [];
|
}
|
},
|
value() {
|
let { datas, option } = this;
|
if (option.option) {
|
return this.setFlag
|
? option.option[datas[option.key1]] || `未知 [${datas[option.key1]}]`
|
: option.option[datas[option.key0]] || `未知 [${datas[option.key0]}]`;
|
} else {
|
return this.setFlag ? datas[option.key1] : datas[option.key0];
|
}
|
},
|
hasPermission() {
|
return this.$store.state.user.downloadFlag == 1;
|
},
|
},
|
watch: {
|
datas(n, o) {
|
if (o.isEmpty && !n.isEmpty) {
|
this.num = this.datas[this.option.key1] + "";
|
}
|
},
|
checked(n) {
|
this.checked1 = n;
|
},
|
},
|
data() {
|
return {
|
checked1: this.checked,
|
// checked: false,
|
num: 0,
|
};
|
},
|
components: {
|
gradientBtn,
|
},
|
methods: {
|
changed() {
|
this.$emit("update:checked", this.checked1);
|
},
|
confirm() {
|
let title = "";
|
let flag = 0;
|
let num;
|
if (this.setFlag) {
|
title = "是否取消给定?";
|
flag = 0;
|
} else {
|
title = "是否给定?";
|
flag = 1;
|
num = this.num;
|
}
|
this.$confirm(title, "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
// console.log('调用结定接口', this.num, this.option.key1);
|
let loading = this.$layer.loading();
|
let params = { logList: [] };
|
params[this.option.key1] = flag ? num : undefined;
|
params[this.option.flag] = flag;
|
// params["battIndex"] = 0;
|
params["logList"].push({
|
param: this.option.flag,
|
paramCn: this.title,
|
value: flag ? num : undefined,
|
st: flag,
|
});
|
updateStateHrStop(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: 110px;
|
border: 1px solid #3e8d9d;
|
border-radius: 4px;
|
color: #fff;
|
overflow: hidden;
|
.card-title {
|
background: #0c4d77;
|
height: 30px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding-right: 6px;
|
}
|
.i {
|
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: #011f39;
|
display: flex;
|
flex-direction: column;
|
padding: 6px;
|
}
|
.value {
|
flex: 1;
|
background: #fff;
|
color: #000;
|
margin-left: 6px;
|
margin-right: 6px;
|
padding-left: 6px;
|
height: 26px;
|
line-height: 26px;
|
border-radius: 6px;
|
}
|
.input {
|
color: #000;
|
flex: 1;
|
margin-left: 6px;
|
margin-right: 6px;
|
:deep(.el-input__inner) {
|
color: inherit;
|
}
|
}
|
.btn {
|
width: 60px;
|
}
|
.row {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
}
|
}
|
</style>
|
