程控源调整

frontend/src/layouts/components/Tabs/components/MoreButton.vue

@@ -45,6 +45,7 @@ import { useTabsStore } from '@/stores/modules/tabs'
 import { useGlobalStore } from '@/stores/modules/global'
 import { useKeepAliveStore } from '@/stores/modules/keepAlive'
 import { useRoute, useRouter } from 'vue-router'
+import mittBus, { TAB_CLOSED_EVENT } from '@/utils/mittBus'
 
 const route = useRoute()
 const router = useRouter()
@@ -73,6 +74,7 @@ const maximize = () => {
 // Close Current
 const closeCurrentTab = () => {
     if (route.meta.isAffix) return
+    mittBus.emit(TAB_CLOSED_EVENT, route.fullPath)
     tabStore.removeTabs(route.fullPath)
 }
 

frontend/src/layouts/components/Tabs/index.vue

@@ -31,6 +31,7 @@ import { useTabsStore } from '@/stores/modules/tabs'
 import { useAuthStore } from '@/stores/modules/auth'
 import { TabPaneName, TabsPaneContext } from 'element-plus'
 import MoreButton from './components/MoreButton.vue'
+import mittBus, { TAB_CLOSED_EVENT } from '@/utils/mittBus'
 
 const route = useRoute()
 const router = useRouter()
@@ -110,6 +111,7 @@ const tabClick = (tabItem: TabsPaneContext) => {
 
 // Remove Tab
 const tabRemove = (fullPath: TabPaneName) => {
+    mittBus.emit(TAB_CLOSED_EVENT, fullPath as string)
     tabStore.removeTabs(fullPath as string, fullPath == route.fullPath || '/machine/testScriptAdd' == route.fullPath)
 }
 </script>

frontend/src/utils/mittBus.ts

@@ -1,10 +1,12 @@
 import mitt from "mitt";
 
 export const STOP_DETECTION_TIMER_EVENT = "stopDetectionTimer";
+export const TAB_CLOSED_EVENT = "tabClosed";
 
 type MittBusEvents = {
   openThemeDrawer: undefined;
   [STOP_DETECTION_TIMER_EVENT]: undefined;
+  [TAB_CLOSED_EVENT]: string;
 };
 
 const mittBus = mitt<MittBusEvents>();

frontend/src/views/machine/controlSource/connectionState.ts

@@ -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;
+}

frontend/src/views/machine/controlSource/index.vue

@@ -1,360 +1,471 @@
 <template>
   <div>
     <el-card style="margin-bottom: 10px" class="cardTop">
-      <el-form
+      <el-form :inline="true" label-width="auto" ref="dialogFormRef" class="form-four">
-          :inline="true"
+        <el-form-item label="检测源" prop="sourceId">
-          label-width="auto"
+          <el-select
-          ref="dialogFormRef"
+            v-model="controlContent.sourceId"
-          class="form-four"
+            collapse-tags
-      >
+            placeholder="请选择检测源"
-        <el-form-item label='检测源' prop='sourceId' >
+            :disabled="!isSourceSwitchEnabled"
-          <el-select  v-model="controlContent.sourceId" collapse-tags placeholder="请选择检测源">
+          >
             <el-option
-                v-for="(option, index) in pqSourceArray"
+              v-for="(option, index) in pqSourceArray"
-                :key="index"
+              :key="index"
-                :label="option.label"
+              :label="option.label"
-                :value="option.value"
+              :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"
+              v-for="(option, index) in scriptArray"
-                :key="index"
+              :key="index"
-                :label="option.label"
+              :label="option.label"
-                :value="option.value"
+              :value="option.value"
             />
           </el-select>
         </el-form-item>
+
         <el-form-item>
-<!--          <div class="formBut">-->
+          <el-button
-          <el-button type="primary" :icon="Select" @click="start()" :disabled="connectDisabeld">通讯校验</el-button>
+            type="primary"
-          <el-button v-if="!connectDisabeld" type="text" style="color: #303133" disabled>源未连接</el-button>
+            :icon="Connection"
-          <el-button v-else type="text" style="color: #91cc75" disabled>源连接成功</el-button>
+            @click="start"
-<!--          </div>-->
+            :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"
+    <el-card v-if="show" style="margin-bottom: 10px">
-                           @update:startDisabeld="startDisabeld=$event"
+      <div class="connection-status-row">
-                           v-model:pauseDisabled="pauseDisabled"
+        <span class="connection-status-dot" :class="`is-${connectionState.status}`"></span>
-                           @update:pauseDisabled="pauseDisabled=$event"
+        <span>{{ connectionStatusText }}</span>
-      ref="controlSourceDetailRef"/>
+      </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)
+<script setup lang="ts">
-const router = useRouter()
+import { computed, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, reactive, ref, watch } from "vue";
-const modeId = ref()
+import { useDictStore } from "@/stores/modules/dict";
-const sourceValue = ref([])
+import ControlSourceDetail from "@/views/machine/controlSource/components/controlSourceDetail.vue";
-const secondLevelOptions: any[] = []
+import { type TestScript } from "@/api/device/interface/testScript";
-// 定义弹出组件元信息
+import type { Dict } from "@/api/system/dictionary/interface";
-const dialogFormRef = ref()
+import { getDictTreeByCode } from "@/api/system/dictionary/dictTree";
-const dictStore = useDictStore()
+import { Connection } from "@element-plus/icons-vue";
-const pqSourceList=ref<TestSource.ResTestSource[]>([])//获取指定模式下所有检测源 
+import { getPqScriptList, getTestSourceList } from "@/api/plan/plan.ts";
-const modeStore = useModeStore()
+import { TestSource } from "@/api/device/interface/testSource";
-const pqSourceArray = ref<{ label: string; value: string; }[]>()
+import { CascaderOption, ElMessage } from "element-plus";
-const scriptArray = reactive<{label: string, value: string}[]>([])
+import { useRouter } from "vue-router";
-// const formContent = ref<TestScript.ResTestScript>({
+import { useModeStore } from "@/stores/modules/mode";
-//   id : '9ff96807cf8c7524587982ed8baa8b57',
+import socketClient from "@/utils/webSocketClient";
-//   name: '测试',
+import { checkSimulate } from "@/api/device/controlSource/index.ts";
-//   type: '1',
+import { controlSource } from "@/api/device/interface/controlSource";
-//   valueType: '2973cb938b591b93d0df2547599b87d8',
+import { JwtUtil } from "@/utils/jwtUtil";
-//   pattern: modeId.value,
+import mittBus, { TAB_CLOSED_EVENT } from "@/utils/mittBus";
-//   standardName: 'GBT 19862',
+import {
-//   standardTime: '2025',
+  applyConnectionTerminalMessage,
-//   state: 1
+  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 : '',
+  id: "",
-  name: '',
+  name: "",
-  type: '',
+  type: "",
-  valueType: '',
+  valueType: "",
   pattern: modeId.value,
-  standardName: '',
+  standardName: "",
-  standardTime: '',
+  standardTime: "",
-  state: 1
+  state: 1,
-})
+});
-const connectDisabeld = ref(false)
+const connectionState = ref(createDisconnectedState());
-const startDisabeld = ref(true)
+const startDisabeld = ref(true);
-const pauseDisabled = ref(true)
+const pauseDisabled = ref(true);
-const controlSourceDetailRef=ref<InstanceType<typeof ControlSourceDetail>>()
+const controlSourceDetailRef = ref<InstanceType<typeof ControlSourceDetail>>();
 
 const controlContent = ref<controlSource.ResControl>({
-  userPageId: '',
+  userPageId: "",
-  scriptId: '',
+  scriptId: "",
   scriptIndex: 0,
-  sourceId: '',
+  sourceId: "",
-})
+});
-//开始创建webSocket客户端
+
 const dataSocket = reactive({
   socketServe: socketClient.Instance,
 });
-const webMsgSend = ref()//webSocket推送的数据
+const webMsgSend = ref<any>();
 
-onMounted(async () => {
+const handleSocketMessage = (res: { code?: number; message?: string }) => {
-  // 检查 socketClient.Instance 是否存在
+  if (res.code === 20000) {
-  if (!socketClient.Instance) {
+    ElMessage.error(res.message || "请求失败");
-    console.error('WebSocket 客户端实例不存在');
     return;
   }
-  socketClient.Instance.connect();
+  webMsgSend.value = res;
-  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
-    }
-  })
 
-  const pqSource_Result = await getTestSourceList({
+const bindSocket = () => {
-    pattern: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ,
+  const socket = socketClient.Instance;
-    datasourceIds: '',
+  dataSocket.socketServe = socket;
-    sourceIds: '',
+  socket.connect();
-    planId: '',
+  socket.registerCallBack("aaa", handleSocketMessage);
-    scriptName: '',
+};
-    errorSysName: '',
+
-    sourceName: '',
+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: '',
+    id: "",
-    name: '',
+    name: "",
-    dataSourceId: '',
+    dataSourceId: "",
-    scriptId: '',
+    scriptId: "",
-    errorSysId: '',
+    errorSysId: "",
     timeCheck: 0,
     testState: 0,
     reportState: 0,
     result: 0,
     code: 0,
-    state: 1
+    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
 
-  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id //获取数据字典中对应的id
+  pqSourceList.value = pqSourceResult.data as TestSource.ResTestSource[];
-  const {data} = await getPqScriptList({pattern:patternId})
+  const sourceArray = Array.isArray(pqSourceList.value) ? pqSourceList.value : [];
-  scriptArray.push(...data.map(item => ({ label: item.name, value: item.id})))
+  pqSourceArray.value = sourceArray.map(item => ({
-  if(scriptArray.length > 0){
+    label: item.name || "",
-    controlContent.value.scriptId = scriptArray[0].value
+    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)
+    await treeInfo(modeStore.currentMode);
-    formContent.value.pattern = modeId.value
+    formContent.value.pattern = modeId.value;
-    formContent.value.id = controlContent.value.scriptId
+    formContent.value.id = controlContent.value.scriptId;
-    show.value = true
+    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('启动成功!')
+      ElMessage.success("启动成功!");
-      startDisabeld.value = false
+      startDisabeld.value = false;
-      pauseDisabled.value = false
+      pauseDisabled.value = false;
-      controlSourceDetailRef.value?.startTimeCount()
+      controlSourceDetailRef.value?.startTimeCount();
-    }else if(newValue.code !== 10201){
+    } else if (newValue.code !== 10201) {
-      ElMessage.error('启动失败!')
+      ElMessage.error("启动失败!");
-      startDisabeld.value = false
+      startDisabeld.value = false;
-      pauseDisabled.value = true
+      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':
+    case "yjc_ytxjy":
-      switch (newValue.operateCode) {
+      if (newValue.operateCode === "INIT_GATHER") {
-        case 'INIT_GATHER':
+        connectionState.value = applyConnectionTerminalMessage(connectionState.value, newValue);
-          if (newValue.code == 10200) {
+        if (newValue.code === 10200) {
-            ElMessage.success('源连接成功!')
+          ElMessage.success("源连接成功!");
-            connectDisabeld.value = true
+          startDisabeld.value = false;
-            startDisabeld.value = false
+          pauseDisabled.value = false;
-            pauseDisabled.value = false
+        } else {
-          } else if(newValue.code !== 10201) {
+          ElMessage.error(connectionStatusText.value);
-            ElMessage.error('源连接失败!')
+          startDisabeld.value = true;
-           // console.log('错误信息:',webMsgSend)
+          pauseDisabled.value = true;
-            connectDisabeld.value = false
+        }
-            startDisabeld.value = true
-            pauseDisabled.value = true
-          }
-          break;
-
-
       }
       break;
-    case 'connect':
+    case "connect":
-      switch (newValue.operateCode) {
+      if (newValue.operateCode === "Source") {
-        case "Source":
+        markConnectionFailed(newValue);
-          ElMessage.error('源连接失败!')
+        ElMessage.error(resolveConnectionFailureReason(newValue));
-          connectDisabeld.value = false
+        startDisabeld.value = true;
-          startDisabeld.value = true
+        pauseDisabled.value = true;
-          pauseDisabled.value = true
-          break;
       }
+      // else if (newValue.operateCode === "Dev") {
+      //   ElMessage.error(resolveConnectionFailureReason(newValue));
+      //   startDisabeld.value = true;
+      //   pauseDisabled.value = true;
+      // }
       break;
-    case 'server_error':
+    case "server_error":
-      if(newValue.operateCode === 'server_error'){
+      if (newValue.operateCode === "server_error") {
-        ElMessage.error('服务端主动关闭连接,请20秒后重试!')
+        markConnectionFailed(newValue);
-        connectDisabeld.value = true
+        ElMessage.error(connectionStatusText.value);
-        startDisabeld.value = true
+        startDisabeld.value = true;
-        pauseDisabled.value = true
+        pauseDisabled.value = true;
-        setTimeout(() => {
-          connectDisabeld.value = false
-          startDisabeld.value = true
-          pauseDisabled.value = true
-        }, 20000)
       }
       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: '',
+    name: "",
-    id: '',
+    id: "",
-    pid: '',
+    pid: "",
-    pids: '',
+    pids: "",
-    code: 'Script_Indicator_Items',
+    code: "Script_Indicator_Items",
-    sort: 0
+    sort: 0,
-  }
+  };
-  const result = await getDictTreeByCode(data)
+  const result = await getDictTreeByCode(data);
-  const result1 = (await getDictTreeByCode({ ...data, code: 'Script_Error' })).data[0].children
+  const result1 = (await getDictTreeByCode({ ...data, code: "Script_Error" })).data[0].children;
-  const allOptions = await convertToOptions(result.data as Dict.ResDictTree[])
+  const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
-  const setAllTree = await setTree(allOptions[0]?.children, result1)
+  const setAllTree = await setTree(allOptions[0]?.children || [], result1);
-  secondLevelOptions.push(...(setAllTree || []))
+  secondLevelOptions.push(...setAllTree);
-  modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
+  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) {
+      if (item.label.replace(/准确度|检测/g, "") === item1.name) {
-        item.value = item1.id
+        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
+const handleScriptChange = () => {
-}
-
-
-// 定义 handleScriptChange 方法
-const handleScriptChange = (value: string) => {
-  // 根据业务需求实现具体逻辑
-  //console.log('检测脚本变更:', value);
   router.push({
-                path: '/machine/controlSource',
+    path: "/machine/controlSource",
-                state: { title: '新增检测脚本', row: '', mode: modeStore.currentMode }
+    state: { title: "新增检测脚本", row: "", mode: modeStore.currentMode },
-            })
+  });
-}
+};
+
 const start = async () => {
+  if (!isConnectButtonEnabled.value) {
+    return;
+  }
 
-  controlContent.value.userPageId = JwtUtil.getLoginName()
+  connectionState.value = {
-  controlContent.value.scriptIndex = scriptIndex.value
+    status: "connecting",
-  await checkSimulate(controlContent.value)
+    reason: "",
-}
+  };
+  startDisabeld.value = true;
+  pauseDisabled.value = true;
+  controlContent.value.userPageId = JwtUtil.getLoginName();
+  controlContent.value.scriptIndex = scriptIndex.value;
 
-// 对外映射
+  try {
-defineExpose({ open })
+    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>