<template>
|
<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">
|
<el-button @click="selectBtn">确定</el-button>
|
</div>
|
</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: "",
|
fetch: "",
|
start: 0,
|
end: 0,
|
});
|
let btnState = false;
|
let CS = {
|
start: "",
|
end: "",
|
Classify: "",
|
};
|
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") {
|
if (!btnState) {
|
return ElMessage.error("请先选择风区");
|
}
|
menuTool.createFC("sj", newTimeStr, CS);
|
} else {
|
menuTool.createWRW("sj", newTimeStr);
|
}
|
}
|
};
|
function FQselectBtn() {
|
btnState = true;
|
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;
|
}
|
menuTool.createFC("fc", "", CS);
|
}
|
function changeTime() {}
|
return {
|
selectBtn,
|
changeTime,
|
selectform,
|
FQselectBtn,
|
};
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.pickerBox {
|
width: 100%;
|
}
|
.pickerBox1 {
|
margin-right: 60px;
|
width: 38%;
|
}
|
.picker_box {
|
// width: calc(742px * 1.5);
|
// 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 {
|
display: flex;
|
// justify-content: space-around;
|
align-items: center;
|
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;
|
border-radius: 20px;
|
color: #ffffff;
|
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 {
|
margin-right: 30px;
|
// width: 460px;
|
// .el-select {
|
// width: 30%;
|
// }
|
}
|
.FQ_s {
|
width: 160px;
|
}
|
.CS_s {
|
width: 100px;
|
}
|
</style>
|
<style>
|
@media (width: 1920px) {
|
.el-date-range-picker {
|
transform: scale(1);
|
}
|
}
|
|
@media (width: 3840px) {
|
.el-date-range-picker {
|
transform: scale(1.7);
|
}
|
}
|
</style>
|
