<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import Container from "./Base/Container.vue";
import { useWsStore } from "../store";
import charSetup from "./HourChartOptions";

const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
// 小时数据
const hourData = ref([]);
// store.$subscribe((mutation, state) => {
//   hourData.value = state.data2.lineDetailData.map((item, index) => ({
//     id: item.id,
//     eqName: item.equipmentName,
//     eqIndex: index + 1,
//     alarmGrade: item.alarmLevel,
//     alarmDetail: item.alarmDetails,
//     position: `${item.productLine} - ${item.segment}`,
//   }));
// });

onMounted(() => {
  chartChart.value.classList.add("h-full");
  chart.value = echarts.init(chartChart.value);
});
</script>

<template>
  <Container class="chart" title="小时数据" icon="cube">
    <div ref="chartChart" class="chart-chart"></div>
  </Container>
</template>

<style scoped>
.chart {
  height: 300px;
}

.chart-inner {
  background: #0f0;
}

.chart-chart {
  height: 100%;
}
</style>
