前端 - 如何获取时间段内所有符合条件的数据？

Question

现有两个查询条件，其中一个是日期时间。
ui

 <el-form :inline="true" :model="formInline">        <el-form-item label="工位号" style="font-weight: bold">          <el-select v-model="formInline.value" placeholder="请选择工位">            <el-option              v-for="item in options"              :key="item.value"              :label="item.label"              :value="item.value"            >            </el-option>          </el-select>        </el-form-item>        <el-form-item label="起始时间-截止时间" style="font-weight: bold">          <el-date-picker            v-model="formInline.value1"            type="datetimerange"            range-separator="-"            start-placeholder="开始日期"            end-placeholder="结束日期"          >          </el-date-picker>        </el-form-item>        <el-form-item>          <el-button type="primary" @click="search(formInline)">查询</el-button>        </el-form-item>      </el-form>

 // search点击事件    search (val) {      console.log('输入值', val)      const datetime01 = this.toDate(val.value1[0]).date + ' ' + this.toDate(val.value1[0]).time      const datetime02 = this.toDate(val.value1[1]).date + ' ' + this.toDate(val.value1[1]).time      console.log(datetime01, '处理好的语义化时间', datetime02)      const data = this.allData      console.log(data, '所有数据')      if (val.value === '') {        this.$message.error('请选择想要查询的工位！')        return      }      if (val.value1[0] === '') {        this.$message.error('请输入起始时间！')        return      }      if (val.value1[1] === '') {        this.$message.error('请输入截止时间！')        return      }      if (val.value && val.value1[0] && val.value1[1]) {        /**         *  循环遍历出 符合条件的数组数据         *  工位process_no 时间do_time         *  将日期内的所有数据匹配出来         *         * 先过滤出所有符合工站位的数据，再匹配出时间段内的数据         */        const match = data.filter(item => (item.process_no = val.value))        console.log(match, '匹配上的工位')      }      this.getAllData()    },

Answer 1

//... 之前的代码 ...if (val.value && val.value1[0] && val.value1[1]) {    /**     *  循环遍历出 符合条件的数组数据     *  工位process_no 时间do_time     *  将日期内的所有数据匹配出来     *     * 先过滤出所有符合工站位的数据，再匹配出时间段内的数据     */    const startTime = new Date(datetime01).getTime();    const endTime = new Date(datetime02).getTime();    const match = data.filter(item =>         item.process_no === val.value &&        new Date(item.do_time).getTime() >= startTime &&         new Date(item.do_time).getTime() <= endTime    );    console.log(match, '匹配上的数据');}//... 之后的代码 ...

Answer 2

从你的代码中看，你正在使用 Vue.js 和 Element UI 组件库来构建一个前端应用，这个应用有一个查询功能，可以按照工位和时间范围来查询数据。

在你的 search 方法中，你首先检查是否选择了工位和是否输入了起始和结束时间。如果没有，就显示错误信息并返回。然后，你定义了起始和结束时间的字符串，但似乎没有对它们做任何处理。

接着，你创建了一个 data 变量，看起来这是你所有数据的数组。然后你创建了一个新的数组 match 来存储符合条件的数据。

你的代码中，对于 filter 方法的逻辑是检查每个项目的 process_no 属性是否等于输入的工位号，但这里可能存在一个错误。filter 方法应该返回一个布尔值，如果为 true，则元素将包含在新的数组中。因此，你可能需要使用 === 来比较 process_no 和工位号，而不是使用 =。

然后，你调用了 getAllData 方法，但未在给定的代码片段中定义这个方法，所以我无法评估它的功能。

下面是你可能需要的修改后的 search 方法：

search (val) {  console.log('输入值', val)  const datetime01 = this.toDate(val.value1[0]).date + ' ' + this.toDate(val.value1[0]).time  const datetime02 = this.toDate(val.value1[1]).date + ' ' + this.toDate(val.value1[1]).time  console.log(datetime01, '处理好的语义化时间', datetime02)  const data = this.allData  console.log(data, '所有数据')  if (val.value === '') {    this.$message.error('请选择想要查询的工位！')    return  }  if (val.value1[0] === '') {    this.$message.error('请输入起始时间！')    return  }  if (val.value1[1] === '') {    this.$message.error('请输入截止时间！')    return  }  if (val.value && val.value1[0] && val.value1[1]) {    /**     *  循环遍历出 符合条件的数组数据     *  工位process_no 时间do_time     *  将日期内的所有数据匹配出来     *     * 先过滤出所有符合工站位的数据，再匹配出时间段内的数据     */    const match = data.filter(item => item.process_no === val.value && item.do_time >= datetime01 && item.do_time <= datetime02)    console.log(match, '匹配上的工位')  }}

这个修改后的 search 方法会检查每个项目的 process_no 和 do_time 属性，确保它们分别等于输入的工位号和在输入的时间范围内。然后它会将符合这两个条件的所有项目添加到 match 数组中。