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

<template>
  <Layout>
    <template #left>
      <div class="left-top">
        <template
          v-for="(item, index) in leftContent.top"
          :key="index"
        >
          <Box
            :width="662"
            :height="408"
            :name="item.name"
            style="position: relative;"
          >
            <SelectDate
              v-if="index === 1"
              @date-change="selectDatechange"
            />
            <div
              v-if="item.icon"
              class="left-top-count"
            >
              <Icon
                :name="item.icon"
                :size="81"
                style="margin-right: 20px;"
              />
              <div
                v-for="(itm, id) in item.num"
                :key="id"
              >
                {{ itm }}
              </div>
              <div>辆</div>
            </div>
            <Echart
              v-if="item.option"
              :option="item.option"
            />
          </Box>
        </template>
      </div>

      <Box
        :width="1340"
        :height="420"
        name="维保明细"
        class="left-bottom"
      >
        <n-date-picker
          v-model:value="leftContent.bottom.range"
          type="daterange"
          :bordered="false"
          style="width: 260px;"
        />

        <n-data-table
          :columns="leftContent.bottom.head"
          :data="tableData"
          :bordered="false"
          single-column
          striped
          size="large"
          style="height: 300px;"
        />
        <div class="page">
          <n-pagination
            v-model:page="leftContent.bottom.page.num"
            :page-size="leftContent.bottom.page.size"
            :item-count="leftContent.bottom.page.total"
            size="large"
          />
        </div>
      </Box>
    </template>
    <template #right>
      <div class="right-top">
        <template
          v-for="(item, index) in rightContent.top"
          :key="index"
        >
          <Box
            :width="438"
            :height="408"
            :name="item.name"
          >
            <Echart :option="item.option" />
          </Box>
        </template>
      </div>

      <Box
        :width="1340"
        :height="408"
        name="线路运行速度"
        class="right-center"
      >
        <div class="lineSpeed">
          <div class="img">
            <img
              src="../../../../assets/img/1-2.png"
              alt="car"
            >
          </div>
          <div class="control">
            <n-select
              size="large"
              :bordered="false"
              :options="[{label:'车型',value:1}]"
              placeholder="车型选择"
            />
            <div class="btn">
              一键体检
            </div>
          </div>
        </div>
      </Box>

      <div class="right-bottom">
        <Box
          :width="662"
          :height="408"
          name="体检问题情况"
        >
          <div class="checkup">
            <div class="total">
              <div class="num">
                {{ checkupProblemTotal }}
              </div>
              <div style="font-size: 24px;">
                总量
              </div>
            </div>
            <div class="list">
              <div
                v-for="item,index in checkupProblem"
                :key="index"
                class="item"
              >
                <div class="num">
                  {{ item.number }}
                </div>
                <div class="label">
                  {{ item.problemType }}
                </div>
              </div>
            </div>
          </div>
        </Box>
        <Box
          :width="662"
          :height="408"
          :name="rightContent.bottom.name"
        >
          <Echart :option="rightContent.bottom.option" />
        </Box>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import SelectDate from '@/components/selectDate.vue'

import {
  Ref, computed, onMounted, ref, watch
} from 'vue'
import Echart from '@/components/chart.vue'
import MaintenanceDynamicsService from '../services/maintenanceDynamics.Service'
import { format, subDays } from 'date-fns'

const leftContent:Ref<any> = ref({
  top: [
    {
      name: '车辆总数',
      num: '166',
      icon: '30'
    },
    {
      name: '维修保养统计',
      option: {
        grid: {
          containLabel: true,
          right: 30,
          left: 50,
          bottom: '25%',
          top: '20%'
        },
        legend: {
          show: true,
          left: 'center',
          bottom: 30,
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#646464',
            fontSize: 18
          }
        },
        xAxis: {
          name: '日期',
          nameLocation: 'center',
          nameTextStyle: {
            fontSize: 16,
            color: 'white',
            padding: [ 20, 0 ]
          },
          type: 'category',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: 18
            // formatter: (value: number) => format( 1'时')
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          data: [ '3月26日', '3月27日', '3月28日', '3月29日', '3月30日', '4月1日' ]
        },
        yAxis: {
          name: '维保量/台',
          nameLocation: 'center',
          nameGap: 50,
          nameTextStyle: {
            color: '#fff',
            fontSize: 18
          },
          padding: 5,
          // max: 1000,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#A1A7B3'
              // type: 'dashed'
            }
          },
          axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
              color: '#fff'

            }
          }
        },
        series: {
          name: '维保车辆',
          type: 'line',
          symbolSize: 0,
          itemStyle: {
            normal: {
              // color: '#4293FD',
              lineStyle: {
                // color: '#4293FD',
                width: 2
              }
            }
          },
          data: [ 120, 132, 101, 134, 90, 230 ]
        },
        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)'
        }
      }
    },
    {
      name: '车辆运营状态分布',
      option: {
        title: {
          text: '总166', // 图标内容文本
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              formatter: '{b}\n{d}%',
              color: 'white'
            },
            data: [
              { name: '运营中', value: 30619 },
              { name: '维保中', value: 5921 },
              { name: '报废', value: 1153 }
            ]
          }
        ]
      }
    },
    {
      name: '车辆维保状态分别',
      option: {
        title: {
          text: '总166', // 图标内容文本
          left: 'center', // 图标内容水平居中
          top: 'center', // 图标内容垂直居中
          // 文本样式
          textStyle: {
            color: '#fff', // 图标内容文字颜色
            fontSize: '18px', // 图标内容文字大小
            fontWeight: 'normal'
          }
        },
        grid: {
          containLabel: true
        },
        // 图表图例
        legend: {
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 0, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 20
          }
        },
        series: [
          {
            type: 'pie', // 图表类型为饼图
            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
            avoidLabelOverlap: true, // 是否启用防止标签重叠策略
            showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
            label: {
              formatter: '{b}\n{d}%',
              color: 'white'
            },
            data: [
              { name: '隔日留交车辆', value: 30619 },
              { name: '保养中车辆', value: 5921 },
              { name: '维修中车辆', value: 1153 }
            ]
          }
        ]
      }
    }
  ],
  bottom: {
    head: [
      { title: '序号', render: (rowData: object, rowIndex: number) => rowIndex + 1 },
      { title: '车辆编号', key: 'code' },
      { title: '车牌号', key: 'licensePlate' },
      { title: '线路', key: 'line' },
      { title: '维修类型', key: 'maintenanceType' },
      { title: '故障原因', key: 'faultReason' },
      { title: '维修点位', key: 'maintenanceLocation' },
      { title: '报修时间', key: 'time' },
      { title: '维保结果', key: 'result' }

    ],
    body: [
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      },
      {
        num: 1, carNum: 1, carNumber: 1, line: '1路', type: '小修', cause: '测试', postion: 'tess', time: '2023-01-01 12:00', result: '已处理'
      }
    ],
    page: {
      size: 5,
      total: 10,
      num: 1
    },
    range: [ subDays(Date.now(), 7), Date.now() ]
  }
})

const rightContent = ref({
  top: [
    {
      name: '客流线路分布',
      option: {
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 50, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 18
          }
        },
        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: {
          bottom: 50,
          type: 'pie', // 图表类型为饼图
          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
          label: {
            show: true,
            fontSize: 16,
            formatter: '{b}： {c}个',
            color: 'white'
          },
          data: [
            { name: '维保场', value: 10 },
            { name: '运维驿站', value: 2 }
          ]
        }
      }
    },
    {
      name: '消费类型',
      option: {
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 50, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 18
          }
        },
        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: {
          bottom: 50,
          type: 'pie', // 图表类型为饼图
          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
          label: {
            show: true,
            fontSize: 16,
            formatter: '{b}： {c}辆',
            color: 'white'
          },
          data: [
            { name: '一保', value: 100 },
            { name: '二保', value: 50 },
            { name: '三保', value: 16 }
          ]
        }
      }
    },
    {
      name: '乘距分布',
      option: {
        // 图表图例
        legend: {
          show: true,
          type: 'scroll',
          orient: 'horizontal', // 图例排列方向
          icon: 'circle', // 图例样式为圆形
          itemWidth: 10, // 图例图形的宽度
          itemHeight: 16, // 图例图形的高度
          itemGap: 10, // 图例项之间的间隔
          left: 'center', // 图例距离容器右侧的距离
          bottom: 50, // 图例垂直居中
          textStyle: {
            color: 'white', // 图例文字颜色
            fontSize: 18
          }
        },
        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
        series: {
          bottom: 50,
          type: 'pie', // 图表类型为饼图
          radius: '50%', // 控制内外圆环的半径，30%代表内圆，60%代表外圆
          avoidLabelOverlap: true, // 是否启用防止标签重叠策略
          showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
          label: {
            show: true,
            fontSize: 16,
            formatter: '{b}： {c}万元',
            color: 'white'
          },
          data: [
            { name: '保养', value: 60 },
            { name: '维修', value: 100 }
          ]
        }
      }
    }
  ],
  bottom: {
    name: '维保执行情况',
    option: {
      title: {
        text: '总报修', // 图标内容文本
        subtext: '60',
        left: 'center', // 图标内容水平居中
        top: 'center', // 图标内容垂直居中
        // 文本样式
        textStyle: {
          color: '#fff', // 图标内容文字颜色
          fontSize: '18px', // 图标内容文字大小
          fontWeight: 'normal'
        },
        subtextStyle: {
          color: '#fff', // 图标内容文字颜色
          fontSize: '18px', // 图标内容文字大小
          fontWeight: 'normal'
        }
      },
      grid: {
        containLabel: true,
        top: 0,
        bottom: 0
      },
      // 图表图例
      legend: {
        show: true,
        type: 'scroll',
        orient: 'horizontal', // 图例排列方向
        icon: 'circle', // 图例样式为圆形
        itemWidth: 10, // 图例图形的宽度
        itemHeight: 16, // 图例图形的高度
        itemGap: 10, // 图例项之间的间隔
        left: 'center', // 图例距离容器右侧的距离
        bottom: 0, // 图例垂直居中
        textStyle: {
          color: 'white', // 图例文字颜色
          fontSize: 18
        }
      },
      series: {
        type: 'pie', // 图表类型为饼图
        radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
        avoidLabelOverlap: true, // 是否启用防止标签重叠策略
        showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
        label: {
          show: true,
          formatter: '{b}: {d}俩',
          color: 'white',
          fontSize: 18
        },
        data: [
          { name: '执行', value: 30 },
          { name: '竣工', value: 20 },
          { name: '在修', value: 10 }
        ]
      }
    }
  }
})

const checkupProblem = ref([] as any[])
const checkupProblemTotal = ref(0)

const maintenanceDynamicsService = new MaintenanceDynamicsService()

async function getMaintenanceCarStatus() {
  const res = await maintenanceDynamicsService.getMaintenanceCarStatus()
  leftContent.value.top[3].option!.series[0].data = res.map((item: any) => ({
    name: item.maintenanceStatus, value: item.number
  }))
}
getMaintenanceCarStatus()
async function getMaintenanceCarOperate() {
  const res = await maintenanceDynamicsService.getMaintenanceCarOperate()
  leftContent.value.top[2].option!.series[0].data = res.map((item: any) => ({
    name: item.carStatus, value: item.number
  }))
}
getMaintenanceCarOperate()

async function getMaintenanceRidingDistance() {
  const res = await maintenanceDynamicsService.getMaintenanceRidingDistance()
  rightContent.value.top[2].option!.series.data = res.map((item: any) => ({
    name: item.distanceType, value: item.number
  }))
}
getMaintenanceRidingDistance()

async function getMaintenanceLocationNum() {
  const res = await maintenanceDynamicsService.getMaintenanceLocationNum()
  rightContent.value.top[0].option!.series.data = res.map((item: any) => ({
    name: item.location, value: item.number
  }))
}
getMaintenanceLocationNum()
async function getMaintenanceConsumption() {
  const res = await maintenanceDynamicsService.getMaintenanceConsumption()
  rightContent.value.top[1].option!.series.data = res.map((item: any) => ({
    name: item.consumptionType, value: item.number
  }))
}
getMaintenanceConsumption()

async function getMaintenanceImplementation() {
  const res = await maintenanceDynamicsService.getMaintenanceImplementation()
  rightContent.value.bottom.option!.series.data = res.map((item: any) => ({
    name: item.executeType, value: item.number
  }))
}
getMaintenanceImplementation()

async function getMaintenanceStatistics(type: number) {
  const res = await maintenanceDynamicsService.getMaintenanceStatistics(type)

  const xData = res.map((item: any) => item.time)
  const carNumberData = res.map((item: any) => item.carNumber)

  leftContent.value.top[1].option.xAxis!.data = xData
  leftContent.value.top[1].option.series.data = carNumberData
}

async function getMaintenanceCheckupProblem() {
  const res = await maintenanceDynamicsService.getMaintenanceCheckupProblem()
  checkupProblem.value = res
  checkupProblemTotal.value = res.reduce((prev: any, item: { number: number }) => {
    prev += item.number
    return prev
  }, 0)
}
getMaintenanceCheckupProblem()
async function getBusLineDetailAll() {
  const res = await maintenanceDynamicsService.getBusLineDetailAll()
  leftContent.value.top[0].num = `${res.reduce((prev: any, item: { totalCar: number }) => {
    prev += item.totalCar
    return prev
  }, 0)}`
}
getBusLineDetailAll()
const tableData = computed(() => {
  const { num, size } = leftContent.value.bottom.page
  return leftContent.value.bottom.body.slice((num - 1) * size, num * size)
})
async function getMaintenanceDetail() {
  const { range } = leftContent.value.bottom
  const params = {
    startTime: format(range[0], 'yyyy-MM-dd HH:mm:ss'),
    endTime: format(range[1], 'yyyy-MM-dd HH:mm:ss')
  }
  const res = await maintenanceDynamicsService.getMaintenanceDetail(params)
  leftContent.value.bottom.body = res
  leftContent.value.bottom.page.total = res.length
}
getMaintenanceDetail()

watch(() => leftContent.value.bottom.range, getMaintenanceDetail)

function selectDatechange(type: any) {
  getMaintenanceStatistics(type)
}
onMounted(() => {
  selectDatechange(1)
})
</script>

<style lang="scss" scoped>
.left-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  &-count {
    display: flex;
    font-family: 'Impact Normal', 'Impact', sans-serif;
    font-weight: 408;
    font-style: normal;
    text-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;

    &>div:not(:last-child) {
      width: 84px;
      height: 110px;
      background-color: rgba(33, 133, 232, 0.298039215686275);
      border: solid 2px rgba(33, 133, 232, 1);
      border-radius: 10px;
      line-height: 110px;
      font-size: 70px;
      color: #FFFFFF;
      margin-right: 16px;
    }

    &>div:last-child {
      font-size: 24px;
      color: #80FFFF;
      height: 110px;
      line-height: 145px;
    }

  }

  :deep(.selectDate){
      top: 50px;
    }
}
.left-bottom{
  position: relative;
  :deep(.n-date-picker){
    position: absolute;
    right: 230px;
    top: 3px;
  }
  .page{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
.right-bottom,
.right-top {
  display: flex;
  justify-content: space-between;
}

.right-center{
  .lineSpeed{
    display: flex;
    align-items: center;
    height: 100%;
    >div{
      width: 50%;
    }
    .img{
      text-align: center;
      img{
      height: 262px;
      }
    }
    .control{
      width: 300px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      :deep(.n-select){
        .n-base-selection{
          border: 1px solid #5689F0;
          height: 50px;
          .n-base-selection-label{
            height: 100%;
            background: rgba(86, 137, 240, 0.298);
          }
        }
      }
      .btn{
      width: 173px;
      height: 71px;
      line-height: 71px;
      border-radius: 5px;
      background: rgba(24, 145, 255, 0.298);
      border: 1px solid #1891FF;
      color: #FFFFFF;
      font-size: 24px;
      text-align: center;
      margin-top: 53px;
      }
    }

  }
}
.right-bottom{
  .checkup{
    display: flex;
    height: 100%;
    .total{
      width: 30%;
      color: #FFFFFF;
      text-align: center;
      height: fit-content;
      margin: auto;
      >div{
        width: 100%;
      }
      .num{
        font-size: 60px;
        text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
      }
    }
    .list{
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-right: 40px;
      .item{
        width: 50%;
        height: 115px;
        background: url('../../../../assets/img/1-3.png') no-repeat;
        background-size: contain;
        text-align: center;
        background-position-y: 13px;
        .num{
          font-size: 50px;
          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
          color: #00FFFF;
          font-family: Impact Normal;
        }
        .label{
          font-size: 24px;
          color: #FFFFFF;
          text-shadow: 1px 1px 10px rgba(0, 255, 255, 0.698);
        }
      }
    }

  }
}
</style>