170 lines
3.9 KiB
Vue
170 lines
3.9 KiB
Vue
<script setup>
|
|
import { ref, watch, onMounted, nextTick } from "vue";
|
|
import * as echarts from "echarts";
|
|
import Container from "../Base/Container.vue";
|
|
import { useWsStore } from "../../store";
|
|
import chartSetup from "./LatestWeekYieldOptions";
|
|
|
|
const store = useWsStore();
|
|
const chartContainer = ref(null);
|
|
const chartInstance = ref(null);
|
|
const show = ref(false);
|
|
|
|
onMounted(() => {
|
|
chartContainer.value.classList.add("h-full");
|
|
// const d = loadData(store.data2.lineSevenDayLogList);
|
|
const d = loadData([
|
|
{
|
|
data: [
|
|
{ day: "1001", num: 24 },
|
|
{ day: "1002", num: 14 },
|
|
{ day: "1003", num: 234 },
|
|
{ day: "1004", num: 84 },
|
|
{ day: "1005", num: 34 },
|
|
{ day: "1006", num: 44 },
|
|
{ day: "1007", num: 20 },
|
|
],
|
|
name: "钢一线",
|
|
},
|
|
{ data: [], name: "钢二线" },
|
|
{ data: [], name: "钢三线" },
|
|
]);
|
|
if (!d) {
|
|
show.value = false;
|
|
if (chartInstance.value) {
|
|
chartInstance.value.dispose();
|
|
chartInstance.value = null;
|
|
}
|
|
} else {
|
|
if (!chartInstance.value)
|
|
chartInstance.value = echarts.init(chartContainer.value);
|
|
chartSetup(chartInstance.value);
|
|
show.value = true;
|
|
}
|
|
});
|
|
|
|
// 订阅
|
|
store.$subscribe((mutation, state) => {
|
|
// const d = loadData(state.data2.lineSevenDayLogList);
|
|
const d = loadData([
|
|
{
|
|
data: [
|
|
{ day: "1001", num: 24 },
|
|
{ day: "1002", num: 14 },
|
|
{ day: "1003", num: 234 },
|
|
{ day: "1004", num: 84 },
|
|
{ day: "1005", num: 34 },
|
|
{ day: "1006", num: 44 },
|
|
{ day: "1007", num: 20 },
|
|
],
|
|
name: "钢一线",
|
|
},
|
|
{
|
|
data: [
|
|
{ day: "1001", num: 24 },
|
|
{ day: "1002", num: 14 },
|
|
{ day: "1003", num: 234 },
|
|
{ day: "1004", num: 84 },
|
|
{ day: "1005", num: 34 },
|
|
{ day: "1006", num: 44 },
|
|
{ day: "1007", num: 20 },
|
|
],
|
|
name: "钢二线",
|
|
},
|
|
{
|
|
data: [
|
|
{ day: "1001", num: 24 },
|
|
{ day: "1002", num: 14 },
|
|
{ day: "1003", num: 234 },
|
|
{ day: "1004", num: 84 },
|
|
{ day: "1005", num: 34 },
|
|
{ day: "1006", num: 44 },
|
|
{ day: "1007", num: 20 },
|
|
],
|
|
name: "钢三线",
|
|
},
|
|
]);
|
|
if (!d) {
|
|
show.value = false;
|
|
if (chartInstance.value) {
|
|
chartInstance.value.dispose();
|
|
chartInstance.value = null;
|
|
}
|
|
} else {
|
|
if (!chartInstance.value)
|
|
chartInstance.value = echarts.init(chartContainer.value);
|
|
chartSetup(chartInstance.value);
|
|
show.value = true;
|
|
}
|
|
});
|
|
|
|
function loadData(list) {
|
|
if (!list || list.length != 3 || list[0].data.length <= 0) return null;
|
|
const outerdata = [[], [], [], [], [], [], []];
|
|
|
|
list.forEach(line => {
|
|
|
|
})
|
|
|
|
const dateList = list[0].data.map((item) => item.day.toString()).sort();
|
|
console.log("datelist", dateList);
|
|
dateList.forEach((date, index) => {
|
|
outerdata[index][0] = date;
|
|
});
|
|
list.forEach((line, index) => {
|
|
if (line.data[0] != null) {
|
|
for (let x = 0; x < 7; x++) {
|
|
for (let y = 0; y < line.data.length; y++) {
|
|
if (outerdata[x + 1][0] == line.data[y].day) {
|
|
outerdata[x + 1][line + 1] = line.data[y].num;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
return outerdata;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Container class="chart" title="近7日产量" icon="cube">
|
|
<div
|
|
ref="chartContainer"
|
|
class="chart-chart"
|
|
:style="{ opacity: show ? 1 : 0 }"
|
|
></div>
|
|
<p v-show="!show" class="empty-data-hint">暂无数据</p>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chart {
|
|
/* height: 300px; */
|
|
height: auto;
|
|
}
|
|
|
|
.chart-chart {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.empty-data-hint {
|
|
color: #c5c5c5;
|
|
letter-spacing: 1px;
|
|
font-size: 24px;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 32px;
|
|
user-select: none;
|
|
}
|
|
</style>
|