<template>
|
<el-dialog v-model="visible" :title="title" width="560px" @close="closeDia">
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
|
<el-form-item label="电表" prop="meterId">
|
<el-select
|
v-model="form.meterId"
|
placeholder="请选择电表"
|
filterable
|
style="width: 100%"
|
:disabled="operationType === 'edit'"
|
@change="handleMeterChange"
|
>
|
<el-option
|
v-for="item in meterList"
|
:key="item.meterId"
|
:label="`${item.meterName || item.address} (ID:${item.meterId})`"
|
:value="item.meterId"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="统计时间" prop="recordTime">
|
<el-date-picker
|
v-model="form.recordTime"
|
type="datetime"
|
placeholder="精确到分钟"
|
format="YYYY-MM-DD HH:mm"
|
value-format="YYYY-MM-DD HH:mm:00"
|
style="width: 100%"
|
@change="handleTimeChange"
|
/>
|
</el-form-item>
|
<el-form-item label="倍率">
|
<el-input-number v-model="form.ratio" :min="1" style="width: 100%" @change="calcConsumption" />
|
</el-form-item>
|
<el-form-item label="上次电量" prop="prevReading">
|
<el-input-number
|
v-model="form.prevReading"
|
:min="0"
|
:precision="4"
|
style="width: 100%"
|
@change="calcConsumption"
|
/>
|
</el-form-item>
|
<el-form-item label="本次电量" prop="currReading">
|
<el-input-number
|
v-model="form.currReading"
|
:min="0"
|
:precision="4"
|
style="width: 100%"
|
@change="calcConsumption"
|
/>
|
</el-form-item>
|
<el-form-item label="本次用电量">
|
<el-input :model-value="consumptionDisplay" disabled>
|
<template #suffix>kWh</template>
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" :loading="submitting" @click="submit">确定</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed, reactive, ref } from "vue";
|
import { ElMessage } from "element-plus";
|
import { eleRecordAdd, eleRecordUpdate, meterListAll, eleRecordPrevReading } from "@/api/energyManagement/tqdianbiao.js";
|
import { formatMinuteTime } from "@/api/energyManagement/statisticEle.js";
|
|
const emit = defineEmits(["close"]);
|
const visible = ref(false);
|
const submitting = ref(false);
|
const operationType = ref("add");
|
const title = ref("");
|
const formRef = ref(null);
|
const meterList = ref([]);
|
|
const defaultForm = () => ({
|
id: null,
|
dimension: "manual",
|
meterId: null,
|
recordTime: "",
|
prevReading: null,
|
currReading: null,
|
totalConsumption: null,
|
ratio: 1,
|
});
|
|
const form = reactive(defaultForm());
|
|
const rules = {
|
meterId: [{ required: true, message: "请选择电表", trigger: "change" }],
|
recordTime: [{ required: true, message: "请选择时间", trigger: "change" }],
|
prevReading: [{ required: true, message: "请输入上次电量", trigger: "blur" }],
|
currReading: [{ required: true, message: "请输入本次电量", trigger: "blur" }],
|
};
|
|
const consumptionDisplay = computed(() => {
|
if (form.totalConsumption == null) return "-";
|
return Number(form.totalConsumption).toFixed(4);
|
});
|
|
async function loadMeters() {
|
const res = await meterListAll();
|
meterList.value = res.data || [];
|
}
|
|
function recordTimeFromRow(row) {
|
if (row.timeKey?.length >= 12) {
|
const k = row.timeKey;
|
return `${k.slice(0, 4)}-${k.slice(4, 6)}-${k.slice(6, 8)} ${k.slice(8, 10)}:${k.slice(10, 12)}:00`;
|
}
|
if (row.timeKey?.length >= 10) {
|
const k = row.timeKey;
|
return `${k.slice(0, 4)}-${k.slice(4, 6)}-${k.slice(6, 8)} ${k.slice(8, 10)}:00:00`;
|
}
|
return "";
|
}
|
|
function calcConsumption() {
|
if (form.prevReading == null || form.currReading == null || form.ratio == null) {
|
form.totalConsumption = null;
|
return;
|
}
|
const diff = form.currReading - form.prevReading;
|
form.totalConsumption = Number((diff * form.ratio).toFixed(4));
|
}
|
|
function handleMeterChange(meterId) {
|
const meter = meterList.value.find((m) => m.meterId === meterId);
|
if (meter?.rate) {
|
form.ratio = meter.rate;
|
}
|
calcConsumption();
|
if (form.recordTime) {
|
loadPrevReading();
|
}
|
}
|
|
function handleTimeChange() {
|
loadPrevReading();
|
}
|
|
async function loadPrevReading() {
|
if (!form.meterId || !form.recordTime) return;
|
const timeKey = formatMinuteTime(new Date(form.recordTime));
|
const res = await eleRecordPrevReading({ meterId: form.meterId, timeKey });
|
if (res.data != null) {
|
form.prevReading = Number(res.data);
|
calcConsumption();
|
}
|
}
|
|
function open(type, row) {
|
operationType.value = type;
|
title.value = type === "add" ? "手动抄表录入" : "编辑抄表记录";
|
Object.assign(form, defaultForm());
|
if (type === "edit" && row) {
|
Object.assign(form, {
|
id: row.id,
|
meterId: row.meterId,
|
recordTime: recordTimeFromRow(row),
|
prevReading: row.prevReading != null ? Number(row.prevReading) : null,
|
currReading: row.currReading != null ? Number(row.currReading) : null,
|
totalConsumption: row.totalConsumption != null ? Number(row.totalConsumption) : null,
|
ratio: row.ratio || 1,
|
});
|
}
|
loadMeters();
|
visible.value = true;
|
}
|
|
function closeDia() {
|
emit("close");
|
}
|
|
async function submit() {
|
await formRef.value.validate();
|
calcConsumption();
|
submitting.value = true;
|
try {
|
const payload = {
|
id: form.id,
|
dimension: "manual",
|
meterId: form.meterId,
|
timeKey: formatMinuteTime(new Date(form.recordTime)),
|
prevReading: form.prevReading,
|
currReading: form.currReading,
|
totalConsumption: form.totalConsumption,
|
ratio: form.ratio,
|
readingMethod: "manual",
|
};
|
if (operationType.value === "add") {
|
await eleRecordAdd(payload);
|
ElMessage.success("录入成功");
|
} else {
|
await eleRecordUpdate(payload);
|
ElMessage.success("修改成功");
|
}
|
visible.value = false;
|
emit("close");
|
} finally {
|
submitting.value = false;
|
}
|
}
|
|
defineExpose({ open });
|
</script>
|
