导航栏/菜单栏显示逻辑修改

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="table">
+    <el-table :data="tableData" stripe style="width: 100%; height: 100%">
+      <el-table-column fixed type="selection" width="55" />
+      <el-table-column align="center" prop="date" label="设备序列号" fixed />
+      <el-table-column
+        align="center"
+        prop="name"
+        label="设备类型"
+      />
+      <el-table-column
+        align="center"
+        prop="state"
+        label="制造厂商"
+      />
+      <el-table-column
+        align="center"
+        prop="address"
+        label="MAC/IP"
+        show-overflow-tooltip
+      />
+      <!-- <el-table-column align="center" fixed="right" label="操作" width="120">
+        <template #default>
+          <el-button link type="primary" size="small" @click="handleClick">
+            删除
+          </el-button>
+          <el-button link type="primary" size="small">修改</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+const handleClick = () => {
+  console.log("click");
+};
+
+const tableData = [
+  {
+    date: "B0000F03",
+    name: "PQS882",
+    state: "南京灿能",
+    city: "Los Angeles",
+    address: "192.168.0.0.0",
+    zip: "CA 90036",
+    tag: "Home",
+  },
+  {
+    date: "B0000F02",
+    name: "PQS882",
+    state: "南京灿能",
+    city: "Los Angeles",
+    address: "192.168.0.0.0",
+    zip: "CA 90036",
+    tag: "Office",
+  },
+  {
+    date: "B0000F04",
+    name: "PQS882",
+    state: "南京灿能",
+    city: "Los Angeles",
+    address: "192.168.0.0.0",
+    zip: "CA 90036",
+    tag: "Home",
+  },
+  {
+    date: "B0000F01",
+    name: "PQS882",
+    state: "南京灿能",
+    city: "Los Angeles",
+    address: "192.168.0.0.0",
+    zip: "CA 90036",
+    tag: "Office",
+  },
+];
+onMounted(() => {
+  console.log(
+    tableData,
+    "tableDatatableDatatableDatatableDatatableDatatableDatatableData"
+  );
+});
+</script>
+<style lang="scss" scoped>
+.table {
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="plan_tree">
+    <el-input
+      placeholder="请输入计划名称"
+      v-model="searchForm.planName"
+    ></el-input>
+    <el-tree
+      :data="data"
+      ref="treeRef"
+      :filter-node-method="filterNode"
+      :props="defaultProps"
+      node-key="id"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, defineExpose, watch } from "vue";
+const data: any = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "name",
+};
+const searchForm = ref({
+  planName: "",
+});
+const getTreeData = (val: any) => {
+  console.log(val, ",,,,");
+  data.value = val;
+};
+const filterText = ref("");
+const treeRef = ref();
+watch(
+  () => searchForm.value.planName,
+  (val) => {
+    treeRef.value!.filter(val);
+  },
+  {
+    deep: true,
+  }
+);
+const handleNodeClick = (data) => {
+  console.log(data);
+};
+const filterNode = (value: string, data) => {
+  if (!value) return true;
+  return data.name.includes(value);
+};
+onMounted(() => {
+  console.log();
+});
+defineExpose({ getTreeData });
+</script>
+<style lang="scss" scoped>
+.plan_tree {
+  width: 200px;
+  height: 100%;
+  //   display: flex;
+  //   flex-direction: column;
+  padding: 5px;
+  .el-input {
+    width: 100%;
+    // height: 40px;
+    margin:0 10px 10px 0;
+  }
+  .el-tree {
+    height: calc(100% - 70px);
+  }
+}
+</style>