Merge pull request #32 from kne-union/linzp

添加report

Author: zhipenglin

.DS_Store

@@ -108,6 +108,24 @@
           "packageName": "antd"
         }
       ]
+    },
+    {
+      "title": "Report",
+      "description": "",
+      "code": "./report.js",
+      "scope": [
+        {
+          "name": "_InfoPage",
+          "packageName": "@kne/current-lib_info-page"
+        },
+        {
+          "packageName": "@kne/current-lib_info-page/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        }
+      ]
     }
   ]
 }

README.md

@@ -1,6 +1,6 @@
 {
   "name": "@kne/info-page",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式",
   "syntax": {
     "esmodules": true

doc/example.json

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Flex, Row, Col } from 'antd';
+import get from 'lodash/get';
+import style from './style.module.scss';
+
+const List = ({ report }) => {
+  return (
+    <Flex vertical gap={16}>
+      {get(report, 'list', []).map(({ label, content }, index) => {
+        return (
+          <Row wrap={false} key={index}>
+            <Col span={3} className={style['list-label-col']}>
+              <div className={style['list-label']}>{label}</div>
+            </Col>
+            <Col span={21} className={style['list-content-col']}>
+              <div className={style['list-content']}>{content}</div>
+            </Col>
+          </Row>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default List;

doc/report.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Space } from 'antd';
+import get from 'lodash/get';
+import classnames from 'classnames';
+import style from './style.module.scss';
+
+const Part = ({ report }) => {
+  return (
+    <Space direction="vertical" size={32}>
+      {get(report, 'list', []).map(({ label, content, hasBgColor, ...props }, index) => {
+        return (
+          <div {...props} key={index}>
+            <div className={style['part-label']}>{label}</div>
+            <div
+              className={classnames(style['part-content'], {
+                [style['has-bg-color']]: hasBgColor
+              })}
+            >
+              {content}
+            </div>
+          </div>
+        );
+      })}
+    </Space>
+  );
+};
+
+export default Part;

package.json

@@ -0,0 +1,8 @@
+import React from 'react';
+import style from './style.module.scss';
+
+const PrintPageBreak = () => {
+  return <div className={style['print-page-break']} />;
+};
+
+export default PrintPageBreak;

src/Report/List.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import get from 'lodash/get';
+import style from './style.module.scss';
+
+const Result = ({ report }) => {
+  const totalScore = get(report, 'total.score');
+  const totalLabel = get(report, 'total.label');
+  const list = get(report, 'list', []);
+  return (
+    <Row wrap={false} gutter={16} className={style['result-view']}>
+      <Col span={3}>
+        <div className={style['result-total']}>
+          <div className={style['result-total-score']}>{totalScore}</div>
+          <div className={style['result-total-label']}>{totalLabel}</div>
+        </div>
+      </Col>
+      <Col span={21}>
+        <div className={style['result-list']}>
+          {list.map(({ label, content, score }, index) => {
+            return (
+              <div className={style['result-item']} key={index}>
+                <div className={style['result-item-label']}>
+                  {label}：<span className={style['result-item-score']}>{score}</span>
+                </div>
+                <div className={style['result-item-content']}>{content}</div>
+              </div>
+            );
+          })}
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default Result;

src/Report/Part.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Row, Col } from 'antd';
+import style from './style.module.scss';
+
+const ScoreItem = ({ score, staticScore }) => {
+  score = Number.isNaN(score) ? 0 : Number(score);
+  return (
+    <div
+      className={classnames('score', style['score-item'], {
+        [style['is-grey']]: staticScore > score,
+        [style['low-score']]: score < 3,
+        [style['middle-score']]: score === 3,
+        [style['high-score']]: score > 3
+      })}
+    />
+  );
+};
+
+const Score = ({ className, value, total = 5 }) => {
+  return (
+    <Row justify="space-between" gutter={[4, 0]} className={classnames(className, style['score'])} wrap={false} flex={1}>
+      {Array.from({ length: total }).map((n, index) => (
+        <Col key={index + 1} span={5} className={style['score-item-col']}>
+          <ScoreItem score={value} staticScore={index + 1} />
+        </Col>
+      ))}
+    </Row>
+  );
+};
+
+export default Score;