1
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
31f427789f
commit
53ead47882
@ -9,32 +9,17 @@ const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
// 小时数据
|
||||
const hourData = ref([
|
||||
// { lineName: '001', hour: '00:00', num: 10 },
|
||||
// { lineName: '002', hour: '00:20', num: 20 },
|
||||
// { lineName: '003', hour: '00:30', num: 30 },
|
||||
// { lineName: '004', hour: '00:40', num: 14 },
|
||||
// { lineName: '005', hour: '00:50', num: 50 }
|
||||
]);
|
||||
const hourData = ref([]);
|
||||
store.$subscribe((mutation, state) => {
|
||||
// console.log("[HourChart] =======>", state.data2.lineHourList?.length);
|
||||
if (
|
||||
state.data2.lineHourList == undefined ||
|
||||
state.data2.lineHourList?.length == 0
|
||||
) {
|
||||
// console.log("[HourChart] 清除数据");
|
||||
hourData.value.splice(0);
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
// console.log("[HourChart] ===> 有数据: ", state.data2.lineHourList);
|
||||
hourData.value = (state.data2?.lineHourList ?? [
|
||||
// { lineName: '001', hour: '00:00', num: 10 },
|
||||
// { lineName: '002', hour: '00:20', num: 20 },
|
||||
// { lineName: '003', hour: '00:30', num: 30 },
|
||||
// { lineName: '004', hour: '00:40', num: 14 },
|
||||
// { lineName: '005', hour: '00:50', num: 50 },
|
||||
]).map((item, index) => ({
|
||||
hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
|
||||
id: `${item.lineName}_${index}`,
|
||||
hour: item.hour || `${index}`.padStart(2, "0"),
|
||||
data: item.num || Math.floor(Math.random() * 100),
|
||||
@ -46,29 +31,12 @@ function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
// console.log("[HourChart] ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
|
||||
chartSetup(
|
||||
chart.value,
|
||||
hourData.value.map((item) => item.hour),
|
||||
hourData.value.map((item) => item.data)
|
||||
);
|
||||
});
|
||||
|
||||
// chart.value.setOption({
|
||||
// xAxis: {
|
||||
// type: "category",
|
||||
// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: "value",
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// data: [150, 230, 224, 218, 135, 147, 260],
|
||||
// type: "line",
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -78,7 +46,11 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<Container class="chart" title="小时数据" icon="cube">
|
||||
<div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
|
||||
<div
|
||||
ref="chartChart"
|
||||
class="chart-chart"
|
||||
style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
|
||||
></div>
|
||||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
||||
暂无数据
|
||||
</p>
|
||||
@ -88,6 +60,7 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.chart {
|
||||
/* height: 300px; */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.chart-chart {
|
||||
|
||||
@ -6,88 +6,141 @@ import { useWsStore } from "../../store";
|
||||
import chartSetup from "./LatestWeekYieldOptions";
|
||||
|
||||
const store = useWsStore();
|
||||
const chartChart = ref(null);
|
||||
const chart = ref(null);
|
||||
// 小时数据
|
||||
const hourData = ref([
|
||||
// { lineName: '001', hour: '00:00', num: 10 },
|
||||
// { lineName: '002', hour: '00:20', num: 20 },
|
||||
// { lineName: '003', hour: '00:30', num: 30 },
|
||||
// { lineName: '004', hour: '00:40', num: 14 },
|
||||
// { lineName: '005', hour: '00:50', num: 50 }
|
||||
]);
|
||||
store.$subscribe((mutation, state) => {
|
||||
// console.log("[HourChart] =======>", state.data2.lineHourList?.length);
|
||||
if (
|
||||
state.data2.lineHourList == undefined ||
|
||||
state.data2.lineHourList?.length == 0
|
||||
) {
|
||||
// console.log("[HourChart] 清除数据");
|
||||
hourData.value.splice(0);
|
||||
if (chart.value) chart.value.dispose();
|
||||
return;
|
||||
}
|
||||
// console.log("[HourChart] ===> 有数据: ", state.data2.lineHourList);
|
||||
hourData.value = (state.data2?.lineHourList ?? [
|
||||
// { lineName: '001', hour: '00:00', num: 10 },
|
||||
// { lineName: '002', hour: '00:20', num: 20 },
|
||||
// { lineName: '003', hour: '00:30', num: 30 },
|
||||
// { lineName: '004', hour: '00:40', num: 14 },
|
||||
// { lineName: '005', hour: '00:50', num: 50 },
|
||||
]).map((item, index) => ({
|
||||
id: `${item.lineName}_${index}`,
|
||||
hour: item.hour || `${index}`.padStart(2, "0"),
|
||||
data: item.num || Math.floor(Math.random() * 100),
|
||||
}));
|
||||
setupChart();
|
||||
});
|
||||
|
||||
function setupChart() {
|
||||
if (chart.value) chart.value.dispose();
|
||||
nextTick(() => {
|
||||
chart.value = echarts.init(chartChart.value);
|
||||
// console.log("[HourChart] ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
|
||||
chartSetup(
|
||||
chart.value,
|
||||
hourData.value.map((item) => item.hour),
|
||||
hourData.value.map((item) => item.data)
|
||||
);
|
||||
});
|
||||
|
||||
// chart.value.setOption({
|
||||
// xAxis: {
|
||||
// type: "category",
|
||||
// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: "value",
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// data: [150, 230, 224, 218, 135, 147, 260],
|
||||
// type: "line",
|
||||
// },
|
||||
// ],
|
||||
// });
|
||||
}
|
||||
const chartContainer = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
const show = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
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="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
|
||||
<p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
|
||||
暂无数据
|
||||
</p>
|
||||
<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 {
|
||||
|
||||
@ -1,63 +1,68 @@
|
||||
const d = new Date();
|
||||
const m = d.getMonth() + 1;
|
||||
export const options = {
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "#fff8",
|
||||
},
|
||||
},
|
||||
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],
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
left: 12,
|
||||
right: 10,
|
||||
top: 56,
|
||||
bottom: 12,
|
||||
left: 20,
|
||||
right: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [],
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#fff8'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#e6e6e633",
|
||||
},
|
||||
color: "#fff8",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#e6e6e633",
|
||||
name: "片",
|
||||
nameTextStyle: {
|
||||
color: "#fff8",
|
||||
fontSize: 18,
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 18,
|
||||
color: "#fff8",
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#e6e6e633'
|
||||
}
|
||||
color: "#fff8",
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#fff8'
|
||||
},
|
||||
minInterval: 1,
|
||||
max: 100,
|
||||
min: 1
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [],
|
||||
// data: Array.from({ length: 7 }, () => Math.random() * 100),
|
||||
type: "bar",
|
||||
// barWidth: 20,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
|
||||
};
|
||||
|
||||
export default function setup(echartInstance, timeArr, dataArr) {
|
||||
export default function setup(
|
||||
echartInstance,
|
||||
list = [
|
||||
["1-12", 1, 2, 3],
|
||||
["1-13", 4, 5, 6],
|
||||
["1-14", 14, 15, 16],
|
||||
["1-15", 9],
|
||||
["1-16", 4, 5, 6],
|
||||
["1-17", 1, 1, 1],
|
||||
]
|
||||
) {
|
||||
const new_options = { ...options };
|
||||
new_options.xAxis.data = timeArr;
|
||||
new_options.series[0].data = dataArr;
|
||||
new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list];
|
||||
echartInstance.setOption(new_options);
|
||||
}
|
||||
|
||||
@ -12,9 +12,9 @@ import LineMonth from '../components/datapage/LineMonth.vue';
|
||||
<template>
|
||||
<div class="data-page">
|
||||
<!-- 小时数据 -->
|
||||
<!-- <HourChart /> -->
|
||||
<HourChart />
|
||||
<!-- 近7日产量 -->
|
||||
<!-- <LatestWeekYield /> -->
|
||||
<LatestWeekYield />
|
||||
<!-- 本日生产线情况 -->
|
||||
<!-- <LineToday /> -->
|
||||
<!-- 本月生产线情况 -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user