Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
51762012 by zhangmeng
Options

大屏

1 parent 466dea02
Inline Side-by-side
Showing 3 changed files with 344 additions and 32 deletions
src/viewsPc/vip/components/AdaptiveSelect.vue 0 → 100644
<template>
<div class="adaptive-select-container">
<el-select
v-model="selectedValue"
:placeholder="placeholder"
:popper-class="popperClass"
:style="selectStyle"
clearable
filterable
@change="handleChange"
@visible-change="handleVisibleChange"
>
<el-option
v-for="item in options"
:key="getOptionKey(item)"
:label="getOptionLabel(item)"
:value="getOptionValue(item)"
/>
</el-select>
</div>
</template>
<script>
import {ref, computed, onMounted, onUnmounted} from 'vue';
export default {
name: 'AdaptiveSelect',
props: {
// 选项列表
options: {
type: Array,
required: true,
default: () => []
},
// 默认选中的值
modelValue: {
type: [String, Number, Array],
default: ''
},
// 占位文本
placeholder: {
type: String,
default: '请选择'
},
// 小屏幕下的宽度 (默认100%)
mobileWidth: {
type: String,
default: '100%'
},
// 中等屏幕下的宽度 (默认80%)
tabletWidth: {
type: String,
default: '80%'
},
// 大屏幕下的宽度 (默认600px)
desktopWidth: {
type: String,
default: '600px'
},
// 选项的value字段名
valueKey: {
type: String,
default: 'value'
},
// 选项的label字段名
labelKey: {
type: String,
default: 'label'
},
// 是否可多选
multiple: {
type: Boolean,
default: false
},
// 是否可搜索
filterable: {
type: Boolean,
default: true
},
// 是否可清空
clearable: {
type: Boolean,
default: true
}
},
emits: ['update:modelValue', 'change'],
setup(props, {emit}) {
const selectedValue = ref(props.modelValue);
const windowWidth = ref(window.innerWidth);
const isDropdownVisible = ref(false);
// 监听窗口大小变化
const handleResize = () => {
windowWidth.value = window.innerWidth;
};
onMounted(() => {
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
// 根据窗口宽度调整选择框样式
const selectStyle = computed(() => {
if (windowWidth.value < 768) {
return {width: props.mobileWidth};
} else if (windowWidth.value < 1024) {
return {width: props.tabletWidth};
} else {
return {width: props.desktopWidth};
}
});
// 根据窗口宽度调整下拉框类名
const popperClass = computed(() => {
return windowWidth.value < 768 ? 'mobile-dropdown' : 'desktop-dropdown';
});
// 下拉框显示/隐藏时的处理
const handleVisibleChange = (visible) => {
isDropdownVisible.value = visible;
};
// 选项变化时的处理
const handleChange = (value) => {
emit('update:modelValue', value);
emit('change', value);
};
// 获取选项的key
const getOptionKey = (item) => {
return item[props.valueKey] || item.value;
};
// 获取选项的label
const getOptionLabel = (item) => {
return item[props.labelKey] || item.label || item[props.valueKey] || item.value;
};
// 获取选项的value
const getOptionValue = (item) => {
return item[props.valueKey] || item.value;
};
return {
selectedValue,
selectStyle,
popperClass,
handleVisibleChange,
handleChange,
getOptionKey,
getOptionLabel,
getOptionValue
};
}
};
</script>
<style scoped>
.adaptive-select-container {
padding: 0;
max-width: 100%;
box-sizing: border-box;
}
</style>
<style>
/* 全局样式，用于下拉框 */
.mobile-dropdown {
width: 90vw !important;
max-width: 100% !important;
}
.desktop-dropdown {
min-width: 200px !important;
max-width: 600px !important;
}
/* 响应式调整 */
@media (max-width: 768px) {
.el-select-dropdown {
max-width: calc(100vw - 40px) !important;
}
}
</style>
\ No newline at end of file
src/viewsPc/vip/leftPage.vue
......@@ -9,30 +9,38 @@
<div>
<div class="title">应收账款余额与收入</div>
<div class="po_right">
<el-select v-model="queryParams.select">
<el-option label="全部基地(可多选)" value="month"/>
</el-select>
<div class="itemBox">
<el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
<el-option label="全部基地1" value="1"/>
<el-option label="全部基地2" value="2"/>
<el-option label="全部基地3" value="3"/>
<el-option label="全部基地4" value="4"/>
</el-select>
</div>
<div class="itemBox">
<el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)"
size="small">
<el-option label="数据因素(可多选)" value="month"/>
</el-select>
</div>
</div>
<div class="po_right">
<el-select>
<el-option label="数据因素(可多选)" value="month"/>
</el-select>
</div>
</div>
<!-- <div class="po_right">-->
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month"/>-->
<!-- <el-radio-button label="本季度" value="quarter"/>-->
<!-- <el-radio-button label="本年" value="year"/>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div>
<div class="title">应收账款余额组成</div>
<div class="po_right" style="justify-content: end;">
<div class="itemBox">
<el-select v-model="queryParams.select" class="select" placeholder="全部基地" size="small">
<el-option label="全部基地1" value="1"/>
<el-option label="全部基地2" value="2"/>
<el-option label="全部基地3" value="3"/>
<el-option label="全部基地4" value="4"/>
</el-select>
</div>
</div>
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="全部基地(可多选)" value="month"/>-->
......@@ -65,7 +73,8 @@ import * as echarts from "echarts";
import * as api from "@/apiPc/common"
const queryParams = ref({
select: ''
select: null,
select2: null
})
const zhuRef = ref(null)
const lineRef = ref(null)
......@@ -600,8 +609,11 @@ onUnmounted(() => {
.po_right {
position: absolute;
right: calc(20 * 100vw / 1920);
top: calc(40 * 100vw / 1920);
top: 3%;
z-index: 1;
width: 50%;
display: flex;
justify-content: space-between;
:deep(.el-radio-button) {
--el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
......@@ -621,6 +633,46 @@ onUnmounted(() => {
}
}
}
.itemBox {
width: 45%;
background: #0B2239;
box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
border-radius: 5px;
border: 1px solid #12BFFF;
.select {
background-color: transparent;
:deep(.el-select__wrapper) {
background-color: transparent;
box-shadow: 0 0 0 0;
border: none;
}
/* 选项样式 */
:deep(.el-select-dropdown__item) {
color: white !important;
background-color: transparent !important;
}
/* 鼠标悬停效果 */
:deep(.el-select-dropdown__item.hover) {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* placeholder */
:deep(.el-select__placeholder) {
font-family: PingFang SC, serif;
font-weight: 500;
color: #13C1F4;
text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
}
}
}
.downDot {
......
src/viewsPc/vip/rightPage.vue
......@@ -2,25 +2,35 @@
<div class="pd20">
<div class="chartCard">
<div class="title">开票计划与执行</div>
<!-- <div class="po_right">-->
<!-- <el-radio-group v-model="radioA" size="small" @change="radioAChange">-->
<!-- <el-radio-button label="本月" value="month"/>-->
<!-- <el-radio-button label="本季度" value="quarter"/>-->
<!-- <el-radio-button label="本年" value="year"/>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<div class="po_right" style="justify-content: end">
<div class="itemBox">
<el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
<el-option label="全部基地1" value="1"/>
<el-option label="全部基地2" value="2"/>
<el-option label="全部基地3" value="3"/>
<el-option label="全部基地4" value="4"/>
</el-select>
</div>
</div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">回款</div>
<div class="po_right">
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month" />-->
<!-- <el-radio-button label="本季度" value="quarter" />-->
<!-- <el-radio-button label="本年" value="year " />-->
<!-- </el-radio-group>-->
<div class="po_right" style="justify-content: end;">
<div class="itemBox month" style="width: 25%;margin-right: 5px;">
<span class="">本月</span>
</div>
<div class="itemBox">
<el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
<el-option label="全部基地1" value="1"/>
<el-option label="全部基地2" value="2"/>
<el-option label="全部基地3" value="3"/>
<el-option label="全部基地4" value="4"/>
</el-select>
</div>
</div>
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
......@@ -39,6 +49,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
const queryParams = ref({})
const zhuRef = ref(null)
const lineRef = ref(null)
const overdueRef = ref(null)
......@@ -585,8 +596,11 @@ onUnmounted(() => {
.po_right {
position: absolute;
right: calc(20 * 100vw / 1920);
top: calc(40 * 100vw / 1920);
top: 3%;
width: 50%;
z-index: 1;
display: flex;
justify-content: space-between;
:deep(.el-radio-button) {
--el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
......@@ -608,6 +622,47 @@ onUnmounted(() => {
}
}
.itemBox {
width: 45%;
background: #0B2239;
box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
border-radius: 5px;
border: 1px solid #12BFFF;
.select {
background-color: transparent;
:deep(.el-select__wrapper) {
background-color: transparent;
box-shadow: 0 0 0 0;
border: none;
}
/* 选项样式 */
:deep(.el-select-dropdown__item) {
color: white !important;
background-color: transparent !important;
}
/* 鼠标悬停效果 */
:deep(.el-select-dropdown__item.hover) {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* placeholder */
:deep(.el-select__placeholder) {
font-family: PingFang SC, serif;
font-weight: 500;
color: #13C1F4;
text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
}
}
.downDot {
position: relative;
......@@ -621,4 +676,18 @@ onUnmounted(() => {
bottom: 0;
}
}
.month {
display: flex;
justify-content: center;
align-items: center;
font-family: PingFang SC, serif;
font-weight: 500;
color: #13C1F4;
text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!