From fbe7631373f4f360f2492a69d8278975ecd63553 Mon Sep 17 00:00:00 2001 From: lankuixing <799745985@qq.com> Date: Fri, 23 Feb 2024 22:52:11 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=96=B0=E5=A2=9E=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E7=9C=8B=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/WarningStatistics.vue | 10 ++- components/charts/AirQualityTrendCharts.vue | 21 ++--- components/charts/COTrendCharts.vue | 21 ++--- components/charts/ElectricityWaterCharts.vue | 24 +++--- components/charts/PollutantTrendCharts.vue | 27 +++--- components/charts/ProduceTrendChart.vue | 29 +++---- components/charts/WarningTypeChart.vue | 18 ++-- mixins/screen-scale-mixin_v2.js | 78 ++++++++++++++++++ pages/autovisual/index.vue | 86 ++++++++++++++++++++ utils/iframe.js | 27 ++++++ 10 files changed, 272 insertions(+), 69 deletions(-) create mode 100644 mixins/screen-scale-mixin_v2.js create mode 100644 pages/autovisual/index.vue create mode 100644 utils/iframe.js diff --git a/components/WarningStatistics.vue b/components/WarningStatistics.vue index f59f1b3..b84037f 100644 --- a/components/WarningStatistics.vue +++ b/components/WarningStatistics.vue @@ -14,6 +14,7 @@
+
@@ -109,7 +110,14 @@ export default { .warning-type-pie { flex: 1; height: 0; - .bg("~/assets/peakCoalImages/right/warning-type-pie-bg.png", left, 20px); + position: relative; + ._bg{ + position: absolute; + width: 314px; + height: 313px; + background: url("~/assets/peakCoalImages/right/warning-type-pie-bg.png") no-repeat 16px 48px; + background-size: 100% 100%; + } } } } diff --git a/components/charts/AirQualityTrendCharts.vue b/components/charts/AirQualityTrendCharts.vue index 3841eb9..f711bee 100644 --- a/components/charts/AirQualityTrendCharts.vue +++ b/components/charts/AirQualityTrendCharts.vue @@ -84,7 +84,7 @@ export default { data: yAxisDataSource, yAxisIndex: 0, // 通过这个判断左右 lineStyle: { - width: 6, + width: 3, } } seriesList.push(series) @@ -94,20 +94,21 @@ export default { legend: { top: 20, left: '30%', - itemWidth: 22, - itemHeight: 22, + itemWidth: 11, + itemHeight: 11, icon: 'circle', textStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - padding: [0, 0, 0, 20] + fontSize: 15, + padding: [0, 0, 0, 10] } }, tooltip: { trigger: 'axis', }, grid: { - top: 100, + top: 50, + bottom: 10, containLabel: true, }, xAxis: [ @@ -115,7 +116,7 @@ export default { type: 'category', boundaryGap: true, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, axisLine: { @@ -135,13 +136,13 @@ export default { type: 'value', splitNumber: 5, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, nameTextStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - lineHeight: 40, + fontSize: 15, + lineHeight: 20, }, // 分割线 splitLine: { diff --git a/components/charts/COTrendCharts.vue b/components/charts/COTrendCharts.vue index 6392021..c0189bd 100644 --- a/components/charts/COTrendCharts.vue +++ b/components/charts/COTrendCharts.vue @@ -89,7 +89,7 @@ export default { data: yAxisDataSource, yAxisIndex: 0, // 通过这个判断左右 lineStyle: { - width: 6, + width: 3, }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -111,22 +111,23 @@ export default { let option = { color: color, legend: { - top: 20, + top: 10, right: '10%', - itemWidth: 22, - itemHeight: 22, + itemWidth: 11, + itemHeight: 11, icon: 'circle', textStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - padding: [0, 0, 0, 20] + fontSize: 15, + padding: [0, 0, 0, 10] } }, tooltip: { trigger: 'axis', }, grid: { - top: 100, + top: 50, + bottom: 10, containLabel: true, left: 0 }, @@ -135,7 +136,7 @@ export default { type: 'category', boundaryGap: true, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, axisLine: { @@ -155,12 +156,12 @@ export default { type: 'value', splitNumber: 5, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, nameTextStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, + fontSize: 15, lineHeight: 40, }, // 分割线 diff --git a/components/charts/ElectricityWaterCharts.vue b/components/charts/ElectricityWaterCharts.vue index 841e01a..955c227 100644 --- a/components/charts/ElectricityWaterCharts.vue +++ b/components/charts/ElectricityWaterCharts.vue @@ -85,7 +85,7 @@ export default { type: 'bar', color: 'transparent', yAxisIndex: 0, - barWidth: '60', + barWidth: '30', data: yAxisDataSource, } let topBar = @@ -96,13 +96,12 @@ export default { color: color[index], symbol: 'rect', symbolPosition: 'end', // 在数据结尾显示 - symbolSize: [60, 20], // 「树叶大小」 + symbolSize: [30, 10], // 「树叶大小」 symbolOffset: ['0', '0'], //「偏移量」 } seriesList.push(topBar) seriesList.push(series) - console.log() } let option = { color: color, @@ -110,20 +109,21 @@ export default { show: false, top: 20, left: '30%', - itemWidth: 22, - itemHeight: 22, + itemWidth: 11, + itemHeight: 11, icon: 'circle', textStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - padding: [0, 0, 0, 20] + fontSize: 15, + padding: [0, 0, 0, 10] } }, tooltip: { trigger: 'axis', }, grid: { - top: 60, + top: 30, + bottom: 10, containLabel: true, }, xAxis: [ @@ -131,7 +131,7 @@ export default { type: 'category', boundaryGap: true, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, axisLine: { @@ -151,13 +151,13 @@ export default { type: 'value', splitNumber: 5, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, nameTextStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - lineHeight: 40, + fontSize: 15, + lineHeight: 20, }, // 分割线 splitLine: { diff --git a/components/charts/PollutantTrendCharts.vue b/components/charts/PollutantTrendCharts.vue index 81d8fab..9b63c0d 100644 --- a/components/charts/PollutantTrendCharts.vue +++ b/components/charts/PollutantTrendCharts.vue @@ -89,7 +89,7 @@ export default { data: yAxisDataSource, yAxisIndex: 0, // 通过这个判断左右 lineStyle: { - width: 6, + width: 3, } } } else if (index == 0) { @@ -97,7 +97,7 @@ export default { name: attrNames[index], type: 'bar', color: color[index], - barWidth: '50%', + barWidth: '25%', data: yAxisDataSource, } } @@ -108,22 +108,23 @@ export default { color: color, legend: { show: false, - top: 20, - left: '30%', - itemWidth: 22, - itemHeight: 22, + top: 10, + left: '15%%', + itemWidth: 11, + itemHeight: 11, icon: 'circle', textStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - padding: [0, 0, 0, 20] + fontSize: 15, + padding: [0, 0, 0, 10] } }, tooltip: { trigger: 'axis', }, grid: { - top: 60, + top: 30, + bottom: 10, containLabel: true, }, xAxis: [ @@ -131,7 +132,7 @@ export default { type: 'category', boundaryGap: true, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, axisLine: { @@ -151,13 +152,13 @@ export default { type: 'value', splitNumber: 5, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, nameTextStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - lineHeight: 40, + fontSize: 15, + lineHeight: 20, }, // 分割线 splitLine: { diff --git a/components/charts/ProduceTrendChart.vue b/components/charts/ProduceTrendChart.vue index 0a092bf..0d85f3c 100644 --- a/components/charts/ProduceTrendChart.vue +++ b/components/charts/ProduceTrendChart.vue @@ -66,12 +66,12 @@ export default { legend: { top: 0, right: 0, - itemWidth: 22, - itemHeight: 22, + itemWidth: 11, + itemHeight: 11, icon: 'circle', textStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, + fontSize: 15, } }, @@ -79,7 +79,8 @@ export default { trigger: 'axis', }, grid: { - top: 100, + top: 50, + bottom: 10, containLabel: true, }, xAxis: [ @@ -87,7 +88,7 @@ export default { type: 'category', boundaryGap: true, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, axisLine: { @@ -109,13 +110,13 @@ export default { splitNumber: 5, name: '单位：t', axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, nameTextStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - lineHeight: 40, + fontSize: 15, + lineHeight: 20, }, // 分割线 splitLine: { @@ -137,13 +138,13 @@ export default { name: '单位：m³', splitNumber: 5, axisLabel: { - fontSize: 30, + fontSize: 15, color: 'rgba(106,196,255,0.60)' }, nameTextStyle: { color: 'rgba(106,196,255,0.60)', - fontSize: 30, - lineHeight: 40, + fontSize: 15, + lineHeight: 20, }, // 分割线 splitLine: { @@ -170,7 +171,7 @@ export default { data: yAxisData1, yAxisIndex: 0, // 通过这个判断左右 lineStyle: { - width: 6, + width: 3, } }, { @@ -182,7 +183,7 @@ export default { data: yAxisData2, yAxisIndex: 1, // 通过这个判断左右 lineStyle: { - width: 6, + width: 3, } }, { @@ -194,7 +195,7 @@ export default { data: yAxisData3, yAxisIndex: 1, // 通过这个判断左右 lineStyle: { - width: 6, + width: 3, } }, ], diff --git a/components/charts/WarningTypeChart.vue b/components/charts/WarningTypeChart.vue index 5402a39..d135b50 100644 --- a/components/charts/WarningTypeChart.vue +++ b/components/charts/WarningTypeChart.vue @@ -84,8 +84,8 @@ export default { left: lefts[i], top: tops[i], align: aligns[i], - itemWidth: 19, - itemHeight: 74, + itemWidth: 10, + itemHeight: 37, itemStyle: { color: colorList[i], }, @@ -94,28 +94,28 @@ export default { textStyle: { fontWeight: 'lighter', fontSize: 14, - width: 460, - height: 74, + width: 230, + height: 37, padding: [0, 10, 0, 10], backgroundColor: bgColorList[i], - lineHeight: 74, + lineHeight: 37, rich: { a: { align: 'right', color: '#C1DEFF', - fontSize: 42, + fontSize: 17, fontWeight: 700 }, b: { align: 'left', color: '#C1DEFF', - fontSize: 34, + fontSize: 17, padding: [0, 0, 0, 10] }, c:{ align: 'center', color: '#C1DEFF', - fontSize: 34, + fontSize: 17, padding: [0, 0, 0, 10] } } @@ -155,7 +155,7 @@ export default { }, itemStyle: { borderRadius: 0, - borderWidth: 10 + borderWidth: 5 }, data: pieData1 }, diff --git a/mixins/screen-scale-mixin_v2.js b/mixins/screen-scale-mixin_v2.js new file mode 100644 index 0000000..f0e5101 --- /dev/null +++ b/mixins/screen-scale-mixin_v2.js @@ -0,0 +1,78 @@ +import {sendMessage} from '@/utils/iframe'; + +const VISUAL_CONFIG = {width: 9450, height: 3000} + +export default { + data() { + return { + autoStyle: {} + } + }, + computed: { + }, + mounted() { + this.getAutoStyle() + this.initScaleEvent() + }, + beforeDestroy() { + this._removeScaleEvent() + }, + methods: { + getAutoStyle() { + const innerHeight = window.innerHeight + const innerWidth = window.innerWidth + const {scale, origin, position, type} = this.getScale() + sendMessage('scale', {scale, type, innerHeight, innerWidth}) + localStorage.setItem('scale', JSON.stringify({scale, type, innerHeight, innerWidth})) + this.autoStyle = { + width: VISUAL_CONFIG.width + 'px', + height: VISUAL_CONFIG.height + 'px', + transform: `scale(${scale})`, + transformOrigin: origin, + ...position + } + }, + getScale() { + let scale = 1 + // 1 按照高度缩放 2 按照宽度缩放 + let type = 1 + let origin = 'top center' + const innerWidth = window.innerWidth + const innerHeight = window.innerHeight + const widthScale = innerWidth / VISUAL_CONFIG.width + const scaleHeight = VISUAL_CONFIG.height * widthScale + const position = {left: 0, top: 0, marginTop: 0, marginLeft: 0} + if (scaleHeight <= innerHeight) { + origin = 'left center' + scale = widthScale + position.left = 0 + position.top = '50%' + position.marginTop = -VISUAL_CONFIG.height / 2 + 'px' + position.marginLeft = 0 + let type = 2 + + if (scale > 1) { + origin = 'left top' + position.left = 0 + position.top = 0 + position.marginTop = 0 + position.marginLeft = 0 + } + } else { + scale = innerHeight / VISUAL_CONFIG.height + position.left = '50%' + position.top = 0 + position.marginTop = 0 + position.marginLeft = -VISUAL_CONFIG.width / 2 + 'px' + } + return {scale, origin, position, type} + }, + + initScaleEvent() { + window.addEventListener('resize', this.getAutoStyle.bind(this)) + }, + _removeScaleEvent() { + window.removeEventListener('resize', this.getAutoStyle.bind(this)) + } + } +} diff --git a/pages/autovisual/index.vue b/pages/autovisual/index.vue new file mode 100644 index 0000000..8f4882b --- /dev/null +++ b/pages/autovisual/index.vue @@ -0,0 +1,86 @@ + +