emsfront/src/views/ems/dzjk/clpz/clyx/index.vue

<template>
   <div v-loading="loading">
     <template v-if="!showTemp">
       <el-button v-if="!showTemp" type="primary" plain @click="settingStrategy" style="margin-bottom: 20px;">新增策略</el-button>
       <cl-container v-for="(item,index) in list" :key="index+'clContainer'" :info="item" :hide-setting-btn="showTemp" class="contain" @update="init" @showSetting="settingStrategy(item)">
         <template v-slot:default>
           <div class="cl-items cl-items-main" @click="toDetail(item.mainStrategyId,item.mainStrategyName)">
             <div class="cl-header">主策略</div>
             <div class="cl-content" >
               <div class="cl-name">{{item.mainStrategyName}}</div>
             </div>
           </div>
           <div class="cl-items" v-show="item.auxStrategyName" @click="toDetail(item.auxStrategyId,item.auxStrategyName)">
             <div class="cl-header">辅助策略</div>
             <div class="cl-content">
               <div class="cl-name">{{item.auxStrategyName}}</div>
             </div>
           </div>
         </template>
       </cl-container>
       <div v-if="list.length === 0">
         <el-empty :image-size="200" ></el-empty>
       </div>
     </template>
     <xftg ref="xftgTemp" v-else/>
   <setting ref="setting"/>
 </div>
</template>


<script>
import Setting from './../Setting.vue'
import ClContainer from './../ClContainer.vue'
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
import Xftg from './../xftg/index.vue'
import {strategyRunningList} from '@/api/ems/dzjk'
export default {
  name:'DzjkClpzClyx',
  components:{ClContainer,Setting,Xftg},
  mixins: [getQuerySiteId],
  data() {
    return {
      showTemp:false,
      updateStrategyId:'',
      updateStrategyName:'',
      loading:false,
      list:[],
    }
  },
  provide(){
    return {$home:this}
  },
  methods:{
    settingStrategy(item=''){
      this.$refs.setting.showSettingDialog(item)
    },
    init(){
      this.loading = true
      this.list = []
      strategyRunningList(this.siteId).then(response => {
        this.list =JSON.parse(JSON.stringify(response?.data || {}))
      }).finally(() => {this.loading=false})
      this.$nextTick(() => {
        // 每次切换站点 展示策略运行 清空策略配置的数据
        this.$refs['xftgTemp'] && this.$refs['xftgTemp'].changeSiteId()
        this.showTemp=false
        this.updateStrategyId=''
        this.updateStrategyName=''
      })
    },
    toDetail(id,name){
      this.updateStrategyId=id
      this.updateStrategyName = name
      this.showTemp = true
      this.$nextTick(() => {
        this.$refs['xftgTemp'].init()
      })
    }
  },
}
</script>

<style scoped lang="scss">
.contain{
  margin-bottom: 20px;
}
  .clyx-main{
    padding:0 12px 0 12px;
    .cl-items{
      cursor: pointer;
      width: 228px;
      height: 156px;
      display: inline-block;
      margin:24px 12px 0 12px;
      font-size:14px;
      color:#333333;
      border: 1px solid #eeeeee;
      .cl-header{
        background:  #FFE5AC;
        text-align: center;
        font-size:16px;
        line-height: 40px;
        height: 40px;
        width: 100%;
      }
      .cl-content{
        background-color: #ffffff;
        position: relative;
        height: 114px;
        width: 100%;
        .cl-name{
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
        }
      }
      &.cl-items-main{
        .cl-header{
          background:  #FFBE29;
        }
        .cl-content{
          background-color: #FFF2CB;
        }
      }
    }
  }
</style>