简柏林 / thingskit-scada · Commits

Commit 0770fed53b58e356981c4b816bc35b36bcd06f62

Authored by ww
1 parent edad816c

feat: add dashboard chart component

Inline Side-by-side
Showing 5 changed files with 472 additions and 212 deletions
@@ -590,11 +590,7 @@ @@ -590,11 +590,7 @@
590 </div> 590 </div>
591 <script> 591 <script>
592 var timeInterval = setInterval(() => { 592 var timeInterval = setInterval(() => {
593 - try {  
594 - if (!echarts) return  
595 - } catch (error) {  
596 -  
597 - } 593 + if (!echarts) return
598 clearInterval(timeInterval) 594 clearInterval(timeInterval)
599 timeInterval = null 595 timeInterval = null
600 var chartDom 596 var chartDom
@@ -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',
@@ -264,7 +269,7 @@ @@ -264,7 +269,7 @@
264 SWITCH_STATE_ENABLED: 'enabled', 269 SWITCH_STATE_ENABLED: 'enabled',
265 SWITCH_STATE_CLOSE: 'close', 270 SWITCH_STATE_CLOSE: 'close',
266 SWITCH_STATE_NONE: 'none', 271 SWITCH_STATE_NONE: 'none',
267 - } 272 + }
268 273
269 /** 274 /**
270 * @description 组件权限map 275 * @description 组件权限map
@@ -311,6 +316,11 @@ @@ -311,6 +316,11 @@
311 BAR_CHART_EXPAND: 'barChartExpandDataSource', 316 BAR_CHART_EXPAND: 'barChartExpandDataSource',
312 317
313 /** 318 /**
  319 + * @description 仪表图
  320 + */
  321 + DASHBOARD_CHART_EXPAND: 'dashboradChartExpand',
  322 +
  323 + /**
314 * @descripton 交互 324 * @descripton 交互
315 */ 325 */
316 INTERACTION: 'interaction', 326 INTERACTION: 'interaction',
@@ -700,8 +710,8 @@ @@ -700,8 +710,8 @@
700 //更多图形，显示出来的的标题跟id，同时包括图片 710 //更多图形，显示出来的的标题跟id，同时包括图片
701 711
702 // TODO thingsKit 设置数据绑定展示面板 712 // 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 713 + 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
  714 + 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]) 715 this.setComponentPermission(LINE, [RUNNING_AND_STOP, DYNAMIC_EFFECT])
706 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT]) 716 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
707 this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT]) 717 this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
@@ -710,6 +720,7 @@ @@ -710,6 +720,7 @@
710 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT]) 720 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
711 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND]) 721 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
712 this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND]) 722 this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
  723 + this.setComponentPermission(DASHBOARD_CHART, [DATA_SOURCE, DASHBOARD_CHART_EXPAND])
713 this.setComponentPermission(VIDEO, [VIDEO_PANEL]) 724 this.setComponentPermission(VIDEO, [VIDEO_PANEL])
714 this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING]) 725 this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
715 this.setComponentPermission(PARAMS_SETTING_BUTTON, [DATA_SOURCE, ONLY_SINGLE_EVENT]) 726 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,157 @@ @@ -389,5 +366,157 @@
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: 60,
  419 + splitNumber: 12,
  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 + type: 'gauge',
  481 + center: ['50%', '60%'],
  482 + startAngle: 200,
  483 + endAngle: -20,
  484 + min: 0,
  485 + max: 60,
  486 + itemStyle: {
  487 + color: '#FD7347'
  488 + },
  489 + progress: {
  490 + show: true,
  491 + width: 8
  492 + },
  493 + pointer: {
  494 + show: false
  495 + },
  496 + axisLine: {
  497 + show: false
  498 + },
  499 + axisTick: {
  500 + show: false
  501 + },
  502 + splitLine: {
  503 + show: false
  504 + },
  505 + axisLabel: {
  506 + show: false
  507 + },
  508 + detail: {
  509 + show: false
  510 + },
  511 + data: [
  512 + {
  513 + value: 20
  514 + }
  515 + ]
  516 + }
  517 + ]
  518 + }
  519 + }
  520 +
392 })(); 521 })();
393 522
@@ -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')
@@ -5705,14 +5713,27 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5705,14 +5713,27 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5705 { id: 'NONE', name: '空' }, 5713 { id: 'NONE', name: '空' },
5706 ] 5714 ]
5707 5715
  5716 + function generateDataType() {
  5717 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  5718 + const realOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时" ${checked ? 'checked' : ''}>`
  5719 + const historyOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" ${checked ? 'checked' : ''}>`
  5720 +
  5721 + if (chartType === LINE_CHART) {
  5722 + return realOption() + historyOption(true)
  5723 + } else if (chartType === BAR_CHART) {
  5724 + return historyOption(true)
  5725 + } else if (chartType === DASHBOARD_CHART) {
  5726 + return realOption(true)
  5727 + }
  5728 + return realOption() + historyOption(true)
  5729 + }
  5730 +
5708 function createSwitchBindTypeRadio() { 5731 function createSwitchBindTypeRadio() {
5709 - const realOption = `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时">`  
5710 return ` 5732 return `
5711 <div class="layui-form-item"> 5733 <div class="layui-form-item">
5712 <label class="layui-form-label">数据类型</label> 5734 <label class="layui-form-label">数据类型</label>
5713 <div class="layui-input-block"> 5735 <div class="layui-input-block">
5714 - ${isLineChart ? realOption : ''}  
5715 - <input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" checked> 5736 + ${generateDataType()}
5716 </div> 5737 </div>
5717 </div>` 5738 </div>`
5718 } 5739 }
@@ -5882,6 +5903,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5882,6 +5903,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5882 [componentType.REAL_TIME]: getSubmitValue, 5903 [componentType.REAL_TIME]: getSubmitValue,
5883 [componentType.LINE_CHART]: getSubmitValue, 5904 [componentType.LINE_CHART]: getSubmitValue,
5884 [componentType.BAR_CHART]: getSubmitValue, 5905 [componentType.BAR_CHART]: getSubmitValue,
  5906 + [componentType.DASHBOARD_CHART]: getSubmitValue,
5885 [componentType.DEFAULT]: getSubmitValue, 5907 [componentType.DEFAULT]: getSubmitValue,
5886 [componentType.VIDEO]: getVideoSubmitValue, 5908 [componentType.VIDEO]: getVideoSubmitValue,
5887 [componentType.SWITCH]: getSwitchSubmitValue, 5909 [componentType.SWITCH]: getSwitchSubmitValue,
@@ -13462,139 +13484,21 @@ class HandleDataSource { @@ -13462,139 +13484,21 @@ class HandleDataSource {
13462 const instance = chartInstanceMap.get(chartInstanceId) 13484 const instance = chartInstanceMap.get(chartInstanceId)
13463 const { attr = [[]] } = this.getBindData(subscriptionId) 13485 const { attr = [[]] } = this.getBindData(subscriptionId)
13464 const realDataList = data[attr] || [] 13486 const realDataList = data[attr] || []
13465 - const showNumberOf = 4  
13466 - const action = agg === 'NONE' ? 'unshift' : 'push'  
13467 13487
13468 - // const chartWidth = node.getAttribute('width')  
13469 - // const chartHeight = node.getAttribute('height') 13488 + const action = agg === 'NONE' ? 'unshift' : 'push'
13470 13489
13471 // chart insstance 是否已经接受过一次消息推送 13490 // chart insstance 是否已经接受过一次消息推送
13472 const isActive = instance.isActive 13491 const isActive = instance.isActive
13473 if (!isActive) { 13492 if (!isActive) {
13474 instance.isActive = true 13493 instance.isActive = true
13475 - const xAxisData = []  
13476 - const seriesValue = []  
13477 - const chartOption = {  
13478 - title: {  
13479 - subtext: realDataList.length ? '' : '暂无数据',  
13480 - x: 'center',  
13481 - y: 'center',  
13482 - itemGap: -20,  
13483 - subtextStyle: {  
13484 - fontSize: 16  
13485 - }  
13486 - },  
13487 - tooltip: {  
13488 - trigger: 'axis',  
13489 - axisPointer: {  
13490 - type: 'shadow'  
13491 - }  
13492 - },  
13493 - grid: {  
13494 - left: '3%',  
13495 - right: '3%',  
13496 - bottom: '3%',  
13497 - containLabel: true,  
13498 - },  
13499 - xAxis: {  
13500 - type: 'category',  
13501 - data: xAxisData,  
13502 - boundaryGap: true,  
13503 - axisLabel: {  
13504 - rotate: 70  
13505 - },  
13506 - axisPointer: {  
13507 - label: {  
13508 - formatter() {  
13509 - return attr  
13510 - }  
13511 - }  
13512 - }  
13513 - },  
13514 - yAxis: {  
13515 - type: 'value'  
13516 - },  
13517 - series: [  
13518 - {  
13519 - data: seriesValue,  
13520 - type: chartInstanceType.includes('bar') ? 'bar' : 'line'  
13521 - }  
13522 - ],  
13523 - dataZoom: [  
13524 - {  
13525 - show: true,  
13526 - type: 'inside',  
13527 - // endValue: showNumberOf  
13528 - }  
13529 - ]  
13530 - }  
13531 -  
13532 - // for (let i = realDataList.length - 1; i >= 0; i--) {  
13533 - // const [timespan, value] = realDataList[i]  
13534 - // xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())  
13535 - // seriesValue.push(Number(value))  
13536 - // }  
13537 - realDataList.forEach(item => {  
13538 - const [timespan, value] = item  
13539 - xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())  
13540 - seriesValue[action](Number(value))  
13541 - })  
13542 - 13494 + const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action })
13543 instance.setOption(chartOption) 13495 instance.setOption(chartOption)
13544 13496
13545 } else { 13497 } else {
13546 const oldOptions = instance.getOption() 13498 const oldOptions = instance.getOption()
13547 - const xAxisData = oldOptions.xAxis[0].data || []  
13548 - const seriesValue = oldOptions.series[0].data || []  
13549 - const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0  
13550 - const oldStartValue = Number(oldOptions.dataZoom[0].startValue) || 0  
13551 -  
13552 - for (let i = realDataList.length - 1; i >= 0; i--) {  
13553 - const [timespan, value] = realDataList[i]  
13554 - xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())  
13555 - seriesValue.push(Number(value))  
13556 - }  
13557 -  
13558 - if (Number(oldOptions.dataZoom[0].endValue) === seriesValue.length - 1) {  
13559 - oldOptions.dataZoom[0].endValue = showNumberOf  
13560 - oldOptions.dataZoom[0].startValue = 0  
13561 - } else {  
13562 - oldOptions.dataZoom[0].endValue = oldOptions.dataZoom[0].endValue + 1  
13563 - oldOptions.dataZoom[0].startValue = oldOptions.dataZoom[0].startValue + 1  
13564 - }  
13565 - 13499 + const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList })
13566 if (!instance) clearInterval(interval) 13500 if (!instance) clearInterval(interval)
13567 - instance && instance.setOption({  
13568 - title: {  
13569 - subtext: ''  
13570 - },  
13571 - xAxis: {  
13572 - data: xAxisData  
13573 - },  
13574 - series: [  
13575 - {  
13576 - data: seriesValue  
13577 - }  
13578 - ],  
13579 - dataZoom: [  
13580 - {  
13581 - show: true,  
13582 - type: 'inside',  
13583 - }  
13584 - // {  
13585 - // startValue: seriesValue.length - 1 > showNumberOf  
13586 - // ? oldStartValue === seriesValue.length - 1  
13587 - // ? 0  
13588 - // : oldStartValue + 1  
13589 - // : 0,  
13590 - // endValue: seriesValue.length - 1 > showNumberOf  
13591 - // ? oldEndValue === seriesValue.length - 1  
13592 - // ? showNumberOf  
13593 - // : oldEndValue + 1  
13594 - // : showNumberOf  
13595 - // }  
13596 - ]  
13597 - }) 13501 + instance && instance.setOption(options)
13598 } 13502 }
13599 } 13503 }
13600 13504
@@ -13614,13 +13518,93 @@ class HandleDataSource { @@ -13614,13 +13518,93 @@ class HandleDataSource {
13614 const historyDataList = data[attr] || [] 13518 const historyDataList = data[attr] || []
13615 const showNumberOf = 4 13519 const showNumberOf = 4
13616 const action = agg === 'NONE' ? 'unshift' : 'push' 13520 const action = agg === 'NONE' ? 'unshift' : 'push'
  13521 + const chartType = chartInstanceType.includes('bar') ? 'bar' : chartInstanceType.includes('line') ? 'line' : chartInstanceType.includes('dashboard') ? '' : ''
13617 13522
  13523 + const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action })
  13524 +
  13525 + let interval
  13526 + // TODO 清除定时器
  13527 + function autoMove() {
  13528 + if (seriesValue.length <= 5) return
  13529 + interval = setInterval(() => {
  13530 + if (Number(chartOption.dataZoom[0].endValue) === seriesValue.length - 1) {
  13531 + chartOption.dataZoom[0].endValue = showNumberOf
  13532 + chartOption.dataZoom[0].startValue = 0
  13533 + } else {
  13534 + chartOption.dataZoom[0].endValue = chartOption.dataZoom[0].endValue + 1
  13535 + chartOption.dataZoom[0].startValue = chartOption.dataZoom[0].startValue + 1
  13536 + }
  13537 + if (!chartInstanceMap.has(chartInstanceId)) {
  13538 + clearInterval(interval)
  13539 + return
  13540 + }
  13541 + instance && instance.setOption(chartOption)
  13542 +
  13543 + }, 2000);
  13544 + }
  13545 +
  13546 + function stop() {
  13547 + clearInterval(interval)
  13548 + }
  13549 +
  13550 + function goMove() {
  13551 + autoMove()
  13552 + }
  13553 +
  13554 + instance.setOption(chartOption)
  13555 + // instance.on('mouseover', stop)
  13556 + // instance.on('mouseout', goMove)
  13557 + // autoMove()
  13558 + }
  13559 +
  13560 + getChartComponentOption(chartInstanceType, params) {
  13561 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  13562 + switch (chartInstanceType) {
  13563 + case LINE_CHART:
  13564 + return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }))
  13565 + case BAR_CHART:
  13566 + return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }))
  13567 + case DASHBOARD_CHART:
  13568 + return this.getDashboardChartOption(params)
  13569 + default:
  13570 + return {}
  13571 + }
  13572 + }
  13573 +
  13574 + getRealTimeUpdateChartOption(chartInstanceType, params) {
  13575 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  13576 + switch (chartInstanceType) {
  13577 + case LINE_CHART:
  13578 + return this.getRealTimeUpdateBasicChartOption(params)
  13579 + case BAR_CHART:
  13580 + return this.getRealTimeUpdateBasicChartOption(params)
  13581 + case DASHBOARD_CHART:
  13582 + return this.getRealTimeUpdateDashboardChartOption(params)
  13583 + default:
  13584 + return {}
  13585 + }
  13586 + }
  13587 +
  13588 + /**
  13589 + *
  13590 + * @param {@} params
  13591 + * @returns
  13592 + */
  13593 + getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action }) {
  13594 + const { dataList = [], attr = '', chartType = 'bar', action } = params
13618 13595
13619 const xAxisData = [] 13596 const xAxisData = []
13620 const seriesValue = [] 13597 const seriesValue = []
13621 - const chartOption = { 13598 +
  13599 + dataList.forEach(item => {
  13600 + const [timespan, value] = item
  13601 + xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
  13602 + seriesValue[action](Number(value))
  13603 + })
  13604 +
  13605 + return {
13622 title: { 13606 title: {
13623 - subtext: historyDataList.length ? '' : '暂无数据', 13607 + subtext: dataList.length ? '' : '暂无数据',
13624 x: 'center', 13608 x: 'center',
13625 y: 'center', 13609 y: 'center',
13626 itemGap: -20, 13610 itemGap: -20,
@@ -13662,59 +13646,199 @@ class HandleDataSource { @@ -13662,59 +13646,199 @@ class HandleDataSource {
13662 series: [ 13646 series: [
13663 { 13647 {
13664 data: seriesValue, 13648 data: seriesValue,
13665 - type: chartInstanceType.includes('bar') ? 'bar' : 'line', 13649 + type: chartType,
13666 } 13650 }
13667 ], 13651 ],
13668 dataZoom: [ 13652 dataZoom: [
13669 { 13653 {
13670 - // xAxisIndex: 0,  
13671 show: true, 13654 show: true,
13672 - type: 'inside',  
13673 - // startValue: 0,  
13674 - // endValue: showNumberOf 13655 + type: 'inside'
13675 } 13656 }
13676 ] 13657 ]
13677 } 13658 }
  13659 + }
13678 13660
13679 - historyDataList.forEach(item => {  
13680 - const [timespan, value] = item  
13681 - xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())  
13682 - seriesValue[action](Number(value))  
13683 - }) 13661 + getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [] }) {
  13662 + const { oldOptions, dataList } = params
  13663 + const xAxisData = oldOptions.xAxis[0].data || []
  13664 + const seriesValue = oldOptions.series[0].data || []
  13665 + const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0
  13666 + const oldStartValue = Number(oldOptions.dataZoom[0].startValue) || 0
  13667 + const showNumberOf = 4
13684 13668
13685 - let interval  
13686 - // TODO 清除定时器  
13687 - function autoMove() {  
13688 - if (seriesValue.length <= 5) return  
13689 - interval = setInterval(() => {  
13690 - if (Number(chartOption.dataZoom[0].endValue) === seriesValue.length - 1) {  
13691 - chartOption.dataZoom[0].endValue = showNumberOf  
13692 - chartOption.dataZoom[0].startValue = 0  
13693 - } else {  
13694 - chartOption.dataZoom[0].endValue = chartOption.dataZoom[0].endValue + 1  
13695 - chartOption.dataZoom[0].startValue = chartOption.dataZoom[0].startValue + 1  
13696 - }  
13697 - if (!chartInstanceMap.has(chartInstanceId)) {  
13698 - clearInterval(interval)  
13699 - return  
13700 - }  
13701 - instance && instance.setOption(chartOption) 13669 + for (let i = dataList.length - 1; i >= 0; i--) {
  13670 + const [timespan, value] = dataList[i]
  13671 + xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
  13672 + seriesValue.push(Number(value))
  13673 + }
13702 13674
13703 - }, 2000); 13675 + if (Number(oldOptions.dataZoom[0].endValue) === seriesValue.length - 1) {
  13676 + oldOptions.dataZoom[0].endValue = showNumberOf
  13677 + oldOptions.dataZoom[0].startValue = 0
  13678 + } else {
  13679 + oldOptions.dataZoom[0].endValue = oldOptions.dataZoom[0].endValue + 1
  13680 + oldOptions.dataZoom[0].startValue = oldOptions.dataZoom[0].startValue + 1
13704 } 13681 }
13705 13682
13706 - function stop() {  
13707 - clearInterval(interval) 13683 + return {
  13684 + title: {
  13685 + subtext: ''
  13686 + },
  13687 + xAxis: {
  13688 + data: xAxisData
  13689 + },
  13690 + series: [
  13691 + {
  13692 + data: seriesValue
  13693 + }
  13694 + ],
  13695 + dataZoom: [
  13696 + {
  13697 + show: true,
  13698 + type: 'inside',
  13699 + }
  13700 + ]
13708 } 13701 }
  13702 + }
13709 13703
13710 - function goMove() {  
13711 - autoMove() 13704 + getDashboardChartOption(params = { dataList: [] }) {
  13705 + const { dataList = [] } = params
  13706 + const [timespan, value] = dataList[0] || []
  13707 + return {
  13708 + series: [
  13709 + {
  13710 + type: 'gauge',
  13711 + center: ['50%', '60%'],
  13712 + startAngle: 200,
  13713 + endAngle: -20,
  13714 + min: 0,
  13715 + max: 60,
  13716 + splitNumber: 12,
  13717 + itemStyle: {
  13718 + color: '#FFAB91'
  13719 + },
  13720 + progress: {
  13721 + show: true,
  13722 + width: 30
  13723 + },
  13724 + pointer: {
  13725 + show: false
  13726 + },
  13727 + axisLine: {
  13728 + lineStyle: {
  13729 + width: 30
  13730 + }
  13731 + },
  13732 + axisTick: {
  13733 + distance: -45,
  13734 + splitNumber: 5,
  13735 + lineStyle: {
  13736 + width: 2,
  13737 + color: '#999'
  13738 + }
  13739 + },
  13740 + splitLine: {
  13741 + distance: -52,
  13742 + length: 14,
  13743 + lineStyle: {
  13744 + width: 3,
  13745 + color: '#999'
  13746 + }
  13747 + },
  13748 + axisLabel: {
  13749 + distance: -20,
  13750 + color: '#999',
  13751 + fontSize: 20
  13752 + },
  13753 + anchor: {
  13754 + show: false
  13755 + },
  13756 + title: {
  13757 + show: false
  13758 + },
  13759 + detail: {
  13760 + valueAnimation: true,
  13761 + width: '60%',
  13762 + lineHeight: 40,
  13763 + borderRadius: 8,
  13764 + offsetCenter: [0, '-15%'],
  13765 + fontSize: 25,
  13766 + fontWeight: 'bolder',
  13767 + formatter: '{value} °C',
  13768 + color: 'auto'
  13769 + },
  13770 + data: [
  13771 + {
  13772 + value
  13773 + }
  13774 + ]
  13775 + },
  13776 + {
  13777 + type: 'gauge',
  13778 + center: ['50%', '60%'],
  13779 + startAngle: 200,
  13780 + endAngle: -20,
  13781 + min: 0,
  13782 + max: 60,
  13783 + itemStyle: {
  13784 + color: '#FD7347'
  13785 + },
  13786 + progress: {
  13787 + show: true,
  13788 + width: 8
  13789 + },
  13790 + pointer: {
  13791 + show: false
  13792 + },
  13793 + axisLine: {
  13794 + show: false
  13795 + },
  13796 + axisTick: {
  13797 + show: false
  13798 + },
  13799 + splitLine: {
  13800 + show: false
  13801 + },
  13802 + axisLabel: {
  13803 + show: false
  13804 + },
  13805 + detail: {
  13806 + show: false
  13807 + },
  13808 + data: [
  13809 + {
  13810 + value
  13811 + }
  13812 + ]
  13813 + }
  13814 + ]
13712 } 13815 }
  13816 + }
13713 13817
13714 - instance.setOption(chartOption)  
13715 - // instance.on('mouseover', stop)  
13716 - // instance.on('mouseout', goMove)  
13717 - // autoMove() 13818 + /**
  13819 + * @description 获取仪表盘配置
  13820 + */
  13821 + getRealTimeUpdateDashboardChartOption(params = { dataList: [] }) {
  13822 + const { dataList = [] } = params
  13823 + const [timespan, value] = dataList[0] || []
  13824 + return {
  13825 + series: [
  13826 + {
  13827 + data: [
  13828 + {
  13829 + value
  13830 + }
  13831 + ]
  13832 + },
  13833 + {
  13834 + data: [
  13835 + {
  13836 + value
  13837 + }
  13838 + ]
  13839 + }
  13840 + ]
  13841 + }
13718 } 13842 }
13719 13843
13720 /** 13844 /**