dcim-topology2d 2.0.8 → 2.2.0

package/core/src/utils/conversion.js

@@ -1,7 +1,148 @@
 import {commonStore} from '../store';
 import {setElementSwitchTabState} from '../element';
 import {echartsStaticType} from '../utils';
+import {datePickerType, datePickerTypeList} from "../../../store";
 
+/**
+ * yyyy-MM-dd 格式转换
+ * @param valueType 默认值类型：1-默认当天
+ * @returns {string}
+ */
+// function yyyMMddFormatting(valueType) {
+//     if(valueType === 1){
+//         // 默认当天
+//         return new Date().toISOString().split('T')[0];
+//     }
+// }
+
+/**
+ * yyyy-MM-dd HH:mm:ss 格式转换
+ * @param valueType 默认值类型：1-默认当天
+ * @returns {string}
+ */
+// function yyyMMddHHmmssFormatting(valueType) {
+//     if(valueType === 1){
+//         // 默认当天
+//         return new Date().toISOString().replace('T', ' ').substring(0, 19);
+//     }
+// }
+
+/**
+ * yyyy 格式转换
+ * @param valueType 默认值类型：1-默认当天
+ * @returns {number}
+ */
+// function yyyFormatting(valueType) {
+//     if(valueType === 1){
+//         // 默认当天
+//         return new new Date().getFullYear();
+//     }
+// }
+
+/**
+ * yyyy-MM 格式转换
+ * @param valueType 默认值类型：1-默认当天
+ * @returns {string}
+ */
+// function yyyMMFormatting(valueType) {
+//     if(valueType === 1){
+//         // 默认当天
+//         return new Date().toISOString().slice(0, 7);
+//     }
+// }
+
+/**
+ * HH:mm:ss 格式转换
+ * @param valueType 默认值类型：1-默认当天
+ * @returns {string}
+ */
+// function hhmmssddFormatting(valueType) {
+//     if(valueType === 1){
+//         // 默认当天
+//         Date.prototype.formatTime = function() {
+//             return [this.getHours(), this.getMinutes(), this.getSeconds()]
+//                 .map(v => v.toString().padStart(2, '0')).join(':');
+//         };
+//         return new Date().formatTime();
+//     }
+// }
+export function pageZoom() {
+    let screenWidth = 0;
+    if(window.screen.width < 1920) {
+        // 1920 * 1080分辨率以下的适配
+        const zoom = window.screen.width / 1920;
+        screenWidth = Math.round(window.screen.width / zoom);
+    }else {
+        screenWidth = window.screen.width;
+    }
+    const order = window.screen.width > 1280 ? 12 : 8; // 差值计算
+    return window.innerWidth < screenWidth ? (window.innerWidth - order) / screenWidth : 1;
+}
+
+/**
+ * 日期转换
+ * @param data: {formatType: '日期格式', valueType: '默认值类型'}
+ * @returns {string}
+ */
+export function datePickerValueFormatting(data) {
+    if(!Object.keys(datePickerType).length) {
+        // 获取日期类型map数据
+        const params = datePickerTypeList.reduce((obj, item) => {
+            obj[item['id']] = item.format;
+            return obj;
+        }, {});
+        Object.assign(datePickerType, params);
+    }
+    let now = new Date(); // data.valueType === 1 默认
+    const map = {
+        yyyy: now.getFullYear(),
+        MM: String(now.getMonth() + 1).padStart(2, '0'),
+        dd: String(now.getDate()).padStart(2, '0'),
+        HH: String(now.getHours()).padStart(2, '0'),
+        mm: String(now.getMinutes()).padStart(2, '0'),
+        ss: String(now.getSeconds()).padStart(2, '0')
+    };
+    const date = data.dateType ? datePickerType[data.dateType].replace(/yyyy|MM|dd|HH|mm|ss/g, match => map[match]) : '';
+    const dateStr = data.formatType.replace(/yyyy|MM|dd|HH|mm|ss/g, match => map[match]);
+    return {
+        date,
+        dateStr
+    };
+}
+// tab切换页签删除数据处理
+export function getTabConnectSHConf(node) {
+    const switchTabType = node.tags.find((t) => {
+        return t.includes('switchTabType');
+    }); // 获取按钮组类型
+    const topologyChangeData = commonStore[node.TID].switchTabDataPool;
+    const tabAreaData = topologyChangeData[`${switchTabType}AreaData`];
+    const bindConfIds = node.bindStaticId.split(','); // tab元件绑定的元件id
+    const currentNode = [{...node}]; // 需要删除的关联元件数据
+    for (let i = 0; i < bindConfIds.length; i++) {
+        const id = bindConfIds[i];
+        if(tabAreaData[id]) {
+            currentNode.push(tabAreaData[id]);
+            delete tabAreaData[id];
+        }
+    }
+    const changeData = topologyChangeData[`${switchTabType}Data`];
+    delete changeData[node.id];
+    if(Object.keys(changeData).length) {
+        // 第一个页签设置选中效果
+        const firstNode = Object.values(changeData)[0];
+        firstNode.activeImgeIndex = false;
+        const firstNodeBindConfIds = firstNode.bindStaticId.split(','); // tab元件绑定的元件id
+        // 为绑定的每个元件设置可见
+        for (let i = 0; i < firstNodeBindConfIds.length; i++) {
+            const tabAreaNode = tabAreaData[firstNodeBindConfIds[i]];
+            if(tabAreaNode) {
+                tabAreaNode.visible = true;
+                tabAreaNode.visibleSwitch = true;
+            }
+        }
+    }
+    return currentNode;
+}
 /**
  * Tab 数据统计
  * @param type 统计类型
@@ -49,6 +190,7 @@ export function tabHideShowOperation(node, areaData, isActive) {
         if(!(areaNode && pens[areaNode.order])) return;
         const tagNode = pens[areaNode.order];
         tagNode.visible = !isActive;
+        tagNode.visibleSwitch = tagNode.visible;
         setElementSwitchTabState(tagNode);
     }
 }
@@ -155,6 +297,15 @@ export function setVarValueData(data) {
         "value": data.name
     }];
 }
+export function setBranchAddressData(data) {
+    return [{
+        "key": "branchVal",
+        "value": data.value
+    }, {
+        "key": "支路地址Key",
+        "value": data.key
+    }];
+}
 export function setThreeCategoryIdData(pen, data) {
     let params = [];
     const hasThreeCategoryId = pen.data.find((tc) => {

package/core/src/utils/math.d.ts

@@ -1,4 +1,3 @@
 export declare function pSBC(p: any, c0: any, c1?: any, l?: any): string;
 export declare function abs(num: number, percent: number | string): number;
 export declare function ptInPolyXY(pt: any, poly: []): boolean;
-export declare function jsonLength(obj: {}): number;

package/core/src/utils/math.js

@@ -115,7 +115,4 @@ export function ptInPolyXY(pt, poly) {
     }
     return c;
 }
-export function jsonLength(obj) {
-    return Object.keys(obj).length;
-}
 //# sourceMappingURL=math.js.map

package/core/src/utils/onmousevent.js

@@ -77,7 +77,7 @@ export function mousDownFun(type, eventNode) {
         params.eventType = downDataType.Tabswitch; // Tab切换
     }else if(action === 11) {
         params.eventType = downDataType.Formselect; // select下拉切换
-        params.staticType = eventNode.dcimStaticForType; // 1: 数据统计；2：数据展示；3：显示隐藏
+        // params.staticType = eventNode.dcimStaticForType; // 1: 数据统计；2：数据展示；3：显示隐藏；4：日期类型
     }else {
         // action === 5 远程控制比较特殊，无论是否绑定远程控制事件，只要数据中有远程控制属性且值为0都会认定为远程控制
         params.eventType = downDataType.Target; // 链接跳转

package/core/src/utils/params.d.ts

@@ -1,2 +1,3 @@
+// @ts-ignore
 export declare function getParams(id: string, data: []): void;
 export declare function filterParams(node: any): void;

package/core/src/utils/params.js

@@ -1,7 +1,11 @@
 import {commonStore} from '../store';
+import {datePickerValueFormatting} from "./conversion";
+import {datePickerBindType, confBindValueType} from "./construction";
+const confConfigMap = new Map();
 // 获取绑定数据的参数
 export function getParams(id, data) {
-    data.map((item) => {
+    for (let i = 0, length = data.length; i < length; i++) {
+        const item = data[i];
         filterParams(id, item);
         if (item.children && item.children.length) {
             getParams(id, item.children);
@@ -9,7 +13,8 @@ export function getParams(id, data) {
         if (item.formData && item.formData.detailPageData && item.formData.detailPageData.pens && item.formData.detailPageData.pens.length) {
             getParams(id, item.formData.detailPageData.pens);
         }
-    });
+    }
+    confConfigMap.clear();
 }
 // 过滤出参数
 export function filterParams(id, node) {
@@ -20,41 +25,112 @@ export function filterParams(id, node) {
     let tagEcharts = [];
     let echartData = [];
     let varVaule = [];
+    let branchValue = [];
     let doorIds = [];
     let isMqttEventType = false;
+    let dcimStaticForType = '';
     node.events.map((ev) => {
         if(ev.value && ev.value === 'entranceGuard') doorIds.push(ev.params); // 门禁参数
         if(ev.type === 3) isMqttEventType = true;
+        if(ev.type === 4) dcimStaticForType = ev.dcimStaticForType;
     });
     if(doorIds.length) commonStore[id].mqttParams.doorIds = [...commonStore[id].mqttParams.doorIds, ...doorIds];
     if(!isMqttEventType) return;
     if (node.data && Array.isArray(node.data) && node.data.length) {
-        node.data.map((item) => {
+        for (let i = 0, length = node.data.length; i < length; i ++) {
+            const item = node.data[i];
+            let type = 0;
             if (item.key === 'tagId') {
                 tagIds.push(item.value);
+                type = datePickerBindType.tag;
             }
             if (item.key === 'kpiAddr') {
                 kpiAddrs.push(item.value);
+                type = datePickerBindType.kpi;
             }
             if (item.key === 'assetId') {
                 assetIds.push(item.value);
+                type = datePickerBindType.asset;
             }
             if (item.key === 'areaId') {
                 areaIds.push(item.value);
+                type = datePickerBindType.area;
             }
             if (item.key.includes('varValue')) {
                 varVaule.push(item.value);
+                type = datePickerBindType.varType;
             }
-        })
+            if (item.key === 'branchVal') {
+                branchValue.push(item.value);
+                type = datePickerBindType.branch;
+            }
+            if(dcimStaticForType && node.formData && type) setConfConfigMap(node.id, id, node.formData, item.value, type);
+        }
     }
     if (node.data && Object.prototype.toString.call(node.data) === '[object Object]' && node.data.params && node.data.params.id) {
         echartData.push(node.data.params.id);
+        if(dcimStaticForType && node.formData) setConfConfigMap(node.id, id, node.formData, node.data.params.id, 1);
     }
     commonStore[id].mqttParams.tagIds = [...commonStore[id].mqttParams.tagIds, ...tagIds];
     commonStore[id].mqttParams.kpiAddrs = [...commonStore[id].mqttParams.kpiAddrs, ...kpiAddrs];
     commonStore[id].mqttParams.assetIds = [...commonStore[id].mqttParams.assetIds, ...assetIds];
     commonStore[id].mqttParams.areaIds = [...commonStore[id].mqttParams.areaIds, ...areaIds];
     commonStore[id].mqttParams.varVaule = [...commonStore[id].mqttParams.varVaule, ...varVaule];
+    commonStore[id].mqttParams.branchValue = [...commonStore[id].mqttParams.branchValue, ...branchValue];
     commonStore[id].mqttParams.tagEcharts = [...commonStore[id].mqttParams.tagEcharts, ...tagEcharts];
     commonStore[id].mqttParams.echartData = [...commonStore[id].mqttParams.echartData, ...echartData];
+}
+
+/**
+ * 设置绑定日期的配置数据
+ * @param formData 元件关联的日期数据
+ * @param id 当前元件id
+ * @param tid
+ * @param realData 当前元件绑定的数据
+ * @param type 当前元件绑定的数据类型 1：echart   3：测点     6：指标   9：资产  12：变量类型   15：支路地址  21：区域
+ */
+function setConfConfigMap(id, tid, formData, realData, type) {
+    if(!formData.dateId) return;
+    const dateId = formData.dateId;
+    let value = null;
+    let valueStr = '';
+    if(confConfigMap.has(dateId)) {
+
+         const {date, dateStr} = confConfigMap.get(dateId);
+
+        value = date;
+
+        valueStr = dateStr;
+
+    }else {
+
+        const {date, dateStr} = datePickerValueFormatting({
+            formatType: formData.dateFormat,
+            valueType: formData.valueType,
+            dateType: formData.dateType
+        });
+
+        value = date;
+
+        valueStr = dateStr;
+
+        confConfigMap.set(dateId, {date, dateStr});
+
+    }
+    const dataConfig = commonStore[tid].mqttParams.dataConfig;
+    if(!dataConfig.data){
+        dataConfig.data = {};
+        dataConfig.picker = new Map();
+    }
+    dataConfig.data[id] = {
+        id: realData,
+        date: value,
+        dataType: type,
+        valueType: confBindValueType.increment
+    };
+    dataConfig.picker.set(id, {
+        dateId,
+        date: value,
+        dateStr: valueStr
+    });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "2.0.8",
+  "version": "2.2.0",
   "description": "",
   "main": "-",
   "scripts": {

package/store/default.js

@@ -0,0 +1,22 @@
+export const datePickerTypeList = [{
+    id: 'date',
+    name: '日期选择器', // 可选择：年、月、日
+    format: 'yyyy-MM-dd'
+},{
+    id: 'datetime',
+    name: '日期时间选择器', // 可选择：年、月、日、时、分、秒 dateType
+    format: 'yyyy-MM-dd HH:mm:ss'
+},{
+    id: 'year',
+    name: '年选择器', // 只提供年列表选择
+    format: 'yyyy'
+},{
+    id: 'month',
+    name: '年月选择器', // 只提供年、月选择
+    format: 'yyyy-MM'
+},{
+    id: 'time',
+    name: '时间选择器', // 只提供时、分、秒选择
+    format: 'HH:mm:ss'
+}];
+export const datePickerType = {}

package/store/index.js

@@ -1,2 +1,3 @@
 export * from './actions';
-export * from './clear';
+export * from './clear';
+export * from './default';

package/style/common.css

@@ -12,7 +12,4 @@ li {
 .canvas-point,
 .canvas-point.default{
   cursor: default;
-}
-.canvas-point.pointer > div{
-  z-index: -2;
 }

package/style/datePicker.css

@@ -0,0 +1,44 @@
+.topology-datePicker{
+    position: relative;
+    box-sizing: border-box;
+}
+.topology-datePicker i{
+    display: inline-block;
+}
+.topology-datePicker input{
+    width: 100%;
+    height: 100%;
+    line-height: 100%;
+    border: none;
+    background: transparent;
+    vertical-align: top;
+}
+.topology-datePicker input::placeholder{
+    font-weight: normal;
+    color: rgb(220, 223, 230);
+}
+.topology-datePicker input:active,
+.topology-datePicker input:focus{
+    outline: none;
+}
+.topology-datePicker .icon-date,
+.topology-datePicker .icon-arrow{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.layui-laydate-main{
+    width: 322px !important;
+}
+.layui-laydate-main table{
+    width: 100%;
+}
+.layui-laydate-header i{
+    font-size: 14px !important;
+}
+.laydate-set-ym {
+    font-size: 16px;
+}
+.layui-laydate-footer span.layui-laydate-preview{
+    font-size: 14px;
+}

package/style/editor.css

@@ -4,6 +4,9 @@
 /*.canvas-point{*/
 /*    z-index: 6;*/
 /*}*/
+.canvas-point.pointer > div{
+    z-index: -2;
+}
 .topoEchart,
 .topology-select{
     z-index: 1;

package/style/index.css

@@ -1,4 +1,5 @@
 @import './common.css';
 @import './select.css';
+@import './datePicker.css';