web/src/views/dashboard-screen/screen/screenDlts/screenDlts.vue

<template>
  <div class="dlts-wrap">
    <div class="o-item">远动调试</div>
    <div class="o-item">电力受电线路</div>
    <div class="o-item">电力变配电所</div>
    <div class="o-item">
      <v-chart autoresize :option="options[0]"/>
    </div>
    <div class="o-item">
      <v-chart autoresize :option="options[1]"/>
    </div>
    <div class="o-item">
      <v-chart autoresize :option="options[2]"/>
    </div>
    <div class="o-item">
      <Zydbsx :data="dataList[0]"/>
    </div>
    <div class="o-item">
      <Zydbsx :data="dataList[1]"/>
    </div>

    <div class="o-item">
      <Zydbsx :data="dataList[2]"/>
    </div>
  </div>
</template>

<script>
import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'

export default {
  name: 'ScreenDlts',
  components: {Zydbsx},
  data() {
    return {
      color: ['rgb(96, 150, 230)', 'rgb(88, 182, 229)'],
      basicOption: {
        xAxis: {
          type: 'category',
          data: ['本月计划', '本月完成']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      },
      options: {
        0: {},
        1: {},
        2: {}
      },
      dataList: {
        0: [
          {name: '本月已完成数', value: 4},
          {name: '本月未完成数', value: 8},
          {
            name: '未完成明细',
            value: null,
            children: [{name: '吉蛟03号箱变（吉林隧道）'}, {name: '吉蛟12号箱变（草木沟隧道）'}, {name: '吉蛟20号箱变（拉法山隧道）'}]
          },
          {name: '年度剩余数', value: 0},
          {name: '下月计划完成数', value: 0}
        ],
        1: [
          {name: '本月已完成数', value: 4},
          {name: '本月未完成数', value: 8},
          {
            name: '未完成明细',
            value: null,
            children: [{name: '吉蛟03号箱变（吉林隧道）'}, {name: '吉蛟12号箱变（草木沟隧道）'}, {name: '吉蛟20号箱变（拉法山隧道）'}]
          },
          {name: '年度剩余数', value: 0},
          {name: '下月计划完成数', value: 0}
        ],
        2: [
          {name: '本月已完成数', value: 4},
          {name: '本月未完成数', value: 8},
          {
            name: '未完成明细',
            value: null,
            children: [{name: '吉蛟03号箱变（吉林隧道）'}, {name: '吉蛟12号箱变（草木沟隧道）'}, {name: '吉蛟20号箱变（拉法山隧道）'}]
          },
          {name: '年度剩余数', value: 0},
          {name: '下月计划完成数', value: 0}
        ]
      }
    }
  },
  created() {
    this.getOption()

  },
  methods: {
    getOption() {
      this.options[0] = Object.assign(this.basicOption)
      this.options[1] = Object.assign(this.basicOption)
      this.options[2] = Object.assign(this.basicOption)
    }
  }
}
</script>

<style scoped lang="scss">
.dlts-wrap {
  width: 100%;
  height: calc(100% - 70px);
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 8fr 5fr;
  grid-row-gap: 1fr;
  grid-column-gap: 200px;
  color: #ffffff;

  .o-item {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep {
      .row-item {
        font-size: 1.0vw;
      }
    }
  }

  * {
    color: #ffffff;
  }
}

</style>