120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
||
<el-container class="clyx-container">
|
||
<el-header class="clyx-header">
|
||
<div class="clyx-title">策略状态：<span class="clyx-status save">{{strategyStatusOptions[info.status]}}</span></div>
|
||
<div class="clyx-btns">
|
||
<el-button v-if="!hideSettingBtn" size="small" @click="$emit('showSetting')">配置</el-button>
|
||
<el-button v-if="info.status === '1'" type="warning" class="alarm-btn" size="small" @click='close'>停止策略</el-button>
|
||
</div>
|
||
</el-header>
|
||
<el-main class="clyx-main">
|
||
<slot name="default"></slot>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
import {stopStrategyRunning} from '@/api/ems/dzjk'
|
||
export default {
|
||
name:'DzjkClpzClContainer',
|
||
props:{
|
||
hideSettingBtn:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
info:{
|
||
type:Object,
|
||
default:()=>{return {}},
|
||
}
|
||
},
|
||
computed:{
|
||
...mapState({
|
||
strategyStatusOptions: state => state.ems.strategyStatusOptions,
|
||
})
|
||
},
|
||
data() {
|
||
return {
|
||
loading:true
|
||
}
|
||
},
|
||
methods:{
|
||
close(){
|
||
this.$confirm('确认要停止策略吗?', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
showClose:false,
|
||
closeOnClickModal:false,
|
||
type: 'warning',
|
||
beforeClose: (action, instance, done) => {
|
||
if (action === 'confirm') {
|
||
instance.confirmButtonLoading = true;
|
||
this.loading = true
|
||
stopStrategyRunning(this.info.id).then(response => {
|
||
response.code === 200 && done();
|
||
}).finally(() => {
|
||
this.loading = false
|
||
instance.confirmButtonLoading = false;
|
||
})
|
||
} else {
|
||
done();
|
||
}
|
||
}
|
||
}).then(() => {
|
||
//只有在故障复位成功的情况下会走到这里
|
||
this.$message({
|
||
type: 'success',
|
||
message: '停止策略成功!'
|
||
});
|
||
this.$emit('update')
|
||
}).catch(() => {
|
||
//取消复位
|
||
});
|
||
}
|
||
},
|
||
mounted(){
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.clyx-container{
|
||
border:1px solid #eee;
|
||
.clyx-header{
|
||
background: #F1F5FB;
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 0;
|
||
height: 60px;
|
||
border-radius: 6px 6px 0 0;
|
||
.clyx-title{
|
||
color: #333333;
|
||
line-height: 20px;
|
||
padding: 0 50px 0 25px;
|
||
.clyx-status{
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
&.danger{
|
||
color:#FC6B69;
|
||
}
|
||
&.save{
|
||
color:#09ADA3;
|
||
}
|
||
&.keep{
|
||
color:#3C81FF;
|
||
}
|
||
}
|
||
}
|
||
.clyx-btns{
|
||
position: absolute;
|
||
right: 25px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
</style>
|