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

src/components/selectDate.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="selectDate">
+    <div
+      v-for="(itm) in btns"
+      :key="itm.val"
+      :class="{ active: itm.val === checkId ,disabled:itm.disabled}"
+      @click="changeFn(itm.val)"
+    >
+      {{ itm.label }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{(evt: 'dateChange', type: number): void
+}>()
+const checkId = ref(1)
+const btns = [
+  { val: 3, label: '总', disabled: true },
+  { val: 2, label: '年', disabled: false },
+  { val: 1, label: '月', disabled: false },
+  { val: 0, label: '日', disabled: true }
+]
+function changeFn(id: number) {
+  checkId.value = id
+  emit('dateChange', checkId.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.selectDate {
+  position: absolute;
+  height: 30px;
+  border-radius: 30px;
+  border: solid 1px #2185E8;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 10px;
+  z-index: 2;
+  display: flex;
+  cursor: not-allowed;
+
+  &>div {
+    width: 90px;
+    color: white;
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+    line-height: 30px;
+
+    &:not(:first-child) {
+      border-left: solid 1px #2185E8;
+    }
+
+    &.disabled{
+      cursor: not-allowed;
+      pointer-events: none;
+      // background: #ccc;
+    }
+  }
+  .active {
+    background: #2185e860;
+  }
+}
+</style>

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

@@ -44,19 +44,10 @@
               :height="455"
               :name="item.name"
             >
-              <div
+              <SelectDate
                 v-if="index === 0"
-                class="dateChange"
-              >
-                <div
-                  v-for="(itm, index) in item.btns"
-                  :key="index"
-                  :class="{ active: index === item.checkId }"
-                  @click="changeFn(index, item)"
-                >
-                  {{ itm }}
-                </div>
-              </div>
+                @date-change="selectDatechange"
+              />
               <Echart :option="item.option" />
             </Box>
           </template>
@@ -206,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>
@@ -225,6 +258,7 @@
                     pause-on-hover
                     vertical
                     clone
+                    style="width: 100%;"
                   >
                     <template
                       v-for="(item, index) in itemd.content[1]"
@@ -233,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>
@@ -271,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 +328,8 @@
 import Layout from '@/components/layout.vue'
 import { onMounted, ref } from 'vue'
 import Box from '@/components/box.vue'
+import SelectDate from '@/components/selectDate.vue'
+
 import { Vue3Marquee } from 'vue3-marquee'
 import { graphic } from 'echarts'
 import Echart from '@/components/chart.vue'
@@ -299,6 +337,12 @@ import HomeService from '../services/homepage.service'
 
 const homeService = new HomeService()
 
+const statusMap:any = {
+  0: '正常',
+  1: '超出',
+  2: '异常'
+}
+
 const datas = [
   {
     value: 99,
@@ -860,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
         }
       ]
     ]
@@ -900,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路'
+            }
           ]
         }
       ]
@@ -929,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
         }
       ]
     ]
@@ -951,7 +1007,6 @@ const rightContent = ref([
 function changeFn(id: number, item: any) {
   item.checkId = id
 }
-const type = 1
 
 async function getBusSummaryInfo() {
   const res = await homeService.getBusSummaryInfo()
@@ -965,7 +1020,7 @@ async function getBusSummaryInfo() {
 }
 getBusSummaryInfo()
 
-async function getBusTrafficVolume() {
+async function getBusTrafficVolume(type: number) {
   const res = await homeService.getBusTrafficVolume(type)
   const xData = res.map((item: any) => item.time)
   const trafficVolumeData = res.map((item: any) => item.trafficVolume)
@@ -1008,9 +1063,55 @@ 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)
+}
 
 onMounted(() => {
-  getBusTrafficVolume()
+  selectDatechange(1)
   getBusStatistics()
 })
 </script>
@@ -1071,35 +1172,6 @@ onMounted(() => {
 
     :deep(.box-content) {
       position: relative;
-
-      .dateChange {
-        position: absolute;
-        height: 30px;
-        border-radius: 30px;
-        border: solid 1px #2185E8;
-        left: 50%;
-        transform: translate(-50%, 0);
-        top: 10px;
-        z-index: 2;
-        display: flex;
-
-        &>div {
-          width: 90px;
-          color: white;
-          font-size: 16px;
-          text-align: center;
-          cursor: pointer;
-          line-height: 30px;
-
-          &:not(:first-child) {
-            border-left: solid 1px #2185E8;
-          }
-        }
-
-        .active {
-          background: #2185e860;
-        }
-      }
     }
 
   }
@@ -1237,7 +1309,7 @@ onMounted(() => {
 
       &-content {
         font-family: Arial Normal;
-
+        width: 100%;
         &>div:first-child {
           display: flex;
           justify-content: space-between;
@@ -1251,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

@@ -16,7 +16,7 @@ export default class HomeService extends Service {
   }
 
   /** 客运量数据 type 1月 2年  /homePage/getBusTrafficVolume */
-  async getBusTrafficVolume(type: 1|2) {
+  async getBusTrafficVolume(type: number) {
     const { success, data } = await this.netService.get(`/homePage/getBusTrafficVolume?type=${type}`)
     if (success) {
       return data
@@ -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 []
+  }
 }