759 lines
19 KiB
Vue
759 lines
19 KiB
Vue
<template>
|
||
<!-- 自动检测页面 -->
|
||
<div class="test">
|
||
<!-- 顶部筛选条件&返回按钮 -->
|
||
<!-- {{ printText }} -->
|
||
<div class="test_top">
|
||
<!-- style="pointer-events: none" -->
|
||
<svg-icon name="wind" spin></svg-icon>
|
||
<el-checkbox
|
||
v-for="(item, index) in detectionOptions"
|
||
v-model="item.selected"
|
||
:key="index"
|
||
:label="item.name"
|
||
></el-checkbox
|
||
>
|
||
|
||
<el-button type="primary" @click="handlePreTest">预检测</el-button>
|
||
<el-button type="primary" @click="handleAutoTest">正式检测</el-button>
|
||
<el-button type="primary" @click="handleBackDeviceList"
|
||
>返回首页</el-button
|
||
>
|
||
|
||
<!-- <el-select v-model="currentErrSysID" placeholder="请选择误差体系" autocomplete="off">
|
||
<el-option
|
||
v-for="plan in testErrSystDataList"
|
||
:key="plan.id"
|
||
:label="plan.label"
|
||
:value="plan.id">
|
||
</el-option>
|
||
</el-select>
|
||
|
||
<el-button type="primary" @click="handlePreTest">重新计算</el-button> -->
|
||
</div>
|
||
<div class="test_bot">
|
||
<div class="test_left">
|
||
<Tree ref="treeRef"></Tree>
|
||
</div>
|
||
<div class="test_right">
|
||
<el-descriptions
|
||
style="
|
||
width: 100%;
|
||
border-radius: 6px;
|
||
margin-bottom: 10px;
|
||
background-color: #fff;
|
||
padding: 10px;
|
||
"
|
||
:column="3"
|
||
border
|
||
>
|
||
<template #extra>
|
||
<el-progress
|
||
style="width: 80%"
|
||
:percentage="percentage"
|
||
:color="customColors"
|
||
/>
|
||
<div class="test_button">
|
||
<el-button
|
||
type="primary"
|
||
v-if="!isPause"
|
||
:icon="VideoPause"
|
||
@click="handlePauseTest"
|
||
>暂停检测</el-button
|
||
>
|
||
<el-button
|
||
type="warning"
|
||
v-if="isPause"
|
||
:icon="Refresh"
|
||
@click="handlePauseTest"
|
||
>继续检测</el-button
|
||
>
|
||
<el-button type="danger" :icon="Close" @click="handleFinishTest"
|
||
>停止检测</el-button
|
||
>
|
||
<!-- <el-button
|
||
type="danger"
|
||
v-if="!isPause"
|
||
:icon="Close"
|
||
@click="handlePauseTest"
|
||
>暂停检测</el-button
|
||
>
|
||
<el-button
|
||
type="warning"
|
||
v-if="isPause"
|
||
:icon="Refresh"
|
||
@click="handlePauseTest"
|
||
>继续检测</el-button
|
||
>
|
||
<el-button type="primary" :icon="Check" @click="handleFinishTest"
|
||
>完成检测</el-button
|
||
> -->
|
||
</div>
|
||
</template>
|
||
<!-- <el-descriptions-item width="0px" label="上送数据总数">
|
||
{{ num }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item width="0px" label="已上送数据数">
|
||
{{ num1 }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item width="0px" label="待上送数据数">
|
||
{{ num2 }}
|
||
</el-descriptions-item> -->
|
||
</el-descriptions>
|
||
<!-- 右侧列表 -->
|
||
<div class="right_table">
|
||
<!-- 模拟列表样式 -->
|
||
<!-- 表头设备 -->
|
||
<div class="table_left" v-if="false">
|
||
<p>测试项目</p>
|
||
<div v-for="(item, index) in deviceTestList" :key="index">
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<div class="table_right">
|
||
<div class="right_device_title">
|
||
<p v-for="(item, index) in deviceData" :key="index">
|
||
{{ item.name }}
|
||
</p>
|
||
</div>
|
||
<div class="right_device_status">
|
||
<div v-if="beforeTest">
|
||
<span class="empty__div">暂无数据</span>
|
||
</div>
|
||
<div
|
||
class="status_info"
|
||
v-if="!beforeTest"
|
||
v-for="(item, index) in deviceTestList"
|
||
:key="index"
|
||
>
|
||
<!-- <p v-for="(vv, vvs) in item.children" :key="vvs">
|
||
{{ vv.status }}
|
||
</p> -->
|
||
<el-button
|
||
v-for="(vv, vvs) in item.children"
|
||
:key="vvs"
|
||
:type="vv.type"
|
||
text
|
||
@click="handleClick(item,index,vvs)"
|
||
>
|
||
{{ vv.label }}
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧状态加载 -->
|
||
<div class="right_status" v-if="beforeTest">
|
||
<span class="empty__div">暂无数据</span>
|
||
</div>
|
||
<div class="right_status" ref="statusRef" v-if="!beforeTest">
|
||
<!-- ,fontSize:index%5===0?'16px':'14px' -->
|
||
<p v-for="(item, index) in statusList" :key="index" :style="{color:index%5===0?'#F56C6C':'var(--el-text-color-regular)'}">
|
||
输入：{{ item.remark }} -{{
|
||
item.status == 0 ? "输出完毕" : "输入中，请稍后！"
|
||
}}<br />
|
||
<span v-if="index == statusList.length - 1">...</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<ShowDataPopup ref='showDataPopup'/>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, reactive, nextTick } from "vue";
|
||
import Tree from "./components/tree.vue";
|
||
import { data } from "@/api/plan/autoTest.json";
|
||
import { useTransition } from "@vueuse/core";
|
||
import { getPlanList } from "@/api/plan/planList";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import ShowDataPopup from './components/ShowDataPopup.vue'
|
||
import {
|
||
CirclePlus,
|
||
Delete,
|
||
EditPen,
|
||
Download,
|
||
Upload,
|
||
View,
|
||
Check,
|
||
Plus,
|
||
Refresh,
|
||
Search,
|
||
Close,
|
||
VideoPause,
|
||
} from "@element-plus/icons-vue";
|
||
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter()
|
||
const currentErrSysID = ref("2")
|
||
const treeRef = ref<any>();
|
||
const PopupVisible = ref(false)
|
||
const showDataPopup = ref()
|
||
const beforeTest = ref(true)
|
||
const testModel = ref("")
|
||
//定义与预检测配置数组
|
||
const detectionOptions = ref([
|
||
{
|
||
id: 0,
|
||
name: "标准源通讯检测",//判断源通讯是否正常
|
||
selected: true,
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "设备通讯检测",//判断设备的IP、Port、识别码、秘钥是否正常
|
||
selected: true,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "协议校验",//ICD报告触发测试
|
||
selected: true,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "相序校验",//判断装置的接线是否正确
|
||
selected: true,
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "守时校验",//判断装置24小时内的守时误差是否小于1s
|
||
selected: true,
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "通道系数校准",//通过私有协议与装置进行通讯，校准三相电压电流的通道系数
|
||
selected: true,
|
||
},
|
||
// {
|
||
// id: 6,
|
||
// name: "实时数据比对",
|
||
// },
|
||
// {
|
||
// id: 7,
|
||
// name: "录波数据比对",
|
||
// },
|
||
]);
|
||
|
||
const leftDeviceData = ref<any>([
|
||
// {
|
||
// id: 0,
|
||
// name: "设备1-预检测",
|
||
// status: 0,
|
||
// },
|
||
// {
|
||
// id: 1,
|
||
// name: "设备2-预检测",
|
||
// status: 1,
|
||
// },
|
||
// {
|
||
// id: 2,
|
||
// name: "设备3-预检测",
|
||
// status: 1,
|
||
// },
|
||
// {
|
||
// id: 3,
|
||
// name: "设备4-预检测",
|
||
// status: 0,
|
||
// },
|
||
// {
|
||
// id: 4,
|
||
// name: "设备5-预检测",
|
||
// status: 1,
|
||
// },
|
||
// {
|
||
// id: 5,
|
||
// name: "设备6-预检测",
|
||
// status: 0,
|
||
// },
|
||
]);
|
||
const initLeftDeviceData = () => {
|
||
leftDeviceData.value.map((item, index) => {
|
||
// handlePrintText(item.name, index);
|
||
});
|
||
};
|
||
|
||
const preTestData = [
|
||
{
|
||
"id": 0,
|
||
"name": "预检测项目",
|
||
"children": [
|
||
{
|
||
"scriptIdx":1,
|
||
"isChildNode":true,
|
||
"pid": "0-2",
|
||
"id": "0-2-2",
|
||
"name": "标准源通讯检测"
|
||
},
|
||
{
|
||
"scriptIdx":2,
|
||
"isChildNode":true,
|
||
"pid": "0-3",
|
||
"id": "0-3-1",
|
||
"name": "设备通讯检测"
|
||
},
|
||
{
|
||
"scriptIdx":3,
|
||
"isChildNode":true,
|
||
"pid": "0-3",
|
||
"id": "0-3-1",
|
||
"name": "协议校验"
|
||
},
|
||
{
|
||
"scriptIdx":4,
|
||
"isChildNode":true,
|
||
"pid": "0-3",
|
||
"id": "0-3-1",
|
||
"name": "相序校验"
|
||
},
|
||
{
|
||
"scriptIdx":5,
|
||
"isChildNode":true,
|
||
"pid": "0-3",
|
||
"id": "0-3-1",
|
||
"name": "守时校验"
|
||
},
|
||
{
|
||
"scriptIdx":6,
|
||
"isChildNode":true,
|
||
"pid": "0-3",
|
||
"id": "0-3-1",
|
||
"name": "通道系数校准"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
// 弹出数据查询页面
|
||
const handleClick = (item,index,vvs) => {
|
||
//const data = "检测脚本为："+item.name+";被检设备为："+item.children.value.devID+";被检通道序号为："+ item.children.monitorIndex;
|
||
console.log(vvs,index,item.name,item.children)
|
||
PopupVisible.value = true
|
||
showDataPopup.value.open()
|
||
};
|
||
let currentIndex = 0;
|
||
let totalNum = 0;
|
||
|
||
//启动预检测
|
||
const handlePreTest = () => {
|
||
ElMessage.success("启动预检测");
|
||
currentIndex = 0;
|
||
percentage.value = 0;
|
||
statusList.value = [];
|
||
deviceTestList.value = [];
|
||
statusId.value = 0;
|
||
testModel.value = "preTest"
|
||
beforeTest.value = false;
|
||
getTreeData(preTestData)
|
||
totalNum = preTestData[0].children.length;
|
||
interValTest();
|
||
|
||
// let count = 0;
|
||
// if (timer) {
|
||
// clearInterval(timer);
|
||
// count = 0;
|
||
// leftDeviceData.value = [];
|
||
// }
|
||
// if (count == 5) {
|
||
// count = 0;
|
||
// }
|
||
// else {
|
||
// timer = setInterval(async () => {
|
||
// count++;
|
||
// if (count > 15) return;
|
||
// await nextTick(() => {
|
||
// leftDeviceData.value.push({
|
||
// id: count,
|
||
// name: "设备" + count + "预检测",
|
||
// status: count % 2 == 0 ? 0 : 1,
|
||
// });
|
||
// });
|
||
// }, 2000);
|
||
// }
|
||
};
|
||
//进入检测流程
|
||
const handleAutoTest = () => {
|
||
ElMessage.success("启动正式检测");
|
||
currentIndex = 0;
|
||
percentage.value = 0;
|
||
statusList.value = [];
|
||
deviceTestList.value = [];
|
||
statusId.value = 0;
|
||
testModel.value = "Test"
|
||
beforeTest.value = false;
|
||
getTreeData(data)
|
||
// totalNum = data.length;
|
||
totalNum = 10;
|
||
|
||
interValTest();
|
||
};
|
||
//返回设备列表
|
||
const handleBackDeviceList = () => {
|
||
router.push({
|
||
path: "/home/index",
|
||
});
|
||
};
|
||
|
||
const getTreeData = (val) => {
|
||
treeRef.value && treeRef.value.getTreeData(val);
|
||
};
|
||
|
||
const tableList = ref([]);
|
||
|
||
const percentage = ref(0);
|
||
|
||
const customColors = [
|
||
// { color: "red", percentage: 0 },
|
||
// { color: "red", percentage: 10 },
|
||
// { color: "red", percentage: 20 },
|
||
// { color: "red", percentage: 30 }, //红
|
||
// { color: "red", percentage: 40 },
|
||
// { color: "#e6a23c", percentage: 50 },
|
||
// { color: "#e6a23c", percentage: 60 },
|
||
// { color: "#e6a23c", percentage: 70 }, //黄
|
||
// { color: "#e6a23c", percentage: 80 }, //1989fa
|
||
// { color: "#e6a23c", percentage: 90 }, //1989fa
|
||
{ color: "#5cb87a", percentage: 100 }, //绿
|
||
];
|
||
//加载进度条
|
||
const refreshProgress = () => {
|
||
|
||
console.log(currentIndex,totalNum,percentage.value)
|
||
if (percentage.value < 100) {
|
||
percentage.value = Math.trunc(currentIndex/totalNum * 100);
|
||
|
||
} else {
|
||
|
||
clearInterval(timer.value)
|
||
clearInterval(statusTimer.value)
|
||
|
||
let strTemp = ""
|
||
if(testModel.value === "preTest")
|
||
strTemp = "预检测过程全部结束"
|
||
else if(testModel.value === "Test")
|
||
strTemp = "正式检测全部结束"
|
||
|
||
statusId.value++;
|
||
statusList.value.push({
|
||
id: statusId.value,
|
||
remark: strTemp,
|
||
status: 0,
|
||
});
|
||
|
||
|
||
console.log("检测结束")
|
||
if(testModel.value === "preTest")
|
||
ElMessage.success("预检测过程全部结束")
|
||
else if(testModel.value === "Test")
|
||
//ElMessage.success("正式检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作")
|
||
ElMessageBox.confirm(
|
||
'检测全部结束,你可以停留在此页面查看检测结果，或返回首页进行复检、报告生成和归档等操作',
|
||
'检测完成',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
}
|
||
)
|
||
.then()
|
||
// percentage.value = 0;
|
||
// statusList.value = [];
|
||
// deviceTestList.value = [];
|
||
// statusId.value = 0;
|
||
}
|
||
};
|
||
|
||
let timer: any = ref("");
|
||
const statusTimer: any = ref("");
|
||
//检测列表数据
|
||
const deviceTestList = ref<any>([]);
|
||
//检测结果数据
|
||
const deviceList = ref<any>([]);
|
||
//前一个页面带过来的设备数据
|
||
// const deviceData = ref<any>([]);
|
||
const deviceData = ref([
|
||
{
|
||
id: 0,
|
||
name: "设备1通道1",
|
||
status: Math.floor(Math.random() * 4),
|
||
type:"info",
|
||
label:"/",
|
||
devID:"dev1",
|
||
monitorIndex:1,
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "设备1通道2",
|
||
status: Math.floor(Math.random() * 4),
|
||
type:"success",
|
||
label:"√",
|
||
devID:"dev1",
|
||
monitorIndex:2,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "设备2通道1",
|
||
status: Math.floor(Math.random() * 4),
|
||
type:"danger",
|
||
label:"×",
|
||
devID:"dev2",
|
||
monitorIndex:1,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "设备3通道1",
|
||
status: Math.floor(Math.random() * 4),
|
||
type:"success",
|
||
label:"√",
|
||
devID:"dev3",
|
||
monitorIndex:1,
|
||
},
|
||
]);
|
||
|
||
|
||
const interValTest = () => {
|
||
timer.value = setInterval(() => {
|
||
deviceTestList.value.push({
|
||
id: 0,
|
||
name: `频率 ${statusId.value}Hz`,
|
||
children: deviceData.value,
|
||
// status: Math.floor(Math.random() * 4),
|
||
});
|
||
currentIndex++;
|
||
treeRef.value && treeRef.value.getCurrentIndex(currentIndex)
|
||
refreshProgress();
|
||
}, 2000);
|
||
|
||
statusTimer.value = setInterval(() => {
|
||
getStatusList();
|
||
statusList.value.map((item: any, index: any) => {
|
||
if (index == statusList.value.length - 1) {
|
||
item.status = 1;
|
||
} else {
|
||
item.status = 0;
|
||
}
|
||
});
|
||
}, 2000);
|
||
};
|
||
|
||
//暂停检测
|
||
const isPause = ref<boolean>(false);
|
||
const handlePauseTest = () => {
|
||
if (!isPause.value) {
|
||
clearInterval(timer.value);
|
||
clearInterval(statusTimer.value);
|
||
} else {
|
||
interValTest();
|
||
}
|
||
isPause.value = !isPause.value;
|
||
};
|
||
//完成检测
|
||
const handleFinishTest = () => {
|
||
ElMessage.success("完成检测");
|
||
};
|
||
|
||
// 表格拖拽排序
|
||
const sortTable = ({
|
||
newIndex,
|
||
oldIndex,
|
||
}: {
|
||
newIndex?: number;
|
||
oldIndex?: number;
|
||
}) => {
|
||
console.log(newIndex, oldIndex);
|
||
ElMessage.success("修改列表排序成功");
|
||
};
|
||
|
||
|
||
const statusList: any = ref([]);
|
||
let statusId = ref(0);
|
||
const statusRef = ref();
|
||
const getStatusList = () => {
|
||
statusId.value++;
|
||
statusList.value.push({
|
||
id: statusId.value,
|
||
remark: `频率 ${statusId.value}Hz`,
|
||
status: 0,
|
||
});
|
||
// console.log(statusRef.value.offsetHeight);
|
||
nextTick(() => {
|
||
if (statusRef.value)
|
||
statusRef.value.scrollTop = statusRef.value.scrollHeight;
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
|
||
|
||
.empty__div {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: var(--el-text-color-secondary);
|
||
font-size: var(--el-font-size-base);
|
||
}
|
||
|
||
.test {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.test_top {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
background-color: #fff;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
border-radius: 4px;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
.el-button {
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.el-select {
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.test_bot {
|
||
flex: 1;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
height: calc(100vh - 240px);
|
||
.test_left {
|
||
max-width: 300px;
|
||
min-width: 200px;
|
||
width: 15%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
padding-bottom: 20px;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
border-radius: 6px;
|
||
padding: 5px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
.test_right {
|
||
flex: 1;
|
||
height: 100%;
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.right_table {
|
||
flex: 1;
|
||
// width: 100%;
|
||
// height: calc(100vh - 330px);
|
||
height: 100%;
|
||
flex: 1 !important;
|
||
height: calc(100vh - 560px);
|
||
border-radius: 4px;
|
||
background-color: #fff;
|
||
width: 100% !important;
|
||
display: flex;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
.table_left {
|
||
width: 150px;
|
||
height: 100%;
|
||
overflow: auto;
|
||
p {
|
||
line-height: 40px;
|
||
margin: 0;
|
||
width: 100px;
|
||
}
|
||
}
|
||
.table_right {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: auto;
|
||
flex-direction: column;
|
||
.right_device_title {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
// overflow-x: auto !important;
|
||
p {
|
||
flex: 1;
|
||
// max-width: 150px;
|
||
text-align: center;
|
||
width: auto;
|
||
padding: 0 10px;
|
||
margin: 0;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.right_device_status {
|
||
position: relative;
|
||
width: 100%;
|
||
flex: 1;
|
||
.status_info {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.el-button {
|
||
flex: 1;
|
||
// max-width: 150px;
|
||
min-width: auto;
|
||
margin: 0;
|
||
padding: 0 10px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right_status {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 150px;
|
||
overflow: auto;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
padding: 10px 0 20px 10px;
|
||
box-sizing: border-box;
|
||
p {
|
||
height: 20px;
|
||
font-size: 14px;
|
||
margin: 0 !important;
|
||
}
|
||
:nth-last-child(1) {
|
||
margin-bottom: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .header-button-lf {
|
||
clear: both !important;
|
||
}
|
||
|
||
::v-deep .el-descriptions__extra {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.test_button {
|
||
width: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|