U 一体机 添加电芯压差

he wei

2024-11-05 8e19ea907ff2037e9d0c8a3572fc1db122db2f09

 src/views/test/ytjRtInfo.vue

@@ -7,6 +7,9 @@
import formatSeconds from "@/assets/js/tools/formatSeconds.js";
import getPowerByUI from "@/assets/js/tools/getPowerByUI.js";
import toFixed from "@/assets/js/tools/toFixed.js";
import const_digits from "@/assets/js/const/const_digits";
import IconAvg from "@/components/icons/IconAvg.vue";
const { VOL, GROUPVOL, CURR_YT, CURR_JH } = const_digits;

const infoTab = ref(0);
const { sendData, message } = useWebSocket("rtstateSocket");
@@ -38,6 +41,7 @@
    return { monStates: [], devStates: {}, eventList: [] };
  }
});


const logList = computed(() => {
  let _list = rtDatas.value.eventList;
@@ -77,7 +81,7 @@
    vols = [];
  rtDatas.value.monStates.forEach((v) => {
    mons.push(`#${v.monNum}`);
    vols.push(v.monVol);
    vols.push(toFixed(v.monVol, VOL));
  });
  battVolChart.value?.updateChart(mons, vols);
}
@@ -105,33 +109,34 @@
    <div class="tab-container">
      <transition-group :duration="300" name="slide-left">
        <div class="tab-content test-content" v-if="infoTab == 0">
          <div class="state">
            <div :class="['item', { active: 2 == rtDatas.devStates.testType }]">
          <div class="state" v-if="rtDatas.devStates.isTesting">
            <div :class="['item', { active: rtDatas.devStates.isTesting && 2 == rtDatas.devStates.testType }]">
              充电测试
            </div>
            <div :class="['item', { active: 1 == rtDatas.devStates.testType }]">
            <div :class="['item', { active: rtDatas.devStates.isTesting && 1 == rtDatas.devStates.testType }]">
              放电测试
            </div>
          </div>
          <div class="stop-reason" v-else><span class="label">停止原因:</span>{{ rtDatas.devStates.stopReason }}</div>
          <div class="content">
            <div class="item item1">
              <div class="label">Umax</div>
              <div class="value">
                {{ rtDatas.devStates.maxBatteryVoltage }}V
                {{ toFixed(rtDatas.devStates.maxBatteryVoltage, VOL) }}V
              </div>
            </div>
            <div class="item">
              <div class="label">Umin</div>
              <div class="value">
                {{ rtDatas.devStates.minBatteryVoltage }}V
                {{ toFixed(rtDatas.devStates.minBatteryVoltage, VOL) }}V
              </div>
            </div>
            <div class="item">
              <div class="label">ΔU</div>
              <div class="value">{{ rtDatas.devStates.avgMonVol }}V</div>
              <div class="label"><el-icon><icon-avg class="avg-icon" /></el-icon>U</div>
              <div class="value">{{ toFixed(rtDatas.devStates.avgMonVol, VOL) }}V</div>
            </div>
            <div class="item-big">
              {{ toFixed(rtDatas.devStates.storageVoltage, 3) }}
              {{ toFixed(rtDatas.devStates.storageVoltage, GROUPVOL) }}
              <div class="unit">V</div>
            </div>

@@ -151,9 +156,17 @@
                <div class="unit">AH</div>
              </div>
            </div>
            <div class="border border-center">
              <div class="i label">
                电芯压差 
              </div>
              <div class="value">
                {{ rtDatas.devStates.diffBatteryVoltage }} mV
              </div>
            </div>

            <div class="item-big curr">
              {{ rtDatas.devStates.testCurrent }}
              {{ toFixed(rtDatas.devStates.testCurrent, CURR_YT) }}
              <div class="unit">A</div>
            </div>
            <div class="border border2">
@@ -184,7 +197,7 @@
              </div>
            </div>
            <div class="item">
              <div class="label">ΔT</div>
              <div class="label"><el-icon><icon-avg class="avg-icon" /></el-icon>T</div>
              <div class="value">{{ rtDatas.devStates.avgMonTmp }}℃</div>
            </div>
          </div>
@@ -194,14 +207,14 @@
          <div class="info">
            <div class="label">最大值</div>
            <div class="value max">
              {{ rtDatas.devStates.maxBatteryVoltage }}V
              {{ toFixed(rtDatas.devStates.maxBatteryVoltage, VOL) }}V
            </div>
            <div class="label">最小值</div>
            <div class="value min">
              {{ rtDatas.devStates.minBatteryVoltage }}V
              {{ toFixed(rtDatas.devStates.minBatteryVoltage, VOL) }}V
            </div>
            <div class="label">平均值</div>
            <div class="value">{{ rtDatas.devStates.avgMonVol }}V</div>
            <div class="value">{{ toFixed(rtDatas.devStates.avgMonVol, VOL) }}V</div>
          </div>
          <div class="list-wrap posR">
            <div class="pos-full scroll">
@@ -215,10 +228,13 @@
                <div
                  :class="[
                    'value',
                    { max: rtDatas.devStates.maxBatteryVoltage == item.monVol, min: rtDatas.devStates.minBatteryVoltage == item.monVol },
                    {
                      max: rtDatas.devStates.maxBatteryVoltage == item.monVol,
                      min: rtDatas.devStates.minBatteryVoltage == item.monVol,
                    },
                  ]"
                >
                  {{ item.monVol }} V
                  {{ toFixed(item.monVol, VOL) }} V
                </div>
              </div>
            </div>
@@ -228,20 +244,20 @@
          <div class="chart-info">
            <div class="label">最大值</div>
            <div class="value max">
              {{ rtDatas.devStates.maxBatteryVoltage }}V
              {{ toFixed(rtDatas.devStates.maxBatteryVoltage, VOL) }}V
            </div>
            <div class="label">最小值</div>
            <div class="value min">
              {{ rtDatas.devStates.minBatteryVoltage }}V
              {{ toFixed(rtDatas.devStates.minBatteryVoltage, VOL) }}V
            </div>
            <div class="label">平均值</div>
            <div class="value">{{ rtDatas.devStates.avgMonVol }}V</div>
            <div class="value">{{ toFixed(rtDatas.devStates.avgMonVol, VOL) }}V</div>
          </div>
          <div class="chart-wrap">
            <bar ref="battVolChart" unit="V"></bar>
          </div>
        </div>
        <div class="tab-content" v-if="infoTab == 3">
        <div class="tab-content scroll" v-if="infoTab == 3">
          <el-timeline class="custom-timeline time-left" v-if="logList.length">
            <el-timeline-item
              v-for="item in logList"
@@ -333,10 +349,10 @@
        text-align: center;
        background: #02a7f0;
        &.max {
          background: #d9001b;
          background: #438D29;
        }
        &.min {
          background: #f59a23;
          background: #DBD608;
        }
      }
    }
@@ -370,10 +386,10 @@
        text-align: center;
        background: #02a7f0;
        &.max {
          background: #d9001b;
          background: #438D29;
        }
        &.min {
          background: #f59a23;
          background: #DBD608;
        }
      }
    }
@@ -405,10 +421,10 @@
            padding: 2px 10px;
            border-radius: 6px;
            &.max {
              background: #d9001b;
              background: #438D29;
            }
            &.min {
              background: #f59a23;
              background: #DBD608;
            }
          }
        }
@@ -434,6 +450,18 @@
          font-size: 22px;
          color: #fff;
        }
      }
    }
    .stop-reason {
      // margin-left: 4em;
      text-align: center;
      /* 定义动画名称和持续时间 */
      animation: colorChange 3s infinite;
      font-weight: bold;
      .label {
        margin-right: 0.4em;
        color: #ccc;
        font-weight: normal;
      }
    }
    .content {
@@ -519,8 +547,15 @@
        &.border2 {
          grid-column: 4 e("/") 5;
        }
        &.border-center {
          grid-column: 3 e("/") 4;
          width: 9em;
        }
        .i {
          margin-top: 0.2em;
          &.label {
            font-size: 16px;
          }
        }
      }
      .center {
@@ -529,7 +564,7 @@
        justify-content: center;
        align-items: center;
        place-self: stretch;
        grid-area: 1 e("/") 3 e("/") 6 e("/") 4;
        grid-area: 1 e("/") 3 e("/") 5 e("/") 4;
        .i {
          height: 150px;
          width: 100%;
@@ -565,6 +600,11 @@
    height: 100%;
    color: #fff;
    padding: 6px;
    &.scroll {
      right: 6px;
      bottom: 4px;
      overflow-y: auto;
    }
  }

  .slide-left-enter-active,
@@ -595,4 +635,10 @@
    transform: translateX(0);
  }
}

/* 使用@keyframes定义动画 */
@keyframes colorChange {
  0%, 100% { color: red; }  /* 开始和结束时的颜色 */
  50% { color: #0ff; }      /* 中间状态的颜色 */
}
</style>