dcim-topology2d 2.1.0 → 2.2.2

package/core/src/utils/conversion.js

@@ -1,6 +1,114 @@
 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) => {
@@ -82,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);
     }
 }

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) {
@@ -23,36 +28,48 @@ export function filterParams(id, node) {
     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];
@@ -62,4 +79,58 @@ export function filterParams(id, node) {
     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.1.0",
+  "version": "2.2.2",
   "description": "",
   "main": "-",
   "scripts": {

package/static/echartsDefaultData.js

@@ -1,178 +1,178 @@
-// 图例默认数据
-export const echartsLegendDefaultData = {
-  icon: 'rect', // 图标类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
-  itemWidth: 12, // 图标宽
-  itemHeight: 12, // 图标高
-  itemGap: 8, // 图例之间的间隔
-  top: '0%', // 图例距离容器上边位置
-  right: 'auto', // 图例距离容器右边位置
-  bottom: 'auto', // 图例距离容器下边位置
-  left: '60', // 图例距离容器左边位置
-  padding: [20, 0, 0, 0], // 图例内边距 string
-  color: '#fff', // 文字颜色
-  height: 8, // 文本显示高度 number
-  fontSize: 12 // 文字大小 number
-};
-// 柱状图和折线图默认标注
-export const echartsLineBarDefaultLegendData = {
-    data: ['标注1'],
-    icon: 'rich',
-    show: true,
-    itemWidth: 14,
-    itemHeight: 14,
-    textStyle: {
-        color: '#C6D1DB',
-        fontSize: '14px',
-    },
-    top: '12%',
-    left: '10%',
-    itemGap: 8
-};
-// 曲线默认配置数据
-export const echartsLineSeriesStyleData = {
-  smooth: false,
-  symbol: 'none',
-  symbolSize: 18,
-  itemLineStyle:{
-    color: '#2F86ED', //改变折线颜色
-    type: 'solid',
-    width: 1
-  },
-  area: false, // 是否是区域图
-  linear: false, // 是否是线性渐变
-  areaColor: {
-    type: 'linear',
-    x: 0,
-    y: 0,
-    x2: 0,
-    y2: 1,
-    global: false // 缺省为 false
-  },
-  areaColorStops:[{
-    offset: 0,
-    color: 'rgba(49, 144, 255, 0.21)' // 0% 处的颜色
-  }, {
-    offset: 1,
-    color: 'rgba(49, 144, 255, 0)' // 100% 处的颜色
-  }]
-}
-// 图表X轴默认配置数据
-export const echartsXAxisDefaultStyleData = {
-  x1AxisLabel: {
-    color: '#fff',
-    fontSize:"12"
-  }
-}
-// 图表Y轴默认配置数据
-export const echartsYAxisDefaultStyleData = {
-  ySplitLineShow: true, // y轴轴线是否显示
-  //坐标轴线样式
-  ysplitLineLineStyle: {
-    type: 'solid', //solid实线;dashed虚线
-    color: 'rgba(148, 147, 197, 0.5)'
-  },
-  y1axisLabelTextStyle: {
-    //坐标轴颜色
-    color: '#fff',
-    fontSize:"12",
-    padding: 5
-  },
-  // y轴刻度最大最小值和分隔值
-  y1MinMaxData: {
-    min: 0,
-    max: 60,
-    interval: 20
-  },
-  // y轴名称
-  y1NameData: {
-    name: '℃',
-    nameTextStyle: {
-      color: '#FDFDFD',
-      padding: [0, 0, 0, -52],
-    },
-    nameGap: 25
-  },
-  // y轴刻度标签文字样式
-  y2axisLabelTextStyle: {
-    //坐标轴颜色
-    color: '#fff',
-    fontSize:"12",
-    padding: 5
-  },
-  y2MinMaxData: {
-    name: '%',
-    nameTextStyle: {
-      color: '#FDFDFD',
-      padding: [0, -42, 0, 0],
-    },
-    nameGap: 25
-  },
-  y2NameData: {
-    min: 0,
-    max: 90,
-    interval: 30
-  }
-}
-// 图表的数据缩放
-export const echartsDataRoom = [{ //给x轴设置滚动条
-  start: 0, //默认为0
-  end: 50, //默认为100
-  type: 'slider',
-  show: false,
-  xAxisIndex: [0],
-  handleSize: 10, //滑动条的 左右2个滑动条的大小
-  height: 0, //组件高度
-}, { //下面这个属性是里面拖到
-  type: 'inside',
-  show: true,
-  xAxisIndex: [0],
-  start: 0, //默认为1
-  end: 50 // 100 - 1500 / 31, //默认为100
-}];
-// 图表类型Map
-export const echartsTypeMap = {
-    'type_1': 'line',
-    'type_2': 'bar',
-    'type_3': 'ring',
-    'type_4': 'TOP',
-    'type_5': 'pie',
-    'type_6': 'gauge'
-};
-// 图表颜色
-export const echartsColorData = [
-    '#2648E9',
-    '#E513F7',
-    '#79E10E',
-    '#0D9BE7',
-    '#23CEE2',
-    '#E5B903',
-    '#2BDB8E',
-    '#CAD804',
-    '#117BEE',
-    '#DB8407',
-    '#E72B2B',
-    '#E96812',
-    '#7612D6',
-    '#A117B8',
-    'rgb(21, 151, 224)',
-    'rgb(36, 220, 132)',
-    'rgb(154, 77, 251)',
-    'rgb(226, 182, 56)',
-    'rgb(253, 92, 71)',
-    'rgb(175, 215, 14)',
-    'rgb(214, 154, 37)',
-    'rgb(66, 251, 251)',
-    'rgb(255, 158, 4)',
-    'rgb(19, 236, 236)',
-    'rgb(68, 237, 146)',
-    'rgb(251, 94, 45)',
-    'rgb(18, 255, 113)'];
-// TOP排行榜默认颜色
-export const rankingTopColorList = [
-    'rgba(239, 120, 66, .6)',
-    'rgba(255, 225, 65, .5)',
-    'rgba(55, 240, 151, .5)',
-    'rgba(72, 211, 255, .6)',
-    'rgba(67, 153, 255, .5)'
-];
-export const rankingTopImageName = ['orange', 'yellow', 'ching', 'lightBlue', 'blue'];
+// 图例默认数据
+export const echartsLegendDefaultData = {
+  icon: 'rect', // 图标类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+  itemWidth: 12, // 图标宽
+  itemHeight: 12, // 图标高
+  itemGap: 8, // 图例之间的间隔
+  top: '0%', // 图例距离容器上边位置
+  right: 'auto', // 图例距离容器右边位置
+  bottom: 'auto', // 图例距离容器下边位置
+  left: '60', // 图例距离容器左边位置
+  padding: [20, 0, 0, 0], // 图例内边距 string
+  color: '#fff', // 文字颜色
+  height: 8, // 文本显示高度 number
+  fontSize: 12 // 文字大小 number
+};
+// 柱状图和折线图默认标注
+export const echartsLineBarDefaultLegendData = {
+    data: ['标注1'],
+    icon: 'rich',
+    show: true,
+    itemWidth: 14,
+    itemHeight: 14,
+    textStyle: {
+        color: '#C6D1DB',
+        fontSize: '14px',
+    },
+    top: '12%',
+    left: '10%',
+    itemGap: 8
+};
+// 曲线默认配置数据
+export const echartsLineSeriesStyleData = {
+  smooth: false,
+  symbol: 'none',
+  symbolSize: 18,
+  itemLineStyle:{
+    color: '#2F86ED', //改变折线颜色
+    type: 'solid',
+    width: 1
+  },
+  area: false, // 是否是区域图
+  linear: false, // 是否是线性渐变
+  areaColor: {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    global: false // 缺省为 false
+  },
+  areaColorStops:[{
+    offset: 0,
+    color: 'rgba(49, 144, 255, 0.21)' // 0% 处的颜色
+  }, {
+    offset: 1,
+    color: 'rgba(49, 144, 255, 0)' // 100% 处的颜色
+  }]
+}
+// 图表X轴默认配置数据
+export const echartsXAxisDefaultStyleData = {
+  x1AxisLabel: {
+    color: '#fff',
+    fontSize:"12"
+  }
+}
+// 图表Y轴默认配置数据
+export const echartsYAxisDefaultStyleData = {
+  ySplitLineShow: true, // y轴轴线是否显示
+  //坐标轴线样式
+  ysplitLineLineStyle: {
+    type: 'solid', //solid实线;dashed虚线
+    color: 'rgba(148, 147, 197, 0.5)'
+  },
+  y1axisLabelTextStyle: {
+    //坐标轴颜色
+    color: '#fff',
+    fontSize:"12",
+    padding: 5
+  },
+  // y轴刻度最大最小值和分隔值
+  y1MinMaxData: {
+    min: 0,
+    max: 60,
+    interval: 20
+  },
+  // y轴名称
+  y1NameData: {
+    name: '℃',
+    nameTextStyle: {
+      color: '#FDFDFD',
+      padding: [0, 0, 0, -52],
+    },
+    nameGap: 25
+  },
+  // y轴刻度标签文字样式
+  y2axisLabelTextStyle: {
+    //坐标轴颜色
+    color: '#fff',
+    fontSize:"12",
+    padding: 5
+  },
+  y2MinMaxData: {
+    name: '%',
+    nameTextStyle: {
+      color: '#FDFDFD',
+      padding: [0, -42, 0, 0],
+    },
+    nameGap: 25
+  },
+  y2NameData: {
+    min: 0,
+    max: 90,
+    interval: 30
+  }
+}
+// 图表的数据缩放
+export const echartsDataRoom = [{ //给x轴设置滚动条
+  start: 0, //默认为0
+  end: 50, //默认为100
+  type: 'slider',
+  show: false,
+  xAxisIndex: [0],
+  handleSize: 10, //滑动条的 左右2个滑动条的大小
+  height: 0, //组件高度
+}, { //下面这个属性是里面拖到
+  type: 'inside',
+  show: true,
+  xAxisIndex: [0],
+  start: 0, //默认为1
+  end: 50 // 100 - 1500 / 31, //默认为100
+}];
+// 图表类型Map
+export const echartsTypeMap = {
+    'type_1': 'line',
+    'type_2': 'bar',
+    'type_3': 'ring',
+    'type_4': 'TOP',
+    'type_5': 'pie',
+    'type_6': 'gauge'
+};
+// 图表颜色
+export const echartsColorData = [
+    '#2648E9',
+    '#E513F7',
+    '#79E10E',
+    '#0D9BE7',
+    '#23CEE2',
+    '#E5B903',
+    '#2BDB8E',
+    '#CAD804',
+    '#117BEE',
+    '#DB8407',
+    '#E72B2B',
+    '#E96812',
+    '#7612D6',
+    '#A117B8',
+    'rgb(21, 151, 224)',
+    'rgb(36, 220, 132)',
+    'rgb(154, 77, 251)',
+    'rgb(226, 182, 56)',
+    'rgb(253, 92, 71)',
+    'rgb(175, 215, 14)',
+    'rgb(214, 154, 37)',
+    'rgb(66, 251, 251)',
+    'rgb(255, 158, 4)',
+    'rgb(19, 236, 236)',
+    'rgb(68, 237, 146)',
+    'rgb(251, 94, 45)',
+    'rgb(18, 255, 113)'];
+// TOP排行榜默认颜色
+export const rankingTopColorList = [
+    'rgba(239, 120, 66, .6)',
+    'rgba(255, 225, 65, .5)',
+    'rgba(55, 240, 151, .5)',
+    'rgba(72, 211, 255, .6)',
+    'rgba(67, 153, 255, .5)'
+];
+export const rankingTopImageName = ['orange', 'yellow', 'ching', 'lightBlue', 'blue'];

package/store/actions.js

@@ -1 +1,2 @@
-export const plugsPool = {};
+export const plugsPool = {};
+export const tabsPageContentData = {};

package/store/clear.js

@@ -1,5 +1,9 @@
 import {setEventListener} from "../core";
+import {tabsPageContentData} from "./actions";
 export const removeAllElement = function (){
+    for (let key of Object.keys(tabsPageContentData)) {
+        delete tabsPageContentData[key];
+    }
     const documentDefineEle = document.querySelectorAll('.documentDefine');
     if(documentDefineEle) {
         documentDefineEle.forEach(function(element) {