@icos-desktop/react-components 2.2.15 → 2.3.0-es.2

package/dist/es/components/TagConfig/components/TagList/index.js

@@ -0,0 +1,150 @@
+import { __awaiter, __generator, __spreadArray, __assign } from '../../../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.41.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
+import { Input, Tree, Empty } from '@xirang/design-antd';
+import { useRequest } from 'ahooks';
+import classNames from 'classnames';
+import React__default, { useState, useMemo } from 'react';
+import { getTagTree } from '../../../../services/tag.js';
+import { arrayToTree } from '../../../../utils/tree.js';
+import styles from './index.module.less.js';
+
+var Search = Input.Search;
+var searchTree = function (forest, keyword) {
+    var result = null;
+    function search(node, kwd) {
+        var found = false;
+        if (node.name.includes(kwd)) {
+            // 如果节点名称包含关键字，标记为找到
+            found = true;
+        }
+        var newNode = __assign(__assign({}, node), { children: [], tagValues: [] });
+        if (node.children) {
+            for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                var childResult = search(child, kwd);
+                if (childResult) {
+                    newNode.children.push(childResult);
+                    found = true;
+                }
+            }
+        }
+        if (node.tagValues) {
+            for (var _b = 0, _c = node.tagValues; _b < _c.length; _b++) {
+                var child = _c[_b];
+                var childResult = search(child, kwd);
+                if (childResult) {
+                    newNode.tagValues.push(childResult);
+                    found = true;
+                }
+            }
+        }
+        if (found) {
+            return newNode;
+        }
+        return null;
+    }
+    for (var _i = 0, forest_1 = forest; _i < forest_1.length; _i++) {
+        var node = forest_1[_i];
+        var found = search(node, keyword);
+        if (found) {
+            if (!result) {
+                result = [];
+            }
+            result.push(found);
+        }
+    }
+    return result;
+};
+var TagList = function (_a) {
+    var templateId = _a.templateId, selectedTag = _a.selectedTag, setSelectedTag = _a.setSelectedTag;
+    var _b = useState(''), keyword = _b[0], setKeyword = _b[1];
+    var _c = useState([]), expandedKeys = _c[0], setExpandedKeys = _c[1];
+    var handleExpand = function (keys) {
+        setExpandedKeys(keys);
+    };
+    var handleSelect = function (keys) {
+        if (keys.length) {
+            if (expandedKeys.includes(keys[0])) {
+                setExpandedKeys(expandedKeys.filter(function (key) { return key !== keys[0]; }));
+            }
+            else {
+                setExpandedKeys(__spreadArray(__spreadArray([], expandedKeys, true), keys, true));
+            }
+        }
+    };
+    // 选择标签
+    var handleSelectTag = function (node) {
+        if ((selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.key) === node.key) {
+            // 取消选中
+            setSelectedTag(null);
+        }
+        else {
+            // 选中
+            setSelectedTag(node);
+        }
+    };
+    var titleRender = function (node) {
+        var title = node.title, type = node.type, tagValues = node.tagValues;
+        if (type === 'tagValues') {
+            return (React__default.createElement("div", { className: styles['tag-values'] }, tagValues.map(function (item) {
+                var _a;
+                return (React__default.createElement("div", { className: classNames(styles['tag-value'], (_a = {},
+                        _a[styles.selected] = item.key === (selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.key),
+                        _a)), onClick: function () { return handleSelectTag(item); } }, item.title));
+            })));
+        }
+        return React__default.createElement("div", null, title);
+    };
+    var handleSearch = function (value) {
+        setKeyword(value);
+    };
+    var data = useRequest(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, others, tagDefs, tagValueMap, array, tree;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getTagTree({ templateId: templateId })];
+                case 1:
+                    res = _a.sent();
+                    others = [];
+                    tagDefs = [];
+                    tagValueMap = {};
+                    res.forEach(function (item) {
+                        if (item.type === 'tagDef') {
+                            tagDefs.push(item);
+                            return;
+                        }
+                        if (item.type === 'tagValue') {
+                            if (!tagValueMap[item.parentCode]) {
+                                tagValueMap[item.parentCode] = [];
+                            }
+                            tagValueMap[item.parentCode].push(item);
+                            return;
+                        }
+                        others.push(item);
+                    });
+                    array = __spreadArray(__spreadArray([], others, true), tagDefs, true);
+                    tagDefs.forEach(function (item) {
+                        var _a;
+                        if ((_a = tagValueMap[item.code]) === null || _a === void 0 ? void 0 : _a.length) {
+                            array.push({
+                                code: "tagValues_".concat(item.code),
+                                name: '',
+                                parentCode: item.code,
+                                type: 'tagValues',
+                                tagValues: tagValueMap[item.code].map(function (it) { return (__assign(__assign({}, it), { key: it.code, title: it.name })); }),
+                            });
+                        }
+                    });
+                    tree = arrayToTree(array, function (item) { return (__assign(__assign({}, item), { key: item.code, parentKey: item.parentCode, title: item.name })); });
+                    return [2 /*return*/, tree];
+            }
+        });
+    }); }).data;
+    var treeData = useMemo(function () { return (keyword ? ((data === null || data === void 0 ? void 0 : data.length) ? searchTree(data, keyword) || [] : []) : data); }, [keyword, data]);
+    return (React__default.createElement("div", { className: styles.container },
+        React__default.createElement("div", { className: styles.title }, "\u5168\u90E8\u6807\u7B7E"),
+        React__default.createElement("div", { className: styles.search },
+            React__default.createElement(Search, { placeholder: "\u8BF7\u8F93\u5165\u6807\u7B7E\u540D\u79F0", onSearch: handleSearch })),
+        React__default.createElement("div", { className: styles.tree }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React__default.createElement(Tree, { expandedKeys: expandedKeys, selectedKeys: [], onExpand: handleExpand, onSelect: handleSelect, titleRender: titleRender, treeData: treeData, blockNode: true })) : (React__default.createElement(Empty, null)))));
+};
+
+export { TagList as default };

package/dist/es/components/TagConfig/components/TagList/index.module.less.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index-module_container__OwuxO {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding-top: 20px;\n  background: rgba(0, 102, 255, 0.06);\n}\n.index-module_container__OwuxO .index-module_title__4d-kh {\n  flex-shrink: 0;\n}\n.index-module_container__OwuxO .index-module_search__mZxmC {\n  flex-shrink: 0;\n  padding: 16px 0 8px;\n}\n.index-module_container__OwuxO .index-module_tree__DOrDA {\n  flex: 1;\n  height: 0;\n  overflow: hidden auto;\n}\n.index-module_container__OwuxO .index-module_tree__DOrDA .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title {\n  overflow: initial;\n}\n.index-module_container__OwuxO .index-module_tree__DOrDA .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper:hover {\n  background: transparent;\n  box-shadow: none;\n}\n.index-module_tag-values__SEg7R {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-left: -24px;\n}\n.index-module_tag-values__SEg7R .index-module_tag-value__1bsAv {\n  padding: 4px 12px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 18px;\n  color: #0ff;\n  background: rgba(0, 255, 255, 0.2);\n  border-radius: 4px;\n}\n.index-module_tag-values__SEg7R .index-module_tag-value__1bsAv.index-module_selected__UA277 {\n  color: #fff;\n  background: #0cc;\n}\n";
+var styles = {"container":"index-module_container__OwuxO","title":"index-module_title__4d-kh","search":"index-module_search__mZxmC","tree":"index-module_tree__DOrDA","tag-values":"index-module_tag-values__SEg7R","tag-value":"index-module_tag-value__1bsAv","selected":"index-module_selected__UA277"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/es/components/TagConfig/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TagConfig';
+export type { TagConfigProps } from './TagConfig.types';

package/dist/es/components/TagConfig/settings.d.ts

@@ -0,0 +1,2 @@
+declare const _default: ComponentPrototype;
+export default _default;

package/dist/es/components/TagConfig/settings.js

@@ -0,0 +1,39 @@
+import { applyRules } from '../../utils/settings.js';
+
+var settings = {
+    name: 'CcosTagConfig',
+    title: '实体标签配置',
+    description: '',
+    package: '@icos-desktop/react-components',
+    exportType: 'namedExport',
+    props: [
+    // {
+    //   name: 'views',
+    //   title: '左侧菜单栏',
+    //   group: 'basic',
+    //   setter: 'selectSetter',
+    //   setterProps: {
+    //     mode: 'multiple',
+    //     labelInValue: true,
+    //   },
+    //   options: [
+    //     { label: '城市物件', value: 'system-icos_city_object' },
+    //     { label: '城市居民', value: 'system-icos_city_resident' },
+    //     { label: '地理空间', value: 'system-icos_geo_space' },
+    //     { label: '组织机构', value: 'system-icos_gov_org' },
+    //     { label: '城市事件', value: 'system-icos_ld_event' },
+    //     { label: '政府通讯录', value: 'system-icos_gov_user' },
+    //   ],
+    // },
+    // 事件
+    // {
+    //   name: 'onCreateSense',
+    //   title: '新建对象',
+    //   group: 'event',
+    //   setter: 'eventSetter',
+    // },
+    ],
+};
+var settings$1 = applyRules(settings);
+
+export { settings$1 as default };

package/dist/es/components/TagTreeSelect/TagTreeSelect.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TagTreeSelectProps } from './TagTreeSelect.types';
+declare const TagTreeSelect: React.FC<TagTreeSelectProps>;
+export default TagTreeSelect;

package/dist/es/components/TagTreeSelect/TagTreeSelect.js

@@ -0,0 +1,23 @@
+import { __awaiter, __generator, __assign } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.41.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
+import { TreeSelect } from '@xirang/design-antd';
+import { useRequest } from 'ahooks';
+import React__default from 'react';
+import { getTagTree } from '../../services/tag.js';
+import styles from './TagTreeSelect.module.less.js';
+
+var TagTreeSelect = function (props) {
+    var data = useRequest(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getTagTree()];
+                case 1:
+                    res = _a.sent();
+                    return [2 /*return*/, res.map(function (item) { return (__assign(__assign({}, item), { selectable: item.type === 'tagValue' })); })];
+            }
+        });
+    }); }).data;
+    return (React__default.createElement(TreeSelect, __assign({ placeholder: "\u8BF7\u9009\u62E9\u6807\u7B7E", popupClassName: styles.container, treeData: data, fieldNames: { label: 'name', value: 'code' }, treeDataSimpleMode: { id: 'code', pId: 'parentCode' }, filterTreeNode: function (input, node) { return node.name.includes(input); }, showSearch: true, allowClear: true }, props)));
+};
+
+export { TagTreeSelect as default };

package/dist/es/components/TagTreeSelect/TagTreeSelect.module.less.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".TagTreeSelect-module_container__QRI8O .ant-select-tree-node-content-wrapper {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+var styles = {"container":"TagTreeSelect-module_container__QRI8O"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/es/components/TagTreeSelect/TagTreeSelect.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import React from 'react';
+import TagTreeSelect from './TagTreeSelect';
+import { TagTreeSelectProps } from './TagTreeSelect.types';
+declare const meta: Meta<typeof TagTreeSelect>;
+export default meta;
+export declare const Base: (props: TagTreeSelectProps) => React.JSX.Element;

package/dist/es/components/TagTreeSelect/TagTreeSelect.types.d.ts

@@ -0,0 +1,2 @@
+import { TreeSelectProps } from '@xirang/design-antd';
+export type TagTreeSelectProps = TreeSelectProps;

package/dist/es/components/TagTreeSelect/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TagTreeSelect';

package/dist/es/components/VideoControl/VideoControl.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { VideoControlProps } from './VideoControl.types';
+declare const VideoControl: (props: VideoControlProps) => React.JSX.Element;
+export default VideoControl;

package/dist/es/components/VideoControl/VideoControl.js

@@ -0,0 +1,86 @@
+import { __awaiter, __generator } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.41.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
+import { message, Slider } from '@xirang/design-antd';
+import classNames from 'classnames';
+import React__default, { useState, useEffect } from 'react';
+import { cameraPtzControl } from '../../services/senseForm.js';
+import SvgAdd from './assets/add.svg.js';
+import SvgLine from './assets/line.svg.js';
+import SvgReduce from './assets/reduce.svg.js';
+import styles from './VideoControl.module.less.js';
+
+var VideoControl = function (props) {
+    var _a;
+    var senseGlobalCode = props.senseGlobalCode, channelId = props.channelId, videoStreamSource = props.videoStreamSource, disabled = props.disabled, operationIconColor = props.operationIconColor, operateIconBorderColor = props.operateIconBorderColor, player = props.player;
+    var _b = message.useMessage(), messageApi = _b[0], contextHolder = _b[1];
+    // 云台速度
+    var _c = useState(40), speed = _c[0], setSpeed = _c[1];
+    // 操作云台
+    var handleControl = function (command) { return __awaiter(void 0, void 0, void 0, function () {
+        var res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (disabled) {
+                        return [2 /*return*/, null];
+                    }
+                    return [4 /*yield*/, cameraPtzControl({
+                            videoStreamSource: videoStreamSource,
+                            channelId: channelId,
+                            senseGlobalCode: senseGlobalCode,
+                            command: command,
+                            speed: speed,
+                        })];
+                case 1:
+                    res = _a.sent();
+                    if (res) {
+                        messageApi.success('操作成功', 1);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        document.documentElement.style.setProperty('--video-control-operate-icon-color', typeof operationIconColor !== 'undefined' ? operationIconColor : '#fff');
+        document.documentElement.style.setProperty('--video-control-operate-icon-border-color', typeof operateIconBorderColor !== 'undefined' ? operateIconBorderColor : '#18C7F2');
+    });
+    return (React__default.createElement("div", { className: styles.container },
+        React__default.createElement("div", { className: styles.player }, player),
+        React__default.createElement(SvgLine, null),
+        React__default.createElement("div", { className: classNames(styles.control, (_a = {}, _a[styles['control-disabled']] = disabled, _a)) },
+            React__default.createElement("div", { className: styles.title }, "\u4E91\u53F0\u64CD\u63A7"),
+            React__default.createElement("div", { className: styles.direction },
+                React__default.createElement("div", { className: styles.center }),
+                React__default.createElement("div", { className: styles.up, onClick: function () { return handleControl('UP'); } }),
+                React__default.createElement("div", { className: styles.down, onClick: function () { return handleControl('DOWN'); } }),
+                React__default.createElement("div", { className: styles.left, onClick: function () { return handleControl('LEFT'); } }),
+                React__default.createElement("div", { className: styles.right, onClick: function () { return handleControl('RIGHT'); } }),
+                React__default.createElement("div", { className: styles['left-up'], onClick: function () { return handleControl('LEFT_UP'); } }),
+                React__default.createElement("div", { className: styles['left-down'], onClick: function () { return handleControl('LEFT_DOWN'); } }),
+                React__default.createElement("div", { className: styles['right-up'], onClick: function () { return handleControl('RIGHT_UP'); } }),
+                React__default.createElement("div", { className: styles['right-down'], onClick: function () { return handleControl('RIGHT_DOWN'); } })),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('ZOOM_OUT'); } },
+                    React__default.createElement(SvgReduce, null)),
+                React__default.createElement("div", { className: styles.text }, "\u7126\u8DDD"),
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('ZOOM_IN'); } },
+                    React__default.createElement(SvgAdd, null))),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('FOCUS_FAR'); } },
+                    React__default.createElement(SvgReduce, null)),
+                React__default.createElement("div", { className: styles.text }, "\u7126\u70B9"),
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('FOCUS_NEAR'); } },
+                    React__default.createElement(SvgAdd, null))),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('IRIS_REDUCE'); } },
+                    React__default.createElement(SvgReduce, null)),
+                React__default.createElement("div", { className: styles.text }, "\u5149\u5708"),
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('IRIS_ENLARGE'); } },
+                    React__default.createElement(SvgAdd, null))),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles.text }, "\u901F\u5EA6"),
+                React__default.createElement("div", { className: styles.slider },
+                    React__default.createElement(Slider, { value: speed, onChange: function (value) { return setSpeed(value); }, disabled: disabled })))),
+        contextHolder));
+};
+
+export { VideoControl as default };