<script setup>
|
import { ref, onMounted, computed } from "vue";
|
import ycCard from "@/components/ycCard.vue";
|
import bar from "@/components/echarts/bar2.vue";
|
import iconPower from "@/components/icons/iconPower.vue";
|
import useDevsRt from "@/hooks/useDevsRt.js";
|
import jhyRtInfo from "./jhyRtInfo.vue";
|
import { getActmParam, getDevInfo } from "./api";
|
import jhParamContent from "./jhParamContent.vue";
|
import useWebSocket from "@/hooks/useWebSocket";
|
import { useRouter, useRoute } from "vue-router";
|
import { controllerActmParam } from "./api";
|
|
import useElement from "@/hooks/useElement.js";
|
|
const { $alert, $loading, $message, $confirm } = useElement();
|
|
const { sendData, message } = useWebSocket("rtstateSocket");
|
const router = useRouter();
|
|
const testVisible = ref(false);
|
const testGroupIdx = ref();
|
|
const props = defineProps({
|
devId: {
|
type: [Number, String],
|
required: true,
|
},
|
});
|
|
// TODO 有几组
|
const onlyOneGroup = computed(() => {
|
return rtDatas.value.devStates[0].batteryCount == 1;
|
});
|
|
const devInfo = ref({});
|
|
const params = ref({});
|
|
const rtDatas = computed(() => {
|
if (message.value) {
|
let {
|
code,
|
data2: {
|
rtdataState0: { data2: monStates0 },
|
rtdataState1: { data2: monStates1 },
|
resActmState: { data2: devStates },
|
event: { data2: eventList },
|
},
|
} = JSON.parse(message.value);
|
|
if (!devStates.length) {
|
devStates = [{}, {}];
|
}
|
|
return { monStates0, monStates1, devStates, eventList };
|
} else {
|
return {
|
monStates0: [],
|
monStates1: [],
|
devStates: [{}, {}],
|
eventList: [],
|
};
|
}
|
});
|
|
function getParam() {
|
// let loading = $loading();
|
let param = props.devId;
|
getActmParam(param)
|
.then((res) => {
|
let { code, data } = res.data;
|
// loading.close();
|
if (200 == code) {
|
// $message.success("读取成功");
|
params.value = data;
|
}
|
})
|
.catch((err) => {
|
// $message.error(err);
|
// loading.close();
|
console.log(err);
|
});
|
}
|
function test(groupIdx) {
|
// if (2 == devType.value) {
|
// } else {
|
// testGroupIdx.value = undefined;
|
// }
|
testGroupIdx.value = groupIdx;
|
testVisible.value = true;
|
}
|
function controlTest(groupIdx, ctrlType) {
|
// * 2暂停 * 3继续 * 4 停止
|
let loading = $loading();
|
controllerActmParam(props.devId, groupIdx, ctrlType)
|
.then((res) => {
|
loading.close();
|
let { code, data, msg } = res.data;
|
if (200 == code) {
|
$message.success("操作成功");
|
console.log(data);
|
} else {
|
$message.error("操作失败:" + msg);
|
}
|
})
|
.catch((err) => {
|
loading.close();
|
$message.error("操作失败:" + err);
|
console.log(err);
|
});
|
}
|
|
const testMode = computed(() => {
|
let states = ["充电", "放电", "均衡"];
|
let [res1, res2] = [0, 1].map(
|
(v) => states[rtDatas.value.devStates[v].workMode]
|
);
|
return onlyOneGroup.value ? `组1:${res1}` : `组1:${res1}, 组2: ${res2}`;
|
});
|
|
const testStates = computed(() => {
|
let [res1, res2] = [0, 1].map((v) => rtDatas.value.devStates[v].moduleStatus);
|
return onlyOneGroup.value ? `组1:${res1}` : `组1:${res1}, 组2: ${res2}`;
|
});
|
|
function getInfo() {
|
getDevInfo(props.devId)
|
.then((res) => {
|
let { code, data, data2 } = res.data;
|
if (code && data) {
|
// console.log(data);
|
devInfo.value = data2;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
}
|
|
function goBack() {
|
router.push({
|
path: "/test-batch",
|
query: {
|
devType: 2,
|
},
|
});
|
}
|
|
onMounted(() => {
|
getInfo();
|
sendData(JSON.stringify({ devId: props.devId, devType: 2 }));
|
});
|
</script>
|
|
<template>
|
<div class="page">
|
<yc-card class="p-header" title="测试操作">
|
<template #tools>
|
<div class="btn-start" @click="goBack">返回</div>
|
<!-- <el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
class="btn-start btn-grp1"
|
v-if="!rtDatas.devStates[0].isTesting"
|
@click="test(0)"
|
>启动组1</el-button
|
>
|
<el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
v-else-if="!rtDatas.devStates[0].isTestPause"
|
class="btn-start btn-grp1"
|
@click="controlTest(0, 2)"
|
>暂停组1</el-button
|
>
|
<el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
v-if="rtDatas.devStates[0].isTestPause"
|
class="btn-start btn-grp1"
|
@click="controlTest(0, 3)"
|
>继续组1</el-button
|
>
|
<el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
class="btn-start btn-grp1"
|
v-if="
|
rtDatas.devStates[0].isTesting || rtDatas.devStates[0].isTestPause
|
"
|
@click="controlTest(0, 4)"
|
>停止组1</el-button
|
> -->
|
<!-- -->
|
<template v-if="!onlyOneGroup">
|
<!-- <el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
class="btn-start btn-grp2"
|
v-if="!rtDatas.devStates[1].isTesting"
|
@click="test(1)"
|
>启动组2</el-button
|
>
|
<el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
v-else-if="!rtDatas.devStates[1].isTestPause"
|
class="btn-start btn-grp2"
|
@click="controlTest(1, 2)"
|
>暂停组2</el-button
|
>
|
<el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
v-if="rtDatas.devStates[1].isTestPause"
|
class="btn-start btn-grp2"
|
@click="controlTest(1, 3)"
|
>继续组2</el-button
|
>
|
<el-button
|
size="small"
|
:disabled="!devInfo.devOnline"
|
class="btn-start btn-grp2"
|
v-if="
|
rtDatas.devStates[1].isTesting || rtDatas.devStates[1].isTestPause
|
"
|
@click="controlTest(1, 4)"
|
>停止组2</el-button
|
> -->
|
</template>
|
</template>
|
<div class="card-content">
|
<div class="label">设备型号</div>
|
<div class="value">{{ devInfo.devModel }}</div>
|
<div class="label">设备类型</div>
|
<div class="value">
|
{{ { 1: "充放电测试仪", 2: "均衡测试仪" }[devInfo.devType] }}
|
</div>
|
<div class="label">设备编号</div>
|
<div class="value">{{ devInfo.devIdcode }}</div>
|
<div class="label">通信状态</div>
|
<div :class="['value', 'state', { offLine: 0 == devInfo.devOnline }]">
|
{{ ["离线", "正常"][devInfo.devOnline] }}
|
</div>
|
<div class="label">测试模式</div>
|
<div class="value">
|
<!-- [0-充电 1-放电 2-均衡] -->
|
{{ testMode }}
|
</div>
|
<div class="label">测试状态</div>
|
<div class="value">
|
{{ testStates }}
|
</div>
|
</div>
|
</yc-card>
|
<jhy-rt-info
|
class="p-content"
|
:onlyOneGroup="onlyOneGroup"
|
:devId="devId"
|
></jhy-rt-info>
|
<!-- 弹窗 -->
|
<el-dialog
|
title="设置测试参数"
|
v-model="testVisible"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
width="700px"
|
center
|
>
|
<jh-param-content
|
v-model="testVisible"
|
v-if="testVisible"
|
:grpIdx="testGroupIdx"
|
:devs="devInfo"
|
></jh-param-content>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.custom-timeline :deep(.el-timeline-item__tail) {
|
// left: auto;
|
// right: 18px;
|
}
|
|
.custom-timeline :deep(.el-timeline-item__content) {
|
margin-left: 0;
|
margin-right: 30px;
|
}
|
|
.custom-timeline :deep(.el-timeline-item__timestamp) {
|
position: absolute;
|
left: 0;
|
transform: translateX(-100%);
|
padding-right: 20px;
|
text-align: right;
|
color: #fff;
|
}
|
.custom-timeline {
|
.card {
|
color: #fff;
|
padding-top: 10px;
|
.row {
|
display: flex;
|
height: 38px;
|
align-items: center;
|
background: rgba(0, 0, 0, 0.2);
|
border-radius: 6px;
|
margin-top: 6px;
|
padding-left: 2em;
|
.time {
|
margin-right: 0.8em;
|
color: #0ff;
|
font-weight: bold;
|
}
|
}
|
}
|
&.time-left {
|
padding-left: 160px;
|
}
|
}
|
|
.page {
|
height: 100%;
|
padding: 8px;
|
display: flex;
|
flex-direction: column;
|
.p-header {
|
height: 180px;
|
.btn-start {
|
cursor: pointer;
|
padding: 2px 12px;
|
margin-top: 8px;
|
border-radius: 6px;
|
background: #0ff;
|
color: #333;
|
font-size: 12px;
|
border: 0 none;
|
&.btn-grp0 {
|
background: rgb(231, 181, 0);
|
}
|
&.btn-grp1 {
|
background: rgb(0, 231, 231);
|
}
|
&.btn-grp2 {
|
background: rgb(0, 231, 112);
|
}
|
&.is-disabled,
|
&.is-disabled:hover {
|
background: #ccc;
|
cursor: not-allowed;
|
}
|
}
|
.card-content {
|
height: 100%;
|
padding: 20px;
|
display: grid;
|
grid-template-columns: repeat(3, 6em 1fr);
|
grid-template-rows: 1fr 1fr;
|
place-items: center start;
|
font-size: 18px;
|
color: #0ff;
|
gap: 8px;
|
.label {
|
justify-self: end;
|
&::after {
|
content: ":";
|
}
|
}
|
.value {
|
&.state {
|
color: #0f0;
|
font-weight: bold;
|
&.offLine {
|
color: #d9001b;
|
}
|
}
|
}
|
}
|
}
|
.p-content {
|
margin-top: 10px;
|
flex: 1;
|
.tab-chart {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.chart-info {
|
display: grid;
|
grid-template-columns: repeat(3, 4em 6em);
|
place-content: center center;
|
// place-items: center center;
|
gap: 6px;
|
.label {
|
display: flex;
|
justify-content: end;
|
align-items: center;
|
&::after {
|
content: ":";
|
}
|
}
|
.value {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 36px;
|
text-align: center;
|
background: #02a7f0;
|
&.max {
|
background: #438D29;
|
}
|
&.min {
|
background: #DBD608;
|
}
|
}
|
}
|
.chart-wrap {
|
flex: 1;
|
// background: #000;
|
}
|
}
|
.tab-batt {
|
display: flex;
|
flex-direction: column;
|
.info {
|
display: grid;
|
grid-template-columns: repeat(3, 4em 6em);
|
place-content: center center;
|
// place-items: center center;
|
gap: 6px;
|
.label {
|
display: flex;
|
justify-content: end;
|
align-items: center;
|
&::after {
|
content: ":";
|
}
|
}
|
.value {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 36px;
|
text-align: center;
|
background: #02a7f0;
|
&.max {
|
background: #438D29;
|
}
|
&.min {
|
background: #DBD608;
|
}
|
}
|
}
|
.list-wrap {
|
margin-top: 8px;
|
flex: 1;
|
.scroll {
|
// min-height: 0;
|
display: grid;
|
place-content: start center;
|
grid-template-columns: repeat(auto-fill, 200px);
|
overflow-y: auto;
|
gap: 24px;
|
.item {
|
display: flex;
|
border-radius: 6px;
|
background: #1e6866;
|
height: 36px;
|
align-items: center;
|
padding: 0 0.4em 0 1em;
|
.label {
|
margin-right: 1em;
|
width: 3em;
|
text-align: right;
|
}
|
.value {
|
background: #02a7f0;
|
flex: 1;
|
padding: 2px 10px;
|
border-radius: 6px;
|
&.max {
|
background: #438D29;
|
}
|
&.min {
|
background: #DBD608;
|
}
|
}
|
}
|
}
|
}
|
}
|
.test-content {
|
// background: #000;
|
display: flex;
|
flex-direction: column;
|
.state {
|
display: flex;
|
justify-content: center;
|
align-items: flex-end;
|
margin-bottom: 6px;
|
.item {
|
color: #ccc;
|
border-bottom: 1px #81d3f8 solid;
|
padding: 0 1em;
|
&.active {
|
border-bottom: 4px #fff solid;
|
font-size: 22px;
|
color: #fff;
|
}
|
}
|
}
|
.content {
|
flex: 1;
|
// background: #000;
|
display: grid;
|
grid-template-columns: 1fr 2.3fr 140px 2.3fr 1fr;
|
grid-template-rows: repeat(5, 1fr);
|
gap: 10px 20px;
|
grid-auto-flow: column;
|
place-items: center;
|
padding: 30px;
|
&::before {
|
content: "";
|
grid-area: 5 e("/") 1 e("/") 6 e("/") 2;
|
}
|
.item {
|
place-self: center stretch;
|
display: flex;
|
border-radius: 6px;
|
background: #1e6866;
|
height: 36px;
|
align-items: center;
|
padding: 0 0.4em 0 1em;
|
.label {
|
margin-right: 1em;
|
width: 3em;
|
text-align: right;
|
}
|
.value {
|
background: #02a7f0;
|
flex: 1;
|
padding: 2px 10px;
|
border-radius: 6px;
|
}
|
&.item1 {
|
grid-row: 2 e("/") 3;
|
}
|
}
|
.item-big {
|
grid-row: 1 e("/") 5;
|
grid-column: 2 e("/") 3;
|
place-self: stretch;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 60px;
|
font-weight: bold;
|
position: relative;
|
&::before {
|
content: "";
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
background: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3e%3cpath d="M200,4h-80l-80,130l80,130h70" stroke="%2302a7f0" fill="none" stroke-width="2" %3e%3c/path%3e%3cpath d="M60,66l-40,65l92,150h110" stroke="%230ff" fill="none" stroke-width="10" %3e%3c/path%3e%3c/svg%3e')
|
center center / contain no-repeat;
|
}
|
.unit {
|
color: #ccc;
|
font-size: 16px;
|
margin-left: 0.4em;
|
margin-top: 2em;
|
}
|
&.curr {
|
grid-column: 4 e("/") 5;
|
&::before {
|
transform: scaleX(-1);
|
}
|
}
|
}
|
.border {
|
grid-column: 2 e("/") 3;
|
border: 1px #0ff solid;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 0.4em;
|
height: 40px;
|
font-size: 24px;
|
width: 8em;
|
&.border2 {
|
grid-column: 4 e("/") 5;
|
}
|
.i {
|
margin-top: 0.2em;
|
}
|
}
|
.center {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
place-self: stretch;
|
grid-area: 1 e("/") 3 e("/") 6 e("/") 4;
|
.i {
|
height: 150px;
|
width: 100%;
|
background: url('data:image/svg+xml,%3csvg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M630.997333 916.074667l57.728 0.021333h36.48l6.698667 0.021333h18.794667l5.802666 0.021334h15.893334l4.757333 0.021333h12.586667l3.562666 0.021333h6.250667l2.624 0.021334h4.245333l1.578667 0.021333 2.090667 0.021333c0.874667 0 0.768 0.021333-0.448 0.042667A65.066667 65.066667 0 0 1 744.576 981.333333H279.424a65.066667 65.066667 0 0 1-64.96-61.226666l-0.106667-3.84c-1.216 0-1.344 0-0.426666-0.021334h2.069333l1.578667-0.021333h4.245333l2.624-0.021333h6.229333l3.605334-0.021334h12.565333l4.757333-0.021333 15.893334-0.021333h24.597333l6.698667-0.021334h28.8l7.68-0.021333h57.728l8.746666-0.021333h229.248z m-100.245333-698.773334l37.269333 0.042667c133.12 0.149333 250.816 0.853333 242.197334 2.133333l-0.576 0.064v672.917334c12.992 1.28-99.050667 2.005333-229.418667 2.197333l-14.293333 0.021333h-7.168l-18.645334 0.021334H465.237333l-7.189333-0.021334h-14.293333c-128-0.213333-238.314667-0.917333-229.973334-2.133333l0.576-0.085333V219.541333c-13.397333-1.322667 106.133333-2.048 241.621334-2.197333l37.248-0.042667h37.546666zM640 348.288l-250.282667 190.570667 85.674667 23.402666L384 741.248l250.282667-190.570667-85.653334-23.402666L640 348.288z m104.576-218.304a65.066667 65.066667 0 0 1 65.066667 65.066667c1.216 0 1.322667 0 0.426666 0.021333h-2.069333l-1.578667 0.021333h-4.245333l-2.624 0.021334h-6.250667l-3.584 0.021333-12.586666 0.021333h-4.736l-15.893334 0.021334h-24.597333l-6.72 0.021333h-28.8l-7.658667 0.021333-57.728 0.021334H392.981333l-57.728-0.021334H298.816l-6.72-0.021333h-18.794667l-5.802666-0.021333h-15.893334l-4.757333-0.021334h-12.586667l-3.584-0.021333h-6.229333l-2.624-0.021333h-4.245333l-1.578667-0.021334-2.090667-0.021333c-0.896 0-0.768-0.021333 0.448-0.042667l0.106667-3.818666a65.066667 65.066667 0 0 1 64.96-61.226667zM554.453333 42.666667a21.333333 21.333333 0 0 1 21.333334 21.333333v43.946667c1.92 0.085333-9.130667 0.128-25.472 0.170666h-9.386667l-4.992 0.021334h-62.250667a843.136 843.136 0 0 1-25.472-0.213334V64a21.333333 21.333333 0 0 1 21.333334-21.333333z" fill="%231296db"%3e%3c/path%3e%3c/svg%3e')
|
center center / auto 80% no-repeat;
|
}
|
.value {
|
display: flex;
|
align-items: center;
|
font-size: 32px;
|
font-weight: bold;
|
.unit {
|
color: #ccc;
|
font-size: 14px;
|
margin-left: 0.2em;
|
margin-top: 1em;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.tab-container {
|
height: 100%;
|
position: relative;
|
overflow: hidden;
|
.tab-content {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
height: 100%;
|
color: #fff;
|
padding: 6px;
|
}
|
|
.slide-left-enter-active,
|
.slide-left-leave-active,
|
.slide-right-enter-active,
|
.slide-right-leave-active {
|
transition: all 0.3s;
|
}
|
|
.slide-left-enter-from {
|
transform: translateX(100%);
|
}
|
|
.slide-left-leave-to {
|
transform: translateX(-100%);
|
}
|
|
.slide-right-enter-from {
|
transform: translateX(-100%);
|
}
|
|
.slide-right-leave-to {
|
transform: translateX(100%);
|
}
|
|
.slide-left-enter-to,
|
.slide-right-enter-to {
|
transform: translateX(0);
|
}
|
}
|
</style>
|
