简柏林 / thingskit-scada · Commits

Commit 44f575d9f489994999ff399b0cea3123c43d4fb8

Authored by xp.Huang
2 parents f5e8fcc4 df08498c

Merge branch 'ww' into 'main' 

feat: implement dashboard chart component

See merge request huang/thingskit-drawio!40
Inline Side-by-side
Showing 6 changed files with 477 additions and 265 deletions
@@ -22,26 +22,26 @@ @@ -22,26 +22,26 @@
22 <meta name="mobile-web-app-capable" content="yes"> 22 <meta name="mobile-web-app-capable" content="yes">
23 <meta name="theme-color" content="#d89000"> 23 <meta name="theme-color" content="#d89000">
24 24
25 - <link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1659336383769"> 25 + <link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1659688272638">
26 26
27 <!-- load configure file --> 27 <!-- load configure file -->
28 - <script src="./js/config/config.js?v=1659336383769"></script> 28 + <script src="./js/config/config.js?v=1659688272638"></script>
29 29
30 <!-- crypto-js --> 30 <!-- crypto-js -->
31 - <script src="./js/plugin/crypto-js/crypto-js.js?v=1659336383769"></script> 31 + <script src="./js/plugin/crypto-js/crypto-js.js?v=1659688272638"></script>
32 32
33 <!-- storage persistent --> 33 <!-- storage persistent -->
34 - <script src="./js/const/persistentStorage.js?v=1659336383769"></script> 34 + <script src="./js/const/persistentStorage.js?v=1659688272638"></script>
35 <!-- Global const --> 35 <!-- Global const -->
36 - <script src="./js/const/const.js?v=1659336383769"></script> 36 + <script src="./js/const/const.js?v=1659688272638"></script>
37 37
38 <!-- Axios --> 38 <!-- Axios -->
39 - <script src="./js/plugin/axios/axios.min.js?v=1659336383769"></script>  
40 - <script src="./js/plugin/axios/DefHttp.js?v=1659336383769"></script>  
41 - <script src="./js/api/index.js?v=1659336383769"></script> 39 + <script src="./js/plugin/axios/axios.min.js?v=1659688272638"></script>
  40 + <script src="./js/plugin/axios/DefHttp.js?v=1659688272638"></script>
  41 + <script src="./js/api/index.js?v=1659688272638"></script>
42 42
43 <!-- load script --> 43 <!-- load script -->
44 - <script src="./js/config/loadScript.js?v=1659336383769"></script> 44 + <script src="./js/config/loadScript.js?v=1659688272638"></script>
45 45
46 <!-- act editor --> 46 <!-- act editor -->
47 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> --> 47 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> -->
@@ -54,7 +54,7 @@ @@ -54,7 +54,7 @@
54 <!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> --> 54 <!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> -->
55 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/video.min.js"></script> --> 55 <!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/video.min.js"></script> -->
56 56
57 - <script src="./js/plugin/layui/layui.js?v=1659336383769"></script> 57 + <script src="./js/plugin/layui/layui.js?v=1659688272638"></script>
58 <!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css" 58 <!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
59 integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ==" 59 integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
60 crossorigin="anonymous" referrerpolicy="no-referrer" /> 60 crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
63 crossorigin="anonymous" referrerpolicy="no-referrer"></script> --> 63 crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
64 64
65 <!-- 引入修改样式 --> 65 <!-- 引入修改样式 -->
66 - <link rel="stylesheet" href="./styles/formatChange.css?v=1659336383769"> 66 + <link rel="stylesheet" href="./styles/formatChange.css?v=1659688272638">
67 67
68 <script type="text/javascript"> 68 <script type="text/javascript">
69 /** 69 /**
@@ -590,7 +590,11 @@ @@ -590,7 +590,11 @@
590 </div> 590 </div>
591 <script> 591 <script>
592 var timeInterval = setInterval(() => { 592 var timeInterval = setInterval(() => {
593 - if (!echarts) return 593 + try {
  594 + if (!echarts) return
  595 + } catch (error) {
  596 +
  597 + }
594 clearInterval(timeInterval) 598 clearInterval(timeInterval)
595 timeInterval = null 599 timeInterval = null
596 var chartDom 600 var chartDom
@@ -622,7 +626,7 @@ @@ -622,7 +626,7 @@
622 lineWidth: 1 626 lineWidth: 1
623 }, 627 },
624 keyframeAnimation: { 628 keyframeAnimation: {
625 - duration: 3000, 629 + duration: 1000,
626 loop: true, 630 loop: true,
627 keyframes: [ 631 keyframes: [
628 { 632 {
@@ -225,6 +225,11 @@ @@ -225,6 +225,11 @@
225 LINE_CHART: 'lineChart', 225 LINE_CHART: 'lineChart',
226 226
227 /** 227 /**
  228 + * @description 仪表盘 类型
  229 + */
  230 + DASHBOARD_CHART: 'dashboardChart',
  231 +
  232 + /**
228 * @description 柱状图类型 233 * @description 柱状图类型
229 */ 234 */
230 BAR_CHART: 'barChart', 235 BAR_CHART: 'barChart',
@@ -255,16 +260,22 @@ @@ -255,16 +260,22 @@
255 SWITCH_VALUE: 'switchValue', 260 SWITCH_VALUE: 'switchValue',
256 261
257 /** 262 /**
  263 + * @description 开关组件 下发值
  264 + */
  265 + SWITCH_SEND_VALUE: 'switchSendValue',
  266 +
  267 + /**
258 * @description 开关组件状态 {true | false | null} 268 * @description 开关组件状态 {true | false | null}
259 */ 269 */
260 - SWITCH_STATE: 'switchState' 270 + SWITCH_STATE: 'switchState',
  271 +
261 } 272 }
262 273
263 Sidebar.prototype.enumComponentTypeValue = { 274 Sidebar.prototype.enumComponentTypeValue = {
264 SWITCH_STATE_ENABLED: 'enabled', 275 SWITCH_STATE_ENABLED: 'enabled',
265 SWITCH_STATE_CLOSE: 'close', 276 SWITCH_STATE_CLOSE: 'close',
266 SWITCH_STATE_NONE: 'none', 277 SWITCH_STATE_NONE: 'none',
267 - } 278 + }
268 279
269 /** 280 /**
270 * @description 组件权限map 281 * @description 组件权限map
@@ -311,6 +322,11 @@ @@ -311,6 +322,11 @@
311 BAR_CHART_EXPAND: 'barChartExpandDataSource', 322 BAR_CHART_EXPAND: 'barChartExpandDataSource',
312 323
313 /** 324 /**
  325 + * @description 仪表图
  326 + */
  327 + DASHBOARD_CHART_EXPAND: 'dashboradChartExpand',
  328 +
  329 + /**
314 * @descripton 交互 330 * @descripton 交互
315 */ 331 */
316 INTERACTION: 'interaction', 332 INTERACTION: 'interaction',
@@ -700,8 +716,8 @@ @@ -700,8 +716,8 @@
700 //更多图形，显示出来的的标题跟id，同时包括图片 716 //更多图形，显示出来的的标题跟id，同时包括图片
701 717
702 // TODO thingsKit 设置数据绑定展示面板 718 // TODO thingsKit 设置数据绑定展示面板
703 - const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING, ONLY_SINGLE_EVENT, RUNNING_AND_STOP } = this.enumPermissionPanel  
704 - const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON } = this.enumComponentType 719 + const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DASHBOARD_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING, ONLY_SINGLE_EVENT, RUNNING_AND_STOP } = this.enumPermissionPanel
  720 + const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON, DASHBOARD_CHART } = this.enumComponentType
705 this.setComponentPermission(LINE, [RUNNING_AND_STOP, DYNAMIC_EFFECT]) 721 this.setComponentPermission(LINE, [RUNNING_AND_STOP, DYNAMIC_EFFECT])
706 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT]) 722 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
707 this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT]) 723 this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
@@ -710,6 +726,7 @@ @@ -710,6 +726,7 @@
710 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT]) 726 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
711 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND]) 727 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
712 this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND]) 728 this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
  729 + this.setComponentPermission(DASHBOARD_CHART, [DATA_SOURCE, DASHBOARD_CHART_EXPAND])
713 this.setComponentPermission(VIDEO, [VIDEO_PANEL]) 730 this.setComponentPermission(VIDEO, [VIDEO_PANEL])
714 this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING]) 731 this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
715 this.setComponentPermission(PARAMS_SETTING_BUTTON, [DATA_SOURCE, ONLY_SINGLE_EVENT]) 732 this.setComponentPermission(PARAMS_SETTING_BUTTON, [DATA_SOURCE, ONLY_SINGLE_EVENT])
@@ -70,6 +70,11 @@ @@ -70,6 +70,11 @@
70 const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.BAR_CHART, `${Proxy_Prefix}/images/thingskit/bar-chart.png`) 70 const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.BAR_CHART, `${Proxy_Prefix}/images/thingskit/bar-chart.png`)
71 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '柱状图'); 71 return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '柱状图');
72 })), 72 })),
  73 + this.addEntry('dashboard chart', mxUtils.bind(this, function () {
  74 + const id = self.generatorChartsId()
  75 + const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.DASHBOARD_CHART, `${Proxy_Prefix}/images/thingskit/dashboard-chart.png`)
  76 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '仪表盘');
  77 + }))
73 ]; 78 ];
74 79
75 this.addPaletteFunctions('charts', '图表', false, fns); 80 this.addPaletteFunctions('charts', '图表', false, fns);
@@ -89,42 +94,13 @@ @@ -89,42 +94,13 @@
89 */ 94 */
90 Sidebar.prototype.chartOptionMapping = { 95 Sidebar.prototype.chartOptionMapping = {
91 [Sidebar.prototype.enumComponentType.LINE_CHART]: function () { 96 [Sidebar.prototype.enumComponentType.LINE_CHART]: function () {
92 - return {  
93 - xAxis: {  
94 - type: 'category',  
95 - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
96 - },  
97 - yAxis: {  
98 - type: 'value',  
99 - },  
100 - series: [  
101 - {  
102 - data: [150, 230, 224, 218, 135, 147, 260],  
103 - type: 'line',  
104 - },  
105 - ],  
106 - } 97 + return getLineChartDefaultOption()
107 }, 98 },
108 [Sidebar.prototype.enumComponentType.BAR_CHART]: function () { 99 [Sidebar.prototype.enumComponentType.BAR_CHART]: function () {
109 - return {  
110 - xAxis: {  
111 - type: 'category',  
112 - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
113 - },  
114 - yAxis: {  
115 - type: 'value',  
116 - },  
117 - series: [  
118 - {  
119 - data: [120, 200, 150, 80, 70, 110, 130],  
120 - type: 'bar',  
121 - showBackground: true,  
122 - backgroundStyle: {  
123 - color: 'rgba(180, 180, 180, 0.2)',  
124 - },  
125 - },  
126 - ],  
127 - }; 100 + return getBarChartDefaultOption();
  101 + },
  102 + [Sidebar.prototype.enumComponentType.DASHBOARD_CHART]: function () {
  103 + return getDashboardDefaultOption()
128 }, 104 },
129 } 105 }
130 106
@@ -177,10 +153,11 @@ @@ -177,10 +153,11 @@
177 * @returns {boolean} 153 * @returns {boolean}
178 */ 154 */
179 Sidebar.prototype.isChartCell = function (cell) { 155 Sidebar.prototype.isChartCell = function (cell) {
180 - const basitAttr = this.enumCellBasicAttribute 156 + const basicAttr = this.enumCellBasicAttribute
181 const componentType = this.enumComponentType 157 const componentType = this.enumComponentType
182 - const currentType = cell.getAttribute(basitAttr.COMPONENT_TYPE)  
183 - return !!(currentType && (currentType === componentType.LINE_CHART || currentType === componentType.BAR_CHART)) 158 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = componentType
  159 + const currentType = cell.getAttribute(basicAttr.COMPONENT_TYPE)
  160 + return !!(currentType && ([LINE_CHART, BAR_CHART, DASHBOARD_CHART].includes(currentType)))
184 } 161 }
185 162
186 /** 163 /**
@@ -389,5 +366,119 @@ @@ -389,5 +366,119 @@
389 // Sidebar.prototype.initChartInstance(graph) 366 // Sidebar.prototype.initChartInstance(graph)
390 // } 367 // }
391 // } 368 // }
  369 + function getLineChartDefaultOption() {
  370 + return {
  371 + xAxis: {
  372 + type: 'category',
  373 + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  374 + },
  375 + yAxis: {
  376 + type: 'value',
  377 + },
  378 + series: [
  379 + {
  380 + data: [150, 230, 224, 218, 135, 147, 260],
  381 + type: 'line',
  382 + },
  383 + ],
  384 + }
  385 + }
  386 +
  387 + function getBarChartDefaultOption() {
  388 + return {
  389 + xAxis: {
  390 + type: 'category',
  391 + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  392 + },
  393 + yAxis: {
  394 + type: 'value',
  395 + },
  396 + series: [
  397 + {
  398 + data: [120, 200, 150, 80, 70, 110, 130],
  399 + type: 'bar',
  400 + showBackground: true,
  401 + backgroundStyle: {
  402 + color: 'rgba(180, 180, 180, 0.2)',
  403 + },
  404 + },
  405 + ],
  406 + }
  407 + }
  408 +
  409 + function getDashboardDefaultOption() {
  410 + return {
  411 + series: [
  412 + {
  413 + type: 'gauge',
  414 + center: ['50%', '60%'],
  415 + startAngle: 200,
  416 + endAngle: -20,
  417 + min: 0,
  418 + max: 100,
  419 + splitNumber: 10,
  420 + itemStyle: {
  421 + color: '#FFAB91'
  422 + },
  423 + progress: {
  424 + show: true,
  425 + width: 30
  426 + },
  427 + pointer: {
  428 + show: false
  429 + },
  430 + axisLine: {
  431 + lineStyle: {
  432 + width: 30
  433 + }
  434 + },
  435 + axisTick: {
  436 + distance: -45,
  437 + splitNumber: 5,
  438 + lineStyle: {
  439 + width: 2,
  440 + color: '#999'
  441 + }
  442 + },
  443 + splitLine: {
  444 + distance: -52,
  445 + length: 14,
  446 + lineStyle: {
  447 + width: 3,
  448 + color: '#999'
  449 + }
  450 + },
  451 + axisLabel: {
  452 + distance: -20,
  453 + color: '#999',
  454 + fontSize: 20
  455 + },
  456 + anchor: {
  457 + show: false
  458 + },
  459 + title: {
  460 + show: false
  461 + },
  462 + detail: {
  463 + valueAnimation: true,
  464 + width: '60%',
  465 + lineHeight: 40,
  466 + borderRadius: 8,
  467 + offsetCenter: [0, '-15%'],
  468 + fontSize: 25,
  469 + fontWeight: 'bolder',
  470 + formatter: '{value} °C',
  471 + color: 'auto'
  472 + },
  473 + data: [
  474 + {
  475 + value: 20
  476 + }
  477 + ]
  478 + },
  479 + ]
  480 + }
  481 + }
  482 +
392 })(); 483 })();
393 484
@@ -5123,12 +5123,13 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5123,12 +5123,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5123 async function initNode() { 5123 async function initNode() {
5124 const basicAttr = sidebarInstance.enumCellBasicAttribute 5124 const basicAttr = sidebarInstance.enumCellBasicAttribute
5125 const permissionKey = sidebarInstance.enumPermissionPanel 5125 const permissionKey = sidebarInstance.enumPermissionPanel
5126 - 5126 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
5127 5127
5128 const renderMapping = { 5128 const renderMapping = {
5129 [permissionKey.DATA_SOURCE]: createDataSourcePanel, 5129 [permissionKey.DATA_SOURCE]: createDataSourcePanel,
5130 - [permissionKey.LINE_CHART_EXPAND]: createLineChartPanel,  
5131 - [permissionKey.BAR_CHART_EXPAND]: createBarChartPanel, 5130 + [permissionKey.LINE_CHART_EXPAND]: createChartBindPanel.bind(this, LINE_CHART),
  5131 + [permissionKey.BAR_CHART_EXPAND]: createChartBindPanel.bind(this, BAR_CHART),
  5132 + [permissionKey.DASHBOARD_CHART_EXPAND]: createChartBindPanel.bind(this, DASHBOARD_CHART),
5132 [permissionKey.INTERACTION]: createInteractionPanel, 5133 [permissionKey.INTERACTION]: createInteractionPanel,
5133 [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel, 5134 [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel,
5134 [permissionKey.VAR_IMAGE]: createVarImagePanel, 5135 [permissionKey.VAR_IMAGE]: createVarImagePanel,
@@ -5259,13 +5260,20 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5259,13 +5260,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5259 } 5260 }
5260 5261
5261 function createLineChartPanel() { 5262 function createLineChartPanel() {
  5263 + const { LINE_CHART } = Sidebar.prototype.enumComponentType
5262 createChartBindPanel(true) 5264 createChartBindPanel(true)
5263 } 5265 }
5264 5266
5265 function createBarChartPanel() { 5267 function createBarChartPanel() {
  5268 + const { LINE_CHART } = Sidebar.prototype.enumComponentType
  5269 +
5266 createChartBindPanel(false) 5270 createChartBindPanel(false)
5267 } 5271 }
5268 5272
  5273 + function createDashboardPanel() {
  5274 + const { LINE_CHART } = Sidebar.prototype.enumComponentType
  5275 +
  5276 + }
5269 /** 5277 /**
5270 * @description 创建视频绑定面板 5278 * @description 创建视频绑定面板
5271 */ 5279 */
@@ -5427,7 +5435,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5427,7 +5435,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5427 * @description 是否是折线图 5435 * @description 是否是折线图
5428 * @param {boolean} isLineChart 5436 * @param {boolean} isLineChart
5429 */ 5437 */
5430 - function createChartBindPanel(isLineChart) { 5438 + function createChartBindPanel(chartType) {
5431 const fragment = document.createDocumentFragment() 5439 const fragment = document.createDocumentFragment()
5432 const chartBindContainer = document.createElement('div') 5440 const chartBindContainer = document.createElement('div')
5433 chartBindContainer.setAttribute('class', 'chart-panel__style') 5441 chartBindContainer.setAttribute('class', 'chart-panel__style')
@@ -5438,8 +5446,12 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5438,8 +5446,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5438 const enumActionEL = { 5446 const enumActionEL = {
5439 SCOPE_FILTER: 'bindChartScopeFilter', 5447 SCOPE_FILTER: 'bindChartScopeFilter',
5440 5448
5441 - INTERVAL_EL: 'bindChartIntervalSelect' 5449 + INTERVAL_EL: 'bindChartIntervalSelect',
  5450 +
  5451 + UNIT_EL: 'bindChartUnit'
5442 } 5452 }
  5453 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  5454 +
5443 const enumBindKey = HandleDataSource.enumConst 5455 const enumBindKey = HandleDataSource.enumConst
5444 const enumDataType = HandleDataSource.enumDataBindType 5456 const enumDataType = HandleDataSource.enumDataBindType
5445 const enumConst = { 5457 const enumConst = {
@@ -5462,7 +5474,12 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5462,7 +5474,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5462 /** 5474 /**
5463 * @description 间隔 5475 * @description 间隔
5464 */ 5476 */
5465 - INTERVAL: enumBindKey.INTERVAL 5477 + INTERVAL: enumBindKey.INTERVAL,
  5478 +
  5479 + /**
  5480 + * @description 单位
  5481 + */
  5482 + UNIT: enumBindKey.UNIT
5466 } 5483 }
5467 5484
5468 const enumTimeUnit = { 5485 const enumTimeUnit = {
@@ -5705,14 +5722,26 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5705,14 +5722,26 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5705 { id: 'NONE', name: '空' }, 5722 { id: 'NONE', name: '空' },
5706 ] 5723 ]
5707 5724
  5725 + function generateDataType() {
  5726 + const realOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时" ${checked ? 'checked' : ''}>`
  5727 + const historyOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" ${checked ? 'checked' : ''}>`
  5728 +
  5729 + if (chartType === LINE_CHART) {
  5730 + return realOption() + historyOption(true)
  5731 + } else if (chartType === BAR_CHART) {
  5732 + return historyOption(true)
  5733 + } else if (chartType === DASHBOARD_CHART) {
  5734 + return realOption(true)
  5735 + }
  5736 + return realOption() + historyOption(true)
  5737 + }
  5738 +
5708 function createSwitchBindTypeRadio() { 5739 function createSwitchBindTypeRadio() {
5709 - const realOption = `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时">`  
5710 return ` 5740 return `
5711 <div class="layui-form-item"> 5741 <div class="layui-form-item">
5712 <label class="layui-form-label">数据类型</label> 5742 <label class="layui-form-label">数据类型</label>
5713 <div class="layui-input-block"> 5743 <div class="layui-input-block">
5714 - ${isLineChart ? realOption : ''}  
5715 - <input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" checked> 5744 + ${generateDataType()}
5716 </div> 5745 </div>
5717 </div>` 5746 </div>`
5718 } 5747 }
@@ -5761,6 +5790,16 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5761,6 +5790,16 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5761 </div>` 5790 </div>`
5762 } 5791 }
5763 5792
  5793 + function createUnitInput() {
  5794 + return `
  5795 + <div class="layui-form-item">
  5796 + <label class="layui-form-label">单位</label>
  5797 + <div class="layui-input-block" style="flex: 1;">
  5798 + <input id="${enumActionEL.UNIT_EL}" class="layui-input" value="°C" name="${enumConst.UNIT}" lay-filter="${enumConst.UNIT}" />
  5799 + </div>
  5800 + </div>`
  5801 + }
  5802 +
5764 function generatorEventlisten() { 5803 function generatorEventlisten() {
5765 form.on(`select(${enumActionEL.SCOPE_FILTER})`, event => { 5804 form.on(`select(${enumActionEL.SCOPE_FILTER})`, event => {
5766 const value = event.value || 0 5805 const value = event.value || 0
@@ -5800,6 +5839,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5800,6 +5839,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5800 $(chartBindContainer).append(createQueryScopeSelect()) 5839 $(chartBindContainer).append(createQueryScopeSelect())
5801 $(chartBindContainer).append(createAggregationSelect()) 5840 $(chartBindContainer).append(createAggregationSelect())
5802 $(chartBindContainer).append(createIntervalSelect()) 5841 $(chartBindContainer).append(createIntervalSelect())
  5842 + chartType === DASHBOARD_CHART && $(chartBindContainer).append(createUnitInput())
5803 fragment.append(chartBindContainer) 5843 fragment.append(chartBindContainer)
5804 $(container).append(fragment) 5844 $(container).append(fragment)
5805 generatorEventlisten() 5845 generatorEventlisten()
@@ -5882,6 +5922,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5882,6 +5922,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5882 [componentType.REAL_TIME]: getSubmitValue, 5922 [componentType.REAL_TIME]: getSubmitValue,
5883 [componentType.LINE_CHART]: getSubmitValue, 5923 [componentType.LINE_CHART]: getSubmitValue,
5884 [componentType.BAR_CHART]: getSubmitValue, 5924 [componentType.BAR_CHART]: getSubmitValue,
  5925 + [componentType.DASHBOARD_CHART]: getSubmitValue,
5885 [componentType.DEFAULT]: getSubmitValue, 5926 [componentType.DEFAULT]: getSubmitValue,
5886 [componentType.VIDEO]: getVideoSubmitValue, 5927 [componentType.VIDEO]: getVideoSubmitValue,
5887 [componentType.SWITCH]: getSwitchSubmitValue, 5928 [componentType.SWITCH]: getSwitchSubmitValue,
@@ -5911,7 +5952,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5911,7 +5952,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5911 [additionalKey.AGG]: field[additionalKey.AGG], 5952 [additionalKey.AGG]: field[additionalKey.AGG],
5912 [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE], 5953 [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE],
5913 [additionalKey.INTERVAL]: field[additionalKey.INTERVAL], 5954 [additionalKey.INTERVAL]: field[additionalKey.INTERVAL],
5914 - [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE] 5955 + [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE],
  5956 + ...(field[additionalKey.UNIT] ? { [additionalKey.UNIT]: field[additionalKey.UNIT] } : {})
5915 } : null 5957 } : null
5916 }, 5958 },
5917 } 5959 }
@@ -13204,6 +13246,11 @@ class HandleDataSource { @@ -13204,6 +13246,11 @@ class HandleDataSource {
13204 INTERVAL: 'interval', 13246 INTERVAL: 'interval',
13205 13247
13206 /** 13248 /**
  13249 + * @description 单位
  13250 + */
  13251 + UNIT: 'unit',
  13252 +
  13253 + /**
13207 * @description 开始时间 13254 * @description 开始时间
13208 */ 13255 */
13209 STARTTs: 'startTs', 13256 STARTTs: 'startTs',
@@ -13286,6 +13333,10 @@ class HandleDataSource { @@ -13286,6 +13333,10 @@ class HandleDataSource {
13286 return Sidebar.prototype.enumComponentType 13333 return Sidebar.prototype.enumComponentType
13287 } 13334 }
13288 13335
  13336 + get contentAllCell() {
  13337 + return this.graph.getDefaultParent().children || []
  13338 + }
  13339 +
13289 /** 13340 /**
13290 * @description 生成普通数据源绑定映射关系 13341 * @description 生成普通数据源绑定映射关系
13291 * @param dataSources 13342 * @param dataSources
@@ -13405,17 +13456,23 @@ class HandleDataSource { @@ -13405,17 +13456,23 @@ class HandleDataSource {
13405 const { condition = [] } = switchConfig || {} 13456 const { condition = [] } = switchConfig || {}
13406 let reg = /image=[^;]+/g 13457 let reg = /image=[^;]+/g
13407 let flag = false 13458 let flag = false
13408 - const { SWITCH_STATE, SWITCH_VALUE } = Sidebar.prototype.enumComponentType 13459 + const { SWITCH_STATE, SWITCH_VALUE, SWITCH_SEND_VALUE } = Sidebar.prototype.enumComponentType
13409 const { SWITCH_STATE_NONE } = Sidebar.prototype.enumComponentTypeValue 13460 const { SWITCH_STATE_NONE } = Sidebar.prototype.enumComponentTypeValue
  13461 +
  13462 + const getSendValue = (type) => {
  13463 + return (condition.find(item => item.type !== type) || {}).value
  13464 + }
13410 for (const item of condition) { 13465 for (const item of condition) {
13411 const { value, imagePath, type } = item || {} 13466 const { value, imagePath, type } = item || {}
13412 if (Number(receiveValue) === Number(value)) { 13467 if (Number(receiveValue) === Number(value)) {
13413 flag = true 13468 flag = true
13414 this.updatePage(() => { 13469 this.updatePage(() => {
13415 const style = node.getStyle() 13470 const style = node.getStyle()
  13471 + const sendValue = getSendValue(type)
13416 node.setStyle(style.replace(reg, `image=${imagePath}`)) 13472 node.setStyle(style.replace(reg, `image=${imagePath}`))
13417 node.setAttribute('label', '') 13473 node.setAttribute('label', '')
13418 node.setAttribute(SWITCH_VALUE, receiveValue) 13474 node.setAttribute(SWITCH_VALUE, receiveValue)
  13475 + node.setAttribute(SWITCH_SEND_VALUE, sendValue)
13419 node.setAttribute(SWITCH_STATE, type) 13476 node.setAttribute(SWITCH_STATE, type)
13420 }, node) 13477 }, node)
13421 break 13478 break
@@ -13430,6 +13487,7 @@ class HandleDataSource { @@ -13430,6 +13487,7 @@ class HandleDataSource {
13430 node.setAttribute(SWITCH_STATE, SWITCH_STATE_NONE) 13487 node.setAttribute(SWITCH_STATE, SWITCH_STATE_NONE)
13431 }, node) 13488 }, node)
13432 } 13489 }
  13490 +
13433 } 13491 }
13434 13492
13435 handleParamSettingButton(message) { 13493 handleParamSettingButton(message) {
@@ -13458,139 +13516,21 @@ class HandleDataSource { @@ -13458,139 +13516,21 @@ class HandleDataSource {
13458 const instance = chartInstanceMap.get(chartInstanceId) 13516 const instance = chartInstanceMap.get(chartInstanceId)
13459 const { attr = [[]] } = this.getBindData(subscriptionId) 13517 const { attr = [[]] } = this.getBindData(subscriptionId)
13460 const realDataList = data[attr] || [] 13518 const realDataList = data[attr] || []
13461 - const showNumberOf = 4  
13462 - const action = agg === 'NONE' ? 'unshift' : 'push'  
13463 13519
13464 - // const chartWidth = node.getAttribute('width')  
13465 - // const chartHeight = node.getAttribute('height') 13520 + const action = agg === 'NONE' ? 'unshift' : 'push'
13466 13521
13467 // chart insstance 是否已经接受过一次消息推送 13522 // chart insstance 是否已经接受过一次消息推送
13468 const isActive = instance.isActive 13523 const isActive = instance.isActive
13469 if (!isActive) { 13524 if (!isActive) {
13470 instance.isActive = true 13525 instance.isActive = true
13471 - const xAxisData = []  
13472 - const seriesValue = []  
13473 - const chartOption = {  
13474 - title: {  
13475 - subtext: realDataList.length ? '' : '暂无数据',  
13476 - x: 'center',  
13477 - y: 'center',  
13478 - itemGap: -20,  
13479 - subtextStyle: {  
13480 - fontSize: 16  
13481 - }  
13482 - },  
13483 - tooltip: {  
13484 - trigger: 'axis',  
13485 - axisPointer: {  
13486 - type: 'shadow'  
13487 - }  
13488 - },  
13489 - grid: {  
13490 - left: '3%',  
13491 - right: '3%',  
13492 - bottom: '3%',  
13493 - containLabel: true,  
13494 - },  
13495 - xAxis: {  
13496 - type: 'category',  
13497 - data: xAxisData,  
13498 - boundaryGap: true,  
13499 - axisLabel: {  
13500 - rotate: 70  
13501 - },  
13502 - axisPointer: {  
13503 - label: {  
13504 - formatter() {  
13505 - return attr  
13506 - }  
13507 - }  
13508 - }  
13509 - },  
13510 - yAxis: {  
13511 - type: 'value'  
13512 - },  
13513 - series: [  
13514 - {  
13515 - data: seriesValue,  
13516 - type: chartInstanceType.includes('bar') ? 'bar' : 'line'  
13517 - }  
13518 - ],  
13519 - dataZoom: [  
13520 - {  
13521 - show: true,  
13522 - type: 'inside',  
13523 - // endValue: showNumberOf  
13524 - }  
13525 - ]  
13526 - }  
13527 -  
13528 - // for (let i = realDataList.length - 1; i >= 0; i--) {  
13529 - // const [timespan, value] = realDataList[i]  
13530 - // xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())  
13531 - // seriesValue.push(Number(value))  
13532 - // }  
13533 - realDataList.forEach(item => {  
13534 - const [timespan, value] = item  
13535 - xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())  
13536 - seriesValue[action](Number(value))  
13537 - })  
13538 - 13526 + const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id })
13539 instance.setOption(chartOption) 13527 instance.setOption(chartOption)
13540 13528
13541 } else { 13529 } else {
13542 const oldOptions = instance.getOption() 13530 const oldOptions = instance.getOption()
13543 - const xAxisData = oldOptions.xAxis[0].data || []  
13544 - const seriesValue = oldOptions.series[0].data || []  
13545 - const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0  
13546 - const oldStartValue = Number(oldOptions.dataZoom[0].startValue) || 0  
13547 -  
13548 - for (let i = realDataList.length - 1; i >= 0; i--) {  
13549 - const [timespan, value] = realDataList[i]  
13550 - xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())  
13551 - seriesValue.push(Number(value))  
13552 - }  
13553 -  
13554 - if (Number(oldOptions.dataZoom[0].endValue) === seriesValue.length - 1) {  
13555 - oldOptions.dataZoom[0].endValue = showNumberOf  
13556 - oldOptions.dataZoom[0].startValue = 0  
13557 - } else {  
13558 - oldOptions.dataZoom[0].endValue = oldOptions.dataZoom[0].endValue + 1  
13559 - oldOptions.dataZoom[0].startValue = oldOptions.dataZoom[0].startValue + 1  
13560 - }  
13561 - 13531 + const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList })
13562 if (!instance) clearInterval(interval) 13532 if (!instance) clearInterval(interval)
13563 - instance && instance.setOption({  
13564 - title: {  
13565 - subtext: ''  
13566 - },  
13567 - xAxis: {  
13568 - data: xAxisData  
13569 - },  
13570 - series: [  
13571 - {  
13572 - data: seriesValue  
13573 - }  
13574 - ],  
13575 - dataZoom: [  
13576 - {  
13577 - show: true,  
13578 - type: 'inside',  
13579 - }  
13580 - // {  
13581 - // startValue: seriesValue.length - 1 > showNumberOf  
13582 - // ? oldStartValue === seriesValue.length - 1  
13583 - // ? 0  
13584 - // : oldStartValue + 1  
13585 - // : 0,  
13586 - // endValue: seriesValue.length - 1 > showNumberOf  
13587 - // ? oldEndValue === seriesValue.length - 1  
13588 - // ? showNumberOf  
13589 - // : oldEndValue + 1  
13590 - // : showNumberOf  
13591 - // }  
13592 - ]  
13593 - }) 13533 + instance && instance.setOption(options)
13594 } 13534 }
13595 } 13535 }
13596 13536
@@ -13611,12 +13551,91 @@ class HandleDataSource { @@ -13611,12 +13551,91 @@ class HandleDataSource {
13611 const showNumberOf = 4 13551 const showNumberOf = 4
13612 const action = agg === 'NONE' ? 'unshift' : 'push' 13552 const action = agg === 'NONE' ? 'unshift' : 'push'
13613 13553
  13554 + const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action })
  13555 +
  13556 + let interval
  13557 + // TODO 清除定时器
  13558 + function autoMove() {
  13559 + if (seriesValue.length <= 5) return
  13560 + interval = setInterval(() => {
  13561 + if (Number(chartOption.dataZoom[0].endValue) === seriesValue.length - 1) {
  13562 + chartOption.dataZoom[0].endValue = showNumberOf
  13563 + chartOption.dataZoom[0].startValue = 0
  13564 + } else {
  13565 + chartOption.dataZoom[0].endValue = chartOption.dataZoom[0].endValue + 1
  13566 + chartOption.dataZoom[0].startValue = chartOption.dataZoom[0].startValue + 1
  13567 + }
  13568 + if (!chartInstanceMap.has(chartInstanceId)) {
  13569 + clearInterval(interval)
  13570 + return
  13571 + }
  13572 + instance && instance.setOption(chartOption)
  13573 +
  13574 + }, 2000);
  13575 + }
  13576 +
  13577 + function stop() {
  13578 + clearInterval(interval)
  13579 + }
  13580 +
  13581 + function goMove() {
  13582 + autoMove()
  13583 + }
  13584 +
  13585 + instance.setOption(chartOption)
  13586 + // instance.on('mouseover', stop)
  13587 + // instance.on('mouseout', goMove)
  13588 + // autoMove()
  13589 + }
  13590 +
  13591 + getChartComponentOption(chartInstanceType, params) {
  13592 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  13593 + switch (chartInstanceType) {
  13594 + case LINE_CHART:
  13595 + return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }))
  13596 + case BAR_CHART:
  13597 + return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }))
  13598 + case DASHBOARD_CHART:
  13599 + return this.getDashboardChartOption(params)
  13600 + default:
  13601 + return {}
  13602 + }
  13603 + }
  13604 +
  13605 + getRealTimeUpdateChartOption(chartInstanceType, params) {
  13606 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  13607 + switch (chartInstanceType) {
  13608 + case LINE_CHART:
  13609 + return this.getRealTimeUpdateBasicChartOption(params)
  13610 + case BAR_CHART:
  13611 + return this.getRealTimeUpdateBasicChartOption(params)
  13612 + case DASHBOARD_CHART:
  13613 + return this.getRealTimeUpdateDashboardChartOption(params)
  13614 + default:
  13615 + return {}
  13616 + }
  13617 + }
  13618 +
  13619 + /**
  13620 + *
  13621 + * @param {@} params
  13622 + * @returns
  13623 + */
  13624 + getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action }) {
  13625 + const { dataList = [], attr = '', chartType = 'bar', action } = params
13614 13626
13615 const xAxisData = [] 13627 const xAxisData = []
13616 const seriesValue = [] 13628 const seriesValue = []
13617 - const chartOption = { 13629 +
  13630 + dataList.forEach(item => {
  13631 + const [timespan, value] = item
  13632 + xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
  13633 + seriesValue[action](Number(value))
  13634 + })
  13635 +
  13636 + return {
13618 title: { 13637 title: {
13619 - subtext: historyDataList.length ? '' : '暂无数据', 13638 + subtext: dataList.length ? '' : '暂无数据',
13620 x: 'center', 13639 x: 'center',
13621 y: 'center', 13640 y: 'center',
13622 itemGap: -20, 13641 itemGap: -20,
@@ -13658,59 +13677,157 @@ class HandleDataSource { @@ -13658,59 +13677,157 @@ class HandleDataSource {
13658 series: [ 13677 series: [
13659 { 13678 {
13660 data: seriesValue, 13679 data: seriesValue,
13661 - type: chartInstanceType.includes('bar') ? 'bar' : 'line', 13680 + type: chartType,
13662 } 13681 }
13663 ], 13682 ],
13664 dataZoom: [ 13683 dataZoom: [
13665 { 13684 {
13666 - // xAxisIndex: 0,  
13667 show: true, 13685 show: true,
13668 - type: 'inside',  
13669 - // startValue: 0,  
13670 - // endValue: showNumberOf 13686 + type: 'inside'
13671 } 13687 }
13672 ] 13688 ]
13673 } 13689 }
  13690 + }
13674 13691
13675 - historyDataList.forEach(item => {  
13676 - const [timespan, value] = item  
13677 - xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())  
13678 - seriesValue[action](Number(value))  
13679 - }) 13692 + getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [] }) {
  13693 + const { oldOptions, dataList } = params
  13694 + const xAxisData = oldOptions.xAxis[0].data || []
  13695 + const seriesValue = oldOptions.series[0].data || []
  13696 + const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0
  13697 + const oldStartValue = Number(oldOptions.dataZoom[0].startValue) || 0
  13698 + const showNumberOf = 4
13680 13699
13681 - let interval  
13682 - // TODO 清除定时器  
13683 - function autoMove() {  
13684 - if (seriesValue.length <= 5) return  
13685 - interval = setInterval(() => {  
13686 - if (Number(chartOption.dataZoom[0].endValue) === seriesValue.length - 1) {  
13687 - chartOption.dataZoom[0].endValue = showNumberOf  
13688 - chartOption.dataZoom[0].startValue = 0  
13689 - } else {  
13690 - chartOption.dataZoom[0].endValue = chartOption.dataZoom[0].endValue + 1  
13691 - chartOption.dataZoom[0].startValue = chartOption.dataZoom[0].startValue + 1  
13692 - }  
13693 - if (!chartInstanceMap.has(chartInstanceId)) {  
13694 - clearInterval(interval)  
13695 - return  
13696 - }  
13697 - instance && instance.setOption(chartOption) 13700 + for (let i = dataList.length - 1; i >= 0; i--) {
  13701 + const [timespan, value] = dataList[i]
  13702 + xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
  13703 + seriesValue.push(Number(value))
  13704 + }
13698 13705
13699 - }, 2000); 13706 + if (Number(oldOptions.dataZoom[0].endValue) === seriesValue.length - 1) {
  13707 + oldOptions.dataZoom[0].endValue = showNumberOf
  13708 + oldOptions.dataZoom[0].startValue = 0
  13709 + } else {
  13710 + oldOptions.dataZoom[0].endValue = oldOptions.dataZoom[0].endValue + 1
  13711 + oldOptions.dataZoom[0].startValue = oldOptions.dataZoom[0].startValue + 1
13700 } 13712 }
13701 13713
13702 - function stop() {  
13703 - clearInterval(interval) 13714 + return {
  13715 + title: {
  13716 + subtext: ''
  13717 + },
  13718 + xAxis: {
  13719 + data: xAxisData
  13720 + },
  13721 + series: [
  13722 + {
  13723 + data: seriesValue
  13724 + }
  13725 + ],
  13726 + dataZoom: [
  13727 + {
  13728 + show: true,
  13729 + type: 'inside',
  13730 + }
  13731 + ]
13704 } 13732 }
  13733 + }
13705 13734
13706 - function goMove() {  
13707 - autoMove() 13735 + getDashboardChartOption(params = { dataList: [], nodeId }) {
  13736 + const { dataList = [], nodeId } = params
  13737 + const dataSource = this.DispatchInstance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
  13738 + const { additional: { unit = '°C' } = {} } = dataSource
  13739 +
  13740 + const [timespan, value] = dataList[0] || []
  13741 + return {
  13742 + series: [
  13743 + {
  13744 + type: 'gauge',
  13745 + center: ['50%', '60%'],
  13746 + startAngle: 200,
  13747 + endAngle: -20,
  13748 + min: 0,
  13749 + max: 100,
  13750 + splitNumber: 10,
  13751 + itemStyle: {
  13752 + color: '#FFAB91'
  13753 + },
  13754 + progress: {
  13755 + show: true,
  13756 + width: 30
  13757 + },
  13758 + pointer: {
  13759 + show: false
  13760 + },
  13761 + axisLine: {
  13762 + lineStyle: {
  13763 + width: 30
  13764 + }
  13765 + },
  13766 + axisTick: {
  13767 + distance: -45,
  13768 + splitNumber: 5,
  13769 + lineStyle: {
  13770 + width: 2,
  13771 + color: '#999'
  13772 + }
  13773 + },
  13774 + splitLine: {
  13775 + distance: -52,
  13776 + length: 14,
  13777 + lineStyle: {
  13778 + width: 3,
  13779 + color: '#999'
  13780 + }
  13781 + },
  13782 + axisLabel: {
  13783 + distance: -20,
  13784 + color: '#999',
  13785 + fontSize: 20
  13786 + },
  13787 + anchor: {
  13788 + show: false
  13789 + },
  13790 + title: {
  13791 + show: false
  13792 + },
  13793 + detail: {
  13794 + valueAnimation: true,
  13795 + width: '60%',
  13796 + lineHeight: 40,
  13797 + borderRadius: 8,
  13798 + offsetCenter: [0, '-15%'],
  13799 + fontSize: 25,
  13800 + fontWeight: 'bolder',
  13801 + formatter: `{value} ${unit}`,
  13802 + color: 'auto'
  13803 + },
  13804 + data: [
  13805 + {
  13806 + value
  13807 + }
  13808 + ]
  13809 + }
  13810 + ]
13708 } 13811 }
  13812 + }
13709 13813
13710 - instance.setOption(chartOption)  
13711 - // instance.on('mouseover', stop)  
13712 - // instance.on('mouseout', goMove)  
13713 - // autoMove() 13814 + /**
  13815 + * @description 获取仪表盘配置
  13816 + */
  13817 + getRealTimeUpdateDashboardChartOption(params = { dataList: [] }) {
  13818 + const { dataList = [] } = params
  13819 + const [timespan, value] = dataList[0] || []
  13820 + return {
  13821 + series: [
  13822 + {
  13823 + data: [
  13824 + {
  13825 + value
  13826 + }
  13827 + ]
  13828 + },
  13829 + ]
  13830 + }
13714 } 13831 }
13715 13832
13716 /** 13833 /**
@@ -13750,7 +13867,7 @@ class HandleDataSource { @@ -13750,7 +13867,7 @@ class HandleDataSource {
13750 */ 13867 */
13751 getNodeByCmdId(subscriptionId) { 13868 getNodeByCmdId(subscriptionId) {
13752 const nodeId = this.getNodeIdByCmdId(subscriptionId) 13869 const nodeId = this.getNodeIdByCmdId(subscriptionId)
13753 - return this.DispatchInstance.contentAllCell.find(item => item.id === nodeId) 13870 + return this.contentAllCell.find(item => item.id === nodeId)
13754 } 13871 }
13755 13872
13756 getComponentType(node) { 13873 getComponentType(node) {
@@ -13831,6 +13948,10 @@ class HandleDataInteraction { @@ -13831,6 +13948,10 @@ class HandleDataInteraction {
13831 return DispatchCenter.instance.contentData 13948 return DispatchCenter.instance.contentData
13832 } 13949 }
13833 13950
  13951 + get contentAllCell() {
  13952 + return this.graph.getDefaultParent().children || []
  13953 + }
  13954 +
13834 /** 13955 /**
13835 * @description 事件映射 13956 * @description 事件映射
13836 */ 13957 */
@@ -14027,11 +14148,11 @@ class HandleDataInteraction { @@ -14027,11 +14148,11 @@ class HandleDataInteraction {
14027 */ 14148 */
14028 paramsSetting(nodeId, content) { 14149 paramsSetting(nodeId, content) {
14029 const { layer, jquery: $, form } = layui 14150 const { layer, jquery: $, form } = layui
14030 - const { SWITCH_STATE, SWITCH_VALUE, SWITCH, PARAMS_SETTING_BUTTON } = Sidebar.prototype.enumComponentType  
14031 - const { SWITCH_STATE_ENABLED, SWITCH_STATE_NONE, SWITCH_STATE_CLOSE } = Sidebar.prototype.enumComponentTypeValue 14151 + const { SWITCH_STATE, SWITCH_VALUE, SWITCH_SEND_VALUE, SWITCH, PARAMS_SETTING_BUTTON } = Sidebar.prototype.enumComponentType
  14152 + const { SWITCH_STATE_NONE } = Sidebar.prototype.enumComponentTypeValue
14032 const { COMPONENT_TYPE } = Sidebar.prototype.enumCellBasicAttribute 14153 const { COMPONENT_TYPE } = Sidebar.prototype.enumCellBasicAttribute
14033 const contentData = this.contentData 14154 const contentData = this.contentData
14034 - const currentNode = this.DispatchInstance.contentAllCell.find(item => item.id === nodeId) 14155 + const currentNode = this.contentAllCell.find(item => item.id === nodeId)
14035 14156
14036 const enumConst = { 14157 const enumConst = {
14037 VALUE: 'value', 14158 VALUE: 'value',
@@ -14072,39 +14193,12 @@ class HandleDataInteraction { @@ -14072,39 +14193,12 @@ class HandleDataInteraction {
14072 14193
14073 function handleSwitchComponent() { 14194 function handleSwitchComponent() {
14074 const state = currentNode.getAttribute(SWITCH_STATE) 14195 const state = currentNode.getAttribute(SWITCH_STATE)
14075 - const value = currentNode.getAttribute(SWITCH_VALUE) 14196 + const value = currentNode.getAttribute(SWITCH_SEND_VALUE)
14076 if (state === SWITCH_STATE_NONE) { 14197 if (state === SWITCH_STATE_NONE) {
14077 return 14198 return
14078 } 14199 }
14079 layer.confirm('是否确认下发命令？', async function (index) { 14200 layer.confirm('是否确认下发命令？', async function (index) {
14080 - let { deviceId, attr } = contentData.dataSources.find(item => item.nodeId === nodeId) || {}  
14081 - let { command, way } = content  
14082 - const validate = new Validate([  
14083 - { value, required: true, message: '下发值是必填项' },  
14084 - { value: deviceId, required: true, message: '未绑定设备' },  
14085 - { value: way, required: true, message: '未绑定指令下发方式(单向/双向)' },  
14086 - { value: command, required: true, message: '未设置下发命令' },  
14087 - { value: attr, required: true, message: '未绑定设备属性' },  
14088 - ])  
14089 - if (!validate.begin()) return  
14090 - if (typeof command === 'string') command = jsonParse(command)  
14091 - const data = replaceAttrPlaceholder(command, attr, value)  
14092 - const instructionData = {  
14093 - method: "methodThingskit",  
14094 - params: data,  
14095 - }  
14096 -  
14097 - const [err, res = []] = await to(ConfigurationNodeApi.deviceIsOnLine(deviceId))  
14098 - const { value: onlineFlag } = res[0] || {}  
14099 - if (onlineFlag) {  
14100 - const [err, res] = await to(ConfigurationNodeApi.sendInstruction(way, deviceId, instructionData))  
14101 - if (!err) {  
14102 - UseLayUi.topSuccessMsg('操作成功')  
14103 - layer.close(index);  
14104 - }  
14105 - } else {  
14106 - UseLayUi.topErrorMsg('设备不在线!')  
14107 - } 14201 + defaultHandler(value, () => layer.close(index))
14108 }); 14202 });
14109 14203
14110 14204
@@ -14131,6 +14225,10 @@ class HandleDataInteraction { @@ -14131,6 +14225,10 @@ class HandleDataInteraction {
14131 const submitThrottle = this.throttle(submit) 14225 const submitThrottle = this.throttle(submit)
14132 async function submit(callback) { 14226 async function submit(callback) {
14133 const { value } = form.val(enumActionEl.ISSUED_WAY_FILTER) 14227 const { value } = form.val(enumActionEl.ISSUED_WAY_FILTER)
  14228 + defaultHandler(value, callback)
  14229 + }
  14230 +
  14231 + async function defaultHandler(value, callback) {
14134 let { deviceId, attr } = contentData.dataSources.find(item => item.nodeId === nodeId) || {} 14232 let { deviceId, attr } = contentData.dataSources.find(item => item.nodeId === nodeId) || {}
14135 let { command, way } = content 14233 let { command, way } = content
14136 const validate = new Validate([ 14234 const validate = new Validate([
@@ -14154,7 +14252,7 @@ class HandleDataInteraction { @@ -14154,7 +14252,7 @@ class HandleDataInteraction {
14154 const [err, res] = await to(ConfigurationNodeApi.sendInstruction(way, deviceId, instructionData)) 14252 const [err, res] = await to(ConfigurationNodeApi.sendInstruction(way, deviceId, instructionData))
14155 if (!err) { 14253 if (!err) {
14156 UseLayUi.topSuccessMsg('操作成功') 14254 UseLayUi.topSuccessMsg('操作成功')
14157 - callback() 14255 + callback && typeof callback === 'function' && callback()
14158 } 14256 }
14159 } else { 14257 } else {
14160 UseLayUi.topErrorMsg('设备不在线!') 14258 UseLayUi.topErrorMsg('设备不在线!')
@@ -14197,7 +14295,6 @@ class HandleDataInteraction { @@ -14197,7 +14295,6 @@ class HandleDataInteraction {
14197 14295
14198 } 14296 }
14199 } 14297 }
14200 - console.log('enter')  
14201 startProcess() 14298 startProcess()
14202 } 14299 }
14203 } 14300 }
@@ -14353,6 +14450,10 @@ class HandleDynamicEffect { @@ -14353,6 +14450,10 @@ class HandleDynamicEffect {
14353 return this.DispatchInstance.updateQueueInstance.delUpdateFn.bind(this.DispatchInstance.updateQueueInstance) 14450 return this.DispatchInstance.updateQueueInstance.delUpdateFn.bind(this.DispatchInstance.updateQueueInstance)
14354 } 14451 }
14355 14452
  14453 + get contentAllCell() {
  14454 + return this.graph.getDefaultParent().children || []
  14455 + }
  14456 +
14356 /** 14457 /**
14357 * @description 筛选出视频数据源 14458 * @description 筛选出视频数据源
14358 */ 14459 */
@@ -14368,7 +14469,7 @@ class HandleDynamicEffect { @@ -14368,7 +14469,7 @@ class HandleDynamicEffect {
14368 getEnableActList() { 14469 getEnableActList() {
14369 const { act = [] } = this.DispatchInstance.contentData 14470 const { act = [] } = this.DispatchInstance.contentData
14370 // 过滤页面中没有的节点及未开启动效的节点 14471 // 过滤页面中没有的节点及未开启动效的节点
14371 - this.enableActList = act.filter(item => this.DispatchInstance.contentAllCell.find(each => each.id === item.id) && item.enabled) 14472 + this.enableActList = act.filter(item => this.contentAllCell.find(each => each.id === item.id) && item.enabled)
14372 // this.enableActList = act.filter(item => item.enabled) 14473 // this.enableActList = act.filter(item => item.enabled)
14373 } 14474 }
14374 14475
@@ -14640,7 +14741,6 @@ class HandleDynamicEffect { @@ -14640,7 +14741,6 @@ class HandleDynamicEffect {
14640 const { geometry = {} } = cell 14741 const { geometry = {} } = cell
14641 const { width, height } = geometry 14742 const { width, height } = geometry
14642 const idEl = getIdEl() 14743 const idEl = getIdEl()
14643 - console.log({ idEl })  
14644 graph.getModel().beginUpdate() 14744 graph.getModel().beginUpdate()
14645 try { 14745 try {
14646 let type 14746 let type
@@ -14676,7 +14776,7 @@ class HandleDynamicEffect { @@ -14676,7 +14776,7 @@ class HandleDynamicEffect {
14676 * @description 获取cell 通过cell id 14776 * @description 获取cell 通过cell id
14677 */ 14777 */
14678 getCellByCellId(id) { 14778 getCellByCellId(id) {
14679 - const allCell = this.DispatchInstance.contentAllCell || [] 14779 + const allCell = this.contentAllCell || []
14680 return allCell.find(item => item.id === id) 14780 return allCell.find(item => item.id === id)
14681 } 14781 }
14682 14782
@@ -14742,7 +14842,7 @@ class HandleDynamicEffect { @@ -14742,7 +14842,7 @@ class HandleDynamicEffect {
14742 */ 14842 */
14743 getNodeByCmdId(subscriptionId) { 14843 getNodeByCmdId(subscriptionId) {
14744 const nodeId = this.getNodeIdByCmdId(subscriptionId) 14844 const nodeId = this.getNodeIdByCmdId(subscriptionId)
14745 - return this.DispatchInstance.contentAllCell.find(item => item.id === nodeId) 14845 + return this.contentAllCell.find(item => item.id === nodeId)
14746 } 14846 }
14747 14847
14748 /** 14848 /**
@@ -482,7 +482,7 @@ @@ -482,7 +482,7 @@
482 } 482 }
483 483
484 .chart-panel__style .layui-form-label { 484 .chart-panel__style .layui-form-label {
485 - width: 60px; 485 + flex: 0 0 60px;
486 box-sizing: border-box; 486 box-sizing: border-box;
487 padding: 9px 10px 9px 0; 487 padding: 9px 10px 9px 0;
488 } 488 }