Compare commits
No commits in common. "master" and "feat/ts-upgrade-20240603" have entirely different histories.
master
...
feat/ts-up
@ -16,7 +16,7 @@
|
|||||||
|
|
||||||
#root .dumi-default-sidebar {
|
#root .dumi-default-sidebar {
|
||||||
width: 188px;
|
width: 188px;
|
||||||
overflow-y: scroll;
|
overflow-y: hidden;
|
||||||
/* stylelint-disable-next-line rule-empty-line-before */
|
/* stylelint-disable-next-line rule-empty-line-before */
|
||||||
&:hover {
|
&:hover {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
@ -19,7 +19,6 @@ export default defineConfig({
|
|||||||
'@zhst/slave': path.join(__dirname, 'packages/slave/src'),
|
'@zhst/slave': path.join(__dirname, 'packages/slave/src'),
|
||||||
'@zhst/material': path.join(__dirname, 'packages/material/src'),
|
'@zhst/material': path.join(__dirname, 'packages/material/src'),
|
||||||
'@zhst/icon': path.join(__dirname, 'packages/icon/src'),
|
'@zhst/icon': path.join(__dirname, 'packages/icon/src'),
|
||||||
'@zhst/icon-v2': path.join(__dirname, 'packages/icon-v2/src'),
|
|
||||||
'@zhst/map': path.join(__dirname, 'packages/map/src'),
|
'@zhst/map': path.join(__dirname, 'packages/map/src'),
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
@ -35,7 +34,6 @@ export default defineConfig({
|
|||||||
{ type: 'slave', dir: 'packages/slave/src' },
|
{ type: 'slave', dir: 'packages/slave/src' },
|
||||||
{ type: 'material', dir: 'packages/material/src' },
|
{ type: 'material', dir: 'packages/material/src' },
|
||||||
{ type: 'icon', dir: 'packages/icon/src' },
|
{ type: 'icon', dir: 'packages/icon/src' },
|
||||||
{ type: 'icon-v2', dir: 'packages/icon-v2/src' },
|
|
||||||
{ type: 'map', dir: 'packages/map/src' },
|
{ type: 'map', dir: 'packages/map/src' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
12
.fatherrc.ts
12
.fatherrc.ts
@ -1,15 +1,5 @@
|
|||||||
import { defineConfig } from 'father-plugin-less';
|
import { defineConfig } from 'father';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// more father config: https://github.com/umijs/father/blob/master/docs/config.md
|
// more father config: https://github.com/umijs/father/blob/master/docs/config.md
|
||||||
esm: {
|
|
||||||
output: 'es',
|
|
||||||
ignores: ['**/demo/*', 'src/**/demo/*'],
|
|
||||||
transformer: 'babel',
|
|
||||||
},
|
|
||||||
cjs: {
|
|
||||||
output: 'lib',
|
|
||||||
ignores: ['**/demo/*', 'src/**/demo/*'],
|
|
||||||
transformer: 'babel',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -9,10 +9,6 @@ vueuse
|
|||||||
/temp
|
/temp
|
||||||
packages/**/es
|
packages/**/es
|
||||||
packages/**/lib
|
packages/**/lib
|
||||||
**/es
|
|
||||||
**/lib
|
|
||||||
**/**/es
|
|
||||||
**/**/lib
|
|
||||||
/es
|
/es
|
||||||
/lib
|
/lib
|
||||||
pnpm-lock.yaml
|
pnpm-lock.yaml
|
||||||
|
|||||||
10
package.json
10
package.json
@ -61,7 +61,6 @@
|
|||||||
"dumi": "^2.2.13",
|
"dumi": "^2.2.13",
|
||||||
"eslint": "^8.23.0",
|
"eslint": "^8.23.0",
|
||||||
"father": "^4.1.0",
|
"father": "^4.1.0",
|
||||||
"father-plugin-less": "^0.0.2",
|
|
||||||
"husky": "^8.0.1",
|
"husky": "^8.0.1",
|
||||||
"lerna": "^8.0.0",
|
"lerna": "^8.0.0",
|
||||||
"lint-staged": "^13.0.3",
|
"lint-staged": "^13.0.3",
|
||||||
@ -83,12 +82,5 @@
|
|||||||
},
|
},
|
||||||
"authors": [
|
"authors": [
|
||||||
"dev<710328466@qq.com>"
|
"dev<710328466@qq.com>"
|
||||||
],
|
]
|
||||||
"dependencies": {
|
|
||||||
"@ant-design/happy-work-theme": "^1.0.0",
|
|
||||||
"@zhst/meta": "workspace:^",
|
|
||||||
"rc-rate": "~2.12.0",
|
|
||||||
"react-fast-marquee": "^1.6.4",
|
|
||||||
"react-infinite-scroll-component": "^6.1.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,13 @@
|
|||||||
import { defineConfig } from 'father-plugin-less';
|
import { defineConfig } from 'father';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// more father config: https://github.com/umijs/father/blob/master/docs/config.md
|
// more father config: https://github.com/umijs/father/blob/master/docs/config.md
|
||||||
esm: {
|
esm: {
|
||||||
output: 'es',
|
output: 'es',
|
||||||
ignores: ['**/demo/*', 'src/**/demo/*'],
|
ignores: ['**/demo/*', 'src/**/demo/*']
|
||||||
transformer: 'babel',
|
|
||||||
},
|
},
|
||||||
cjs: {
|
cjs: {
|
||||||
output: 'lib',
|
output: 'lib',
|
||||||
ignores: ['**/demo/*', 'src/**/demo/*'],
|
ignores: ['**/demo/*', 'src/**/demo/*']
|
||||||
transformer: 'babel',
|
|
||||||
},
|
},
|
||||||
lessInBabel: {
|
|
||||||
modifyVars: {
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: ['father-plugin-less'],
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,115 +1,5 @@
|
|||||||
# @zhst/biz
|
# @zhst/biz
|
||||||
|
|
||||||
## 0.34.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- feat(material,biz,meta): 修改算法配置物料,树组件业务传参,修复大图组件 od 变化不重新渲染
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/meta@0.30.0
|
|
||||||
|
|
||||||
## 0.33.2
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- 修改穿梭框不能修改宽度
|
|
||||||
|
|
||||||
## 0.33.1
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- 修改穿梭框不能修改宽度 bug
|
|
||||||
|
|
||||||
## 0.33.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- feat(biz): 修改穿梭框的样式和注释
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/meta@0.29.0
|
|
||||||
|
|
||||||
## 0.32.2
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/meta@0.28.0
|
|
||||||
|
|
||||||
## 0.32.1
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/icon@0.8.0
|
|
||||||
- @zhst/meta@0.27.1
|
|
||||||
|
|
||||||
## 0.32.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- zhst/biz 废弃 tree 组件
|
|
||||||
|
|
||||||
## 0.31.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- 修改 less to css 配置
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/func@0.17.0
|
|
||||||
- @zhst/hooks@0.15.0
|
|
||||||
- @zhst/icon@0.7.0
|
|
||||||
- @zhst/meta@0.27.0
|
|
||||||
|
|
||||||
## 0.30.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- 新增 zhst/biz 的大图组件 v2,修改其它包打包样式文件为 css
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/hooks@0.14.0
|
|
||||||
- @zhst/icon@0.6.0
|
|
||||||
- @zhst/meta@0.26.0
|
|
||||||
|
|
||||||
## 0.29.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- zhst/biz: 添加 treePanel 的一些例子,修复一些 ts 报错
|
|
||||||
|
|
||||||
## 0.28.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- zhst/biz: 新增树面板
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/meta@0.25.0
|
|
||||||
|
|
||||||
## 0.27.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- zhst/meta 全量迁移 antd-5.17.4
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/meta@0.24.0
|
|
||||||
|
|
||||||
## 0.26.0
|
## 0.26.0
|
||||||
|
|
||||||
### Minor Changes
|
### Minor Changes
|
||||||
|
|||||||
270
packages/biz/es/BigImageModal/BigImageModal.js
Normal file
270
packages/biz/es/BigImageModal/BigImageModal.js
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
||||||
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
||||||
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
||||||
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||||
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
||||||
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
||||||
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
||||||
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||||
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
||||||
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
||||||
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
||||||
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||||
|
// @ts-nocheck
|
||||||
|
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
||||||
|
import { ConfigProvider, Descriptions, Modal, Tabs, CropperImage, AttachImage, VideoPlayer, BtnGroup, RelatedImage } from '@zhst/meta';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { get, isEmpty, pick } from '@zhst/func';
|
||||||
|
import Navigation from "./components/navigation";
|
||||||
|
import CombineImage from "./components/CombineImage";
|
||||||
|
import "./index.less";
|
||||||
|
import { jsx as _jsx } from "react/jsx-runtime";
|
||||||
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
||||||
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||||
|
var DescriptionsItem = Descriptions.Item;
|
||||||
|
export var componentPrefix = 'zhst-image';
|
||||||
|
|
||||||
|
// 对比图模式、场景图模式、视频模式
|
||||||
|
|
||||||
|
var initialStyle = {
|
||||||
|
fontSize: '12px'
|
||||||
|
};
|
||||||
|
var BigImageModal = /*#__PURE__*/forwardRef(function (props, ref) {
|
||||||
|
var _props$title = props.title,
|
||||||
|
title = _props$title === void 0 ? '-' : _props$title,
|
||||||
|
width = props.width,
|
||||||
|
open = props.open,
|
||||||
|
children = props.children,
|
||||||
|
onCancel = props.onCancel,
|
||||||
|
activeTab = props.activeTab,
|
||||||
|
_props$attributeList = props.attributeList,
|
||||||
|
attributeList = _props$attributeList === void 0 ? [] : _props$attributeList,
|
||||||
|
_props$isRelated = props.isRelated,
|
||||||
|
isRelated = _props$isRelated === void 0 ? false : _props$isRelated,
|
||||||
|
_props$tabs = props.tabs,
|
||||||
|
tabs = _props$tabs === void 0 ? {} : _props$tabs,
|
||||||
|
_props$footer = props.footer,
|
||||||
|
footer = _props$footer === void 0 ? null : _props$footer,
|
||||||
|
_props$dataSource = props.dataSource,
|
||||||
|
dataSource = _props$dataSource === void 0 ? {} : _props$dataSource,
|
||||||
|
onTabChange = props.onTabChange,
|
||||||
|
compareImageProps = props.compareImageProps,
|
||||||
|
showNavigation = props.showNavigation,
|
||||||
|
modalProps = props.modalProps,
|
||||||
|
cropperImageProps = props.cropperImageProps,
|
||||||
|
prevButtonProps = props.prevButtonProps,
|
||||||
|
onPrevButtonClick = props.onPrevButtonClick,
|
||||||
|
onNextButtonClick = props.onNextButtonClick,
|
||||||
|
nextButtonProps = props.nextButtonProps,
|
||||||
|
tabsProps = props.tabsProps,
|
||||||
|
btnGroupProps = props.btnGroupProps,
|
||||||
|
descriptionsProps = props.descriptionsProps,
|
||||||
|
relatedImageProps = props.relatedImageProps,
|
||||||
|
theme = props.theme;
|
||||||
|
var combineImageRef = useRef(null);
|
||||||
|
var videoPlayerRef = useRef(null);
|
||||||
|
var modalRef = useRef(null);
|
||||||
|
|
||||||
|
// ========================== 头切换 =========================
|
||||||
|
var _useState = useState(activeTab || get(tabsProps, 'data[0].key')),
|
||||||
|
_useState2 = _slicedToArray(_useState, 2),
|
||||||
|
tab = _useState2[0],
|
||||||
|
setTab = _useState2[1];
|
||||||
|
var _useState3 = useState('related'),
|
||||||
|
_useState4 = _slicedToArray(_useState3, 2),
|
||||||
|
activeKey = _useState4[0],
|
||||||
|
setActiveKey = _useState4[1];
|
||||||
|
|
||||||
|
// ========================= 预览切换下标 =========================
|
||||||
|
var _useState5 = useState('auto'),
|
||||||
|
_useState6 = _slicedToArray(_useState5, 2),
|
||||||
|
cropType = _useState6[0],
|
||||||
|
setCropType = _useState6[1];
|
||||||
|
var cropBtnDataSource = [{
|
||||||
|
key: 'close',
|
||||||
|
icon: 'icon-danchuangguanbi',
|
||||||
|
title: '退出'
|
||||||
|
}, {
|
||||||
|
key: 'auto',
|
||||||
|
icon: 'icon-zidong',
|
||||||
|
title: '智能框选'
|
||||||
|
}, {
|
||||||
|
key: 'custom',
|
||||||
|
icon: 'icon-shoudong',
|
||||||
|
title: '手动框选'
|
||||||
|
}];
|
||||||
|
var handleCropBtnClick = function handleCropBtnClick(v) {
|
||||||
|
setCropType(v);
|
||||||
|
};
|
||||||
|
var defaultTabsProps = !isEmpty(tabs) ? tabs : {
|
||||||
|
items: [{
|
||||||
|
label: '对比图模式',
|
||||||
|
key: 'COMPATER',
|
||||||
|
children: /*#__PURE__*/_jsx(CombineImage, _objectSpread({
|
||||||
|
ref: combineImageRef,
|
||||||
|
data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score')
|
||||||
|
}, compareImageProps))
|
||||||
|
}, {
|
||||||
|
label: '场景图模式',
|
||||||
|
key: 'NORMAL',
|
||||||
|
children: /*#__PURE__*/_jsx("div", {
|
||||||
|
style: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
width: '100%'
|
||||||
|
},
|
||||||
|
children: /*#__PURE__*/_jsx("div", {
|
||||||
|
style: {
|
||||||
|
width: '85%',
|
||||||
|
height: '500px'
|
||||||
|
},
|
||||||
|
children: /*#__PURE__*/_jsxs(CropperImage, _objectSpread(_objectSpread({
|
||||||
|
type: "rect",
|
||||||
|
odList: get(dataSource, 'odRect', [])
|
||||||
|
}, cropperImageProps), {}, {
|
||||||
|
children: [!(cropperImageProps !== null && cropperImageProps !== void 0 && cropperImageProps.editAble) && /*#__PURE__*/_jsxs(_Fragment, {
|
||||||
|
children: [/*#__PURE__*/_jsx(AttachImage, {
|
||||||
|
data: [{
|
||||||
|
label: '测试',
|
||||||
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
|
||||||
|
}]
|
||||||
|
}), /*#__PURE__*/_jsx("div", {
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
right: '24px',
|
||||||
|
bottom: '24px',
|
||||||
|
fontSize: '18px',
|
||||||
|
color: 'red',
|
||||||
|
cursor: 'default'
|
||||||
|
},
|
||||||
|
children: "\u4EBA\u8138\u8D28\u91CF\u5206\uFF1A".concat(Number(cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.score).toFixed(2))
|
||||||
|
})]
|
||||||
|
}), (cropperImageProps === null || cropperImageProps === void 0 ? void 0 : cropperImageProps.showEditTools) && /*#__PURE__*/_jsx(BtnGroup, _objectSpread({
|
||||||
|
circle: true,
|
||||||
|
style: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 0
|
||||||
|
},
|
||||||
|
dataSource: cropBtnDataSource,
|
||||||
|
onClick: handleCropBtnClick,
|
||||||
|
selectKey: cropType
|
||||||
|
}, btnGroupProps))]
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露 ref 实例
|
||||||
|
useImperativeHandle(ref, function () {
|
||||||
|
return {
|
||||||
|
ref: ref,
|
||||||
|
tab: tab,
|
||||||
|
setTab: setTab,
|
||||||
|
modalRef: modalRef,
|
||||||
|
activeKey: activeKey,
|
||||||
|
setActiveKey: setActiveKey,
|
||||||
|
videoPlayerRef: videoPlayerRef,
|
||||||
|
combineImageRef: combineImageRef
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
|
||||||
|
destroyOnClose: true,
|
||||||
|
width: width,
|
||||||
|
open: open,
|
||||||
|
ref: modalRef,
|
||||||
|
footer: footer,
|
||||||
|
className: componentPrefix,
|
||||||
|
title: title,
|
||||||
|
onCancel: onCancel
|
||||||
|
}, modalProps), {}, {
|
||||||
|
children: [/*#__PURE__*/_jsxs("div", {
|
||||||
|
style: {
|
||||||
|
marginTop: '16px'
|
||||||
|
},
|
||||||
|
children: [/*#__PURE__*/_jsx(ConfigProvider, {
|
||||||
|
theme: _objectSpread({
|
||||||
|
token: {
|
||||||
|
colorTextSecondary: 'rgba(0,0,0,0.45)'
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Descriptions: {
|
||||||
|
titleMarginBottom: '20px',
|
||||||
|
viewBg: '#f6f6f6',
|
||||||
|
titleColor: 'rgba(0,0,0,0.45)',
|
||||||
|
colorTextLabel: 'rgba(0,0,0,0.45)',
|
||||||
|
contentColor: 'rgba(0,0,0,0.88)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, theme),
|
||||||
|
children: attributeList.map(function (descriptions) {
|
||||||
|
var _descriptions$childre;
|
||||||
|
return /*#__PURE__*/_jsx(Descriptions, _objectSpread(_objectSpread({
|
||||||
|
title: /*#__PURE__*/_jsx("p", {
|
||||||
|
style: {
|
||||||
|
margin: '12px 0 0',
|
||||||
|
fontSize: initialStyle.fontSize
|
||||||
|
},
|
||||||
|
children: descriptions.title
|
||||||
|
}),
|
||||||
|
column: 8,
|
||||||
|
style: {
|
||||||
|
padding: '0 64px'
|
||||||
|
}
|
||||||
|
}, descriptionsProps), {}, {
|
||||||
|
children: descriptions === null || descriptions === void 0 || (_descriptions$childre = descriptions.children) === null || _descriptions$childre === void 0 ? void 0 : _descriptions$childre.map(function (item) {
|
||||||
|
return /*#__PURE__*/_jsx(DescriptionsItem, {
|
||||||
|
label: item.label,
|
||||||
|
span: 1,
|
||||||
|
contentStyle: {
|
||||||
|
fontSize: initialStyle.fontSize
|
||||||
|
},
|
||||||
|
labelStyle: {
|
||||||
|
fontSize: initialStyle.fontSize
|
||||||
|
},
|
||||||
|
children: item.children
|
||||||
|
}, item.key);
|
||||||
|
})
|
||||||
|
}), descriptions.title);
|
||||||
|
})
|
||||||
|
}), /*#__PURE__*/_jsxs("div", {
|
||||||
|
className: classNames("".concat(componentPrefix, "-view-container")),
|
||||||
|
children: [/*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
|
||||||
|
activeKey: tab,
|
||||||
|
centered: true,
|
||||||
|
destroyInactiveTabPane: true,
|
||||||
|
onChange: function onChange(v) {
|
||||||
|
setTab(function (pre) {
|
||||||
|
onTabChange === null || onTabChange === void 0 || onTabChange(v, pre);
|
||||||
|
return v;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
tabBarStyle: {
|
||||||
|
fontSize: '18px',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
}, defaultTabsProps), tabsProps)), tab === 'VIDEO' && /*#__PURE__*/_jsx(VideoPlayer, {
|
||||||
|
ref: videoPlayerRef,
|
||||||
|
url: dataSource === null || dataSource === void 0 ? void 0 : dataSource.flvUrl
|
||||||
|
}), /*#__PURE__*/_jsx(Navigation, _objectSpread({
|
||||||
|
className: classNames("".concat(componentPrefix, "-view-container__nav"), (prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--left")),
|
||||||
|
prev: true,
|
||||||
|
show: showNavigation,
|
||||||
|
onClick: onPrevButtonClick
|
||||||
|
}, prevButtonProps)), /*#__PURE__*/_jsx(Navigation, _objectSpread({
|
||||||
|
className: classNames("".concat(componentPrefix, "-view-container__nav"), (nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.disabled) && "".concat(componentPrefix, "-view-container__nav--disabled"), "".concat(componentPrefix, "-view-container__nav--right")),
|
||||||
|
next: true,
|
||||||
|
show: showNavigation,
|
||||||
|
onClick: onNextButtonClick
|
||||||
|
}, nextButtonProps)), isRelated && /*#__PURE__*/_jsx("div", {
|
||||||
|
style: {
|
||||||
|
margin: '24px 0'
|
||||||
|
},
|
||||||
|
children: /*#__PURE__*/_jsx(RelatedImage, _objectSpread({}, relatedImageProps))
|
||||||
|
})]
|
||||||
|
})]
|
||||||
|
}), children]
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
export default BigImageModal;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@zhst/biz",
|
"name": "@zhst/biz",
|
||||||
"version": "0.34.0",
|
"version": "0.26.0",
|
||||||
"description": "业务库",
|
"description": "业务库",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"business",
|
"business",
|
||||||
@ -35,7 +35,6 @@
|
|||||||
"registry": "http://10.0.0.77:4874"
|
"registry": "http://10.0.0.77:4874"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@swc/core": "^1.3.9",
|
|
||||||
"@zhst/types": "workspace:^"
|
"@zhst/types": "workspace:^"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@ -1,304 +0,0 @@
|
|||||||
import React, { forwardRef, useImperativeHandle, useRef } from 'react'
|
|
||||||
import {
|
|
||||||
ConfigProvider,
|
|
||||||
Descriptions,
|
|
||||||
CropperImage,
|
|
||||||
AttachImage,
|
|
||||||
VideoPlayer,
|
|
||||||
RelatedImage,
|
|
||||||
Radio,
|
|
||||||
Tooltip,
|
|
||||||
Button,
|
|
||||||
Tabs
|
|
||||||
} from '@zhst/meta';
|
|
||||||
import classNames from 'classnames'
|
|
||||||
import { IconFont } from '@zhst/icon'
|
|
||||||
import { BigImageProps, BigImageRef } from './interface'
|
|
||||||
import CombineImage from './components/CombineImage'
|
|
||||||
import './index.less'
|
|
||||||
|
|
||||||
const DescriptionsItem = Descriptions.Item
|
|
||||||
|
|
||||||
export const componentPrefix = 'zhst-big-image'
|
|
||||||
|
|
||||||
const initialStyle ={
|
|
||||||
fontSize: '12px'
|
|
||||||
}
|
|
||||||
|
|
||||||
const BigImage = forwardRef<BigImageRef, BigImageProps>((props, ref) => {
|
|
||||||
const {
|
|
||||||
// ------------ 通用配置 -------------------
|
|
||||||
type,
|
|
||||||
viewHeight,
|
|
||||||
width = '100%',
|
|
||||||
children,
|
|
||||||
// ------------ 顶部按钮 -----------------
|
|
||||||
topButtonRender,
|
|
||||||
// ------------ 描述 -----------------
|
|
||||||
descriptionList = [],
|
|
||||||
showDescription,
|
|
||||||
// ------------- tab 导航 ----------------
|
|
||||||
customTabBarExtraContent,
|
|
||||||
tabProps,
|
|
||||||
onTabChange,
|
|
||||||
// ------------- 场景图 -------------
|
|
||||||
cropperImageProps = {
|
|
||||||
cropButtonList: []
|
|
||||||
},
|
|
||||||
// ----------------- 对比图 ---------------------
|
|
||||||
combineImageProps,
|
|
||||||
// ------------ 视频模式 -----------------
|
|
||||||
videoProps,
|
|
||||||
// ------------ view 操作按钮 -----------------
|
|
||||||
showModeChange,
|
|
||||||
modeButtonGroupProps,
|
|
||||||
viewTopModeButtonList = [
|
|
||||||
{
|
|
||||||
key: 'image',
|
|
||||||
label: '图片'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'video',
|
|
||||||
label: '视频'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
// ------------------ 翻页 ----------------------
|
|
||||||
showNavigation,
|
|
||||||
prevButtonProps,
|
|
||||||
onPrevButtonClick,
|
|
||||||
onNextButtonClick,
|
|
||||||
nextButtonProps,
|
|
||||||
// ------------------ 人脸碰撞模型 -----------------
|
|
||||||
relatedImageProps,
|
|
||||||
isRelated = false,
|
|
||||||
theme,
|
|
||||||
} = props
|
|
||||||
const combineImageRef = useRef<any>(null)
|
|
||||||
const videoPlayerRef = useRef<any>(null)
|
|
||||||
const cropperImageRef = useRef<any>(null)
|
|
||||||
|
|
||||||
cropperImageProps.cropButtonList = cropperImageProps?.cropButtonList || [
|
|
||||||
{
|
|
||||||
key: 'auto',
|
|
||||||
icon: <IconFont icon='icon-zidong' />,
|
|
||||||
label: '智能框选',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'custom',
|
|
||||||
icon: <IconFont icon='icon-shoudong' />,
|
|
||||||
label: '手动框选',
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// ------------------- 初始化模式 ----------------------
|
|
||||||
const initMode = (type: BigImageProps['type'] = 'normal') => {
|
|
||||||
switch (type) {
|
|
||||||
case 'compater':
|
|
||||||
return (
|
|
||||||
<CombineImage
|
|
||||||
// @ts-ignore
|
|
||||||
ref={combineImageRef}
|
|
||||||
height={viewHeight}
|
|
||||||
{...combineImageProps}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
case 'normal':
|
|
||||||
return (
|
|
||||||
<div style={{ height: viewHeight, width: '100%' }}>
|
|
||||||
<CropperImage
|
|
||||||
ref={cropperImageRef}
|
|
||||||
type='rect'
|
|
||||||
// @ts-ignore
|
|
||||||
height={viewHeight}
|
|
||||||
{...cropperImageProps}
|
|
||||||
>
|
|
||||||
{/* // ------------ 显示条件：当不为编辑状态，并且有图片值 ----------------- */}
|
|
||||||
{!cropperImageProps?.editAble && cropperImageProps?.attachImageData && (
|
|
||||||
<>
|
|
||||||
<AttachImage
|
|
||||||
data={cropperImageProps?.attachImageData}
|
|
||||||
{...cropperImageProps?.attachImageProps}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
right: '4px',
|
|
||||||
bottom: '4px',
|
|
||||||
fontSize: '18px',
|
|
||||||
color: 'red',
|
|
||||||
cursor: 'default'
|
|
||||||
}}
|
|
||||||
>{`人脸质量分：${(Number(cropperImageProps?.score) as number).toFixed(2)}`}</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{/* // ------------ 场景图绘制工具栏 ----------------- */}
|
|
||||||
{cropperImageProps?.showEditTools && (
|
|
||||||
<div className={`${componentPrefix}-view-cropper-btn`}>
|
|
||||||
<Radio.Group
|
|
||||||
className={`${componentPrefix}-view-cropper-btn-group`}
|
|
||||||
size="small"
|
|
||||||
buttonStyle='solid'
|
|
||||||
// @ts-ignore
|
|
||||||
onChange={cropperImageProps?.onCropperTypeChange}
|
|
||||||
{...cropperImageProps.btnGroupProps}
|
|
||||||
>
|
|
||||||
{cropperImageProps?.cropButtonList?.map(btn => (
|
|
||||||
<Tooltip key={btn.key} title={btn.label}>
|
|
||||||
{/* @ts-ignore */}
|
|
||||||
<Radio.Button value={btn.key}{...btn.props}><div className={`${componentPrefix}-view-cropper-btn-group-radio`}>{btn.icon} {btn.label}</div></Radio.Button>
|
|
||||||
</Tooltip>
|
|
||||||
))}
|
|
||||||
</Radio.Group>
|
|
||||||
<Button onClick={cropperImageProps?.onExitEdit} className={`${componentPrefix}-view-cropper-btn_close`} type="primary" size="small" icon={<IconFont icon="icon-danchuangguanbi" />} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CropperImage>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
case 'video':
|
|
||||||
return (
|
|
||||||
// @ts-ignore
|
|
||||||
<VideoPlayer ref={videoPlayerRef} height={viewHeight} {...videoProps} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暴露 ref 实例
|
|
||||||
useImperativeHandle(ref, () => ({
|
|
||||||
// @ts-ignore
|
|
||||||
cropperImageRef: cropperImageRef?.current,
|
|
||||||
videoPlayerRef: videoPlayerRef?.current,
|
|
||||||
combineImageRef: combineImageRef?.current,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={classNames(`${componentPrefix}-view`)}
|
|
||||||
style={{ width: `${parseInt(width as string)}px` }}
|
|
||||||
>
|
|
||||||
<div className={classNames(`${componentPrefix}-view-btns`)}>
|
|
||||||
{topButtonRender}
|
|
||||||
</div>
|
|
||||||
{showDescription && (
|
|
||||||
<div
|
|
||||||
className={classNames(`${componentPrefix}-view-desc`)}
|
|
||||||
>
|
|
||||||
<ConfigProvider
|
|
||||||
theme={{
|
|
||||||
components: {
|
|
||||||
Descriptions: {
|
|
||||||
viewBg: '#f6f6f6',
|
|
||||||
colorBgLayout:'#ccc',
|
|
||||||
titleColor: 'rgba(0,0,0,0.45)',
|
|
||||||
colorTextLabel: 'rgba(0,0,0,0.45)',
|
|
||||||
contentColor: 'rgba(0,0,0,0.88)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
...theme
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{descriptionList.map(descriptions => (
|
|
||||||
<Descriptions
|
|
||||||
key={descriptions.title}
|
|
||||||
title={descriptions.showTitle && descriptions.title}
|
|
||||||
column={8}
|
|
||||||
{...descriptions.props}
|
|
||||||
>
|
|
||||||
{descriptions?.children?.map(item => (
|
|
||||||
<DescriptionsItem
|
|
||||||
key={item.key}
|
|
||||||
label={item.label}
|
|
||||||
span={1}
|
|
||||||
contentStyle={{ fontSize: initialStyle.fontSize }}
|
|
||||||
labelStyle={{ fontSize: initialStyle.fontSize }}
|
|
||||||
>{item.children}</DescriptionsItem>
|
|
||||||
))}
|
|
||||||
</Descriptions>
|
|
||||||
))}
|
|
||||||
</ConfigProvider>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Tabs
|
|
||||||
tabBarExtraContent={customTabBarExtraContent}
|
|
||||||
onChange={onTabChange}
|
|
||||||
items={[
|
|
||||||
{
|
|
||||||
label: `场景图`,
|
|
||||||
key: '1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: `对比图`,
|
|
||||||
key: '2',
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
{...tabProps}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
className={classNames(`${componentPrefix}-view-container`)}
|
|
||||||
>
|
|
||||||
{/* ---------------- view 视图左上角导航按钮 ------------------ */}
|
|
||||||
{showModeChange && (
|
|
||||||
<div
|
|
||||||
className={classNames(`${componentPrefix}-view-container-modeNav`)}
|
|
||||||
>
|
|
||||||
<Radio.Group
|
|
||||||
buttonStyle='solid'
|
|
||||||
size='small'
|
|
||||||
{...modeButtonGroupProps}
|
|
||||||
>
|
|
||||||
{viewTopModeButtonList?.map(btn => (
|
|
||||||
<Tooltip key={btn.key} title={btn.tooltipTxt}>
|
|
||||||
{/* @ts-ignore */}
|
|
||||||
<Radio.Button value={btn.key} {...btn.props}>{btn.icon} {btn.label}</Radio.Button>
|
|
||||||
</Tooltip>
|
|
||||||
))}
|
|
||||||
</Radio.Group>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* --------------------------------- 视频播放模式 --------------------------------- */}
|
|
||||||
{initMode(type)}
|
|
||||||
{/* 切换按钮组件 */}
|
|
||||||
{/* ----------------------------------- 上一张按钮 ---------------------------------- */}
|
|
||||||
{showNavigation && (
|
|
||||||
<Button
|
|
||||||
className={classNames(
|
|
||||||
`${componentPrefix}-view-container-nav`,
|
|
||||||
`${componentPrefix}-view-container-nav_left`
|
|
||||||
)}
|
|
||||||
icon={<IconFont icon="icon-qiehuanzuo" />}
|
|
||||||
type="primary"
|
|
||||||
// style={{ backgroundColor: 'rgba(255,255,255,0.8)' }}
|
|
||||||
shape='circle'
|
|
||||||
onClick={onPrevButtonClick}
|
|
||||||
{...prevButtonProps}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{/* ----------------------------------- 下一张按钮 ---------------------------------- */}
|
|
||||||
{showNavigation && (
|
|
||||||
<Button
|
|
||||||
className={classNames(
|
|
||||||
`${componentPrefix}-view-container-nav`,
|
|
||||||
`${componentPrefix}-view-container-nav_right`
|
|
||||||
)}
|
|
||||||
icon={<IconFont icon="icon-qiehuanyou" />}
|
|
||||||
type="primary"
|
|
||||||
// style={{ backgroundColor: 'rgba(255,255,255,0.8)' }}
|
|
||||||
shape='circle'
|
|
||||||
onClick={onNextButtonClick}
|
|
||||||
{...nextButtonProps}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* ----------------------------------- 人脸碰撞组件 ---------------------------------- */}
|
|
||||||
{isRelated && (
|
|
||||||
// @ts-ignore
|
|
||||||
<RelatedImage
|
|
||||||
{...relatedImageProps}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
export default BigImage
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
.zhst-big-image-combime-image {
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
}
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
|
|
||||||
import React, { FC, useRef, forwardRef, useImperativeHandle } from 'react';
|
|
||||||
import { CompareImage, Flex, Progress, ProgressProps, CompareImageProps } from '@zhst/meta'
|
|
||||||
import './index.less'
|
|
||||||
|
|
||||||
export interface ComBineImageProps {
|
|
||||||
height?: string | number
|
|
||||||
data: {
|
|
||||||
imgSummary: string;
|
|
||||||
compaterImage: string;
|
|
||||||
imageKey: string;
|
|
||||||
score: number;
|
|
||||||
}
|
|
||||||
prevDisable?: boolean;
|
|
||||||
nextDisable?: boolean;
|
|
||||||
onPre?: () => void;
|
|
||||||
onNext?: () => void;
|
|
||||||
openRoll?: boolean
|
|
||||||
targetImageProps?: CompareImageProps
|
|
||||||
sourceImageProps?: CompareImageProps
|
|
||||||
}
|
|
||||||
|
|
||||||
const conicColors: ProgressProps['strokeColor'] = {
|
|
||||||
'0%': '#42E2AC',
|
|
||||||
'50%': '#DFAF2E',
|
|
||||||
'100%': '#F95C55',
|
|
||||||
};
|
|
||||||
|
|
||||||
const componentName = 'zhst-big-image-combime-image'
|
|
||||||
|
|
||||||
const ComBineImage: FC<ComBineImageProps> = forwardRef((props, ref) => {
|
|
||||||
const {
|
|
||||||
height,
|
|
||||||
data,
|
|
||||||
prevDisable,
|
|
||||||
nextDisable,
|
|
||||||
onNext,
|
|
||||||
onPre,
|
|
||||||
openRoll
|
|
||||||
} = props
|
|
||||||
const { imgSummary, compaterImage, score } = data
|
|
||||||
const targetImageRef = useRef(null)
|
|
||||||
const compareImageRef = useRef(null)
|
|
||||||
|
|
||||||
useImperativeHandle(ref, () => ({
|
|
||||||
compareImageRef,
|
|
||||||
targetImageRef
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex className={componentName} justify='space-between' align='center' >
|
|
||||||
<CompareImage
|
|
||||||
ref={targetImageRef}
|
|
||||||
height={height as string}
|
|
||||||
width="400px"
|
|
||||||
preDisable={prevDisable}
|
|
||||||
nextDisable={nextDisable}
|
|
||||||
onNext={onNext}
|
|
||||||
onPre={onPre}
|
|
||||||
showScore={false}
|
|
||||||
openRoll={openRoll}
|
|
||||||
url={imgSummary}
|
|
||||||
label="目标图"
|
|
||||||
{...props.targetImageProps}
|
|
||||||
/>
|
|
||||||
<Progress type="circle" size={72} strokeWidth={6} percent={Number(score || 0)} strokeColor={conicColors} />
|
|
||||||
<CompareImage
|
|
||||||
ref={compareImageRef}
|
|
||||||
width="400px"
|
|
||||||
height={height as string}
|
|
||||||
url={compaterImage}
|
|
||||||
openRoll={false}
|
|
||||||
score={score}
|
|
||||||
label="预警图"
|
|
||||||
labelColor='#FA5852'
|
|
||||||
{...props.sourceImageProps}
|
|
||||||
/>
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
export default ComBineImage
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
.zhst-image__nav {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
width: 48px;
|
|
||||||
height: 100%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0;
|
|
||||||
|
|
||||||
&>button {
|
|
||||||
& span {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global {
|
|
||||||
i:hover {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--disable {
|
|
||||||
:global {
|
|
||||||
i {
|
|
||||||
color: #f0f0f0;
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-prev {
|
|
||||||
left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-next {
|
|
||||||
right: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
// !! 已废弃
|
|
||||||
import * as React from 'react';
|
|
||||||
import classnames from 'classnames';
|
|
||||||
import { Button } from '@zhst/meta';
|
|
||||||
import { IconFont } from '@zhst/icon'
|
|
||||||
import './index.less';
|
|
||||||
|
|
||||||
const componentName = `zhst-image__nav`;
|
|
||||||
|
|
||||||
const Navigation: React.FC<{
|
|
||||||
show?: boolean;
|
|
||||||
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
||||||
prev?: boolean;
|
|
||||||
next?: boolean;
|
|
||||||
disabled?: boolean;
|
|
||||||
className?: string;
|
|
||||||
color?: string;
|
|
||||||
hoverColor?: string;
|
|
||||||
}> = (props) => {
|
|
||||||
const { show, prev, next, disabled, onClick, className, color } = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={classnames(
|
|
||||||
`${componentName}`,
|
|
||||||
prev && `${componentName}-prev`,
|
|
||||||
next && `${componentName}-next`,
|
|
||||||
disabled && `${componentName}--disable`,
|
|
||||||
!show && `${componentName}--hide`,
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Button type="text" disabled={disabled} shape='circle' onClick={onClick}>
|
|
||||||
<IconFont size={28} color={color} icon={prev ? 'icon-qiehuanzuo' : 'icon-qiehuanyou'} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Navigation;
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB |
@ -1,71 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import { BigImage } from '@zhst/biz'
|
|
||||||
import { Space, Switch } from '@zhst/meta'
|
|
||||||
import { pick, get } from '@zhst/func'
|
|
||||||
import { BIG_IMAGE_DATA, attributeList } from '../mock'
|
|
||||||
import Img from './imgs/photo-1503185912284-5271ff81b9a8.webp'
|
|
||||||
|
|
||||||
const BigModal = (props: any) => {
|
|
||||||
const {
|
|
||||||
} = props
|
|
||||||
const [dataSource, setDataSource] = useState(BIG_IMAGE_DATA)
|
|
||||||
const [showDesc, setShowDesc] = useState(true)
|
|
||||||
const [type, setType] = useState('normal')
|
|
||||||
const modalRef = useRef(null)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '32px', border: '1px solid #09f' }}>
|
|
||||||
<Space>
|
|
||||||
<span>显示属性：<Switch value={showDesc} onChange={e => setShowDesc(pre => !pre)} /></span>
|
|
||||||
</Space>
|
|
||||||
<BigImage
|
|
||||||
type={type}
|
|
||||||
ref={modalRef}
|
|
||||||
width={896}
|
|
||||||
viewHeight={'440px'}
|
|
||||||
showModeChange
|
|
||||||
onTabChange={(newVal) => setType(newVal === '1'? 'normal': 'compater')}
|
|
||||||
// ------------ 属性列表 -----------------
|
|
||||||
showDescription={showDesc}
|
|
||||||
descriptionList={attributeList}
|
|
||||||
// ------------ 图片/视频切换 -----------------
|
|
||||||
viewTopModeButtonList={[
|
|
||||||
{
|
|
||||||
key: 'image',
|
|
||||||
label: '图片'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'video',
|
|
||||||
label: '视频'
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
modeButtonGroupProps={{
|
|
||||||
defaultValue: 'image',
|
|
||||||
onChange: e => console.log('模式切换', e)
|
|
||||||
}}
|
|
||||||
// ------------ 导航功能 -----------------
|
|
||||||
showNavigation
|
|
||||||
onPrevButtonClick={val => console.log('pre', val)}
|
|
||||||
onNextButtonClick={val => console.log('next', val)}
|
|
||||||
// ------------ 场景图功能 -----------------
|
|
||||||
cropperImageProps={{
|
|
||||||
url: Img,
|
|
||||||
score: 50,
|
|
||||||
odList: get(dataSource, 'odRect', []),
|
|
||||||
attachImageData: get(dataSource, 'attachImg', []),
|
|
||||||
}}
|
|
||||||
// ------------ 对比图模式 -----------------
|
|
||||||
combineImageProps={{
|
|
||||||
data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score'),
|
|
||||||
}}
|
|
||||||
// ------------ 视频模块 -----------------
|
|
||||||
videoProps={{
|
|
||||||
url: get(dataSource, 'flvUrl', '')
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
</BigImage>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BigModal
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
// @ts-nocheck
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { BigImageModal } from '@zhst/biz'
|
|
||||||
import { Button, DescriptionsProps } from '@zhst/meta'
|
|
||||||
import { IMAGE_DATA, BIG_IMAGE_DATA } from '../mock'
|
|
||||||
import bigImageModalAdapter from '../util/bigImageModalAdapter'
|
|
||||||
import { get } from '@zhst/func';
|
|
||||||
|
|
||||||
const descriptionList: DescriptionsProps['items'] = [
|
|
||||||
{
|
|
||||||
title: '人员属性',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
label: '性别',
|
|
||||||
children: '男',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
label: '年龄',
|
|
||||||
children: '成年',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
label: '帽子',
|
|
||||||
children: '无',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '4',
|
|
||||||
label: '上身颜色',
|
|
||||||
children: '灰',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '5',
|
|
||||||
label: '下身颜色',
|
|
||||||
children: '蓝色',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '6',
|
|
||||||
label: '附着物',
|
|
||||||
children: '无',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '7',
|
|
||||||
label: '骑行',
|
|
||||||
children: '否',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 适配器，适配老接口
|
|
||||||
const NewImageModal = bigImageModalAdapter(BigImageModal, {
|
|
||||||
oldMode: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const BigModal = (props) => {
|
|
||||||
const {
|
|
||||||
onClose,
|
|
||||||
isArchiveDetail = false,
|
|
||||||
specialTitle = '对比图2',
|
|
||||||
transformPropFunc,
|
|
||||||
screenshotButtonRender,
|
|
||||||
showLowFaceTip = false
|
|
||||||
} = props
|
|
||||||
const [visible, setVisible] = useState(false)
|
|
||||||
const [selectIndex, setSelectIndex] = useState(0)
|
|
||||||
const [dataSource, setDataSource] = useState(IMAGE_DATA.dataSource)
|
|
||||||
const [dataSources, setDataSources] = useState(IMAGE_DATA.dataSource)
|
|
||||||
const [selectItem, setSelectItem] = useState({})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Button onClick={() => setVisible(true)} >查看大图</Button>
|
|
||||||
<NewImageModal
|
|
||||||
title="查看大图"
|
|
||||||
dataSource={dataSource}
|
|
||||||
imageData={dataSource}
|
|
||||||
width={1098}
|
|
||||||
onClose={() => onClose}
|
|
||||||
descriptionConfig={{ data: descriptionList }}
|
|
||||||
visible={visible}
|
|
||||||
isArchiveDetail={isArchiveDetail}
|
|
||||||
ToolProps={{
|
|
||||||
// renderLeft: leftOperateBar({ disableBtn, onActionClick: onBigImageActionClick }),
|
|
||||||
// renderRight: rightOperateBar({
|
|
||||||
// disableBtn,
|
|
||||||
// onActionClick: onBigImageActionClick,
|
|
||||||
// isArchiveDetail,
|
|
||||||
// }),
|
|
||||||
// renderVideoBtn: !disableBtn.includes(OPT['PLAY_VIDEO']),
|
|
||||||
// disableVideo: disableVideo,
|
|
||||||
}}
|
|
||||||
selectIndex={selectIndex}
|
|
||||||
onSelectIndexChange={(index: number) => {
|
|
||||||
index > 0 && index < dataSources.length && setSelectIndex(index);
|
|
||||||
}}
|
|
||||||
// tabsFilter={tabsFilter}
|
|
||||||
specialTitle={specialTitle}
|
|
||||||
transformPropFunc={async (item: any) => {
|
|
||||||
let bigImageInfo = !!transformPropFunc && (await transformPropFunc(item));
|
|
||||||
setSelectItem({ ...bigImageInfo });
|
|
||||||
return { ...bigImageInfo };
|
|
||||||
}}
|
|
||||||
screenshotButtonRender={screenshotButtonRender}
|
|
||||||
//@ts-ignore
|
|
||||||
transformVideoPropFunc={async (item) => {
|
|
||||||
const { maxDuration: duration = 20 } = item || {};
|
|
||||||
const time = get(item, 'timestamp');
|
|
||||||
const cameraId = get(item, 'cameraId');
|
|
||||||
const { url: flvUrl } = {
|
|
||||||
url: 'url',
|
|
||||||
downloadUrl: 'url',
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
flvUrl,
|
|
||||||
maxDuration: duration,
|
|
||||||
};
|
|
||||||
}}
|
|
||||||
nullDialogProp={{
|
|
||||||
emptyText: showLowFaceTip ? '目标图人脸质量较低，暂无聚类数据' : '暂无数据',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BigModal
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import { BigImage } from '@zhst/biz'
|
|
||||||
import { Space, Switch, Button } from '@zhst/meta'
|
|
||||||
import { pick, get } from '@zhst/func'
|
|
||||||
import { BIG_IMAGE_DATA, attributeList } from '../mock'
|
|
||||||
import Img from './imgs/photo-1503185912284-5271ff81b9a8.webp'
|
|
||||||
|
|
||||||
const testOd = [
|
|
||||||
{
|
|
||||||
"id": "456",
|
|
||||||
"x": 0.58543766,
|
|
||||||
"y": 0.3203356,
|
|
||||||
"w": 0.052037954,
|
|
||||||
"h": 0.2664015
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const BigModal = (props: any) => {
|
|
||||||
const {
|
|
||||||
} = props
|
|
||||||
const [dataSource, setDataSource] = useState(BIG_IMAGE_DATA)
|
|
||||||
const [showDesc, setShowDesc] = useState(true)
|
|
||||||
const [editAble, setEditAble] = useState(false)
|
|
||||||
const [odList, setOdList] = useState(get(dataSource, 'odRect', []))
|
|
||||||
const [type, setType] = useState('normal')
|
|
||||||
const bigImageRef = useRef(null)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '32px', border: '1px solid #09f' }}>
|
|
||||||
<Space>
|
|
||||||
<span>显示属性：<Switch value={showDesc} onChange={e => setShowDesc(pre => !pre)} /></span>
|
|
||||||
<span>打开编辑模式：<Switch value={editAble} onChange={e => setEditAble(pre => !pre)} /></span>
|
|
||||||
<Button onClick={() => setOdList(testOd)}>修改Od</Button>
|
|
||||||
</Space>
|
|
||||||
<BigImage
|
|
||||||
type={type}
|
|
||||||
ref={bigImageRef}
|
|
||||||
width={896}
|
|
||||||
viewHeight={'440px'}
|
|
||||||
showModeChange
|
|
||||||
onTabChange={(newVal) => setType(newVal === '1'? 'normal': 'compater')}
|
|
||||||
// ------------ 属性列表 -----------------
|
|
||||||
showDescription={showDesc}
|
|
||||||
descriptionList={attributeList}
|
|
||||||
// ------------ 图片/视频切换 -----------------
|
|
||||||
viewTopModeButtonList={[
|
|
||||||
{
|
|
||||||
key: 'image',
|
|
||||||
label: '图片'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'video',
|
|
||||||
label: '视频'
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
modeButtonGroupProps={{
|
|
||||||
defaultValue: 'image',
|
|
||||||
onChange: e => console.log('模式切换', e)
|
|
||||||
}}
|
|
||||||
// ------------ 导航功能 -----------------
|
|
||||||
showNavigation
|
|
||||||
onPrevButtonClick={val => console.log('pre', val)}
|
|
||||||
onNextButtonClick={val => console.log('next', val)}
|
|
||||||
// ------------ 场景图功能 -----------------
|
|
||||||
cropperImageProps={{
|
|
||||||
editAble,
|
|
||||||
url: Img,
|
|
||||||
score: 50,
|
|
||||||
odList: odList,
|
|
||||||
showEditTools: editAble,
|
|
||||||
attachImageData: get(dataSource, 'attachImg', []),
|
|
||||||
onCropperTypeChange: v => console.log('框选模式', v),
|
|
||||||
onExitEdit: () => setEditAble(pre => !pre)
|
|
||||||
}}
|
|
||||||
// ------------ 对比图模式 -----------------
|
|
||||||
combineImageProps={{
|
|
||||||
data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score'),
|
|
||||||
}}
|
|
||||||
// ------------ 视频模块 -----------------
|
|
||||||
videoProps={{
|
|
||||||
url: get(dataSource, 'flvUrl', '')
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
</BigImage>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BigModal
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react';
|
|
||||||
import { BigImage } from '@zhst/biz'
|
|
||||||
import { Button, Space, Switch } from '@zhst/meta'
|
|
||||||
import { pick, get } from '@zhst/func'
|
|
||||||
import { BIG_IMAGE_DATA, attributeList, RELATED_IMAGES } from '../mock'
|
|
||||||
|
|
||||||
const BigModal = (props: any) => {
|
|
||||||
const {
|
|
||||||
} = props
|
|
||||||
const [visible, setVisible] = useState(true)
|
|
||||||
const [dataSource, setDataSource] = useState(BIG_IMAGE_DATA)
|
|
||||||
const [selectedItemKey, setSelectedItemKey] = useState()
|
|
||||||
const [showFaceModel, setShowFaceModel] = useState(true)
|
|
||||||
const [type, setType] = useState('normal')
|
|
||||||
const modalRef = useRef(null)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '32px', border: '1px solid #09f' }}>
|
|
||||||
<Space>
|
|
||||||
<span>显示人脸碰撞模型：<Switch value={showFaceModel} onChange={e => setShowFaceModel(pre => !pre)} /></span>
|
|
||||||
</Space>
|
|
||||||
<BigImage
|
|
||||||
type={type}
|
|
||||||
open={visible}
|
|
||||||
ref={modalRef}
|
|
||||||
viewHeight={'440px'}
|
|
||||||
width={896}
|
|
||||||
onCancel={() => setVisible(false)}
|
|
||||||
showModeChange
|
|
||||||
onTabChange={(newVal, oldVal) => setType(newVal === '1'? 'normal': 'compater')}
|
|
||||||
// ------------ 图片/视频切换 -----------------
|
|
||||||
viewTopModeButtonList={[
|
|
||||||
{
|
|
||||||
key: 'image',
|
|
||||||
label: '图片'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'video',
|
|
||||||
label: '视频'
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
modeButtonGroupProps={{
|
|
||||||
defaultValue: 'image',
|
|
||||||
onChange: e => console.log('模式切换', e)
|
|
||||||
}}
|
|
||||||
// ------------ 场景图功能 -----------------
|
|
||||||
cropperImageProps={{
|
|
||||||
url: "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp",
|
|
||||||
score: 50,
|
|
||||||
odList: get(dataSource, 'odRect', []),
|
|
||||||
attachImageData: get(dataSource, 'attachImg', []),
|
|
||||||
}}
|
|
||||||
// ------------ 对比图模式 -----------------
|
|
||||||
combineImageProps={{
|
|
||||||
data: pick(dataSource, 'compaterImage', 'imgSummary', 'imageKey', 'score'),
|
|
||||||
}}
|
|
||||||
// ------------ 视频模块 -----------------
|
|
||||||
videoProps={{
|
|
||||||
url: get(dataSource, 'flvUrl', '')
|
|
||||||
}}
|
|
||||||
// ------------ 人脸碰撞模型 -----------------
|
|
||||||
isRelated={showFaceModel}
|
|
||||||
relatedImageProps={{
|
|
||||||
activeTab: 'related',
|
|
||||||
selectedItemKey,
|
|
||||||
data: RELATED_IMAGES,
|
|
||||||
onCancel: () => console.log('取消关联'),
|
|
||||||
onConnect: () => console.log('关联'),
|
|
||||||
onTabChange: (newVal, oldVal) => console.log('tab切换', newVal, oldVal),
|
|
||||||
onItemSelected: (item) => setSelectedItemKey(item.key)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
</BigImage>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BigModal
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
.zhst-big-image {
|
|
||||||
.zhst-dialog-content {
|
|
||||||
box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zhst-tabs .zhst-tabs-nav-wrap {
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-view {
|
|
||||||
&-btns {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&-desc {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 16px 16px 0 16px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
.zhst-descriptions-header {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.zhst-descriptions-title {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// ------------ tab -----------------
|
|
||||||
.zhst-tabs-nav {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
.zhst-tabs-tab {
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-left: 24px;
|
|
||||||
}
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-container {
|
|
||||||
position: relative;
|
|
||||||
min-height: 440px;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
font-size: 0;
|
|
||||||
&-modeNav {
|
|
||||||
padding: 2px;
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
left: 4px;
|
|
||||||
z-index: 10;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
&__nav {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99;
|
|
||||||
top: 50%;
|
|
||||||
width: 40px !important;
|
|
||||||
height: 40px !important;
|
|
||||||
background: #d9d9d9;
|
|
||||||
border-radius: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
&>button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
|
|
||||||
&>button {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__nav:hover {
|
|
||||||
background: #09f;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
// ------------ 导航 -----------------
|
|
||||||
&-nav {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: rgba(255, 255, 255, 0.8);
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8)!important;
|
|
||||||
}
|
|
||||||
&_left {
|
|
||||||
left: 8px;
|
|
||||||
}
|
|
||||||
&_right {
|
|
||||||
right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// ------------ 场景图 -----------------
|
|
||||||
&-cropper-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 4px;
|
|
||||||
&_close {
|
|
||||||
margin-left: 4px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
&-group {
|
|
||||||
.zhst-radio-button-wrapper {
|
|
||||||
display: inline-flex;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #191919;
|
|
||||||
background-color: rgba(255, 255, 255, 0.8)
|
|
||||||
}
|
|
||||||
&-radio {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
.anticon {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
---
|
|
||||||
group: 进阶组件
|
|
||||||
category: Components
|
|
||||||
subtitle: 大图组件
|
|
||||||
toc: content
|
|
||||||
title: BigImage 大图组件
|
|
||||||
---
|
|
||||||
|
|
||||||
## 大图弹框
|
|
||||||
|
|
||||||
<code src="./demo/index.tsx">基本</code>
|
|
||||||
<code src="./demo/withRelatedImage.tsx">人脸碰撞模型</code>
|
|
||||||
<code src="./demo/withEdit.tsx">编辑模式</code>
|
|
||||||
|
|
||||||
### API
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
| type | 当前模式 | 'compater'、'normal'、'video' | - | |
|
|
||||||
| viewHeight | 视图高度 | string、number | - | |
|
|
||||||
| width | 宽度 | string、number | - | |
|
|
||||||
| showDescription | 描述列表显示\隐藏 | boolean | false | |
|
|
||||||
| descriptionsProps | 描述列表透传 | | antd - DescriptionsProps | |
|
|
||||||
| descriptionList | 描述列表数据(见下文) | | IDescriptionList | |
|
|
||||||
| topButtonRender | 顶部按钮 | | ReactNode、string | |
|
|
||||||
| customTabBarExtraContent | 自定义tab尾部导航插槽 | | ReactNode、 string | |
|
|
||||||
| onTabChange | tab事件监听 | | antd - TabsProps['onChange'] | |
|
|
||||||
| tabProps | tab透传 | | antd - TabsProps | |
|
|
||||||
| showModeChange | 是否显示模式切换按钮 | | boolean | |
|
|
||||||
| viewTopModeButtonList | 模式切换按钮列表 | | TypeRadio[] | |
|
|
||||||
| modeButtonGroupProps | 模式切换按钮组透传 | RadioGroupProps | - | |
|
|
||||||
| isRelated | 人脸碰撞模型显示\隐藏 | boolean | | |
|
|
||||||
| relatedImageProps | 人脸碰撞模型透传 | zhst/meta - RelatedImageProps | | |
|
|
||||||
| cropperImageProps | 场景图模式透传 | ICropperImageProps | | |
|
|
||||||
| combineImageProps | 对比图模式透传 | ComBineImageProps | | |
|
|
||||||
| videoProps | 视频模式透传 | videoProps | | |
|
|
||||||
| showNavigation | 是否展示导航 | boolean | | |
|
|
||||||
| prevButtonProps | 前翻箭头透传 | prevButtonProps | | |
|
|
||||||
| onPrevButtonClick | 前翻箭头点击事件 | () => void; | | |
|
|
||||||
| nextButtonProps | 下翻箭头透传 | () => void; | | |
|
|
||||||
| onNextButtonClick | 下翻箭头点击事件 | () => void; | | |
|
|
||||||
| children | | ReactNode | | |
|
|
||||||
|
|
||||||
### IDescriptionList
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface IDescriptionList {
|
|
||||||
title: string;
|
|
||||||
showTitle?: boolean;
|
|
||||||
props?: DescriptionsProps
|
|
||||||
children: DescriptionsProps['items']
|
|
||||||
}[]
|
|
||||||
```
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface ICropperImageProps extends CropperImageProps {
|
|
||||||
showEditTools?: boolean // 是否展示编辑按钮
|
|
||||||
editAble?: boolean // 是否开启编辑模式
|
|
||||||
score?: string | number // 分数
|
|
||||||
btnGroupProps?: BtnGroupProps; // crop 场景图模式下的按钮拓展
|
|
||||||
cropButtonList?: TypeRadio[] // 编辑按钮列表
|
|
||||||
onCropperTypeChange?: (type: RadioProps['onChange']) => void
|
|
||||||
onExitEdit?: ButtonProps['onClick'] // 退出编辑模式
|
|
||||||
attachImageData?: AttachImageProps['data'] // 左下角预览图
|
|
||||||
attachImageProps?: AttachImageProps // 左下角预览图透传
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 设计方案
|
|
||||||
|
|
||||||
结合当下的业务场景，目前大图组件有三种模式
|
|
||||||
|
|
||||||
1. 场景图模式
|
|
||||||
-
|
|
||||||
2. 对比图模式
|
|
||||||
3. 视频模式
|
|
||||||
|
|
||||||
场景图和视频模式，支持用户编辑圈选
|
|
||||||
|
|
||||||
三种模式状态下，都会有外层模块的嵌套，目前有以下几种：
|
|
||||||
|
|
||||||
1. 描述模块
|
|
||||||
2. 顶部拓展
|
|
||||||
- 目前仅支持自定义
|
|
||||||
- 默认下边间距 16px
|
|
||||||
3. tabs 切换
|
|
||||||
- 默认下间距：16px
|
|
||||||
- 支持自定义文案
|
|
||||||
- 支持自定义数量
|
|
||||||
- 支持后方插槽
|
|
||||||
4. 人脸碰撞模型
|
|
||||||
- 支持用户自定义传入数据
|
|
||||||
|
|
||||||
本来想通过插件的形式按需加载
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import BigImage from "./BigImage";
|
|
||||||
|
|
||||||
export type { BigImageProps, BigImageRef } from './interface'
|
|
||||||
|
|
||||||
export default BigImage
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import { ReactNode } from 'react'
|
|
||||||
import {
|
|
||||||
ButtonProps,
|
|
||||||
RadioProps,
|
|
||||||
RadioGroupProps,
|
|
||||||
VideoViewProps,
|
|
||||||
DescriptionsProps,
|
|
||||||
TabsProps,
|
|
||||||
RelatedImageProps,
|
|
||||||
BtnGroupProps,
|
|
||||||
CropperImageProps,
|
|
||||||
VideoViewRef,
|
|
||||||
AttachImageProps
|
|
||||||
} from '@zhst/meta'
|
|
||||||
import { ComBineImageProps } from './components/CombineImage'
|
|
||||||
|
|
||||||
export type TypeRadio = {
|
|
||||||
label?: string;
|
|
||||||
key: string;
|
|
||||||
tooltipTxt?: string;
|
|
||||||
onClick?: ButtonProps['onClick']
|
|
||||||
icon?: ReactNode | string;
|
|
||||||
props?: ButtonProps
|
|
||||||
}
|
|
||||||
|
|
||||||
type TypePlugin = 'compater' | 'normal' | 'video' | 'faceMode'
|
|
||||||
|
|
||||||
export interface BigImageProps {
|
|
||||||
type?: TypePlugin // 当前 tab
|
|
||||||
viewHeight?: string | number;
|
|
||||||
width?: string | number
|
|
||||||
typePlugins?: TypePlugin[] // TODO: 开启插件类型
|
|
||||||
// ------------ 描述列表 -----------------
|
|
||||||
showDescription?: boolean;
|
|
||||||
descriptionsProps?: DescriptionsProps
|
|
||||||
descriptionList?: {
|
|
||||||
title: string;
|
|
||||||
showTitle?: boolean;
|
|
||||||
props?: DescriptionsProps
|
|
||||||
children: DescriptionsProps['items']
|
|
||||||
}[]
|
|
||||||
// ------------------ 顶部按钮列表
|
|
||||||
topButtonRender?: ReactNode | string
|
|
||||||
// ---------------- Tabs 导航 ------------------
|
|
||||||
customTabBarExtraContent?: string | ReactNode
|
|
||||||
onTabChange?: TabsProps['onChange']
|
|
||||||
tabProps?: TabsProps
|
|
||||||
// ------------ 图片 ｜ 视频切换导航 -----------------
|
|
||||||
showModeChange?: boolean
|
|
||||||
viewTopModeButtonList?: TypeRadio[]
|
|
||||||
modeButtonGroupProps?: RadioGroupProps
|
|
||||||
// ----------------- 人脸碰转 -----------------
|
|
||||||
isRelated?: boolean // 人脸碰撞功能打开
|
|
||||||
relatedImageProps?: RelatedImageProps
|
|
||||||
// -------------------------- crop 场景图模式 -----------------------
|
|
||||||
cropperImageProps?: CropperImageProps & {
|
|
||||||
showEditTools?: boolean
|
|
||||||
editAble?: boolean
|
|
||||||
score?: string | number
|
|
||||||
btnGroupProps?: BtnGroupProps; // crop 场景图模式下的按钮拓展
|
|
||||||
cropButtonList?: TypeRadio[]
|
|
||||||
onCropperTypeChange?: (type: RadioProps['onChange']) => void
|
|
||||||
onExitEdit?: ButtonProps['onClick']
|
|
||||||
attachImageData?: AttachImageProps['data']
|
|
||||||
attachImageProps?: AttachImageProps
|
|
||||||
}
|
|
||||||
// -------------------- 对比图模式 -------------------------
|
|
||||||
combineImageProps?: ComBineImageProps
|
|
||||||
// ------------ 导航 -----------------
|
|
||||||
showNavigation?: boolean // 是否展示导航箭头
|
|
||||||
prevButtonProps?: any;
|
|
||||||
onPrevButtonClick?: () => void;
|
|
||||||
nextButtonProps?: any
|
|
||||||
onNextButtonClick?: () => void;
|
|
||||||
theme?: any
|
|
||||||
children?: React.ReactNode
|
|
||||||
// ------------ 视频模式 -----------------
|
|
||||||
videoProps?: VideoViewProps
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BigImageRef {
|
|
||||||
videoPlayerRef: VideoViewRef
|
|
||||||
combineImageRef: any
|
|
||||||
}
|
|
||||||
@ -1,293 +0,0 @@
|
|||||||
// @ts-nocheck
|
|
||||||
import imageUrl from './demo/imgs/photo-1503185912284-5271ff81b9a8.webp'
|
|
||||||
|
|
||||||
export const IMAGE_DATA = {
|
|
||||||
"enAbleDeleteFeature": true,
|
|
||||||
"tabsFilter": [
|
|
||||||
"COMPATER",
|
|
||||||
"NORMAL"
|
|
||||||
],
|
|
||||||
"selectIndex": 4,
|
|
||||||
"disableBtn": [
|
|
||||||
0,
|
|
||||||
1,
|
|
||||||
4,
|
|
||||||
20
|
|
||||||
],
|
|
||||||
"dataSource": {
|
|
||||||
"objectId": "1742110565582518272",
|
|
||||||
"condition": {
|
|
||||||
"featureInfo": null,
|
|
||||||
"featureData": "AAAAAAAAAAAAAAAAAAAAAAA==",
|
|
||||||
"imageData": "",
|
|
||||||
"alg": "VERSION_REID_HEAD_ATTR",
|
|
||||||
"rect": {
|
|
||||||
"x": 0.271875,
|
|
||||||
"y": 0.32222223,
|
|
||||||
"w": 0.2859375,
|
|
||||||
"h": 0.67777777
|
|
||||||
},
|
|
||||||
"objectImageUrl": "singer-20240102/1/129529/1742047651878156288.jpg",
|
|
||||||
"srcImageUrl": "singer-20240102/1/129529/1742047652511496192.jpg"
|
|
||||||
},
|
|
||||||
"score": 0.7163062,
|
|
||||||
"timestamp": 1704186491979,
|
|
||||||
"deviceId": "129533",
|
|
||||||
"id": "129533",
|
|
||||||
"name": "4楼门口过道人脸",
|
|
||||||
"dirid": "0",
|
|
||||||
"status": "1",
|
|
||||||
"longitude": 120.125,
|
|
||||||
"latitude": 30.280500411987305,
|
|
||||||
"caseId": "0",
|
|
||||||
"caseGroup": "",
|
|
||||||
"isDeleted": "DEVICEMANAGER_BOOL_DEFAULT",
|
|
||||||
"objectIndex": {
|
|
||||||
"objectId": "1742110565582518272",
|
|
||||||
"solutionId": "1",
|
|
||||||
"deviceId": "129533",
|
|
||||||
"fragmentId": "0"
|
|
||||||
},
|
|
||||||
"objectType": "OBJECT_TYPE_PEDESTRAIN",
|
|
||||||
"isObjectTrack": true,
|
|
||||||
"pathId": "1742110532019697664",
|
|
||||||
"frameInfo": {
|
|
||||||
"frameId": "0",
|
|
||||||
"frameTimestamp": "1704186491979",
|
|
||||||
"width": 0,
|
|
||||||
"height": 0,
|
|
||||||
"originWidth": 1920,
|
|
||||||
"originHeight": 1080,
|
|
||||||
"offsetTime": "24714687",
|
|
||||||
"skipNumber": "0"
|
|
||||||
},
|
|
||||||
"level": 1,
|
|
||||||
"bboxInFrame": {
|
|
||||||
"x": 0.603125,
|
|
||||||
"y": 0.3314815,
|
|
||||||
"w": 0.0578125,
|
|
||||||
"h": 0.2712963
|
|
||||||
},
|
|
||||||
"bboxExtInFrame": {
|
|
||||||
"x": 0.546875,
|
|
||||||
"y": 0.2638889,
|
|
||||||
"w": 0.17135416,
|
|
||||||
"h": 0.40648147
|
|
||||||
},
|
|
||||||
"objectImageKey": "",
|
|
||||||
"objectExtImageKey": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565582518272.jpg",
|
|
||||||
"frameImageKey": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565603489792.jpg",
|
|
||||||
"confidence": 0.817271,
|
|
||||||
"sourceObjectId": "1742110565603489792",
|
|
||||||
"storeTimestamp": "0",
|
|
||||||
"gbNumber": "",
|
|
||||||
"qualityScore": 0,
|
|
||||||
"subObjectCount": 1,
|
|
||||||
"subObjectType": [
|
|
||||||
"OBJECT_TYPE_FACE"
|
|
||||||
],
|
|
||||||
"subObjectIds": [
|
|
||||||
"1742110532015503360"
|
|
||||||
],
|
|
||||||
"solutionId": "1",
|
|
||||||
"fragmentId": "0",
|
|
||||||
"contrastKey": "singer-20240102/1/129533/1742110565582518272.jpg",
|
|
||||||
"compaterImages": [
|
|
||||||
"http://10.0.0.7:30003/file/singer-20240102/1/129529/1742047651878156288.jpg"
|
|
||||||
],
|
|
||||||
"imgSummary": "singer-20240102/1/129533/1742110565582518272.jpg",
|
|
||||||
"imageKey": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565582518272.jpg",
|
|
||||||
"srcImageUrl": "http://10.0.0.7:30003/file/singer-20240102/1/129533/1742110565603489792.jpg",
|
|
||||||
"algorithmVersion": "VERSION_REID_HEAD_ATTR",
|
|
||||||
"cameraId": "129533",
|
|
||||||
"cameraName": "4楼门口过道人脸"
|
|
||||||
},
|
|
||||||
"isArchiveDetail": false,
|
|
||||||
"ToolProps": {
|
|
||||||
"renderVideoBtn": true,
|
|
||||||
"disableVideo": false
|
|
||||||
},
|
|
||||||
"specialTitle": ""
|
|
||||||
}
|
|
||||||
|
|
||||||
export const RELATED_IMAGES = [
|
|
||||||
{ key: '123', url: imageUrl },
|
|
||||||
{ key: '22', url: imageUrl },
|
|
||||||
{ key: '22122333', url: imageUrl },
|
|
||||||
{ key: '2212243', url: imageUrl },
|
|
||||||
{ key: '224523433', url: imageUrl },
|
|
||||||
{ key: '224235453', url: imageUrl },
|
|
||||||
{ key: '245423', url: imageUrl },
|
|
||||||
{ key: '224233543', url: imageUrl },
|
|
||||||
{ key: '22452343', url: imageUrl },
|
|
||||||
{ key: '22323243', url: imageUrl },
|
|
||||||
{ key: '2236456', url: imageUrl },
|
|
||||||
{ key: '224563', url: imageUrl },
|
|
||||||
{ key: '24565423', url: imageUrl },
|
|
||||||
{ key: '245645623', url: imageUrl },
|
|
||||||
{ key: '2456435623', url: imageUrl },
|
|
||||||
{ key: '2323', url: imageUrl }
|
|
||||||
]
|
|
||||||
|
|
||||||
export const BIG_IMAGE_DATA = {
|
|
||||||
imageKey: imageUrl,
|
|
||||||
imgSummary: imageUrl,
|
|
||||||
flvUrl: 'ws://10.0.0.120:9033/flv/HaikangNvr/45.flv?ip=10.0.2.103&stime=1712539148&etime=1712539168',
|
|
||||||
compaterImage: imageUrl,
|
|
||||||
odRect: [
|
|
||||||
{
|
|
||||||
id: '123',
|
|
||||||
"x":0.5445312,
|
|
||||||
"y":0.19166666,
|
|
||||||
"w":0.08671875,
|
|
||||||
"h":0.40138888
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "123",
|
|
||||||
"x": 0.5519352,
|
|
||||||
"y": 0.2965385,
|
|
||||||
"w": 0.05185461,
|
|
||||||
"h": 0.24698898,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "456",
|
|
||||||
"x": 0.58543766,
|
|
||||||
"y": 0.3203356,
|
|
||||||
"w": 0.052037954,
|
|
||||||
"h": 0.2664015
|
|
||||||
}
|
|
||||||
],
|
|
||||||
attachImg: [
|
|
||||||
{
|
|
||||||
"url": imageUrl,
|
|
||||||
"label": "形体"
|
|
||||||
},{
|
|
||||||
"url": imageUrl,
|
|
||||||
"label": "人脸"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
score: 60, // 人脸质量分
|
|
||||||
showScore: true, // 人脸质量分
|
|
||||||
cameraPosition: 'string', // 摄像头位置
|
|
||||||
time: '2022-01-01', // 摄像头拍摄时间
|
|
||||||
objects: [
|
|
||||||
{
|
|
||||||
"objectIndex": {
|
|
||||||
"objectId": "1746832189053474816",
|
|
||||||
"solutionId": "0",
|
|
||||||
"deviceId": "0",
|
|
||||||
"fragmentId": "0"
|
|
||||||
},
|
|
||||||
"objectType": "OBJECT_TYPE_PEDESTRAIN",
|
|
||||||
"sourceObjectId": "0",
|
|
||||||
"level": 0,
|
|
||||||
"confidence": 0.881164,
|
|
||||||
"frameInfo": {
|
|
||||||
"frameId": "0",
|
|
||||||
"frameTimestamp": "1705312223057",
|
|
||||||
"width": 0,
|
|
||||||
"height": 0,
|
|
||||||
"originWidth": 0,
|
|
||||||
"originHeight": 0,
|
|
||||||
"offsetTime": "0",
|
|
||||||
"skipNumber": "0"
|
|
||||||
},
|
|
||||||
"infoOnSource": {
|
|
||||||
"bboxInFrame": {
|
|
||||||
"bboxRatio": {
|
|
||||||
"x": 0.61418945,
|
|
||||||
"y": 0.34309354,
|
|
||||||
"w": 0.067661405,
|
|
||||||
"h": 0.34659258
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"countInSource": 0,
|
|
||||||
"indexInSource": 0
|
|
||||||
},
|
|
||||||
"qualityScore": 0,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
export const attributeList = [
|
|
||||||
{
|
|
||||||
title: '人员属性',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
label: '性别',
|
|
||||||
children: '男',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
label: '年龄',
|
|
||||||
children: '成年',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
label: '帽子',
|
|
||||||
children: '无',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '4',
|
|
||||||
label: '上身颜色',
|
|
||||||
children: '灰',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '5',
|
|
||||||
label: '下身颜色',
|
|
||||||
children: '蓝色',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '6',
|
|
||||||
label: '附着物',
|
|
||||||
children: '无',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '7',
|
|
||||||
label: '骑行',
|
|
||||||
children: '否',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '社区规范',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
label: '性别',
|
|
||||||
children: '男',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
label: '年龄',
|
|
||||||
children: '成年',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '3',
|
|
||||||
label: '帽子',
|
|
||||||
children: '无',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '4',
|
|
||||||
label: '上身颜色',
|
|
||||||
children: '灰',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '5',
|
|
||||||
label: '下身颜色',
|
|
||||||
children: '蓝色',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '6',
|
|
||||||
label: '附着物',
|
|
||||||
children: '无',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '7',
|
|
||||||
label: '骑行',
|
|
||||||
children: '否',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
@ -1,195 +0,0 @@
|
|||||||
/**
|
|
||||||
* 适配老的大屏组件数据格式传入
|
|
||||||
*/
|
|
||||||
import React, { } from 'react';
|
|
||||||
import { AlgorithmVersionStr, HumanProperty, ObjectType, Rect, IScreenshotButtonProp } from '@zhst/types'
|
|
||||||
import { VideoViewProps, ImgViewProps, VideoViewRef, ImgViewRef } from '@zhst/meta'
|
|
||||||
|
|
||||||
export type TAB_TYPE = 'COMPATER' | 'NORMAL' | 'TRACK';
|
|
||||||
export type MODEL_TYPE = 'VIDEO' | 'IMAGE';
|
|
||||||
|
|
||||||
export interface CarouselProps {
|
|
||||||
hasPre?: boolean;
|
|
||||||
hasNext?: boolean;
|
|
||||||
selectIndex: number;
|
|
||||||
setSelectIndex: React.Dispatch<React.SetStateAction<number>>;
|
|
||||||
dataSource: Array<{
|
|
||||||
key: string;
|
|
||||||
url: string;
|
|
||||||
}>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ISelectItem = Partial<Omit<ImgViewProps, 'screenshotButtonRender'>> &
|
|
||||||
Partial<Omit<VideoViewProps, 'screenshotButtonRender'>>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 描述列表 description
|
|
||||||
*/
|
|
||||||
export interface HeaderProps {
|
|
||||||
value: TAB_TYPE;
|
|
||||||
onChange: (type: TAB_TYPE) => void;
|
|
||||||
tabsFilter: TAB_TYPE[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ParamProps {
|
|
||||||
tab: string;
|
|
||||||
selectItem: ISelectItem;
|
|
||||||
imgViewRef: React.MutableRefObject<ImgViewRef>;
|
|
||||||
VideoViewRef: React.MutableRefObject<VideoViewRef>;
|
|
||||||
model: MODEL_TYPE;
|
|
||||||
setModel: React.Dispatch<React.SetStateAction<MODEL_TYPE>>;
|
|
||||||
/* 可观测值 */
|
|
||||||
scale$: number;
|
|
||||||
showCrop$: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 工具栏
|
|
||||||
*/
|
|
||||||
export interface ToolProps {
|
|
||||||
renderRight?: (props: ParamProps) => React.ReactNode;
|
|
||||||
renderLeft?: (props: ParamProps) => React.ReactNode;
|
|
||||||
renderVideoBtn?: boolean;
|
|
||||||
param: ParamProps;
|
|
||||||
disableVideo: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export interface BigImageData {
|
|
||||||
//imageKey 小图
|
|
||||||
extendRectList: (Rect & { algorithmVersion: AlgorithmVersionStr; imageKey: string })[];
|
|
||||||
rectList: (Rect & { algorithmVersion: AlgorithmVersionStr; imageKey: string })[];
|
|
||||||
attachImg: { url: string; label: '形体' | '人脸' }[];
|
|
||||||
odRect: Rect;
|
|
||||||
compaterImages: string[] // 目标图列表
|
|
||||||
constractKey: string; // 当前比较中的目标图
|
|
||||||
frameImageKey: string; // 场景图
|
|
||||||
imageKey?: string; // 大图
|
|
||||||
imgSummary: string; // 摘要图
|
|
||||||
objectExtImageKey: string; //比对到的目标图扩展图 === imgSummary
|
|
||||||
|
|
||||||
attributeList: { label: string; list: any[] }[];
|
|
||||||
archiveImages?: any;
|
|
||||||
spaceName: string;
|
|
||||||
|
|
||||||
objectIndex?: {
|
|
||||||
deviceId: string;
|
|
||||||
fragmentId: string;
|
|
||||||
objectId: string;
|
|
||||||
solutionId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
objectType: ObjectType;
|
|
||||||
objectId: string; //这张摘要本身的Id
|
|
||||||
bodyObjectId?: string;
|
|
||||||
faceObjectId?: string; //这张摘要下的人脸Id(如果有)
|
|
||||||
sourceObjectId?: string; //这张摘要上游的形体Id(如果有)
|
|
||||||
cameraId: string;
|
|
||||||
cameraName: string;
|
|
||||||
selectIndex: number;
|
|
||||||
humanProperty: HumanProperty;
|
|
||||||
qualityScore?: number; //人脸质量分
|
|
||||||
score: number; // 相似度
|
|
||||||
timestamp: string;
|
|
||||||
bodyImageUrl: string;
|
|
||||||
faceImageUrl: string;
|
|
||||||
algorithmVersion: AlgorithmVersionStr;
|
|
||||||
|
|
||||||
bodySpaceName: string;
|
|
||||||
faceSpaceName: string;
|
|
||||||
position: {
|
|
||||||
lat: number
|
|
||||||
lng: number
|
|
||||||
}
|
|
||||||
|
|
||||||
solutionId?: string;
|
|
||||||
[index: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
interface IOldImageData {
|
|
||||||
visible?: boolean; // 显示隐藏弹框
|
|
||||||
defaultModel?: MODEL_TYPE; // 视频模式 | 图片模式
|
|
||||||
onClose?: () => void; // 关闭弹框
|
|
||||||
isLoading?: boolean; // 是否加载中
|
|
||||||
hasPre?: boolean; // 向前翻页
|
|
||||||
hasNext?: boolean; // 向后翻页
|
|
||||||
selectIndex?: number; // 选中的数据（dataSource为数组情况下）
|
|
||||||
onSelectIndexChange?: (i: number) => void; // 修改当前下标
|
|
||||||
dataSource: BigImageData[]; // 数据1
|
|
||||||
dataSources: BigImageData[]; // 数据2
|
|
||||||
relatedData?: BigImageData[]; // 数据3
|
|
||||||
transformPropFunc: (item: any) => ISelectItem; // 格式化数据方法
|
|
||||||
transformVideoPropFunc: (
|
|
||||||
item: ISelectItem
|
|
||||||
) => Promise<Omit<VideoViewProps, 'screenshotButtonRender'>>; // 视频模式格式化数据方法
|
|
||||||
screenshotButtonRender?: (screenshotButtonProp: IScreenshotButtonProp) => React.ReactElement;
|
|
||||||
showTool?: boolean; // 是否显示底部菜单
|
|
||||||
showCarousel?: boolean; //
|
|
||||||
imgViewProp?: Partial<ImgViewProps>; // 图片模式的配置
|
|
||||||
videoViewProp?: Partial<VideoViewProps>; // 视频模式的配置
|
|
||||||
ToolProps?: Partial<ToolProps>; // 底部菜单的配置
|
|
||||||
nullDialogProp?: {
|
|
||||||
emptyText?: string;
|
|
||||||
}; // 暂无数据的配置
|
|
||||||
showHeader?: boolean; // 是否显示 description
|
|
||||||
tabsFilter?: TAB_TYPE[]; // tabs 过滤
|
|
||||||
useVirtual?: boolean; // 是否显示虚拟
|
|
||||||
loadNext?: (i: number) => Promise<void>; // 下一个
|
|
||||||
loadPre?: (i: number) => Promise<void>; // 前一个
|
|
||||||
children: React.ReactNode; // 子元素
|
|
||||||
title?: string; // 标题
|
|
||||||
specialTitle?: string; // 对比图模式下标题
|
|
||||||
isRelated?: boolean;
|
|
||||||
carouselProp?: Partial<CarouselProps>;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export interface ImageModalDataProps {
|
|
||||||
targetData: BigImageData[]
|
|
||||||
compactData: BigImageData[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ModalAdapterConfigProps {
|
|
||||||
oldMode?: boolean; // 是否是老模式
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 兼容老数据格式
|
|
||||||
* @param _data 老数据格式
|
|
||||||
* @returns newData
|
|
||||||
*/
|
|
||||||
const translateOldImageData = (_data: IOldImageData) => {
|
|
||||||
return {
|
|
||||||
..._data,
|
|
||||||
open: _data.visible,
|
|
||||||
onCancel: _data.onClose
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 大图组件适配器，兼容老接口
|
|
||||||
* @param Cmp 大图组件
|
|
||||||
* @param config 额外配置
|
|
||||||
* @returns 大图组件
|
|
||||||
*/
|
|
||||||
const adapter = (Cmp: any, config: ModalAdapterConfigProps): any => {
|
|
||||||
const { oldMode = false } = config
|
|
||||||
|
|
||||||
return (props: IOldImageData) => {
|
|
||||||
const newProps = oldMode ? translateOldImageData(props) : props
|
|
||||||
console.log('adapter----适配数据', props, newProps)
|
|
||||||
|
|
||||||
// 该属性已经废弃
|
|
||||||
delete newProps.visible
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Cmp
|
|
||||||
{...newProps}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default adapter
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
export interface IBigImageModalData {
|
|
||||||
imageKey?: string // 目标图
|
|
||||||
imgSummary?: string // 大图
|
|
||||||
flvUrl?: string // 视频链接
|
|
||||||
compaterImages?: string[] // 对比图
|
|
||||||
odRect?: { // od 框数据
|
|
||||||
"x": number
|
|
||||||
"y": number
|
|
||||||
"w": number
|
|
||||||
"h": number
|
|
||||||
[key: string]: string | number; // 拓展参数
|
|
||||||
}[],
|
|
||||||
attachImg?: { // 小图，只有在场景图模式生效（人脸、形体）
|
|
||||||
"url": string
|
|
||||||
"label": string
|
|
||||||
[key: string]: string
|
|
||||||
}[],
|
|
||||||
score?: number | string // 人脸质量分
|
|
||||||
showScore?: boolean // 人脸质量分
|
|
||||||
cameraPosition?: string // 摄像头位置
|
|
||||||
time?: string // 摄像头拍摄时间
|
|
||||||
objects: { // 拓展参数、可以自由支配
|
|
||||||
objectIndex: {
|
|
||||||
[key: string]: any
|
|
||||||
},
|
|
||||||
objectType: string
|
|
||||||
sourceObjectId: string
|
|
||||||
level: number
|
|
||||||
confidence: number
|
|
||||||
infoOnSource: {
|
|
||||||
[key: string]: any
|
|
||||||
},
|
|
||||||
qualityScore: number
|
|
||||||
[key: string]: any
|
|
||||||
}[]
|
|
||||||
}
|
|
||||||
12
packages/biz/src/Demo/index.tsx
Normal file
12
packages/biz/src/Demo/index.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Button } from '@zhst/meta'
|
||||||
|
import { useThrottleFn } from '@zhst/hooks'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
|
||||||
|
const { run } = useThrottleFn(() => console.log('123'))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button onClick={() => run()} >测试</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -3,7 +3,7 @@ import { IRecord } from '../../../WarningRecordCard';
|
|||||||
import { ViewLargerImageModalRef } from '../../../ViewLargerImageModal';
|
import { ViewLargerImageModalRef } from '../../../ViewLargerImageModal';
|
||||||
import WarningRecordCard from '../../../WarningRecordCard';
|
import WarningRecordCard from '../../../WarningRecordCard';
|
||||||
import ViewLargerImageModal from '../../../ViewLargerImageModal';
|
import ViewLargerImageModal from '../../../ViewLargerImageModal';
|
||||||
import { Empty, Space, Spin } from '@zhst/meta';
|
import { Empty, Space, Spin } from 'antd';
|
||||||
import { pxToRem } from '@zhst/func'
|
import { pxToRem } from '@zhst/func'
|
||||||
import { LoadingOutlined } from '@ant-design/icons';
|
import { LoadingOutlined } from '@ant-design/icons';
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import VideoPlayerCard from '../../../VideoPlayerCard';
|
import VideoPlayerCard from '../../../VideoPlayerCard';
|
||||||
import { VideoPlayerCardProps } from '../../../VideoPlayerCard';
|
import { VideoPlayerCardProps } from '../../../VideoPlayerCard';
|
||||||
import { Row, Col, Segmented, theme } from '@zhst/meta';
|
import { Row, Col, Segmented, theme } from 'antd';
|
||||||
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
|
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
|
||||||
import { pxToRem } from '@zhst/func'
|
import { pxToRem } from '@zhst/func'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } from 'react';
|
import React, { useImperativeHandle, useRef, useState, forwardRef, useContext } from 'react';
|
||||||
import { Modal, ModalProps, Space, SpaceProps, theme } from '@zhst/meta';
|
import { Modal, ModalProps, Space, SpaceProps, theme } from 'antd';
|
||||||
import { DownloadOutlined } from '@ant-design/icons';
|
import { DownloadOutlined } from '@ant-design/icons';
|
||||||
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { Card, Space, Divider, CardProps, theme } from '@zhst/meta';
|
import { Card, Space, Divider, CardProps, theme } from 'antd';
|
||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
||||||
|
|||||||
@ -4,7 +4,6 @@ import BoxPanel from './components/boxPanel';
|
|||||||
import type { BoxPanelProps } from './components/boxPanel';
|
import type { BoxPanelProps } from './components/boxPanel';
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
export interface BoxSelectTreeProps extends BoxPanelProps {
|
export interface BoxSelectTreeProps extends BoxPanelProps {
|
||||||
onTabChange?: (e: any) => void
|
onTabChange?: (e: any) => void
|
||||||
tabsProps?: TabsProps
|
tabsProps?: TabsProps
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
import React, { FC, useState, useContext, ReactNode } from 'react';
|
import React, { FC, useState, useContext, ReactNode } from 'react';
|
||||||
import { ModalFormProps } from '@ant-design/pro-components'
|
import { ModalFormProps } from '@ant-design/pro-components'
|
||||||
|
import { Input, Dropdown } from 'antd'
|
||||||
import {
|
import {
|
||||||
ButtonProps,
|
ButtonProps,
|
||||||
ConfigProvider,
|
ConfigProvider,
|
||||||
Input,
|
|
||||||
Dropdown,
|
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Button,
|
Button,
|
||||||
Divider,
|
Divider,
|
||||||
|
|||||||
@ -17,6 +17,7 @@ const demo = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onBoxBatchDelete = () => {
|
const onBoxBatchDelete = () => {
|
||||||
|
console.log('盒子批量删除', checkedKeys)
|
||||||
modal.warning({
|
modal.warning({
|
||||||
content: (
|
content: (
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -1,13 +1,9 @@
|
|||||||
export { default as BigImageModal } from './BigImageModal'
|
export { default as BigImageModal } from './BigImageModal'
|
||||||
export type { BigImageModalProps } from './BigImageModal'
|
export type { BigImageModalProps } from './BigImageModal'
|
||||||
export { default as BigImage } from './BigImage'
|
|
||||||
export type { BigImageProps, BigImageRef } from './BigImage'
|
|
||||||
export { default as BoxSelectTree } from './boxSelectTree'
|
export { default as BoxSelectTree } from './boxSelectTree'
|
||||||
export type { BoxSelectTreeProps } from './boxSelectTree'
|
export type { BoxSelectTreeProps } from './boxSelectTree'
|
||||||
export { default as Tree } from './tree'
|
export { default as Tree } from './tree'
|
||||||
export type { BoxTreeProps, TreeData } from './tree'
|
export type { BoxTreeProps, TreeData } from './tree'
|
||||||
export { default as TreePanel } from './treePanel'
|
|
||||||
export type { TreePanelProps } from './treePanel'
|
|
||||||
export { default as TreeTransfer } from './treeTransfer'
|
export { default as TreeTransfer } from './treeTransfer'
|
||||||
export type { TreeTransferProps } from './treeTransfer'
|
export type { TreeTransferProps } from './treeTransfer'
|
||||||
export { default as TreeTransferModal } from './treeTransferModal'
|
export { default as TreeTransferModal } from './treeTransferModal'
|
||||||
|
|||||||
@ -3,9 +3,10 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { forwardRef, ReactNode, useContext, useEffect, useImperativeHandle, useRef } from 'react'
|
import React, { forwardRef, ReactNode, useContext, useEffect, useImperativeHandle, useRef } from 'react'
|
||||||
import { ConfigProvider, Spin, SpinProps } from '@zhst/meta';
|
import { ConfigProvider } from '@zhst/meta';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import InfiniteScroll from 'react-infinite-scroll-component';
|
import InfiniteScroll from 'react-infinite-scroll-component';
|
||||||
|
import { Spin, SpinProps } from 'antd';
|
||||||
import { useSize } from '@zhst/hooks';
|
import { useSize } from '@zhst/hooks';
|
||||||
import './index.less'
|
import './index.less'
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
|
import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
|
||||||
import { ConfigProvider, CropperImage, Scanner, CropperImageProps, CropperImageRefProps, Button, Modal, ModalProps, Select, SelectProps, Space, theme } from '@zhst/meta'
|
import { Button, Modal, ModalProps, Select, SelectProps, Space, theme } from 'antd';
|
||||||
|
import { ConfigProvider, CropperImage, Scanner, CropperImageProps, CropperImageRefProps } from '@zhst/meta'
|
||||||
import { IconFont } from '@zhst/icon'
|
import { IconFont } from '@zhst/icon'
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import './index.less'
|
import './index.less'
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
// !! 该组件已被废弃
|
import { TreeDataNode } from 'antd';
|
||||||
import { DataNode } from '@zhst/meta';
|
|
||||||
import BoxTree from './boxTree';
|
import BoxTree from './boxTree';
|
||||||
|
|
||||||
export interface TreeData extends DataNode {
|
export interface TreeData extends TreeDataNode {
|
||||||
children?: DataNode['children'] & {
|
children?: TreeDataNode['children'] & {
|
||||||
isCamera?: boolean
|
isCamera?: boolean
|
||||||
/**
|
/**
|
||||||
* 0-失败 1-成功 2-进行中 3-未知
|
* 0-失败 1-成功 2-进行中 3-未知
|
||||||
|
|||||||
@ -1,269 +0,0 @@
|
|||||||
import React, { FC, useContext, ReactNode } from 'react';
|
|
||||||
import {
|
|
||||||
ConfigProvider,
|
|
||||||
Input,
|
|
||||||
Dropdown,
|
|
||||||
Tooltip,
|
|
||||||
Button,
|
|
||||||
DataNode as TreeDataNode,
|
|
||||||
Tree as BoxTree,
|
|
||||||
TreeProps as BoxTreeProps,
|
|
||||||
TreeProps,
|
|
||||||
InputProps,
|
|
||||||
DropDownProps,
|
|
||||||
SelectProps,
|
|
||||||
Select
|
|
||||||
} from '@zhst/meta';
|
|
||||||
import { IconFont } from '@zhst/icon';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import './index.less'
|
|
||||||
import { ButtonProps } from 'antd';
|
|
||||||
|
|
||||||
export interface IOption {
|
|
||||||
type?: ButtonProps['type'] & 'dropdown';
|
|
||||||
label: string
|
|
||||||
key: string
|
|
||||||
icon?: string | ReactNode
|
|
||||||
disabled?: boolean;
|
|
||||||
showTooltip?: boolean;
|
|
||||||
onClick?: () => void
|
|
||||||
className?: string;
|
|
||||||
dropdownConfig?: DropDownProps
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ITag {
|
|
||||||
label: string
|
|
||||||
value: string
|
|
||||||
icon?: ReactNode
|
|
||||||
parentNode?: string
|
|
||||||
children?: ITag[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TreePanelProps {
|
|
||||||
treeType?: 'directory' | 'normal'
|
|
||||||
searchInputProps?: InputProps
|
|
||||||
showOptions?: boolean
|
|
||||||
showSelectBar?: boolean // 显示搜索框
|
|
||||||
filterSelectProps?: SelectProps
|
|
||||||
onSelect?: SelectProps['onChange']
|
|
||||||
treeProps?: Partial<BoxTreeProps>
|
|
||||||
data: TreeDataNode[]
|
|
||||||
onSearch?: (e: any) => void
|
|
||||||
onItemCheck?: TreeProps['onCheck']
|
|
||||||
onItemSelect?: TreeProps['onSelect']
|
|
||||||
customImport?: ReactNode | string // 自定义搜索栏边上的过滤图标
|
|
||||||
extra?: ReactNode | string // 搜索栏下面的插槽
|
|
||||||
prefixCls?: string
|
|
||||||
showSearchBar?: boolean // 是否显示搜索栏
|
|
||||||
noFilter?: boolean // 是否显示搜索拓展 icon
|
|
||||||
filterList?: IOption[]
|
|
||||||
optionList?: IOption[]
|
|
||||||
showTagPanel?: boolean // 标签插槽
|
|
||||||
tagList?: ITag[] // 标签列表
|
|
||||||
tagExpandAll?: boolean // 展开所有
|
|
||||||
onTagCheck?: (value: string, tag: ITag) => void;
|
|
||||||
checkedTags?: string[]
|
|
||||||
onResetTags?: () => void
|
|
||||||
onTagExpand?: (e: any) => void
|
|
||||||
tagFootRender?: ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
const { ConfigContext } = ConfigProvider
|
|
||||||
const { DirectoryTree } = BoxTree
|
|
||||||
|
|
||||||
const TreePanel: FC<TreePanelProps> = (props) => {
|
|
||||||
const {
|
|
||||||
treeType = 'directory',
|
|
||||||
searchInputProps,
|
|
||||||
showOptions = true,
|
|
||||||
showSelectBar,
|
|
||||||
filterSelectProps,
|
|
||||||
extra,
|
|
||||||
noFilter,
|
|
||||||
data = [],
|
|
||||||
treeProps,
|
|
||||||
onSelect,
|
|
||||||
onSearch,
|
|
||||||
onItemCheck,
|
|
||||||
onItemSelect,
|
|
||||||
showSearchBar = true,
|
|
||||||
optionList = [],
|
|
||||||
filterList = [],
|
|
||||||
showTagPanel,
|
|
||||||
tagList,
|
|
||||||
tagExpandAll,
|
|
||||||
onTagExpand,
|
|
||||||
checkedTags = [],
|
|
||||||
onTagCheck,
|
|
||||||
onResetTags,
|
|
||||||
tagFootRender,
|
|
||||||
prefixCls: customizePrefixCls,
|
|
||||||
customImport: customFilter
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const { getPrefixCls } = useContext(ConfigContext);
|
|
||||||
const componentName = getPrefixCls('biz-tree-panel', customizePrefixCls);
|
|
||||||
const CurrentTree = treeType === 'directory' ? DirectoryTree : BoxTree
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 初始化拓展 filter
|
|
||||||
* @param _list
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
const initFilter = (_list?: TreePanelProps['filterList']) => {
|
|
||||||
const WithDropdown = (dom: ReactNode, isShow?: boolean, _config?: DropDownProps) => {
|
|
||||||
if (!isShow) {
|
|
||||||
return dom
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dropdown placement="bottomLeft" arrow {..._config}>
|
|
||||||
{dom}
|
|
||||||
</Dropdown>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return _list?.map(item => (
|
|
||||||
<Tooltip
|
|
||||||
title={item.label}
|
|
||||||
open={item.showTooltip}
|
|
||||||
>
|
|
||||||
{WithDropdown(
|
|
||||||
<Button className={classNames(componentName + '-search-btns-btn')} type={item.type} onClick={item.onClick} icon={item.icon} {...item} />,
|
|
||||||
item.type === 'dropdown',
|
|
||||||
item.dropdownConfig
|
|
||||||
)}
|
|
||||||
</Tooltip>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 初始化拓展 filter
|
|
||||||
* @param _list
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
const initOptions = (_list?: TreePanelProps['optionList']) => {
|
|
||||||
return _list?.map((item, idx) => (
|
|
||||||
<>
|
|
||||||
{/* @ts-ignore */}
|
|
||||||
<div key={idx} className={classNames(componentName + '-btns-btn')}>
|
|
||||||
{item.icon}
|
|
||||||
<span onClick={item.onClick} className={classNames(componentName + '-btns-btn-label', item.className)}>{item.label}</span>
|
|
||||||
</div>
|
|
||||||
{idx % 2 !== 0 && (<br/>)}
|
|
||||||
</>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 初始化标签面板
|
|
||||||
* @param _tagList
|
|
||||||
* @param sort 是否分类
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
const initTagPanel = (_tagList: TreePanelProps['tagList'], sort?: boolean) => {
|
|
||||||
// 正常标签渲染
|
|
||||||
const commonTag = (_tagProps: ITag) => (
|
|
||||||
<span
|
|
||||||
className={classNames(
|
|
||||||
componentName + '-tags-tag_common',
|
|
||||||
{[componentName + '-tags-tag_checked']: checkedTags.includes(_tagProps.value)}
|
|
||||||
)}
|
|
||||||
key={_tagProps.value}
|
|
||||||
onClick={() => onTagCheck?.(_tagProps.value, _tagProps)}
|
|
||||||
>{_tagProps.label}</span>
|
|
||||||
)
|
|
||||||
// 包装父级标签
|
|
||||||
const _withFather = (tag: ITag) => (
|
|
||||||
<div key={tag.value}>
|
|
||||||
<span className={classNames(componentName + '-tags-tag')}>{tag.label}</span>
|
|
||||||
{tag.children?.map?.(_tag => commonTag(_tag))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
return _tagList?.map(tag => {
|
|
||||||
if (tag.children?.length && sort) {
|
|
||||||
return _withFather(tag)
|
|
||||||
} else {
|
|
||||||
return commonTag(tag)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={componentName}>
|
|
||||||
{/* 搜索栏 */}
|
|
||||||
{showSearchBar && (
|
|
||||||
<div className={classNames(componentName + '-search')}>
|
|
||||||
<Input
|
|
||||||
className={classNames(componentName + '-search-input')}
|
|
||||||
onChange={(e) => onSearch?.(e)}
|
|
||||||
placeholder='请输入盒子名称'
|
|
||||||
{...searchInputProps}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* 搜索栏 */}
|
|
||||||
{showSelectBar && (
|
|
||||||
<div className={classNames(componentName + '-search')}>
|
|
||||||
<Select
|
|
||||||
className={classNames(componentName + '-search-input')}
|
|
||||||
onChange={onSelect}
|
|
||||||
{...filterSelectProps}
|
|
||||||
/>
|
|
||||||
{customFilter || (!noFilter && (
|
|
||||||
<div
|
|
||||||
className={classNames(componentName + '-search-btns')}
|
|
||||||
>
|
|
||||||
{/* @ts-ignore */}
|
|
||||||
{initFilter(filterList)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{showTagPanel && (
|
|
||||||
<div className={classNames(componentName + '-tags')}>
|
|
||||||
<div className={classNames(componentName + '-tags-title')}>
|
|
||||||
标签
|
|
||||||
<div
|
|
||||||
className={classNames(
|
|
||||||
componentName + '-tags-tag_option',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{tagExpandAll && (
|
|
||||||
<span
|
|
||||||
className={classNames(componentName + '-tags-tag_option-btn')}
|
|
||||||
onClick={onResetTags}
|
|
||||||
>重置</span>
|
|
||||||
)}
|
|
||||||
<span
|
|
||||||
className={classNames(componentName + '-tags-tag_option-btn')}
|
|
||||||
onClick={onTagExpand}
|
|
||||||
>{tagExpandAll ? '收起' : '展开'}<IconFont icon={tagExpandAll ? 'icon-shangjiantou' : 'icon-xiajiantou'} /></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{initTagPanel(tagList, tagExpandAll)}
|
|
||||||
{tagFootRender}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* 默认操作按钮 */}
|
|
||||||
{showOptions && (
|
|
||||||
<div className={classNames(componentName + '-btns')}>
|
|
||||||
{initOptions(optionList)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{extra}
|
|
||||||
<CurrentTree
|
|
||||||
className={classNames(componentName + '-tree')}
|
|
||||||
treeData={data}
|
|
||||||
showIcon={false}
|
|
||||||
blockNode
|
|
||||||
onSelect={onItemSelect}
|
|
||||||
onCheck={onItemCheck}
|
|
||||||
{...treeProps}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TreePanel
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
import React, {} from 'react';
|
|
||||||
import { TreePanel } from '@zhst/biz';
|
|
||||||
import { Badge, Checkbox } from '@zhst/meta'
|
|
||||||
import { boxDataSource } from './mock'
|
|
||||||
import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
const demo = () => {
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
|
|
||||||
<TreePanel
|
|
||||||
data={boxDataSource}
|
|
||||||
showSelectBar
|
|
||||||
filterList={[
|
|
||||||
{
|
|
||||||
label: '过滤',
|
|
||||||
key: 'multi',
|
|
||||||
icon: <FilterOutlined />,
|
|
||||||
type: 'dropdown',
|
|
||||||
showTooltip: false,
|
|
||||||
dropdownConfig: {
|
|
||||||
menu: {
|
|
||||||
// 自定义返回项
|
|
||||||
_internalRenderMenuItem: (originNode, menuItemProps, stateProps) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{originNode}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
selectable: true,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: <p style={{ margin: '0', textAlign: 'center' }} >全部</p>,
|
|
||||||
key: 'all',
|
|
||||||
onClick: () => console.log('多选1')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Badge status="success" />,
|
|
||||||
label: '多选1',
|
|
||||||
key: 'multi1',
|
|
||||||
onClick: () => console.log('多选1')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '多选2',
|
|
||||||
icon: <Badge status='error' />,
|
|
||||||
key: 'multi2',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '过滤',
|
|
||||||
key: 'ee',
|
|
||||||
icon: <FilterOutlined />,
|
|
||||||
showTooltip: false,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
extra={(
|
|
||||||
<div style={{ border: '1px solid red' }}>
|
|
||||||
<span><Checkbox>全选</Checkbox></span>
|
|
||||||
<a style={{ float: 'right', color: '#09f' }} >批量操作</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
optionList={[
|
|
||||||
{
|
|
||||||
label: '导入盒子',
|
|
||||||
key: 'import',
|
|
||||||
icon: <ImportOutlined />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '新建组',
|
|
||||||
key: 'add',
|
|
||||||
icon: <FolderAddOutlined />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '删除',
|
|
||||||
key: 'del',
|
|
||||||
icon: <CloseCircleOutlined />,
|
|
||||||
props: {
|
|
||||||
danger: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default demo;
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { TreeData } from "@zhst/biz";
|
|
||||||
|
|
||||||
export const boxDataSource: TreeData[] = [
|
|
||||||
{
|
|
||||||
title: '全部盒子',
|
|
||||||
key: '0-0',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: '盒子组1',
|
|
||||||
key: '0-0-0',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: '摄像头1',
|
|
||||||
key: '0-0-0-0',
|
|
||||||
isCamera: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '摄像头2',
|
|
||||||
key: '0-0-0-1',
|
|
||||||
isCamera: true
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '盒子组2',
|
|
||||||
key: '0-0-1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: '摄像头4',
|
|
||||||
key: '0-0-1-0',
|
|
||||||
isCamera: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
|
|
||||||
export const treeData: TreeData[] = [
|
|
||||||
{ key: '0-1-0', title: '分组0-1-0', isLeaf: true, checkable: false },
|
|
||||||
{ key: '0-1-1', title: '分组0-1-1', isLeaf: true, checkable: false },
|
|
||||||
{ key: '0-1-2', title: '分组0-1-2', isLeaf: true, checkable: false },
|
|
||||||
{
|
|
||||||
key: '0-1-3',
|
|
||||||
title: '分组0-1-3',
|
|
||||||
isLeaf: false,
|
|
||||||
children: [
|
|
||||||
{ key: '0-1-3-1', title: '分组0-1-3-1', isLeaf: true, isCamera: true },
|
|
||||||
{ key: '0-1-3-2', title: '分组0-1-3-2', isLeaf: true, isCamera: true },
|
|
||||||
{ key: '0-1-3-3', title: '分组0-1-3-3', isLeaf: true, isCamera: true },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import React, { useState, useRef } from 'react';
|
|
||||||
import { TreePanel } from '@zhst/biz';
|
|
||||||
import { boxDataSource } from './mock'
|
|
||||||
|
|
||||||
const demo = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
|
|
||||||
<TreePanel
|
|
||||||
data={boxDataSource}
|
|
||||||
treeType='normal'
|
|
||||||
showSelectBar
|
|
||||||
filterSelectProps={{
|
|
||||||
placeholder: '请输入',
|
|
||||||
options: [
|
|
||||||
{ label: '测试', key: '123', value: 'test' }
|
|
||||||
]
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default demo;
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
import React, { useState, useRef } from 'react';
|
|
||||||
import { TreePanel } from '@zhst/biz';
|
|
||||||
import { Badge, Checkbox } from '@zhst/meta'
|
|
||||||
import { treeData, boxDataSource } from './mock'
|
|
||||||
import { ImportOutlined, FolderAddOutlined, CloseCircleOutlined, FilterOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
const demo = () => {
|
|
||||||
const [checkedTags, setCheckedTags] = useState<string[]>([]);
|
|
||||||
const [tagExpandAll, setTagExpandAll] = useState(false);
|
|
||||||
const [showTagPanel, setShowTagPanel] = useState(true);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: '12px', width: '240px', border: '1px solid #09f' }}>
|
|
||||||
<TreePanel
|
|
||||||
data={boxDataSource}
|
|
||||||
showTagPanel={showTagPanel}
|
|
||||||
tagExpandAll={tagExpandAll}
|
|
||||||
showSelectBar
|
|
||||||
onTagCheck={(value) => setCheckedTags(pre => {
|
|
||||||
if (pre.includes(value)) {
|
|
||||||
return pre.filter(item => item !== value)
|
|
||||||
} else {
|
|
||||||
return [...pre, value]
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
onResetTags={() => setCheckedTags([])}
|
|
||||||
checkedTags={checkedTags}
|
|
||||||
filterList={[
|
|
||||||
{
|
|
||||||
label: '过滤',
|
|
||||||
key: 'multi',
|
|
||||||
icon: <FilterOutlined />,
|
|
||||||
type: 'dropdown',
|
|
||||||
showTooltip: false,
|
|
||||||
dropdownConfig: {
|
|
||||||
menu: {
|
|
||||||
// 自定义返回项
|
|
||||||
_internalRenderMenuItem: (originNode, menuItemProps, stateProps) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{originNode}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
selectable: true,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: <p style={{ margin: '0', textAlign: 'center' }} >全部</p>,
|
|
||||||
key: 'all',
|
|
||||||
onClick: () => console.log('多选1')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: <Badge status="success" />,
|
|
||||||
label: '多选1',
|
|
||||||
key: 'multi1',
|
|
||||||
onClick: () => console.log('多选1')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '多选2',
|
|
||||||
icon: <Badge status='error' />,
|
|
||||||
key: 'multi2',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
extra={(
|
|
||||||
<div>
|
|
||||||
<span><Checkbox>全选</Checkbox></span>
|
|
||||||
<a style={{ float: 'right', color: '#09f' }} >批量操作</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
optionList={[
|
|
||||||
{
|
|
||||||
label: '导入盒子',
|
|
||||||
key: 'import',
|
|
||||||
icon: <ImportOutlined />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '新建组',
|
|
||||||
key: 'add',
|
|
||||||
icon: <FolderAddOutlined />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '删除',
|
|
||||||
key: 'del',
|
|
||||||
icon: <CloseCircleOutlined />,
|
|
||||||
props: {
|
|
||||||
danger: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
tagList={[
|
|
||||||
{
|
|
||||||
label: '标签组1',
|
|
||||||
value: '1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '标签1-1',
|
|
||||||
value: '1-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标签1-2',
|
|
||||||
value: '1-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标签组2',
|
|
||||||
value: '2',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: '标签2-1',
|
|
||||||
value: '2-1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标签2-2',
|
|
||||||
value: '2-2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
onTagExpand={() => {
|
|
||||||
setTagExpandAll(pre => !pre)
|
|
||||||
setCheckedTags([])
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default demo;
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
.zhst-biz-tree-panel {
|
|
||||||
&-search {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&-input {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-btns {
|
|
||||||
flex: none;
|
|
||||||
&-btn {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-btns {
|
|
||||||
&-btn {
|
|
||||||
margin-right: 16px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: .3s ease all;
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
&-label {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-common {
|
|
||||||
flex: 1;
|
|
||||||
padding: 4px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-import {
|
|
||||||
padding: 4px 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-tags {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f7f7f7;
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #595959;
|
|
||||||
line-height: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-tag {
|
|
||||||
margin-right: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #595959;
|
|
||||||
font-size: 14px;
|
|
||||||
transition:.3s ease all;
|
|
||||||
|
|
||||||
&_common {
|
|
||||||
margin-top: 6px;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 8px;
|
|
||||||
padding: 2px 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #191919;
|
|
||||||
background-color: #EBEBEB;
|
|
||||||
transition: .3s ease all;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #09f;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&_checked {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #09f;
|
|
||||||
}
|
|
||||||
|
|
||||||
&_fz12 {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&_option {
|
|
||||||
float: right;
|
|
||||||
&-btn {
|
|
||||||
margin-left: 12px;
|
|
||||||
color: #09f;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: .3s ease all;
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&_absolute {
|
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-tree {
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
---
|
|
||||||
category: Components
|
|
||||||
title: TreePanel 树面板
|
|
||||||
toc: content
|
|
||||||
demo:
|
|
||||||
cols: 2
|
|
||||||
group:
|
|
||||||
title: 数据展示
|
|
||||||
---
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
<code src="./demo/basic.tsx">基本用法</code>
|
|
||||||
<code src="./demo/normal.tsx">普通树</code>
|
|
||||||
<code src="./demo/withTags.tsx">标签面板</code>
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
||||||
| --- | --- | --- | --- | --- |
|
|
||||||
| treeType | 树的类型 | 'directory' 'normal' | directory | --- |
|
|
||||||
| searchInputProps | antd-inputProps | --- | --- | --- |
|
|
||||||
| showOptions | --- | boolean | --- | --- |
|
|
||||||
| treeProps | --- | antd-treeProps | --- | --- |
|
|
||||||
| data | --- | TreeDataNode[] | [] | --- |
|
|
||||||
| onSearch | --- | (e: any) => void | - | --- |
|
|
||||||
| onItemCheck | --- | TreeProps['onCheck'] | - | --- |
|
|
||||||
| onItemSelect | --- | TreeProps['onSelect'] | - | --- |
|
|
||||||
| customImport | 自定义搜索栏边上的过滤图标 | ReactNode 、string | - | --- |
|
|
||||||
| extra | 数组件上方插槽 | ReactNode 、string | --- | --- |
|
|
||||||
| prefixCls | class前缀，用于覆盖class | string | --- | --- |
|
|
||||||
| showSelectBar | 显示搜索框 | boolean | false | --- |
|
|
||||||
| filterSelectProps | 搜索框 | antd-SelectProps | - | --- |
|
|
||||||
| showSearchBar | 显示搜索框 | boolean | false | --- |
|
|
||||||
| noFilter | 是否显示搜索拓展 | boolean | false | --- |
|
|
||||||
| filterList | 过滤插槽列表 | IOption[] | [] | --- |
|
|
||||||
| optionList | 操作按钮列表 | IOption[] | [] | --- |
|
|
||||||
| showTagPanel | 显示标签插槽 | boolean | false | --- |
|
|
||||||
| tagList | 标签列表 | ITag[] | [] | --- |
|
|
||||||
| onSelect | 搜索选中事件 | SelectProps['onChange'] | - | --- |
|
|
||||||
| tagExpandAll | 标签展开状态 | boolean | false | --- |
|
|
||||||
| onTagCheck | 标签点击事件 | (value: string, tag: ITag) => void; | false | --- |
|
|
||||||
| checkedTags | 标签选中状态 | string[] | [] | --- |
|
|
||||||
| onResetTags | 重置标签事件 | () => void | - | --- |
|
|
||||||
| onTagExpand | 标签展开事件 | (e: any) => void | - | --- |
|
|
||||||
| tagFootRender | 标签展开状态 | ReactNode， string | false | --- |
|
|
||||||
|
|
||||||
### IOption
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface IOption {
|
|
||||||
label: string
|
|
||||||
key: string
|
|
||||||
icon?: string | ReactNode
|
|
||||||
disabled?: boolean;
|
|
||||||
showTooltip?: boolean;
|
|
||||||
onClick?: () => void
|
|
||||||
className?: string;
|
|
||||||
dropdownConfig?: DropDownProps
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### ITag
|
|
||||||
|
|
||||||
```ts
|
|
||||||
interface ITag {
|
|
||||||
label: string
|
|
||||||
value: string
|
|
||||||
icon?: ReactNode
|
|
||||||
parentNode?: string
|
|
||||||
children?: ITag[]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 组件设计
|
|
||||||
|
|
||||||
该组件包含以下功能：
|
|
||||||
|
|
||||||
1. 顶部按钮支持
|
|
||||||
2. 输入框单行展示
|
|
||||||
3. 选择框和筛选框同一行
|
|
||||||
4. 按钮列表
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
/**
|
|
||||||
* Created by jiangzhixiong on 2024/06/04
|
|
||||||
*/
|
|
||||||
import TreePanel from './TreePanel'
|
|
||||||
export type { TreePanelProps } from './TreePanel'
|
|
||||||
|
|
||||||
export default TreePanel
|
|
||||||
@ -1,84 +1,27 @@
|
|||||||
import React, { ReactNode, useContext } from 'react';
|
import React, { ReactNode } from 'react';
|
||||||
import { Button, Input, ConfigProvider, theme, Flex, InputProps, TabsProps, Tabs, ButtonProps, Tree, TreeProps, DataNode as TreeDataNode } from '@zhst/meta'
|
import { Button, ConfigProvider, theme, Flex, InputProps, TabsProps, Tabs, ButtonProps, Tree, TreeProps, DataNode as TreeDataNode } from '@zhst/meta'
|
||||||
|
import { Input } from 'antd'
|
||||||
import { IconFont } from '@zhst/icon'
|
import { IconFont } from '@zhst/icon'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
|
|
||||||
const { ConfigContext } = ConfigProvider
|
const componentName = 'zhst-biz-treeTransfer'
|
||||||
|
|
||||||
export interface TreeTransferProps {
|
export interface TreeTransferProps {
|
||||||
customizePrefixCls?: string
|
|
||||||
/**
|
|
||||||
* @description 自定义标题
|
|
||||||
* @array []
|
|
||||||
*/
|
|
||||||
titles?: string[] | ReactNode[]
|
titles?: string[] | ReactNode[]
|
||||||
/**
|
|
||||||
* @description 边框
|
|
||||||
*/
|
|
||||||
bordered?: boolean
|
|
||||||
/**
|
|
||||||
* @description
|
|
||||||
* 树的数据结构 ，参考antd-treeData
|
|
||||||
*/
|
|
||||||
dataSource: TreeDataNode[]
|
dataSource: TreeDataNode[]
|
||||||
/**
|
|
||||||
* @description 树的透传参数
|
|
||||||
*/
|
|
||||||
treeProps?: TreeProps
|
treeProps?: TreeProps
|
||||||
/**
|
|
||||||
* 是否显示左侧树面板的搜索
|
|
||||||
*/
|
|
||||||
showLeftSearch?: boolean
|
showLeftSearch?: boolean
|
||||||
/**
|
|
||||||
* @description 搜索的透传
|
|
||||||
*/
|
|
||||||
searchInputProps?: InputProps
|
searchInputProps?: InputProps
|
||||||
/**
|
|
||||||
* @description 选中的对象
|
|
||||||
*/
|
|
||||||
targetItems: TreeDataNode[];
|
targetItems: TreeDataNode[];
|
||||||
/**
|
|
||||||
* @description 选中对象的id
|
|
||||||
*/
|
|
||||||
checkedKeys: string[];
|
checkedKeys: string[];
|
||||||
/**
|
|
||||||
* @description 是否显示搜索框边上的过滤条件
|
|
||||||
*/
|
|
||||||
showFilter?: boolean;
|
showFilter?: boolean;
|
||||||
/**
|
|
||||||
* @description 是否显示左侧看板底部渲染
|
|
||||||
*/
|
|
||||||
showLeftPanelFooter?: boolean;
|
showLeftPanelFooter?: boolean;
|
||||||
/**
|
|
||||||
* @description 左侧看板底部渲染
|
|
||||||
*/
|
|
||||||
leftPanelFooterRender?: ReactNode | string;
|
leftPanelFooterRender?: ReactNode | string;
|
||||||
/**
|
|
||||||
* @description 是否显示右侧看板底部渲染
|
|
||||||
*/
|
|
||||||
showRightPanelFooter?: boolean;
|
showRightPanelFooter?: boolean;
|
||||||
/**
|
|
||||||
* 右侧看板底部渲染
|
|
||||||
* @param events
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
rightPanelFooterRender?: (events: { onOk: TreeTransferProps['onOk'], onReset: TreeTransferProps['onReset'] }) => ReactNode | string;
|
rightPanelFooterRender?: (events: { onOk: TreeTransferProps['onOk'], onReset: TreeTransferProps['onReset'] }) => ReactNode | string;
|
||||||
/**
|
|
||||||
* @description 左侧看板宽度
|
|
||||||
*/
|
|
||||||
leftPanelWidth?: string | number;
|
leftPanelWidth?: string | number;
|
||||||
/**
|
|
||||||
* @description 右侧看板宽度
|
|
||||||
*/
|
|
||||||
rightPanelWidth?: string | number;
|
rightPanelWidth?: string | number;
|
||||||
/**
|
|
||||||
* @description 左侧看板滚动高度
|
|
||||||
*/
|
|
||||||
leftPanelScrollY?: number;
|
leftPanelScrollY?: number;
|
||||||
/**
|
|
||||||
* @description 右侧看板滚动高度
|
|
||||||
*/
|
|
||||||
middleIcon?: ReactNode | string
|
|
||||||
rightPanelScrollY?: number;
|
rightPanelScrollY?: number;
|
||||||
tabsItems?: TabsProps['items']
|
tabsItems?: TabsProps['items']
|
||||||
showLeftTabs?: boolean
|
showLeftTabs?: boolean
|
||||||
@ -101,23 +44,20 @@ export interface TreeTransferProps {
|
|||||||
|
|
||||||
const { useToken } = theme
|
const { useToken } = theme
|
||||||
|
|
||||||
const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
const TreeTransfer: React.FC<TreeTransferProps> = ({
|
||||||
const { getPrefixCls } = useContext(ConfigContext);
|
|
||||||
const componentName = getPrefixCls('biz-treeTransfer', props.customizePrefixCls);
|
|
||||||
const {
|
|
||||||
dataSource,
|
dataSource,
|
||||||
treeProps,
|
treeProps,
|
||||||
titles = ['可选择的范围', '已选择的范围'],
|
titles = ['可选择的范围', '已选择的范围'],
|
||||||
bordered,
|
|
||||||
searchInputProps,
|
searchInputProps,
|
||||||
showLeftSearch = true,
|
showLeftSearch = true,
|
||||||
leftPanelScrollY = 300,
|
leftPanelScrollY = 300,
|
||||||
|
treeBackgroundColor = '#FCFCFC',
|
||||||
leftPanelWidth = 500,
|
leftPanelWidth = 500,
|
||||||
rightPanelScrollY = 422,
|
rightPanelScrollY = 422,
|
||||||
rightPanelWidth = 300,
|
rightPanelWidth = 300,
|
||||||
targetItems = [],
|
targetItems = [],
|
||||||
checkedKeys = [],
|
checkedKeys = [],
|
||||||
showFilter = false,
|
showFilter = true,
|
||||||
showLeftPanelFooter,
|
showLeftPanelFooter,
|
||||||
showRightPanelFooter = true,
|
showRightPanelFooter = true,
|
||||||
customLeftPanelContent,
|
customLeftPanelContent,
|
||||||
@ -125,7 +65,6 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
|||||||
rightPanelFooterRender,
|
rightPanelFooterRender,
|
||||||
showLeftTabs,
|
showLeftTabs,
|
||||||
leftTabsProps,
|
leftTabsProps,
|
||||||
middleIcon,
|
|
||||||
activeTabKey,
|
activeTabKey,
|
||||||
tabsItems = [
|
tabsItems = [
|
||||||
{
|
{
|
||||||
@ -149,27 +88,19 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
|||||||
onSearch,
|
onSearch,
|
||||||
onOk,
|
onOk,
|
||||||
onReset
|
onReset
|
||||||
} = props
|
}) => {
|
||||||
|
|
||||||
const { token } = useToken()
|
const { token } = useToken()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={componentName}>
|
<div className={componentName}>
|
||||||
<div className={`${componentName}-left`}
|
<div className={`${componentName}-left`}
|
||||||
style={{
|
style={{ width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth }}
|
||||||
width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth,
|
|
||||||
border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`${componentName}-left_card`}
|
className={`${componentName}-left_card`}
|
||||||
style={{ backgroundColor: token.colorBgContainer }}
|
|
||||||
>
|
>
|
||||||
<div
|
<div className={`${componentName}-left_card_title`}>{titles?.[0]}</div>
|
||||||
className={`${componentName}-left_card_title`}
|
|
||||||
style={{ backgroundColor: '#f7f7f7' }}
|
|
||||||
>
|
|
||||||
{titles?.[0]}
|
|
||||||
</div>
|
|
||||||
{showLeftTabs && (
|
{showLeftTabs && (
|
||||||
<Tabs
|
<Tabs
|
||||||
activeKey={activeTabKey}
|
activeKey={activeTabKey}
|
||||||
@ -201,6 +132,16 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{customLeftPanelContent?.(dataSource) || (
|
{customLeftPanelContent?.(dataSource) || (
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
components: {
|
||||||
|
// @ts-ignore
|
||||||
|
Tree: {
|
||||||
|
colorBgContainer: treeBackgroundColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Tree
|
<Tree
|
||||||
className={`${componentName}-left_card-tree`}
|
className={`${componentName}-left_card-tree`}
|
||||||
blockNode
|
blockNode
|
||||||
@ -212,6 +153,7 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
|||||||
onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
|
onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
|
||||||
{...treeProps}
|
{...treeProps}
|
||||||
/>
|
/>
|
||||||
|
</ConfigProvider>
|
||||||
)}
|
)}
|
||||||
{showLeftPanelFooter && (
|
{showLeftPanelFooter && (
|
||||||
<div className={`${componentName}-left_card-footer`}>
|
<div className={`${componentName}-left_card-footer`}>
|
||||||
@ -221,22 +163,15 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={`${componentName}-middle`}>
|
<div className={`${componentName}-middle`}>
|
||||||
{middleIcon || <IconFont icon="icon-zhankai" />}
|
<IconFont icon="icon-zhankai" />
|
||||||
</div>
|
</div>
|
||||||
<div className={`${componentName}-right`}
|
<div className={`${componentName}-right`}
|
||||||
style={{
|
style={{ width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth }}
|
||||||
width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth,
|
|
||||||
border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`${componentName}-right_card`}
|
className={`${componentName}-right_card`}
|
||||||
style={{ backgroundColor: token.colorBgContainer }}
|
|
||||||
>
|
>
|
||||||
<div
|
<div className={`${componentName}-right_card_title`} >{titles?.[1]}</div>
|
||||||
className={`${componentName}-right_card_title`}
|
|
||||||
style={{ backgroundColor: '#f7f7f7' }}
|
|
||||||
>{titles?.[1]}</div>
|
|
||||||
<div
|
<div
|
||||||
className={`${componentName}-right_card__items`}
|
className={`${componentName}-right_card__items`}
|
||||||
style={{ height: typeof rightPanelScrollY === 'number' ? rightPanelScrollY + 'px' : rightPanelScrollY}}
|
style={{ height: typeof rightPanelScrollY === 'number' ? rightPanelScrollY + 'px' : rightPanelScrollY}}
|
||||||
|
|||||||
@ -1,71 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { TreeTransfer } from '@zhst/biz';
|
|
||||||
import { TreeDataNode } from 'antd';
|
|
||||||
import { TreeProps } from 'antd/lib';
|
|
||||||
import { boxDataSource } from './mock'
|
|
||||||
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
|
|
||||||
const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
|
|
||||||
|
|
||||||
const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
|
|
||||||
let _targetItems: TreeDataNode[] = []
|
|
||||||
setCheckedKeys(keys)
|
|
||||||
info.checkedNodes.forEach(o => {
|
|
||||||
o.isLeaf && _targetItems.push(o)
|
|
||||||
})
|
|
||||||
setTargetItems(_targetItems)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除
|
|
||||||
* @param key
|
|
||||||
* @param param1
|
|
||||||
*/
|
|
||||||
const onItemDelete = (key: any, { keys = [] }: any) => {
|
|
||||||
setCheckedKeys(pre => {
|
|
||||||
const newKeys = pre.filter(_key => _key !== key)
|
|
||||||
console.log('newKeys', newKeys, keys)
|
|
||||||
return newKeys
|
|
||||||
})
|
|
||||||
setTargetItems(pre => pre.filter(o => o.key !== key))
|
|
||||||
}
|
|
||||||
|
|
||||||
const onOk = (data: any) => {
|
|
||||||
console.log('data', data)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onReset = () => {
|
|
||||||
setCheckedKeys([])
|
|
||||||
setTargetItems([])
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ padding: 24 }}>
|
|
||||||
<TreeTransfer
|
|
||||||
leftPanelWidth={800}
|
|
||||||
rightPanelWidth={500}
|
|
||||||
bordered
|
|
||||||
titles={[
|
|
||||||
<div style={{ textAlign: 'left' }}>可选择的范围(123)</div>,
|
|
||||||
(
|
|
||||||
<div onClick={onReset} style={{ textAlign: 'left' }}>已选范围(123)<a style={{ float: 'right' }}>清空</a></div>
|
|
||||||
),
|
|
||||||
]}
|
|
||||||
showRightPanelFooter={false}
|
|
||||||
dataSource={boxDataSource}
|
|
||||||
targetItems={targetItems}
|
|
||||||
checkedKeys={checkedKeys}
|
|
||||||
onTreeCheck={onTreeCheck}
|
|
||||||
onItemDelete={onItemDelete}
|
|
||||||
onOk={onOk}
|
|
||||||
onReset={onReset}
|
|
||||||
searchInputProps={{
|
|
||||||
onChange: e => console.log('123123')
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@ -2,8 +2,6 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
&-left {
|
&-left {
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
&_card {
|
&_card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -35,17 +33,13 @@
|
|||||||
|
|
||||||
&_search {
|
&_search {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 16px 20px;
|
margin: 8px;
|
||||||
&_input {
|
&_input {
|
||||||
flex: 1;
|
margin-right: 8px;
|
||||||
}
|
|
||||||
&_filters {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-tree {
|
&-tree {
|
||||||
margin: 0 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&-footer {
|
&-footer {
|
||||||
@ -66,8 +60,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-right {
|
&-right {
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
&_card {
|
&_card {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 544px;
|
min-height: 544px;
|
||||||
@ -82,8 +74,10 @@
|
|||||||
|
|
||||||
&__items {
|
&__items {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: calc(100% - 105px);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
max-height: 422px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
|
|||||||
@ -16,7 +16,6 @@ group:
|
|||||||
<code src="./demo/withFilter.tsx">加载filter按钮</code>
|
<code src="./demo/withFilter.tsx">加载filter按钮</code>
|
||||||
<code src="./demo/withMap.tsx">和地图组件搭配使用</code>
|
<code src="./demo/withMap.tsx">和地图组件搭配使用</code>
|
||||||
<code src="./demo/withModal.tsx">和Modal组合使用</code>
|
<code src="./demo/withModal.tsx">和Modal组合使用</code>
|
||||||
<code src="./demo/mingmou.tsx">明眸同款</code>
|
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
|
|||||||
@ -1,16 +1,17 @@
|
|||||||
import React, { FC, useState } from 'react';
|
import React, { FC, useState } from 'react';
|
||||||
import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, DataNode, TreeProps } from '@zhst/meta';
|
import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from 'antd';
|
||||||
import TreeTransfer from '../treeTransfer';
|
import TreeTransfer from '../treeTransfer';
|
||||||
import { TreeTransferProps } from '../treeTransfer'
|
import { TreeTransferProps } from '../treeTransfer'
|
||||||
|
|
||||||
export interface TreeTransferModalProps {
|
export interface TreeTransferModalProps {
|
||||||
dataSource: DataNode[]
|
dataSource: TreeDataNode[]
|
||||||
treeProps?: TreeProps
|
treeProps?: TreeProps
|
||||||
targetItems: DataNode[];
|
targetItems: TreeDataNode[];
|
||||||
checkedKeys: string[];
|
checkedKeys: string[];
|
||||||
onTreeSelect?: TreeProps['onSelect']
|
onTreeSelect?: TreeProps['onSelect']
|
||||||
onTreeCheck?: TreeProps['onCheck']
|
onTreeCheck?: TreeProps['onCheck']
|
||||||
onItemDelete?: TreeTransferProps['onItemDelete']
|
onItemDelete?: TreeTransferProps['onItemDelete']
|
||||||
|
onChange?: TransferProps['onChange'];
|
||||||
onOk?: (data: any) => void;
|
onOk?: (data: any) => void;
|
||||||
onReset?: () => void;
|
onReset?: () => void;
|
||||||
open?: boolean
|
open?: boolean
|
||||||
|
|||||||
@ -1,11 +1,5 @@
|
|||||||
# @zhst/biz
|
# @zhst/biz
|
||||||
|
|
||||||
## 0.7.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- 修改 less to css 配置
|
|
||||||
|
|
||||||
## 0.6.2
|
## 0.6.2
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|||||||
30
packages/constants/es/base/index.js
Normal file
30
packages/constants/es/base/index.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
export var OBJECT_GRNER_THRESHOLD = 0.8; //目标图判断性别阈值
|
||||||
|
export var OBJECT_AGE_TYPE_THRESHOLD = 0.5; //目标图判断年龄段阈值
|
||||||
|
export var MODE_KEY = 'test_mode';
|
||||||
|
//业务约定
|
||||||
|
export var SEARCH_IMG_COUNT = 10; //检索图片的最大个数
|
||||||
|
export var GLOBAL_IS_ITEM_NUMBER_SHOW = false; //是否展示索引
|
||||||
|
export var publicPath = 'hummingbird';
|
||||||
|
export var ENTER_CIRCLE = 'MONITORTYPE_ENTER_CIRCLE';
|
||||||
|
export var OUT_CIRCLE = 'MONITORTYPE_OUT_CIRCLE';
|
||||||
|
export var TEMP = 'MONITORTYPE_TEMP';
|
||||||
|
export var GLOBAL_IS_BOX_VMS_SHOW = true; //是否展示盒子vms
|
||||||
|
|
||||||
|
export var BODY_SEARCH_THRESHOID = 0.45; //形体检索阈值
|
||||||
|
export var RECORD_VERSION = '3.0.0'; //保存记录的版本号
|
||||||
|
|
||||||
|
export var DeviceTab = {
|
||||||
|
EMPTY: 0,
|
||||||
|
REAL_CAMERA: 1,
|
||||||
|
PREPROCESS_CAMERA: 2,
|
||||||
|
//摄像头列表
|
||||||
|
TAG_CAMERA: 3,
|
||||||
|
//预案列表
|
||||||
|
HISTORY_VIDEO_GROUP: 4,
|
||||||
|
//录像回放
|
||||||
|
VIRTUAL_CAMERA: 5,
|
||||||
|
//离线视频
|
||||||
|
REAL_CAMERA_NOFACE: 6,
|
||||||
|
REAL_CAMERA_ONLYFACE: 7,
|
||||||
|
REAL_CAMERA_NOFACE_NOBOX_NODIRECONNECT: 8 // 只有普通摄像头，没有人脸、没有盒子、直连
|
||||||
|
};
|
||||||
1
packages/constants/es/camera/index.js
Normal file
1
packages/constants/es/camera/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export var TYPE = '';
|
||||||
3
packages/constants/es/index.js
Normal file
3
packages/constants/es/index.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export * from "./camera";
|
||||||
|
export * from "./base";
|
||||||
|
export * from "./user";
|
||||||
1
packages/constants/es/user/index.js
Normal file
1
packages/constants/es/user/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default {};
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@zhst/constants",
|
"name": "@zhst/constants",
|
||||||
"version": "0.7.0",
|
"version": "0.6.2",
|
||||||
"description": "常量库",
|
"description": "常量库",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"constants",
|
"constants",
|
||||||
|
|||||||
@ -1,16 +1,5 @@
|
|||||||
# @zhst/utils
|
# @zhst/utils
|
||||||
|
|
||||||
## 0.17.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- 修改 less to css 配置
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies
|
|
||||||
- @zhst/request@0.17.0
|
|
||||||
|
|
||||||
## 0.16.1
|
## 0.16.1
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|||||||
1
packages/func/dist/func.min.js
vendored
Normal file
1
packages/func/dist/func.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
41
packages/func/es/camera/constants.d.ts
vendored
Normal file
41
packages/func/es/camera/constants.d.ts
vendored
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
/**
|
||||||
|
* 设备类型枚举
|
||||||
|
*/
|
||||||
|
export declare const DeviceType: {
|
||||||
|
VMS: string;
|
||||||
|
DIR: string;
|
||||||
|
CAMERA: string;
|
||||||
|
};
|
||||||
|
export declare const LOCAL_KEY = "local";
|
||||||
|
export declare const DIRE_CONNECT_KEY = "direconnect";
|
||||||
|
export declare const BOX_LIST_KEY = "boxlist";
|
||||||
|
export declare enum VmsplatformOpt {
|
||||||
|
VMSPLATFORMOPT_ID = 0,
|
||||||
|
VMSPLATFORMOPT_PLATFORMNAME = 1,
|
||||||
|
VMSPLATFORMOPT_PLUGINNAME = 2,
|
||||||
|
VMSPLATFORMOPT_IP = 3,
|
||||||
|
VMSPLATFORMOPT_PORT = 4,
|
||||||
|
VMSPLATFORMOPT_USERNAME = 5,
|
||||||
|
VMSPLATFORMOPT_PASSWORD = 6
|
||||||
|
}
|
||||||
|
export declare enum OPT {
|
||||||
|
OR = 0,
|
||||||
|
AND = 1,
|
||||||
|
ORNOT = 2,
|
||||||
|
ANDNOT = 3
|
||||||
|
}
|
||||||
|
export declare enum DevicemanagerCameraType {
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_DEFAULT = 0,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_NORMAL = 1,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_1400 = 97,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_DHGRABBER = 98,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_HKGRABBER = 99,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_LOCAL = 100
|
||||||
|
}
|
||||||
|
export declare const BOX_DIRECONNECT_PLATFORM_FILTER: {
|
||||||
|
filtervmsplatformList: {
|
||||||
|
opt: OPT;
|
||||||
|
vmsplatformOpt: VmsplatformOpt;
|
||||||
|
value: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
50
packages/func/es/camera/constants.js
Normal file
50
packages/func/es/camera/constants.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
/**
|
||||||
|
* 设备类型枚举
|
||||||
|
*/
|
||||||
|
export var DeviceType = {
|
||||||
|
VMS: 'vms',
|
||||||
|
DIR: 'dir',
|
||||||
|
CAMERA: 'camera'
|
||||||
|
};
|
||||||
|
export var LOCAL_KEY = 'local'; //离线摄像头key 约定
|
||||||
|
export var DIRE_CONNECT_KEY = 'direconnect';
|
||||||
|
export var BOX_LIST_KEY = 'boxlist';
|
||||||
|
export var VmsplatformOpt = /*#__PURE__*/function (VmsplatformOpt) {
|
||||||
|
VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_ID"] = 0] = "VMSPLATFORMOPT_ID";
|
||||||
|
VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PLATFORMNAME"] = 1] = "VMSPLATFORMOPT_PLATFORMNAME";
|
||||||
|
VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PLUGINNAME"] = 2] = "VMSPLATFORMOPT_PLUGINNAME";
|
||||||
|
VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_IP"] = 3] = "VMSPLATFORMOPT_IP";
|
||||||
|
VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PORT"] = 4] = "VMSPLATFORMOPT_PORT";
|
||||||
|
VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_USERNAME"] = 5] = "VMSPLATFORMOPT_USERNAME";
|
||||||
|
VmsplatformOpt[VmsplatformOpt["VMSPLATFORMOPT_PASSWORD"] = 6] = "VMSPLATFORMOPT_PASSWORD";
|
||||||
|
return VmsplatformOpt;
|
||||||
|
}({});
|
||||||
|
export var OPT = /*#__PURE__*/function (OPT) {
|
||||||
|
OPT[OPT["OR"] = 0] = "OR";
|
||||||
|
OPT[OPT["AND"] = 1] = "AND";
|
||||||
|
OPT[OPT["ORNOT"] = 2] = "ORNOT";
|
||||||
|
OPT[OPT["ANDNOT"] = 3] = "ANDNOT";
|
||||||
|
return OPT;
|
||||||
|
}({});
|
||||||
|
export var DevicemanagerCameraType = /*#__PURE__*/function (DevicemanagerCameraType) {
|
||||||
|
DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_DEFAULT"] = 0] = "DEVICEMANAGER_CAMERA_TYPE_DEFAULT";
|
||||||
|
DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_NORMAL"] = 1] = "DEVICEMANAGER_CAMERA_TYPE_NORMAL";
|
||||||
|
DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_1400"] = 97] = "DEVICEMANAGER_CAMERA_TYPE_1400";
|
||||||
|
DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_DHGRABBER"] = 98] = "DEVICEMANAGER_CAMERA_TYPE_DHGRABBER";
|
||||||
|
DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_HKGRABBER"] = 99] = "DEVICEMANAGER_CAMERA_TYPE_HKGRABBER";
|
||||||
|
DevicemanagerCameraType[DevicemanagerCameraType["DEVICEMANAGER_CAMERA_TYPE_LOCAL"] = 100] = "DEVICEMANAGER_CAMERA_TYPE_LOCAL";
|
||||||
|
return DevicemanagerCameraType;
|
||||||
|
}({});
|
||||||
|
|
||||||
|
// 盒子 直连 平台
|
||||||
|
export var BOX_DIRECONNECT_PLATFORM_FILTER = {
|
||||||
|
filtervmsplatformList: [{
|
||||||
|
opt: OPT.OR,
|
||||||
|
vmsplatformOpt: VmsplatformOpt.VMSPLATFORMOPT_PLATFORMNAME,
|
||||||
|
value: 'direconnect'
|
||||||
|
}, {
|
||||||
|
opt: OPT.OR,
|
||||||
|
vmsplatformOpt: VmsplatformOpt.VMSPLATFORMOPT_PLATFORMNAME,
|
||||||
|
value: 'boxlist'
|
||||||
|
}]
|
||||||
|
};
|
||||||
40
packages/func/es/camera/index.d.ts
vendored
Normal file
40
packages/func/es/camera/index.d.ts
vendored
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { DevicemanagerCameraType } from './constants';
|
||||||
|
export declare const isFaceCamera: (type: DevicemanagerCameraType) => boolean;
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param value 传入的数据 可以是 item（camera/vms/dirs）/ deviceID
|
||||||
|
* @param isId
|
||||||
|
*/
|
||||||
|
export declare function getDeviceType(value: {
|
||||||
|
[x: string]: any;
|
||||||
|
id: any;
|
||||||
|
} | string): any;
|
||||||
|
/**
|
||||||
|
* 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
|
||||||
|
* @param id 设备id
|
||||||
|
* @param type 设备类型
|
||||||
|
*/
|
||||||
|
export declare function deviceIDToDeviceKey(id: any, type: string, vmsId?: any): string;
|
||||||
|
/**
|
||||||
|
* 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
|
||||||
|
* @param item camera/vms/dirs
|
||||||
|
*/
|
||||||
|
export declare function deviceToDeviceKey(item: {
|
||||||
|
[x: string]: any;
|
||||||
|
id: any;
|
||||||
|
}): string;
|
||||||
|
/**
|
||||||
|
* 设备树key 转 后端设备原始id dirid是string/vms&camera 是number 和后端保持一致
|
||||||
|
* @param deviceKey 设备树的id
|
||||||
|
*/
|
||||||
|
export declare function deviceKeyToDeviceId(deviceKey: {
|
||||||
|
split: (arg0: string) => [any, any];
|
||||||
|
}): any;
|
||||||
|
export declare const getVmsIdByDeviceId: (key: string) => string;
|
||||||
|
/**
|
||||||
|
* 通过设备id或设备key在树里面找摄像头
|
||||||
|
* @param ids cameraId
|
||||||
|
* @param deviceTree 树
|
||||||
|
* @param type "id" | "key"
|
||||||
|
*/
|
||||||
|
export declare const findCamerasByInDeviceTree: (ids: never[] | undefined, deviceTree: any, type?: string) => any[];
|
||||||
142
packages/func/es/camera/index.js
Normal file
142
packages/func/es/camera/index.js
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
||||||
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||||
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
||||||
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
||||||
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
||||||
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||||
|
import { get, has, isString } from 'lodash-es';
|
||||||
|
import { loop } from "../utils";
|
||||||
|
import { DevicemanagerCameraType, DeviceType } from "./constants";
|
||||||
|
export var isFaceCamera = function isFaceCamera(type) {
|
||||||
|
return [DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_1400, DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_HKGRABBER, DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_DHGRABBER].includes(type);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param value 传入的数据 可以是 item（camera/vms/dirs）/ deviceID
|
||||||
|
* @param isId
|
||||||
|
*/
|
||||||
|
export function getDeviceType(value) {
|
||||||
|
var type;
|
||||||
|
var isDeviceKey = isString(value);
|
||||||
|
if (isDeviceKey) {
|
||||||
|
type = value.split('_')[0];
|
||||||
|
} else {
|
||||||
|
if (has(value, 'longitude')) {
|
||||||
|
type = DeviceType['CAMERA'];
|
||||||
|
}
|
||||||
|
if (has(value, 'ip')) {
|
||||||
|
type = DeviceType['VMS'];
|
||||||
|
}
|
||||||
|
if (!type) {
|
||||||
|
type = DeviceType['DIR'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return type;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
|
||||||
|
* @param id 设备id
|
||||||
|
* @param type 设备类型
|
||||||
|
*/
|
||||||
|
export function deviceIDToDeviceKey(id, type, vmsId) {
|
||||||
|
if (type == DeviceType['DIR']) {
|
||||||
|
return "".concat(type, "_").concat(id, "_").concat(vmsId);
|
||||||
|
} else {
|
||||||
|
return "".concat(type, "_").concat(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
|
||||||
|
* @param item camera/vms/dirs
|
||||||
|
*/
|
||||||
|
export function deviceToDeviceKey(item) {
|
||||||
|
var deviceKey = '';
|
||||||
|
var type = getDeviceType(item);
|
||||||
|
if (!type) {
|
||||||
|
console.error('device type is null!');
|
||||||
|
}
|
||||||
|
switch (type) {
|
||||||
|
case DeviceType['DIR']:
|
||||||
|
{
|
||||||
|
var dirId = item['dirid'] || item['dirId'];
|
||||||
|
if (!dirId && dirId !== 0) {
|
||||||
|
console.error('dirId type is null!');
|
||||||
|
}
|
||||||
|
var vmsId = get(item, 'extendInfo.vmsPlatformId');
|
||||||
|
if (!vmsId && vmsId !== 0) {
|
||||||
|
console.error('vmsId type is null!');
|
||||||
|
}
|
||||||
|
deviceKey = "".concat(type, "_").concat(dirId, "_").concat(vmsId);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case DeviceType['VMS']:
|
||||||
|
deviceKey = "".concat(type, "_").concat(item['id']);
|
||||||
|
break;
|
||||||
|
case DeviceType['CAMERA']:
|
||||||
|
{
|
||||||
|
var _vmsId = get(item, 'extendInfo.vmsPlatformId');
|
||||||
|
if (!_vmsId && _vmsId !== 0) {
|
||||||
|
console.error('vmsId type is null!');
|
||||||
|
}
|
||||||
|
deviceKey = "".concat(type, "_").concat(item.id);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return deviceKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备树key 转 后端设备原始id dirid是string/vms&camera 是number 和后端保持一致
|
||||||
|
* @param deviceKey 设备树的id
|
||||||
|
*/
|
||||||
|
export function deviceKeyToDeviceId(deviceKey) {
|
||||||
|
var _deviceKey$split = deviceKey.split('_'),
|
||||||
|
_deviceKey$split2 = _slicedToArray(_deviceKey$split, 2),
|
||||||
|
type = _deviceKey$split2[0],
|
||||||
|
id = _deviceKey$split2[1];
|
||||||
|
return type === DeviceType['DIR'] ? id : Number(id);
|
||||||
|
}
|
||||||
|
export var getVmsIdByDeviceId = function getVmsIdByDeviceId(key) {
|
||||||
|
var type = getDeviceType(key);
|
||||||
|
var vmsId = '';
|
||||||
|
switch (type) {
|
||||||
|
case DeviceType['CAMERA']:
|
||||||
|
case DeviceType['DIR']:
|
||||||
|
vmsId = key.split('_')[2];
|
||||||
|
break;
|
||||||
|
case DeviceType['VMS']:
|
||||||
|
vmsId = key.split('_')[1];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (!vmsId) {
|
||||||
|
console.error('vmsid is null!');
|
||||||
|
}
|
||||||
|
return vmsId;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过设备id或设备key在树里面找摄像头
|
||||||
|
* @param ids cameraId
|
||||||
|
* @param deviceTree 树
|
||||||
|
* @param type "id" | "key"
|
||||||
|
*/
|
||||||
|
export var findCamerasByInDeviceTree = function findCamerasByInDeviceTree() {
|
||||||
|
var ids = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
||||||
|
var deviceTree = arguments.length > 1 ? arguments[1] : undefined;
|
||||||
|
var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'id';
|
||||||
|
var cameraInfoList = [];
|
||||||
|
var _ids = ids.map(function (v) {
|
||||||
|
return String(v);
|
||||||
|
}); //都转string在做判断 保证格式一致
|
||||||
|
loop(deviceTree, function (item) {
|
||||||
|
var isCamera = getDeviceType(get(item, 'key', '')) === DeviceType['CAMERA'];
|
||||||
|
var isMatch = type === 'key' ? _ids.includes(get(item, 'key')) : _ids.includes("".concat(get(item, 'origin.id')));
|
||||||
|
if (isCamera && isMatch) {
|
||||||
|
cameraInfoList.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return cameraInfoList;
|
||||||
|
};
|
||||||
80
packages/func/es/file/index.d.ts
vendored
Normal file
80
packages/func/es/file/index.d.ts
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
export declare type Rect = {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
w: number;
|
||||||
|
h: number;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param url 需要转为图片的链接
|
||||||
|
* @returns 图片的 dom
|
||||||
|
*/
|
||||||
|
export declare const urlToImg: (url: string) => Promise<HTMLImageElement>;
|
||||||
|
export declare const base64DecodeImageKey: (base64ImgKey: string) => string;
|
||||||
|
/**
|
||||||
|
* 通过url获取图片的base64字符串
|
||||||
|
* @param src 图片链接
|
||||||
|
* @param outputFormat 图片格式
|
||||||
|
* @returns base64 @string
|
||||||
|
*/
|
||||||
|
export declare const getBase64ByUrl: (src: string | URL, outputFormat?: string) => Promise<unknown>;
|
||||||
|
/**
|
||||||
|
* 把文件转base64
|
||||||
|
* @param file @file 文件
|
||||||
|
* @returns @string
|
||||||
|
*/
|
||||||
|
export declare const fileToBase64: (file: any) => Promise<string>;
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param image @file 图片文件
|
||||||
|
* @param width @number 宽度
|
||||||
|
* @param height @number 高度
|
||||||
|
* @returns @string base64
|
||||||
|
*/
|
||||||
|
export declare const getBase64Image: (image: any, width?: any, height?: any) => string;
|
||||||
|
/**
|
||||||
|
* 通过图片获取base64
|
||||||
|
* @param src 图片地址
|
||||||
|
* @returns @string
|
||||||
|
*/
|
||||||
|
export declare const getBase64ByImage: (src: string) => Promise<unknown>;
|
||||||
|
/**
|
||||||
|
* url转base64
|
||||||
|
* @param {String} url - url地址
|
||||||
|
*/
|
||||||
|
export declare const urlToBase64V2: (url: string) => Promise<unknown>;
|
||||||
|
/**
|
||||||
|
* base64转Blob
|
||||||
|
* @param {String} base64 - base64
|
||||||
|
*/
|
||||||
|
export declare function base64toBlob(base64: string): Blob | undefined;
|
||||||
|
/**
|
||||||
|
* 图片集打包压缩下载
|
||||||
|
* 1. url -> base64 -> blob
|
||||||
|
* 2. 将blob加入jsZip文件夹内，用file-saver保存
|
||||||
|
* @param {Array<{url:string,name:string}>} imgDataList
|
||||||
|
* @param {string} zipName
|
||||||
|
*/
|
||||||
|
export declare const downloadPackageImages: (imgDataList: string | any[], zipName: string) => Promise<void>;
|
||||||
|
export declare function getFileSize(size: number): string;
|
||||||
|
export declare const dataURLToBlob: (dataurl: string) => Blob;
|
||||||
|
/**
|
||||||
|
* key 转 http 链接
|
||||||
|
* @param originImgkey 图片的值 ，可以是 base64 也可以是 http链接
|
||||||
|
* @param host 图片的域值
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export declare const generateImg: (imgKey: string, host?: string) => string;
|
||||||
|
/**
|
||||||
|
* 获取指定字符串后面的部分
|
||||||
|
* @param imageKey v1_开头的字符串
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export declare const getImageKey: (imageKey: string, preFix?: string) => string;
|
||||||
|
/**
|
||||||
|
* 获取图片
|
||||||
|
* @param img 图片的url链接
|
||||||
|
* @param odRect
|
||||||
|
* @returns file
|
||||||
|
*/
|
||||||
|
export declare const getFileByRect: (img: string, odRect: Rect) => Promise<File>;
|
||||||
412
packages/func/es/file/index.js
Normal file
412
packages/func/es/file/index.js
Normal file
File diff suppressed because one or more lines are too long
10
packages/func/es/index.d.ts
vendored
Normal file
10
packages/func/es/index.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export * from 'lodash-es';
|
||||||
|
export * from './file';
|
||||||
|
export * from './map';
|
||||||
|
export * from './performance';
|
||||||
|
export * from './string';
|
||||||
|
export * from './number';
|
||||||
|
export * from './time';
|
||||||
|
export * from './utils';
|
||||||
|
export * from './camera';
|
||||||
|
export * from './math';
|
||||||
10
packages/func/es/index.js
Normal file
10
packages/func/es/index.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export * from 'lodash-es';
|
||||||
|
export * from "./file";
|
||||||
|
export * from "./map";
|
||||||
|
export * from "./performance";
|
||||||
|
export * from "./string";
|
||||||
|
export * from "./number";
|
||||||
|
export * from "./time";
|
||||||
|
export * from "./utils";
|
||||||
|
export * from "./camera";
|
||||||
|
export * from "./math";
|
||||||
10
packages/func/es/map/index.d.ts
vendored
Normal file
10
packages/func/es/map/index.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* 获取经纬信息
|
||||||
|
* @param lngLat 位置信息
|
||||||
|
* @returns @object { long, lat }
|
||||||
|
*/
|
||||||
|
export declare const fixedLngLat: (lngLat?: string) => string;
|
||||||
|
export declare const transformLngLat: (lngLat?: string) => {
|
||||||
|
longitude: number;
|
||||||
|
latitude: number;
|
||||||
|
} | null;
|
||||||
32
packages/func/es/map/index.js
Normal file
32
packages/func/es/map/index.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* 获取经纬信息
|
||||||
|
* @param lngLat 位置信息
|
||||||
|
* @returns @object { long, lat }
|
||||||
|
*/
|
||||||
|
export var fixedLngLat = function fixedLngLat(lngLat) {
|
||||||
|
if (!lngLat) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
var lngLatArr = lngLat.split(',');
|
||||||
|
var longitude = Number(lngLatArr[0]).toFixed(6);
|
||||||
|
var latitude = Number(lngLatArr[1]).toFixed(6);
|
||||||
|
if (lngLatArr.length < 2) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return "".concat(longitude, ",").concat(latitude);
|
||||||
|
};
|
||||||
|
export var transformLngLat = function transformLngLat(lngLat) {
|
||||||
|
if (lngLat) {
|
||||||
|
var lngLatArr = lngLat ? lngLat.split(',') : [];
|
||||||
|
var longitude = Number(lngLatArr[0]);
|
||||||
|
var latitude = Number(lngLatArr[1]);
|
||||||
|
if (lngLatArr.length < 2) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
longitude: longitude,
|
||||||
|
latitude: latitude
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
2
packages/func/es/math/index.d.ts
vendored
Normal file
2
packages/func/es/math/index.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
declare const _default: {};
|
||||||
|
export default _default;
|
||||||
1
packages/func/es/math/index.js
Normal file
1
packages/func/es/math/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default {};
|
||||||
14
packages/func/es/number/index.d.ts
vendored
Normal file
14
packages/func/es/number/index.d.ts
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* 设置数据的精度
|
||||||
|
* @param originNumber
|
||||||
|
* @param accuracy 精度 以原点为中心向左为正，向右为负，
|
||||||
|
* @param isCeil 是否为向上取整
|
||||||
|
* @returns number
|
||||||
|
*/
|
||||||
|
export declare const setNumberAccuracy: (originNumber: number, accuracy?: number, isCeil?: boolean) => number;
|
||||||
|
/**
|
||||||
|
* 获取数字
|
||||||
|
* @param number 需要校验的数值
|
||||||
|
* @returns @number
|
||||||
|
*/
|
||||||
|
export declare const toRealNumber: (number: any) => any;
|
||||||
38
packages/func/es/number/index.js
Normal file
38
packages/func/es/number/index.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* 设置数据的精度
|
||||||
|
* @param originNumber
|
||||||
|
* @param accuracy 精度 以原点为中心向左为正，向右为负，
|
||||||
|
* @param isCeil 是否为向上取整
|
||||||
|
* @returns number
|
||||||
|
*/
|
||||||
|
export var setNumberAccuracy = function setNumberAccuracy(originNumber) {
|
||||||
|
var accuracy = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||||
|
var isCeil = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
||||||
|
if (originNumber === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
var returnData = 0;
|
||||||
|
if (isCeil) {
|
||||||
|
returnData = Math.ceil(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
|
||||||
|
} else {
|
||||||
|
returnData = Math.floor(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
|
||||||
|
}
|
||||||
|
//设置精度
|
||||||
|
if (accuracy < 0) {
|
||||||
|
returnData = Number(returnData.toFixed(-accuracy));
|
||||||
|
} else {
|
||||||
|
returnData = Number(returnData.toFixed(0));
|
||||||
|
}
|
||||||
|
return returnData;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取数字
|
||||||
|
* @param number 需要校验的数值
|
||||||
|
* @returns @number
|
||||||
|
*/
|
||||||
|
export var toRealNumber = function toRealNumber(number) {
|
||||||
|
if (isNaN(number) || number === Infinity) {
|
||||||
|
return 0;
|
||||||
|
} else return number;
|
||||||
|
};
|
||||||
1
packages/func/es/performance/index.d.ts
vendored
Normal file
1
packages/func/es/performance/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
export declare const speedConvert: (bps: number, contertUnit?: number) => string;
|
||||||
14
packages/func/es/performance/index.js
Normal file
14
packages/func/es/performance/index.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
// 1.bps KB/s or MB/s or GB/s 2.保留两位小数 3.默认是bps
|
||||||
|
export var speedConvert = function speedConvert(bps) {
|
||||||
|
var contertUnit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 8;
|
||||||
|
if (bps === undefined) return "0KB/s";
|
||||||
|
var byte = bps / contertUnit;
|
||||||
|
if (bps > 1024 * 1024 * 1024) {
|
||||||
|
return "".concat((byte / 1024 / 1024 / 1024).toFixed(2), "GB/s");
|
||||||
|
} else if (byte > 1024 * 1024) {
|
||||||
|
return "".concat((byte / 1024 / 1024).toFixed(2), "MB/s");
|
||||||
|
} else if (byte > 1024) {
|
||||||
|
return "".concat((byte / 1024).toFixed(2), "KB/s");
|
||||||
|
}
|
||||||
|
return "".concat(byte, "KB/s");
|
||||||
|
};
|
||||||
105
packages/func/es/string/index.js
Normal file
105
packages/func/es/string/index.js
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
///<summary>获得字符串实际长度，中文2，英文1</summary>
|
||||||
|
///<param name="str">要获得长度的字符串</param>
|
||||||
|
export var getStrLength = function getStrLength(str) {
|
||||||
|
var realLength = 0,
|
||||||
|
len = str.length,
|
||||||
|
charCode = -1;
|
||||||
|
for (var i = 0; i < len; i++) {
|
||||||
|
charCode = str.charCodeAt(i);
|
||||||
|
if (charCode >= 0 && charCode <= 128) realLength += 1;else realLength += 2;
|
||||||
|
}
|
||||||
|
return realLength;
|
||||||
|
};
|
||||||
|
|
||||||
|
//js截取字符串，中英文都能用
|
||||||
|
//如果给定的字符串大于指定长度，截取指定长度返回，否者返回源字符串。
|
||||||
|
//字符串，长度
|
||||||
|
|
||||||
|
/**
|
||||||
|
* js截取字符串，中英文都能用
|
||||||
|
* @param str：需要截取的字符串
|
||||||
|
* @param len: 需要截取的长度
|
||||||
|
*/
|
||||||
|
export var cutStr = function cutstr(str, len) {
|
||||||
|
var str_length = 0;
|
||||||
|
var str_len = 0;
|
||||||
|
var str_cut = new String();
|
||||||
|
str_len = str.length;
|
||||||
|
for (var i = 0; i < str_len; i++) {
|
||||||
|
var a = str.charAt(i);
|
||||||
|
str_length++;
|
||||||
|
if (escape(a).length > 4) {
|
||||||
|
//中文字符的长度经编码之后大于4
|
||||||
|
str_length++;
|
||||||
|
}
|
||||||
|
str_cut = str_cut.concat(a);
|
||||||
|
if (str_length >= len) {
|
||||||
|
str_cut = str_cut.concat('...');
|
||||||
|
return str_cut;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//如果给定字符串小于指定长度，则返回源字符串；
|
||||||
|
if (str_length < len) {
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查看字符串是否为可访问链接
|
||||||
|
* @param str 待检查链接
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export var isUrl = function isUrl(str) {
|
||||||
|
try {
|
||||||
|
new URL(str);
|
||||||
|
return true;
|
||||||
|
} catch (err) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过url获取值
|
||||||
|
* @param key 想要获取的值
|
||||||
|
* @param url 需要截取的链接
|
||||||
|
*/
|
||||||
|
export var getValueByUrl = function getValueByUrl(key, str) {
|
||||||
|
var result = null;
|
||||||
|
if (isUrl(str)) {
|
||||||
|
result = new URL(str).searchParams.get(key);
|
||||||
|
} else {
|
||||||
|
result = new URLSearchParams(str.indexOf('?') > -1 ? str : "?".concat(str)).get(key);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 行内px 转 rem
|
||||||
|
* @param value px像素
|
||||||
|
* @param rootFontSize 根元素大小: 默认16px
|
||||||
|
*/
|
||||||
|
export var pxToRem = function pxToRem(value, rootFontSize) {
|
||||||
|
var fontSize = rootFontSize || 80 || parseFloat(document.documentElement.style.fontSize);
|
||||||
|
var valueArr = value.split(' ');
|
||||||
|
return valueArr.filter(function (o) {
|
||||||
|
return o;
|
||||||
|
}).map(function (val) {
|
||||||
|
return parseFloat(val) / fontSize + 'rem';
|
||||||
|
}).join(' ');
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转到指定URL
|
||||||
|
* @param to 跳转的url
|
||||||
|
* @returns URL
|
||||||
|
*/
|
||||||
|
export var jumpTo = function jumpTo(to) {
|
||||||
|
var from = location.origin + location.pathname;
|
||||||
|
// 检查是否为url，并且跑出错误
|
||||||
|
if (!isUrl(to)) {
|
||||||
|
throw Error("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u94FE\u63A5\uFF0C\u4EE5http(s)://\u5F00\u5934\uFF01'");
|
||||||
|
}
|
||||||
|
var _targetUrl = new URL(to);
|
||||||
|
_targetUrl.searchParams.set('from', from);
|
||||||
|
return _targetUrl;
|
||||||
|
};
|
||||||
11
packages/func/es/time/index.d.ts
vendored
Normal file
11
packages/func/es/time/index.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
export declare const formateDuration: (diff: number) => string;
|
||||||
|
export declare function generateTime(): {
|
||||||
|
startDateTime: number;
|
||||||
|
endDateTime: number;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 格式化时间为 00:00
|
||||||
|
* @param seconds 时间，单位秒
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export declare function formatDurationTime(seconds: number): string;
|
||||||
57
packages/func/es/time/index.js
Normal file
57
packages/func/es/time/index.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
//时间差计算
|
||||||
|
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* startDate==>开始时间
|
||||||
|
* endDate==>结束时间
|
||||||
|
* 事例：diffTime(data.createTime,new Date())
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
export var formateDuration = function formateDuration(diff) {
|
||||||
|
//计算出相差天数
|
||||||
|
var days = Math.floor(diff / (24 * 3600 * 1000));
|
||||||
|
|
||||||
|
//计算出小时数
|
||||||
|
var leave1 = diff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
|
||||||
|
var hours = Math.floor(leave1 / (3600 * 1000));
|
||||||
|
//计算相差分钟数
|
||||||
|
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
|
||||||
|
var minutes = Math.floor(leave2 / (60 * 1000));
|
||||||
|
|
||||||
|
//计算相差秒数
|
||||||
|
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
|
||||||
|
var seconds = Math.round(leave3 / 1000);
|
||||||
|
var returnStr = seconds + '秒';
|
||||||
|
if (minutes > 0) {
|
||||||
|
returnStr = minutes + '分'; //+ returnStr;
|
||||||
|
}
|
||||||
|
if (hours > 0) {
|
||||||
|
returnStr = hours + '小时'; // + returnStr;
|
||||||
|
}
|
||||||
|
if (days > 0) {
|
||||||
|
returnStr = days + '天'; //+ returnStr;
|
||||||
|
}
|
||||||
|
return returnStr;
|
||||||
|
};
|
||||||
|
|
||||||
|
//检索默认时间
|
||||||
|
export function generateTime() {
|
||||||
|
var endDateTime = dayjs().endOf('day').unix();
|
||||||
|
var startDateTime = dayjs().startOf('day').unix();
|
||||||
|
return {
|
||||||
|
startDateTime: startDateTime,
|
||||||
|
endDateTime: endDateTime
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化时间为 00:00
|
||||||
|
* @param seconds 时间，单位秒
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function formatDurationTime(seconds) {
|
||||||
|
var minutes = Math.floor(seconds / 60) || 0;
|
||||||
|
var remainingSeconds = Math.floor(seconds % 60);
|
||||||
|
return (minutes < 10 ? "0".concat(minutes) : minutes) + ":" + (remainingSeconds < 10 ? "0" : "") + remainingSeconds;
|
||||||
|
}
|
||||||
36
packages/func/es/utils/index.d.ts
vendored
Normal file
36
packages/func/es/utils/index.d.ts
vendored
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
export { default as isChrome } from './isChrome';
|
||||||
|
export declare const matchS3Prefix: (str: string) => boolean;
|
||||||
|
/**
|
||||||
|
* 通过文件名获取文件类型
|
||||||
|
* @param fileName 文件名称
|
||||||
|
* @returns 文件类型
|
||||||
|
*/
|
||||||
|
export declare const getFileSuffix: (fileName: string) => string;
|
||||||
|
/**
|
||||||
|
* 通过类型获取文件名
|
||||||
|
* @param type 类型
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export declare const getImageSuffixByFileType: (type: string) => string;
|
||||||
|
export declare function getChromeVersion(): number | false;
|
||||||
|
export declare const nextTick: (func: (value: void) => void | PromiseLike<void>) => void;
|
||||||
|
export declare const loop: (items: string | any[], callback: (arg0: any) => any) => void;
|
||||||
|
export declare const addEventListenerWrapper: (target: any, eventType: string, cb: any, option?: any) => {
|
||||||
|
remove: () => void;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Get transforms base on the given object.
|
||||||
|
* @param {Object} obj - The target object.
|
||||||
|
* @returns {string} A string contains transform values.
|
||||||
|
*/
|
||||||
|
export declare function getTransforms({ rotate, scaleX, scaleY, translateX, translateY, }: {
|
||||||
|
rotate?: number;
|
||||||
|
scaleX?: number;
|
||||||
|
scaleY?: number;
|
||||||
|
translateX?: number;
|
||||||
|
translateY?: number;
|
||||||
|
}): {
|
||||||
|
WebkitTransform: string;
|
||||||
|
msTransform: string;
|
||||||
|
transform: string;
|
||||||
|
};
|
||||||
144
packages/func/es/utils/index.js
Normal file
144
packages/func/es/utils/index.js
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
import { isNumber } from 'lodash-es';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
export { default as isChrome } from "./isChrome";
|
||||||
|
export var matchS3Prefix = function matchS3Prefix(str) {
|
||||||
|
return /^v[0-9]_/.test(str);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过文件名获取文件类型
|
||||||
|
* @param fileName 文件名称
|
||||||
|
* @returns 文件类型
|
||||||
|
*/
|
||||||
|
export var getFileSuffix = function getFileSuffix(fileName) {
|
||||||
|
var splitArr = fileName.split('.');
|
||||||
|
return splitArr.length < 2 ? '' : splitArr[splitArr.length - 1];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过类型获取文件名
|
||||||
|
* @param type 类型
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export var getImageSuffixByFileType = function getImageSuffixByFileType(type) {
|
||||||
|
var imageSuffix = '';
|
||||||
|
switch (type) {
|
||||||
|
case 'jpeg':
|
||||||
|
{
|
||||||
|
imageSuffix = '.jpg';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'gif':
|
||||||
|
{
|
||||||
|
imageSuffix = '.gif';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'png':
|
||||||
|
{
|
||||||
|
imageSuffix = '.png';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'vnd.wap.wbmp':
|
||||||
|
{
|
||||||
|
imageSuffix = '.wbmp';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'x-up-wpng':
|
||||||
|
{
|
||||||
|
imageSuffix = '.wpng';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'nbmp':
|
||||||
|
{
|
||||||
|
imageSuffix = '.nbmp';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return imageSuffix;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取谷歌浏览器版本
|
||||||
|
export function getChromeVersion() {
|
||||||
|
var arr = navigator.userAgent.split(' ');
|
||||||
|
var chromeVersion = '';
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
|
||||||
|
}
|
||||||
|
if (chromeVersion) {
|
||||||
|
return Number(chromeVersion.split('/')[1].split('.')[0]);
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export var nextTick = function nextTick(func) {
|
||||||
|
if (queueMicrotask) {
|
||||||
|
queueMicrotask(func);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Promise.resolve().then(func);
|
||||||
|
};
|
||||||
|
export var loop = function loop(items, callback) {
|
||||||
|
for (var i = 0; i < items.length; i++) {
|
||||||
|
var element = items[i];
|
||||||
|
var isBreak = callback(element);
|
||||||
|
if (isBreak) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (element['children']) {
|
||||||
|
loop(element['children'], callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export var addEventListenerWrapper = function addEventListenerWrapper(target, eventType, cb, option) {
|
||||||
|
/* eslint camelcase: 2 */
|
||||||
|
var callback = ReactDOM.unstable_batchedUpdates ? function run(e) {
|
||||||
|
ReactDOM.unstable_batchedUpdates(cb, e);
|
||||||
|
} : cb;
|
||||||
|
if (target.addEventListener) {
|
||||||
|
target.addEventListener(eventType, callback, option);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
remove: function remove() {
|
||||||
|
if (target.removeEventListener) {
|
||||||
|
target.removeEventListener(eventType, callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get transforms base on the given object.
|
||||||
|
* @param {Object} obj - The target object.
|
||||||
|
* @returns {string} A string contains transform values.
|
||||||
|
*/
|
||||||
|
export function getTransforms(_ref) {
|
||||||
|
var rotate = _ref.rotate,
|
||||||
|
scaleX = _ref.scaleX,
|
||||||
|
scaleY = _ref.scaleY,
|
||||||
|
translateX = _ref.translateX,
|
||||||
|
translateY = _ref.translateY;
|
||||||
|
var values = [];
|
||||||
|
if (isNumber(translateX) && translateX !== 0) {
|
||||||
|
values.push("translateX(".concat(translateX, "px)"));
|
||||||
|
}
|
||||||
|
if (isNumber(translateY) && translateY !== 0) {
|
||||||
|
values.push("translateY(".concat(translateY, "px)"));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rotate should come first before scale to match orientation transform
|
||||||
|
if (isNumber(rotate) && rotate !== 0) {
|
||||||
|
values.push("rotate(".concat(rotate, "deg)"));
|
||||||
|
}
|
||||||
|
if (isNumber(scaleX) && scaleX !== 1) {
|
||||||
|
values.push("scaleX(".concat(scaleX, ")"));
|
||||||
|
}
|
||||||
|
if (isNumber(scaleY) && scaleY !== 1) {
|
||||||
|
values.push("scaleY(".concat(scaleY, ")"));
|
||||||
|
}
|
||||||
|
var transform = values.length ? values.join(' ') : 'none';
|
||||||
|
return {
|
||||||
|
WebkitTransform: transform,
|
||||||
|
msTransform: transform,
|
||||||
|
transform: transform
|
||||||
|
};
|
||||||
|
}
|
||||||
3
packages/func/es/utils/isChrome.d.ts
vendored
Normal file
3
packages/func/es/utils/isChrome.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export declare const isBrowser: boolean;
|
||||||
|
declare const isChrome: () => boolean;
|
||||||
|
export default isChrome;
|
||||||
17
packages/func/es/utils/isChrome.js
Normal file
17
packages/func/es/utils/isChrome.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
export var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
||||||
|
var isChrome = function isChrome() {
|
||||||
|
var winNav = isBrowser && window.navigator;
|
||||||
|
var vendorName = winNav && (winNav === null || winNav === void 0 ? void 0 : winNav.vendor);
|
||||||
|
var userAgent = winNav && winNav.userAgent;
|
||||||
|
|
||||||
|
//@ts-ignore
|
||||||
|
var isChromium = isBrowser && typeof chrome !== 'undefined';
|
||||||
|
|
||||||
|
//@ts-ignore
|
||||||
|
var isOpera = isBrowser && typeof opr !== 'undefined';
|
||||||
|
var isIEedge = userAgent && userAgent.indexOf('Edge') > -1;
|
||||||
|
var isIOSChrome = !!(userAgent && userAgent.match('CriOS'));
|
||||||
|
var isDesktopChrome = isChromium && vendorName === 'Google Inc.' && !isOpera && !isIEedge;
|
||||||
|
return isIOSChrome || isDesktopChrome;
|
||||||
|
};
|
||||||
|
export default isChrome;
|
||||||
41
packages/func/lib/camera/constants.d.ts
vendored
Normal file
41
packages/func/lib/camera/constants.d.ts
vendored
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
/**
|
||||||
|
* 设备类型枚举
|
||||||
|
*/
|
||||||
|
export declare const DeviceType: {
|
||||||
|
VMS: string;
|
||||||
|
DIR: string;
|
||||||
|
CAMERA: string;
|
||||||
|
};
|
||||||
|
export declare const LOCAL_KEY = "local";
|
||||||
|
export declare const DIRE_CONNECT_KEY = "direconnect";
|
||||||
|
export declare const BOX_LIST_KEY = "boxlist";
|
||||||
|
export declare enum VmsplatformOpt {
|
||||||
|
VMSPLATFORMOPT_ID = 0,
|
||||||
|
VMSPLATFORMOPT_PLATFORMNAME = 1,
|
||||||
|
VMSPLATFORMOPT_PLUGINNAME = 2,
|
||||||
|
VMSPLATFORMOPT_IP = 3,
|
||||||
|
VMSPLATFORMOPT_PORT = 4,
|
||||||
|
VMSPLATFORMOPT_USERNAME = 5,
|
||||||
|
VMSPLATFORMOPT_PASSWORD = 6
|
||||||
|
}
|
||||||
|
export declare enum OPT {
|
||||||
|
OR = 0,
|
||||||
|
AND = 1,
|
||||||
|
ORNOT = 2,
|
||||||
|
ANDNOT = 3
|
||||||
|
}
|
||||||
|
export declare enum DevicemanagerCameraType {
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_DEFAULT = 0,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_NORMAL = 1,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_1400 = 97,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_DHGRABBER = 98,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_HKGRABBER = 99,
|
||||||
|
DEVICEMANAGER_CAMERA_TYPE_LOCAL = 100
|
||||||
|
}
|
||||||
|
export declare const BOX_DIRECONNECT_PLATFORM_FILTER: {
|
||||||
|
filtervmsplatformList: {
|
||||||
|
opt: OPT;
|
||||||
|
vmsplatformOpt: VmsplatformOpt;
|
||||||
|
value: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
90
packages/func/lib/camera/constants.js
Normal file
90
packages/func/lib/camera/constants.js
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/camera/constants.ts
|
||||||
|
var constants_exports = {};
|
||||||
|
__export(constants_exports, {
|
||||||
|
BOX_DIRECONNECT_PLATFORM_FILTER: () => BOX_DIRECONNECT_PLATFORM_FILTER,
|
||||||
|
BOX_LIST_KEY: () => BOX_LIST_KEY,
|
||||||
|
DIRE_CONNECT_KEY: () => DIRE_CONNECT_KEY,
|
||||||
|
DeviceType: () => DeviceType,
|
||||||
|
DevicemanagerCameraType: () => DevicemanagerCameraType,
|
||||||
|
LOCAL_KEY: () => LOCAL_KEY,
|
||||||
|
OPT: () => OPT,
|
||||||
|
VmsplatformOpt: () => VmsplatformOpt
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(constants_exports);
|
||||||
|
var DeviceType = {
|
||||||
|
VMS: "vms",
|
||||||
|
DIR: "dir",
|
||||||
|
CAMERA: "camera"
|
||||||
|
};
|
||||||
|
var LOCAL_KEY = "local";
|
||||||
|
var DIRE_CONNECT_KEY = "direconnect";
|
||||||
|
var BOX_LIST_KEY = "boxlist";
|
||||||
|
var VmsplatformOpt = /* @__PURE__ */ ((VmsplatformOpt2) => {
|
||||||
|
VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_ID"] = 0] = "VMSPLATFORMOPT_ID";
|
||||||
|
VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PLATFORMNAME"] = 1] = "VMSPLATFORMOPT_PLATFORMNAME";
|
||||||
|
VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PLUGINNAME"] = 2] = "VMSPLATFORMOPT_PLUGINNAME";
|
||||||
|
VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_IP"] = 3] = "VMSPLATFORMOPT_IP";
|
||||||
|
VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PORT"] = 4] = "VMSPLATFORMOPT_PORT";
|
||||||
|
VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_USERNAME"] = 5] = "VMSPLATFORMOPT_USERNAME";
|
||||||
|
VmsplatformOpt2[VmsplatformOpt2["VMSPLATFORMOPT_PASSWORD"] = 6] = "VMSPLATFORMOPT_PASSWORD";
|
||||||
|
return VmsplatformOpt2;
|
||||||
|
})(VmsplatformOpt || {});
|
||||||
|
var OPT = /* @__PURE__ */ ((OPT2) => {
|
||||||
|
OPT2[OPT2["OR"] = 0] = "OR";
|
||||||
|
OPT2[OPT2["AND"] = 1] = "AND";
|
||||||
|
OPT2[OPT2["ORNOT"] = 2] = "ORNOT";
|
||||||
|
OPT2[OPT2["ANDNOT"] = 3] = "ANDNOT";
|
||||||
|
return OPT2;
|
||||||
|
})(OPT || {});
|
||||||
|
var DevicemanagerCameraType = /* @__PURE__ */ ((DevicemanagerCameraType2) => {
|
||||||
|
DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_DEFAULT"] = 0] = "DEVICEMANAGER_CAMERA_TYPE_DEFAULT";
|
||||||
|
DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_NORMAL"] = 1] = "DEVICEMANAGER_CAMERA_TYPE_NORMAL";
|
||||||
|
DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_1400"] = 97] = "DEVICEMANAGER_CAMERA_TYPE_1400";
|
||||||
|
DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_DHGRABBER"] = 98] = "DEVICEMANAGER_CAMERA_TYPE_DHGRABBER";
|
||||||
|
DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_HKGRABBER"] = 99] = "DEVICEMANAGER_CAMERA_TYPE_HKGRABBER";
|
||||||
|
DevicemanagerCameraType2[DevicemanagerCameraType2["DEVICEMANAGER_CAMERA_TYPE_LOCAL"] = 100] = "DEVICEMANAGER_CAMERA_TYPE_LOCAL";
|
||||||
|
return DevicemanagerCameraType2;
|
||||||
|
})(DevicemanagerCameraType || {});
|
||||||
|
var BOX_DIRECONNECT_PLATFORM_FILTER = {
|
||||||
|
filtervmsplatformList: [
|
||||||
|
{
|
||||||
|
opt: 0 /* OR */,
|
||||||
|
vmsplatformOpt: 1 /* VMSPLATFORMOPT_PLATFORMNAME */,
|
||||||
|
value: "direconnect"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opt: 0 /* OR */,
|
||||||
|
vmsplatformOpt: 1 /* VMSPLATFORMOPT_PLATFORMNAME */,
|
||||||
|
value: "boxlist"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
BOX_DIRECONNECT_PLATFORM_FILTER,
|
||||||
|
BOX_LIST_KEY,
|
||||||
|
DIRE_CONNECT_KEY,
|
||||||
|
DeviceType,
|
||||||
|
DevicemanagerCameraType,
|
||||||
|
LOCAL_KEY,
|
||||||
|
OPT,
|
||||||
|
VmsplatformOpt
|
||||||
|
});
|
||||||
40
packages/func/lib/camera/index.d.ts
vendored
Normal file
40
packages/func/lib/camera/index.d.ts
vendored
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { DevicemanagerCameraType } from './constants';
|
||||||
|
export declare const isFaceCamera: (type: DevicemanagerCameraType) => boolean;
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param value 传入的数据 可以是 item（camera/vms/dirs）/ deviceID
|
||||||
|
* @param isId
|
||||||
|
*/
|
||||||
|
export declare function getDeviceType(value: {
|
||||||
|
[x: string]: any;
|
||||||
|
id: any;
|
||||||
|
} | string): any;
|
||||||
|
/**
|
||||||
|
* 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
|
||||||
|
* @param id 设备id
|
||||||
|
* @param type 设备类型
|
||||||
|
*/
|
||||||
|
export declare function deviceIDToDeviceKey(id: any, type: string, vmsId?: any): string;
|
||||||
|
/**
|
||||||
|
* 后端设备id/vmsid/dirid是三张表 合并在一起不保证唯一 前端生成唯一key
|
||||||
|
* @param item camera/vms/dirs
|
||||||
|
*/
|
||||||
|
export declare function deviceToDeviceKey(item: {
|
||||||
|
[x: string]: any;
|
||||||
|
id: any;
|
||||||
|
}): string;
|
||||||
|
/**
|
||||||
|
* 设备树key 转 后端设备原始id dirid是string/vms&camera 是number 和后端保持一致
|
||||||
|
* @param deviceKey 设备树的id
|
||||||
|
*/
|
||||||
|
export declare function deviceKeyToDeviceId(deviceKey: {
|
||||||
|
split: (arg0: string) => [any, any];
|
||||||
|
}): any;
|
||||||
|
export declare const getVmsIdByDeviceId: (key: string) => string;
|
||||||
|
/**
|
||||||
|
* 通过设备id或设备key在树里面找摄像头
|
||||||
|
* @param ids cameraId
|
||||||
|
* @param deviceTree 树
|
||||||
|
* @param type "id" | "key"
|
||||||
|
*/
|
||||||
|
export declare const findCamerasByInDeviceTree: (ids: never[] | undefined, deviceTree: any, type?: string) => any[];
|
||||||
143
packages/func/lib/camera/index.js
Normal file
143
packages/func/lib/camera/index.js
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/camera/index.ts
|
||||||
|
var camera_exports = {};
|
||||||
|
__export(camera_exports, {
|
||||||
|
deviceIDToDeviceKey: () => deviceIDToDeviceKey,
|
||||||
|
deviceKeyToDeviceId: () => deviceKeyToDeviceId,
|
||||||
|
deviceToDeviceKey: () => deviceToDeviceKey,
|
||||||
|
findCamerasByInDeviceTree: () => findCamerasByInDeviceTree,
|
||||||
|
getDeviceType: () => getDeviceType,
|
||||||
|
getVmsIdByDeviceId: () => getVmsIdByDeviceId,
|
||||||
|
isFaceCamera: () => isFaceCamera
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(camera_exports);
|
||||||
|
var import_lodash_es = require("lodash-es");
|
||||||
|
var import_utils = require("../utils");
|
||||||
|
var import_constants = require("./constants");
|
||||||
|
var isFaceCamera = (type) => {
|
||||||
|
return [
|
||||||
|
import_constants.DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_1400,
|
||||||
|
import_constants.DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_HKGRABBER,
|
||||||
|
import_constants.DevicemanagerCameraType.DEVICEMANAGER_CAMERA_TYPE_DHGRABBER
|
||||||
|
].includes(type);
|
||||||
|
};
|
||||||
|
function getDeviceType(value) {
|
||||||
|
let type;
|
||||||
|
let isDeviceKey = (0, import_lodash_es.isString)(value);
|
||||||
|
if (isDeviceKey) {
|
||||||
|
type = value.split("_")[0];
|
||||||
|
} else {
|
||||||
|
if ((0, import_lodash_es.has)(value, "longitude")) {
|
||||||
|
type = import_constants.DeviceType["CAMERA"];
|
||||||
|
}
|
||||||
|
if ((0, import_lodash_es.has)(value, "ip")) {
|
||||||
|
type = import_constants.DeviceType["VMS"];
|
||||||
|
}
|
||||||
|
if (!type) {
|
||||||
|
type = import_constants.DeviceType["DIR"];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return type;
|
||||||
|
}
|
||||||
|
function deviceIDToDeviceKey(id, type, vmsId) {
|
||||||
|
if (type == import_constants.DeviceType["DIR"]) {
|
||||||
|
return `${type}_${id}_${vmsId}`;
|
||||||
|
} else {
|
||||||
|
return `${type}_${id}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function deviceToDeviceKey(item) {
|
||||||
|
let deviceKey = "";
|
||||||
|
let type = getDeviceType(item);
|
||||||
|
if (!type) {
|
||||||
|
console.error("device type is null!");
|
||||||
|
}
|
||||||
|
switch (type) {
|
||||||
|
case import_constants.DeviceType["DIR"]:
|
||||||
|
{
|
||||||
|
let dirId = item["dirid"] || item["dirId"];
|
||||||
|
if (!dirId && dirId !== 0) {
|
||||||
|
console.error("dirId type is null!");
|
||||||
|
}
|
||||||
|
let vmsId = (0, import_lodash_es.get)(item, "extendInfo.vmsPlatformId");
|
||||||
|
if (!vmsId && vmsId !== 0) {
|
||||||
|
console.error("vmsId type is null!");
|
||||||
|
}
|
||||||
|
deviceKey = `${type}_${dirId}_${vmsId}`;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case import_constants.DeviceType["VMS"]:
|
||||||
|
deviceKey = `${type}_${item["id"]}`;
|
||||||
|
break;
|
||||||
|
case import_constants.DeviceType["CAMERA"]:
|
||||||
|
{
|
||||||
|
let vmsId = (0, import_lodash_es.get)(item, "extendInfo.vmsPlatformId");
|
||||||
|
if (!vmsId && vmsId !== 0) {
|
||||||
|
console.error("vmsId type is null!");
|
||||||
|
}
|
||||||
|
deviceKey = `${type}_${item.id}`;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return deviceKey;
|
||||||
|
}
|
||||||
|
function deviceKeyToDeviceId(deviceKey) {
|
||||||
|
let [type, id] = deviceKey.split("_");
|
||||||
|
return type === import_constants.DeviceType["DIR"] ? id : Number(id);
|
||||||
|
}
|
||||||
|
var getVmsIdByDeviceId = (key) => {
|
||||||
|
const type = getDeviceType(key);
|
||||||
|
let vmsId = "";
|
||||||
|
switch (type) {
|
||||||
|
case import_constants.DeviceType["CAMERA"]:
|
||||||
|
case import_constants.DeviceType["DIR"]:
|
||||||
|
vmsId = key.split("_")[2];
|
||||||
|
break;
|
||||||
|
case import_constants.DeviceType["VMS"]:
|
||||||
|
vmsId = key.split("_")[1];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (!vmsId) {
|
||||||
|
console.error("vmsid is null!");
|
||||||
|
}
|
||||||
|
return vmsId;
|
||||||
|
};
|
||||||
|
var findCamerasByInDeviceTree = (ids = [], deviceTree, type = "id") => {
|
||||||
|
let cameraInfoList = [];
|
||||||
|
let _ids = ids.map((v) => String(v));
|
||||||
|
(0, import_utils.loop)(deviceTree, (item) => {
|
||||||
|
let isCamera = getDeviceType((0, import_lodash_es.get)(item, "key", "")) === import_constants.DeviceType["CAMERA"];
|
||||||
|
let isMatch = type === "key" ? _ids.includes((0, import_lodash_es.get)(item, "key")) : _ids.includes(`${(0, import_lodash_es.get)(item, "origin.id")}`);
|
||||||
|
if (isCamera && isMatch) {
|
||||||
|
cameraInfoList.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return cameraInfoList;
|
||||||
|
};
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
deviceIDToDeviceKey,
|
||||||
|
deviceKeyToDeviceId,
|
||||||
|
deviceToDeviceKey,
|
||||||
|
findCamerasByInDeviceTree,
|
||||||
|
getDeviceType,
|
||||||
|
getVmsIdByDeviceId,
|
||||||
|
isFaceCamera
|
||||||
|
});
|
||||||
80
packages/func/lib/file/index.d.ts
vendored
Normal file
80
packages/func/lib/file/index.d.ts
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
export declare type Rect = {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
w: number;
|
||||||
|
h: number;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param url 需要转为图片的链接
|
||||||
|
* @returns 图片的 dom
|
||||||
|
*/
|
||||||
|
export declare const urlToImg: (url: string) => Promise<HTMLImageElement>;
|
||||||
|
export declare const base64DecodeImageKey: (base64ImgKey: string) => string;
|
||||||
|
/**
|
||||||
|
* 通过url获取图片的base64字符串
|
||||||
|
* @param src 图片链接
|
||||||
|
* @param outputFormat 图片格式
|
||||||
|
* @returns base64 @string
|
||||||
|
*/
|
||||||
|
export declare const getBase64ByUrl: (src: string | URL, outputFormat?: string) => Promise<unknown>;
|
||||||
|
/**
|
||||||
|
* 把文件转base64
|
||||||
|
* @param file @file 文件
|
||||||
|
* @returns @string
|
||||||
|
*/
|
||||||
|
export declare const fileToBase64: (file: any) => Promise<string>;
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param image @file 图片文件
|
||||||
|
* @param width @number 宽度
|
||||||
|
* @param height @number 高度
|
||||||
|
* @returns @string base64
|
||||||
|
*/
|
||||||
|
export declare const getBase64Image: (image: any, width?: any, height?: any) => string;
|
||||||
|
/**
|
||||||
|
* 通过图片获取base64
|
||||||
|
* @param src 图片地址
|
||||||
|
* @returns @string
|
||||||
|
*/
|
||||||
|
export declare const getBase64ByImage: (src: string) => Promise<unknown>;
|
||||||
|
/**
|
||||||
|
* url转base64
|
||||||
|
* @param {String} url - url地址
|
||||||
|
*/
|
||||||
|
export declare const urlToBase64V2: (url: string) => Promise<unknown>;
|
||||||
|
/**
|
||||||
|
* base64转Blob
|
||||||
|
* @param {String} base64 - base64
|
||||||
|
*/
|
||||||
|
export declare function base64toBlob(base64: string): Blob | undefined;
|
||||||
|
/**
|
||||||
|
* 图片集打包压缩下载
|
||||||
|
* 1. url -> base64 -> blob
|
||||||
|
* 2. 将blob加入jsZip文件夹内，用file-saver保存
|
||||||
|
* @param {Array<{url:string,name:string}>} imgDataList
|
||||||
|
* @param {string} zipName
|
||||||
|
*/
|
||||||
|
export declare const downloadPackageImages: (imgDataList: string | any[], zipName: string) => Promise<void>;
|
||||||
|
export declare function getFileSize(size: number): string;
|
||||||
|
export declare const dataURLToBlob: (dataurl: string) => Blob;
|
||||||
|
/**
|
||||||
|
* key 转 http 链接
|
||||||
|
* @param originImgkey 图片的值 ，可以是 base64 也可以是 http链接
|
||||||
|
* @param host 图片的域值
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export declare const generateImg: (imgKey: string, host?: string) => string;
|
||||||
|
/**
|
||||||
|
* 获取指定字符串后面的部分
|
||||||
|
* @param imageKey v1_开头的字符串
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export declare const getImageKey: (imageKey: string, preFix?: string) => string;
|
||||||
|
/**
|
||||||
|
* 获取图片
|
||||||
|
* @param img 图片的url链接
|
||||||
|
* @param odRect
|
||||||
|
* @returns file
|
||||||
|
*/
|
||||||
|
export declare const getFileByRect: (img: string, odRect: Rect) => Promise<File>;
|
||||||
308
packages/func/lib/file/index.js
Normal file
308
packages/func/lib/file/index.js
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
var __create = Object.create;
|
||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __getProtoOf = Object.getPrototypeOf;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
||||||
|
// If the importer is in node compatibility mode or this is not an ESM
|
||||||
|
// file that has been converted to a CommonJS file using a Babel-
|
||||||
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
||||||
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
||||||
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
||||||
|
mod
|
||||||
|
));
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/file/index.ts
|
||||||
|
var file_exports = {};
|
||||||
|
__export(file_exports, {
|
||||||
|
base64DecodeImageKey: () => base64DecodeImageKey,
|
||||||
|
base64toBlob: () => base64toBlob,
|
||||||
|
dataURLToBlob: () => dataURLToBlob,
|
||||||
|
downloadPackageImages: () => downloadPackageImages,
|
||||||
|
fileToBase64: () => fileToBase64,
|
||||||
|
generateImg: () => generateImg,
|
||||||
|
getBase64ByImage: () => getBase64ByImage,
|
||||||
|
getBase64ByUrl: () => getBase64ByUrl,
|
||||||
|
getBase64Image: () => getBase64Image,
|
||||||
|
getFileByRect: () => getFileByRect,
|
||||||
|
getFileSize: () => getFileSize,
|
||||||
|
getImageKey: () => getImageKey,
|
||||||
|
urlToBase64V2: () => urlToBase64V2,
|
||||||
|
urlToImg: () => urlToImg
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(file_exports);
|
||||||
|
var import_base_64 = __toESM(require("base-64"));
|
||||||
|
var import_jszip = __toESM(require("jszip"));
|
||||||
|
var import_file_saver = __toESM(require("file-saver"));
|
||||||
|
var import_utils = require("../utils");
|
||||||
|
var import_lodash_es = require("lodash-es");
|
||||||
|
var urlToImg = (url) => {
|
||||||
|
const resImage = new Promise((resolve) => {
|
||||||
|
const image = new Image();
|
||||||
|
image.crossOrigin = "";
|
||||||
|
image.src = url;
|
||||||
|
image.onload = () => {
|
||||||
|
resolve(image);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
return resImage;
|
||||||
|
};
|
||||||
|
var base64DecodeImageKey = (base64ImgKey) => {
|
||||||
|
let tempStr = base64ImgKey;
|
||||||
|
if ((0, import_utils.matchS3Prefix)(tempStr)) {
|
||||||
|
tempStr = tempStr.replace(/^v[0-9]_/, "");
|
||||||
|
tempStr = import_base_64.default.decode(tempStr);
|
||||||
|
}
|
||||||
|
const [bucket, ...pathArr] = tempStr.split("_");
|
||||||
|
return tempStr = `${bucket}/${pathArr.join("_")}`;
|
||||||
|
};
|
||||||
|
var getBase64ByUrl = function(src, outputFormat = "image/png") {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("GET", src, true);
|
||||||
|
xhr.responseType = "arraybuffer";
|
||||||
|
xhr.onload = function(e) {
|
||||||
|
if (Number(xhr.status) === 200) {
|
||||||
|
const uInt8Array = new Uint8Array(xhr.response);
|
||||||
|
let i = uInt8Array.length;
|
||||||
|
const binaryString = new Array(i);
|
||||||
|
while (i--) {
|
||||||
|
binaryString[i] = String.fromCharCode(uInt8Array[i]);
|
||||||
|
}
|
||||||
|
const data = binaryString.join("");
|
||||||
|
const base64 = window.btoa(data);
|
||||||
|
const dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
|
||||||
|
resolve(dataUrl);
|
||||||
|
} else {
|
||||||
|
reject(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.onerror = (e) => {
|
||||||
|
reject(e);
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var fileToBase64 = (file) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = function(e) {
|
||||||
|
resolve(e == null ? void 0 : e.target.result);
|
||||||
|
};
|
||||||
|
reader.onerror = function(e) {
|
||||||
|
reject(e);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var getBase64Image = (image, width, height) => {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = width !== void 0 ? width : image.width;
|
||||||
|
canvas.height = height !== void 0 ? height : image.height;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx == null ? void 0 : ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||||
|
const ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
|
||||||
|
const dataURL = canvas.toDataURL("image/" + ext);
|
||||||
|
return dataURL;
|
||||||
|
};
|
||||||
|
var getBase64ByImage = function(src) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const image = new Image();
|
||||||
|
const timestamp = (/* @__PURE__ */ new Date()).getTime();
|
||||||
|
const imgUrl = src + "?" + timestamp;
|
||||||
|
image.src = imgUrl;
|
||||||
|
image.onload = function() {
|
||||||
|
function getBase64Image2(img) {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.width = img.width;
|
||||||
|
canvas.height = img.height;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
ctx == null ? void 0 : ctx.drawImage(img, 0, 0, img.width, img.height);
|
||||||
|
const ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
|
||||||
|
const dataURL = canvas.toDataURL("image/" + ext);
|
||||||
|
return dataURL;
|
||||||
|
}
|
||||||
|
const base64 = getBase64Image2(image);
|
||||||
|
resolve(base64);
|
||||||
|
};
|
||||||
|
image.onerror = (e) => {
|
||||||
|
reject(e);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var urlToBase64V2 = (url) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let image = new Image();
|
||||||
|
image.onload = function() {
|
||||||
|
var _a;
|
||||||
|
let canvas = document.createElement("canvas");
|
||||||
|
canvas.width = image.naturalWidth;
|
||||||
|
canvas.height = image.naturalHeight;
|
||||||
|
(_a = canvas == null ? void 0 : canvas.getContext("2d")) == null ? void 0 : _a.drawImage(image, 0, 0);
|
||||||
|
let result = canvas.toDataURL("image/png");
|
||||||
|
resolve(result);
|
||||||
|
};
|
||||||
|
const imgUrl = url;
|
||||||
|
image.setAttribute("crossOrigin", "Anonymous");
|
||||||
|
image.src = imgUrl;
|
||||||
|
image.onerror = () => {
|
||||||
|
reject(new Error("Images fail to load"));
|
||||||
|
};
|
||||||
|
}).catch((error) => {
|
||||||
|
throw new Error(error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
function base64toBlob(base64) {
|
||||||
|
if (!base64) return;
|
||||||
|
var arr = base64.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||||
|
while (n--) {
|
||||||
|
u8arr[n] = bstr.charCodeAt(n);
|
||||||
|
}
|
||||||
|
return new Blob([u8arr], { type: mime });
|
||||||
|
}
|
||||||
|
var downloadPackageImages = async (imgDataList, zipName) => {
|
||||||
|
let imgDataDownLoadList = [];
|
||||||
|
let imgBlobList = [];
|
||||||
|
let imageSuffix = [];
|
||||||
|
let zip = new import_jszip.default();
|
||||||
|
let img = zip.folder(zipName);
|
||||||
|
try {
|
||||||
|
for (let i2 = 0; i2 < imgDataList.length; i2++) {
|
||||||
|
let src = imgDataList[i2].url;
|
||||||
|
let suffix = src.substring(src.lastIndexOf("."));
|
||||||
|
let base64ByUrl = await urlToBase64V2(imgDataList[i2].url);
|
||||||
|
if (!base64ByUrl) continue;
|
||||||
|
let blob = base64toBlob(base64ByUrl);
|
||||||
|
imgDataDownLoadList.push(imgDataList[i2]);
|
||||||
|
imgBlobList.push(blob);
|
||||||
|
imageSuffix.push(suffix);
|
||||||
|
}
|
||||||
|
if (imgBlobList.length === 0) throw new Error("The number of pictures is zero !");
|
||||||
|
if (imgBlobList.length > 0) {
|
||||||
|
for (var i = 0; i < imgBlobList.length; i++) {
|
||||||
|
img == null ? void 0 : img.file(
|
||||||
|
imgDataDownLoadList[i].name + (0, import_lodash_es.get)(imageSuffix, `.${i}`, imageSuffix[0]),
|
||||||
|
// @ts-ignore
|
||||||
|
imgBlobList[i],
|
||||||
|
{
|
||||||
|
base64: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
zip.generateAsync({ type: "blob" }).then(function(content) {
|
||||||
|
import_file_saver.default.saveAs(content, zipName + ".zip");
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function getFileSize(size) {
|
||||||
|
if (!size) return "";
|
||||||
|
var num = 1024;
|
||||||
|
if (size < num) return size + "B";
|
||||||
|
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "K";
|
||||||
|
if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + "M";
|
||||||
|
if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + "G";
|
||||||
|
return (size / Math.pow(num, 4)).toFixed(2) + "T";
|
||||||
|
}
|
||||||
|
var dataURLToBlob = (dataurl) => {
|
||||||
|
const arr = dataurl.split(",");
|
||||||
|
const mime = arr[0].match(/:(.*?);/)[1];
|
||||||
|
const bstr = atob(arr[1]);
|
||||||
|
let n = bstr.length;
|
||||||
|
const u8arr = new Uint8Array(n);
|
||||||
|
while (n--) {
|
||||||
|
u8arr[n] = bstr.charCodeAt(n);
|
||||||
|
}
|
||||||
|
return new Blob([u8arr], { type: mime });
|
||||||
|
};
|
||||||
|
var generateImg = (_imgKey, host = "http://10.0.0.120") => {
|
||||||
|
let imgKey = _imgKey;
|
||||||
|
let imgUrl = "";
|
||||||
|
if (!imgKey) return "";
|
||||||
|
if (/(http|https):\/\/([\w.]+\/?)\S*/ig.test(imgKey)) {
|
||||||
|
return imgKey;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if ((0, import_utils.matchS3Prefix)(imgKey)) {
|
||||||
|
imgKey = base64DecodeImageKey(imgKey);
|
||||||
|
if (imgKey.endsWith("/")) {
|
||||||
|
const i = imgKey.substring(0, imgKey.length - 1);
|
||||||
|
imgKey = i;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
imgUrl = `${host}/file/${imgKey}`;
|
||||||
|
if (_imgKey.includes("v3")) {
|
||||||
|
imgUrl = `${host}/minio/${imgKey}`;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
imgUrl = "";
|
||||||
|
}
|
||||||
|
return imgUrl;
|
||||||
|
};
|
||||||
|
var getImageKey = (imageKey, preFix) => {
|
||||||
|
const splitIndex = preFix || "v1_";
|
||||||
|
if (imageKey.startsWith(splitIndex)) {
|
||||||
|
return window.atob(imageKey.split(splitIndex)[1]).replace("_", "/");
|
||||||
|
} else {
|
||||||
|
return imageKey;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var getFileByRect = async (img, odRect) => {
|
||||||
|
var _a;
|
||||||
|
let image;
|
||||||
|
if ((0, import_lodash_es.isString)(img)) {
|
||||||
|
const url = generateImg(img);
|
||||||
|
image = await urlToImg(url);
|
||||||
|
} else {
|
||||||
|
image = img;
|
||||||
|
}
|
||||||
|
const commonCanvas = document.createElement("canvas");
|
||||||
|
commonCanvas.width = odRect.w * image.width;
|
||||||
|
commonCanvas.height = odRect.h * image.height;
|
||||||
|
commonCanvas.style.display = "none";
|
||||||
|
document.body.appendChild(commonCanvas);
|
||||||
|
const commonCtx = commonCanvas.getContext("2d");
|
||||||
|
commonCtx == null ? void 0 : commonCtx.translate(-odRect.x * image.width, -odRect.y * image.height);
|
||||||
|
commonCtx == null ? void 0 : commonCtx.drawImage(image, 0, 0);
|
||||||
|
const base64 = commonCanvas.toDataURL("image/jpeg");
|
||||||
|
const blobData = dataURLToBlob(base64);
|
||||||
|
(_a = commonCanvas.parentNode) == null ? void 0 : _a.removeChild(commonCanvas);
|
||||||
|
const file = new window.File([blobData], `${(/* @__PURE__ */ new Date()).getTime()}`, {
|
||||||
|
type: "image/jpeg"
|
||||||
|
});
|
||||||
|
return file;
|
||||||
|
};
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
base64DecodeImageKey,
|
||||||
|
base64toBlob,
|
||||||
|
dataURLToBlob,
|
||||||
|
downloadPackageImages,
|
||||||
|
fileToBase64,
|
||||||
|
generateImg,
|
||||||
|
getBase64ByImage,
|
||||||
|
getBase64ByUrl,
|
||||||
|
getBase64Image,
|
||||||
|
getFileByRect,
|
||||||
|
getFileSize,
|
||||||
|
getImageKey,
|
||||||
|
urlToBase64V2,
|
||||||
|
urlToImg
|
||||||
|
});
|
||||||
10
packages/func/lib/index.d.ts
vendored
Normal file
10
packages/func/lib/index.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export * from 'lodash-es';
|
||||||
|
export * from './file';
|
||||||
|
export * from './map';
|
||||||
|
export * from './performance';
|
||||||
|
export * from './string';
|
||||||
|
export * from './number';
|
||||||
|
export * from './time';
|
||||||
|
export * from './utils';
|
||||||
|
export * from './camera';
|
||||||
|
export * from './math';
|
||||||
41
packages/func/lib/index.js
Normal file
41
packages/func/lib/index.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/index.tsx
|
||||||
|
var src_exports = {};
|
||||||
|
module.exports = __toCommonJS(src_exports);
|
||||||
|
__reExport(src_exports, require("lodash-es"), module.exports);
|
||||||
|
__reExport(src_exports, require("./file"), module.exports);
|
||||||
|
__reExport(src_exports, require("./map"), module.exports);
|
||||||
|
__reExport(src_exports, require("./performance"), module.exports);
|
||||||
|
__reExport(src_exports, require("./string"), module.exports);
|
||||||
|
__reExport(src_exports, require("./number"), module.exports);
|
||||||
|
__reExport(src_exports, require("./time"), module.exports);
|
||||||
|
__reExport(src_exports, require("./utils"), module.exports);
|
||||||
|
__reExport(src_exports, require("./camera"), module.exports);
|
||||||
|
__reExport(src_exports, require("./math"), module.exports);
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
...require("lodash-es"),
|
||||||
|
...require("./file"),
|
||||||
|
...require("./map"),
|
||||||
|
...require("./performance"),
|
||||||
|
...require("./string"),
|
||||||
|
...require("./number"),
|
||||||
|
...require("./time"),
|
||||||
|
...require("./utils"),
|
||||||
|
...require("./camera"),
|
||||||
|
...require("./math")
|
||||||
|
});
|
||||||
10
packages/func/lib/map/index.d.ts
vendored
Normal file
10
packages/func/lib/map/index.d.ts
vendored
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* 获取经纬信息
|
||||||
|
* @param lngLat 位置信息
|
||||||
|
* @returns @object { long, lat }
|
||||||
|
*/
|
||||||
|
export declare const fixedLngLat: (lngLat?: string) => string;
|
||||||
|
export declare const transformLngLat: (lngLat?: string) => {
|
||||||
|
longitude: number;
|
||||||
|
latitude: number;
|
||||||
|
} | null;
|
||||||
54
packages/func/lib/map/index.js
Normal file
54
packages/func/lib/map/index.js
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/map/index.ts
|
||||||
|
var map_exports = {};
|
||||||
|
__export(map_exports, {
|
||||||
|
fixedLngLat: () => fixedLngLat,
|
||||||
|
transformLngLat: () => transformLngLat
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(map_exports);
|
||||||
|
var fixedLngLat = (lngLat) => {
|
||||||
|
if (!lngLat) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
const lngLatArr = lngLat.split(",");
|
||||||
|
const longitude = Number(lngLatArr[0]).toFixed(6);
|
||||||
|
const latitude = Number(lngLatArr[1]).toFixed(6);
|
||||||
|
if (lngLatArr.length < 2) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return `${longitude},${latitude}`;
|
||||||
|
};
|
||||||
|
var transformLngLat = (lngLat) => {
|
||||||
|
if (lngLat) {
|
||||||
|
const lngLatArr = lngLat ? lngLat.split(",") : [];
|
||||||
|
const longitude = Number(lngLatArr[0]);
|
||||||
|
const latitude = Number(lngLatArr[1]);
|
||||||
|
if (lngLatArr.length < 2) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return { longitude, latitude };
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
fixedLngLat,
|
||||||
|
transformLngLat
|
||||||
|
});
|
||||||
2
packages/func/lib/math/index.d.ts
vendored
Normal file
2
packages/func/lib/math/index.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
declare const _default: {};
|
||||||
|
export default _default;
|
||||||
25
packages/func/lib/math/index.js
Normal file
25
packages/func/lib/math/index.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/math/index.ts
|
||||||
|
var math_exports = {};
|
||||||
|
__export(math_exports, {
|
||||||
|
default: () => math_default
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(math_exports);
|
||||||
|
var math_default = {};
|
||||||
14
packages/func/lib/number/index.d.ts
vendored
Normal file
14
packages/func/lib/number/index.d.ts
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* 设置数据的精度
|
||||||
|
* @param originNumber
|
||||||
|
* @param accuracy 精度 以原点为中心向左为正，向右为负，
|
||||||
|
* @param isCeil 是否为向上取整
|
||||||
|
* @returns number
|
||||||
|
*/
|
||||||
|
export declare const setNumberAccuracy: (originNumber: number, accuracy?: number, isCeil?: boolean) => number;
|
||||||
|
/**
|
||||||
|
* 获取数字
|
||||||
|
* @param number 需要校验的数值
|
||||||
|
* @returns @number
|
||||||
|
*/
|
||||||
|
export declare const toRealNumber: (number: any) => any;
|
||||||
52
packages/func/lib/number/index.js
Normal file
52
packages/func/lib/number/index.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/number/index.ts
|
||||||
|
var number_exports = {};
|
||||||
|
__export(number_exports, {
|
||||||
|
setNumberAccuracy: () => setNumberAccuracy,
|
||||||
|
toRealNumber: () => toRealNumber
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(number_exports);
|
||||||
|
var setNumberAccuracy = (originNumber, accuracy = 0, isCeil = true) => {
|
||||||
|
if (originNumber === 0) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
let returnData = 0;
|
||||||
|
if (isCeil) {
|
||||||
|
returnData = Math.ceil(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
|
||||||
|
} else {
|
||||||
|
returnData = Math.floor(originNumber / Math.pow(10, accuracy)) * Math.pow(10, accuracy);
|
||||||
|
}
|
||||||
|
if (accuracy < 0) {
|
||||||
|
returnData = Number(returnData.toFixed(-accuracy));
|
||||||
|
} else {
|
||||||
|
returnData = Number(returnData.toFixed(0));
|
||||||
|
}
|
||||||
|
return returnData;
|
||||||
|
};
|
||||||
|
var toRealNumber = (number) => {
|
||||||
|
if (isNaN(number) || number === Infinity) {
|
||||||
|
return 0;
|
||||||
|
} else return number;
|
||||||
|
};
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
setNumberAccuracy,
|
||||||
|
toRealNumber
|
||||||
|
});
|
||||||
1
packages/func/lib/performance/index.d.ts
vendored
Normal file
1
packages/func/lib/performance/index.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
export declare const speedConvert: (bps: number, contertUnit?: number) => string;
|
||||||
40
packages/func/lib/performance/index.js
Normal file
40
packages/func/lib/performance/index.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/performance/index.ts
|
||||||
|
var performance_exports = {};
|
||||||
|
__export(performance_exports, {
|
||||||
|
speedConvert: () => speedConvert
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(performance_exports);
|
||||||
|
var speedConvert = (bps, contertUnit = 8) => {
|
||||||
|
if (bps === void 0) return `0KB/s`;
|
||||||
|
const byte = bps / contertUnit;
|
||||||
|
if (bps > 1024 * 1024 * 1024) {
|
||||||
|
return `${(byte / 1024 / 1024 / 1024).toFixed(2)}GB/s`;
|
||||||
|
} else if (byte > 1024 * 1024) {
|
||||||
|
return `${(byte / 1024 / 1024).toFixed(2)}MB/s`;
|
||||||
|
} else if (byte > 1024) {
|
||||||
|
return `${(byte / 1024).toFixed(2)}KB/s`;
|
||||||
|
}
|
||||||
|
return `${byte}KB/s`;
|
||||||
|
};
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
speedConvert
|
||||||
|
});
|
||||||
99
packages/func/lib/string/index.js
Normal file
99
packages/func/lib/string/index.js
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
var __defProp = Object.defineProperty;
|
||||||
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
||||||
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
||||||
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||||
|
var __export = (target, all) => {
|
||||||
|
for (var name in all)
|
||||||
|
__defProp(target, name, { get: all[name], enumerable: true });
|
||||||
|
};
|
||||||
|
var __copyProps = (to, from, except, desc) => {
|
||||||
|
if (from && typeof from === "object" || typeof from === "function") {
|
||||||
|
for (let key of __getOwnPropNames(from))
|
||||||
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
||||||
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
||||||
|
}
|
||||||
|
return to;
|
||||||
|
};
|
||||||
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
||||||
|
|
||||||
|
// src/string/index.ts
|
||||||
|
var string_exports = {};
|
||||||
|
__export(string_exports, {
|
||||||
|
cutStr: () => cutStr,
|
||||||
|
getStrLength: () => getStrLength,
|
||||||
|
getValueByUrl: () => getValueByUrl,
|
||||||
|
isUrl: () => isUrl,
|
||||||
|
jumpTo: () => jumpTo,
|
||||||
|
pxToRem: () => pxToRem
|
||||||
|
});
|
||||||
|
module.exports = __toCommonJS(string_exports);
|
||||||
|
var getStrLength = function(str) {
|
||||||
|
var realLength = 0, len = str.length, charCode = -1;
|
||||||
|
for (var i = 0; i < len; i++) {
|
||||||
|
charCode = str.charCodeAt(i);
|
||||||
|
if (charCode >= 0 && charCode <= 128) realLength += 1;
|
||||||
|
else realLength += 2;
|
||||||
|
}
|
||||||
|
return realLength;
|
||||||
|
};
|
||||||
|
var cutStr = function cutstr(str, len) {
|
||||||
|
var str_length = 0;
|
||||||
|
var str_len = 0;
|
||||||
|
let str_cut = new String();
|
||||||
|
str_len = str.length;
|
||||||
|
for (var i = 0; i < str_len; i++) {
|
||||||
|
let a = str.charAt(i);
|
||||||
|
str_length++;
|
||||||
|
if (escape(a).length > 4) {
|
||||||
|
str_length++;
|
||||||
|
}
|
||||||
|
str_cut = str_cut.concat(a);
|
||||||
|
if (str_length >= len) {
|
||||||
|
str_cut = str_cut.concat("...");
|
||||||
|
return str_cut;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (str_length < len) {
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var isUrl = (str) => {
|
||||||
|
try {
|
||||||
|
new URL(str);
|
||||||
|
return true;
|
||||||
|
} catch (err) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var getValueByUrl = (key, str) => {
|
||||||
|
let result = null;
|
||||||
|
if (isUrl(str)) {
|
||||||
|
result = new URL(str).searchParams.get(key);
|
||||||
|
} else {
|
||||||
|
result = new URLSearchParams(str.indexOf("?") > -1 ? str : `?${str}`).get(key);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
var pxToRem = (value, rootFontSize) => {
|
||||||
|
const fontSize = rootFontSize || 80;
|
||||||
|
const valueArr = value.split(" ");
|
||||||
|
return valueArr.filter((o) => o).map((val) => parseFloat(val) / fontSize + "rem").join(" ");
|
||||||
|
};
|
||||||
|
var jumpTo = (to) => {
|
||||||
|
const from = location.origin + location.pathname;
|
||||||
|
if (!isUrl(to)) {
|
||||||
|
throw Error(`\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u94FE\u63A5\uFF0C\u4EE5http(s)://\u5F00\u5934\uFF01'`);
|
||||||
|
}
|
||||||
|
let _targetUrl = new URL(to);
|
||||||
|
_targetUrl.searchParams.set("from", from);
|
||||||
|
return _targetUrl;
|
||||||
|
};
|
||||||
|
// Annotate the CommonJS export names for ESM import in node:
|
||||||
|
0 && (module.exports = {
|
||||||
|
cutStr,
|
||||||
|
getStrLength,
|
||||||
|
getValueByUrl,
|
||||||
|
isUrl,
|
||||||
|
jumpTo,
|
||||||
|
pxToRem
|
||||||
|
});
|
||||||
11
packages/func/lib/time/index.d.ts
vendored
Normal file
11
packages/func/lib/time/index.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
export declare const formateDuration: (diff: number) => string;
|
||||||
|
export declare function generateTime(): {
|
||||||
|
startDateTime: number;
|
||||||
|
endDateTime: number;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* 格式化时间为 00:00
|
||||||
|
* @param seconds 时间，单位秒
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export declare function formatDurationTime(seconds: number): string;
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user