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 340 additions and 28 deletions
src/viewsPc/vip/components/AdaptiveSelect.vue 0 → 100644
1 <template>
2 <div class="adaptive-select-container">
3 <el-select
4 v-model="selectedValue"
5 :placeholder="placeholder"
6 :popper-class="popperClass"
7 :style="selectStyle"
8 clearable
9 filterable
10 @change="handleChange"
11 @visible-change="handleVisibleChange"
12 >
13 <el-option
14 v-for="item in options"
15 :key="getOptionKey(item)"
16 :label="getOptionLabel(item)"
17 :value="getOptionValue(item)"
18 />
19 </el-select>
20 </div>
21 </template>
22
23 <script>
24 import {ref, computed, onMounted, onUnmounted} from 'vue';
25
26 export default {
27 name: 'AdaptiveSelect',
28
29 props: {
30 // 选项列表
31 options: {
32 type: Array,
33 required: true,
34 default: () => []
35 },
36 // 默认选中的值
37 modelValue: {
38 type: [String, Number, Array],
39 default: ''
40 },
41 // 占位文本
42 placeholder: {
43 type: String,
44 default: '请选择'
45 },
46 // 小屏幕下的宽度 (默认100%)
47 mobileWidth: {
48 type: String,
49 default: '100%'
50 },
51 // 中等屏幕下的宽度 (默认80%)
52 tabletWidth: {
53 type: String,
54 default: '80%'
55 },
56 // 大屏幕下的宽度 (默认600px)
57 desktopWidth: {
58 type: String,
59 default: '600px'
60 },
61 // 选项的value字段名
62 valueKey: {
63 type: String,
64 default: 'value'
65 },
66 // 选项的label字段名
67 labelKey: {
68 type: String,
69 default: 'label'
70 },
71 // 是否可多选
72 multiple: {
73 type: Boolean,
74 default: false
75 },
76 // 是否可搜索
77 filterable: {
78 type: Boolean,
79 default: true
80 },
81 // 是否可清空
82 clearable: {
83 type: Boolean,
84 default: true
85 }
86 },
87
88 emits: ['update:modelValue', 'change'],
89
90 setup(props, {emit}) {
91 const selectedValue = ref(props.modelValue);
92 const windowWidth = ref(window.innerWidth);
93 const isDropdownVisible = ref(false);
94
95 // 监听窗口大小变化
96 const handleResize = () => {
97 windowWidth.value = window.innerWidth;
98 };
99
100 onMounted(() => {
101 window.addEventListener('resize', handleResize);
102 });
103
104 onUnmounted(() => {
105 window.removeEventListener('resize', handleResize);
106 });
107
108 // 根据窗口宽度调整选择框样式
109 const selectStyle = computed(() => {
110 if (windowWidth.value < 768) {
111 return {width: props.mobileWidth};
112 } else if (windowWidth.value < 1024) {
113 return {width: props.tabletWidth};
114 } else {
115 return {width: props.desktopWidth};
116 }
117 });
118
119 // 根据窗口宽度调整下拉框类名
120 const popperClass = computed(() => {
121 return windowWidth.value < 768 ? 'mobile-dropdown' : 'desktop-dropdown';
122 });
123
124 // 下拉框显示/隐藏时的处理
125 const handleVisibleChange = (visible) => {
126 isDropdownVisible.value = visible;
127 };
128
129 // 选项变化时的处理
130 const handleChange = (value) => {
131 emit('update:modelValue', value);
132 emit('change', value);
133 };
134
135 // 获取选项的key
136 const getOptionKey = (item) => {
137 return item[props.valueKey] || item.value;
138 };
139
140 // 获取选项的label
141 const getOptionLabel = (item) => {
142 return item[props.labelKey] || item.label || item[props.valueKey] || item.value;
143 };
144
145 // 获取选项的value
146 const getOptionValue = (item) => {
147 return item[props.valueKey] || item.value;
148 };
149
150 return {
151 selectedValue,
152 selectStyle,
153 popperClass,
154 handleVisibleChange,
155 handleChange,
156 getOptionKey,
157 getOptionLabel,
158 getOptionValue
159 };
160 }
161 };
162 </script>
163
164
165 <style scoped>
166 .adaptive-select-container {
167 padding: 0;
168 max-width: 100%;
169 box-sizing: border-box;
170 }
171 </style>
172
173 <style>
174 /* 全局样式，用于下拉框 */
175 .mobile-dropdown {
176 width: 90vw !important;
177 max-width: 100% !important;
178 }
179
180 .desktop-dropdown {
181 min-width: 200px !important;
182 max-width: 600px !important;
183 }
184
185 /* 响应式调整 */
186 @media (max-width: 768px) {
187 .el-select-dropdown {
188 max-width: calc(100vw - 40px) !important;
189 }
190 }
191 </style>
...\ No newline at end of file ...\ No newline at end of file
src/viewsPc/vip/leftPage.vue
...@@ -9,30 +9,38 @@ ...@@ -9,30 +9,38 @@
9 <div> 9 <div>
10 <div class="title">应收账款余额与收入</div> 10 <div class="title">应收账款余额与收入</div>
11 <div class="po_right"> 11 <div class="po_right">
12 <el-select v-model="queryParams.select"> 12 <div class="itemBox">
13 <el-option label="全部基地(可多选)" value="month"/> 13 <el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
14 <el-option label="全部基地1" value="1"/>
15 <el-option label="全部基地2" value="2"/>
16 <el-option label="全部基地3" value="3"/>
17 <el-option label="全部基地4" value="4"/>
14 </el-select> 18 </el-select>
15 </div> 19 </div>
16 <div class="po_right"> 20 <div class="itemBox">
17 <el-select> 21 <el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)"
22 size="small">
18 <el-option label="数据因素(可多选)" value="month"/> 23 <el-option label="数据因素(可多选)" value="month"/>
19 </el-select> 24 </el-select>
20 </div> 25 </div>
21
22 </div> 26 </div>
23 <!-- <div class="po_right">--> 27 </div>
24 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
25 <!-- <el-radio-button label="本月" value="month"/>-->
26 <!-- <el-radio-button label="本季度" value="quarter"/>-->
27 <!-- <el-radio-button label="本年" value="year"/>-->
28 <!-- </el-radio-group>-->
29 <!-- </div>-->
30 28
31 <div ref="lineRef" style="width: 100%; height: 24vh;"></div> 29 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
32 </div> 30 </div>
33 <div class="chartCard mt30"> 31 <div class="chartCard mt30">
34 <div> 32 <div>
35 <div class="title">应收账款余额组成</div> 33 <div class="title">应收账款余额组成</div>
34 <div class="po_right" style="justify-content: end;">
35 <div class="itemBox">
36 <el-select v-model="queryParams.select" class="select" placeholder="全部基地" size="small">
37 <el-option label="全部基地1" value="1"/>
38 <el-option label="全部基地2" value="2"/>
39 <el-option label="全部基地3" value="3"/>
40 <el-option label="全部基地4" value="4"/>
41 </el-select>
42 </div>
43 </div>
36 <!-- <div class="title">--> 44 <!-- <div class="title">-->
37 <!-- <el-select>--> 45 <!-- <el-select>-->
38 <!-- <el-option label="全部基地(可多选)" value="month"/>--> 46 <!-- <el-option label="全部基地(可多选)" value="month"/>-->
...@@ -65,7 +73,8 @@ import * as echarts from "echarts"; ...@@ -65,7 +73,8 @@ import * as echarts from "echarts";
65 import * as api from "@/apiPc/common" 73 import * as api from "@/apiPc/common"
66 74
67 const queryParams = ref({ 75 const queryParams = ref({
68 select: '' 76 select: null,
77 select2: null
69 }) 78 })
70 const zhuRef = ref(null) 79 const zhuRef = ref(null)
71 const lineRef = ref(null) 80 const lineRef = ref(null)
...@@ -600,8 +609,11 @@ onUnmounted(() => { ...@@ -600,8 +609,11 @@ onUnmounted(() => {
600 .po_right { 609 .po_right {
601 position: absolute; 610 position: absolute;
602 right: calc(20 * 100vw / 1920); 611 right: calc(20 * 100vw / 1920);
603 top: calc(40 * 100vw / 1920); 612 top: 3%;
604 z-index: 1; 613 z-index: 1;
614 width: 50%;
615 display: flex;
616 justify-content: space-between;
605 617
606 :deep(.el-radio-button) { 618 :deep(.el-radio-button) {
607 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4); 619 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
...@@ -621,6 +633,46 @@ onUnmounted(() => { ...@@ -621,6 +633,46 @@ onUnmounted(() => {
621 } 633 }
622 } 634 }
623 } 635 }
636
637 .itemBox {
638 width: 45%;
639 background: #0B2239;
640 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
641 border-radius: 5px;
642 border: 1px solid #12BFFF;
643
644 .select {
645 background-color: transparent;
646
647 :deep(.el-select__wrapper) {
648 background-color: transparent;
649 box-shadow: 0 0 0 0;
650 border: none;
651 }
652
653 /* 选项样式 */
654 :deep(.el-select-dropdown__item) {
655 color: white !important;
656 background-color: transparent !important;
657 }
658
659 /* 鼠标悬停效果 */
660 :deep(.el-select-dropdown__item.hover) {
661 background-color: rgba(255, 255, 255, 0.1) !important;
662 }
663
664 /* placeholder */
665 :deep(.el-select__placeholder) {
666 font-family: PingFang SC, serif;
667 font-weight: 500;
668 color: #13C1F4;
669 text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
670 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
671 -webkit-background-clip: text;
672 -webkit-text-fill-color: transparent
673 }
674 }
675 }
624 } 676 }
625 677
626 .downDot { 678 .downDot {
......
src/viewsPc/vip/rightPage.vue
...@@ -2,25 +2,35 @@ ...@@ -2,25 +2,35 @@
2 <div class="pd20"> 2 <div class="pd20">
3 <div class="chartCard"> 3 <div class="chartCard">
4 <div class="title">开票计划与执行</div> 4 <div class="title">开票计划与执行</div>
5 <!-- <div class="po_right">--> 5 <div class="po_right" style="justify-content: end">
6 <!-- <el-radio-group v-model="radioA" size="small" @change="radioAChange">--> 6 <div class="itemBox">
7 <!-- <el-radio-button label="本月" value="month"/>--> 7 <el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
8 <!-- <el-radio-button label="本季度" value="quarter"/>--> 8 <el-option label="全部基地1" value="1"/>
9 <!-- <el-radio-button label="本年" value="year"/>--> 9 <el-option label="全部基地2" value="2"/>
10 <!-- </el-radio-group>--> 10 <el-option label="全部基地3" value="3"/>
11 <!-- </div>--> 11 <el-option label="全部基地4" value="4"/>
12 </el-select>
13 </div>
14 </div>
12 15
13 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div> 16 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
14 </div> 17 </div>
15 18
16 <div class="chartCard mt30"> 19 <div class="chartCard mt30">
17 <div class="title">回款</div> 20 <div class="title">回款</div>
18 <div class="po_right"> 21 <div class="po_right" style="justify-content: end;">
19 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">--> 22 <div class="itemBox month" style="width: 25%;margin-right: 5px;">
20 <!-- <el-radio-button label="本月" value="month" />--> 23 <span class="">本月</span>
21 <!-- <el-radio-button label="本季度" value="quarter" />--> 24 </div>
22 <!-- <el-radio-button label="本年" value="year " />--> 25 <div class="itemBox">
23 <!-- </el-radio-group>--> 26 <el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
27 <el-option label="全部基地1" value="1"/>
28 <el-option label="全部基地2" value="2"/>
29 <el-option label="全部基地3" value="3"/>
30 <el-option label="全部基地4" value="4"/>
31 </el-select>
32 </div>
33
24 </div> 34 </div>
25 35
26 <div ref="lineRef" style="width: 100%; height: 24vh;"></div> 36 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
...@@ -39,6 +49,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip"; ...@@ -39,6 +49,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip";
39 import * as echarts from "echarts"; 49 import * as echarts from "echarts";
40 import * as api from "@/apiPc/common" 50 import * as api from "@/apiPc/common"
41 51
52 const queryParams = ref({})
42 const zhuRef = ref(null) 53 const zhuRef = ref(null)
43 const lineRef = ref(null) 54 const lineRef = ref(null)
44 const overdueRef = ref(null) 55 const overdueRef = ref(null)
...@@ -585,8 +596,11 @@ onUnmounted(() => { ...@@ -585,8 +596,11 @@ onUnmounted(() => {
585 .po_right { 596 .po_right {
586 position: absolute; 597 position: absolute;
587 right: calc(20 * 100vw / 1920); 598 right: calc(20 * 100vw / 1920);
588 top: calc(40 * 100vw / 1920); 599 top: 3%;
600 width: 50%;
589 z-index: 1; 601 z-index: 1;
602 display: flex;
603 justify-content: space-between;
590 604
591 :deep(.el-radio-button) { 605 :deep(.el-radio-button) {
592 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4); 606 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
...@@ -608,6 +622,47 @@ onUnmounted(() => { ...@@ -608,6 +622,47 @@ onUnmounted(() => {
608 } 622 }
609 } 623 }
610 624
625 .itemBox {
626 width: 45%;
627 background: #0B2239;
628 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
629 border-radius: 5px;
630 border: 1px solid #12BFFF;
631
632 .select {
633 background-color: transparent;
634
635 :deep(.el-select__wrapper) {
636 background-color: transparent;
637 box-shadow: 0 0 0 0;
638 border: none;
639 }
640
641 /* 选项样式 */
642 :deep(.el-select-dropdown__item) {
643 color: white !important;
644 background-color: transparent !important;
645 }
646
647 /* 鼠标悬停效果 */
648 :deep(.el-select-dropdown__item.hover) {
649 background-color: rgba(255, 255, 255, 0.1) !important;
650 }
651
652 /* placeholder */
653 :deep(.el-select__placeholder) {
654 font-family: PingFang SC, serif;
655 font-weight: 500;
656 color: #13C1F4;
657 text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
658 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
659 -webkit-background-clip: text;
660 -webkit-text-fill-color: transparent
661 }
662 }
663 }
664
665
611 .downDot { 666 .downDot {
612 position: relative; 667 position: relative;
613 668
...@@ -621,4 +676,18 @@ onUnmounted(() => { ...@@ -621,4 +676,18 @@ onUnmounted(() => {
621 bottom: 0; 676 bottom: 0;
622 } 677 }
623 } 678 }
679
680 .month {
681 display: flex;
682 justify-content: center;
683 align-items: center;
684 font-family: PingFang SC, serif;
685 font-weight: 500;
686 color: #13C1F4;
687 text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
688 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
689 -webkit-background-clip: text;
690 -webkit-text-fill-color: transparent;
691 cursor: pointer;
692 }
624 </style> 693 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!