fix: merge

src/components/AMapComponent/PathSimplifier/index.tsx

@@ -34,7 +34,6 @@ const PathSimplifier = (props: PathSimplifierProps) => {
       }
 
       if (props.pathData) {
-        console.log(props.pathData.map((item) => ({ name: item.name || '路线', path: item.path })));
         pathSimplifierRef.current?.setData(
           props.pathData.map((item) => ({ name: item.name || '路线', path: item.path })),
         );

src/pages/device/DashBoard/index.less

@@ -25,10 +25,12 @@
             line-height: 50px;
           }
         }
+
         .top-card-top-charts {
           display: flex;
           flex-direction: column;
           width: 100%;
+
           .top-card-top-charts-total {
             font-weight: bold;
             font-size: 18px;

src/pages/home/components/Body.tsx

@@ -0,0 +1,21 @@
+import Title from '@/pages/home/components/Title';
+import './index.less';
+import classNames from 'classnames';
+
+interface BodyProps {
+  title: string;
+  english: string;
+  className?: string;
+  url?: string;
+}
+const defaultUrl = require('/public/images/home/content.png');
+export default (props: BodyProps) => {
+  return (
+    <div className={classNames('home-body', props.className)}>
+      <div className={'home-body-img'}>
+        <img src={props.url || defaultUrl} />
+      </div>
+      <Title title={props.title} english={props.english} />
+    </div>
+  );
+};

src/pages/home/components/Guide.tsx

@@ -1,36 +1,66 @@
-import { Card, Col, Row } from 'antd';
+import './index.less';
+import { getMenuPathByCode } from '@/utils/menu';
+import { message } from 'antd';
+import useHistory from '@/hooks/route/useHistory';
+import Title from './Title';
 
-interface Props {
+const Image = {
+  1: require('/public/images/home/1.png'),
+  2: require('/public/images/home/2.png'),
+  3: require('/public/images/home/3.png'),
+};
+
+interface GuideProps {
   title: string;
-  data: any[];
-  jump?: (auth: boolean, url: string, param: string) => void;
+  data: GuideItemProps[];
+}
+
+interface GuideItemProps {
+  key: string;
+  name: string;
+  english: string;
+  url: string;
+  param: string;
+  index?: number;
+  auth: boolean;
 }
 
-const Guide = (props: Props) => {
-  const { title, data, jump } = props;
+const GuideItem = (props: GuideItemProps) => {
+  const path = getMenuPathByCode(props.url);
+  const history = useHistory();
+
+  const jumpPage = () => {
+    if (path && props.auth) {
+      history.push(`${path}${props.param}`);
+    } else {
+      message.warning('暂无权限，请联系管理员');
+    }
+  };
+
   return (
-    <Card>
-      <div style={{ marginBottom: 15 }}>
-        <h3>{title}</h3>
+    <div className={'home-guide-item arrow'} onClick={jumpPage}>
+      <div className={'item-english'}>{props.english}</div>
+      <div className={'item-title'}>{props.name}</div>
+      <div className={`item-index`}>
+        <img src={Image[props.index!]} />
       </div>
-      <Row gutter={24}>
-        {data.map((item) => (
-          <Col key={item.key} span={8}>
-            <Card
-              bordered
-              onClick={() => {
-                if (jump) {
-                  jump(item.auth, item.url, item.param);
-                }
-              }}
-            >
-              {item.name}
-            </Card>
-          </Col>
+    </div>
+  );
+};
+
+const Guide = (props: GuideProps) => {
+  return (
+    <div className={'home-guide'}>
+      <Title title={props.title} />
+      <div className={'home-guide-items'}>
+        {props.data.map((item, index) => (
+          <GuideItem {...item} index={index + 1} />
         ))}
-      </Row>
-    </Card>
+      </div>
+    </div>
   );
 };
 
+Guide.Item = GuideItem;
+
 export default Guide;

src/pages/home/components/Statistics.tsx

@@ -1,28 +1,36 @@
-import { Card, Col, Row } from 'antd';
+import Title from '@/pages/home/components/Title';
+import React from 'react';
+import './index.less';
 
-const Statistics = () => {
+type StatisticsItem = {
+  name: string;
+  value: number;
+  img: string;
+};
+
+interface StatisticsProps {
+  extra?: React.ReactNode | string;
+  data: StatisticsItem[];
+}
+
+const defaultImage = require('/public/images/home/top-1.png');
+
+const Statistics = (props: StatisticsProps) => {
   return (
-    <Card
-      title={'设备统计'}
-      extra={
-        <a
-          onClick={() => {
-            // pageJump(!!getMenuPathByCode('device/DashBoard'), 'device/DashBoard');
-          }}
-        >
-          详情
-        </a>
-      }
-    >
-      <Row gutter={24}>
-        <Col span={12}>
-          <Card bordered>产品数量</Card>
-        </Col>
-        <Col span={12}>
-          <Card bordered>设备数量</Card>
-        </Col>
-      </Row>
-    </Card>
+    <div className={'home-statistics'}>
+      <Title title={'设备统计'} extra={props.extra} />
+      <div className={'home-statistics-body'}>
+        {props.data.map((item) => (
+          <div className={'home-guide-item'}>
+            <div className={'item-english'}>{item.name}</div>
+            <div className={'item-title'}>{item.value}</div>
+            <div className={`item-index`}>
+              <img src={item.img || defaultImage} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };
 

src/pages/home/components/Title.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface TitleProps {
+  title: string;
+  english?: string;
+  className?: string;
+  extra?: React.ReactNode | string;
+}
+
+export default (props: TitleProps) => {
+  return (
+    <div className={classNames('home-title', props.className)}>
+      <span>{props.title}</span>
+      <div>{props.extra}</div>
+      {props.english && <div className={'home-title-english'}>{props.english}</div>}
+    </div>
+  );
+};

src/pages/home/components/index.less

@@ -0,0 +1,113 @@
+@import '~antd/es/style/themes/default.less';
+@bodyPadding: 24px 16px;
+@margin: 24px;
+
+.home-guide {
+  margin-bottom: @margin;
+  padding: @bodyPadding;
+  background-color: #fff;
+
+  .home-guide-items {
+    display: flex;
+    gap: 56px;
+  }
+}
+
+.home-guide-item {
+  position: relative;
+  flex-grow: 1;
+  padding: 16px;
+  background: linear-gradient(135.62deg, #f6f7fd 22.27%, rgba(255, 255, 255, 0.86) 91.82%);
+  border-radius: 2px;
+  box-shadow: 0 4px 18px #efefef;
+
+  &.arrow {
+    &:not(:last-child) {
+      &::after {
+        position: absolute;
+        top: 50%;
+        right: -60px;
+        width: 60px;
+        height: 40px;
+        background: url('/images/home/arrow-2.png') no-repeat center;
+        transform: translateY(-50%);
+        content: ' ';
+      }
+    }
+  }
+
+  .item-english {
+    color: #4f4f4f;
+  }
+
+  .item-title {
+    margin: 20px 0;
+    color: @text-color;
+    font-weight: 700;
+    font-size: 20px;
+  }
+
+  .item-index {
+    position: absolute;
+    right: 10%;
+    bottom: 0;
+  }
+}
+
+.home-title {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-left: 18px;
+  font-weight: bold;
+  font-size: 18px;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 8px;
+    height: 8px;
+    background-color: @primary-color;
+    border: 1px solid #b4c0da;
+    transform: translateY(-50%);
+    content: ' ';
+  }
+
+  .home-title-english {
+    position: absolute;
+    top: 30px;
+    color: rgba(0, 0, 0, 0.3);
+    font-size: 12px;
+  }
+}
+
+.home-body {
+  position: relative;
+  height: 500px;
+  margin-bottom: @margin;
+  padding: @bodyPadding;
+  overflow: hidden;
+  background-color: #fff;
+
+  .home-body-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    height: 100%;
+  }
+}
+
+.home-statistics {
+  position: relative;
+  padding: @bodyPadding;
+  background-color: #fff;
+
+  .home-statistics-body {
+    display: flex;
+    gap: 24px;
+  }
+}

src/pages/home/components/index.ts

@@ -0,0 +1,4 @@
+export { default as Guide } from './Guide';
+export { default as Title } from './Title';
+export { default as Statistics } from './Statistics';
+export { default as Body } from './Body';

src/pages/home/device/index.tsx

@@ -1,7 +1,6 @@
-import { Card, Col, message, Row } from 'antd';
+import { Col, Row } from 'antd';
 import { PermissionButton } from '@/components';
-import { getMenuPathByCode } from '@/utils/menu';
-import Guide from '../components/Guide';
+import { Guide, Body } from '../components';
 import Statistics from '../components/Statistics';
 import Steps from '../components/Steps';
 
@@ -10,40 +9,28 @@ const Device = () => {
   const devicePermission = PermissionButton.usePermission('device/Instance').permission;
   const rulePermission = PermissionButton.usePermission('rule-engine/Instance').permission;
   // // 跳转
-  const pageJump = (auth: boolean, url: string, param: string) => {
-    if (auth) {
-      // 判断是否有权限
-      const path = getMenuPathByCode(url);
-      if (path) {
-        const tab: any = window.open(`${origin}/#${path}${param}`);
-        tab!.onTabSaveSuccess = () => {
-          // if (value.status === 200) {
-          // }
-        };
-      }
-    } else {
-      message.error('暂无权限，请联系管理员');
-    }
-  };
 
   const guideList = [
     {
       key: 'product',
-      name: '1、创建产品',
+      name: '创建产品',
+      english: 'CREATE PRODUCT',
       auth: !!productPermission.add,
       url: 'device/Product',
       param: '?save=true',
     },
     {
       key: 'device',
-      name: '2、创建设备',
+      name: '创建设备',
+      english: 'CREATE DEVICE',
       auth: !!devicePermission.add,
       url: 'device/Instance',
       param: '?save=true',
     },
     {
       key: 'rule-engine',
-      name: '3、规则引擎',
+      name: '规则引擎',
+      english: 'RULE ENGINE',
       auth: !!rulePermission.add,
       url: 'rule-engine/Instance',
       param: '?save=true',
@@ -74,22 +61,33 @@ const Device = () => {
 
   return (
     <Row gutter={24}>
-      <Col span={12}>
+      <Col span={14}>
         <Guide
           title="物联网引导"
           data={guideList}
-          jump={(auth: boolean, url: string, param: string) => {
-            pageJump(auth, url, param);
-          }}
+          // jump={(auth: boolean, url: string, param: string) => {
+          //   pageJump(auth, url, param);
+          // }}
         />
       </Col>
-      <Col span={12}>
-        <Statistics />
+      <Col span={10}>
+        <Statistics
+          data={[
+            {
+              name: '产品数量',
+              value: 111,
+              img: '',
+            },
+            {
+              name: '设备数量',
+              value: 12,
+              img: '',
+            },
+          ]}
+        />
       </Col>
       <Col span={24}>
-        <Card style={{ margin: '20px 0' }} title="平台架构图">
-          <img style={{ height: 500 }} src={require('/public/images/login.png')} />
-        </Card>
+        <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
       </Col>
       <Col span={24}>
         <Steps />

src/pages/link/Channel/Modbus/Access/index.less

@@ -8,6 +8,7 @@
     .ant-tabs-content-holder {
       width: 1px;
     }
+
     .ant-tabs > .ant-tabs-nav .ant-tabs-nav-more,
     .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-more {
       display: none;

src/pages/link/Channel/Opcua/Access/index.less

@@ -4,9 +4,11 @@
       color: #1d39c4;
       text-shadow: none;
     }
+
     .ant-tabs-content-holder {
       width: 1px;
     }
+
     .ant-tabs > .ant-tabs-nav .ant-tabs-nav-more,
     .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-more {
       display: none;

src/pages/media/DashBoard/index.tsx

@@ -100,10 +100,10 @@ export default () => {
           type: 'value',
         },
         grid: {
-          left: '2%',
+          left: '4%',
           right: '2%',
           top: '2%',
-          bottom: '2%',
+          bottom: '4%',
         },
         series: [
           {

src/pages/rule-engine/DashBoard/index.less

@@ -1,4 +1,4 @@
-.media-dash-board {
+.alarm-dash-board {
   .top-card-items {
     margin-bottom: 12px;
 
@@ -36,3 +36,66 @@
     border: 1px solid #f0f0f0;
   }
 }
+
+.alarmRank {
+  padding: 0 32px 32px 72px;
+}
+
+.rankingList {
+  margin: 25px 0 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    zoom: 1;
+
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+
+    &::after {
+      clear: both;
+      height: 0;
+      font-size: 0;
+      visibility: hidden;
+    }
+
+    span {
+      //color: red;
+      font-size: 14px;
+      line-height: 22px;
+    }
+
+    .rankingItemNumber {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      margin-top: 1.5px;
+      margin-right: 16px;
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: center;
+      background-color: #edf0f3;
+      border-radius: 20px;
+
+      &.active {
+        color: #fff;
+        background-color: #314659;
+      }
+    }
+
+    .rankingItemTitle {
+      flex: 1;
+      margin-right: 8px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}

src/pages/rule-engine/DashBoard/index.tsx

@@ -1,20 +1,15 @@
 import { PageContainer } from '@ant-design/pro-layout';
 import { EChartsOption } from 'echarts';
-import { useEffect, useState } from 'react';
-import { Statistic, StatisticCard } from '@ant-design/pro-card';
-import { Card, Select } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { Card, Col } from 'antd';
 import './index.less';
-import Header from '@/components/DashBoard/header';
-import Echarts from '@/components/DashBoard/echarts';
 import Service from './service';
 import { observer } from '@formily/react';
 import { model } from '@formily/reactive';
-
-const imgStyle = {
-  display: 'block',
-  width: 42,
-  height: 42,
-};
+import DashBoard, { DashBoardTopCard } from '@/components/DashBoard';
+import { FireOutlined } from '@ant-design/icons';
+import styles from './index.less';
+import moment from 'moment';
 
 const service = new Service();
 export const state = model<{
@@ -37,6 +32,10 @@ type DashboardItem = {
   group: string;
   data: Record<string, any>;
 };
+
+type RefType = {
+  getValues: Function;
+};
 const Dashboard = observer(() => {
   const [options, setOptions] = useState<EChartsOption>({});
 
@@ -48,12 +47,12 @@ const Dashboard = observer(() => {
     dimension: 'agg',
     group: 'today',
     params: {
-      time: '1h',
+      time: '1d',
       targetType: 'device',
       format: 'HH:mm:ss',
-      from: 'now-1d',
+      from: moment(new Date(new Date().setHours(0, 0, 0, 0))).format('YYYY-MM-DD HH:mm:ss'),
       to: 'now',
-      limit: 24,
+      // limit: 24,
     },
   };
   // 当月告警
@@ -87,7 +86,6 @@ const Dashboard = observer(() => {
       limit: 12,
     },
   };
-
   // 告警排名
   const order = {
     dashboard: 'alarm',
@@ -105,7 +103,7 @@ const Dashboard = observer(() => {
   };
 
   const getDashboard = async () => {
-    const resp = await service.dashboard([today, thisMonth, chartData, order]);
+    const resp = await service.dashboard([today, thisMonth, order]);
     if (resp.status === 200) {
       const _data = resp.result as DashboardItem[];
       state.today = _data.find((item) => item.group === 'today')?.data.value;
@@ -147,144 +145,178 @@ const Dashboard = observer(() => {
     getAlarmConfig();
   }, []);
 
-  const getEcharts = async (params: any) => {
+  const getEcharts = async () => {
     // 请求数据
-    console.log(params);
+    const resp = await service.dashboard([chartData]);
 
-    setOptions({
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [
-        {
-          data: [150, 230, 224, 218, 135, 147, 260],
-          type: 'line',
+    if (resp.status === 200) {
+      const xData: string[] = [];
+      const sData: number[] = [];
+      resp.result.forEach((item: any) => {
+        xData.push(item.data.timeString);
+        sData.push(item.data.value);
+      });
+      setOptions({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
         },
-      ],
-    });
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: xData.reverse(),
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+        ],
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            barWidth: '60%',
+            data: sData.reverse(),
+          },
+        ],
+      });
+    }
   };
 
+  const alarmCountRef = useRef<RefType>();
   return (
     <PageContainer>
-      <div style={{ display: 'flex' }}>
-        <StatisticCard
-          title="今日告警"
-          statistic={{
-            value: 75,
-            suffix: '次',
-          }}
-          chart={
-            <img
-              src="https://gw.alipayobjects.com/zos/alicdn/PmKfn4qvD/mubiaowancheng-lan.svg"
-              width="100%"
-              alt="进度条"
-            />
-          }
-          footer={
-            <>
-              <Statistic value={15.1} title="当月告警" suffix="次" layout="horizontal" />
-            </>
-          }
-          style={{ width: '24%', marginRight: '5px' }}
-        />
-        <StatisticCard
-          statistic={{
-            title: '告警配置',
-            value: 2176,
-            icon: (
-              <img
-                style={imgStyle}
-                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
-                alt="icon"
-              />
-            ),
-          }}
-          style={{ width: '25%', marginRight: '5px' }}
-          footer={
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Statistic value={76} title="正常" suffix="次" layout="horizontal" />
-              <Statistic value={76} title="禁用" suffix="次" layout="horizontal" />
+      <div className={'alarm-dash-board'}>
+        <DashBoardTopCard>
+          <DashBoardTopCard.Item
+            title="今日告警"
+            value={state.today}
+            footer={[{ title: '当月告警', value: state.thisMonth, status: 'success' }]}
+            span={6}
+          >
+            <img src={require('/public/images/media/dashboard-1.png')} />
+          </DashBoardTopCard.Item>
+          <DashBoardTopCard.Item
+            title="告警配置"
+            value={state.config}
+            footer={[
+              { title: '正常', value: state.enabledConfig, status: 'success' },
+              { title: '禁用', value: state.disabledConfig, status: 'error' },
+            ]}
+            span={6}
+          >
+            <img src={require('/public/images/media/dashboard-1.png')} />
+          </DashBoardTopCard.Item>
+
+          <Col span={12}>
+            <div className={'dash-board-top-item'}>
+              <div className={'content-left'}>
+                <div className={'content-left-title'}>最新告警</div>
+                <div>
+                  <ul>
+                    {[
+                      {
+                        dateTime: '2022-01-01 00:00:00',
+                        name: '一楼烟感告警',
+                        product: '产品',
+                        level: '1极告警',
+                      },
+                      {
+                        dateTime: '2022-01-01 00:00:00',
+                        name: '一楼烟感告警',
+                        product: '产品',
+                        level: '1极告警',
+                      },
+                      {
+                        dateTime: '2022-01-01 00:00:00',
+                        name: '一楼烟感告警',
+                        product: '产品',
+                        level: '1极告警',
+                      },
+                    ].map((item) => (
+                      <li>
+                        <div
+                          style={{ display: 'flex', justifyContent: 'space-between', margin: 10 }}
+                        >
+                          <div>
+                            <FireOutlined style={{ marginRight: 5 }} /> {item.dateTime}
+                          </div>
+                          <div>{item.name}</div>
+                          <div>{item.product}</div>
+                          <div>{item.level}</div>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
             </div>
-          }
-        />
-        <div style={{ width: '50%' }}>
-          <StatisticCard
-            title="最新告警"
-            statistic={{
-              // title: '最新告警'
-              value: undefined,
-            }}
-            chart={
-              <ul>
+          </Col>
+        </DashBoardTopCard>
+      </div>
+      <Card style={{ marginTop: 10 }}>
+        <DashBoard
+          title="告警统计"
+          height={400}
+          options={options}
+          onParamsChange={getEcharts}
+          ref={alarmCountRef}
+          echartsAfter={
+            <div className={styles.alarmRank}>
+              <h4>告警排名</h4>
+              <ul className={styles.rankingList}>
                 {[
                   {
                     dateTime: '2022-01-01 00:00:00',
                     name: '一楼烟感告警',
                     product: '产品',
-                    level: '1极告警',
+                    level: '543',
                   },
                   {
                     dateTime: '2022-01-01 00:00:00',
                     name: '一楼烟感告警',
                     product: '产品',
-                    level: '1极告警',
+                    level: '3445',
                   },
                   {
                     dateTime: '2022-01-01 00:00:00',
                     name: '一楼烟感告警',
                     product: '产品',
-                    level: '1极告警',
+                    level: '123123',
                   },
                   {
                     dateTime: '2022-01-01 00:00:00',
                     name: '一楼烟感告警',
                     product: '产品',
-                    level: '1极告警',
+                    level: '3123',
                   },
-                ].map((item) => (
-                  <li>
-                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                      <div>{item.dateTime}</div>
-                      <div>{item.name}</div>
-                      <div>{item.product}</div>
-                      <div>{item.level}</div>
-                      {JSON.stringify(state)}
-                    </div>
+                ].map((item, i) => (
+                  <li key={item.dateTime}>
+                    <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
+                      {i + 1}
+                    </span>
+                    <span className={styles.rankingItemTitle} title={item.name}>
+                      {item.name}
+                    </span>
+                    <span className={styles.rankingItemValue}>{item.level}</span>
                   </li>
                 ))}
               </ul>
-            }
-          />
-        </div>
-      </div>
-      <Card style={{ marginTop: 10 }}>
-        <div
-          // className={classNames(Style['dash-board-echarts'], className)}
-          style={{
-            height: 200,
-          }}
-        >
-          <Header
-            title={'告警统计'}
-            extraParams={{
-              key: 'test',
-              Children: (
-                <Select
-                  options={[
-                    { label: '设备', value: 'device' },
-                    { label: '产品', value: 'product' },
-                  ]}
-                ></Select>
-              ),
-            }}
-            onParamsChange={getEcharts}
-          />
-          <Echarts options={options} />
-        </div>
+            </div>
+          }
+        />
       </Card>
     </PageContainer>
   );

src/pages/system/Basis/index.tsx

@@ -1,4 +1,4 @@
-import { Card, Form, Input, Select, Upload, message } from 'antd';
+import { Card, Form, Input, message, Select, Upload } from 'antd';
 import { useModel } from '@@/plugin-model/useModel';
 import { useEffect, useState } from 'react';
 import usePermissions from '@/hooks/permission';