@bos-alpha/progress/lib/components/tag-link/model-tree.js

进度管理

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import { Select, Button, Row, Col, Tree, Spin } from 'antd';
import styled from '@emotion/styled';
import { BOS3DViewer, prefixCls } from '@bos-alpha/common';
import * as services from '@bos-alpha/common/lib/services';
import { getModelWithTag } from '../data';
var Option = Select.Option;
export var ModelTree = function (_a) {
    var type = _a.type, wbsKey = _a.wbsKey, tagLinkedKeys = _a.tagLinkedKeys, onLink = _a.onLink, onUnlink = _a.onUnlink;
    var _b = useState([]), modelKey = _b[0], setModelKey = _b[1];
    var _c = useState([]), modelList = _c[0], setModelList = _c[1];
    // 接口返回的全部空间树
    var _d = useState([]), groupTree = _d[0], setGroupTree = _d[1];
    // 左侧树结构数据 与 下拉选中的模型有关系 只显示当前模型的物项
    var _e = useState([]), treeData = _e[0], setTreeData = _e[1];
    // 选中的节点 用于高亮构件
    var _f = useState([]), selectedKeys = _f[0], setSelectedKeys = _f[1];
    // 勾选的节点key 用于关联任务
    var _g = useState([]), checkedKeys = _g[0], setCheckedKeys = _g[1];
    // 展开的节点 从3d模型中选中构件时，需要展开节点树
    var _h = useState([]), expandedKeys = _h[0], setExpandedKeys = _h[1];
    var expandedKeysRef = useRef([]);
    // 获取空间位置树
    var _j = useState(false), fetching = _j[0], setFetching = _j[1];
    // 空间树上所有物项对应构件key
    var linkedCptKeys = useRef([]);
    useEffect(function () {
        fetchModels();
        getTreeData();
    }, []); // eslint-disable-line react-hooks/exhaustive-deps
    useEffect(function () {
        expandedKeysRef.current = expandedKeys;
    }, [expandedKeys]); // eslint-disable-line
    // 查询模型
    var fetchModels = function () { return __awaiter(void 0, void 0, void 0, function () {
        var models;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, getModelWithTag()];
                case 1:
                    models = _a.sent();
                    setModelList(models);
                    if (models.count > 0) {
                        setModelKey([models[0].modelKey]);
                    }
                    return [2 /*return*/];
            }
        });
    }); };
    // 模型发生变化 获取模型对应树节点
    useEffect(function () {
        if (modelKey.length > 0) {
            // 切换模型 清空
            linkedCptKeys.current = [];
            // 左侧结构树 只显示当前属于当前模型的节点
            var loop_1 = function (list) {
                return list
                    .filter(function (item) { return item.modelKey.indexOf(modelKey[0]) >= 0; })
                    .map(function (item) {
                    var _a;
                    // 收集物项对应构件key 添加关联时，已被wbs关联的物项半透明
                    if (tagLinkedKeys.indexOf(item.key) < 0) {
                        (_a = linkedCptKeys.current).push.apply(_a, (item.info.componentKeys || []));
                    }
                    if (item.children) {
                        item.children = loop_1(item.children);
                    }
                    return item;
                });
            };
            var list = loop_1(groupTree);
            setTreeData(list);
        }
    }, [modelKey, groupTree]); // eslint-disable-line
    // 模型加载完毕
    var onModelLoad = function () {
        // 将指定构件之外的其他构件设置为透明
        window.viewer3D.transparentOtherComponentsByKey(linkedCptKeys.current);
    };
    // 查询空间树
    var getTreeData = function () { return __awaiter(void 0, void 0, void 0, function () {
        var res, loop_2, list, err_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    _a.trys.push([0, 2, , 3]);
                    setFetching(true);
                    return [4 /*yield*/, services.getGroupedTree({
                            params: __assign({ type: 'location' }, (type === 'remove' ? { wbsId: wbsKey } : {}))
                        })];
                case 1:
                    res = _a.sent();
                    loop_2 = function (list, parentKey) {
                        return list.map(function (item) {
                            if (!item.children) {
                                item.isLeaf = true;
                                item.modelKey = [item.modelKey];
                            }
                            else {
                                item.isLeaf = false;
                                // 先递归 再搜集modelKey
                                item.children = loop_2(item.children, item.key);
                                var modelKeys_1 = [];
                                item.children.forEach(function (item) {
                                    if (item.modelKey) {
                                        modelKeys_1.push.apply(modelKeys_1, item.modelKey);
                                    }
                                });
                                item.modelKey = Array.from(new Set(modelKeys_1));
                            }
                            var key = item.key, title = item.name, modelKey = item.modelKey, isLeaf = item.isLeaf, children = item.children;
                            return {
                                key: key,
                                title: title,
                                modelKey: modelKey,
                                isLeaf: isLeaf,
                                children: children,
                                checkable: tagLinkedKeys.indexOf(item.key) < 0,
                                parentKey: parentKey,
                                info: item
                            };
                        });
                    };
                    list = loop_2(res, '');
                    setFetching(false);
                    setGroupTree(list);
                    return [3 /*break*/, 3];
                case 2:
                    err_1 = _a.sent();
                    setFetching(false);
                    return [3 /*break*/, 3];
                case 3: return [2 /*return*/];
            }
        });
    }); };
    // 点击选中节点 高亮构件
    var onTreeSelect = function (keys, info) {
        // console.log(keys, info);
        setSelectedKeys(keys);
        // 获取需要高亮的构件key
        var componentKeys = info.selected
            ? info.node.info.componentKeys || []
            : [];
        // 开始高亮模型构件
        var viewer3D = window.viewer3D;
        // 先清除历史高亮
        var highlightKeys = viewer3D.getHighlightComponentsKey();
        viewer3D.closeHighlightComponentsByKey(highlightKeys);
        if (componentKeys.length === 0)
            return;
        // 通过key将构件设置为高亮。
        viewer3D.highlightComponentsByKey(componentKeys);
    };
    // 勾选节点 关联物项
    var onTreeCheck = function (_, info) {
        // console.log(info);
        var keys = [];
        info.checkedNodes.forEach(function (item) {
            if (!item.children) {
                keys.push(item.key);
            }
        });
        setCheckedKeys(keys);
    };
    // 模型被点击 这是外部事件  注意useState值
    var onModelClick = function (info, selectComponents) {
        if (!selectComponents.length) {
            setSelectedKeys([]);
            return;
        }
        console.log('选中构件', selectComponents);
        var matchTreeKeys = [];
        var parentKeys = [];
        // 递归查找树节点
        var loopFind = function (list, cptKeys) {
            list.forEach(function (item) {
                cptKeys.forEach(function (key) {
                    if ((item.info.componentKeys || []).indexOf(key) >= 0) {
                        matchTreeKeys.push(item.key);
                        parentKeys.push(item.parentKey);
                    }
                });
                if (item.children) {
                    loopFind(item.children, cptKeys);
                }
            });
        };
        loopFind(groupTree, selectComponents);
        console.log('匹配到了空间树节点', matchTreeKeys);
        // 选中节点
        setSelectedKeys(matchTreeKeys);
        // 展开父节点
        setExpandedKeys(Array.from(new Set(__spreadArray(__spreadArray([], expandedKeysRef.current, true), parentKeys, true))));
    };
    var linkBtns = {
        add: {
            title: '确认关联',
            action: function () { return onLink(checkedKeys); }
        },
        remove: {
            title: '取消关联',
            action: function () { return onUnlink(checkedKeys); }
        }
    };
    return (_jsxs(Container, { children: [_jsxs("div", __assign({ className: "top-toolbox" }, { children: [_jsx("div", { children: _jsx(Select, __assign({ className: "model-selector", value: modelKey[0], placeholder: "\u8BF7\u9009\u62E9\u6A21\u578B", onChange: function (key) { return setModelKey([key]); } }, { children: modelList.map(function (option, index) { return (_jsx(Option, __assign({ title: option.modelName, value: option.modelKey }, { children: _jsxs(ModelOption, { children: [_jsx("span", __assign({ className: "model-name" }, { children: option.modelName }), void 0), _jsxs("span", { children: [option.folder, "/"] }, void 0)] }, void 0) }), index)); }) }), void 0) }, void 0), _jsx("div", __assign({ className: "link-btn" }, { children: _jsx(CustomButton, __assign({ type: "primary", disabled: checkedKeys.length < 1, onClick: linkBtns[type].action }, { children: linkBtns[type].title }), void 0) }), void 0)] }), void 0), _jsxs(Row, { children: [_jsxs(Col, __assign({ span: 6, className: "page-left" }, { children: [_jsx(CustomTree, { checkable: true, treeData: treeData, selectedKeys: selectedKeys, checkedKeys: checkedKeys, expandedKeys: expandedKeys, onSelect: onTreeSelect, onCheck: onTreeCheck, onExpand: function (keys) {
                                    console.log('onExpand', keys);
                                    setExpandedKeys(keys);
                                }, filterTreeNode: function (node) {
                                    return selectedKeys.indexOf(node.key) >= 0;
                                } }, void 0), fetching ? (_jsx("div", __assign({ className: "no-data" }, { children: _jsx(Spin, {}, void 0) }), void 0)) : null] }), void 0), _jsx(Col, __assign({ span: 18 }, { children: _jsx(BOS3DViewer, { modelKey: modelKey, height: "60vh", onClickPick: onModelClick, onLoadComplete: onModelLoad }, void 0) }), void 0)] }, void 0)] }, void 0));
};
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .top-toolbox {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 5px;\n        padding-bottom: 5px;\n        border-bottom: 1px solid #d2d2d2;\n    }\n    .model-selector {\n        width: 260px;\n    }\n    .link-btn {\n        padding: 10px 0;\n        text-align: right;\n    }\n    .page-left {\n        border-right: 1px solid #d2d2d2;\n        height: 60vh;\n        overflow: scroll;\n        .no-data {\n            text-align: center;\n            padding-top: 30px;\n            color: #dedede;\n        }\n    }\n"], ["\n    .top-toolbox {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 5px;\n        padding-bottom: 5px;\n        border-bottom: 1px solid #d2d2d2;\n    }\n    .model-selector {\n        width: 260px;\n    }\n    .link-btn {\n        padding: 10px 0;\n        text-align: right;\n    }\n    .page-left {\n        border-right: 1px solid #d2d2d2;\n        height: 60vh;\n        overflow: scroll;\n        .no-data {\n            text-align: center;\n            padding-top: 30px;\n            color: #dedede;\n        }\n    }\n"])));
var CustomTree = styled(Tree)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", "-tree-node-content-wrapper.", "-tree-node-selected {\n        color: #2878ff;\n    }\n    .", "-tree-treenode:not(.", "-tree .", "-tree-treenode-disabled).filter-node\n        .", "-tree-node-content-wrapper {\n        background-color: #bae7ff;\n        color: #2878ff;\n    }\n"], ["\n    .", "-tree-node-content-wrapper.", "-tree-node-selected {\n        color: #2878ff;\n    }\n    .", "-tree-treenode:not(.", "-tree .", "-tree-treenode-disabled).filter-node\n        .", "-tree-node-content-wrapper {\n        background-color: #bae7ff;\n        color: #2878ff;\n    }\n"])), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls);
var CustomButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 120px;\n    border-radius: 22px;\n"], ["\n    width: 120px;\n    border-radius: 22px;\n"])));
var ModelOption = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    & > .model-name {\n        display: inline-block;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        width: 250px;\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    & > .model-name {\n        display: inline-block;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        width: 250px;\n    }\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;