web-prod2/src/views/dashboard-screen/screen/screenJxdxqk.vue

<template>
  <div class="common-warp">
    <div class="left">
      <div class="c-w">
        <Jxdxqk/>
      </div>
    </div>

    <div class="right">
      <div class="r-c-w">
        <Zydbsx v-if="dataReady" :fetch-data="false" :data="rightData"/>
      </div>
    </div>
  </div>
</template>

<script>
import Jxdxqk from '@/views/dashboard-screen/jxdxqk/index.vue'
import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'
import {chartJxdxqkbyDetail} from '@/api/dashboard-json'

export default {
  name: 'ScreenJxdxqk',
  components: { Zydbsx, Jxdxqk },
  data() {
    return {
      rightData: [
        { value: 4, name: '本月已完成站数' },
        { value: 3, name: '本月未完成站数' },
        {
          value: '', name: '未完成站名', children: [
            { name: '长春西牵引变电所' },
            { name: '英安河AT所' },
            { name: '珲春分区所' }
          ]
        },
        { value: 0, name: '下月计划完成站数' },
        { value: 0, name: '年度剩余站数' }
      ],
      dataReady: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      chartJxdxqkbyDetail().then(res => {
        res = res.info
        const arrMap = [
          'byywc', 'bywwc', 'wwcmx', 'ndsys', 'xyjhwc'
        ]
        this.rightData.forEach((dIitem, dIndex) => {
          const mapKey = arrMap[dIndex]
          dIitem.value = res?.[mapKey]
          if (mapKey === 'wwcmx') {
            dIitem.children = res?.[mapKey].map(nameValue => {
              return { name: nameValue }
            }) || []
            dIitem.value = ''
          }
        })

        this.rightData = _.cloneDeep(this.rightData)
        this.dataReady = true
      })
    }
  }
}
</script>

<style scoped lang="scss">
.common-warp {
  width: 100%;
  height: 100%;
  display: flex;

  .left, .right {
    flex: 1;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .left {
    .c-w {
      width: 30vw;
      height: 30vw;
    }
  }

  .right {
    .r-c-w {
      width: 30vw;
      height: 50vh;

      ::v-deep * {
        font-size: 1.6vw !important;
      }
    }
  }

  ::v-deep {
    .jxdxqk {
      .chart {
        width: 120%;
      }

      .bg {
        background-size: 92% 80% !important;
        background-position: center 0%;
      }
    }
  }
}

</style>