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

update

Browse Source
This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-14 17:06:53 +08:00
parent f9fc8e8c66
commit bb44001961
6 changed files with 313 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/HourChart.vue
View File

@ -88,7 +88,7 @@ onMounted(() => {
<style scoped>
.chart {
height: 300px;
height: 450px;
}
.chart-chart {

163
src/components/LatestWeekYield.vue Normal file
View 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
View 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
src/components/datapage/LatestWeekYieldOptions.js
View File

@ -1,4 +1,5 @@
export const options = {
color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
legend: {
textStyle: {
color: "#fff8",

12
src/pages/DataPage.vue
View File

@ -1,8 +1,8 @@
<!-- 实时数据页面 -->
<script setup>
import HourChart from "../components/datapage/HourChart.vue";
import TeamChartDay from "../components/datapage/TeamChartDay.vue";
import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
// import TeamChartDay from "../components/datapage/TeamChartDay.vue";
// import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
import LatestWeekYield from '../components/datapage/LatestWeekYield.vue'
import LineToday from '../components/datapage/LineToday.vue';
import LineMonth from '../components/datapage/LineMonth.vue';
@ -20,9 +20,9 @@ import LineMonth from '../components/datapage/LineMonth.vue';
<!-- 本月生产线情况 -->
<LineMonth />
<!-- 本日班组情况 -->
<TeamChartDay />
<!-- <TeamChartDay /> -->
<!-- 本月班组情况 -->
<TeamChartMonth />
<!-- <TeamChartMonth /> -->
</div>
</template>
@ -31,10 +31,10 @@ import LineMonth from '../components/datapage/LineMonth.vue';
flex: 1;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 24px;
padding: 32px;
padding: 32px 56px;
align-items: stretch;
}

8
src/pages/ThreeDimension.vue
View File

@ -3,6 +3,7 @@
import HourChart from "../components/HourChart.vue";
import TeamChartDay from "../components/TeamChartDay.vue";
import TeamChartMonth from "../components/TeamChartMonth.vue";
import LatestWeekYield from '../components/LatestWeekYield.vue'
import ThreeD from './3D.vue'
const props = defineProps({
@ -21,8 +22,9 @@ const props = defineProps({
</div>
<div class="data-list">
<HourChart />
<TeamChartDay />
<TeamChartMonth />
<LatestWeekYield />
<!-- <TeamChartDay />
<TeamChartMonth /> -->
</div>
</div>
</template>
@ -38,7 +40,7 @@ const props = defineProps({
width: 480px;
position: absolute;
top: 0;
top: 24px;
right: 32px;
gap: 24px;
display: flex;