<template>
|
<div class="picker_box">
|
<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
|
@change="startChange"
|
>
|
<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
|
@change="endChange"
|
>
|
<el-option :label="e" :value="e" v-for="(e, i) in 50" :key="i" />
|
</el-select>
|
</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({
|
fetch: "",
|
start: 0,
|
end: 0,
|
});
|
|
const selectBtn = () => {
|
if (selectform.start > selectform.end) {
|
return ElMessage.error("请检查是否有数据");
|
}
|
};
|
const endChange = (val) => {};
|
const startChange = (val) => {};
|
return {
|
selectBtn,
|
|
selectform,
|
startChange,
|
endChange,
|
};
|
},
|
};
|
</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;
|
padding-right: 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 {
|
width: 100%;
|
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;
|
white-space: nowrap;
|
}
|
i {
|
font-size: 24px;
|
font-weight: 400;
|
color: #ffffff;
|
padding-right: 10px;
|
padding-left: 10px;
|
}
|
// :deep(.el-date-editor) {
|
// height: 64px;
|
// }
|
// .el-date-picker {
|
// }
|
/deep/ .el-input__wrapper {
|
height: 64px;
|
// 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 {
|
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>
|
