dcim-topology2d 2.0.8 → 2.1.0

package/chart-diagram/src/utils/surfaceParametricConversion.js

@@ -0,0 +1,252 @@
+import {echartsColorData} from '../../../static';
+
+/**
+ *
+ * @param startRatio 开始绘制位置
+ * @param endRatio 结束绘制位置
+ * @param isSelected 是否选中
+ * @param isHovered 鼠标悬浮在图表之上？
+ * @param k 内廷半径
+ * @param h 高
+ * @returns {{u: {min: number, max: number, step: number}, v: {min: number, max: number, step: number}, x: ((function(*, *): *)|*), y: ((function(*, *): *)|*), z: ((function(*, *): (number|number))|*)}}
+ */
+export function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h){
+    // 计算
+    let midRatio = (startRatio + endRatio) / 2;
+    let startRadian = startRatio * Math.PI * 2;
+    let endRadian = endRatio * Math.PI * 2;
+    let midRadian = midRatio * Math.PI * 2;
+    isSelected = false;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = true;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = typeof k !== 'undefined' ? k : 1 / 3;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    let hoverRate = isHovered ? 1.05 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function(u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function(u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function(u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        }
+    };
+}
+/**
+ * 获取3D饼图数据
+ * @param internalDiameterRatio 透明的空心占比
+ * @param type 'pie':饼图；'ring':环形图
+ * @param appearance 配置数据
+ * @param labelLineData 引线静态数据
+ * @param realData 实时数据
+ * @returns {{series: *[], legendData: *[]}}
+ */
+export function getPie3D(internalDiameterRatio, type, appearance, labelLineData, realData){
+    const { seriesStyleData, chartData, labelLine, grid } = appearance;
+    let k = typeof internalDiameterRatio !== "undefined" ?
+            (1 - internalDiameterRatio) / (1 + internalDiameterRatio) :
+            1 / 3; // 3d 环形图
+    const pieData = realData && realData.length ? realData : chartData;
+    if(type === 'pie'){
+        // 3d 饼图
+        k = 1;
+        pieData.sort((a, b) => {
+            return b.value - a.value;
+        });
+    }
+    
+    let sumValue = pieData.reduce((total, obj) => total + obj.value, 0);
+    let startValue = 0;
+    let endValue = 0;
+    let total = 0;
+    let boxHeight = (grid.boxHeight * 25) / pieData[0].value;
+    let legendData = [];
+    let series = [];
+    let node = {};
+    const lineData = [];
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i++) {
+        const {name, value, itemColor, itemOpacity} = pieData[i];
+        const pieDataItem =  chartData[i];
+        const seriesItemColor = itemColor || pieDataItem && pieDataItem.itemColor || echartsColorData[i];
+        endValue = startValue + value;
+        let hv = seriesStyleData && seriesStyleData[i] || value;
+        let pk = 1 / 10;
+        if(type === 'pie') {
+            hv = value;
+            pk = k;
+            if(labelLine.data[i]) {
+                const lineItem = labelLine.data[i];
+                lineItem.valueColor = seriesItemColor;
+                lineItem.unitColor = seriesItemColor;
+            }
+        }else {
+            total += value;
+            node[name] = {
+                order: i,
+                value
+            };
+        }
+        const newStartRatio = startValue / sumValue;
+        const newEndRatio = endValue / sumValue;
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形
+        const parametricEquation = getParametricEquation(newStartRatio, newEndRatio, false, false, k, hv);
+        let seriesItem = {
+            name: typeof name === 'undefined' ? `series${i}` : name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: {
+                name,
+                value,
+                startRatio: newStartRatio,
+                endRatio: newEndRatio
+            },
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: pk,
+            },
+            parametricEquation,
+            itemStyle: {
+                color: seriesItemColor,
+                opacity: itemOpacity || pieDataItem && pieDataItem.itemOpacity || 1
+            }
+        };
+        startValue = endValue;
+        legendData.push(seriesItem.name);
+        series.push(seriesItem);
+        if(labelLineData) {
+            const lineStyleNode = labelLineData.data[i] || labelLineData.data[0];
+            lineStyleNode.lineStyle.color = seriesItemColor;
+            const labelLineItem = {
+                name,
+                value,
+                labelLine: {...lineStyleNode}
+            };
+            lineData.push(labelLineItem);
+        }
+    }
+    if(lineData.length) {
+        labelLineData.data = lineData;
+        series.push(labelLineData);
+    }
+    return {
+        legendData,
+        series,
+        node,
+        total,
+        boxHeight
+    };
+}
+export function set3DPieMouseHover(myChart, type, option, valueData){
+    let selectedIndex = '';
+    let hoveredIndex = '';
+    let isSelected;
+    let isHovered;
+    let startRatio;
+    let endRatio;
+    let k;
+    // 监听 mouseover，近似实现高亮（放大）效果
+    myChart.on('mouseover', function(params) {
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) return;
+        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+        if (hoveredIndex !== '') {
+            const value = type === 'pie' ? option.series[hoveredIndex].pieData.value : valueData[hoveredIndex];
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = option.series[hoveredIndex].pieData.startRatio;
+            endRatio = option.series[hoveredIndex].pieData.endRatio;
+            k = option.series[hoveredIndex].pieStatus.k;
+
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value);
+            option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = '';
+        }
+
+        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+        if (params.seriesName !== 'mouseoutSeries') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            const pieStatus = option.series[params.seriesIndex].pieStatus;
+            if(!pieStatus) return; // 先退出，后期若有hover引线时，图形联动的需求时再做逻辑处理
+            const value = type === 'pie' ? option.series[params.seriesIndex].pieData.value : valueData[params.seriesIndex];
+            isSelected = option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio = option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = option.series[params.seriesIndex].pieData.endRatio;
+            k = option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value + 5);
+            option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(option);
+    });
+    // 修正取消高亮失败的 bug
+    myChart.on('globalout', function(params) {
+        if (hoveredIndex !== '') {
+            const value = type === 'pie' ? option.series[hoveredIndex].pieData.value : valueData[hoveredIndex];
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            k = option.series[hoveredIndex].pieStatus.k;
+            startRatio = option.series[hoveredIndex].pieData.startRatio;
+            endRatio = option.series[hoveredIndex].pieData.endRatio;
+
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, value);
+            option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = '';
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(option);
+    });
+}

package/core/src/common.js

@@ -186,6 +186,7 @@ var Common = /** @class */ (function () {
         if (this.store.mqttParams.echartAssemblyData.length) params.echartAssemblyData = [...this.store.mqttParams.echartAssemblyData];
         if(assetId) {
             params.varValueIds = this.store.mqttParams.varVaule.join(",");
+            params.branchAddrs = this.store.mqttParams.branchValue.join(",");
         }else {
             if(this.store.mqttParams.assetIds.length && this.store.mqttParams.varVaule.length) {
                 const assetId = this.store.mqttParams.assetIds[this.store.mqttParams.assetIds.length -1];
@@ -219,6 +220,13 @@ var Common = /** @class */ (function () {
         })
         this.store.mqttParams.varVaule = ids;
     };
+    Common.prototype.getBranchValueIdsForBranchsData = function (data){
+        const ids = [];
+        data.map((item) => {
+            if(item.branchAddr) ids.push(`${item.assetId}_${item.branchAddr}`);
+        })
+        this.store.mqttParams.branchValue = ids;
+    };
     // 固定资产详情数据赋值
     Common.prototype.renderForAssetPoperties = function (asset, data){
         if(!Object.keys(asset).length) return;
@@ -248,8 +256,8 @@ var Common = /** @class */ (function () {
         }
         let data = JSON.parse(JSON.stringify(obj));
         Object.assign(this.store.data, data);
-        // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整
-        if(this.store.options.type !== 'topology' && this.store.options.type !== 'pageZoomOnly') {
+        // topology编辑器下跳出程序
+        if(this.store.options.type !== 'topology') {
             const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
             const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
             this.store.data.pageZoom = zoom;
@@ -485,7 +493,7 @@ var Common = /** @class */ (function () {
         if(!switchTabData) return;
         const topologyChangeData = commonStore[node.TID].switchTabDataPool; // 获取所有按钮组和按类型统计图组数据
         const changeNode = topologyChangeData[`${switchTabData}Data`]; // 分别获取按钮组数据
-        if(!changeNode[node.id]) return;
+        if(!changeNode || !changeNode[node.id]) return;
         // 如果存在按钮组节点数据
         const tabAreaData = topologyChangeData[`${switchTabData}AreaData`];
         let tabIndex = 0;
@@ -698,10 +706,10 @@ var Common = /** @class */ (function () {
         this.divLayer.canvas.title = '';
         this.tip = '';
     };
-    Common.prototype.dispatch = function (event, data) {
+    Common.prototype.dispatch = function (event, node, data) {
         if(!this.store || !this.store.options) return;
         if (this.store.options.on) {
-            this.store.options.on(event, data);
+            this.store.options.on(event, node, data);
         }
         // 先注释掉
         // if (event === 'node' && data.name == 'tablePagination' && this.store.options.type !== 'topology') {

package/core/src/core.d.ts

@@ -19,6 +19,8 @@ export declare class Topology extends Common{
     lastHoverNode: Node;
     lastHoverLine: Line;
     needCache: boolean;
+    isTabHideShow: boolean;
+    nodeId: string; // 元件的id，一般用来做新旧数据对比
     gridElem: HTMLElement;
     private scheduledAnimationFrame;
     hoverLayer: HoverLayer;

package/core/src/core.js

@@ -27,8 +27,11 @@ import {
     setAssetIdData,
     setAreaIdData,
     setVarValueData,
+    setBranchAddressData,
     setThreeCategoryIdData,
-    setConnectionTagForConf
+    setConnectionTagForConf,
+    setConnectionTabsData,
+    getTabConnectSHConf
 } from './utils';
 import {setSelectElementPosition} from './element';
 import {elementType} from '../../static';
@@ -48,8 +51,10 @@ var Topology = (function (_super) {
             index: 0,
             list: [],
         };
+        _this.isTabHideShow = false;
         _this.needCache = false;
         _this.addingArbitraryGraph = false;
+        _this.nodeId = '';
         _this.arbitrarygGraphData = {
             points: [],
             circles: [],
@@ -107,6 +112,7 @@ var Topology = (function (_super) {
                     _this.dispatch('translate', {x, y});
                     return false;
                 }
+                
             }
             if (_this.store.data.locked && _this.mouseDown) {
                 return;
@@ -363,8 +369,7 @@ var Topology = (function (_super) {
         };
         _this.onmousedown = function (e) {
             _this.store.data.dataResize = 0;
-            if (e.button !== 0)
-                return;
+            if (e.button !== 0) return;
             var canvasPos = _this.divLayer.canvas.getBoundingClientRect();
             _this.mouseDown = {x: e.x - canvasPos.x, y: e.y - canvasPos.y};
             if (e.altKey) {
@@ -481,6 +486,7 @@ var Topology = (function (_super) {
                                         if (activeNode.paginationData.targetPageLocal.hide) _this.targetPageInputHandle(activeNode, e);
                                     }
                                 }else {
+                                    _this.changeTabsState(activeNode);
                                     _this.dispatch('node', activeNode);
                                 }
                             }
@@ -779,23 +785,23 @@ var Topology = (function (_super) {
                     }
             }
             event.preventDefault();
-            if (event.deltaY < 0) {
-                if (event.layerX && event.layerY) {
-                    _this.scale(1.1, {x: event.layerX, y: event.layerY});
-                    _this.canvas.scale(1.1, {x: event.layerX, y: event.layerY});
-                } else {
-                    _this.scale(1.1);
-                    _this.canvas.scale(1.1);
-                }
-            } else {
-                if (event.layerX && event.layerY) {
-                    _this.scale(0.9, {x: event.layerX, y: event.layerY});
-                    _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
-                } else {
-                    _this.scale(0.9);
-                    _this.canvas.scale(0.9);
-                }
-            }
+            // if (event.deltaY < 0) {
+            //     if (event.layerX && event.layerY) {
+            //         _this.scale(1.1, {x: event.layerX, y: event.layerY});
+            //         _this.canvas.scale(1.1, {x: event.layerX, y: event.layerY});
+            //     } else {
+            //         _this.scale(1.1);
+            //         _this.canvas.scale(1.1);
+            //     }
+            // } else {
+            //     if (event.layerX && event.layerY) {
+            //         _this.scale(0.9, {x: event.layerX, y: event.layerY});
+            //         _this.canvas.scale(0.9, {x: event.layerX, y: event.layerY});
+            //     } else {
+            //         _this.scale(0.9);
+            //         _this.canvas.scale(0.9);
+            //     }
+            // }
             _this.divLayer.canvas.focus();
             return false;
         };
@@ -914,6 +920,20 @@ var Topology = (function (_super) {
         item.clearChildrenIds();
         return item;
     };
+    Topology.prototype.changeTabsState = function (node) {
+        if(this.nodeId === node.id) return;
+        this.nodeId = node.id;
+        this.isTabHideShow = node.events && node.events.some((ev) => {return ev.action === 8 && ev.dcimStaticForType === 'SH'});
+        if(!this.isTabHideShow) return;
+        // tab显示隐藏
+        const pens = this.store.data.pens;
+        // 重置tabs数据
+        for (let i = 0, pensLength = pens.length; i < pensLength; i++) {
+            pens[i].order = i;
+            setConnectionTabsData(pens[i]);
+        }
+        this.switchStaticsCheckType(node, {dcimStaticForType: 'SH'});
+    };
     // 添加温湿度元件
     Topology.prototype.dropTempNode = function(json) {
         const nodeChildren = json.children;
@@ -1565,7 +1585,14 @@ var Topology = (function (_super) {
     };
     Topology.prototype.delete = function (force, nodes) {
         var pens = [];
-        const deleteNodes = nodes ? nodes : this.activeLayer.pens;
+        var deleteNodes = [];
+        if(this.isTabHideShow) {
+            // 如果删除的是tab显示隐藏元件
+            deleteNodes = getTabConnectSHConf(this.activeLayer.pens[0]);
+            this.activeLayer.pens = [];
+        }else {
+            deleteNodes = nodes ? nodes : this.activeLayer.pens;
+        }
         for (var i = 0; i < deleteNodes.length; i++) {
             var pen = deleteNodes[i];
             if (!force && pen.locked) {
@@ -1738,16 +1765,18 @@ var Topology = (function (_super) {
         for (var _i = 0, _a = this.activeLayer.pens; _i < _a.length; _i++) {
             var pen = _a[_i];
             pen.data = [];
-            this.bindInfo(item, pen, dataType, index);
+            this.bindInfo(item, pen, dataType, index, exite);
             this.clipboard.pens.push(pen.clone());
         }
         if (exite == true) {
             this.paste();
         }
     };
-    Topology.prototype.bindInfo = async function (item, pen, type, index) {
+    Topology.prototype.bindInfo = async function (item, pen, type, index, exite) {
         const itemNode = item && item.default || item;
+        let bindName = '';
         if ([0, '0'].includes(type)) {
+            bindName = itemNode.tagName;
             const setTagId = setTagIdData(itemNode);
             pen.data.push(...setTagId);
             // 绑定悬浮文字
@@ -1756,9 +1785,11 @@ var Topology = (function (_super) {
             const setThreeCategory = setThreeCategoryIdData(pen, itemNode);
             pen.data.push(...setThreeCategory);
         } else if ([1, '1'].includes(type)) {
+            bindName = itemNode.kpiName;
             const setKpiAddr = setKpiAddrData(itemNode);
             pen.data.push(...setKpiAddr);
         } else if ([2, '2'].includes(type)) {
+            bindName = itemNode.name;
             const setAssetId = setAssetIdData(itemNode);
             pen.data.push(...setAssetId);
             // 绑定悬浮文字
@@ -1791,12 +1822,19 @@ var Topology = (function (_super) {
                 })
             }
         } else if ([3, '3'].includes(type)) {
+            bindName = itemNode.name;
             const setAreaId = setAreaIdData(itemNode);
             pen.data.push(...setAreaId);
         }else if ([4, '4'].includes(type)) {
+            bindName = itemNode.name;
             const setVarId = setVarValueData(itemNode);
             pen.data.push(...setVarId);
+        }else if ([5, '5'].includes(type)) {
+            bindName = itemNode.value;
+            const setBranch = setBranchAddressData(itemNode);
+            pen.data.push(...setBranch);
         }
+        if(typeof exite === 'boolean') pen.text = bindName;
         // if([0, 2, '0', '2'].includes(type)) {
         //     //用于处理场地监控，点击一个资产类别后，隐藏掉这个类别下的所有元件
         //     const setThreeCategory = setThreeCategoryIdData(pen, itemNode);

package/core/src/element/common.d.ts

@@ -2,4 +2,5 @@ import { Node } from '../models';
 import { visualization2DStore } from '../store';
 export declare function setStyleForElementIdDiv(node: Node, elem: HTMLElement, data: visualization2DStore): void;
 export declare function createDiv(node: Node): HTMLDivElement;
-// export declare function loadJS(url: string, callback?: () => void, render?: boolean): void;
+// @ts-ignore
+export declare function loadJS(url: string): Promise;

package/core/src/element/common.js

@@ -35,20 +35,20 @@ export function createDiv(node) {
     return div;
 }
 
-// export function loadJS(url, callback, render) {
-//     var loaderScript = document.createElement('script');
-//     loaderScript.type = 'text/javascript';
-//     loaderScript.src = url;
-//     loaderScript.addEventListener('load', function () {
-//         if (callback) {
-//             callback();
-//         }
-//         // how to do
-//         if (render) {
-//             Store.set('LT:render', true);
-//         }
-//     });
-//     document.body.appendChild(loaderScript);
-// }
+export function loadJS(url) {
+    var loaderScript = document.createElement('script');
+    loaderScript.type = 'text/javascript';
+    loaderScript.src = url;
+    document.body.appendChild(loaderScript);
+    window.datePickerRegister = true;
+    return new Promise((resolve, reject) => {
+        loaderScript.onload = function () {
+            resolve(true);
+        };
+        loaderScript.onerror = (e) => {
+            reject(e);
+        };
+    });
+}
 
 //# sourceMappingURL=dom.js.map

package/core/src/element/datePicker.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '../models';
+export declare function createDatePickerElement(node: Node): HTMLElement;
+export declare function setDataPickerElementStyle(node: Node): void;

package/core/src/element/datePicker.js

@@ -0,0 +1,47 @@
+import {commonStore} from "../store";
+// 创建datePicker依赖DOM
+export function createDatePickerElement(node) {
+        const pickerBarEle = document.createElement('div');
+    pickerBarEle.setAttribute('id', node.id);
+    pickerBarEle.setAttribute('class', 'topology-datePicker');
+    pickerBarEle.innerHTML = `<svg class="icon-date" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.000000" height="14.000000" fill="none" customFrame="#000000">
+\t<path id="icon-日历" d="M13.4167 1.16667L10.5 1.16667L10.5 0L9.33333 0L9.33333 1.16667L4.66667 1.16667L4.66667 0L3.5 0L3.5 1.16667L0.583333 1.16667C0.2625 1.16667 0 1.42917 0 1.75L0 13.4167C0 13.7375 0.2625 14 0.583333 14L13.4167 14C13.7375 14 14 13.7375 14 13.4167L14 1.75C14 1.42917 13.7375 1.16667 13.4167 1.16667ZM12.8333 12.8333L1.16667 12.8333L1.16667 4.66667L12.8333 4.66667L12.8333 12.8333ZM4.66667 7L2.33333 7L2.33333 5.83333L4.66667 5.83333L4.66667 7ZM8.16667 7L5.83333 7L5.83333 5.83333L8.16667 5.83333L8.16667 7ZM11.6667 7L9.33333 7L9.33333 5.83333L11.6667 5.83333L11.6667 7ZM4.66667 9.33333L2.33333 9.33333L2.33333 8.16667L4.66667 8.16667L4.66667 9.33333ZM8.16667 9.33333L5.83333 9.33333L5.83333 8.16667L8.16667 8.16667L8.16667 9.33333ZM11.6667 9.33333L9.33333 9.33333L9.33333 8.16667L11.6667 8.16667L11.6667 9.33333ZM4.66667 11.6667L2.33333 11.6667L2.33333 10.5L4.66667 10.5L4.66667 11.6667ZM8.16667 11.6667L5.83333 11.6667L5.83333 10.5L8.16667 10.5L8.16667 11.6667Z" fill="rgb(64,244,255)" fill-rule="nonzero" />
+</svg>
+                              <svg class="icon-arrow" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10.000000" height="6.000000" fill="none" customFrame="#000000">
+	<path id="箭头" d="M5 0C5.14734 0 5.28865 0.0632141 5.39284 0.175736L9.83728 4.97574C10.0542 5.21005 10.0542 5.58995 9.83728 5.82426C9.62032 6.05858 9.26857 6.05858 9.05161 5.82426L5 1.44853L0.948393 5.82426C0.731435 6.05858 0.379676 6.05858 0.162718 5.82426C-0.0542395 5.58995 -0.0542395 5.21005 0.162718 4.97574L4.60716 0.175736C4.71135 0.0632141 4.85266 0 5 0Z" fill="rgb(23,206,230)" fill-rule="evenodd" transform="matrix(1,0,0,-1,0,6)" />
+</svg>
+                              <input id='picker${node.id}' class="dataPickerInput" type="text" name='dataPicker${node.id}' placeholder="请选择" readonly />`;
+
+    return pickerBarEle;
+}
+
+// datePicker样式配置
+export function setDataPickerElementStyle(node) {
+    const {pickerDataPool, data} = commonStore[node.TID];
+    const pickerDom = pickerDataPool[node.id].dom;
+    
+    pickerDom.container.style.border = `${node.lineWidth}px solid ${node.strokeStyle}`;
+    pickerDom.container.style.borderRadius = `${node.borderRadius * 100}px`;
+    pickerDom.container.style.padding = `${node.paddingTop}px ${node.paddingRight}px ${node.paddingBottom}px ${node.paddingLeft}px`;
+    
+    if (!pickerDom.iconDate) pickerDom.iconDate = pickerDom.container.querySelector('.icon-date');
+    if (!pickerDom.iconArrow) pickerDom.iconArrow = pickerDom.container.querySelector('.icon-arrow');
+    if (!pickerDom.input) pickerDom.input = pickerDom.container.querySelector('.dataPickerInput');
+    
+    const round = `${node.font.fontSize + data.scale * 2}px`;
+    const parts = node.strokeStyle.match(/([\d.]+)/g);
+    const fillColor = parts ? `rgba(${parts[0]},${parts[1]},${parts[2]},1)` : node.strokeStyle;
+    
+    pickerDom.iconDate.style.width = round;
+    pickerDom.iconDate.style.height = round;
+    pickerDom.iconDate.style.left = `${node.font.fontSize}px`;
+    pickerDom.iconDate.querySelector('path').style.fill = fillColor;
+    
+    pickerDom.iconArrow.style.width = `${node.font.fontSize - data.scale * 2}px`;
+    pickerDom.iconArrow.style.height = `${node.font.fontSize - data.scale * 6}px`;
+    pickerDom.iconArrow.style.right = `${node.font.fontSize - data.scale * 2}px`;
+    pickerDom.iconArrow.querySelector('path').style.fill = fillColor;
+    
+    pickerDom.input.style.fontSize = `${node.font.fontSize}px`;
+    pickerDom.input.style.color = node.font.color;
+};

package/core/src/element/index.d.ts

@@ -1,4 +1,5 @@
 export * from './common';
 export * from './iframe';
 export * from './select';
-export * from './tab';
+export * from './tab';
+export * from './datePicker';

package/core/src/element/index.js

@@ -1,4 +1,6 @@
 export * from './common';
 export * from './iframe';
 export * from './select';
-export * from './tab';
+export * from './tab';
+export * from './time';
+export * from './datePicker';

package/core/src/element/select.js

@@ -206,14 +206,26 @@ export function getSelectedData(e, data, editData) {
     }
     if(staticType === selectStaticType.visible) {
         // 显示隐藏
+        const optionNode = data.formData.bindBlockId && currentStore.echartsOptionsPool[data.formData.bindBlockId];
+        if(optionNode) {
+            // 有绑定图表则切换图表数据
+            const selecteRealData = currentStore.selectRealDataPool[optionNode.data.id];
+
+            selectNode.node.selected.id = selecteRealData && selecteRealData[order] && selecteRealData[order].id;
+
+            currentStore.echartsRealDataPool[optionNode.data.id] = currentStore.echartsRealDataPool[node.id];
+
+            setMapDataOptions(optionNode.option, optionNode.data);
+        }
         const optionsVisibleData = currentStore.selectTabDataPool[data.id];
         if(!optionsVisibleData || !optionsVisibleData.size) return;
         for(const [key, value] of optionsVisibleData){
-            const eque = node.id === value.tag;
+            const optionId = node.optionId || node.id;
+            const eque = optionId === value.tag;
             currentStore.data.pens[value.order].visible = eque;
             currentStore.data.pens[value.order].visibleSwitch = eque;
             value.visible = eque;
-            setElementSwitchTabState(value);
+            setElementSwitchTabState(currentStore.data.pens[value.order]);
         }
         Store.set(`${data.TID}-LT:render`, true);
     }