410 lines
7.6 KiB
Vue
410 lines
7.6 KiB
Vue
<template>
|
|
<div class="chart-wrap">
|
|
<v-chart
|
|
class="chart"
|
|
:option="chartOption"
|
|
ref="VChart"
|
|
@click="onClick"
|
|
@dblclick="onDblClick"
|
|
@click.right="onRightClick"
|
|
@legendselectchanged="onLegendSelectChanged"
|
|
autoresize
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VChart from 'vue-echarts';
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
components: {
|
|
VChart,
|
|
},
|
|
props: {
|
|
parentPrgmId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
widgetId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
widgetData: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
modalId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
modalDataKey: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
chartName: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
chartColor: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
legendSeletedList: {},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
isDarkMode: 'isDarkMode',
|
|
|
|
chartOption(state) {
|
|
var dark_Col = [
|
|
'#01AE6A',
|
|
'#FFB046',
|
|
'#F6637B',
|
|
'#944FE9',
|
|
'#4385E3',
|
|
'#00AA8C',
|
|
'#FF8808',
|
|
'#EA5E9A',
|
|
'#B742D9',
|
|
'#6363DA',
|
|
'#79B100',
|
|
'#D66500',
|
|
'#DC5ABC',
|
|
'#764FD7',
|
|
'#009DD1',
|
|
'#3BAD43',
|
|
'#D75E3D',
|
|
'#CF4DCA',
|
|
'#A148D9',
|
|
'#5972DF',
|
|
];
|
|
var darkCol_1_5 = [
|
|
'#01AE6A',
|
|
'#089362',
|
|
'#0F7959',
|
|
'#165E51',
|
|
'#19514D',
|
|
];
|
|
var darkCol_1_10 = [
|
|
'#01AE6A',
|
|
'#04A166',
|
|
'#089362',
|
|
'#0B865D',
|
|
'#0F7959',
|
|
'#126C55',
|
|
'#165E51',
|
|
'#19514D',
|
|
'#1D4448',
|
|
'#1F3D46',
|
|
];
|
|
var darkCol_2_5 = [
|
|
'#FFB046',
|
|
'#D39545',
|
|
'#A77A44',
|
|
'#7C5F42',
|
|
'#665242',
|
|
];
|
|
var darkCol_2_10 = [
|
|
'#FFB046',
|
|
'#EAA345',
|
|
'#D39545',
|
|
'#BE8844',
|
|
'#A77A44',
|
|
'#926D43',
|
|
'#7C5F42',
|
|
'#665242',
|
|
'#4C4141',
|
|
'#453D41',
|
|
];
|
|
var darkCol_3_5 = [
|
|
'#F6637B',
|
|
'#CC576F',
|
|
'#A24C63',
|
|
'#784058',
|
|
'#633B52',
|
|
];
|
|
var darkCol_3_10 = [
|
|
'#F6637B',
|
|
'#E15D75',
|
|
'#CC576F',
|
|
'#B75269',
|
|
'#A24C63',
|
|
'#8D465E',
|
|
'#784058',
|
|
'#633B52',
|
|
'#4E354C',
|
|
'#433249',
|
|
];
|
|
var darkCol_4_5 = [
|
|
'#944FE9',
|
|
'#7E47C7',
|
|
'#6740A5',
|
|
'#513884',
|
|
'#463473',
|
|
];
|
|
var darkCol_4_10 = [
|
|
'#944FE9',
|
|
'#894BD8',
|
|
'#7E47C7',
|
|
'#7344B7',
|
|
'#6740A5',
|
|
'#5C3C95',
|
|
'#513884',
|
|
'#463473',
|
|
'#3A3162',
|
|
'#352F59',
|
|
];
|
|
var darkCol_5_5 = [
|
|
'#4385E3',
|
|
'#3D73C2',
|
|
'#3760A2',
|
|
'#304E81',
|
|
'#2D4571',
|
|
];
|
|
var darkCol_5_10 = [
|
|
'#4385E3',
|
|
'#407CD3',
|
|
'#3D73C2',
|
|
'#3A6AB2',
|
|
'#3760A2',
|
|
'#345792',
|
|
'#304E81',
|
|
'#2D4571',
|
|
'#2A3B61',
|
|
'#293758',
|
|
];
|
|
var darkCol_dashGauge = [
|
|
[0.125, '#009245'],
|
|
[0.25, '#39b54a'],
|
|
[0.375, '#d9e021'],
|
|
[0.5, '#fcee21'],
|
|
[0.625, '#fbb03b'],
|
|
[0.75, '#f7931e'],
|
|
[0.875, '#f15a24'],
|
|
[1.0, '#ed1c24'],
|
|
];
|
|
var darkCol_dashUseStatus = ['#2fad35', '#fb8200', '#fb5a8b'];
|
|
var darkCol_dashTodayUsageCost = ['#01ae6a', '#ffb046', '#f6637b'];
|
|
var darkCol_dashEnrgUsage = ['#01ae6a', '#4385e3'];
|
|
var darkCol_dashReadplcStatus = ['#01ae6a', '#ffb046', '#f6637b'];
|
|
var lightCol_dashReadplcStatus = ['#3cc380', '#ffb13b', '#f98694'];
|
|
|
|
var light_Col = [
|
|
'#3CC380',
|
|
'#FFB13B',
|
|
'#F98694',
|
|
'#CF74E5',
|
|
'#6A9BF4',
|
|
'#29BCA2',
|
|
'#EC8D3B',
|
|
'#FC749D',
|
|
'#CF74E5',
|
|
'#7E84FF',
|
|
'#83BE01',
|
|
'#D58B03',
|
|
'#FF7E71',
|
|
'#BE6DF0',
|
|
'#3FAED2',
|
|
'#5DBF63',
|
|
'#D1886C',
|
|
'#ED71B7',
|
|
'#977EE6',
|
|
'#7A8EE2',
|
|
];
|
|
var lightCol_1_5 = [
|
|
'#3CC380',
|
|
'#5BCD94',
|
|
'#7BD6A9',
|
|
'#99E0BD',
|
|
'#B1E7CC',
|
|
];
|
|
var lightCol_1_10 = [
|
|
'#3CC380',
|
|
'#4BC88A',
|
|
'#5BCD94',
|
|
'#6BD19E',
|
|
'#7BD6A9',
|
|
'#8ADBB3',
|
|
'#99E0BD',
|
|
'#A9E5C7',
|
|
'#B9E9D1',
|
|
'#C9EEDC',
|
|
];
|
|
var lightCol_2_5 = [
|
|
'#FFB13B',
|
|
'#FFBE5B',
|
|
'#FFCA7A',
|
|
'#FFD699',
|
|
'#FFE0B1',
|
|
];
|
|
var lightCol_2_10 = [
|
|
'#FFB13B',
|
|
'#FFB74A',
|
|
'#FFBE5B',
|
|
'#FFC46A',
|
|
'#FFCA7A',
|
|
'#FFD089',
|
|
'#FFD699',
|
|
'#FFDDA9',
|
|
'#FFE3B8',
|
|
'#FFE9C8',
|
|
];
|
|
var lightCol_3_5 = [
|
|
'#F98694',
|
|
'#FA99A5',
|
|
'#FBADB6',
|
|
'#FCC0C7',
|
|
'#FDCFD4',
|
|
];
|
|
var lightCol_3_10 = [
|
|
'#F98694',
|
|
'#F98F9C',
|
|
'#FA99A5',
|
|
'#FAA3AE',
|
|
'#FBADB6',
|
|
'#FBB6BF',
|
|
'#FCC0C7',
|
|
'#FCCAD0',
|
|
'#FDD3D8',
|
|
'#FDDDE1',
|
|
];
|
|
var lightCol_4_5 = [
|
|
'#CF74E5',
|
|
'#D78AE9',
|
|
'#DEA1ED',
|
|
'#E6B7F1',
|
|
'#ECC7F5',
|
|
];
|
|
var lightCol_4_10 = [
|
|
'#CF74E5',
|
|
'#D37FE7',
|
|
'#D78AE9',
|
|
'#DA95EB',
|
|
'#DEA1ED',
|
|
'#E2ACEF',
|
|
'#E6B7F1',
|
|
'#EAC2F4',
|
|
'#EECDF6',
|
|
'#F2D8F8',
|
|
];
|
|
var lightCol_5_5 = [
|
|
'#6A9BF4',
|
|
'#82ABF6',
|
|
'#9ABBF8',
|
|
'#B1CBF9',
|
|
'#C3D7FB',
|
|
];
|
|
var lightCol_5_10 = [
|
|
'#6A9BF4',
|
|
'#76A3F5',
|
|
'#82ABF6',
|
|
'#8EB3F7',
|
|
'#9ABBF8',
|
|
'#A6C3F8',
|
|
'#B1CBF9',
|
|
'#BED3FA',
|
|
'#C9DBFB',
|
|
'#D6E3FC',
|
|
];
|
|
var lightCol_dashGauge = [
|
|
[0.125, '#58c06f'],
|
|
[0.25, '#7cd574'],
|
|
[0.375, '#fbe462'],
|
|
[0.5, '#ffd771'],
|
|
[0.625, '#ffad7f'],
|
|
[0.75, '#ff966e'],
|
|
[0.875, '#ff706e'],
|
|
[1.0, '#ff6689'],
|
|
];
|
|
var lightCol_dashUseStatus = ['#00c875', '#fdab3d', '#ff7b8b'];
|
|
var lightCol_dashTodayUsageCost = ['#3cc380', '#cf74e5', '#ffb13b'];
|
|
var lightCol_dashEnrgUsage = ['#ce83e0', '#78a3f3'];
|
|
var lightCol_dashReadplcStatus = ['#3cc380', '#ffb13b', '#f98694'];
|
|
|
|
var tmpChrtOp;
|
|
if (this.widgetId || this.widgetData) {
|
|
tmpChrtOp =
|
|
state.pageData[this.parentPrgmId][this.widgetId][this.widgetData][
|
|
this.chartName
|
|
];
|
|
} else if(this.modalId || this.modalDataKey) {
|
|
tmpChrtOp =
|
|
state.pageData[this.parentPrgmId][this.modalId][this.modalDataKey][this.chartName];
|
|
} else {
|
|
tmpChrtOp = state.pageData[this.parentPrgmId][this.chartName];
|
|
}
|
|
|
|
if (this.chartColor != undefined) {
|
|
if (this.isDarkMode) {
|
|
tmpChrtOp.color = eval('darkCol_' + this.chartColor);
|
|
} else {
|
|
tmpChrtOp.color = eval('lightCol_' + this.chartColor);
|
|
}
|
|
} else {
|
|
if (this.isDarkMode) {
|
|
tmpChrtOp.color = dark_Col;
|
|
} else {
|
|
tmpChrtOp.color = light_Col;
|
|
}
|
|
}
|
|
return tmpChrtOp;
|
|
},
|
|
}),
|
|
},
|
|
methods: {
|
|
onClick(event, instance, ECharts) {
|
|
console.log('onClick : ', event);
|
|
this.$emit('click', event);
|
|
},
|
|
onDblClick(event, instance, ECharts) {
|
|
console.log('onDblClick : ', event);
|
|
this.$emit('dblclick', event);
|
|
},
|
|
onRightClick(event, instance, ECharts) {
|
|
console.log('onRightClick : ', event);
|
|
this.$emit('rclick', event);
|
|
},
|
|
onLegendSelect(params) {
|
|
const myChart = this.$refs.VChart;
|
|
for (const key of params) {
|
|
//차트 instance에 'legendSelect' action 전달
|
|
myChart.dispatchAction({
|
|
type: 'legendSelect',
|
|
name: key,
|
|
});
|
|
}
|
|
},
|
|
onLegendUnSelect(params) {
|
|
const myChart = this.$refs.VChart;
|
|
for (const key of params) {
|
|
//차트 instance에 'legendUnSelect' action 전달
|
|
myChart.dispatchAction({
|
|
type: 'legendUnSelect',
|
|
name: key,
|
|
});
|
|
}
|
|
},
|
|
onLegendSelectChanged(params) {
|
|
const obj = params.selected;
|
|
this.legendSeletedList = obj;
|
|
},
|
|
onGetChangedLegendSeletedList() {
|
|
return this.legendSeletedList;
|
|
},
|
|
onGetLegendSelectedList() {
|
|
const myChart = this.$refs.VChart;
|
|
return myChart.getOption().legend[0].selected;
|
|
},
|
|
clear() {
|
|
const myChart = this.$refs.VChart;
|
|
myChart.clear();
|
|
},
|
|
},
|
|
};
|
|
</script>
|