dcim-topology2d 2.0.8 → 2.2.0

package/core/src/element/datePicker.js

@@ -0,0 +1,44 @@
+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}' value='${node.pickerOptions.value}' placeholder="请选择" readonly />`;
+
+    return pickerBarEle;
+}
+
+// datePicker样式配置
+export function setDataPickerElementStyle(node) {
+    const {pickerDataPool, data} = commonStore[node.TID];
+    const pickerDom = pickerDataPool[node.id].dom;
+    const padding = `${node.paddingTop}px ${node.paddingRight}px ${node.paddingBottom}px ${node.paddingLeft}px`;
+    const containerStyle = pickerDom.container.getAttribute('style');
+    pickerDom.container.style.cssText =`${containerStyle}padding: ${padding}`;
+    
+    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.cssText = `width: ${round};height: ${round};left: ${node.font.fontSize}px`;
+    pickerDom.iconDate.querySelector('path').style.fill = fillColor;
+    
+    const width = node.font.fontSize - data.scale * 2;
+    const height = node.font.fontSize - data.scale * 6;
+
+    pickerDom.iconArrow.style.cssText = `width: ${width}px;height: ${height}px;right: ${width}px`;
+    pickerDom.iconArrow.querySelector('path').style.fill = fillColor;
+
+    pickerDom.input.style.cssText = `font-size: ${node.font.fontSize}px;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.d.ts

@@ -6,6 +6,6 @@ export declare function createSelectOptions(data: [], node: Node): string;
 export declare function getSelectedData(e: Event, data: any, editData: any): void;
 export declare function setSelectInteractiveState(selected: any, node: Node): void;
 export declare function resetSelectInteractiveState(node: Node): void;
-export declare function setSelectDropdownInteractiveState(node: any, staticType: any, type: any): void;
+export declare function setSelectDropdownInteractiveState(node: any, type: any): void;
 export declare function setSelectElementPosition(node: Node, type: string): void;
 export declare function setSelectElementTheme(node: Node): void;

package/core/src/element/select.js

@@ -86,13 +86,11 @@ export function resetSelectInteractiveState(node) {
 /**
  * 配置下拉options容器的交互状态，展开和收起
  * @param node 下拉元件节点数据
- * @param staticType 下拉功能类型：1: 数据统计；2：数据展示；3：显示隐藏
  * @param type 功能作用区域类型：Dcim，Topology，Logo
  */
-export function setSelectDropdownInteractiveState(node, staticType, type) {
+export function setSelectDropdownInteractiveState(node, type) {
     const currentStore = commonStore[node.TID];
     const selectNode = currentStore.selectDataPool[node.id];
-    if(!selectNode.staticType) selectNode.staticType = staticType;
     if(!selectNode) return;
     if(downId !== node.id && type === previewType.Dcim) {
         // 点击的不是同一个下拉则重置交互样式，清空数据
@@ -206,14 +204,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);
     }

package/core/src/element/tab.js

@@ -1,23 +1,20 @@
-import {jsonLength} from '../utils';
 import {commonStore} from "../store";
 // 设置tab切换显示隐藏时的 Dom元件状态
 export function setElementSwitchTabState(node) {
     if(node.children && node.children.length) {
         node.children.map((ch) => {
             ch.visible = node.visible;
+            ch.visibleSwitch = node.visible;
             setElementSwitchTabState(ch);
         })
     }
-    if(!(node.name === 'echarts' || node.name === 'select')) return;
-    if(typeof commonStore[node.TID].elementInteractivePoor.elementDataLength !== 'number') {
-        commonStore[node.TID].elementInteractivePoor.elementDataLength = jsonLength(commonStore[node.TID].echartsDataPool) || jsonLength(commonStore[node.TID].selectDataPool);
-    }
-    if(!commonStore[node.TID].elementInteractivePoor.elementDataLength) return;
-    const ele = commonStore[node.TID].echartsDataPool[node.id] && commonStore[node.TID].echartsDataPool[node.id].div ||
-            commonStore[node.TID].selectDataPool[node.id] && commonStore[node.TID].selectDataPool[node.id].dom.selectEle;
+    if(node.attribute !== 'dom') return;
+    const currentStore = commonStore[node.TID];
+    if(!currentStore.elementInteractivePoor.dom) return;
+    const ele = currentStore.elementInteractivePoor.dom[node.id];
     if(ele) {
         ele.style.display = !node.visible ? 'none': 'block';
     }else {
-        commonStore[node.TID].data.dataResize = 1;
+        currentStore.data.dataResize = 1;
     }
 }

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

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

package/core/src/element/time.js

@@ -0,0 +1,44 @@
+// 创建时间组件
+export function createTimeElement(node) {
+  const timeBox = document.createElement('div');
+  // timeBox.scrolling = 'no';
+  timeBox.width = node.rect.width;
+  timeBox.height = node.rect.height;
+  let children = 
+  `<div class="timeWrapper" style="display: flex;flex-direction: initial; justify-content: center; font-size: ${node.font.fontSize}px;width:100%;height:100%; line-height:${timeBox.height}px; color:${node.font.color}; font-family:${node.font.fontFamily}">`+
+    `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
+        <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
+          <div class="timeTextUp h" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px;height: 100%;">${node.h}</div>
+          <div class="timeTextDown h" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.h}</div>
+        </div>
+      </div>`+ 
+    `<div class="split" style="flex:1; position: relative;line-height:${timeBox.height}px">:</div>`+
+    `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
+        <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
+          <div class="timeTextUp m" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px; height: 100%;">${node.m}</div>
+          <div class="timeTextDown m" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.m}</div>
+        </div>
+      </div>`+ 
+    `<div class="split" style="flex:1; position: relative;line-height:${timeBox.height}px">:</div>`+
+    `<div class="timeList" style="position: relative;display: flex; flex-direction: column;flex:4;height: 100%;overflow: hidden;text-align: center;">
+        <div class="timeBox" style="position: relative;width: 100%;height: 100%;overflow: hidden;">
+          <div class="timeTextUp s" style="position: relative;clip-path: polygon(0 0,100% 0,100% 49%,0 49%); background-color: rgba(255,255,255,0.1);border-radius: 20px; height: 100%;">${node.s}</div>
+          <div class="timeTextDown s" style="position: absolute;clip-path: polygon(0 51%,100% 51%,100% 100%,0 100%);left: 0;top: 0;width: 100%;height: 100%; background-color: rgba(255,255,255,0.1);border-radius: 20px;">${node.s}</div>
+        </div>
+      </div>`+ 
+  `</div>`
+  timeBox.setAttribute('id', node.id);
+  timeBox.setAttribute('class', 'topology2dConfTime');
+  timeBox.innerHTML = children;
+  return timeBox;
+}
+export function updateTimeStyle(node, time) {
+  time.querySelector('.timeWrapper').style.lineHeight = node.rect.height+'px';
+  time.querySelector('.timeWrapper').style.fontSize = node.font.fontSize+'px';
+  time.querySelector('.timeWrapper').style.fontFamily = node.font.fontFamily;
+  time.querySelector('.timeWrapper').style.color = node.font.color;
+  time.querySelectorAll('.split').forEach(element => {
+    element.style.lineHeight = node.rect.height+'px';
+  });
+
+}

package/core/src/healps/changeData.js

@@ -1,11 +1,11 @@
 //let DETAILDATA = null;
-import {commonStore} from '../store';
+import { commonStore } from '../store';
 import { getEchartsRealData } from '../utils/conversion';
 export function setConfItemNode(pen, syn_synata) {
     const entranceGuard = pen.events.find((ev) => {
         return ev.value === 'entranceGuard';
     });
-    if(entranceGuard) {
+    if (entranceGuard) {
         // 绑定门禁的元件实时数据
         const nullUndefinedRegex = /^(?:null|undefined|\s*)$/;
         const doorData = syn_synata.doorData && syn_synata.doorData[entranceGuard.params];
@@ -13,59 +13,64 @@ export function setConfItemNode(pen, syn_synata) {
         pen.text = doorState === 1 ? '开门' : '关门'; // 1-开门，其他值为关门
     }
     if (!pen.data) return;
-    if(commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
+    if (commonStore[pen.TID]) commonStore[pen.TID].data.dataResize = 1;
     let isAlarm = false; // 判断元件绑定的数据中是否有告警发生，用于九所项目服务器自身监控功能
-    if(pen.data instanceof Array) {
+    if (pen.data instanceof Array) {
         let _syn = null;
         let isResetVal = false;
-        const {areaData, assetData, kpiData, tagData, asset} = syn_synata
+        const { areaData, assetData, componentData, kpiData, tagData, asset } = syn_synata;
+        const comData = componentData && componentData[pen.id];
         pen.data.map((d) => {
             const key = d.key;
             let value = d.value;
-            const assetItem = assetData[value];
-            const areaItem = areaData[value];
-            const kpiItem = kpiData[value];
-            if(key === 'tagId') value = d.tagId ? d.tagId : d.value;
-            const tagItem = tagData[value];
+            if (key === 'tagId') value = d.tagId ? d.tagId : d.value;
             //console.log('key===========', d)
             if (key === 'assetKey' && d.value === 'assetName' && asset) {
+
                 pen.text = asset.assetName;
-            }else if (key === 'assetId' && assetItem) {
-                _syn = assetItem;
+
+            } else if (key === 'assetId') {
+
+                _syn = comData || assetData[value];
+
                 // if(value === '264'){console.log('_syn',_syn,pen.name,parseInt(_syn.state))}
-            }else if (key === 'areaId' && areaItem) {
-                _syn = areaItem;
-            }else if (key === 'tagId' && tagItem) {
-                _syn = tagItem;
-                if(_syn.kpiName !== '通讯状态' || pen.name !== 'circle'){
+            } else if (key === 'areaId') {
+
+                _syn = comData || areaData[value];
+
+            } else if (key === 'tagId' && (comData || tagData[value])) {
+
+                _syn = comData || tagData[value];
+
+                if (_syn.kpiName !== '通讯状态' || pen.name !== 'circle') {
                     isResetVal = true;
                 }
-                const isControl = parseInt(tagItem.isControlDis); // 是否可控，0可控，1不可控
+                const isControl = parseInt(_syn.isControlDis); // 是否可控，0可控，1不可控
                 //d.isControlDis = isControlDis
-                if(!isControl) {
+                if (!isControl) {
                     d.tagVal = value
-                    d.controlParams = tagItem
+                    d.controlParams = _syn
                     //Object.assign(d, tagItem)
                 }
-            }else if (key === 'kpiAddr' && kpiItem) {
-                _syn = kpiItem;
+            } else if (key === 'kpiAddr' && (comData || kpiData[value])) {
+                _syn = comData || kpiData[value];
                 isResetVal = true
-                const isControl = parseInt(kpiItem.isControlDis); // 是否可控，0可控，1不可控
+                const isControl = parseInt(_syn.isControlDis); // 是否可控，0可控，1不可控
                 //d.isControlDis = isControlDis
-                if(!isControl) {
+                if (!isControl) {
                     d.tagVal = value
-                    d.controlParams = kpiItem
+                    d.controlParams = _syn
                     // delete kpiItem[value]
                     // Object.assign(d, kpiItem)
                 }
             }
         })
-        if(!_syn) return;
+        if (!_syn) return;
         // const type = parseInt(_syn.type) // 是否是开关量
         // 显示的值
         if (isResetVal) pen.text = `${_syn.value}${_syn.unit}`;
         const state = parseInt(_syn.state)
-        if(!state && state !== 0) return
+        if (!state && state !== 0) return
         const name = pen.name
         // 显示的颜色
         let color = ''
@@ -83,9 +88,9 @@ export function setConfItemNode(pen, syn_synata) {
                 let defaulColor = ''
                 if (name === 'text') {
                     defaulColor = 'defaultFontColor'
-                }else if(name === 'line') {
+                } else if (name === 'line') {
                     defaulColor = 'defaultStrokeStyle'
-                }else {
+                } else {
                     defaulColor = 'defaultFillStyle'
                 }
                 color = pen[defaulColor]
@@ -97,17 +102,24 @@ export function setConfItemNode(pen, syn_synata) {
         // 显示的属性
         if (name === 'text') {
             pen.font.color = color
-        }else if(name === 'line') {
+        } else if (name === 'line') {
             pen.strokeStyle = color
             pen.text = ''
-        }else {
+        } else if (name === 'switchs') {
+            //获取值说明中的开值 默认为第一个值为开
+            let openValue = getOpenValue(_syn.valExplain)
+            pen.isOpen = _syn.v == openValue;
+            pen.fillStyle = pen.isOpen ? pen.visitStrokeStyle : pen.strokeStyle;
+            pen.text = '';
+        }
+        else {
             pen.fillStyle = color
         }
         if (name === 'electricFan') setFanData(pen, _syn)
-    }else {
+    } else {
         if (pen.elementRendered) pen.elementRendered = false;
         if (pen.data.echarts) {
-            const {echartDataValue} = syn_synata;
+            const { echartDataValue } = syn_synata;
             const seriesData = echartDataValue;
             const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
             if (Array.isArray(realData) && pen.data.params && pen.data.params.displayMode !== 7) {
@@ -137,24 +149,24 @@ export function setFanData(pen, syncData) {
     let runState = false
     let percentage = 1
     const value = parseInt(syncData.v)
-    if(pen.fanValType == '1'){
-        if(value > pen.fanMinVal  && value <= pen.fanMaxVal) {
+    if (pen.fanValType == '1') {
+        if (value > pen.fanMinVal && value <= pen.fanMaxVal) {
             runState = true
-            percentage = value/(pen.fanMaxVal-pen.fanMinVal)
+            percentage = value / (pen.fanMaxVal - pen.fanMinVal)
         }
-    }else if(pen.fanValType == '2'){
-        if(pen.fanNorVal === value) runState = true
+    } else if (pen.fanValType == '2') {
+        if (pen.fanNorVal === value) runState = true
     }
-    if(runState){
+    if (runState) {
         addAnimateByRevolve(pen, percentage)
         pen.animatePlay = true
-    }else{
+    } else {
         pen.animatePlay = false
     }
 }
 
 export function addAnimateByRevolve(pen, percentage) {
-    let time = 200/pen.fanSpeed/percentage
+    let time = 200 / pen.fanSpeed / percentage
     const state = JSON.parse(JSON.stringify(pen))
     delete state.TID
     delete state.animateFrames
@@ -169,3 +181,11 @@ export function addAnimateByRevolve(pen, percentage) {
     pen.animateDuration = time;
 
 }
+
+export function getOpenValue(explain) {
+    let value = 1
+    if (!explain) return value
+    value = explain.split(',')[0].split('=')[0];
+    return value
+
+}

package/core/src/middles/default.js

@@ -1,51 +1,51 @@
 import {
-  arrowAnchors,
-  leftArrow, leftArrowIconRect, leftArrowTextRect,
-  rightArrow, rightArrowIconRect, rightArrowTextRect,
-  twowayArrow, twowayArrowIconRect, twowayArrowTextRect,
-  rectangle, rectangleIconRect, rectangleTextRect,
-  diamond, diamondIconRect, diamondTextRect,
-  text, file, formtable, tablePagination, iframePrimeval,formSelect,
-  line as nodeLine, lineAnchors, lineIconRect, lineTextRect,
-  circle, circleIconRect, circleTextRect, circleAnchors,
-  triangle, triangleIconRect, triangleTextRect, triangleAnchors,
-  pentagon, pentagonIconRect, pentagonTextRect, pentagonAnchors,
-  hexagon, hexagonAnchors, hexagonIconRect, hexagonTextRect,
-  pentagram, pentagramAnchors, pentagramIconRect, pentagramTextRect,
-  cloud, cloudAnchors, cloudIconRect, cloudTextRect,
-  message, messageIconRect, messageTextRect, messageAnchors,
-  imageIconRect, imageTextRect,
-  cube, cubeAnchors, cubeIconRect, cubeTextRect,
-  people, peopleIconRect, peopleTextRect,
-  arbitraryGraph, arbitraryGraphAnchors,
+    arrowAnchors,
+    leftArrow, leftArrowIconRect, leftArrowTextRect,
+    rightArrow, rightArrowIconRect, rightArrowTextRect,
+    twowayArrow, twowayArrowIconRect, twowayArrowTextRect,
+    rectangle, rectangleIconRect, rectangleTextRect,
+    diamond, diamondIconRect, diamondTextRect,
+    text, file, formtable, tablePagination, iframePrimeval, formSelect, fromDatePicker,
+    line as nodeLine, lineAnchors, lineIconRect, lineTextRect,
+    circle, circleIconRect, circleTextRect, circleAnchors,
+    triangle, triangleIconRect, triangleTextRect, triangleAnchors,
+    pentagon, pentagonIconRect, pentagonTextRect, pentagonAnchors,
+    hexagon, hexagonAnchors, hexagonIconRect, hexagonTextRect,
+    pentagram, pentagramAnchors, pentagramIconRect, pentagramTextRect,
+    cloud, cloudAnchors, cloudIconRect, cloudTextRect,
+    message, messageIconRect, messageTextRect, messageAnchors,
+    imageIconRect, imageTextRect,
+    cube, cubeAnchors, cubeIconRect, cubeTextRect,
+    people, peopleIconRect, peopleTextRect,
+    arbitraryGraph, arbitraryGraphAnchors, time, switchs
 } from './nodes';
 import {
-  line,
-  lineControlPoints,
-  calcLineControlPoints,
-  polyline,
-  polylineControlPoints,
-  pointInPolyline,
-  calcPolylineControlPoints,
-  dockPolylineControlPoint,
-  curve,
-  curveControlPoints,
-  pointInCurve,
-  calcCurveControlPoints,
-  mind,
-  calcMindControlPoints,
-  mindControlPoints,
-  pointInMind
+    line,
+    lineControlPoints,
+    calcLineControlPoints,
+    polyline,
+    polylineControlPoints,
+    pointInPolyline,
+    calcPolylineControlPoints,
+    dockPolylineControlPoint,
+    curve,
+    curveControlPoints,
+    pointInCurve,
+    calcCurveControlPoints,
+    mind,
+    calcMindControlPoints,
+    mindControlPoints,
+    pointInMind
 } from './lines';
 import {
-  triangleSolid,
-  triangle as arrowTriangle,
-  diamondSolid,
-  diamond as arrowDiamond,
-  circleSolid, circle as arrowCircle,
-  lineUp,
-  lineDown,
-  line as arrowLine
+    triangleSolid,
+    triangle as arrowTriangle,
+    diamondSolid,
+    diamond as arrowDiamond,
+    circleSolid, circle as arrowCircle,
+    lineUp,
+    lineDown,
+    line as arrowLine
 } from './arrows';
 // Functions of drawing a node.
 export var drawNodeFns = {};
@@ -62,6 +62,8 @@ export var drawArrowFns = {};
 function init() {
     console.log('Init middles.');
     // ********Default nodes.*******
+    // datePicker
+    drawNodeFns.datePicker = fromDatePicker;
     // select
     drawNodeFns.select = formSelect;
     // iframe
@@ -199,6 +201,14 @@ function init() {
     drawArrowFns.lineUp = lineUp;
     drawArrowFns.lineDown = lineDown;
     // ********end********
+    // 当前时间
+    drawNodeFns.time = time;
+    iconRectFns.time = rectangleIconRect;
+    textRectFns.time = rectangleTextRect;
+    // 开关
+    drawNodeFns.switchs = switchs;
+    iconRectFns.switchs = rectangleIconRect;
+    textRectFns.switchs = rectangleTextRect;
 }
 init();
 // registerNode: Register a custom node.

package/core/src/middles/nodes/formDatePicker.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '../../models';
+export declare function fromDatePicker(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/formDatePicker.js

@@ -0,0 +1,107 @@
+import {Store} from "le5le-store";
+import {rectangle} from './rectangle';
+import { createDatePickerElement, loadJS, setDataPickerElementStyle } from '../../element';
+import { s8, datePickerValueFormatting } from '../../utils';
+import {commonStore} from "../../store";
+import {datePickerType} from "../../../../store";
+
+export async function fromDatePicker(ctx, node) {
+    // 绘制一个底图，类似于占位符。
+    rectangle(ctx, node);
+
+    if (!window.datePickerRegister) {
+        //未注册datePicker插件
+        const datePickerRegisterData = await loadJS(`${window.location.origin}/libary/laydate/laydate.js`).catch((e) => {
+            console.error('datePicker插件加载失败>>>', e);
+        });
+        if(!datePickerRegisterData) return;
+    }
+
+    const currentStore = commonStore[node.TID];
+
+    if (!currentStore.pickerDataPool[node.id]) {
+        // 未创建该元件
+        node.elementId = s8();
+
+        if(currentStore.mqttParams.dataConfig.picker){
+            // 日期元件关联绑定的元件数据
+            const pickerConfig = currentStore.mqttParams.dataConfig.picker;
+            for (let [key, config] of pickerConfig.entries()){
+                if(config.dateId === node.id) {
+                    node.formData.realIds = node.formData.realIds ? `${node.formData.realIds},${key}` : key;
+                    node.formData.selected = config.dateStr;
+                }
+            }
+        }
+
+        const format = node.pickerOptions.format;
+        const valueType = node.formData.valueType;
+        const dateType = node.pickerOptions.type;
+        node.pickerOptions.value = node.formData.selected || datePickerValueFormatting({
+            formatType: format,
+            valueType
+        }).dateStr;
+        const datePicker = createDatePickerElement(node);
+        currentStore.pickerDataPool[node.id] = {
+            format,
+            valueType,
+            dateType,
+            dom: {
+                container: datePicker
+            }
+        };
+
+        document.body.appendChild(datePicker);
+        // 添加当前节点到div层
+        node.addToDiv();
+        setDataPickerElementStyle(node);
+        if(window.location.pathname.includes('workspace') && currentStore.options.type === 'topology') return;
+        const pickerOptions = Object.keys(node.pickerOptions).reduce((a,k) => (node.pickerOptions[k] && (a[k]=node.pickerOptions[k]), a), {}); // 过滤空数据
+        if((pickerOptions.min || pickerOptions.max) && (pickerOptions.type !== 'year' || pickerOptions.type !== 'month')){
+            // 字符转换
+            if(pickerOptions.min && isValidInteger(pickerOptions.min)) pickerOptions.min = Number(pickerOptions.min);
+            if(pickerOptions.max && isValidInteger(pickerOptions.max)) pickerOptions.max = Number(pickerOptions.max);
+        }
+        let layDatePicker = null;
+        pickerOptions.elem = `#picker${node.id}`;
+        pickerOptions.done = function (val, date) {
+            const { year, month, hours, minutes, seconds } = date;
+            const map = {
+                yyyy: year,
+                MM: String(month).padStart(2, '0'),
+                dd: String(date.date).padStart(2, '0'),
+                HH: String(hours).padStart(2, '0'),
+                mm: String(minutes).padStart(2, '0'),
+                ss: String(seconds).padStart(2, '0')
+            };
+            node.formData.selected = val;
+            date.valueStr = val;
+            date.value = datePickerType[layDatePicker.config.type].replace(/yyyy|MM|dd|HH|mm|ss/g, match => map[match]);
+            Store.set(`${node.TID}-EVENT:change`, {node, date});
+        }
+        setTimeout(() => {
+
+            layDatePicker = laydate.render(pickerOptions);
+
+        }, 100)
+    }else {
+        if(node.formData.resetStyle) {
+            // 重置样式
+            setDataPickerElementStyle(node);
+            node.formData.resetStyle = false;
+        }
+        if(node.formData.render) {
+            // 重置数据
+            node.formData.render = false;
+            const params = {
+                format: node.pickerOptions.format,
+                valueType: node.formData.valueType,
+                dateType: node.pickerOptions.type
+            };
+            Object.assign(currentStore.pickerDataPool[node.id], params);
+        }
+    }
+}
+function isValidInteger(str) {
+    return /^-?\d+$/.test(str) && str !== '-' && !str.startsWith('+');
+}