需求修改完成

WX

2023-08-30 4c846958fd4046b7a125224c759ae7ae0af673fa

 src/components/dateTimePicker.vue

@@ -1,24 +1,74 @@
<template>
  <div class="picker_box">
    <div class="pickerBox">
      <div class="picker_title">时间选择</div>
      <div class="form_box">
        <div class="inp_box XZboxDate">
          <el-date-picker
            size="large"
            v-model="selectform.value"
            type="datetime"
            @change="changeTime"
            format="YYYY-MM-DD HH"
            value-format="YYYY-MM-DD HH"
            placeholder="选择时间"
          />
  <div>
    <div class="picker_box" v-show="tpData == 'd22' || tpData == 'd23'">
      <div class="pickerBox">
        <div class="picker_title">风区选择</div>
        <div class="form_box">
          <!-- <div class="inp_box XZboxDate">
            <span>风区</span>
            <el-select
              class="FQ_s"
              v-model="selectform.fetch"
              placeholder="风区"
              size="large"
              clearable
            >
              <el-option label="整个厂区" value="Main" />
              <el-option label="西部厂区" value="West" />
              <el-option label="东部厂区" value="East" />
            </el-select>
          </div> -->

          <div class="inp_box">
            <span>选择层数</span>
            <el-select
              v-model="selectform.start"
              size="large"
              placeholder="开始"
              class="CS_s"
              clearable
            >
              <el-option :label="i" :value="i" v-for="(e, i) in 50" :key="i" />
            </el-select>
            <i>-</i>
            <el-select
              v-model="selectform.end"
              size="large"
              placeholder="结束"
              class="CS_s"
              clearable
            >
              <el-option :label="e" :value="e" v-for="(e, i) in 50" :key="i" />
            </el-select>
          </div>

          <div class="button_box">
            <el-button @click="FQselectBtn">确定</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="picker_box">
      <div class="pickerBox">
        <div class="picker_title">时间选择</div>
        <div class="form_box">
          <div class="inp_box">
            <el-date-picker
              size="large"
              v-model="selectform.value"
              type="datetime"
              @change="changeTime"
              format="YYYY-MM-DD HH"
              value-format="YYYY-MM-DD HH"
              placeholder="选择时间"
            />
          </div>

        <div class="button_box"></div>
          <div class="button_box"></div>

        <div class="button_box">
          <el-button @click="selectBtn">确定</el-button>
          <div class="button_box">
            <el-button @click="selectBtn">确定</el-button>
          </div>
        </div>
      </div>
    </div>
@@ -38,9 +88,17 @@
    const store = useStore();

    let selectform = reactive({
      value: "",
      value: null,
      fetch: "",
      start: 0,
      end: 0,
    });

    let btnState = false;
    let CS = {
      start: 0,
      end: 0,
      Classify: "",
    };
    const selectBtn = () => {
      if (selectform.value) {
        // let newTimeStr = `${value.slice(0, 13)}:00:00`;
@@ -72,19 +130,88 @@
        }

        emit("changeTime", { data: newTimeStr, week: week });
        if (props.tpData == "d2") {
        CS.start = selectform.start;
        CS.end = selectform.end;
        CS.Classify = selectform.fetch;
        if (selectform.start > selectform.end) {
          CS.start = selectform.end;
          CS.end = selectform.start;
        }
        if (props.tpData == "d21") {
          menuTool.createFC("sj", newTimeStr);
        } else if (props.tpData == "d22") {
          CS.Classify = "West";
          menuTool.createFC("sj", newTimeStr, CS);
        } else if (props.tpData == "d23") {
          CS.Classify = "East";
          menuTool.createFC("sj", newTimeStr, CS);
        } else {
          menuTool.createWRW("sj", newTimeStr);
        }
      }
    };
    function changeTime(value) {}
    function FQselectBtn() {
      CS.start = selectform.start;
      CS.end = selectform.end;
      CS.Classify = selectform.fetch;
      if (selectform.start > selectform.end) {
        CS.start = selectform.end;
        CS.end = selectform.start;
      }
      if (props.tpData == "d22") {
        CS.Classify = "West";
      } else if (props.tpData == "d23") {
        CS.Classify = "East";
      }
      if (btnState) {
        menuTool.createFC("sj", selectform.value, CS);
      } else {
        menuTool.createFC("fc", "", CS);
      }
    }
    function changeTime() {}
    watch(
      () => selectform.value,
      (nVal, oVal) => {
        if (nVal == null) {
          btnState = false;
        } else {
          btnState = true;
        }
      },

      { deep: true }
    );
    watch(
      () => props.tpData,
      (nVal, oVal) => {
        if (nVal == "d22") {
          selectform.start = 20;
          selectform.end = 25;
          selectform.value = null;
        } else if (nVal == "d23") {
          selectform.start = 13;
          selectform.end = 19;
          selectform.value = null;
        }
      },

      { deep: true }
    );
    onMounted(() => {
      if (props.tpData == "d22") {
        selectform.start = 20;
        selectform.end = 25;
      } else if (props.tpData == "d23") {
        selectform.start = 13;
        selectform.end = 19;
      }
    });
    return {
      selectBtn,
      changeTime,
      selectform,
      FQselectBtn,
    };
  },
};
@@ -99,7 +226,7 @@
  width: 38%;
}
.picker_box {
  width: calc(742px * 1);
  // width: calc(742px * 1.5);
  //   position: absolute;
  //   right: 70px;
  //   top: 490px;
@@ -131,11 +258,21 @@
    // justify-content: space-around;
    align-items: center;
    .inp_box {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      span {
        font-size: 24px;
        font-weight: 400;
        color: #ffffff;
        padding-right: 10px;
      }
      i {
        font-size: 24px;
        font-weight: 400;
        color: #ffffff;
        padding-right: 10px;
        padding-left: 10px;
      }
      :deep(.el-date-editor) {
        height: 64px;
@@ -187,20 +324,34 @@
  }
  .el-button {
    background: rgba(0, 0, 0, 0.2);
    border: 4px solid #2e58cc !important;
    border-radius: 20px !important;
    border: 4px solid #2e58cc;
    border-radius: 20px;
    color: #ffffff;
    height: 64px !important;
    font-size: 28px !important;
    padding: 16px 30px !important;
    height: 64px;
    font-size: 28px;
    padding: 16px 30px;
  }
  .el-button:focus,
  .el-button:hover {
    color: var(--el-button-hover-text-color);
    border-color: var(--el-button-hover-border-color);
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
  }
}
// .XZboxDate {
//   width: 70%;
//   /deep/ .el-input {
//     width: 100%;
//   }
// }
.XZboxDate {
  margin-right: 30px;
  //   width: 460px;
  //   .el-select {
  //     width: 30%;
  //   }
}
.FQ_s {
  width: 160px;
}
.CS_s {
  width: 100px;
}
</style>
<style>
@media (width: 1920px) {