首页测试bug修改

src/pages/views/home/components/HomePage.vue

@@ -144,7 +144,7 @@
                   <div>
                     <n-progress
                       type="circle"
-                      :percentage="item.num"
+                      :percentage="+item.num"
                       :offset-degree="180"
                       :color="item.color"
                       :indicator-text-color="item.color"
@@ -178,7 +178,7 @@
                     <n-progress
                       v-else
                       type="circle"
-                      :percentage="item.num"
+                      :percentage="+item.num"
                       :offset-degree="180"
                       :color="item.color"
                       :indicator-text-color="item.color"
@@ -209,8 +209,8 @@
                 </div>
                 <div class="scrollBox">
                   <Vue3Marquee
-                    pause-on-hover
                     vertical
+                    :duration="5"
                     clone
                     style="width: 100%;"
                   >
@@ -255,8 +255,8 @@
                 </div>
                 <div class="scrollBox">
                   <Vue3Marquee
-                    pause-on-hover
                     vertical
+                    :duration="5"
                     clone
                     style="width: 100%;"
                   >
@@ -311,7 +311,7 @@
                       <span>{{ it.direction===1?'上行':'下行' }}</span>
                       <span>{{ it.planTime }}</span>
                       <span>{{ it.realityTime }}</span>
-                      <span>{{ statusMap[it.status] }}</span>
+                      <span :class="'status'+it.status">{{ statusMap[it.status] }}</span>
                     </div>
                   </div>
                 </div>
@@ -326,7 +326,7 @@
 
 <script setup lang='ts'>
 import Layout from '@/components/layout.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import Box from '@/components/box.vue'
 import SelectDate from '@/components/selectDate.vue'
 
@@ -418,7 +418,9 @@ const leftContent:any = ref({
         grid: {
           containLabel: true,
           top: 100,
-          bottom: 50
+          bottom: 50,
+          left: '5%',
+          right: '5%'
         },
         tooltip: {
           trigger: 'axis',
@@ -453,6 +455,13 @@ const leftContent:any = ref({
         },
         yAxis: [
           {
+            name: '客运量/万',
+            nameLocation: 'center',
+            nameGap: 50,
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
             splitNumber: 2,
             axisLabel: {
               fontSize: 18,
@@ -466,6 +475,13 @@ const leftContent:any = ref({
             }
           },
           {
+            name: '增长率%',
+            nameLocation: 'center',
+            nameGap: 50,
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
             splitNumber: 2,
             position: 'right', // 放在右边
             axisLabel: {
@@ -541,7 +557,8 @@ const leftContent:any = ref({
       name: '消费占比',
       option: {
         title: {
-          text: '跳槽率19.5%', // 图标内容文本
+          text: '消费人次/万人', // 图标内容文本
+          subtext: '10',
           left: 'center', // 图标内容水平居中
           top: 'center', // 图标内容垂直居中
           // 文本样式
@@ -549,11 +566,21 @@ const leftContent:any = ref({
             color: '#fff', // 图标内容文字颜色
             fontSize: '18px', // 图标内容文字大小
             fontWeight: 'normal'
+          },
+          subtextStyle: {
+            color: '#fff', // 图标内容文字颜色
+            fontSize: '24px', // 图标内容文字大小
+            fontWeight: 'normal'
           }
         },
         grid: {
+          icon: '',
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c} ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           type: 'scroll',
@@ -573,7 +600,7 @@ const leftContent:any = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -581,17 +608,17 @@ const leftContent:any = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '0次', value: 30619 },
-              { key: 2, name: '1次', value: 5921 },
-              { key: 2, name: '2次', value: 1153 },
-              { key: 2, name: '3次', value: 266 },
-              { key: 2, name: '大于3次', value: 87 },
-              { key: 2, name: '大于4次', value: 999 },
-              { key: 2, name: '12次', value: 5921 },
-              { key: 2, name: '22次', value: 1153 },
-              { key: 2, name: '32次', value: 266 },
-              { key: 2, name: '大于32次', value: 87 },
-              { key: 2, name: '大于42次', value: 999 }
+              { name: '0次', value: 30619 },
+              { name: '1次', value: 5921 },
+              { name: '2次', value: 1153 },
+              { name: '3次', value: 266 },
+              { name: '大于3次', value: 87 },
+              { name: '大于4次', value: 999 },
+              { name: '12次', value: 5921 },
+              { name: '22次', value: 1153 },
+              { name: '32次', value: 266 },
+              { name: '大于32次', value: 87 },
+              { name: '大于42次', value: 999 }
             ]
           }
         ]
@@ -610,7 +637,7 @@ const leftContent:any = ref({
           top: 20,
           left: 20,
           bottom: 20,
-          right: 20,
+          right: '10%',
           containLabel: true
         },
         xAxis: {
@@ -692,21 +719,25 @@ const leftContent:any = ref({
                 borderType: 'solid',
                 borderWidth: 1,
                 padding: [ 2, 0, 0, 0 ]
+              },
+              c: {
+                width: 100,
+                fontSize: 18
               }
             },
             formatter: (params: string, _id: number) => {
               const id = _id + 1
               if (_id < 3) {
-                return `{a${id}|${id}}  ${params}`
+                return `{a${id}|${id}}  {c|${params}}`
               }
-              return `{b|${id}}  ${params}`
+              return `{b|${id}}  {c|${params}}`
             }
           }
         } ],
         series: [
           {
             z: 2,
-            name: 'value',
+            name: '客流排名',
             type: 'bar',
             barWidth: 25,
             zlevel: 1,
@@ -748,7 +779,7 @@ const leftContent:any = ref({
           top: 20,
           left: 20,
           bottom: 20,
-          right: 20,
+          right: '10%',
           containLabel: true
         },
         xAxis: {
@@ -830,21 +861,25 @@ const leftContent:any = ref({
                 borderType: 'solid',
                 borderWidth: 1,
                 padding: [ 2, 0, 0, 0 ]
+              },
+              c: {
+                width: 35,
+                fontSize: 18
               }
             },
             formatter: (params: string, _id: number) => {
               const id = _id + 1
               if (_id < 3) {
-                return `{a${id}|${id}}  ${params}`
+                return `{a${id}|${id}}  {c|${params}}`
               }
-              return `{b|${id}}  ${params}`
+              return `{b|${id}}  {c|${params}}`
             }
           }
         } ],
         series: [
           {
             z: 2,
-            name: 'value',
+            name: '线路客流排名',
             type: 'bar',
             barWidth: 25,
             zlevel: 1,
@@ -1004,10 +1039,6 @@ const rightContent = ref([
   }
 ] as Any)
 
-function changeFn(id: number, item: any) {
-  item.checkId = id
-}
-
 async function getBusSummaryInfo() {
   const res = await homeService.getBusSummaryInfo()
   leftContent.value.topCount[0][0].num = res.swipeCount
@@ -1035,6 +1066,11 @@ async function getBusStatistics() {
 
   leftContent.value.charts[1].option.series[0].data = consumptionProportion
 
+  leftContent.value.charts[1].option.title.subtext = consumptionProportion.reduce((prev: any, item:any) => {
+    prev += +item.value
+    return prev
+  }, 0).toFixed(2)
+
   leftContent.value.charts[2].option.yAxis[0].data = flowRanking.map((item: any) => item.name)
   leftContent.value.charts[2].option.series[0].data = flowRanking
 
@@ -1104,14 +1140,26 @@ async function getClassesPunctualityRate() {
 }
 getClassesPunctualityRate()
 
+const curentType = ref(1)
 function selectDatechange(type: any) {
+  curentType.value = type
   getBusTrafficVolume(type)
 }
 
 onMounted(() => {
-  selectDatechange(1)
+  selectDatechange(curentType.value)
   getBusStatistics()
 })
+
+const timer = setInterval(() => {
+  selectDatechange(curentType.value)
+  getBusSummaryInfo()
+  getBusStatistics()
+}, 5 * 1000)
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1397,12 +1445,18 @@ onMounted(() => {
       text-align: center;
       font-size: 20px;
       color: #FFFFFF;
-
-      &:nth-child(3)>div:nth-child(2)>div:last-child,
-      &:nth-child(2)>div:nth-child(2)>div:first-child {
+      .status1{
+        color: #FAAD0E;
+      }
+      .status2{
         color: #E73D41;
       }
 
+      // &:nth-child(3)>div:nth-child(2)>div:last-child,
+      // &:nth-child(2)>div:nth-child(2)>div:first-child {
+      //   color: #E73D41;
+      // }
+
       &:nth-child(3)>div:first-child>span:first-child {
         color: #FAAD0E;
       }

src/pages/views/home/services/homepage.service.ts

@@ -30,8 +30,8 @@ export default class HomeService extends Service {
     if (success) {
       return {
         consumptionProportion: JSON.parse(data.consumptionProportion),
-        flowRanking: JSON.parse(data.flowRanking),
-        lineFlowRanking: JSON.parse(data.lineFlowRanking)
+        flowRanking: JSON.parse(data.flowRanking).slice(0, 9),
+        lineFlowRanking: JSON.parse(data.lineFlowRanking).slice(0, 9)
       }
     }
     return {}