样式修改

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

@@ -245,7 +245,7 @@
                 <div class="info">
                   <div>
                     <div class="bold">
-                      1路
+                      {{ item.lineName }}
                     </div>
                     <div class="busNum">
                       {{ item.licensePlate }}
@@ -317,7 +317,7 @@
                 <div class="info">
                   <div>
                     <div class="bold">
-                      1路
+                      {{ item.lineName }}
                     </div>
                     <div class="busNum">
                       {{ item.licensePlate }}

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

@@ -1482,6 +1482,8 @@ onUnmounted(() => {
 
       &-body {
         color: #81D3F8;
+        height: 150px;
+        overflow-y: scroll;
 
         &>div {
           display: flex;

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

@@ -21,9 +21,7 @@
         >
           <div class="content">
             <div class="control">
-              <SelectDate
-                @date-change="selectDatechange"
-              />
+              <SelectDate @date-change="selectDatechange" />
               <n-date-picker
                 v-model:value="lineAdjustData.range"
                 :bordered="false"
@@ -41,7 +39,7 @@
               </div>
               <div class="overview">
                 <div
-                  v-for="item,key in lineAdjustData.overview"
+                  v-for="item, key in lineAdjustData.overview"
                   :key="key"
                   class="item"
                 >
@@ -100,12 +98,11 @@
         >
           <Echart :option="rightContent.center" />
           <div class="control">
-            <SelectDate
-              @date-change="rankDatechange"
-            />
+            <SelectDate @date-change="rankDatechange" />
             <n-date-picker
               v-model:value="rankRange"
               :bordered="false"
+              :separator="'至'"
               type="daterange"
               style="width: 260px;"
             />
@@ -119,11 +116,10 @@
         >
           <Echart :option="rightContent.bottom" />
           <div class="control">
-            <SelectDate
-              @date-change="stationRankchange"
-            />
+            <SelectDate @date-change="stationRankchange" />
             <n-date-picker
               v-model:value="stationRankRange"
+              :separator="'至'"
               :bordered="false"
               type="daterange"
               style="width: 260px;"
@@ -148,7 +144,7 @@ import { graphic } from 'echarts'
 import LineAnalysisService from '../services/lineAnalysis.service'
 import { format, subDays } from 'date-fns'
 
-const leftContent:Ref<any> = ref({
+const leftContent: Ref<any> = ref({
   tCharts: [
     {
       name: '线路类型',
@@ -156,6 +152,10 @@ const leftContent:Ref<any> = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}条 ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -205,9 +205,9 @@ const leftContent:Ref<any> = ref({
         },
         grid: {
           top: 20,
-          left: 20,
+          left: '5%',
           bottom: 20,
-          right: 20,
+          right: '10%',
           containLabel: true
         },
         xAxis: {
@@ -244,8 +244,8 @@ const leftContent:Ref<any> = ref({
             rich: {
               a1: {
                 backgroundColor: '#FFFF0050',
-                width: 30,
-                height: 28,
+                width: 25,
+                height: 23,
                 align: 'center',
                 borderRadius: 15,
                 fontSize: 18,
@@ -256,8 +256,8 @@ const leftContent:Ref<any> = ref({
               },
               a2: {
                 backgroundColor: '#F2F2F250',
-                width: 30,
-                height: 28,
+                width: 25,
+                height: 23,
                 align: 'center',
                 borderRadius: 15,
                 fontSize: 18,
@@ -268,8 +268,8 @@ const leftContent:Ref<any> = ref({
               },
               a3: {
                 backgroundColor: '#FAAD0E50',
-                width: 30,
-                height: 28,
+                width: 25,
+                height: 23,
                 align: 'center',
                 borderRadius: 15,
                 fontSize: 18,
@@ -280,8 +280,8 @@ const leftContent:Ref<any> = ref({
               },
               b: {
                 backgroundColor: '#00FFFF50',
-                width: 30,
-                height: 28,
+                width: 25,
+                height: 23,
                 align: 'center',
                 borderRadius: 15,
                 fontSize: 18,
@@ -289,21 +289,25 @@ const leftContent:Ref<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,
@@ -332,7 +336,7 @@ const leftContent:Ref<any> = ref({
     }
   ]
 })
-const rightContent:Ref<any> = ref({
+const rightContent: Ref<any> = ref({
   tCharts: [
     {
       name: '线路长度分布',
@@ -357,6 +361,10 @@ const rightContent:Ref<any> = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}条 ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -420,6 +428,10 @@ const rightContent:Ref<any> = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}个 ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -463,11 +475,12 @@ const rightContent:Ref<any> = ref({
   center: {
     grid: {
       containLabel: true,
-      right: 30,
-      left: 50,
+      right: '3%',
+      left: '2%',
       bottom: '25%',
       top: '20%'
     },
+    tooltip: { show: true },
     legend: {
       show: true,
       left: 'center',
@@ -475,7 +488,7 @@ const rightContent:Ref<any> = ref({
       itemWidth: 15,
       itemHeight: 10,
       textStyle: {
-        color: '#646464',
+        color: '#fff',
         fontSize: 18
       }
     },
@@ -500,7 +513,7 @@ const rightContent:Ref<any> = ref({
     yAxis: [ {
       name: 'km/h',
       nameLocation: 'center',
-      nameGap: 50,
+      nameGap: 70,
       nameTextStyle: {
         color: '#fff',
         fontSize: 18
@@ -519,9 +532,11 @@ const rightContent:Ref<any> = ref({
       },
       axisLabel: {
         show: true,
+        formatter: '{value} km',
         margin: 10,
         textStyle: {
-          color: '#fff'
+          color: '#fff',
+          fontSize: 18
 
         }
       },
@@ -585,8 +600,8 @@ const rightContent:Ref<any> = ref({
     grid: {
       containLabel: true,
       top: '35%',
-      right: 30,
-      left: 50,
+      right: '3%',
+      left: '2%',
       bottom: 0
     },
     tooltip: {
@@ -603,7 +618,7 @@ const rightContent:Ref<any> = ref({
       itemGap: 30,
       textStyle: {
         fontSize: 18,
-        color: '#C9D2FA'
+        color: '#fff'
       }
     },
     xAxis: {
@@ -627,7 +642,7 @@ const rightContent:Ref<any> = ref({
         interval: 0,
         show: true,
         fontSize: 18,
-        color: '#C9D2FA'
+        color: '#fff'
       },
       axisLine: {
         show: false,
@@ -646,7 +661,7 @@ const rightContent:Ref<any> = ref({
       {
         name: '人数',
         nameLocation: 'center',
-        nameGap: 50,
+        nameGap: 80,
         nameTextStyle: {
           color: '#fff',
           fontSize: 18
@@ -654,8 +669,9 @@ const rightContent:Ref<any> = ref({
         splitNumber: 2,
         axisLabel: {
           show: true,
+          formatter: '{value} 人',
           fontSize: 18,
-          color: '#C9D2FA'
+          color: '#fff'
         },
         axisLine: {
           show: false
@@ -712,7 +728,7 @@ const lineAnalysisService = new LineAnalysisService()
 
 async function getAnalysisLineType() {
   const res = await lineAnalysisService.getAnalysisLineType()
-  leftContent.value.tCharts[0].option.series[0].data = res.map((item:any) => ({
+  leftContent.value.tCharts[0].option.series[0].data = res.map((item: any) => ({
     name: item.type,
     value: item.number
   }))
@@ -730,8 +746,8 @@ async function getAnalysisRegionFlow() {
     seriesData.push(item.flow)
   }
 
-  leftContent.value.tCharts[1].option.yAxis.data = yData
-  leftContent.value.tCharts[1].option.series[0].data = seriesData
+  leftContent.value.tCharts[1].option.yAxis.data = yData.slice(0, 9)
+  leftContent.value.tCharts[1].option.series[0].data = seriesData.slice(0, 9)
 }
 getAnalysisRegionFlow()
 
@@ -778,9 +794,9 @@ const lineAdjustData = ref({
     1: '新辟',
     2: '撤销',
     3: '调整'
-  }as any
+  } as any
 })
-async function getAnalysisLineAdjust(params:any) {
+async function getAnalysisLineAdjust(params: any) {
   const res = await lineAnalysisService.getAnalysisLineAdjust(params)
   let total1 = 0
   let total2 = 0
@@ -856,7 +872,7 @@ async function getAnalysisLineDistance() {
 getAnalysisLineDistance()
 
 const rankRange = ref([ subDays(Date.now(), 7), Date.now() ])
-async function getAnalysisLineOperate(params:any) {
+async function getAnalysisLineOperate(params: any) {
   const res = await lineAnalysisService.getAnalysisLineOperate(params)
 
   const xAxisData = []
@@ -893,7 +909,7 @@ watch(() => rankRange.value, () => {
 }, { immediate: true })
 
 const stationRankRange = ref([ subDays(Date.now(), 7), Date.now() ])
-async function getAnalysisStationRank(params:any) {
+async function getAnalysisStationRank(params: any) {
   const res = await lineAnalysisService.getAnalysisStationRank(params)
   const groupData = groupBy(res, 'stationName')
   console.log(groupData, 'groupData')
@@ -929,7 +945,7 @@ watch(() => stationRankRange.value, () => {
 }, { immediate: true })
 
 function groupBy(array: any[], id: string) {
-  const groups:any = {}
+  const groups: any = {}
   array.forEach((o) => {
     let group = JSON.stringify(o[id])
     if (typeof o[id] === 'string') {
@@ -969,74 +985,89 @@ function groupBy(array: any[], id: string) {
           background: #000;
         }
       }
+
       .overview {
-          display: flex;
-          padding: 34px;
-          justify-content: space-between;
+        display: flex;
+        padding: 34px;
+        justify-content: space-between;
 
-          .item {
-            width: 375px;
-            height: 65px;
-            background: rgba(27, 175, 255, 0.298);
-            border: 1px solid #00FFFF;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #FFFFFF;
-            font-size: 20px;
-            gap: 10px;
+        .item {
+          width: 375px;
+          height: 65px;
+          background: rgba(27, 175, 255, 0.298);
+          border: 1px solid #00FFFF;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #FFFFFF;
+          font-size: 20px;
+          gap: 10px;
 
-            .icon {
-              width: 30px;
-              height: 30px;
-              background: #000;
-            }
+          .icon {
+            width: 30px;
+            height: 30px;
+            background: #000;
+          }
 
-            .num {
-              color: #00FFFF;
-              font-size: 30px;
-              font-family: Impact Normal;
-            }
+          .num {
+            color: #00FFFF;
+            font-size: 30px;
+            font-family: Impact Normal;
           }
         }
-      .table{
-          margin-top: 30px;
-          text-align: center;
-          font-size: 16px;
-          th{
-            border: 0;
-          }
+      }
+
+      .table {
+        margin-top: 30px;
+        text-align: center;
+        font-size: 16px;
+
+        th {
+          border: 0;
         }
+      }
 
-        .control{
-          position: absolute;
-          top: 30px;
-          right: 125px;
-          .selectDate{
-            top: 0px;
-            left: -300px;
-          }
+      .control {
+        position: absolute;
+        top: 30px;
+        right: 125px;
+
+        .selectDate {
+          top: 0px;
+          left: -300px;
         }
+      }
     }
 
   }
 }
-.right{
+
+.right {
   &-top {
     display: flex;
     justify-content: space-between;
   }
-  &-center,&-bottom {
+
+  &-center,
+  &-bottom {
     position: relative;
-    .control{
-          position: absolute;
-          top: 60px;
-          right: 110px;
-          .selectDate{
-            top: 0px;
-            left: -300px;
-          }
-        }
+
+    .control {
+      position: absolute;
+      top: 60px;
+      right: 110px;
+
+      .selectDate {
+        top: 0px;
+        left: -300px;
+      }
+
+      :deep(.n-input__separator) {
+        padding: 0 5px;
+        color: #fff;
+        border: 1px solid #2185E8;
+      }
+    }
   }
 }
 </style>