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 {
|
.container-body {
|
||||||
background: #ffffff33;
|
background: #ffffff11;
|
||||||
backdrop-filter: blur(1px);
|
backdrop-filter: blur(2px);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,35 +1,115 @@
|
|||||||
<!-- 货物情况 -->
|
<!-- 实时数据图表 -->
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from "vue";
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from "echarts";
|
||||||
import Container from './Base/Container.vue';
|
import Container from "./Base/Container.vue";
|
||||||
|
import { useWsStore } from "../store";
|
||||||
const cargoChart = ref(null);
|
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(() => {
|
onMounted(() => {
|
||||||
cargoChart.value.classList.add('h-full');
|
cargoChart.value.classList.add("h-full");
|
||||||
const mc = echarts.init(cargoChart.value);
|
updateChartOption(productAmount.value, scrapAmount.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],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -46,10 +126,6 @@ onMounted(() => {
|
|||||||
align-self: self-end;
|
align-self: self-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cargo-inner {
|
|
||||||
background: #0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cargo-chart {
|
.cargo-chart {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,73 +1,68 @@
|
|||||||
<!-- 实时数据表格 -->
|
<!-- 实时数据表格 -->
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from "vue";
|
||||||
import { useWsStore } from '../store';
|
import { useWsStore } from "../store";
|
||||||
|
|
||||||
const listData = ref([]);
|
const listData = ref([]);
|
||||||
const store = useWsStore();
|
const store = useWsStore();
|
||||||
store.$subscribe((mutation, state) => {
|
store.$subscribe((mutation, state) => {
|
||||||
listData.value = state.data2.lineDetailData.map((item, index) => ({
|
listData.value = (state.data2.lineDetailData || Array(3).fill({})).map((item, index) => ({
|
||||||
productLine: item.productLine,
|
productLine: item.productLine || "---",
|
||||||
mbt: item.edgingInput,
|
mbt: item.edgingInput || "---",
|
||||||
mbb: item.edgingOutput,
|
mbb: item.edgingOutput || "---",
|
||||||
dkt: item.drillingInput,
|
dkt: item.drillingInput || "---",
|
||||||
dkb: item.drillingOutput,
|
dkb: item.drillingOutput || "---",
|
||||||
dmt: item.coatingInput,
|
dmt: item.coatingInput || "---",
|
||||||
dmb: item.coatingOutput,
|
dmb: item.coatingOutput || "---",
|
||||||
syt: item.silkInput,
|
syt: item.silkInput || "---",
|
||||||
syb: item.silkOutput,
|
syb: item.silkOutput || "---",
|
||||||
ght: item.solidificationInput,
|
ght: item.solidificationInput || "---",
|
||||||
ghb: item.solidificationOutput,
|
ghb: item.solidificationOutput || "---",
|
||||||
gh1: item.temperingInput,
|
gh1: item.temperingInput || "---",
|
||||||
gh2: item.temperingOutput,
|
gh2: item.temperingOutput || "---",
|
||||||
bzt: item.finalInput,
|
bzt: item.finalInput || "---",
|
||||||
bzb: item.finalOutput,
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="realtime-table">
|
<div class="realtime-table">
|
||||||
<el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
|
<el-table
|
||||||
header-row-class-name="dark-header">
|
class="dark-table"
|
||||||
<el-table-column prop="productLine" label="产线"></el-table-column>
|
:data="listData"
|
||||||
<el-table-column prop="mbt" label="磨边上"></el-table-column>
|
:show-overflow-tooltip="true"
|
||||||
<el-table-column prop="mbb" label="磨边下"></el-table-column>
|
row-class-name="dark-row"
|
||||||
<el-table-column prop="dkt" label="打孔上"></el-table-column>
|
header-row-class-name="dark-header"
|
||||||
<el-table-column prop="dkb" label="打孔下"></el-table-column>
|
>
|
||||||
<el-table-column prop="dmt" label="镀膜上"></el-table-column>
|
<el-table-column prop="productLine" label="产线"></el-table-column>
|
||||||
<el-table-column prop="dmb" label="镀膜下"></el-table-column>
|
<el-table-column prop="mbt" label="磨边上"></el-table-column>
|
||||||
<el-table-column prop="syt" label="丝印上"></el-table-column>
|
<el-table-column prop="mbb" label="磨边下"></el-table-column>
|
||||||
<el-table-column prop="syb" label="丝印下"></el-table-column>
|
<el-table-column prop="dkt" label="打孔上"></el-table-column>
|
||||||
<el-table-column prop="ght" label="固化上"></el-table-column>
|
<el-table-column prop="dkb" label="打孔下"></el-table-column>
|
||||||
<el-table-column prop="ghb" label="固化下"></el-table-column>
|
<el-table-column prop="dmt" label="镀膜上"></el-table-column>
|
||||||
<el-table-column prop="gh1" label="钢化上"></el-table-column>
|
<el-table-column prop="dmb" label="镀膜下"></el-table-column>
|
||||||
<el-table-column prop="gh2" label="钢化下"></el-table-column>
|
<el-table-column prop="syt" label="丝印上"></el-table-column>
|
||||||
<el-table-column prop="bzt" label="包装上"></el-table-column>
|
<el-table-column prop="syb" label="丝印下"></el-table-column>
|
||||||
<el-table-column prop="bzb" label="包装下"></el-table-column>
|
<el-table-column prop="ght" label="固化上"></el-table-column>
|
||||||
</el-table>
|
<el-table-column prop="ghb" label="固化下"></el-table-column>
|
||||||
</div>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.realtime-table {
|
.realtime-table {
|
||||||
background: #00f3;
|
background: #00f3;
|
||||||
height: 240px;
|
height: 240px;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
align-self: self-start;
|
align-self: self-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-table {
|
.dark-table {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user