程控源

2025-03-12 09:52:52 +08:00
parent ce31499964
commit cca214aaf7
3 changed files with 105 additions and 41 deletions
--- a/frontend/src/views/machine/controlSource/components/controlSourceDetail.vue
+++ b/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">
-                                          <Loading style="color: #003078;"/>
+                                        <div style="width: 80%; height: 80%;" class="loading-box">
+                                            <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;">
-                                          <Loading style="color: #003078;"/>
+                                        <div style="width: 80%; height: 80%; " class="loading-box">
+                                            <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 {
-    background-color: #000;
-    width: 300px;
-    height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 20px;
+.black-container {
+  background-color: #000;
+  width: 300px;
+  height: 300px;
+  position: relative; /* 设置为相对定位 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 20px;
+}

-    .loading-container{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-  }
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }

 .loading-box {
-  animation: rotate 2s linear infinite;
-  font-size: 30px; /* 增大图标的大小 */
+  position: relative; /* 设置为相对定位 */
+  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;
 }
--- a/frontend/src/views/machine/controlSource/components/tree.vue
+++ b/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,
-        childActiveName: data.scriptTypeCode,
-        activeIndex:data.index
-      })
+            activeName: data.scriptType,
+            childActiveName: data.scriptTypeCode,
+            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 {
--- a/frontend/src/views/machine/testScript/components/communication.vue
+++ b/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 || []
 })