程控源

frontend/src/views/machine/controlSource/components/controlSourceDetail.vue

@@ -6,7 +6,7 @@
         </div>
         <div class="data-check-content">
             <div class="content-tree">
-                <Tree :treeData="treeData" @setTab="setTab" />
+                <Tree ref="treeRef" :treeData="treeData" @setTab="setTab"/>
             </div>
 
             <div class="content-right-Tabs" style="height: calc(100vh - 315px); width: 100px">
@@ -135,14 +135,16 @@
 <!--                                        </template>-->
 <!--                                        </el-progress>-->
                                       <div class="loading-container" v-if="showLoading">
-                                        <div style="width: 80%;height: 80%;" class="loading-box">
+                                        <div style="width: 80%; height: 80%;" class="loading-box">
-                                          <Loading style="color: #003078;"/>
+                                            <div class="loading-circle"></div>
+                                            <div class="loading-text">Loading...</div>
                                         </div>
 <!--                                        <div style="color:#fff;width: 80%;text-align: center;">Loading...</div>-->
                                       </div>
                                       <div class="loading-container" v-else>
-                                        <div style="width: 80%;height: 80%;font-size: 30px;">
+                                        <div style="width: 80%; height: 80%; " class="loading-box">
-                                          <Loading style="color: #003078;"/>
+                                            <div class="loading-circle static"></div>
+                                            <div class="loading-text">Loading</div>
                                         </div>
 <!--                                        <div style="color:#fff;width: 80%;text-align: center;">Loading...</div>-->
                                       </div>
@@ -155,7 +157,7 @@
                                                 type="primary"
                                                 size="large"
                                                 @click="startLoading"
-                                               
+                                                :disabled="pauseDisabled"
                                     >启动</el-button>
                                     <el-button :icon="VideoPause"
                                                 type="primary"
@@ -219,7 +221,7 @@ interface TabOption {
     children?: TabOption[]
 }
 
-
+const treeRef = ref()
 const communRef = ref()
 const treeData = ref<CheckData.TreeItem[]>([])
 const valueCode = ref('') //Absolute绝对值
@@ -286,9 +288,9 @@ const second = ref(0)
 const emit = defineEmits(['update:activeName','update:activeIndex','update:startDisabeld','update:pauseDisabled'])
 
 watch(()=>props.formControl.scriptId,()=>{
-    //console.log("切换脚本",props.formControl.scriptId);
   if(props.formControl.scriptId!=''){
     getTree()
+    
   }
 })
 const controlContent = ref<controlSource.ResControl>({
@@ -356,7 +358,7 @@ const getTree = () => {
         }
     })
 
-   
+    treeRef.value.checkTree()
 }
 
 
@@ -437,11 +439,7 @@ const view = (row: Partial<TestScript.ResTestScript> = {}) => {
     })
     viewDialog.value = true
     setTimeout(() => {
-        console.log('row',row)
+
-        console.log('communicationList',communicationList.value)
-        console.log('parentTabName',parentTabName)
-        console.log('childrenTabName',parentTabName)
-        console.log('activeName',activeName.value)
         viewRowRef.value?.open(row, communicationList.value, parentTabName, childrenTabName.value)
     }, 0)
 
@@ -515,6 +513,7 @@ const addTab = (row: any) => {
 }
 
 onMounted(() => {
+ 
     getTree()
     props.options.forEach((item: any) => {
         tabData.value.push({
@@ -605,37 +604,74 @@ defineExpose({
     }
 }
 
-.page{
+.page {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+}
 
-  .black-container {
+.black-container {
-    background-color: #000;
+  background-color: #000;
-    width: 300px;
+  width: 300px;
-    height: 300px;
+  height: 300px;
-    display: flex;
+  position: relative; /* 设置为相对定位 */
-    align-items: center;
+  display: flex;
-    justify-content: center;
+  align-items: center;
-    margin-left: 20px;
+  justify-content: center;
+  margin-left: 20px;
+}
 
-    .loading-container{
+.loading-container {
-      display: flex;
+  display: flex;
-      flex-direction: column;
+  flex-direction: column;
-      align-items: center;
+  align-items: center;
-      justify-content: center;
+  justify-content: center;
-      width: 100%;
+  width: 100%;
-      height: 100%;
+  height: 100%;
-    }
-  }
 }
 
 .loading-box {
-  animation: rotate 2s linear infinite;
+  position: relative; /* 设置为相对定位 */
-  font-size: 30px; /* 增大图标的大小 */
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+.loading-circle {
+  border: 8px solid rgba(255, 255, 255, 0.932);
+  border-top: 8px solid var(--el-color-primary); /* 蓝色 */
+  border-bottom: 8px solid var(--el-color-primary); /* 蓝色 */
+  border-radius: 50%;
+  width: 200px;
+  height: 200px;
+  position: absolute; /* 设置为绝对定位 */
+  animation: spin 2s linear infinite;
+}
+
+.loading-circle.static {
+    animation: none;
+}
+
+.loading-text {
+  position: absolute; /* 设置为绝对定位 */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+  font-size: 20px; /* 根据需要调整字体大小 */
+  text-align: center;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
+
 .hidden-tab {
     display: none;
 }

frontend/src/views/machine/controlSource/components/tree.vue

@@ -23,15 +23,17 @@
     </el-tree>
 </template>
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 
 import { CheckData } from '@/api/check/interface'
 import { da } from 'element-plus/es/locale'
+import { on } from 'events'
 const props = defineProps({
     treeData: {
         type: Array,
         required: true
     }
+
 })
 const emit = defineEmits(['setTab'])
 const dataTree = ref<CheckData.TreeItem[]>([])
@@ -111,17 +113,44 @@ function handleCheckChange(data,isChecked) {
         const checked = [data.id]; // id为tree的node-key属性
         treeRef.value?.setCheckedKeys(checked);
         emit('setTab', {
-        activeName: data.scriptType,
+            activeName: data.scriptType,
-        childActiveName: data.scriptTypeCode,
+            childActiveName: data.scriptTypeCode,
-        activeIndex:data.index
+            activeIndex:data.index
-      })
+        })
     }
 } 
 
 
+// 递归查找第一个节点的最后一层子节点
+function findFirstLeafNode(node: any): any {
+    if (node.children && node.children.length > 0) {
+        return findFirstLeafNode(node.children[0]);
+    }
+    return node;
+}
+
+const checkTree = () => {
+  
+    if (props.treeData.length > 0 && treeRef.value) {
+        const firstNode = props.treeData[0];
+        const firstLeafNode = findFirstLeafNode(firstNode);
+        const firstLeafNodeId = firstLeafNode.id;
+        treeRef.value.setCheckedKeys([firstLeafNodeId]);
+        
+    }
+}
+
+// 确保在组件挂载后也执行一次
+onMounted(() => {
+    
+    checkTree()
+});
+
+
+
 
 // // 对外映射
-// defineExpose({ init })
+ defineExpose({ checkTree })
 </script>
 <style lang="scss" scoped>
 .custom-tree-node {

frontend/src/views/machine/testScript/components/communication.vue

@@ -172,7 +172,6 @@ const getData = () => {
     return tableData.value
 }
 onMounted(() => {
-    console.log('🚀 需要:')
     info()
     // tableData.value = data.data[0].children || []
 })