1

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径  http://192.168.188.149:48080  https://iot.deepoil.cc
-VITE_BASE_URL='https://iot.deepoil.cc'
+VITE_BASE_URL='http://192.168.188.79:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/api/pms/device/index.ts

@@ -180,6 +180,10 @@ export const IotDeviceApi = {
     return await request.get({ url: `/rq/iot-device/td/ly/page`, params })
   },
 
+  getMonitoringQuery: async (params: any) => {
+    return await request.get({ url: `rq/stat/td/ly/chart`, params })
+  },
+
   // 新增时根据部门id获取设备列表
   getIotDeviceSetOptions: async (id: any) => {
     return await request.get({ url: `/rq/iot-device/dept/${id}` })

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

@@ -1,10 +1,42 @@
 <script lang="ts" setup>
 import { IotDeviceApi } from '@/api/pms/device'
-import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 import { useUserStore } from '@/store/modules/user'
-import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import { rangeShortcuts } from '@/utils/formatTime'
 import { useDebounceFn } from '@vueuse/core'
+import { Column, dayjs } from 'element-plus'
+
+const columns = ref<Column[]>([
+  {
+    align: 'center',
+    dataKey: 'deviceName',
+    title: '设备名称',
+    width: 100
+  },
+  {
+    align: 'center',
+    dataKey: 'serialNumber',
+    title: '设备编码',
+    width: 100
+  },
+  {
+    align: 'center',
+    dataKey: 'identity',
+    title: '属性',
+    width: 100
+  },
+  {
+    align: 'center',
+    dataKey: 'value',
+    title: '值',
+    width: 100
+  },
+  {
+    align: 'center',
+    dataKey: 'ts',
+    title: '时间',
+    width: 100
+  }
+])
 
 const { t } = useI18n()
 
@@ -16,106 +48,70 @@ interface Query {
   deptId?: number
   deviceName?: string
   deviceCode?: string
-  ifInline?: number
-  pageNo: number
-  pageSize: number
-  time: string[]
+  time?: string[]
 }
 
 const query = ref<Query>({
-  pageNo: 1,
-  pageSize: 12,
-  deptId: id,
-  time: []
+  deviceCode: 'YF6660355',
+  time: [
+    dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs().format('YYYY-MM-DD HH:mm:ss')
+  ]
 })
 
-interface OliDevice {
-  id: number
-  carId?: number
+interface ListItem {
   deviceName: string
-  deviceCode: string
-  assetClassName: string
-  deviceStatus: string
-  ifInline: number
-  lastInlineTime: string
-  carOnline: string
-  deptName: string
-  vehicleName: string
+  serialNumber: string
+  identity: string
+  value: string
+  ts: string
 }
 
-const list = ref<OliDevice[]>([])
-const total = ref(0)
+const list = ref<ListItem[]>([])
 
 const loading = ref(false)
 
 const loadList = useDebounceFn(async function () {
   loading.value = true
   try {
-    const data = await IotDeviceApi.getIotDeviceOliConnectPage(query.value)
-    // const data = await IotDeviceApi.getIotDeviceTdPage(query.value)
-    list.value = data.list
-    total.value = data.total
+    const { time, ...other } = query.value
+
+    const data = await IotDeviceApi.getMonitoringQuery({
+      ...other,
+      beginTime: time?.[0],
+      endTime: time?.[1]
+    })
+    list.value = data.data
   } finally {
     loading.value = false
   }
 })
 
-function handleSizeChange(val: number) {
-  query.value.pageSize = val
-  handleQuery()
-}
-
-function handleCurrentChange(val: number) {
-  query.value.pageNo = val
+function handleQuery() {
   loadList()
 }
 
-function handleQuery(setPage = true) {
-  if (setPage) {
-    query.value.pageNo = 1
-  }
-  loadList()
-}
-
-function resetQuery() {
-  query.value = {
-    pageNo: 1,
-    pageSize: 12,
-    deptId: id,
-    time: []
-  }
-
-  handleQuery()
-}
-
-watch(
-  [
-    () => query.value.deptId,
-    () => query.value.deviceName,
-    () => query.value.deviceCode,
-    () => query.value.ifInline
-  ],
-  () => {
-    handleQuery()
-  },
-  { immediate: true }
-)
-
-const { ZmTable, ZmTableColumn } = useTableComponents<OliDevice>()
+// watch(
+//   [
+//     () => query.value.deptId,
+//     () => query.value.deviceName,
+//     () => query.value.deviceCode,
+//     () => query.value.time
+//   ],
+//   () => {
+//     handleQuery()
+//   },
+//   { immediate: true }
+// )
 </script>
 
 <template>
   <div
     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))]"
   >
+    <!-- v-model="query.deptId" -->
     <div class="p-4 bg-white dark:bg-[#1d1e1f] shadow rounded-lg row-span-2">
-      <DeptTreeSelect
-        :top-id="156"
-        :deptId="deptId"
-        v-model="query.deptId"
-        :init-select="false"
-        :show-title="false"
-      />
+      <DeptTreeSelect :top-id="156" :deptId="deptId" :init-select="false" :show-title="false" />
     </div>
     <el-form
       size="default"
@@ -140,39 +136,22 @@ const { ZmTable, ZmTableColumn } = useTableComponents<OliDevice>()
             class="!w-240px"
           />
         </el-form-item>
-
-        <el-form-item :label="t('monitor.ifInline')">
-          <el-select
-            v-model="query.ifInline"
-            :placeholder="t('monitor.ifInlineHolder')"
-            clearable
-            class="!w-240px"
-          >
-            <el-option
-              v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
         <el-form-item label="时间">
           <el-date-picker
             v-model="query.time"
             value-format="YYYY-MM-DD HH:mm:ss"
-            type="daterange"
+            type="datetimerange"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             :shortcuts="rangeShortcuts"
             :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-220px"
+            class="!w-352px"
           />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleQuery()">
             <Icon icon="ep:search" class="mr-5px" /> 搜索
           </el-button>
-          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" />重置</el-button>
         </el-form-item>
       </div>
     </el-form>
@@ -180,46 +159,16 @@ const { ZmTable, ZmTableColumn } = useTableComponents<OliDevice>()
       <div class="flex-1 relative">
         <el-auto-resizer class="absolute">
           <template #default="{ width, height }">
-            <zm-table
-              :data="list"
-              :loading="loading"
+            <el-table-v2
+              v-loading="loading"
+              :columns="columns"
               :width="width"
-              :max-height="height"
               :height="height"
-            >
-              <zm-table-column type="index" :label="t('monitor.serial')" :width="60" />
-              <zm-table-column prop="deviceName" :label="t('monitor.deviceName')" />
-              <zm-table-column prop="deviceCode" :label="t('monitor.deviceCode')" />
-              <zm-table-column prop="assetClassName" :label="t('monitor.category')" />
-              <zm-table-column prop="deviceStatus" :label="t('monitor.status')">
-                <template #default="scope">
-                  <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.deviceStatus" />
-                </template>
-              </zm-table-column>
-              <zm-table-column prop="ifInline" :label="t('monitor.ifInline')">
-                <template #default="scope">
-                  <dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.ifInline" />
-                </template>
-              </zm-table-column>
-              <zm-table-column prop="lastInlineTime" :label="t('monitor.latestDataTime')" />
-            </zm-table>
+              :data="list"
+            />
           </template>
         </el-auto-resizer>
       </div>
-      <div class="h-10 mt-4 flex items-center justify-end">
-        <el-pagination
-          size="default"
-          v-show="total > 0"
-          v-model:current-page="query.pageNo"
-          v-model:page-size="query.pageSize"
-          :background="true"
-          :page-sizes="[12, 20, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
     </div>
   </div>
 </template>