U 电池组表格 高亮最值

whychw

2020-10-17 230fb762f28f4e3aa61b3a5c5613e6f034265ffd

U 电池组表格 高亮最值

 src/components/AssembleTable.vue

@@ -6,6 +6,7 @@
            border
            size="mini"
            height="100%"
            :cell-class-name="cellClassName"
            header-cell-class-name="blue-header">
                <el-table-column
                v-for="index of len * 2" :key="'prop_' + index"
@@ -57,7 +58,7 @@
        }
    },
    computed: {
        tableData() {
        tableData () {
            let result = [];
            this.data.forEach((item, index)=>{
                let num = index % this.len;
@@ -67,11 +68,37 @@
                let last = result[result.length-1];
                last['prop_' + (num + 1)] = item.text;
                last['value_' + (num + 1)] = item.val;
                last['maxList'] = last['maxList'] || [];
                last['minList'] = last['minList'] || [];
                if (item.isMin) {
                    last['minList'].push(num + 1);
                }
                if (item.isMax) {
                    last['maxList'].push(num + 1);
                }
            });
            // console.log('co')
            return result;
        },
        labelArr () {
            return this.labels.split(',');
        }
    }
    ,methods: {
        cellClassName (obj) {
            let res = '';
            let rowData = obj.row;
            rowData.maxList.forEach((v) => {
                if (obj.column.property.indexOf(v) > -1) {
                    res += 'max-value';
                }
            });
            rowData.minList.forEach((v) => {
                if (obj.column.property.indexOf(v) > -1) {
                    res += (res ? ' min-value' : 'min-value');
                }
            });
            return res;
        }
    }
}
@@ -82,5 +109,11 @@
    width: 100%;
    height: 100%;
}
>>> .max-value {
    background: #900 !important;
}
>>> .min-value {
    background: #090 !important;
}
</style>


 src/pages/index.vue

@@ -491,14 +491,20 @@
                        tableData_monVol.push({
                          text: '#' + _data.mon_num,
                          val: _data.mon_vol,
                          isMax: false,
                          isMin: false
                        });
                        tableData_monTmp.push({
                          text: '#' + _data.mon_num,
                          val: _data.mon_tmp,
                          isMax: false,
                          isMin: false
                        });
                        tableData_monRes.push({
                          text: '#' + _data.mon_num,
                          val: _data.mon_res,
                          isMax: false,
                          isMin: false
                        });
                    }
                    // 取最值
@@ -509,6 +515,11 @@
                    let max_monVol  = this.max.monVol = Math.max(...monVolList);
                    let max_monTmp  = this.max.monTmp = Math.max(...monTmpList);
                    let max_monRes  = this.max.monRes = Math.max(...monResList);

                    // 标记最值
                    this.markExtreme(tableData_monVol, max_monVol, min_monVol);
                    this.markExtreme(tableData_monTmp, max_monTmp, min_monTmp);
                    this.markExtreme(tableData_monRes, max_monRes, min_monRes);

                    // 取最值对应的单体编号列表
                    let minVolList = [];
@@ -594,6 +605,13 @@
                this.rtdata.timer.open();
            }
        },
        // 标记最值
        markExtreme (arr, max, min) {
            arr.forEach((v) => {
                v.isMax = v.val == max;
                v.isMin = v.val == min;
            });
        },
        changeFull (str) {
            this['full_' + str] = !this['full_' + str];
            this.$nextTick(() => {