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 leftContent.topCount"
            :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>

                    <span class="steps">
                      {{ it.step }}
                    </span>
                  </div>
                </div>
              </template>
            </div>
          </template>
        </div>
        <div class="left-content">
          <template
            v-for="(item, index) in leftContent.charts"
            :key="index"
          >
            <Box
              :width="662"
              :height="455"
              :name="item.name"
            >
              <SelectDate
                v-if="index === 0"
                @date-change="selectDatechange"
              />
              <Echart :option="item.option" />
            </Box>
          </template>
        </div>
      </div>
    </template>
    <template #right>
      <div class="right">
        <template
          v-for="(itemd, indexd) in rightContent"
          :key="indexd"
        >
          <Box
            :width="655"
            :height="622"
            :name="itemd.name"
          >
            <div
              v-if="indexd === 0"
              class="statistics"
            >
              <div class="statistics-top">
                <template
                  v-for="(item, index) in itemd.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 itemd.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>

            <div
              v-else
              class="classes"
            >
              <div
                v-if="indexd === 1"
                class="classes-top"
              >
                <template
                  v-for="(item, id) in itemd.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
                v-else-if="indexd === 2"
                class="classes-top"
              >
                <template
                  v-for="(item, id) in itemd.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
                v-else
                class="classes-top"
              >
                <template
                  v-for="(item, id) in itemd.content[0]"
                  :key="id"
                >
                  <div :style="`justify-content:${id !== 0 ? 'flex-start' : 'center'};`">
                    <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
                v-if="indexd === 1"
                class="classes-scroll"
              >
                <div class="classes-scroll-head">
                  <span>线路名称</span>
                  <span>
                    班次
                    <i>计划/实际</i>
                  </span>
                </div>
                <div class="scrollBox">
                  <Vue3Marquee
                    vertical
                    :duration="5"
                    clone
                    style="width: 100%;"
                  >
                    <template
                      v-for="(item, index) in itemd.content[1]"
                      :key="index"
                    >
                      <div class="classes-scroll-content">
                        <div>
                          <div>
                            <span>{{ item.lineName }}<i>({{ item.licensePlate }})</i></span>
                            <span>始</span>
                            <span>{{ item.startStation }}</span>
                            <span>终</span>
                            <span>{{ item.endStation }}</span>
                          </div>
                          <div>{{ item.planClasses }}/{{ item.realityClasses }}</div>
                        </div>
                        <div>
                          <n-progress
                            type="line"
                            :percentage="item.realityClasses / item.planClasses * 100"
                            :show-indicator="false"
                            processing
                          />
                        </div>
                      </div>
                    </template>
                  </Vue3Marquee>
                </div>
              </div>
              <div
                v-else-if="indexd === 3"
                class="classes-scroll"
              >
                <div class="classes-scroll-head">
                  <span>线路名称</span>
                  <span>
                    发车
                    <i>已发数/准点数</i>
                  </span>
                </div>
                <div class="scrollBox">
                  <Vue3Marquee
                    vertical
                    :duration="5"
                    clone
                    style="width: 100%;"
                  >
                    <template
                      v-for="(item, index) in itemd.content[1]"
                      :key="index"
                    >
                      <div class="classes-scroll-content">
                        <div>
                          <div>
                            <span>{{ item.lineName }}<i>({{ item.licensePlate }})</i></span>
                            <span>始</span>
                            <span>{{ item.startStation }}</span>
                            <span>终</span>
                            <span>{{ item.endStation }}</span>
                          </div>
                          <div>{{ item.total }}/{{ item.onTime }}</div>
                        </div>
                        <div>
                          <n-progress
                            type="line"
                            :percentage="item.onTime / item.total * 100"
                            :show-indicator="false"
                            class="resetStyle"
                            processing
                          />
                        </div>
                      </div>
                    </template>
                  </Vue3Marquee>
                </div>
              </div>
              <template v-else>
                <div
                  v-for="(item, index) in itemd.content[1]"
                  :key="index"
                  class="classes-tables"
                >
                  <div class="classes-tables-head">
                    <span
                      v-for="(itm, id) in item.head"
                      :key="id"
                    >{{ itm }}</span>
                  </div>
                  <div class="classes-tables-body">
                    <div
                      v-for="(it, ids) in item.body"
                      :key="ids"
                      :class="'status'+it.status"
                    >
                      <span>{{ it.lineName }}({{ it.licensePlate }})</span>
                      <span>{{ it.direction===1?'上行':'下行' }}</span>
                      <span>{{ it.planTime }}</span>
                      <span>{{ it.realityTime }}</span>
                      <span :class="'status'+it.status">{{ statusMap[it.status] }}</span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </Box>
        </template>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import { onMounted, onUnmounted, ref } from 'vue'
import Box from '@/components/box.vue'
import SelectDate from '@/components/selectDate.vue'

import { Vue3Marquee } from 'vue3-marquee'
import { graphic } from 'echarts'
import Echart from '@/components/chart.vue'
import HomeService from '../services/homepage.service'

const homeService = new HomeService()

const statusMap:any = {
  0: '正常',
  1: '超出',
  2: '异常'
}

const datas = [
  {
    value: 99,
    name: '系列一'
  },
  {
    value: 97,
    name: '系列二'
  },
  {
    value: 94,
    name: '系列三'
  },
  {
    value: 90,
    name: '系列四'
  },
  {
    value: 88,
    name: '系列五'
  },
  {
    value: 84,
    name: '系列6'
  },
  {
    value: 81,
    name: '系列7'
  },
  {
    value: 79,
    name: '系列8'
  },
  {
    value: 75,
    name: '系列9'
  },
  {
    value: 65.88,
    name: '系列a'
  }
]

const leftContent:any = ref({
  topCount: [
    [
      {
        num: 6.8, icon: '11', name: '总刷卡量', until: '亿人次', step: '+5'
      },
      {
        num: 6.8, icon: '12', name: '总客流量', until: '亿人次', step: '-9'
      },
      {
        num: 6.8, icon: '13', name: '安全行驶', until: '万公里', step: '+15'
      }
    ],
    [
      {
        num: 6.8, icon: '14', name: '累计减少碳排放', until: '吨', step: '+5'
      },
      {
        num: 6.8, icon: '15', name: '累计责任事故率', until: '起/百万公里', step: '+5'
      },
      {
        num: 6.8, icon: '16', name: '乘客满意度', until: '%'
      }
    ]
  ],
  charts: [
    {
      name: '客运量',
      option: {
        grid: {
          containLabel: true,
          top: 100,
          bottom: 50,
          left: '5%',
          right: '5%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br /> {a0}：{c0}万 <br />{a1}：{c1}%',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 45,
          lett: 'center',
          itemGap: 30,
          textStyle: {
            fontSize: 18,
            color: '#C9D2FA'
          }
        },
        xAxis: {
          triggerEvent: true,
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月'
          ],
          axisLabel: {
            interval: 0,
            fontSize: 18,
            color: '#C9D2FA'
          }
        },
        yAxis: [
          {
            name: '客运量/万',
            nameLocation: 'center',
            nameGap: 50,
            nameTextStyle: {
              color: '#fff',
              fontSize: 18
            },
            splitNumber: 2,
            axisLabel: {
              fontSize: 18,
              color: '#C9D2FA'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#3E4A82'
              }
            }
          },
          {
            name: '增长率%',
            nameLocation: 'center',
            nameGap: 50,
            nameTextStyle: {
              color: '#fff',
              fontSize: 18
            },
            splitNumber: 2,
            position: 'right', // 放在右边
            axisLabel: {
              fontSize: 18,
              color: '#C9D2FA',
              formatter(value: number) {
                // 在标签后面添加百分号
                return `${value}%`
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#3E4A82'
              }
            }
          }
        ],
        series: [
          {
            name: '客运量',
            type: 'bar',
            silent: true,
            itemStyle: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFD35D'
                },
                {
                  offset: 0.5,
                  color: '#7ec2f3'
                },
                {
                  offset: 1,
                  color: '#1890ff'
                }
              ])
            },
            barWidth: 30,
            data: [ 200, 108, 200, 40, 210, 100 ]
          },
          {
            name: '同比增长率',
            type: 'line',
            yAxisIndex: 1, // 与第二个 y 轴关联
            itemStyle: {
              color: '#FEB74D' // 设置折线颜色为黄色
            },
            data: [ 100, 80, 120, 60, 90, 70 ] // 折线图的数据
          }
        ],
        dataZoom: {
          type: 'slider',
          height: 20,
          bottom: 8,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '100%',
          handleStyle: {
            color: '#409eff'
          },
          textStyle: {
            color: '#666'
          },
          fillerColor: 'rgba(255,255,255,0.2)',
          borderColor: 'rgba(64,158,225,0.3)'
        }
      },
      btns: [ '总', '年', '月', '日' ],
      checkId: 0
    },
    {
      name: '消费占比',
      option: {
        title: {
          text: '消费人次/万人', // 图标内容文本
          subtext: '10',
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          },
          subtextStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '24px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          icon: '',
          containLabel: true
        },
        tooltip: {
          show: true,
          formatter: '{b}: {c} ,占比: {d}%'
        },
        // 图表图例
        legend: {
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },
        yAxis: [ ],
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              formatter: '{b}\n{d}%',
              color: 'white'
            },
            data: [
              { name: '0次', value: 30619 },
              { name: '1次', value: 5921 },
              { name: '2次', value: 1153 },
              { name: '3次', value: 266 },
              { name: '大于3次', value: 87 },
              { name: '大于4次', value: 999 },
              { name: '12次', value: 5921 },
              { name: '22次', value: 1153 },
              { name: '32次', value: 266 },
              { name: '大于32次', value: 87 },
              { name: '大于42次', value: 999 }
            ]
          }
        ]
      }
    },
    {
      name: '客流排名',
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 20,
          left: 20,
          bottom: 20,
          right: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
          }
        },
        yAxis: [ {
          type: 'category',
          inverse: true,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: [ '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区', '雨城区' ],
          axisLabel: {
            fontSize: 18,
            color: '#fff',
            margin: 10,
            rich: {
              a1: {
                backgroundColor: '#FFFF0050',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FFFF00',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a2: {
                backgroundColor: '#F2F2F250',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#F2F2F2',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a3: {
                backgroundColor: '#FAAD0E50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FAAD0E',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              b: {
                backgroundColor: '#00FFFF50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#00FFFF',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              c: {
                width: 100,
                fontSize: 18
              }
            },
            formatter: (params: string, _id: number) => {
              const id = _id + 1
              if (_id < 3) {
                return `{a${id}|${id}}  {c|${params}}`
              }
              return `{b|${id}}  {c|${params}}`
            }
          }
        } ],
        series: [
          {
            z: 2,
            name: '客流排名',
            type: 'bar',
            barWidth: 25,
            zlevel: 1,
            data: datas.map((item, i) => ({
              value: item.value
            })),
            label: {
              position: 'inside',
              color: '#fff',
              fontSize: 16
            },
            itemStyle: {
              borderRadius: [ 0, 15, 15, 0 ],
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(20,167,250,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,255,209,1)'
                }
              ])
            }
          }
        ]
      }
    },
    {
      name: '线路客流排名',
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 20,
          left: 20,
          bottom: 20,
          right: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
          }
        },
        yAxis: [ {
          type: 'category',
          inverse: true,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: [ '1路(45689)', '2路(45689)', '3路(45689)', '4路(45689)', '5路(45689)', '6路(45689)', '7路(45689)', '8路(45689)' ],
          axisLabel: {
            fontSize: 18,
            color: '#fff',
            margin: 20,
            rich: {
              a1: {
                backgroundColor: '#FFFF0050',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FFFF00',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a2: {
                backgroundColor: '#F2F2F250',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#F2F2F2',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              a3: {
                backgroundColor: '#FAAD0E50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#FAAD0E',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              b: {
                backgroundColor: '#00FFFF50',
                width: 30,
                height: 28,
                align: 'center',
                borderRadius: 15,
                fontSize: 18,
                borderColor: '#00FFFF',
                borderType: 'solid',
                borderWidth: 1,
                padding: [ 2, 0, 0, 0 ]
              },
              c: {
                width: 35,
                fontSize: 18
              }
            },
            formatter: (params: string, _id: number) => {
              const id = _id + 1
              if (_id < 3) {
                return `{a${id}|${id}}  {c|${params}}`
              }
              return `{b|${id}}  {c|${params}}`
            }
          }
        } ],
        series: [
          {
            z: 2,
            name: '线路客流排名',
            type: 'bar',
            barWidth: 25,
            zlevel: 1,
            data: datas.map((item, i) => ({
              value: item.value
            })),
            label: {
              position: 'inside',
              color: '#fff',
              fontSize: 16
            },
            itemStyle: {
              borderRadius: [ 0, 15, 15, 0 ],
              color: new graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(20,167,250,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(246,189,22,1)'
                }
              ])
            }
          }
        ]
      }
    }
  ]
})

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: 0, icon: '26', util: '次'
        },
        {
          name: '昨日完成率', num: 0, icon: '27', util: '%'
        }
      ],
      [
        {
          lineName: '1路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
        },
        {
          lineName: '2路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
        },
        {
          lineName: '3路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
        },
        {
          lineName: '4路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
        },
        {
          lineName: '5路', licensePlate: '45567', startStation: '始发站牌名称', endStation: '始发站牌名称', planClasses: 100, realityClasses: 70
        }
      ]
    ]
  },
  {
    name: '班次准点率',
    content: [
      [
        {
          name: '昨日首末班准点率', num: 70, icon: '26', util: '%', color: '#00FFFF'
        },
        {
          name: '昨日中途站准点率', num: 70, icon: '29', util: '%', color: '#FAAD0E'
        }
      ],
      [
        {
          head: [ '今日首班', '方向', '计划', '实际', '状态' ],
          body: [
            {
              direction: 1,
              planTime: 5,
              realityTime: 5,
              status: 0,
              type: 0,
              licensePlate: 'fsdfdsf',
              lineName: '12路'
            }
          ]
        },
        {
          head: [ '昨日末班', '方向', '计划', '实际', '状态' ],
          body: [
            {
              direction: 1,
              planTime: 5,
              realityTime: 5,
              status: 0,
              type: 0,
              licensePlate: 'fsdfdsf',
              lineName: '12路'
            }
          ]
        }
      ]
    ]
  },
  {
    name: '发车准点率',
    content: [
      [
        {
          name: '昨日准点班次数', num: 70, icon: '26', util: '次', color: '#04FF77'
        },
        {
          name: '昨日准点率', num: 70, icon: '29', util: '%', color: '#04FF77'
        }
      ],
      [
        {
          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
        },
        {
          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
        },
        {
          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
        },
        {
          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
        },
        {
          lineName: '1路', licensePlate: '(45567)', startStation: '始发站牌名称', endStation: '始发站牌名称', total: 100, onTime: 70
        }
      ]
    ]
  }
] as Any)

async function getBusSummaryInfo() {
  const res = await homeService.getBusSummaryInfo()
  leftContent.value.topCount[0][0].num = res.swipeCount
  leftContent.value.topCount[0][1].num = res.passengerFlow
  leftContent.value.topCount[0][2].num = res.mileageDriven

  leftContent.value.topCount[1][0].num = res.carbonEmission
  leftContent.value.topCount[1][1].num = res.accidentRate
  leftContent.value.topCount[1][2].num = res.satisfaction
}
getBusSummaryInfo()

async function getBusTrafficVolume(type: number) {
  const res = await homeService.getBusTrafficVolume(type)
  const xData = res.map((item: any) => item.time)
  const trafficVolumeData = res.map((item: any) => item.trafficVolume)
  const growthRateData = res.map((item: any) => item.growthRate)

  leftContent.value.charts[0].option.xAxis!.data = xData
  leftContent.value.charts[0].option.series[0].data = trafficVolumeData
  leftContent.value.charts[0].option.series[1].data = growthRateData
}
async function getBusStatistics() {
  const { consumptionProportion = [], flowRanking = [], lineFlowRanking = [] } = await homeService.getBusStatistics()

  leftContent.value.charts[1].option.series[0].data = consumptionProportion

  leftContent.value.charts[1].option.title.subtext = consumptionProportion.reduce((prev: any, item:any) => {
    prev += +item.value
    return prev
  }, 0).toFixed(2)

  leftContent.value.charts[2].option.yAxis[0].data = flowRanking.map((item: any) => item.name)
  leftContent.value.charts[2].option.series[0].data = flowRanking

  leftContent.value.charts[3].option.yAxis[0].data = lineFlowRanking.map((item: any) => item.name)
  leftContent.value.charts[3].option.series[0].data = lineFlowRanking
}

async function getBusWarning() {
  const {
    warningNum, companyNum, feedbackNum, secureNum, warningSummary
  } = await homeService.getBusWarning()

  rightContent.value[0].content[0][0].num = warningNum
  rightContent.value[0].content[0][1].num = companyNum
  rightContent.value[0].content[0][2].num = feedbackNum
  rightContent.value[0].content[0][3].num = secureNum

  rightContent.value[0].content[1][0].num = warningSummary.accident
  rightContent.value[0].content[1][1].num = warningSummary.sentiment
  rightContent.value[0].content[1][2].num = warningSummary.risk
  rightContent.value[0].content[1][3].num = warningSummary.flood
  rightContent.value[0].content[1][4].num = warningSummary.network
  rightContent.value[0].content[1][5].num = warningSummary.fire
  rightContent.value[0].content[1][6].num = warningSummary.warning
  rightContent.value[0].content[1][7].num = warningSummary.charge
  rightContent.value[0].content[1][8].num = warningSummary.battery
}
getBusWarning()
async function getClassesCompletionRate() {
  const data = await homeService.getClassesCompletionRate()
  const allPlan = data.reduce((prev: any, item: { planClasses: number }) => {
    prev += item.planClasses
    return prev
  }, 0)
  const allReal = data.reduce((prev: any, item: { realityClasses: number }) => {
    prev += item.realityClasses
    return prev
  }, 0)
  rightContent.value[1].content[0][0].num = allPlan
  rightContent.value[1].content[0][1].num = (allReal / allPlan * 100).toFixed(0)
  rightContent.value[1].content[1] = data
}
getClassesCompletionRate()

async function getDepartPunctualityRateList() {
  const data = await homeService.getDepartPunctualityRateList()
  const allTotal = data.reduce((prev: any, item: { total: number }) => {
    prev += item.total
    return prev
  }, 0)
  const allOnTime = data.reduce((prev: any, item: { onTime: number }) => {
    prev += item.onTime
    return prev
  }, 0)
  rightContent.value[3].content[0][0].num = allOnTime
  rightContent.value[3].content[0][1].num = (allOnTime / allTotal * 100).toFixed(0)
  rightContent.value[3].content[1] = data
}
getDepartPunctualityRateList()
async function getClassesPunctualityRate() {
  const data = await homeService.getClassesPunctualityRate()

  const todayData = data.filter((item: { type: number }) => item.type === 1)
  const yesterdayData = data.filter((item: { type: number }) => item.type === 0)
  rightContent.value[2].content[1][0].body = todayData
  rightContent.value[2].content[1][1].body = yesterdayData
}
getClassesPunctualityRate()

const curentType = ref(1)
function selectDatechange(type: any) {
  curentType.value = type
  getBusTrafficVolume(type)
}

onMounted(() => {
  selectDatechange(curentType.value)
  getBusStatistics()
})

const timer = setInterval(() => {
  selectDatechange(curentType.value)
  getBusSummaryInfo()
  getBusStatistics()
}, 5 * 1000)

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.left {

  &-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;
        font-family: "Impact Normal", Impact, sans-serif;

        &>div {
          position: relative;

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

            span {
              font-size: 50px;
            }
          }

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

          .steps {
            position: absolute;
            top: -60px;
            left: 15px;
            font-size: 50px;
            animation: step 0.5s infinite alternate;
          }
        }
      }
    }
  }

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

    :deep(.box-content) {
      position: relative;
    }

  }
}

.right {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  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: 150px;
        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;
          margin-left: 10px;
          text-align: left;

          &:first-child {
            width: 99px;
            height: 99px;

          }

          &>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;
        width: 100%;
        &>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: 185px;
                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;

          :deep(.resetStyle .n-progress-graph-line-fill) {
            background: linear-gradient(to right, #945fb9, rgba(0, 212, 255, 1)) !important;
          }
        }
      }
    }

    .scrollBox {
      height: 270px;
      overflow: hidden;
    }

    &-tables {
      text-shadow: none;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      text-align: center;
      font-size: 20px;
      color: #FFFFFF;
      .status1{
        color: #FAAD0E;
      }
      .status2{
        color: #E73D41;
      }

      // &:nth-child(3)>div:nth-child(2)>div:last-child,
      // &:nth-child(2)>div:nth-child(2)>div:first-child {
      //   color: #E73D41;
      // }

      &:nth-child(3)>div:first-child>span:first-child {
        color: #FAAD0E;
      }

      &-head {
        display: flex;
        align-items: center;
        background: rgba(86, 137, 240, 0.298);
        height: 40px;
        margin-top: 20px;

        &>span {
          width: 112px;
          font-weight: 700;

          &:first-child {
            width: 182px;
            color: #04FF77;
          }
        }
      }

      &-body {
        color: #81D3F8;

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

          &>span {
            width: 112px;

            &:first-child {
              width: 182px;
            }
          }
        }
      }
    }
  }
}

@keyframes step {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>