ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

程控源调整

Browse Source
This commit is contained in:
caozehui
2026-06-18 10:01:39 +08:00
parent 4415eb30b2
commit cd51cfb052
5 changed files with 540 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/views/machine/controlSource/connectionState.ts Normal file
View File

@@ -0,0 +1,111 @@
export type ControlSourceConnectionStatus =
| "disconnected"
| "connecting"
| "connected"
| "failed";
export interface ControlSourceConnectionState {
status: ControlSourceConnectionStatus;
reason: string;
}
export interface SocketLikeMessage {
requestId?: string;
operateCode?: string;
code?: number;
data?: unknown;
desc?: string;
}
export function createDisconnectedState(): ControlSourceConnectionState {
return { status: "disconnected", reason: "" };
}
export function isSourceSelectable(state: ControlSourceConnectionState): boolean {
return state.status === "disconnected" || state.status === "failed";
}
export function isConnectButtonEnabled(state: ControlSourceConnectionState): boolean {
return isSourceSelectable(state);
}
export function getConnectionStatusText(state: ControlSourceConnectionState): string {
switch (state.status) {
case "connecting":
return "建立连接中";
case "connected":
return "连接成功";
case "failed":
return state.reason ? `连接失败：${state.reason}` : "连接失败";
case "disconnected":
default:
return "未连接";
}
}
export function resolveConnectionFailureReason(message: SocketLikeMessage): string {
if (message.requestId === "connect" && message.operateCode === "Source") {
return "源服务端连接失败";
}
if (message.requestId === "connect" && message.operateCode === "Dev") {
return "设备服务端连接失败";
}
const text =
typeof message.data === "string" && message.data.trim()
? message.data.trim()
: typeof message.desc === "string" && message.desc.trim()
? message.desc.trim()
: "";
if (text) {
return text;
}
if (message.requestId === "server_error") {
return "服务端主动关闭连接";
}
return "源连接失败";
}
export function shouldHandleConnectionTerminalMessage(message: SocketLikeMessage): boolean {
if (message.requestId === "yjc_ytxjy" && message.operateCode === "INIT_GATHER") {
return message.code !== 10201;
}
if (message.requestId === "connect" && message.operateCode === "Source") {
return true;
}
if (message.requestId === "server_error" && message.operateCode === "server_error") {
return true;
}
return false;
}
export function applyConnectionTerminalMessage(
state: ControlSourceConnectionState,
message: SocketLikeMessage
): ControlSourceConnectionState {
if (message.requestId === "yjc_ytxjy" && message.operateCode === "INIT_GATHER") {
if (message.code === 10200) {
return { status: "connected", reason: "" };
}
if (message.code !== 10201) {
return { status: "failed", reason: resolveConnectionFailureReason(message) };
}
}
if (message.requestId === "connect" && message.operateCode === "Source") {
return { status: "failed", reason: resolveConnectionFailureReason(message) };
}
if (message.requestId === "server_error" && message.operateCode === "server_error") {
return { status: "failed", reason: resolveConnectionFailureReason(message) };
}
return state;
}

688
frontend/src/views/machine/controlSource/index.vue
View File

@@ -1,360 +1,471 @@
<template>
<div>
<el-card style="margin-bottom: 10px" class="cardTop">
<el-form
:inline="true"
label-width="auto"
ref="dialogFormRef"
class="form-four"
>
<el-form-item label='检测源' prop='sourceId' >
<el-select v-model="controlContent.sourceId" collapse-tags placeholder="请选择检测源">
<el-form :inline="true" label-width="auto" ref="dialogFormRef" class="form-four">
<el-form-item label="检测源" prop="sourceId">
<el-select
v-model="controlContent.sourceId"
collapse-tags
placeholder="请选择检测源"
:disabled="!isSourceSwitchEnabled"
>
<el-option
v-for="(option, index) in pqSourceArray"
:key="index"
:label="option.label"
:value="option.value"
v-for="(option, index) in pqSourceArray"
:key="index"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item label='检测脚本' prop='scriptId'>
<el-select v-model="controlContent.scriptId" collapse-tags placeholder="请选择检测脚本" @change="handleScriptChange">
<el-form-item label="检测脚本" prop="scriptId">
<el-select
v-model="controlContent.scriptId"
collapse-tags
placeholder="请选择检测脚本"
@change="handleScriptChange"
>
<el-option
v-for="(option, index) in scriptArray"
:key="index"
:label="option.label"
:value="option.value"
v-for="(option, index) in scriptArray"
:key="index"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<!-- <div class="formBut">-->
<el-button type="primary" :icon="Select" @click="start()" :disabled="connectDisabeld">通讯校验</el-button>
<el-button v-if="!connectDisabeld" type="text" style="color: #303133" disabled>源未连接</el-button>
<el-button v-else type="text" style="color: #91cc75" disabled>源连接成功</el-button>
<!-- </div>-->
<el-button
type="primary"
:icon="Connection"
@click="start"
:disabled="!isConnectButtonEnabled"
>
源通讯
</el-button>
<el-button type="text" :style="{ color: connectionStatusColor }" disabled>
<span v-if="connectionState.status === 'connecting'" class="connection-loading-spinner"></span>
{{ connectionStatusText }}
</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card v-if="show">
<ControlSourceDetail v-if="secondLevelOptions.length > 0" :options="secondLevelOptions" :formContent="formContent" :formControl="controlContent"
@update:activeName="handleActiveNameChange"
@update:active-index="handleActiveIndexChange"
v-model:startDisabeld="startDisabeld"
@update:startDisabeld="startDisabeld=$event"
v-model:pauseDisabled="pauseDisabled"
@update:pauseDisabled="pauseDisabled=$event"
ref="controlSourceDetailRef"/>
<el-card v-if="show" style="margin-bottom: 10px">
<div class="connection-status-row">
<span class="connection-status-dot" :class="`is-${connectionState.status}`"></span>
<span>{{ connectionStatusText }}</span>
</div>
</el-card>
<el-card v-if="show">
<ControlSourceDetail
v-if="secondLevelOptions.length > 0"
ref="controlSourceDetailRef"
:options="secondLevelOptions"
:formContent="formContent"
:formControl="controlContent"
@update:activeName="handleActiveNameChange"
@update:active-index="handleActiveIndexChange"
v-model:startDisabeld="startDisabeld"
@update:startDisabeld="startDisabeld = $event"
v-model:pauseDisabled="pauseDisabled"
@update:pauseDisabled="pauseDisabled = $event"
/>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, nextTick, onMounted, onBeforeMount, reactive, watch } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import ControlSourceDetail from '@/views/machine/controlSource/components/controlSourceDetail.vue'
import { type TestScript } from '@/api/device/interface/testScript'
import type { Dict } from '@/api/system/dictionary/interface'
import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
import { Select } from '@element-plus/icons-vue'
import { pqScriptAdd } from '@/api/device/testScript'
import { getTestSourceList } from '@/api/plan/plan.ts'
import { TestSource } from '@/api/device/interface/testSource'
import { CascaderOption, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import socketClient from '@/utils/webSocketClient'
import { checkSimulate } from '@/api/device/controlSource/index.ts'
import { controlSource } from '@/api/device/interface/controlSource'
import {getPqScriptList} from '@/api/plan/plan.ts'
import {JwtUtil} from "@/utils/jwtUtil";
const show = ref(false)
const router = useRouter()
const modeId = ref()
const sourceValue = ref([])
const secondLevelOptions: any[] = []
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const pqSourceList=ref<TestSource.ResTestSource[]>([])//获取指定模式下所有检测源
const modeStore = useModeStore()
const pqSourceArray = ref<{ label: string; value: string; }[]>()
const scriptArray = reactive<{label: string, value: string}[]>([])
// const formContent = ref<TestScript.ResTestScript>({
// id : '9ff96807cf8c7524587982ed8baa8b57',
// name: '测试',
// type: '1',
// valueType: '2973cb938b591b93d0df2547599b87d8',
// pattern: modeId.value,
// standardName: 'GBT 19862',
// standardTime: '2025',
// state: 1
// })
<script setup lang="ts">
import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref, watch } from "vue";
import { useDictStore } from "@/stores/modules/dict";
import ControlSourceDetail from "@/views/machine/controlSource/components/controlSourceDetail.vue";
import { type TestScript } from "@/api/device/interface/testScript";
import type { Dict } from "@/api/system/dictionary/interface";
import { getDictTreeByCode } from "@/api/system/dictionary/dictTree";
import { Connection } from "@element-plus/icons-vue";
import { getPqScriptList, getTestSourceList } from "@/api/plan/plan.ts";
import { TestSource } from "@/api/device/interface/testSource";
import { CascaderOption, ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useModeStore } from "@/stores/modules/mode";
import socketClient from "@/utils/webSocketClient";
import { checkSimulate } from "@/api/device/controlSource/index.ts";
import { controlSource } from "@/api/device/interface/controlSource";
import { JwtUtil } from "@/utils/jwtUtil";
import mittBus, { TAB_CLOSED_EVENT } from "@/utils/mittBus";
import {
applyConnectionTerminalMessage,
createDisconnectedState,
getConnectionStatusText,
isConnectButtonEnabled as canConnect,
isSourceSelectable,
resolveConnectionFailureReason,
shouldHandleConnectionTerminalMessage,
} from "./connectionState";
const show = ref(false);
const router = useRouter();
const modeId = ref();
const controlSourcePath = "/machine/controlSource";
const secondLevelOptions: any[] = [];
const dialogFormRef = ref();
const dictStore = useDictStore();
const pqSourceList = ref<TestSource.ResTestSource[]>([]);
const modeStore = useModeStore();
const pqSourceArray = ref<{ label: string; value: string }[]>([]);
const scriptArray = reactive<{ label: string; value: string }[]>([]);
const formContent = ref<TestScript.ResTestScript>({
id : '',
name: '',
type: '',
valueType: '',
id: "",
name: "",
type: "",
valueType: "",
pattern: modeId.value,
standardName: '',
standardTime: '',
state: 1
})
const connectDisabeld = ref(false)
const startDisabeld = ref(true)
const pauseDisabled = ref(true)
const controlSourceDetailRef=ref<InstanceType<typeof ControlSourceDetail>>()
standardName: "",
standardTime: "",
state: 1,
});
const connectionState = ref(createDisconnectedState());
const startDisabeld = ref(true);
const pauseDisabled = ref(true);
const controlSourceDetailRef = ref<InstanceType<typeof ControlSourceDetail>>();
const controlContent = ref<controlSource.ResControl>({
userPageId: '',
scriptId: '',
userPageId: "",
scriptId: "",
scriptIndex: 0,
sourceId: '',
})
//开始创建webSocket客户端
sourceId: "",
});
const dataSocket = reactive({
socketServe: socketClient.Instance,
});
const webMsgSend = ref()//webSocket推送的数据
const webMsgSend = ref<any>();
onMounted(async () => {
// 检查 socketClient.Instance 是否存在
if (!socketClient.Instance) {
console.error('WebSocket 客户端实例不存在');
const handleSocketMessage = (res: { code?: number; message?: string }) => {
if (res.code === 20000) {
ElMessage.error(res.message || "请求失败");
return;
}
socketClient.Instance.connect();
dataSocket.socketServe = socketClient.Instance;
dataSocket.socketServe.registerCallBack('aaa', (res: { code: number; }) => {
// 处理来自服务器的消息
//console.log('Received message:', res)
// 根据需要在这里添加更多的处理逻辑
if (res.code === 20000) {
ElMessage.error(message.message)
loading.close()
} else {
webMsgSend.value = res
}
})
webMsgSend.value = res;
};
const pqSource_Result = await getTestSourceList({
pattern: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ,
datasourceIds: '',
sourceIds: '',
planId: '',
scriptName: '',
errorSysName: '',
sourceName: '',
const bindSocket = () => {
const socket = socketClient.Instance;
dataSocket.socketServe = socket;
socket.connect();
socket.registerCallBack("aaa", handleSocketMessage);
};
const unbindSocket = () => {
dataSocket.socketServe?.unRegisterCallBack?.("aaa");
};
const closeSocket = () => {
unbindSocket();
if (dataSocket.socketServe?.connected) {
dataSocket.socketServe.closeWs();
}
};
const isSourceSwitchEnabled = computed(() => isSourceSelectable(connectionState.value));
const isConnectButtonEnabled = computed(() => canConnect(connectionState.value));
const connectionStatusText = computed(() => getConnectionStatusText(connectionState.value));
const connectionStatusColor = computed(() => {
switch (connectionState.value.status) {
case "connecting":
return "#e6a23c";
case "connected":
return "#67c23a";
case "failed":
return "#f56c6c";
case "disconnected":
default:
return "#303133";
}
});
const resetConnectionState = () => {
connectionState.value = createDisconnectedState();
};
const markConnectionFailed = (message: {
data?: unknown;
desc?: string;
requestId?: string;
operateCode?: string;
}) => {
connectionState.value = {
status: "failed",
reason: resolveConnectionFailureReason(message),
};
};
onMounted(async () => {
if (!socketClient.Instance) {
console.error("WebSocket 客户端实例不存在");
return;
}
bindSocket();
const pqSourceResult = await getTestSourceList({
pattern: dictStore.getDictData("Pattern").find(item => item.name === modeStore.currentMode)?.id,
datasourceIds: "",
sourceIds: "",
planId: "",
scriptName: "",
errorSysName: "",
sourceName: "",
devIds: [],
id: '',
name: '',
dataSourceId: '',
scriptId: '',
errorSysId: '',
id: "",
name: "",
dataSourceId: "",
scriptId: "",
errorSysId: "",
timeCheck: 0,
testState: 0,
reportState: 0,
result: 0,
code: 0,
state: 1
})
pqSourceList.value = pqSource_Result.data as TestSource.ResTestSource[];
const sourceArray1 = Array.isArray(pqSourceList.value) ? pqSourceList.value : []
// 将 pqSource_Result 转换成 { label, value } 数组
pqSourceArray.value = sourceArray1.map(item => ({
label: item.name || '',
value: item.id
}));
controlContent.value.sourceId = pqSourceArray.value[0].value
state: 1,
});
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id //获取数据字典中对应的id
const {data} = await getPqScriptList({pattern:patternId})
scriptArray.push(...data.map(item => ({ label: item.name, value: item.id})))
if(scriptArray.length > 0){
controlContent.value.scriptId = scriptArray[0].value
pqSourceList.value = pqSourceResult.data as TestSource.ResTestSource[];
const sourceArray = Array.isArray(pqSourceList.value) ? pqSourceList.value : [];
pqSourceArray.value = sourceArray.map(item => ({
label: item.name || "",
value: item.id,
}));
if (pqSourceArray.value.length > 0) {
controlContent.value.sourceId = pqSourceArray.value[0].value;
}
const patternId = dictStore.getDictData("Pattern").find(item => item.name === modeStore.currentMode)?.id;
const { data } = await getPqScriptList({ pattern: patternId });
scriptArray.push(...data.map(item => ({ label: item.name, value: item.id })));
if (scriptArray.length > 0) {
controlContent.value.scriptId = scriptArray[0].value;
}
nextTick(async () => {
await treeInfo(modeStore.currentMode)
formContent.value.pattern = modeId.value
formContent.value.id = controlContent.value.scriptId
show.value = true
})
})
await treeInfo(modeStore.currentMode);
formContent.value.pattern = modeId.value;
formContent.value.id = controlContent.value.scriptId;
show.value = true;
});
});
watch(webMsgSend, function (newValue, oldValue) {
onActivated(() => {
bindSocket();
});
if (newValue.requestId.includes('formal_real&&') && newValue.operateCode === 'OPER_GATHER') {
onDeactivated(() => {
unbindSocket();
});
onBeforeUnmount(() => {
unbindSocket();
mittBus.off(TAB_CLOSED_EVENT, handleTabClosed);
});
const handleTabClosed = (closedPath: string) => {
if (closedPath !== controlSourcePath) {
return;
}
closeSocket();
};
mittBus.on(TAB_CLOSED_EVENT, handleTabClosed);
watch(webMsgSend, newValue => {
if (!newValue) {
return;
}
if (newValue.requestId?.includes("formal_real&&") && newValue.operateCode === "OPER_GATHER") {
if (newValue.code === 10200) {
ElMessage.success('启动成功!')
startDisabeld.value = false
pauseDisabled.value = false
controlSourceDetailRef.value?.startTimeCount()
}else if(newValue.code !== 10201){
ElMessage.error('启动失败!')
startDisabeld.value = false
pauseDisabled.value = true
ElMessage.success("启动成功!");
startDisabeld.value = false;
pauseDisabled.value = false;
controlSourceDetailRef.value?.startTimeCount();
} else if (newValue.code !== 10201) {
ElMessage.error("启动失败!");
startDisabeld.value = false;
pauseDisabled.value = true;
}
}
if (newValue.requestId.includes('close_source') && newValue.operateCode === 'CLOSE_GATHER') {
if (newValue.code === 10200) {
setTimeout(() => {
ElMessage.success('停止成功!')
connectDisabeld.value = false
startDisabeld.value = true
pauseDisabled.value = true
controlSourceDetailRef.value?.stopTimeCount()
}, 5000)
} else {
ElMessage.error('停止失败!')
startDisabeld.value = true
pauseDisabled.value = false
if (newValue.requestId?.includes("close_source") && newValue.operateCode === "CLOSE_GATHER") {
if (connectionState.value.status !== "connected" || newValue.code !== 10200) {
return;
}
setTimeout(() => {
ElMessage.success("停止成功!");
resetConnectionState();
startDisabeld.value = true;
pauseDisabled.value = true;
controlSourceDetailRef.value?.stopTimeCount();
}, 5000);
}
if (!shouldHandleConnectionTerminalMessage(newValue)) {
return;
}
switch (newValue.requestId) {
case 'yjc_ytxjy':
switch (newValue.operateCode) {
case 'INIT_GATHER':
if (newValue.code == 10200) {
ElMessage.success('源连接成功!')
connectDisabeld.value = true
startDisabeld.value = false
pauseDisabled.value = false
} else if(newValue.code !== 10201) {
ElMessage.error('源连接失败!')
// console.log('错误信息:',webMsgSend)
connectDisabeld.value = false
startDisabeld.value = true
pauseDisabled.value = true
}
break;
case "yjc_ytxjy":
if (newValue.operateCode === "INIT_GATHER") {
connectionState.value = applyConnectionTerminalMessage(connectionState.value, newValue);
if (newValue.code === 10200) {
ElMessage.success("源连接成功!");
startDisabeld.value = false;
pauseDisabled.value = false;
} else {
ElMessage.error(connectionStatusText.value);
startDisabeld.value = true;
pauseDisabled.value = true;
}
}
break;
case 'connect':
switch (newValue.operateCode) {
case "Source":
ElMessage.error('源连接失败!')
connectDisabeld.value = false
startDisabeld.value = true
pauseDisabled.value = true
break;
case "connect":
if (newValue.operateCode === "Source") {
markConnectionFailed(newValue);
ElMessage.error(resolveConnectionFailureReason(newValue));
startDisabeld.value = true;
pauseDisabled.value = true;
}
// else if (newValue.operateCode === "Dev") {
// ElMessage.error(resolveConnectionFailureReason(newValue));
// startDisabeld.value = true;
// pauseDisabled.value = true;
// }
break;
case 'server_error':
if(newValue.operateCode === 'server_error'){
ElMessage.error('服务端主动关闭连接,请20秒后重试!')
connectDisabeld.value = true
startDisabeld.value = true
pauseDisabled.value = true
setTimeout(() => {
connectDisabeld.value = false
startDisabeld.value = true
pauseDisabled.value = true
}, 20000)
case "server_error":
if (newValue.operateCode === "server_error") {
markConnectionFailed(newValue);
ElMessage.error(connectionStatusText.value);
startDisabeld.value = true;
pauseDisabled.value = true;
}
break;
}
});
watch(
() => controlContent.value.sourceId,
(newValue, oldValue) => {
if (!oldValue || newValue === oldValue) {
return;
}
resetConnectionState();
startDisabeld.value = true;
pauseDisabled.value = true;
controlSourceDetailRef.value?.stopTimeCount();
}
);
})
// 获取树字典
const treeInfo = async (currentMode: string) => {
const data: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: 'Script_Indicator_Items',
sort: 0
}
const result = await getDictTreeByCode(data)
const result1 = (await getDictTreeByCode({ ...data, code: 'Script_Error' })).data[0].children
const allOptions = await convertToOptions(result.data as Dict.ResDictTree[])
const setAllTree = await setTree(allOptions[0]?.children, result1)
secondLevelOptions.push(...(setAllTree || []))
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
}
name: "",
id: "",
pid: "",
pids: "",
code: "Script_Indicator_Items",
sort: 0,
};
const result = await getDictTreeByCode(data);
const result1 = (await getDictTreeByCode({ ...data, code: "Script_Error" })).data[0].children;
const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
const setAllTree = await setTree(allOptions[0]?.children || [], result1);
secondLevelOptions.push(...setAllTree);
modeId.value = dictStore.getDictData("Pattern").find(item => item.name === currentMode)?.id;
};
const setTree = async (data, data1) => {
const setTree = async (data: any[], data1: any[]) => {
data.forEach(item => {
data1.forEach(item1 => {
if (item.label.replace(/准确度|检测/g, '') == item1.name) {
item.value = item1.id
if (item.label.replace(/准确度|检测/g, "") === item1.name) {
item.value = item1.id;
}
})
})
return data
}
});
});
return data;
};
// 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
return dictTree.map(item => ({
value: item.id,
code: item.code.split('-')[1] || item.code.split('-')[0],
code: item.code.split("-")[1] || item.code.split("-")[0],
label: item.name,
children: item.children ? convertToOptions(item.children) : undefined
}))
}
children: item.children ? convertToOptions(item.children) : undefined,
}));
};
const scriptId = ref("");
const scriptIndex = ref(0);
const scriptId = ref('')
const scriptIndex = ref(0)
const handleActiveNameChange = (newActiveName: string) => {
scriptId.value = newActiveName
}
scriptId.value = newActiveName;
};
const handleActiveIndexChange = (newActiveIndex: number) => {
scriptIndex.value = newActiveIndex;
};
scriptIndex.value = newActiveIndex
}
// 定义 handleScriptChange 方法
const handleScriptChange = (value: string) => {
// 根据业务需求实现具体逻辑
//console.log('检测脚本变更:', value);
const handleScriptChange = () => {
router.push({
path: '/machine/controlSource',
state: { title: '新增检测脚本', row: '', mode: modeStore.currentMode }
})
}
const start = async () => {
controlContent.value.userPageId = JwtUtil.getLoginName()
controlContent.value.scriptIndex = scriptIndex.value
await checkSimulate(controlContent.value)
}
path: "/machine/controlSource",
state: { title: "新增检测脚本", row: "", mode: modeStore.currentMode },
});
};
// 对外映射
defineExpose({ open })
const start = async () => {
if (!isConnectButtonEnabled.value) {
return;
}
connectionState.value = {
status: "connecting",
reason: "",
};
startDisabeld.value = true;
pauseDisabled.value = true;
controlContent.value.userPageId = JwtUtil.getLoginName();
controlContent.value.scriptIndex = scriptIndex.value;
try {
await checkSimulate(controlContent.value);
} catch (error: any) {
connectionState.value = {
status: "failed",
reason: error?.message || "请求失败",
};
ElMessage.error(connectionStatusText.value);
}
};
</script>
<style lang="scss" scoped>
/* .dialog-content {
padding: 10px;
} */
:deep(.cardTop) {
.el-card__body {
padding: 20px 0 0 20px;
}
}
//.formBut {
// width: 50%;
// display: flex;
// justify-content: end;
//}
.form-four {
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
.el-form-item {
display: flex;
width: 24.0%;
width: 24%;
.el-form-item__content {
flex: 1;
.el-select,
.el-cascader,
.el-input__inner,
@@ -364,4 +475,51 @@ defineExpose({ open })
}
}
}
.connection-status-row {
display: flex;
align-items: center;
gap: 8px;
color: var(--el-text-color-regular);
}
.connection-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #909399;
}
.connection-status-dot.is-connecting {
background: #e6a23c;
}
.connection-status-dot.is-connected {
background: #67c23a;
}
.connection-status-dot.is-failed {
background: #f56c6c;
}
.connection-loading-spinner {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
border: 2px solid rgba(230, 162, 60, 0.25);
border-top-color: #e6a23c;
border-radius: 50%;
vertical-align: -1px;
animation: control-source-spin 0.8s linear infinite;
}
@keyframes control-source-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>