监控查询添加搜索条件属性

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

@@ -17,6 +17,7 @@ interface Query {
   deptId?: number
   deviceCode?: string
   time?: string[]
+  identifier?: string
 }
 
 const query = ref<Query>({
@@ -50,7 +51,7 @@ const isConditionValid = computed(() => {
 const canGoBack = computed(() => historyStack.value.length > 0)
 const canGoNext = computed(() => list.value.length >= pageSize.value)
 
-const deviceOptions = ref<{ label: string; value: string }[]>([])
+const deviceOptions = ref<{ label: string; value: string; raw: any }[]>([])
 
 const optionsLoading = ref(false)
 
@@ -64,6 +65,7 @@ const loadOptions = useDebounceFn(async function () {
     deviceOptions.value = data.map((item: any) => {
       return {
         label: item.deviceCode + '-' + item.deviceName,
+        raw: item,
         value: item.deviceCode
       }
     })
@@ -74,6 +76,9 @@ const loadOptions = useDebounceFn(async function () {
   }
 }, 300)
 
+const attributeLoading = ref(false)
+const attributeOptions = ref<{ label: string; value: string; raw: any }[]>([])
+
 const handleNodeClick = (data: any) => {
   query.value.deptId = data.id
   loadOptions()
@@ -83,6 +88,33 @@ onMounted(() => {
   loadOptions()
 })
 
+const loadAttrOptions = useDebounceFn(async function (id: any) {
+  attributeOptions.value = []
+  query.value.identifier = undefined
+  try {
+    attributeLoading.value = true
+    const data = await IotDeviceApi.getIotDeviceTds(Number(id))
+    attributeOptions.value = data.map((item: any) => {
+      return {
+        label: item.modelName,
+        raw: item,
+        value: item.identifier
+      }
+    })
+  } catch (error) {
+    console.error(error)
+  } finally {
+    attributeLoading.value = false
+  }
+}, 300)
+
+function handleDeviceChange(value: string) {
+  const option = deviceOptions.value.find((i) => i.value === value)
+  if (option) {
+    loadAttrOptions(option.raw.id)
+  }
+}
+
 const loadList = useDebounceFn(async function () {
   if (!isConditionValid.value) {
     // list.value = []
@@ -239,6 +271,7 @@ function formatterValue(row: ListItem) {
             :options="deviceOptions"
             placeholder="请选择设备"
             class="w-60!"
+            @change="handleDeviceChange"
           />
         </el-form-item>
         <el-form-item label="时间">
@@ -253,6 +286,16 @@ function formatterValue(row: ListItem) {
             class="!w-360px"
           />
         </el-form-item>
+        <el-form-item label="属性">
+          <el-select
+            :loading="attributeLoading"
+            v-model="query.identifier"
+            :options="attributeOptions"
+            placeholder="请选择属性"
+            :no-data-text="!query.deviceCode ? '请先选择设备' : '暂无数据'"
+            class="w-60!"
+          />
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery()">
             <Icon icon="ep:search" class="mr-5px" /> 搜索