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 1/2] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E6=9F=B1=E7=8A=B6?= =?UTF-8?q?=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; From 1353a97afed4d699bd43d3c066772297b9370ace 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: Fri, 28 Feb 2025 09:58:04 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/screen/compenonts/leftwrapper.vue | 33 ++++++--- src/views/screen/compenonts/map.vue | 55 ++++++++++----- src/views/screen/compenonts/rightwrapper.vue | 73 ++++++++++++-------- src/views/screen/index.vue | 1 + 4 files changed, 106 insertions(+), 56 deletions(-) diff --git a/src/views/screen/compenonts/leftwrapper.vue b/src/views/screen/compenonts/leftwrapper.vue index 1c88b2b..714cbf2 100644 --- a/src/views/screen/compenonts/leftwrapper.vue +++ b/src/views/screen/compenonts/leftwrapper.vue @@ -30,7 +30,7 @@ const row1Options = ref({ }, xAxis: { type: 'category', - data: ['一大队', '二大队', '三大队', '四大队', '五大队'], + data: ['日常任务', '周期任务', '污染防治', '环境监测', '排污管控'], axisTick: { show: false }, @@ -71,7 +71,7 @@ const row1Options = ref({ series: [ { type: 'bar', - data: [100, 10], + data: [100, 90, 10, 90, 90, 20, 56, 89], barWidth: 5, itemStyle: { color: { @@ -168,14 +168,14 @@ const row2Options = ref({ name: '四大队' }, { - value: 1548, + value: 500, name: '五大队' } ] } ] }) -const row3Options = ref({ +const row3Options:any = ref({ grid: { top: 10, bottom: 10, @@ -306,7 +306,23 @@ const row3Options = ref({ const row1Chart = ref() const row2Chart = ref() const row3Chart = ref() -const initChart = () => {} +const initChart = () => { + // leftFirst() + // leftSecond() + // leftThird() + const row1Data=new Array(5).fill(1).map(i=>{ + return Math.floor(Math.random()*100) + }) + row1Options.value.series[0].data=row1Data + row1Options.value.series[1].data=row1Data + const row3Data=new Array(5).fill(1).map(i=>{ + return Math.floor(Math.random()*100) + }) + row3Options.value.series[1].data=row3Data + row3Options.value.series[2].data=row3Data + row3Options.value.yAxis[1].data=row3Data + +} const handlerResize = () => { unref(row1Chart).resizeHandler() @@ -347,13 +363,12 @@ const leftThird = async () => { } onMounted(() => { - leftFirst() - leftSecond() - leftThird() - initChart() observer = new ResizeObserver(handlerResize) observer.observe(leftWrapperRef.value) handlerResize() + nextTick(() => { + initChart() + }) }) onUnmounted(() => { diff --git a/src/views/screen/compenonts/map.vue b/src/views/screen/compenonts/map.vue index 4b1f9d4..e79c409 100644 --- a/src/views/screen/compenonts/map.vue +++ b/src/views/screen/compenonts/map.vue @@ -5,6 +5,16 @@ +
+
+ 绿色柱 + 区域企业数占比 +
+
+ 黄色柱 + 区域任务数占比 +
+
@@ -395,7 +405,7 @@ const initMap = () => { coordinateSystem: 'cartesian2d', xAxisIndex: idx, yAxisIndex: idx, - symbolSize: [6,3], + symbolSize: [6, 3], symbolOffset: [0, -1], symbolPosition: 'end', symbol: 'circle', @@ -458,7 +468,7 @@ const initMap = () => { label: { show: false, }, - symbolSize: [6,3], + symbolSize: [6, 3], symbolOffset: [0, -1], barGap: '-100%', data: [ @@ -489,7 +499,7 @@ const initMap = () => { show: false, }, barGap: '-100%', - symbolSize: [6,3], + symbolSize: [6, 3], symbolOffset: [0, -1], data: [ { @@ -506,14 +516,16 @@ const initMap = () => { } ] }) - + }) } onMounted(() => { observer = new ResizeObserver(handlerResize) observer.observe(mapWrapperRef.value) - initMap() + nextTick(() => { + initMap() + }) }) onUnmounted(() => { @@ -535,7 +547,6 @@ onUnmounted(() => { background-size: contain; background-repeat: no-repeat; background-position: center; - //animation: rotate 5s linear infinite; } &::after { @@ -566,7 +577,7 @@ onUnmounted(() => { .nomr-box { position: absolute; right: 12px; - top: 50%; + top: 68%; transform: translateY(-50%); } @@ -597,19 +608,29 @@ onUnmounted(() => { backdrop-filter: blur(3px); z-index: 2; } -} -@keyframes rotate { - from { - transform: rotateX(0deg) rotateZ(0); - } + .legend { + position: absolute; + left: 20%; + top: 20%; + display: flex; + flex-flow: column nowrap; + gap: 12px; + z-index: 2; - 50% { - transform: rotateX(-30deg) rotateZ(30deg); - } + .legend-item { + display: flex; + align-items: center; + gap: 8px; + color: #fff; + font-size: 14px; - to { - transform: rotateX(0deg) rotateZ(0deg); + .legend-text { + opacity: 0.8; + } + } } } + + diff --git a/src/views/screen/compenonts/rightwrapper.vue b/src/views/screen/compenonts/rightwrapper.vue index e99d173..d1a478e 100644 --- a/src/views/screen/compenonts/rightwrapper.vue +++ b/src/views/screen/compenonts/rightwrapper.vue @@ -8,24 +8,13 @@
-
-
+
+
{{ row.name }}
逾期 - + 天
@@ -183,7 +172,7 @@ const row1Options = ref({ }) const list: any = ref([]) const color = ['#56CA00', '#FFE700', '#16B1FF'] -const row2Options:any = ref({ +const row2Options: any = ref({ series: [ { type: 'pie', @@ -414,17 +403,29 @@ const row3Options = ref({ const row1Chart = ref() const row2Chart = ref() const row3Chart = ref() - -const initChart = () => {} +const listRef = ref() +const initChart = () => { + rightFirst() + // rightSecond() + rightFourth() + rightThird() +} const queryParams: any = ref() //右一 const rightFirst = async () => { - const data: any = await ScreenApi.getRightFirst(queryParams.value) - row1Options.value.xAxis.data = data.map((i) => i.name) - row1Options.value.series[0].data = data.map((i) => i.value) - row1Options.value.series[1].data = data.map((i) => i.taskValue) + // const data: any = await ScreenApi.getRightFirst(queryParams.value) + // row1Options.value.xAxis.data = data.map((i) => i.name) + // row1Options.value.series[0].data = data.map((i) => i.value) + // row1Options.value.series[1].data = data.map((i) => i.taskValue) + row1Options.value.series[0].data = new Array(5).fill(1).map(i=>{ + return Math.floor(Math.random()*100) + }) + row1Options.value.series[1].data = new Array(5).fill(1).map(i=>{ + return Math.floor(Math.random()*100) + }) + } //右二 @@ -453,17 +454,30 @@ const rightSecond = async () => { } } +let timer: any = null // 右三 const rightThird = async () => { list.value = await ScreenApi.getRightThird(queryParams.value) + timer = setInterval(() => { + unref(listRef).scrollTop += 1; + if (unref(listRef).scrollTop >= unref(listRef).scrollHeight) { + unref(listRef).scrollTop = 0; + } + }, 200); } // 右四 const rightFourth = async () => { - const data = await ScreenApi.getRightFourth(queryParams.value) - row3Options.value.xAxis.data = data.map((i) => i.name) - row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate) - row3Options.value.series[1].data = data.map((i) => i.taskGrowthRate) + // const data = await ScreenApi.getRightFourth(queryParams.value) + // row3Options.value.xAxis.data = data.map((i) => i.name) + // row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate) + // row3Options.value.series[1].data = data.map((i) => i.taskGrowthRate) + row3Options.value.series[0].data = new Array(5).fill(1).map(i=>{ + return Math.floor(Math.random()*100) + }) + row3Options.value.series[1].data = new Array(5).fill(1).map(i=>{ + return Math.floor(Math.random()*100) + }) } const handlerResize = () => { @@ -474,10 +488,6 @@ const handlerResize = () => { onMounted(() => { initChart() - rightFirst() - rightSecond() - rightFourth() - rightThird() observer = new ResizeObserver(handlerResize) observer.observe(rightWrapperRef.value) handlerResize() @@ -485,6 +495,7 @@ onMounted(() => { onUnmounted(() => { observer?.disconnect() + timer && clearInterval(timer) }) @@ -496,12 +507,14 @@ onUnmounted(() => { grid-template-rows: 1.5fr 1fr 1.3fr 1.5fr; grid-template-columns: 1fr; grid-gap: 20px; + .list-container { position: relative; width: 100%; height: 100%; overflow: hidden; scroll-behavior: smooth; + .list { &::-webkit-scrollbar { display: none; diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index 46cce30..213f43c 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -29,6 +29,7 @@ import Rightwrapper from './compenonts/rightwrapper.vue' padding: 12px 12px; grid-gap: 24px; color: #fff; + padding-bottom: 20px; .chart-wrapper { display: grid; grid-template-rows: 1fr;