Commit 671e9661f7b4795bbfaba13b3474579ad86e9c10
Committed by
xp.Huang
1 parent
6d736225
feat(src/components/Pages): echarts图表,全局配置,新增y轴取值范围配置
Showing
6 changed files
with
68 additions
and
6 deletions
@@ -164,6 +164,14 @@ | @@ -164,6 +164,14 @@ | ||
164 | <template #header> | 164 | <template #header> |
165 | <n-switch v-model:value="yAxis.show" size="small"></n-switch> | 165 | <n-switch v-model:value="yAxis.show" size="small"></n-switch> |
166 | </template> | 166 | </template> |
167 | + <setting-item-box name="范围" v-if="yAxis.showRange"> | ||
168 | + <setting-item name="最小值" > | ||
169 | + <n-input-number v-model:value="yAxis.min" size="small" min="0"></n-input-number> | ||
170 | + </setting-item> | ||
171 | + <setting-item name="最大值"> | ||
172 | + <n-input-number v-model:value="yAxis.max" size="small" min="0"></n-input-number> | ||
173 | + </setting-item> | ||
174 | + </setting-item-box> | ||
167 | <setting-item-box name="单位"> | 175 | <setting-item-box name="单位"> |
168 | <setting-item name="名称"> | 176 | <setting-item name="名称"> |
169 | <n-input v-model:value="yAxis.name" size="small"></n-input> | 177 | <n-input v-model:value="yAxis.name" size="small"></n-input> |
@@ -294,7 +302,6 @@ | @@ -294,7 +302,6 @@ | ||
294 | <template #header> | 302 | <template #header> |
295 | <n-switch v-model:value="visualMap.show" size="small"></n-switch> | 303 | <n-switch v-model:value="visualMap.show" size="small"></n-switch> |
296 | </template> | 304 | </template> |
297 | - | ||
298 | <setting-item-box name="范围"> | 305 | <setting-item-box name="范围"> |
299 | <setting-item name="最小值"> | 306 | <setting-item name="最小值"> |
300 | <n-input-number v-model:value="visualMap.min" size="small"></n-input-number> | 307 | <n-input-number v-model:value="visualMap.min" size="small"></n-input-number> |
@@ -373,6 +380,13 @@ const xAxis = computed(() => { | @@ -373,6 +380,13 @@ const xAxis = computed(() => { | ||
373 | }) | 380 | }) |
374 | 381 | ||
375 | const yAxis = computed(() => { | 382 | const yAxis = computed(() => { |
383 | + if((props.optionData?.yAxis as Recordable)){ | ||
384 | + if(!(props.optionData?.yAxis as Recordable).showRange) { | ||
385 | + //针对横向柱状图和热力图 | ||
386 | + Reflect.deleteProperty((props.optionData.yAxis as Recordable),'min'); | ||
387 | + Reflect.deleteProperty((props.optionData.yAxis as Recordable),'max'); | ||
388 | + } | ||
389 | + } | ||
376 | return props.optionData.yAxis | 390 | return props.optionData.yAxis |
377 | }) | 391 | }) |
378 | 392 |
1 | <template> | 1 | <template> |
2 | - <div> | 2 | + <div class="device-history-query"> |
3 | <n-space vertical> | 3 | <n-space vertical> |
4 | <div class="form"> | 4 | <div class="form"> |
5 | <n-date-picker size="small" :to="true" clearable v-model:value="queryCondition.timeRange" type="datetimerange" | 5 | <n-date-picker size="small" :to="true" clearable v-model:value="queryCondition.timeRange" type="datetimerange" |
@@ -96,6 +96,27 @@ const option = computed(() => { | @@ -96,6 +96,27 @@ const option = computed(() => { | ||
96 | return mergeTheme(props.chartConfig.option, props.themeSetting, includes) | 96 | return mergeTheme(props.chartConfig.option, props.themeSetting, includes) |
97 | }) | 97 | }) |
98 | 98 | ||
99 | +const toolBoxOption = { | ||
100 | + show: true, | ||
101 | + right: 20, | ||
102 | + feature: { | ||
103 | + myFullButton: { | ||
104 | + show: true, | ||
105 | + title: '全屏查看', | ||
106 | + icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z', | ||
107 | + onclick: () => { | ||
108 | + const domName = document.getElementsByClassName('device-history-query')[0] as HTMLElement | ||
109 | + const htmlName = document.querySelector('html') as HTMLHtmlElement | ||
110 | + useFullScreen(domName, htmlName) | ||
111 | + } | ||
112 | + } | ||
113 | + } | ||
114 | +} | ||
115 | +props.chartConfig.option = { | ||
116 | + ...props.chartConfig.option, | ||
117 | + ...{ toolbox: toolBoxOption } | ||
118 | +} | ||
119 | + | ||
99 | // dataset 无法变更条数的补丁 | 120 | // dataset 无法变更条数的补丁 |
100 | watch( | 121 | watch( |
101 | () => props.chartConfig.option.dataset, | 122 | () => props.chartConfig.option.dataset, |
1 | +/** | ||
2 | + * 单个组件全屏 | ||
3 | + * @param domName | ||
4 | + * @param htmlName | ||
5 | + */ | ||
6 | + | ||
1 | export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => { | 7 | export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => { |
2 | const isFullScreen = document.fullscreenElement | 8 | const isFullScreen = document.fullscreenElement |
9 | + | ||
3 | const currentDatkTheme = htmlName.getAttribute('data-theme') | 10 | const currentDatkTheme = htmlName.getAttribute('data-theme') |
4 | 11 | ||
12 | + //特殊处理单设备多属性组件全屏显示 | ||
13 | + const setDomName = (domName: any,top0: string, top1: string) => { | ||
14 | + domName.children[0].style.top = top0 | ||
15 | + domName.style.paddingBottom = '80px' | ||
16 | + domName.children[1].style.top = top1 | ||
17 | + } | ||
18 | + | ||
19 | + const setDomNameAndStyle = () => { | ||
20 | + domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c' | ||
21 | + domName.children[0].style.position = 'relative' | ||
22 | + setDomName(domName, '30px','40px') | ||
23 | + } | ||
24 | + | ||
5 | if (isFullScreen) { | 25 | if (isFullScreen) { |
6 | if (document.exitFullscreen) { | 26 | if (document.exitFullscreen) { |
7 | document.exitFullscreen() | 27 | document.exitFullscreen() |
@@ -11,18 +31,19 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => { | @@ -11,18 +31,19 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => { | ||
11 | //兼容其他浏览器 | 31 | //兼容其他浏览器 |
12 | if (domName.requestFullscreen) { | 32 | if (domName.requestFullscreen) { |
13 | domName.requestFullscreen() | 33 | domName.requestFullscreen() |
14 | - domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c' | 34 | + setDomNameAndStyle() |
15 | } else if (domName.mozRequestFullScreen) { | 35 | } else if (domName.mozRequestFullScreen) { |
16 | domName.mozRequestFullScreen() | 36 | domName.mozRequestFullScreen() |
17 | - domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c' | 37 | + setDomNameAndStyle() |
18 | } else if (domName.webkitRequestFullscreen) { | 38 | } else if (domName.webkitRequestFullscreen) { |
19 | domName.webkitRequestFullscreen() | 39 | domName.webkitRequestFullscreen() |
20 | - domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c' | 40 | + setDomNameAndStyle() |
21 | } else if (domName.msRequestFullscreen) { | 41 | } else if (domName.msRequestFullscreen) { |
22 | domName.msRequestFullscreen() | 42 | domName.msRequestFullscreen() |
23 | - domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c' | 43 | + setDomNameAndStyle() |
24 | } | 44 | } |
25 | } | 45 | } |
46 | + | ||
26 | //fix 浏览器监听esc退出 | 47 | //fix 浏览器监听esc退出 |
27 | function exitHandler() { | 48 | function exitHandler() { |
28 | if ( | 49 | if ( |
@@ -33,6 +54,7 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => { | @@ -33,6 +54,7 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => { | ||
33 | domName.style.background = currentDatkTheme === 'light' ? '' : '' | 54 | domName.style.background = currentDatkTheme === 'light' ? '' : '' |
34 | } | 55 | } |
35 | } | 56 | } |
57 | + | ||
36 | // 监听fullscreenchange事件(全屏模式的变化) | 58 | // 监听fullscreenchange事件(全屏模式的变化) |
37 | if (document.addEventListener) { | 59 | if (document.addEventListener) { |
38 | document.addEventListener('webkitfullscreenchange', exitHandler, false) | 60 | document.addEventListener('webkitfullscreenchange', exitHandler, false) |