| | |
| | | <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"; |
| | |
| | | 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"); |
| | |
| | | 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> |
| | |
| | | <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> |
| | | |
| | |
| | | <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"> |
| | |
| | | </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> |
| | |
| | | <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"> |
| | |
| | | }, |
| | | ]" |
| | | > |
| | | {{ item.monVol }} V |
| | | {{ toFixed(item.monVol, VOL) }} V |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <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> |
| | |
| | | text-align: center; |
| | | background: #02a7f0; |
| | | &.max { |
| | | background: #d9001b; |
| | | background: #438d29; |
| | | } |
| | | &.min { |
| | | background: #f59a23; |
| | | background: #dbd608; |
| | | } |
| | | } |
| | | } |
| | |
| | | text-align: center; |
| | | background: #02a7f0; |
| | | &.max { |
| | | background: #d9001b; |
| | | background: #438d29; |
| | | } |
| | | &.min { |
| | | background: #f59a23; |
| | | background: #dbd608; |
| | | } |
| | | } |
| | | } |
| | |
| | | padding: 2px 10px; |
| | | border-radius: 6px; |
| | | &.max { |
| | | background: #d9001b; |
| | | background: #438d29; |
| | | } |
| | | &.min { |
| | | background: #f59a23; |
| | | background: #dbd608; |
| | | } |
| | | } |
| | | } |
| | |
| | | .stop-reason { |
| | | // margin-left: 4em; |
| | | text-align: center; |
| | | color: #0ff; |
| | | /* 定义动画名称和持续时间 */ |
| | | animation: colorChange 3s infinite; |
| | | font-weight: bold; |
| | | .label { |
| | | margin-right: 0.4em; |
| | |
| | | &.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 { |
| | |
| | | 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%; |
| | |
| | | transform: translateX(0); |
| | | } |
| | | } |
| | | |
| | | /* 使用@keyframes定义动画 */ |
| | | @keyframes colorChange { |
| | | 0%, |
| | | 100% { |
| | | color: red; |
| | | } /* 开始和结束时的颜色 */ |
| | | 50% { |
| | | color: #0ff; |
| | | } /* 中间状态的颜色 */ |
| | | } |
| | | </style> |