1

src/views/oli-connection/monitoring-board/index.vue

@@ -4,6 +4,281 @@ const searchForm = reactive({
   status: '',
   dateRange: []
 })
+
+const value = ref([])
+
+const handleChange = (value) => {
+  console.log(value)
+}
+
+const options = [
+  {
+    value: 'guide',
+    label: 'Guide',
+    children: [
+      {
+        value: 'disciplines',
+        label: 'Disciplines',
+        children: [
+          {
+            value: 'consistency',
+            label: 'Consistency'
+          },
+          {
+            value: 'feedback',
+            label: 'Feedback'
+          },
+          {
+            value: 'efficiency',
+            label: 'Efficiency'
+          },
+          {
+            value: 'controllability',
+            label: 'Controllability'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'side nav',
+            label: 'Side Navigation'
+          },
+          {
+            value: 'top nav',
+            label: 'Top Navigation'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'component',
+    label: 'Component',
+    children: [
+      {
+        value: 'basic',
+        label: 'Basic',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout'
+          },
+          {
+            value: 'color',
+            label: 'Color'
+          },
+          {
+            value: 'typography',
+            label: 'Typography'
+          },
+          {
+            value: 'icon',
+            label: 'Icon'
+          },
+          {
+            value: 'button',
+            label: 'Button'
+          }
+        ]
+      },
+      {
+        value: 'form',
+        label: 'Form',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio'
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox'
+          },
+          {
+            value: 'input',
+            label: 'Input'
+          },
+          {
+            value: 'input-number',
+            label: 'InputNumber'
+          },
+          {
+            value: 'select',
+            label: 'Select'
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader'
+          },
+          {
+            value: 'switch',
+            label: 'Switch'
+          },
+          {
+            value: 'slider',
+            label: 'Slider'
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker'
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker'
+          },
+          {
+            value: 'datetime-picker',
+            label: 'DateTimePicker'
+          },
+          {
+            value: 'upload',
+            label: 'Upload'
+          },
+          {
+            value: 'rate',
+            label: 'Rate'
+          },
+          {
+            value: 'form',
+            label: 'Form'
+          }
+        ]
+      },
+      {
+        value: 'data',
+        label: 'Data',
+        children: [
+          {
+            value: 'table',
+            label: 'Table'
+          },
+          {
+            value: 'tag',
+            label: 'Tag'
+          },
+          {
+            value: 'progress',
+            label: 'Progress'
+          },
+          {
+            value: 'tree',
+            label: 'Tree'
+          },
+          {
+            value: 'pagination',
+            label: 'Pagination'
+          },
+          {
+            value: 'badge',
+            label: 'Badge'
+          }
+        ]
+      },
+      {
+        value: 'notice',
+        label: 'Notice',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert'
+          },
+          {
+            value: 'loading',
+            label: 'Loading'
+          },
+          {
+            value: 'message',
+            label: 'Message'
+          },
+          {
+            value: 'message-box',
+            label: 'MessageBox'
+          },
+          {
+            value: 'notification',
+            label: 'Notification'
+          }
+        ]
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'menu',
+            label: 'Menu'
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs'
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb'
+          },
+          {
+            value: 'dropdown',
+            label: 'Dropdown'
+          },
+          {
+            value: 'steps',
+            label: 'Steps'
+          }
+        ]
+      },
+      {
+        value: 'others',
+        label: 'Others',
+        children: [
+          {
+            value: 'dialog',
+            label: 'Dialog'
+          },
+          {
+            value: 'tooltip',
+            label: 'Tooltip'
+          },
+          {
+            value: 'popover',
+            label: 'Popover'
+          },
+          {
+            value: 'card',
+            label: 'Card'
+          },
+          {
+            value: 'carousel',
+            label: 'Carousel'
+          },
+          {
+            value: 'collapse',
+            label: 'Collapse'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: 'resource',
+    label: 'Resource',
+    children: [
+      {
+        value: 'axure',
+        label: 'Axure Components'
+      },
+      {
+        value: 'sketch',
+        label: 'Sketch Templates'
+      },
+      {
+        value: 'docs',
+        label: 'Design Documentation'
+      }
+    ]
+  }
+]
 </script>
 
 <template>
@@ -49,46 +324,29 @@ const searchForm = reactive({
         </span>
       </h1>
     </header>
-
     <div class="p-4">
-      <el-form />
-    </div>
-
-    <!-- <div class="px-6 py-6">
-      <el-form :inline="true" :model="searchForm" class="search-container">
+      <el-form size="default" class="search-container grid grid-cols-6 gap-6">
         <div
           class="absolute left-0 top-0 w-[2px] h-full bg-gradient-to-b from-transparent via-cyan-500 to-transparent"
         ></div>
-
-        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-x-8 gap-y-4">
-          <el-form-item label="设备节点" class="custom-item">
-            <el-input v-model="searchForm.deviceName" placeholder="请输入设备编号" />
-          </el-form-item>
-
-          <el-form-item label="监控级别" class="custom-item">
-            <el-select v-model="searchForm.level" placeholder="请选择">
-              <el-option label="核心节点" value="1" />
-              <el-option label="普通节点" value="2" />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="记录时间" class="custom-item lg:col-span-2">
-            <el-date-picker
-              v-model="searchForm.date"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始"
-              end-placeholder="结束"
-            />
-          </el-form-item>
-
-          <div class="lg:col-start-4 flex justify-end items-end gap-3 pb-[2px]">
-            <el-button type="primary" class="glow-button">执行查询</el-button>
-            <el-button class="reset-button">重置</el-button>
-          </div>
-        </div>
+        <el-form-item class="col-span-1" label="部门">
+          <el-cascader v-model="value" :options="options" @change="handleChange" />
+        </el-form-item>
+        <el-form-item class="col-span-1" label="在线状态">
+          <el-input />
+        </el-form-item>
+        <el-form-item class="col-span-3" label="时间范围">
+          <el-input />
+        </el-form-item>
+        <el-form-item class="col-span-5 col-start-1" label="设备">
+          <el-input />
+        </el-form-item>
+        <el-form-item class="col-span-1">
+          <el-button type="primary" class="glow-button">查询</el-button>
+          <el-button type="primary" class="reset-button">重制</el-button>
+        </el-form-item>
       </el-form>
-    </div> -->
+    </div>
   </div>
 </template>
 
@@ -128,11 +386,16 @@ const searchForm = reactive({
     inset 0 0 15px rgb(34 211 238 / 5%); /* 内部微光 */
 }
 
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
 /* 2. 标签颜色：提高白度 */
 :deep(.el-form-item__label) {
   font-size: 13px;
+  font-weight: 500;
   letter-spacing: 0.5px;
-  color: #e2e8f0 !important;
+  color: rgb(34 211 238) !important;
 }
 
 /* 3. 输入框：让背景更深以产生“凹陷感”，边框在聚焦时发光 */