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>40</p>
              <div>总量</div>
            </div>
            <Echart :option="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>100</p>
            </div>
            <Echart
              v-if="item.option"
              :option="item.option"
            />
          </div>
        </Box>
        <Box
          :width="665"
          :height="396"
          :name="'使用情况'"
        >
          <div class="usage">
            <div class="list">
              <img
                src="../../../../assets/img/1-1.png"
                alt=""
              >
              <div class="value">
                0
              </div>
              <p>规划</p>
            </div>
            <div class="list">
              <img
                src="../../../../assets/img/1-1.png"
                alt=""
              >
              <div class="value">
                0
              </div>
              <p>在建</p>
            </div>
            <div class="list">
              <img
                src="../../../../assets/img/1-1.png"
                alt=""
              >
              <div class="value">
                0
              </div>
              <p>使用</p>
            </div>
          </div>
        </Box>
      </div>
    </template>
    <template #center>
      <div>666</div>
    </template>
    <template #right>
      <div class="right">
        <Box
          :width="1340"
          :height="393"
          :name="'运营保障'"
          style="margin-bottom: 23px;"
        >
          <div class="commercial">
            <div class="commercial-vehicles">
              <div class="title">
                营运车
              </div>
              <div class="top">
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>进场车次</p>
                </div>
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>出场车次</p>
                </div>
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>泊车车次</p>
                </div>
              </div>
              <div class="bottom">
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>凌晨两点泊车</p>
                </div>
                <div class="list">
                  <div style="color: #E73D41;">
                    100 <span>辆/次</span>
                  </div>
                  <p>长期滞留车辆（大于7天）</p>
                </div>
              </div>
            </div>
            <div class="commercial-vehicles">
              <div class="title">
                非营运车
              </div>
              <div class="top">
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>进场车次</p>
                </div>
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>出场车次</p>
                </div>
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>泊车车次</p>
                </div>
              </div>
              <div class="bottom">
                <div class="list">
                  <div>100 <span>辆/次</span></div>
                  <p>凌晨两点泊车</p>
                </div>
                <div class="list">
                  <div style="color: #E73D41;">
                    100 <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>100</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 in 4"
                :key="item"
              >
                <img
                  src="../../../../assets/img/1-1.png"
                  alt=""
                >
                <div class="txt">
                  <p>100</p>
                  <div>进厂车次</div>
                </div>
              </li>
            </ul>
            <ul class="percentage">
              <li>
                <div class="tt">
                  <p>今日充电车次</p>
                  <div>73 <span>/100</span> </div>
                </div>
                <n-progress
                  type="line"
                  :percentage="60"
                  :show-indicator="false"
                  :indicator-placement="'inside'"
                  processing
                  :stroke-width="15"
                />
              </li>
              <li>
                <div class="tt">
                  <p>今日充电电量 kw.h</p>
                  <div>73 <span>/100</span> </div>
                </div>
                <n-progress
                  type="line"
                  :percentage="60"
                  :show-indicator="false"
                  :indicator-placement="'inside'"
                  processing
                  :stroke-width="15"
                />
              </li>
            </ul>
          </Box>
          <Box
            :width="665"
            :height="396"
            :name="'资源使用率'"
          >
            <ul class="btn">
              <li>各场站入场率</li>
              <li>各充电场站充电量</li>
              <li>各维保场维修保养车辆数</li>
              <li>运维驿站使用率</li>
            </ul>
          </Box>
        </div>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import { ref } from 'vue'
import Echart from '@/components/chart.vue'
const leftTitle = [ {
  name: '类型分布',
  option: {
    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      bottom: '0',
      icon: 'circle',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: [
      {
        type: 'pie',
        radius: [ '55%', '75%' ],
        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: {
      trigger: 'item'
    },
    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: '<=500m' },
          { 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: {
      trigger: 'item'
    },
    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',
      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',
        barWidth: '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 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',
      barWidth: '40%',
      itemStyle: {
        color: 'rgb(86,137,239)',
        barBorderRadius: [ 0, 20, 20, 0 ]
      },
      label: {
        show: true,
        position: 'inside',
        color: '#fff'
      },
      data: [ 10, 52, 200, 334, 390, 330, 220 ]
    }

  ]
}
const powerChart = {
  tooltip: {
    trigger: 'axis'
  },
  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',

      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 = {
  color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    bottom: '0',
    icon: 'circle',
    textStyle: {
      color: '#fff',
      fontSize: 16
    }
  },
  series: [
    {
      type: 'pie',
      radius: [ '55%', '75%' ],
      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' }

      ]

    }
  ]
}
</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;
            }
          }

        }
      }
    }
  }
}
</style>