简柏林 / thingskit-scada · Commits

Commit 2beb161adf9702c2e6da826d01c1efd731ee4479

Authored by ww
1 parent edb4d5a6

perf: chart component add legend && title

Inline Side-by-side
Showing 1 changed file with 148 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,13 @@ 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})
  13659 + console.log(chartOption)
13562 13660 instance.setOption(chartOption)
13563 13661
13564 13662 } else {
13565 13663 const oldOptions = instance.getOption()
13566   - const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList })
  13664 + const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList , additional})
13567 13665 if (!instance) clearInterval(interval)
13568 13666 instance && instance.setOption(options)
13569 13667 }
... ... @@ -13581,12 +13679,12 @@ class HandleDataSource {
13581 13679 const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
13582 13680 const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
13583 13681 const instance = chartInstanceMap.get(chartInstanceId)
13584   - const { attr = [[]] } = this.getBindData(subscriptionId)
  13682 + const { attr = [[]], additional } = this.getBindData(subscriptionId)
13585 13683 const historyDataList = data[attr] || []
13586 13684 const showNumberOf = 4
13587 13685 const action = agg === 'NONE' ? 'unshift' : 'push'
13588 13686
13589   - const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action })
  13687 + const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action, additional })
13590 13688
13591 13689 let interval
13592 13690 // TODO 清除定时器
... ... @@ -13624,14 +13722,14 @@ class HandleDataSource {
13624 13722 }
13625 13723
13626 13724 getChartComponentOption(chartInstanceType, params) {
13627   - const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
  13725 + const { LINE_CHART, BAR_CHART, DASHBOARD_CHART, additional } = Sidebar.prototype.enumComponentType
13628 13726 switch (chartInstanceType) {
13629 13727 case LINE_CHART:
13630   - return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }))
  13728 + return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }, additional))
13631 13729 case BAR_CHART:
13632   - return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }))
  13730 + return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }), additional)
13633 13731 case DASHBOARD_CHART:
13634   - return this.getDashboardChartOption(params)
  13732 + return this.getDashboardChartOption(Object.assign(params, additional))
13635 13733 default:
13636 13734 return {}
13637 13735 }
... ... @@ -13656,9 +13754,9 @@ class HandleDataSource {
13656 13754 * @param {@} params
13657 13755 * @returns
13658 13756 */
13659   - getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action }) {
13660   - const { dataList = [], attr = '', chartType = 'bar', action } = params
13661   -
  13757 + getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action, additional }) {
  13758 + const { dataList = [], attr = '', chartType = 'bar', action, additional = {} } = params
  13759 + const { deviceName, slaveDeviceName, attrName } = additional
13662 13760 const xAxisData = []
13663 13761 const seriesValue = []
13664 13762
... ... @@ -13667,13 +13765,13 @@ class HandleDataSource {
13667 13765 xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
13668 13766 seriesValue[action](Number(value))
13669 13767 })
13670   -
13671 13768 return {
13672 13769 title: {
  13770 + text: slaveDeviceName || deviceName,
13673 13771 subtext: dataList.length ? '' : '暂无数据',
13674   - x: 'center',
13675   - y: 'center',
13676   - itemGap: -20,
  13772 + x: dataList.length ? '' : 'center',
  13773 + y: dataList.length ? '' : 'center',
  13774 + // itemGap: -20,
13677 13775 subtextStyle: {
13678 13776 fontSize: 16
13679 13777 }
... ... @@ -13684,6 +13782,9 @@ class HandleDataSource {
13684 13782 type: 'shadow'
13685 13783 }
13686 13784 },
  13785 + legend: {
  13786 + data: [attrName]
  13787 + },
13687 13788 grid: {
13688 13789 left: '3%',
13689 13790 right: '3%',
... ... @@ -13711,6 +13812,7 @@ class HandleDataSource {
13711 13812 },
13712 13813 series: [
13713 13814 {
  13815 + name: attrName,
13714 13816 data: seriesValue,
13715 13817 type: chartType,
13716 13818 }
... ... @@ -13724,8 +13826,9 @@ class HandleDataSource {
13724 13826 }
13725 13827 }
13726 13828
13727   - getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [] }) {
13728   - const { oldOptions, dataList } = params
  13829 + getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [], additional: {} }) {
  13830 + const { oldOptions, dataList, additional = {} } = params
  13831 + const { slaveDeviceName, deviceName, attrName } = additional
13729 13832 const xAxisData = oldOptions.xAxis[0].data || []
13730 13833 const seriesValue = oldOptions.series[0].data || []
13731 13834 const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0
... ... @@ -13748,13 +13851,20 @@ class HandleDataSource {
13748 13851
13749 13852 return {
13750 13853 title: {
13751   - subtext: ''
  13854 + text: slaveDeviceName || deviceName,
  13855 + subtext: '',
  13856 + x: dataList.length ? '' : 'center',
  13857 + y: dataList.length ? '' : 'center',
  13858 + },
  13859 + legend: {
  13860 + data: [attrName]
13752 13861 },
13753 13862 xAxis: {
13754 13863 data: xAxisData
13755 13864 },
13756 13865 series: [
13757 13866 {
  13867 + name: attrName,
13758 13868 data: seriesValue
13759 13869 }
13760 13870 ],
... ... @@ -13767,8 +13877,9 @@ class HandleDataSource {
13767 13877 }
13768 13878 }
13769 13879
13770   - getDashboardChartOption(params = { dataList: [], nodeId }) {
13771   - const { dataList = [], nodeId } = params
  13880 + getDashboardChartOption(params = { dataList: [], nodeId, additional: {} }) {
  13881 + const { dataList = [], nodeId, additional = {} } = params
  13882 + const { deviceName, slaveDeviceName, attrName } = additional
13772 13883 const dataSource = this.DispatchInstance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
13773 13884 const { additional: { unit = '°C' } = {} } = dataSource
13774 13885
... ... @@ -13825,7 +13936,8 @@ class HandleDataSource {
13825 13936 show: false
13826 13937 },
13827 13938 title: {
13828   - show: false
  13939 + text: slaveDeviceName || deviceName,
  13940 + // show: false
13829 13941 },
13830 13942 detail: {
13831 13943 valueAnimation: true,
... ... @@ -13851,13 +13963,15 @@ class HandleDataSource {
13851 13963 /**
13852 13964 * @description 获取仪表盘配置
13853 13965 */
13854   - getRealTimeUpdateDashboardChartOption(params = { dataList: [] }) {
13855   - const { dataList = [], oldOptions } = params
  13966 + getRealTimeUpdateDashboardChartOption(params = { dataList: [] , additional: {}}) {
  13967 + const { dataList = [], oldOptions, additional } = params
  13968 + const { attrName } = additional
13856 13969 const [timespan, value] = dataList[0] || []
13857 13970 console.log(value)
13858 13971 return {
13859 13972 series: [
13860 13973 {
  13974 + name: attrName,
13861 13975 data: [
13862 13976 {
13863 13977 value
... ... @@ -13872,7 +13986,7 @@ class HandleDataSource {
13872 13986 * @description 获取绑定的数据
13873 13987 * @param subscriptionId
13874 13988 * @param actionType
13875   - * @return {*}
  13989 + * @return {{attr: string, additional: { agg: string, dataType: string, effectScope: string, interval: string, unit: string, orgName: string, deviceName: string, slaveDeviceName: string, attrName: string }}}
13876 13990 */
13877 13991 getBindData(subscriptionId) {
13878 13992 const nodeId = this.getNodeIdByCmdId(subscriptionId)
... ... @@ -14491,7 +14605,7 @@ class HandleDynamicEffect {
14491 14605
14492 14606 get contentAllCell() {
14493 14607 // return this.graph.getDefaultParent().children || []
14494   - return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
  14608 + return Object.entries(this.graph?.getModel()?.cells || {}).map(([_, item]) => item) || []
14495 14609 }
14496 14610
14497 14611 /**
... ...