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.
Files changed (215) hide show
  1. package/activity-diagram/src/final/final.d.ts +1 -1
  2. package/activity-diagram/src/final/final.rect.d.ts +1 -1
  3. package/activity-diagram/src/final/final.rect.js +1 -1
  4. package/activity-diagram/src/fork/fork.anchor.d.ts +1 -1
  5. package/activity-diagram/src/fork/fork.anchor.js +1 -1
  6. package/activity-diagram/src/fork/fork.d.ts +1 -1
  7. package/activity-diagram/src/fork/fork.rect.d.ts +1 -1
  8. package/activity-diagram/src/fork/fork.rect.js +1 -1
  9. package/activity-diagram/src/register.js +1 -1
  10. package/activity-diagram/src/swimlaneH/swimlaneH.d.ts +1 -1
  11. package/activity-diagram/src/swimlaneH/swimlaneH.rect.d.ts +1 -1
  12. package/activity-diagram/src/swimlaneH/swimlaneH.rect.js +1 -1
  13. package/activity-diagram/src/swimlaneV/swimlaneV.d.ts +1 -1
  14. package/activity-diagram/src/swimlaneV/swimlaneV.rect.d.ts +1 -1
  15. package/activity-diagram/src/swimlaneV/swimlaneV.rect.js +1 -1
  16. package/chart-diagram/index.d.ts +1 -3
  17. package/chart-diagram/index.js +1 -2
  18. package/chart-diagram/src/echarts/index.d.ts +2 -1
  19. package/chart-diagram/src/echarts/index.js +104 -109
  20. package/chart-diagram/src/register.js +8 -9
  21. package/class-diagram/src/class/class.d.ts +1 -1
  22. package/class-diagram/src/class/class.rect.d.ts +1 -1
  23. package/class-diagram/src/class/class.rect.js +1 -1
  24. package/class-diagram/src/register.js +1 -1
  25. package/core/index.d.ts +0 -2
  26. package/core/index.js +0 -2
  27. package/core/src/activeLayer.d.ts +10 -2
  28. package/core/src/activeLayer.js +47 -42
  29. package/core/src/animateLayer.d.ts +7 -3
  30. package/core/src/animateLayer.js +12 -10
  31. package/core/src/calling.d.ts +4 -1
  32. package/core/src/calling.js +41 -43
  33. package/core/src/canvas.d.ts +6 -1
  34. package/core/src/canvas.js +21 -22
  35. package/core/src/common.d.ts +7 -6
  36. package/core/src/common.js +674 -341
  37. package/core/src/core.d.ts +4 -5
  38. package/core/src/core.js +385 -522
  39. package/core/src/divLayer.d.ts +36 -2
  40. package/core/src/divLayer.js +305 -33
  41. package/core/src/healps/changeData.d.ts +2 -1
  42. package/core/src/healps/changeData.js +66 -32
  43. package/core/src/hoverLayer.d.ts +9 -2
  44. package/core/src/hoverLayer.js +34 -31
  45. package/core/src/middles/default.d.ts +3 -1
  46. package/core/src/middles/default.js +51 -59
  47. package/core/src/middles/index.js +2 -3
  48. package/core/src/middles/nodes/arbitrarygraph.js +9 -11
  49. package/core/src/middles/nodes/pentagon.rect.js +1 -1
  50. package/core/src/middles/nodes/rectangle.rect.js +1 -1
  51. package/core/src/models/data.d.ts +26 -0
  52. package/core/src/models/data.js +77 -0
  53. package/core/src/models/data.js.map +1 -0
  54. package/core/src/models/index.d.ts +1 -0
  55. package/core/src/models/index.js +1 -0
  56. package/core/src/models/node.d.ts +0 -10
  57. package/core/src/models/node.js +36 -81
  58. package/core/src/models/pen.js +59 -19
  59. package/core/src/models/rect.js +2 -2
  60. package/core/src/mqtt.d.ts +14 -0
  61. package/core/src/mqtt.js +82 -0
  62. package/core/src/mqtt.js.map +1 -0
  63. package/core/src/offscreen.d.ts +4 -1
  64. package/core/src/offscreen.js +8 -10
  65. package/core/src/options.d.ts +1 -3
  66. package/core/src/options.js +0 -2
  67. package/core/src/poll.js +39 -0
  68. package/core/src/preview.d.ts +13 -2
  69. package/core/src/preview.js +43 -135
  70. package/core/src/renderLayer.d.ts +9 -11
  71. package/core/src/renderLayer.js +61 -60
  72. package/core/src/socket.d.ts +10 -0
  73. package/core/src/socket.js +51 -0
  74. package/core/src/socket.js.map +1 -0
  75. package/core/src/utils/canvas.js +1 -1
  76. package/core/src/utils/construction.d.ts +3 -12
  77. package/core/src/utils/construction.js +1 -8
  78. package/core/src/utils/conversion.d.ts +0 -13
  79. package/core/src/utils/conversion.js +0 -210
  80. package/core/src/utils/dom.d.ts +8 -0
  81. package/core/src/utils/dom.js +67 -0
  82. package/core/src/utils/dom.js.map +1 -0
  83. package/core/src/utils/index.d.ts +1 -2
  84. package/core/src/utils/index.js +1 -2
  85. package/core/src/utils/math.d.ts +0 -1
  86. package/core/src/utils/math.js +0 -3
  87. package/core/src/utils/onmousevent.d.ts +0 -3
  88. package/core/src/utils/onmousevent.js +10 -42
  89. package/flow-diagram/src/comment/comment.anchor.d.ts +1 -1
  90. package/flow-diagram/src/comment/comment.anchor.js +1 -1
  91. package/flow-diagram/src/comment/comment.d.ts +1 -1
  92. package/flow-diagram/src/data/data.anchor.d.ts +1 -1
  93. package/flow-diagram/src/data/data.anchor.js +1 -1
  94. package/flow-diagram/src/data/data.d.ts +1 -1
  95. package/flow-diagram/src/data/data.rect.d.ts +1 -1
  96. package/flow-diagram/src/data/data.rect.js +1 -1
  97. package/flow-diagram/src/db/db.d.ts +1 -1
  98. package/flow-diagram/src/db/db.rect.d.ts +1 -1
  99. package/flow-diagram/src/db/db.rect.js +1 -1
  100. package/flow-diagram/src/display/display.anchor.d.ts +1 -1
  101. package/flow-diagram/src/display/display.anchor.js +1 -1
  102. package/flow-diagram/src/display/display.d.ts +1 -1
  103. package/flow-diagram/src/display/display.rect.d.ts +1 -1
  104. package/flow-diagram/src/display/display.rect.js +1 -1
  105. package/flow-diagram/src/document/document.anchor.d.ts +1 -1
  106. package/flow-diagram/src/document/document.anchor.js +1 -1
  107. package/flow-diagram/src/document/document.d.ts +1 -1
  108. package/flow-diagram/src/document/document.rect.d.ts +1 -1
  109. package/flow-diagram/src/document/document.rect.js +1 -1
  110. package/flow-diagram/src/externStorage/externStorage.anchor.d.ts +1 -1
  111. package/flow-diagram/src/externStorage/externStorage.anchor.js +1 -1
  112. package/flow-diagram/src/externStorage/externStorage.d.ts +1 -1
  113. package/flow-diagram/src/externStorage/externStorage.rect.d.ts +1 -1
  114. package/flow-diagram/src/externStorage/externStorage.rect.js +1 -1
  115. package/flow-diagram/src/internalStorage/internalStorage.d.ts +1 -1
  116. package/flow-diagram/src/internalStorage/internalStorage.rect.d.ts +1 -1
  117. package/flow-diagram/src/internalStorage/internalStorage.rect.js +1 -1
  118. package/flow-diagram/src/manually/manually.anchor.d.ts +1 -1
  119. package/flow-diagram/src/manually/manually.anchor.js +1 -1
  120. package/flow-diagram/src/manually/manually.d.ts +1 -1
  121. package/flow-diagram/src/manually/manually.rect.d.ts +1 -1
  122. package/flow-diagram/src/manually/manually.rect.js +1 -1
  123. package/flow-diagram/src/parallel/parallel.anchor.d.ts +1 -1
  124. package/flow-diagram/src/parallel/parallel.anchor.js +1 -1
  125. package/flow-diagram/src/parallel/parallel.d.ts +1 -1
  126. package/flow-diagram/src/queue/queue.d.ts +1 -1
  127. package/flow-diagram/src/queue/queue.rect.d.ts +1 -1
  128. package/flow-diagram/src/queue/queue.rect.js +1 -1
  129. package/flow-diagram/src/register.js +1 -1
  130. package/flow-diagram/src/subprocess/subprocess.d.ts +1 -1
  131. package/flow-diagram/src/subprocess/subprocess.rect.d.ts +1 -1
  132. package/flow-diagram/src/subprocess/subprocess.rect.js +1 -1
  133. package/layout/src/align.d.ts +1 -1
  134. package/layout/src/align.js +1 -1
  135. package/layout/src/layout.d.ts +1 -1
  136. package/layout/src/layout.js +1 -1
  137. package/myShape-diagram/{index.js → myShape.js} +1 -4
  138. package/package.json +1 -1
  139. package/sequence-diagram/src/focus/focus.anchor.d.ts +1 -1
  140. package/sequence-diagram/src/focus/focus.anchor.js +1 -1
  141. package/sequence-diagram/src/focus/focus.d.ts +1 -1
  142. package/sequence-diagram/src/focus/focus.rect.d.ts +1 -1
  143. package/sequence-diagram/src/focus/focus.rect.js +1 -1
  144. package/sequence-diagram/src/lifeline/lifeline.anchor.d.ts +1 -1
  145. package/sequence-diagram/src/lifeline/lifeline.anchor.js +1 -1
  146. package/sequence-diagram/src/lifeline/lifeline.d.ts +1 -1
  147. package/sequence-diagram/src/lifeline/lifeline.rect.d.ts +1 -1
  148. package/sequence-diagram/src/lifeline/lifeline.rect.js +1 -1
  149. package/sequence-diagram/src/register.js +1 -1
  150. package/chart-diagram/src/utils/changeOptions.d.ts +0 -8
  151. package/chart-diagram/src/utils/changeOptions.js +0 -267
  152. package/chart-diagram/src/utils/conversion.d.ts +0 -19
  153. package/chart-diagram/src/utils/conversion.js +0 -559
  154. package/chart-diagram/src/utils/drawGraphic.d.ts +0 -3
  155. package/chart-diagram/src/utils/drawGraphic.js +0 -97
  156. package/chart-diagram/src/utils/formatter.d.ts +0 -1
  157. package/chart-diagram/src/utils/formatter.js +0 -206
  158. package/chart-diagram/src/utils/index.d.ts +0 -5
  159. package/chart-diagram/src/utils/index.js +0 -5
  160. package/chart-diagram/src/utils/render.d.ts +0 -8
  161. package/chart-diagram/src/utils/render.js +0 -219
  162. package/chart-diagram/src/utils/surfaceParametricConversion.d.ts +0 -3
  163. package/chart-diagram/src/utils/surfaceParametricConversion.js +0 -252
  164. package/core/src/element/common.d.ts +0 -6
  165. package/core/src/element/common.js +0 -54
  166. package/core/src/element/datePicker.d.ts +0 -3
  167. package/core/src/element/datePicker.js +0 -47
  168. package/core/src/element/iframe.d.ts +0 -3
  169. package/core/src/element/iframe.js +0 -12
  170. package/core/src/element/index.d.ts +0 -5
  171. package/core/src/element/index.js +0 -6
  172. package/core/src/element/select.d.ts +0 -11
  173. package/core/src/element/select.js +0 -275
  174. package/core/src/element/tab.d.ts +0 -1
  175. package/core/src/element/tab.js +0 -25
  176. package/core/src/element/time.d.ts +0 -3
  177. package/core/src/element/time.js +0 -44
  178. package/core/src/middles/arrows/index.d.ts +0 -4
  179. package/core/src/middles/arrows/index.js +0 -5
  180. package/core/src/middles/lines/index.d.ts +0 -4
  181. package/core/src/middles/lines/index.js +0 -5
  182. package/core/src/middles/nodes/formDatePicker.d.ts +0 -2
  183. package/core/src/middles/nodes/formDatePicker.js +0 -66
  184. package/core/src/middles/nodes/formoverflow.js +0 -61
  185. package/core/src/middles/nodes/formselect.d.ts +0 -2
  186. package/core/src/middles/nodes/formselect.js +0 -102
  187. package/core/src/middles/nodes/iframe.d.ts +0 -2
  188. package/core/src/middles/nodes/iframe.js +0 -29
  189. package/core/src/middles/nodes/index.d.ts +0 -50
  190. package/core/src/middles/nodes/index.js +0 -52
  191. package/core/src/middles/nodes/time.d.ts +0 -2
  192. package/core/src/middles/nodes/time.js +0 -98
  193. package/core/src/store/common.d.ts +0 -9
  194. package/core/src/store/common.js +0 -5
  195. package/core/src/store/data.d.ts +0 -194
  196. package/core/src/store/data.js +0 -187
  197. package/core/src/store/index.d.ts +0 -2
  198. package/core/src/store/index.js +0 -2
  199. package/core/src/utils/assignment.d.ts +0 -7
  200. package/core/src/utils/assignment.js +0 -185
  201. package/core/src/utils/params.d.ts +0 -2
  202. package/core/src/utils/params.js +0 -65
  203. package/static/echartsDefaultData.js +0 -178
  204. package/static/element.js +0 -14
  205. package/static/form.js +0 -11
  206. package/static/index.js +0 -3
  207. package/store/actions.js +0 -1
  208. package/store/clear.js +0 -10
  209. package/store/index.js +0 -2
  210. package/style/common.css +0 -15
  211. package/style/datePicker.css +0 -44
  212. package/style/editor.css +0 -16
  213. package/style/index.css +0 -5
  214. package/style/select.css +0 -143
  215. /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,3 +0,0 @@
1
- export declare function drawGraphicShape(appearance: any): any;
2
- export declare function graphicLinearGradient(nr: number, nb: number, nl: number, nt: number, colors: []): any;
3
- export declare function setSeriesRenderGroup(appearance: any, api: any): [];
@@ -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;