common

config/authRoutes.js

@@ -16,13 +16,16 @@ export default [
         name: '设备',
         path: '/home',
         component: './home',
-        icon: 'HomeOutlined',
       },
       {
         name: '设备详情',
         path: '/home/detail',
         component: './home/detail',
-        icon: 'HomeOutlined',
+      },
+      {
+        name: '告警',
+        path: '/alarm',
+        component: './alarm',
       },
     ],
   },

src/layouts/BasicLayout.jsx

@@ -26,7 +26,7 @@ menulist 中的表示主路由菜单上左上角是打开 drawer 否则为返回
 
 */
 
-const menulist = ['/home'];
+const menulist = ['/home','/alarm'];
 
 function BasicLayout() {
   const setRouteActive = (value) => {
@@ -44,7 +44,7 @@ function BasicLayout() {
       icon: <IconFont type="icon-pintu" />,
     },
     {
-      key: '/todo',
+      key: '/alarm',
       title: '告警',
       icon: <IconFont type="icon-bell" />,
     },
@@ -315,6 +315,7 @@ function BasicLayout() {
                     danger: true,
                     bold: true,
                     onClick: () => {
+                      localStorage.clear();
                       history.replace('/login');
                       handler.current.close();
                     },

src/pages/alarm/columns.js

+function getcolumns(setdrawer) {
+  return {
+    columns: [
+      {
+        title: '设备名称',
+        dataIndex: 'deviceName',
+        key: 'deviceName',
+        hidetitle:true,
+
+      },
+      {
+        title: '设备状态',
+        dataIndex: 'deviceStatusName',
+        key: 'deviceStatusName',
+        hidetitle:true,
+        render: (text,record)=>{
+          return <div style={{color:record?.statusColorList?.filter(it=>it.type === record.deviceStatus)[0].color}}>
+            {text}
+          </div>
+        }
+      },
+      {
+        title: '活跃时间',
+        dataIndex: 'lastActivityTime',
+        key: 'lastActivityTime',
+      },
+      {
+        title: '日均开动率',
+        dataIndex: 'powerOnRate',
+        key: 'powerOnRate',
+      },
+    ],
+    pathconfig: {
+      enableadd: true,
+      enableedit: true,
+      enabledelete: true,
+      enabledetail: true,
+    },
+  };
+}
+export default getcolumns;

src/pages/alarm/index.jsx

+/* eslint-disable eqeqeq */
+import * as React from 'react';
+import { useState, useMemo, useRef } from 'react';
+import DrawerPro from '@/components/DrawerPro';
+import AutoTable from '@/components/AutoTable';
+import { Badge,Skeleton } from 'antd';
+import getcolumns from './columns';
+import { useAsyncEffect, useRequest } from 'ahooks';
+import { doFetch } from '@/utils/doFetch';
+import ReactECharts from 'echarts-for-react';
+import Settings from '../../../config/defaultSettings';
+import { history } from '@umijs/max';
+
+const { proxypath } = Settings;
+
+function cropImage(url) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+    img.src = url;
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const size = Math.min(img.width, img.height);
+      canvas.width = size;
+      canvas.height = size;
+      ctx.beginPath();
+      ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
+      ctx.clip();
+      ctx.drawImage(
+        img,
+        (img.width - size) / 2,
+        (img.height - size) / 2,
+        size,
+        size,
+        0,
+        0,
+        size,
+        size,
+      );
+      canvas.toBlob((blob) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = () => {
+          resolve(reader.result);
+        };
+      }, 'image/png');
+    };
+  });
+}
+
+const Cards = ({ item, columns }) => {
+  const [option, setoption] = useState({});
+  const { statusColorList, deviceStatusDurationList } = item;
+  const [loading, setloading] = useState(false);
+  useAsyncEffect(async () => {
+    setloading(true) 
+    let img =
+      item?.image?.length > 0
+        ? proxypath + item.image?.[0]?.url
+        : require('@/assets/default.png');
+    const image = await cropImage(img);
+    let normalColor =
+      statusColorList.filter((el) => el.type == 3)?.[0]?.color ?? '';
+    let data = deviceStatusDurationList?.map((it) => {
+      let label =
+          statusColorList.filter((el) => el.type == it.name)?.[0]?.name ?? '',
+        itemColor =
+          statusColorList.filter((el) => el.type == it.name)?.[0]?.color ?? '';
+      return {
+        ...it,
+        label,
+        itemStyle: {
+          color: itemColor,
+        },
+      };
+    }) ?? [
+      {
+        name: '关机',
+        value: 1,
+        itemStyle: {
+          color: normalColor,
+        },
+      },
+    ];
+    const options = {
+      series: [
+        {
+          type: 'pie',
+          radius: ['85%', '95%'],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            position: 'center',
+          },
+          data,
+        },
+      ],
+      graphic: {
+        elements: [
+          {
+            type: 'image',
+            style: {
+              image: image,
+              width: 88,
+              height: 88,
+            },
+            left: 'center',
+            top: 'center',
+          },
+        ],
+      },
+    };
+    await setoption(options);
+    setloading(false) 
+  }, [item]);
+
+  return (
+    <div
+      className="split"
+      onClick={() => {
+        history.push('/home/detail', {
+          id: item.id,
+          deviceId: item.deviceId
+        });
+      }}
+      style={{minHeight:169}}
+    >
+      <Skeleton loading={loading} active>
+      <div className="spread" style={{ justifyContent: 'flex-start' }}>
+        <Badge
+          count={item.alarmNum}
+          overflowCount={99}
+          offset={[-10, 10]}
+          color="red"
+        >
+          <div style={{ width: 120, height: 120, flexShrink: 0 }}>
+            <ReactECharts option={option} style={{ height: '100%' }} />
+          </div>
+        </Badge>
+
+        <div style={{ flex: 1 }} className="rightsection">
+          {columns
+            ?.filter((it) => !(it.valueType === 'split' || it?.hideInTable))
+            ?.map((it, i) => {
+              const Bod = ({ children }) =>
+                i == 0 ? (
+                  <h2>{children}</h2>
+                ) : i == 1 ? (
+                  <h3>{children}</h3>
+                ) : (
+                  <p>{children}</p>
+                );
+              return (
+                <Bod key={it?.dataIndex}>
+                  {it?.hidetitle ? '' : `${it?.title}: `}
+                  {it.render
+                    ? it.render(item[it?.dataIndex], item)
+                    : item[it?.dataIndex]}
+                </Bod>
+              );
+            })}
+        </div>
+      </div>
+      </Skeleton>
+  
+    </div>
+  );
+};
+
+function Home(props) {
+  const actionRef = useRef();
+
+  const { run, loading } = useRequest(doFetch, {
+    manual: true,
+    onSuccess: (res, params) => {
+      if (res?.code === '0000') {
+        actionRef?.current?.reload();
+      }
+    },
+  });
+
+  const columns = useMemo(() => {
+    let defcolumn = getcolumns()?.columns;
+    return defcolumn;
+  }, []);
+
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <AutoTable
+        columns={columns}
+        path={'/app/device/index'}
+        actionRef={actionRef}
+      >
+        <Cards />
+      </AutoTable>
+    </div>
+  );
+}
+
+export default Home;

src/pages/home/detail.jsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useState, useMemo, useRef } from 'react';
 import DrawerPro from '@/components/DrawerPro';
 import AutoTable from '@/components/AutoTable';
-import { Badge, Skeleton } from 'antd';
+import { Badge, Skeleton, Row, Col } from 'antd';
 import getcolumns from './columns';
 import { useAsyncEffect, useRequest } from 'ahooks';
 import { doFetch } from '@/utils/doFetch';
@@ -11,7 +11,7 @@ import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import Settings from '../../../config/defaultSettings';
 import { useLocation } from '@umijs/max';
-import { FloatingPanel, List } from 'antd-mobile'
+import { FloatingPanel, List } from 'antd-mobile';
 
 const { proxypath } = Settings;
 
@@ -491,13 +491,10 @@ const DeviceIdAlarmList = ({ item, loading }) => {
           type: 'bar',
           itemStyle: {
             borderRadius: [50, 50, 0, 0],
-            color: new echarts.graphic.LinearGradient(
-              0, 0, 0, 1,
-              [
-                {offset: 0, color: 'rgba(130,186,254,1)'},
-                {offset: 1, color: 'rgba(130,186,254,0.2)'}
-              ]
-            )
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(130,186,254,1)' },
+              { offset: 1, color: 'rgba(130,186,254,0.2)' },
+            ]),
           },
           data: item?.map?.((it) => it.value) ?? [],
         },
@@ -520,7 +517,6 @@ const DeviceIdAlarmList = ({ item, loading }) => {
   );
 };
 
-
 function Detail(props) {
   const actionRef = useRef();
   const location = useLocation();
@@ -616,9 +612,9 @@ function Detail(props) {
     {
       debounceWait: 300,
     },
-  );  
+  );
 
-  const anchors = [100, window.innerHeight * 0.4, window.innerHeight * 0.8]
+  const anchors = [70, window.innerHeight * 0.4, window.innerHeight - 230];
 
   return (
     <div style={{ position: 'relative' }}>
@@ -635,20 +631,79 @@ function Detail(props) {
         <h3>MTBF</h3>
         <Mtbf item={mtbf?.data ?? {}} loading={mtbf?.loading} />
         <h3>告警统计分析</h3>
-        <DeviceIdAlarmList item={deviceIdAlarmList?.data ?? {}} loading={deviceIdAlarmList?.loading} />
-        
+        <DeviceIdAlarmList
+          item={deviceIdAlarmList?.data ?? {}}
+          loading={deviceIdAlarmList?.loading}
+        />
       </div>
       <FloatingPanel anchors={anchors}>
-        {
-          datalist?.data?.map?.((it,i)=>{
-            return <div key={it?.id}>
-              {}
-
-
-            </div>
-          })
-        }
-
+        <div style={{ padding:12 }}>
+          <Row
+            style={{
+              position:"absolute",
+              width:"calc(100% - 24px)",
+              top:20,
+              backgroundColor:"#546e84",
+              left:12,
+              zIndex:9999,
+              padding:"12px 0"
+            }}
+          >
+            <Col span={24} style={{ paddingLeft: 12,alignItems:"baseline" }} className="spread">
+              <h3 style={{marginTop:0}}>
+                实时数据
+              </h3>
+              <b>
+                共{datalist?.data?.length}条
+              </b>
+            </Col>
+            <Col span={8} style={{ paddingLeft: 12 }}>
+              参数
+            </Col>
+            <Col span={8} style={{ paddingLeft: 12 }}>
+              数据
+            </Col>
+            <Col span={8} style={{ paddingLeft: 12 }}>
+              时间
+            </Col>
+          </Row>
+
+          <div style={{paddingTop:68}}>
+          {datalist?.data?.map?.((it, i) => {
+            return (
+              <Row
+                key={it?.id}
+                style={{
+                  padding: '8px 0',
+                  backgroundColor: 'rgba(0,0,0,0.1)',
+                  marginTop: 2,
+                  borderRadius: 8,
+                }}
+              >
+                <Col
+                  span={8}
+                  style={{ paddingLeft: 12, wordBreak: 'break-all' }}
+                >
+                  {it?.key}
+                </Col>
+                <Col
+                  span={8}
+                  style={{ paddingLeft: 12, wordBreak: 'break-all' }}
+                >
+                  {it?.value}
+                </Col>
+                <Col
+                  span={8}
+                  style={{ paddingLeft: 12, wordBreak: 'break-all' }}
+                >
+                  {it?.time}
+                </Col>
+              </Row>
+            );
+          })}
+          </div>
+       
+        </div>
       </FloatingPanel>
     </div>
   );

src/pages/login/index.jsx

@@ -56,6 +56,10 @@ export default () => {
                 history.push('/');
               });
             }}
+            initialValues={{
+              username:"root",
+              password:"Nangao@2022"
+            }}
           >
             {loginType === 'account' && (
               <>