130 lines
3.6 KiB
Vue
130 lines
3.6 KiB
Vue
|
|
<template>
|
|
<div v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
|
|
<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>
|