content.vue

<template>
  <div class="daily">
    <div class="asis-table-wrapper">
      <h3 class="asis-table-header single-report-header tf-table-header">
        <span
          class="asis-table-download"
          @click="downloadData(i18nFormatter(trafficFlow_title) + '-' + Time(),'custom')"
        >{{$t('allPages.load')}}</span>
      </h3>
      <div class="asis-table-content" v-loading="loading">
        <el-row>
          <el-table
             id="domBaseTrafficFlow"
             :data="tabOps"
             :max-height="tableHeight"
             style="width: 100%"
             class="asis-table baseasis-table"
             header-row-class-name="asis-table-head"
             row-class-name="manage-row"
             :cell-style='cellStyle'
           >
               <el-table-column
                   v-if="tabOps.length"
                   type="index"
                   :label="$t('table.order')"
                   align="center"
                   width="80"
                >
                   <template slot-scope="scope">
                     <span>{{ indexFormatter(scope) }}</span>
                   </template>
                </el-table-column>
             <el-table-column
               :prop="item.prop"
               :label="item.label"
               align="center"
               v-for="(item,index) in tabHeadData"
               :key="index"
               :width="item.width?item.width:''"
               min-width="100"
               show-overflow-tooltip
             >
                <!-- <template slot-scope="scope">
                    <span v-if="index==0">{{ scope.row[`defaultOrg${index}`] }}</span>
                    <span v-else :style="bgColorFun(scope.row[`defaultOrg${index}`],index)">{{ scope.row[`defaultOrg${index}`] }}</span>
                </template> -->
             </el-table-column>
           </el-table>
        </el-row>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import exportData from "../../public/exportData";
import { columnComputed, rowComputed, curryAvgAndSum, combineHeadAndBody } from '@/utils'

export default {
  props: {
    propparam: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    "export-data-dialog": exportData,
  },
  data() {
    return {
      loading: false,
      trafficFlow_title: "businessStatusWarning", //报表
      emitData: {},
      tabHeadData: [],
      tabOps: [],
      tableColData:[],
      maxNumList:[],
      color:['#DF4F55', '#D95B4E', '#D16C44', '#CC763E', '#C48635', '#BD952C', '#B6A225', '#AFB11C', '#A8C013', '#A1CF0B']
    };
  },
  computed: {
    tableHeight() {
      let windowHeight = window.innerHeight,
        scale = 0.34

      scale = windowHeight <= 720
        ? 0.4
        : windowHeight <= 768
          ? 0.38
          : windowHeight <= 900
            ? 0.36
            : windowHeight <= 1080
              ? 0.34
              : 0.34
      return windowHeight - windowHeight * scale
    },
  },
  watch: {
    propparam: {
      handler: "refreshHandle",
      deep:true
    },
    emitData: {
      handler(){

      },
      immediate: true,
      deep:true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    cellStyle(row,colum,rowIndex,columnIndex){
        if(row.columnIndex>1){
            let maxNum = this.maxNumList[row.columnIndex-2]
            if(maxNum >0 ){
                let val = row.row[row.column.property];
                let newArr = [], num= Math.ceil(maxNum/10);
                for (var i = 1; i < 11; i++) {
                    newArr.push(num *i )
                }
                let index = this.getIndexLocation(newArr,val)<1?0:this.getIndexLocation(newArr,val)
                return {'background-color':this.color[index],'color':'black'}
            }
        }
    },
    getIndexLocation(arr,num){
        for (var i = 0; i < arr.length; i++) {
            if(arr[i]>num){ 
                return i; 
            }
        }
    },
    refreshHandle(param) {
      if(param){
        this.emitData = param
        this.getData();
      }
    },
    // 获取表格数据
    getTableData(resData) {
      let originData = JSON.parse(JSON.stringify(resData.series))
      let flowHeadData = JSON.parse(JSON.stringify(resData.xaxis && resData.xaxis.data || []));
      this.tabHeadData = flowHeadData.reduce((arr, curr, index) => {
          if(index==0){
              arr.push({
                prop: `defaultOrg${index}`,
                label: curr,
                width: 220,
              })
          }else{
              arr.push({
                prop: `defaultOrg${index}`,
                label: curr
              })
          }
        
        return arr
      }, [])
      const tbodyData = originData.reduce((arr, curr) => {
          arr.push(curr.data)
          return arr
        }, [])
      this.tabOps = combineHeadAndBody(this.tabHeadData, tbodyData)
    },
    getData() {
      this.tabHeadData = [];
      this.tabOps = [];
      this.tableColData = []
      this.maxNumList =[]
      this.loading = true;
      let param = {
        orgId: this.$cookie.get('accountId'),
        startDate: this.emitData.startDate,
        endDate: this.emitData.endDate,
        groupId: this.emitData.groupId,
      }
      this.$api.businessAnalysisApi.getEarlyWarning(param).then(res => {
        let resData = res.data.data;
        let tableData = []
        if(resData.series && resData.series.length>0){
            resData.series.forEach(item=>{
                tableData.push(item.data)
            })
            for (var i = 0; i < tableData[0].length; i++) {
                this.tableColData[i] = []
            }
            for (var i = 0; i < tableData.length; i++) {
                for (var j = 0; j < tableData[i].length; j++) {
                    this.tableColData[j][i] = tableData[i][j]
                }
            }
            for (var i = 1; i < this.tableColData.length; i++) {
                let maxNum = Math.max.apply(null,this.tableColData[i])
                this.maxNumList.push(maxNum)
            }
        }
        
        this.loading = false;
        this.getTableData(resData)
      })
    },
    indexFormatter({ $index, row }) {
      const { createRow, tabOps } = this
      const realDataLen = createRow === 'avgAndTotal'
        ? tabOps.length - 2
        : tabOps.length
      if ($index < realDataLen) {
        return $index + 1
      } else {
        return ((realDataLen - $index) === 0) ? this.$t('table.average') : this.$t('table.total')
      }
    },
    downloadData(title, chartKey) {
      this.dealExport("domBaseTrafficFlow", title);
    },
  }
};
</script>

<style scoped lang="less">
.asis-table-wrapper {
  position: relative;
}

.baseasis-table{
    /deep/.cell{
        text-overflow:ellipsis !important;
    }
}
</style>