chenzhou/src/components/datapage/LatestWeekYield.vue
DESKTOP-FUDKNA8\znjsz 53ead47882 1
2024-01-30 17:00:44 +08:00

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>