首页右侧接入数据

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

@@ -197,16 +197,58 @@
               </div>
 
               <div
-                v-if="indexd === 1 || indexd === 3"
+                v-if="indexd === 1"
                 class="classes-scroll"
               >
                 <div class="classes-scroll-head">
                   <span>线路名称</span>
-                  <span v-if="indexd === 1">
+                  <span>
                     班次
-                    <i>已发数/准点数</i>
+                    <i>计划/实际</i>
                   </span>
-                  <span v-else>
+                </div>
+                <div class="scrollBox">
+                  <Vue3Marquee
+                    pause-on-hover
+                    vertical
+                    clone
+                    style="width: 100%;"
+                  >
+                    <template
+                      v-for="(item, index) in itemd.content[1]"
+                      :key="index"
+                    >
+                      <div class="classes-scroll-content">
+                        <div>
+                          <div>
+                            <span>{{ item.lineName }}<i>({{ item.licensePlate }})</i></span>
+                            <span>始</span>
+                            <span>{{ item.startStation }}</span>
+                            <span>终</span>
+                            <span>{{ item.endStation }}</span>
+                          </div>
+                          <div>{{ item.planClasses }}/{{ item.realityClasses }}</div>
+                        </div>
+                        <div>
+                          <n-progress
+                            type="line"
+                            :percentage="item.realityClasses / item.planClasses * 100"
+                            :show-indicator="false"
+                            processing
+                          />
+                        </div>
+                      </div>
+                    </template>
+                  </Vue3Marquee>
+                </div>
+              </div>
+              <div
+                v-else-if="indexd === 3"
+                class="classes-scroll"
+              >
+                <div class="classes-scroll-head">
+                  <span>线路名称</span>
+                  <span>
                     发车
                     <i>已发数/准点数</i>
                   </span>
@@ -216,6 +258,7 @@
                     pause-on-hover
                     vertical
                     clone
+                    style="width: 100%;"
                   >
                     <template
                       v-for="(item, index) in itemd.content[1]"
@@ -224,20 +267,20 @@
                       <div class="classes-scroll-content">
                         <div>
                           <div>
-                            <span>{{ item.name }}<i>{{ item.num }}</i></span>
+                            <span>{{ item.lineName }}<i>({{ item.licensePlate }})</i></span>
                             <span>始</span>
-                            <span>{{ item.start }}</span>
+                            <span>{{ item.startStation }}</span>
                             <span>终</span>
-                            <span>{{ item.end }}</span>
+                            <span>{{ item.endStation }}</span>
                           </div>
-                          <div>{{ item.plan }}/{{ item.pratic }}</div>
+                          <div>{{ item.total }}/{{ item.onTime }}</div>
                         </div>
                         <div>
                           <n-progress
                             type="line"
-                            :percentage="item.pratic"
+                            :percentage="item.onTime / item.total * 100"
                             :show-indicator="false"
-                            :class="{ resetStyle: indexd === 3 }"
+                            class="resetStyle"
                             processing
                           />
                         </div>
@@ -262,11 +305,13 @@
                     <div
                       v-for="(it, ids) in item.body"
                       :key="ids"
+                      :class="'status'+it.status"
                     >
-                      <span
-                        v-for="(t, d) in it"
-                        :key="d"
-                      >{{ t }}</span>
+                      <span>{{ it.lineName }}({{ it.licensePlate }})</span>
+                      <span>{{ it.direction===1?'上行':'下行' }}</span>
+                      <span>{{ it.planTime }}</span>
+                      <span>{{ it.realityTime }}</span>
+                      <span>{{ statusMap[it.status] }}</span>
                     </div>
                   </div>
                 </div>
@@ -292,6 +337,12 @@ import HomeService from '../services/homepage.service'
 
 const homeService = new HomeService()
 
+const statusMap:any = {
+  0: '正常',
+  1: '超出',
+  2: '异常'
+}
+
 const datas = [
   {
     value: 99,
@@ -853,27 +904,27 @@ const rightContent = ref([
     content: [
       [
         {
-          name: '昨日总班次', num: 100, icon: '26', util: '次'
+          name: '昨日总班次', num: 0, icon: '26', util: '次'
         },
         {
-          name: '昨日完成率', num: 100, icon: '27', util: '%'
+          name: '昨日完成率', num: 0, icon: '27', util: '%'
         }
       ],
       [
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '1路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
         },
         {
-          name: '2路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '2路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
         },
         {
-          name: '3路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '3路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
         },
         {
-          name: '4路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '4路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
         },
         {
-          name: '5路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '5路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
         }
       ]
     ]
@@ -893,17 +944,29 @@ const rightContent = ref([
         {
           head: [ '今日首班', '方向', '计划', '实际', '状态' ],
           body: [
-            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
-            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
-            [ '2路（45567）', '下行', '07:00', '8:00', '1' ]
+            {
+              direction: 1,
+              planTime: 5,
+              realityTime: 5,
+              status: 0,
+              type: 0,
+              licensePlate: 'fsdfdsf',
+              lineName: '12路'
+            }
           ]
         },
         {
           head: [ '昨日末班', '方向', '计划', '实际', '状态' ],
           body: [
-            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
-            [ '2路（45567）', '下行', '07:00', '8:00', '1' ],
-            [ '2路（45567）', '下行', '07:00', '8:00', '1' ]
+            {
+              direction: 1,
+              planTime: 5,
+              realityTime: 5,
+              status: 0,
+              type: 0,
+              licensePlate: 'fsdfdsf',
+              lineName: '12路'
+            }
           ]
         }
       ]
@@ -922,19 +985,19 @@ const rightContent = ref([
       ],
       [
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
         },
         {
-          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
+          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
         }
       ]
     ]
@@ -1000,6 +1063,48 @@ async function getBusWarning() {
   rightContent.value[0].content[1][8].num = warningSummary.battery
 }
 getBusWarning()
+async function getClassesCompletionRate() {
+  const data = await homeService.getClassesCompletionRate()
+  const allPlan = data.reduce((prev: any, item: { planClasses: number }) => {
+    prev += item.planClasses
+    return prev
+  }, 0)
+  const allReal = data.reduce((prev: any, item: { realityClasses: number }) => {
+    prev += item.realityClasses
+    return prev
+  }, 0)
+  rightContent.value[1].content[0][0].num = allPlan
+  rightContent.value[1].content[0][1].num = (allReal / allPlan * 100).toFixed(0)
+  rightContent.value[1].content[1] = data
+}
+getClassesCompletionRate()
+
+async function getDepartPunctualityRateList() {
+  const data = await homeService.getDepartPunctualityRateList()
+  const allTotal = data.reduce((prev: any, item: { total: number }) => {
+    prev += item.total
+    return prev
+  }, 0)
+  const allOnTime = data.reduce((prev: any, item: { onTime: number }) => {
+    prev += item.onTime
+    return prev
+  }, 0)
+  rightContent.value[3].content[0][0].num = allOnTime
+  rightContent.value[3].content[0][1].num = (allOnTime / allTotal * 100).toFixed(0)
+  rightContent.value[3].content[1] = data
+}
+getDepartPunctualityRateList()
+async function getClassesPunctualityRate() {
+  const data = await homeService.getClassesPunctualityRate()
+
+  const todayData = data.filter((item: { type: number }) => item.type === 1)
+  const yesterdayData = data.filter((item: { type: number }) => item.type === 0)
+  rightContent.value[2].content[1][0].body = todayData
+  rightContent.value[2].content[1][1].body = yesterdayData
+
+  console.log(data, 'data')
+}
+getClassesPunctualityRate()
 
 function selectDatechange(type: any) {
   getBusTrafficVolume(type)
@@ -1204,7 +1309,7 @@ onMounted(() => {
 
       &-content {
         font-family: Arial Normal;
-
+        width: 100%;
         &>div:first-child {
           display: flex;
           justify-content: space-between;
@@ -1218,7 +1323,9 @@ onMounted(() => {
 
             &>span {
               &:first-child {
-                width: 153px;
+                width: fit-content;
+                max-width: 192px;
+                min-width: 140px;
                 height: 48px;
                 border-radius: 5px;
                 background: rgba(33, 133, 232, 0.298);

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

@@ -61,4 +61,31 @@ export default class HomeService extends Service {
     }
     return {}
   }
+
+  /** 班次完成率  /homePage/getClassesCompletionRate */
+  async getClassesCompletionRate() {
+    const { success, data } = await this.netService.get('/homePage/getClassesCompletionRate')
+    if (success) {
+      return data
+    }
+    return []
+  }
+
+  /** 发车准点率  /homePage/getDepartPunctualityRateList */
+  async getDepartPunctualityRateList() {
+    const { success, data } = await this.netService.get('/homePage/getDepartPunctualityRateList')
+    if (success) {
+      return data
+    }
+    return []
+  }
+
+  /** 班次准点率  /homePage/getClassesPunctualityRate */
+  async getClassesPunctualityRate() {
+    const { success, data } = await this.netService.get('/homePage/getClassesPunctualityRate')
+    if (success) {
+      return data
+    }
+    return []
+  }
 }