项目笔记（只涉及思想，不会贴出业务代码）

项目中碰到的问题：
一、新增和修改公用一个页面，通过点击不同的按钮得到的数据来获取数据，新增时选中城市后才获取到围栏数据；而修改则是获取当前行的围栏id，mounted时得到围栏数据。
新增城市下面会默认展示 “全城配置的围栏”，该行不能删除，后端不提供接口，需要自己生成。本来后端传来的围栏是数组格式，循环渲染得到几行，第一行用到的数据在data里先给个默认数据，但是select-option中数据源没有该行，数据没显示。只创建围栏的假数据展示出来就好了。

<el-select
                v-if="item.fenceId !== 0"
                v-model="item.fenceId"
                class="selectWidth"
                style="margin-right:10px"
                filterable
                @change="
                  val => {
                    selectCityName(val, index);
                  }
                "
              >
                <el-option
                  v-for="state in fencesList"
                  :disabled="state.id == 0"//下拉选择不能选中假数据源（即全城动调）
                  :key="state.id"
                  :value="state.id"
                  :label="state.name"
                />
              </el-select>
              <el-select
                class="selectWidth"
                style="margin-right:10px"
                v-else//默认第一行显示，前面在fencesList已经unshift进去
                v-model="item.fenceId"
                disabled
              >
                <el-option
                  :value="item.fenceId"
                  :disabled="true"
                  :label="item.fenceName"
                />
 <el-select>

二、时间生效问题

在开关页中，围栏是否开启根据checkbox的勾选和不勾选，生成了开启和关闭的字样，没考虑到围栏时间的生效问题，比如，10:00开启了8:00至9:00的围栏，生成字样是关闭，因此要考虑一个结束时间endTime是否在当前时间之后，是的则认为是生效。

 function CompareDate(t1, t2) {
        var date = new Date();
        var a = t1.split(':');
        var b = t2.split(':');
        console.log(date.setHours(a[0], a[1]));
        console.log(date.setHours(b[0], b[1]));
        return date.setHours(a[0], a[1]) > date.setHours(b[0], b[1]);
      }

三、完善
起始时间不能等于结束时间，我认为这里其实可以当作跨天来看，但产品就要这样做，没办法，然后就想了几个办法，1是选择结束时间时不能选择起始时间，2准备在提交时校验两个时间是否相等，还是后面这个方法简单，一直在想组件timepicker怎么改时间范围，这里绕了弯路。