添加工艺回放

src/components/productionPlayback/index.vue

@@ -0,0 +1,291 @@
+<template>
+  <div style="width:100%;height:100%;position: relative">
+    <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%;" />
+
+    <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%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 17.8%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 22%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 26.8%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 31.5%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 35.9%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 43.5%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 48.7%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 22.7%;left: 53.8%;" />
+    <FM1 class="node FM" style="width: 3.3%;height: 2.5%;top: 23.5%;left: 7.9%;" />
+
+    <LD class="node LD" style="width: 2.7%;height: 2.1%;top: 10.7%;left: 2%;" />
+    <LD class="node LD" style="width: 2.7%;height: 2.1%;top: 10.7%;left: 6%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 12.9%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 17.3%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 21.5%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 26.3%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 31%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 35.4%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 43%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 48.2%;" />
+    <LD class="node LD" style="width: 2.9%;height: 2.5%;top: 20.9%;left: 53.3%;" />
+    <LD class="node LD" style="width: 3.5%;height: 1.5%;top: 22%;left: 7.3%;" />
+
+    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 41%;left: 25.1%;" />
+    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 51.5%;left: 25.1%;" />
+    <LD class="node LD-h" style="width: 7.5%;height: 5.5%;top: 40%;left: 49.7%;" />
+    <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%;" />
+
+    <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%;" />
+
+    <XL :height="Math.random() * 100" 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"
+        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(15.6% + 1vw);" />
+    <XL :height="Math.random() * 100" 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"
+        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(24.6% + 1vw);" />
+    <XL :height="Math.random() * 100" 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"
+        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(33.7% + 1vw);" />
+    <XL :height="Math.random() * 100" 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"
+        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(46.5% + 1vw);" />
+    <XL :height="Math.random() * 100" 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%;" />
+
+    <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%;" />
+
+    <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" 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%;" />
+
+    <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" 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%;" />
+
+    <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%;" />
+
+    <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" 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" 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" 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" 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" 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%;" />
+
+    <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%;" />
+
+    <KG class="node KG" style="top: 12%;left: 1.8%;" />
+    <KG class="node KG" style="top: 14%;left: 7.3%;" />
+    <KG class="node KG" style="top: 24%;left: 6.3%;" />
+    <KG class="node KG" style="top: 25%;left: 8.6%;" />
+    <KG class="node KG" style="top: 24%;left: 14.2%;" />
+    <KG class="node KG" style="top: 24%;left: 18.6%;" />
+    <KG class="node KG" style="top: 24%;left: 22.9%;" />
+    <KG class="node KG" style="top: 24%;left: 27.6%;" />
+    <KG class="node KG" style="top: 24%;left: 32.3%;" />
+    <KG class="node KG" style="top: 24%;left: 36.7%;" />
+    <KG class="node KG" style="top: 24%;left: 44.25%" />
+    <KG class="node KG" style="top: 24%;left: 49.5%;" />
+    <KG class="node KG" style="top: 24%;left: 54.6%;" />
+
+    <KG class="node KG" style="top: 44%;left: 25%;" />
+    <KG class="node KG" style="top: 46%;left: 25%;" />
+    <KG class="node KG" style="top: 54%;left: 25%;" />
+    <KG class="node KG" style="top: 55.5%;left: 25%;" />
+
+    <KG class="node KG" style="top: 42.8%;left: 49.6%;" />
+    <KG class="node KG" style="top: 44.5%;left: 49.6%;" />
+    <KG class="node KG" style="top: 53.5%;left: 49.6%;" />
+    <KG class="node KG" style="top: 55%;left: 49.6%;" />
+
+    <KG class="node KG2" style="top: 58%;left: 27.5%;" />
+    <KG class="node KG2" style="top: 58%;left: 52%;" />
+
+    <ST class="node ST1" style="top: 58.6%;left: 49.95%;" />
+    <ST class="node ST1" style="top: 58.6%;left: 25.35%" />
+  </div>
+</template>
+<script setup>
+import FJ from './nodes/fj.vue';
+import CLG from './nodes/clg.vue';
+import LD from './nodes/ld.vue';
+import DENG from './nodes/deng.vue';
+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 KG from './nodes/kg.vue';
+import ST from './nodes/st.vue';
+
+</script>
+<style scoped>
+.node {
+  position: absolute;
+  display: inline-block;
+  transform: translate(-50%, -50%);
+}
+
+.LD {
+  z-index: 1;
+}
+
+.LD-h {
+  z-index: 10;
+}
+
+.CLG {
+  z-index: 2;
+}
+
+.FJ {
+  z-index: 3;
+  transform: translate(-50%, -100%);
+}
+
+.DENG {
+  z-index: 3;
+  transform: translate(0%, -100%);
+}
+
+.XL {
+  z-index: 3;
+  transform: translate(0%, -100%);
+}
+
+.GD1 {
+  z-index: 3;
+  transform: translate(-50%, 0%);
+}
+
+.GD2 {
+  z-index: 3;
+  transform: translate(0%, -100%);
+}
+
+.GD3 {
+  z-index: 3;
+  transform: translate(-50%, -100%);
+}
+
+.KG {
+  z-index: 10;
+  //width: clamp(9.94px, 0.7455vw, 19.88px);
+  width: clamp(6.667px, 0.5vw, 13.3334px);
+  height: clamp(9.334px, 0.7vw, 18.667px);
+  transform-origin: center;
+  transform: rotate(90deg);
+}
+
+.KG2 {
+  z-index: 10;
+  width: clamp(6.667px, 0.5vw, 13.3334px);
+  height: clamp(9.334px, 0.7vw, 18.667px);
+}
+
+.ST1 {
+  z-index: 20;
+  width: clamp(12px, 0.9vw, 24px);
+  height: clamp(12px, 0.9vw, 24px);
+}
+
+.ST2 {
+  z-index: 20;
+  width: clamp(12px, 0.9vw, 24px);
+  height: clamp(12px, 0.9vw, 24px);
+  transform-origin: center;
+  transform: rotate(90deg);
+}
+
+.ST3 {
+  z-index: 20;
+  width: clamp(12px, 0.9vw, 24px);
+  height: clamp(12px, 0.9vw, 24px);
+  transform-origin: center;
+  transform: rotate(180deg);
+}
+</style>

src/components/productionPlayback/nodes/clg.vue

@@ -0,0 +1,54 @@
+<template>
+  <div style="width: 100%;height: 100%;position: absolute">
+    <div class="a"></div>
+    <div class="b">
+      <div class="yw" :style="`height: ${height}%`"></div>
+    </div>
+    <div class="c"></div>
+  </div>
+</template>
+<script setup>
+defineProps({
+  height: {
+    type: [String, Number],
+    required: true
+  }
+});
+</script>
+<style scoped lang="less">
+
+.a, .c {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-size: 100% 100%;
+}
+
+.a {
+  background-image: url("../images/clg1.png");
+}
+
+.b {
+  position: absolute;
+  width: 94%;
+  height: 100%;
+  bottom: 0%;
+  left: 3%;
+
+  .yw {
+    position: absolute;
+    bottom: 0%;
+    width: 100%;
+    background-image: url("../images/yw1.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: bottom;
+  }
+}
+
+.c {
+  background-image: url("../images/clg2.png");
+}
+</style>

src/components/productionPlayback/nodes/deng.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="width: 100%;height: 100%">
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/灯绿.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/productionPlayback/nodes/fj.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="width: 100%;height: 100%">
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/风机.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/productionPlayback/nodes/fm1.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="width: 100%;height: 100%">
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/2.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/productionPlayback/nodes/gd1.vue

@@ -0,0 +1,27 @@
+<template>
+  <div style="width: 100%;height: 100%">
+<!--    <div class="a"></div>-->
+    <div class="b"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  //background-color: #C5C5C5;
+  background-image: url("../images/管1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.b {
+  width: 100%;
+  height: 100%;
+  //background-color: #C5C5C5;
+  background-image: url("../images/管道1.gif");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>

src/components/productionPlayback/nodes/gd2.vue

@@ -0,0 +1,36 @@
+<template>
+  <div style="width: 100%;height: 100%">
+<!--    <div class="a"></div>-->
+    <div class="b"></div>
+<!--    <div class="c"></div>-->
+  </div>
+</template>
+<script setup>
+
+</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;
+}
+.c {
+  width: 100%;
+  height: 100%;
+  //background-color: #C5C5C5;
+  background-image: url("../images/管道-反向.gif");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+</style>

src/components/productionPlayback/nodes/gd3.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="width: 100%;height: 100%">
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/弯钩.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/productionPlayback/nodes/kg.vue

@@ -0,0 +1,17 @@
+<template>
+  <div  >
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/开关.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/productionPlayback/nodes/ld.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="width: 100%;height: 100%">
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/漏斗.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/productionPlayback/nodes/st.vue

@@ -0,0 +1,17 @@
+<template>
+  <div >
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/三通阀.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/components/productionPlayback/nodes/xl.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="width: 100%;height: 100%">
+    <div class="a"></div>
+  </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.a {
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+</style>

src/router/index.ts

@@ -29,6 +29,9 @@ import i18n from '@/lang/index';
 
 // 公共路由
 export const constantRoutes: RouteRecordRaw[] = [
+
+
+
   {
     path: '/test',
     hidden: true,
@@ -120,7 +123,12 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: () => import('@/views/index.vue'),
         name: 'Index',
         meta: { title: i18n.global.t('navbar.dashboard'), icon: 'dashboard', affix: true }
-      }
+      },
+      {
+        path: '/mes/mixing/productionPlayback',
+        hidden: true,
+        component: () => import('@/views/mes/productionPlayback/index.vue')
+      },
     ]
   },
   {

src/views/boardGenerate/index.vue

@@ -2687,7 +2687,12 @@ const addRequest = (e) => {
 }
 </style>
 <style>
-.vue-flow__handle {
+.vue-flow__handle-left {
+  width: 1vw;
+  height: 1vw;
+  opacity: 0.2;
+}
+.vue-flow__handle-right {
   width: 1vw;
   height: 1vw;
 }

src/views/boardGenerate/nodes/board/lineNode.vue

@@ -1,6 +1,8 @@
 <template>
-  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
-    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+  <div
+    :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
+                 v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div
       class="custom-node"
@@ -356,10 +358,10 @@ onMounted(() => {
   chart && chart.setOption(getOption(), false);
 });
 watch(
-  () => [JSON.parse(JSON.stringify(props.colors))],
+  () => [JSON.parse(JSON.stringify(props?.colors || '[]'))],
   (obj1, obj2) => {
     if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-      colorList.value = props.colors
+      colorList.value = props.colors;
     }
   },
   { deep: true, immediate: true }

src/views/mes/productionPlayback/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div class="top">
+      <el-date-picker
+        v-model="value2"
+        type="datetimerange"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        format="YYYY-MM-DD HH:mm:ss"
+        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>
+    </div>
+    <div class="content">
+      <ProductionPlayback style="width: 100%;height: 100%"/>
+    </div>
+  </div>
+</template>
+<script setup>
+import ProductionPlayback from '@/components/productionPlayback/index.vue'
+const value2 = ref();
+</script>
+<style scoped>
+.top {
+  padding: 12px 12px 5px 12px;
+}
+
+.content {
+  margin-left: 12px;
+  width: 960px;
+  height: 540px;
+  background-color: #274864;
+  //background-color: #3e9122;
+}
+</style>