133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<!-- 实时数据图表 -->
|
|
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
import Container from "./Base/Container.vue";
|
|
import { useWsStore } from "../store";
|
|
const cargoChart = ref(null);
|
|
const chart = ref(null);
|
|
const options = {
|
|
color: ["#99D66C", "#5B9BFF"],
|
|
grid: {
|
|
top: 72,
|
|
bottom: 72,
|
|
left: 112,
|
|
right: 88,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "value",
|
|
position: "top",
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#ccc8",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
fontSize: 24,
|
|
color: "#fff",
|
|
},
|
|
minInterval: 1,
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
axisLine: { show: false },
|
|
axisLabel: { show: false },
|
|
axisTick: { show: false },
|
|
splitLine: { show: false },
|
|
data: ["阶段成品", "废片"],
|
|
axisLabel: {
|
|
fontSize: 24,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
title: [
|
|
{
|
|
text: 0 + "片",
|
|
left: "50%",
|
|
textAlign: "center",
|
|
top: "82%",
|
|
textStyle: {
|
|
fontSize: 32,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
{
|
|
text: 0 + "片",
|
|
left: "50%",
|
|
textAlign: "center",
|
|
top: "44%",
|
|
textStyle: {
|
|
fontSize: 32,
|
|
color: "#fff",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "数量",
|
|
type: "bar",
|
|
stack: "Total",
|
|
showBackground: true,
|
|
barWidth: "32",
|
|
colorBy: "data",
|
|
data: [
|
|
{ value: 0, label: { fontSize: 28 } },
|
|
{ value: 0, label: { fontSize: 28 } },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
function updateChartOption(product, scrap) {
|
|
if (!chart.value) chart.value = echarts.init(cargoChart.value);
|
|
else {
|
|
chart.value.dispose();
|
|
chart.value = echarts.init(cargoChart.value);
|
|
}
|
|
options.title[0].text = product + "片";
|
|
options.title[1].text = scrap + "片";
|
|
options.series[0].data[0].value = product;
|
|
options.series[0].data[1].value = scrap;
|
|
chart.value.setOption(options);
|
|
}
|
|
|
|
const store = useWsStore();
|
|
const productAmount = ref(store.data1.realTimeData?.product || 0);
|
|
const scrapAmount = ref(store.data1.realTimeData?.scrap || 0);
|
|
store.$subscribe((mutation, state) => {
|
|
productAmount.value = state.data1.realTimeData?.product || 0;
|
|
scrapAmount.value = state.data1.realTimeData?.scrap || 0;
|
|
updateChartOption(productAmount.value, scrapAmount.value);
|
|
});
|
|
|
|
onMounted(() => {
|
|
cargoChart.value.classList.add("h-full");
|
|
updateChartOption(productAmount.value, scrapAmount.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Container class="cargo" title="实时数据" icon="cube">
|
|
<div ref="cargoChart" class="cargo-chart"></div>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cargo {
|
|
height: 640px;
|
|
width: 80%;
|
|
align-self: self-end;
|
|
}
|
|
|
|
.cargo-chart {
|
|
height: 100%;
|
|
}
|
|
</style>
|