设备监控

src/api/pms/device/index.ts

@@ -53,6 +53,9 @@ export const IotDeviceApi = {
   getCompany: async (params: any) => {
     return await request.get({ url: `/rq/iot-device/company?id=` + params })
   },
+  getDevice: async (params: any) => {
+    return await request.get({ url: `rq/iot-device/ly/device`, params })
+  },
   getCompanyByDevice: async (params: any) => {
     return await request.get({ url: `/rq/iot-device/company/` + params })
   },

src/components/DeptTreeSelect/index.vue

@@ -75,11 +75,7 @@ const loadTree = async () => {
       // 检查传入的 modelValue 是否存在于当前加载的树数据中
       const isModelValueValid = props.modelValue && res.some((item) => item.id === props.modelValue)
 
-      if (isModelValueValid) {
-        // A. 如果传入了值，且该值在当前树结构中，不做修改，保留原值
-        // 这里不需要 emit，因为值没变
-      } else {
-        // B. 如果没有传入值，或者传入的值不在当前树结构中，强制选中根节点
+      if (!isModelValueValid) {
         emits('update:modelValue', id)
       }
     }

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

@@ -7,24 +7,21 @@ import { formatIotValue } from '@/utils/useSocketBus'
 import { useDebounceFn } from '@vueuse/core'
 import { dayjs, ElMessage } from 'element-plus'
 import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+defineOptions({ name: 'MonitoringQuery' })
 
 const id = useUserStore().getUser.deptId ?? 157
 const deptId = id
 
 interface Query {
   deptId?: number
-  deviceName?: string
   deviceCode?: string
   time?: string[]
 }
 
 const query = ref<Query>({
-  deviceName: '',
   deviceCode: '',
-  time: []
+  time: [...rangeShortcuts[0].value().map((item) => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))]
 })
 
 const pageSize = ref(100)
@@ -46,13 +43,46 @@ const loading = ref(false)
 
 const isConditionValid = computed(() => {
   const hasTime = query.value.time && query.value.time.length === 2
-  const hasIdentity = !!query.value.deviceName || !!query.value.deviceCode
+  const hasIdentity = !!query.value.deviceCode
   return hasTime && hasIdentity
 })
 
 const canGoBack = computed(() => historyStack.value.length > 0)
 const canGoNext = computed(() => list.value.length >= pageSize.value)
 
+const deviceOptions = ref<{ label: string; value: string }[]>([])
+
+const optionsLoading = ref(false)
+
+const loadOptions = useDebounceFn(async function () {
+  handleReset()
+  try {
+    optionsLoading.value = true
+    const data = await IotDeviceApi.getDevice({
+      deptId: query.value.deptId
+    })
+    deviceOptions.value = data.map((item: any) => {
+      return {
+        label: item.deviceCode + '-' + item.deviceName,
+        value: item.deviceCode
+      }
+    })
+  } catch (error) {
+    console.error(error)
+  } finally {
+    optionsLoading.value = false
+  }
+}, 300)
+
+const handleNodeClick = (data: any) => {
+  query.value.deptId = data.id
+  loadOptions()
+}
+
+onMounted(() => {
+  loadOptions()
+})
+
 const loadList = useDebounceFn(async function () {
   if (!isConditionValid.value) {
     // list.value = []
@@ -82,8 +112,8 @@ const loadList = useDebounceFn(async function () {
 })
 
 function handleQuery() {
-  if (!query.value.deviceName && !query.value.deviceCode) {
-    ElMessage.warning('请输入设备名称或设备编码')
+  if (!query.value.deviceCode) {
+    ElMessage.warning('请选择设备')
     return
   }
 
@@ -102,8 +132,7 @@ function handleQuery() {
 function handleReset() {
   query.value = {
     deviceCode: '',
-    deviceName: '',
-    time: []
+    time: [...rangeShortcuts[0].value().map((item) => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))]
   }
   list.value = []
   historyStack.value = []
@@ -147,8 +176,8 @@ function handleSizeChange() {
 const exportLoading = ref(false)
 
 const handleExport = useDebounceFn(async function () {
-  if (!query.value.deviceName && !query.value.deviceCode) {
-    ElMessage.warning('请输入设备名称或设备编码')
+  if (!query.value.deviceCode) {
+    ElMessage.warning('请选择设备')
     return
   }
 
@@ -189,7 +218,13 @@ function formatterValue(row: ListItem) {
     class="grid grid-cols-[15%_1fr] grid-rows-[62px_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
   >
     <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-2">
-      <DeptTreeSelect :top-id="156" :deptId="deptId" :init-select="false" :show-title="false" />
+      <DeptTreeSelect
+        :top-id="156"
+        :deptId="deptId"
+        :init-select="false"
+        :show-title="false"
+        @node-click="handleNodeClick"
+      />
     </div>
 
     <el-form
@@ -197,22 +232,13 @@ function formatterValue(row: ListItem) {
       class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 gap-8 flex items-center justify-between"
     >
       <div class="flex items-center gap-8">
-        <el-form-item :label="t('monitor.deviceName')">
-          <el-input
-            v-model="query.deviceName"
-            :placeholder="t('monitor.nameHolder')"
-            clearable
-            @keyup.enter="handleQuery()"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item :label="t('monitor.deviceCode')">
-          <el-input
+        <el-form-item label="设备">
+          <el-select
+            :loading="optionsLoading"
             v-model="query.deviceCode"
-            :placeholder="t('monitor.codeHolder')"
-            clearable
-            @keyup.enter="handleQuery()"
-            class="!w-240px"
+            :options="deviceOptions"
+            placeholder="请选择设备"
+            class="w-60!"
           />
         </el-form-item>
         <el-form-item label="时间">
@@ -224,7 +250,7 @@ function formatterValue(row: ListItem) {
             end-placeholder="结束日期"
             :shortcuts="rangeShortcuts"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-352px"
+            class="!w-360px"
           />
         </el-form-item>
         <el-form-item>

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

@@ -5,6 +5,8 @@ import { useUserStore } from '@/store/modules/user'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { useDebounceFn } from '@vueuse/core'
 
+defineOptions({ name: 'MonitoringList' })
+
 const { t } = useI18n()
 
 const id = useUserStore().getUser.deptId ?? 157
@@ -24,7 +26,8 @@ const viewMode = ref('card')
 const query = ref<Query>({
   pageNo: 1,
   pageSize: 12,
-  deptId: id
+  deptId: id,
+  ifInline: 3
 })
 
 interface OliDevice {