sk_fems_ui/components/widget/GridWidget.vue

<template>
	<div class="l-layout">
		<v-row ref="rowParent">
			<v-col :cols="12">
				<v-card class="pa-5 widget-card">
					<div class="d-flex align-center justify-space-between">
						<v-card-title class="pa-0">그리드</v-card-title>
						<v-btn :ripple="false" @click="btnAction('popWidget')">화면</v-btn>
					</div>
					<div class="d-flex align-center justify-space-between mt-8">
						<div class="mr-5" :style="{ width: '240px', height: '170px' }">
							<component
								:ref="gridName"
								:is="loadGrid ? 'Grid' : null"
								:parentPrgmId="parentPrgmId"
								:gridName="gridName"
							/>
						</div>
					</div>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'; // , mapActions
import Vue from 'vue';
import DateUtility from '~/plugins/dateUtility';
import Utility from '~/plugins/utility';
import Grid from '~/components/common/Grid';
import Chart from '~/components/common/Chart';

export default {
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
	},
	components: {
		DateUtility,
		Grid,
		Chart,
	},
	computed: {
		...mapState({
			searchParam(state) {
				return state.pageData[this.parentPrgmId];
			},
			isDarkMode: 'isDarkMode',
		}),
	},
	watch: {},
	beforeCreate() {
		this.$store.commit('setWidgetPageData', {
			prgmId: this.$route.query.prgmId,
			gridWidget: { gridWidgetData },
		});
		// console.log("2.vue::beforeCreate");
	},
	created() {
		this.search();
	},
	mounted() {},
	data() {
		return {
			loadGrid: false,
			gridName: 'rowGrid',
		};
	},
	methods: {
		...mapMutations({
			setPageData: 'setPageData',
			setWidgetChartOption: 'setWidgetChartOption',
			openDashboardWidget: 'openDashboardWidget',
		}),
		...mapActions({
			postApi: 'modules/list/postApi',
			postApiReturn: 'modules/list/postApiReturn',
		}),
		gridInit() {
			const gridHeight = this.$refs.gridParent.offsetHeight - 36;

			const myOptions = {
				scrollX: false,
			};
			this.setGridOption({
				gridKey: this.gridName,
				// value: myOptions
				value: Object.assign(Utility.defaultGridOption(gridHeight), myOptions),
			});
			this.setGridColumn({
				gridKey: this.gridName,
				value: myColumns,
			});

			// this.getRowGridData();

			this.loadGrid = true;
		},
		async search() {
			await this.getRowGridData();
			await this.setPageData({
				isFind: false,
			});
		},
		async getUseWithPeak() {
			this.loadChart_01 = false;
			const res = await this.postApiReturn({
				apiKey: 'selectUseWithPeak',
				resKey: 'peakData',
				sendParam: {},
			});

			res.forEach((item, idx) => {
				this.chargedPower = Utility.setFormatInt(item.peakVal);
				this.nowPeakVal = Utility.setFormatInt(item.curPeakVal);
			});

			this.$nextTick(() => {
				this.setChart01Data(res);
			});
		},

		//차트Setting
		async setChart01Data(data) {
			this.$store.state.pageData[
				this.parentPrgmId
			].peakWidget.peakWidgetData.series = [];
			if (!data.length) {
				return;
			}

			const arrDarkColors = {
				정상: '#01ae6a',
				주의: '#ffb046',
				위험: '#f6637b',
			};
			const arrLightColors = {
				정상: '#01ae6a',
				주의: '#ffb046',
				위험: '#f6637b',
			};

			const darkGaugeColors = [
				[0.125, '#009245'],
				[0.25, '#39b54a'],
				[0.375, '#d9e021'],
				[0.5, '#fcee21'],
				[0.625, '#fbb03b'],
				[0.75, '#f7931e'],
				[0.875, '#f15a24'],
				[1.0, '#ed1c24'],
			];
			const lightGaugeColors = [
				[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 chartOption = {
				series: [
					{
						type: 'gauge',
						startAngle: 180,
						endAngle: 0,
						min: 0,
						max: 100,
						radius: '100%',
						splitNumber: 8,
						axisLine: {
							lineStyle: {
								width: 30,
								color: this.isDarkMode ? darkGaugeColors : lightGaugeColors,
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
						pointer: {
							length: '80%',
							width: 5,
							itemStyle: {
								color: this.isDarkMode ? '#fff' : '#333333',
							},
						},
						anchor: {
							show: true,
							showAbove: true,
							size: 10,
							itemStyle: {
								borderWidth: 10,
								borderColor: this.isDarkMode ? '#fff' : '#333333',
							},
						},
						title: {
							offsetCenter: ['90%', '30%'],
							fontSize: 20,
							color: this.isDarkMode
								? arrDarkColors[data[0].peakStat]
								: arrLightColors[data[0].peakStat],
							fontWeight: 'bold',
						},
						detail: {
							fontSize: 20,
							offsetCenter: ['-75%', '30%'],
							valueAnimation: true,
							formatter: function(value) {
								return '{value|' + value.toFixed(2) + '}{unit|%}';
							},
							rich: {
								value: {
									fontSize: 20,
									color: this.isDarkMode ? '#fff' : '#111111',
									fontWeight: 'bolder',
								},
								unit: {
									fontSize: 14,
									color: this.isDarkMode ? '#fff' : '#111111',
									fontWeight: 'bolder',
									padding: [0, 0, -5, 0],
								},
							},
						},
						data: [
							{
								name: data[0].peakStat,
								value: data[0].peakRto,
							},
						],
					},
				],
			};
			this.setWidgetChartOption({
				prgmId: this.$route.query.prgmId,
				widgetKey: 'peakWidget',
				widgetData: 'peakWidgetData',
				chartKey: 'peakGauge',
				value: chartOption,
			});

			this.loadChart_01 = true;
		},
		btnAction(action) {
			switch (action) {
				case 'popWidget':
					this.openDashboardWidget({
						prgmId: this.$route.query.prgmId,
						widgetId: 'PeakWidget',
					});
					break;
			}
		},
	},
};
const gridWidgetData = {
	peakGauge: Utility.defaultChartOption(true),
};
</script>

<style lang="scss">
.v-avatar {
	border-radius: 21px;
	font-size: 1.75rem;
}
.v-virtual-scroll-wrapper {
	overflow-y: auto;
	max-height: 210px;
}
</style>