风场功能完善

WX

2023-08-11 b4494b8196c25917f5b5cf8e9e1228db5c8be2f3

 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>
@@ -39,8 +89,16 @@

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

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

        emit("changeTime", { data: newTimeStr, week: week });
        if (props.tpData == "d2") {
        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() {
      selectform.value = "";
      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";
        menuTool.createFC("fc", "", CS);
      } else if (props.tpData == "d23") {
        CS.Classify = "East";
        menuTool.createFC("fc", "", CS);
      }
    }
    function changeTime() {}
    return {
      selectBtn,
      changeTime,
      selectform,
      FQselectBtn,
    };
  },
};
@@ -99,7 +180,7 @@
  width: 38%;
}
.picker_box {
  width: calc(742px * 1);
  // width: calc(742px * 1.5);
  //   position: absolute;
  //   right: 70px;
  //   top: 490px;
@@ -131,11 +212,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 +278,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) {