501 lines
14 KiB
Vue
501 lines
14 KiB
Vue
<template>
|
|
<page-container>
|
|
<div class="DashBoardBox">
|
|
<a-row :gutter="24">
|
|
<a-col :span="6">
|
|
<TopCard
|
|
title="产品数量"
|
|
:img="getImage('/device/device-product.png')"
|
|
:footer="productFooter"
|
|
:value="productTotal"
|
|
></TopCard>
|
|
</a-col>
|
|
<a-col :span="6">
|
|
<TopCard
|
|
title="设备数量"
|
|
:img="getImage('/device/device-number.png')"
|
|
:footer="deviceFooter"
|
|
:value="deviceTotal"
|
|
></TopCard
|
|
></a-col>
|
|
<a-col :span="6"
|
|
><TopCard
|
|
title="当前在线"
|
|
:footer="onlineFooter"
|
|
:value="onlineToday"
|
|
>
|
|
<!-- <BarChart
|
|
:chartXData="barChartXData"
|
|
:chartYData="barChartYData"
|
|
></BarChart> -->
|
|
<Charts :options="onlineOptions"></Charts>
|
|
</TopCard
|
|
></a-col>
|
|
<a-col :span="6"
|
|
><TopCard
|
|
title="今日设备信息量"
|
|
:footer="messageFooter"
|
|
:value="dayMessage"
|
|
>
|
|
<Charts :options="TodayDevOptions"></Charts> </TopCard
|
|
></a-col>
|
|
</a-row>
|
|
<a-row :gutter="24">
|
|
<a-col :span="24">
|
|
<div class="message-card">
|
|
<Guide title="设备消息">
|
|
<template #extra>
|
|
<TimeSelect
|
|
key="flow-static"
|
|
:type="'week'"
|
|
:quickBtnList="quickBtnList"
|
|
@change="getEcharts"
|
|
/>
|
|
</template>
|
|
</Guide>
|
|
<div class="message-chart">
|
|
<Charts :options="devMegOptions"></Charts>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :span="24">
|
|
<a-col :span="24">
|
|
<div class="device-position">
|
|
<Guide title="设备分布"></Guide>
|
|
<div class="device-map">
|
|
<Amap></Amap>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</page-container>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import TimeSelect from './components/TimeSelect.vue';
|
|
import Charts from './components/Charts.vue'
|
|
import Guide from './components/Guide.vue';
|
|
import {
|
|
productCount,
|
|
deviceCount,
|
|
dashboard,
|
|
getGo,
|
|
} from '@/api/device/dashboard';
|
|
import encodeQuery from '@/utils/encodeQuery';
|
|
import { getImage } from '@/utils/comm';
|
|
import type { Footer } from '@/views/device/DashBoard/typings';
|
|
import TopCard from '@/views/device/DashBoard/components/TopCard.vue';
|
|
import Amap from './components/Amap.vue'
|
|
let productTotal = ref(0);
|
|
let productFooter = ref<Footer[]>([
|
|
{
|
|
title: '正常',
|
|
value: 0,
|
|
status: 'success',
|
|
},
|
|
{
|
|
title: '禁用',
|
|
value: 0,
|
|
status: 'error',
|
|
},
|
|
]);
|
|
let deviceTotal = ref(0);
|
|
let deviceFooter = ref<Footer[]>([
|
|
{
|
|
title: '在线',
|
|
value: 0,
|
|
status: 'success',
|
|
},
|
|
{
|
|
title: '离线',
|
|
value: 0,
|
|
status: 'error',
|
|
},
|
|
]);
|
|
let deviceOnline = ref(0);
|
|
let onlineFooter = ref<Footer[]>([
|
|
{
|
|
title: '昨日在线',
|
|
value: 0,
|
|
},
|
|
]);
|
|
let dayMessage = ref(0);
|
|
let messageFooter = ref<Footer[]>([
|
|
{
|
|
title: '当月设备消息量',
|
|
value: 0,
|
|
},
|
|
]);
|
|
let messageChartXData = ref<any[]>([]);
|
|
let messageChartYData = ref<any[]>([]);
|
|
let messageMaxChartYData = ref<number>();
|
|
let onlineOptions = ref<any>({});
|
|
let TodayDevOptions = ref<any>({});
|
|
let devMegOptions = ref<any>({});
|
|
const quickBtnList = [
|
|
{ label: '昨日', value: 'yesterday' },
|
|
{ label: '近一周', value: 'week' },
|
|
{ label: '近一月', value: 'month' },
|
|
{ label: '近一年', value: 'year' },
|
|
];
|
|
const getProductData = () => {
|
|
productCount().then((res) => {
|
|
if (res.status == 200) {
|
|
productTotal.value = res.result;
|
|
}
|
|
});
|
|
productCount({
|
|
terms: [
|
|
{
|
|
column: 'state',
|
|
value: '1',
|
|
},
|
|
],
|
|
}).then((res) => {
|
|
if (res.status == 200) {
|
|
productFooter.value[0].value = res.result;
|
|
}
|
|
});
|
|
productCount({
|
|
terms: [
|
|
{
|
|
column: 'state',
|
|
value: '0',
|
|
},
|
|
],
|
|
}).then((res) => {
|
|
if (res.status == 200) {
|
|
productFooter.value[1].value = res.result;
|
|
}
|
|
});
|
|
};
|
|
getProductData();
|
|
const getDeviceData = () => {
|
|
deviceCount().then((res) => {
|
|
if (res.status == 200) {
|
|
deviceTotal.value = res.result;
|
|
}
|
|
});
|
|
deviceCount(encodeQuery({ terms: { state: 'online' } })).then((res) => {
|
|
if (res.status == 200) {
|
|
deviceFooter.value[0].value = res.result;
|
|
deviceOnline.value = res.result;
|
|
}
|
|
});
|
|
deviceCount(encodeQuery({ terms: { state: 'offline' } })).then((res) => {
|
|
if (res.status == 200) {
|
|
deviceFooter.value[1].value = res.result;
|
|
}
|
|
});
|
|
};
|
|
getDeviceData();
|
|
const getOnline = () => {
|
|
dashboard([
|
|
{
|
|
dashboard: 'device',
|
|
object: 'session',
|
|
measurement: 'online',
|
|
dimension: 'agg',
|
|
group: 'aggOnline',
|
|
params: {
|
|
state: 'online',
|
|
limit: 15,
|
|
from: 'now-15d',
|
|
time: '1d',
|
|
format: 'yyyy-MM-dd',
|
|
},
|
|
},
|
|
]).then((res) => {
|
|
if (res.status == 200) {
|
|
const x = res.result
|
|
.map((item: any) => item.data.timeString)
|
|
.reverse();
|
|
const y = res.result.map((item: any) => item.data.value);
|
|
const onlineYdata = y;
|
|
onlineYdata.reverse()
|
|
setOnlineChartOpition(x,onlineYdata);
|
|
deviceFooter.value[0].value = y?.[1];
|
|
}
|
|
});
|
|
};
|
|
const setOnlineChartOpition = (x:Array<any>,y:Array<number>):void=>{
|
|
onlineOptions.value = {
|
|
xAxis: {
|
|
type: 'category',
|
|
data: x,
|
|
show: false,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: '5%',
|
|
bottom: 0,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '在线数',
|
|
data: y,
|
|
type: 'bar',
|
|
showBackground: true,
|
|
itemStyle: {
|
|
color: '#D3ADF7',
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
const setTodayDevChartOption = (x:Array<any>,y:Array<number>):void =>{
|
|
TodayDevOptions = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
show: false,
|
|
data:x
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: '2%',
|
|
bottom: 0,
|
|
},
|
|
series: [
|
|
{
|
|
name: '消息量',
|
|
data: y,
|
|
type: 'line',
|
|
smooth: true, // 是否平滑曲线
|
|
symbolSize: 0, // 拐点大小
|
|
color: '#F29B55',
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#FBBB87', // 100% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#FFFFFF', // 0% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
const setDevMesChartOption = (x:Array<any>,y:Array<number>,maxY:number):void =>{
|
|
devMegOptions.value = {
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: x,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: '{b0}<br />{a0}: {c0}',
|
|
// formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}%'
|
|
},
|
|
grid: {
|
|
top: '2%',
|
|
bottom: '5%',
|
|
left: maxY > 100000 ? '90px' : '50px',
|
|
right: '50px',
|
|
},
|
|
series: [
|
|
{
|
|
name: '消息量',
|
|
data: y,
|
|
type: 'bar',
|
|
// type: 'line',
|
|
// smooth: true,
|
|
color: '#597EF7',
|
|
barWidth: '30%',
|
|
// areaStyle: {
|
|
// color: {
|
|
// type: 'linear',
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 0,
|
|
// y2: 1,
|
|
// colorStops: [
|
|
// {
|
|
// offset: 0,
|
|
// color: '#685DEB', // 100% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: '#FFFFFF', // 0% 处的颜色
|
|
// },
|
|
// ],
|
|
// global: false, // 缺省为 false
|
|
// },
|
|
// },
|
|
},
|
|
{
|
|
name: '占比',
|
|
data: y,
|
|
// data: percentageY,
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize: 0, // 拐点大小
|
|
color: '#96ECE3',
|
|
},
|
|
],
|
|
}
|
|
}
|
|
getOnline();
|
|
//今日设备消息量
|
|
const getDevice = () => {
|
|
dashboard([
|
|
{
|
|
dashboard: 'device',
|
|
object: 'message',
|
|
measurement: 'quantity',
|
|
dimension: 'agg',
|
|
group: 'today',
|
|
params: {
|
|
time: '1h',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
limit: 24,
|
|
from: 'now-1d',
|
|
},
|
|
},
|
|
{
|
|
dashboard: 'device',
|
|
object: 'message',
|
|
measurement: 'quantity',
|
|
dimension: 'agg',
|
|
group: 'oneday',
|
|
params: {
|
|
time: '1d',
|
|
format: 'yyyy-MM-dd',
|
|
from: 'now-1d',
|
|
},
|
|
},
|
|
{
|
|
dashboard: 'device',
|
|
object: 'message',
|
|
measurement: 'quantity',
|
|
dimension: 'agg',
|
|
group: 'thisMonth',
|
|
params: {
|
|
time: '1M',
|
|
format: 'yyyy-MM',
|
|
limit: 1,
|
|
from: 'now-1M',
|
|
},
|
|
},
|
|
]).then((res) => {
|
|
if (res.status == 200) {
|
|
const thisMonth = res.result.find(
|
|
(item: any) => item.group === 'thisMonth',
|
|
)?.data.value;
|
|
const oneDay = res.result.find(
|
|
(item: any) => item.group === 'oneday',
|
|
)?.data.value;
|
|
dayMessage.value = oneDay;
|
|
messageFooter.value[0].value = thisMonth;
|
|
const today = res.result.filter(
|
|
(item: any) => item.group === 'today',
|
|
);
|
|
const x = today.map((item: any) => item.data.timeString).reverse();
|
|
const y = today.map((item: any) => item.data.value).reverse();
|
|
setTodayDevChartOption(x,y);
|
|
}
|
|
});
|
|
};
|
|
getDevice();
|
|
const getEcharts = (data: any) => {
|
|
let _time = '1h';
|
|
let format = 'HH';
|
|
let limit = 12;
|
|
const dt = data.end - data.start;
|
|
const hour = 60 * 60 * 1000;
|
|
const days = hour * 24;
|
|
const months = days * 30;
|
|
const year = 365 * days;
|
|
if (dt <= days) {
|
|
limit = Math.abs(Math.ceil(dt / hour));
|
|
} else if (dt > days && dt < year) {
|
|
limit = Math.abs(Math.ceil(dt / days)) + 1;
|
|
_time = '1d';
|
|
format = 'M月dd日';
|
|
} else if (dt >= year) {
|
|
limit = Math.abs(Math.floor(dt / months));
|
|
_time = '1M';
|
|
format = 'yyyy年-M月';
|
|
}
|
|
|
|
dashboard([
|
|
{
|
|
dashboard: 'device',
|
|
object: 'message',
|
|
measurement: 'quantity',
|
|
dimension: 'agg',
|
|
group: 'device_msg',
|
|
params: {
|
|
time: _time,
|
|
format: format,
|
|
limit: limit,
|
|
from: data.start,
|
|
to: data.end,
|
|
},
|
|
},
|
|
]).then((res:any) => {
|
|
if (res.status === 200) {
|
|
const x = res.result
|
|
.map((item: any) =>
|
|
_time === '1h'
|
|
? `${item.data.timeString}时`
|
|
: item.data.timeString,
|
|
)
|
|
.reverse();
|
|
const y = res.result.map((item: any) => item.data.value).reverse();
|
|
const maxY = Math.max.apply(null, messageChartYData.value.length ? messageChartYData.value : [0]);
|
|
setDevMesChartOption(x,y,maxY);
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.message-card,.device-position{
|
|
margin-top: 24px;
|
|
padding: 24px;
|
|
background-color: white;
|
|
}
|
|
.message-chart {
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
.amap-box{
|
|
height: 500px;
|
|
width: 100%;
|
|
}
|
|
</style> |