he wei
2024-11-09 5cc9eb2d302ffe6218221208a28b60f91b57e41e
src/views/test/ytjRtInfo.vue
@@ -1,5 +1,5 @@
<script setup>
import { ref, computed, watch, onMounted } from "vue";
import { ref, computed, watch, onMounted, onActivated } from "vue";
import ycCard from "@/components/ycCard.vue";
import useWebSocket from "@/hooks/useWebSocket.js";
import bar from "@/components/echarts/bar2.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");
@@ -77,12 +80,19 @@
    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);
}
onActivated(() => {
  });
onMounted(() => {
  let reg = /^1/;
  if (reg.test(props.devId)) {
    sendData(JSON.stringify({ devId: props.devId, devType: 1 }));
  }
  // sendData(JSON.stringify({ devId: props.devId, devType: 1 }));
});
</script>
@@ -106,33 +116,58 @@
      <transition-group :duration="300" name="slide-left">
        <div class="tab-content test-content" v-if="infoTab == 0">
          <div class="state" v-if="rtDatas.devStates.isTesting">
            <div :class="['item', { active: rtDatas.devStates.isTesting && 2 == rtDatas.devStates.testType }]">
            <div
              :class="[
                'item',
                {
                  active:
                    rtDatas.devStates.isTesting &&
                    2 == rtDatas.devStates.testType,
                },
              ]"
            >
              充电测试
            </div>
            <div :class="['item', { active: rtDatas.devStates.isTesting && 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="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>
@@ -152,9 +187,15 @@
                <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">
@@ -185,7 +226,9 @@
              </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>
@@ -195,14 +238,16 @@
          <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">
@@ -222,7 +267,7 @@
                    },
                  ]"
                >
                  {{ item.monVol }} V
                  {{ toFixed(item.monVol, VOL) }} V
                </div>
              </div>
            </div>
@@ -232,14 +277,16 @@
          <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>
@@ -337,10 +384,10 @@
        text-align: center;
        background: #02a7f0;
        &.max {
          background: #d9001b;
          background: #438d29;
        }
        &.min {
          background: #f59a23;
          background: #dbd608;
        }
      }
    }
@@ -374,10 +421,10 @@
        text-align: center;
        background: #02a7f0;
        &.max {
          background: #d9001b;
          background: #438d29;
        }
        &.min {
          background: #f59a23;
          background: #dbd608;
        }
      }
    }
@@ -409,10 +456,10 @@
            padding: 2px 10px;
            border-radius: 6px;
            &.max {
              background: #d9001b;
              background: #438d29;
            }
            &.min {
              background: #f59a23;
              background: #dbd608;
            }
          }
        }
@@ -443,7 +490,8 @@
    .stop-reason {
      // margin-left: 4em;
      text-align: center;
      color: #0ff;
      /* 定义动画名称和持续时间 */
      animation: colorChange 3s infinite;
      font-weight: bold;
      .label {
        margin-right: 0.4em;
@@ -534,8 +582,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 {
@@ -544,7 +599,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%;
@@ -615,4 +670,15 @@
    transform: translateX(0);
  }
}
/* 使用@keyframes定义动画 */
@keyframes colorChange {
  0%,
  100% {
    color: red;
  } /* 开始和结束时的颜色 */
  50% {
    color: #0ff;
  } /* 中间状态的颜色 */
}
</style>