mt-fe-group/chenzhou
9
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
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 Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
import chartSetup from "./LatestWeekYieldOptions";
import chartSetup, { loadData } from "./LatestWeekYieldOptions";
const store = useWsStore();
const chartContainer = ref(null);
@@ -12,23 +12,45 @@ 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: "钢三线" },
]);
const d = loadData(store.data2.lineSevenDayLogList);
// const d = loadData([
// {
// 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: "钢二线",
// },
// {
// 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) {
show.value = false;
if (chartInstance.value) {
@@ -38,52 +60,52 @@ onMounted(() => {
} else {
if (!chartInstance.value)
chartInstance.value = echarts.init(chartContainer.value);
chartSetup(chartInstance.value);
chartSetup(chartInstance.value, d);
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: "钢三线",
},
]);
const d = loadData(state.data2.lineSevenDayLogList);
// const d = loadData([
// {
// 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: "钢二线",
// },
// {
// 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) {
show.value = false;
if (chartInstance.value) {
@@ -93,37 +115,10 @@ store.$subscribe((mutation, state) => {
} else {
if (!chartInstance.value)
chartInstance.value = echarts.init(chartContainer.value);
chartSetup(chartInstance.value);
chartSetup(chartInstance.value, d);
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>

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

@@ -1,5 +1,3 @@
const d = new Date();
const m = d.getMonth() + 1;
export const options = {
legend: {
textStyle: {
@@ -8,37 +6,33 @@ export const options = {
},
tooltip: {},
dataset: {
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],
],
source: [],
},
grid: {
top: 56,
bottom: 12,
left: 20,
left: 10,
right: 20,
containLabel: true,
},
xAxis: {
type: "category",
axisLabel: {
fontSize: 16,
fontSize: 12,
color: "#fff8",
},
axisTick: {
alignWithLabel: true,
},
},
yAxis: {
name: "片",
nameTextStyle: {
color: "#fff8",
fontSize: 18,
fontSize: 14,
},
axisLabel: {
fontSize: 18,
fontSize: 12,
color: "#fff8",
},
splitLine: {
@@ -66,3 +60,31 @@ export default function setup(
new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list];
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);
}