src/api/ems/dzjk.js

@@ -212,3 +212,66 @@ export function configStrategy(data) {
   })
 }
 
+//http://localhost:8089/strategy/temp/getTempNameList?strategyId=1&siteId=021_FXX_01
+//获取策略下的所有模板列表
+export function getTempNameList({siteId,strategyId}) {
+  return request({
+    url: `/strategy/temp/getTempNameList?siteId=${siteId}&strategyId=${strategyId}`,
+    method: 'get',
+  })
+}
+//获取模板详情
+///strategy/temp/list?templateId=1
+export function getStrategyTempDetail(templateId) {
+  return request({
+    url: `/strategy/temp/list?templateId=${templateId}`,
+    method: 'get',
+  })
+}
+//新增模板
+export function addStrategyTemp(data) {
+  return request({
+    url: `/strategy/temp`,
+    method: 'post',
+    data
+  })
+}
+export function editStrategyTemp(data) {
+  return request({
+    url: `/strategy/temp`,
+    method: 'put',
+    data
+  })
+}
+//http://localhost:8089/strategy/temp/{id}
+export function deleteStrategyTemp(id) {
+  return request({
+    url: `/strategy/temp/`+id,
+    method: 'delete',
+  })
+}
+
+//http://localhost:8089/strategy/timeConfig/list?strategyId=1&siteId=021_FXX_01
+export function timeConfigList({siteId,strategyId}) {
+  return request({
+    url: `/strategy/timeConfig/list?siteId=${siteId}&strategyId=${strategyId}`,
+    method: 'get',
+  })
+}
+//保存时间配置
+// http://localhost:8089/strategy/timeConfig
+export function setTimeConfigList(data) {
+  return request({
+    url: `/strategy/timeConfig`,
+    method: 'post',
+    data
+  })
+}
+// 策略曲线图
+//http://localhost:8089/strategy/curve/list?strategyId=1&siteId=021_FXX_01
+export function curveList({siteId,strategyId}) {
+  return request({
+    url: `/strategy/curve/list?siteId=${siteId}&strategyId=${strategyId}`,
+    method: 'get',
+  })
+}

src/router/ems.js

@@ -164,14 +164,14 @@ export const dzjk=[
                 name: 'DzjkClpzClyx',
                 meta: { title: '策略运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
               },
-              {
-                path: 'xftg',
-                component: () => import('@/views/ems/dzjk/clpz/xftg/index.vue'),
-                hidden:true,
-                breadcrumb: false,
-                name: 'DzjkClpzXftg',
-                meta: { title: '削峰填谷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
-              }
+              // {
+              //   path: 'xftg',
+              //   component: () => import('@/views/ems/dzjk/clpz/xftg/index.vue'),
+              //   hidden:true,
+              //   breadcrumb: false,
+              //   name: 'DzjkClpzXftg',
+              //   meta: { title: '削峰填谷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
+              // }
             ]
           }
         ]

src/store/modules/ems.js

@@ -13,6 +13,7 @@ const ems = {
     deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
     ticketStatusOptions:{0:'待处理', 1:'已处理', 2:'处理中'},//工单处理状态
     strategyStatusOptions:{'0':'未启用', 1:'已运行', 2:'已暂停', 3:'禁用', 4:'删除'},//策略状态
+    chargeStatusOptions:{'1':'充电','2':'待机'},//冲放状态
   },
   mutations: {
     SET_ZD_LIST(state, list) {

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

@@ -1,28 +1,31 @@
 
 <template>
    <div v-loading="loading">
-     <el-button type="primary" plain @click="settingStrategy" style="margin-bottom: 20px;">新增策略</el-button>
-     <cl-container v-for="(item,index) in list" :key="index+'clContainer'" :info="item" class="contain" @update="init" @showSetting="settingStrategy(item)">
-       <template v-slot:default>
-         <div class="cl-items cl-items-main" @click="toDetail(item.mainStrategyId)">
-           <div class="cl-header">主策略</div>
-           <div class="cl-content" >
-             <div class="cl-name">{{item.mainStrategyName}}</div>
+     <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>
-         <div class="cl-items" v-show="item.auxStrategyName" @click="toDetail(item.auxStrategyId)">
-           <div class="cl-header">辅助策略</div>
-           <div class="cl-content">
-             <div class="cl-name">{{item.auxStrategyName}}</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>
-         </div>
-       </template>
-     </cl-container>
-     <div v-if="list.length === 0">
-       <el-empty :image-size="200" ></el-empty>
-     </div>
-     <setting ref="setting"/>
-   </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>
 
 
@@ -30,13 +33,17 @@
 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},
+  components:{ClContainer,Setting,Xftg},
   mixins: [getQuerySiteId],
   data() {
     return {
+      showTemp:false,
+      updateStrategyId:'',
+      updateStrategyName:'',
       loading:false,
       list:[],
     }
@@ -54,14 +61,20 @@ export default {
       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){
-      id && this.$router.push({
-        path:'/dzjk/clpz/xftg',
-        query:{
-          ...this.$route.query,
-          id
-        }
+    toDetail(id,name){
+      this.updateStrategyId=id
+      this.updateStrategyName = name
+      this.showTemp = true
+      this.$nextTick(() => {
+        this.$refs['xftgTemp'].init()
       })
     }
   },

src/views/ems/dzjk/clpz/xftg/AddTemplate.vue

@@ -1,19 +1,21 @@
 <template>
-    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑${editTempName}` ">
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑模板` ">
       <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
-        <el-form-item label="模板名称" prop="tempName">
-          <el-input v-model="formData.tempName" placeholder="请输入" clearable :style="{width: '100%'}">
+        <el-form-item label="模板名称" prop="templateName">
+          <el-input v-model="formData.templateName" placeholder="请输入" clearable :style="{width: '100%'}">
           </el-input>
         </el-form-item>
-        <el-form-item label="soc限制" prop="socStatus" required>
-          <el-switch v-model="formData.socStatus"></el-switch>
-        </el-form-item>
-        <el-form-item label="soc下限" prop="min">
-          <el-input v-model="formData.min" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
-        </el-form-item>
-        <el-form-item label="soc上限" prop="max">
-          <el-input v-model="formData.max" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
+        <el-form-item label="soc限制" prop="sdcLimit" required>
+          <el-switch :active-value="1" :inactive-value="0" v-model="formData.sdcLimit"></el-switch>
         </el-form-item>
+<!--        <template v-if="formData.sdcLimit === 1">-->
+          <el-form-item label="soc下限" prop="sdcDown">
+            <el-input v-model="formData.sdcDown" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
+          </el-form-item>
+          <el-form-item label="soc上限" prop="sdcUp">
+            <el-input v-model="formData.sdcUp" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
+          </el-form-item>
+<!--        </template>-->
       </el-form>
       <el-button type="primary" size="mini" @click="addTime">新增</el-button>
 <!--      新增时间段表单-->
@@ -38,17 +40,17 @@
                 :picker-options="{
                 start: '00:00',
                 step: '01:00',
-                end: '24:00',
-                minTime: formInline.startTime
+                end: '23:00',
               }">
+<!--                minTime: formInline.startTime-->
               </el-time-select>
             </el-form-item>
-            <el-form-item label="冲放功率" prop="cfgl">
-              <el-input v-model="formInline.cfgl" placeholder="请输入"></el-input>
+            <el-form-item label="冲放功率" prop="chargeDischargePower">
+              <el-input v-model="formInline.chargeDischargePower" placeholder="请输入"></el-input>
             </el-form-item>
-            <el-form-item label="充电状态" prop="powerStatus">
-              <el-select v-model="formInline.powerStatus" placeholder="请选择">
-                <el-option v-for="(item,index) in powerStatusOptions" :key="index+'powerStatusOptions'" :label="item.label" :value="item.value"></el-option>
+            <el-form-item label="充电状态" prop="chargeStatus">
+              <el-select v-model="formInline.chargeStatus" placeholder="请选择">
+                <el-option v-for="(value,key) in chargeStatusOptions" :key="key+'chargeStatusOptions'" :label="value" :value="key"></el-option>
               </el-select>
             </el-form-item>
             <el-form-item>
@@ -72,14 +74,14 @@
           label="结束时间">
         </el-table-column>
         <el-table-column
-          prop="cfgl"
+          prop="chargeDischargePower"
           label="充放功率（kW）">
         </el-table-column>
         <el-table-column
-          prop="powerStatus"
+          prop="chargeStatus"
           label="充电状态">
           <template slot-scope="scope">
-            {{scope.row.powerStatus === 1 ? '充电' :'放电'}}
+            {{chargeStatusOptions[scope.row.chargeStatus]}}
           </template>
         </el-table-column>
         <el-table-column
@@ -103,50 +105,39 @@
     </el-dialog>
 </template>
 <script>
+import {mapState} from 'vuex'
+import {addStrategyTemp,editStrategyTemp,getStrategyTempDetail} from '@/api/ems/dzjk'
 export default {
-  props:{
-    mode:{
-      type:String,
-      default:"add"
-    },
-    editTempId:{
-      type:Number,
-      default:''
-    },
-    editTempName:{
-      type:String,
-      default:''
-    }
-  },
+  inject:['$home'],
   data() {
     return {
+      mode:'',
+      editTempId:'',
       dialogTableVisible:false,
       formData: {
-        tempName: '',
-        socStatus: false,
-        min: '',
-        max: '',
+        templateName: '',
+        sdcLimit: false,
+        sdcDown: '',
+        sdcUp: '',
       },
       rules: {
-        tempName: [{
-          required: true,
-          message: '请输入',
-          trigger: 'blur'
-        }],
-        min: [{
-          required: true,
-          message: '请输入',
-          trigger: 'blur'
-        }],
-        max: [{
+        templateName: [{
           required: true,
           message: '请输入',
           trigger: 'blur'
         }],
+        sdcDown: [
+          {required: true,message: '请输入', trigger: 'blur'},
+          { pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数' }
+        ],
+        sdcUp: [
+          {required: true,message: '请输入', trigger: 'blur'},
+          { pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数' }
+        ],
       },
       showAddTime: false,
       formInline:{
-        startTime:'',endTime:'',cfgl:'',powerStatus:1
+        startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''
       },
       formInlineRule:{
         startTime: [{
@@ -159,17 +150,28 @@ export default {
           message: '请选择结束时间',
           trigger: 'change'
         }],
-        cfgl: [{
+        chargeDischargePower: [{
+            required: true,
+            message: '请输入冲放功率',
+            trigger: 'blur'
+          },
+          { pattern: /^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入合法数字或小数' }
+        ],
+        chargeStatus:[{
           required: true,
-          message: '请输入冲放功率',
-          trigger: 'blur'
-        }],
+          message: '请选择充放状态',
+          trigger: ['blur','change']
+          }
+        ]
       },
       tableData:[],
-      powerStatusOptions:[{label:'充电',value:1},{label:'放电',value:2}],
     }
   },
-  computed: {},
+  computed: {
+    ...mapState({
+      chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
+    })
+  },
   watch: {
     "formInline.startTime":{
       handler(newVal,oldVal){
@@ -182,18 +184,61 @@ export default {
         }
       },
       deep:true
-    }
+    },
   },
-  created() {},
-  mounted() {},
   methods: {
+    changeSiteId(){
+      this.dialogTableVisible=false
+      this.mode=''
+      this.editTempId=''
+      this.formData={
+        templateName: '',
+        sdcLimit: false,
+        sdcDown: '',
+        sdcUp: '',
+      }
+      this.formInline={
+        startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''
+      }
+      this.showAddTime = false
+      this.tableData=[]
+    },
+    show({mode = 'add', editTempId = ''}){
+      this.$nextTick(() => {
+        this.dialogTableVisible = true
+        this.mode = mode
+        this.editTempId=editTempId
+        if(mode === 'edit' && editTempId){
+          getStrategyTempDetail(this.editTempId).then(response => {
+            const data=JSON.parse(JSON.stringify(response?.data || []));
+            if(data.length>0){
+              const {templateName,sdcLimit,sdcDown,sdcUp} =JSON.parse(JSON.stringify( data[0]));
+              this.formData.templateName=templateName
+              this.formData.sdcLimit=sdcLimit
+              this.formData.sdcDown=sdcDown
+              this.formData.sdcUp=sdcUp
+            }
+            if(data.length === 1){
+              const {startTime,endTime}=data;
+              if(!startTime || !endTime){
+                this.tableData = []
+              }else{
+                this.tableData= data
+              }
+            }else{
+              this.tableData= data
+            }
+          })
+        }
+      })
+    },
     addTime(){
       this.showAddTime=true
     },
     cancelAddTime(){
       this.$refs.addTimeForm.resetFields()
       this.showAddTime=false
-      this.formInline = {startTime:'',endTime:'',cfgl:'',powerStatus:1}
+      this.formInline = {startTime:'',endTime:'',chargeDischargePower:'',chargeStatus:''}
     },
     saveTime(){
       //表单校验，校验成功，添加到tableData里
@@ -209,17 +254,36 @@ export default {
     saveDialog() {
       this.$refs.addTempForm.validate(valid => {
         if (!valid) return
-        this.closeDialog()
+        const {templateName,sdcLimit,sdcDown,sdcUp} = this.formData
+        const {siteId,updateStrategyId} =this.$home
+        const {tableData} = this
+        if(this.mode==='edit'){
+          editStrategyTemp({siteId,strategyId:updateStrategyId,templateId:this.editTempId,templateName,sdcLimit,sdcDown,sdcUp,timeConfigList:tableData}).then(response=>{
+            if(response?.code === 200){
+              this.closeDialog()
+              this.$emit('update')
+              this.$emit('updateTimeSetting')
+            }
+          })
+        }else{
+          addStrategyTemp({siteId,strategyId:updateStrategyId,templateName,sdcLimit,sdcDown,sdcUp,timeConfigList:tableData}).then(response=>{
+            if(response?.code === 200){
+              this.closeDialog()
+              this.$emit('update')
+            }
+          })
+        }
+
       })
     },
     closeDialog(){
       // 清空所有数据
       this.$refs.addTempForm.resetFields()
       this.formData={
-        tempName: '',
-          socStatus: false,
-          min: '',
-          max: '',
+        templateName: '',
+          sdcLimit:0,
+          sdcDown: '',
+          sdcUp: '',
       }
       this.tableData=[]
       this.cancelAddTime()
@@ -229,15 +293,3 @@ export default {
 }
 
 </script>
-<style scoped>
-.ems-dialog{
-  .el-dialog{
-    max-width: 700px;
-  }
-  .add-time-form{
-    .el-input{
-      width: 220px;
-    }
-  }
-}
-</style>

src/views/ems/dzjk/clpz/xftg/TempPowerChart.vue

@@ -12,32 +12,41 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
-
+import {curveList} from '@/api/ems/dzjk'
 export default {
+  inject:['$home'],
   mixins: [resize],
   data() {
     return {
       chart: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
   beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
+    this.destoryChart()
   },
   methods: {
-    initChart() {
-      this.chart = echarts.init(document.querySelector('#tempChart'))
-      this.setOptions()
+    destoryChart(){
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
     },
-    setOptions() {
+    changeSiteId(){
+      this.destoryChart()
+    },
+    init(){
+      if(!this.chart){
+        this.chart = echarts.init(document.getElementById('tempChart'))
+      }
+      const strategyId = this.$home.updateStrategyId
+      const siteId=this.$home.siteId
+      curveList({strategyId,siteId}).then(response => {
+        this.setOption(response?.data || [])
+      })
+    },
+    setOption(data) {
+      if(!this.chart) return
       this.chart.setOption({
         color:['#FFBD00','#3C81FF'],
         legend: {

src/views/ems/dzjk/clpz/xftg/TempTable.vue

@@ -4,104 +4,138 @@
     <div slot="header">
       <span class="card-title">新增模板</span>
       <div style="float: right; padding: 3px 0">
-        <el-button type="primary" size="mini" @click="handlerType = 'add';$refs.addTemplate.dialogTableVisible=true">新增</el-button>
-        <el-button type="warning" size="mini" @click="handlerType = 'edit';$refs.addTemplate.dialogTableVisible=true">编辑</el-button>
+        <el-button type="text"  size="mini" @click="back">返回策略运行</el-button>
+        <el-button type="primary" size="mini" @click="addTemp">新增</el-button>
+        <el-button type="warning" size="mini" @click="editTemp">编辑</el-button>
         <el-button type="primary" class="alarm-btn" size="mini" @click="deleteTemp">删除</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%;margin-top:25px;">
-        <!--            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>
+      <template v-if="tempList.length>0">
+        <el-button-group class="ems-btns-group">
+          <el-button v-for="(item,index) in tempList" :key="index+'tempList'" :class="{'activeBtn' : activeBtn === item.templateId}" size="small" @click="changeTemp(item.templateId)">{{item.templateName}}</el-button>
+        </el-button-group>
+        <el-table
+          :data="tableData"
+          :span-method="tableSpanFilter"
+          border
+          style="width: 100%;margin-top:25px;">
+          <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
+          <el-table-column
+            prop="templateName"
+            label="模板名称"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="sdcLimit"
+            label="SOC限制">
+            <template slot-scope="scope">
+              <el-switch disabled :active-value="1" :inactive-value="0" v-model="scope.row.sdcLimit"></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sdcDown"
+            label="SOC下限">
+            <template slot-scope="scope">
+              {{scope.row.sdcDown ? scope.row. sdcDown + '%' : '-'}}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sdcUp"
+            label="SOC上限">
+            <template slot-scope="scope">
+              {{scope.row.sdcUp ? scope.row.sdcUp + '%' : '-'}}
+            </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="chargeDischargePower"
+            label="充放功率（kW）">
+          </el-table-column>
+          <el-table-column
+            prop="chargeStatus"
+            label="充电状态">
+            <template slot-scope="scope">
+              {{chargeStatusOptions[scope.row.chargeStatus]}}
+            </template>
+          </el-table-column>
 
-      </el-table>
+        </el-table>
+      </template>
+      <template v-else>
+        <el-empty :image-size="150"></el-empty>
+      </template>
     </div>
-    <add-template ref="addTemplate" :mode="handlerType" :edit-temp-id="activeTempData.id" :edit-temp-name="activeTempData.name"/>
+    <add-template ref="addTemplate" :mode="handlerType" :editTempId="activeBtn" @update="init" @updateTimeSetting="$emit('updateTimeSetting')"/>
   </el-card>
 </template>
 
 <script>
+import {mapState} from 'vuex'
 import AddTemplate from "./AddTemplate.vue";
+import {getTempNameList, getStrategyTempDetail, deleteStrategyTemp} from '@/api/ems/dzjk'
 export default {
   components: {AddTemplate},
+  inject:['$home'],
   data() {
     return {
       handlerType:'',
-      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']
+      activeBtn:'',
+      tempList:[],
+      tableData:[],
+      mixinPrototype:['templateName','sdcLimit','sdcDown','sdcUp']
     }
   },
   computed:{
+    ...mapState({
+      chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
+    }),
     activeTempData(){
-      return this.tempList.find(item=>item.id === this.activeBtn)
+      return this.tempList.find(item=>item.templateId === this.activeBtn) || {}
     }
   },
   methods:{
+    back(){
+      this.$home.init()
+    },
+    changeSiteId(){
+      this.tempList=[]
+      this.tableData=[]
+      this.handlerType=''
+      this.activeBtn=''
+      this.$refs.addTemplate && this.$refs.addTemplate.changeSiteId()
+    },
+    addTemp(){
+      this.$refs.addTemplate.show({mode:'add',editTempId:''})
+    },
+    editTemp(){
+      this.$refs.addTemplate.show({mode:'edit',editTempId:this.activeBtn})
+    },
+    init(){
+      getTempNameList({strategyId:this.$home.updateStrategyId,siteId:this.$home.siteId}).then(response => {
+        const data = response?.data || [];
+        this.tempList =data
+        if(data.length ===0 && this.activeBtn){
+          this.activeBtn=''
+        }else if(!this.activeBtn && data.length>0){
+            this.activeBtn =data[0].templateId
+        }else if(this.activeBtn && data.length>0 && !data.find(item=>item.templateId === this.activeBtn)){
+          this.activeBtn =data[0].templateId
+        }
+        this.activeBtn && getStrategyTempDetail(this.activeBtn).then(response => {
+          this.tableData=response?.data || [];
+        })
+      })
+    },
     deleteTemp(){
-      this.$confirm(`确认要删除${this.activeTempData.name}吗?`, {
+      this.$confirm(`确认要删除${this.activeTempData.templateName}吗?`, {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         showClose:false,
@@ -110,31 +144,35 @@ export default {
         beforeClose: (action, instance, done) => {
           if (action === 'confirm') {
             instance.confirmButtonLoading = true;
-            setTimeout(() => {
-              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
-              done();
-              // setTimeout(() => {
+            deleteStrategyTemp(this.activeBtn).then(response => {
+              if(response?.code === 200){
+                //删除成功
+                done();
+              }
+            }).finally(() => {
               instance.confirmButtonLoading = false;
-              // }, 300);
-            }, 3000);
+            })
           } else {
             done();
           }
         }
       }).then(() => {
-        //只有在故障复位成功的情况下会走到这里
+        //只有删除成功的情况下会走到这里
         this.$message({
           type: 'success',
           message: '删除成功!'
         });
+        this.init()
+        this.$emit('updateTimeSetting')
       }).catch(() => {
-        //取消复位
+        //取消
       });
     },
-    changeTemp(id){
+    changeTemp(id=''){
       //切换模板 更新数据
       if(id !== this.activeBtn){
         this.activeBtn=id;
+        this.init()
       }
     },
     tableSpanFilter({ row, column, rowIndex, columnIndex }){
@@ -152,8 +190,5 @@ export default {
       }
     }
   },
-  mounted(){
-
-  }
 }
 </script>

src/views/ems/dzjk/clpz/xftg/TimeSetting.vue

@@ -2,30 +2,112 @@
 <template>
   <el-card shadow="always" class="common-card-container" style="margin-top:25px;">
     <div slot="header">
-      <span class="card-title">策略配置：削峰填谷</span>
+      <span class="card-title">策略配置：{{$home.updateStrategyName}}</span>
       <div style="float: right; padding: 3px 0">
-        <el-button type="warning" size="mini">编辑</el-button>
+        <el-button type="warning" size="mini" @click="changeEditStatus">{{edit?'保存':'编辑'}}</el-button>
+        <el-button type="default" size="mini" @click="cancelChange" v-show="edit === true">取消</el-button>
       </div>
     </div>
-    <el-form :inline="true" class="select-container">
-      <el-form-item label="时间配置">
-        <el-select  v-model="timeType" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.name" :value="item.id" v-for="(item,index) in timeOptions" :key="index+'timeOptions'"></el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
     <div style="padding:0 6px 12px 6px;">
-      <div class="cl-items" v-for="item in 12" :key="item+'lclf'">
-        <div class="cl-header">{{item}}月</div>
+      <div class="cl-items" v-for="(item,index) in tableData" :key="index+'lclf'">
+        <div class="cl-header">{{item.month}}月</div>
         <div class="cl-content">
-          <div class="cl-name">两放两冲</div>
+          <div class="cl-name" v-if="!edit">
+            {{item.templateName || '-'}}
+          </div>
+          <template v-else>
+            <el-select v-model="tableData[index].templateId" :disabled="!edit" class="temp-select" placeholder="请选择" clearable size="mini">
+              <el-option
+                v-for="(item,index) in tempList"
+                :key="index+'sjpz'"
+                :label="item.templateName"
+                :value="item.templateId">
+              </el-option>
+            </el-select>
+          </template>
         </div>
       </div>
     </div>
 
   </el-card>
 </template>
-
+<script>
+import {timeConfigList, getTempNameList,setTimeConfigList} from '@/api/ems/dzjk'
+export default {
+  inject:['$home'],
+  data() {
+    return {
+      edit:false,
+      loading:false,
+      tableData:[],
+      tempList:[]
+    }
+  },
+  methods:{
+    changeSiteId(){
+      this.tableData=[]
+      this.tempList=[]
+      this.edit = false
+    },
+    init(){
+      this.getTimeConfigList()
+    },
+    getTempList(){
+      const strategyId = this.$home.updateStrategyId
+      const siteId=this.$home.siteId
+      getTempNameList({strategyId,siteId}).then(response => {
+        this.tempList =response?.data || [];
+      })
+    },
+    getTimeConfigList(){
+      const strategyId = this.$home.updateStrategyId
+      const siteId=this.$home.siteId
+      return timeConfigList({strategyId,siteId}).then(response => {
+        const data = JSON.parse(JSON.stringify(response?.data || []))
+        if(data.length === 0){
+          for(var i=1;i<=12;i++){
+            data.push({
+              month:i,
+              strategyId,
+              siteId,
+              templateId:'',
+              templateName:''
+            })
+          }
+        }
+        this.tableData=data
+      })
+    },
+    cancelChange(){
+      this.edit =false
+      this.getTimeConfigList()
+    },
+    changeEditStatus(){
+      //当前状态是编辑状态
+      if(this.edit){
+        console.log('this.tableData',this.tableData)
+        const strategyId = this.$home.updateStrategyId
+        const siteId=this.$home.siteId
+        this.tableData.forEach(item=>{
+          item.siteId=siteId
+          item.strategyId=strategyId
+          item.templateName = (this.tempList.find(temp=>temp.templateId===item.templateId) || {}).templateName || ''
+        })
+        setTimeConfigList(this.tableData).then(response => {
+          if(response?.code === 200){
+            //更改成功 调用接口更新数据
+            this.getTimeConfigList()
+            this.edit=false;
+          }
+        })
+      }else{
+        this.edit=true;
+        this.getTempList()
+      }
+    }
+  }
+}
+</script>
 <style scoped lang="scss">
 .cl-items{
   width: 144px;
@@ -40,14 +122,14 @@
     background:  #FFE5AC;
     text-align: center;
     font-size:16px;
-    line-height: 40px;
-    height: 40px;
+    line-height: 30px;
+    height: 30px;
     width: 100%;
   }
   .cl-content{
     background-color: #ffffff;
     position: relative;
-    height: 48px;
+    height: 58px;
     width: 100%;
     .cl-name{
       position: absolute;
@@ -55,26 +137,13 @@
       left:50%;
       transform: translate(-50%,-50%);
     }
+    .temp-select{
+      width: 90%;
+      position: absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+    }
   }
 }
 </style>
-<script>
-export default {
-  data() {
-    return {
-      loading:false,
-      timeType:1,
-      timeOptions:[
-        {name:'按日',id:1},
-        {name:'按月',id:2},
-        {name:'按年',id:3},
-      ]
-    }
-  },
-  methods:{
-  },
-  mounted(){
-
-  }
-}
-</script>

src/views/ems/dzjk/clpz/xftg/index.vue

@@ -1,12 +1,14 @@
 
 <template>
-  <cl-container :hideSettingBtn="true">
-    <template v-slot:default>
-      <temp-table/>
-      <time-setting/>
-      <temp-power-chart/>
-    </template>
-  </cl-container>
+<!--  <cl-container :hideSettingBtn="true">-->
+<!--    <template v-slot:default>-->
+      <div>
+        <temp-table ref="tempTable" @updateTimeSetting="updateTimeSetting"/>
+        <time-setting ref="timeSetting"/>
+        <temp-power-chart ref="tomePowerChart"/>
+      </div>
+<!--    </template>-->
+<!--  </cl-container>-->
 </template>
 
 
@@ -24,6 +26,25 @@ export default {
     }
   },
   methods:{
+    init(){
+      this.$nextTick(() => {
+        this.$refs.tempTable.init()
+        this.$refs.timeSetting.init()
+        this.$refs.tomePowerChart.init()
+      })
+    },
+    changeSiteId(){
+      this.$nextTick(() => {
+        this.$refs.tempTable.changeSiteId()
+        this.$refs.timeSetting.changeSiteId()
+        this.$refs.tomePowerChart.changeSiteId()
+      })
+    },
+    //在编辑、删除模板后更新时间配置、echart的数据？todo
+    updateTimeSetting(){
+        this.$refs.timeSetting.init()
+        this.$refs.tomePowerChart.init()
+    }
   },
   mounted(){