| | |
| | | <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"; |
| | |
| | | return { monStates: [], devStates: {}, eventList: [] }; |
| | | } |
| | | }); |
| | | |
| | | |
| | | const logList = computed(() => { |
| | | let _list = rtDatas.value.eventList; |
| | |
| | | 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> |
| | | </div> |
| | | <div class="item"> |
| | | <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 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, GROUPVOL) }} |
| | |
| | | <div class="value"> |
| | | {{ rtDatas.devStates.testCapacity }} |
| | | <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> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="label"><el-icon><icon-avg class="avg-icon" /></el-icon>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> |
| | |
| | | {{ toFixed(rtDatas.devStates.minBatteryVoltage, VOL) }}V |
| | | </div> |
| | | <div class="label">平均值</div> |
| | | <div class="value">{{ toFixed(rtDatas.devStates.avgMonVol, VOL) }}V</div> |
| | | <div class="value"> |
| | | {{ toFixed(rtDatas.devStates.avgMonVol, VOL) }}V |
| | | </div> |
| | | </div> |
| | | <div class="list-wrap posR"> |
| | | <div class="pos-full scroll"> |
| | |
| | | {{ toFixed(rtDatas.devStates.minBatteryVoltage, VOL) }}V |
| | | </div> |
| | | <div class="label">平均值</div> |
| | | <div class="value">{{ toFixed(rtDatas.devStates.avgMonVol, VOL) }}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: #438D29; |
| | | background: #438d29; |
| | | } |
| | | &.min { |
| | | background: #DBD608; |
| | | background: #dbd608; |
| | | } |
| | | } |
| | | } |
| | |
| | | text-align: center; |
| | | background: #02a7f0; |
| | | &.max { |
| | | background: #438D29; |
| | | background: #438d29; |
| | | } |
| | | &.min { |
| | | background: #DBD608; |
| | | background: #dbd608; |
| | | } |
| | | } |
| | | } |
| | |
| | | padding: 2px 10px; |
| | | border-radius: 6px; |
| | | &.max { |
| | | background: #438D29; |
| | | background: #438d29; |
| | | } |
| | | &.min { |
| | | background: #DBD608; |
| | | background: #dbd608; |
| | | } |
| | | } |
| | | } |
| | |
| | | &.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%; |
| | |
| | | |
| | | /* 使用@keyframes定义动画 */ |
| | | @keyframes colorChange { |
| | | 0%, 100% { color: red; } /* 开始和结束时的颜色 */ |
| | | 50% { color: #0ff; } /* 中间状态的颜色 */ |
| | | 0%, |
| | | 100% { |
| | | color: red; |
| | | } /* 开始和结束时的颜色 */ |
| | | 50% { |
| | | color: #0ff; |
| | | } /* 中间状态的颜色 */ |
| | | } |
| | | </style> |