newcpms/ui/src/views/dashboard/KpiChart.vue

<template>
  <div :style="{height:height,width:width}">
    <el-table :data="ehskpinewList"
              :height="height"
              border
              :row-class-name="tableRowClassName"
              :header-cell-style="headerCellStyle">
      <el-table-column v-if="lang == 'zh'" :label="$t('KPI名称')" align="center" prop="kpiname" width="180" :formatter="kpinameFormat" />
      <el-table-column v-if="lang == 'en'" :label="$t('KPI名称')" align="center" prop="kpinameen" width="180" :formatter="kpinameenFormat" />
      <el-table-column :label="$t('一季度')" align="center" prop="spring" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('二季度')" align="center" prop="summer" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('三季度')" align="center" prop="autumn" :show-overflow-tooltip="true"/>
      <el-table-column :label="$t('四季度')" align="center" prop="winter" :show-overflow-tooltip="true"/>
    </el-table>
  </div>
</template>

<script>
import { listEhskpinew } from "@/api/ehs/ehskpinew";
import Cookies from 'js-cookie'

export default {
  computed: {
    lang: {
      get() {
        return this.$store.state.app.language
      },
      set(lang) {
        this.$i18n.locale = lang
        this.$store.dispatch('app/setLanguage', lang)
      }
    }
  },
  watch: {
    '$store.state.app.language'(newLang) {
      console.log(newLang)
    }
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '210px'
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
      },
      // KPI统计及格表格数据
      ehskpinewList: [],
      // kpi名称字典
      kpinameOptions: []
    }
  },
  created() {
    this.getList();
    this.lang = Cookies.get('language')
    this.getDicts("KPI_ZHCN_NAME").then(response => {
      this.kpinameOptions = response.data;
    });
    this.getDicts("KPI_ENUS_NAME").then(response => {
      this.kpinameenOptions = response.data;
    });
  },
  methods: {
    /** 查询能耗管理统计列表 */
    getList() {
      this.loading = true;
      listEhskpinew(this.queryParams).then(response => {
        this.ehskpinewList = response.rows;
        this.loading = false;
      });
    },
    // kpi名称字典翻译
    kpinameFormat(row, column) {
      return this.selectDictLabel(this.kpinameOptions, row.kpiname);
    },
    // kpi英文名字典翻译
    kpinameenFormat(row, column) {
      return this.selectDictLabel(this.kpinameenOptions, row.kpinameen);
    },
    tableRowClassName({row, rowIndex}) {
      if(rowIndex % 2 === 0){
        return 'warning-row';
      } else {
        return 'success-row';
      }
      return '';
    },
    headerCellStyle({ row, rowIndex }) {
      return 'background-color: #0f1325;color: #FFFFFF;border: none'
    }
  }
}
</script>

<style scoped>
  /deep/.el-table .warning-row {
    background: #171c33;
  }

  /deep/.el-table .success-row {
    background: #0f1325;
  }

  .el-table {
    background-color: #0f1325;
    text-align: center;
    color: #FFFFFF;
    border: 0px;
  }

  /deep/.el-table__row>td{
    border: none;
  }

  .el-table::before {
    height: 0px;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #171c33;
    border-radius: 3px;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #0f1325;
  }
</style>