数据大屏地图

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(() => {

src/views/screen/compenonts/map.vue

@@ -5,6 +5,16 @@
     <Numbox class="num-box block-box" />
     <Tabber class="tabber-box" />
     <Norm class="block-box nomr-box" />
+    <section class="legend">
+      <div class="legend-item">
+        <span class="legend-text color-#58D764">绿色柱</span>
+        <span class="legend-label">区域企业数占比</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-text color-#FBE947">黄色柱</span>
+        <span class="legend-label">区域任务数占比</span>
+      </div>
+    </section>
     <section class="map z-2">
       <charts :options="mapOption" ref="mapChartRef" class="mapChart" />
     </section>
@@ -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 {
+  .legend {
-  from {
+    position: absolute;
-    transform: rotateX(0deg) rotateZ(0);
+    left: 20%;
-  }
+    top: 20%;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 12px;
+    z-index: 2;
 
-  50% {
+    .legend-item {
-    transform: rotateX(-30deg) rotateZ(30deg);
+      display: flex;
-  }
+      align-items: center;
+      gap: 8px;
+      color: #fff;
+      font-size: 14px;
 
-  to {
+      .legend-text {
-    transform: rotateX(0deg) rotateZ(0deg);
+        opacity: 0.8;
+      }
+    }
   }
 }
+
+
 </style>

src/views/screen/compenonts/rightwrapper.vue

@@ -8,24 +8,13 @@
     </TitleBox>
     <TitleBox title="资质许可状态">
       <section class="list-container">
-        <section
+        <section class="position-absolute inset-0 overflow-y-auto flex flex-col gap-12px list" ref="listRef">
-          class="position-absolute inset-0 overflow-y-auto flex flex-col gap-12px list"
+          <section class="flex justify-between font-size-14px" v-for="(row, index) in list" :key="index">
-          ref="listRef"
-        >
-          <section
-            class="flex justify-between font-size-14px"
-            v-for="(row, index) in list"
-            :key="index"
-          >
             <span>{{ row.name }}</span>
             <section class="color-#56CA00">
               逾期
-              <count-to
+              <count-to :start-val="0" :end-val="row.count" :duration="1000"
-                :start-val="0"
+                :options="{ separator: ',', decimal: 0 }" />
-                :end-val="row.count"
-                :duration="1000"
-                :options="{ separator: ',', decimal: 0 }"
-              />
               天
             </section>
           </section>
@@ -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 listRef = ref()
-const initChart = () => {}
+const initChart = () => {
+  rightFirst()
+  // rightSecond()
+  rightFourth()
+  rightThird()
+}
 
 const queryParams: any = ref()
 
 //右一
 const rightFirst = async () => {
-  const data: any = await ScreenApi.getRightFirst(queryParams.value)
+  // const data: any = await ScreenApi.getRightFirst(queryParams.value)
-  row1Options.value.xAxis.data = data.map((i) => i.name)
+  // row1Options.value.xAxis.data = data.map((i) => i.name)
-  row1Options.value.series[0].data = data.map((i) => i.value)
+  // row1Options.value.series[0].data = data.map((i) => i.value)
-  row1Options.value.series[1].data = data.map((i) => i.taskValue)
+  // 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)
+  // const data = await ScreenApi.getRightFourth(queryParams.value)
-  row3Options.value.xAxis.data = data.map((i) => i.name)
+  // row3Options.value.xAxis.data = data.map((i) => i.name)
-  row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate)
+  // row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate)
-  row3Options.value.series[1].data = data.map((i) => i.taskGrowthRate)
+  // 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)
 })
 </script>
 
@@ -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;

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;