新增统计

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

@@ -1299,5 +1299,4 @@ function changeFn(id: number, item: any) {
     }
   }
 }
-</style>
-<!-- .n-progress .n-progress-graph .n-progress-graph-line .n-progress-graph-line-rail .n-progress-graph-line-fill -->
+</style>

src/pages/views/home/index.vue

@@ -12,13 +12,106 @@ import useStore from '@/pages/store'
 
 const store = useStore()
 const menus = [
-  { name: '主页', component: markRaw(homePage) },
-  { name: '线路运营', component: markRaw(cehicleOperation) },
-  { name: '客流分析', component: markRaw(passengerFlow) },
-  { name: '维保动态', component: markRaw(maintenanceDynamics) },
-  { name: '设施管理', component: markRaw(facilityManagement) },
-  { name: '场站管理', component: markRaw(stationManagement) },
-  { name: '线路分析', component: markRaw(lineAnalysis) }
+  {
+    name: '主页',
+    component: markRaw(homePage),
+    count: [
+      { label: '设备车辆', value: 166, util: '辆' },
+      { label: '线路', value: 60, util: '条' },
+      { label: '场站', value: 100, util: '个' },
+      { label: '中途站 ', value: 50, util: '个' },
+      { label: '班次数量', value: 300, util: '趟' },
+      {
+        label: '总里程', value: 100, util: '万公里', style: { right: '-40px' }
+      },
+      { label: '入场率', value: 100, util: '%' }
+    ]
+  },
+  {
+    name: '线路运营',
+    component: markRaw(cehicleOperation),
+    count: [
+      { label: '今日客流', value: 2000, util: '人' },
+      { label: '计划班次', value: 14, util: '次' },
+      { label: '已发班次', value: 8, util: '次' },
+      { label: '塌班 ', value: 0, util: '次' },
+      {
+        label: '计划里程', value: 1400, util: '公里', style: { right: '-18px' }
+      },
+      {
+        label: '当前里程', value: 100, util: '公里', style: { right: '-18px' }
+      },
+      { label: '空驶率', value: 1, util: '%' }
+    ]
+  },
+  {
+    name: '客流分析',
+    component: markRaw(passengerFlow),
+    count: [
+      {
+        label: '客运量', value: 10, util: '万人次', style: { right: '-40px' }
+      },
+      { label: '满载率', value: 14, util: '%' },
+      {
+        label: '免费换成', value: 8, util: '万人次', style: { right: '-40px' }
+      },
+      { label: '分担率 ', value: 0, util: '%' },
+      { label: '平均乘距', value: 1400, util: 'km' }
+    ]
+  },
+  {
+    name: '维保动态',
+    component: markRaw(maintenanceDynamics),
+    count: [
+      { label: '维保场', value: 10, util: '个' },
+      { label: '运维驿站', value: 14, util: '个' },
+      { label: '已保养', value: 8, util: '辆' },
+      { label: '已维修 ', value: 0, util: '辆' }
+    ]
+  },
+  {
+    name: '设施管理',
+    component: markRaw(facilityManagement),
+    count: [
+      { label: '车辆', value: 2000, util: '辆' },
+      { label: '电子站牌', value: 14, util: '座' },
+      { label: '洗车机', value: 8, util: '座' },
+      { label: '充电桩 ', value: 0, util: '台' },
+      { label: '车载部件', value: 1400, util: '个' }
+    ]
+  },
+  {
+    name: '场站管理',
+    component: markRaw(stationManagement),
+    count: [
+      { label: '场站', value: 2000, util: '个' },
+      {
+        label: '总面积', value: 14, util: '万平方米', style: { right: '-50px' }
+      },
+      { label: '发车线路', value: 8, util: '条' },
+      { label: '入场车辆 ', value: 0, util: '辆' },
+      { label: '静态停车', value: 1400, util: '辆' },
+      { label: '充电桩', value: 8, util: '辆' },
+      { label: '充电 ', value: 0, util: '辆' },
+      { label: '维保', value: 1400, util: '辆' }
+    ]
+  },
+  {
+    name: '线路分析',
+    component: markRaw(lineAnalysis),
+    count: [
+      { label: '线路', value: 2000, util: '条' },
+      { label: '站点', value: 14, util: '个' },
+      {
+        label: '线路长度', value: 8, util: '公里', style: { right: '-18px' }
+      },
+      {
+        label: '线路密度 ', value: 0, util: 'km/km³', style: { right: '-35px' }
+      },
+      { label: '线路重复率', value: 1400, util: '%' },
+      { label: '线路覆盖率', value: 8, util: '%' }
+    ]
+  }
 ]
 const active = ref(0)
 const currentComponent = ref(menus[active.value].component)
@@ -106,6 +199,20 @@ function changMenu(_id: number) {
           </template>
         </div>
       </div>
+      <div class="home-content-bottom-bottom">
+        <template
+          v-for="(item, index) in menus[active].count"
+          :key="index"
+        >
+          <div>
+            <div>{{ item.label }}</div>
+            <div>
+              <span>{{ item.value }}</span>
+              <span :style="item.style">{{ item.util }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
       <component :is="currentComponent" />
     </div>
     <div class="home-bottom">
@@ -301,17 +408,20 @@ function changMenu(_id: number) {
         font-size: 23px;
         animation: flicker 0.5s infinite alternate;
         background: #e73d4048;
+
         &>svg {
           margin-right: 10px;
           margin-left: 10px;
         }
-        &>div:nth-child(2){
+
+        &>div:nth-child(2) {
           max-width: 938px;
           min-width: 100px;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+
         &>div:nth-child(3) {
           margin: 0 60px;
         }
@@ -322,6 +432,50 @@ function changMenu(_id: number) {
       }
     }
 
+    &-bottom-bottom {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      left: 50%;
+      z-index: 3;
+      bottom: 45px;
+      transform: translate(-50%, 0);
+
+      &>div {
+        width: 158px;
+        height: 138px;
+        background: url(../../../assets/img/38.svg) no-repeat;
+        margin: 0 10px;
+        text-align: center;
+        text-shadow: rgba(0, 255, 255, 0.698) 1px 1px 10px;
+        overflow-wrap: break-word;
+        background-size: cover;
+        padding-top: 10px ;
+
+        &>div:first-child {
+          font-size: 20px;
+          color: rgb(128, 255, 255);
+        }
+
+        &>div:last-child {
+          position: relative;
+          &>span{
+            color: rgb(255, 255, 255);
+            font-family: "Impact Normal", Impact, sans-serif;
+          }
+          &>span:first-child {
+            padding-top: 10px;
+            font-size: 40px;
+          }
+          &>span:last-child{
+            font-size: 20px;
+            position: absolute;
+            top: 16px;
+            right: 0;
+          }
+        }
+      }
+    }
   }
 
   &-bottom {