From 690f9404a28aeec7287779b29077c90f349761d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=88=B1=7E=E6=B5=B7=7E=E7=88=B1=E6=B5=B7=E7=88=B1?= =?UTF-8?q?=E6=B5=B7=7E=E5=8F=B3?= <1828712314@qq.com> Date: Thu, 27 Feb 2025 16:25:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=9F=B1=E7=8A=B6=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/screen/compenonts/leftwrapper.vue | 2 +- src/views/screen/compenonts/map.vue | 157 ++++++++++++++++++-- src/views/screen/compenonts/tabber.vue | 6 +- 3 files changed, 146 insertions(+), 19 deletions(-) diff --git a/src/views/screen/compenonts/leftwrapper.vue b/src/views/screen/compenonts/leftwrapper.vue index c5276cc..1c88b2b 100644 --- a/src/views/screen/compenonts/leftwrapper.vue +++ b/src/views/screen/compenonts/leftwrapper.vue @@ -94,7 +94,7 @@ const row1Options = ref({ } }, { - name: '主要任务类型占比', + name: '任务类型占比', type: 'scatter', data: [100, 90, 10, 90, 90, 20, 56, 89], symbol: diff --git a/src/views/screen/compenonts/map.vue b/src/views/screen/compenonts/map.vue index 54fc444..4b1f9d4 100644 --- a/src/views/screen/compenonts/map.vue +++ b/src/views/screen/compenonts/map.vue @@ -134,7 +134,7 @@ const mapOption: any = ref({ fontWeight: 'bold', fontSize: 14, fontStyle: 'italic', - formatter: (v) => { + formatter: () => { return `AQI 25` } }, @@ -321,7 +321,10 @@ const initMap = () => { color: '#fff', fontSize: 10 }, - data: [dataItem.name] + nameTextStyle: { + color: '#fff' + }, + data: [dataItem.name, ''] }) //针对每个城市数据添加y轴 mapOption.value.yAxis.push({ @@ -366,12 +369,53 @@ const initMap = () => { itemStyle: { color: '#56ca00' }, - label: { - show: true, - position: 'top', - color: '#fff' - }, - data: [value1] + label: { + show: true, + position: 'top', + color: '#fff' + }, + data: [ + { + value: value1, + itemStyle: { + color: 'rgba(251, 233, 71, 1)' + } + }, + { + value: value2, + itemStyle: { + color: 'rgba(88, 215, 100, 1)' + } + } + ] + }) + mapOption.value.series.push({ + name: `${dataItem.name}1`, + type: 'pictorialBar', + coordinateSystem: 'cartesian2d', + xAxisIndex: idx, + yAxisIndex: idx, + symbolSize: [6,3], + symbolOffset: [0, -1], + symbolPosition: 'end', + symbol: 'circle', + label: { + show: false, + }, + data: [ + { + value: value1, + itemStyle: { + color: 'rgba(251, 233, 71, 1)' + } + }, + { + value: value2, + itemStyle: { + color: 'rgba(88, 215, 100, 1)' + } + } + ] }) mapOption.value.series.push({ name: `${dataItem.name}2`, @@ -381,17 +425,88 @@ const initMap = () => { yAxisIndex: idx, zLevel: 3, barWidth: 6, - itemStyle: { - color: '#ffe700', - fontSize:10, - }, label: { - show: true, + show: false, position: 'top', color: '#fff' }, - data: [value2] + barGap: '-100%', + data: [ + { + value: 100, + itemStyle: { + color: 'rgba(251, 233, 71, .2)' + } + }, + { + value: 100, + itemStyle: { + color: 'rgba(88, 215, 100, .2)' + } + } + ] + }) + mapOption.value.series.push({ + name: `${dataItem.name}3`, + type: 'pictorialBar', + coordinateSystem: 'cartesian2d', + xAxisIndex: idx, + yAxisIndex: idx, + symbolPosition: 'end', + symbol: 'circle', + zLevel: 3, + label: { + show: false, + }, + symbolSize: [6,3], + symbolOffset: [0, -1], + barGap: '-100%', + data: [ + { + value: 100, + itemStyle: { + color: 'rgba(251, 233, 71, .2)' + } + }, + { + value: 100, + itemStyle: { + color: 'rgba(88, 215, 100, .2)' + } + } + ] + }) + mapOption.value.series.push({ + name: `${dataItem.name}3`, + type: 'pictorialBar', + coordinateSystem: 'cartesian2d', + xAxisIndex: idx, + yAxisIndex: idx, + zLevel: 3, + symbolPosition: 'end', + symbol: 'circle', + label: { + show: false, + }, + barGap: '-100%', + symbolSize: [6,3], + symbolOffset: [0, -1], + data: [ + { + value: 0, + itemStyle: { + color: 'rgba(251, 233, 71, 1)' + } + }, + { + value: 0, + itemStyle: { + color: 'rgba(88, 215, 100, 1)' + } + } + ] }) + }) } @@ -411,6 +526,7 @@ onUnmounted(() => { position: relative; width: 100%; height: 100%; + &::before { content: ''; position: absolute; @@ -421,6 +537,7 @@ onUnmounted(() => { background-position: center; //animation: rotate 5s linear infinite; } + &::after { content: ''; position: absolute; @@ -431,6 +548,7 @@ onUnmounted(() => { background-position: center; //animation: rotate 5s linear infinite; } + .map { position: absolute; inset: 0; @@ -438,35 +556,41 @@ onUnmounted(() => { flex-flow: column nowrap; padding: 12px; } + .air-quality { position: absolute; left: 12px; top: 0; } + .nomr-box { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } + .weather { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } + .num-box { position: absolute; right: 12px; top: 0; } + .tabber-box { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); - z-index: 2; + z-index: 3; } + .block-box { border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.02); @@ -474,13 +598,16 @@ onUnmounted(() => { z-index: 2; } } + @keyframes rotate { from { transform: rotateX(0deg) rotateZ(0); } + 50% { transform: rotateX(-30deg) rotateZ(30deg); } + to { transform: rotateX(0deg) rotateZ(0deg); } diff --git a/src/views/screen/compenonts/tabber.vue b/src/views/screen/compenonts/tabber.vue index 3adffe6..539cfed 100644 --- a/src/views/screen/compenonts/tabber.vue +++ b/src/views/screen/compenonts/tabber.vue @@ -17,6 +17,7 @@ v-for="(item, index) in tabberList" :key="index" @click="curTab = index" + style="padding: 12px 16px;" > {{ item }} @@ -50,16 +51,15 @@ const curTab = ref(0) flex-flow: row nowrap; gap: 8px; width: fit-content; + font-size: 12px; .item { - font-size: 1rem; padding: 6px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.15); transition: .2s all; } .type-item{ - font-size: 1rem; - padding: 8px; + padding: 6px 16px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.15); transition: .2s all;