Commit 30efe55b90357f3984ab199ddebbaaa671c88060
1 parent
755a9222
feat: dashboard chart component add unit field
Showing
3 changed files
with
40 additions
and
95 deletions
... | ... | @@ -476,44 +476,6 @@ |
476 | 476 | } |
477 | 477 | ] |
478 | 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 | 479 | ] |
518 | 480 | } |
519 | 481 | } | ... | ... |
... | ... | @@ -5446,8 +5446,12 @@ DataFormatPanel.prototype.addDataFont = function (container) { |
5446 | 5446 | const enumActionEL = { |
5447 | 5447 | SCOPE_FILTER: 'bindChartScopeFilter', |
5448 | 5448 | |
5449 | - INTERVAL_EL: 'bindChartIntervalSelect' | |
5449 | + INTERVAL_EL: 'bindChartIntervalSelect', | |
5450 | + | |
5451 | + UNIT_EL: 'bindChartUnit' | |
5450 | 5452 | } |
5453 | + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType | |
5454 | + | |
5451 | 5455 | const enumBindKey = HandleDataSource.enumConst |
5452 | 5456 | const enumDataType = HandleDataSource.enumDataBindType |
5453 | 5457 | const enumConst = { |
... | ... | @@ -5470,7 +5474,12 @@ DataFormatPanel.prototype.addDataFont = function (container) { |
5470 | 5474 | /** |
5471 | 5475 | * @description 间隔 |
5472 | 5476 | */ |
5473 | - INTERVAL: enumBindKey.INTERVAL | |
5477 | + INTERVAL: enumBindKey.INTERVAL, | |
5478 | + | |
5479 | + /** | |
5480 | + * @description 单位 | |
5481 | + */ | |
5482 | + UNIT: enumBindKey.UNIT | |
5474 | 5483 | } |
5475 | 5484 | |
5476 | 5485 | const enumTimeUnit = { |
... | ... | @@ -5714,7 +5723,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { |
5714 | 5723 | ] |
5715 | 5724 | |
5716 | 5725 | function generateDataType() { |
5717 | - const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType | |
5718 | 5726 | const realOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时" ${checked ? 'checked' : ''}>` |
5719 | 5727 | const historyOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" ${checked ? 'checked' : ''}>` |
5720 | 5728 | |
... | ... | @@ -5782,6 +5790,16 @@ DataFormatPanel.prototype.addDataFont = function (container) { |
5782 | 5790 | </div>` |
5783 | 5791 | } |
5784 | 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 | + | |
5785 | 5803 | function generatorEventlisten() { |
5786 | 5804 | form.on(`select(${enumActionEL.SCOPE_FILTER})`, event => { |
5787 | 5805 | const value = event.value || 0 |
... | ... | @@ -5821,6 +5839,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { |
5821 | 5839 | $(chartBindContainer).append(createQueryScopeSelect()) |
5822 | 5840 | $(chartBindContainer).append(createAggregationSelect()) |
5823 | 5841 | $(chartBindContainer).append(createIntervalSelect()) |
5842 | + chartType === DASHBOARD_CHART && $(chartBindContainer).append(createUnitInput()) | |
5824 | 5843 | fragment.append(chartBindContainer) |
5825 | 5844 | $(container).append(fragment) |
5826 | 5845 | generatorEventlisten() |
... | ... | @@ -5933,7 +5952,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { |
5933 | 5952 | [additionalKey.AGG]: field[additionalKey.AGG], |
5934 | 5953 | [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE], |
5935 | 5954 | [additionalKey.INTERVAL]: field[additionalKey.INTERVAL], |
5936 | - [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE] | |
5955 | + [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE], | |
5956 | + ...(field[additionalKey.UNIT] ? { [additionalKey.UNIT]: field[additionalKey.UNIT] } : {}) | |
5937 | 5957 | } : null |
5938 | 5958 | }, |
5939 | 5959 | } |
... | ... | @@ -13226,6 +13246,11 @@ class HandleDataSource { |
13226 | 13246 | INTERVAL: 'interval', |
13227 | 13247 | |
13228 | 13248 | /** |
13249 | + * @description 单位 | |
13250 | + */ | |
13251 | + UNIT: 'unit', | |
13252 | + | |
13253 | + /** | |
13229 | 13254 | * @description 开始时间 |
13230 | 13255 | */ |
13231 | 13256 | STARTTs: 'startTs', |
... | ... | @@ -13493,12 +13518,13 @@ class HandleDataSource { |
13493 | 13518 | const realDataList = data[attr] || [] |
13494 | 13519 | |
13495 | 13520 | const action = agg === 'NONE' ? 'unshift' : 'push' |
13521 | + console.log(instance.getOption()) | |
13496 | 13522 | |
13497 | 13523 | // chart insstance 是否已经接受过一次消息推送 |
13498 | 13524 | const isActive = instance.isActive |
13499 | 13525 | if (!isActive) { |
13500 | 13526 | instance.isActive = true |
13501 | - const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action }) | |
13527 | + const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id }) | |
13502 | 13528 | instance.setOption(chartOption) |
13503 | 13529 | |
13504 | 13530 | } else { |
... | ... | @@ -13525,7 +13551,6 @@ class HandleDataSource { |
13525 | 13551 | const historyDataList = data[attr] || [] |
13526 | 13552 | const showNumberOf = 4 |
13527 | 13553 | const action = agg === 'NONE' ? 'unshift' : 'push' |
13528 | - const chartType = chartInstanceType.includes('bar') ? 'bar' : chartInstanceType.includes('line') ? 'line' : chartInstanceType.includes('dashboard') ? '' : '' | |
13529 | 13554 | |
13530 | 13555 | const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action }) |
13531 | 13556 | |
... | ... | @@ -13708,8 +13733,11 @@ class HandleDataSource { |
13708 | 13733 | } |
13709 | 13734 | } |
13710 | 13735 | |
13711 | - getDashboardChartOption(params = { dataList: [] }) { | |
13712 | - const { dataList = [] } = params | |
13736 | + getDashboardChartOption(params = { dataList: [], nodeId }) { | |
13737 | + const { dataList = [], nodeId } = params | |
13738 | + const dataSource = this.DispatchInstance.contentData.dataSources.find(item => item.nodeId === nodeId) || {} | |
13739 | + const { additional: { unit = '°C' } = {} } = dataSource | |
13740 | + | |
13713 | 13741 | const [timespan, value] = dataList[0] || [] |
13714 | 13742 | return { |
13715 | 13743 | series: [ |
... | ... | @@ -13719,8 +13747,8 @@ class HandleDataSource { |
13719 | 13747 | startAngle: 200, |
13720 | 13748 | endAngle: -20, |
13721 | 13749 | min: 0, |
13722 | - max: 60, | |
13723 | - splitNumber: 12, | |
13750 | + max: 100, | |
13751 | + splitNumber: 10, | |
13724 | 13752 | itemStyle: { |
13725 | 13753 | color: '#FFAB91' |
13726 | 13754 | }, |
... | ... | @@ -13771,7 +13799,7 @@ class HandleDataSource { |
13771 | 13799 | offsetCenter: [0, '-15%'], |
13772 | 13800 | fontSize: 25, |
13773 | 13801 | fontWeight: 'bolder', |
13774 | - formatter: '{value} °C', | |
13802 | + formatter: `{value} ${unit}`, | |
13775 | 13803 | color: 'auto' |
13776 | 13804 | }, |
13777 | 13805 | data: [ |
... | ... | @@ -13779,44 +13807,6 @@ class HandleDataSource { |
13779 | 13807 | value |
13780 | 13808 | } |
13781 | 13809 | ] |
13782 | - }, | |
13783 | - { | |
13784 | - type: 'gauge', | |
13785 | - center: ['50%', '60%'], | |
13786 | - startAngle: 200, | |
13787 | - endAngle: -20, | |
13788 | - min: 0, | |
13789 | - max: 60, | |
13790 | - itemStyle: { | |
13791 | - color: '#FD7347' | |
13792 | - }, | |
13793 | - progress: { | |
13794 | - show: true, | |
13795 | - width: 8 | |
13796 | - }, | |
13797 | - pointer: { | |
13798 | - show: false | |
13799 | - }, | |
13800 | - axisLine: { | |
13801 | - show: false | |
13802 | - }, | |
13803 | - axisTick: { | |
13804 | - show: false | |
13805 | - }, | |
13806 | - splitLine: { | |
13807 | - show: false | |
13808 | - }, | |
13809 | - axisLabel: { | |
13810 | - show: false | |
13811 | - }, | |
13812 | - detail: { | |
13813 | - show: false | |
13814 | - }, | |
13815 | - data: [ | |
13816 | - { | |
13817 | - value | |
13818 | - } | |
13819 | - ] | |
13820 | 13810 | } |
13821 | 13811 | ] |
13822 | 13812 | } |
... | ... | @@ -13837,13 +13827,6 @@ class HandleDataSource { |
13837 | 13827 | } |
13838 | 13828 | ] |
13839 | 13829 | }, |
13840 | - { | |
13841 | - data: [ | |
13842 | - { | |
13843 | - value | |
13844 | - } | |
13845 | - ] | |
13846 | - } | |
13847 | 13830 | ] |
13848 | 13831 | } |
13849 | 13832 | } | ... | ... |