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

<template>
  <div class="screen-common-wrap" v-if="renderReady">
    <a-table

      ref="table"
      size="middle"
      bordered
      row-key="id"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :loading="loading"
      @change="handleTableChange"
    >

      <div slot="dxs" class="dx-render" slot-scope="value" style="">
        <div class="value">
          {{ value }}%
          {{ value }}%
        </div>

        <div
          class="bg"
          :style="{'width': value+'%'}"
        />

      </div>
    </a-table>
    <!-- table区域-end -->
    <!-- 表单区域 -->
  </div>
</template>
<script>
import {listMixin} from '@/mixin/listMixin'
import columns from './indexColumns'
import {getAction} from '@/api/request'

import dayjs from 'dayjs'

export default {
  name: 'ScreenSbxjdxqk',
  components: {},
  mixins: [listMixin],
  data() {
    return {
      renderReady: false,
      // 查询条件
      queryParam: {},
      treeData: [],
      // 表头
      columns: columns(this),
      url2: {
        list: `/show/sbxj/total/${dayjs().format('M')}`,
        delete: '/business/catenary/bus/jcb/fdfxjyq/',
        tree: '/system/dept/treeSelect',
        exportXlsUrl: '/business/catenary/bus/jcb/fdfxjyq/export'
      }
    }
  },
  mounted() {
    this.getData()
    window['tis'] = this
  },

  methods: {
    getData() {
      console.log('getData')
      this.renderReady = false;
      this.dataSource = [];
      this.columns[this.columns.length - 1].title = dayjs().format('M') + '月'
      getAction(this.url2.list).then((res) => {
        const basicDataSource = res.data || []
        const typeArr = []
        basicDataSource.forEach(itemRow => {
          const find = typeArr
            .find(typeItem => typeItem.teamName === itemRow.teamName)
          if (!find) {
            const newTypeItem = {
              teamName: itemRow.teamName,
              children: [itemRow]
            }
            typeArr.push(newTypeItem)
          } else {
            find.children.push(itemRow)
          }
        })
        window['typeArr'] = typeArr;
        const newList = typeArr.reduce((arr, cur) => {
          arr = arr.concat(cur.children)
          return arr
        }, [])
        this.dataSource = newList || []
        window['dataSource'] = this.dataSource;
        setTimeout(() => {
          this.renderReady = true;
        }, 300)

      })
    }
  }
}
</script>
<style scoped lang="scss">
.screen-common-wrap {
  ::v-deep {
    tbody {
      td {
        position: relative;

        .dx-render {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;

          .value {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
          }

          .bg {
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right, orange 50%, rgb(255, 238, 205) 99.99%);
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0
          }
        }
      }
    }
  }
}
</style>