fix: 聚合分析

src/pages/Iot/device/analysis.vue

@@ -25,7 +25,7 @@
                 :show-arrow="false"
                 :filter-option="false"
                 :not-found-content="null"
-                :options="state.dataSource"
+                :options="state.deviceLit"
                 @search="getDeviceLabel"
                 @change="selectDevice"
               >
@@ -38,7 +38,7 @@
                 v-if="activeTabKey === 'attr' || activeTabKey ===  'poly'"
                 v-model:value="state.attributeKey"
                 placeholder="请选择属性"
-                style="width: 170px"
+                style="width: 120px"
                 :show-arrow="false"
                 @change="selectAttr"
               >
@@ -49,14 +49,14 @@
                 >{{item.keyLabel}}</a-select-option>
             </a-select>
             <!-- 聚合函数参数 -->
-            <a-select v-if="activeTabKey ===  'poly'" placeholder="聚合函数只对数字类型有效"  style="width: 220px" v-model:value="state.aggregationFunc" >
+            <a-select v-if="activeTabKey ===  'poly'" placeholder="聚合函数只对数字类型有效"  style="width: 120px" v-model:value="state.aggregationFunc" >
               <a-select-option v-for="item in aggregationFunc" :key="item.key">
                 {{item.title}}
               </a-select-option>
             </a-select>
-            <a-input v-if="activeTabKey ===  'poly'" v-model:value="state.period">
+            <a-input v-if="activeTabKey ===  'poly'" style="width: 120px" v-model:value="state.period">
               <template #addonAfter>
-                <a-select v-model:value="state.periodUnit" style="width: 80px">
+                <a-select v-model:value="state.periodUnit" style="width: 60px">
                   <a-select-option value="d">天</a-select-option>
                   <a-select-option value="h">小时</a-select-option>
                   <a-select-option value="m">分钟</a-select-option>
@@ -64,7 +64,7 @@
               </template>
             </a-input>
             <a-range-picker :show-time="{ format: 'HH:mm' }" v-model:value="times"   />
-            <a-button @change="search" >搜索</a-button>
+            <a-button @click="search" type="primary" >搜索</a-button>
           </a-space>
         </a-col>
         <a-col :span="24">
@@ -82,16 +82,25 @@
               </a-row>
             </a-col>
             <a-col :span="24" v-else>
-              <div
-                id="device-attr"
-                style="width: 1000px; height: 400px;"
+              <div  id="device-attr"  style="width: 1000px; height: 400px;"  ></div>
+              <a-table
+                :dataSource="state.attrSource"
+                :columns="columns"
               >
-              </div>
+                <template #bodyCell="{column, record}" >
+                  <template v-if="column.key === 'value'">
+                    <span>{{record.value}}</span><span>{{record.dataunit}}</span>
+                  </template>
+                  <template v-if="column.key === 'ts'">
+                    <span>{{dayjs(record.ts).format('YYYY/MM/DD HH:mm:ss')}}</span>
+                  </template>
+                </template>
+              </a-table>
             </a-col>
           </span>
         </a-spin>
         </a-col>
-      </a-row>
+    </a-row>
   </a-card>
 </template>
 <script lang='ts' setup >
@@ -102,6 +111,31 @@ import { useRoute } from 'vue-router'
 import { sessionEchartsJson, attrEchartsJson, scatterOption, barOption, calculateAverage } from './json/echartsJson'
 import dayjs from 'dayjs'
 import StatisticsTemplate from '@/components/StatisticsTemplate'
+import { message } from 'ant-design-vue'
+import { useThrottle } from 'flicker-vue-hooks'
+
+const columns = [
+  {
+    title: '属性名',
+    dataIndex: 'keyLabel',
+    key: 'keyLabel'
+  },
+  {
+    title: '属性类型',
+    dataIndex: 'dataType',
+    key: 'dataType'
+  },
+  {
+    title: '属性值',
+    dataIndex: 'value',
+    key: 'value'
+  },
+  {
+    title: '时间',
+    dataIndex: 'ts',
+    key: 'ts'
+  }
+]
 
 const tabListNoTitle = [{
   key: 'session',
@@ -165,6 +199,7 @@ const state = reactive<{
   searchDeviceLabel: null,
   start: 0,
   end: '',
+  deviceLit: [],
   dataSource: [],
   attrSource: [],
   loading: false,
@@ -189,8 +224,8 @@ watch(
   () => activeTabKey.value,
   () => {
     state.deviceId = null
-    // state.searchDeviceLabel = null
     state.attributeKey = null
+    state.searchDeviceLabel = null
   }
 )
 
@@ -266,35 +301,38 @@ watch(
   }
 )
 
+// 选择属性
 const selectAttr = (value: string) => {
   state.attributeKey = value
-  getDeviceAttr()
+  // getDeviceAttr()
 }
 
-const search = (time) => {
-  // activeTabKey.value === 'session' ? getDeviceSession() : getDeviceAttr()
+const search = () => {
+  if (!state.deviceId) {
+    message.error('请选择设备')
+    return
+  }
+  activeTabKey.value === 'session' ? getDeviceSession() : getDeviceAttr()
 }
 
+// 选择设备
 const selectDevice = async (value: string) => {
   const device = await DeviceContriller.byId(value)
   state.deviceId = device.id
-  console.log('device:', state.deviceId)
-  if (activeTabKey.value === 'attr') {
-    getDeviceAttribute()
-  } else {
-    getDeviceSession()
-  }
+  getDeviceAttribute()
 }
 
+// 获取设备列表
 const getDeviceLabel = async (val: string) => {
   if (!val) return
   state.spinning = true
   const { data } = await DeviceContriller.labelsByLabel(val)
   state.spinning = false
-  state.dataSource = data.map(item => ({ value: item.id, label: item.deviceLabel }))
+  state.deviceLit = data.map(item => ({ value: item.id, label: item.deviceLabel }))
   console.log(data)
 }
 
+// 上下线分析
 const getDeviceSession = async () => {
   if (!state.deviceId) return
   state.loading = true
@@ -304,6 +342,7 @@ const getDeviceSession = async () => {
   state.onlineNum = data.onlineNum
 }
 
+// 属性分析
 const getDeviceAttr = async () => {
   if (!state.deviceId) return
   state.loading = true
@@ -318,6 +357,7 @@ const getDeviceAttr = async () => {
   state.attrSource = data
 }
 
+// 属性聚合分析
 const getDeviceAttribute = async () => {
   const { data } = await DeviceContriller.getDeviceAttribute(state.deviceId)
   deviceState.attrList = data

src/router/index.ts

@@ -231,93 +231,6 @@ const iot = {
   ]
 }
 
-const datacenter = {
-  path: '/datacenter',
-  name: '数据中台',
-  meta: {
-    title: '数据中台'
-  },
-  component: () => import('@/layout/layout.vue'),
-  redirect: '/dataSource',
-  children: [
-    {
-      path: '/dataSource',
-      name: '数据源',
-      icon: 'DatabaseOutlined',
-      redirect: '/dataSource/manage',
-      children: [
-        {
-          path: '/dataSource/manage',
-          name: '数据源管理',
-          component: () => import('@/pages/datacenter/dataSource/manage/index.vue')
-        },
-        {
-          path: '/dataSource/metaTool',
-          name: '元数据管理',
-          component: () => import('@/pages/datacenter/dataSource/metaTool/index.vue')
-        }
-      ]
-    },
-    {
-      path: '/dataLake',
-      name: '数据湖',
-      icon: 'LaptopOutlined',
-      redirect: '/dataLake/dataTool',
-      children: [
-        {
-          path: '/dataLake/dataTool',
-          name: '数据湖工具',
-          component: () => import('@/pages/datacenter/dataLake/dataTool/index.vue')
-        },
-        {
-          path: '/dataLake/dataIsland',
-          name: '数据岛',
-          component: () => import('@/pages/datacenter/dataLake/dataTool/index.vue')
-        }
-      ]
-    },
-    {
-      path: '/APICenter',
-      name: '数据编排',
-      icon: 'ApiOutlined',
-      component: () => import('@/pages/datacenter/APICenter/index.vue')
-    }
-  ]
-}
-
-const view = {
-  path: 'http://172.28.0.3:28080/#/project/items',
-  name: '可视化',
-  meta: {
-    title: '可视化'
-  },
-  link: true
-}
-
-const user = {
-  path: '/user',
-  name: '用户权限',
-  meta: {
-    title: '用户群组'
-  },
-  component: () => import('@/layout/layout.vue'),
-  redirect: '/manage',
-  children: [
-    {
-      path: '/manage',
-      name: '用户管理',
-      icon: 'TeamOutlined',
-      component: () => import('@/pages/user/manage/index.vue')
-    },
-    {
-      path: '/resource',
-      name: '资源管理',
-      icon: 'FolderOpenOutlined',
-      component: () => import('@/pages/user/resource/index.vue')
-    }
-  ]
-}
-
 const login = {
   path: '/login',
   name: '登录',
@@ -327,157 +240,7 @@ const login = {
   component: () => import('@/pages/login/index.vue')
 }
 
-const cvs = {
-  path: '/cvs',
-  name: '视联网',
-  meta: {
-    title: '视联网'
-  },
-  component: () => import('@/layout/layout.vue'),
-  redirect: '/cvs/video/space',
-  children: [
-    {
-      path: '/cvs/csys',
-      name: '系统概览 ',
-      icon: 'PieChartOutlined',
-      component: () => import('@/pages/cvs/csys/index.vue')
-    },
-    {
-      path: '/cvs/video',
-      name: '视频接入',
-      icon: 'VideoCameraAddOutlined',
-      redirect: '/cvs/video/space',
-      children: [
-        {
-          path: '/cvs/video/space',
-          name: '空间',
-          icon: '',
-          component: () => import('@/pages/cvs/video/space.vue')
-        },
-        {
-          path: '/cvs/video/device',
-          name: '设备',
-          icon: '',
-          component: () => import('@/pages/cvs/video/device.vue')
-        },
-        {
-          path: '/cvs/video/tree',
-          name: '设备组织树',
-          icon: '',
-          component: () => import('@/pages/cvs/video/orgtree.vue')
-        }
-      ]
-    },
-    {
-      path: '/cvs/project',
-      name: '项目管理',
-      icon: 'GroupOutlined',
-      component: () => import('@/pages/cvs/project/index.vue')
-    },
-    {
-      path: '/cvs/operator',
-      name: '算子仓库',
-      icon: 'CloudServerOutlined',
-      redirect: '/cvs/operator/manage',
-      children: [
-        {
-          path: '/cvs/operator/manage',
-          name: '算子管理',
-          icon: '',
-          component: () => import('@/pages/cvs/operator/manage.vue')
-        },
-        {
-          path: '/cvs/operator/version',
-          name: '算子版本',
-          icon: '',
-          hidden: true,
-          component: () => import('@/pages/cvs/operator/version.vue')
-        }
-      ]
-    },
-    {
-      path: '/cvs/cvsSever',
-      name: '数据管理',
-      icon: 'AppstoreOutlined',
-      component: () => import('@/pages/cvs/dataServer/dataServer.vue')
-    },
-    {
-      path: '/cvs/edge',
-      name: '边缘设备',
-      icon: 'ApiOutlined',
-      children: [
-        {
-          path: '/cvs/edge/list',
-          name: '设备列表',
-          icon: '',
-          component: () => import('@/pages/cvs/edge/list.vue')
-        },
-        {
-          path: '/cvs/edge/flow',
-          name: '设备视频流',
-          icon: '',
-          component: () => import('@/pages/cvs/edge/flow.vue')
-        },
-        {
-          path: '/cvs/edge/aiTask',
-          name: '设备任务',
-          icon: '',
-          component: () => import('@/pages/cvs/edge/aiTask.vue')
-        },
-        // {
-        //   path: '/cvs/edge/aig',
-        //   name: '设备算法',
-        //   icon: '',
-        //   component: () => import('@/pages/cvs/edge/aig.vue')
-        // },
-        {
-          path: '/cvs/edge/arg',
-          name: '设备参数',
-          icon: '',
-          component: () => import('@/pages/cvs/edge/arg.vue')
-        },
-        {
-          path: '/cvs/edge/plan',
-          name: '设备计划',
-          icon: '',
-          component: () => import('@/pages/cvs/edge/plan.vue')
-        },
-        // {
-        //   path: '/cvs/edge/task',
-        //   name: '设备任务',
-        //   icon: '',
-        //   component: () => import('@/pages/cvs/edge/task.vue')
-        // },
-        // {
-        //   path: '/cvs/dataSever/video',
-        //   name: '设备视频',
-        //   icon: '',
-        //   component: () => import('@/pages/cvs/edge/video.vue')
-        // },
-        {
-          path: '/cvs/edge/manage',
-          name: 'AI事件管理',
-          icon: '',
-          component: () => import('@/pages/cvs/edge/manage.vue')
-        },
-        {
-          path: '/cvs/edge/forward',
-          name: 'AI事件转发',
-          icon: '',
-          component: () => import('@/pages/cvs/edge/forward.vue')
-        }
-      ]
-    },
-    {
-      path: '/cvs/nodes',
-      name: '节点管理 ',
-      icon: 'DeploymentUnitOutlined',
-      component: () => import('@/pages/cvs/nodes/index.vue')
-    }
-  ]
-}
-
-const _routes = [iot, cvs] as any
+const _routes = [iot] as any
 
 if (_routes[0].link) {
   window.open(_routes[0].path)