diff --git a/components/common/chartoptions/SankeyChart.js b/components/common/chartoptions/SankeyChart.js new file mode 100644 index 0000000..674fe19 --- /dev/null +++ b/components/common/chartoptions/SankeyChart.js @@ -0,0 +1,46 @@ +// Sankey chart options +export function getSankeyChartOption({ isDarkMode = false, data = [], links = [] }) { + const chartOption = { + backgroundColor: '#FFFFFF', + series: [ + { + data, + links, + + layoutIterations: 0, + type: 'sankey', + left: 25.0, + top: 20.0, + right: 120, + bottom: 50.0, + nodeGap: 10, + nodeAlign: 'left', + lineStyle: { + color: 'source', + curveness: 0.5, + }, + // nodeWidth:10, + // triggerEvent: true, + itemStyle: { + //color: '#1f77b4', + //borderColor: '#1f77b4' + }, + label: { + color: isDarkMode + ? '#FFFFFFD9' + : '#000000E0', + // fontFamily: 'Arial', + fontSize: 14, + }, + }, + ], + tooltip: { + trigger: 'item', + }, + }; + + return chartOption; +} + +export default getSankeyChartOption; + diff --git a/components/common/modal/EqpmSelectPop.vue b/components/common/modal/EqpmSelectPop.vue index d3f3e5a..382a439 100644 --- a/components/common/modal/EqpmSelectPop.vue +++ b/components/common/modal/EqpmSelectPop.vue @@ -404,8 +404,8 @@ export default { rowHeight: 'auto', }; if (this.isMulti) { - // myOptions['rowHeaders'] = [{ type: 'checkbox' }]; - // myOptions['rowHeight'] = 'auto'; + myOptions['rowHeaders'] = [{ type: 'checkbox' }]; + myOptions['rowHeight'] = 'auto'; } @@ -523,12 +523,11 @@ export default { this.loadGrid = true; - // this.$nextTick(() => { - // if (this.isMulti) { - // this.getChecked(); - // } - // }); - + this.$nextTick(() => { + if (this.isMulti) { + this.getChecked(); + } + }); }, setUpdate() { if (this.isMulti) { diff --git a/pages/ems/effc/EnrgMapPage.vue b/pages/ems/effc/EnrgMapPage.vue index fed1f9d..b6699e6 100644 --- a/pages/ems/effc/EnrgMapPage.vue +++ b/pages/ems/effc/EnrgMapPage.vue @@ -14,9 +14,9 @@ - - + + @@ -47,8 +47,13 @@
- +
@@ -68,6 +73,8 @@ import SelectBox from '@/components/common/select/SelectBox'; import DateUtility from '~/plugins/dateUtility'; import Chart from '~/components/common/Chart'; +import getSankeyChartOption from "~/components/common/chartoptions/sankeyChart"; + let myTitle; let myPrgmId; @@ -101,6 +108,8 @@ export default { selectValue01: null, loadChart: false, chartName: 'sankeyChart', + sankeyChartData: [], + sankeyChartLinks: [] }; }, computed: { @@ -148,6 +157,16 @@ export default { }); } }, + isDarkMode(newVal) { + this.setChartOption({ + chartKey: this.chartName, + value: getSankeyChartOption({ + isDarkMode: newVal, + data: this.sankeyChartData, + links: this.sankeyChartLinks + }) + }); + }, }, async beforeCreate() { myPrgmId = this.$route.query.prgmId; @@ -159,9 +178,6 @@ export default { }, async created() { }, async mounted() { - // this.initTest(); - // return; - this.init(); // document.querySelector('.icon_arrow').style.width = document.querySelector('.iconArrowCols').clientWidth-20 + "px"; }, @@ -176,10 +192,8 @@ export default { ...mapActions({ getCodeList: 'modules/search/getCodeList', }), - initTest() { - - const randomNumber = n => Math.floor(Math.random() * n) + 1; - + initTestChart() { + const randomNumber = n => Math.floor(Math.random() * n) + 1; const makeData = [ { name: 'A' }, { name: 'B' }, @@ -205,45 +219,13 @@ export default { ]); } - const chartOption = { - backgroundColor: '#FFFFFF', - series: [ - { - layoutIterations: 0, - type: 'sankey', - left: 25.0, - top: 20.0, - right: 120, - bottom: 50.0, - // nodeWidth:10, - nodeGap: 10, - nodeAlign: 'left', - data: makeData, - links: makeLinks, - lineStyle: { - color: 'source', - curveness: 0.5, - }, - // triggerEvent: true, - itemStyle: { - //color: '#1f77b4', - //borderColor: '#1f77b4' - }, - label: { - color: this.isDarkMode - ? 'rgba(250,250,250,0.7)' - : 'rgba(0,0,0,0.7)', - fontFamily: 'Arial', - fontSize: 12, - }, - }, - ], - tooltip: { - trigger: 'item', - }, - }; - - + this.sankeyChartData = makeData; + this.sankeyChartLinks = makeLinks; + const chartOption = getSankeyChartOption({ + isDarkMode: this.isDarkMode, + data: makeData, + links: makeLinks + }); this.setChartOption({ chartKey: this.chartName, value: chartOption }); this.$nextTick(() => { this.loadChart = true; @@ -254,7 +236,11 @@ export default { this.setFromDt(); }, async search() { - await this.getChartData(); + try{ + await this.getChartData(); + }catch(err){ + this.initTestChart(); + } this.setPageData({ isFind: false, }); @@ -458,43 +444,13 @@ export default { }; } - const chartOption = { - backgroundColor: '#FFFFFF', - series: [ - { - layoutIterations: 0, - type: 'sankey', - left: 25.0, - top: 20.0, - right: 120, - bottom: 50.0, - // nodeWidth:10, - nodeGap: 10, - nodeAlign: 'left', - data: makeData, - links: makeLinks, - lineStyle: { - color: 'source', - curveness: 0.5, - }, - // triggerEvent: true, - itemStyle: { - //color: '#1f77b4', - //borderColor: '#1f77b4' - }, - label: { - color: this.isDarkMode - ? 'rgba(250,250,250,0.7)' - : 'rgba(0,0,0,0.7)', - fontFamily: 'Arial', - fontSize: 12, - }, - }, - ], - tooltip: { - trigger: 'item', - }, - }; + this.sankeyChartData = makeData; + this.sankeyChartLinks = makeLinks; + const chartOption = getSankeyChartOption({ + isDarkMode: this.isDarkMode, + data: makeData, + links: makeLinks + }); this.setChartOption({ chartKey: this.chartName, value: chartOption });