修改比对式检测页面
This commit is contained in:
@@ -15,6 +15,7 @@ export const useCheckStore = defineStore(CHECK_STORE_KEY, {
|
||||
temperature: 0,
|
||||
humidity: 0,
|
||||
chnNumList: [],//连线数据
|
||||
nodesConnectable: true,//设置是能可以连线
|
||||
}),
|
||||
getters: {},
|
||||
actions: {
|
||||
@@ -59,6 +60,9 @@ export const useCheckStore = defineStore(CHECK_STORE_KEY, {
|
||||
setChnNum(chnNumList: string[]) {
|
||||
this.chnNumList = chnNumList
|
||||
},
|
||||
setNodesConnectable(nodesConnectable: boolean) {
|
||||
this.nodesConnectable = nodesConnectable
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
@@ -1,72 +1,75 @@
|
||||
<script setup>
|
||||
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
|
||||
import { computed } from 'vue'
|
||||
import { useCheckStore } from '@/stores/modules/check'
|
||||
|
||||
const checkStore = useCheckStore()
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
sourceX: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
sourceY: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
targetX: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
targetY: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
sourcePosition: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
targetPosition: {
|
||||
type: String,
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
markerEnd: {
|
||||
type: String,
|
||||
required: false,
|
||||
required: false
|
||||
},
|
||||
style: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
required: false
|
||||
}
|
||||
})
|
||||
|
||||
const { removeEdges } = useVueFlow()
|
||||
|
||||
const path = computed(() => getBezierPath(props))
|
||||
const edgeStyle = computed(() => ({
|
||||
...props.style,
|
||||
strokeWidth: 3
|
||||
}))
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
inheritAttrs: false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />
|
||||
<BaseEdge :id="id" :style="edgeStyle" :path="path[0]" :marker-end="markerEnd" />
|
||||
<EdgeLabelRenderer>
|
||||
<div
|
||||
:style="{
|
||||
pointerEvents: 'all',
|
||||
position: 'absolute',
|
||||
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
|
||||
transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
|
||||
}"
|
||||
class="nodrag nopan"
|
||||
>
|
||||
<el-popconfirm
|
||||
title="确定要删除这条连线吗?"
|
||||
@confirm="removeEdges(id)"
|
||||
>
|
||||
<el-popconfirm v-if="checkStore.nodesConnectable" title="确定要删除这条连线吗?" @confirm="removeEdges(id)">
|
||||
<template #reference>
|
||||
<el-icon class="edge-icon"><Delete /></el-icon>
|
||||
</template>
|
||||
|
||||
@@ -15,6 +15,8 @@
|
||||
:fit-view="true"
|
||||
:min-zoom="1"
|
||||
:max-zoom="1"
|
||||
:nodesConnectable="checkStore.nodesConnectable"
|
||||
|
||||
:elements-selectable="false"
|
||||
auto-connect
|
||||
@connect="handleConnect"
|
||||
@@ -67,10 +69,12 @@ const prop = defineProps({
|
||||
planIdKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
// 计算对话框高度
|
||||
const dialogHeight = ref(600)
|
||||
|
||||
// 初始化 VueFlow,注册自定义连线类型
|
||||
const { edges, setViewport } = useVueFlow({
|
||||
edgeTypes: {
|
||||
@@ -93,7 +97,7 @@ const createLabel = (text: string, type: string) => {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
fontSize: '15px',
|
||||
textAlign: 'center',
|
||||
// textAlign: 'center',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '8px',
|
||||
padding: '8px',
|
||||
@@ -108,8 +112,9 @@ const createLabel = (text: string, type: string) => {
|
||||
color: '#526ade'
|
||||
}
|
||||
}),
|
||||
h('div', null, '设备名称:' + text),
|
||||
h('div', null, '设备类型:' + type)
|
||||
h('div', { style: { textAlign: 'left' } }, ['设备名称:' + text, h('br'), '设备类型:' + type])
|
||||
// h('div', null, '设备名称:' + text),
|
||||
// h('div', null, '设备类型:' + type)
|
||||
]
|
||||
) as any
|
||||
}
|
||||
@@ -357,13 +362,13 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
|
||||
const deviceChannelGroups: { deviceId: string; centerY: number }[] = []
|
||||
const standardChannelGroups: any[] = []
|
||||
|
||||
const deviceWidth = 150
|
||||
const deviceWidth = 100
|
||||
const inputChannelX = 350
|
||||
const outputChannelX = 1020
|
||||
const standardWidth = 1170
|
||||
|
||||
const yPosition = ref(25)
|
||||
const yPosition2 = ref(25)
|
||||
const yPosition = ref(75)
|
||||
const yPosition2 = ref(75)
|
||||
|
||||
// 添加被检通道
|
||||
Object.entries(channelCounts).forEach(([deviceId, count]) => {
|
||||
@@ -375,6 +380,7 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
|
||||
data: { label: createLabel3(`被检通道${i}`) },
|
||||
position: { x: inputChannelX, y: yPosition.value },
|
||||
sourcePosition: 'right',
|
||||
|
||||
style: { width: '150px', border: 'none', boxShadow: 'none' }
|
||||
})
|
||||
|
||||
@@ -456,7 +462,7 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
|
||||
data: { label: createLabel(device.name, device.deviceType) },
|
||||
position: { x: deviceWidth, y: centerY },
|
||||
class: 'no-handle-node',
|
||||
style: { width: '200px', border: 'none', boxShadow: 'none' }
|
||||
style: { width: '250px', border: 'none', boxShadow: 'none' }
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -468,9 +474,9 @@ const createNodes = (device: Device.ResPqDev[], standardDev: StandardDevice.ResP
|
||||
newNodes.push({
|
||||
id: device.id,
|
||||
data: { label: createLabel(device.name, device.deviceType) },
|
||||
position: { x: standardWidth, y: centerY },
|
||||
position: { x: standardWidth, y: centerY + 25 },
|
||||
class: 'no-handle-node',
|
||||
style: { width: '200px', border: 'none', boxShadow: 'none' }
|
||||
style: { width: '250px', border: 'none', boxShadow: 'none' }
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -284,9 +284,7 @@ watch(testStatus, function (newValue, oldValue) {
|
||||
// 开始计时
|
||||
startTimeCount()
|
||||
showTestLog()
|
||||
setTimeout(() => {
|
||||
initCheckResult(CheckData.ChnCheckResultEnum.LOADING)
|
||||
}, 500)
|
||||
|
||||
//startTimer() // todo 可移除
|
||||
startData.value = new Date()
|
||||
timeDifference.value = 0
|
||||
@@ -476,6 +474,11 @@ const startTimeCount = () => {
|
||||
timeView.value = secondToTime(timeCount.value)
|
||||
}, 1000)
|
||||
}
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
initCheckResult(CheckData.ChnCheckResultEnum.LOADING)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
// 停止计时
|
||||
|
||||
@@ -39,9 +39,13 @@
|
||||
</el-steps>
|
||||
</div>
|
||||
<keep-alive>
|
||||
<ChannelPairing v-if="stepsActiveView == 0" ref="channelPairingRef" :devIdList="prop.devIdList"
|
||||
<ChannelPairing
|
||||
v-if="stepsActiveView == 0"
|
||||
ref="channelPairingRef"
|
||||
:devIdList="prop.devIdList"
|
||||
:pqStandardDevList="prop.pqStandardDevList"
|
||||
:planIdKey="prop.planIdKey" />
|
||||
:planIdKey="prop.planIdKey"
|
||||
/>
|
||||
</keep-alive>
|
||||
<keep-alive>
|
||||
<ComparePreTest
|
||||
@@ -159,6 +163,7 @@ const nextStepText = ref('下一步')
|
||||
const dialogVisible = ref(false)
|
||||
const channelPairingRef = ref()
|
||||
const showSteps = ref(false)
|
||||
|
||||
const stepsTotalNum = ref(-1) //步骤总数
|
||||
const stepsActiveIndex = ref(0) //当前正在执行的步骤索引
|
||||
const stepsActiveView = ref(1) //当前正在执行的步骤在(预处理、守时校验、系数校准、正式检测)中的排序,仅用于页面显示
|
||||
@@ -247,6 +252,7 @@ const open = async (
|
||||
if (checkStore.selectTestItems.preTest && !checkStore.selectTestItems.test) {
|
||||
testAgain.value = true
|
||||
}
|
||||
checkStore.setNodesConnectable(true)
|
||||
dialogTitle.value = title
|
||||
channelMapping.value = mapping
|
||||
planId.value = plan
|
||||
@@ -331,7 +337,7 @@ const handleSubmitAgain = async () => {
|
||||
const handleSubmitFast = async () => {
|
||||
if (channelPairingRef.value) {
|
||||
const res = await channelPairingRef.value.handleNext()
|
||||
console.log('🚀 ~ handleSubmitFast ~ res:', res)
|
||||
|
||||
if (!res) return
|
||||
dialogTitle.value = res.title
|
||||
channelMapping.value = res.mapping
|
||||
@@ -340,6 +346,8 @@ const handleSubmitFast = async () => {
|
||||
devIds.value = res.devIdsArray
|
||||
standardDevIds.value = res.standardDevIdsArray
|
||||
pairs.value = res.pair
|
||||
checkStore.setNodesConnectable(false)
|
||||
// nodesConnectable.value = false
|
||||
}
|
||||
if (!dataSocket.socketServe.connected) {
|
||||
ElMessage.error('webSocket连接中断!')
|
||||
|
||||
@@ -206,6 +206,7 @@ const open = async (
|
||||
standardDev: StandardDevice.ResPqStandardDevice[],
|
||||
fatherPlanId: string
|
||||
) => {
|
||||
CompareTestVisible.value = false
|
||||
selectTestItemPopupRef.value?.open()
|
||||
devIdList.value = device
|
||||
pqStandardDevList.value = standardDev
|
||||
@@ -484,6 +485,7 @@ defineExpose({ open })
|
||||
<style>
|
||||
.flow-container {
|
||||
width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -77,13 +77,13 @@
|
||||
<el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button icon="Delete" @click="handleRefresh">重置</el-button>
|
||||
<!-- 比对模式下的通道配对功能 -->
|
||||
<el-button type="primary" icon="Clock" @click="handleTest2">通道配对</el-button>
|
||||
<el-button type="primary" icon="Clock" @click="handleTest2" v-if="modeStore.currentMode == '比对式'">手动检测</el-button>
|
||||
<!-- 设备检测模式下的操作按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="Clock"
|
||||
@click="handleTest('手动检测')"
|
||||
v-if="form.activeTabs === 0"
|
||||
v-if="form.activeTabs === 0 &&modeStore.currentMode == '模拟式'"
|
||||
>
|
||||
手动检测
|
||||
</el-button>
|
||||
|
||||
Reference in New Issue
Block a user