Commit 30efe55b90357f3984ab199ddebbaaa671c88060

Authored by ww
1 parent 755a9222

feat: dashboard chart component add unit field

... ... @@ -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 }
... ...
... ... @@ -482,7 +482,7 @@
482 482 }
483 483
484 484 .chart-panel__style .layui-form-label {
485   - width: 60px;
  485 + flex: 0 0 60px;
486 486 box-sizing: border-box;
487 487 padding: 9px 10px 9px 0;
488 488 }
... ...