fix bugs 47, 145
This commit is contained in:

parent
1ece377457
commit
d6dd66c4b3
46
components/common/chartoptions/SankeyChart.js
Normal file
46
components/common/chartoptions/SankeyChart.js
Normal file
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -14,9 +14,9 @@
|
||||
<!-- 대상일 -->
|
||||
<component :is="'Datepicker'" :parentPrgmId="myPrgmId" :label="'대상일'" :labelCols="3" customClass="datepicker-large" />
|
||||
</v-col>
|
||||
<v-col :cols="4" class="text-right">
|
||||
<BtnSearch @click="search" size="large" />
|
||||
<v-col :cols="6" class="text-right">
|
||||
<!-- 조회버튼 -->
|
||||
<BtnSearch @click="search" size="large" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
@ -47,8 +47,13 @@
|
||||
</v-row>
|
||||
<div class="px-5" style="height: 80%">
|
||||
<div ref="chartParent" class="w100 h100">
|
||||
<component :ref="chartName" class="w100 h100" :is="loadChart ? 'Chart' : null" :parentPrgmId="myPrgmId"
|
||||
:chartName="chartName" />
|
||||
<component
|
||||
:ref="chartName"
|
||||
class="w100 h100"
|
||||
:is="loadChart ? 'Chart' : null"
|
||||
:parentPrgmId="myPrgmId"
|
||||
:chartName="chartName"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
@ -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() {
|
||||
|
||||
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',
|
||||
this.sankeyChartData = makeData;
|
||||
this.sankeyChartLinks = makeLinks;
|
||||
const chartOption = getSankeyChartOption({
|
||||
isDarkMode: this.isDarkMode,
|
||||
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',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
links: makeLinks
|
||||
});
|
||||
this.setChartOption({ chartKey: this.chartName, value: chartOption });
|
||||
this.$nextTick(() => {
|
||||
this.loadChart = true;
|
||||
@ -254,7 +236,11 @@ export default {
|
||||
this.setFromDt();
|
||||
},
|
||||
async search() {
|
||||
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',
|
||||
this.sankeyChartData = makeData;
|
||||
this.sankeyChartLinks = makeLinks;
|
||||
const chartOption = getSankeyChartOption({
|
||||
isDarkMode: this.isDarkMode,
|
||||
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',
|
||||
},
|
||||
};
|
||||
links: makeLinks
|
||||
});
|
||||
|
||||
this.setChartOption({ chartKey: this.chartName, value: chartOption });
|
||||
|
||||
|
Reference in New Issue
Block a user