<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="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%;" />
    <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 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 class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(11.2% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(15.6% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(19.8% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(24.6% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(29.3% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(33.7% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(41.3% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(46.5% + 1vw);" />
    <XL class="node XL"
        style="width: 1vw;height: 1.27vw;top: 8.6%;left: calc(51.6% + 1vw);" />

    <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" :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" :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" :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" :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" :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" :state="gdData[22]"
         style="width: clamp(4px, 0.3vw, 8px);height: 5.3%;top: 68.3%;left: 27.6%;" />

    <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%;" />

    <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%;" />

    <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%;" />

    <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%;" />

    <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%;" />

    <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" :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%;" />
    <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%" />

    <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>
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 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 {
  position: absolute;
  display: inline-block;
  transform: translate(-50%, -50%);
}

.card {
  position: absolute;
  display: inline-block;
}

.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>
