dcim-topology2d 2.1.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/activity-diagram/src/final/final.d.ts +1 -1
- package/activity-diagram/src/final/final.rect.d.ts +1 -1
- package/activity-diagram/src/final/final.rect.js +1 -1
- package/activity-diagram/src/fork/fork.anchor.d.ts +1 -1
- package/activity-diagram/src/fork/fork.anchor.js +1 -1
- package/activity-diagram/src/fork/fork.d.ts +1 -1
- package/activity-diagram/src/fork/fork.rect.d.ts +1 -1
- package/activity-diagram/src/fork/fork.rect.js +1 -1
- package/activity-diagram/src/register.js +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.d.ts +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.rect.d.ts +1 -1
- package/activity-diagram/src/swimlaneH/swimlaneH.rect.js +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.d.ts +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.rect.d.ts +1 -1
- package/activity-diagram/src/swimlaneV/swimlaneV.rect.js +1 -1
- package/chart-diagram/index.d.ts +1 -3
- package/chart-diagram/index.js +1 -2
- package/chart-diagram/src/echarts/index.d.ts +2 -1
- package/chart-diagram/src/echarts/index.js +104 -109
- package/chart-diagram/src/register.js +8 -9
- package/class-diagram/src/class/class.d.ts +1 -1
- package/class-diagram/src/class/class.rect.d.ts +1 -1
- package/class-diagram/src/class/class.rect.js +1 -1
- package/class-diagram/src/register.js +1 -1
- package/core/index.d.ts +0 -2
- package/core/index.js +0 -2
- package/core/src/activeLayer.d.ts +10 -2
- package/core/src/activeLayer.js +47 -42
- package/core/src/animateLayer.d.ts +7 -3
- package/core/src/animateLayer.js +12 -10
- package/core/src/calling.d.ts +4 -1
- package/core/src/calling.js +41 -43
- package/core/src/canvas.d.ts +6 -1
- package/core/src/canvas.js +21 -22
- package/core/src/common.d.ts +7 -6
- package/core/src/common.js +674 -341
- package/core/src/core.d.ts +4 -5
- package/core/src/core.js +385 -522
- package/core/src/divLayer.d.ts +36 -2
- package/core/src/divLayer.js +305 -33
- package/core/src/healps/changeData.d.ts +2 -1
- package/core/src/healps/changeData.js +66 -32
- package/core/src/hoverLayer.d.ts +9 -2
- package/core/src/hoverLayer.js +34 -31
- package/core/src/middles/default.d.ts +3 -1
- package/core/src/middles/default.js +51 -59
- package/core/src/middles/index.js +2 -3
- package/core/src/middles/nodes/arbitrarygraph.js +9 -11
- package/core/src/middles/nodes/pentagon.rect.js +1 -1
- package/core/src/middles/nodes/rectangle.rect.js +1 -1
- package/core/src/models/data.d.ts +26 -0
- package/core/src/models/data.js +77 -0
- package/core/src/models/data.js.map +1 -0
- package/core/src/models/index.d.ts +1 -0
- package/core/src/models/index.js +1 -0
- package/core/src/models/node.d.ts +0 -10
- package/core/src/models/node.js +36 -81
- package/core/src/models/pen.js +59 -19
- package/core/src/models/rect.js +2 -2
- package/core/src/mqtt.d.ts +14 -0
- package/core/src/mqtt.js +82 -0
- package/core/src/mqtt.js.map +1 -0
- package/core/src/offscreen.d.ts +4 -1
- package/core/src/offscreen.js +8 -10
- package/core/src/options.d.ts +1 -3
- package/core/src/options.js +0 -2
- package/core/src/poll.js +39 -0
- package/core/src/preview.d.ts +13 -2
- package/core/src/preview.js +43 -135
- package/core/src/renderLayer.d.ts +9 -11
- package/core/src/renderLayer.js +61 -60
- package/core/src/socket.d.ts +10 -0
- package/core/src/socket.js +51 -0
- package/core/src/socket.js.map +1 -0
- package/core/src/utils/canvas.js +1 -1
- package/core/src/utils/construction.d.ts +3 -12
- package/core/src/utils/construction.js +1 -8
- package/core/src/utils/conversion.d.ts +0 -13
- package/core/src/utils/conversion.js +0 -210
- package/core/src/utils/dom.d.ts +8 -0
- package/core/src/utils/dom.js +67 -0
- package/core/src/utils/dom.js.map +1 -0
- package/core/src/utils/index.d.ts +1 -2
- package/core/src/utils/index.js +1 -2
- package/core/src/utils/math.d.ts +0 -1
- package/core/src/utils/math.js +0 -3
- package/core/src/utils/onmousevent.d.ts +0 -3
- package/core/src/utils/onmousevent.js +10 -42
- package/flow-diagram/src/comment/comment.anchor.d.ts +1 -1
- package/flow-diagram/src/comment/comment.anchor.js +1 -1
- package/flow-diagram/src/comment/comment.d.ts +1 -1
- package/flow-diagram/src/data/data.anchor.d.ts +1 -1
- package/flow-diagram/src/data/data.anchor.js +1 -1
- package/flow-diagram/src/data/data.d.ts +1 -1
- package/flow-diagram/src/data/data.rect.d.ts +1 -1
- package/flow-diagram/src/data/data.rect.js +1 -1
- package/flow-diagram/src/db/db.d.ts +1 -1
- package/flow-diagram/src/db/db.rect.d.ts +1 -1
- package/flow-diagram/src/db/db.rect.js +1 -1
- package/flow-diagram/src/display/display.anchor.d.ts +1 -1
- package/flow-diagram/src/display/display.anchor.js +1 -1
- package/flow-diagram/src/display/display.d.ts +1 -1
- package/flow-diagram/src/display/display.rect.d.ts +1 -1
- package/flow-diagram/src/display/display.rect.js +1 -1
- package/flow-diagram/src/document/document.anchor.d.ts +1 -1
- package/flow-diagram/src/document/document.anchor.js +1 -1
- package/flow-diagram/src/document/document.d.ts +1 -1
- package/flow-diagram/src/document/document.rect.d.ts +1 -1
- package/flow-diagram/src/document/document.rect.js +1 -1
- package/flow-diagram/src/externStorage/externStorage.anchor.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.anchor.js +1 -1
- package/flow-diagram/src/externStorage/externStorage.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.rect.d.ts +1 -1
- package/flow-diagram/src/externStorage/externStorage.rect.js +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.d.ts +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.rect.d.ts +1 -1
- package/flow-diagram/src/internalStorage/internalStorage.rect.js +1 -1
- package/flow-diagram/src/manually/manually.anchor.d.ts +1 -1
- package/flow-diagram/src/manually/manually.anchor.js +1 -1
- package/flow-diagram/src/manually/manually.d.ts +1 -1
- package/flow-diagram/src/manually/manually.rect.d.ts +1 -1
- package/flow-diagram/src/manually/manually.rect.js +1 -1
- package/flow-diagram/src/parallel/parallel.anchor.d.ts +1 -1
- package/flow-diagram/src/parallel/parallel.anchor.js +1 -1
- package/flow-diagram/src/parallel/parallel.d.ts +1 -1
- package/flow-diagram/src/queue/queue.d.ts +1 -1
- package/flow-diagram/src/queue/queue.rect.d.ts +1 -1
- package/flow-diagram/src/queue/queue.rect.js +1 -1
- package/flow-diagram/src/register.js +1 -1
- package/flow-diagram/src/subprocess/subprocess.d.ts +1 -1
- package/flow-diagram/src/subprocess/subprocess.rect.d.ts +1 -1
- package/flow-diagram/src/subprocess/subprocess.rect.js +1 -1
- package/layout/src/align.d.ts +1 -1
- package/layout/src/align.js +1 -1
- package/layout/src/layout.d.ts +1 -1
- package/layout/src/layout.js +1 -1
- package/myShape-diagram/{index.js → myShape.js} +1 -4
- package/package.json +1 -1
- package/sequence-diagram/src/focus/focus.anchor.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.anchor.js +1 -1
- package/sequence-diagram/src/focus/focus.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.rect.d.ts +1 -1
- package/sequence-diagram/src/focus/focus.rect.js +1 -1
- package/sequence-diagram/src/lifeline/lifeline.anchor.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.anchor.js +1 -1
- package/sequence-diagram/src/lifeline/lifeline.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.rect.d.ts +1 -1
- package/sequence-diagram/src/lifeline/lifeline.rect.js +1 -1
- package/sequence-diagram/src/register.js +1 -1
- package/chart-diagram/src/utils/changeOptions.d.ts +0 -8
- package/chart-diagram/src/utils/changeOptions.js +0 -267
- package/chart-diagram/src/utils/conversion.d.ts +0 -19
- package/chart-diagram/src/utils/conversion.js +0 -559
- package/chart-diagram/src/utils/drawGraphic.d.ts +0 -3
- package/chart-diagram/src/utils/drawGraphic.js +0 -97
- package/chart-diagram/src/utils/formatter.d.ts +0 -1
- package/chart-diagram/src/utils/formatter.js +0 -206
- package/chart-diagram/src/utils/index.d.ts +0 -5
- package/chart-diagram/src/utils/index.js +0 -5
- package/chart-diagram/src/utils/render.d.ts +0 -8
- package/chart-diagram/src/utils/render.js +0 -219
- package/chart-diagram/src/utils/surfaceParametricConversion.d.ts +0 -3
- package/chart-diagram/src/utils/surfaceParametricConversion.js +0 -252
- package/core/src/element/common.d.ts +0 -6
- package/core/src/element/common.js +0 -54
- package/core/src/element/datePicker.d.ts +0 -3
- package/core/src/element/datePicker.js +0 -47
- package/core/src/element/iframe.d.ts +0 -3
- package/core/src/element/iframe.js +0 -12
- package/core/src/element/index.d.ts +0 -5
- package/core/src/element/index.js +0 -6
- package/core/src/element/select.d.ts +0 -11
- package/core/src/element/select.js +0 -275
- package/core/src/element/tab.d.ts +0 -1
- package/core/src/element/tab.js +0 -25
- package/core/src/element/time.d.ts +0 -3
- package/core/src/element/time.js +0 -44
- package/core/src/middles/arrows/index.d.ts +0 -4
- package/core/src/middles/arrows/index.js +0 -5
- package/core/src/middles/lines/index.d.ts +0 -4
- package/core/src/middles/lines/index.js +0 -5
- package/core/src/middles/nodes/formDatePicker.d.ts +0 -2
- package/core/src/middles/nodes/formDatePicker.js +0 -66
- package/core/src/middles/nodes/formoverflow.js +0 -61
- package/core/src/middles/nodes/formselect.d.ts +0 -2
- package/core/src/middles/nodes/formselect.js +0 -102
- package/core/src/middles/nodes/iframe.d.ts +0 -2
- package/core/src/middles/nodes/iframe.js +0 -29
- package/core/src/middles/nodes/index.d.ts +0 -50
- package/core/src/middles/nodes/index.js +0 -52
- package/core/src/middles/nodes/time.d.ts +0 -2
- package/core/src/middles/nodes/time.js +0 -98
- package/core/src/store/common.d.ts +0 -9
- package/core/src/store/common.js +0 -5
- package/core/src/store/data.d.ts +0 -194
- package/core/src/store/data.js +0 -187
- package/core/src/store/index.d.ts +0 -2
- package/core/src/store/index.js +0 -2
- package/core/src/utils/assignment.d.ts +0 -7
- package/core/src/utils/assignment.js +0 -185
- package/core/src/utils/params.d.ts +0 -2
- package/core/src/utils/params.js +0 -65
- package/static/echartsDefaultData.js +0 -178
- package/static/element.js +0 -14
- package/static/form.js +0 -11
- package/static/index.js +0 -3
- package/store/actions.js +0 -1
- package/store/clear.js +0 -10
- package/store/index.js +0 -2
- package/style/common.css +0 -15
- package/style/datePicker.css +0 -44
- package/style/editor.css +0 -16
- package/style/index.css +0 -5
- package/style/select.css +0 -143
- /package/myShape-diagram/{index.ts → myShape.ts} +0 -0
@@ -1,559 +0,0 @@
|
|
1
|
-
import {echartsDataRoom, echartsColorData, rankingTopImageName} from '../../../static';
|
2
|
-
import {
|
3
|
-
setSeriesRenderGroup,
|
4
|
-
drawGraphicShape,
|
5
|
-
setChartLegendData,
|
6
|
-
setChartXAxisData,
|
7
|
-
setChartYAxisData,
|
8
|
-
setLineSeriesStyleData,
|
9
|
-
setRingPreSeriesOptions,
|
10
|
-
setRingProSeriesOptions,
|
11
|
-
set3DPieOptions,
|
12
|
-
mapFormatterSet,
|
13
|
-
set3DPieMouseHover
|
14
|
-
} from '../utils';
|
15
|
-
import {
|
16
|
-
gaugeNormalAuto,
|
17
|
-
lineBarDataAuto,
|
18
|
-
pieRingAssetTotalAuto,
|
19
|
-
pieRingProportionAuto,
|
20
|
-
pieRingNormalAuto,
|
21
|
-
topRankingListAuto,
|
22
|
-
scatterDataAuto,
|
23
|
-
barPileStaticDataAuto
|
24
|
-
} from './render';
|
25
|
-
import {commonStore, echartsStaticType} from "../../../core";
|
26
|
-
|
27
|
-
export function getXYAxisLabelVal(index, intervalNum, value) {
|
28
|
-
if (index === 0 || index % intervalNum === 0) {
|
29
|
-
return value;
|
30
|
-
} else {
|
31
|
-
return '';
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
/**
|
36
|
-
* 初始化图表与tabs关联的配置数据
|
37
|
-
* @param node 元件节点
|
38
|
-
*/
|
39
|
-
export function initBindTabSetting(node) {
|
40
|
-
const tabStaticKey = node.tags && node.tags.find((tag) => {return tag.includes('switchTabType')});
|
41
|
-
const switchTabData = tabStaticKey && commonStore[node.TID].switchTabDataPool[`${tabStaticKey}Data`];
|
42
|
-
if(switchTabData) {
|
43
|
-
const tabNode = Object.values(switchTabData)[0];
|
44
|
-
const tabEventNode = tabNode.events.find((ev) => {return ev.action === 8});
|
45
|
-
const tabStaticType = tabEventNode && tabEventNode.dcimStaticForType || '';
|
46
|
-
if(node.data.params) node.data.params.staticForType = tabStaticType;
|
47
|
-
return {
|
48
|
-
type: tabStaticType,
|
49
|
-
data: tabNode.tabData
|
50
|
-
};
|
51
|
-
}
|
52
|
-
return null;
|
53
|
-
}
|
54
|
-
|
55
|
-
// 自动滑动展示数据
|
56
|
-
export function setMapAutoMoveOptions(option, chartNode, node, callback) {
|
57
|
-
option.dataZoom = echartsDataRoom;
|
58
|
-
const dataZoomNode = option.dataZoom[0];
|
59
|
-
const {start, end, time} = node.appearance.zoomParams;
|
60
|
-
const zoomStart = Number(start);
|
61
|
-
const zoomEnd = Number(end);
|
62
|
-
const zoomTime = Number(time);
|
63
|
-
dataZoomNode.start = zoomStart;
|
64
|
-
dataZoomNode.end = zoomEnd;
|
65
|
-
chartNode.timeTicket = setInterval(() => {
|
66
|
-
if (Number(dataZoomNode.end) > 100) {
|
67
|
-
dataZoomNode.end = zoomEnd;
|
68
|
-
dataZoomNode.start = zoomStart;
|
69
|
-
} else {
|
70
|
-
dataZoomNode.end = dataZoomNode.end + 1 * (100 / option.series[0].data.length);
|
71
|
-
dataZoomNode.start = dataZoomNode.start + 1 * (100 / option.series[0].data.length);
|
72
|
-
}
|
73
|
-
callback(option);
|
74
|
-
}, zoomTime * 1000);
|
75
|
-
}
|
76
|
-
|
77
|
-
// 停止自动滑动展示数据
|
78
|
-
export function setMapStopAutoMoveOptions(chartNode) {
|
79
|
-
|
80
|
-
clearInterval(chartNode.timeTicket);
|
81
|
-
|
82
|
-
}
|
83
|
-
|
84
|
-
// 自动配置散点图的节点数据
|
85
|
-
export function setMapScatterOptions(option, node) {
|
86
|
-
if(node.appearance.series) {
|
87
|
-
for (let i = 0; i < option.series.length; i++) {
|
88
|
-
const series = option.series[i];
|
89
|
-
const setSeries = node.appearance.series[i];
|
90
|
-
if(setSeries) {
|
91
|
-
series.itemStyle.color = setSeries.itemColor;
|
92
|
-
series.itemStyle.borderColor = setSeries.itemBorderColor;
|
93
|
-
}
|
94
|
-
}
|
95
|
-
}
|
96
|
-
if(node.appearance.yAxis && node.appearance.yAxis.axisLabel && node.appearance.yAxis.axisLabel.length) {
|
97
|
-
const yAxisAxisLabelRich = option.yAxis[0].axisLabel.rich;
|
98
|
-
const yAxisAxisLabel = node.appearance.yAxis.axisLabel;
|
99
|
-
const yAxisData = [];
|
100
|
-
for (let i = 0; i < yAxisAxisLabel.length; i++) {
|
101
|
-
const axisLabel = yAxisAxisLabel[i];
|
102
|
-
yAxisAxisLabelRich[`f${i+1}`] = {
|
103
|
-
color: axisLabel.color
|
104
|
-
};
|
105
|
-
if(axisLabel.label) yAxisData.push(axisLabel.label);
|
106
|
-
}
|
107
|
-
option.yAxis[0].data = yAxisData;
|
108
|
-
}
|
109
|
-
}
|
110
|
-
|
111
|
-
// 自动配置折线和柱状图的节点数据
|
112
|
-
export function setMapLineBarOptions(option, node) {
|
113
|
-
option.color = node.appearance.color;
|
114
|
-
option.xAxis[0].axisLabel.formatter = function (value, index) {
|
115
|
-
return getXYAxisLabelVal(index, node.appearance.intervalNumX, value);
|
116
|
-
}
|
117
|
-
option.yAxis[0].axisLabel.formatter = function (value, index) {
|
118
|
-
return getXYAxisLabelVal(index, node.appearance.intervalNumY, value);
|
119
|
-
}
|
120
|
-
if(option.series.length < 2) return;
|
121
|
-
const total = node.appearance.total;
|
122
|
-
if(total && total.length) {
|
123
|
-
const seriesData = option.series[0].data;
|
124
|
-
if(seriesData.length < total.length && total[total.length - 1].value) seriesData.push(20);
|
125
|
-
const data2 = [];
|
126
|
-
for (let i = 0; i < seriesData.length; i++) {
|
127
|
-
const dr = node.appearance.total[i] ? node.appearance.total[i].value - Number(seriesData[i]) : option.series[1].data[i];
|
128
|
-
data2.push(dr);
|
129
|
-
}
|
130
|
-
option.series[1].data = data2;
|
131
|
-
}else {
|
132
|
-
option.series.map((item, index) => {
|
133
|
-
if(!(item.itemStyle && item.itemStyle.normal && item.itemStyle.normal.color)) {
|
134
|
-
item.itemStyle = {
|
135
|
-
normal: {
|
136
|
-
color : echartsColorData[index]
|
137
|
-
}
|
138
|
-
}
|
139
|
-
}
|
140
|
-
});
|
141
|
-
}
|
142
|
-
// chartOption.yAxis[0].splitLine = node.appearance.splitLine;
|
143
|
-
}
|
144
|
-
|
145
|
-
// 自动配置仪表盘的节点数据
|
146
|
-
export function setMapGaugeOptions(option, node) {
|
147
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
148
|
-
const seriesNode = option.series[0];
|
149
|
-
const appearance = node.appearance;
|
150
|
-
if(!appearance.min) appearance.min = 0;
|
151
|
-
if(!appearance.max) appearance.max = 100;
|
152
|
-
if (typeof appearance.min === 'number') seriesNode.min = appearance.min;
|
153
|
-
if (appearance.max) seriesNode.max = appearance.max;
|
154
|
-
if (appearance.splitNumber) seriesNode.splitNumber = appearance.splitNumber;
|
155
|
-
if (appearance.pointer) seriesNode.pointer = appearance.pointer;
|
156
|
-
if (appearance.axisLabel) seriesNode.axisLabel = appearance.axisLabel;
|
157
|
-
if (appearance.axisLine) seriesNode.axisLine.lineStyle = appearance.axisLine.lineStyle;
|
158
|
-
if (appearance.detail) seriesNode.detail = appearance.detail;
|
159
|
-
if (appearance.data) seriesNode.data = appearance.data;
|
160
|
-
if (appearance.detail) seriesNode.detail = appearance.detail;
|
161
|
-
if (appearance.data) seriesNode.data = appearance.data;
|
162
|
-
if (option.isGaugeLinear) {
|
163
|
-
seriesNode.axisLine.lineStyle.color = [
|
164
|
-
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, option.linearColors)]
|
165
|
-
]
|
166
|
-
}
|
167
|
-
}
|
168
|
-
|
169
|
-
// 自动配置环形图和饼图的节点数据
|
170
|
-
export function setMapRingOptions(option, node) {
|
171
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
172
|
-
const appearance = node.appearance;
|
173
|
-
if(appearance.type === 'ringPre'){
|
174
|
-
//环形‘设备告警统计图’节点展示配置
|
175
|
-
setRingPreSeriesOptions(option, appearance);
|
176
|
-
|
177
|
-
}else if(appearance.type === 'ringPro'){
|
178
|
-
//环形‘内存、硬盘、CPU指标占比统计’节点展示配置
|
179
|
-
setRingProSeriesOptions(option, appearance);
|
180
|
-
|
181
|
-
}else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
|
182
|
-
// 3D饼图配置
|
183
|
-
option.backgroundColor = appearance.backgroundColor;
|
184
|
-
option.grid3D = {
|
185
|
-
show: false,
|
186
|
-
top: appearance.grid.top,
|
187
|
-
left: appearance.grid.left,
|
188
|
-
right: appearance.grid.right,
|
189
|
-
bottom: appearance.grid.bottom,
|
190
|
-
viewControl: {
|
191
|
-
alpha: appearance.grid.alpha, //角度
|
192
|
-
distance: appearance.grid.distance, //调整视角到主体的距离,类似调整zoom
|
193
|
-
rotateSensitivity: 0, //设置为0无法旋转
|
194
|
-
zoomSensitivity: 0, //设置为0无法缩放
|
195
|
-
panSensitivity: 0, //设置为0无法平移
|
196
|
-
autoRotate: false, //自动旋转
|
197
|
-
}
|
198
|
-
};
|
199
|
-
if(appearance.grid.beta) option.grid3D.viewControl.beta = appearance.grid.beta;
|
200
|
-
Object.assign(option.legend, appearance.legend);
|
201
|
-
if(appearance.labelLine && appearance.labelLine.show) set3DPieLabelLine(option, appearance.labelLine, node.TID, node.id);
|
202
|
-
if(appearance.legendTextStyle) {
|
203
|
-
const {fontSize, align, color, width, data} = appearance.legendTextStyle;
|
204
|
-
const rich = {
|
205
|
-
a: {
|
206
|
-
color,
|
207
|
-
width
|
208
|
-
}
|
209
|
-
}
|
210
|
-
for (let i = 0; i < data.length; i++) {
|
211
|
-
rich[`b${i}`] = data[i];
|
212
|
-
}
|
213
|
-
option.legend.textStyle = {
|
214
|
-
fontSize,
|
215
|
-
align,
|
216
|
-
rich
|
217
|
-
}
|
218
|
-
}
|
219
|
-
}else {
|
220
|
-
// 基础图表的配置
|
221
|
-
const seriesNode = option.series[0];
|
222
|
-
if ((!appearance.label || typeof appearance.label.showValue !== 'boolean')) {
|
223
|
-
appearance.label = {
|
224
|
-
showValue: appearance.type === 'ring',
|
225
|
-
unit: appearance.type === 'ring' ? '%' : ''
|
226
|
-
}
|
227
|
-
}
|
228
|
-
seriesNode.label = {
|
229
|
-
normal: {
|
230
|
-
show: true,
|
231
|
-
position: 'outside',
|
232
|
-
color: appearance.label.color || '',
|
233
|
-
fontSize: appearance.label.fontSize || '12'
|
234
|
-
}
|
235
|
-
};
|
236
|
-
|
237
|
-
seriesNode.labelLine = appearance.labelLine && {...appearance.labelLine} || {};
|
238
|
-
|
239
|
-
if(seriesNode.labelLine.lineStyle && !seriesNode.labelLine.lineStyle.color) {
|
240
|
-
delete seriesNode.labelLine.lineStyle['color'];
|
241
|
-
}
|
242
|
-
|
243
|
-
const rich = {};
|
244
|
-
|
245
|
-
if(appearance.cir && appearance.cir.show) {
|
246
|
-
rich.cir = {...appearance.cir};
|
247
|
-
if(!rich.cir.borderColor) rich.cir.borderColor = 'auto';
|
248
|
-
if(!rich.cir.backgroundColor) rich.cir.backgroundColor = 'transparent';
|
249
|
-
}
|
250
|
-
|
251
|
-
if(appearance.labelDetail && appearance.labelDetail.length) {
|
252
|
-
// 环形明细展示配置,线条样式配置
|
253
|
-
rich.a = {
|
254
|
-
color: appearance.label.color || '',
|
255
|
-
fontSize: appearance.label.fontSize || '12'
|
256
|
-
};
|
257
|
-
for (let i = 0; i < appearance.labelDetail.length; i++) {
|
258
|
-
const detail = appearance.labelDetail[i];
|
259
|
-
rich[`b${i+1}`] = {
|
260
|
-
color: detail.color,
|
261
|
-
fontSize: detail.fontSize || '12'
|
262
|
-
};
|
263
|
-
}
|
264
|
-
}
|
265
|
-
seriesNode.label.normal.rich = rich;
|
266
|
-
}
|
267
|
-
}
|
268
|
-
|
269
|
-
function getItemNode(color, fontSize, fontWeight, padding) {
|
270
|
-
return {
|
271
|
-
color,
|
272
|
-
fontSize,
|
273
|
-
fontWeight,
|
274
|
-
padding
|
275
|
-
}
|
276
|
-
}
|
277
|
-
|
278
|
-
// 设置3D饼图引线样式
|
279
|
-
function set3DPieLabelLine(option, labelLine, TID, id){
|
280
|
-
const rich = {};
|
281
|
-
const { data, color, lengthWidth, startAngle, clockwise, center, radius } = labelLine;
|
282
|
-
const lineData = [];
|
283
|
-
for (let i = 0; i < data.length; i ++){
|
284
|
-
const {
|
285
|
-
length,
|
286
|
-
length2,
|
287
|
-
nameFontSize,
|
288
|
-
nameFontWeight,
|
289
|
-
nameColor,
|
290
|
-
namePadding,
|
291
|
-
valueFontSize,
|
292
|
-
valueFontWeight,
|
293
|
-
valueColor,
|
294
|
-
valuePadding,
|
295
|
-
unitFontSize,
|
296
|
-
unitFontWeight,
|
297
|
-
unitColor,
|
298
|
-
unitPadding
|
299
|
-
} = data[i];
|
300
|
-
rich[`name${i+1}`] = getItemNode(nameColor, nameFontSize, nameFontWeight, namePadding);
|
301
|
-
rich[`unit${i+1}`] = getItemNode(unitColor, unitFontSize, unitFontWeight, unitPadding);
|
302
|
-
rich[`value${i+1}`] = getItemNode(valueColor, valueFontSize, valueFontWeight, valuePadding);
|
303
|
-
lineData.push({
|
304
|
-
minTurnAngle: 90,
|
305
|
-
length: length,
|
306
|
-
length2: length2,
|
307
|
-
lineStyle: {
|
308
|
-
width: lengthWidth
|
309
|
-
}
|
310
|
-
})
|
311
|
-
}
|
312
|
-
commonStore[TID].echartsDataPool[id].labelLineData = {
|
313
|
-
name: 'pie2d',
|
314
|
-
type: 'pie',
|
315
|
-
hoverAnimation: false,
|
316
|
-
label: {
|
317
|
-
opacity: 1,
|
318
|
-
color,
|
319
|
-
rich
|
320
|
-
},
|
321
|
-
startAngle, //起始角度,支持范围[0, 360]。
|
322
|
-
clockwise, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
323
|
-
radius, // 两个值设置成相同的,环形就隐藏了
|
324
|
-
center, //指示线的位置
|
325
|
-
data: lineData
|
326
|
-
};
|
327
|
-
}
|
328
|
-
|
329
|
-
// 自动配置3D柱状图的节点数据
|
330
|
-
export function setMap3dBarOptions(option, node) {
|
331
|
-
// 取消注册自定义形状
|
332
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
333
|
-
const seriesNode = option.series[0];
|
334
|
-
const appearance = node.appearance;
|
335
|
-
if (appearance.seriesCubeLeftLinear) appearance.seriesCubeLeftColor = 'rgb(0, 128, 215)';
|
336
|
-
if (appearance.seriesCubeRightLinear) appearance.seriesCubeRightColor = 'rgb(3, 58, 125)';
|
337
|
-
if (appearance.graphicShape) {
|
338
|
-
const {CubeLeft, CubeRight, CubeTop} = drawGraphicShape(appearance);
|
339
|
-
// 注册三个面图形
|
340
|
-
echarts.graphic.registerShape('CubeLeft', CubeLeft);
|
341
|
-
echarts.graphic.registerShape('CubeRight', CubeRight);
|
342
|
-
echarts.graphic.registerShape('CubeTop', CubeTop);
|
343
|
-
}
|
344
|
-
option.tooltip.formatter = function (params) {
|
345
|
-
const item = params[0];
|
346
|
-
return item.name + ' : ' + item.value;
|
347
|
-
}
|
348
|
-
}
|
349
|
-
|
350
|
-
function renderMap3dBarSeriesItem(seriesNode, appearance) {
|
351
|
-
seriesNode.renderItem = (params, api) => {
|
352
|
-
const seriesRenderData = setSeriesRenderGroup(appearance, api);
|
353
|
-
return {
|
354
|
-
type: 'group',
|
355
|
-
children: seriesRenderData,
|
356
|
-
};
|
357
|
-
};
|
358
|
-
}
|
359
|
-
|
360
|
-
export function setMapTopOptions(option, node) {
|
361
|
-
//const chartOption = JSON.parse(JSON.stringify(option));
|
362
|
-
const appearance = node.appearance;
|
363
|
-
Object.assign(option.grid, appearance.grid);
|
364
|
-
if(!appearance.type.includes('TOPRanking')) return;
|
365
|
-
const yNode = option.yAxis[0];
|
366
|
-
if(yNode.axisLabel.rich['a1']) return;
|
367
|
-
for (let i = 0, length = yNode.data.length; i < length; i++) {
|
368
|
-
const order = i + 1;
|
369
|
-
yNode.axisLabel.rich[`a${order}`] = {
|
370
|
-
width: 30,
|
371
|
-
height: 17,
|
372
|
-
lineHeight: 22,
|
373
|
-
verticalAlign: 'bottom',
|
374
|
-
backgroundColor: {
|
375
|
-
image: `../../../images/TOP/NO-${order}-${rankingTopImageName[i]}.png`
|
376
|
-
}
|
377
|
-
}
|
378
|
-
}
|
379
|
-
}
|
380
|
-
|
381
|
-
/**
|
382
|
-
* 公共配置
|
383
|
-
* @param option 图表配置数据
|
384
|
-
* @param node 元件数据
|
385
|
-
*/
|
386
|
-
export function setMapGlobalOptions(option, node) {
|
387
|
-
// const chartOption = JSON.parse(JSON.stringify(option));
|
388
|
-
const appearance = node.appearance;
|
389
|
-
// 图表网格数据
|
390
|
-
if (appearance.grid && !appearance.grid.distance) {
|
391
|
-
|
392
|
-
option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
|
393
|
-
|
394
|
-
}
|
395
|
-
// 图表X轴数据
|
396
|
-
if (option.xAxis) setChartXAxisData(option.xAxis, appearance);
|
397
|
-
// 图表Y轴数据
|
398
|
-
if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
|
399
|
-
// 图表图例数据
|
400
|
-
if (appearance.legend) setChartLegendData(option.legend, appearance);
|
401
|
-
// 曲线样式数据
|
402
|
-
if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
|
403
|
-
}
|
404
|
-
|
405
|
-
// 实时改变图表data值
|
406
|
-
export function setMapDataOptions(option, node) {
|
407
|
-
const currentStore = commonStore[node.TID];
|
408
|
-
let optionNode = currentStore.echartsOptionsPool[node.id].option;
|
409
|
-
const appearance = node.appearance;
|
410
|
-
const params = node.params;
|
411
|
-
// 3d 柱状图
|
412
|
-
if (appearance.type === '3dBar') renderMap3dBarSeriesItem(optionNode.series[0], appearance);
|
413
|
-
const displayMode = parseInt(option.displayMode); // 图表类型
|
414
|
-
const staticForType = params && params.staticForType || ''; //统计类型:日,周,月,年,实时,其他
|
415
|
-
const syncEchartsData = commonStore[node.TID].echartsRealDataPool[node.id]; // 统计图实时数据
|
416
|
-
let staticTypeData = null; // 统计类型数据
|
417
|
-
if(staticForType === 'OTHER'){
|
418
|
-
// 其他类型,类型中的数据通常统计的都是历史数据,日、周、月、年、实时中的某一类,通常搭配分组统计使用。
|
419
|
-
// 类型中绑定一个测点为一个类型,绑定多个测点为多个类型。比如:有电功率和功率因数为两个分类,图表分组中分类数据绑定时就要同时绑定有电功率和功率因数两个测点,否则无法实现切换
|
420
|
-
for (let i = 0 ; i < echartsStaticType.length; i++) {
|
421
|
-
const chartData = syncEchartsData && syncEchartsData[`${echartsStaticType[i]}_Data`];
|
422
|
-
if(chartData) staticTypeData = chartData;
|
423
|
-
}
|
424
|
-
}else {
|
425
|
-
// 日,周,月,年,实时类型,不与分组统计一起使用
|
426
|
-
staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
|
427
|
-
}
|
428
|
-
let dataDictionary = {};
|
429
|
-
// 实时数据加载
|
430
|
-
if(staticTypeData) {
|
431
|
-
|
432
|
-
if (displayMode === 1 || displayMode === 2) { // 折线图,柱状图
|
433
|
-
|
434
|
-
if(node.tabData && node.tabData.data.state && optionNode.yAxis[0].max) Object.assign(optionNode.yAxis[0], node.tabData.data); //若Tabs切换配置了数据,则修改Y轴原有配置
|
435
|
-
|
436
|
-
if(appearance.type === 'barPileStatic') {
|
437
|
-
|
438
|
-
barPileStaticDataAuto(optionNode, staticTypeData, appearance);
|
439
|
-
|
440
|
-
}else {
|
441
|
-
|
442
|
-
lineBarDataAuto(optionNode, params, staticTypeData, appearance);
|
443
|
-
|
444
|
-
}
|
445
|
-
|
446
|
-
}
|
447
|
-
if(displayMode === 4) { // top排行榜-电量仪
|
448
|
-
|
449
|
-
topRankingListAuto(optionNode, staticTypeData, appearance);
|
450
|
-
|
451
|
-
}
|
452
|
-
if(displayMode === 7) { // 散点图
|
453
|
-
|
454
|
-
scatterDataAuto(optionNode, staticTypeData);
|
455
|
-
|
456
|
-
}
|
457
|
-
if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
|
458
|
-
const pieData = staticTypeData && staticTypeData.data || staticTypeData || [];
|
459
|
-
if(appearance.type === 'ringPre') {
|
460
|
-
// 按照资产总台数统计设备告警数量
|
461
|
-
pieRingAssetTotalAuto(optionNode, pieData, appearance.total, appearance.alarmCount);
|
462
|
-
|
463
|
-
}else if(appearance.type === 'ringPro'){
|
464
|
-
// 按照百分比统计设备配置情况
|
465
|
-
pieRingProportionAuto(optionNode, pieData, appearance.proportion);
|
466
|
-
|
467
|
-
}else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
|
468
|
-
for (let i = 0; i < pieData.length; i++){
|
469
|
-
pieData[i].itemOpacity = 0.9;
|
470
|
-
pieData[i].itemColor = appearance.chartData[i] && appearance.chartData[i].itemColor || echartsColorData[i];
|
471
|
-
}
|
472
|
-
// 3D饼图图例更新
|
473
|
-
const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
|
474
|
-
dataDictionary = set3DPieOptions(optionNode, appearance, labelLineData, pieData);
|
475
|
-
|
476
|
-
}else {
|
477
|
-
|
478
|
-
pieRingNormalAuto(optionNode, pieData);
|
479
|
-
|
480
|
-
}
|
481
|
-
}
|
482
|
-
if(displayMode === 6) { // 仪表盘
|
483
|
-
|
484
|
-
gaugeNormalAuto(optionNode, staticTypeData);
|
485
|
-
|
486
|
-
}
|
487
|
-
}else {
|
488
|
-
if(option.title && option.title.text) {
|
489
|
-
optionNode.title.text = option.title.text;
|
490
|
-
}
|
491
|
-
if (option.legend) {
|
492
|
-
optionNode.legend = option.legend;
|
493
|
-
} else {
|
494
|
-
delete optionNode['legend'];
|
495
|
-
}
|
496
|
-
if (option.xAxis) {
|
497
|
-
for (let i = 0; i < option.xAxis.length; i++) {
|
498
|
-
const item = option.xAxis[i];
|
499
|
-
if (item.data) {
|
500
|
-
optionNode.xAxis[i].data = item.data;
|
501
|
-
}
|
502
|
-
}
|
503
|
-
}
|
504
|
-
if (option.yAxis) {
|
505
|
-
for (let i = 0; i < option.yAxis.length; i++) {
|
506
|
-
const item = option.yAxis[i];
|
507
|
-
if (item.data) {
|
508
|
-
optionNode.yAxis[i].data = item.data;
|
509
|
-
}
|
510
|
-
}
|
511
|
-
}
|
512
|
-
if(option.series[0].pieData) {
|
513
|
-
// 3D饼图图例初始化
|
514
|
-
const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
|
515
|
-
dataDictionary = set3DPieOptions(option, appearance, labelLineData);
|
516
|
-
optionNode = option;
|
517
|
-
}else {
|
518
|
-
if (option.series) {
|
519
|
-
for (let i = 0; i < option.series.length; i++) {
|
520
|
-
const item = option.series[i];
|
521
|
-
if(item.name) optionNode.series[i].name = item.name;
|
522
|
-
optionNode.series[i].data = item.data;
|
523
|
-
}
|
524
|
-
}
|
525
|
-
}
|
526
|
-
}
|
527
|
-
|
528
|
-
mapFormatterSet(appearance, optionNode, staticTypeData, dataDictionary);
|
529
|
-
|
530
|
-
const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
|
531
|
-
const mapChart = currentChartNode.chart;
|
532
|
-
clearInterval(currentChartNode.timeTicket);
|
533
|
-
currentChartNode.timeTicket = null;
|
534
|
-
// 自动滑动展示数据
|
535
|
-
if (appearance.timeTicket) {
|
536
|
-
mapChart.off('mouseover');
|
537
|
-
mapChart.off('mouseout');
|
538
|
-
mapChart.on('mouseover', function () {
|
539
|
-
setMapStopAutoMoveOptions(currentChartNode);
|
540
|
-
});
|
541
|
-
mapChart.on('mouseout', function () {
|
542
|
-
setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
|
543
|
-
return mapChart.setOption(chartNode);
|
544
|
-
})
|
545
|
-
});
|
546
|
-
setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
|
547
|
-
return mapChart.setOption(chartNode);
|
548
|
-
})
|
549
|
-
}
|
550
|
-
// 鼠标hover状态,用于3D饼图
|
551
|
-
if(appearance.mouseHoverState) {
|
552
|
-
mapChart.off('mouseover');
|
553
|
-
mapChart.off('globalout');
|
554
|
-
let type = appearance.type.includes('pie') ? 'pie' : 'ring';
|
555
|
-
set3DPieMouseHover(mapChart, type, option, appearance.seriesStyleData);
|
556
|
-
}
|
557
|
-
mapChart.setOption(optionNode);
|
558
|
-
mapChart.resize();
|
559
|
-
}
|
@@ -1,97 +0,0 @@
|
|
1
|
-
// 绘制柱子切面
|
2
|
-
export function drawGraphicShape(appearance) {
|
3
|
-
const offsetX = appearance.offsetX;
|
4
|
-
const offsetY = appearance.offsetY;
|
5
|
-
// 绘制左侧面
|
6
|
-
const CubeLeft = echarts.graphic.extendShape({
|
7
|
-
shape: {
|
8
|
-
x: 0,
|
9
|
-
y: 0,
|
10
|
-
},
|
11
|
-
buildPath: function (ctx, shape) {
|
12
|
-
// 会canvas的应该都能看得懂,shape是从custom传入的
|
13
|
-
const xAxisPoint = shape.xAxisPoint;
|
14
|
-
// console.log(shape);
|
15
|
-
const c0 = [shape.x, shape.y];
|
16
|
-
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
17
|
-
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
18
|
-
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
19
|
-
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
20
|
-
},
|
21
|
-
});
|
22
|
-
// 绘制右侧面
|
23
|
-
const CubeRight = echarts.graphic.extendShape({
|
24
|
-
shape: {
|
25
|
-
x: 0,
|
26
|
-
y: 0,
|
27
|
-
},
|
28
|
-
buildPath: function (ctx, shape) {
|
29
|
-
const xAxisPoint = shape.xAxisPoint;
|
30
|
-
const c1 = [shape.x, shape.y];
|
31
|
-
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
32
|
-
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
33
|
-
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
34
|
-
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
35
|
-
},
|
36
|
-
});
|
37
|
-
// 绘制顶面
|
38
|
-
const CubeTop = echarts.graphic.extendShape({
|
39
|
-
shape: {
|
40
|
-
x: 0,
|
41
|
-
y: 0,
|
42
|
-
},
|
43
|
-
buildPath: function (ctx, shape) {
|
44
|
-
const c1 = [shape.x, shape.y];
|
45
|
-
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
46
|
-
const c3 = [shape.x, shape.y - offsetX];
|
47
|
-
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
48
|
-
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
49
|
-
},
|
50
|
-
});
|
51
|
-
return {
|
52
|
-
CubeLeft,
|
53
|
-
CubeRight,
|
54
|
-
CubeTop
|
55
|
-
}
|
56
|
-
}
|
57
|
-
// 线性渐变
|
58
|
-
export function graphicLinearGradient(nr, nb, nl, nt, colors) {
|
59
|
-
return new echarts.graphic.LinearGradient(nr, nb, nl, nt, colors);
|
60
|
-
}
|
61
|
-
export function setSeriesRenderGroup(appearance, api) {
|
62
|
-
const seriesRenderData = [];
|
63
|
-
const groupTypeData = ['CubeLeft', 'CubeRight', 'CubeTop'];
|
64
|
-
const location = api.coord([api.value(0), api.value(1)]);
|
65
|
-
for (let i = 0; i < groupTypeData.length; i++) {
|
66
|
-
const groupItem = groupTypeData[i];
|
67
|
-
const groupNode = {
|
68
|
-
type: groupItem,
|
69
|
-
shape: {
|
70
|
-
api,
|
71
|
-
xValue: api.value(0),
|
72
|
-
yValue: api.value(1),
|
73
|
-
x: location[0],
|
74
|
-
y: location[1],
|
75
|
-
xAxisPoint: api.coord([api.value(0), 0]),
|
76
|
-
}
|
77
|
-
};
|
78
|
-
if(i === groupTypeData.length - 1){
|
79
|
-
// 顶部切面颜色填充
|
80
|
-
groupNode.style = {
|
81
|
-
fill: appearance.seriesCubeTopColor
|
82
|
-
}
|
83
|
-
}else {
|
84
|
-
// 左右切面颜色填充
|
85
|
-
let fillColor = graphicLinearGradient(0, 0, 0, 1, appearance[`series${groupItem}Gradient`]);
|
86
|
-
const cubeColorLinear = appearance[`series${groupItem}Linear`];
|
87
|
-
if(!cubeColorLinear) {
|
88
|
-
fillColor = appearance[`series${groupItem}Color`];
|
89
|
-
}
|
90
|
-
groupNode.style = {
|
91
|
-
fill: fillColor
|
92
|
-
}
|
93
|
-
}
|
94
|
-
seriesRenderData.push(groupNode);
|
95
|
-
}
|
96
|
-
return seriesRenderData;
|
97
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare function mapFormatterSet(appearance: object, option: any, data: any, dataDictionary: any): void;
|