ydb-components-material 0.1.60 → 0.1.62

package/es/components/file-item/checkPoint.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './checkPoint.scss';
+export default function CheckPoint(props: any): JSX.Element;

package/es/components/file-item/checkPoint.js

@@ -0,0 +1,157 @@
+import _Message from "@alifd/next/es/message";
+import { React, useState, useEffect, useRef } from 'react';
+import { CheckCircleFilled } from '@ant-design/icons';
+import "./checkPoint.scss";
+export default function CheckPoint(props) {
+  var _resultData$at, _resultData$at2;
+  var checkPointData = props.checkPointData,
+    handleClose = props.handleClose;
+  var _useState = useState(0),
+    resIndex = _useState[0],
+    setResIndex = _useState[1];
+  var _useState2 = useState(null),
+    resIndexData = _useState2[0],
+    setResIndexData = _useState2[1];
+  var _useState3 = useState([]),
+    resultData = _useState3[0],
+    setResultData = _useState3[1];
+  var _useState4 = useState(0),
+    pageHeight = _useState4[0],
+    setPageHeight = _useState4[1];
+  var imgRef = useRef();
+  var initData = function initData() {
+    var fileUrl = checkPointData.fileUrl,
+      _checkPointData$annot = checkPointData.annotations,
+      annotations = _checkPointData$annot === void 0 ? [] : _checkPointData$annot;
+    setTimeout(function () {
+      var iframe = document.getElementById('file_check_point');
+      iframe.src = fileUrl + "#toolbar=0";
+    }, 500);
+    setResIndexData(annotations[0]);
+    // 其中的page可能是乱序的，所以先排序一下
+    setResultData(annotations.sort(function (a, b) {
+      return a.page - b.page;
+    }));
+    var clientWidth = document.documentElement.clientWidth;
+    var _annotations$ = annotations[0],
+      scrollWidth = _annotations$.scrollWidth,
+      scrollHeight = _annotations$.scrollHeight;
+    var scale = clientWidth / scrollWidth;
+    setPageHeight(scrollHeight * scale);
+  };
+
+  // 获取标识的位置和大小 [方法]
+  var getTipDotStyle = function getTipDotStyle(item) {
+    var width = item.width,
+      height = item.height,
+      x = item.x,
+      y = item.y,
+      scrollWidth = item.scrollWidth,
+      scrollHeight = item.scrollHeight,
+      page = item.page;
+    console.log(width, height, x, y);
+    var img = imgRef.current;
+    console.log(img, 'refs');
+    var clientWidth = document.documentElement.clientWidth;
+    console.log('clientWidth-----', clientWidth);
+
+    // 算出一个系数，来动态生成下面的边框样式
+    var scale = clientWidth / scrollWidth;
+
+    // console.log('原始宽高', sourceImgWidth, sourceImgHeight);
+    console.log('原始宽高', scrollWidth, scrollHeight);
+    console.log('缩放系数', scale, scale);
+    return {
+      width: width * scale + 'px',
+      height: height * scale + 'px',
+      left: x * scale + 'px',
+      top: (page - 1) * pageHeight + y * scale + 'px'
+    };
+  };
+
+  // 上一项(prev),下一项(next) [按钮]
+  var handleSwitch = function handleSwitch(state) {
+    if (state === 'next' && resIndex === resultData.length - 1) return _Message.notice('没有下一项了');
+    if (state === 'prev' && resIndex === 0) return _Message.notice('没有上一项了');
+    if (state === 'next') {
+      setResIndex(resIndex + 1);
+      setResIndexData(resultData[resIndex + 1]);
+    }
+    if (state === 'prev') {
+      setResIndex(resIndex - 1);
+      setResIndexData(resultData[resIndex - 1]);
+    }
+  };
+  var checkOneDot = function checkOneDot(item, index) {
+    setResIndex(index);
+    setResIndexData(item);
+  };
+  useEffect(function () {
+    if (checkPointData) {
+      initData();
+    }
+  }, [checkPointData]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "keyPoint-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tipDot-content",
+    style: {
+      height: ((_resultData$at = resultData.at(-1)) === null || _resultData$at === void 0 ? void 0 : _resultData$at.page) * pageHeight + 'px'
+    }
+  }, resultData.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tip-item " + (index === resIndex ? 'active' : ''),
+      key: index,
+      onClick: function onClick() {
+        return checkOneDot(item, index);
+      },
+      style: getTipDotStyle(item)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "num " + (index === resIndex ? 'active' : '')
+    }, index + 1));
+  })), resIndexData && /*#__PURE__*/React.createElement("div", {
+    className: "result-outter"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "result-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "result-title"
+  }, resIndex + 1, "\u3001", resIndexData.text), /*#__PURE__*/React.createElement("div", {
+    className: "result-info"
+  }, /*#__PURE__*/React.createElement(CheckCircleFilled, {
+    color: "#15bc83",
+    size: "20",
+    style: {
+      color: '#15bc83',
+      fontSize: '20px'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "result-text"
+  }, resIndexData.reviewNotes)))), /*#__PURE__*/React.createElement("div", {
+    className: "bottom-btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: handleClose
+  }, "\u8FD4\u56DE")), /*#__PURE__*/React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('prev');
+    }
+  }, "\u4E0A\u4E00\u9879")), /*#__PURE__*/React.createElement("div", {
+    className: "btn btn-blue"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('next');
+    }
+  }, "\u4E0B\u4E00\u9879"))), /*#__PURE__*/React.createElement("iframe", {
+    ref: imgRef,
+    id: "file_check_point",
+    frameBorder: "0",
+    height: "100%",
+    width: "100%",
+    style: {
+      height: ((_resultData$at2 = resultData.at(-1)) === null || _resultData$at2 === void 0 ? void 0 : _resultData$at2.page) * pageHeight + 'px'
+    }
+  })));
+}

package/es/components/file-item/checkPoint.scss

@@ -0,0 +1,120 @@
+.keyPoint-container {
+	// position: sticky;
+	height: 100vh;
+  // margin-top: -56px;
+	width: 100vw;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  // background: #ffffff;
+  // padding-top: 100px;
+  #file_check_point {
+    overflow: visible !important;
+    overflow-clip-margin: unset !important;
+  }
+  .tipDot-content{
+    // height: 100vh;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    // overflow: scroll;
+    .tip-item{
+      position: absolute;
+      border-radius: 2px;
+      border: 1px solid #15BC83;
+      background: rgba(21, 188, 131, 0.1);
+      &.active {
+        background: rgba(247, 98, 93, 0.1);
+        border: 1px solid #F7625D;
+      }
+      .num{
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+        margin-left: -20px;
+        background: #15BC83;
+        &.active {
+          background: #F7625D;
+        }
+      }
+    }
+
+  }
+	.result-outter {
+		box-sizing: border-box;
+		padding: 0 24px;
+		// border: 1px solid red;
+		position: fixed;
+		width: 100%;
+		bottom: 65px;
+		left: 0;
+		.result-card {
+			border-radius: 10px;
+			padding: 16px;
+      background: #ffffff;
+      border: 1px solid #ddd;
+      box-shadow: 0px 4px 10px 0px rgba(177, 188, 200, 0.25);
+			.result-title {
+				color: #333;
+				font-size: 14px;
+				margin-bottom: 8px;
+			}
+			.result-info{
+				font-size: 14px;
+				margin-bottom: 10px;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				gap: 5px;
+				// 提示类型: error/judge/pass
+				.result-text{
+				}
+			}
+		}
+
+	}
+	.bottom-btn {
+		box-sizing: border-box;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background-color: #fff;
+		padding: 11px 0;
+		display: flex;
+		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
+		z-index: 200;
+		.btn {
+			margin: 0 10px;
+			flex: 1;
+      color: #323233;
+      background-color: #fff;
+      border-color: #ebedf0;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100px;
+      padding: 0 12px;
+      font-size: 14px;
+      height: 40px;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      flex-direction: row;
+      box-sizing: border-box;
+      flex-direction: row;
+		}
+    .btn-blue {
+      color: white;
+      border-width: 0px;
+      background-image: linear-gradient(rgb(22, 120, 255), rgb(118, 173, 250));
+    }
+	}
+}

package/es/components/file-item/index.d.ts

@@ -9,7 +9,6 @@ export interface FileItemProps {
     fileId: string;
     fileType: string;
     guideImg: string;
-    checkImg: string;
     signatureEnable: boolean;
     signEnable: boolean;
     token: string;
@@ -25,6 +24,7 @@ export interface FileItemProps {
     baseUrl: string;
     isPC?: boolean;
     disabled?: boolean;
+    checkPoint?: object;
     del: () => void;
     valChange: (value: any) => void;
     download: (value: any) => void;

package/es/components/file-item/index.js

@@ -18,12 +18,12 @@ import SignPage from "./sign";
 import SealPage from "./seal";
 import { getMaterialLib } from "../../api";
 import { initFormat, getFileExtension } from "./file.js";
+import CheckPoint from "./checkPoint";
 import "./index.scss";
 var RadioGroup = _Radio.Group;
 var FileItem = function FileItem(_ref) {
   var fileUrl = _ref.fileUrl,
     guideImg = _ref.guideImg,
-    checkImg = _ref.checkImg,
     fileId = _ref.fileId,
     signatureEnable = _ref.signatureEnable,
     signEnable = _ref.signEnable,
@@ -42,6 +42,7 @@ var FileItem = function FileItem(_ref) {
     baseUrl = _ref.baseUrl,
     isPC = _ref.isPC,
     disabled = _ref.disabled,
+    checkPoint = _ref.checkPoint,
     valChange = _ref.valChange,
     download = _ref.download,
     del = _ref.del;
@@ -116,6 +117,9 @@ var FileItem = function FileItem(_ref) {
   var _useState12 = useState(false),
     isShowGuide = _useState12[0],
     setIsShowGuide = _useState12[1];
+  var _useState13 = useState(null),
+    checkPointData = _useState13[0],
+    setCheckPointData = _useState13[1];
   var showViewImg = function showViewImg(url) {
     setIsShowView(true);
     setViewImg(url);
@@ -173,10 +177,6 @@ var FileItem = function FileItem(_ref) {
   // 预览材料
   var preview = function preview() {
     if (!fileUrl) return;
-    if (previewIframeUrl) {
-      setIsShowPreview(true);
-      return;
-    }
     fetch(baseUrl + "/declaration/material/onlinePreview?url=" + fileUrl, {
       method: 'GET',
       headers: {
@@ -404,10 +404,10 @@ var FileItem = function FileItem(_ref) {
   }, guideImg && /*#__PURE__*/React.createElement("div", {
     className: "img_btn",
     onClick: showGuide
-  }, "\u7B7E\u7AE0\u5F15\u5BFC"), checkImg && /*#__PURE__*/React.createElement("div", {
+  }, "\u7B7E\u7AE0\u5F15\u5BFC"), checkPoint && /*#__PURE__*/React.createElement("div", {
     className: "img_btn",
     onClick: function onClick() {
-      return showViewImg(checkImg);
+      return setCheckPointData(checkPoint);
     }
   }, "\u5BA1\u67E5\u8981\u70B9")), fileUrl && !disabled ?
   /*#__PURE__*/
@@ -575,7 +575,12 @@ var FileItem = function FileItem(_ref) {
     frameborder: "0",
     height: "90%",
     width: "100%"
-  })));
+  })), checkPointData && /*#__PURE__*/React.createElement(CheckPoint, {
+    checkPointData: checkPointData,
+    handleClose: function handleClose() {
+      return setCheckPointData(null);
+    }
+  }));
 };
 FileItem.displayName = 'FileItem';
 export default FileItem;

package/lib/components/file-item/checkPoint.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './checkPoint.scss';
+export default function CheckPoint(props: any): JSX.Element;

package/lib/components/file-item/checkPoint.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = CheckPoint;
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+var _react = require("react");
+var _icons = require("@ant-design/icons");
+require("./checkPoint.scss");
+function CheckPoint(props) {
+  var _resultData$at, _resultData$at2;
+  var checkPointData = props.checkPointData,
+    handleClose = props.handleClose;
+  var _useState = (0, _react.useState)(0),
+    resIndex = _useState[0],
+    setResIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    resIndexData = _useState2[0],
+    setResIndexData = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    resultData = _useState3[0],
+    setResultData = _useState3[1];
+  var _useState4 = (0, _react.useState)(0),
+    pageHeight = _useState4[0],
+    setPageHeight = _useState4[1];
+  var imgRef = (0, _react.useRef)();
+  var initData = function initData() {
+    var fileUrl = checkPointData.fileUrl,
+      _checkPointData$annot = checkPointData.annotations,
+      annotations = _checkPointData$annot === void 0 ? [] : _checkPointData$annot;
+    setTimeout(function () {
+      var iframe = document.getElementById('file_check_point');
+      iframe.src = fileUrl + "#toolbar=0";
+    }, 500);
+    setResIndexData(annotations[0]);
+    // 其中的page可能是乱序的，所以先排序一下
+    setResultData(annotations.sort(function (a, b) {
+      return a.page - b.page;
+    }));
+    var clientWidth = document.documentElement.clientWidth;
+    var _annotations$ = annotations[0],
+      scrollWidth = _annotations$.scrollWidth,
+      scrollHeight = _annotations$.scrollHeight;
+    var scale = clientWidth / scrollWidth;
+    setPageHeight(scrollHeight * scale);
+  };
+
+  // 获取标识的位置和大小 [方法]
+  var getTipDotStyle = function getTipDotStyle(item) {
+    var width = item.width,
+      height = item.height,
+      x = item.x,
+      y = item.y,
+      scrollWidth = item.scrollWidth,
+      scrollHeight = item.scrollHeight,
+      page = item.page;
+    console.log(width, height, x, y);
+    var img = imgRef.current;
+    console.log(img, 'refs');
+    var clientWidth = document.documentElement.clientWidth;
+    console.log('clientWidth-----', clientWidth);
+
+    // 算出一个系数，来动态生成下面的边框样式
+    var scale = clientWidth / scrollWidth;
+
+    // console.log('原始宽高', sourceImgWidth, sourceImgHeight);
+    console.log('原始宽高', scrollWidth, scrollHeight);
+    console.log('缩放系数', scale, scale);
+    return {
+      width: width * scale + 'px',
+      height: height * scale + 'px',
+      left: x * scale + 'px',
+      top: (page - 1) * pageHeight + y * scale + 'px'
+    };
+  };
+
+  // 上一项(prev),下一项(next) [按钮]
+  var handleSwitch = function handleSwitch(state) {
+    if (state === 'next' && resIndex === resultData.length - 1) return _message["default"].notice('没有下一项了');
+    if (state === 'prev' && resIndex === 0) return _message["default"].notice('没有上一项了');
+    if (state === 'next') {
+      setResIndex(resIndex + 1);
+      setResIndexData(resultData[resIndex + 1]);
+    }
+    if (state === 'prev') {
+      setResIndex(resIndex - 1);
+      setResIndexData(resultData[resIndex - 1]);
+    }
+  };
+  var checkOneDot = function checkOneDot(item, index) {
+    setResIndex(index);
+    setResIndexData(item);
+  };
+  (0, _react.useEffect)(function () {
+    if (checkPointData) {
+      initData();
+    }
+  }, [checkPointData]);
+  return /*#__PURE__*/_react.React.createElement("div", null, /*#__PURE__*/_react.React.createElement("div", {
+    className: "keyPoint-container"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "tipDot-content",
+    style: {
+      height: ((_resultData$at = resultData.at(-1)) === null || _resultData$at === void 0 ? void 0 : _resultData$at.page) * pageHeight + 'px'
+    }
+  }, resultData.map(function (item, index) {
+    return /*#__PURE__*/_react.React.createElement("div", {
+      className: "tip-item " + (index === resIndex ? 'active' : ''),
+      key: index,
+      onClick: function onClick() {
+        return checkOneDot(item, index);
+      },
+      style: getTipDotStyle(item)
+    }, /*#__PURE__*/_react.React.createElement("div", {
+      className: "num " + (index === resIndex ? 'active' : '')
+    }, index + 1));
+  })), resIndexData && /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-outter"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-card"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-title"
+  }, resIndex + 1, "\u3001", resIndexData.text), /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-info"
+  }, /*#__PURE__*/_react.React.createElement(_icons.CheckCircleFilled, {
+    color: "#15bc83",
+    size: "20",
+    style: {
+      color: '#15bc83',
+      fontSize: '20px'
+    }
+  }), /*#__PURE__*/_react.React.createElement("div", {
+    className: "result-text"
+  }, resIndexData.reviewNotes)))), /*#__PURE__*/_react.React.createElement("div", {
+    className: "bottom-btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: handleClose
+  }, "\u8FD4\u56DE")), /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('prev');
+    }
+  }, "\u4E0A\u4E00\u9879")), /*#__PURE__*/_react.React.createElement("div", {
+    className: "btn btn-blue"
+  }, /*#__PURE__*/_react.React.createElement("div", {
+    onClick: function onClick() {
+      return handleSwitch('next');
+    }
+  }, "\u4E0B\u4E00\u9879"))), /*#__PURE__*/_react.React.createElement("iframe", {
+    ref: imgRef,
+    id: "file_check_point",
+    frameBorder: "0",
+    height: "100%",
+    width: "100%",
+    style: {
+      height: ((_resultData$at2 = resultData.at(-1)) === null || _resultData$at2 === void 0 ? void 0 : _resultData$at2.page) * pageHeight + 'px'
+    }
+  })));
+}

package/lib/components/file-item/checkPoint.scss

@@ -0,0 +1,120 @@
+.keyPoint-container {
+	// position: sticky;
+	height: 100vh;
+  // margin-top: -56px;
+	width: 100vw;
+  position: absolute;
+  z-index: 999;
+  left: 0;
+  top: 0;
+  // background: #ffffff;
+  // padding-top: 100px;
+  #file_check_point {
+    overflow: visible !important;
+    overflow-clip-margin: unset !important;
+  }
+  .tipDot-content{
+    // height: 100vh;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    // overflow: scroll;
+    .tip-item{
+      position: absolute;
+      border-radius: 2px;
+      border: 1px solid #15BC83;
+      background: rgba(21, 188, 131, 0.1);
+      &.active {
+        background: rgba(247, 98, 93, 0.1);
+        border: 1px solid #F7625D;
+      }
+      .num{
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+        margin-left: -20px;
+        background: #15BC83;
+        &.active {
+          background: #F7625D;
+        }
+      }
+    }
+
+  }
+	.result-outter {
+		box-sizing: border-box;
+		padding: 0 24px;
+		// border: 1px solid red;
+		position: fixed;
+		width: 100%;
+		bottom: 65px;
+		left: 0;
+		.result-card {
+			border-radius: 10px;
+			padding: 16px;
+      background: #ffffff;
+      border: 1px solid #ddd;
+      box-shadow: 0px 4px 10px 0px rgba(177, 188, 200, 0.25);
+			.result-title {
+				color: #333;
+				font-size: 14px;
+				margin-bottom: 8px;
+			}
+			.result-info{
+				font-size: 14px;
+				margin-bottom: 10px;
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				gap: 5px;
+				// 提示类型: error/judge/pass
+				.result-text{
+				}
+			}
+		}
+
+	}
+	.bottom-btn {
+		box-sizing: border-box;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background-color: #fff;
+		padding: 11px 0;
+		display: flex;
+		box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
+		z-index: 200;
+		.btn {
+			margin: 0 10px;
+			flex: 1;
+      color: #323233;
+      background-color: #fff;
+      border-color: #ebedf0;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100px;
+      padding: 0 12px;
+      font-size: 14px;
+      height: 40px;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      flex-direction: row;
+      box-sizing: border-box;
+      flex-direction: row;
+		}
+    .btn-blue {
+      color: white;
+      border-width: 0px;
+      background-image: linear-gradient(rgb(22, 120, 255), rgb(118, 173, 250));
+    }
+	}
+}

package/lib/components/file-item/index.d.ts

@@ -9,7 +9,6 @@ export interface FileItemProps {
     fileId: string;
     fileType: string;
     guideImg: string;
-    checkImg: string;
     signatureEnable: boolean;
     signEnable: boolean;
     token: string;
@@ -25,6 +24,7 @@ export interface FileItemProps {
     baseUrl: string;
     isPC?: boolean;
     disabled?: boolean;
+    checkPoint?: object;
     del: () => void;
     valChange: (value: any) => void;
     download: (value: any) => void;