|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
- <statistics-template
|
|
|
+ <!-- <statistics-template
|
|
|
title="上下线统计"
|
|
|
:list="[{value: 20, color: 'green', label: '上线次数'}, {value: 20, color: 'red', label: '下线次数'}]"
|
|
|
- />
|
|
|
+ /> -->
|
|
|
<a-card
|
|
|
style="margin-top: 20px;"
|
|
|
title="设备分析"
|
|
|
@@ -36,7 +36,7 @@
|
|
|
</a-select>
|
|
|
</a-spin>
|
|
|
<a-select
|
|
|
- v-if="activeTabKey === 'attr'"
|
|
|
+ v-if="activeTabKey === 'attr' || activeTabKey === 'poly'"
|
|
|
v-model:value="state.attributeKey"
|
|
|
placeholder="请选择属性"
|
|
|
style="width: 170px"
|
|
|
@@ -49,6 +49,21 @@
|
|
|
:value="item.key"
|
|
|
>{{item.keyLabel}}</a-select-option>
|
|
|
</a-select>
|
|
|
+ <!-- 聚合函数参数 -->
|
|
|
+ <a-select v-if="activeTabKey === 'poly'" placeholder="聚合函数只对数字类型有效" style="width: 220px" 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">
|
|
|
+ <template #addonAfter>
|
|
|
+ <a-select v-model:value="state.periodUnit" style="width: 80px">
|
|
|
+ <a-select-option value="d">天</a-select-option>
|
|
|
+ <a-select-option value="h">小时</a-select-option>
|
|
|
+ <a-select-option value="m">分钟</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
<a-range-picker :show-time="{ format: 'HH:mm' }" v-model:value="times" @change="changeRangePicker" />
|
|
|
</a-space>
|
|
|
</a-col>
|
|
|
@@ -96,11 +111,40 @@ const tabListNoTitle = [{
|
|
|
{
|
|
|
key: 'attr',
|
|
|
tab: '属性分析'
|
|
|
+},
|
|
|
+{
|
|
|
+ key: 'poly',
|
|
|
+ tab: '属性聚合分析'
|
|
|
}]
|
|
|
|
|
|
+// MIN,MAX,SUM,AVG,COUNT
|
|
|
+// 聚合函数
|
|
|
+const aggregationFunc = [
|
|
|
+ {
|
|
|
+ key: 'MIN',
|
|
|
+ title: '最小值'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'MAX',
|
|
|
+ title: '最大值'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'SUM',
|
|
|
+ title: '求和'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'AVG',
|
|
|
+ title: '平均值'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'COUNT',
|
|
|
+ title: '统计值'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
const route = useRoute()
|
|
|
|
|
|
-const activeTabKey = ref<'session' | 'attr'>('session')
|
|
|
+const activeTabKey = ref<'session' | 'attr' | 'poly'>('session')
|
|
|
|
|
|
const emptyCondition = computed(() => activeTabKey.value === 'session' ? state.dataSource.length === 0 : state.attrSource.length === 0)
|
|
|
|
|
|
@@ -129,7 +173,10 @@ const state = reactive<{
|
|
|
spinning: false,
|
|
|
onlineNum: 0,
|
|
|
offlineNum: 0,
|
|
|
- attributeKey: null
|
|
|
+ attributeKey: null,
|
|
|
+ aggregationFunc: null,
|
|
|
+ period: '',
|
|
|
+ periodUnit: 'd'
|
|
|
})
|
|
|
|
|
|
const times = ref([dayjs().subtract(30, 'minute'), dayjs()])
|
|
|
@@ -143,7 +190,7 @@ watch(
|
|
|
() => activeTabKey.value,
|
|
|
() => {
|
|
|
state.deviceId = null
|
|
|
- state.searchDeviceLabel = null
|
|
|
+ // state.searchDeviceLabel = null
|
|
|
state.attributeKey = null
|
|
|
}
|
|
|
)
|
|
|
@@ -187,7 +234,6 @@ watch(
|
|
|
if (activeTabKey.value === 'session') {
|
|
|
const chartDom = document.getElementById('device-session')
|
|
|
const chartDomScatter = document.getElementById('device-session-scatter')
|
|
|
- console.log('chartDom:', chartDom)
|
|
|
|
|
|
const myChart = echarts.init(chartDom!)
|
|
|
const chartDomScatterChart = echarts.init(chartDomScatter!)
|
|
|
@@ -262,12 +308,13 @@ const getDeviceSession = async () => {
|
|
|
const getDeviceAttr = async () => {
|
|
|
if (!state.deviceId) return
|
|
|
state.loading = true
|
|
|
- // .format('YYYY/MM/DD HH:mm:ss')
|
|
|
const { data } = await DeviceContriller.getAttr({
|
|
|
deviceId: state.deviceId,
|
|
|
- start: 1,
|
|
|
- end: new Date().getTime(),
|
|
|
- attributeKey: state.attributeKey
|
|
|
+ start: dayjs(times.value[0]).unix() * 1000,
|
|
|
+ end: dayjs(times.value[1]).unix() * 1000,
|
|
|
+ attributeKey: state.attributeKey,
|
|
|
+ aggregationFunc: state.aggregationFunc,
|
|
|
+ period: state.period + state.periodUnit
|
|
|
})
|
|
|
state.attrSource = data
|
|
|
}
|