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

<template>
  <Layout>
    <template #left>
      <div class="left">
        <Box
          :width="665"
          :height="396"
          :name="'区域分布'"
          style="margin-bottom: 25px;"
        >
          <div class="body">
            <div class="total">
              <img
                src="../../../../assets/img/1-1.png"
                alt=""
              >
              <p>{{ region.total }}</p>
              <div>总量</div>
            </div>
            <Echart :option="region.option" />
          </div>
        </Box>
        <Box
          v-for="item in leftTitle"
          :key="item.name"
          :width="665"
          :height="396"
          :name="item.name"
          style="margin-bottom: 25px;"
        >
          <div class="body">
            <div
              v-if="item.name === '类型分布'"
              class="text"
            >
              站场总数
              <p>{{ typeTotal }}</p>
            </div>
            <Echart
              v-if="item.option"
              :option="item.option"
            />
          </div>
        </Box>
        <Box
          :width="665"
          :height="396"
          :name="'使用情况'"
        >
          <div class="usage">
            <div
              v-for="item, index in useData"
              :key="index"
              class="list"
            >
              <img
                src="../../../../assets/img/1-1.png"
                alt=""
              >
              <div class="value">
                {{ item.number }}
              </div>
              <p> {{ item.useType }}</p>
            </div>
          </div>
        </Box>
      </div>
    </template>
    <template #right>
      <div class="right">
        <Box
          :width="1340"
          :height="393"
          :name="'运营保障'"
          style="margin-bottom: 23px;"
        >
          <div class="commercial">
            <div
              v-for="item in operateData"
              :key="item.type"
              class="commercial-vehicles"
            >
              <div class="title">
                {{ item.type === 1 ? '营运车' : '非营运车' }}
              </div>
              <div class="top">
                <div class="list">
                  <div>{{ item.inNum }} <span>辆/次</span></div>
                  <p>进场车次</p>
                </div>
                <div class="list">
                  <div>{{ item.outNum }} <span>辆/次</span></div>
                  <p>出场车次</p>
                </div>
                <div class="list">
                  <div>{{ item.parkingNum }} <span>辆/次</span></div>
                  <p>泊车车次</p>
                </div>
              </div>
              <div class="bottom">
                <div class="list">
                  <div>{{ item.amParkingNum }} <span>辆/次</span></div>
                  <p>凌晨两点泊车</p>
                </div>
                <div class="list">
                  <div style="color: #E73D41;">
                    {{ item.retentionNum }} <span>辆/次</span>
                  </div>
                  <p>长期滞留车辆（大于7天）</p>
                </div>
              </div>
            </div>
          </div>
        </Box>
        <div class="chart-box">
          <Box
            :width="665"
            :height="396"
            :name="'充电趋势'"
          >
            <div class="contet">
              <div class="title">
                充电量\kw.h
              </div>
              <div class="chart">
                <Echart :option="powerChart" />
              </div>
            </div>
          </Box>
          <Box
            :width="665"
            :height="396"
            :name="'机场装机容量'"
          >
            <div class="airport">
              <div class="text">
                站场总数
                <p>{{ installedCapacityTotal }}</p>
              </div>
              <Echart :option="airportChart" />
            </div>
          </Box>
        </div>
        <div class="chart-box">
          <Box
            :width="665"
            :height="396"
            :name="'充电桩服务情况'"
          >
            <ul class="hd">
              <li
                v-for="item, index in chargingStatus"
                :key="index"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt=""
                >
                <div class="txt">
                  <p>{{ item.number }}</p>
                  <div>{{ item.chargingStatus }}</div>
                </div>
              </li>
            </ul>
            <ul class="percentage">
              <li>
                <div class="tt">
                  <p>今日充电车次</p>
                  <div>
                    {{ chargingStatistics.chargingNum }} <span> /{{ chargingStatistics.totalChargingNum }}</span>
                  </div>
                </div>
                <n-progress
                  type="line"
                  :percentage="+(chargingStatistics.chargingNum / chargingStatistics.totalChargingNum * 100).toFixed(2)"
                  :show-indicator="false"
                  :indicator-placement="'inside'"
                  processing
                  :stroke-width="15"
                />
              </li>
              <li>
                <div class="tt">
                  <p>今日充电电量 kw.h</p>
                  <div>
                    {{ chargingStatistics.electricityNum }} <span> /{{ chargingStatistics.totalElectricityNum }}</span>
                  </div>
                </div>
                <n-progress
                  type="line"
                  :percentage="+(chargingStatistics.electricityNum / chargingStatistics.totalElectricityNum * 100).toFixed(2)"
                  :show-indicator="false"
                  :indicator-placement="'inside'"
                  processing
                  :stroke-width="15"
                />
              </li>
            </ul>
          </Box>
          <Box
            :width="665"
            :height="396"
            :name="'资源使用率'"
          >
            <ul class="btn">
              <li
                v-for="item,key in typeMap"
                :key="key"
                :class="{active:type === key}"
                @click="type = key"
              >
                {{ item }}
              </li>
            </ul>
            <n-data-table
              :columns="columns"
              :data="tableData"
              max-height="200"
            />
          </Box>
        </div>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import {
  Ref, computed, h, ref
} from 'vue'
import Echart from '@/components/chart.vue'
import StationManagementService from '../services/stationManagement.service'
const leftTitle: Ref<any[]> = ref([ {
  name: '类型分布',
  option: {
    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
    tooltip: {
      formatter: '{b}: {c}个 ,占比: {d}%'
    },
    legend: {
      orient: 'horizontal',
      bottom: '0',
      icon: 'circle',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: {
      type: 'pie',
      radius: [ '45%', '60%' ],
      label: {
        show: true,
        color: '#fff',
        formatter: '{b}: {c}个',
        fontSize: 14
      },
      data: [
        { value: 1048, name: '首末班' },
        { value: 735, name: '枢纽站' },
        { value: 580, name: '停车场' },
        { value: 580, name: '保养场' }
      ]
    }
  }
},
{
  name: '面积分布',
  option: {
    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
    tooltip: {
      formatter: '{b}: {c}个 ,占比: {d}%'
    },
    legend: {
      orient: 'horizontal',
      bottom: '0',
      icon: 'circle',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: {
      type: 'pie',
      radius: '70%',
      label: {
        show: true,
        color: '#fff',
        formatter: '{b}: {c}个',
        fontSize: 14
      },
      data: [
        { value: 1048, name: '<=500㎡' },
        { value: 735, name: '500~2000㎡' },
        { value: 580, name: '2000~5000㎡' },
        { value: 580, name: '5000~10000㎡' }
      ]
    }
  }
},
{
  name: '场站权属情况',
  option: {
    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
    tooltip: {
      formatter: '{b}: {c}个 ,占比: {d}%'
    },
    legend: {
      orient: 'horizontal',
      bottom: '0',
      icon: 'circle',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: {
      type: 'pie',
      radius: '70%',
      label: {
        show: true,
        color: '#fff',
        formatter: '{b}: {c}个',
        fontSize: 14
      },
      data: [
        { value: 1048, name: '自有' },
        { value: 735, name: '临时使用' },
        { value: 580, name: '先借后租' },
        { value: 580, name: '租用' }
      ]
    }
  }
},
{
  name: '建设时间',
  option: {
    tooltip: {
      trigger: 'axis',
      formatter: '{b} <br/>数量: {c}个',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '1%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      show: true,
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      data: [ '超过十年', '5-7年', '近3年', '3-5年' ],
      axisLabel: {
        color: '#fff',

        fontSize: 16
      },
      axisTick: {
        alignWithLabel: true
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgb(34,43,57)'
        }
      }
    },
    series: {
      name: '数量',
      type: 'bar',
      barMaxWidth: '40',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [ {
            offset: 0, color: '#00fdff' // 0% 处的颜色
          }, {
            offset: 1, color: '#00aaff08' // 100% 处的颜色
          } ],
          global: false // 缺省为 false
        }
      },
      data: [ 10, 52, 200, 334, 390, 330, 220 ]
    }
  }
} ])
// 区域分布
const region = ref({
  total: 40,
  option: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '1%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      show: false,
      textStyle: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'category',
      data: [ '吊挂式', '独立式', '嵌入式' ],
      axisLabel: {
        color: '#fff',
        fontSize: 16
      },
      axisTick: {
        alignWithLabel: true
      },
      splitLine: {
        show: false
      }
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      },

      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgb(34,43,57)'
        }
      }
    },
    series: {
      name: '客流量',
      type: 'bar',
      barMaxWidth: '40',
      itemStyle: {
        color: 'rgb(86,137,239)',
        borderRadius: [ 0, 20, 20, 0 ]
      },
      label: {
        show: true,
        position: 'inside',
        color: '#fff'
      },
      data: [ 10, 52, 200, 334, 390, 330, 220 ]
    }
  }
})

const powerChart = ref({
  grid: {
    left: '3%',
    right: '6%',
    bottom: '20%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    formatter: '今日{b} <br/>充电量: {c}kw·h'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      color: '#fff',
      fontSize: 16
    },
    data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgb(34,43,57)'
      }
    },
    axisLabel: {
      color: '#fff',
      formatter: '{value} kw·h',
      fontSize: 16
    }
  },
  dataZoom: {
    show: true,
    type: 'slider'
  },
  series: {
    data: [ 820, 932, 901, 934, 1290, 1330, 1320 ],
    type: 'line',
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [ {
          offset: 0, color: '#FFD35D ' // 0% 处的颜色
        }, {
          offset: 0.5, color: '#7ec2f3 ' // 100% 处的颜色
        }, {
          offset: 1, color: '#1890ff ' // 100% 处的颜色
        } ],
        global: false // 缺省为 false
      }
    }
  }
})
const airportChart = ref({
  color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}个 ,占比: {d}%'

  },
  legend: {
    orient: 'horizontal',
    bottom: '0',
    icon: 'circle',
    textStyle: {
      color: '#fff',
      fontSize: 16
    }
  },
  series: {
    type: 'pie',
    radius: [ '45%', '60%' ],
    label: {
      show: true,
      color: '#fff',
      formatter: '{b}: {c}个',
      fontSize: 14
    },
    data: [
      { value: 1048, name: '<=500m' },
      { value: 735, name: '500~2000' },
      { value: 580, name: '2000~5000' },
      { value: 580, name: '5000~10000' }

    ]

  }
})
const originData = ref([ {
  admissionRate: 0,
  stationName: 'xxx'
} ])
const type = ref('admissionRate')
const typeMap = {
  admissionRate: '各场站入场率',
  chargingCapacity: '各充电场站充电量',
  maintenanceNum: '各维保场维修保养车辆数',
  usageRate: '运维驿站使用率'
}
const tableData = computed(() => originData.value.map((item:any) => ({
  stationName: item.stationName,
  rate: item[type.value]
})))
const columns = [
  {
    title: '序号',
    render: (_: any, rowIndex: number) => h('span', rowIndex + 1)
  },
  {
    title: '场站',
    key: 'stationName'
  },
  {
    title: '入场率',
    key: 'rate'
  } ]

const stationManagementService = new StationManagementService()

async function getStationRegion() {
  const res = await stationManagementService.getStationRegion()
  const yData = []
  const seriesData = []
  let total = 0

  for (let i = 0; i < res.length; i++) {
    const item = res[i]
    yData.push(item.region)
    seriesData.push(item.passengerFlow)
    total += item.passengerFlow
  }

  region.value.option.yAxis.data = yData
  region.value.option.series.data = seriesData
  region.value.total = total
}
getStationRegion()

const typeTotal = ref(0)
async function getStationTypes() {
  const res = await stationManagementService.getStationTypes()
  const seriesData = []
  let total = 0

  for (let i = 0; i < res.length; i++) {
    const item = res[i]
    seriesData.push({
      name: item.type,
      value: item.number
    })
    total += item.number
  }
  leftTitle.value[0].option.series.data = seriesData
  typeTotal.value = total
}
getStationTypes()
async function getStationArea() {
  const res = await stationManagementService.getStationArea()
  const seriesData = []
  let total = 0

  for (let i = 0; i < res.length; i++) {
    const item = res[i]
    seriesData.push({
      name: item.areaType,
      value: item.number
    })
    total += item.number
  }
  leftTitle.value[1].option.series.data = seriesData
  typeTotal.value = total
}
getStationArea()
async function getStationOwnership() {
  const res = await stationManagementService.getStationOwnership()
  const seriesData = []
  let total = 0

  for (let i = 0; i < res.length; i++) {
    const item = res[i]
    seriesData.push({
      name: item.ownership,
      value: item.number
    })
    total += item.number
  }
  leftTitle.value[2].option.series.data = seriesData
  typeTotal.value = total
}
getStationOwnership()
async function getStationConstruct() {
  const res = await stationManagementService.getStationConstruct()
  const xData = []
  const seriesData = []

  for (let i = 0; i < res.length; i++) {
    const item = res[i]
    xData.push(item.constructSituation)
    seriesData.push(item.number)
  }
  leftTitle.value[3].option.xAxis.data = seriesData
  leftTitle.value[3].option.series.data = seriesData
}
getStationConstruct()

const useData = ref([] as any[])
async function getStationUse() {
  useData.value = await stationManagementService.getStationUse()
}
getStationUse()

const operateData = ref([] as any[])
async function getStationOperate() {
  operateData.value = await stationManagementService.getStationOperate()
}
getStationOperate()

async function getStationChargingTrends() {
  const res = await stationManagementService.getStationChargingTrends()
  const xData = []
  const seriesData = []

  for (let i = 0; i < res.length; i++) {
    const item = res[i]
    xData.push(item.time.slice(11))
    seriesData.push(item.number)
  }
  powerChart.value.xAxis.data = xData
  powerChart.value.series.data = seriesData
}
getStationChargingTrends()

const installedCapacityTotal = ref(0)
async function getStationInstalledCapacity() {
  const res = await stationManagementService.getStationInstalledCapacity()
  const seriesData = []
  let total = 0

  for (let i = 0; i < res.length; i++) {
    const item = res[i]
    seriesData.push({
      name: item.type,
      value: item.number
    })
    total += item.number
  }
  airportChart.value.series.data = seriesData
  installedCapacityTotal.value = total
}
getStationInstalledCapacity()

const chargingStatus = ref([
  { chargingStatus: '空闲', number: 0 },
  { chargingStatus: '充满', number: 0 },
  { chargingStatus: '在充', number: 0 },
  { chargingStatus: '故障', number: 0 }
])
async function getStationChargingStatus() {
  const res = await stationManagementService.getStationChargingStatus()
}
getStationChargingStatus()

const chargingStatistics = ref({
  chargingNum: 1,
  totalChargingNum: 2,
  electricityNum: 1,
  totalElectricityNum: 1
})
async function getStationChargingStatistics() {
  chargingStatistics.value = await stationManagementService.getStationChargingStatistics()
}
getStationChargingStatistics()
async function getStationResourceRate() {
  originData.value = await stationManagementService.getStationResourceRate()
}
getStationResourceRate()
</script>

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

  .usage {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 120px;
    justify-content: space-between;
    align-items: center;

    .list {
      text-align: center;

      img {
        width: 80px;
        height: 80px;
      }

      .value {
        color: #00FFFF;
        font-size: 50px;

      }

      p {
        font-size: 24px;
      }
    }

  }

  .body {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;

    .total {
      width: 136px;
      text-align: center;

      img {
        margin-top: 80px;

        width: 100px;
        height: 100px;
      }

      p {
        font-size: 60px;
      }

      div {
        font-size: 24px;
      }
    }

    .plot {
      flex: 1;
    }

    .text {
      position: absolute;
      left: 42%;
      top: 40%;
      font-size: 28px;
      text-align: center;
    }

  }

}

.right {
  width: 1340px;
  color: #fff;

  ul {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
    }
  }

  .commercial {
    display: flex;
    justify-content: space-between;

    .commercial-vehicles {
      width: 49%;

      .title {
        color: #F59A23;
        font-size: 24px;
        line-height: 74px;
        text-indent: 10px;
      }

      .list {
        width: 33.33333%;
        border: 1px solid rgba(0, 255, 255, 0.298);
        height: 137px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;

        div {
          font-size: 50px;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            font-size: 20px;
            line-height: 50px;
            margin-left: 10px;
            color: #fff;
          }
        }

        p {
          color: #80FFFF;
        }
      }

      .top {
        display: flex;
      }

      .bottom {
        display: flex;

        .list {
          width: 50%;
        }
      }

    }
  }

  .chart-box {
    display: flex;
    justify-content: space-between;

    .airport {
      width: 100%;
      height: 100%;
      position: relative;

      .text {
        position: absolute;
        left: 42%;
        top: 40%;
        font-size: 28px;
        text-align: center;
      }
    }

    .contet {
      width: 100%;
      height: 100%;
      display: flex;

      .title {
        font-size: 16px;
        writing-mode: vertical-lr;
        /* 从上到下排列，默认为从左到右 */
        text-orientation: sideways;
        transform: rotate(180deg);
        text-align: center;
        height: 100%;
      }

      .chart {
        flex: 1;
      }
    }

    .hd {
      display: flex;
      margin-top: 18px;

      li {
        display: flex;
        width: 25%;
        height: 137px;
        border: 1px solid rgba(0, 255, 255, 0.298);
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
        }

        .txt {
          margin-left: 10px;

          p {

            font-size: 26px;
            line-height: 40px;
          }

          div {
            font-size: 18px;
            color: #80FFFF;
          }
        }
      }

    }

    .percentage {
      padding-right: 40px;

      li {
        margin-top: 30px;

        .tt {
          display: flex;
          justify-content: space-between;
          line-height: 40px;
          font-size: 20px;
          margin-bottom: 10px;

          div {
            font-size: 34px;
            color: #80FFFF;

            span {
              font-size: 24px;
              color: #fff;
            }
          }

        }
      }
    }

    .btn {
      display: flex;
      flex-wrap: wrap;

      // justify-content: space-between;
      li {

        line-height: 33px;
        border-radius: 100px;
        border: 1px solid #80FFFF;
        padding: 0 10px;
        margin: 10px;
        font-size: 20px;
        cursor: pointer;
        &.active{
          background: #2f64aa;
        }

      }
    }
  }
}
</style>