xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工艺回放流程修改

Browse Source
master
suixy 7 days ago
parent 023a391b32
commit 7ead10a4d9
11 changed files with 998 additions and 110 deletions
Show Stats Download Patch File Download Diff File

8
src/components/chart.vue
Unescape Escape View File

@ -34,18 +34,18 @@ onMounted(async () => {
window.addEventListener('resize', resize);
});
const setData = (e) => {
const setData = (e,b) => {
option.value = e;
initChart(e);
initChart(e,b);
};
const on = (a, b) => {
chart.value.on(a, b);
};
const initChart = (option) => {
const initChart = (option,e = true) => {
if (!chart.value) {
chart.value = echarts.init(chartRef.value, 'macarons');
}
chart.value.setOption(option, true);
chart.value.setOption(option, e);
};
const resize = () => {
if (resizeTime.value) {

BIN
src/components/productionPlayback/images/密炼机.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 KiB

BIN
src/components/productionPlayback/images/密炼机.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

878
src/components/productionPlayback/index.vue
Unescape Escape View File

@ -3,18 +3,18 @@
<FJ class="node FJ" style="width: 1vw;height: 1vw;top:4%;left: 3.5%;" />
<FJ class="node FJ" style="width: 1vw;height: 1vw;top:4%;left: 7.5%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.7%;height: 6.5%;top: 6.5%;left: 2%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.7%;height: 6.5%;top: 6.5%;left: 6%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 12.9%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 17.3%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 21.5%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 26.3%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 31%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 35.4%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 43%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 48.2%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 53.3%;" />
<CLG :height="Math.random() * 100" class="node CLG" style="width: 3.5%;height: 2.8%;top: 19.8%;left: 7.3%;" />
<CLG :height="50" class="node CLG" style="width: 2.7%;height: 6.5%;top: 6.5%;left: 2%;" />
<CLG :height="50" class="node CLG" style="width: 2.7%;height: 6.5%;top: 6.5%;left: 6%;" />
<CLG :height="thData['1050000000002']" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 12.9%;" />
<CLG :height="thData['1050000000017']" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 17.3%;" />
<CLG :height="thData['1050000000005']" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 21.5%;" />
<CLG :height="50" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 26.3%;" />
<CLG :height="thData['1050000000001']" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 31%;" />
<CLG :height="thData['1050000000019']" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 35.4%;" />
<CLG :height="thData['1050000000008']" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 43%;" />
<CLG :height="50" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 48.2%;" />
<CLG :height="thData['1120000000019']" class="node CLG" style="width: 2.9%;height: 10.5%;top: 14.5%;left: 53.3%;" />
<CLG :height="50" class="node CLG" style="width: 3.5%;height: 2.8%;top: 19.8%;left: 7.3%;" />
<FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 12.5%;left: 6.5%;" />
<FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 13.4%;" />
@ -47,116 +47,155 @@
<LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 50.5%;left: 49.7%;" />
<LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 50.5%;left: 66.2%;" />
<LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 60.5%;left: 66.2%;" />
<LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 50.5%;left: 87.5%;" />
<LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 60.5%;left: 87.5%;" />
<!-- <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 50.5%;left: 87.5%;" />-->
<!-- <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 60.5%;left: 87.5%;" />-->
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 11.2%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 15.6%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 19.8%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 24.6%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 29.3%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 33.7%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 41.3%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 46.5%;" />
<DENG :height="Math.random() * 100" class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 51.6%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 11.2%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 15.6%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 19.8%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 24.6%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 29.3%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 33.7%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 41.3%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 46.5%;" />
<DENG class="node DENG" style="width: 0.8vw;height: 0.8vw;top: 9%;left: 51.6%;" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(11.2% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(15.6% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(19.8% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(24.6% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(29.3% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(33.7% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(41.3% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(46.5% + 1vw);" />
<XL :height="Math.random() * 100" class="node XL"
<XL class="node XL"
style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(51.6% + 1vw);" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 27%;top: 11.7%;left: 2%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 13.5%;left: 7.4%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11.6%;top: 23.2%;left: 14.3%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.6%;top: 23.2%;left: 18.7%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5.6%;top: 23.2%;left: 23.0%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5.6%;top: 23.2%;left: 27.7%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.6%;top: 23.2%;left: 32.4%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11.6%;top: 23.2%;left: 36.8%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.7%;top: 23.2%;left: 44.4%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 14%;top: 23.2%;left: 49.6%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.7%;top: 23.2%;left: 54.7%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 16.7%;top: 23.5%;left: 6.4%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 14.7%;top: 24.5%;left: 8.7%;" />
<GD1 class="node GD1" :state="gdData[1]"
style="width: clamp(4px, 0.3vw, 8px); height: 27%; top: 11.7%; left: 2%;" />
<GD1 class="node GD1" :state="gdData[2]" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 13.5%;left: 7.4%;" />
<GD1 class="node GD1" :state="gdData[5]"
style="width: clamp(4px, 0.3vw, 8px);height: 11.6%;top: 23.2%;left: 14.3%;" />
<GD1 class="node GD1" :state="gdData[6]"
style="width: clamp(4px, 0.3vw, 8px);height: 8.6%;top: 23.2%;left: 18.7%;" />
<GD1 class="node GD1" :state="gdData[7]"
style="width: clamp(4px, 0.3vw, 8px);height: 5.6%;top: 23.2%;left: 23.0%;" />
<GD1 class="node GD1" :state="gdData[8]"
style="width: clamp(4px, 0.3vw, 8px);height: 5.6%;top: 23.2%;left: 27.7%;" />
<GD1 class="node GD1" :state="gdData[9]"
style="width: clamp(4px, 0.3vw, 8px);height: 8.6%;top: 23.2%;left: 32.4%;" />
<GD1 class="node GD1" :state="gdData[10]"
style="width: clamp(4px, 0.3vw, 8px);height: 11.6%;top: 23.2%;left: 36.8%;" />
<GD1 class="node GD1" :state="gdData[11]"
style="width: clamp(4px, 0.3vw, 8px);height: 8.7%;top: 23.2%;left: 44.4%;" />
<GD1 class="node GD1" :state="gdData[12]"
style="width: clamp(4px, 0.3vw, 8px);height: 14%;top: 23.2%;left: 49.6%;" />
<GD1 class="node GD1" :state="gdData[13]"
style="width: clamp(4px, 0.3vw, 8px);height: 8.7%;top: 23.2%;left: 54.7%;" />
<GD1 class="node GD1" :state="gdData[3]"
style="width: clamp(4px, 0.3vw, 8px);height: 16.7%;top: 23.5%;left: 6.4%;" />
<GD1 class="node GD1" :state="gdData[4]"
style="width: clamp(4px, 0.3vw, 8px);height: 14.7%;top: 24.5%;left: 8.7%;" />
<GD2 class="node GD2" style="width: 15%;height: clamp(4px, 0.3vw, 8px);top: 39.5%;left: 8.5%;" />
<GD2 class="node GD2" style="width: 8%;height: clamp(4px, 0.3vw, 8px);top: 34.9%;left: 14.1%;" />
<GD2 class="node GD2" style="width: 5%;height: clamp(4px, 0.3vw, 8px);top: 31.9%;left: 18.5%;" />
<GD2 class="node GD2" style="width: 2%;height: clamp(4px, 0.3vw, 8px);top: 29%;left: 22.8%;" />
<GD2 class="node GD2" style="width: 2%;height: clamp(4px, 0.3vw, 8px);top: 29%;left: 25.9%;" />
<GD2 class="node GD2" style="width: 5.8%;height: clamp(4px, 0.3vw, 8px);top: 31.9%;left: 26.8%;" />
<GD2 class="node GD2" style="width: 9%;height: clamp(4px, 0.3vw, 8px);top: 34.9%;left: 28%;" />
<GD2 class="node GD2" style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 32%;left: 44.2%;" />
<GD2 class="node GD2" style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 32%;left: 51.2%;" />
<GD2 class="node GD2" :state="gdData[4]" style="width: 15%;height: clamp(4px, 0.3vw, 8px);top: 39.5%;left: 8.5%;" />
<GD2 class="node GD2" :state="gdData[5]" style="width: 8%;height: clamp(4px, 0.3vw, 8px);top: 34.9%;left: 14.1%;" />
<GD2 class="node GD2" :state="gdData[6]" style="width: 5%;height: clamp(4px, 0.3vw, 8px);top: 31.9%;left: 18.5%;" />
<GD2 class="node GD2" :state="gdData[7]" style="width: 2%;height: clamp(4px, 0.3vw, 8px);top: 29%;left: 22.8%;" />
<GD2F class="node GD2" :state="gdData[8]" style="width: 2%;height: clamp(4px, 0.3vw, 8px);top: 29%;left: 25.9%;" />
<GD2F class="node GD2" :state="gdData[9]"
style="width: 5.8%;height: clamp(4px, 0.3vw, 8px);top: 31.9%;left: 26.8%;" />
<GD2F class="node GD2" :state="gdData[10]" style="width: 9%;height: clamp(4px, 0.3vw, 8px);top: 34.9%;left: 28%;" />
<GD2 class="node GD2" :state="gdData[11]"
style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 32%;left: 44.2%;" />
<GD2F class="node GD2" :state="gdData[13]"
style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 32%;left: 51.2%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 4.9%;top: 34.1%;left: 21.8%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.1%;left: 23.3%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11%;top: 28.2%;left: 24.7%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 11%;top: 28.2%;left: 26%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.1%;left: 27%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 4.9%;top: 34.1%;left: 28%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.2%;left: 47.7%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.2%;left: 51.2%;" />
<GD1 class="node GD1" :state="gdData[5]"
style="width: clamp(4px, 0.3vw, 8px);height: 4.9%;top: 34.1%;left: 21.8%;" />
<GD1 class="node GD1" :state="gdData[6]"
style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.1%;left: 23.3%;" />
<GD1 class="node GD1" :state="gdData[7]"
style="width: clamp(4px, 0.3vw, 8px);height: 11%;top: 28.2%;left: 24.7%;" />
<GD1 class="node GD1" :state="gdData[8]" style="width: clamp(4px, 0.3vw, 8px);height: 11%;top: 28.2%;left: 26%;" />
<GD1 class="node GD1" :state="gdData[9]" style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.1%;left: 27%;" />
<GD1 class="node GD1" :state="gdData[10]"
style="width: clamp(4px, 0.3vw, 8px);height: 4.9%;top: 34.1%;left: 28%;" />
<GD1 class="node GD1" :state="gdData[11]"
style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.2%;left: 47.7%;" />
<GD1 class="node GD1" :state="gdData[13]"
style="width: clamp(4px, 0.3vw, 8px);height: 7.5%;top: 31.2%;left: 51.2%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5.3%;top: 43.7%;left: 25.1%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 15%;top: 54.1%;left: 25.1%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 42.7%;left: 49.7%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 16.3%;top: 53.1%;left: 49.7%;" />
<GD1 class="node GD1" :state="gdData[14]"
style="width: clamp(4px, 0.3vw, 8px);height: 5.3%;top: 43.7%;left: 25.1%;" />
<GD1 class="node GD1" :state="gdData[15]"
style="width: clamp(4px, 0.3vw, 8px);height: 15%;top: 54.1%;left: 25.1%;" />
<GD1 class="node GD1" :state="gdData[16]"
style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 42.7%;left: 49.7%;" />
<GD1 class="node GD1" :state="gdData[17]"
style="width: clamp(4px, 0.3vw, 8px);height: 16%;top: 53.1%;left: 49.7%;" />
<GD2 class="node GD2" style="width: 25%;height: clamp(4px, 0.3vw, 8px);top: 69.2%;left: 24.9%;" />
<GD2 class="node GD2" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 59%;left: 24.9%;" />
<GD2 class="node GD2" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 59%;left: 49.5%;" />
<GD2 class="node GD2" :state="gdData[18]"
style="width: 2.9%;height: clamp(4px, 0.3vw, 8px);top: 69.2%;left: 24.9%;" />
<GD2F class="node GD2" :state="gdData[23]"
style="width: 22.2%;height: clamp(4px, 0.3vw, 8px);top: 69.2%;left: 27.7%;" />
<GD2 class="node GD2" :state="gdData[19]" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 59%;left: 24.9%;" />
<GD2 class="node GD2" :state="gdData[20]" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 59%;left: 49.5%;" />
<GD2 class="node GD2" :state="gdData[0]"
style="width: 38%;height: clamp(4px, 0.3vw, 8px);top: 84.2%;left: 28.3%;" />
<GD2 class="node GD2" style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 20.9%;left: 58.9%;" />
<GD2 class="node GD2" style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 22.8%;left: 58.9%;" />
<GD2 class="node GD2" style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 25.2%;left: 58.9%;" />
<GD2 class="node GD2" :state="gdData[21]"
style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 20.9%;left: 58.9%;" />
<GD2 class="node GD2" :state="gdData[0]"
style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 22.8%;left: 58.9%;" />
<GD2 class="node GD2" :state="gdData[0]"
style="width: 14.6%;height: clamp(4px, 0.3vw, 8px);top: 25.2%;left: 58.9%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10.5%;top: 20.1%;left: 61.5%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 8.5%;top: 22%;left: 66.2%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 6%;top: 24.4%;left: 70.8%;" />
<GD1 class="node GD1" :state="gdData[22]"
style="width: clamp(4px, 0.3vw, 8px);height: 5.3%;top: 68.3%;left: 27.6%;" />
<GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 59.5%;" />
<GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 64.2%;" />
<GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 68.9%;" />
<GD1 class="node GD1" :state="gdData[0]"
style="width: clamp(4px, 0.3vw, 8px);height: 10.5%;top: 20.1%;left: 61.5%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 8.5%;top: 22%;left: 66.2%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 6%;top: 24.4%;left: 70.8%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 59.7%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 63.3%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 64.4%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 68%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 69.1%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 72.8%;" />
<GD2 class="node GD2" :state="gdData[0]" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 59.5%;" />
<GD2 class="node GD2" :state="gdData[0]" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 64.2%;" />
<GD2 class="node GD2" :state="gdData[0]" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 30.9%;left: 68.9%;" />
<GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 59.5%;" />
<GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 64.2%;" />
<GD2 class="node GD2" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 68.9%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 59.7%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 63.3%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 64.4%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 68%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 69.1%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 10%;top: 30%;left: 72.8%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 39.5%;left: 61.4%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 9%;top: 39.5%;left: 66.2%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 39.5%;left: 70.8%;" />
<GD2 class="node GD2" :state="gdData[0]" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 59.5%;" />
<GD2 class="node GD2" :state="gdData[0]" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 64.2%;" />
<GD2 class="node GD2" :state="gdData[0]" style="width: 4%;height: clamp(4px, 0.3vw, 8px);top: 40.2%;left: 68.9%;" />
<GD2 class="node GD2" style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 44.4%;left: 61.2%;" />
<GD2 class="node GD2" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 44.4%;left: 68%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 39.5%;left: 61.4%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 9%;top: 39.5%;left: 66.2%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 39.5%;left: 70.8%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 43.7%;left: 64.6%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 43.7%;left: 68.2%;" />
<GD2 class="node GD2" :state="gdData[0]"
style="width: 3.7%;height: clamp(4px, 0.3vw, 8px);top: 44.4%;left: 61.2%;" />
<GD2 class="node GD2" :state="gdData[0]" style="width: 3%;height: clamp(4px, 0.3vw, 8px);top: 44.4%;left: 68%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 53%;left: 66.2%;" />
<GD1 class="node GD1" style="width: clamp(4px, 0.3vw, 8px);height: 24%;top: 63.1%;left: 66.2%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 43.7%;left: 64.6%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 43.7%;left: 68.2%;" />
<GD1 class="node GD1" :state="gdData[0]" style="width: clamp(4px, 0.3vw, 8px);height: 5%;top: 53%;left: 66.2%;" />
<GD1 class="node GD1" :state="gdData[0]"
style="width: clamp(4px, 0.3vw, 8px);height: 21.1%;top: 63.1%;left: 66.2%;" />
<KG class="node KG" style="top: 12%;left: 1.8%;" />
<KG class="node KG" style="top: 14%;left: 7.3%;" />
@ -187,6 +226,49 @@
<ST class="node ST1" style="top: 58.6%;left: 49.95%;" />
<ST class="node ST1" style="top: 58.6%;left: 25.35%" />
<SSD :state="ssdData" class="node SSD" style="width: 21%;height: 17%;top: 76.6%;left: 10.55%;" />
<MLJ :state="mljData" class="node MLJ" style="width: 7%;height: 20%;top: 83.6%;left: 24.85%;" />
<div class="node" style="width: 33%;height: 36%;top: 81.6%;left: 83.15%;">
<Chart ref="chartRef"></Chart>
</div>
<MyCard
class="card"
style="width: 9%;top: 40.6%;left: 35%;"
title="粉料区"
:data="{ 状态: '---', 完成数: '---', 重量: '---' }"
/>
<MyCard
class="card"
style="width: 9%;top: 40.6%;left: 12%;"
title="碳黑区"
:data="{ 状态: '---', 完成数: '---', 重量: '---' }"
/>
<MyCard
class="card"
style="width: 9%;top: 48.6%;left: 1%;"
title="胶料区"
:data="{ 状态: '---', 完成数: '---', 重量: '---' }"
/>
<MyCard
class="card"
:size="8"
style="width: 24%;top: 2%;lef;left: 75%;"
title="配方：---"
:data="{
设定: '---',
完成: '---',
状态: '---',
功率: '---',
压力: '---',
时间: '---',
电流: '---',
温度: '---',
转速: '---'
}"
/>
</div>
</template>
<script setup>
@ -198,10 +280,607 @@ import XL from './nodes/xl.vue';
import FM1 from './nodes/fm1.vue';
import GD1 from './nodes/gd1.vue';
import GD2 from './nodes/gd2.vue';
import GD3 from './nodes/gd3.vue';
import GD2F from './nodes/gd2f.vue';
import KG from './nodes/kg.vue';
import ST from './nodes/st.vue';
import SSD from './nodes/ssd.vue';
import MLJ from './nodes/mlj.vue';
import MyCard from './nodes/card.vue';
import Chart from '@/components/chart';
const thData = ref({
'1050000000002': 50,
'1050000000017': 50,
'1050000000005': 50,
'1050000000001': 50,
'1050000000019': 50,
'1050000000008': 50,
'1120000000019': 50
});
const gdData = ref({
0: 1,
1: 1,
2: 1,
3: 1,
4: 1,
5: 1,
6: 1,
7: 1,
8: 1,
9: 1,
10: 1,
11: 1,
12: 1,
13: 1,
14: 1,
15: 1,
16: 1,
17: 1,
18: 1,
19: 1,
20: 1,
21: 1,
22: 1,
23: 1,
24: 1,
25: 1,
26: 1,
27: 1,
28: 1,
29: 1,
30: 1,
31: 1,
32: 1,
33: 1,
34: 1,
35: 1,
36: 1,
37: 1,
38: 1
});
const ssdData = ref(1);
const mljData = ref(1);
const steps = [
{
type: 1,
no: '1050000000002',
data: 1,
value: 20,
time: 0,
time2: 1000 * 10
},
{
type: 2,
no: 5,
data: 2,
time: 0
},
{
type: 2,
no: 14,
data: 2,
time: 0
},
{
type: 2,
no: 15,
data: 2,
time: 0
},
{
type: 2,
no: 18,
data: 2,
time: 0
},
{
type: 2,
no: 22,
data: 2,
time: 0
},
{
type: 2,
no: 5,
data: 1,
time: 1000 * 10
},
{
type: 2,
no: 14,
data: 1,
time: 1000 * 10
},
{
type: 2,
no: 15,
data: 1,
time: 1000 * 10
},
{
type: 2,
no: 18,
data: 1,
time: 1000 * 10
},
{
type: 1,
no: '1050000000008',
data: 1,
value: 20,
time: 1000 * 10,
time2: 1000 * 20
},
{
type: 2,
no: 11,
data: 2,
time: 1000 * 10
},
{
type: 2,
no: 16,
data: 2,
time: 1000 * 10
},
{
type: 2,
no: 17,
data: 2,
time: 1000 * 10
},
{
type: 2,
no: 23,
data: 2,
time: 1000 * 10
},
{
type: 2,
no: 11,
data: 1,
time: 1000 * 20
},
{
type: 2,
no: 16,
data: 1,
time: 1000 * 20
},
{
type: 2,
no: 17,
data: 1,
time: 1000 * 20
},
{
type: 2,
no: 23,
data: 1,
time: 1000 * 20
},
{
type: 2,
no: 22,
data: 1,
time: 1000 * 20
},
{
type: 3,
data: 2,
time: 1000 * 10
},
{
type: 3,
data: 1,
time: 1000 * 30
},
{
type: 4,
data: 2,
time: 1000 * 30
},
{
type: 4,
data: 1,
time: 1000 * 50
},
{
type: 5,
data: 2,
time: 1000 * 30,
time2: 1000 * 50
}
];
let time = 0;
let times = null;
let timesArr = []
let pauseFlag = false;
const chartRef = ref();
let xData = [2.00, 3.00, 4.00, 5.00, 6.00, 7.00, 8.00, 9.00, 10.00, 11.00, 12.00, 13.00, 14.00, 15.00, 16.00, 17.00, 18.00, 19.00, 20.00, 21.00, 22.00, 23.00, 24.00, 25.00, 26.00, 28.00, 29.00, 30.00, 31.00, 32.00, 33.00, 34.00, 35.00, 36.00, 37.00, 38.00, 39.00, 40.00, 41.00, 42.00, 43.00, 44.00, 45.00, 46.00, 47.00, 48.00, 49.00, 50.00, 51.00, 52.00, 53.00, 54.00, 55.00, 56.00, 57.00, 58.00, 60.00, 61.00, 62.00, 63.00, 64.00, 65.00, 66.00, 67.00, 68.00, 69.00, 70.00, 71.00, 72.00, 73.00, 74.00, 75.00, 76.00, 77.00, 78.00, 79.00, 80.00, 81.00, 82.00, 83.00, 84.00, 85.00, 86.00, 87.00, 88.00, 89.00, 91.00, 92.00, 93.00, 94.00, 95.00, 96.00, 97.00, 98.00, 99.00, 100.00, 101.00, 102.00, 103.00, 104.00, 105.00, 106.00, 107.00, 108.00, 109.00, 110.00, 111.00, 112.00, 113.00, 114.00, 115.00, 116.00, 117.00, 118.00, 119.00, 120.00, 122.00, 123.00, 124.00, 125.00, 126.00, 127.00, 128.00, 129.00, 130.00, 131.00, 132.00, 133.00, 134.00, 135.00, 136.00, 137.00, 138.00, 139.00, 140.00, 141.00, 142.00, 143.00, 144.00, 145.00, 146.00, 147.00, 148.00, 149.00, 150.00, 152.00, 153.00, 154.00, 155.00, 156.00, 157.00, 158.00, 159.00, 160.00, 161.00, 162.00, 163.00, 164.00, 165.00, 166.00, 167.00, 168.00, 169.00, 170.00, 171.00, 172.00, 173.00];
let y1Data = [
100.60, 94.40, 100.40, 104.00, 102.90, 103.10, 108.60, 107.80, 113.70, 106.40,
104.80, 105.00, 104.10, 104.40, 110.60, 105.20, 109.00, 106.70, 109.20, 108.60,
106.80, 111.00, 104.20, 105.00, 103.80, 110.60, 108.30, 105.20, 105.90, 105.20,
105.00, 104.80, 106.10, 103.50, 102.30, 102.20, 102.90, 102.50, 102.60, 104.10,
104.80, 105.10, 104.00, 104.80, 104.10, 101.60, 102.50, 102.90, 103.70, 104.10,
103.50, 104.40, 104.10, 104.80, 104.60, 104.00, 103.70, 103.20, 104.20, 104.00,
102.70, 102.40, 102.30, 102.90, 102.50, 102.80, 102.80, 103.20, 103.40, 103.10,
103.00, 102.70, 102.50, 102.50, 102.70, 102.50, 102.20, 102.90, 103.20, 103.00,
103.50, 104.20, 103.90, 103.70, 103.70, 103.70, 103.60, 102.80, 103.20, 103.10,
103.30, 103.90, 104.40, 104.70, 105.00, 105.00, 105.10, 105.10, 104.50, 104.10,
104.20, 104.30, 104.60, 104.30, 104.20, 102.90, 103.50, 104.10, 104.30, 104.40,
104.40, 104.50, 104.60, 105.00, 105.00, 105.10, 104.90, 104.80, 103.90, 104.40,
104.50, 104.20, 104.30, 104.40, 104.60, 104.30, 104.60, 104.90, 104.30, 104.30,
104.50, 104.80, 104.70, 104.90, 105.40, 106.30, 106.60, 107.00, 107.50, 108.50,
107.50, 108.30, 108.80, 109.10, 110.00, 109.50, 107.90, 109.10, 108.10, 108.30,
111.80, 110.30, 108.20, 107.00, 105.00, 104.70, 104.30, 104.00, 103.70, 103.50,
103.20, 102.90, 102.60, 102.40, 102.10, 101.60, 101.40
];
let y2Data = [
322.00, 292.00, 353.00, 371.00, 369.00, 369.00, 383.00, 379.00, 402.00, 457.00,
441.00, 401.00, 386.00, 493.00, 656.00, 697.00, 661.00, 655.00, 658.00, 650.00,
635.00, 635.00, 639.00, 636.00, 656.00, 629.00, 665.00, 686.00, 660.00, 655.00,
627.00, 594.00, 637.00, 688.00, 675.00, 728.00, 760.00, 760.00, 782.00, 809.00,
837.00, 841.00, 854.00, 859.00, 883.00, 891.00, 871.00, 872.00, 897.00, 890.00,
888.00, 884.00, 884.00, 912.00, 902.00, 805.00, 665.00, 438.00, 366.00, 370.00,
355.00, 336.00, 315.00, 287.00, 301.00, 486.00, 486.00, 627.00, 627.00, 639.00,
646.00, 645.00, 647.00, 650.00, 635.00, 633.00, 631.00, 624.00, 635.00, 640.00,
634.00, 635.00, 626.00, 626.00, 615.00, 610.00, 614.00, 601.00, 610.00, 600.00,
600.00, 586.00, 588.00, 589.00, 565.00, 351.00, 250.00, 250.00, 222.00, 240.00,
271.00, 274.00, 230.00, 173.00, 137.00, 149.00, 148.00, 153.00, 159.00, 158.00,
151.00, 141.00, 141.00, 138.00, 133.00, 150.00, 189.00, 222.00, 247.00, 257.00,
263.00, 267.00, 260.00, 258.00, 263.00, 257.00, 255.00, 255.00, 260.00, 263.00,
260.00, 258.00, 255.00, 258.00, 258.00, 261.00, 263.00, 260.00, 260.00, 259.00,
259.00, 259.00, 259.00, 259.00, 252.00, 254.00, 258.00, 253.00, 250.00, 252.00,
244.00, 187.00, 135.00, 86.00, 35.00, 22.00, 16.00, 16.00, 13.00, 11.00, 11.00,
12.00, 12.00, 12.00, 11.00, 11.00, 11.00
];
let y3Data = [
0.00, 0.10, 0.20, 0.40, 0.50, 0.60, 0.70, 0.80, 0.80, 0.90,
1.10, 1.20, 1.30, 1.40, 1.70, 1.90, 2.10, 2.30, 2.50, 2.60,
2.80, 3.00, 3.20, 3.40, 3.50, 3.70, 3.90, 4.10, 4.30, 4.50,
4.60, 4.80, 5.00, 5.20, 5.30, 5.70, 5.90, 6.10, 6.40, 6.40,
6.60, 6.80, 7.00, 7.30, 7.50, 8.00, 8.30, 8.50, 8.70, 9.00,
9.20, 9.50, 9.70, 10.00, 10.20, 10.50, 10.70, 10.90, 11.00, 11.10,
11.20, 11.30, 11.40, 11.50, 11.60, 11.80, 11.90, 12.10, 12.20, 12.40,
12.60, 12.60, 12.80, 13.00, 13.10, 13.50, 13.70, 13.80, 14.00, 14.20,
14.40, 14.50, 14.70, 14.90, 15.10, 15.20, 15.40, 15.60, 15.70, 15.90,
16.10, 16.20, 16.40, 16.60, 16.70, 17.00, 17.10, 17.20, 17.30, 17.30,
17.30, 17.40, 17.50, 17.50, 17.60, 17.70, 17.70, 17.70, 17.80, 17.80,
17.90, 17.90, 18.00, 18.00, 18.00, 18.10, 18.10, 18.20, 18.20, 18.30,
18.40, 18.40, 18.50, 18.60, 18.70, 18.80, 18.90, 18.90, 19.00, 19.10,
19.10, 19.20, 19.20, 19.30, 19.40, 19.50, 19.60, 19.70, 19.70, 19.80,
19.90, 19.90, 20.00, 20.10, 20.20, 20.20, 20.30, 20.40, 20.40, 20.50,
20.60, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70,
20.70, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70, 20.70
];
let y4Data = [
0.30, 0.20, 0.20, 0.20, 0.30, 0.20, 0.30, 0.70, 0.20, 0.20,
0.20, 1.10, 2.90, 3.00, 3.80, 4.10, 4.00, 4.10, 4.20, 4.20,
4.00, 4.10, 4.00, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
2.20, 2.20, 2.30, 2.40, 0.20, 0.30, 0.20, 0.20, 0.20, 0.70,
3.60, 3.40, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
0.20, 2.10, 2.30, 2.40, 0.40, 0.20, 0.30, 0.30, 0.30, 0.30,
0.30, 0.30, 0.30, 0.30, 0.30, 0.30, 0.30, 0.30, 0.20, 0.20,
0.20, 0.70, 3.50, 3.40, 3.90, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10,
4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 4.10, 0.80, 1.20, 2.20,
2.20, 2.30, 0.20, 0.20, 0.20, 0.20, 0.20, 0.20, 0.20, 0.20,
0.20, 0.20, 0.20, 0.20, 0.20
];
let y5Data = [
38.00, 38.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00,
39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00,
39.00, 39.00, 39.00, 39.00, 39.00, 38.00, 39.00, 38.00, 39.00, 39.00,
39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00,
39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00, 39.00,
39.00, 39.00, 39.00, 38.00, 38.00, 39.00, 39.00, 39.00, 38.00, 37.00,
36.00, 35.00, 35.00, 34.00, 33.00, 33.00, 32.00, 31.00, 31.00, 30.00,
30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00,
30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 30.00,
30.00, 30.00, 30.00, 30.00, 30.00, 30.00, 28.00, 28.00, 28.00, 27.00,
26.00, 26.00, 25.00, 25.00, 24.00, 23.00, 22.00, 22.00, 21.00, 21.00,
20.00, 19.00, 19.00, 19.00, 18.00, 17.00, 16.00, 16.00, 16.00, 16.00,
16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00,
16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00,
16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00, 16.00,
16.00, 16.00, 17.00, 17.00, 18.00, 19.00, 20.00, 20.00, 20.00, 21.00,
21.00, 22.00, 23.00, 23.00, 24.00, 24.00, 26.00, 26.00
];
const clgRun = (e) => {
let step = (e.time2 - e.time) / 16;
let num = (thData.value[e.no] - e.value) / step;
let times1 = setInterval(() => {
if (!pauseFlag) {
thData.value[e.no] -= num;
}
if (thData.value[e.no] <= e.value) {
thData.value[e.no] = e.value;
clearInterval(times1);
times1 = null;
}
}, 16);
timesArr.push(times1)
};
const board = (e) => {
let x = [];
let y1 = [];
let y2 = [];
let y3 = [];
let y4 = [];
let y5 = [];
let time = (e.time2 - e.time) / xData.length;
let index = 0;
let times1 = setInterval(() => {
if (!pauseFlag) {
if (x.length < xData.length) {
x.push(xData[index]);
y1.push(y1Data[index]);
y2.push(y2Data[index]);
y3.push(y3Data[index]);
y4.push(y4Data[index]);
y5.push(y5Data[index]);
chartRef.value?.setData({
xAxis: { data: x },
series: [
{ data: y1 },
{ data: y2 },
{ data: y3 },
{ data: y4 },
{ data: y5 }
]
}, false);
}
index += 1;
}
if (x.length === xData.length) {
clearInterval(times1);
times1 = null;
}
}, time);
timesArr.push(times1)
};
const action = (e) => {
if (e.type === 1) {
clgRun(e);
}
if (e.type === 2) {
gdData.value[e.no] = e.data;
}
if (e.type === 3) {
ssdData.value = e.data;
}
if (e.type === 4) {
mljData.value = e.data;
}
if (e.type === 5) {
board(e);
}
};
const play = (e) => {
if (e === 1) {
pauseFlag = false;
if (time === 0) {
let arr = steps.filter(e => e.time === 0);
arr.forEach(e => {
action(e);
});
times = setInterval(() => {
let time1 = time;
let time2 = time + 500;
time += 500;
let arr = steps.filter(e => e.time > time1 && e.time <= time2);
arr.forEach(e => {
action(e);
});
}, 500);
} else {
if (!times) {
times = setInterval(() => {
let time1 = time;
let time2 = time + 500;
time += 500;
let arr = steps.filter(e => e.time > time1 && e.time <= time2);
arr.forEach(e => {
action(e);
});
}, 500);
}
}
}
if (e === 2) {
clearInterval(times);
times = null;
pauseFlag = true;
}
};
const start = () => {
play(1);
};
const pause = () => {
play(2);
};
const init = () => {
if (times) {
clearInterval(times);
}
timesArr.forEach(e => {
clearInterval(e);
})
time = 0;
times = null;
pauseFlag = false;
thData.value = {
'1050000000002': 50,
'1050000000017': 50,
'1050000000005': 50,
'1050000000001': 50,
'1050000000019': 50,
'1050000000008': 50,
'1120000000019': 50
};
gdData.value = {
0: 1,
1: 1,
2: 1,
3: 1,
4: 1,
5: 1,
6: 1,
7: 1,
8: 1,
9: 1,
10: 1,
11: 1,
12: 1,
13: 1,
14: 1,
15: 1,
16: 1,
17: 1,
18: 1,
19: 1,
20: 1,
21: 1,
22: 1,
23: 1,
24: 1,
25: 1,
26: 1,
27: 1,
28: 1,
29: 1,
30: 1,
31: 1,
32: 1,
33: 1,
34: 1,
35: 1,
36: 1,
37: 1,
38: 1
};
ssdData.value = 1;
mljData.value = 1;
chartRef.value?.setData({
backgroundColor: '#fff',
legend: {
top: 0,
left: 'center',
itemWidth: 10,
itemHeight: 6,
textStyle: {
fontSize: 8,
color: '#4C95C1'
}
},
grid: {
top: '10%',
left: '10%',
right: '10%',
bottom: '10%'
},
xAxis: {
type: 'category',
data: [],
axisLabel: {
fontSize: 8
}
},
yAxis: [
{
type: 'value',
splitNumber: 6,
axisLabel: {
fontSize: 8
}
},
{
type: 'value',
splitNumber: 6,
axisLabel: {
fontSize: 8
},
splitLine: {
show: false
}
}
],
series: [
{
data: [],
type: 'line',
lineStyle: {
width: 1
},
symbol: 'circle',
symbolSize: [1, 1],
name: '温度'
},
{
data: [],
type: 'line',
lineStyle: {
width: 1
},
symbol: 'circle',
symbolSize: [1, 1],
name: '功率',
yAxisIndex: 1
},
{
data: [],
type: 'line',
lineStyle: {
width: 1
},
symbol: 'circle',
symbolSize: [1, 1],
name: '能耗'
},
{
data: [],
type: 'line',
lineStyle: {
width: 1
},
symbol: 'circle',
symbolSize: [1, 1],
name: '压力'
},
{
data: [],
type: 'line',
lineStyle: {
width: 1
},
symbol: 'circle',
symbolSize: [1, 1],
name: '转速'
}
]
});
};
defineExpose({
start,
pause,
init
});
onMounted(async () => {
await nextTick();
init();
});
</script>
<style scoped>
.node {
@ -210,6 +889,11 @@ import ST from './nodes/st.vue';
transform: translate(-50%, -50%);
}
.card {
position: absolute;
display: inline-block;
}
.LD {
z-index: 1;
}

77
src/components/productionPlayback/nodes/card.vue
Unescape Escape View File

@ -0,0 +1,77 @@
<template>
<div class="card-container">
<div class="card-header" :style="`font-size:${size+2}px`">{{ title }}</div>
<div class="card-body" :style="`font-size:${size+2}px`">
<div class="card-row" v-for="(value, key) in data" :key="key">
<span class="card-key">{{ key }}:</span>
<span class="card-value">{{ value }}</span>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: '标题'
},
size: {
type: Number,
default: 10
},
data: {
type: Object,
default: () => ({
'数据1': '123',
'数据2': '456',
'数据3': '789'
})
}
});
</script>
<style scoped>
.card-container {
min-width: 50xpx;
border-radius: 12px;
overflow: hidden;
background-color: rgba(39, 72, 100, 0.8); /* 半透明背景 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
color: #fff;
font-family: Arial, sans-serif;
}
.card-header {
background-color: #274864; /* 标题不透明 */
font-weight: bold;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.card-body {
padding: 2px 6px;
}
.card-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.card-row:last-child {
border-bottom: none;
}
.card-key {
font-weight: 500;
color: #a0c4ff;
}
.card-value {
font-weight: 400;
color: #ffffff;
padding-left: 0.5vw;
}
</style>

11
src/components/productionPlayback/nodes/gd1.vue
Unescape Escape View File

@ -1,11 +1,17 @@
<template>
<div style="width: 100%;height: 100%">
<!-- <div class="a"></div>-->
<div class="b"></div>
<div class="a" v-if="state === 1"></div>
<div class="b" v-if="state === 2"></div>
</div>
</template>
<script setup>
defineProps({
state: {
type: Number,
required: true
}
});
</script>
<style scoped>
.a {
@ -16,6 +22,7 @@
background-repeat: no-repeat;
background-size: 100% 100%;
}
.b {
width: 100%;
height: 100%;

11
src/components/productionPlayback/nodes/gd2.vue
Unescape Escape View File

@ -1,12 +1,19 @@
<template>
<div style="width: 100%;height: 100%">
<!-- <div class="a"></div>-->
<div class="b"></div>
<div class="a" v-if="state === 1"></div>
<div class="b" v-if="state === 2"></div>
<!-- <div class="c"></div>-->
</div>
</template>
<script setup>
defineProps({
state: {
type: Number,
required: true
}
});
</script>
<style scoped>
.a {

34
src/components/productionPlayback/nodes/gd2f.vue
Unescape Escape View File

@ -0,0 +1,34 @@
<template>
<div style="width: 100%;height: 100%">
<div class="a" v-if="state === 1"></div>
<div class="b" v-if="state === 2"></div>
</div>
</template>
<script setup>
defineProps({
state: {
type: Number,
required: true
}
});
</script>
<style scoped>
.a {
width: 100%;
height: 100%;
//background-color: #C5C5C5;
background-image: url("../images/管2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.b {
width: 100%;
height: 100%;
//background-color: #C5C5C5;
background-image: url("../images/管道-反向.gif");
background-repeat: no-repeat;
background-size: cover;
}
</style>

32
src/components/productionPlayback/nodes/mlj.vue
Unescape Escape View File

@ -0,0 +1,32 @@
<template>
<div style="width: 100%;height: 100%">
<div class="a" v-if="state === 1"></div>
<div class="b" v-if="state === 2"></div>
</div>
</template>
<script setup>
defineProps({
state: {
type: Number,
required: true
}
});
</script>
<style scoped>
.a {
width: 100%;
height: 100%;
background-image: url("../images/密炼机.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.b {
width: 100%;
height: 100%;
background-image: url("../images/密炼机.gif");
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>

32
src/components/productionPlayback/nodes/ssd.vue
Unescape Escape View File

@ -0,0 +1,32 @@
<template>
<div style="width: 100%;height: 100%">
<div class="a" v-if="state === 1"></div>
<div class="b" v-if="state === 2"></div>
</div>
</template>
<script setup>
defineProps({
state: {
type: Number,
required: true
}
});
</script>
<style scoped>
.a {
width: 100%;
height: 100%;
background-image: url("../images/输送带.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.b {
width: 100%;
height: 100%;
background-image: url("../images/输送带.gif");
background-repeat: no-repeat;
background-size: cover;
}
</style>

25
src/views/mes/productionPlayback/index.vue
Unescape Escape View File

@ -3,6 +3,7 @@
<div class="top">
<el-date-picker
v-model="value2"
@change="flag = true"
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
@ -10,17 +11,30 @@
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
<el-button type="primary" style="margin-left: 12px;">播放</el-button>
<el-button>停止</el-button>
<el-button type="primary" style="margin-left: 12px;" @click="start">播放</el-button>
<el-button @click="pause">暂停</el-button>
</div>
<div class="content">
<ProductionPlayback style="width: 100%;height: 100%"/>
<ProductionPlayback style="width: 100%;height: 100%" ref="ProductionPlaybackRef" />
</div>
</div>
</template>
<script setup>
import ProductionPlayback from '@/components/productionPlayback/index.vue'
import ProductionPlayback from '@/components/productionPlayback/index.vue';
const value2 = ref();
const flag = ref(true);
const ProductionPlaybackRef = ref();
const start = () => {
if(flag.value){
ProductionPlaybackRef.value.init();
flag.value = false;
}
ProductionPlaybackRef.value.start();
};
const pause = () => {
ProductionPlaybackRef.value.pause();
};
</script>
<style scoped>
.top {
@ -29,7 +43,8 @@ const value2 = ref();
.content {
margin-left: 12px;
width: 100%;
//width: 100%;
width: 960px;
height: 540px;
background-color: #274864;
//background-color: #3e9122;

Write Preview
Loading…
Cancel
Save