预见测代码
This commit is contained in:
7
frontend/src/api/socket/socket.ts
Normal file
7
frontend/src/api/socket/socket.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import type { Device } from '@/api/device/interface/device'
|
||||||
|
import http from '@/api'
|
||||||
|
|
||||||
|
|
||||||
|
export const startTest = (params) => {
|
||||||
|
return http.post(`/prepare/startTest`, params,{ loading: false })
|
||||||
|
}
|
||||||
103
frontend/src/utils/webSocketClient.ts
Normal file
103
frontend/src/utils/webSocketClient.ts
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
|
export default class SocketService {
|
||||||
|
static instance = null;
|
||||||
|
static get Instance() {
|
||||||
|
if (!this.instance) {
|
||||||
|
this.instance = new SocketService();
|
||||||
|
}
|
||||||
|
return this.instance;
|
||||||
|
}
|
||||||
|
// 和服务端连接的socket对象
|
||||||
|
ws = null;
|
||||||
|
// 存储回调函数
|
||||||
|
callBackMapping = {};
|
||||||
|
// 标识是否连接成功
|
||||||
|
connected = false;
|
||||||
|
// 记录重试的次数
|
||||||
|
sendRetryCount = 0;
|
||||||
|
// 重新连接尝试的次数
|
||||||
|
connectRetryCount = 0;
|
||||||
|
// 定义连接服务器的方法
|
||||||
|
connect(url) {
|
||||||
|
|
||||||
|
// 连接服务器
|
||||||
|
if (!window.WebSocket) {
|
||||||
|
return console.log('您的浏览器不支持WebSocket');
|
||||||
|
}
|
||||||
|
console.log(url)
|
||||||
|
// let token = $.cookie('123');
|
||||||
|
// let token = '4E6EF539AAF119D82AC4C2BC84FBA21F';
|
||||||
|
|
||||||
|
|
||||||
|
this.ws = new WebSocket(url);
|
||||||
|
// 连接成功的事件
|
||||||
|
this.ws.onopen = () => {
|
||||||
|
ElMessage.success("webSocket连接服务端成功了");
|
||||||
|
console.log('连接服务端成功了');
|
||||||
|
this.connected = true;
|
||||||
|
// 重置重新连接的次数
|
||||||
|
this.connectRetryCount = 0;
|
||||||
|
};
|
||||||
|
// 1.连接服务端失败
|
||||||
|
// 2.当连接成功之后, 服务器关闭的情况
|
||||||
|
this.ws.onclose = () => {
|
||||||
|
console.log('连接服务端失败');
|
||||||
|
this.connected = false;
|
||||||
|
this.connectRetryCount++;
|
||||||
|
setTimeout(() => {
|
||||||
|
// this.connect();
|
||||||
|
}, 500 * this.connectRetryCount);
|
||||||
|
};
|
||||||
|
// 得到服务端发送过来的数据
|
||||||
|
this.ws.onmessage = (event) => {
|
||||||
|
let message: { [key: string]: any };
|
||||||
|
try {
|
||||||
|
message = JSON.parse(event.data);
|
||||||
|
} catch (e) {
|
||||||
|
return console.error("消息解析失败", event.data, e);
|
||||||
|
}
|
||||||
|
//console.log(message, "从服务端获取到了数据");
|
||||||
|
/* 通过接受服务端发送的type字段来回调函数 */
|
||||||
|
if (message?.type && this.callBackMapping[message.type]) {
|
||||||
|
this.callBackMapping[message.type](message);
|
||||||
|
} else {
|
||||||
|
console.log("抛弃")
|
||||||
|
/* 丢弃或继续写你的逻辑 */
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// 回调函数的注册
|
||||||
|
registerCallBack(socketType, callBack) {
|
||||||
|
this.callBackMapping[socketType] = callBack;
|
||||||
|
}
|
||||||
|
// 取消某一个回调函数
|
||||||
|
unRegisterCallBack(socketType) {
|
||||||
|
this.callBackMapping[socketType] = null;
|
||||||
|
}
|
||||||
|
// 发送数据的方法
|
||||||
|
send(data) {
|
||||||
|
// 判断此时此刻有没有连接成功
|
||||||
|
if (this.connected) {
|
||||||
|
this.sendRetryCount = 0;
|
||||||
|
try {
|
||||||
|
this.ws.send(JSON.stringify(data));
|
||||||
|
} catch (e) {
|
||||||
|
this.ws.send(data);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.sendRetryCount++;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.send(data);
|
||||||
|
}, this.sendRetryCount * 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 断开方法
|
||||||
|
closeWs() {
|
||||||
|
if (this.connected) {
|
||||||
|
this.ws.close()
|
||||||
|
}
|
||||||
|
console.log('WS关闭中..');
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -62,6 +62,8 @@
|
|||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="tsx" setup name="preTest">
|
<script lang="tsx" setup name="preTest">
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
|
||||||
const step1InitLog = ref([
|
const step1InitLog = ref([
|
||||||
{
|
{
|
||||||
type: 'info',
|
type: 'info',
|
||||||
@@ -206,28 +208,133 @@ const props = defineProps({
|
|||||||
testStatus: {
|
testStatus: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'wait'
|
default: 'wait'
|
||||||
|
},
|
||||||
|
webMsgSend: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const testStatus = toRef(props, 'testStatus');
|
const testStatus = toRef(props, 'testStatus');
|
||||||
|
const webMsgSend = toRef(props, 'webMsgSend');
|
||||||
const ts = ref('');
|
const ts = ref('');
|
||||||
|
|
||||||
|
watch(webMsgSend,function (newValue,oldValue){
|
||||||
|
console.log(newValue)
|
||||||
|
|
||||||
|
switch (newValue.requestId){
|
||||||
|
case 'yjc_ytxjy':
|
||||||
|
switch (newValue.operateCode){
|
||||||
|
case 'INIT_GATHER':
|
||||||
|
if(newValue.code == 10200) {
|
||||||
|
step1InitLog.value.push({
|
||||||
|
type: 'info',
|
||||||
|
log: '源校验成功!',
|
||||||
|
})
|
||||||
|
activeIndex.value++
|
||||||
|
}else if(newValue.code == 10201){
|
||||||
|
step1InitLog.value = [{
|
||||||
|
type: 'wait',
|
||||||
|
log: '正在进行源校验!',
|
||||||
|
}];
|
||||||
|
}else if(newValue.code == 10552){
|
||||||
|
ElMessage.error(newValue.code)
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'yjc_sbtxjy':
|
||||||
|
|
||||||
|
switch (newValue.operateCode) {
|
||||||
|
case 'INIT_GATHER$01':
|
||||||
|
if (newValue.code == 10200) {
|
||||||
|
step2InitLog.value.push({
|
||||||
|
type: 'info',
|
||||||
|
log: newValue.data+'设备通讯校验成功!',
|
||||||
|
})
|
||||||
|
|
||||||
|
} else if (newValue.code == 10201) {
|
||||||
|
step2InitLog.value = [{
|
||||||
|
type: 'wait',
|
||||||
|
log: '正在进行设备通讯校验.....',
|
||||||
|
}];
|
||||||
|
} else if (newValue.code == 10552) {
|
||||||
|
ElMessage.error(newValue.code)
|
||||||
|
} else if (newValue.code == 25001) {
|
||||||
|
activeIndex.value++
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'yjc_xyjy':
|
||||||
|
switch (newValue.operateCode) {
|
||||||
|
case 'INIT_GATHER$02':
|
||||||
|
if (newValue.code == 10200) {
|
||||||
|
step3InitLog.value.push({
|
||||||
|
type: 'info',
|
||||||
|
log: '实时数据协议校验:'+newValue.data+'通讯协议校验成功!',
|
||||||
|
})
|
||||||
|
|
||||||
|
} else if (newValue.code == 10201) {
|
||||||
|
step3InitLog.value = [{
|
||||||
|
type: 'wait',
|
||||||
|
log: '正在进行通讯协议校验.....',
|
||||||
|
}];
|
||||||
|
} else if (newValue.code == 10552) {
|
||||||
|
ElMessage.error(newValue.code)
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'INIT_GATHER$03':
|
||||||
|
if (newValue.code == 10200) {
|
||||||
|
step3InitLog.value.push({
|
||||||
|
type: 'info',
|
||||||
|
log: '暂态数据协议校验:'+newValue.data+'通讯协议校验成功!',
|
||||||
|
})
|
||||||
|
|
||||||
|
} else if (newValue.code == 10201) {
|
||||||
|
|
||||||
|
} else if (newValue.code == 10552) {
|
||||||
|
ElMessage.error(newValue.code)
|
||||||
|
} else if (newValue.code == 25001) {
|
||||||
|
activeIndex.value++
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'YJC_xujy':
|
||||||
|
break;
|
||||||
|
case 'quit':
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
watch(activeIndex, function (newValue, oldValue) {
|
watch(activeIndex, function (newValue, oldValue) {
|
||||||
|
|
||||||
|
console.log(activeIndex.value)
|
||||||
if (activeIndex.value === 1) {
|
if (activeIndex.value === 1) {
|
||||||
step1InitLog.value.length = 0;
|
|
||||||
step1InitLog.value = step1Log.value;
|
|
||||||
}
|
}
|
||||||
if (activeIndex.value === 2) {
|
if (activeIndex.value === 2) {
|
||||||
step2InitLog.value.length = 0;
|
|
||||||
step2InitLog.value = step2Log.value;
|
|
||||||
}
|
}
|
||||||
if (activeIndex.value === 3) {
|
if (activeIndex.value === 3) {
|
||||||
step3InitLog.value.length = 0;
|
|
||||||
step3InitLog.value = step3Log.value;
|
|
||||||
}
|
}
|
||||||
if (activeIndex.value > 3) {
|
if (activeIndex.value > 3) {
|
||||||
step4InitLog.value.length = 0;
|
|
||||||
step4InitLog.value = step4Log.value;
|
|
||||||
}
|
}
|
||||||
if (activeIndex.value < activeTotalNum.value - 2)
|
if (activeIndex.value < activeTotalNum.value - 2)
|
||||||
collapseActiveName.value = (newValue + 1).toString()
|
collapseActiveName.value = (newValue + 1).toString()
|
||||||
@@ -241,7 +348,7 @@ watch(testStatus, function (newValue, oldValue) {
|
|||||||
if (ts.value === 'start') {
|
if (ts.value === 'start') {
|
||||||
ts.value = 'process'
|
ts.value = 'process'
|
||||||
|
|
||||||
let timer = setInterval(() => {
|
/*let timer = setInterval(() => {
|
||||||
if (activeIndex.value < activeTotalNum.value - 2)
|
if (activeIndex.value < activeTotalNum.value - 2)
|
||||||
activeIndex.value++
|
activeIndex.value++
|
||||||
else if (activeIndex.value === activeTotalNum.value - 2) {
|
else if (activeIndex.value === activeTotalNum.value - 2) {
|
||||||
@@ -253,7 +360,15 @@ watch(testStatus, function (newValue, oldValue) {
|
|||||||
ts.value = 'success'
|
ts.value = 'success'
|
||||||
}
|
}
|
||||||
|
|
||||||
}, 1500);
|
}, 1500);*/
|
||||||
|
}else if(ts.value === 'waiting'){
|
||||||
|
activeIndex.value = 0
|
||||||
|
step1InitLog.value = [
|
||||||
|
{
|
||||||
|
type: 'info',
|
||||||
|
log: '暂无数据,等待检测开始',
|
||||||
|
},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -791,7 +791,7 @@ const handleTest = async (val:string) => {
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
ElMessage.success(val);
|
// ElMessage.success(val);
|
||||||
dialogTitle.value = val;
|
dialogTitle.value = val;
|
||||||
testPopup.value?.open(dialogTitle.value,props.isTimeCheck)
|
testPopup.value?.open(dialogTitle.value,props.isTimeCheck)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Key" />
|
<el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Key" />
|
||||||
</el-steps>
|
</el-steps>
|
||||||
</div>
|
</div>
|
||||||
<preTest v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus"></preTest>
|
<preTest v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus" :webMsgSend="webMsgSend"></preTest>
|
||||||
<timeTest v-if="stepsActiveIndex === 1 && isTimeCheck" v-model:testStatus="timeTestStatus"></timeTest>
|
<timeTest v-if="stepsActiveIndex === 1 && isTimeCheck" v-model:testStatus="timeTestStatus"></timeTest>
|
||||||
<!-- <channelsTest v-if="stepsActiveIndex === 2" v-model:testStatus="channelsTestStatus"></channelsTest> -->
|
<!-- <channelsTest v-if="stepsActiveIndex === 2" v-model:testStatus="channelsTestStatus"></channelsTest> -->
|
||||||
<test v-if="stepsActiveIndex >= 2" v-model:testStatus="TestStatus"></test>
|
<test v-if="stepsActiveIndex >= 2" v-model:testStatus="TestStatus"></test>
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
|
|
||||||
<script lang="tsx" setup name="testPopup">
|
<script lang="tsx" setup name="testPopup">
|
||||||
import { h } from 'vue';
|
import { h } from 'vue';
|
||||||
import{ElMessage, ElMessageBox, ElSelectV2, FormInstance,FormItemRule}from'element-plus'
|
import {ElLoading, ElMessage, ElMessageBox, ElSelectV2, FormInstance, FormItemRule} from 'element-plus'
|
||||||
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
|
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
|
||||||
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
|
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
|
||||||
//import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
|
//import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
|
||||||
@@ -44,6 +44,8 @@
|
|||||||
import { useDictStore } from '@/stores/modules/dict'
|
import { useDictStore } from '@/stores/modules/dict'
|
||||||
import preTest from './preTest.vue'
|
import preTest from './preTest.vue'
|
||||||
import timeTest from './timeTest.vue'
|
import timeTest from './timeTest.vue'
|
||||||
|
import socketClient from '@/utils/webSocketClient';
|
||||||
|
import {startTest} from '@/api/socket/socket'
|
||||||
import channelsTest from './channelsTest.vue'
|
import channelsTest from './channelsTest.vue'
|
||||||
//import SvgIcon from '@/components/SvgIcon.vue';
|
//import SvgIcon from '@/components/SvgIcon.vue';
|
||||||
|
|
||||||
@@ -125,16 +127,106 @@ const detectionOptions = ref([
|
|||||||
const timeTestStatus = ref('waiting');//守时校验执行状态
|
const timeTestStatus = ref('waiting');//守时校验执行状态
|
||||||
const channelsTestStatus = ref('waiting');//通道系数校准执行状态
|
const channelsTestStatus = ref('waiting');//通道系数校准执行状态
|
||||||
const TestStatus = ref('waiting');//正式检测执行状态
|
const TestStatus = ref('waiting');//正式检测执行状态
|
||||||
|
const webMsgSend = ref();//webSocket推送的数据
|
||||||
|
|
||||||
const dialogTitle = ref('');
|
const dialogTitle = ref('');
|
||||||
const isTimeCheck = ref(false)
|
const isTimeCheck = ref(false)
|
||||||
|
|
||||||
// 打开弹窗,可能是新增,也可能是编辑
|
// 打开弹窗,可能是新增,也可能是编辑
|
||||||
const open = (title: string,time:boolean) => {
|
const open = (title: string,time:boolean) => {
|
||||||
|
|
||||||
dialogTitle.value = title;
|
dialogTitle.value = title;
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
isTimeCheck.value = time
|
isTimeCheck.value = time
|
||||||
|
preTestStatus.value = 'waiting';//预检测执行状态
|
||||||
|
//开始创建webSocket客户端
|
||||||
|
const data = reactive({
|
||||||
|
socketServe: socketClient.Instance,
|
||||||
|
});
|
||||||
|
const url = 'ws://localhost:7777/hello?name=cdf';
|
||||||
|
socketClient.Instance.connect(url);
|
||||||
|
data.socketServe = socketClient.Instance;
|
||||||
|
data.socketServe.registerCallBack('aaa', (res) => {
|
||||||
|
// 处理来自服务器的消息
|
||||||
|
console.log('Received message:', res);
|
||||||
|
// 根据需要在这里添加更多的处理逻辑
|
||||||
|
|
||||||
|
if(res.code === 20000){
|
||||||
|
ElMessage.error(message.message)
|
||||||
|
loading.close()
|
||||||
|
}else {
|
||||||
|
webMsgSend.value = res
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* else if(res.code === 10200){
|
||||||
|
switch (res.operateCode){
|
||||||
|
case 'INIT_GATHER':
|
||||||
|
|
||||||
|
break
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}else if(res.code === 10201){
|
||||||
|
switch (res.operateCode){
|
||||||
|
case 'INIT_GATHER':
|
||||||
|
//开始进入源初始化检测
|
||||||
|
|
||||||
|
|
||||||
|
break
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}*/
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let loading;
|
||||||
|
const handleSubmit = () => {
|
||||||
|
skipDisabled.value = true
|
||||||
|
console.log('=============',stepsActiveIndex.value)
|
||||||
|
switch (stepsActiveIndex.value) {
|
||||||
|
case 0:
|
||||||
|
preTestStatus.value = 'start'
|
||||||
|
|
||||||
|
|
||||||
|
/* loading = ElLoading.service({
|
||||||
|
lock: true,
|
||||||
|
text: '',
|
||||||
|
background: 'rgb(255, 255, 255, 0)',
|
||||||
|
})*/
|
||||||
|
startTest({
|
||||||
|
userPageId: "cdf",
|
||||||
|
devIds:["5eaba83670ff4d9daf892a62a5e13ea3","80b4b4f52a4c4064a18319525f8ac13c"],
|
||||||
|
//planId:"31cc203f3fa94fa39323ae7cc411cd66"
|
||||||
|
}).then(res=>{
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
timeTestStatus.value = 'start'
|
||||||
|
break;
|
||||||
|
// case 2:
|
||||||
|
// channelsTestStatus.value = 'start'
|
||||||
|
// break;
|
||||||
|
case 2:
|
||||||
|
TestStatus.value = 'start'
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
watch(preTestStatus,function(newValue,oldValue){
|
watch(preTestStatus,function(newValue,oldValue){
|
||||||
console.log(newValue,oldValue);
|
console.log(newValue,oldValue);
|
||||||
|
|
||||||
@@ -247,27 +339,7 @@ const getIcon = (index: number) => {
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
skipDisabled.value = true
|
|
||||||
switch (stepsActiveIndex.value) {
|
|
||||||
case 0:
|
|
||||||
preTestStatus.value = 'start'
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
timeTestStatus.value = 'start'
|
|
||||||
break;
|
|
||||||
// case 2:
|
|
||||||
// channelsTestStatus.value = 'start'
|
|
||||||
// break;
|
|
||||||
case 2:
|
|
||||||
TestStatus.value = 'start'
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// // 当 props.visible 改变时,更新 formData
|
// // 当 props.visible 改变时,更新 formData
|
||||||
// watch(() => props.visible, (newVal) => {
|
// watch(() => props.visible, (newVal) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user