新增策略页面

2025-06-26 01:29:16 +08:00
parent 89711b6a07
commit 1b19a91d74
8 changed files with 550 additions and 9 deletions
--- a/src/views/ems/dzjk/clpz/xftg/TempTable.vue
+++ b/src/views/ems/dzjk/clpz/xftg/TempTable.vue
@ -0,0 +1,123 @@
+
+<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>