diff --git a/src/components/chart.vue b/src/components/chart.vue
index e100958..d818ade 100644
--- a/src/components/chart.vue
+++ b/src/components/chart.vue
@@ -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) {
diff --git a/src/components/productionPlayback/images/密炼机.gif b/src/components/productionPlayback/images/密炼机.gif
new file mode 100755
index 0000000..a19ad60
Binary files /dev/null and b/src/components/productionPlayback/images/密炼机.gif differ
diff --git a/src/components/productionPlayback/images/密炼机.png b/src/components/productionPlayback/images/密炼机.png
new file mode 100644
index 0000000..5574ee0
Binary files /dev/null and b/src/components/productionPlayback/images/密炼机.png differ
diff --git a/src/components/productionPlayback/index.vue b/src/components/productionPlayback/index.vue
index 3c78ba6..8f03113 100644
--- a/src/components/productionPlayback/index.vue
+++ b/src/components/productionPlayback/index.vue
@@ -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;
 }
diff --git a/src/components/productionPlayback/nodes/card.vue b/src/components/productionPlayback/nodes/card.vue
new file mode 100644
index 0000000..a85bfb1
--- /dev/null
+++ b/src/components/productionPlayback/nodes/card.vue
@@ -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>
diff --git a/src/components/productionPlayback/nodes/gd1.vue b/src/components/productionPlayback/nodes/gd1.vue
index 7434f98..0b9faba 100644
--- a/src/components/productionPlayback/nodes/gd1.vue
+++ b/src/components/productionPlayback/nodes/gd1.vue
@@ -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%;
diff --git a/src/components/productionPlayback/nodes/gd2.vue b/src/components/productionPlayback/nodes/gd2.vue
index 609e966..ecb2a1e 100644
--- a/src/components/productionPlayback/nodes/gd2.vue
+++ b/src/components/productionPlayback/nodes/gd2.vue
@@ -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 {
diff --git a/src/components/productionPlayback/nodes/gd2f.vue b/src/components/productionPlayback/nodes/gd2f.vue
new file mode 100644
index 0000000..f524cd0
--- /dev/null
+++ b/src/components/productionPlayback/nodes/gd2f.vue
@@ -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>
diff --git a/src/components/productionPlayback/nodes/mlj.vue b/src/components/productionPlayback/nodes/mlj.vue
new file mode 100644
index 0000000..d294fba
--- /dev/null
+++ b/src/components/productionPlayback/nodes/mlj.vue
@@ -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>
diff --git a/src/components/productionPlayback/nodes/ssd.vue b/src/components/productionPlayback/nodes/ssd.vue
new file mode 100644
index 0000000..8ec7584
--- /dev/null
+++ b/src/components/productionPlayback/nodes/ssd.vue
@@ -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>
diff --git a/src/views/mes/productionPlayback/index.vue b/src/views/mes/productionPlayback/index.vue
index 916b8bf..e53c938 100644
--- a/src/views/mes/productionPlayback/index.vue
+++ b/src/views/mes/productionPlayback/index.vue
@@ -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;