js对选中的数据进行范围过滤

时间：2023-03-27 18:16:59 JavaScript

项目场景：类型包括全年和季节，季节可配置。无论年份或季节，您都可以添加需求响应数据。弹出窗口中有两个下拉框。开始时间和结束时间，范围为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},]下次添加新item时，可以选择的数据列表只有：[0,1,2],[7,8],[15,16,17,18,19,20,21,22,23]，如果开始时间为0，结束时间只能为0、1或2，如果开始时间为7、结束时间只能是8。以此类推，写开始时间的下拉框数据和结束时间的下拉框数据。弹窗图标：下面是实现逻辑：-click-modal="false":close-on-press-escape="false":modal-append-to-body="false":append-to-body="true"width="450px"top="20vh"v-loading="formLoading">时当取消保存

exportdefault{name:"addTime",props:{showAddDialog:{type:对象，默认：()=>{},},},data(){return{formLoading:false,timeInfoForm:{season:"",st:"",et:"",up:"",down:"",},seasonList:[],hasAddData:[],//添加数据};},created(){//data是父组件传入的添加数据letdata=this.$deepClone(this.showAddDialog.data);//type--->1year,2seasonsif(this.showAddDialog.type==2){//列是父组件传递的季节数据this.seasonList=this.showAddDialog.columns;this.timeInfoForm.season=this.seasonList[0];这个.handleDataFormat();}else{this.hasAddData=数据;}},computed:{//获取默认的0-23小时数据getAllTimeData(){letarr=[];for(leti=0;i<=23;i++){arr.push(i);}返回arr;},//获取开始时间的数据stList(){returnthis.getAllTimeData.filter((t)=>this.hasAddData.every(({st,et})=>tet));},//获取结束时间的数据etList(){letstart=this.timeInfoForm.st;让startIndex=this.stList.indexOf(开始);返回this.stList.filter((t,i)=>t>=开始&&t-开始===i-startIndex);},},methods:{//切换开始时间handleStartChange(){this.timeInfoForm.et="";},//季节格式化数据handleDataFormat(){letdata=this.$deepClone(this.showAddDialog.data);//使用reduce函数对数据进行分组/**letarr={Spring:[{season:"Spring",st:12,et:15,up:0.2,down:0.4}{season:"spring",st:18,et:21,up:1,down:1}],summer:[{season:"summer",st:12,et:15,up:0.2,down:0.4}],秋季:[],winter:[]}*/letarr=data.reduce((prev,curr)=>{letkey=curr["season"];if(!prev[key]){prev[key]=[];}prev[key].push(curr);returnprev;},{});//如果没有本赛季下的数据，则使用默认的0-23小时数据if(!arr[this.timeInfoForm.season]){this.hasAddData=[];}别的{this.hasAddData=arr[this.timeInfoForm.season];}},//切换季节handleSeasonChange(val){this.timeInfoForm.season=val;这个.handleDataFormat();},},};主要逻辑是计算脑子里有一些想法，但是代码总是写错，所以把大佬的编码记录下来，再次感谢大家的帮助