<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="button_box"></div>
|
|
<div class="button_box">
|
<el-button @click="selectBtn">确定</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref, reactive, onMounted, watch, computed } from "vue";
|
import { useStore } from "vuex";
|
import { FormInstance, ElMessage, ElMessageBox } from "element-plus";
|
import menuTool from "@/assets/js/menuTool";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
props: ["tpData"],
|
setup(props, { emit }) {
|
const store = useStore();
|
|
let selectform = reactive({
|
value: "",
|
});
|
|
const selectBtn = () => {
|
if (selectform.value) {
|
// let newTimeStr = `${value.slice(0, 13)}:00:00`;
|
let newTimeStr = selectform.value;
|
let day = new Date(selectform.value).getDay();
|
let week;
|
switch (day) {
|
case 0:
|
week = `周日`;
|
break;
|
case 1:
|
week = `周一`;
|
break;
|
case 2:
|
week = `周二`;
|
break;
|
case 3:
|
week = `周三`;
|
break;
|
case 4:
|
week = `周四`;
|
break;
|
case 5:
|
week = `周五`;
|
break;
|
case 6:
|
week = `周六`;
|
break;
|
}
|
|
emit("changeTime", { data: newTimeStr, week: week });
|
if (props.tpData == "d2") {
|
menuTool.createFC("sj", newTimeStr);
|
} else {
|
menuTool.createWRW("sj", newTimeStr);
|
}
|
}
|
};
|
function changeTime(value) {}
|
|
return {
|
selectBtn,
|
changeTime,
|
selectform,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.pickerBox {
|
width: 100%;
|
}
|
.pickerBox1 {
|
margin-right: 60px;
|
width: 38%;
|
}
|
.picker_box {
|
width: calc(742px * 1);
|
// position: absolute;
|
// right: 70px;
|
// top: 490px;
|
// width: calc(742px * 1.5);
|
// width: 560px;
|
height: calc(200px * 1);
|
|
background: url("../assets/img/d.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 40px;
|
padding-left: 60px;
|
box-sizing: border-box;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-around;
|
.picker_title {
|
font-size: 30px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
}
|
.picker_title_right {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.form_box {
|
display: flex;
|
// justify-content: space-around;
|
align-items: center;
|
.inp_box {
|
span {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
padding-right: 10px;
|
}
|
:deep(.el-date-editor) {
|
height: 64px;
|
}
|
.el-date-picker {
|
}
|
/deep/ .el-input__wrapper {
|
width: 460px;
|
background: rgba(0, 0, 0, 0.2);
|
border: 2px solid #2e58cc;
|
border-radius: 10px;
|
color: #ffffff;
|
padding: 0;
|
padding-left: 3px;
|
}
|
/deep/ .el-input__inner,
|
/deep/ .el-textarea__inner {
|
// background-color: rgba(134, 132, 132, 0.5);
|
color: #ffffff;
|
font-size: 24px;
|
}
|
/deep/.el-range-input {
|
color: white;
|
}
|
/deep/ .el-range-separator {
|
color: white;
|
}
|
}
|
:deep(.el-range-editor--large .el-range-separator) {
|
font-size: 24px;
|
}
|
:deep(.el-input__icon),
|
:deep(.el-range__icon) {
|
font-size: 28px;
|
}
|
::-webkit-input-placeholder {
|
font-size: 24px;
|
}
|
:deep(.el-range-input) {
|
font-size: 28px;
|
}
|
}
|
.button_box {
|
margin-left: 20px;
|
}
|
.button_box_right {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.el-button {
|
background: rgba(0, 0, 0, 0.2);
|
border: 4px solid #2e58cc !important;
|
border-radius: 20px !important;
|
color: #ffffff;
|
height: 64px !important;
|
font-size: 28px !important;
|
padding: 16px 30px !important;
|
}
|
}
|
// .XZboxDate {
|
// width: 70%;
|
// /deep/ .el-input {
|
// width: 100%;
|
// }
|
// }
|
</style>
|
<style>
|
@media (width: 1920px) {
|
.el-date-range-picker {
|
transform: scale(1);
|
}
|
}
|
|
@media (width: 3840px) {
|
.el-date-range-picker {
|
transform: scale(1.7);
|
}
|
}
|
</style>
|
