线路运营右侧接入数据

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

@@ -238,7 +238,7 @@
                   :class="item.type"
                   class="status"
                 >
-                  {{ item.type }}
+                  {{ findlabel(odds,item.type) }}
                 </div>
                 <div class="info">
                   <div>
@@ -310,7 +310,7 @@
                   :class="item"
                   class="status"
                 >
-                  {{ item.type }}
+                  {{ findlabel(odds,item.type) }}
                 </div>
                 <div class="info">
                   <div>
@@ -384,19 +384,38 @@
           >
             <div class="carmonitor">
               <div class="control">
-                <div
-                  v-for="item in controlList"
-                  :key="item.label"
-                  class="item"
-                >
+                <div class="item">
                   <div class="label">
-                    {{ item.label }}
+                    状态：
                   </div>
                   <n-select
+                    v-model:value="statusVal"
+                    :on-update:value="statusChange"
                     :bordered="false"
                     size="large"
-                    :value="1"
-                    :options="item.options"
+                    :options=" [
+                      { label: '全部', value: 1 },
+                      { label: '运营中', value: 2 },
+                      { label: '非运营', value: 3 }
+                    ]"
+                  />
+                </div>
+                <div class="item">
+                  <div class="label">
+                    情景：
+                  </div>
+                  <n-select
+                    v-model:value="sceneVal"
+                    :bordered="false"
+                    size="large"
+                    :on-update:value="sceneChange"
+                    :options=" [
+                      { label: '全部', value: 1 },
+                      { label: '维保', value: 2 },
+                      { label: '充电', value: 3 },
+                      { label: '停驶', value: 4 },
+                      { label: '行驶中', value: 5 }
+                    ]"
                   />
                 </div>
               </div>
@@ -419,17 +438,17 @@
                 </thead>
                 <tbody>
                   <tr
-                    v-for="item in 10"
+                    v-for="item,index in vehicleMonitorData"
                     :key="item"
-                    :class="{ no: item === 1 }"
+                    :class="{ no: index === 0 }"
                   >
                     <td>
-                      <div class="index" /> 运营中
+                      <div class="index" /> {{ findlabel(vehicleStatus,item.carStatus) }}
                     </td>
-                    <td> 川T 12345 </td>
-                    <td> 小A </td>
-                    <td> 舒适 </td>
-                    <td>{{ item === 1 ? '维保' : '行驶中' }} </td>
+                    <td> {{ item?.licensePlate }} </td>
+                    <td> {{ item?.driver }}</td>
+                    <td> {{ item.congestion }}  </td>
+                    <td>{{ findlabel(passengerOption,item.carScene) }} </td>
                   </tr>
                 </tbody>
               </n-table>
@@ -441,40 +460,28 @@
             :name="'车辆状态'"
           >
             <div class="carstatus">
-              <div class="up">
+              <div
+                v-for="item,index in vehicleStatusData"
+                :key="index+1000"
+                :class="item.direction===1 ? 'up' :'down'"
+              >
                 <div class="title">
-                  上行
+                  {{ item.direction===1?'上行' :'下行' }}
                 </div>
                 <div class="content">
-                  <div
-                    v-for="item in carstatusList"
-                    :key="item.label"
-                  >
-                    <div class="label">
-                      {{ item.label }}
+                  <template v-for="value,key in item">
+                    <div
+                      v-if="!['id','direction'].includes(key+'')"
+                      :key="key"
+                    >
+                      <div class="label">
+                        {{ carstatusMap[key] }}
+                      </div>
+                      <div class="value">
+                        {{ value }}
+                      </div>
                     </div>
-                    <div class="value">
-                      {{ item.value }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="down">
-                <div class="title">
-                  下行
-                </div>
-                <div class="content">
-                  <div
-                    v-for="item in carstatusList"
-                    :key="item.label"
-                  >
-                    <div class="label">
-                      {{ item.label }}
-                    </div>
-                    <div class="value">
-                      {{ item.value }}
-                    </div>
-                  </div>
+                  </template>
                 </div>
               </div>
               <div class="line" />
@@ -511,14 +518,17 @@ const starlist:any = ref([
 ])
 const odds = ref([
   { label: '全部', value: '' },
-  { label: '已完成', value: '1' },
-  { label: '执行中', value: '2' },
-  { label: '已处理', value: '3' },
-  { label: '已下发', value: '4' },
-  { label: '待发', value: '5' },
-  { label: '调停', value: '6' },
-  { label: '非运营', value: '7' }
+  { label: '已完成', value: 1 },
+  { label: '执行中', value: 2 },
+  { label: '已处理', value: 3 },
+  { label: '已下发', value: 4 },
+  { label: '待发', value: 5 },
+  { label: '调停', value: 6 },
+  { label: '非运营', value: 7 }
 ])
+function findlabel(arr: any[], val: any) {
+  return arr.find((item: { value: any }) => item.value === val)?.label
+}
 // 1已完成2执行中3已处理4已下发5待发6调停7非运营
 const status = [ 'success', 'warning', 'error' ]
 
@@ -535,47 +545,18 @@ const downOption = ref({
   page: 1
 })
 const downData = computed(() => downBusLineOperate.value.slice((downOption.value.page - 1) * downOption.value.pageSize, downOption.value.page * downOption.value.pageSize))
-const controlList = [
-  {
-    label: '状态：',
-    options: [
-      { label: '全部', value: 1 },
-      { label: '运营中', value: 2 },
-      { label: '非运营', value: 3 }
-    ]
-  },
-  {
-    label: '电量：',
-    options: [
-      { label: '0%-30%', value: 1 },
-      { label: '31%-60%', value: 2 },
-      { label: '61%-100%', value: 3 }
-    ]
-  },
-  {
-    label: '情景：',
-    options: [
-      { label: '全部', value: 1 },
-      { label: '维保', value: 2 },
-      { label: '充电', value: 3 },
-      { label: '停驶', value: 4 },
-      { label: '行驶中', value: 5 }
-    ]
-  }
-
-]
 
-const carstatusList = [
-  { label: '平均速度', value: '15.16' },
-  { label: '最大车速', value: '17.82' },
-  { label: '最小车速', value: '10.93' },
-  { label: '平均间距', value: '14.03' },
-  { label: '最大间距', value: '15' },
-  { label: '最小间距', value: '12' },
-  { label: '高峰平均时间', value: '69分钟' },
-  { label: '平峰平均时间', value: '72分钟' },
-  { label: '单程平均时间', value: '71分钟' }
-]
+const carstatusMap:any = {
+  avgSpacing: '平均间距',
+  minSpacing: '最小间距',
+  averageTime: '平峰平均时间',
+  singleAvgTime: '单程平均时间',
+  maxSpacing: '最大间距',
+  peakAvgTime: '高峰平均时间',
+  maxSpeed: '最大车速',
+  minSpeed: '最小车速',
+  avgSpeed: '平均车速'
+}
 
 const leftContent = ref({
   leftOp: {
@@ -1007,8 +988,51 @@ async function getPassengerPercent() {
   rightContent.value.top[0].option.series[0].data = res.map((item:any) => ({
     name: nameMap[item.passengerType], value: item.percent
   }))
+  rightContent.value.top[0].option.title!.subtext = res.reduce((prev: any, item: { percent: number }) => {
+    prev += item.percent
+    return prev
+  }, 0)
 }
 getPassengerPercent()
+
+const passengerOption = [
+  { value: 1, label: '行驶中' },
+  { value: 2, label: '维保' },
+  { value: 3, label: '固定包车' },
+  { value: 4, label: '临时包车' },
+  { value: 5, label: '充电' },
+  { value: 6, label: '公务' }
+]
+// 状态下拉框
+const vehicleStatus = [
+  { value: 1, label: '运营' },
+  { value: 2, label: '非运营' }
+]
+const statusVal = ref(1)
+const sceneVal = ref(1)
+const vehicleMonitorData = ref([] as any[])
+function sceneChange(val: number) {
+  sceneVal.value = val
+  // getVehicleMonitorService()
+}
+function statusChange(val: number) {
+  statusVal.value = val
+  // getVehicleMonitorService()
+}
+
+async function getVehicleMonitorService() {
+  vehicleMonitorData.value = await cehicleOperationService.getVehicleMonitorService()
+}
+getVehicleMonitorService()
+
+const vehicleStatusData = ref([] as any[])
+async function getVehicleStatusService() {
+  const res = await cehicleOperationService.getVehicleStatusService()
+  vehicleStatusData.value = res
+  console.log(res, 'res')
+}
+getVehicleStatusService()
+
 </script>
 
 <style lang="scss" scoped>
@@ -1348,7 +1372,7 @@ getPassengerPercent()
       }
         .item {
           display: flex;
-          flex: 1;
+          width: 33%;
           align-items: center;
           gap: 20px;
 

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

@@ -50,18 +50,9 @@ export default class CehicleOperationService extends Service {
     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')
+  /** 车辆监控  /lineOperate/getVehicleMonitorService */
+  async getVehicleMonitorService() {
+    const { success, data } = await this.netService.get('/lineOperate/getVehicleMonitorService')
     if (success) {
       return data
     }