142 lines
2.6 KiB
Vue
142 lines
2.6 KiB
Vue
<script setup>
|
|
import LineChart from "@/components/chart/LineChart.vue";
|
|
import { ref, onMounted } from "vue";
|
|
|
|
// 假資料
|
|
const data = {
|
|
categories: [
|
|
"16:22:29",
|
|
"16:22:37",
|
|
"16:22:47",
|
|
"16:23:00",
|
|
"16:23:08",
|
|
"16:23:18",
|
|
],
|
|
series: [
|
|
{
|
|
name: "即時趨勢",
|
|
type: "line",
|
|
data: [320, 310, 300, 305, 310, 300],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
itemStyle: {
|
|
color: "#34b7f1",
|
|
},
|
|
},
|
|
{
|
|
name: "契約容量",
|
|
type: "line",
|
|
data: [400, 400, 400, 400, 400, 400],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
itemStyle: {
|
|
color: "#A259FF",
|
|
},
|
|
},
|
|
{
|
|
name: "警戒容量",
|
|
type: "line",
|
|
data: [350, 350, 350, 350, 350, 350],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
itemStyle: {
|
|
color: "#FFCE56",
|
|
},
|
|
},
|
|
{
|
|
name: "偵測值",
|
|
type: "line",
|
|
data: [280, 300, 290, 295, 300, 290],
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3,
|
|
},
|
|
itemStyle: {
|
|
color: "#4CAF50",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const demand_chart = ref(null);
|
|
const defaultChartOption = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: data.series.map((s) => s.name),
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 16,
|
|
},
|
|
orient: "horizontal",
|
|
bottom: "0%",
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
data: data.categories,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
series: data.series,
|
|
});
|
|
|
|
onMounted(() => {
|
|
//
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-3">
|
|
<div class="flex text-white mb-5">
|
|
<div class="flex items-end text-base relative text mr-32">
|
|
{{ $t("energy.immediate_demand") }}
|
|
<span class="text-2xl px-2.5">245.48 kw</span>
|
|
</div>
|
|
<div class="flex items-end text-base">
|
|
{{ $t("energy.average_demand") }}
|
|
<span class="text-2xl px-2.5">230.8 kw</span>
|
|
</div>
|
|
</div>
|
|
<LineChart
|
|
id="immediate_demand_chart"
|
|
class="w-full h-full min-h-[220px]"
|
|
:option="defaultChartOption"
|
|
ref="demand_chart"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.text:after {
|
|
@apply absolute top-0 -bottom-2.5 left-full block w-28 h-[1px] bg-slate-600 m-auto z-10;
|
|
content: "";
|
|
}
|
|
</style>
|