emsfront/src/views/ems/dzjk/clpz/ClContainer.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>