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

<template>
  <Layout>
    <template #left>
      <div class="left">
        <Box
          :width="560"
          :height="1224"
          :name="'线路基本情况'"
          class="left-left"
        >
          <div class="linebase">
            <div class="car">
              <div class="top">
                <Icon
                  name="1-1"
                  :size="80"
                  style="margin-right: 20px;"
                />
                <div class="name bold">
                  1
                </div>
                <div class="road">
                  路
                </div>
              </div>
              <div class="current">
                当前线路
              </div>
            </div>
            <div class="info">
              <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">
                  运 营 中：
                </div>  <div class="val">
                  {{ busLineData?.operateNum }}辆
                </div>
              </div>
              <div>
                <div class="label">
                  非 运 营：
                </div>  <div class="val">
                  {{ busLineData?.nonOperateNum }}辆
                </div>
              </div>
            </div>
          </div>
          <div class="header">
            <div>
              <Icon
                name="1-2"
                :size="30"
              />
              起讫点
            </div>
            <div>
              <Icon
                name="1-3"
                :size="30"
              />
              运营时间
            </div>
          </div>
          <div class="detail">
            <div>
              <div class="row">
                <div class="type orange">
                  上行
                </div>
                <div class="name">
                  {{ busLineData?.upStartStation }} → {{ busLineData?.upEndStation }}
                </div>
                <div class="value">
                  {{ busLineData?.upStartTime }}~{{ busLineData?.upEndTime }}
                </div>
              </div>
              <div class="row">
                <div class="type">
                  下行
                </div>
                <div class="name">
                  {{ busLineData?.downStartStation }} → {{ busLineData?.downEndStation }}
                </div>
                <div class="value">
                  {{ busLineData?.downStartTime }}~{{ busLineData?.downEndTime }}
                </div>
              </div>
            </div>
            <div>
              <div class="row">
                <div class="type orange">
                  上
                </div>
                <div class="name">
                  线路上行里程
                </div>
                <div class="value">
                  {{ busLineData?.upMileage }}km
                </div>
              </div>
              <div class="row">
                <div class="type">
                  下
                </div>
                <div class="name">
                  线路下行里程
                </div>
                <div class="value">
                  {{ busLineData?.downMileage }}km
                </div>
              </div>
              <div class="row">
                <Icon
                  name="1-4"
                  :size="38"
                />
                <div class="name">
                  票价
                </div>
                <div class="value">
                  {{ busLineData?.fare }}元
                </div>
              </div>
            </div>
            <div>
              <div class="title">
                <div class="flex">
                  <Icon
                    name="1-5"
                    :size="30"
                  />
                  <div class="name">
                    驾驶员数量
                  </div>
                </div>
                <div class="value">
                  <div
                    class="bold"
                    style="font-size: 40px"
                  >
                    {{ driverTotal }}
                  </div>
                  <div class="">
                    人
                  </div>
                </div>
              </div>
              <div class="starlist">
                <div
                  v-for="item in starlist"
                  :key="item.label"
                  class="star"
                >
                  <div>{{ item.label }}</div>
                  <div class="flex">
                    <span class="num bold">{{ item.value }}</span>人
                  </div>
                </div>
              </div>
            </div>
            <div style="border: 0;">
              <div class="title">
                <div class="flex">
                  <Icon
                    name="1-1"
                    :size="30"
                  />
                  <div class="name">
                    车辆数占比
                  </div>
                </div>
                <div class="value">
                  共
                  <div
                    class="bold"
                    style="font-size: 40px"
                  >
                    {{ carTotal }}
                  </div>
                  辆
                </div>
              </div>
              <Echart
                style="width: 560px;height:318px"
                :option="leftContent.leftOp"
              />
            </div>
          </div>
        </Box>
        <Box
          :width="560"
          :height="1224"
          :name="'线路发班情况'"
          class="left-right"
        >
          <div class="filter">
            <div class="name bold">
              筛选
            </div>
            <div class="odds">
              <div
                v-for="item in odds"
                :key="item.label"
                class="odd"
              >
                {{ item.label }} {{ item.value }}
              </div>
            </div>
          </div>
          <div class="frequency">
            <div class="title bold">
              上行
            </div>
            <div class="content">
              <div
                v-for="item in upData"
                :key="item.id"
                class="bus"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt="bus"
                >
                <div
                  :class="item.type"
                  class="status"
                >
                  {{ findlabel(odds,item.type) }}
                </div>
                <div class="info">
                  <div>
                    <div class="bold">
                      1路
                    </div>
                    <div class="busNum">
                      {{ item.licensePlate }}
                    </div>
                  </div>
                  <div>司机：{{ item.driver }} </div>
                  <div>电量：{{ item.electricity }} </div>
                </div>
                <div class="table">
                  <div>
                    <div class="label">
                      调度时间
                    </div>
                    <div class="value">
                      {{ item.dispatchTime }}
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      实际发车时间
                    </div>
                    <div class="value">
                      {{ item.realityTime }}
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      发车间隔
                    </div>
                    <div class="value">
                      {{ item.intervalTime }}分钟
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="page">
              <n-pagination
                v-model:page="upOption.page"
                :page-size="upOption.pageSize"
                :item-count="upBusLineOperate.length"
              >
                <template #prefix="{ itemCount }">
                  总共 {{ itemCount }} 个项目
                </template>
              </n-pagination>
            </div>
          </div>
          <div class="frequency">
            <div class="title bold">
              下行
            </div>
            <div class="content">
              <div
                v-for="item in downData"
                :key="item.id"
                class="bus"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt="bus"
                >
                <div
                  :class="item"
                  class="status"
                >
                  {{ findlabel(odds,item.type) }}
                </div>
                <div class="info">
                  <div>
                    <div class="bold">
                      1路
                    </div>
                    <div class="busNum">
                      {{ item.licensePlate }}
                    </div>
                  </div>
                  <div>司机：{{ item.driver }} </div>
                  <div>电量：{{ item.electricity }} </div>
                </div>
                <div class="table">
                  <div>
                    <div class="label">
                      调度时间
                    </div>
                    <div class="value">
                      {{ item.dispatchTime }}
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      实际发车时间
                    </div>
                    <div class="value">
                      {{ item.realityTime }}
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      发车间隔
                    </div>
                    <div class="value">
                      {{ item.intervalTime }}分钟
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="page">
              <n-pagination :item-count="downBusLineOperate.length">
                <template #prefix="{ itemCount }">
                  总共 {{ itemCount }} 个项目
                </template>
              </n-pagination>
            </div>
          </div>
        </Box>
      </div>
    </template>
    <template #right>
      <div class="right">
        <div class="right-top">
          <Box
            v-for="(item, index) in rightContent?.top"
            :key="index"
            :width="438"
            :height="570"
            :name="item.name"
          >
            <Echart :option="item.option" />
          </Box>
        </div>
        <div class="right-bottom">
          <Box
            :width="663"
            :height="570"
            :name="'车辆监控'"
          >
            <div class="carmonitor">
              <div class="control">
                <div class="item">
                  <div class="label">
                    状态：
                  </div>
                  <n-select
                    v-model:value="statusVal"
                    :on-update:value="statusChange"
                    :bordered="false"
                    size="large"
                    :options=" [
                      { label: '全部', value: '' },
                      { label: '运营中', value: 1 },
                      { label: '非运营', value: 2 }
                    ]"
                  />
                </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: '' },
                      { label: '行驶中', value: 1 },
                      { label: '维保', value: 2 },
                      { label: '固定包车', value: 3 },
                      { label: '临时包车', value: 4 },
                      { label: '充电', value: 5 },
                      { label: '公务', value: 6 },
                    ]"
                  />
                </div>
              </div>
              <n-table
                striped
                size="large"
                :bordered="false"
                single-column
                :bottom-bordered="false"
                class="table"
              >
                <thead>
                  <tr>
                    <th> 状态 </th>
                    <th> 车牌号 </th>
                    <th> 驾驶员 </th>
                    <th> 拥挤度 </th>
                    <th> 情景 </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="item,index in vehicleMonitorData"
                    :key="item"
                    :class="{ no: index === 0 }"
                  >
                    <td>
                      <div class="index" /> {{ findlabel(vehicleStatus,item.carStatus) }}
                    </td>
                    <td> {{ item?.licensePlate }} </td>
                    <td> {{ item?.driver }}</td>
                    <td> {{ item.congestion }}  </td>
                    <td>{{ findlabel(passengerOption,item.carScene) }} </td>
                  </tr>
                </tbody>
              </n-table>
            </div>
          </Box>
          <Box
            :width="663"
            :height="570"
            :name="'车辆状态'"
          >
            <div class="carstatus">
              <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">
                  <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>
                  </template>
                </div>
              </div>
              <div class="line" />
            </div>
          </Box>
        </div>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import Echart from '@/components/chart.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 starlist:any = ref([
  { label: '五星', value: '1' },
  { label: '四星', value: '2' },
  { label: '三星', value: '3' },
  { label: '二星', value: '4' },
  { label: '一星', value: '5' }
])
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 }
])
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' ]

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 carstatusMap:any = {
  avgSpacing: '平均间距',
  minSpacing: '最小间距',
  averageTime: '平峰平均时间',
  singleAvgTime: '单程平均时间',
  maxSpacing: '最大间距',
  peakAvgTime: '高峰平均时间',
  maxSpeed: '最大车速',
  minSpeed: '最小车速',
  avgSpeed: '平均车速'
}

const leftContent = ref({
  leftOp: {
    grid: {
      containLabel: true
    },
    // 图表图例
    legend: {
      show: true,
      type: 'scroll',
      orient: 'horizontal', // 图例排列方向
      icon: 'circle', // 图例样式为圆形
      itemWidth: 10, // 图例图形的宽度
      itemHeight: 16, // 图例图形的高度
      itemGap: 10, // 图例项之间的间隔
      left: 'center', // 图例距离容器右侧的距离
      bottom: 0, // 图例垂直居中
      textStyle: {
        color: 'white', // 图例文字颜色
        fontSize: 16
      }
    },

    // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
    series: [
      {
        type: 'pie', // 图表类型为饼图
        radius: '60%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
        showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
        label: {
          show: true,
          fontSize: 16,
          formatter: '{b}： {c}条',
          color: 'white'
        },
        data: [
          { name: '2023', value: 0 },
          { name: '2022', value: 0 },
          { name: '2021', value: 0 },
          { name: '2020', value: 0 },
          { name: '2019', value: 0 }
        ]
      }
    ]
  }
})

const rightContent = ref({
  top: [
    {
      name: '乘客类型',
      option: {
        title: {
          text: '总', // 图标内容文本
          subtext: '196000',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '16px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '20px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 40, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },

        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              show: true,
              formatter: '{d}%',
              color: 'white'
            },
            data: [
              { key: 2, name: '老年卡', value: 180 },
              { key: 2, name: '电子钱包', value: 50 },
              { key: 2, name: '现金', value: 30 },
              { key: 2, name: '学生卡', value: 20 },
              { key: 2, name: '成人次卡', value: 10 },
              { key: 2, name: '其他', value: 10 },
              { key: 2, name: '免费人次', value: 10 }
            ]
          }
        ]
      }
    },
    {
      name: '客流情况',
      option: {
        grid: {
          containLabel: true,
          right: 30,
          left: 50
        },
        legend: {
          show: true,
          left: 'center',
          top: '10',
          icon: 'stack',
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#646464',
            fontSize: 18
          }
        },
        xAxis: [ {
          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
            // formatter: (value: number) => format( 1'时')
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
        } ],
        yAxis: [ {
          name: '客流量/人次',
          nameLocation: 'center',
          nameGap: 50,
          nameTextStyle: {
            color: '#fff',
            fontSize: 18
          },
          padding: 5,
          // max: 1000,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#A1A7B3'
              // type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#fff'

            }
          },
          axisTick: {
            show: false
          }
        }
        ],
        series: [ {
          name: '客流量',
          type: 'line',
          smooth: true,
          symbolSize: 0,
          itemStyle: {
            normal: {
              // color: '#FFD35D',
              lineStyle: {
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#FFD35D66'
                  },
                  {
                    offset: 0.5,
                    color: '#7ec2f366'
                  },
                  {
                    offset: 1,
                    color: '#1890ff'
                  }
                ], false),
                width: 1
              }
            }
          },
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFD35D66'
                },
                {
                  offset: 0.5,
                  color: '#7ec2f366'
                },
                {
                  offset: 1,
                  color: '#1890ff'
                }
              ], false)
            }
          },
          data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
        } ],
        dataZoom: {}
      }
    },
    {
      name: '里程情况',
      option: {
        grid: {
          containLabel: true,
          right: 30,
          left: 50
        },
        legend: {
          show: true,
          left: 'center',
          top: '10',
          icon: 'stack',
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#646464',
            fontSize: 18
          }
        },
        xAxis: [ {
          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
            // formatter: (value: number) => format( 1'时')
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: [ '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时' ]
        } ],
        yAxis: [ {
          name: '里程/km',
          nameLocation: 'center',
          nameGap: 50,
          nameTextStyle: {
            color: '#fff',
            fontSize: 18
          },
          padding: 5,
          // max: 1000,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#A1A7B3'
              // type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#fff'

            }
          },
          axisTick: {
            show: false
          }
        }
        ],
        series: [ {
          name: '里程',
          type: 'line',
          smooth: true,
          symbolSize: 0,
          itemStyle: {
            normal: {
              // color: '#4293FD',
              lineStyle: {
                // color: '#FFD35D',
                width: 1,
                color: new graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#6A5BF066'
                  },
                  {
                    offset: 0.5,
                    color: '#7ec2f366'
                  },
                  {
                    offset: 1,
                    color: '#1890ff'
                  }
                ], false)
              }
            }
          },
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#6A5BF066'
                },
                {
                  offset: 0.5,
                  color: '#7ec2f366'
                },
                {
                  offset: 1,
                  color: '#1890ff'
                }
              ], false)
            }
          },
          data: [ 120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330 ]
        } ],
        dataZoom: {}
      }
    }
  ],
  bottom: {

  }
})
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
  }))
  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('' as any)
const sceneVal = ref('' as any)
const vehicleMonitorData = ref([] as any[])
function sceneChange(val: number) {
  sceneVal.value = val
  getVehicleMonitorService()
}
function statusChange(val: number) {
  statusVal.value = val
  getVehicleMonitorService()
}

async function getVehicleMonitorService() {
  const params = {
    carStatus: statusVal.value,
    carScene: sceneVal.value
  }
  vehicleMonitorData.value = await cehicleOperationService.getVehicleMonitorService(params)
}
getVehicleMonitorService()

const vehicleStatusData = ref([] as any[])
async function getVehicleStatusService() {
  vehicleStatusData.value = await cehicleOperationService.getVehicleStatusService()
}
getVehicleStatusService()

</script>

<style lang="scss" scoped>
.left {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  font-size: 18px;

  &-left {
    .linebase {
      height: 216px;
      padding: 20px 60px 35px 60px;
      display: flex;
      align-items: center;
      gap: 70px;

      .car {
        .top {
          display: flex;
          position: relative;
          font-size: 18px;

          .name {
            width: 63px;
            height: 74px;
            line-height: 74px;
            text-align: center;
            border: 2px solid #2185E8;
            font-size: 50px;
            border-radius: 10px;
            background: rgba(33, 133, 232, 0.298);
          }

          .road {
            position: absolute;
            bottom: 0;
            right: -25px;
          }
        }

        .current {
          text-align: center;
          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
          margin-top: 10px;
        }
      }

      .info {
        width: 100%;

        >div {
          display: flex;
          gap: 10px;
          margin: 15.2px 0;

          .label {
            color: #80FFFF
          }
        }
      }
    }

    .header {
      height: 50px;
      background: rgba(33, 133, 232, 0.298);
      display: flex;

      >div {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
    }

    .detail {
      padding: 0 20px 0 30px;

      >div {
        border-bottom: 1px solid rgba(128, 255, 255, 0.298);
        padding-bottom: 30px;
        padding-top: 16px;

        .value {
          color: #80FFFF;
          width: 200px;
          text-align: center;
        }

        .row {
          height: 50px;
          display: flex;
          align-items: center;

          .type {
            border: 1px solid #80FFFF;
            background: rgba(128, 255, 255, 0.098);
            border-radius: 5px;
            color: #80FFFF;
            padding: 5px 9px;

            &.orange {
              border: 1px solid #FAAD0E;
              background: rgba(250, 173, 14, 0.098);
              color: #FAAD0E;
            }
          }

          .name {
            flex: 1;
            margin-left: 10px;

          }

        }

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            font-size: 24px;
            margin-left: 10px;
          }

          .value {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 10px;
          }
        }

        .starlist {
          display: flex;
          justify-content: space-around;
          margin-top: 17px;

          .star {
            color: #80FFFF;

            .num {
              font-size: 24px;
            }
          }
        }
      }

    }
  }

  &-right {
    flex: 1;
    font-size: 18px;

    .filter {
      display: flex;
      align-items: center;
      padding: 20px 40px;

      .name {
        width: 120px;
      }

      .odds {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;

        .odd {
          border-radius: 5px;
          border: 1px solid #2185E8;
          background: rgba(0, 191, 191, 0);
          padding: 2px 8px;
          min-width: 90px;
          text-align: center;

          &.checkd {
            background: #2185E8;
          }
        }
      }
    }

    .frequency {
      margin-top: 15px;

      .title {
        background: rgba(24, 145, 255, 0.498);
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: center;
        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
      }

      .content {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 13px;
        min-height: 421px;
        .bus {
          width: 236px;
          height: 401px;
          border: 1px solid #1891FF;
          background: rgba(27, 175, 255, 0.098);
          overflow: hidden;
          position: relative;

          .status {
            position: absolute;
            height: 31px;
            line-height: 31px;
            text-align: right;
            width: 100%;
            top: 119px;
            padding-right: 10px;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 1%, #333333 100%);

            &.success {
              background: linear-gradient(90deg, rgba(0, 238, 200, 0) 4%, #00EEC8 100%);
            }

            &.warning {
              background: linear-gradient(90deg, rgba(250, 173, 14, 0) 1%, #FAAD0E 100%);
            }

            &.error {
              background: linear-gradient(90deg, rgba(231, 61, 65, 0) 1%, #E73D41 100%);
            }
          }

          img {
            height: 150px;
            width: 100%;
          }

          .info {
            padding: 10px;

            >div {
              display: flex;
              height: 35px;
              align-items: center;

              .bold {
                font-size: 24px;
              }

              .busNum {
                border: 2px solid #FFFFFF;
                border-radius: 3px;
                background: #1891FF;
                padding: 2px 5px;
                margin-left: 10px;
              }
            }
          }

          .table {
            >div {
              display: flex;
              height: 40px;
              align-items: center;

              .label {
                width: 135px;
                height: 40px;
                line-height: 40px;
                background: rgba(33, 133, 232, 0.298);
                color: #80FFFF;
                text-align: right;
                padding-right: 10px;
              }

              .value {
                text-align: center;
                flex: 1;
              }
            }
          }
        }
      }

      .page {
        display: flex;
        justify-content: flex-end;
        margin-top: 25px;
      }
    }

  }

  .flex {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .bold {
    color: #fff;
    font-weight: bold;
    font-family: Impact Normal;
  }
}

.right {
  &-top {
    color: #fff;
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }

  &-bottom {
    color: #fff;
    gap: 10px;
    display: flex;
    justify-content: space-between;

    .carmonitor {
      padding: 10px;

      .control {
        display: flex;
        font-size: 20px;
        gap: 20px;
        :deep(.n-select){
        .n-base-selection{
          height: 40px;
        }
      }
        .item {
          display: flex;
          width: 33%;
          align-items: center;
          gap: 20px;

          .label {
            min-width: 60px;

          }
        }
      }

      .table {
        margin-top: 20px;
        text-align: center;

        th {
          border: 0;
          background: rgba(33, 133, 232, 0.6);
          text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6471);
          font-weight: bold;
        }

        tr {
          td {
            color: #fff;
          }

          .index {
            width: 14px;
            height: 14px;
            line-height: 14px;
            background: #8DFF53;
            border-radius: 50%;
            display: inline-block;
            color: #333333;
          }

          &.no {
            td {
              background: linear-gradient(180deg, #00A8F0 0%, #02B3B3 100%);

            }

            .index {
              background: #D7D7D7;
            }
          }
        }

      }
    }

    .carstatus {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .line{
        position: absolute;
        width: 1px;
        height: 397px;
        background-color: rgba(128, 255, 255, 0.298);
        left: 50%;
        top: 120px;
      }
      >div {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        >div{
          width: 100%;
        }
        .title {
          width: 136px;
          height: 59px;
          line-height: 59px;
          border-radius: 5px;
          text-align: center;
          font-size: 24px;
          text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6471);
          margin: 30px 0 ;
        }
      }

      .up .title {
        background: rgba(27, 175, 255, 0.298);
        border: 1px solid #81D3F8;
        box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.349), inset 0px 0px 30px 1px rgba(24, 145, 255, 0.9961);
      }

      .down .title {
        background: rgba(231, 61, 65, 0.298);
        border: 1px solid #F9A15A;
        box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.349), inset 0px 0px 30px 1px rgba(231, 61, 65, 0.9882);
      }
      .content{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        >div{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          >div{
            flex: 1;
          }
          .label{
            font-size: 18px;
            color: #81D3F8;
            text-align: right;
            text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6471);
          }
          .value{
            font-size: 24px;
            text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.6471);
          }
        }
      }
    }
  }

}
</style>