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
                v-for="item in lineInfo"
                :key="item.label"
              >
                <div class="label">
                  {{ item.label }}
                </div>
                <div class="val">
                  {{ item.value }}
                </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">
                  始发点名称 → 终点站名称
                </div>
                <div class="value">
                  06:00~22:00
                </div>
              </div>
              <div class="row">
                <div class="type">
                  下行
                </div>
                <div class="name">
                  始发点名称 → 终点站名称
                </div>
                <div class="value">
                  06:00~22:00
                </div>
              </div>
            </div>
            <div>
              <div class="row">
                <div class="type orange">
                  上
                </div>
                <div class="name">
                  线路上行里程
                </div>
                <div class="value">
                  20km
                </div>
              </div>
              <div class="row">
                <div class="type">
                  下
                </div>
                <div class="name">
                  线路下行里程
                </div>
                <div class="value">
                  20km
                </div>
              </div>
              <div class="row">
                <Icon
                  name="1-4"
                  :size="38"
                />
                <div class="name">
                  票价
                </div>
                <div class="value">
                  2元
                </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"
                  >
                    10
                  </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"
                  >
                    10
                  </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 status"
                :key="item"
                class="bus"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt="bus"
                >
                <div
                  :class="item"
                  class="status"
                >
                  执行中
                </div>
                <div class="info">
                  <div>
                    <div class="bold">
                      1路
                    </div>
                    <div class="busNum">
                      川T 12345
                    </div>
                  </div>
                  <div>司机：小A </div>
                  <div>电量： </div>
                </div>
                <div class="table">
                  <div>
                    <div class="label">
                      调度时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      实际发车时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      发车间隔
                    </div>
                    <div class="value">
                      1 分钟
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="page">
              <n-pagination :item-count="30">
                <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 3"
                :key="item"
                class="bus"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt="bus"
                >
                <div
                  :class="item"
                  class="status"
                >
                  执行中
                </div>
                <div class="info">
                  <div>
                    <div class="bold">
                      1路
                    </div>
                    <div class="busNum">
                      川T 12345
                    </div>
                  </div>
                  <div>司机：小A </div>
                  <div>电量： </div>
                </div>
                <div class="table">
                  <div>
                    <div class="label">
                      调度时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      实际发车时间
                    </div>
                    <div class="value">
                      06:30:00
                    </div>
                  </div>
                  <div>
                    <div class="label">
                      发车间隔
                    </div>
                    <div class="value">
                      1 分钟
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="page">
              <n-pagination :item-count="30">
                <template #prefix="{ itemCount }">
                  总共 {{ itemCount }} 个项目
                </template>
              </n-pagination>
            </div>
          </div>
        </Box>
      </div>
      <div>2222</div>
    </template>
    <template #center>
      <div>2222</div>
    </template>
    <template #right>
      <div>2222</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 { ref } from 'vue'
/* 线路类型：干线公交 车辆总数： 运 营 中：9 辆 非 运 营：1 辆 */
const lineInfo = ref([
  { label: '线路类型：', value: '干线公交' },
  { label: '车辆总数：', value: '10 辆' },
  { label: '运 营 中：', value: '9 辆' },
  { label: '非 运 营：', value: '1 辆' }
])
const starlist = ref([
  { label: '五星', value: '1' },
  { label: '四星', value: '2' },
  { label: '三星', value: '3' },
  { label: '二星', value: '4' },
  { 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' }
])

const status = [ 'success', 'warning', 'error' ]

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: [
          { 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 }
        ]
      }
    ]
  }
})
</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: space-between;
        gap: 10px;
        padding: 10px 13px;

        .bus {
          width: 236px;
          height: 401px;
          flex: 1;
          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;
  }
}
</style>