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

<template>
  <Layout>
    <template #left>
      <div class="left">
        <div class="left-top">
          <template
            v-for="(item, index) in leftTopCount"
            :key="index"
          >
            <div>
              <template
                v-for="(it, id) in item"
                :key="id"
              >
                <div>
                  <Icon
                    :name="it.icon"
                    :size="96"
                    style="margin-right: 20px;"
                  />
                  <div>
                    <p>
                      <span>{{ it.num }}</span>
                      {{ it.until }}
                    </p>
                    <p>{{ it.name }}</p>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
        <div class="left-content">
          <template
            v-for="(item, index) in leftContentChart"
            :key="index"
          >
            <Box
              :width="655"
              :height="455"
              :name="item.name"
            />
          </template>
        </div>
      </div>
    </template>
    <template #center>
      <div>111111</div>
    </template>
    <template #right>
      <div class="right">
        <Box
          :width="655"
          :height="622"
          :name="rightContent[0].name"
        >
          <div class="statistics">
            <div class="statistics-top">
              <template
                v-for="(item, index) in rightContent[0].content[0]"
                :key="index"
              >
                <div>
                  <p>{{ item.num }}</p>
                  <p>{{ item.name }}</p>
                </div>
              </template>
            </div>
            <div class="statistics-content">
              <template
                v-for="(item, ids) in rightContent[0].content[1]"
                :key="ids"
              >
                <div>
                  <Icon
                    :name="item.icon"
                    :size="74"
                  />
                  <div>
                    <p>
                      {{ item.name }}
                    </p>
                    <p>
                      <span>{{ item.num }}</span>
                      件
                    </p>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </Box>
        <Box
          :width="655"
          :height="622"
          :name="rightContent[1].name"
        >
          <div class="classes">
            <div class="classes-top">
              <template
                v-for="(item, id) in rightContent[1].content[0]"
                :key="id"
              >
                <div>
                  <Icon
                    :name="item.icon"
                    :size="74"
                  />
                  <div>
                    <p>
                      {{ item.name }}
                    </p>
                    <p>
                      <span>{{ item.num }}</span>
                      {{ item.util }}
                    </p>
                  </div>
                </div>
              </template>
            </div>
            <div class="classes-scroll">
              <div class="classes-scroll-head">
                <span>线路名称</span>
                <span>
                  班次
                  <i>计划/实际</i>
                </span>
              </div>
              <div class="scrollBox">
                <TankSeamlessScroll
                  :step-length="60"
                  :debug="false"
                  :reverse="false"
                >
                  <template
                    v-for="(item, index) in rightContent[1].content[1]"
                    :key="index"
                  >
                    <div class="classes-scroll-content">
                      <div>
                        <div>
                          <span>{{ item.name }}<i>{{ item.num }}</i></span>
                          <span>始</span>
                          <span>{{ item.start }}</span>
                          <span>终</span>
                          <span>{{ item.end }}</span>
                        </div>
                        <div>{{ item.plan }}/{{ item.pratic }}</div>
                      </div>
                      <div>
                        <n-progress
                          type="line"
                          :percentage="item.pratic"
                          :show-indicator="false"
                          processing
                        />
                      </div>
                    </div>
                  </template>
                </TankSeamlessScroll>
              </div>
            </div>
          </div>
        </Box>
        <Box
          :width="655"
          :height="622"
          :name="rightContent[2].name"
        >
          <div class="classes">
            <div class="classes-top">
              <template
                v-for="(item, id) in rightContent[2].content[0]"
                :key="id"
              >
                <div>
                  <n-progress
                    type="circle"
                    :percentage="item.num"
                    :offset-degree="180"
                    :color="item.color"
                    :indicator-text-color="item.color"
                  />
                  <div>
                    <p>
                      {{ item.name }}
                    </p>
                    <p>
                      <span>{{ item.num }}</span>
                      {{ item.util }}
                    </p>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </Box>
        <Box
          :width="655"
          :height="622"
          :name="rightContent[3].name"
        >
          <div class="classes">
            <div class="classes-top">
              <template
                v-for="(item, id) in rightContent[3].content[0]"
                :key="id"
              >
                <div>
                  <Icon
                    v-if="id === 0"
                    :name="item.icon"
                    :size="74"
                  />
                  <n-progress
                    v-else
                    type="circle"
                    :percentage="item.num"
                    :offset-degree="180"
                    :color="item.color"
                    :indicator-text-color="item.color"
                  />
                  <div>
                    <p>
                      {{ item.name }}
                    </p>
                    <p>
                      <span>{{ item.num }}</span>
                      {{ item.util }}
                    </p>
                  </div>
                </div>
              </template>
            </div>
            <div class="classes-scroll">
              <div class="classes-scroll-head">
                <span>线路名称</span>
                <span>
                  班次
                  <i>已发数/准点数</i>
                </span>
              </div>
              <div class="scrollBox">
                <TankSeamlessScroll
                  :step-length="60"
                  :debug="false"
                  :reverse="false"
                >
                  <template
                    v-for="(item, index) in rightContent[3].content[1]"
                    :key="index"
                  >
                    <div class="classes-scroll-content">
                      <div>
                        <div>
                          <span>{{ item.name }}<i>{{ item.num }}</i></span>
                          <span>始</span>
                          <span>{{ item.start }}</span>
                          <span>终</span>
                          <span>{{ item.end }}</span>
                        </div>
                        <div>{{ item.plan }}/{{ item.pratic }}</div>
                      </div>
                      <div>
                        <n-progress
                          type="line"
                          :percentage="item.pratic"
                          :show-indicator="false"
                          processing
                        />
                      </div>
                    </div>
                  </template>
                </TankSeamlessScroll>
              </div>
            </div>
          </div>
        </Box>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import { ref } from 'vue'
import Box from '@/components/box.vue'
import TankSeamlessScroll from 'tank-vue3-seamless-scroll'

const leftTopCount = ref([
  [
    {
      num: 6.8, icon: '11', name: '总刷卡量', until: '亿人次'
    },
    {
      num: 6.8, icon: '12', name: '总客流量', until: '亿人次'
    },
    {
      num: 6.8, icon: '13', name: '安全行驶', until: '万公里'
    }
  ],
  [
    {
      num: 6.8, icon: '14', name: '累计减少碳排放', until: '吨'
    },
    {
      num: 6.8, icon: '15', name: '累计责任事故率', until: '起/百万公里'
    },
    {
      num: 6.8, icon: '16', name: '乘客满意度', until: '%'
    }
  ]
])

const leftContentChart = ref([
  { name: '客运量', option: '' },
  { name: '消费占比', option: '' },
  { name: '客流排名', option: '' },
  { name: '线路客流排名', option: '' }
])

const rightContent = ref([
  {
    name: '舆情统计',
    content: [
      [
        { name: '报警总数', num: 0 },
        { name: '报警企业', num: 0 },
        { name: '待反馈', num: 0 },
        { name: '待解除', num: 0 }
      ],
      [
        { name: '事件', num: 0, icon: '17' },
        { name: '舆情', num: 0, icon: '18' },
        { name: '高风险', num: 0, icon: '19' },
        { name: '汛情', num: 0, icon: '20' },
        { name: '网络检查', num: 0, icon: '21' },
        { name: '火险', num: 0, icon: '22' },
        { name: '驾驶员报警', num: 0, icon: '23' },
        { name: '充电', num: 0, icon: '24' },
        { name: '电池高温', num: 0, icon: '25' }
      ]
    ]
  },
  {
    name: '班次完成率',
    content: [
      [
        {
          name: '昨日总班次', num: 100, icon: '26', util: '次'
        },
        {
          name: '昨日完成率', num: 100, icon: '27', util: '%'
        }
      ],
      [
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        }
      ]
    ]
  },
  {
    name: '班次准点率',
    content: [
      [
        {
          name: '昨日首末班车准点率', num: 70, icon: '26', util: '%', color: '#04FF77'
        },
        {
          name: '昨日中途站准点率', num: 70, icon: '29', util: '%', color: '#04FF77'
        }
      ]
    ]
  },
  {
    name: '发车准点率',
    content: [
      [
        {
          name: '昨日准点班次数', num: 70, icon: '26', util: '次', color: '#04FF77'
        },
        {
          name: '昨日准点率', num: 70, icon: '29', util: '%', color: '#04FF77'
        }
      ],
      [
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        },
        {
          name: '1路', num: '(45567)', start: '始发站牌名称', end: '始发站牌名称', plan: 100, pratic: 70
        }
      ]
    ]
  }
] as any)
</script>

<style lang="scss" scoped>
.left {
  padding-right: 40px;

  &-top {
    &>div {
      display: flex;
    }

    &>div:first-child,
    &>div:nth-child(2) {
      background: linear-gradient(180deg, rgba(33, 133, 232, 0.0902) 0%, rgba(0, 170, 255, 0) 99%);

      &>div {
        display: flex;
        color: white;
        text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.647058823529412);
        width: 440px;
        height: 160px;
        align-items: center;
        justify-content: center;

        &>div {

          &>p:first-child {
            font-size: 18px;

            span {
              font-size: 50px;
            }
          }

          &>p:last-child {
            font-size: 24px;
          }
        }
      }
    }
  }

  &-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.right {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 40px;
  white-space: nowrap;
  text-shadow: 1px 1px 5px rgba(0, 255, 255, 0.647058823529412);

  .statistics {
    padding: 20px;

    &-top {
      display: flex;
      justify-content: space-between;

      &>div {
        width: 145px;
        height: 145px;
        font-size: 20px;
        color: #80FFFF;
        text-align: center;
        background: rgba(33, 133, 232, 0.098);
        border: 1px solid rgba(0, 255, 255, 0.298);

        &>p:first-child {
          padding-top: 33px;
          padding-bottom: 10px;
          font-weight: 700;
          font-style: normal;
          font-size: 40px;
          color: #FFFFFF;
          text-align: center;
        }

        &>p:last-child {
          font-size: 20px;
        }
      }
    }

    &-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      &>div {
        display: flex;
        width: 205px;
        overflow: hidden;
        margin-top: 40px;

        &>div {
          width: 100px;
          color: white;
          padding-left: 20px;

          &>p {
            font-size: 20px;

            span {
              font-size: 34px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }

  .classes {
    padding: 20px;

    &-top {
      display: flex;
      justify-content: space-between;

      &>div {
        width: 300px;
        height: 145px;
        font-size: 20px;
        color: #80FFFF;
        text-align: center;
        background: rgba(33, 133, 232, 0.098);
        border: 1px solid rgba(0, 255, 255, 0.298);
        display: flex;
        align-items: center;
        justify-content: center;

        &>div {
          padding-left: 20px;
          text-align: left;

          &>p:last-child {
            color: white;
            font-family: 'Impact Normal', 'Impact', sans-serif;

            &>span {
              font-size: 34px;
              font-weight: 400;
              margin-right: 5px;
            }
          }
        }
      }
    }

    &-scroll {
      &-head {
        margin-top: 40px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        color: #80FFFF;

        &>span:last-child {
          color: white;

          i {
            color: #80FFFF;
          }
        }
      }

      &-content {
        font-family: Arial Normal;

        &>div:first-child {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &>div:first-child {
            display: flex;
            font-size: 18px;
            align-items: flex-end;
            text-shadow: none;

            &>span {
              &:first-child {
                width: 153px;
                height: 48px;
                border-radius: 5px;
                background: rgba(33, 133, 232, 0.298);
                border: 3px solid #80FFFF;
                font-size: 24px;
                color: white;
                text-align: center;
                line-height: 40px;
                overflow: hidden;
                margin-right: 10px;

                i {
                  font-size: 20px;
                  margin-left: 10px;
                }
              }

              &:nth-child(4),
              &:nth-child(2) {
                width: 30px;
                height: 30px;
                color: #FFFFFF;
                border-radius: 50%;
                border: 1px solid #2bb972;
                background: #2BB97249;
                text-align: center;
                line-height: 30px;
                margin: 0 5px;
              }

              &:nth-child(4) {
                border: 1px solid #E73D41;
                background: #E73D4149;
                margin-left: 10px;
              }

              &:nth-child(3),
              &:last-child {
                color: #81D3F8;
                padding-bottom: 5px;
              }
            }

          }

          &>div:last-child {
            font-size: 24px;
            text-align: right;
            color: #FFFFFF;
          }
        }

        &>div:last-child {
          height: 40px;
          padding: 13px 0;
        }
      }
    }

    .scrollBox {
      height: 270px;
      overflow: hidden;
    }
  }
}
</style>