样式调整

frontend/src/views/home/components/tree.vue

@@ -1,26 +1,38 @@
 <template>
   <div class="plan_tree">
-    <el-input placeholder="请输入计划名称" v-model="searchForm.planName"></el-input>
+    <div class="search_view">
+      <el-input
+        placeholder="请输入计划名称"
+        v-model="searchForm.planName"
+      ></el-input>
+      <Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;" @click.stop="detail({})" />
+    </div>
     <div class="tree_container">
-      <el-tree :data="data" ref="treeRef" :filter-node-method="filterNode" :props="defaultProps" node-key="id"
-        default-expand-all :default-checked-keys="defaultChecked" @node-click="handleNodeClick">
+      <el-tree
+        :data="data"
+        ref="treeRef"
+        :filter-node-method="filterNode"
+        :props="defaultProps"
+        node-key="id"
+        default-expand-all
+        :default-checked-keys="defaultChecked"
+        @node-click="handleNodeClick"
+      >
         <template #default="{ node, data }">
           <span class="custom-tree-node">
+            <Platform v-if="!data.pid" style="width:14px;height: 12px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
             <span>{{ node.label }}</span>
-            <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/>
+            <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
           </span>
         </template>
-
       </el-tree>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, defineExpose, watch } from "vue";
-import {
-  Menu
-} from '@element-plus/icons-vue'
-const emit = defineEmits(['jump'])
+import { Menu,Platform} from "@element-plus/icons-vue";
+const emit = defineEmits(["jump"]);
 const data: any = ref([]);
 const defaultProps = {
   children: "children",
@@ -30,11 +42,11 @@ const defaultProps = {
 const searchForm = ref({
   planName: "",
 });
-const defaultChecked = ref([])
+const defaultChecked = ref([]);
 const getTreeData = (val: any) => {
-  defaultChecked.value = []
+  defaultChecked.value = [];
   data.value = val;
-  defaultChecked.value.push(data.value[0].children[0].id)
+  defaultChecked.value.push(data.value[0].children[0].id);
 };
 const filterText = ref("");
 const treeRef = ref();
@@ -55,11 +67,9 @@ const filterNode = (value: string, data) => {
   return data.name.includes(value);
 };
 // 点击详情
-const detail=(e:any) => {
- 
-  emit('jump',e)
-  
-}
+const detail = (e: any) => {
+  emit("jump", e);
+};
 onMounted(() => {
   console.log();
 });
@@ -74,7 +84,18 @@ defineExpose({ getTreeData });
   padding: 5px;
   height: calc(100% - 70px);
   background-color: #fff;
-
+  .search_view {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 5px;
+    box-sizing: border-box;
+    align-items: center;
+    .el-input{
+      margin-top: 6px;
+    }
+  }
   .el-input {
     width: 100%;
     margin: 0 10px 10px 0;