zhny_ui/ems-ui-cloud/src/views/basecfg/price/components/PeakValleyStrategy.vue

<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleStrategyAdd"
          v-hasPermi="['basecfg:price:add']"
        >
          新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" :search="false" @queryTable="getStrategyList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="strategyList">
      <el-table-column label="策略编码" align="center" prop="strategyCode" />
      <el-table-column label="策略名称" align="center" prop="strategyName" />
      <el-table-column label="执行月份" align="center" prop="execMonth" show-overflow-tooltip>
        <template slot-scope="scope">
          {{formatExecMonth(scope.row.execMonth)}}
        </template>
      </el-table-column>
      <el-table-column label="执行日期" align="center" prop="execDateType">
        <template slot-scope="scope">
          {{formatDict(scope.row.execDateType,'execDateTypeOptions')}}
        </template>
      </el-table-column>
      <el-table-column label="策略描述" align="center" prop="strategyDesc" show-overflow-tooltip />
      <el-table-column label="分时类型" align="center" prop="supportType" show-overflow-tooltip>
        <template slot-scope="scope">
          {{formatSupportType(scope.row.supportType)}}
        </template>
      </el-table-column>
      <el-table-column label="优先级" align="center" prop="priority" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-info"
            v-if="scope.row.editFlag==0"
            @click="handleStrategyDetail(scope.row)"
            v-hasPermi="['basecfg:price:edit']"
          >
            查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-else
            @click="handleStrategyUpdate(scope.row)"
            v-hasPermi="['basecfg:price:edit']"
          >
            修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            class="deleteBtn"
            @click="handleStrategyDelete(scope.row)"
            v-hasPermi="['basecfg:price:remove']"
            :disabled="scope.row.editFlag==0"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改峰谷电价策略配置对话框 -->
    <el-dialog :title="title" :visible.sync="strategyDialog" width="850px" append-to-body>
      <el-form ref="strategyForm" class="strategyForm" :model="strategyForm" :disabled="ifDisabled" label-width="100px">
        <el-form-item label="策略编码" prop="strategyCode" required :rules="[{required:true,message:'策略编码不能为空'}]">
          <el-input v-model="strategyForm.strategyCode" placeholder="请输入策略编码" />
        </el-form-item>
        <el-form-item label="策略名称" prop="strategyName" required :rules="[{required:true,message:'策略名称不能为空'}]">
          <el-input v-model="strategyForm.strategyName" placeholder="请输入策略名称" />
        </el-form-item>
        <el-form-item label="执行日期" prop="execDateType" required :rules="[{required:true,message:'请选择执行日期'}]">
          <el-select v-model="strategyForm.execDateType" style="width:100%" placeholder="请选择执行日期" @change="execDateTypeChange">
            <el-option v-for="item in execDateTypeOptions" :label="item.name" :value="item.value" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="执行说明"
          required
          :rules="[{required:true,message:'请选择执行说明'}]"
          prop="execDate"
          v-if="[1,5,6].includes(strategyForm.execDateType)"
        >
          <el-time-picker
            v-if="strategyForm.execDateType==1"
            v-model="strategyForm.execDate"
            value-format="HH:mm:ss"
            :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
            placeholder="选择时间"
          >
          </el-time-picker>
          <el-checkbox-group v-else-if="strategyForm.execDateType==5" v-model="strategyForm.execDate">
            <el-checkbox v-for="day in weeks.filter(item=>item.value<6)" :label="day.value" :key="day.value">
              {{day.name}}
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-else-if="strategyForm.execDateType==6" v-model="strategyForm.execDate">
            <el-checkbox v-for="day in weeks" :label="day.value" :key="day.value">{{day.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="策略描述" prop="strategyDesc">
          <el-input v-model="strategyForm.strategyDesc" placeholder="请输入策略描述" />
        </el-form-item>
        <el-form-item label="执行月份" prop="execMonth" required :rules="[{required:true,message:'请选择执行月份'}]">
          <el-checkbox-group v-model="strategyForm.execMonth">
            <el-tooltip
              v-for="month in availableMonths"
              :key="month.value"
              :content="month.disabled ? '已占用' : ''"
              :disabled="!month.disabled"
              placement="top"
              effect="dark">
              <el-checkbox
                :label="month.value"
                :disabled="month.disabled">
                <span :style="{color: month.disabled ? '#c0c4cc' : ''}">
                  {{month.label}}
                </span>
              </el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
          <div v-if="monthConflictTip" style="color: #f56c6c; font-size: 12px; margin-top: 5px;">
            {{ monthConflictTip }}
          </div>
        </el-form-item>
        <el-form-item label="分时类型" prop="supportType" required :rules="[{required:true,message:'请选择分时类型'}]">
          <el-checkbox-group v-model="strategyForm.supportType" @change="handleSupportTypeChange">
            <el-checkbox
              v-for="type in timeTypeOptions"
              :label="type.value"
              :key="type.value"
              :disabled="type.value === 0"
            >
              {{type.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="优先级" prop="priority" required>
          <el-input-number
            v-model="strategyForm.priority"
            :min="0"
            :max="100"
            @change="handlePriorityChange"
            label="描述文字">
          </el-input-number>
          <span style="margin-left: 10px; color: #909399; font-size: 12px;">
            相同优先级的策略月份不能重叠
          </span>
        </el-form-item>
        <el-form-item label="小时电价">
          <el-table class="sub-table" :data="strategyForm.hourList" max-height="200px">
            <el-table-column label="开始时刻" align="center" prop="startTime">
              <template slot-scope="scope">
                <el-time-picker
                  v-model="scope.row.startTime"
                  size="mini"
                  value-format="HH:mm:ss"
                  :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
                  placeholder="选择时间"
                >
                </el-time-picker>
              </template>
            </el-table-column>
            <el-table-column label="结束时刻" align="center" prop="endTime">
              <template slot-scope="scope">
                <el-time-picker
                  v-model="scope.row.endTime"
                  size="mini"
                  value-format="HH:mm:ss"
                  :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
                  placeholder="选择时间"
                >
                </el-time-picker>
              </template>
            </el-table-column>
            <el-table-column label="分时类型" align="center" prop="type">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" size="mini" style="width:100%" placeholder="请选择">
                  <el-option
                    v-for="type in filteredTimeTypes"
                    :label="type.label"
                    :value="type.value"
                    :key="type.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" width="100" v-if="!ifDisabled">
              <template slot="header">
                <div class="operateBtns" @click="addSub">
                  <span>操作</span><i class="el-icon-circle-plus-outline"></i>
                </div>
              </template>
              <template slot-scope="scope">
                <i class="el-icon-delete" @click="deleteSub(scope.$index)"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!ifDisabled">
        <el-button type="primary" @click="submitStrategyForm">确 定</el-button>
        <el-button @click="strategyCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listStrategy, addStrategy, updateStrategy, delStrategy } from '@/api/basecfg/elecAttr'
import commonMethods from '../mixins/commonMethods'

export default {
  name: 'PeakValleyStrategy',
  mixins: [commonMethods],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 峰谷电价
      strategyList: [],
      // 弹出层标题
      title: '',
      strategyDialog: false,
      ifDisabled: false,
      // 查询参数
      strategyParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 执行日期选项
      execDateTypeOptions: [
        { name: '每天', value: 2 },
        { name: '周一至周五', value: 5 },
        { name: '自定义', value: 6 }
      ],
      weeks: [
        { name: '周一', value: '1' },
        { name: '周二', value: '2' },
        { name: '周三', value: '3' },
        { name: '周四', value: '4' },
        { name: '周五', value: '5' },
        { name: '周六', value: '6' },
        { name: '周日', value: '7' }
      ],
      // 月份选项
      monthOptions: [
        { value: '01', label: '一月' },
        { value: '02', label: '二月' },
        { value: '03', label: '三月' },
        { value: '04', label: '四月' },
        { value: '05', label: '五月' },
        { value: '06', label: '六月' },
        { value: '07', label: '七月' },
        { value: '08', label: '八月' },
        { value: '09', label: '九月' },
        { value: '10', label: '十月' },
        { value: '11', label: '十一月' },
        { value: '12', label: '十二月' }
      ],
      // 分时类型选项
      timeTypeOptions: [
        { value: -2, label: '低谷' },
        { value: -1, label: '谷段' },
        { value: 0, label: '平段' },
        { value: 1, label: '峰段' },
        { value: 2, label: '尖峰' }
      ],
      strategyForm: {
        strategyCode: '',
        strategyName: '',
        strategyDesc: '',
        execDateType: '',
        execDate: [],
        execMonth: [],
        supportType: [0],
        priority: 0,
        hourList: []
      }
    }
  },
  computed: {
    // 根据选中的分时类型过滤小时电价表格中的选项
    filteredTimeTypes() {
      return this.timeTypeOptions.filter(type =>
        this.strategyForm.supportType.includes(type.value)
      )
    },
    // 获取可用月份（动态禁用已被占用的月份）
    availableMonths() {
      const currentPriority = this.strategyForm.priority
      const samePriorityStrategies = this.strategyList.filter(strategy => {
        return strategy.priority === currentPriority &&
          strategy.id !== this.strategyForm.id &&
          strategy.editFlag !== 0
      })

      const occupiedMonths = new Set()
      samePriorityStrategies.forEach(strategy => {
        if (strategy.execMonth) {
          strategy.execMonth.split(',').forEach(month => {
            occupiedMonths.add(month)
          })
        }
      })

      return this.monthOptions.map(month => ({
        ...month,
        disabled: occupiedMonths.has(month.value)
      }))
    },
    // 月份冲突提示
    monthConflictTip() {
      const currentPriority = this.strategyForm.priority
      const samePriorityStrategies = this.strategyList.filter(strategy => {
        return strategy.priority === currentPriority &&
          strategy.id !== this.strategyForm.id &&
          strategy.editFlag !== 0
      })

      if (samePriorityStrategies.length > 0) {
        const strategies = samePriorityStrategies.map(s => s.strategyName).join('、')
        return `提示：优先级${currentPriority}下已存在策略：${strategies}`
      }
      return ''
    }
  },
  created() {
    this.getStrategyList()
  },
  methods: {
    // 格式化分时类型
    formatSupportType(supportType) {
      if (!supportType) return ''
      const types = supportType.split(',').map(v => parseInt(v))
      const labels = types.map(type => {
        const found = this.timeTypeOptions.find(opt => opt.value === type)
        return found ? found.label : ''
      }).filter(label => label)
      return labels.join('、')
    },

    // 格式化执行月份
    formatExecMonth(execMonth) {
      if (!execMonth) return ''
      const months = execMonth.split(',')
      const labels = months.map(month => {
        const found = this.monthOptions.find(opt => opt.value === month)
        return found ? found.label : ''
      }).filter(label => label)
      return labels.join('、')
    },

    // 处理分时类型变化
    handleSupportTypeChange(values) {
      // 确保平段始终被选中
      if (!values.includes(0)) {
        values.push(0)
      }
    },

    // 处理优先级变化
    handlePriorityChange(value) {
      // 当优先级改变时，清空月份选择中的冲突月份
      const availableMonthValues = this.availableMonths
        .filter(m => !m.disabled)
        .map(m => m.value)

      // 过滤掉不可用的月份
      this.strategyForm.execMonth = this.strategyForm.execMonth.filter(month =>
        availableMonthValues.includes(month)
      )
    },

    // 修改执行日期变更方法
    execDateTypeChange(val) {
      if (val == 5) {
        this.strategyForm.execDate = this.weeks.filter(item => item.value < 6).map(item => item.value)
      } else if (val == 6) {
        this.strategyForm.execDate = []
      } else {
        this.strategyForm.execDate = ''
      }
    },

    /** 查询峰谷电价列表 */
    getStrategyList() {
      const { pageNum, pageSize } = this.strategyParams
      this.loading = true
      listStrategy({ pageNum, pageSize }).then(response => {
        this.strategyList = response.rows
        this.loading = false
      })
    },

    handleStrategyDetail(row) {
      this.ifDisabled = true
      this.resetForm('strategyForm')
      // 深拷贝数据，避免直接修改原数据
      this.strategyForm = JSON.parse(JSON.stringify(row))
      // 处理执行日期
      if ([5, 6].includes(this.strategyForm.execDateType)) {
        this.strategyForm.execDate = this.strategyForm.execDate ?
          this.strategyForm.execDate.split(',') : []
      }
      // 处理执行月份
      this.strategyForm.execMonth = this.strategyForm.execMonth ?
        this.strategyForm.execMonth.split(',') : []
      // 处理分时类型
      this.strategyForm.supportType = this.strategyForm.supportType ?
        this.strategyForm.supportType.split(',').map(v => parseInt(v)) : [0]
      this.strategyDialog = true
      this.title = '查看峰谷电价策略'
    },

    handleStrategyAdd() {
      this.ifDisabled = false
      this.resetForm('strategyForm')
      this.strategyForm = {
        id: null,
        strategyCode: '',
        strategyName: '',
        strategyDesc: '',
        execDateType: '',
        execDate: [],
        execMonth: [],
        supportType: [0],
        priority: 1,
        hourList: []
      }
      this.strategyDialog = true
      this.title = '添加峰谷电价策略'
    },

    handleStrategyUpdate(row) {
      this.ifDisabled = false
      this.resetForm('strategyForm')
      // 深拷贝数据，避免直接修改原数据
      this.strategyForm = JSON.parse(JSON.stringify(row))
      // 处理执行日期
      if ([5, 6].includes(this.strategyForm.execDateType)) {
        this.strategyForm.execDate = this.strategyForm.execDate ?
          this.strategyForm.execDate.split(',') : []
      }
      // 处理执行月份
      this.strategyForm.execMonth = this.strategyForm.execMonth ?
        this.strategyForm.execMonth.split(',') : []
      // 处理分时类型
      this.strategyForm.supportType = this.strategyForm.supportType ?
        this.strategyForm.supportType.split(',').map(v => parseInt(v)) : [0]
      // 确保平段始终被选中
      if (!this.strategyForm.supportType.includes(0)) {
        this.strategyForm.supportType.push(0)
      }
      this.strategyDialog = true
      this.title = '修改峰谷电价策略'
    },

    handleStrategyDelete(row) {
      this.$modal.confirm('是否确认删除').then(() => {
        delStrategy(row.id).then(() => {
          this.getStrategyList()
          this.$modal.msgSuccess('删除成功')
        })
      })
    },

    strategyCancel() {
      this.strategyDialog = false
      this.resetForm('strategyForm')
      // 完全重置表单数据
      this.strategyForm = {
        id: null,
        strategyCode: '',
        strategyName: '',
        strategyDesc: '',
        execDateType: '',
        execDate: [],
        execMonth: [],
        supportType: [0],
        priority: 1,
        hourList: []
      }
      // 清除可能的验证状态
      this.$nextTick(() => {
        if (this.$refs.strategyForm) {
          this.$refs.strategyForm.clearValidate()
        }
      })
    },

    submitStrategyForm() {
      this.$refs['strategyForm'].validate(valid => {
        if (valid) {
          if (this.strategyForm.hourList.length === 0) {
            return this.$modal.msgError(`请添加小时电价数据`)
          }

          // 检查相同优先级的月份冲突
          const monthConflict = this.checkMonthConflict()
          if (monthConflict) {
            return this.$modal.msgError(`执行月份冲突：${monthConflict}月份已被其他相同优先级的策略使用`)
          }

          // 验证小时电价数据
          let subFlag = false
          let dateFlag = false
          let validIndex = 0
          for (let i = 0; i < this.strategyForm.hourList.length; i++) {
            const item = this.strategyForm.hourList[i]
            if (item.startTime === '' || item.endTime === '' || item.type === '') {
              subFlag = true
              validIndex = i + 1
              break
            }
            if (this.compareTime(item.startTime, item.endTime)) {
              dateFlag = true
              validIndex = i + 1
              break
            }
          }
          if (subFlag) {
            return this.$modal.msgError(`请补全小时电价第${validIndex}行数据`)
          }
          if (dateFlag) {
            return this.$modal.msgError(`小时电价第${validIndex}行开始时刻不能大于结束时刻`)
          }

          // 增强的时间段重叠检查
          const overlapInfo = this.checkTimeRangesOverlapEnhanced()
          if (overlapInfo) {
            return this.$modal.msgError(`小时电价时间段冲突：${overlapInfo}`)
          }

          // 检查时间段完整性
          const completenessCheck = this.checkTimeCompleteness()
          if (completenessCheck) {
            this.$modal.confirm(`${completenessCheck}，是否继续保存？`).then(() => {
              this.saveStrategyForm()
            }).catch(() => {})
          } else {
            this.saveStrategyForm()
          }
        }
      })
    },

    // 保存策略表单
    saveStrategyForm() {
      // 创建表单数据的副本以避免修改原数据
      const formData = JSON.parse(JSON.stringify(this.strategyForm))

      // 特殊处理执行日期
      if ([5, 6].includes(formData.execDateType)) {
        formData.execDate = Array.isArray(formData.execDate) ? formData.execDate.join(',') : formData.execDate
      }

      // 处理执行月份
      formData.execMonth = Array.isArray(formData.execMonth) ? formData.execMonth.join(',') : formData.execMonth

      // 处理分时类型
      formData.supportType = Array.isArray(formData.supportType) ? formData.supportType.join(',') : formData.supportType

      formData.hourList.forEach(item => {
        item.strategyCode = formData.strategyCode
      })

      if (formData.id) {
        updateStrategy(formData).then(() => {
          this.$modal.msgSuccess('修改成功')
          this.strategyDialog = false
          this.getStrategyList()
        })
      } else {
        addStrategy(formData).then(() => {
          this.$modal.msgSuccess('新增成功')
          this.strategyDialog = false
          this.getStrategyList()
        })
      }
    },

    compareTime(t1, t2) {
      const d = new Date()
      const ft1 = d.setHours(t1.split(':')[0], t1.split(':')[1], t1.split(':')[2])
      const ft2 = d.setHours(t2.split(':')[0], t2.split(':')[1], t2.split(':')[2])
      return ft1 > ft2
    },

    // 增强版时间段重叠检查
    checkTimeRangesOverlapEnhanced() {
      const ranges = this.strategyForm.hourList.map((item, index) => {
        const d = new Date()
        const ft1 = d.setHours(item.startTime.split(':')[0], item.startTime.split(':')[1], item.startTime.split(':')[2])
        const ft2 = d.setHours(item.endTime.split(':')[0], item.endTime.split(':')[1], item.endTime.split(':')[2])
        return {
          start: ft1,
          end: ft2,
          startStr: item.startTime,
          endStr: item.endTime,
          index: index + 1
        }
      })

      // 按开始时间排序
      const sortedRanges = ranges.slice().sort((a, b) => a.start - b.start)

      // 检查重叠并返回详细信息
      for (let i = 1; i < sortedRanges.length; i++) {
        if (sortedRanges[i].start < sortedRanges[i - 1].end) {
          return `第${sortedRanges[i - 1].index}行(${sortedRanges[i - 1].startStr}-${sortedRanges[i - 1].endStr})与第${sortedRanges[i].index}行(${sortedRanges[i].startStr}-${sortedRanges[i].endStr})存在时间重叠`
        }
      }
      return null
    },

    // 检查时间完整性
    checkTimeCompleteness() {
      if (this.strategyForm.hourList.length === 0) return null

      const ranges = this.strategyForm.hourList.map(item => {
        const startParts = item.startTime.split(':')
        const endParts = item.endTime.split(':')
        return {
          start: parseInt(startParts[0]) * 3600 + parseInt(startParts[1]) * 60 + parseInt(startParts[2]),
          end: parseInt(endParts[0]) * 3600 + parseInt(endParts[1]) * 60 + parseInt(endParts[2]),
          startStr: item.startTime,
          endStr: item.endTime
        }
      }).sort((a, b) => a.start - b.start)

      const gaps = []
      const dayInSeconds = 24 * 3600
      const tolerance = 1

      // 检查开始是否从0点开始
      if (ranges[0].start > tolerance) {
        gaps.push(`00:00:00 - ${this.formatSeconds(ranges[0].start)}`)
      }

      // 检查中间的间隙
      for (let i = 1; i < ranges.length; i++) {
        const gap = ranges[i].start - ranges[i - 1].end
        if (gap > tolerance) {
          gaps.push(`${this.formatSeconds(ranges[i - 1].end)} - ${this.formatSeconds(ranges[i].start)}`)
        }
      }

      // 检查结束是否到24点
      if (ranges[ranges.length - 1].end < dayInSeconds - tolerance) {
        gaps.push(`${this.formatSeconds(ranges[ranges.length - 1].end)} - 23:59:59`)
      }

      if (gaps.length > 0) {
        return `以下时间段未配置：${gaps.join('、')}`
      }
      return null
    },

    // 辅助方法：将秒数转换为时间格式
    formatSeconds(seconds) {
      const h = Math.floor(seconds / 3600)
      const m = Math.floor((seconds % 3600) / 60)
      const s = seconds % 60
      return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
    },

    // 检查相同优先级策略的月份冲突
    checkMonthConflict() {
      const currentPriority = this.strategyForm.priority
      const samePriorityStrategies = this.strategyList.filter(strategy => {
        return strategy.priority === currentPriority &&
          strategy.id !== this.strategyForm.id &&
          strategy.editFlag !== 0
      })

      const occupiedMonths = new Set()
      samePriorityStrategies.forEach(strategy => {
        if (strategy.execMonth) {
          strategy.execMonth.split(',').forEach(month => {
            occupiedMonths.add(month)
          })
        }
      })

      const conflictMonths = []
      this.strategyForm.execMonth.forEach(month => {
        if (occupiedMonths.has(month)) {
          const monthLabel = this.monthOptions.find(m => m.value === month)?.label || month
          conflictMonths.push(monthLabel)
        }
      })

      if (conflictMonths.length > 0) {
        return conflictMonths.join('、')
      }
      return null
    },

    addSub() {
      this.strategyForm.hourList.push({
        startTime: '',
        endTime: '',
        type: ''
      })
    },

    deleteSub(index) {
      this.strategyForm.hourList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/dialog.scss';
.sub-table {
  .el-icon-delete {
    cursor: pointer;
  }
  .operateBtns {
    cursor: pointer;
    i {
      color: #1990ff;
      margin-left: 5px;
    }
  }
  ::v-deep .el-date-editor {
    width: 100% !important;
  }
}

.custom-checkbox-group {
  max-height: 120px;
  overflow-y: auto;
}

.strategyForm {
  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
    background: #fff;
  }
}

.deleteBtn:disabled {
  color: #c0c4cc !important;
  &:hover {
    color: #c0c4cc !important;
  }
}
</style>