feat(device/detail): update BinarySensors component, add Chart component for sensor data visualization and add update-iconfont.sh
This commit is contained in:
@@ -1,14 +1,6 @@
|
||||
import IconFont from '@/components/IconFont';
|
||||
import { StatisticCard } from '@ant-design/pro-components';
|
||||
import {
|
||||
Divider,
|
||||
Flex,
|
||||
GlobalToken,
|
||||
Grid,
|
||||
theme,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from 'antd';
|
||||
import { Flex, GlobalToken, Grid, theme, Tooltip, Typography } from 'antd';
|
||||
const { Text } = Typography;
|
||||
type BinarySensorsProps = {
|
||||
nodeConfigs: MasterModel.NodeConfig[];
|
||||
@@ -148,7 +140,6 @@ const BinarySensors = ({ nodeConfigs }: BinarySensorsProps) => {
|
||||
|
||||
return (
|
||||
<Flex wrap="wrap" gap="middle">
|
||||
<Divider orientation="left">Cảm biến</Divider>
|
||||
{binarySensors.map((entity) => (
|
||||
<div
|
||||
key={entity.entityId}
|
||||
|
||||
610
src/pages/Manager/Device/Detail/components/Chart.tsx
Normal file
610
src/pages/Manager/Device/Detail/components/Chart.tsx
Normal file
@@ -0,0 +1,610 @@
|
||||
import '@/utils/chart';
|
||||
import type { ChartData, ChartOptions } from 'chart.js';
|
||||
import { Line } from 'react-chartjs-2';
|
||||
|
||||
type ChartComponentProps = {
|
||||
message: MasterModel.SensorLogMessage[];
|
||||
};
|
||||
|
||||
const exampleSensorLogMessages: MasterModel.SensorLogMessage[] = [
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770260026,
|
||||
value: 76.3,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770259725,
|
||||
value: 77.1,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770259424,
|
||||
value: 75.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770259242,
|
||||
value: 72.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770259142,
|
||||
value: 69.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770258926,
|
||||
value: 66.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770258877,
|
||||
value: 69.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770258839,
|
||||
value: 73,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770258678,
|
||||
value: 76.1,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770258377,
|
||||
value: 77.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770258077,
|
||||
value: 77.8,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770257776,
|
||||
value: 75.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770257596,
|
||||
value: 72.5,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770257487,
|
||||
value: 69.5,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770257412,
|
||||
value: 66.4,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770257349,
|
||||
value: 63.3,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770257117,
|
||||
value: 60.3,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770256816,
|
||||
value: 62.3,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770256625,
|
||||
value: 65.3,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770256563,
|
||||
value: 68.4,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770256529,
|
||||
value: 71.4,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770256363,
|
||||
value: 74.7,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770256062,
|
||||
value: 75.2,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255761,
|
||||
value: 74.3,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255590,
|
||||
value: 71.2,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255498,
|
||||
value: 68.1,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255436,
|
||||
value: 64.9,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255331,
|
||||
value: 61.8,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255111,
|
||||
value: 64.8,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255038,
|
||||
value: 67.9,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770255002,
|
||||
value: 71.1,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770254968,
|
||||
value: 74.2,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770254688,
|
||||
value: 77.4,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770254387,
|
||||
value: 78.4,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770254086,
|
||||
value: 77.9,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770253786,
|
||||
value: 75,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770253631,
|
||||
value: 72,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770253549,
|
||||
value: 68.9,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770253481,
|
||||
value: 65.8,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770253434,
|
||||
value: 62.7,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770253364,
|
||||
value: 59.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770253063,
|
||||
value: 60.4,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770252763,
|
||||
value: 62.5,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770252695,
|
||||
value: 65.5,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770252657,
|
||||
value: 68.6,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770252489,
|
||||
value: 71.7,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770252188,
|
||||
value: 71.2,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770251886,
|
||||
value: 68.7,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770251585,
|
||||
value: 65.9,
|
||||
},
|
||||
{
|
||||
channel: 'c2552f8e-6e2f-4703-bdc2-681d2a0646d9',
|
||||
subtopic: 'log.gmsv5.hum.0:20',
|
||||
publisher: 'f4bd927c-f578-420d-9b63-ef7fb053d901',
|
||||
protocol: 'mqtt',
|
||||
name: 'urn:dev:mac:0038310555e4:0:20',
|
||||
unit: '%',
|
||||
time: 1770251469,
|
||||
value: 68.9,
|
||||
},
|
||||
];
|
||||
|
||||
// Custom plugin để vẽ đường kẻ dọc khi hover
|
||||
const verticalLinePlugin = {
|
||||
id: 'verticalLine',
|
||||
afterDraw: (chart: any) => {
|
||||
if (chart.tooltip?._active?.length) {
|
||||
const ctx = chart.ctx;
|
||||
const x = chart.tooltip._active[0].element.x;
|
||||
const topY = chart.scales.y.top;
|
||||
const bottomY = chart.scales.y.bottom;
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, topY);
|
||||
ctx.lineTo(x, bottomY);
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const ChartComponent = () => {
|
||||
const data: ChartData<'line', number[], string> = {
|
||||
labels: exampleSensorLogMessages.map((msg) =>
|
||||
new Date(msg.time! * 1000).toLocaleTimeString(),
|
||||
),
|
||||
|
||||
datasets: [
|
||||
{
|
||||
label: exampleSensorLogMessages[0]?.unit || '',
|
||||
data: exampleSensorLogMessages.map((msg) => msg.value),
|
||||
borderColor: 'rgba(75, 192, 192, 0.2)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
tension: 0.1,
|
||||
fill: 'start',
|
||||
pointRadius: 0,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const options: ChartOptions<'line'> = {
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: true,
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
return `${context.parsed.y} ${
|
||||
exampleSensorLogMessages[0]?.unit || ''
|
||||
}`;
|
||||
},
|
||||
title: (context) => {
|
||||
const index = context[0]?.dataIndex;
|
||||
if (index !== undefined) {
|
||||
const msg = exampleSensorLogMessages[index];
|
||||
return new Date(msg.time! * 1000).toLocaleString();
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Line
|
||||
title="Nooo"
|
||||
data={data}
|
||||
options={options}
|
||||
plugins={[verticalLinePlugin]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChartComponent;
|
||||
@@ -3,11 +3,17 @@ import TooltipIconFontButton from '@/components/shared/TooltipIconFontButton';
|
||||
import { ROUTER_HOME } from '@/constants/routes';
|
||||
import { apiQueryNodeConfigMessage } from '@/services/master/MessageController';
|
||||
import { apiGetThingDetail } from '@/services/master/ThingController';
|
||||
import {
|
||||
EditOutlined,
|
||||
EllipsisOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
||||
import { history, useIntl, useModel, useParams } from '@umijs/max';
|
||||
import { Divider, Flex, Grid } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import BinarySensors from './components/BinarySensors';
|
||||
import ChartComponent from './components/Chart';
|
||||
import ThingTitle from './components/ThingTitle';
|
||||
|
||||
const DetailDevicePage = () => {
|
||||
@@ -109,8 +115,21 @@ const DetailDevicePage = () => {
|
||||
</ProCard>
|
||||
<ProCard colSpan={{ xs: 24, sm: 24, md: 24, lg: 18, xl: 18 }}>
|
||||
<Flex wrap gap="small">
|
||||
<Divider orientation="left">Cảm biến</Divider>
|
||||
<BinarySensors nodeConfigs={nodeConfigs} />
|
||||
<Divider orientation="left">Trạng thái</Divider>
|
||||
<ProCard
|
||||
title="Mẫu 1"
|
||||
bordered
|
||||
style={{ maxWidth: 600 }}
|
||||
actions={[
|
||||
<SettingOutlined key="setting" />,
|
||||
<EditOutlined key="edit" />,
|
||||
<EllipsisOutlined key="ellipsis" />,
|
||||
]}
|
||||
>
|
||||
<ChartComponent />
|
||||
</ProCard>
|
||||
</Flex>
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
|
||||
@@ -165,7 +165,6 @@ const ManagerDevicePage = () => {
|
||||
'-'
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
key: 'type',
|
||||
hideInSearch: true,
|
||||
|
||||
@@ -211,3 +211,19 @@ export async function apiQueryConfigAlarm(
|
||||
|
||||
return resp;
|
||||
}
|
||||
|
||||
export async function apiQuerySensorLogMessage(
|
||||
dataChanelId: string,
|
||||
authorization: string,
|
||||
params: MasterModel.SearchMessagePaginationBody,
|
||||
) {
|
||||
return request<
|
||||
MasterModel.MesageReaderResponse<MasterModel.SensorLogMessage[]>
|
||||
>(`${API_READER}/${dataChanelId}/messages`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: authorization,
|
||||
},
|
||||
params: params,
|
||||
});
|
||||
}
|
||||
|
||||
22
src/services/master/typings/log.d.ts
vendored
22
src/services/master/typings/log.d.ts
vendored
@@ -6,6 +6,15 @@ declare namespace MasterModel {
|
||||
subtopic?: string;
|
||||
}
|
||||
|
||||
interface MessageBasicInfo {
|
||||
channel?: string;
|
||||
subtopic?: string;
|
||||
publisher?: string;
|
||||
protocol?: string;
|
||||
name?: string;
|
||||
time?: number;
|
||||
}
|
||||
|
||||
type LogTypeRequest = 'user_logs' | undefined;
|
||||
|
||||
interface MesageReaderResponse<T = MessageDataType> {
|
||||
@@ -27,13 +36,7 @@ declare namespace MasterModel {
|
||||
|
||||
type MessageDataType = NodeConfig[] | CameraV5 | CameraV6;
|
||||
|
||||
interface Message<T = MessageDataType> {
|
||||
channel?: string;
|
||||
subtopic?: string;
|
||||
publisher?: string;
|
||||
protocol?: string;
|
||||
name?: string;
|
||||
time?: number;
|
||||
interface Message<T = MessageDataType> extends MessageBasicInfo {
|
||||
string_value?: string;
|
||||
string_value_parsed?: T;
|
||||
}
|
||||
@@ -69,4 +72,9 @@ declare namespace MasterModel {
|
||||
type: Type;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface SensorLogMessage extends MessageBasicInfo {
|
||||
unit: string;
|
||||
value: number;
|
||||
}
|
||||
}
|
||||
|
||||
22
src/utils/chart.ts
Normal file
22
src/utils/chart.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import {
|
||||
BarElement,
|
||||
CategoryScale,
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
Legend,
|
||||
LinearScale,
|
||||
LineElement,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
} from 'chart.js';
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
BarElement,
|
||||
Filler,
|
||||
Tooltip,
|
||||
Legend,
|
||||
);
|
||||
Reference in New Issue
Block a user