update
This commit is contained in:
parent
f9fc8e8c66
commit
bb44001961
@ -88,7 +88,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart {
|
.chart {
|
||||||
height: 300px;
|
height: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-chart {
|
.chart-chart {
|
||||||
|
163
src/components/LatestWeekYield.vue
Normal file
163
src/components/LatestWeekYield.vue
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
<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, { loadData } 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: "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) {
|
||||||
|
chartInstance.value.dispose();
|
||||||
|
chartInstance.value = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!chartInstance.value)
|
||||||
|
chartInstance.value = echarts.init(chartContainer.value);
|
||||||
|
chartSetup(chartInstance.value, d);
|
||||||
|
show.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 订阅
|
||||||
|
store.$subscribe((mutation, state) => {
|
||||||
|
// 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) {
|
||||||
|
chartInstance.value.dispose();
|
||||||
|
chartInstance.value = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!chartInstance.value)
|
||||||
|
chartInstance.value = echarts.init(chartContainer.value);
|
||||||
|
chartSetup(chartInstance.value, d);
|
||||||
|
show.value = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</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: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
137
src/components/LatestWeekYieldOptions.js
Normal file
137
src/components/LatestWeekYieldOptions.js
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
export const options = {
|
||||||
|
color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff8",
|
||||||
|
},
|
||||||
|
right: 0,
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
dataset: {
|
||||||
|
source: [],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 56,
|
||||||
|
bottom: 12,
|
||||||
|
left: 10,
|
||||||
|
right: 20,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#fff8",
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "片",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff8",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#fff8",
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
minInterval: 1,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 20,
|
||||||
|
rotate: 90,
|
||||||
|
color: "#fff",
|
||||||
|
verticalAlign: "middle",
|
||||||
|
position: 'top',
|
||||||
|
formatter: (params) => {
|
||||||
|
return params.data[1];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 20,
|
||||||
|
rotate: 90,
|
||||||
|
color: "#fff",
|
||||||
|
verticalAlign: "middle",
|
||||||
|
position: 'top',
|
||||||
|
formatter: (params) => {
|
||||||
|
return params.data[2];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
distance: 20,
|
||||||
|
rotate: 90,
|
||||||
|
color: "#fff",
|
||||||
|
verticalAlign: "middle",
|
||||||
|
position: 'top',
|
||||||
|
formatter: (params) => {
|
||||||
|
return params.data[3];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
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.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);
|
||||||
|
}
|
@ -1,4 +1,5 @@
|
|||||||
export const options = {
|
export const options = {
|
||||||
|
color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
|
||||||
legend: {
|
legend: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff8",
|
color: "#fff8",
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<!-- 实时数据页面 -->
|
<!-- 实时数据页面 -->
|
||||||
<script setup>
|
<script setup>
|
||||||
import HourChart from "../components/datapage/HourChart.vue";
|
import HourChart from "../components/datapage/HourChart.vue";
|
||||||
import TeamChartDay from "../components/datapage/TeamChartDay.vue";
|
// import TeamChartDay from "../components/datapage/TeamChartDay.vue";
|
||||||
import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
|
// import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
|
||||||
import LatestWeekYield from '../components/datapage/LatestWeekYield.vue'
|
import LatestWeekYield from '../components/datapage/LatestWeekYield.vue'
|
||||||
import LineToday from '../components/datapage/LineToday.vue';
|
import LineToday from '../components/datapage/LineToday.vue';
|
||||||
import LineMonth from '../components/datapage/LineMonth.vue';
|
import LineMonth from '../components/datapage/LineMonth.vue';
|
||||||
@ -20,9 +20,9 @@ import LineMonth from '../components/datapage/LineMonth.vue';
|
|||||||
<!-- 本月生产线情况 -->
|
<!-- 本月生产线情况 -->
|
||||||
<LineMonth />
|
<LineMonth />
|
||||||
<!-- 本日班组情况 -->
|
<!-- 本日班组情况 -->
|
||||||
<TeamChartDay />
|
<!-- <TeamChartDay /> -->
|
||||||
<!-- 本月班组情况 -->
|
<!-- 本月班组情况 -->
|
||||||
<TeamChartMonth />
|
<!-- <TeamChartMonth /> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -31,10 +31,10 @@ import LineMonth from '../components/datapage/LineMonth.vue';
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-template-rows: 1fr 1fr;
|
grid-template-rows: 1fr 1fr;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding: 32px;
|
padding: 32px 56px;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
import HourChart from "../components/HourChart.vue";
|
import HourChart from "../components/HourChart.vue";
|
||||||
import TeamChartDay from "../components/TeamChartDay.vue";
|
import TeamChartDay from "../components/TeamChartDay.vue";
|
||||||
import TeamChartMonth from "../components/TeamChartMonth.vue";
|
import TeamChartMonth from "../components/TeamChartMonth.vue";
|
||||||
|
import LatestWeekYield from '../components/LatestWeekYield.vue'
|
||||||
import ThreeD from './3D.vue'
|
import ThreeD from './3D.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -21,8 +22,9 @@ const props = defineProps({
|
|||||||
</div>
|
</div>
|
||||||
<div class="data-list">
|
<div class="data-list">
|
||||||
<HourChart />
|
<HourChart />
|
||||||
<TeamChartDay />
|
<LatestWeekYield />
|
||||||
<TeamChartMonth />
|
<!-- <TeamChartDay />
|
||||||
|
<TeamChartMonth /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -38,7 +40,7 @@ const props = defineProps({
|
|||||||
width: 480px;
|
width: 480px;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 24px;
|
||||||
right: 32px;
|
right: 32px;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
Loading…
Reference in New Issue
Block a user