update realtime data fetching
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
parent
9805d29df3
commit
a6e380a64c
@ -106,8 +106,8 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
.container-body {
|
||||
background: #ffffff33;
|
||||
backdrop-filter: blur(1px);
|
||||
background: #ffffff11;
|
||||
backdrop-filter: blur(2px);
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -1,35 +1,115 @@
|
||||
<!-- 货物情况 -->
|
||||
|
||||
<!-- 实时数据图表 -->
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import Container from './Base/Container.vue';
|
||||
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Container from "./Base/Container.vue";
|
||||
import { useWsStore } from "../store";
|
||||
const cargoChart = ref(null);
|
||||
const chart = ref(null);
|
||||
const options = {
|
||||
color: ["#99D66C", "#5B9BFF"],
|
||||
grid: {
|
||||
top: 72,
|
||||
bottom: 72,
|
||||
left: 112,
|
||||
right: 88,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
position: "top",
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#ccc8",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
minInterval: 1,
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
data: ["废片", "阶段成品"],
|
||||
axisLabel: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
title: [
|
||||
{
|
||||
text: 0 + "片",
|
||||
left: "50%",
|
||||
textAlign: "center",
|
||||
top: "82%",
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 0 + "片",
|
||||
left: "50%",
|
||||
textAlign: "center",
|
||||
top: "44%",
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "bar",
|
||||
stack: "Total",
|
||||
showBackground: true,
|
||||
barWidth: "32",
|
||||
colorBy: "data",
|
||||
data: [
|
||||
{ value: 0, label: { fontSize: 28 } },
|
||||
{ value: 0, label: { fontSize: 28 } },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function updateChartOption(product, scrap) {
|
||||
if (!chart.value) chart.value = echarts.init(cargoChart.value);
|
||||
else {
|
||||
chart.value.dispose();
|
||||
chart.value = echarts.init(cargoChart.value);
|
||||
}
|
||||
options.title[0].text = product + "片";
|
||||
options.title[1].text = scrap + "片";
|
||||
options.series[0].data[0].value = product;
|
||||
options.series[0].data[1].value = scrap;
|
||||
chart.value.setOption(options);
|
||||
}
|
||||
|
||||
const productAmount = ref(0);
|
||||
const scrapAmount = ref(0);
|
||||
const store = useWsStore();
|
||||
store.$subscribe((mutation, state) => {
|
||||
productAmount.value = state.data1.realTimeData?.product || 0;
|
||||
scrapAmount.value = state.data1.realTimeData?.scrap || 0;
|
||||
updateChartOption(productAmount.value, scrapAmount.value);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
cargoChart.value.classList.add('h-full');
|
||||
const mc = echarts.init(cargoChart.value);
|
||||
mc.setOption({
|
||||
grid: {
|
||||
top: 24,
|
||||
bottom: 24,
|
||||
left: 24,
|
||||
right: 24,
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
},
|
||||
],
|
||||
});
|
||||
cargoChart.value.classList.add("h-full");
|
||||
updateChartOption(productAmount.value, scrapAmount.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -46,10 +126,6 @@ onMounted(() => {
|
||||
align-self: self-end;
|
||||
}
|
||||
|
||||
.cargo-inner {
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
.cargo-chart {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -1,73 +1,68 @@
|
||||
<!-- 实时数据表格 -->
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useWsStore } from '../store';
|
||||
import { ref } from "vue";
|
||||
import { useWsStore } from "../store";
|
||||
|
||||
const listData = ref([]);
|
||||
const store = useWsStore();
|
||||
store.$subscribe((mutation, state) => {
|
||||
listData.value = state.data2.lineDetailData.map((item, index) => ({
|
||||
productLine: item.productLine,
|
||||
mbt: item.edgingInput,
|
||||
mbb: item.edgingOutput,
|
||||
dkt: item.drillingInput,
|
||||
dkb: item.drillingOutput,
|
||||
dmt: item.coatingInput,
|
||||
dmb: item.coatingOutput,
|
||||
syt: item.silkInput,
|
||||
syb: item.silkOutput,
|
||||
ght: item.solidificationInput,
|
||||
ghb: item.solidificationOutput,
|
||||
gh1: item.temperingInput,
|
||||
gh2: item.temperingOutput,
|
||||
bzt: item.finalInput,
|
||||
bzb: item.finalOutput,
|
||||
}));
|
||||
listData.value = (state.data2.lineDetailData || Array(3).fill({})).map((item, index) => ({
|
||||
productLine: item.productLine || "---",
|
||||
mbt: item.edgingInput || "---",
|
||||
mbb: item.edgingOutput || "---",
|
||||
dkt: item.drillingInput || "---",
|
||||
dkb: item.drillingOutput || "---",
|
||||
dmt: item.coatingInput || "---",
|
||||
dmb: item.coatingOutput || "---",
|
||||
syt: item.silkInput || "---",
|
||||
syb: item.silkOutput || "---",
|
||||
ght: item.solidificationInput || "---",
|
||||
ghb: item.solidificationOutput || "---",
|
||||
gh1: item.temperingInput || "---",
|
||||
gh2: item.temperingOutput || "---",
|
||||
bzt: item.finalInput || "---",
|
||||
bzb: item.finalOutput || "---",
|
||||
}));
|
||||
});
|
||||
|
||||
const tableData = [
|
||||
{ productLine: '00A', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
|
||||
{ productLine: '00B', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
|
||||
{ productLine: '00C', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
|
||||
{ productLine: '00D', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
|
||||
{ productLine: '00E', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
|
||||
{ productLine: '00F', mbt: '---', mbb: '---', dkt: '---', dkb: '---', dmt: '---', dmb: '---', syt: '---', syb: '---', ght: '---', ghb: '---', gh1: '---', gh2: '---', bzt: '---', bzb: '---' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="realtime-table">
|
||||
<el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
|
||||
header-row-class-name="dark-header">
|
||||
<el-table-column prop="productLine" label="产线"></el-table-column>
|
||||
<el-table-column prop="mbt" label="磨边上"></el-table-column>
|
||||
<el-table-column prop="mbb" label="磨边下"></el-table-column>
|
||||
<el-table-column prop="dkt" label="打孔上"></el-table-column>
|
||||
<el-table-column prop="dkb" label="打孔下"></el-table-column>
|
||||
<el-table-column prop="dmt" label="镀膜上"></el-table-column>
|
||||
<el-table-column prop="dmb" label="镀膜下"></el-table-column>
|
||||
<el-table-column prop="syt" label="丝印上"></el-table-column>
|
||||
<el-table-column prop="syb" label="丝印下"></el-table-column>
|
||||
<el-table-column prop="ght" label="固化上"></el-table-column>
|
||||
<el-table-column prop="ghb" label="固化下"></el-table-column>
|
||||
<el-table-column prop="gh1" label="钢化上"></el-table-column>
|
||||
<el-table-column prop="gh2" label="钢化下"></el-table-column>
|
||||
<el-table-column prop="bzt" label="包装上"></el-table-column>
|
||||
<el-table-column prop="bzb" label="包装下"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="realtime-table">
|
||||
<el-table
|
||||
class="dark-table"
|
||||
:data="listData"
|
||||
:show-overflow-tooltip="true"
|
||||
row-class-name="dark-row"
|
||||
header-row-class-name="dark-header"
|
||||
>
|
||||
<el-table-column prop="productLine" label="产线"></el-table-column>
|
||||
<el-table-column prop="mbt" label="磨边上"></el-table-column>
|
||||
<el-table-column prop="mbb" label="磨边下"></el-table-column>
|
||||
<el-table-column prop="dkt" label="打孔上"></el-table-column>
|
||||
<el-table-column prop="dkb" label="打孔下"></el-table-column>
|
||||
<el-table-column prop="dmt" label="镀膜上"></el-table-column>
|
||||
<el-table-column prop="dmb" label="镀膜下"></el-table-column>
|
||||
<el-table-column prop="syt" label="丝印上"></el-table-column>
|
||||
<el-table-column prop="syb" label="丝印下"></el-table-column>
|
||||
<el-table-column prop="ght" label="固化上"></el-table-column>
|
||||
<el-table-column prop="ghb" label="固化下"></el-table-column>
|
||||
<el-table-column prop="gh1" label="钢化上"></el-table-column>
|
||||
<el-table-column prop="gh2" label="钢化下"></el-table-column>
|
||||
<el-table-column prop="bzt" label="包装上"></el-table-column>
|
||||
<el-table-column prop="bzb" label="包装下"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style scoped>
|
||||
.realtime-table {
|
||||
background: #00f3;
|
||||
height: 240px;
|
||||
width: 80%;
|
||||
align-self: self-start;
|
||||
}
|
||||
background: #00f3;
|
||||
height: 240px;
|
||||
width: 80%;
|
||||
align-self: self-start;
|
||||
}
|
||||
|
||||
.dark-table {
|
||||
height: 100%;
|
||||
}
|
||||
.dark-table {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user