UA 电池组显示告警色

whychw

2020-09-22 057fe6f76b0e585f5ab48fc5025bde873a63bd9d

UA 电池组显示告警色

 src/assets/js/EGraph.js

@@ -104,6 +104,7 @@
        },
        init: {}
    };
    this.limit = {};

    // 深度合并对象
    opts = deepAssign({}, defaults, opts);
@@ -150,7 +151,10 @@
            containLabel: true
        },
        xAxis: {
            data: []
            data: [],
            splitLine:{
                show: false
            }
        },
        yAxis: {
            type: 'value',
@@ -244,10 +248,21 @@
                itemStyle: {
                    color: function(value) {
                        // 根据最值显示颜色
                        /*if(min == value.value) {
                            return colors.min;
                        }else if(max == value.value) {
                            return colors.max;
                        }else {
                            return colors.normal;
                        }*/
                        if(min == value.value) {
                            return colors.min;
                        }else if(max == value.value) {
                            return colors.max;
                        }
                        
                        if(self.limit.low >= value.value || self.limit.high <= value.value) {
                            return colors.warn;
                        }else {
                            return colors.normal;
                        }
@@ -363,6 +378,11 @@
EGraph.prototype.setColors = function(colors) {
    this.colors = deepAssign({}, this.colors, colors);
};

// 设置最值的颜色
EGraph.prototype.setLimit = function(obj) {
    this.limit = obj;
};
// 清理图表
EGraph.prototype.clear = function() {
    this.changeData({

 src/assets/js/config.js

New file
@@ -0,0 +1,10 @@
export default {
  // 最小值颜色
  minColor: '#38b3f1',
  // 最大值颜色
  maxColor: '#38b3f1',
  // 低告警色
  // 高告警色
  // 告警色
  warnColor: '#fefe01'
}

 src/assets/js/event.js

New file
@@ -0,0 +1,2 @@
import Vue from 'vue';
export default new Vue();

 src/components/PageHeader.vue

@@ -25,6 +25,7 @@
        </div>
        <div class="page-header-right">
            <div class="btn_grp">
                <div class="btn_3d" @click="showSettings">告警参数设置</div>
                <div class="btn_3d" @click="back">综合页面</div>
            </div>
            <div class="page-header-time">{{time}}</div>
@@ -103,6 +104,9 @@
                this.$refs['battTree'].setCurrent(this.$store.state.battGroup.BattGroupId);
            });
        }
        ,showSettings () {
            this.$event.$emit('showSettings');
        }
    },
    mounted(){
        // 启动时间计时器
@@ -138,9 +142,14 @@
.btn_grp {
    padding-top: 10px;
    padding-right: 20px;
    display: -webkit-flex;
    display: flex;
}
.btn_grp .btn_3d {
    width: 6em;
    /*width: 6em;*/
    padding-left: 1em;
    padding-right: 1em;
    margin-left: .6em;
    font-size: .8rem;
}
.page-header-content {

 src/main.js

@@ -3,14 +3,21 @@
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import config from './assets/js/config.js'
import './axios'
import './assets/iconfont/iconfont.css'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/css/base.css'
import './assets/css/common.css'

import event from './assets/js/event.js'

Vue.prototype.$event = event;

Vue.config.productionTip = false

Vue.prototype.$config = config;

Vue.use(ElementUI);
//格式化时间
Date.prototype.format =function(format)

 src/pages/index.vue

@@ -108,6 +108,38 @@
                </box-all>
            </el-col> -->
        </el-row>
        <el-dialog
          title="修改"
          :visible.sync="settingsVisible"
          width="60%"
          class="dialog-bg">
          <div class="D-content">
            <el-form label-position="left" label-width="14em">
              <el-form-item label="单体电压高告警阀值">
                <el-input v-model="limit_h_vol"><template slot="append">V</template></el-input>
              </el-form-item>
              <el-form-item label="单体电压低告警阀值">
                <el-input v-model="limit_l_vol"><template slot="append">V</template></el-input>
              </el-form-item>
              <el-form-item label="单体温度高告警阀值">
                <el-input v-model="limit_h_tmp"><template slot="append">℃</template></el-input>
              </el-form-item>
              <el-form-item label="单体温度低告警阀值">
                <el-input v-model="limit_l_tmp"><template slot="append">℃</template></el-input>
              </el-form-item>
              <el-form-item label="单体内阻高告警阀值">
                <el-input v-model="limit_h_res"><template slot="append">mΩ</template></el-input>
              </el-form-item>
              <el-form-item label="单体内阻低告警阀值">
                <el-input v-model="limit_l_res"><template slot="append">mΩ</template></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer h-center">
            <el-button type="primary" @click="settingsConfirm">确定</el-button>
            <el-button  @click="settingsVisible = false">取消</el-button>
          </span>
        </el-dialog>
    </div>
</template>

@@ -132,6 +164,13 @@
    },
    data() {
        return {
            settingsVisible: false,
            limit_h_vol: 2.1,
            limit_l_vol: 1.8,
            limit_h_tmp: 32,
            limit_l_tmp: 26.5,
            limit_h_res: 0.5,
            limit_l_res: 0.2,
            battIdx: this.$route.query.idx || 0,
            full_monVol: false,
            full_monTmp: false,
@@ -431,6 +470,29 @@
                }
            });
        }
        ,handleShowSettings () {
            this.settingsVisible = true;
        }
        // 设置告警阀值
        ,setLimit () {
          monVol.setLimit({
            low: this.limit_l_vol,
            high: this.limit_h_vol
          });
          monRes.setLimit({
            low: this.limit_l_res,
            high: this.limit_h_res
          });
          monTmp.setLimit({
            low: this.limit_l_tmp,
            high: this.limit_h_tmp
          });
        }
        // 告警阀值设置确定
        ,settingsConfirm () {
          this.settingsVisible = false;
          this.setLimit();
        }
    },
    computed: {
        getDiffStyle() {
@@ -463,6 +525,7 @@
        }
    },
    mounted() {
        this.$event.$on('showSettings', this.handleShowSettings);
        // 设置导航栏
        this.$store.dispatch('changeNavActive', 0);
        if (!this.$store.state.allBattList.length) {
@@ -477,6 +540,12 @@
                }
            }
        });
        monVol.setColors({
            min: 'green',
            max: 'red',
            warn: this.$config.warnColor,
            normal: '#3ba0e8'
        });
        monTmp = new EGraph(this.$refs.monTmp, {
            init: {
                yAxis: {
@@ -487,6 +556,8 @@
        monTmp.setColors({
            min: 'green',
            max: 'red',
            warn: this.$config.warnColor,
            normal: '#5dd386'
        });
        monRes = new EGraph(this.$refs.monRes, {
            init: {
@@ -502,14 +573,11 @@
        monRes.setColors({
            min: 'green',
            max: 'red',
            warn: this.$config.warnColor,
            normal: '#00fffc'
        });
        // monJHCurr = new EGraph(this.$refs.monJHCurr, {
        //     init: {
        //         yAxis: {
        //             name: 'A'
        //         }
        //     }
        // });

        this.setLimit();
        // 开启页面中的计时器
        this.startTimer();
        // 初始化rtstate
@@ -611,6 +679,31 @@
}
.panel-info em {
}
.D-content {
  padding: 0 20px;
}
.D-content >>> .el-form-item__label {
  text-align: right;
  color: #fff;
}
.D-content >>> .el-input-group__append {
  width: 4em;
  color: #000;
}
>>> .dialog-bg .el-dialog__header {
    background-image: linear-gradient(#0fa1d9, #056aa5, #0fa1d9);
    color: #fff;
}
>>> .el-dialog__title {
    color: #fff;
}
>>> .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}
>>> .dialog-bg .el-dialog {
    background: #034362;
    color: #fff;
}
</style>