2522 lines
82 KiB
Vue
2522 lines
82 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||
<el-form-item label="能源类型" prop="energyTypeId">
|
||
<el-select v-model="queryParams.energyTypeId" placeholder="请选择能源类型">
|
||
<el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="费率" prop="rate">
|
||
<el-input
|
||
v-model="queryParams.rate"
|
||
placeholder="请输入费率"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="货币单位" prop="currency">
|
||
<el-select v-model="queryParams.currency" placeholder="请选择货币单位">
|
||
<el-option v-for="item in dict.type.currency_unit" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="生效日期" prop="effectiveDate">
|
||
<el-date-picker clearable
|
||
v-model="queryParams.effectiveDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="请选择生效日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="失效日期" prop="expiryDate">
|
||
<el-date-picker clearable
|
||
v-model="queryParams.expiryDate"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
placeholder="请选择失效日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-row :gutter="10" class="mb8">
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAdd"
|
||
>新增</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="success"
|
||
plain
|
||
icon="el-icon-edit"
|
||
size="mini"
|
||
:disabled="single"
|
||
@click="handleUpdate"
|
||
>修改</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="danger"
|
||
plain
|
||
icon="el-icon-delete"
|
||
size="mini"
|
||
:disabled="multiple"
|
||
@click="handleDelete"
|
||
>删除</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="warning"
|
||
plain
|
||
icon="el-icon-download"
|
||
size="mini"
|
||
@click="handleExport"
|
||
>导出</el-button>
|
||
</el-col>
|
||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||
</el-row>
|
||
|
||
<el-table v-loading="loading" :data="energyRateList" @selection-change="handleSelectionChange" @row-click="handleRowClick">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="" align="center" prop="energyRateId" v-if="false"/>
|
||
<el-table-column label="能源类型" align="center" prop="energyTypeId">
|
||
<template slot-scope="scope">
|
||
<span>{{ getEnergyName(scope.row.energyTypeId) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="费率信息" align="left" min-width="280">
|
||
<template slot-scope="scope">
|
||
<div class="rate-info-detail">
|
||
<!-- 固定费率 -->
|
||
<div v-if="parseInt(scope.row.usePeakValley) === 0 && parseInt(scope.row.useTieredPricing) === 0" class="rate-item">
|
||
<span class="rate-label">固定费率:</span>
|
||
<span class="rate-value">¥{{ scope.row.rate }}/{{ getEnergyUnit(scope.row.energyTypeId) }}</span>
|
||
</div>
|
||
|
||
<!-- 峰谷时段费率 -->
|
||
<div v-if="parseInt(scope.row.usePeakValley) === 1 && parseInt(scope.row.useTieredPricing) === 0" class="rate-item">
|
||
<span class="rate-label">峰谷电价:</span>
|
||
<div v-if="getRatePeriods(scope.row.energyRateId).length > 0" class="period-rates">
|
||
<span v-for="period in getRatePeriods(scope.row.energyRateId)" :key="period.periodId" class="period-badge" :style="{ backgroundColor: getPeriodBgColor(period.periodType) }">
|
||
{{ getPeriodName(period.periodType) }}: ¥{{ period.rate }}
|
||
</span>
|
||
</div>
|
||
<div v-else class="config-warning">
|
||
<span>⚙ 未配置峰谷电价，请点击"配置"按钮进行设置</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 梯度收费 -->
|
||
<div v-if="parseInt(scope.row.useTieredPricing) === 1 && parseInt(scope.row.usePeakValley) === 0" class="rate-item">
|
||
<span class="rate-label">梯度电价:</span>
|
||
<div class="tier-rates">
|
||
<span v-if="!scope.row.tiers || scope.row.tiers.length === 0" style="color: #999;">未配置</span>
|
||
<span v-for="tier in scope.row.tiers" :key="tier.tierId" class="tier-badge">
|
||
第{{ tier.tierLevel }}档: {{ tier.minUsage }}-{{ tier.maxUsage ? tier.maxUsage : '∞' }} ¥{{ tier.rate }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 梯度+峰谷组合 -->
|
||
<div v-if="parseInt(scope.row.useTieredPricing) === 1 && parseInt(scope.row.usePeakValley) === 1" class="rate-item">
|
||
<span class="rate-label">梯度+峰谷:</span>
|
||
<div class="combo-rates">
|
||
<div v-for="tier in scope.row.tiers" :key="tier.tierId" class="combo-tier-row">
|
||
<div class="tier-header">第{{ tier.tierLevel }}档 ({{ tier.minUsage }}-{{ tier.maxUsage ? tier.maxUsage : '∞' }})</div>
|
||
<div class="tier-rates-container">
|
||
<span v-if="tier.tierPeriodRates && Object.keys(tier.tierPeriodRates).length > 0">
|
||
<span v-for="(rate, periodId) in tier.tierPeriodRates" :key="periodId" class="rate-badge">
|
||
¥{{ rate }}
|
||
</span>
|
||
</span>
|
||
<span v-else style="color: #999; font-size: 12px;">未配置</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="货币单位" align="center" prop="currency">
|
||
<template slot-scope="scope">
|
||
<dict-tag :options="dict.type.currency_unit" :value="scope.row.currency" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="生效日期" align="center" prop="effectiveDate" width="180">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="失效日期" align="center" prop="expiryDate" width="180">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.expiryDate" class="expiry-date">{{ parseTime(scope.row.expiryDate, '{y}-{m}-{d}') }}</span>
|
||
<el-tag v-else type="success" size="small">至今生效</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="峰谷时段" align="center" prop="usePeakValley">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.usePeakValley === 1 ? 'success' : 'info'">
|
||
{{ scope.row.usePeakValley === 1 ? '是' : '否' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="梯度收费" align="center" prop="useTieredPricing">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.useTieredPricing === 1 ? 'success' : 'info'">
|
||
{{ scope.row.useTieredPricing === 1 ? '是' : '否' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="备注" align="center" prop="remark" />
|
||
<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-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
>修改</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-setting"
|
||
@click="handleConfig(scope.row)"
|
||
>配置</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
>删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<!-- 费率可视化展示（浮动） -->
|
||
<div v-if="selectedRateRow" class="rate-visualization-floating">
|
||
<div class="visualization-header">
|
||
<span class="visualization-title">
|
||
{{ getEnergyName(selectedRateRow.energyTypeId) }} - 费率分布
|
||
</span>
|
||
<el-button size="mini" @click="selectedRateRow = null" style="color: #666; border: none; background: transparent;">✕</el-button>
|
||
</div>
|
||
|
||
<!-- 峰谷电费率展示（梯度+峰谷组合模式下不显示） -->
|
||
<div v-if="selectedRateRow && parseInt(selectedRateRow.usePeakValley) === 1 && parseInt(selectedRateRow.useTieredPricing) === 0" class="visualization-section">
|
||
<div class="section-subtitle">峰谷电费率分布</div>
|
||
<div v-if="selectedPeriodList && selectedPeriodList.length > 0" class="bar-chart">
|
||
<div class="chart-container">
|
||
<div v-for="period in selectedPeriodList" :key="period.periodId" class="bar-item">
|
||
<div class="bar-wrapper">
|
||
<div
|
||
class="bar"
|
||
:style="{
|
||
height: period.rate ? (period.rate / selectedMaxPeriodRate) * 100 + '%' : '5%',
|
||
backgroundColor: getPeriodBgColor(period.periodType)
|
||
}">
|
||
</div>
|
||
</div>
|
||
<div class="bar-label">
|
||
<div class="time">{{ period.startTime }}-{{ period.endTime }}</div>
|
||
<div class="rate">¥{{ period.rate || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 梯度电费率展示 -->
|
||
<div v-if="selectedRateRow && parseInt(selectedRateRow.useTieredPricing) === 1" class="visualization-section">
|
||
<div class="section-subtitle">梯度电费率分布</div>
|
||
<div v-if="selectedTierList && selectedTierList.length > 0" class="bar-chart">
|
||
<div class="chart-container">
|
||
<div v-for="tier in selectedTierList" :key="tier.tierId" class="bar-item">
|
||
<div class="bar-wrapper">
|
||
<div
|
||
class="bar tier-bar"
|
||
:style="{
|
||
height: tier.rate ? (tier.rate / selectedMaxTierRate) * 100 + '%' : '5%'
|
||
}">
|
||
</div>
|
||
</div>
|
||
<div class="bar-label">
|
||
<div class="tier-info">第{{ tier.tierLevel }}梯</div>
|
||
<div class="usage">{{ tier.minUsage }}-{{ tier.maxUsage ? tier.maxUsage : '∞' }}</div>
|
||
<div class="rate">¥{{ tier.rate || 0 }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 固定费率展示 -->
|
||
<div v-if="parseInt(selectedRateRow.usePeakValley) === 0 && parseInt(selectedRateRow.useTieredPricing) === 0" class="visualization-section">
|
||
<div class="section-subtitle">📌 固定费率</div>
|
||
<div class="fixed-rate-display">
|
||
<div class="rate-box">
|
||
<span class="rate-label">费率</span>
|
||
<span class="rate-value">¥{{ selectedRateRow.rate }}/{{ getEnergyUnit(selectedRateRow.energyTypeId) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加或修改能源费率对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body @close="cancel">
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||
<el-form-item label="能源类型" prop="energyTypeId">
|
||
<el-select v-model="form.energyTypeId" placeholder="请选择能源类型">
|
||
<el-option v-for="item in energyTypeList" :key="item.energyTypeId" :label="item.name" :value="item.energyTypeId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="基础费率" prop="rate">
|
||
<el-input
|
||
v-model="form.rate"
|
||
placeholder="请输入费率"
|
||
:disabled="form.usePeakValley === 1 || form.useTieredPricing === 1"
|
||
@focus="onRateFieldFocus" />
|
||
<span v-if="form.usePeakValley === 1 || form.useTieredPricing === 1" class="tip-text">
|
||
ⓘ 已启用峰谷或梯度，基础费率由配置决定
|
||
</span>
|
||
</el-form-item>
|
||
<el-form-item label="货币单位" prop="currency">
|
||
<el-select v-model="form.currency" placeholder="请选择货币单位">
|
||
<el-option v-for="item in dict.type.currency_unit" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="生效日期" prop="effectiveDate">
|
||
<el-date-picker clearable
|
||
v-model="form.effectiveDate"
|
||
type="datetime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择生效日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="失效日期" prop="expiryDate">
|
||
<el-date-picker clearable
|
||
v-model="form.expiryDate"
|
||
type="datetime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择失效日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-divider></el-divider>
|
||
<el-form-item label="峰谷时段" prop="usePeakValley">
|
||
<el-switch v-model="form.usePeakValley" :active-value="1" :inactive-value="0"></el-switch>
|
||
<span class="ml10">{{ form.usePeakValley === 1 ? '启用' : '禁用' }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="梯度收费" prop="useTieredPricing">
|
||
<el-switch v-model="form.useTieredPricing" :active-value="1" :inactive-value="0"></el-switch>
|
||
<span class="ml10">{{ form.useTieredPricing === 1 ? '启用' : '禁用' }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 费率配置对话框（分步骤向导式） -->
|
||
<el-dialog title="费率配置向导" :visible.sync="configOpen" width="900px" :fullscreen="false" append-to-body @close="closeConfig">
|
||
<!-- 步骤条 -->
|
||
<el-steps :active="configStep" process-status="process" align-center class="wizard-steps">
|
||
<el-step title="选择模式" icon="el-icon-setting"></el-step>
|
||
<el-step v-if="form.usePeakValley === 1" title="配置峰谷" icon="el-icon-time"></el-step>
|
||
<el-step v-if="form.useTieredPricing === 1" title="配置梯度" icon="el-icon-s-unfold"></el-step>
|
||
<el-step title="预览保存" icon="el-icon-check"></el-step>
|
||
</el-steps>
|
||
|
||
<!-- 步骤内容 -->
|
||
<div class="wizard-content" style="margin-top: 30px;">
|
||
<!-- 第1步：选择模式 -->
|
||
<div v-if="configStep === 0" class="step-content">
|
||
<div class="mode-selection">
|
||
<h3>请选择计价模式</h3>
|
||
<div class="mode-cards">
|
||
<div class="mode-card" @click="selectMode('fixed')" :class="{ active: form.usePeakValley === 0 && form.useTieredPricing === 0 }">
|
||
<div class="mode-icon">📌</div>
|
||
<div class="mode-name">固定费率</div>
|
||
<div class="mode-desc">使用统一的费率</div>
|
||
</div>
|
||
<div class="mode-card" @click="selectMode('peak')" :class="{ active: form.usePeakValley === 1 && form.useTieredPricing === 0 }">
|
||
<div class="mode-icon">📊</div>
|
||
<div class="mode-name">峰谷分时</div>
|
||
<div class="mode-desc">按时段设置费率</div>
|
||
</div>
|
||
<div class="mode-card" @click="selectMode('tier')" :class="{ active: form.usePeakValley === 0 && form.useTieredPricing === 1 }">
|
||
<div class="mode-icon">📈</div>
|
||
<div class="mode-name">梯度收费</div>
|
||
<div class="mode-desc">按用量设置费率</div>
|
||
</div>
|
||
<div class="mode-card" @click="selectMode('combo')" :class="{ active: form.usePeakValley === 1 && form.useTieredPricing === 1 }">
|
||
<div class="mode-icon">🔗</div>
|
||
<div class="mode-name">峰谷+梯度</div>
|
||
<div class="mode-desc">组合计价模式</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第2步：配置峰谷（仅在峰谷模式下显示） -->
|
||
<div v-if="configStep === 1 && form.usePeakValley === 1" class="step-content">
|
||
<div class="peak-valley-config">
|
||
<h3>配置峰谷时段</h3>
|
||
<el-alert
|
||
title="峰谷时段说明"
|
||
type="info"
|
||
description="根据不同时段设置不同的费率。例如：8:00-12:00为峰时段（1.5元/度），12:00-18:00为平时段（1.0元/度），18:00-22:00为谷时段（0.5元/度）。"
|
||
:closable="false"
|
||
class="mb15">
|
||
</el-alert>
|
||
|
||
<div class="period-actions mb15">
|
||
<el-button type="primary" size="small" icon="el-icon-plus" @click="addPeriod">添加时段</el-button>
|
||
<span class="ml10" style="color: #909399;">已配置 {{ periodList.length }} 个时段</span>
|
||
</div>
|
||
|
||
<el-table :data="periodList" border stripe max-height="400" size="small">
|
||
<el-table-column label="时段类型" align="center" min-width="110">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.periodType" placeholder="请选择" size="small" style="width: 100%;">
|
||
<el-option label="🔴 峰" :value="0" />
|
||
<el-option label="🔵 谷" :value="1" />
|
||
<el-option label="🟡 平" :value="2" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="时段名称" align="center" min-width="120">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.periodName"
|
||
placeholder="如：峰时段"
|
||
maxlength="15"
|
||
size="small"
|
||
style="width: 100%;" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="开始时间" align="center" min-width="130">
|
||
<template slot-scope="scope">
|
||
<el-time-picker
|
||
v-model="scope.row.startTime"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
placeholder="HH:mm"
|
||
size="small"
|
||
style="width: 100%;"
|
||
@change="validatePeriodTime(scope.$index)" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="结束时间" align="center" min-width="130">
|
||
<template slot-scope="scope">
|
||
<el-time-picker
|
||
v-model="scope.row.endTime"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
placeholder="HH:mm"
|
||
size="small"
|
||
style="width: 100%;"
|
||
@change="validatePeriodTime(scope.$index)" />
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 仅在非组合模式下显示费率列 -->
|
||
<el-table-column v-if="form.useTieredPricing === 0" label="费率" align="center" min-width="120">
|
||
<template slot-scope="scope">
|
||
<el-input-number
|
||
v-model="scope.row.rate"
|
||
:precision="4"
|
||
:step="0.01"
|
||
:min="0"
|
||
size="small"
|
||
placeholder="如：1.5"
|
||
style="width: 100%;" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" min-width="80">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removePeriod(scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第2或3步：配置梯度 -->
|
||
<div v-if="(configStep === 1 && form.useTieredPricing === 1 && form.usePeakValley === 0) || (configStep === 2 && form.useTieredPricing === 1)" class="step-content">
|
||
<div class="tier-config">
|
||
<h3>配置梯度收费</h3>
|
||
<el-alert
|
||
title="梯度收费说明"
|
||
type="info"
|
||
description="根据用量区间设置不同的费率。例如：0-100度按1.0元/度收费，100-200度按1.5元/度收费，200度以上按2.0元/度收费。"
|
||
:closable="false"
|
||
class="mb15">
|
||
</el-alert>
|
||
|
||
<div class="tier-actions mb15">
|
||
<el-button type="primary" size="small" icon="el-icon-plus" @click="addTier">添加梯度</el-button>
|
||
<span class="ml10" style="color: #909399;">已配置 {{ tierList.length }} 个梯度</span>
|
||
</div>
|
||
|
||
<el-table :data="tierList" border stripe max-height="400" size="small">
|
||
<el-table-column label="梯度等级" align="center" min-width="100">
|
||
<template slot-scope="scope">
|
||
<span class="tier-level-badge">第{{ scope.row.tierLevel }}梯</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="最小用量" align="center" min-width="140">
|
||
<template slot-scope="scope">
|
||
<div class="tier-input-wrapper">
|
||
<el-input-number
|
||
v-model="scope.row.minUsage"
|
||
:precision="2"
|
||
:step="0.01"
|
||
:min="0"
|
||
size="small"
|
||
placeholder="如：0"
|
||
style="width: 100%;"
|
||
@change="onTierMinUsageChange(scope.$index)" />
|
||
<span v-if="getTierValidationError(scope.$index, 'min')" class="tier-error">
|
||
{{ getTierValidationError(scope.$index, 'min') }}
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="最大用量" align="center" min-width="140">
|
||
<template slot-scope="scope">
|
||
<div class="tier-input-wrapper">
|
||
<el-input-number
|
||
v-model="scope.row.maxUsage"
|
||
:precision="2"
|
||
:step="0.01"
|
||
size="small"
|
||
:placeholder="scope.$index === tierList.length - 1 ? '无上限' : '自动填充'"
|
||
style="width: 100%;"
|
||
@change="onTierMaxUsageChange(scope.$index)" />
|
||
<span v-if="getTierValidationError(scope.$index, 'max')" class="tier-error">
|
||
{{ getTierValidationError(scope.$index, 'max') }}
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 仅在非组合模式下显示费率列 -->
|
||
<el-table-column v-if="form.usePeakValley === 0" label="费率" align="center" min-width="140">
|
||
<template slot-scope="scope">
|
||
<el-input-number
|
||
v-model="scope.row.rate"
|
||
:precision="4"
|
||
:step="0.01"
|
||
:min="0"
|
||
size="small"
|
||
placeholder="如：1.5"
|
||
style="width: 100%;" />
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 组合模式下显示配置峰谷按钮 -->
|
||
<el-table-column v-if="form.usePeakValley === 1" label="配置峰谷" align="center" min-width="140">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
icon="el-icon-edit"
|
||
@click="editTierPeriods(scope.row, scope.$index)">
|
||
配置峰谷
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" min-width="80">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeTier(scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最后一步：预览和保存 -->
|
||
<div v-if="isLastStep" class="step-content">
|
||
<div class="preview-section">
|
||
<h3>预览配置信息</h3>
|
||
|
||
<!-- 模式说明 -->
|
||
<div class="preview-card">
|
||
<div class="card-title">计价模式</div>
|
||
<div class="card-content">
|
||
<span v-if="form.useTieredPricing === 0 && form.usePeakValley === 0" class="tip-badge fixed-mode">
|
||
📌 固定费率模式
|
||
</span>
|
||
<span v-else-if="form.useTieredPricing === 0 && form.usePeakValley === 1" class="tip-badge peak-mode">
|
||
📊 峰谷分时模式
|
||
</span>
|
||
<span v-else-if="form.useTieredPricing === 1 && form.usePeakValley === 0" class="tip-badge tier-mode">
|
||
📈 梯度收费模式
|
||
</span>
|
||
<span v-else class="tip-badge combo-mode">
|
||
🔗 梯度+峰谷组合模式
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 峰谷预览 -->
|
||
<div v-if="form.usePeakValley === 1" class="preview-card">
|
||
<div class="card-title">峰谷时段</div>
|
||
<div class="card-content">
|
||
<div v-for="period in periodList" :key="period.periodId" class="preview-item">
|
||
<span class="period-badge" :style="{ backgroundColor: getPeriodBgColor(period.periodType) }">
|
||
{{ getPeriodName(period.periodType) }}
|
||
</span>
|
||
<span>{{ period.startTime }} - {{ period.endTime }}</span>
|
||
<!-- 仅在非组合模式下显示费率 -->
|
||
<span v-if="form.useTieredPricing === 0" class="rate-value">¥{{ period.rate }}/{{ energyUnit }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 梯度预览 -->
|
||
<div v-if="form.useTieredPricing === 1" class="preview-card">
|
||
<div class="card-title">梯度收费</div>
|
||
<div class="card-content">
|
||
<!-- 仅梯度模式：显示梯度费率 -->
|
||
<div v-if="form.usePeakValley === 0">
|
||
<div v-for="tier in tierList" :key="tier.tierId" class="preview-item">
|
||
<span class="tier-badge">第{{ tier.tierLevel }}梯</span>
|
||
<span>{{ tier.minUsage }} - {{ tier.maxUsage ? tier.maxUsage : '∞' }} {{ energyUnit }}</span>
|
||
<span class="rate-value">¥{{ tier.rate }}/{{ energyUnit }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 组合模式：显示梯度的峰谷费率 -->
|
||
<div v-else>
|
||
<div v-for="tier in tierList" :key="tier.tierId" class="tier-group">
|
||
<div class="tier-header">第{{ tier.tierLevel }}梯 ({{ tier.minUsage }} - {{ tier.maxUsage ? tier.maxUsage : '∞' }} {{ energyUnit }})</div>
|
||
<div v-for="period in periodList" :key="`${tier.tierId}-${period.periodId}`" class="preview-item" style="margin-left: 20px;">
|
||
<span class="period-badge" :style="{ backgroundColor: getPeriodBgColor(period.periodType) }">
|
||
{{ getPeriodName(period.periodType) }}
|
||
</span>
|
||
<span>{{ period.startTime }} - {{ period.endTime }}</span>
|
||
<span class="rate-value">¥{{ tier.tierPeriodRates && tier.tierPeriodRates[period.periodId || period._key] ? tier.tierPeriodRates[period.periodId || period._key] : 0 }}/{{ energyUnit }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button v-if="configStep > 0" @click="prevStep">上 一 步</el-button>
|
||
<el-button v-if="configStep < 3" type="primary" @click="nextStep">下 一 步</el-button>
|
||
<el-button v-if="configStep === 3" :loading="buttonLoading" type="primary" @click="saveConfig">保 存 配 置</el-button>
|
||
<el-button @click="closeConfig">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 梯度-时段费率编辑对话框 -->
|
||
<el-dialog
|
||
v-if="currentTier"
|
||
:title="`第${currentTier.tierLevel}梯 (${currentTier.minUsage}~${currentTier.maxUsage ? currentTier.maxUsage : '∞'}${energyUnit}) 的峰谷费率配置`"
|
||
:visible.sync="tierPeriodDialogOpen"
|
||
width="900px"
|
||
append-to-body
|
||
@close="closeTierPeriodDialog">
|
||
|
||
<el-alert
|
||
title="梯度峰谷费率说明"
|
||
type="info"
|
||
description="为该梯度的每个时段（峰/谷/平）设置不同的费率。例如：第1梯度的峰时段1.5元/度，谷时段0.5元/度。"
|
||
:closable="false"
|
||
class="mb15">
|
||
</el-alert>
|
||
|
||
<el-table :data="currentTierPeriods" border stripe max-height="400" size="small">
|
||
<el-table-column label="时段类型" align="center" width="100">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.periodType" placeholder="请选择" size="small" style="width: 100%;" disabled>
|
||
<el-option label="🔴 峰" :value="0" />
|
||
<el-option label="🔵 谷" :value="1" />
|
||
<el-option label="🟡 平" :value="2" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="时段名称" align="center" width="120">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.periodName }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="时间范围" align="center" width="140">
|
||
<template slot-scope="scope">
|
||
<span style="font-size: 12px;">{{ scope.row.startTime }} - {{ scope.row.endTime }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="费率" align="center" width="140">
|
||
<template slot-scope="scope">
|
||
<el-input-number
|
||
v-model="scope.row.rate"
|
||
:precision="4"
|
||
:step="0.01"
|
||
:min="0"
|
||
size="small"
|
||
placeholder="如：1.5"
|
||
style="width: 100%;" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="说明" align="center" min-width="150">
|
||
<template slot-scope="scope">
|
||
<span style="color: #606266; font-size: 11px;">
|
||
{{ scope.row.startTime }} - {{ scope.row.endTime }}<br/>
|
||
@ {{ scope.row.rate }} 元/{{ energyUnit }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="saveTierPeriods">保 存</el-button>
|
||
<el-button @click="closeTierPeriodDialog">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listEnergyRate, getEnergyRate, delEnergyRate, addEnergyRate, updateEnergyRate, getRateTiers, getRateTimePeriods, saveTiers, saveTimePeriods, getTierPeriodLinks, saveTierPeriodLinks } from "@/api/ems/energyRate";
|
||
import { listEnergyType } from "@/api/ems/energyType";
|
||
|
||
export default {
|
||
name: "EnergyRate",
|
||
dicts: ['currency_unit'],
|
||
data() {
|
||
return {
|
||
energyTypeList: [],
|
||
// 按钮loading
|
||
buttonLoading: false,
|
||
// 遮罩层
|
||
loading: true,
|
||
// 选中数组
|
||
ids: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 能源费率表格数据
|
||
energyRateList: [],
|
||
// 费率详情缓存（energyRateId -> {tiers, periods, tierPeriodRates}）
|
||
rateDetailsCache: {},
|
||
// 弹出层标题
|
||
title: "",
|
||
// 是否显示弹出层
|
||
open: false,
|
||
// 是否显示配置对话框
|
||
configOpen: false,
|
||
// 梯度费率列表
|
||
tierList: [],
|
||
// 时段费率列表
|
||
periodList: [],
|
||
// 能源单位
|
||
energyUnit: '度',
|
||
// 梯度-时段关联对话框
|
||
tierPeriodDialogOpen: false,
|
||
// 当前编辑的梯度
|
||
currentTier: null,
|
||
// 当前梯度的峰谷费率列表
|
||
currentTierPeriods: [],
|
||
// 向导步骤（0=选择模式, 1=配置峰谷或梯度, 2=配置梯度(组合模式), 3=预览保存）
|
||
configStep: 0,
|
||
// 选中的费率行（用于显示条形图）
|
||
selectedRateRow: null,
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
energyTypeId: undefined,
|
||
rate: undefined,
|
||
currency: undefined,
|
||
effectiveDate: undefined,
|
||
expiryDate: undefined,
|
||
},
|
||
// 表单参数
|
||
form: {},
|
||
// 表单校验
|
||
rules: {
|
||
energyTypeId: [
|
||
{ required: true, message: "能源类型不能为空", trigger: "change" }
|
||
],
|
||
effectiveDate: [
|
||
{ required: true, message: "生效日期不能为空", trigger: "change" }
|
||
],
|
||
rate: [
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
// 如果启用了梯度或峰谷，基础费率不是必需的
|
||
if (this.form.usePeakValley === 1 || this.form.useTieredPricing === 1) {
|
||
callback();
|
||
} else {
|
||
// 固定费率模式下，基础费率是必需的
|
||
if (!value) {
|
||
callback(new Error("固定费率模式下，基础费率不能为空"));
|
||
} else if (value < 0) {
|
||
callback(new Error("基础费率不能为负数"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
},
|
||
trigger: "change"
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
/** 选中行的时段列表 */
|
||
selectedPeriodList() {
|
||
if (!this.selectedRateRow) return [];
|
||
const periods = this.rateDetailsCache[this.selectedRateRow.energyRateId]?.periods || [];
|
||
return periods;
|
||
},
|
||
/** 选中行的梯度列表 */
|
||
selectedTierList() {
|
||
if (!this.selectedRateRow) return [];
|
||
// 直接使用列表返回的梯度数据
|
||
return this.selectedRateRow.tiers || [];
|
||
},
|
||
/** 选中行的最大时段费率 */
|
||
selectedMaxPeriodRate() {
|
||
if (this.selectedPeriodList.length === 0) return 1;
|
||
const max = Math.max(...this.selectedPeriodList.map(item => item.rate || 0));
|
||
return max > 0 ? max : 1;
|
||
},
|
||
/** 选中行的最大梯度费率 */
|
||
selectedMaxTierRate() {
|
||
if (this.selectedTierList.length === 0) return 1;
|
||
const max = Math.max(...this.selectedTierList.map(item => item.rate || 0));
|
||
return max > 0 ? max : 1;
|
||
},
|
||
/** 是否是最后一步 */
|
||
isLastStep() {
|
||
if (!this.form) return false;
|
||
return this.configStep === 3;
|
||
}
|
||
},
|
||
created() {
|
||
this.getList();
|
||
this.getEnergyTypeList();
|
||
},
|
||
methods: {
|
||
/** 查询能源费率（currency 为 INT：0=CNY,1=USD,2=EUR）列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
listEnergyRate(this.queryParams).then(response => {
|
||
this.energyRateList = response.rows;
|
||
this.total = response.total;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
getEnergyTypeList() {
|
||
listEnergyType({ pageNum: 1, pageSize: 9999 }).then(response => {
|
||
this.energyTypeList = response.rows;
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
energyRateId: undefined,
|
||
energyTypeId: undefined,
|
||
rate: undefined,
|
||
currency: undefined,
|
||
effectiveDate: undefined,
|
||
expiryDate: undefined,
|
||
createBy: undefined,
|
||
updateBy: undefined,
|
||
createTime: undefined,
|
||
updateTime: undefined,
|
||
delFlag: undefined,
|
||
remark: undefined
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
this.ids = selection.map(item => item.energyRateId)
|
||
this.single = selection.length!==1
|
||
this.multiple = !selection.length
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.reset();
|
||
this.open = true;
|
||
this.title = "添加能源费率";
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.loading = true;
|
||
this.reset();
|
||
const energyRateId = row.energyRateId || this.ids
|
||
getEnergyRate(energyRateId).then(response => {
|
||
this.loading = false;
|
||
this.form = response.data;
|
||
this.open = true;
|
||
this.title = "修改能源费率";
|
||
});
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
if (this.form.energyRateId != null) {
|
||
updateEnergyRate(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
} else {
|
||
addEnergyRate(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/** 删除按钮操作 */
|
||
handleDelete(row) {
|
||
const energyRateIds = row.energyRateId || this.ids;
|
||
this.$modal.confirm('是否确认删除能源费率（currency 为 INT：0=CNY,1=USD,2=EUR）编号为"' + energyRateIds + '"的数据项？').then(() => {
|
||
this.loading = true;
|
||
return delEnergyRate(energyRateIds);
|
||
}).then(() => {
|
||
this.loading = false;
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功");
|
||
}).catch(() => {
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
getEnergyName(id) {
|
||
const item = this.energyTypeList.find(item => item.energyTypeId === id);
|
||
return item?.name ?? '';
|
||
},
|
||
getEnergyUnit(id) {
|
||
return this.energyTypeList.find(item => item.energyTypeId === id)?.unit ?? '度';
|
||
},
|
||
/** 获取费率的梯度列表 */
|
||
getRateTiers(energyRateId) {
|
||
if (!this.rateDetailsCache[energyRateId]) {
|
||
this.rateDetailsCache[energyRateId] = { tiers: [], periods: [], tierPeriodRates: {} };
|
||
getRateTiers(energyRateId).then(response => {
|
||
this.$set(this.rateDetailsCache[energyRateId], 'tiers', response.data || []);
|
||
});
|
||
}
|
||
return this.rateDetailsCache[energyRateId].tiers || [];
|
||
},
|
||
/** 获取费率的时段列表 */
|
||
getRatePeriods(energyRateId) {
|
||
if (!this.rateDetailsCache[energyRateId]) {
|
||
this.rateDetailsCache[energyRateId] = { tiers: [], periods: [], tierPeriodRates: {} };
|
||
}
|
||
if (!this.rateDetailsCache[energyRateId].periods || this.rateDetailsCache[energyRateId].periods.length === 0) {
|
||
getRateTimePeriods(energyRateId).then(response => {
|
||
this.$set(this.rateDetailsCache[energyRateId], 'periods', response.data || []);
|
||
});
|
||
}
|
||
return this.rateDetailsCache[energyRateId].periods || [];
|
||
},
|
||
/** 获取时段名称 */
|
||
getPeriodName(periodType) {
|
||
const names = {
|
||
0: '峰',
|
||
1: '谷',
|
||
2: '平'
|
||
};
|
||
return names[periodType] || '未知';
|
||
},
|
||
/** 获取时段背景颜色 */
|
||
getPeriodBgColor(periodType) {
|
||
const colors = {
|
||
0: '#FF6B6B', // 峰 - 红色
|
||
1: '#4ECDC4', // 谷 - 青色
|
||
2: '#FFD93D' // 平 - 黄色
|
||
};
|
||
return colors[periodType] || '#409EFF';
|
||
},
|
||
/** 获取梯度-时段的费率 */
|
||
getTierPeriodRate(tierId, periodId) {
|
||
if (!this.selectedRateRow || !this.selectedRateRow.tiers) return '-';
|
||
// 从梯度对象中查找对应的梯度
|
||
const tier = this.selectedRateRow.tiers.find(t => t.tierId === tierId);
|
||
if (!tier || !tier.tierPeriodRates) return '-';
|
||
// 从梯度的时段费率映射中获取该时段的费率
|
||
const rate = tier.tierPeriodRates[periodId];
|
||
return rate !== undefined && rate !== null ? rate : '-';
|
||
},
|
||
/** 导出按钮操作 */
|
||
handleExport() {
|
||
this.download('ems/energyRate/export', {
|
||
...this.queryParams
|
||
}, `energyRate_${new Date().getTime()}.xlsx`)
|
||
},
|
||
/** 配置按钮操作 */
|
||
handleConfig(row) {
|
||
this.loading = true;
|
||
this.form = JSON.parse(JSON.stringify(row));
|
||
this.tierList = [];
|
||
this.periodList = [];
|
||
this.configStep = 0; // 重置步骤
|
||
|
||
// 获取能源单位
|
||
const energyType = this.energyTypeList.find(item => item.energyTypeId === row.energyTypeId);
|
||
this.energyUnit = energyType ? energyType.unit : '度';
|
||
|
||
// 根据模式直接跳到对应步骤
|
||
if (this.form.usePeakValley === 0 && this.form.useTieredPricing === 0) {
|
||
// 固定费率模式，直接到预览
|
||
this.configStep = 3;
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
} else if (this.form.usePeakValley === 1 && this.form.useTieredPricing === 0) {
|
||
// 峰谷模式，进入峰谷配置
|
||
this.configStep = 1;
|
||
getRateTimePeriods(row.energyRateId).then(response => {
|
||
this.periodList = response.data || [];
|
||
if (this.periodList.length === 0) {
|
||
this.addPeriod();
|
||
}
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
});
|
||
} else if (this.form.usePeakValley === 0 && this.form.useTieredPricing === 1) {
|
||
// 梯度模式，进入梯度配置
|
||
this.configStep = 1;
|
||
getRateTiers(row.energyRateId).then(response => {
|
||
this.tierList = response.data || [];
|
||
if (this.tierList.length === 0) {
|
||
this.addTier();
|
||
}
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
});
|
||
} else {
|
||
// 组合模式（峰谷+梯度），进入峰谷配置
|
||
this.configStep = 1;
|
||
getRateTimePeriods(row.energyRateId).then(response => {
|
||
this.periodList = response.data || [];
|
||
if (this.periodList.length === 0) {
|
||
this.addPeriod();
|
||
}
|
||
// 加载梯度费率（需要在时段加载完成后）
|
||
this.loadTiersWithPeriods(row.energyRateId);
|
||
});
|
||
}
|
||
},
|
||
/** 加载梯度费率及其峰谷关联 */
|
||
loadTiersWithPeriods(energyRateId) {
|
||
if (this.form.useTieredPricing === 1) {
|
||
getRateTiers(energyRateId).then(response => {
|
||
this.tierList = response.data || [];
|
||
if (this.tierList.length === 0) {
|
||
this.addTier();
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
return;
|
||
}
|
||
|
||
// 如果是梯度+峰谷组合模式，需要加载每个梯度的峰谷费率
|
||
if (this.form.usePeakValley === 1) {
|
||
this.loadTierPeriodRates();
|
||
} else {
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
}
|
||
});
|
||
} else {
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
}
|
||
},
|
||
/** 加载梯度的峰谷费率关联 */
|
||
loadTierPeriodRates() {
|
||
// 为每个梯度加载其对应的峰谷费率
|
||
const promises = this.tierList.map(tier => {
|
||
return getTierPeriodLinks(tier.tierId).then(response => {
|
||
tier.tierPeriodRates = {};
|
||
if (response.data && response.data.length > 0) {
|
||
response.data.forEach(link => {
|
||
tier.tierPeriodRates[link.periodId] = link.rate;
|
||
});
|
||
}
|
||
}).catch(() => {
|
||
tier.tierPeriodRates = {};
|
||
});
|
||
});
|
||
|
||
Promise.all(promises).then(() => {
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
this.configOpen = true;
|
||
});
|
||
},
|
||
/** 添加梯度 */
|
||
addTier() {
|
||
const tierLevel = this.tierList.length + 1;
|
||
this.tierList.push({
|
||
tierLevel: tierLevel,
|
||
minUsage: 0,
|
||
maxUsage: null,
|
||
rate: 0
|
||
});
|
||
},
|
||
/** 删除梯度 */
|
||
removeTier(index) {
|
||
this.tierList.splice(index, 1);
|
||
},
|
||
/** 添加时段 */
|
||
addPeriod() {
|
||
this.periodList.push({
|
||
periodType: 0,
|
||
periodName: '',
|
||
startTime: '00:00',
|
||
endTime: '23:59',
|
||
rate: 0
|
||
});
|
||
},
|
||
/** 删除时段 */
|
||
removePeriod(index) {
|
||
this.periodList.splice(index, 1);
|
||
},
|
||
/** 保存配置 */
|
||
saveConfig() {
|
||
// 验证梯度数据
|
||
if (this.form.useTieredPricing === 1) {
|
||
if (!this.validateTiers()) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 验证时段数据
|
||
if (this.form.usePeakValley === 1) {
|
||
if (!this.validatePeriods()) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
this.buttonLoading = true;
|
||
|
||
// 先保存梯度费率，然后再保存时段费率和梯度-时段关联
|
||
const savePromise = new Promise((resolve, reject) => {
|
||
const promises = [];
|
||
|
||
// 1. 保存梯度费率
|
||
if (this.form.useTieredPricing === 1 && this.tierList.length > 0) {
|
||
// 处理梯度数据：最后一个梯度的 maxUsage 应该为 null
|
||
const tiersToSave = this.tierList.map((tier, index) => {
|
||
const tierCopy = JSON.parse(JSON.stringify(tier));
|
||
if (index === this.tierList.length - 1) {
|
||
// 最后一个梯度的 maxUsage 设为 null
|
||
tierCopy.maxUsage = null;
|
||
}
|
||
// 为了避免唯一约束冲突，清除 tierId 让后端重新生成
|
||
// 这样可以确保后端执行 INSERT 而不是 UPDATE
|
||
// 但需要先删除旧梯度
|
||
delete tierCopy.tierId;
|
||
return tierCopy;
|
||
});
|
||
|
||
promises.push(
|
||
saveTiers(this.form.energyRateId, tiersToSave).then(response => {
|
||
// 梯度保存成功后，更新本地梯度的 tierId（保留 tierPeriodRates）
|
||
if (response.data && Array.isArray(response.data)) {
|
||
// 按 tier_level 匹配，更新 tierId
|
||
response.data.forEach((savedTier) => {
|
||
const localTier = this.tierList.find(t => t.tierLevel === savedTier.tierLevel);
|
||
if (localTier) {
|
||
// 保留本地的 tierPeriodRates，只更新 tierId
|
||
localTier.tierId = savedTier.tierId;
|
||
localTier.minUsage = savedTier.minUsage;
|
||
localTier.maxUsage = savedTier.maxUsage;
|
||
localTier.rate = savedTier.rate;
|
||
}
|
||
});
|
||
}
|
||
return response;
|
||
})
|
||
);
|
||
}
|
||
|
||
// 2. 保存时段费率
|
||
if (this.form.usePeakValley === 1 && this.periodList.length > 0) {
|
||
// 组合模式下不需要费率，仅峰谷模式需要费率
|
||
const validPeriods = this.form.useTieredPricing === 0
|
||
? this.periodList.filter(p => p.periodType !== null && p.periodType !== undefined && p.rate)
|
||
: this.periodList.filter(p => p.periodType !== null && p.periodType !== undefined);
|
||
if (validPeriods.length > 0) {
|
||
// 分离新增和已有的时段
|
||
const newPeriods = validPeriods.filter(p => !p.periodId);
|
||
const existingPeriods = validPeriods.filter(p => p.periodId);
|
||
|
||
// 如果有新增时段，需要先保存时段定义再保存费率
|
||
if (newPeriods.length > 0) {
|
||
// 新增时段需要先保存到 ems_time_period 表
|
||
const saveNewPeriodsPromise = new Promise((resolve, reject) => {
|
||
// 调用后端保存时段定义的接口（假设存在）
|
||
// 这里暂时直接保存费率，后端需要处理 periodId 为 null 的情况
|
||
const periodsToSave = validPeriods.map(p => {
|
||
const periodCopy = { ...p };
|
||
periodCopy.periodId = p.periodId || null; // 新增时段的 periodId 为 null
|
||
// 在组合模式下，清除费率（不需要保存到 ems_rate_time_period_link）
|
||
if (this.form.useTieredPricing === 1) {
|
||
periodCopy.rate = null;
|
||
}
|
||
return periodCopy;
|
||
});
|
||
saveTimePeriods(this.form.energyRateId, periodsToSave).then(response => {
|
||
// 保存成功后，更新本地 periodList 中的 periodId
|
||
if (response.data && Array.isArray(response.data)) {
|
||
response.data.forEach((savedPeriod, index) => {
|
||
if (validPeriods[index] && !validPeriods[index].periodId) {
|
||
validPeriods[index].periodId = savedPeriod.periodId;
|
||
}
|
||
});
|
||
}
|
||
resolve(response);
|
||
}).catch(reject);
|
||
});
|
||
promises.push(saveNewPeriodsPromise);
|
||
} else {
|
||
// 只有已有的时段，直接保存
|
||
const periodsToSave = validPeriods.map(p => {
|
||
const periodCopy = { ...p };
|
||
// 在组合模式下，清除费率（不需要保存到 ems_rate_time_period_link）
|
||
if (this.form.useTieredPricing === 1) {
|
||
periodCopy.rate = null;
|
||
}
|
||
return periodCopy;
|
||
});
|
||
promises.push(saveTimePeriods(this.form.energyRateId, periodsToSave));
|
||
}
|
||
}
|
||
}
|
||
|
||
if (promises.length === 0) {
|
||
this.$modal.msgWarning('请至少配置一种收费方式');
|
||
this.buttonLoading = false;
|
||
reject('没有需要保存的数据');
|
||
return;
|
||
}
|
||
|
||
// 等待梯度和时段都保存完成
|
||
Promise.all(promises).then(() => {
|
||
// 3. 保存梯度-时段关联费率（梯度+峰谷组合模式）
|
||
const tierPeriodPromises = [];
|
||
if (this.form.useTieredPricing === 1 && this.form.usePeakValley === 1) {
|
||
console.log('开始保存梯度-时段关联，梯度数量:', this.tierList.length);
|
||
this.tierList.forEach((tier, index) => {
|
||
console.log(`梯度${index}: tierId=${tier.tierId}, tierPeriodRates=${tier.tierPeriodRates ? Object.keys(tier.tierPeriodRates).length : 0}个`);
|
||
if (tier.tierId && tier.tierPeriodRates && Object.keys(tier.tierPeriodRates).length > 0) {
|
||
// 将 tierPeriodRates 对象转换为数组格式
|
||
// 需要使用 periodList 中的实际 periodId，而不是 tierPeriodRates 的 key
|
||
const tierPeriodLinks = this.periodList.map(period => {
|
||
// 使用 periodId 或 _key 作为 key 查找费率
|
||
const key = period.periodId || period._key;
|
||
const rate = tier.tierPeriodRates[key];
|
||
if (rate !== undefined && rate !== null) {
|
||
return {
|
||
tierId: tier.tierId,
|
||
periodId: period.periodId, // 使用真实的 periodId
|
||
rate: rate
|
||
};
|
||
}
|
||
return null;
|
||
}).filter(link => link !== null);
|
||
|
||
console.log('保存梯度-时段关联: tierId=' + tier.tierId + ', links=', tierPeriodLinks);
|
||
if (tierPeriodLinks.length > 0) {
|
||
tierPeriodPromises.push(saveTierPeriodLinks(tier.tierId, tierPeriodLinks));
|
||
}
|
||
}
|
||
});
|
||
console.log('梯度-时段关联Promise数量:', tierPeriodPromises.length);
|
||
}
|
||
|
||
if (tierPeriodPromises.length > 0) {
|
||
Promise.all(tierPeriodPromises).then(() => {
|
||
resolve();
|
||
}).catch(reject);
|
||
} else {
|
||
resolve();
|
||
}
|
||
}).catch(reject);
|
||
});
|
||
|
||
savePromise.then(() => {
|
||
this.$modal.msgSuccess('保存成功');
|
||
// 保存成功后，重新加载当前费率的配置
|
||
const energyRateId = this.form.energyRateId;
|
||
|
||
// 重新加载时段和梯度-时段关联数据（梯度已在保存时更新）
|
||
const reloadPromises = [];
|
||
if (this.form.usePeakValley === 1) {
|
||
reloadPromises.push(
|
||
getRateTimePeriods(energyRateId).then(response => {
|
||
this.periodList = response.data || [];
|
||
})
|
||
);
|
||
}
|
||
|
||
// 如果是组合模式，需要重新加载梯度-时段关联
|
||
if (this.form.useTieredPricing === 1 && this.form.usePeakValley === 1) {
|
||
reloadPromises.push(
|
||
new Promise((resolve) => {
|
||
this.loadTierPeriodRates();
|
||
resolve();
|
||
})
|
||
);
|
||
}
|
||
|
||
Promise.all(reloadPromises).then(() => {
|
||
// 延迟关闭，确保对话框完全关闭
|
||
setTimeout(() => {
|
||
this.closeConfig();
|
||
this.getList();
|
||
}, 500);
|
||
}).catch(() => {
|
||
this.$modal.msgWarning('数据刷新失败，请手动刷新');
|
||
setTimeout(() => {
|
||
this.closeConfig();
|
||
this.getList();
|
||
}, 500);
|
||
});
|
||
}).catch(() => {
|
||
this.$modal.msgError('保存失败');
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
},
|
||
/** 将时间字符串转换为分钟数（便于比较） */
|
||
timeToMinutes(timeStr) {
|
||
if (!timeStr) return 0;
|
||
const [hours, minutes] = timeStr.split(':').map(Number);
|
||
return hours * 60 + minutes;
|
||
},
|
||
/** 检查是否跨天 */
|
||
isCrossDay(startTime, endTime) {
|
||
if (!startTime || !endTime) return false;
|
||
const startMin = this.timeToMinutes(startTime);
|
||
const endMin = this.timeToMinutes(endTime);
|
||
return startMin > endMin; // 开始时间 > 结束时间 说明跨天
|
||
},
|
||
/** 验证时段时间范围和交叉 */
|
||
validatePeriodTime(periodIndex) {
|
||
const period = this.periodList[periodIndex];
|
||
if (!period) return;
|
||
|
||
// 如果两个时间都有，检查是否交叉
|
||
if (period.startTime && period.endTime) {
|
||
const startMin = this.timeToMinutes(period.startTime);
|
||
const endMin = this.timeToMinutes(period.endTime);
|
||
const isCross = this.isCrossDay(period.startTime, period.endTime);
|
||
|
||
// 如果是跨天时段，提示用户
|
||
if (isCross) {
|
||
// 跨天时段是允许的，但要提示用户
|
||
// 不需要报错，只是记录跨天状态
|
||
period.crossDay = 1;
|
||
} else {
|
||
period.crossDay = 0;
|
||
}
|
||
|
||
// 检查与其他时段是否交叉（需要考虑跨天情况）
|
||
for (let i = 0; i < this.periodList.length; i++) {
|
||
if (i === periodIndex) continue;
|
||
|
||
const otherPeriod = this.periodList[i];
|
||
if (!otherPeriod.startTime || !otherPeriod.endTime) continue;
|
||
|
||
const otherStartMin = this.timeToMinutes(otherPeriod.startTime);
|
||
const otherEndMin = this.timeToMinutes(otherPeriod.endTime);
|
||
const otherIsCross = this.isCrossDay(otherPeriod.startTime, otherPeriod.endTime);
|
||
|
||
// 简化交叉检查：如果都不跨天，用简单逻辑；如果有跨天，需要特殊处理
|
||
let hasConflict = false;
|
||
if (!isCross && !otherIsCross) {
|
||
// 都不跨天：检查是否有重叠
|
||
hasConflict = startMin < otherEndMin && endMin > otherStartMin;
|
||
} else if (isCross && otherIsCross) {
|
||
// 都跨天：都包含午夜，肯定有冲突
|
||
hasConflict = true;
|
||
} else {
|
||
// 一个跨天一个不跨天：需要特殊检查
|
||
if (isCross) {
|
||
// 当前跨天，其他不跨天
|
||
hasConflict = !(otherEndMin <= startMin || otherStartMin >= endMin);
|
||
} else {
|
||
// 当前不跨天，其他跨天
|
||
hasConflict = !(endMin <= otherStartMin || startMin >= otherEndMin);
|
||
}
|
||
}
|
||
|
||
if (hasConflict) {
|
||
this.$modal.msgWarning(`第${periodIndex + 1}个时段与第${i + 1}个时段时间交叉，请调整`);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 如果当前时段完整，自动填充下一个时段的开始时间
|
||
if (periodIndex < this.periodList.length - 1) {
|
||
const nextPeriod = this.periodList[periodIndex + 1];
|
||
if (!nextPeriod.startTime) {
|
||
// 下一个时段的开始时间 = 当前时段的结束时间 + 1分钟
|
||
const endMin = this.timeToMinutes(period.endTime);
|
||
const nextMin = endMin + 1;
|
||
const hours = Math.floor(nextMin / 60) % 24; // 防止超过24小时
|
||
const minutes = nextMin % 60;
|
||
nextPeriod.startTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
/** 验证所有时段数据 */
|
||
validatePeriods() {
|
||
if (this.periodList.length === 0) {
|
||
return true;
|
||
}
|
||
|
||
for (let i = 0; i < this.periodList.length; i++) {
|
||
const period = this.periodList[i];
|
||
|
||
// 检查时段类型（periodType 是必需的）
|
||
if (period.periodType === null || period.periodType === undefined) {
|
||
this.$modal.msgError(`第${i + 1}个时段：时段类型不能为空`);
|
||
return false;
|
||
}
|
||
|
||
// 检查开始时间
|
||
if (!period.startTime) {
|
||
this.$modal.msgError(`第${i + 1}个时段：开始时间不能为空`);
|
||
return false;
|
||
}
|
||
|
||
// 检查结束时间
|
||
if (!period.endTime) {
|
||
this.$modal.msgError(`第${i + 1}个时段：结束时间不能为空`);
|
||
return false;
|
||
}
|
||
|
||
// 检查时间范围（支持跨天）
|
||
const startMin = this.timeToMinutes(period.startTime);
|
||
const endMin = this.timeToMinutes(period.endTime);
|
||
const isCross = this.isCrossDay(period.startTime, period.endTime);
|
||
|
||
// 跨天时段是允许的（如 22:00 - 02:00），不需要报错
|
||
// 只有当不跨天且结束时间 <= 开始时间时才报错
|
||
if (!isCross && startMin >= endMin) {
|
||
this.$modal.msgError(`第${i + 1}个时段：结束时间必须晚于开始时间`);
|
||
return false;
|
||
}
|
||
|
||
// 仅在非组合模式下检查费率
|
||
if (this.form.useTieredPricing === 0) {
|
||
if (period.rate === null || period.rate === undefined) {
|
||
this.$modal.msgError(`第${i + 1}个时段：费率不能为空`);
|
||
return false;
|
||
}
|
||
|
||
if (period.rate < 0) {
|
||
this.$modal.msgError(`第${i + 1}个时段：费率不能为负数`);
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
|
||
return true;
|
||
},
|
||
/** 选择计价模式 */
|
||
selectMode(mode) {
|
||
switch(mode) {
|
||
case 'fixed':
|
||
this.form.usePeakValley = 0;
|
||
this.form.useTieredPricing = 0;
|
||
this.configStep = 3; // 直接到预览
|
||
break;
|
||
case 'peak':
|
||
this.form.usePeakValley = 1;
|
||
this.form.useTieredPricing = 0;
|
||
this.configStep = 1;
|
||
if (this.periodList.length === 0) {
|
||
this.addPeriod();
|
||
}
|
||
break;
|
||
case 'tier':
|
||
this.form.usePeakValley = 0;
|
||
this.form.useTieredPricing = 1;
|
||
this.configStep = 1;
|
||
if (this.tierList.length === 0) {
|
||
this.addTier();
|
||
}
|
||
break;
|
||
case 'combo':
|
||
this.form.usePeakValley = 1;
|
||
this.form.useTieredPricing = 1;
|
||
this.configStep = 1;
|
||
if (this.periodList.length === 0) {
|
||
this.addPeriod();
|
||
}
|
||
if (this.tierList.length === 0) {
|
||
this.addTier();
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
/** 下一步 */
|
||
nextStep() {
|
||
// 验证当前步骤的数据
|
||
if (this.configStep === 1 && this.form.usePeakValley === 1 && this.form.useTieredPricing === 0) {
|
||
// 峰谷模式，验证时段
|
||
if (!this.validatePeriods()) {
|
||
return;
|
||
}
|
||
this.configStep = 3; // 直接到预览
|
||
} else if (this.configStep === 1 && this.form.usePeakValley === 0 && this.form.useTieredPricing === 1) {
|
||
// 梯度模式，验证梯度
|
||
if (!this.validateTiers()) {
|
||
return;
|
||
}
|
||
this.configStep = 3; // 直接到预览
|
||
} else if (this.configStep === 1 && this.form.usePeakValley === 1 && this.form.useTieredPricing === 1) {
|
||
// 组合模式，验证时段后进入梯度配置
|
||
if (!this.validatePeriods()) {
|
||
return;
|
||
}
|
||
this.configStep = 2;
|
||
} else if (this.configStep === 2) {
|
||
// 梯度配置，验证梯度后进入预览
|
||
if (!this.validateTiers()) {
|
||
return;
|
||
}
|
||
this.configStep = 3;
|
||
}
|
||
},
|
||
/** 上一步 */
|
||
prevStep() {
|
||
if (this.configStep > 0) {
|
||
if (this.configStep === 3) {
|
||
// 从预览回到配置
|
||
if (this.form.usePeakValley === 1 && this.form.useTieredPricing === 1) {
|
||
this.configStep = 2; // 组合模式回到梯度配置
|
||
} else if (this.form.usePeakValley === 1 || this.form.useTieredPricing === 1) {
|
||
this.configStep = 1; // 单一模式回到配置
|
||
} else {
|
||
this.configStep = 0; // 固定费率回到模式选择
|
||
}
|
||
} else if (this.configStep === 2) {
|
||
// 从梯度配置回到峰谷配置
|
||
this.configStep = 1;
|
||
} else if (this.configStep === 1) {
|
||
// 回到模式选择
|
||
this.configStep = 0;
|
||
}
|
||
}
|
||
},
|
||
/** 关闭配置对话框 */
|
||
closeConfig() {
|
||
this.configOpen = false;
|
||
this.configStep = 0;
|
||
this.tierList = [];
|
||
this.periodList = [];
|
||
this.energyUnit = '度';
|
||
},
|
||
/** 表格行点击事件 */
|
||
handleRowClick(row) {
|
||
// 如果点击的是同一行，则关闭条形图
|
||
if (this.selectedRateRow && this.selectedRateRow.energyRateId === row.energyRateId) {
|
||
this.selectedRateRow = null;
|
||
} else {
|
||
// 显示该行的条形图
|
||
this.selectedRateRow = row;
|
||
}
|
||
},
|
||
/** 费率字段焦点事件 */
|
||
onRateFieldFocus() {
|
||
if (this.form.usePeakValley === 1 || this.form.useTieredPricing === 1) {
|
||
this.$modal.msgInfo('已启用峰谷或梯度收费，请在配置页面设置具体费率');
|
||
}
|
||
},
|
||
/** 编辑梯度的峰谷费率 */
|
||
editTierPeriods(tier, tierIndex) {
|
||
this.currentTier = tier;
|
||
this.currentTierPeriods = this.periodList.map((period, index) => {
|
||
// 使用 periodId 作为 key（必须有 periodId）
|
||
const key = period.periodId;
|
||
return {
|
||
...period,
|
||
_key: key, // 保存原始 key 用于后续保存
|
||
rate: tier.tierPeriodRates && tier.tierPeriodRates[key] ? tier.tierPeriodRates[key] : null
|
||
};
|
||
});
|
||
this.tierPeriodDialogOpen = true;
|
||
},
|
||
/** 保存梯度的峰谷费率 */
|
||
saveTierPeriods() {
|
||
// 将当前梯度的峰谷费率保存到梯度对象中
|
||
if (!this.currentTier.tierPeriodRates) {
|
||
this.currentTier.tierPeriodRates = {};
|
||
}
|
||
this.currentTierPeriods.forEach(period => {
|
||
// 使用 periodId 作为 key（必须有 periodId）
|
||
const key = period.periodId;
|
||
this.currentTier.tierPeriodRates[key] = period.rate;
|
||
});
|
||
console.log('保存梯度峰谷费率: tierId=' + this.currentTier.tierId + ', rates=', this.currentTier.tierPeriodRates);
|
||
this.closeTierPeriodDialog();
|
||
},
|
||
/** 关闭梯度-时段编辑对话框 */
|
||
closeTierPeriodDialog() {
|
||
this.tierPeriodDialogOpen = false;
|
||
this.currentTier = null;
|
||
this.currentTierPeriods = [];
|
||
},
|
||
/** 获取最大费率 */
|
||
getMaxRate(list) {
|
||
if (!list || list.length === 0) return 1;
|
||
const max = Math.max(...list.map(item => item.rate || 0));
|
||
return max > 0 ? max : 1;
|
||
},
|
||
/** 获取梯度验证错误信息 */
|
||
getTierValidationError(tierIndex, field) {
|
||
const tier = this.tierList[tierIndex];
|
||
if (!tier) return '';
|
||
|
||
if (field === 'min') {
|
||
if (tier.minUsage === null || tier.minUsage === undefined) {
|
||
return '最小用量必填';
|
||
}
|
||
if (tier.minUsage < 0) {
|
||
return '不能为负数';
|
||
}
|
||
} else if (field === 'max') {
|
||
// 最后一个梯度的最大值可以为空（表示无上限）
|
||
if (tierIndex === this.tierList.length - 1) {
|
||
return '';
|
||
}
|
||
|
||
if (tier.maxUsage === null || tier.maxUsage === undefined) {
|
||
return '最大用量必填';
|
||
}
|
||
|
||
if (tier.minUsage !== null && tier.minUsage !== undefined) {
|
||
if (tier.maxUsage <= tier.minUsage) {
|
||
return '必须大于最小用量';
|
||
}
|
||
}
|
||
}
|
||
|
||
return '';
|
||
},
|
||
/** 验证所有梯度数据 */
|
||
validateTiers() {
|
||
if (this.tierList.length === 0) {
|
||
return true;
|
||
}
|
||
|
||
for (let i = 0; i < this.tierList.length; i++) {
|
||
const tier = this.tierList[i];
|
||
|
||
// 检查最小用量
|
||
if (tier.minUsage === null || tier.minUsage === undefined) {
|
||
this.$modal.msgError(`第${i + 1}梯：最小用量不能为空`);
|
||
return false;
|
||
}
|
||
|
||
if (tier.minUsage < 0) {
|
||
this.$modal.msgError(`第${i + 1}梯：最小用量不能为负数`);
|
||
return false;
|
||
}
|
||
|
||
// 检查最大用量（最后一个梯度可以为空）
|
||
if (i < this.tierList.length - 1) {
|
||
if (tier.maxUsage === null || tier.maxUsage === undefined) {
|
||
this.$modal.msgError(`第${i + 1}梯：最大用量不能为空`);
|
||
return false;
|
||
}
|
||
|
||
if (tier.maxUsage <= tier.minUsage) {
|
||
this.$modal.msgError(`第${i + 1}梯：最大用量必须大于最小用量`);
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 检查费率（仅梯度模式）
|
||
if (this.form.usePeakValley === 0) {
|
||
if (tier.rate === null || tier.rate === undefined) {
|
||
this.$modal.msgError(`第${i + 1}梯：费率不能为空`);
|
||
return false;
|
||
}
|
||
|
||
if (tier.rate < 0) {
|
||
this.$modal.msgError(`第${i + 1}梯：费率不能为负数`);
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
|
||
return true;
|
||
},
|
||
/** 梯度最小值变化时的联动处理 */
|
||
onTierMinUsageChange(tierIndex) {
|
||
const currentTier = this.tierList[tierIndex];
|
||
if (currentTier.minUsage === null || currentTier.minUsage === undefined) {
|
||
return;
|
||
}
|
||
|
||
// 如果当前梯度没有设置最大值，自动设置为当前最小值 + 最小单位
|
||
if (currentTier.maxUsage === null || currentTier.maxUsage === undefined) {
|
||
currentTier.maxUsage = parseFloat((currentTier.minUsage + 0.01).toFixed(2));
|
||
}
|
||
|
||
// 自动为下一个梯度设置最小值（当前最大值 + 最小单位）
|
||
if (tierIndex < this.tierList.length - 1) {
|
||
const nextTier = this.tierList[tierIndex + 1];
|
||
// 只有在下一个梯度的最小值为空时才自动填充
|
||
if (nextTier.minUsage === null || nextTier.minUsage === undefined) {
|
||
nextTier.minUsage = parseFloat((currentTier.maxUsage + 0.01).toFixed(2));
|
||
}
|
||
}
|
||
},
|
||
/** 梯度最大值变化时的联动处理 */
|
||
onTierMaxUsageChange(tierIndex) {
|
||
const currentTier = this.tierList[tierIndex];
|
||
if (currentTier.maxUsage === null || currentTier.maxUsage === undefined) {
|
||
return;
|
||
}
|
||
|
||
// 自动为下一个梯度设置最小值（当前最大值 + 最小单位）
|
||
if (tierIndex < this.tierList.length - 1) {
|
||
const nextTier = this.tierList[tierIndex + 1];
|
||
// 更新下一个梯度的最小值为当前最大值 + 最小单位
|
||
nextTier.minUsage = parseFloat((currentTier.maxUsage + 0.01).toFixed(2));
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tier-level-badge {
|
||
display: inline-block;
|
||
background-color: #f56c6c;
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tier-actions,
|
||
.period-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60px 20px;
|
||
color: #909399;
|
||
}
|
||
|
||
.empty-state i {
|
||
font-size: 48px;
|
||
margin-bottom: 16px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.empty-state p {
|
||
font-size: 14px;
|
||
margin: 0;
|
||
}
|
||
|
||
.mb10 {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.mb15 {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.ml10 {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
/* 表格优化 */
|
||
.el-table {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.el-table /deep/ .el-input-number {
|
||
width: 100%;
|
||
}
|
||
|
||
.el-table /deep/ .el-select {
|
||
width: 100%;
|
||
}
|
||
|
||
.el-table /deep/ .el-time-picker {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 对话框优化 */
|
||
.el-dialog /deep/ .el-dialog__body {
|
||
padding: 20px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Alert 优化 */
|
||
.el-alert {
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 提示文本 */
|
||
.tip-text {
|
||
display: block;
|
||
color: #e6a23c;
|
||
font-size: 12px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 费率信息样式 */
|
||
.rate-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.rate-badge {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
|
||
.rate-badge.peak {
|
||
background-color: #f56c6c;
|
||
color: white;
|
||
}
|
||
|
||
.rate-badge.tier {
|
||
background-color: #409eff;
|
||
color: white;
|
||
}
|
||
|
||
.rate-badge.fixed {
|
||
background-color: #67c23a;
|
||
color: white;
|
||
}
|
||
|
||
/* 向导式样式 */
|
||
.wizard-steps {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.wizard-content {
|
||
min-height: 400px;
|
||
}
|
||
|
||
.step-content {
|
||
animation: fadeIn 0.3s ease-in;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 模式选择卡片 */
|
||
.mode-selection {
|
||
text-align: center;
|
||
}
|
||
|
||
.mode-selection h3 {
|
||
margin-bottom: 30px;
|
||
font-size: 18px;
|
||
color: #303133;
|
||
}
|
||
|
||
.mode-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.mode-card {
|
||
padding: 20px;
|
||
border: 2px solid #ebeef5;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.mode-card:hover {
|
||
border-color: #409eff;
|
||
box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.mode-card.active {
|
||
border-color: #409eff;
|
||
background-color: #f0f9ff;
|
||
box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.2);
|
||
}
|
||
|
||
.mode-icon {
|
||
font-size: 32px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.mode-name {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.mode-desc {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
/* 预览卡片 */
|
||
.preview-section {
|
||
padding: 20px;
|
||
}
|
||
|
||
.preview-card {
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.card-title {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
color: #303133;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #409eff;
|
||
}
|
||
|
||
.card-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.preview-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 8px 0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.preview-item .period-badge,
|
||
.preview-item .tier-badge {
|
||
min-width: 60px;
|
||
text-align: center;
|
||
}
|
||
|
||
.preview-item .rate-value {
|
||
margin-left: auto;
|
||
color: #409eff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 配置页面样式 */
|
||
.config-section {
|
||
padding: 15px;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #409eff;
|
||
}
|
||
|
||
.section-title i {
|
||
margin-right: 8px;
|
||
color: #409eff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* 模式提示 */
|
||
.mode-tips {
|
||
margin-bottom: 20px;
|
||
padding: 12px 16px;
|
||
background-color: #f0f9ff;
|
||
border-left: 4px solid #409eff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tip-badge {
|
||
display: inline-block;
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tip-badge.fixed-mode {
|
||
background-color: #f0f9ff;
|
||
color: #0a5cff;
|
||
border: 1px solid #b3d8ff;
|
||
}
|
||
|
||
.tip-badge.peak-mode {
|
||
background-color: #fef0f0;
|
||
color: #f56c6c;
|
||
border: 1px solid #fde2e2;
|
||
}
|
||
|
||
.tip-badge.tier-mode {
|
||
background-color: #f0f9ff;
|
||
color: #409eff;
|
||
border: 1px solid #b3d8ff;
|
||
}
|
||
|
||
.tip-badge.combo-mode {
|
||
background-color: #f4f4f5;
|
||
color: #606266;
|
||
border: 1px solid #dcdfe6;
|
||
}
|
||
|
||
/* 费率可视化样式 */
|
||
.rate-visualization {
|
||
margin: 20px 0;
|
||
padding: 20px;
|
||
background-color: #fafafa;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
|
||
.visualization-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.visualization-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.visualization-title {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #409eff;
|
||
}
|
||
|
||
.bar-chart {
|
||
padding: 20px 10px;
|
||
background-color: #ffffff;
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
}
|
||
|
||
.chart-container {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-around;
|
||
height: 250px;
|
||
gap: 15px;
|
||
}
|
||
|
||
.bar-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
max-width: 80px;
|
||
}
|
||
|
||
.bar-wrapper {
|
||
width: 100%;
|
||
height: 200px;
|
||
background-color: #f5f7fa;
|
||
border-radius: 4px 4px 0 0;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
padding: 5px 0;
|
||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.bar {
|
||
width: 100%;
|
||
max-width: 60px;
|
||
min-height: 5%;
|
||
border-radius: 4px 4px 0 0;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.bar:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
transform: scaleY(1.05);
|
||
}
|
||
|
||
.bar-label {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
width: 100%;
|
||
}
|
||
|
||
.bar-label .time {
|
||
color: #606266;
|
||
font-size: 11px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.bar-label .tier-info {
|
||
color: #303133;
|
||
font-weight: bold;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.bar-label .usage {
|
||
color: #909399;
|
||
font-size: 11px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.bar-label .rate {
|
||
color: #409eff;
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.tier-bar {
|
||
background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%);
|
||
}
|
||
|
||
/* 梯度输入框验证样式 */
|
||
.tier-input-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.tier-error {
|
||
color: #f56c6c;
|
||
font-size: 11px;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 费率信息详情样式 */
|
||
.rate-info-detail {
|
||
padding: 8px 0;
|
||
}
|
||
|
||
.rate-item {
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.rate-label {
|
||
font-weight: 600;
|
||
color: #303133;
|
||
min-width: 80px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.rate-value {
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 时段费率样式 */
|
||
.period-rates {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
flex: 1;
|
||
}
|
||
|
||
.period-badge {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
border-radius: 3px;
|
||
color: white;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 梯度费率样式 */
|
||
.tier-rates {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
flex: 1;
|
||
}
|
||
|
||
.tier-badge {
|
||
display: inline-block;
|
||
padding: 4px 8px;
|
||
background-color: #f0f9ff;
|
||
border-left: 3px solid #409eff;
|
||
color: #303133;
|
||
font-size: 12px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 梯度分组样式 */
|
||
.tier-group {
|
||
margin-bottom: 12px;
|
||
padding: 8px;
|
||
background-color: #f5f7fa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tier-header {
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 1px solid #dcdfe6;
|
||
}
|
||
|
||
/* 组合模式样式 */
|
||
.combo-rates {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
flex: 1;
|
||
}
|
||
|
||
.combo-tier-row {
|
||
padding: 8px;
|
||
background-color: #f9fafb;
|
||
border-radius: 3px;
|
||
border-left: 3px solid #8c8c8c;
|
||
}
|
||
|
||
.tier-header {
|
||
font-weight: 600;
|
||
color: #262626;
|
||
font-size: 13px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.tier-rates-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.rate-badge {
|
||
display: inline-block;
|
||
padding: 4px 10px;
|
||
background-color: #5b8cde;
|
||
color: white;
|
||
border-radius: 2px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.rate-badge:hover {
|
||
background-color: #4a7bc4;
|
||
box-shadow: 0 2px 4px rgba(91, 140, 222, 0.2);
|
||
}
|
||
|
||
.combo-tier {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
align-items: center;
|
||
padding: 4px 0;
|
||
border-bottom: 1px solid #ebeef5;
|
||
}
|
||
|
||
.combo-tier:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.tier-range {
|
||
display: inline-block;
|
||
min-width: 120px;
|
||
color: #606266;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.combo-period {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 3px;
|
||
color: white;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 配置警告样式 */
|
||
.config-warning {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 10px;
|
||
background-color: #fef0f0;
|
||
border: 1px solid #fde2e2;
|
||
border-radius: 3px;
|
||
color: #f56c6c;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.config-warning i {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.expiry-date {
|
||
color: #606266;
|
||
}
|
||
|
||
/* 浮动条形图样式 */
|
||
.rate-visualization-floating {
|
||
margin-top: 30px;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
animation: slideDown 0.3s ease-in;
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.visualization-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #d9d9d9;
|
||
}
|
||
|
||
.visualization-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #262626;
|
||
}
|
||
|
||
.visualization-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.visualization-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #595959;
|
||
margin-bottom: 15px;
|
||
padding-left: 10px;
|
||
border-left: 3px solid #8c8c8c;
|
||
}
|
||
|
||
/* 条形图容器 */
|
||
.bar-chart {
|
||
width: 100%;
|
||
height: 280px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
border-radius: 2px;
|
||
border: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.chart-container {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.bar-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex: 1;
|
||
max-width: 80px;
|
||
}
|
||
|
||
.bar-wrapper {
|
||
width: 100%;
|
||
height: 150px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
background-color: #ffffff;
|
||
border-radius: 2px 2px 0 0;
|
||
border: 1px solid #e8e8e8;
|
||
border-bottom: none;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bar {
|
||
width: 60%;
|
||
background: #5b8cde;
|
||
border-radius: 2px 2px 0 0;
|
||
transition: all 0.3s ease;
|
||
min-height: 5%;
|
||
max-height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bar:hover {
|
||
opacity: 0.85;
|
||
box-shadow: 0 2px 6px rgba(91, 140, 222, 0.25);
|
||
}
|
||
|
||
.bar.tier-bar {
|
||
background: #7b9e89;
|
||
}
|
||
|
||
.bar-label {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.bar-label .time,
|
||
.bar-label .tier-info,
|
||
.bar-label .usage {
|
||
color: #606266;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.bar-label .rate {
|
||
color: #409eff;
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* 固定费率显示 */
|
||
.fixed-rate-display {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 40px 20px;
|
||
background-color: #fafafa;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.rate-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 15px;
|
||
padding: 30px 50px;
|
||
background-color: #fff;
|
||
border: 2px solid #409eff;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.rate-box .rate-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
.rate-box .rate-value {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #409eff;
|
||
}
|
||
</style>
|