<script setup name="testBatch">
|
import { ref, reactive, computed, watch, onMounted } from "vue";
|
import ycCard from "@/components/ycCard.vue";
|
import devCard from "@/views/dev/devCard.vue";
|
|
const devType = ref(0);
|
const keyWord = ref("");
|
|
const list = reactive({
|
// 总的选中
|
selectedList: [[], []],
|
// 筛选后的数据
|
resData: [[], []],
|
// 总数据
|
data: [
|
[
|
{
|
name: "设备编号F10000001",
|
id: 1000001,
|
},
|
{
|
name: "设备编号F10000002",
|
id: 1000002,
|
},
|
{
|
name: "设备编号F10000003",
|
id: 1000003,
|
},
|
{
|
name: "设备编号F10000004",
|
id: 1000004,
|
},
|
{
|
name: "设备编号F10000005",
|
id: 1000005,
|
},
|
{
|
name: "设备编号F10000006",
|
id: 1000006,
|
},
|
{
|
name: "设备编号F10000007",
|
id: 1000007,
|
},
|
{
|
name: "设备编号F10000008",
|
id: 1000008,
|
},
|
{
|
name: "设备编号F10000009",
|
id: 1000009,
|
},
|
{
|
name: "设备编号F10000010",
|
id: 1000010,
|
},
|
{
|
name: "设备编号F10000011",
|
id: 1000011,
|
},
|
{
|
name: "设备编号F10000012",
|
id: 1000012,
|
},
|
{
|
name: "设备编号F10000013",
|
id: 1000013,
|
},
|
],
|
[{
|
name: "设备编号L20000012",
|
id: 2000012,
|
},
|
{
|
name: "设备编号L20000013",
|
id: 2000013,
|
},],
|
],
|
});
|
// 总的选中后的数据
|
const selectData = computed(() => {
|
return [0,1].map((v) => list.data[v].filter((vv) => list.selectedList[v].includes(vv.id)));
|
});
|
|
function filterList() {
|
let idx = devType.value;
|
list.resData[idx] = list.data[idx].filter(
|
(v) => ("" + v.id).indexOf(keyWord.value) > -1
|
);
|
}
|
function typeChange(params) {
|
filterList();
|
}
|
function checkAll() {
|
let idx = devType.value;
|
let _add = list.resData[idx].map((v) => v.id);
|
|
// 处理selectedList 只会有添加
|
let _arr = _add.filter((v) => !list.selectedList[idx].includes(v));
|
list.selectedList[idx].push(..._arr);
|
}
|
function checkInvert() {
|
let idx = devType.value;
|
let old = list.selectedList[idx].filter((v) =>
|
list.resData[idx].some((vv) => vv.id == v)
|
);
|
let val = list.resData[idx]
|
.filter((v) => !old.includes(v.id))
|
.map((v) => v.id);
|
// 处理selectedList
|
let addList = val.filter((v) => !old.includes(v));
|
let removeList = old.filter((v) => !val.includes(v));
|
// 移除
|
list.selectedList[idx] = list.selectedList[idx].filter(
|
(v) => !removeList.includes(v)
|
);
|
// 添加
|
list.selectedList[idx].push(...addList);
|
}
|
function clearAll() {
|
let idx = devType.value;
|
let old = list.selectedList[idx].filter((v) =>
|
list.resData[idx].some((vv) => vv.id == v)
|
);
|
|
// 处理selectedList 只会有移除
|
list.selectedList[idx] = list.selectedList[idx].filter(
|
(v) => !old.includes(v)
|
);
|
}
|
|
onMounted(() => {
|
filterList();
|
});
|
</script>
|
|
<template>
|
<!-- 批量测试 -->
|
<div class="page">
|
<div class="p-left">
|
<div class="filter">
|
<el-input
|
v-model="keyWord"
|
class="key-word"
|
@input="filterList"
|
placeholder="请您输入您要查找的设备"
|
>
|
<template #suffix>
|
<el-icon class="el-input__icon" color="#42f4b5"><search /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="tabs">
|
<el-radio-group v-model="devType" @change="typeChange" size="default" is-button>
|
<el-radio-button :value="0">充放电一体机</el-radio-button>
|
<el-radio-button :value="1">均衡测试仪</el-radio-button>
|
</el-radio-group>
|
</div>
|
<div class="list-wrap posR">
|
<div class="list pos-full">
|
<el-checkbox-group v-model="list.selectedList[devType]">
|
<el-checkbox
|
class="item"
|
v-for="item in list.resData[devType]"
|
:key="item.name"
|
:value="item.id"
|
>{{ item.name }}</el-checkbox
|
>
|
</el-checkbox-group>
|
<!-- <div class="item" v-for="item in list" :key="item.name">
|
{{ item.name }}
|
</div> -->
|
</div>
|
</div>
|
<div class="btn-grp">
|
<div class="btn" @click="checkAll">全选</div>
|
<div class="btn" @click="checkInvert">反选</div>
|
<div class="btn" @click="clearAll">取消选择</div>
|
<!-- <div class="btn" @click="updateList">更新至右侧</div> -->
|
</div>
|
</div>
|
<yc-card class="p-header">
|
<template #tools>
|
<div class="btn-start">启动测试</div>
|
</template>
|
<div class="card-content">
|
<div class="label">设备类型</div>
|
<div class="value">{{ ['充放电一体机', '均衡测试仪'][devType] }}</div>
|
<div class="label">已选择设备总数量</div>
|
<div class="value">{{ list.selectedList[devType].length }}</div>
|
<div class="label">批量测试状态</div>
|
<div class="value">未开始</div>
|
</div>
|
</yc-card>
|
<yc-card class="p-content">
|
<div class="list-scroller pos-full">
|
<dev-card
|
v-for="dev in selectData[devType]"
|
:key="dev.id"
|
:devId="dev.id"
|
:onLine="dev.state"
|
></dev-card>
|
</div>
|
</yc-card>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page {
|
height: 100%;
|
padding: 8px;
|
display: grid;
|
grid-template-rows: 50px 1fr;
|
grid-template-columns: 340px 1fr;
|
gap: 12px;
|
|
.p-left {
|
grid-row-start: span 2;
|
background: #1a585d;
|
display: flex;
|
flex-direction: column;
|
.filter {
|
padding: 6px;
|
.key-word {
|
// margin: 6px;
|
}
|
:deep(.el-input__inner) {
|
background: transparent;
|
color: #fff;
|
&::placeholder {
|
color: #b0b7b4;
|
}
|
}
|
:deep(.el-input__wrapper) {
|
background-color: rgba(66, 244, 181, 0.1);
|
box-shadow: 0 0 0 1px #42f4b5 inset;
|
}
|
}
|
.tabs {
|
display: flex;
|
justify-content: center;
|
}
|
.btn-grp {
|
display: grid;
|
// grid-template-rows: 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
justify-items: center;
|
gap: 6px;
|
padding: 6px;
|
.btn {
|
cursor: pointer;
|
background: #0ff;
|
border-radius: 6px;
|
color: #333;
|
width: 6em;
|
text-align: center;
|
font-weight: bold;
|
}
|
}
|
.list-wrap {
|
flex: 1;
|
margin: 6px;
|
.list {
|
border: 1px solid #0ff;
|
overflow-y: auto;
|
padding-left: 4em;
|
padding-top: 6px;
|
.item {
|
height: 38px;
|
display: flex;
|
align-items: center;
|
position: relative;
|
color: #0ff;
|
cursor: pointer;
|
&:hover {
|
background: rgba(100, 216, 216, 0.3);
|
}
|
&::before {
|
content: "";
|
position: absolute;
|
left: -2em;
|
top: 50%;
|
width: 1.8em;
|
border-top: 1px solid #0ff;
|
}
|
&::after {
|
content: "";
|
position: absolute;
|
top: 50%;
|
left: -2em;
|
|
height: 100%;
|
border-left: 1px solid #0ff;
|
}
|
&:last-of-type {
|
&::after {
|
content: none;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.p-header {
|
.btn-start {
|
cursor: pointer;
|
padding: 2px 12px;
|
margin-top: 8px;
|
border-radius: 6px;
|
background: #0ff;
|
color: #333;
|
font-size: 12px;
|
}
|
.card-content {
|
height: 100%;
|
padding: 0 80px 0 20px;
|
display: grid;
|
grid-template-columns: repeat(3, 10em 1fr);
|
place-content: center center;
|
place-items: center start;
|
font-size: 18px;
|
color: #0ff;
|
gap: 8px;
|
.label {
|
justify-self: end;
|
&::after {
|
content: ":";
|
}
|
}
|
}
|
}
|
.p-content {
|
position: relative;
|
overflow: hidden;
|
.list-scroller {
|
top: 8px;
|
bottom: 8px;
|
min-height: 0;
|
display: grid;
|
grid-template-columns: repeat(auto-fill, 230px);
|
overflow-y: auto;
|
gap: 24px;
|
// justify-content: center;
|
place-content: start center;
|
}
|
}
|
}
|
</style>
|
