@bos-alpha/progress/lib/components/model3d/index.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, useState } from 'react';
import { Select, Row, Col, Button, message } from 'antd';
import { BOS3DViewer, prefixCls, cookieModelDb } from '@bos-alpha/common';
import * as services from '@bos-alpha/common/lib/services';
import { CptInfo } from './cpt-info';
import { getModelWithTag } from '../data';
import styled from '@emotion/styled';
var Option = Select.Option;
// 可选择显示面板
var dataPanel = [
    {
        label: '进度模型',
        value: 'model3d'
    },
    {
        label: '进度模拟数据面板',
        value: 'tasks'
    },
    {
        label: '进度模拟甘特图面板',
        value: 'gantt'
    }
];
// 模型状态选择按钮
var modelStatusBtns = [
    {
        title: '正在进行',
        color: '#35ff12'
    },
    {
        title: '计划已完成',
        color: '#5bfffc'
    },
    {
        title: '提前完成',
        color: '#fffc08'
    },
    {
        title: '延期完成',
        color: '#ff4097'
    },
    {
        title: '延期未完成',
        color: '#ff0403'
    },
    {
        title: '显示所有',
        color: ''
    }
];
export var Model3d = function (_a) {
    var tableData = _a.tableData, 
    // 当前模拟时间
    curSimuTime = _a.curSimuTime, onPanelChange = _a.onPanelChange;
    // 模块显隐
    var _b = useState(['model3d', 'tasks', 'gantt']), modules = _b[0], setModules = _b[1];
    var _c = useState([]), modelList = _c[0], setModelList = _c[1];
    // 当前模型
    var _d = useState([]), modelKey = _d[0], setModelKey = _d[1];
    // 构件信息 点击构件的时候 解析构件信息
    var _e = useState([]), cptInfo = _e[0], setCptInfo = _e[1];
    // 选择的构件key
    var _f = useState(), cptKey = _f[0], setCptKey = _f[1];
    // 所有任务已关联的构件信息
    var _g = useState([]), cptLinkedList = _g[0], setCptLinkedList = _g[1];
    // 模型加载完毕
    var _h = useState(false), modelLoaded = _h[0], setModelLoaded = _h[1];
    // 构件状态颜色值
    var _j = useState(''), curStatusColor = _j[0], setCurStatusColor = _j[1];
    // 当前模型所有构件key 在模型加载完毕以后获取
    var _k = useState([]), modelCptKeys = _k[0], setModelCptKeys = _k[1];
    // 正在获取构件信息
    var _l = useState(false), fetching = _l[0], setFetching = _l[1];
    useEffect(function () {
        fetchModels();
    }, []); // eslint-disable-line react-hooks/exhaustive-deps
    // 获取所有模型
    var fetchModels = function () { return __awaiter(void 0, void 0, void 0, function () {
        var models, modelKeys, modelDb, parseRes;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, getModelWithTag()];
                case 1:
                    models = _a.sent();
                    setModelList(models);
                    if (!(models.length > 0 && models[0].modelKey)) return [3 /*break*/, 3];
                    modelKeys = [models[0].modelKey];
                    modelDb = cookieModelDb();
                    return [4 /*yield*/, services.queryResAnalysis(modelDb, {
                            data: {
                                models: modelKeys
                            }
                        })];
                case 2:
                    parseRes = _a.sent();
                    if (parseRes[0] && parseRes[0].status === '3') {
                        setModelKey(modelKeys);
                    }
                    _a.label = 3;
                case 3: return [2 /*return*/];
            }
        });
    }); };
    // 根据任务wbskey获取已关联的构件信息
    useEffect(function () {
        if (tableData.length === 0)
            return;
        // 获取有实际开始时间的任务key
        var loop = function (list) {
            var keys = [];
            list.forEach(function (item) {
                // hasTags有关联构件信息 才去查啊
                if (item.startTime && item.hasTags) {
                    keys = __spreadArray(__spreadArray([], keys, true), [item.key], false);
                }
                if (item.children) {
                    keys = __spreadArray(__spreadArray([], keys, true), loop(item.children), true);
                }
            });
            return keys;
        };
        loop(tableData);
        // 改为批量查询
        services
            .linkedQuery({
            data: {
                condition: [
                    {
                        bosclass: 'wbses',
                        alias: 'w'
                    },
                    {
                        bosclass: 'tags',
                        alias: 't'
                    },
                    {
                        bosclass: 'irTagWbs',
                        alias: 'wbs',
                        type: 'relationship',
                        from: 't',
                        to: 'w'
                    }
                ],
                select: {
                    wbs: 'w',
                    tag: 't',
                    gcomponents: 'gcomponents'
                }
            }
        })
            .then(function (res) {
            var cptList = res.data.map(function (item) {
                return __assign(__assign({}, item.tag), { key: item.tag._key, gcomponents: item.gcomponents, startTime: item.wbs.startTime || 0, endTime: item.wbs.endTime || 0, progress: item.wbs.progress || 0, planStartTime: item.wbs.planStartTime || 0, planEndTime: item.wbs.planEndTime || 0 });
            });
            setCptLinkedList(cptList);
        });
    }, [tableData]);
    // 模型加载完毕 且 构件信息获取完毕 且 有任务当前时间 设置构件颜色
    useEffect(function () {
        if (!modelLoaded)
            return;
        if (curSimuTime === 0)
            return;
        // 收集已经被染色的key 未被染色的部分要隐藏
        var colorfulKey = [];
        if (cptLinkedList.length > 0) {
            var cptsWithStatus = cptLinkedList.map(function (item) {
                var curModelKey = (item.gcomponents[0] && item.gcomponents[0].modelKey) || '';
                if (curModelKey &&
                    item.startTime > 0 &&
                    curModelKey === modelKey[0]) {
                    var componentKeys = item.gcomponents.map(function (item) { return item.componentKey; });
                    var color = '';
                    // 正在进行
                    if (item.startTime <= curSimuTime) {
                        color = '#35ff12';
                    }
                    // 计划已完成（严格按计划完成）
                    if (item.endTime === item.planEndTime &&
                        item.endTime <= curSimuTime) {
                        color = '#5bfffc';
                    }
                    // 提前完成
                    if (item.endTime > 0 &&
                        item.endTime < item.planEndTime &&
                        item.endTime <= curSimuTime) {
                        color = '#fffc08';
                    }
                    // 延期完成
                    if (item.endTime > item.planEndTime &&
                        item.endTime <= curSimuTime) {
                        color = '#ff4097';
                    }
                    // 延期未完成
                    if (item.startTime &&
                        !item.endTime &&
                        item.planEndTime < curSimuTime) {
                        color = '#ff0403';
                    }
                    // 未指定状态则根据时间轴显示不同状态的构件颜色
                    // 或 已指定状态则只设置当前状态的构件颜色
                    if ((!curStatusColor && color) ||
                        (curStatusColor && curStatusColor === color)) {
                        colorfulKey.push.apply(colorfulKey, componentKeys);
                    }
                    item.color = color;
                    item.componentKeys = componentKeys;
                }
                return item;
            });
            // console.log('这些构件设置颜色', colorfulKey, color);
            cptsWithStatus.forEach(function (item) {
                if (item.color &&
                    item.componentKeys &&
                    item.componentKeys.length > 0) {
                    // 重置透明度（不重置透明度设置颜色有点问题）
                    window.viewer3D.closeTransparentComponentsByKey(item.componentKeys);
                    // 设置构件颜色
                    window.viewer3D.colorfulComponentsByKey(item.componentKeys, item.color);
                }
            });
        }
        // 从模型构件中获取所有构件key 找出未高亮的构件置灰（半透明）
        if (modelCptKeys.length > 0 && colorfulKey.length > 0) {
            var hideKeys = modelCptKeys.filter(function (cptkey) { return colorfulKey.indexOf(cptkey) < 0; });
            // 未高亮（未到播放进度）的构件设置为隐藏
            // console.log('这些构件置灰', hideKeys);
            window.viewer3D.setComponentsOpacityState(hideKeys, window.BOS3D.EnumTransparentState.TRANSLUCENT);
        }
    }, [modelLoaded, cptLinkedList, curSimuTime]); // eslint-disable-line react-hooks/exhaustive-deps
    // 点击构件 获取构件信息
    var fetchCptInfo = function (obj) { return __awaiter(void 0, void 0, void 0, function () {
        var key, modelDb, res, attr_1, cpts, err_1;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    key = obj.selectedObjectId;
                    if (!key) return [3 /*break*/, 5];
                    setCptKey(key);
                    _a.label = 1;
                case 1:
                    _a.trys.push([1, 3, , 4]);
                    setFetching(true);
                    modelDb = cookieModelDb();
                    return [4 /*yield*/, services.getCptInfo(modelDb, {
                            params: {
                                componentKey: key
                            }
                        })];
                case 2:
                    res = _a.sent();
                    attr_1 = res.attribute || {};
                    cpts = Object.keys(attr_1).map(function (title) {
                        return {
                            title: title,
                            item: Object.keys(attr_1[title]).map(function (_key) {
                                var _a;
                                return (_a = {
                                        title: _key
                                    },
                                    _a[_key] = typeof attr_1[title][_key] === 'object'
                                        ? JSON.stringify(attr_1[title][_key])
                                        : attr_1[title][_key],
                                    _a);
                            })
                        };
                    });
                    setCptInfo(cpts);
                    setFetching(false);
                    return [3 /*break*/, 4];
                case 3:
                    err_1 = _a.sent();
                    console.log('error: ', err_1);
                    setFetching(false);
                    return [3 /*break*/, 4];
                case 4: return [3 /*break*/, 6];
                case 5:
                    setFetching(false);
                    setCptKey('');
                    setCptInfo([]);
                    _a.label = 6;
                case 6: return [2 /*return*/];
            }
        });
    }); };
    // 获取所有构件key
    var getModelCptKeys = function (e) {
        var allCptKeys = window.viewer3D.getAllComponentsKey();
        setModelCptKeys(allCptKeys);
        // window.viewer3D.setComponentsOpacityState(
        //     allCptKeys,
        //     window.BOS3D.EnumTransparentState.TRANSLUCENT
        // );
    };
    return (_jsxs(Container, { children: [_jsxs(SelectorCard, { children: [_jsx(Select, __assign({ className: "select-model-list", value: modelKey[0], showSearch: true, filterOption: function (input, option) {
                            return option.label
                                .toLowerCase()
                                .includes(input.toLowerCase());
                        }, onChange: function (val) { return __awaiter(void 0, void 0, void 0, function () {
                            var modelDb, res;
                            return __generator(this, function (_a) {
                                switch (_a.label) {
                                    case 0:
                                        modelDb = cookieModelDb();
                                        return [4 /*yield*/, services.queryResAnalysis(modelDb, {
                                                data: {
                                                    models: [val]
                                                }
                                            })];
                                    case 1:
                                        res = _a.sent();
                                        if (res[0] && res[0].status >= 0 && res[0].status < 3) {
                                            message.error('模型正在解析中');
                                        }
                                        else if (res[0] && res[0].status === '-1') {
                                            message.error('模型解析失败');
                                        }
                                        else if (res[0] && res[0].status === '3') {
                                            setCptKey('');
                                            setCptInfo([]);
                                            setModelKey([val]);
                                        }
                                        return [2 /*return*/];
                                }
                            });
                        }); } }, { 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), _jsx(Select, { className: "select-panel", mode: "multiple", defaultValue: modules, options: dataPanel, onChange: function (keys) {
                            setModules(keys);
                            onPanelChange(keys);
                        } }, void 0)] }, void 0), _jsxs(Row, __assign({ className: "bos3d-cptinfo", style: {
                    display: modules.indexOf('model3d') < 0 ? 'none' : ''
                } }, { children: [_jsx(Col, __assign({ span: 19 }, { children: _jsx(BOS3DViewer, { modelKey: modelKey, onLoadV3d: function (viewer3d) {
                                console.log('onLoadV3d');
                            }, onLoadStart: function () {
                                console.log('onLoadStart');
                                setModelLoaded(false);
                            }, onLoadComplete: function (modelInfo) {
                                console.log('onLoadComplete');
                                setModelLoaded(true);
                                getModelCptKeys(modelInfo);
                            }, onClickPick: function (obj) { return fetchCptInfo(obj); } }, void 0) }), void 0), _jsx(Col, __assign({ span: 5 }, { children: _jsx(CptInfo, { cptKey: cptKey, fetching: fetching, cptInfoList: cptInfo }, void 0) }), void 0)] }), void 0), _jsx(StatusBtns, { children: modelStatusBtns.map(function (item, index) { return (_jsx(Button, __assign({ className: item.color === curStatusColor ? 'active' : '', style: item.color ? { backgroundColor: item.color } : {}, onClick: function () { return setCurStatusColor(item.color); } }, { children: item.title }), index)); }) }, void 0)] }, void 0));
};
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .bos3d-cptinfo {\n        padding: 20px 0;\n    }\n"], ["\n    .bos3d-cptinfo {\n        padding: 20px 0;\n    }\n"])));
var SelectorCard = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-align: right;\n    .select-model-list {\n        text-align: left;\n        width: 260px;\n        margin-right: 10px;\n    }\n    .select-panel {\n        width: 500px;\n    }\n"], ["\n    text-align: right;\n    .select-model-list {\n        text-align: left;\n        width: 260px;\n        margin-right: 10px;\n    }\n    .select-panel {\n        width: 500px;\n    }\n"])));
var StatusBtns = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    justify-content: flex-end;\n    .", "-btn {\n        border-radius: 20px;\n        margin: 0 4px;\n    }\n    .active {\n        color: var(--ant-primary-color-active);\n        border-color: var(--ant-primary-color-active);\n    }\n"], ["\n    display: flex;\n    justify-content: flex-end;\n    .", "-btn {\n        border-radius: 20px;\n        margin: 0 4px;\n    }\n    .active {\n        color: var(--ant-primary-color-active);\n        border-color: var(--ant-primary-color-active);\n    }\n"])), prefixCls);
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;