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

<template>
  <div class="ems-dashboard-editor-container" v-loading="loading">
    <el-card shadow="never" class="common-card-container">
      <div slot="header" class="clearfix">
        <span class="card-title">运行参数配置</span>
        <span class="site-tag">站点：{{ siteId || '-' }}</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row :gutter="20" class="runtime-grid">
          <el-col :xs="24" :sm="24" :md="8">
            <div class="group-card">
              <div class="group-title">SOC上下限</div>
              <el-form-item label="SOC下限(%)" prop="socDown">
                <el-input-number v-model="form.socDown" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="SOC上限(%)" prop="socUp">
                <el-input-number v-model="form.socUp" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8">
            <div class="group-card">
              <div class="group-title">防逆流参数</div>
              <el-form-item label="防逆流阈值(kW)" prop="antiReverseThreshold">
                <el-input-number v-model="form.antiReverseThreshold" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="阈值上浮比例(%)" prop="antiReverseRangePercent">
                <el-input-number v-model="form.antiReverseRangePercent" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="恢复上限(kW)" prop="antiReverseUp">
                <el-input-number v-model="form.antiReverseUp" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="降功率比例(%)" prop="antiReversePowerDownPercent">
                <el-input-number v-model="form.antiReversePowerDownPercent" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="硬停阈值(kW)" prop="antiReverseHardStopThreshold">
                <el-input-number v-model="form.antiReverseHardStopThreshold" :min="0" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8">
            <div class="group-card">
              <div class="group-title">功率与保护</div>
              <el-form-item label="设定功率倍率" prop="powerSetMultiplier">
                <el-input-number v-model="form.powerSetMultiplier" :min="0.0001" :step="0.1" :precision="4" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="保护介入" prop="protectInterveneEnable">
                <el-switch v-model="form.protectInterveneEnable" :active-value="1" :inactive-value="0" />
              </el-form-item>
              <el-form-item label="一级降额比例(%)" prop="protectL1DeratePercent">
                <el-input-number v-model="form.protectL1DeratePercent" :min="0" :max="100" :step="1" :precision="2" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="释放稳定时长(s)" prop="protectRecoveryStableSeconds">
                <el-input-number v-model="form.protectRecoveryStableSeconds" :min="0" :max="3600" :step="1" :precision="0" :controls="false" style="width: 160px;" />
              </el-form-item>
              <el-form-item label="三级锁存" prop="protectL3LatchEnable">
                <el-switch v-model="form.protectL3LatchEnable" :active-value="1" :inactive-value="0" />
              </el-form-item>
              <el-form-item label="冲突策略" prop="protectConflictPolicy">
                <el-select v-model="form.protectConflictPolicy" style="width: 160px;">
                  <el-option label="最高等级优先" value="MAX_LEVEL_WIN" />
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <div class="action-row">
          <el-button type="primary" :loading="saveLoading" @click="handleSave">保存</el-button>
          <el-button @click="init">重置</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
import { getStrategyRuntimeConfig, saveStrategyRuntimeConfig } from '@/api/ems/dzjk'

const emptyForm = () => ({
  siteId: '',
  socDown: 0,
  socUp: 100,
  antiReverseThreshold: 30,
  powerSetMultiplier: 10,
  antiReverseRangePercent: 20,
  antiReverseUp: 100,
  antiReversePowerDownPercent: 10,
  antiReverseHardStopThreshold: 20,
  protectInterveneEnable: 1,
  protectL1DeratePercent: 50,
  protectRecoveryStableSeconds: 5,
  protectL3LatchEnable: 1,
  protectConflictPolicy: 'MAX_LEVEL_WIN'
})

export default {
  name: 'DzjkClpzRuntimeParam',
  mixins: [getQuerySiteId],
  data() {
    return {
      loading: false,
      saveLoading: false,
      form: emptyForm(),
      rules: {
        socDown: [
          { required: true, message: '请输入SOC下限', trigger: 'change' }
        ],
        socUp: [
          { required: true, message: '请输入SOC上限', trigger: 'change' }
        ],
        antiReverseThreshold: [
          { required: true, message: '请输入防逆流阈值', trigger: 'change' }
        ],
        powerSetMultiplier: [
          { required: true, message: '请输入设定功率倍率', trigger: 'change' }
        ],
        antiReverseRangePercent: [
          { required: true, message: '请输入防逆流阈值上浮比例', trigger: 'change' }
        ],
        antiReverseUp: [
          { required: true, message: '请输入防逆流恢复上限', trigger: 'change' }
        ],
        antiReversePowerDownPercent: [
          { required: true, message: '请输入防逆流降功率比例', trigger: 'change' }
        ],
        antiReverseHardStopThreshold: [
          { required: true, message: '请输入防逆流硬停阈值', trigger: 'change' }
        ],
        protectInterveneEnable: [
          { required: true, message: '请选择是否启用保护介入', trigger: 'change' }
        ],
        protectL1DeratePercent: [
          { required: true, message: '请输入一级降额比例', trigger: 'change' }
        ],
        protectRecoveryStableSeconds: [
          { required: true, message: '请输入释放稳定时长', trigger: 'change' }
        ],
        protectL3LatchEnable: [
          { required: true, message: '请选择三级锁存开关', trigger: 'change' }
        ],
        protectConflictPolicy: [
          { required: true, message: '请选择冲突策略', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    init() {
      if (!this.siteId) {
        this.form = emptyForm()
        return
      }
      this.loading = true
      getStrategyRuntimeConfig(this.siteId).then(response => {
        const data = response?.data || {}
        this.form = {
          ...emptyForm(),
          ...data,
          siteId: this.siteId
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleSave() {
      if (!this.siteId) {
        this.$message.error('缺少站点ID')
        return
      }
      this.$refs.form.validate(valid => {
        if (!valid) return
        if (Number(this.form.socDown) > Number(this.form.socUp)) {
          this.$message.error('SOC下限不能大于SOC上限')
          return
        }
        if (Number(this.form.powerSetMultiplier) <= 0) {
          this.$message.error('设定功率倍率必须大于0')
          return
        }
        if (Number(this.form.protectL1DeratePercent) < 0 || Number(this.form.protectL1DeratePercent) > 100) {
          this.$message.error('一级降额比例必须在0~100之间')
          return
        }
        if (Number(this.form.protectRecoveryStableSeconds) < 0) {
          this.$message.error('释放稳定时长不能小于0')
          return
        }
        this.saveLoading = true
        saveStrategyRuntimeConfig({ ...this.form, siteId: this.siteId }).then(response => {
          if (response?.code === 200) {
            this.$message.success('保存成功')
            this.init()
          }
        }).finally(() => {
          this.saveLoading = false
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.site-tag {
  float: right;
  color: #909399;
  font-size: 13px;
}

.common-card-container {
  border: none;
  box-shadow: none !important;
}

.runtime-grid {
  max-width: 1180px;
  display: flex;
  flex-wrap: wrap;
}

.runtime-grid > .el-col {
  display: flex;
}

.group-card {
  border: none;
  border-radius: 4px;
  padding: 14px 14px 2px;
  min-height: 330px;
  width: 100%;
  height: 100%;
  margin-bottom: 12px;
}

.group-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 14px;
}

.action-row {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style>