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

<template>
  <div class="screen-common-wrap">
      <a-table
        v-if="dataSource.length > 0"
        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 }}
          </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 {
      // 查询条件
      queryParam: {},
      treeData: [],
      // 表头
      columns: columns(this),
      url: {
        list: `/show/sbxj/total/${dayjs().format('M')}`,
        delete: '/business/catenary/bus/jcb/fdfxjyq/',
        tree: '/system/dept/treeSelect',
        exportXlsUrl: '/business/catenary/bus/jcb/fdfxjyq/export'
      }
    }
  },
  created() {
    this.getData()
    window['tis'] = this
  },

  methods: {
    getData() {
      this.columns[this.columns.length - 1].title = dayjs().format('M') + '月'
      getAction(this.url.list).then((res) => {
        const basicDataSource = res.data || []
        const typeArr = []
        basicDataSource.forEach(itemRow => {
          const find = typeArr
            .find(typeItem => typeItem.deptName === itemRow.deptName && typeItem.teamName === itemRow.teamName)
          if (!find) {
            const newTypeItem = {
              deptName: itemRow.deptName,
              teamName: itemRow.teamName,
              children: [itemRow]
            }
            typeArr.push(newTypeItem)
          } else {
            find.children.push(itemRow)
          }
        })
        const newList = typeArr.reduce((arr, cur) => {
          arr = arr.concat(cur.children)
          return arr
        }, [])
        this.dataSource = newList || []
        window['dataSource'] = this.dataSource;
      })
    }
  }
}
</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>