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;