简柏林 / 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 590 </div>
591 591 <script>
592 592 var timeInterval = setInterval(() => {
593   - try {
594   - if (!echarts) return
595   - } catch (error) {
596   -
597   - }
  593 + if (!echarts) return
598 594 clearInterval(timeInterval)
599 595 timeInterval = null
600 596 var chartDom
... ...
... ... @@ -225,6 +225,11 @@
225 225 LINE_CHART: 'lineChart',
226 226
227 227 /**
  228 + * @description 仪表盘 类型
  229 + */
  230 + DASHBOARD_CHART: 'dashboardChart',
  231 +
  232 + /**
228 233 * @description 柱状图类型
229 234 */
230 235 BAR_CHART: 'barChart',
... ... @@ -264,7 +269,7 @@
264 269 SWITCH_STATE_ENABLED: 'enabled',
265 270 SWITCH_STATE_CLOSE: 'close',
266 271 SWITCH_STATE_NONE: 'none',
267   - }
  272 + }
268 273
269 274 /**
270 275 * @description 组件权限map
... ... @@ -311,6 +316,11 @@
311 316 BAR_CHART_EXPAND: 'barChartExpandDataSource',
312 317
313 318 /**
  319 + * @description 仪表图
  320 + */
  321 + DASHBOARD_CHART_EXPAND: 'dashboradChartExpand',
  322 +
  323 + /**
314 324 * @descripton 交互
315 325 */
316 326 INTERACTION: 'interaction',
... ... @@ -700,8 +710,8 @@
700 710 //更多图形，显示出来的的标题跟id，同时包括图片
701 711
702 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 715 this.setComponentPermission(LINE, [RUNNING_AND_STOP, DYNAMIC_EFFECT])
706 716 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
707 717 this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
... ... @@ -710,6 +720,7 @@
710 720 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
711 721 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
712 722 this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
  723 + this.setComponentPermission(DASHBOARD_CHART, [DATA_SOURCE, DASHBOARD_CHART_EXPAND])
713 724 this.setComponentPermission(VIDEO, [VIDEO_PANEL])
714 725 this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
715 726 this.setComponentPermission(PARAMS_SETTING_BUTTON, [DATA_SOURCE, ONLY_SINGLE_EVENT])
... ...
... ... @@ -70,6 +70,11 @@
70 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 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 80 this.addPaletteFunctions('charts', '图表', false, fns);
... ... @@ -89,42 +94,13 @@
89 94 */
90 95 Sidebar.prototype.chartOptionMapping = {
91 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 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 153 * @returns {boolean}
178 154 */
179 155 Sidebar.prototype.isChartCell = function (cell) {
180   - const basitAttr = this.enumCellBasicAttribute
  156 + const basicAttr = this.enumCellBasicAttribute
181 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 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 5123 async function initNode() {
5124 5124 const basicAttr = sidebarInstance.enumCellBasicAttribute
5125 5125 const permissionKey = sidebarInstance.enumPermissionPanel
5126   -
  5126 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
5127 5127
5128 5128 const renderMapping = {
5129 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 5133 [permissionKey.INTERACTION]: createInteractionPanel,
5133 5134 [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel,
5134 5135 [permissionKey.VAR_IMAGE]: createVarImagePanel,
... ... @@ -5259,13 +5260,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5259 5260 }
5260 5261
5261 5262 function createLineChartPanel() {
  5263 + const { LINE_CHART } = Sidebar.prototype.enumComponentType
5262 5264 createChartBindPanel(true)
5263 5265 }
5264 5266
5265 5267 function createBarChartPanel() {
  5268 + const { LINE_CHART } = Sidebar.prototype.enumComponentType
  5269 +
5266 5270 createChartBindPanel(false)
5267 5271 }
5268 5272
  5273 + function createDashboardPanel() {
  5274 + const { LINE_CHART } = Sidebar.prototype.enumComponentType
  5275 +
  5276 + }
5269 5277 /**
5270 5278 * @description 创建视频绑定面板
5271 5279 */
... ... @@ -5427,7 +5435,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5427 5435 * @description 是否是折线图
5428 5436 * @param {boolean} isLineChart
5429 5437 */
5430   - function createChartBindPanel(isLineChart) {
  5438 + function createChartBindPanel(chartType) {
5431 5439 const fragment = document.createDocumentFragment()
5432 5440 const chartBindContainer = document.createElement('div')
5433 5441 chartBindContainer.setAttribute('class', 'chart-panel__style')
... ... @@ -5705,14 +5713,27 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5705 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 5731 function createSwitchBindTypeRadio() {
5709   - const realOption = `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时">`
5710 5732 return `
5711 5733 <div class="layui-form-item">
5712 5734 <label class="layui-form-label">数据类型</label>
5713 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 5737 </div>
5717 5738 </div>`
5718 5739 }
... ... @@ -5882,6 +5903,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5882 5903 [componentType.REAL_TIME]: getSubmitValue,
5883 5904 [componentType.LINE_CHART]: getSubmitValue,
5884 5905 [componentType.BAR_CHART]: getSubmitValue,
  5906 + [componentType.DASHBOARD_CHART]: getSubmitValue,
5885 5907 [componentType.DEFAULT]: getSubmitValue,
5886 5908 [componentType.VIDEO]: getVideoSubmitValue,
5887 5909 [componentType.SWITCH]: getSwitchSubmitValue,
... ... @@ -13462,139 +13484,21 @@ class HandleDataSource {
13462 13484 const instance = chartInstanceMap.get(chartInstanceId)
13463 13485 const { attr = [[]] } = this.getBindData(subscriptionId)
13464 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 13490 // chart insstance 是否已经接受过一次消息推送
13472 13491 const isActive = instance.isActive
13473 13492 if (!isActive) {
13474 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 13495 instance.setOption(chartOption)
13544 13496
13545 13497 } else {
13546 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 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 13518 const historyDataList = data[attr] || []
13615 13519 const showNumberOf = 4
13616 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 13596 const xAxisData = []
13620 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 13606 title: {
13623   - subtext: historyDataList.length ? '' : '暂无数据',
  13607 + subtext: dataList.length ? '' : '暂无数据',
13624 13608 x: 'center',
13625 13609 y: 'center',
13626 13610 itemGap: -20,
... ... @@ -13662,59 +13646,199 @@ class HandleDataSource {
13662 13646 series: [
13663 13647 {
13664 13648 data: seriesValue,
13665   - type: chartInstanceType.includes('bar') ? 'bar' : 'line',
  13649 + type: chartType,
13666 13650 }
13667 13651 ],
13668 13652 dataZoom: [
13669 13653 {
13670   - // xAxisIndex: 0,
13671 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 /**
... ...