简柏林 / thingskit-scada · Commits

Commit 81352d5123ca48a86327d7316907a49780bd165c

Authored by xp.Huang
2 parents 81c5a53e b35f6248

Merge branch 'ww' into 'main' 

perf: chart component add legend && title

See merge request huang/thingskit-drawio!48
Inline Side-by-side
Showing 1 changed file with 150 additions and 34 deletions
... ... @@ -5924,9 +5924,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5924 5924 [componentType.VARIABLE]: getSubmitValue,
5925 5925 [componentType.LINE]: getSubmitValue,
5926 5926 [componentType.REAL_TIME]: getSubmitValue,
5927   - [componentType.LINE_CHART]: getSubmitValue,
5928   - [componentType.BAR_CHART]: getSubmitValue,
5929   - [componentType.DASHBOARD_CHART]: getSubmitValue,
  5927 + [componentType.LINE_CHART]: getChartSubmitValue,
  5928 + [componentType.BAR_CHART]: getChartSubmitValue,
  5929 + [componentType.DASHBOARD_CHART]: getChartSubmitValue,
5930 5930 [componentType.DEFAULT]: getSubmitValue,
5931 5931 [componentType.VIDEO]: getVideoSubmitValue,
5932 5932 [componentType.SWITCH]: getSwitchSubmitValue,
... ... @@ -5941,7 +5941,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5941 5941 function getSubmitValue(field) {
5942 5942 const ENABLED_FLAG = 'on'
5943 5943 const additionalKey = HandleDataSource.enumConst
5944   -
5945 5944 const value = {
5946 5945 configurationId,
5947 5946 contentId: currentPageId.id,
... ... @@ -5962,6 +5961,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5962 5961 } : null
5963 5962 },
5964 5963 }
  5964 +
5965 5965 const allType = [...interactionList, ...dynamicEffectList]
5966 5966 for (const item of allType) {
5967 5967 if (field[item.type] === ENABLED_FLAG) {
... ... @@ -5982,6 +5982,37 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5982 5982 return value
5983 5983 }
5984 5984
  5985 + function getChartSubmitValue() {
  5986 + const additionalKey = HandleDataSource.enumConst
  5987 +
  5988 + const value = {
  5989 + configurationId,
  5990 + contentId: currentPageId.id,
  5991 + nodeId: graphId,
  5992 + [enumCategory.ACT]: [],
  5993 + [enumCategory.EVENT]: [],
  5994 + [enumCategory.DATA_SOURCE]: {
  5995 + [enumDataSourceConst.ORG_ID]: field[enumDataSourceConst.ORG_ID],
  5996 + [enumDataSourceConst.DEVICE_ID]: field[enumDataSourceConst.DEVICE_ID],
  5997 + [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? field[enumDataSourceConst.SLAVE_DEVICE_ID] : '',
  5998 + [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
  5999 + [enumDataSourceConst.ADDITIONAL]: {
  6000 + [additionalKey.ORG_NAME]: field[additionalKey.ORG_NAME],
  6001 + [additionalKey.DEVICE_NAME]: field[additionalKey.DEVICE_NAME],
  6002 + [additionalKey.SLAVE_DEVICE_NAME]: field[additionalKey.SLAVE_DEVICE_NAME],
  6003 + [additionalKey.ATTR_NAME]: field[additionalKey.ATTR_NAME],
  6004 + [additionalKey.AGG]: field[additionalKey.AGG],
  6005 + [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE],
  6006 + [additionalKey.INTERVAL]: field[additionalKey.INTERVAL],
  6007 + [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE],
  6008 + ...(field[additionalKey.UNIT] ? { [additionalKey.UNIT]: field[additionalKey.UNIT] } : {})
  6009 + }
  6010 + },
  6011 + }
  6012 +
  6013 + return value
  6014 + }
  6015 +
5985 6016 function getVideoSubmitValue() {
5986 6017 const value = {
5987 6018 configurationId,
... ... @@ -7738,13 +7769,24 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7738 7769 SLAVE_DEVICE_ID: 'slaveDeviceId',
7739 7770 ATTR: 'attr',
7740 7771 GATEWAY: 'GATEWAY',
  7772 + ORG_NAME: 'orgName',
  7773 + DEVICE_NAME: 'deviceName',
  7774 + SLAVE_DEVICE_NAME: 'slaveDeviceName',
  7775 + ATTR_NAME: 'attrName'
7741 7776 }
  7777 +
7742 7778 /**
7743 7779 * @description
7744 7780 * @type {{id: string, deviceType: string, name: string}[]}
7745 7781 */
7746 7782 let deviceList = []
7747 7783
  7784 + /**
  7785 + * @description
  7786 + * @type {{id: string, deviceType: string, name: string}[]}
  7787 + */
  7788 + let slaveDeviceList = []
  7789 +
7748 7790 const component = document.createElement('div')
7749 7791
7750 7792 $(component)
... ... @@ -7761,6 +7803,25 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7761 7803 generatorDeviceSelect()
7762 7804 generatorSlaveDevice()
7763 7805 generatorAttrSelect()
  7806 + generateDeviceNameInput()
  7807 + }
  7808 +
  7809 + async function generateDeviceNameInput() {
  7810 + const template = `
  7811 + <div class="layui-form-item" style="margin-bottom: 0">
  7812 + <input style="display: none" type="text" name="${enumDataSourceConst.ORG_NAME}" class="layui-input">
  7813 + </div>
  7814 + <div class="layui-form-item" style="margin-bottom: 0">
  7815 + <input style="display: none" type="text" name="${enumDataSourceConst.DEVICE_NAME}" class="layui-input">
  7816 + </div>
  7817 + <div class="layui-form-item" style="margin-bottom: 0">
  7818 + <input style="display: none" type="text" name="${enumDataSourceConst.SLAVE_DEVICE_NAME}" class="layui-input">
  7819 + </div>
  7820 + <div class="layui-form-item" style="margin-bottom: 0">
  7821 + <input style="display: none" type="text" name="${enumDataSourceConst.ATTR_NAME}" class="layui-input">
  7822 + </div>
  7823 + `
  7824 + $(component).append(template)
7764 7825 }
7765 7826
7766 7827
... ... @@ -7780,7 +7841,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7780 7841 */
7781 7842 async function getSlaveDeviceByMasterDeviceId(orgId, deviceId) {
7782 7843 if (deviceId && currentCheckedOrgNode) {
7783   - const items = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
  7844 + const items = slaveDeviceList = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
7784 7845 $(`#${componentId} `).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items }))
7785 7846 form.render('select', componentFilter)
7786 7847 }
... ... @@ -7823,9 +7884,13 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7823 7884 click(node) {
7824 7885 currentCheckedOrgNode = node.data.id
7825 7886 form.val(componentFilter, {
  7887 + [enumDataSourceConst.ORG_NAME]: node.data.title,
7826 7888 [enumDataSourceConst.DEVICE_ID]: null,
7827 7889 [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
7828 7890 [enumDataSourceConst.ATTR]: null,
  7891 + [enumDataSourceConst.DEVICE_NAME]: null,
  7892 + [enumDataSourceConst.SLAVE_DEVICE_NAME]: null,
  7893 + [enumDataSourceConst.ATTR_NAME]: null,
7829 7894 })
7830 7895 getDevicesByOrgId(node.data.id)
7831 7896 },
... ... @@ -7847,8 +7912,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7847 7912 const { value } = data
7848 7913 const selected = deviceList.find(item => item.id === value)
7849 7914 form.val(componentFilter, {
  7915 + [enumDataSourceConst.DEVICE_NAME]: selected.name,
7850 7916 [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
7851 7917 [enumDataSourceConst.ATTR]: null,
  7918 + [enumDataSourceConst.SLAVE_DEVICE_NAME]: null,
  7919 + [enumDataSourceConst.ATTR_NAME]: null,
7852 7920 })
7853 7921 if (!selected) return
7854 7922 if (selected.deviceType === enumDataSourceConst.GATEWAY) {
... ... @@ -7878,8 +7946,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7878 7946 className: 'data-source__component-select',
7879 7947 onClick(data) {
7880 7948 const { value } = data
  7949 + const selected = slaveDeviceList.find(item => item.id === value)
7881 7950 form.val(componentFilter, {
  7951 + [enumDataSourceConst.SLAVE_DEVICE_NAME]: selected.name,
7882 7952 [enumDataSourceConst.ATTR]: null,
  7953 + [enumDataSourceConst.ATTR_NAME]: null,
7883 7954 })
7884 7955 getAttrByDeviceId(value)
7885 7956 },
... ... @@ -7897,6 +7968,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
7897 7968 layFilter: `${componentFilter}--${enumDataSourceConst.ATTR}`,
7898 7969 className: 'data-source__component-select',
7899 7970 ...validateRule,
  7971 + onClick(data) {
  7972 + const { value } = data
  7973 + form.val(componentFilter, {
  7974 + [enumDataSourceConst.ATTR_NAME]: value,
  7975 + })
  7976 + }
7900 7977 })
7901 7978 $(component).append(attrsSelect)
7902 7979 }
... ... @@ -13130,7 +13207,7 @@ class DispatchCenter {
13130 13207 this.graph = editor.graph
13131 13208 this.currentPage = currentPage
13132 13209 // this.contentAllCell = this.graph.getDefaultParent().children || []
13133   - this.contentAllCell = Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
  13210 + this.contentAllCell = Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
13134 13211 }
13135 13212
13136 13213 /**
... ... @@ -13286,7 +13363,27 @@ class HandleDataSource {
13286 13363 /**
13287 13364 * @description 绑定数据类型
13288 13365 */
13289   - DATA_TYPE: 'dataType'
  13366 + DATA_TYPE: 'dataType',
  13367 +
  13368 + /**
  13369 + * @description 组织名称
  13370 + */
  13371 + ORG_NAME: 'orgName',
  13372 +
  13373 + /**
  13374 + * @description 设备名称
  13375 + */
  13376 + DEVICE_NAME: 'deviceName',
  13377 +
  13378 + /**
  13379 + * @description 子设备名称
  13380 + */
  13381 + SLAVE_DEVICE_NAME: 'slaveDeviceName',
  13382 +
  13383 + /**
  13384 + * @description 属性名称
  13385 + */
  13386 + ATTR_NAME: 'attrName'
13290 13387 }
13291 13388
13292 13389
... ... @@ -13353,7 +13450,7 @@ class HandleDataSource {
13353 13450
13354 13451 get contentAllCell() {
13355 13452 // return this.graph.getDefaultParent().children || []
13356   - return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
  13453 + return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
13357 13454 }
13358 13455
13359 13456 /**
... ... @@ -13549,7 +13646,7 @@ class HandleDataSource {
13549 13646 const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
13550 13647 const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
13551 13648 const instance = chartInstanceMap.get(chartInstanceId)
13552   - const { attr = [[]] } = this.getBindData(subscriptionId)
  13649 + const { attr = [[]], additional } = this.getBindData(subscriptionId)
13553 13650 const realDataList = data[attr] || []
13554 13651
13555 13652 const action = agg === 'NONE' ? 'unshift' : 'push'
... ... @@ -13558,12 +13655,12 @@ class HandleDataSource {
13558 13655 const isActive = instance.isActive
13559 13656 if (!isActive) {
13560 13657 instance.isActive = true
13561   - const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id })
  13658 + const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id , additional})
13562 13659 instance.setOption(chartOption)
13563 13660
13564 13661 } else {
13565 13662 const oldOptions = instance.getOption()
13566   - const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList })
  13663 + const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList , additional})
13567 13664 if (!instance) clearInterval(interval)
13568 13665 instance && instance.setOption(options)
13569 13666 }
... ... @@ -13581,12 +13678,12 @@ class HandleDataSource {
13581 13678 const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
13582 13679 const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
13583 13680 const instance = chartInstanceMap.get(chartInstanceId)
13584   - const { attr = [[]] } = this.getBindData(subscriptionId)
  13681 + const { attr = [[]], additional } = this.getBindData(subscriptionId)
13585 13682 const historyDataList = data[attr] || []
13586 13683 const showNumberOf = 4
13587 13684 const action = agg === 'NONE' ? 'unshift' : 'push'
13588 13685
13589   - const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action })
  13686 + const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action, additional })
13590 13687
13591 13688 let interval
13592 13689 // TODO 清除定时器
... ... @@ -13624,14 +13721,14 @@ class HandleDataSource {
13624 13721 }
13625 13722
13626 13723 getChartComponentOption(chartInstanceType, params) {
13627   - const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  13724 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART, additional } = Sidebar.prototype.enumComponentType
13628 13725 switch (chartInstanceType) {
13629 13726 case LINE_CHART:
13630   - return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }))
  13727 + return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }, additional))
13631 13728 case BAR_CHART:
13632   - return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }))
  13729 + return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }), additional)
13633 13730 case DASHBOARD_CHART:
13634   - return this.getDashboardChartOption(params)
  13731 + return this.getDashboardChartOption(Object.assign(params, additional))
13635 13732 default:
13636 13733 return {}
13637 13734 }
... ... @@ -13656,9 +13753,9 @@ class HandleDataSource {
13656 13753 * @param {@} params
13657 13754 * @returns
13658 13755 */
13659   - getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action }) {
13660   - const { dataList = [], attr = '', chartType = 'bar', action } = params
13661   -
  13756 + getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action, additional }) {
  13757 + const { dataList = [], attr = '', chartType = 'bar', action, additional = {} } = params
  13758 + const { deviceName, slaveDeviceName, attrName } = additional
13662 13759 const xAxisData = []
13663 13760 const seriesValue = []
13664 13761
... ... @@ -13667,13 +13764,13 @@ class HandleDataSource {
13667 13764 xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
13668 13765 seriesValue[action](Number(value))
13669 13766 })
13670   -
13671 13767 return {
13672 13768 title: {
  13769 + text: slaveDeviceName || deviceName,
13673 13770 subtext: dataList.length ? '' : '暂无数据',
13674   - x: 'center',
13675   - y: 'center',
13676   - itemGap: -20,
  13771 + x: dataList.length ? '' : 'center',
  13772 + y: dataList.length ? '' : 'center',
  13773 + // itemGap: -20,
13677 13774 subtextStyle: {
13678 13775 fontSize: 16
13679 13776 }
... ... @@ -13684,6 +13781,9 @@ class HandleDataSource {
13684 13781 type: 'shadow'
13685 13782 }
13686 13783 },
  13784 + legend: {
  13785 + data: [attrName]
  13786 + },
13687 13787 grid: {
13688 13788 left: '3%',
13689 13789 right: '3%',
... ... @@ -13711,6 +13811,7 @@ class HandleDataSource {
13711 13811 },
13712 13812 series: [
13713 13813 {
  13814 + name: attrName,
13714 13815 data: seriesValue,
13715 13816 type: chartType,
13716 13817 }
... ... @@ -13724,8 +13825,9 @@ class HandleDataSource {
13724 13825 }
13725 13826 }
13726 13827
13727   - getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [] }) {
13728   - const { oldOptions, dataList } = params
  13828 + getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [], additional: {} }) {
  13829 + const { oldOptions, dataList, additional = {} } = params
  13830 + const { slaveDeviceName, deviceName, attrName } = additional
13729 13831 const xAxisData = oldOptions.xAxis[0].data || []
13730 13832 const seriesValue = oldOptions.series[0].data || []
13731 13833 const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0
... ... @@ -13748,13 +13850,20 @@ class HandleDataSource {
13748 13850
13749 13851 return {
13750 13852 title: {
13751   - subtext: ''
  13853 + text: slaveDeviceName || deviceName,
  13854 + subtext: '',
  13855 + x: dataList.length ? '' : 'center',
  13856 + y: dataList.length ? '' : 'center',
  13857 + },
  13858 + legend: {
  13859 + data: [attrName]
13752 13860 },
13753 13861 xAxis: {
13754 13862 data: xAxisData
13755 13863 },
13756 13864 series: [
13757 13865 {
  13866 + name: attrName,
13758 13867 data: seriesValue
13759 13868 }
13760 13869 ],
... ... @@ -13767,13 +13876,17 @@ class HandleDataSource {
13767 13876 }
13768 13877 }
13769 13878
13770   - getDashboardChartOption(params = { dataList: [], nodeId }) {
13771   - const { dataList = [], nodeId } = params
  13879 + getDashboardChartOption(params = { dataList: [], nodeId, additional: {} }) {
  13880 + const { dataList = [], nodeId, additional = {} } = params
  13881 + const { deviceName, slaveDeviceName, attrName } = additional
13772 13882 const dataSource = this.DispatchInstance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
13773 13883 const { additional: { unit = '°C' } = {} } = dataSource
13774 13884
13775 13885 const [timespan, value] = dataList[0] || []
13776 13886 return {
  13887 + title: {
  13888 + text: slaveDeviceName || deviceName
  13889 + },
13777 13890 series: [
13778 13891 {
13779 13892 type: 'gauge',
... ... @@ -13825,7 +13938,8 @@ class HandleDataSource {
13825 13938 show: false
13826 13939 },
13827 13940 title: {
13828   - show: false
  13941 + text: slaveDeviceName || deviceName,
  13942 + // show: false
13829 13943 },
13830 13944 detail: {
13831 13945 valueAnimation: true,
... ... @@ -13851,13 +13965,15 @@ class HandleDataSource {
13851 13965 /**
13852 13966 * @description 获取仪表盘配置
13853 13967 */
13854   - getRealTimeUpdateDashboardChartOption(params = { dataList: [] }) {
13855   - const { dataList = [], oldOptions } = params
  13968 + getRealTimeUpdateDashboardChartOption(params = { dataList: [] , additional: {}}) {
  13969 + const { dataList = [], oldOptions, additional } = params
  13970 + const { attrName } = additional
13856 13971 const [timespan, value] = dataList[0] || []
13857 13972 console.log(value)
13858 13973 return {
13859 13974 series: [
13860 13975 {
  13976 + name: attrName,
13861 13977 data: [
13862 13978 {
13863 13979 value
... ... @@ -13872,7 +13988,7 @@ class HandleDataSource {
13872 13988 * @description 获取绑定的数据
13873 13989 * @param subscriptionId
13874 13990 * @param actionType
13875   - * @return {*}
  13991 + * @return {{attr: string, additional: { agg: string, dataType: string, effectScope: string, interval: string, unit: string, orgName: string, deviceName: string, slaveDeviceName: string, attrName: string }}}
13876 13992 */
13877 13993 getBindData(subscriptionId) {
13878 13994 const nodeId = this.getNodeIdByCmdId(subscriptionId)
... ... @@ -14491,7 +14607,7 @@ class HandleDynamicEffect {
14491 14607
14492 14608 get contentAllCell() {
14493 14609 // return this.graph.getDefaultParent().children || []
14494   - return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
  14610 + return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
14495 14611 }
14496 14612
14497 14613 /**
... ...