web-prod2/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 a-scrool">
      <Zydbsx v-if="dataListReady" :fetchData="false" :data="dataList[0]"/>
    </div>
    <div class="o-item a-scrool">
      <Zydbsx v-if="dataListReady" :fetchData="false"  :data="dataList[1]"/>
    </div>

    <div class="o-item a-scrool">
      <Zydbsx v-if="dataListReady" :fetchData="false"  :data="dataList[2]"/>
    </div>
  </div>
</template>

<script>
import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'
import {
  chartDlbpdsby,
  chartDlbpdsbyDetail,
  chartDlsdxlBy,
  chartDlsdxlbyDetail,
  chartDlydtsby,
  chartDlydtsbyDetail
} from '@/api/dashboard-json'
import _ from 'lodash'

export default {
  name: 'ScreenDlts',
  components: {Zydbsx},
  data() {
    return {
      basicOption: {
        xAxis: {
          type: 'category',
          data: ['本月计划', '本月完成']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [10, 20],
            type: 'bar',
            itemStyle: {
              normal: {
                color: (params) => {
                  const color = ['rgb(96, 150, 230)', 'rgb(4,245,69)']
                  return color[params.dataIndex]
                }
              }
            }
          }
        ]
      },
      options: {
        0: {},
        1: {},
        2: {}
      },
      dataList: [
        [
          {name: '本月已完成数', value: 0},
          {name: '本月未完成数', value: 0},
          {
            name: '未完成明细',
            value: null,
            children: [{name: '-'}]
          },
          {name: '年度剩余数', value: 0},
          {name: '下月计划完成数', value: 0}
        ],
        [
          {name: '本月已完成数', value: 0},
          {name: '本月未完成数', value: 0},
          {
            name: '未完成明细',
            value: null,
            children: [{name: '-'}]
          },
          {name: '年度剩余数', value: 0},
          {name: '下月计划完成数', value: 0}
        ],
        [
          {name: '本月已完成数', value: 0},
          {name: '本月未完成数', value: 0},
          {
            name: '未完成明细',
            value: null,
            children: [{name: '-'}]
          },
          {name: '年度剩余数', value: 0},
          {name: '下月计划完成数', value: 0}
        ]
      ],
      dataListReady: false
    }
  },
  created() {
    this.getOption()
    this.getData()
  },
  methods: {
    getOption() {
      this.options[0] = _.cloneDeep(this.basicOption)
      this.options[1] = _.cloneDeep(this.basicOption)
      this.options[2] = _.cloneDeep(this.basicOption)

      const r1 = chartDlydtsby()
      const r2 = chartDlsdxlBy()
      const r3 = chartDlbpdsby()
      Promise.all([r1, r2, r3]).then(res => {
        const res1 = res[0]
        const res2 = res[1]
        const res3 = res[2]
        this.options[0].series[0].data = [res1.info.series[0].data[0], res1.info.series[1].data[0]]
        this.options[1].series[0].data = [res2.info.series[0].data[0], res2.info.series[1].data[0]]
        this.options[2].series[0].data = [res3.info.series[0].data[0], res3.info.series[1].data[0]]
      })
      window['tis'] = this
    },

    getData() {
      const arrMap = [
        'byywc', 'bywwc', 'wwcmx', 'ndsys', 'xyjhwc'
      ]
      const r1 = chartDlydtsbyDetail()
      const r2 = chartDlsdxlbyDetail()
      const r3 = chartDlbpdsbyDetail()
      Promise.all([r1, r2, r3]).then(res => {
        const resArr = [res[0].info, res[1].info, res[2].info]
        resArr.forEach((item, index) => {
          this.dataList[index].forEach((dIitem, dIndex) => {
            const mapKey = arrMap[dIndex]
            dIitem.value = item?.[mapKey]
            if (mapKey === 'wwcmx') {
              dIitem.children = item?.[mapKey].map(nameValue => {
                return {name: nameValue}
              }) || []
              dIitem.value = ''
            }
          })
        })
      })
      this.dataList = _.cloneDeep(this.dataList)
      this.dataListReady = true
    }
  }
}
</script>

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

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

    &.a-scrool{
      overflow-y: auto;
    }

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

  * {
    color: #ffffff;
  }
}

</style>