652 lines
15 KiB
Vue
652 lines
15 KiB
Vue
|
<template>
|
|||
|
|
<div class="graph-container">
|
|||
|
|
<div class="echarts-container">
|
|||
|
|
<div class="zoom-controls">
|
|||
|
|
<button class="zoom-btn" title="확대" @click="zoomIn">
|
|||
|
|
<span>+</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="zoom-btn" title="축소" @click="zoomOut">
|
|||
|
|
<span>−</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="zoom-btn reset" title="초기화" @click="resetZoom">
|
|||
|
|
<span>⟲</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div ref="growthChartRef" class="echarts-graph"></div>
|
|||
|
|
<div class="yaxis-scroll-bar-overlay">
|
|||
|
|
<input
|
|||
|
|
v-model.number="yAxisScrollIndex"
|
|||
|
|
type="range"
|
|||
|
|
min="0"
|
|||
|
|
:max="Math.max(0, filteredYAxisList.length - 2)"
|
|||
|
|
:disabled="filteredYAxisList.length <= 2"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted, watch, computed, onUnmounted } from "vue";
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
const props = defineProps<{ batchIndex: number }>();
|
|||
|
|
|
|||
|
|
// --- 기존 culture-graph.vue에서 필요한 상수/데이터 복사 ---
|
|||
|
|
const pastelColors = [
|
|||
|
|
"#A3D8F4",
|
|||
|
|
"#F7B7A3",
|
|||
|
|
"#B5EAD7",
|
|||
|
|
"#FFDAC1",
|
|||
|
|
"#C7CEEA",
|
|||
|
|
"#FFF1BA",
|
|||
|
|
"#FFB7B2",
|
|||
|
|
"#B4A7D6",
|
|||
|
|
"#AED9E0",
|
|||
|
|
"#FFC3A0",
|
|||
|
|
"#E2F0CB",
|
|||
|
|
"#FFB347",
|
|||
|
|
"#C1C8E4",
|
|||
|
|
"#FFFACD",
|
|||
|
|
"#FFD1DC",
|
|||
|
|
];
|
|||
|
|
const yAxisList = [
|
|||
|
|
{
|
|||
|
|
name: "ORP",
|
|||
|
|
unit: "",
|
|||
|
|
color: pastelColors[0],
|
|||
|
|
min: 0,
|
|||
|
|
max: 1000,
|
|||
|
|
ticks: [1000, 800, 600, 400, 200, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Air flow",
|
|||
|
|
unit: "(L/min)",
|
|||
|
|
color: pastelColors[1],
|
|||
|
|
min: 0,
|
|||
|
|
max: 30,
|
|||
|
|
ticks: [30, 25, 20, 15, 10, 5, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "DO",
|
|||
|
|
unit: "",
|
|||
|
|
color: pastelColors[2],
|
|||
|
|
min: 0,
|
|||
|
|
max: 200,
|
|||
|
|
ticks: [200, 150, 100, 50, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Feed TK1",
|
|||
|
|
unit: "(L)",
|
|||
|
|
color: pastelColors[3],
|
|||
|
|
min: 0,
|
|||
|
|
max: 10,
|
|||
|
|
ticks: [10, 8, 6, 4, 2, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Feed TK2",
|
|||
|
|
unit: "(L)",
|
|||
|
|
color: pastelColors[4],
|
|||
|
|
min: 0,
|
|||
|
|
max: 10,
|
|||
|
|
ticks: [10, 8, 6, 4, 2, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "pH",
|
|||
|
|
unit: "",
|
|||
|
|
color: pastelColors[5],
|
|||
|
|
min: 6.0,
|
|||
|
|
max: 8.0,
|
|||
|
|
ticks: [8.0, 7.5, 7.0, 6.5, 6.0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Pressure",
|
|||
|
|
unit: "(bar)",
|
|||
|
|
color: pastelColors[6],
|
|||
|
|
min: 0,
|
|||
|
|
max: 2,
|
|||
|
|
ticks: [2, 1.5, 1, 0.5, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "RPM",
|
|||
|
|
unit: "",
|
|||
|
|
color: pastelColors[7],
|
|||
|
|
min: 0,
|
|||
|
|
max: 3000,
|
|||
|
|
ticks: [3000, 2400, 1800, 1200, 600, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "CO2",
|
|||
|
|
unit: "(%)",
|
|||
|
|
color: pastelColors[8],
|
|||
|
|
min: 0,
|
|||
|
|
max: 10,
|
|||
|
|
ticks: [10, 8, 6, 4, 2, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "JAR Vol",
|
|||
|
|
unit: "(L)",
|
|||
|
|
color: pastelColors[9],
|
|||
|
|
min: 0,
|
|||
|
|
max: 20,
|
|||
|
|
ticks: [20, 16, 12, 8, 4, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "WEIGHT",
|
|||
|
|
unit: "(kg)",
|
|||
|
|
color: pastelColors[10],
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
ticks: [100, 80, 60, 40, 20, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "O2",
|
|||
|
|
unit: "(%)",
|
|||
|
|
color: pastelColors[11],
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
ticks: [100, 80, 60, 40, 20, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "NV",
|
|||
|
|
unit: "",
|
|||
|
|
color: pastelColors[12],
|
|||
|
|
min: 0,
|
|||
|
|
max: 10,
|
|||
|
|
ticks: [10, 8, 6, 4, 2, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "NIR",
|
|||
|
|
unit: "",
|
|||
|
|
color: pastelColors[13],
|
|||
|
|
min: 0,
|
|||
|
|
max: 10,
|
|||
|
|
ticks: [10, 8, 6, 4, 2, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Temperature",
|
|||
|
|
unit: "(℃)",
|
|||
|
|
color: pastelColors[14],
|
|||
|
|
min: 0,
|
|||
|
|
max: 50,
|
|||
|
|
ticks: [50, 40, 30, 20, 10, 0],
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const intervalValue = ref(60); // 1분
|
|||
|
|
const totalSeconds = 100 * 60 * 60;
|
|||
|
|
const pointsPerLine = computed(
|
|||
|
|
() => Math.floor(totalSeconds / intervalValue.value) + 1
|
|||
|
|
);
|
|||
|
|
const xLabels = computed(() =>
|
|||
|
|
Array.from({ length: pointsPerLine.value }, (_, i) => i * intervalValue.value)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// --- batchIndex에 따라 곡선 패턴이 다르게 나오도록 smoothData 수정 ---
|
|||
|
|
function smoothData(
|
|||
|
|
min: number,
|
|||
|
|
max: number,
|
|||
|
|
xLabels: number[],
|
|||
|
|
phase = 0,
|
|||
|
|
_amp = 1,
|
|||
|
|
offset = 0,
|
|||
|
|
seriesIndex: number
|
|||
|
|
) {
|
|||
|
|
let _prevValue = 0.5;
|
|||
|
|
const values = [];
|
|||
|
|
// batchIndex를 곡선 패턴에 반영 (phase, ampVar, randomFactor 등)
|
|||
|
|
const batchPhase = phase + (props.batchIndex * Math.PI) / 5;
|
|||
|
|
const ampVar = 0.2 + ((seriesIndex + props.batchIndex) % 5) * 0.1;
|
|||
|
|
const randomFactor = 0.01 + 0.01 * ((seriesIndex + props.batchIndex) % 4);
|
|||
|
|
const trendType = (seriesIndex + props.batchIndex) % 4;
|
|||
|
|
const rangeMin = min + (max - min) * 0.1;
|
|||
|
|
const rangeMax = max - (max - min) * 0.1;
|
|||
|
|
for (let i = 0; i < xLabels.length; i++) {
|
|||
|
|
const t = i / (xLabels.length - 1);
|
|||
|
|
let base;
|
|||
|
|
if (trendType === 0) {
|
|||
|
|
base =
|
|||
|
|
0.2 + 0.6 * t + 0.13 * Math.sin(batchPhase + t * Math.PI * ampVar * 8);
|
|||
|
|
} else if (trendType === 1) {
|
|||
|
|
base =
|
|||
|
|
0.8 - 0.6 * t + 0.13 * Math.cos(batchPhase + t * Math.PI * ampVar * 8);
|
|||
|
|
} else if (trendType === 2) {
|
|||
|
|
base = 0.5 + 0.22 * Math.sin(batchPhase + t * Math.PI * ampVar * 12);
|
|||
|
|
} else {
|
|||
|
|
base =
|
|||
|
|
0.5 + 0.08 * Math.sin(batchPhase + t * Math.PI * ampVar * 6) + 0.2 * t;
|
|||
|
|
}
|
|||
|
|
// 노이즈도 batchIndex에 따라 다르게
|
|||
|
|
const noise =
|
|||
|
|
(Math.sin(i + props.batchIndex * 13) * 0.5 + 0.5) *
|
|||
|
|
randomFactor *
|
|||
|
|
(Math.random() - 0.5);
|
|||
|
|
base += noise;
|
|||
|
|
base = Math.max(0, Math.min(1, base));
|
|||
|
|
const value = +(rangeMin + (rangeMax - rangeMin) * base + offset).toFixed(
|
|||
|
|
2
|
|||
|
|
);
|
|||
|
|
_prevValue = base;
|
|||
|
|
values.push([xLabels[i], value]);
|
|||
|
|
}
|
|||
|
|
return values;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const checkedList = ref(yAxisList.map(y => y.name));
|
|||
|
|
const filteredYAxisList = computed(() =>
|
|||
|
|
yAxisList.filter(y => checkedList.value.includes(y.name))
|
|||
|
|
);
|
|||
|
|
const filteredSeriesList = computed(() =>
|
|||
|
|
seriesList.value.filter(s => checkedList.value.includes(s.name))
|
|||
|
|
);
|
|||
|
|
const yAxisScrollIndex = ref(0);
|
|||
|
|
const visibleYAxisList = computed(() =>
|
|||
|
|
filteredYAxisList.value.slice(
|
|||
|
|
yAxisScrollIndex.value,
|
|||
|
|
yAxisScrollIndex.value + 2
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const seriesList = computed(() => [
|
|||
|
|
{
|
|||
|
|
name: "ORP",
|
|||
|
|
color: pastelColors[0],
|
|||
|
|
yAxisIndex: 0,
|
|||
|
|
data: smoothData(400, 900, xLabels.value, 0, 1, 0, 0),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Air flow",
|
|||
|
|
color: pastelColors[1],
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
data: smoothData(5, 25, xLabels.value, Math.PI / 2, 1, 0, 1),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "DO",
|
|||
|
|
color: pastelColors[2],
|
|||
|
|
yAxisIndex: 2,
|
|||
|
|
data: smoothData(80, 180, xLabels.value, Math.PI / 3, 1, 0, 2),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Feed TK1",
|
|||
|
|
color: pastelColors[3],
|
|||
|
|
yAxisIndex: 3,
|
|||
|
|
data: smoothData(2, 8, xLabels.value, Math.PI / 4, 1, 0, 3),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Feed TK2",
|
|||
|
|
color: pastelColors[4],
|
|||
|
|
yAxisIndex: 4,
|
|||
|
|
data: smoothData(2, 8, xLabels.value, Math.PI / 5, 1, 0, 4),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "pH",
|
|||
|
|
color: pastelColors[5],
|
|||
|
|
yAxisIndex: 5,
|
|||
|
|
data: smoothData(6.7, 7.6, xLabels.value, Math.PI / 6, 1, 0, 5),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Pressure",
|
|||
|
|
color: pastelColors[6],
|
|||
|
|
yAxisIndex: 6,
|
|||
|
|
data: smoothData(0.5, 1.5, xLabels.value, Math.PI / 7, 1, 0, 6),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "RPM",
|
|||
|
|
color: pastelColors[7],
|
|||
|
|
yAxisIndex: 7,
|
|||
|
|
data: smoothData(1000, 2500, xLabels.value, Math.PI / 8, 1, 0, 7),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "CO2",
|
|||
|
|
color: pastelColors[8],
|
|||
|
|
yAxisIndex: 8,
|
|||
|
|
data: smoothData(2, 8, xLabels.value, Math.PI / 9, 1, 0, 8),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "JAR Vol",
|
|||
|
|
color: pastelColors[9],
|
|||
|
|
yAxisIndex: 9,
|
|||
|
|
data: smoothData(5, 18, xLabels.value, Math.PI / 10, 1, 0, 9),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "WEIGHT",
|
|||
|
|
color: pastelColors[10],
|
|||
|
|
yAxisIndex: 10,
|
|||
|
|
data: smoothData(20, 90, xLabels.value, Math.PI / 11, 1, 0, 10),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "O2",
|
|||
|
|
color: pastelColors[11],
|
|||
|
|
yAxisIndex: 11,
|
|||
|
|
data: smoothData(20, 90, xLabels.value, Math.PI / 12, 1, 0, 11),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "NV",
|
|||
|
|
color: pastelColors[12],
|
|||
|
|
yAxisIndex: 12,
|
|||
|
|
data: smoothData(2, 8, xLabels.value, Math.PI / 13, 1, 0, 12),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "NIR",
|
|||
|
|
color: pastelColors[13],
|
|||
|
|
yAxisIndex: 13,
|
|||
|
|
data: smoothData(2, 8, xLabels.value, Math.PI / 14, 1, 0, 13),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "Temperature",
|
|||
|
|
color: pastelColors[14],
|
|||
|
|
yAxisIndex: 14,
|
|||
|
|
data: smoothData(30, 38, xLabels.value, Math.PI / 15, 1, 0, 14),
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const batchMarkLines = [
|
|||
|
|
// 배치1
|
|||
|
|
[
|
|||
|
|
{ xAxis: 6 * 3600, name: "1F" },
|
|||
|
|
{ xAxis: 10 * 3600, name: "2F" },
|
|||
|
|
{ xAxis: 12 * 3600, name: "Seed" },
|
|||
|
|
{ xAxis: 22 * 3600, name: "Main" },
|
|||
|
|
],
|
|||
|
|
// 배치2
|
|||
|
|
[
|
|||
|
|
{ xAxis: 12 * 3600, name: "1F" },
|
|||
|
|
{ xAxis: 18 * 3600, name: "2F" },
|
|||
|
|
{ xAxis: 16 * 3600, name: "Seed" },
|
|||
|
|
{ xAxis: 36 * 3600, name: "Main" },
|
|||
|
|
],
|
|||
|
|
// 배치3
|
|||
|
|
[
|
|||
|
|
{ xAxis: 15 * 3600, name: "1F" },
|
|||
|
|
{ xAxis: 30 * 3600, name: "2F" },
|
|||
|
|
{ xAxis: 45 * 3600, name: "Seed" },
|
|||
|
|
{ xAxis: 60 * 3600, name: "Main" },
|
|||
|
|
],
|
|||
|
|
// 배치4
|
|||
|
|
[
|
|||
|
|
{ xAxis: 8 * 3600, name: "1F" },
|
|||
|
|
{ xAxis: 16 * 3600, name: "2F" },
|
|||
|
|
{ xAxis: 24 * 3600, name: "Seed" },
|
|||
|
|
{ xAxis: 50 * 3600, name: "Main" },
|
|||
|
|
],
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// --- 차트 렌더링 로직 (간단화) ---
|
|||
|
|
const growthChartRef = ref<HTMLDivElement | null>(null);
|
|||
|
|
let chartInstance: echarts.ECharts | null = null;
|
|||
|
|
const renderChart = () => {
|
|||
|
|
if (!growthChartRef.value) return;
|
|||
|
|
if (!chartInstance) {
|
|||
|
|
chartInstance = echarts.init(growthChartRef.value);
|
|||
|
|
}
|
|||
|
|
const yAxis = filteredYAxisList.value.map((y, i) => {
|
|||
|
|
const visibleIdx = visibleYAxisList.value.findIndex(
|
|||
|
|
vy => vy.name === y.name
|
|||
|
|
);
|
|||
|
|
return {
|
|||
|
|
type: "value",
|
|||
|
|
min: y.min,
|
|||
|
|
max: y.max,
|
|||
|
|
show: visibleIdx !== -1,
|
|||
|
|
position: "left",
|
|||
|
|
offset: visibleIdx === 1 ? 80 : 0,
|
|||
|
|
z: 10 + i,
|
|||
|
|
name: visibleIdx !== -1 ? y.name + (y.unit ? ` ${y.unit}` : "") : "",
|
|||
|
|
nameLocation: "middle",
|
|||
|
|
nameGap: 50,
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: y.color,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
fontSize: 11,
|
|||
|
|
writing: "tb-rl",
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: visibleIdx !== -1,
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: y.color,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: visibleIdx === 1 || visibleIdx === 0,
|
|||
|
|
lineStyle: { color: "#f0f0f0", width: 1 },
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: visibleIdx !== -1,
|
|||
|
|
lineStyle: { color: y.color, width: 2 },
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: visibleIdx !== -1,
|
|||
|
|
lineStyle: { color: y.color },
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
const markLine = {
|
|||
|
|
symbol: "none",
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "insideEndTop",
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
fontSize: 13,
|
|||
|
|
color: "#222",
|
|||
|
|
formatter: function (params: { data?: { name?: string } }) {
|
|||
|
|
return params.data && params.data.name ? params.data.name : "";
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
lineStyle: { color: "#888", width: 2, type: "solid" },
|
|||
|
|
data: batchMarkLines[props.batchIndex] || [],
|
|||
|
|
};
|
|||
|
|
const option = {
|
|||
|
|
grid: { left: 120, right: 60, top: 40, bottom: 120, containLabel: true },
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: "value",
|
|||
|
|
splitNumber: 20,
|
|||
|
|
position: "bottom",
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: "#666",
|
|||
|
|
fontWeight: "normal",
|
|||
|
|
interval: 0,
|
|||
|
|
hideOverlap: true,
|
|||
|
|
formatter: function (value: number) {
|
|||
|
|
const totalSeconds = Math.round(value);
|
|||
|
|
const hours = Math.floor(totalSeconds / 3600);
|
|||
|
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
|||
|
|
const seconds = totalSeconds % 60;
|
|||
|
|
return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: { show: true, lineStyle: { color: "#e0e0e0", width: 1 } },
|
|||
|
|
axisLine: { show: true, lineStyle: { color: "#ccc", width: 1 } },
|
|||
|
|
axisTick: { show: true, lineStyle: { color: "#ccc" } },
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
yAxis,
|
|||
|
|
series: filteredSeriesList.value.map((s, idx) => ({
|
|||
|
|
...s,
|
|||
|
|
yAxisIndex: filteredYAxisList.value.findIndex(y => y.name === s.name),
|
|||
|
|
type: "line",
|
|||
|
|
symbol: "none",
|
|||
|
|
sampling: "lttb",
|
|||
|
|
lineStyle: { width: 0.5 },
|
|||
|
|
...(idx === 0 ? { markLine } : {}),
|
|||
|
|
})),
|
|||
|
|
legend: { show: false },
|
|||
|
|
animation: false,
|
|||
|
|
};
|
|||
|
|
chartInstance.setOption(option, true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
renderChart();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch([checkedList, yAxisScrollIndex, () => props.batchIndex], () => {
|
|||
|
|
renderChart();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
if (chartInstance) {
|
|||
|
|
chartInstance.dispose();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 줌 컨트롤 함수
|
|||
|
|
const currentZoomLevel = ref(1);
|
|||
|
|
const zoomStep = 0.2;
|
|||
|
|
const zoomIn = () => {
|
|||
|
|
if (chartInstance) {
|
|||
|
|
currentZoomLevel.value = Math.min(currentZoomLevel.value + zoomStep, 3);
|
|||
|
|
applyZoom();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const zoomOut = () => {
|
|||
|
|
if (chartInstance) {
|
|||
|
|
currentZoomLevel.value = Math.max(currentZoomLevel.value - zoomStep, 0.5);
|
|||
|
|
applyZoom();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const resetZoom = () => {
|
|||
|
|
if (chartInstance) {
|
|||
|
|
currentZoomLevel.value = 1;
|
|||
|
|
applyZoom();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
const applyZoom = () => {
|
|||
|
|
if (!chartInstance) return;
|
|||
|
|
const option = chartInstance.getOption();
|
|||
|
|
const xDataZoom = {
|
|||
|
|
type: "inside",
|
|||
|
|
xAxisIndex: 0,
|
|||
|
|
start: 0,
|
|||
|
|
end: 100 / currentZoomLevel.value,
|
|||
|
|
zoomOnMouseWheel: true,
|
|||
|
|
moveOnMouseMove: true,
|
|||
|
|
moveOnMouseWheel: false,
|
|||
|
|
preventDefaultMouseMove: true,
|
|||
|
|
};
|
|||
|
|
const yDataZoom = visibleYAxisList.value.map((_, index) => ({
|
|||
|
|
type: "inside",
|
|||
|
|
yAxisIndex: index,
|
|||
|
|
start: 0,
|
|||
|
|
end: 100 / currentZoomLevel.value,
|
|||
|
|
zoomOnMouseWheel: true,
|
|||
|
|
moveOnMouseWheel: false,
|
|||
|
|
preventDefaultMouseMove: true,
|
|||
|
|
}));
|
|||
|
|
option.dataZoom = [xDataZoom, ...yDataZoom];
|
|||
|
|
chartInstance.setOption(option, false);
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
.graph-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1000px;
|
|||
|
|
}
|
|||
|
|
.main-graph-area {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.echarts-container {
|
|||
|
|
flex: 1;
|
|||
|
|
position: relative;
|
|||
|
|
background: #fff;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
min-height: 1000px;
|
|||
|
|
}
|
|||
|
|
.echarts-graph {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
min-height: 1000px;
|
|||
|
|
}
|
|||
|
|
.zoom-controls {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 60px;
|
|||
|
|
right: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
.zoom-btn {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #666;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
.zoom-btn:hover {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
border-color: #bbb;
|
|||
|
|
color: #333;
|
|||
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
|||
|
|
}
|
|||
|
|
.zoom-btn.reset {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.zoom-btn:active {
|
|||
|
|
transform: translateY(1px);
|
|||
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
.yaxis-scroll-bar-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 60px;
|
|||
|
|
bottom: 70px;
|
|||
|
|
width: 120px;
|
|||
|
|
height: 24px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: center;
|
|||
|
|
transform: translateY(50%);
|
|||
|
|
background: none;
|
|||
|
|
border-radius: 12px 12px 0 0;
|
|||
|
|
box-shadow: none;
|
|||
|
|
z-index: 30;
|
|||
|
|
padding: 0 8px;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
.yaxis-scroll-bar-overlay input[type="range"] {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 8px;
|
|||
|
|
accent-color: #bbb;
|
|||
|
|
background: rgba(180, 180, 180, 0.1);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
opacity: 0.4;
|
|||
|
|
transition: box-shadow 0.2s;
|
|||
|
|
}
|
|||
|
|
.yaxis-scroll-bar-overlay input[type="range"]::-webkit-slider-thumb {
|
|||
|
|
background: #eee;
|
|||
|
|
border: 1.5px solid #ccc;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
.yaxis-scroll-bar-overlay input[type="range"]:hover {
|
|||
|
|
box-shadow: 0 0 0 2px #bbb2;
|
|||
|
|
}
|
|||
|
|
</style>
|