线路语音左侧接入数据

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

@@ -28,15 +28,32 @@
               </div>
             </div>
             <div class="info">
-              <div
-                v-for="item in lineInfo"
-                :key="item.label"
-              >
+              <div>
+                <div class="label">
+                  线路类型：
+                </div>  <div class="val">
+                  {{ typeMap[busLineData?.type??0] }}
+                </div>
+              </div>
+              <div>
+                <div class="label">
+                  车辆总数：
+                </div>  <div class="val">
+                  {{ busLineData?.totalCar }}辆
+                </div>
+              </div>
+              <div>
                 <div class="label">
-                  {{ item.label }}
+                  运 营 中：
+                </div>  <div class="val">
+                  {{ busLineData?.operateNum }}辆
                 </div>
-                <div class="val">
-                  {{ item.value }}
+              </div>
+              <div>
+                <div class="label">
+                  非 运 营：
+                </div>  <div class="val">
+                  {{ busLineData?.nonOperateNum }}辆
                 </div>
               </div>
             </div>
@@ -64,10 +81,10 @@
                   上行
                 </div>
                 <div class="name">
-                  始发点名称 → 终点站名称
+                  {{ busLineData?.upStartStation }} → {{ busLineData?.upEndStation }}
                 </div>
                 <div class="value">
-                  06:00~22:00
+                  {{ busLineData?.upStartTime }}~{{ busLineData?.upEndTime }}
                 </div>
               </div>
               <div class="row">
@@ -75,10 +92,10 @@
                   下行
                 </div>
                 <div class="name">
-                  始发点名称 → 终点站名称
+                  {{ busLineData?.downStartStation }} → {{ busLineData?.downEndStation }}
                 </div>
                 <div class="value">
-                  06:00~22:00
+                  {{ busLineData?.downStartTime }}~{{ busLineData?.downEndTime }}
                 </div>
               </div>
             </div>
@@ -91,7 +108,7 @@
                   线路上行里程
                 </div>
                 <div class="value">
-                  20km
+                  {{ busLineData?.upMileage }}km
                 </div>
               </div>
               <div class="row">
@@ -102,7 +119,7 @@
                   线路下行里程
                 </div>
                 <div class="value">
-                  20km
+                  {{ busLineData?.downMileage }}km
                 </div>
               </div>
               <div class="row">
@@ -114,7 +131,7 @@
                   票价
                 </div>
                 <div class="value">
-                  2元
+                  {{ busLineData?.fare }}元
                 </div>
               </div>
             </div>
@@ -134,7 +151,7 @@
                     class="bold"
                     style="font-size: 40px"
                   >
-                    10
+                    {{ driverTotal }}
                   </div>
                   <div class="">
                     人
@@ -171,7 +188,7 @@
                     class="bold"
                     style="font-size: 40px"
                   >
-                    10
+                    {{ carTotal }}
                   </div>
                   辆
                 </div>
@@ -209,8 +226,8 @@
             </div>
             <div class="content">
               <div
-                v-for="item in status"
-                :key="item"
+                v-for="item in upData"
+                :key="item.id"
                 class="bus"
               >
                 <img
@@ -218,10 +235,10 @@
                   alt="bus"
                 >
                 <div
-                  :class="item"
+                  :class="item.type"
                   class="status"
                 >
-                  执行中
+                  {{ item.type }}
                 </div>
                 <div class="info">
                   <div>
@@ -229,11 +246,11 @@
                       1路
                     </div>
                     <div class="busNum">
-                      川T 12345
+                      {{ item.licensePlate }}
                     </div>
                   </div>
-                  <div>司机：小A </div>
-                  <div>电量： </div>
+                  <div>司机：{{ item.driver }} </div>
+                  <div>电量：{{ item.electricity }} </div>
                 </div>
                 <div class="table">
                   <div>
@@ -241,7 +258,7 @@
                       调度时间
                     </div>
                     <div class="value">
-                      06:30:00
+                      {{ item.dispatchTime }}
                     </div>
                   </div>
                   <div>
@@ -249,7 +266,7 @@
                       实际发车时间
                     </div>
                     <div class="value">
-                      06:30:00
+                      {{ item.realityTime }}
                     </div>
                   </div>
                   <div>
@@ -257,14 +274,18 @@
                       发车间隔
                     </div>
                     <div class="value">
-                      1 分钟
+                      {{ item.intervalTime }}分钟
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="page">
-              <n-pagination :item-count="30">
+              <n-pagination
+                v-model:page="upOption.page"
+                :page-size="upOption.pageSize"
+                :item-count="upBusLineOperate.length"
+              >
                 <template #prefix="{ itemCount }">
                   总共 {{ itemCount }} 个项目
                 </template>
@@ -277,8 +298,8 @@
             </div>
             <div class="content">
               <div
-                v-for="item in 3"
-                :key="item"
+                v-for="item in downData"
+                :key="item.id"
                 class="bus"
               >
                 <img
@@ -289,7 +310,7 @@
                   :class="item"
                   class="status"
                 >
-                  执行中
+                  {{ item.type }}
                 </div>
                 <div class="info">
                   <div>
@@ -297,11 +318,11 @@
                       1路
                     </div>
                     <div class="busNum">
-                      川T 12345
+                      {{ item.licensePlate }}
                     </div>
                   </div>
-                  <div>司机：小A </div>
-                  <div>电量： </div>
+                  <div>司机：{{ item.driver }} </div>
+                  <div>电量：{{ item.electricity }} </div>
                 </div>
                 <div class="table">
                   <div>
@@ -309,7 +330,7 @@
                       调度时间
                     </div>
                     <div class="value">
-                      06:30:00
+                      {{ item.dispatchTime }}
                     </div>
                   </div>
                   <div>
@@ -317,7 +338,7 @@
                       实际发车时间
                     </div>
                     <div class="value">
-                      06:30:00
+                      {{ item.realityTime }}
                     </div>
                   </div>
                   <div>
@@ -325,14 +346,14 @@
                       发车间隔
                     </div>
                     <div class="value">
-                      1 分钟
+                      {{ item.intervalTime }}分钟
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="page">
-              <n-pagination :item-count="30">
+              <n-pagination :item-count="downBusLineOperate.length">
                 <template #prefix="{ itemCount }">
                   总共 {{ itemCount }} 个项目
                 </template>
@@ -469,16 +490,19 @@
 import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import Echart from '@/components/chart.vue'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { graphic } from 'echarts'
+import CehicleOperationService from '../services/cehicleOperation.service'
+
+const cehicleOperationService = new CehicleOperationService()
+const typeMap :any = {
+  0: '干线公交',
+  1: '主线公交'
+}
+
 /* 线路类型：干线公交 车辆总数： 运 营 中：9 辆 非 运 营：1 辆 */
-const lineInfo = ref([
-  { label: '线路类型：', value: '干线公交' },
-  { label: '车辆总数：', value: '10 辆' },
-  { label: '运 营 中：', value: '9 辆' },
-  { label: '非 运 营：', value: '1 辆' }
-])
-const starlist = ref([
+
+const starlist:any = ref([
   { label: '五星', value: '1' },
   { label: '四星', value: '2' },
   { label: '三星', value: '3' },
@@ -486,18 +510,31 @@ const starlist = ref([
   { label: '一星', value: '5' }
 ])
 const odds = ref([
-  { label: '全部', value: '10' },
-  { label: '已完成', value: '4' },
-  { label: '执行中', value: '1' },
-  { label: '已处理', value: '1' },
-  { label: '已下发', value: '1' },
-  { label: '待发', value: '1' },
-  { label: '调停', value: '1' },
-  { label: '非运营', value: '1' }
+  { label: '全部', value: '' },
+  { label: '已完成', value: '1' },
+  { label: '执行中', value: '2' },
+  { label: '已处理', value: '3' },
+  { label: '已下发', value: '4' },
+  { label: '待发', value: '5' },
+  { label: '调停', value: '6' },
+  { label: '非运营', value: '7' }
 ])
-
+// 1已完成2执行中3已处理4已下发5待发6调停7非运营
 const status = [ 'success', 'warning', 'error' ]
 
+const upBusLineOperate = ref([] as any[])
+
+const upOption = ref({
+  pageSize: 3,
+  page: 1
+})
+const upData = computed(() => upBusLineOperate.value.slice((upOption.value.page - 1) * upOption.value.pageSize, upOption.value.page * upOption.value.pageSize))
+const downBusLineOperate = ref([] as any[])
+const downOption = ref({
+  pageSize: 3,
+  page: 1
+})
+const downData = computed(() => downBusLineOperate.value.slice((downOption.value.page - 1) * downOption.value.pageSize, downOption.value.page * downOption.value.pageSize))
 const controlList = [
   {
     label: '状态：',
@@ -576,11 +613,11 @@ const leftContent = ref({
           color: 'white'
         },
         data: [
-          { key: 2, name: '2023', value: 130 },
-          { key: 2, name: '2022', value: 50 },
-          { key: 2, name: '2021', value: 50 },
-          { key: 2, name: '2020', value: 50 },
-          { key: 2, name: '2019', value: 50 }
+          { name: '2023', value: 0 },
+          { name: '2022', value: 0 },
+          { name: '2021', value: 0 },
+          { name: '2020', value: 0 },
+          { name: '2019', value: 0 }
         ]
       }
     ]
@@ -902,6 +939,76 @@ const rightContent = ref({
 
   }
 })
+const lineID = '2168405945795840107'
+
+const busLineData = ref({
+  type: '0', // 线路类型
+  totalCar: 0, // 车辆总数
+  operateNum: 0, // 运营数量
+  nonOperateNum: 0, // 非运营数量
+  upStartStation: '', // 上行起点站
+  downStartStation: '', // 下行起点站
+  upEndStation: '', // 上行终点站
+  downEndStation: '', // 下行结束时间
+  upStartTime: '00:00', // 上行开始时间
+  upEndTime: '00:00', // 上行结束时间
+  downStartTime: '00:00', // 下行开始始时间
+  downEndTime: '00:00', // 下行结束时间
+  upMileage: 0, // 上行里程
+  downMileage: 0, // 下行里程
+  fare: 0 // 票价
+})
+const driverTotal = ref(0)
+const carTotal = ref(0)
+async function getBusLineDetail() {
+  busLineData.value = await cehicleOperationService.getBusLineDetail(lineID)
+}
+getBusLineDetail()
+async function getBusLineDriver() {
+  const driverArr = await cehicleOperationService.getBusLineDriver(lineID)
+  let total = 0
+  driverArr.forEach((item: { total: string | number; starType: number }) => {
+    total += +item.total
+    starlist.value.at(-item.starType).value = +item.total
+  })
+  driverTotal.value = total
+}
+getBusLineDriver()
+async function getBusLineCar() {
+  const carArr = await cehicleOperationService.getBusLineCar(lineID)
+  let total = 0
+  carArr.forEach((item: { total: string | number; starType: number }) => {
+    total += +item.total
+  })
+  leftContent.value.leftOp.series[0].data = carArr.map((item:any) => ({
+    name: item.year, value: item.total
+  }))
+  carTotal.value = total
+}
+getBusLineCar()
+
+async function getBusLineOperate() {
+  const carArr = await cehicleOperationService.getBusLineOperate(lineID)
+  upBusLineOperate.value = carArr.filter((item: { direction: number }) => item.direction === 1)
+  downBusLineOperate.value = carArr.filter((item: { direction: number }) => item.direction === 2)
+  console.log(carArr, 'carArr')
+}
+getBusLineOperate()
+
+const nameMap:any = {
+  1: '老年卡',
+  2: '学生卡',
+  3: '电子钱包',
+  4: '现金',
+  5: '其他'
+}
+async function getPassengerPercent() {
+  const res = await cehicleOperationService.getPassengerPercent()
+  rightContent.value.top[0].option.series[0].data = res.map((item:any) => ({
+    name: nameMap[item.passengerType], value: item.percent
+  }))
+}
+getPassengerPercent()
 </script>
 
 <style lang="scss" scoped>
@@ -1104,14 +1211,13 @@ const rightContent = ref({
 
       .content {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-start;
         gap: 10px;
         padding: 10px 13px;
-
+        min-height: 421px;
         .bus {
           width: 236px;
           height: 401px;
-          flex: 1;
           border: 1px solid #1891FF;
           background: rgba(27, 175, 255, 0.098);
           overflow: hidden;

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

@@ -1323,9 +1323,7 @@ onMounted(() => {
 
             &>span {
               &:first-child {
-                width: fit-content;
-                max-width: 192px;
-                min-width: 140px;
+                width: 175px;
                 height: 48px;
                 border-radius: 5px;
                 background: rgba(33, 133, 232, 0.298);

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

@@ -0,0 +1,79 @@
+import NetService from '@/services/net.service'
+import { injectable, Service } from '@/services/service'
+
+@injectable
+export default class CehicleOperationService extends Service {
+  private netService = new NetService()
+
+  /** 线路基本情况  /lineOperate/getBusLineDetail?lineId=   */
+  async getBusLineDetail(lineId: string) {
+    const { success, data } = await this.netService.get(`/lineOperate/getBusLineDetail?lineId=${lineId}`)
+    if (success) {
+      return data || {}
+    }
+    return {}
+  }
+
+  /** 驾驶员数量 /lineOperate/getBusLineDriver?lineId= */
+  async getBusLineDriver(lineId: string) {
+    const { success, data } = await this.netService.get(`/lineOperate/getBusLineDriver?lineId=${lineId}`)
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 车辆数占比  /lineOperate/getBusLineCar */
+  async getBusLineCar(lineId: string) {
+    const { success, data } = await this.netService.get(`/lineOperate/getBusLineCar?lineId=${lineId}`)
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 线路发班情况   /lineOperate/getBusLineOperate */
+  async getBusLineOperate(lineId:string) {
+    const { success, data } = await this.netService.get(`/lineOperate/getBusLineOperate?lineId=${lineId}`)
+    if (success) {
+      return data?.list || []
+    }
+    return []
+  }
+
+  /** 乘客类型  /lineOperate/getPassengerPercent */
+  async getPassengerPercent() {
+    const { success, data } = await this.netService.get('/lineOperate/getPassengerPercent')
+    if (success) {
+      return data || []
+    }
+    return []
+  }
+
+  /** 班次完成率  /lineOperate/getClassesCompletionRate */
+  async getClassesCompletionRate() {
+    const { success, data } = await this.netService.get('/lineOperate/getClassesCompletionRate')
+    if (success) {
+      return data
+    }
+    return []
+  }
+
+  /** 发车准点率  /lineOperate/getDepartPunctualityRateList */
+  async getDepartPunctualityRateList() {
+    const { success, data } = await this.netService.get('/lineOperate/getDepartPunctualityRateList')
+    if (success) {
+      return data
+    }
+    return []
+  }
+
+  /** 车辆状态  /lineOperate/getVehicleStatusService */
+  async getVehicleStatusService() {
+    const { success, data } = await this.netService.get('/lineOperate/getVehicleStatusService')
+    if (success) {
+      return data
+    }
+    return []
+  }
+}

src/services/net.service.ts

@@ -113,7 +113,7 @@ export default class NetService extends Service {
         return res.json()
       }).then((res) => {
         const obj = { data: res.data, success: res.data instanceof Object }
-        if (!obj.success && obj.data.includes('need authrize')) {
+        if (!obj.success && obj.data?.includes('need authrize')) {
           throw 401
         }
         resolve(obj)