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--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(0, 0, 0, 0.01) !important;
  }

  /deep/.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    font-size: 12px;
    height: 10px;
    background-color: #11285a;
    color: #ffffff;
  }

  /deep/.el-table--group, .el-table--border {
    border: 1px solid #11285a;
  }

  /deep/.el-table--group::after, .el-table--border::after, .el-table::before {
    background: rgba(253, 245, 245, 0) linear-gradient(to right, #11285a, #1d2d4a) repeat scroll 0% 0%;
  }

  /deep/.el-table--border th, .el-table--border td {
    border-right: 1px solid #11285a;
  }

  /deep/.el-table--border th, .el-table--border td {
    border-right: 1px solid #11285a;
  }

  /deep/.el-table {
    color: #ffffff;
  }

  /deep/.el-table tr {
    background: rgba(253, 245, 245, 0) linear-gradient(to right, #11285a, #1d2d4a) repeat scroll 0% 0%;
  }
</style>