共计 3864 个字符,预计需要花费 10 分钟才能阅读完成。
记录一次 @边城大佬 帮我解决的难题。感激大佬,以下是大佬的主页,大家能够关注下。
https://segmentfault.com/u/ja…
我的项目场景:类型蕴含全年和节令,节令是能够配置的,不论抉择年还是节令,都能够新增需要响应数据,弹窗中有两个下拉框,起始时刻和终止时刻,范畴是 0 -23,抉择一条信息填写完能够点击保留,点击页面中新增能够关上弹窗从新减少信息
遇到问题:
第一次增加数据:如果起始工夫抉择 3,终止工夫抉择 6 进行保留,下次新增时 3 - 6 是不能抉择,而且新抉择的工夫范畴不能蕴含 3 -6,比方新抉择的起始工夫是 1,终止工夫是 9,因为 1 - 9 蕴含了 3 - 6 的局部,所以不能抉择,然而 0 - 3 能够抉择,7-10 能够抉择。
第二次增加数据:如果起始工夫抉择 9,终止工夫抉择 14 进行保留,这时新增的全副数据是:
hasAddData = [{startTime: 3, endTime: 6, upValue: 1,downValue: 0.3},
{startTime: 9, endTime: 14, upValue: 0.5,downValue: 0.8},
]
下次新增时,只能抉择的数据列表为: [0,1,2],[7,8],[15,16,17,18,19,20,21,22,23],如果起始时刻抉择 0,终止时刻只能是 0、1 或者 2,如果起始时刻抉择是 7,终止时刻只能是 8。
以此类推,写出起始时刻的下拉框数据和终止时刻的下拉框数据。
弹窗图示:
以下是实现逻辑:
<template>
<div class="addTime">
<el-dialog
title="新增需要响应时段"
:visible.sync="showAddDialog.visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:modal-append-to-body="false"
:append-to-body="true"
width="450px"
top="20vh"
v-loading="formLoading"
>
<el-form
size="mini"
label-position="left"
label-width="140px"
:model="timeInfoForm"
:rules="timeRules"
ref="timeInfoForm"
>
<el-form-item
label="节令"
prop="season"
v-if="showAddDialog.type === 2"
>
<el-select
v-model="timeInfoForm.season"
placeholder="请抉择节令"
style="width: 245px"
@change="handleSeasonChange"
>
<el-option
v-for="item in seasonList"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="起始时刻" prop="st">
<el-select
v-model="timeInfoForm.st"
placeholder="请抉择起始时刻"
style="width: 245px; margin-right: 5px"
@change="handleStartChange"
>
<el-option
v-for="item in stList"
:key="item"
:label="item"
:value="item"
></el-option> </el-select
> 时
</el-form-item>
<el-form-item label="终止时刻" prop="et">
<el-select
v-model="timeInfoForm.et"
placeholder="请抉择终止时刻"
style="width: 245px; margin-right: 5px"
>
<el-option
v-for="item in etList"
:key="item"
:label="item"
:value="item"
></el-option> </el-select
> 时
</el-form-item>
<el-form-item label="可上调电负荷比例" prop="up">
<el-input
v-model.trim="timeInfoForm.up"
placeholder="0- 1 之间"
clearable
style="width: 245px"
>
</el-input>
</el-form-item>
<el-form-item label="可下调电负荷比例" prop="down">
<el-input
v-model.trim="timeInfoForm.down"
placeholder="0- 1 之间"
clearable
style="width: 245px"
>
</el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="reset" @click="handleFormCancel" size="small"
> 取 消 </el-button
>
<el-button type="primary" @click="handleFormSubmit" size="small"
> 保 存 </el-button
>
</div>
</el-dialog>
</div>
</template>
export default {
name: "addTime",
props: {
showAddDialog: {
type: Object,
default: () => {},
},
},
data() {
return {
formLoading: false,
timeInfoForm: {
season: "",
st: "",
et: "",
up: "",
down: "",
},
seasonList: [],
hasAddData: [], // 已增加数据};
},
created() {
// data 是父组件传递过去曾经增加的数据
let data = this.$deepClone(this.showAddDialog.data);
// type---> 1 年,2 节令
if (this.showAddDialog.type == 2) {
// columns 是父组件传递过去的节令数据
this.seasonList = this.showAddDialog.columns;
this.timeInfoForm.season = this.seasonList[0];
this.handleDataFormat();} else {this.hasAddData = data;}
},
computed: {
// 获取默认的 0 -23 小时数据
getAllTimeData() {let arr = [];
for (let i = 0; i <= 23; i++) {arr.push(i);
}
return arr;
},
// 获取起始时刻的数据
stList() {return this.getAllTimeData.filter((t) =>
this.hasAddData.every(({st, et}) => t < st || t > et)
);
},
// 获取终止时刻的数据
etList() {
let start = this.timeInfoForm.st;
let startIndex = this.stList.indexOf(start);
return this.stList.filter((t, i) => t >= start && t - start === i - startIndex
);
},
},
methods: {
// 切换起始工夫
handleStartChange() {this.timeInfoForm.et = "";},
// 节令格式化数据
handleDataFormat() {let data = this.$deepClone(this.showAddDialog.data);
// 应用 reduce 函数,将数据分组
/**
let arr = {
秋季: [{season: "秋季", st: 12, et: 15, up: 0.2, down: 0.4}
{season: "秋季", st: 18, et: 21, up: 1, down: 1}
],
冬季: [{season: "冬季", st: 12, et: 15, up: 0.2, down: 0.4}
],
秋季: [],
夏季: []}
*/
let arr = data.reduce((prev, curr) => {let key = curr["season"];
if (!prev[key]) {prev[key] = [];}
prev[key].push(curr);
return prev;
}, {});
// 如果该节令下没有数据,则应用默认的 0 -23 小时数据
if (!arr[this.timeInfoForm.season]) {this.hasAddData = [];
} else {this.hasAddData = arr[this.timeInfoForm.season];
}
},
// 切换节令
handleSeasonChange(val) {
this.timeInfoForm.season = val;
this.handleDataFormat();},
},
};
次要逻辑是计算出起始时刻和终止时刻,脑子中有一些想法,然而代码总是编写有问题,因而记录下大佬的编码,再次感激边城大佬的帮忙。
正文完