mt-fe-group/chenzhou
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

done latest week

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-31 10:20:34 +08:00
parent 53ead47882
commit e0da16c903
2 changed files with 117 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/components/datapage/LatestWeekYield.vue
View File

@ -3,7 +3,7 @@ import { ref, watch, onMounted, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Container from "../Base/Container.vue"; import Container from "../Base/Container.vue";
import { useWsStore } from "../../store"; import { useWsStore } from "../../store";
import chartSetup from "./LatestWeekYieldOptions"; import chartSetup, { loadData } from "./LatestWeekYieldOptions";
const store = useWsStore(); const store = useWsStore();
const chartContainer = ref(null); const chartContainer = ref(null);
@ -12,23 +12,45 @@ const show = ref(false);
onMounted(() => { onMounted(() => {
chartContainer.value.classList.add("h-full"); chartContainer.value.classList.add("h-full");
// const d = loadData(store.data2.lineSevenDayLogList); const d = loadData(store.data2.lineSevenDayLogList);
const d = loadData([ // const d = loadData([
{ // {
data: [ // data: [
{ day: "1001", num: 24 }, // { day: "10-10", num: Math.floor(Math.random() * 500) },
{ day: "1002", num: 14 }, // { day: "10-11", num: Math.floor(Math.random() * 500) },
{ day: "1003", num: 234 }, // { day: "10-12", num: Math.floor(Math.random() * 500) },
{ day: "1004", num: 84 }, // { day: "10-13", num: Math.floor(Math.random() * 500) },
{ day: "1005", num: 34 }, // { day: "10-14", num: Math.floor(Math.random() * 500) },
{ day: "1006", num: 44 }, // { day: "10-15", num: Math.floor(Math.random() * 500) },
{ day: "1007", num: 20 }, // { day: "10-16", num: Math.floor(Math.random() * 500) },
], // ],
name: "钢一线", // name: "钢一线",
}, // },
{ data: [], name: "钢二线" }, // {
{ data: [], name: "钢三线" }, // data: [
]); // { day: "10-10", num: Math.floor(Math.random() * 500) },
// { day: "10-11", num: Math.floor(Math.random() * 500) },
// { day: "10-12", num: Math.floor(Math.random() * 500) },
// { day: "10-13", num: Math.floor(Math.random() * 500) },
// { day: "10-14", num: Math.floor(Math.random() * 500) },
// { day: "10-15", num: Math.floor(Math.random() * 500) },
// { day: "10-16", num: Math.floor(Math.random() * 500) },
// ],
// name: "钢二线",
// },
// {
// data: [
// { day: "10-10", num: Math.floor(Math.random() * 500) },
// { day: "10-11", num: Math.floor(Math.random() * 500) },
// { day: "10-12", num: Math.floor(Math.random() * 500) },
// { day: "10-13", num: Math.floor(Math.random() * 500) },
// { day: "10-14", num: Math.floor(Math.random() * 500) },
// { day: "10-15", num: Math.floor(Math.random() * 500) },
// { day: "10-16", num: Math.floor(Math.random() * 500) },
// ],
// name: "钢三线",
// },
// ]);
if (!d) { if (!d) {
show.value = false; show.value = false;
if (chartInstance.value) { if (chartInstance.value) {
@ -38,52 +60,52 @@ onMounted(() => {
} else { } else {
if (!chartInstance.value) if (!chartInstance.value)
chartInstance.value = echarts.init(chartContainer.value); chartInstance.value = echarts.init(chartContainer.value);
chartSetup(chartInstance.value); chartSetup(chartInstance.value, d);
show.value = true; show.value = true;
} }
}); });
// 订阅 // 订阅
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
// const d = loadData(state.data2.lineSevenDayLogList); const d = loadData(state.data2.lineSevenDayLogList);
const d = loadData([ // const d = loadData([
{ // {
data: [ // data: [
{ day: "1001", num: 24 }, // { day: "10-10", num: Math.floor(Math.random() * 500) },
{ day: "1002", num: 14 }, // { day: "10-11", num: Math.floor(Math.random() * 500) },
{ day: "1003", num: 234 }, // { day: "10-12", num: Math.floor(Math.random() * 500) },
{ day: "1004", num: 84 }, // { day: "10-13", num: Math.floor(Math.random() * 500) },
{ day: "1005", num: 34 }, // { day: "10-14", num: Math.floor(Math.random() * 500) },
{ day: "1006", num: 44 }, // { day: "10-15", num: Math.floor(Math.random() * 500) },
{ day: "1007", num: 20 }, // { day: "10-16", num: Math.floor(Math.random() * 500) },
], // ],
name: "钢一线", // name: "钢一线",
}, // },
{ // {
data: [ // data: [
{ day: "1001", num: 24 }, // { day: "10-10", num: Math.floor(Math.random() * 500) },
{ day: "1002", num: 14 }, // { day: "10-11", num: Math.floor(Math.random() * 500) },
{ day: "1003", num: 234 }, // { day: "10-12", num: Math.floor(Math.random() * 500) },
{ day: "1004", num: 84 }, // { day: "10-13", num: Math.floor(Math.random() * 500) },
{ day: "1005", num: 34 }, // { day: "10-14", num: Math.floor(Math.random() * 500) },
{ day: "1006", num: 44 }, // { day: "10-15", num: Math.floor(Math.random() * 500) },
{ day: "1007", num: 20 }, // { day: "10-16", num: Math.floor(Math.random() * 500) },
], // ],
name: "钢二线", // name: "钢二线",
}, // },
{ // {
data: [ // data: [
{ day: "1001", num: 24 }, // { day: "10-10", num: Math.floor(Math.random() * 500) },
{ day: "1002", num: 14 }, // { day: "10-11", num: Math.floor(Math.random() * 500) },
{ day: "1003", num: 234 }, // { day: "10-12", num: Math.floor(Math.random() * 500) },
{ day: "1004", num: 84 }, // { day: "10-13", num: Math.floor(Math.random() * 500) },
{ day: "1005", num: 34 }, // { day: "10-14", num: Math.floor(Math.random() * 500) },
{ day: "1006", num: 44 }, // { day: "10-15", num: Math.floor(Math.random() * 500) },
{ day: "1007", num: 20 }, // { day: "10-16", num: Math.floor(Math.random() * 500) },
], // ],
name: "钢三线", // name: "钢三线",
}, // },
]); // ]);
if (!d) { if (!d) {
show.value = false; show.value = false;
if (chartInstance.value) { if (chartInstance.value) {
@ -93,37 +115,10 @@ store.$subscribe((mutation, state) => {
} else { } else {
if (!chartInstance.value) if (!chartInstance.value)
chartInstance.value = echarts.init(chartContainer.value); chartInstance.value = echarts.init(chartContainer.value);
chartSetup(chartInstance.value); chartSetup(chartInstance.value, d);
show.value = true; 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> </script>
<template> <template>

50
src/components/datapage/LatestWeekYieldOptions.js
View File

@ -1,5 +1,3 @@
const d = new Date();
const m = d.getMonth() + 1;
export const options = { export const options = {
legend: { legend: {
textStyle: { textStyle: {
@ -8,37 +6,33 @@ export const options = {
}, },
tooltip: {}, tooltip: {},
dataset: { dataset: {
source: [ source: [],
["date", "钢1线", "钢2线", "钢3线"],
[m + "-" + 1, 0, 0, 0],
[m + "-" + 2, 0, 0, 0],
[m + "-" + 3, 0, 0, 0],
[m + "-" + 4, 0, 0, 0],
[m + "-" + 5, 0, 0, 0],
],
}, },
grid: { grid: {
top: 56, top: 56,
bottom: 12, bottom: 12,
left: 20, left: 10,
right: 20, right: 20,
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
axisLabel: { axisLabel: {
fontSize: 16, fontSize: 12,
color: "#fff8", color: "#fff8",
}, },
axisTick: {
alignWithLabel: true,
},
}, },
yAxis: { yAxis: {
name: "片", name: "片",
nameTextStyle: { nameTextStyle: {
color: "#fff8", color: "#fff8",
fontSize: 18, fontSize: 14,
}, },
axisLabel: { axisLabel: {
fontSize: 18, fontSize: 12,
color: "#fff8", color: "#fff8",
}, },
splitLine: { splitLine: {
@ -66,3 +60,31 @@ export default function setup(
new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list]; new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list];
echartInstance.setOption(new_options); echartInstance.setOption(new_options);
} }
export function createDatasetFrom(lines, datelist) {
const dataset = [];
datelist.forEach((date) => {
const row = [date];
lines.forEach((line) => {
const item = line.data.find((item) => item.day === date);
row.push(item ? item.num : 0);
});
dataset.push(row);
});
console.log(dataset);
return dataset;
}
export function findDatelist(lines) {
const dateList = [];
lines.forEach((line) => {
dateList.push(...line.data.map((item) => item.day));
});
return Array.from(new Set(dateList)).sort();
}
export function loadData(list) {
if (!list || list.length != 3 || list[0].data.length <= 0) return null;
const datelist = findDatelist(list);
return createDatasetFrom(list, datelist);
}