<template>
  <Layout>
    <template #left>
      <div class="left">
        <Box
          :width="1380"
          :height="353"
          name="线路基本情况"
        >
          <div class="title">
            设备数量
          </div>
          <div
            ref="deviceNumber"
            class="chart"
          />
          <div class="bar">
            <div class="bar-box">
              <div
                ref="deviceValue"
                class="bar-chart"
              />
              <div class="ct">
                <p>完好度</p>
                <div>100.00%</div>
              </div>
            </div>

            <div class="value">
              <p>全部 <span>500</span></p>
              <p>完好 <span>500</span></p>
            </div>
          </div>
        </Box>
        <Box
          :width="1380"
          :height="353"
          name="车型展示"
          style="margin-top: 22px;"
        >
          <div class="title">
            数量/辆
          </div>
          <div
            ref="carNumber"
            class="chart"
          />
          <div class="bar">
            <div class="bar-box">
              <div
                ref="carValue"
                class="bar-chart"
              />
              <div class="ct">
                <p>完好度</p>
                <div>100.00%</div>
              </div>
            </div>

            <div class="value">
              <p>全部 <span>500</span></p>
              <p>完好 <span>500</span></p>
            </div>
          </div>
        </Box>
        <Box
          :width="1380"
          :height="353"
          name="电子站牌"
          style="margin-top: 22px;"
        >
          <div class="plate">
            <div
              ref="plantNumber"
              class="chart"
            />
            <p>数量/座</p>
          </div>
          <div class="bar">
            <div class="bar-box">
              <div
                ref="plantValue"
                class="bar-chart"
              />
              <div class="ct">
                <p>完好度</p>
                <div>100.00%</div>
              </div>
            </div>

            <div class="value">
              <p>全部 <span>500</span></p>
              <p>完好 <span>500</span></p>
            </div>
          </div>
        </Box>
      </div>
    </template>
    <template #right>
      <div class="right">
        <Box
          :width="1380"
          :height="353"
          name="洗车机"
        >
          <div class="bar">
            <div class="bar-box">
              <div
                ref="washerBar1"
                class="bar-chart"
              />
              <div class="ct">
                <p>完好度</p>
                <div>100.00%</div>
              </div>
            </div>

            <div class="value">
              <p>全部 <span>500</span></p>
              <p>完好 <span>500</span></p>
            </div>
          </div>
          <div class="content">
            <div class="value">
              <p
                v-for="item in 6"
                :key="item"
              >
                1
              </p>
            </div>
            <div class="name">
              累计洗车数
            </div>
          </div>
          <div class="bar2">
            <div class="value">
              洗车机机年龄分布
            </div>
            <div
              ref="washerBar2"
              class="chart"
            />
          </div>
        </Box>
        <Box
          :width="1380"
          :height="353"
          name="充电站"
          style="margin-top: 22px;"
        >
          <div class="bar">
            <div class="bar-box">
              <div
                ref="powerBar1"
                class="bar-chart"
              />
              <div class="ct">
                <p>完好度</p>
                <div>100.00%</div>
              </div>
            </div>

            <div class="value">
              <p>全部 <span>500</span></p>
              <p>完好 <span>500</span></p>
            </div>
          </div>
          <div class="content">
            <div class="value">
              <p
                v-for="item in 6"
                :key="item"
              >
                1
              </p>
            </div>
            <div class="name">
              累计洗车数
            </div>
          </div>
          <div class="bar2">
            <div class="value">
              充电设备分布
            </div>
            <div
              ref="powerBar2"
              class="chart"
            />
          </div>
        </Box>
        <Box
          :width="1380"
          :height="353"
          name="充电站"
          style="margin-top: 22px;"
        >
          <div class="bar">
            <div class="bar-box">
              <div
                ref="vehiclePie"
                class="bar-chart"
              />
              <div class="ct">
                <p>完好度</p>
                <div>100.00%</div>
              </div>
            </div>

            <div class="value">
              <p>全部 <span>500</span></p>
              <p>完好 <span>500</span></p>
            </div>
          </div>
          <div class="vehicle">
            <div class="title">
              设备数量
            </div>
            <div
              ref="vehicleBar"
              class="vehicle-chart "
            />
          </div>
        </Box>
      </div>
    </template>
  </Layout>
</template>

<script setup lang='ts'>
import Layout from '@/components/layout.vue'
import Box from '@/components/box.vue'
import * as echarts from 'echarts'
import { ref, nextTick } from 'vue'
// 设备数量折线图
const deviceNumber = ref()
// 设备数量饼图
const deviceValue = ref()
// 设备数量饼图和折线图
function setDevice() {
  // 折线图
  const option = {
    color: [ 'rgb(91,143,249)', 'rgb(90,216,166)', 'rgb(93,112,146)', 'rgb(246,189,22)', 'rgb(111,94,249)' ],
    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: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
        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%',
        stack: 'total',
        data: [ 10, 52, 200, 334, 390, 330, 220 ]
      },
      {
        name: '电子站牌',
        type: 'bar',
        barWidth: '40%',
        stack: 'total',
        data: [ 10, 52, 200, 334, 390, 330, 220 ]
      },
      {
        name: '洗车机',
        type: 'bar',
        barWidth: '40%',
        stack: 'total',
        data: [ 10, 52, 200, 334, 390, 330, 220 ]
      },
      {
        name: '充电桩',
        type: 'bar',
        barWidth: '40%',
        stack: 'total',
        data: [ 10, 52, 200, 334, 390, 330, 220 ]
      },
      {
        name: '车载部件',
        type: 'bar',
        barWidth: '40%',
        stack: 'total',
        data: [ 10, 52, 200, 334, 390, 330, 220 ]
      }
    ]
  }
  const mychart = echarts.init(deviceNumber.value)
  mychart.setOption(option)
  // 柱状图
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: [ '65%', '85%' ],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' }

        ]
      }
    ]
  }
  const pieChart = echarts.init(deviceValue.value)
  pieChart.setOption(pieOption)
}
// 线路柱状图
const carNumber = ref()
// 线路饼图
const carValue = ref()
// 设备线路基本情况
function setLine() {
  // 折线图
  const 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: [ 'Wed', '12.8银隆双层观光', '12.8银隆中海豚', 'Thu', 'Fri', 'Sat', 'Sun' ],
        axisLabel: {
          color: '#fff',
          rotate: -45,
          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 mychart = echarts.init(carNumber.value)
  mychart.setOption(option)
  // 柱状图
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: [ '65%', '85%' ],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' }

        ]
      }
    ]
  }
  const pieChart = echarts.init(carValue.value)
  pieChart.setOption(pieOption)
}

// 线路柱状图
const plantNumber = ref()
// 线路饼图
const plantValue = ref()
// 设备线路基本情况
function setPlant() {
  // 折线图
  const option = {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '1%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      show: true,
      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: '50%',
        itemStyle: {
          color: {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [ {
              offset: 0, color: '#6A5BF0' // 0% 处的颜色
            }, {
              offset: 1, color: '#00aaff08' // 100% 处的颜色
            } ],
            global: false // 缺省为 false
          }
        },
        data: [ 10, 52, 200, 334, 390, 330, 220 ]
      }

    ]
  }
  const mychart = echarts.init(plantNumber.value)
  mychart.setOption(option)
  // 柱状图
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: [ '65%', '85%' ],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' }

        ]
      }
    ]
  }
  const pieChart = echarts.init(plantValue.value)
  pieChart.setOption(pieOption)
}

// 线路柱状图
const washerBar1 = ref()
// 线路饼图
const washerBar2 = ref()
// 设备线路基本情况
function setWasher() {
  // 第一个饼图
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: [ '65%', '85%' ],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' }

        ]
      }
    ]
  }
  // 第二个饼图
  const pieChart = echarts.init(washerBar1.value)
  pieChart.setOption(pieOption)
  const pieOption2 = {
    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      bottom: '0',
      icon: 'circle',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        type: 'pie',
        radius: '70%',
        label: {
          show: true,
          color: '#fff',
          formatter: '{b}: {c}个',
          fontSize: 14
        },
        data: [
          { value: 1048, name: '0-5年' },
          { value: 735, name: '6-10年' },
          { value: 580, name: '11-15年' }

        ]

      }
    ]
  }
  const pieChart2 = echarts.init(washerBar2.value)
  pieChart2.setOption(pieOption2)
}
// 线路柱状图
const powerBar1 = ref()
// 线路饼图
const powerBar2 = ref()
// 充电站
function setPower() {
  // 第一个饼图
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: [ '65%', '85%' ],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' }

        ]
      }
    ]
  }
  // 第二个饼图
  const pieChart = echarts.init(powerBar1.value)
  pieChart.setOption(pieOption)
  const pieOption2 = {
    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      bottom: '0',
      icon: 'circle',
      textStyle: {
        color: '#fff'
      }
    },
    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: '充电枪' }

        ]

      }
    ]
  }
  const pieChart2 = echarts.init(powerBar2.value)
  pieChart2.setOption(pieOption2)
}

// 线路柱状图
const vehicleBar = ref()
// 线路饼图
const vehiclePie = ref()
// 车载部件
function setVehicle() {
  // 折线图
  const 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: [ 'Wed', '12.8银隆双层观光', '12.8银隆中海豚', 'Thu', 'Fri', 'Sat', 'Sun' ],
        axisLabel: {
          color: '#fff',
          rotate: -45,
          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 mychart = echarts.init(vehicleBar.value)
  mychart.setOption(option)
  // 柱状图
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: [ '65%', '85%' ],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' }

        ]
      }
    ]
  }
  const pieChart = echarts.init(vehiclePie.value)
  pieChart.setOption(pieOption)
}
nextTick(() => {
  setDevice()
  setLine()
  setPlant()
  setWasher()
  setPower()
  setVehicle()
})
</script>

<style lang="scss" scoped>
.left {
  color: #fff;

  :deep(.box-content) {
    display: flex;

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

    .chart {
      width: 1040px;
      // height: 100%;
    }

    .bar {
      flex: 1;

      &-box {
        width: 100%;
        height: 214px;
        position: relative;
      }

      &-chart {
        width: 100%;
        height: 214px;
      }

      .ct {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 26px;

        p {
          font-size: 20px;
        }

      }

      .value {
        width: 100%;

        p {
          text-align: center;

          span {
            color: #80FFFF;
            margin-left: 5px;
            font-size: 20px;
            line-height: 30px;
          }
        }
      }
    }

    .plate {
      width: 1059px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .chart {
        width: 100%;
        flex: 1;
      }

      p {
        text-align: center;
      }
    }
  }

}

.right {
  color: #fff;

  :deep(.box-content) {
    display: flex;
  }

  .bar {
    width: 281px;

    &-box {
      width: 100%;
      height: 214px;
      position: relative;
    }

    &-chart {
      width: 100%;
      height: 214px;
    }

    .ct {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 26px;

      p {
        font-size: 20px;
      }

    }

    .value {
      width: 100%;

      p {
        text-align: center;

        span {
          color: #80FFFF;
          margin-left: 5px;
          font-size: 20px;
          line-height: 30px;
        }
      }
    }
  }

  .content {
    width: 556px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .value {
      display: flex;
      width: 90%;
      justify-content: space-between;
      p {
        background: #15305D;
        width: 67px;
        height: 89px;
        border-radius: 10px;
        line-height: 89px;
        text-align: center;
        font-size: 60px;
      }
    }

    .name {
      font-size: 24px;
      color: #80FFFF;
      margin-top: 10px;
    }
  }
  .bar2{
    flex: 1;
    display: flex;
    flex-direction: column;
    .value{
      text-align: center;
      color: #80FFFF;
      margin-top: 32px;
    }
    .chart{
      flex: 1;
    }
  }
  .vehicle{
    flex: 1;
    display: flex;
    .title{
      font-size: 14px;
      writing-mode: vertical-lr;
      /* 从上到下排列，默认为从左到右 */
      text-orientation: sideways;
      transform: rotate(180deg);
      text-align: center;
      height: 100%;
    }
    .vehicle-chart{
     flex: 1;
    }
  }
}
</style>