Merge branch 'master' of http://60.23.29.213:3060/HB/yudao-web

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: {
@@ -94,7 +94,7 @@ const row1Options = ref({
       }
     },
     {
-      name: '主要任务类型占比',
+      name: '任务类型占比',
       type: 'scatter',
       data: [100, 90, 10, 90, 90, 20, 56, 89],
       symbol:
@@ -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>
@@ -134,7 +144,7 @@ const mapOption: any = ref({
         fontWeight: 'bold',
         fontSize: 14,
         fontStyle: 'italic',
-        formatter: (v) => {
+        formatter: () => {
           return `AQI 25`
         }
       },
@@ -321,7 +331,10 @@ const initMap = () => {
         color: '#fff',
         fontSize: 10
       },
-      data: [dataItem.name]
+      nameTextStyle: {
+        color: '#fff'
+      },
+      data: [dataItem.name, '']
     })
     //针对每个城市数据添加y轴
     mapOption.value.yAxis.push({
@@ -371,7 +384,48 @@ const initMap = () => {
         position: 'top',
         color: '#fff'
       },
-      data: [value1]
+      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,25 +435,98 @@ 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)'
+          }
+        }
+      ]
     })
+
   })
 }
 
 onMounted(() => {
   observer = new ResizeObserver(handlerResize)
   observer.observe(mapWrapperRef.value)
+  nextTick(() => {
     initMap()
   })
+})
 
 onUnmounted(() => {
   observer?.disconnect()
@@ -411,6 +538,7 @@ onUnmounted(() => {
   position: relative;
   width: 100%;
   height: 100%;
+
   &::before {
     content: '';
     position: absolute;
@@ -419,8 +547,8 @@ onUnmounted(() => {
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
-    //animation: rotate 5s linear infinite;
   }
+
   &::after {
     content: '';
     position: absolute;
@@ -431,6 +559,7 @@ onUnmounted(() => {
     background-position: center;
     //animation: rotate 5s linear infinite;
   }
+
   .map {
     position: absolute;
     inset: 0;
@@ -438,51 +567,70 @@ onUnmounted(() => {
     flex-flow: column nowrap;
     padding: 12px;
   }
+
   .air-quality {
     position: absolute;
     left: 12px;
     top: 0;
   }
+
   .nomr-box {
     position: absolute;
     right: 12px;
-    top: 50%;
+    top: 68%;
     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);
     backdrop-filter: blur(3px);
     z-index: 2;
   }
+
+  .legend {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 12px;
+    z-index: 2;
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #fff;
+      font-size: 14px;
+
+      .legend-text {
+        opacity: 0.8;
       }
-@keyframes rotate {
-  from {
-    transform: rotateX(0deg) rotateZ(0);
-  }
-  50% {
-    transform: rotateX(-30deg) rotateZ(30deg);
     }
-  to {
-    transform: rotateX(0deg) rotateZ(0deg);
   }
 }
+
+
 </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>
@@ -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/compenonts/tabber.vue

@@ -17,6 +17,7 @@
         v-for="(item, index) in tabberList"
         :key="index"
         @click="curTab = index"
+        style="padding: 12px 16px;"
       >
         {{ item }}
       </section>
@@ -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: 6px 16px;
-		padding: 8px;
 		white-space: nowrap;
 		border: 1px solid rgba(255, 255, 255, 0.15);
 		transition: .2s all;

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;