Merge branch 'master' of bls-dan/busRoute into master

src/assets/global-style.scss

@@ -43,7 +43,12 @@
     }
   }
 }
+.n-date-panel{
+  border: solid 1px #2185E8;
+
+}
 .n-date-picker{
+  
   .n-input{
     background: none !important;
     border: solid 1px #2185E8;

src/assets/naive-theme.ts

@@ -40,19 +40,21 @@ const themeOverrides: GlobalThemeOverrides = {
     fontSizeHuge: '16px'
   },
   DatePicker: {
-    panelColor: 'rgba(3,20,26,0.95)',
-    panelTextColor: 'rgba(255,255,255,0.8)',
-    calendarDaysTextColor: 'rgba(255,255,255,0.8)',
-    calendarTitleTextColor: 'rgba(255,255,255,0.8)',
+    panelColor: 'rgba(20,44,83)',
+    panelTextColor: '#fff',
+    calendarDaysTextColor: '#fff',
+    itemTextColor: '#fff',
+    calendarTitleTextColor: '#fff',
     calendarTitleColorHover: '#183742',
-    panelHeaderDividerColor: '#164352',
-    calendarDaysDividerColor: '#164352',
-    panelActionDividerColor: '#164352',
-    itemColorActive: '#1AB99B',
-    itemColorHover: '#146371'
+    panelHeaderDividerColor: '#1891FF',
+    calendarDaysDividerColor: '#1891FF',
+    panelActionDividerColor: '#1891FF',
+    calendarDividerColor: '#1891FF',
+    itemColorActive: '#1891FF',
+    itemColorHover: '#0d4e89'
   },
   TimePicker: {
-    panelColor: 'rgba(3, 20, 26, 0.95)',
+    panelColor: '#1891FF',
     panelDividerColor: 'rgb(239, 239, 245)',
     itemTextColor: 'rgba(255, 255, 255, 0.8)',
     itemTextColorActive: '#1AB99B',

src/components/changeLine.vue

@@ -67,7 +67,7 @@ function changeLine(item: any) {
 }
 async function getLine() {
   const res = await netService.get('/busLine/getList?hasModel=0')
-  if (res.success) {
+  if (res.success && res.data.length > 0) {
     originLineList.value = res.data
     // eslint-disable-next-line prefer-destructuring
     curLine.value = res.data[0]

src/components/selectDate.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(itm) in btns"
       :key="itm.val"
-      :class="{ active: itm.val === checkId ,disabled:itm.disabled}"
+      :class="{ active: itm.val === checkId, disabled: itm.disabled }"
       @click="changeFn(itm.val)"
     >
       {{ itm.label }}
@@ -54,12 +54,21 @@ function changeFn(id: number) {
       border-left: solid 1px #2185E8;
     }
 
-    &.disabled{
+    &.disabled {
       cursor: not-allowed;
       pointer-events: none;
       // background: #ccc;
     }
+
+    &:first-child {
+      border-radius: 30px 0 0 30px;
+    }
+
+    &:last-child {
+      border-radius: 0 30px 30px 0;
+    }
   }
+
   .active {
     background: #2185e860;
   }

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/FacilityManagement.vue

@@ -196,7 +196,7 @@ const facilityStatistics = ref({
       {
         name: '设备数量',
         nameLocation: 'center',
-        nameGap: 40,
+        nameGap: 35,
         nameTextStyle: {
           color: '#fff',
           fontSize: 14
@@ -342,14 +342,15 @@ const carVehicle = ref({
         type: 'value',
         name: '数量/辆',
         nameLocation: 'center',
-        nameGap: 40,
+        nameGap: 60,
         nameTextStyle: {
           color: '#fff',
           fontSize: 14
         },
         location: 'center',
         axisLabel: {
-          color: '#fff'
+          color: '#fff',
+          formatter: '{value} 辆'
         },
         splitLine: {
           show: true,
@@ -473,8 +474,17 @@ const facilityStation = ref({
     xAxis: [
       {
         type: 'value',
+        name: '数量/座',
+        nameLocation: 'center',
+        nameGap: 40,
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 16
+        },
         axisLabel: {
-          color: '#fff'
+          color: '#fff',
+          formatter: '{value} 座',
+          fontSize: 16
         },
         splitLine: {
           show: true,
@@ -560,27 +570,27 @@ const carWasher = ref({
   good: 50,
   allTotal: '000550',
   bar: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
     tooltip: {
-      trigger: 'item'
+      formatter: '{b}: {c}个 , 占比: {d}%'
     },
     legend: {
       orient: 'horizontal',
       bottom: '0',
       icon: 'circle',
       textStyle: {
-        color: '#fff'
+        color: '#fff',
+        fontSize: 16
       }
     },
     series: [
       {
         type: 'pie',
-        radius: '70%',
+        radius: '50%',
         label: {
           show: true,
           color: '#fff',
           formatter: '{b}: {c}个',
-          fontSize: 14
+          fontSize: 16
         },
         data: [
           { value: 1048, name: '0-5年' },
@@ -641,33 +651,32 @@ const chargingStation = ref({
   good: 50,
   allTotal: '000550',
   bar: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
     tooltip: {
-      trigger: 'item'
+      formatter: '{b}: {c}个 , 占比: {d}%'
     },
     legend: {
       orient: 'horizontal',
       bottom: '0',
       icon: 'circle',
       textStyle: {
-        color: '#fff'
+        color: '#fff',
+        fontSize: 16
       }
     },
     series: [
       {
         type: 'pie',
-        radius: '70%',
+        radius: '50%',
         label: {
           show: true,
           color: '#fff',
           formatter: '{b}: {c}个',
-          fontSize: 14
+          fontSize: 16
         },
         data: [
           { value: 1048, name: '0-5年' },
           { value: 735, name: '6-10年' },
           { value: 580, name: '11-15年' }
-
         ]
 
       }
@@ -1159,6 +1168,7 @@ getFacilityVehicleComponents()
     .value {
       text-align: center;
       color: #80FFFF;
+      font-size: 20px;
       margin-top: 32px;
     }
 

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: { trigger: 'axis', 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,11 +532,10 @@ const rightContent:Ref<any> = ref({
       },
       axisLabel: {
         show: true,
+        formatter: '{value} km',
         margin: 10,
-        textStyle: {
-          color: '#fff'
-
-        }
+        color: '#fff',
+        fontSize: 18
       },
       axisTick: {
         show: false
@@ -535,14 +547,9 @@ const rightContent:Ref<any> = ref({
       type: 'line',
       smooth: true,
       symbolSize: 0,
-      itemStyle: {
-        normal: {
-          // color: '#4293FD',
-          lineStyle: {
-            // color: '#4293FD',
-            width: 2
-          }
-        }
+      lineStyle: {
+        // color: '#4293FD',
+        width: 2
       },
       data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
     },
@@ -552,12 +559,9 @@ const rightContent:Ref<any> = ref({
       smooth: true,
       symbolSize: 0,
       itemStyle: {
-        normal: {
+        lineStyle: {
           // color: '#23D0C4',
-          lineStyle: {
-            // color: '#23D0C4',
-            width: 2
-          }
+          width: 2
         }
       },
       data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
@@ -568,12 +572,9 @@ const rightContent:Ref<any> = ref({
       smooth: true,
       symbolSize: 0,
       itemStyle: {
-        normal: {
+        lineStyle: {
           // color: '#23D0C4',
-          lineStyle: {
-            // color: '#23D0C4',
-            width: 2
-          }
+          width: 2
         }
       },
       data: [ 220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410 ]
@@ -585,8 +586,8 @@ const rightContent:Ref<any> = ref({
     grid: {
       containLabel: true,
       top: '35%',
-      right: 30,
-      left: 50,
+      right: '3%',
+      left: '2%',
       bottom: 0
     },
     tooltip: {
@@ -603,7 +604,7 @@ const rightContent:Ref<any> = ref({
       itemGap: 30,
       textStyle: {
         fontSize: 18,
-        color: '#C9D2FA'
+        color: '#fff'
       }
     },
     xAxis: {
@@ -627,7 +628,7 @@ const rightContent:Ref<any> = ref({
         interval: 0,
         show: true,
         fontSize: 18,
-        color: '#C9D2FA'
+        color: '#fff'
       },
       axisLine: {
         show: false,
@@ -646,7 +647,7 @@ const rightContent:Ref<any> = ref({
       {
         name: '人数',
         nameLocation: 'center',
-        nameGap: 50,
+        nameGap: 80,
         nameTextStyle: {
           color: '#fff',
           fontSize: 18
@@ -654,8 +655,9 @@ const rightContent:Ref<any> = ref({
         splitNumber: 2,
         axisLabel: {
           show: true,
+          formatter: '{value} 人',
           fontSize: 18,
-          color: '#C9D2FA'
+          color: '#fff'
         },
         axisLine: {
           show: false
@@ -676,31 +678,27 @@ const rightContent:Ref<any> = ref({
         name: '客流量',
         type: 'bar',
         silent: true,
-        itemStyle: {
-          normal: {
-            color: new graphic.LinearGradient(
-              0,
-              0,
-              0,
-              1,
-              [
-                {
-                  offset: 0,
-                  color: '#FFD35D'// 0% 处的颜色
-                },
-                {
-                  offset: 0.5,
-                  color: '#7ec2f382'// 0% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: '#1890ff21' // 100% 处的颜色
-                }
-              ],
-              false
-            )
-          }
-        },
+        color: new graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: '#FFD35D'// 0% 处的颜色
+            },
+            {
+              offset: 0.5,
+              color: '#7ec2f382'// 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#1890ff21' // 100% 处的颜色
+            }
+          ],
+          false
+        ),
         barWidth: 30,
         data: [ 200, 108, 200, 40, 210, 100, 200, 108, 200, 40, 210, 100 ]
       }
@@ -712,7 +710,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 +728,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 +776,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 +854,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 +891,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 +927,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 +967,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>

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

@@ -300,6 +300,9 @@ const leftContent:Ref<any> = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          formatter: '{b}: {c}辆 ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           type: 'scroll',
@@ -312,7 +315,7 @@ const leftContent:Ref<any> = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 18
           }
         },
         series: [
@@ -322,8 +325,9 @@ const leftContent:Ref<any> = ref({
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
-              formatter: '{b}\n{d}%',
-              color: 'white'
+              formatter: '{b} {d}%',
+              color: 'white',
+              fontSize: 18
             },
             data: [
               { name: '运营中', value: 30619 },
@@ -351,6 +355,9 @@ const leftContent:Ref<any> = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          formatter: '{b}: {c}辆 ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           type: 'scroll',
@@ -363,7 +370,7 @@ const leftContent:Ref<any> = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 18
           }
         },
         series: [
@@ -373,8 +380,9 @@ const leftContent:Ref<any> = ref({
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
-              formatter: '{b}\n{d}%',
-              color: 'white'
+              formatter: '{b} {d}%',
+              color: 'white',
+              fontSize: 18
             },
             data: [
               { name: '隔日留交车辆', value: 30619 },
@@ -446,7 +454,9 @@ const rightContent = ref({
             fontSize: 18
           }
         },
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        tooltip: {
+          formatter: '{b}: {c}个 , {d}%'
+        },
         series: {
           bottom: 50,
           type: 'pie', // 图表类型为饼图
@@ -485,7 +495,9 @@ const rightContent = ref({
             fontSize: 18
           }
         },
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        tooltip: {
+          formatter: '{b}: {c}个 , {d}%'
+        },
         series: {
           bottom: 50,
           type: 'pie', // 图表类型为饼图
@@ -525,7 +537,9 @@ const rightContent = ref({
             fontSize: 18
           }
         },
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        tooltip: {
+          formatter: '{b}: {c}个 , {d}%'
+        },
         series: {
           bottom: 50,
           type: 'pie', // 图表类型为饼图
@@ -566,6 +580,9 @@ const rightContent = ref({
           fontWeight: 'normal'
         }
       },
+      tooltip: {
+        formatter: '{b}: {c}辆 ,占比: {d}%'
+      },
       grid: {
         containLabel: true,
         top: 0,
@@ -594,7 +611,7 @@ const rightContent = ref({
         showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
         label: {
           show: true,
-          formatter: '{b}: {d}俩',
+          formatter: '{b}: {d}辆',
           color: 'white',
           fontSize: 18
         },

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

@@ -172,7 +172,7 @@
                 </div>
                 <n-progress
                   type="line"
-                  :percentage="(chargingStatistics.chargingNum / chargingStatistics.totalChargingNum * 100).toFixed(2)"
+                  :percentage="+(chargingStatistics.chargingNum / chargingStatistics.totalChargingNum * 100).toFixed(2)"
                   :show-indicator="false"
                   :indicator-placement="'inside'"
                   processing
@@ -188,7 +188,7 @@
                 </div>
                 <n-progress
                   type="line"
-                  :percentage="(chargingStatistics.electricityNum / chargingStatistics.totalElectricityNum * 100).toFixed(2)"
+                  :percentage="+(chargingStatistics.electricityNum / chargingStatistics.totalElectricityNum * 100).toFixed(2)"
                   :show-indicator="false"
                   :indicator-placement="'inside'"
                   processing
@@ -235,9 +235,9 @@ import StationManagementService from '../services/stationManagement.service'
 const leftTitle: Ref<any[]> = ref([ {
   name: '类型分布',
   option: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+
     tooltip: {
-      trigger: 'item'
+      formatter: '{b}: {c}个 ,占比: {d}%'
     },
     legend: {
       orient: 'horizontal',
@@ -269,9 +269,9 @@ const leftTitle: Ref<any[]> = ref([ {
 {
   name: '面积分布',
   option: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+
     tooltip: {
-      trigger: 'item'
+      formatter: '{b}: {c}个 ,占比: {d}%'
     },
     legend: {
       orient: 'horizontal',
@@ -303,9 +303,8 @@ const leftTitle: Ref<any[]> = ref([ {
 {
   name: '场站权属情况',
   option: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
     tooltip: {
-      trigger: 'item'
+      formatter: '{b}: {c}个 ,占比: {d}%'
     },
     legend: {
       orient: 'horizontal',
@@ -339,6 +338,7 @@ const leftTitle: Ref<any[]> = ref([ {
   option: {
     tooltip: {
       trigger: 'axis',
+      formatter: '{b} <br/>数量: {c}个',
       axisPointer: {
         type: 'shadow'
       }
@@ -455,12 +455,12 @@ const region = ref({
       }
     },
     series: {
-      name: '数量',
+      name: '客流量',
       type: 'bar',
       barMaxWidth: '40',
       itemStyle: {
         color: 'rgb(86,137,239)',
-        barBorderRadius: [ 0, 20, 20, 0 ]
+        borderRadius: [ 0, 20, 20, 0 ]
       },
       label: {
         show: true,
@@ -473,8 +473,15 @@ const region = ref({
 })
 
 const powerChart = ref({
+  grid: {
+    left: '3%',
+    right: '6%',
+    bottom: '20%',
+    containLabel: true
+  },
   tooltip: {
-    trigger: 'axis'
+    trigger: 'axis',
+    formatter: '今日{b} <br/>充电量: {c}kw·h'
   },
   xAxis: {
     type: 'category',
@@ -495,7 +502,7 @@ const powerChart = ref({
     },
     axisLabel: {
       color: '#fff',
-
+      formatter: '{value} kw·h',
       fontSize: 16
     }
   },
@@ -526,9 +533,11 @@ const powerChart = ref({
   }
 })
 const airportChart = ref({
-  color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+
   tooltip: {
-    trigger: 'item'
+    trigger: 'item',
+    formatter: '{b}: {c}个 ,占比: {d}%'
+
   },
   legend: {
     orient: 'horizontal',

src/services/socket.service.ts

@@ -21,7 +21,7 @@ export default class SocketService extends Service {
    *  连接
    */
   private _connect() {
-    const { token } = this._store
+    const token = this._store.token || `${sessionStorage.getItem('token')}`
     if (!token) return null
     const url = `${import.meta.env.VITE_SOCKET_API}/${token}`
     const socket = new WebSocket(url)