110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<el-container class="clyx-container">
|
|||
|
|
<el-header class="clyx-header">
|
|||
|
|
<div class="clyx-title">策略状态：<span class="clyx-status save">已运行</span></div>
|
|||
|
|
<div class="clyx-btns">
|
|||
|
|
<el-button v-if="!hideSettingBtn" size="small" @click="$refs.setting.dialogFormVisible = true">配置</el-button>
|
|||
|
|
<el-button type="warning" class="alarm-btn" size="small" @click='close'>停止策略</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-header>
|
|||
|
|
<el-main class="clyx-main">
|
|||
|
|
<slot name="default"></slot>
|
|||
|
|
<setting ref="setting"/>
|
|||
|
|
</el-main>
|
|||
|
|
</el-container>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import Setting from './Setting.vue'
|
|||
|
|
export default {
|
|||
|
|
name:'DzjkClpzClContainer',
|
|||
|
|
components:{Setting},
|
|||
|
|
props:{
|
|||
|
|
hideSettingBtn:{
|
|||
|
|
type:Boolean,
|
|||
|
|
default:false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
close(){
|
|||
|
|
this.$confirm('确认要停止策略吗?', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
showClose:false,
|
|||
|
|
closeOnClickModal:false,
|
|||
|
|
type: 'warning',
|
|||
|
|
beforeClose: (action, instance, done) => {
|
|||
|
|
if (action === 'confirm') {
|
|||
|
|
instance.confirmButtonLoading = true;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
|
|||
|
|
done();
|
|||
|
|
// setTimeout(() => {
|
|||
|
|
instance.confirmButtonLoading = false;
|
|||
|
|
// }, 300);
|
|||
|
|
}, 3000);
|
|||
|
|
} else {
|
|||
|
|
done();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).then(() => {
|
|||
|
|
//只有在故障复位成功的情况下会走到这里
|
|||
|
|
this.$message({
|
|||
|
|
type: 'success',
|
|||
|
|
message: '停止策略成功!'
|
|||
|
|
});
|
|||
|
|
}).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>
|