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 | } | ... | ... |