From 4c846958fd4046b7a125224c759ae7ae0af673fa Mon Sep 17 00:00:00 2001
From: WX <1377869194@qq.com>
Date: 星期三, 30 八月 2023 14:13:10 +0800
Subject: [PATCH] 需求修改完成
---
src/components/dateTimePicker.vue | 217 ++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 184 insertions(+), 33 deletions(-)
diff --git a/src/components/dateTimePicker.vue b/src/components/dateTimePicker.vue
index 47fc10c..86b28a8 100644
--- a/src/components/dateTimePicker.vue
+++ b/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) {
--
Gitblit v1.9.3