线路分析底部+ 样式

src/assets/global-style.scss

@@ -42,4 +42,14 @@
       }
     }
   }
+}
+.n-date-picker{
+  .n-input{
+    background: none !important;
+    border: solid 1px #2185E8;
+   
+    .n-input__input-el{
+      color: #fff;
+    }
+  }
 }

src/assets/img/1-6.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -91 -13 )">
+    <path d="M 91 13  L 131 13  L 131 53  L 91 53  L 91 13  " fill-rule="nonzero" fill="#cccccc" stroke="none" />
+    <path d="M 94 16  L 128 16  L 128 50  L 94 50  L 94 16  " fill-rule="nonzero" fill="#ffffff" stroke="none" />
+    <path d="M 114.8 25  C 113.12 25  111.8 23.68  111.8 22  C 111.8 20.32  113.12 19  114.8 19  C 116.48 19  117.8 20.32  117.8 22  C 117.8 23.68  116.48 25  114.8 25  " fill-rule="nonzero" fill="#cccccc" stroke="none" />
+    <path d="M 95 49  L 95 31.4  L 103 23.4  L 114.2 29.8  L 120.6 28.2  L 127 29.8  L 127 49  L 95 49  " fill-rule="nonzero" fill="#169bd5" stroke="none" />
+  </g>
+</svg>

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

@@ -26,13 +26,17 @@
               />
               <n-date-picker
                 v-model:value="lineAdjustData.range"
+                :bordered="false"
                 type="daterange"
                 style="width: 260px;"
               />
             </div>
             <div class="content-top">
               <div class="title">
-                <div class="icon" />
+                <icon
+                  :name="'1-6'"
+                  :size="30"
+                />
                 <div>线路调整总览</div>
               </div>
               <div class="overview">
@@ -41,7 +45,10 @@
                   :key="key"
                   class="item"
                 >
-                  <div class="icon" />
+                  <icon
+                    :name="'1-6'"
+                    :size="40"
+                  />
                   <div class="name">
                     {{ lineAdjustData.map[key] }}
                   </div>
@@ -54,7 +61,10 @@
             </div>
             <div class="content-bottom">
               <div class="title">
-                <div class="icon" />
+                <icon
+                  :name="'1-6'"
+                  :size="30"
+                />
                 <div>线路调整详情</div>
               </div>
               <n-table
@@ -120,6 +130,7 @@
             />
             <n-date-picker
               v-model:value="rankRange"
+              :bordered="false"
               type="daterange"
               style="width: 260px;"
             />
@@ -138,6 +149,7 @@
             />
             <n-date-picker
               v-model:value="stationRankRange"
+              :bordered="false"
               type="daterange"
               style="width: 260px;"
             />
@@ -389,7 +401,7 @@ const rightContent = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '65%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -452,7 +464,7 @@ const rightContent = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '65%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -801,7 +813,7 @@ watch(() => lineAdjustData.value.range, () => {
     endTime: format(lineAdjustData.value.range[1], 'yyyy-MM-dd')
   }
   getAnalysisLineAdjust(params)
-})
+}, { immediate: true })
 
 async function getAnalysisLineLength() {
   const res = await lineAnalysisService.getAnalysisLineLength()
@@ -995,15 +1007,10 @@ function groupBy(array: any[], id: string) {
           position: absolute;
           top: 30px;
           right: 125px;
-          z-index: 9999;
           .selectDate{
             top: 0px;
             left: -300px;
           }
-          .n-date-picker{
-            position: absolute;
-
-          }
         }
     }
 

src/pages/views/home/index.vue

@@ -15,6 +15,7 @@ import MaintenanceDynamicsService from './services/maintenanceDynamics.Service'
 import PassengerFlowService from './services/passengerFlow.service'
 import FacilityManagementService from './services/facilityManagement.service'
 import StationManagementService from './services/stationManagement.service'
+import LineAnalysisService from './services/lineAnalysis.service'
 
 const homeService = new HomeService()
 const cehicleOperationService = new CehicleOperationService()
@@ -22,6 +23,7 @@ const passengerFlowService = new PassengerFlowService()
 const maintenanceDynamicsService = new MaintenanceDynamicsService()
 const facilityManagementService = new FacilityManagementService()
 const stationManagementService = new StationManagementService()
+const lineAnalysisService = new LineAnalysisService()
 
 const store = useStore()
 const menus = [
@@ -432,6 +434,17 @@ async function getStationStatistics() {
   menus[5].count[7].value = res.maintenanceNum
 }
 getStationStatistics()
+async function getAnalysisLineStatistics() {
+  const res = await lineAnalysisService.getAnalysisLineStatistics()
+
+  menus[6].count[0].value = res.lineNum
+  menus[6].count[1].value = res.stationNum
+  menus[6].count[2].value = res.lineLength
+  menus[6].count[3].value = res.lineDensity
+  menus[6].count[4].value = res.lineRepetition
+  menus[6].count[5].value = res.lineCoverageRate
+}
+getAnalysisLineStatistics()
 </script>
 <template>
   <div class="home">