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 {
|
||||
width: 188px;
|
||||
overflow-y: scroll;
|
||||
overflow-y: hidden;
|
||||
/* stylelint-disable-next-line rule-empty-line-before */
|
||||
&:hover {
|
||||
overflow-y: auto;
|
||||
|
||||
@ -19,7 +19,6 @@ export default defineConfig({
|
||||
'@zhst/slave': path.join(__dirname, 'packages/slave/src'),
|
||||
'@zhst/material': path.join(__dirname, 'packages/material/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'),
|
||||
},
|
||||
resolve: {
|
||||
@ -35,7 +34,6 @@ export default defineConfig({
|
||||
{ type: 'slave', dir: 'packages/slave/src' },
|
||||
{ type: 'material', dir: 'packages/material/src' },
|
||||
{ type: 'icon', dir: 'packages/icon/src' },
|
||||
{ type: 'icon-v2', dir: 'packages/icon-v2/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({
|
||||
// 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
|
||||
packages/**/es
|
||||
packages/**/lib
|
||||
**/es
|
||||
**/lib
|
||||
**/**/es
|
||||
**/**/lib
|
||||
/es
|
||||
/lib
|
||||
pnpm-lock.yaml
|
||||
|
||||
10
package.json
10
package.json
@ -61,7 +61,6 @@
|
||||
"dumi": "^2.2.13",
|
||||
"eslint": "^8.23.0",
|
||||
"father": "^4.1.0",
|
||||
"father-plugin-less": "^0.0.2",
|
||||
"husky": "^8.0.1",
|
||||
"lerna": "^8.0.0",
|
||||
"lint-staged": "^13.0.3",
|
||||
@ -83,12 +82,5 @@
|
||||
},
|
||||
"authors": [
|
||||
"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({
|
||||
// more father config: https://github.com/umijs/father/blob/master/docs/config.md
|
||||
esm: {
|
||||
output: 'es',
|
||||
ignores: ['**/demo/*', 'src/**/demo/*'],
|
||||
transformer: 'babel',
|
||||
ignores: ['**/demo/*', 'src/**/demo/*']
|
||||
},
|
||||
cjs: {
|
||||
output: 'lib',
|
||||
ignores: ['**/demo/*', 'src/**/demo/*'],
|
||||
transformer: 'babel',
|
||||
ignores: ['**/demo/*', 'src/**/demo/*']
|
||||
},
|
||||
lessInBabel: {
|
||||
modifyVars: {
|
||||
},
|
||||
},
|
||||
plugins: ['father-plugin-less'],
|
||||
});
|
||||
|
||||
@ -1,115 +1,5 @@
|
||||
# @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
|
||||
|
||||
### 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",
|
||||
"version": "0.34.0",
|
||||
"version": "0.26.0",
|
||||
"description": "业务库",
|
||||
"keywords": [
|
||||
"business",
|
||||
@ -35,7 +35,6 @@
|
||||
"registry": "http://10.0.0.77:4874"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@swc/core": "^1.3.9",
|
||||
"@zhst/types": "workspace:^"
|
||||
},
|
||||
"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 WarningRecordCard from '../../../WarningRecordCard';
|
||||
import ViewLargerImageModal from '../../../ViewLargerImageModal';
|
||||
import { Empty, Space, Spin } from '@zhst/meta';
|
||||
import { Empty, Space, Spin } from 'antd';
|
||||
import { pxToRem } from '@zhst/func'
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import "./index.less"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import VideoPlayerCard 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 { pxToRem } from '@zhst/func'
|
||||
import './index.less'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { 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 dayjs from 'dayjs';
|
||||
import { ConfigProvider, CropperImage } from '@zhst/meta';
|
||||
|
||||
@ -4,7 +4,6 @@ import BoxPanel from './components/boxPanel';
|
||||
import type { BoxPanelProps } from './components/boxPanel';
|
||||
import './index.less'
|
||||
import classNames from 'classnames';
|
||||
|
||||
export interface BoxSelectTreeProps extends BoxPanelProps {
|
||||
onTabChange?: (e: any) => void
|
||||
tabsProps?: TabsProps
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import React, { FC, useState, useContext, ReactNode } from 'react';
|
||||
import { ModalFormProps } from '@ant-design/pro-components'
|
||||
import { Input, Dropdown } from 'antd'
|
||||
import {
|
||||
ButtonProps,
|
||||
ConfigProvider,
|
||||
Input,
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Button,
|
||||
Divider,
|
||||
|
||||
@ -17,6 +17,7 @@ const demo = () => {
|
||||
}
|
||||
|
||||
const onBoxBatchDelete = () => {
|
||||
console.log('盒子批量删除', checkedKeys)
|
||||
modal.warning({
|
||||
content: (
|
||||
<div>
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
export { default as BigImageModal } 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 type { BoxSelectTreeProps } from './boxSelectTree'
|
||||
export { default as Tree } 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 type { TreeTransferProps } from './treeTransfer'
|
||||
export { default as TreeTransferModal } from './treeTransferModal'
|
||||
|
||||
@ -3,9 +3,10 @@
|
||||
*/
|
||||
|
||||
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 InfiniteScroll from 'react-infinite-scroll-component';
|
||||
import { Spin, SpinProps } from 'antd';
|
||||
import { useSize } from '@zhst/hooks';
|
||||
import './index.less'
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
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 classNames from 'classnames';
|
||||
import './index.less'
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
// !! 该组件已被废弃
|
||||
import { DataNode } from '@zhst/meta';
|
||||
import { TreeDataNode } from 'antd';
|
||||
import BoxTree from './boxTree';
|
||||
|
||||
export interface TreeData extends DataNode {
|
||||
children?: DataNode['children'] & {
|
||||
export interface TreeData extends TreeDataNode {
|
||||
children?: TreeDataNode['children'] & {
|
||||
isCamera?: boolean
|
||||
/**
|
||||
* 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 { Button, Input, ConfigProvider, theme, Flex, InputProps, TabsProps, Tabs, ButtonProps, Tree, TreeProps, DataNode as TreeDataNode } from '@zhst/meta'
|
||||
import React, { ReactNode } from 'react';
|
||||
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 './index.less'
|
||||
|
||||
const { ConfigContext } = ConfigProvider
|
||||
const componentName = 'zhst-biz-treeTransfer'
|
||||
|
||||
export interface TreeTransferProps {
|
||||
customizePrefixCls?: string
|
||||
/**
|
||||
* @description 自定义标题
|
||||
* @array []
|
||||
*/
|
||||
titles?: string[] | ReactNode[]
|
||||
/**
|
||||
* @description 边框
|
||||
*/
|
||||
bordered?: boolean
|
||||
/**
|
||||
* @description
|
||||
* 树的数据结构 ，参考antd-treeData
|
||||
*/
|
||||
dataSource: TreeDataNode[]
|
||||
/**
|
||||
* @description 树的透传参数
|
||||
*/
|
||||
treeProps?: TreeProps
|
||||
/**
|
||||
* 是否显示左侧树面板的搜索
|
||||
*/
|
||||
showLeftSearch?: boolean
|
||||
/**
|
||||
* @description 搜索的透传
|
||||
*/
|
||||
searchInputProps?: InputProps
|
||||
/**
|
||||
* @description 选中的对象
|
||||
*/
|
||||
targetItems: TreeDataNode[];
|
||||
/**
|
||||
* @description 选中对象的id
|
||||
*/
|
||||
checkedKeys: string[];
|
||||
/**
|
||||
* @description 是否显示搜索框边上的过滤条件
|
||||
*/
|
||||
showFilter?: boolean;
|
||||
/**
|
||||
* @description 是否显示左侧看板底部渲染
|
||||
*/
|
||||
showLeftPanelFooter?: boolean;
|
||||
/**
|
||||
* @description 左侧看板底部渲染
|
||||
*/
|
||||
leftPanelFooterRender?: ReactNode | string;
|
||||
/**
|
||||
* @description 是否显示右侧看板底部渲染
|
||||
*/
|
||||
showRightPanelFooter?: boolean;
|
||||
/**
|
||||
* 右侧看板底部渲染
|
||||
* @param events
|
||||
* @returns
|
||||
*/
|
||||
rightPanelFooterRender?: (events: { onOk: TreeTransferProps['onOk'], onReset: TreeTransferProps['onReset'] }) => ReactNode | string;
|
||||
/**
|
||||
* @description 左侧看板宽度
|
||||
*/
|
||||
leftPanelWidth?: string | number;
|
||||
/**
|
||||
* @description 右侧看板宽度
|
||||
*/
|
||||
rightPanelWidth?: string | number;
|
||||
/**
|
||||
* @description 左侧看板滚动高度
|
||||
*/
|
||||
leftPanelScrollY?: number;
|
||||
/**
|
||||
* @description 右侧看板滚动高度
|
||||
*/
|
||||
middleIcon?: ReactNode | string
|
||||
rightPanelScrollY?: number;
|
||||
tabsItems?: TabsProps['items']
|
||||
showLeftTabs?: boolean
|
||||
@ -101,75 +44,63 @@ export interface TreeTransferProps {
|
||||
|
||||
const { useToken } = theme
|
||||
|
||||
const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
||||
const { getPrefixCls } = useContext(ConfigContext);
|
||||
const componentName = getPrefixCls('biz-treeTransfer', props.customizePrefixCls);
|
||||
const {
|
||||
dataSource,
|
||||
treeProps,
|
||||
titles = ['可选择的范围', '已选择的范围'],
|
||||
bordered,
|
||||
searchInputProps,
|
||||
showLeftSearch = true,
|
||||
leftPanelScrollY = 300,
|
||||
leftPanelWidth = 500,
|
||||
rightPanelScrollY = 422,
|
||||
rightPanelWidth = 300,
|
||||
targetItems = [],
|
||||
checkedKeys = [],
|
||||
showFilter = false,
|
||||
showLeftPanelFooter,
|
||||
showRightPanelFooter = true,
|
||||
customLeftPanelContent,
|
||||
leftPanelFooterRender,
|
||||
rightPanelFooterRender,
|
||||
showLeftTabs,
|
||||
leftTabsProps,
|
||||
middleIcon,
|
||||
activeTabKey,
|
||||
tabsItems = [
|
||||
{
|
||||
key: 'camera',
|
||||
label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >摄像头</div>,
|
||||
},
|
||||
{
|
||||
key: 'plan',
|
||||
label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >预案</div>,
|
||||
},
|
||||
{
|
||||
key: 'map',
|
||||
label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >地图框选</div>,
|
||||
},
|
||||
],
|
||||
filters = [],
|
||||
onLeftTabsChange,
|
||||
onTreeCheck,
|
||||
onTreeSelect,
|
||||
onItemDelete,
|
||||
onSearch,
|
||||
onOk,
|
||||
onReset
|
||||
} = props
|
||||
const TreeTransfer: React.FC<TreeTransferProps> = ({
|
||||
dataSource,
|
||||
treeProps,
|
||||
titles = ['可选择的范围', '已选择的范围'],
|
||||
searchInputProps,
|
||||
showLeftSearch = true,
|
||||
leftPanelScrollY = 300,
|
||||
treeBackgroundColor = '#FCFCFC',
|
||||
leftPanelWidth = 500,
|
||||
rightPanelScrollY = 422,
|
||||
rightPanelWidth = 300,
|
||||
targetItems = [],
|
||||
checkedKeys = [],
|
||||
showFilter = true,
|
||||
showLeftPanelFooter,
|
||||
showRightPanelFooter = true,
|
||||
customLeftPanelContent,
|
||||
leftPanelFooterRender,
|
||||
rightPanelFooterRender,
|
||||
showLeftTabs,
|
||||
leftTabsProps,
|
||||
activeTabKey,
|
||||
tabsItems = [
|
||||
{
|
||||
key: 'camera',
|
||||
label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >摄像头</div>,
|
||||
},
|
||||
{
|
||||
key: 'plan',
|
||||
label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >预案</div>,
|
||||
},
|
||||
{
|
||||
key: 'map',
|
||||
label: <div className={`${componentName}-left_card_tabs_tab`} style={{ textAlign:'center' }} >地图框选</div>,
|
||||
},
|
||||
],
|
||||
filters = [],
|
||||
onLeftTabsChange,
|
||||
onTreeCheck,
|
||||
onTreeSelect,
|
||||
onItemDelete,
|
||||
onSearch,
|
||||
onOk,
|
||||
onReset
|
||||
}) => {
|
||||
|
||||
const { token } = useToken()
|
||||
|
||||
return (
|
||||
<div className={componentName}>
|
||||
<div className={`${componentName}-left`}
|
||||
style={{
|
||||
width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth,
|
||||
border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
|
||||
}}
|
||||
style={{ width: typeof leftPanelWidth === 'number' ? leftPanelWidth + 'px' : leftPanelWidth }}
|
||||
>
|
||||
<div
|
||||
className={`${componentName}-left_card`}
|
||||
style={{ backgroundColor: token.colorBgContainer }}
|
||||
>
|
||||
<div
|
||||
className={`${componentName}-left_card_title`}
|
||||
style={{ backgroundColor: '#f7f7f7' }}
|
||||
>
|
||||
{titles?.[0]}
|
||||
</div>
|
||||
<div className={`${componentName}-left_card_title`}>{titles?.[0]}</div>
|
||||
{showLeftTabs && (
|
||||
<Tabs
|
||||
activeKey={activeTabKey}
|
||||
@ -201,17 +132,28 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
{customLeftPanelContent?.(dataSource) || (
|
||||
<Tree
|
||||
className={`${componentName}-left_card-tree`}
|
||||
blockNode
|
||||
checkable
|
||||
height={leftPanelScrollY}
|
||||
checkedKeys={checkedKeys}
|
||||
treeData={dataSource}
|
||||
onCheck={(keys: any, info: any) => onTreeCheck?.(keys, info)}
|
||||
onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
|
||||
{...treeProps}
|
||||
/>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
// @ts-ignore
|
||||
Tree: {
|
||||
colorBgContainer: treeBackgroundColor
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tree
|
||||
className={`${componentName}-left_card-tree`}
|
||||
blockNode
|
||||
checkable
|
||||
height={leftPanelScrollY}
|
||||
checkedKeys={checkedKeys}
|
||||
treeData={dataSource}
|
||||
onCheck={(keys: any, info: any) => onTreeCheck?.(keys, info)}
|
||||
onSelect={(keys: any, info: any) => onTreeSelect?.(keys, info)}
|
||||
{...treeProps}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
)}
|
||||
{showLeftPanelFooter && (
|
||||
<div className={`${componentName}-left_card-footer`}>
|
||||
@ -221,22 +163,15 @@ const TreeTransfer: React.FC<TreeTransferProps> = (props) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${componentName}-middle`}>
|
||||
{middleIcon || <IconFont icon="icon-zhankai" />}
|
||||
<IconFont icon="icon-zhankai" />
|
||||
</div>
|
||||
<div className={`${componentName}-right`}
|
||||
style={{
|
||||
width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth,
|
||||
border: bordered ? `1px solid ${token.colorBorder}` : 'unset',
|
||||
}}
|
||||
style={{ width: typeof rightPanelWidth === 'number' ? rightPanelWidth + 'px' : rightPanelWidth }}
|
||||
>
|
||||
<div
|
||||
className={`${componentName}-right_card`}
|
||||
style={{ backgroundColor: token.colorBgContainer }}
|
||||
>
|
||||
<div
|
||||
className={`${componentName}-right_card_title`}
|
||||
style={{ backgroundColor: '#f7f7f7' }}
|
||||
>{titles?.[1]}</div>
|
||||
<div className={`${componentName}-right_card_title`} >{titles?.[1]}</div>
|
||||
<div
|
||||
className={`${componentName}-right_card__items`}
|
||||
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;
|
||||
align-items: center;
|
||||
&-left {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
&_card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -35,17 +33,13 @@
|
||||
|
||||
&_search {
|
||||
display: flex;
|
||||
margin: 16px 20px;
|
||||
margin: 8px;
|
||||
&_input {
|
||||
flex: 1;
|
||||
}
|
||||
&_filters {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-tree {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
@ -66,8 +60,6 @@
|
||||
}
|
||||
|
||||
&-right {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
&_card {
|
||||
position: relative;
|
||||
min-height: 544px;
|
||||
@ -82,8 +74,10 @@
|
||||
|
||||
&__items {
|
||||
width: 100%;
|
||||
height: calc(100% - 105px);
|
||||
font-size: 14px;
|
||||
overflow-y: scroll;
|
||||
max-height: 422px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
@ -16,7 +16,6 @@ group:
|
||||
<code src="./demo/withFilter.tsx">加载filter按钮</code>
|
||||
<code src="./demo/withMap.tsx">和地图组件搭配使用</code>
|
||||
<code src="./demo/withModal.tsx">和Modal组合使用</code>
|
||||
<code src="./demo/mingmou.tsx">明眸同款</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
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 { TreeTransferProps } from '../treeTransfer'
|
||||
|
||||
export interface TreeTransferModalProps {
|
||||
dataSource: DataNode[]
|
||||
dataSource: TreeDataNode[]
|
||||
treeProps?: TreeProps
|
||||
targetItems: DataNode[];
|
||||
targetItems: TreeDataNode[];
|
||||
checkedKeys: string[];
|
||||
onTreeSelect?: TreeProps['onSelect']
|
||||
onTreeCheck?: TreeProps['onCheck']
|
||||
onItemDelete?: TreeTransferProps['onItemDelete']
|
||||
onChange?: TransferProps['onChange'];
|
||||
onOk?: (data: any) => void;
|
||||
onReset?: () => void;
|
||||
open?: boolean
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
# @zhst/biz
|
||||
|
||||
## 0.7.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 修改 less to css 配置
|
||||
|
||||
## 0.6.2
|
||||
|
||||
### 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",
|
||||
"version": "0.7.0",
|
||||
"version": "0.6.2",
|
||||
"description": "常量库",
|
||||
"keywords": [
|
||||
"constants",
|
||||
|
||||
@ -1,16 +1,5 @@
|
||||
# @zhst/utils
|
||||
|
||||
## 0.17.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 修改 less to css 配置
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- @zhst/request@0.17.0
|
||||
|
||||
## 0.16.1
|
||||
|
||||
### 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