124 lines
3.6 KiB
Vue
124 lines
3.6 KiB
Vue
|
|
|||
|
|
<template>
|
|||
|
|
<el-card shadow="always" class="common-card-container">
|
|||
|
|
<div slot="header">
|
|||
|
|
<span class="card-title">新增模板</span>
|
|||
|
|
<div style="float: right; padding: 3px 0">
|
|||
|
|
<el-button type="primary" size="mini">新增</el-button>
|
|||
|
|
<el-button type="warning" size="mini">编辑</el-button>
|
|||
|
|
<el-button type="primary" class="alarm-btn" size="mini">删除</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<el-button-group class="ems-btns-group">
|
|||
|
|
<el-button v-for="(item,index) in tempList" :key="index+'tempList'" :class="{'activeBtn' : activeBtn === item.id}" type="small" @click="changeTemp(item.id)">{{item.name}}</el-button>
|
|||
|
|
</el-button-group>
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
:span-method="tableSpanFilter"
|
|||
|
|
border
|
|||
|
|
style="width: 100%;">
|
|||
|
|
<!-- todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
|
|||
|
|
<el-table-column
|
|||
|
|
prop="name"
|
|||
|
|
label="模板名称"
|
|||
|
|
width="180">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="status"
|
|||
|
|
label="SOC限制">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-switch
|
|||
|
|
:value="scope.row.status === 1"
|
|||
|
|
disabled>
|
|||
|
|
</el-switch>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="min"
|
|||
|
|
label="SOC下限">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
{{scope.row.min}}%
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="max"
|
|||
|
|
label="SOC上限">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
{{scope.row.max}}%
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="startTime"
|
|||
|
|
label="开始时间">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="endTime"
|
|||
|
|
label="结束时间">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="cfgl"
|
|||
|
|
label="充放功率（kW）">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
prop="powerStatus"
|
|||
|
|
label="充电状态">
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
activeBtn:1,
|
|||
|
|
tempList:[
|
|||
|
|
{name:'模板1',id:1},
|
|||
|
|
{name:'模板2',id:2},
|
|||
|
|
{name:'模板3',id:3},
|
|||
|
|
],
|
|||
|
|
tableData:[
|
|||
|
|
{name:'模板一',status:1,min:10,max:90,startTime:'2023/05/07',endTime:'2030/05/07',cfgl:100,powerStatus:'充电'},
|
|||
|
|
{name:'模板一',status:1,min:10,max:90,startTime:'2024/06/07',endTime:'2030/05/07',cfgl:110,powerStatus:'充电'},
|
|||
|
|
{name:'模板一',status:1,min:10,max:90,startTime:'2023/07/07',endTime:'2030/05/07',cfgl:120,powerStatus:'充电'},
|
|||
|
|
{name:'模板一',status:1,min:10,max:90,startTime:'2023/08/07',endTime:'2030/05/07',cfgl:130,powerStatus:'充电'},
|
|||
|
|
{name:'模板一',status:1,min:10,max:90,startTime:'2023/09/07',endTime:'2030/05/07',cfgl:140,powerStatus:'充电'},
|
|||
|
|
],
|
|||
|
|
mixinPrototype:['name','status','min','max']
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
changeTemp(id){
|
|||
|
|
//切换模板 更新数据
|
|||
|
|
if(id !== this.activeBtn){
|
|||
|
|
this.activeBtn=id;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tableSpanFilter({ row, column, rowIndex, columnIndex }){
|
|||
|
|
if(!this.mixinPrototype.includes(column.property)) return { rowspan: 1,colspan: 1 }
|
|||
|
|
if(rowIndex===0){
|
|||
|
|
return {
|
|||
|
|
rowspan: this.tableData.length,
|
|||
|
|
colspan: 1
|
|||
|
|
};
|
|||
|
|
}else{
|
|||
|
|
return {
|
|||
|
|
rowspan: 0,
|
|||
|
|
colspan: 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|