乙烯平衡

ui/src/views/front/ethyleneBalance.vue

@@ -0,0 +1,1142 @@
+<template>
+  <div id="steamBalance">
+    <!--<div class="bg-color-black">-->
+      <!-- <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-bar"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">乙烯平衡表</span>
+        </div>
+      </div> -->
+
+      <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);height:100%;position:relative;">
+        <div class="ethylene_box">
+              <!-- 数据文字1 -->
+               <div class="dataText pos1">
+                  -0.01
+               </div>
+
+               <!-- 数据文字2 -->
+               <div class="dataText pos2">
+                  4.08
+               </div>
+
+               <!-- 数据文字3 -->
+               <div class="dataText2 pos3">
+                  2.88
+               </div>
+                <!-- 数据文字4 -->
+                <div class="dataText pos4">
+                  24.13
+                </div>
+                <!-- 数据文字5 -->
+                <div class="dataText2 pos5">
+                  24.00
+                </div>
+                <!-- 数据文字6 -->
+                <div class="dataText pos6">
+                  2.09
+                </div>
+                <!-- 数据文字7 -->
+                <div class="dataText2 pos7">
+                  2.13
+                </div>
+                <!-- 数据文字8 -->
+                <div class="dataText pos8">
+                  4.31
+                </div>
+                <!-- 数据文字9 -->
+                <div class="dataText2 pos9">
+                  4.31
+                </div>
+                <!-- 数据文字10 -->
+                <div class="dataText pos10">
+                  30.40
+                </div>
+                <!-- 数据文字11 -->
+                <div class="dataText2 pos11">
+                    30.30
+                </div>
+                <!-- 数据文字12 -->
+                <div class="dataText pos12">
+                  19.93
+                </div>
+                <!-- 数据文字13 -->
+                <div class="dataText2 pos13">
+                  19.86
+                </div>
+                <!-- 数据文字14 -->
+                <div class="dataText pos14">
+                  3.71
+                </div>
+                <!-- 数据文字15 -->
+                <div class="dataText pos15">
+                  2.98
+                </div>
+                <!-- 数据文字16 -->
+                <div class="dataText pos16">
+                    0.00
+                </div>
+                <!-- 数据文字17 -->
+                <div class="dataText3 pos17">
+                    3.32MPag
+                </div>
+                <!-- 数据文字18 -->
+                <div class="dataText3 pos18">
+                    Max 25t/h
+                </div>
+                <!-- 数据文字19 -->
+                <div class="dataText3 pos19">
+                    2.61t/h
+                </div>
+                <!-- 数据文字20 -->
+                <div class="dataText3 pos20">
+                    21.07 bar
+                </div>
+                <!-- 数据文字21 -->
+                <div class="dataText3 pos21">
+                    -1.33℃
+                </div>
+                <!-- 数据文字22 -->
+                <div class="dataText3 pos22">
+                    23.8kg(g)
+                </div>
+                <!-- 数据文字23 -->
+                <div class="dataText3 pos23">
+                    62%
+                </div>
+                <!-- 数据文字24 -->
+                <div class="dataText3 pos24">
+                  23.52 barg
+                </div>
+                <!-- 数据文字25 -->
+                <div class="dataText3 pos25">
+                    47.57℃
+                </div>
+                <!-- 数据文字26 -->
+                <div class="dataText3 pos26">
+                    -1.16%
+                </div>
+                <!-- 数据文字27 -->
+                <div class="dataText3 pos27">
+                    27.06℃
+                </div>
+                <!-- 数据文字28 -->
+                <div class="dataText3 pos28">
+                    23.8kg(g)
+                </div>
+                <!-- 数据文字29 -->
+                <div class="dataText3 pos29">
+                    RUNNING
+                </div>
+                <!-- 数据文字30 -->
+                <div class="dataText3 pos30">Open</div>
+                <!-- 数据文字31 -->
+                <div class="dataText3 pos31">3.22%</div>
+                <!-- 数据文字32 -->
+                <div class="dataText3 pos32">Open</div>
+                <!-- 数据文字33 -->
+                <div class="dataText3 pos33">0.00 t/h</div>
+                <!-- 数据文字34 -->
+                <div class="dataText3 pos34">34</div>
+                <!-- 数据文字35 -->
+                <div class="dataText3 pos35">35</div>
+                <!-- 数据文字36 -->
+                <div class="dataText3 pos36">21.608.55 t/h</div>
+                <!-- 数据文字37 -->
+                <div class="dataText3 pos37">2.38Mpa</div>
+                <!-- 数据文字38 -->
+                <div class="dataText3 pos38">2.3 Mpa</div>
+                <!-- 数据文字39 -->
+                <div class="dataText3 pos39">12.72%</div>
+                <!-- 数据文字40 -->
+                <div class="dataText3 pos40">23.57barg</div>
+                <!-- 数据文字41 -->
+                <div class="dataText pos41">0.00</div>
+                <!-- 数据文字42 -->
+                <div class="dataText3 pos42">44.784.2 t/h</div>
+                <!-- 数据文字43 -->
+                <div class="dataText3 pos43">1.65Mpa</div>
+                <!-- 数据文字44 -->
+                <div class="dataText3 pos44">325.17 kg/m3</div>
+                <!-- 数据文字45 -->
+                <div class="dataText3 pos45">0.88 t/h</div>
+                <!-- 数据文字46 -->
+                <div class="dataText3 pos46">3.322 rpm</div>
+                <!-- 数据文字47 -->
+                <div class="dataText3 pos47">549.41A</div>
+                <!-- 数据文字48 -->
+                <div class="dataText4 pos48">报警：580A</div>
+                <!-- 数据文字49 -->
+                <div class="dataText3 pos49">267.64</div>
+                <!-- 数据文字50 -->
+                <div class="dataText3 pos50">79,965.04 ton</div>
+                <!-- 数据文字51 -->
+                <div class="dataText3 pos51">Open</div>
+                <!-- 数据文字52 -->
+                <div class="dataText3 pos52">Open</div>
+                <!-- 数据文字53 -->
+                <div class="dataText3 pos53">Open</div>
+                <!-- 数据文字54 -->
+                <div class="dataText3 pos54">Closed</div>
+                <!-- 数据文字55 -->
+                <div class="dataText pos55">13.21</div>
+                <!-- 数据文字56 -->
+                <div class="dataText2 pos56">17.07</div>
+                <!-- 数据文字57 -->
+                <div class="dataText3 pos57">41.27℃</div>
+                <!-- 数据文字58 -->
+                <div class="dataText3 pos58">42.19℃</div>
+                <!-- 数据文字59 -->
+                <div class="dataText3 pos59">3.960.31 kg/h</div>
+                <!-- 数据文字60 -->
+                <div class="dataText3 pos60">39.71℃</div>
+                <!-- 数据文字61 -->
+                <div class="dataText3 pos61">0t/h</div>
+                <!-- 数据文字62 -->
+                <div class="dataText3 pos62">1.244</div>
+                <!-- 数据文字63 -->
+                <div class="dataText3 pos63">1</div>
+                <!-- 数据文字64 -->
+                <div class="dataText3 pos64">1.255</div>
+
+                <!-- 数据文字65 -->
+                <div class="dataText3 pos65">20.88
+                    <span style="margin-left: 4px;">barg</span>
+                    <span style="margin-left: 20px;">0%</span>
+                </div>
+                <!-- 数据文字66 -->
+                <div class="dataText3 pos66">20.92
+                  <span style="margin-left: 4px;">barg</span>
+                  <span style="margin-left: 20px;">0%</span>
+                </div>
+                <!-- 数据文字67 -->
+                <div class="dataText3 pos67">20.84
+                  <span style="margin-left: 4px;">barg</span>
+                  <span style="margin-left: 20px;">0%</span>
+                </div>
+                <!-- 数据文字68 -->
+                <div class="dataText3 pos68">20.67
+                  <span style="margin-left: 4px;">barg</span>
+                  <span style="margin-left: 20px;">0%</span>
+                </div>
+                <!-- 数据文字69 -->
+                <div class="dataText3 pos69">19.47
+                  <span style="margin-left: 4px;">barg</span>
+                  <span style="margin-left: 20px;">0%</span>
+                </div>
+                <!-- 数据文字70 -->
+                <div class="dataText pos70">283.04</div>
+                <!-- 数据文字71 -->
+                <div class="dataText pos71">108.57</div>
+
+                <!-- 进度条1 -->
+                <div class="progress-bar progress-bar1 pos1" >
+                  <div class="progress-bar-inner" style="width: 100%;"></div>
+                  <!-- left的数值是100%的百分比，因为背景图宽带问题，75%是100%的位置，-25%是0的位置 合数据时请计算一下-->
+                  <div class="progress-bar-text" style="left: 75%;">423</div>
+                </div>
+
+                <!-- 进度条1 -->
+                <div class="progress-bar progress-bar1 pos2" >
+                  <div class="progress-bar-inner" style="width: 100%;"></div>
+                  <!-- left的数值是100%的百分比，因为背景图宽带问题，75%是100%的位置，-25%是0的位置 合数据时请计算一下-->
+                  <div class="progress-bar-text" style="left: 75%;">423</div>
+                </div>
+
+                <!-- 进度条1 -->
+                <div class="progress-bar progress-bar2 pos3" >
+                  <div class="progress-bar-inner" style="width: 100%;"></div>
+                  <!-- left的数值是100%的百分比，因为背景图宽带问题，75%是100%的位置，-25%是0的位置 合数据时请计算一下-->
+                  <div class="progress-bar-text" style="left: 75%;">423</div>
+                </div>
+
+                <!-- 进度条1 -->
+                <div class="progress-bar progress-bar2 pos4" >
+                  <div class="progress-bar-inner" style="width: 100%;"></div>
+                  <!-- left的数值是100%的百分比，因为背景图宽带问题，75%是100%的位置，-25%是0的位置 合数据时请计算一下-->
+                  <div class="progress-bar-text" style="left: 75%;">423</div>
+                </div>
+
+                <!-- 进度条1 -->
+                <div class="progress-bar progress-bar2 pos5" >
+                  <div class="progress-bar-inner" style="width: 75%;"></div>
+                  <!-- left的数值是100%的百分比，因为背景图宽带问题，75%是100%的位置，-25%是0的位置 合数据时请计算一下-->
+                  <div class="progress-bar-text" style="left: 55%;">323</div>
+                </div>
+
+
+                <!-- 动画效果 -->
+                 <!-- 红色箭头 -->
+                <div class="arrow pos1"><img src="../../assets/ethylene/_h-1.png" alt=""></div>
+
+                <!-- 红色箭头 -->
+                <div class="arrow pos2"><img src="../../assets/ethylene/_h-2.png" alt=""></div>
+
+                <!-- 蓝色箭头 上-->
+                 <div class="arrow pos3"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos4"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos5"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos6"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos7"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos8"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                <!-- 蓝色箭头 下 -->
+                 <div class="arrow pos9"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos10"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos11"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos12"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                 <div class="arrow pos13"><img src="../../assets/ethylene/arror.png" alt=""></div>
+                <!-- 蓝色箭头 左 -->
+                 <div class="arrow pos14"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos15"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos16"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos17"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos18"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                <!-- 粉色色箭头 左 -->
+                 <div class="arrow pos19"><img src="../../assets/ethylene/arror-03.png" alt=""></div>
+                 <div class="arrow pos20"><img src="../../assets/ethylene/arror-03.png" alt=""></div>
+
+                 <!-- 蓝色箭头 右 -->
+                 <div class="arrow pos21"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos22"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos23"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos24"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+                 <div class="arrow pos25"><img src="../../assets/ethylene/arror-02.png" alt=""></div>
+
+        </div>
+
+
+      </div>
+  </div>
+</template>
+
+<script>
+  import { selectLast } from "@/api/aspen/dashboarddata";
+
+  export default {
+    name: "steamBalance",
+    props: ['dashboarddata'],
+    data () {
+      return {
+        // 查询参数
+        queryParams: {},
+      }
+    },
+    created() {
+    },
+    methods: {
+      /** 查询dashboard抓取数据列表 */
+      // getList()
+      // {
+      //   selectLast(this.queryParams).then(response => {
+      //     this.dashboarddata = response.data;
+      //   });
+      // }
+    }
+  }
+</script>
+
+<style lang="scss">
+#steamBalance{
+  width: 1270px;
+  height: 100%;
+  margin-top: -4.5%;
+
+
+}
+
+.ethylene_box{
+  background: url(../../assets/ethylene/bg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .arrow{
+    width: 2.3%;
+  }
+
+  .dataText{
+    font-size: 8px;
+    color: #2f302e;
+    position: absolute;
+
+  }
+  .dataText2{
+    font-size: 8px;
+    color: #f0faf3;
+    position: absolute;
+
+  }
+ .dataText3{
+    font-size: 8px;
+    color: #b2c9ff;
+    position: absolute;
+    // letter-spacing: -1px;
+  }
+  .dataText4{
+    font-size: 8px;
+    color: #ec1c24;
+    position: absolute;
+    // letter-spacing: -1px;
+  }
+  .pos1{
+    top: 31.22222%;
+    left: 9.766666%;
+  }
+  .pos2{
+    top: 36.999%;
+    left: 2.822222%;
+    width: 2.2%;
+  }
+  .pos3{
+    top: 38.335598%;
+    left: 2.822222%;
+    width: 2.2%;
+  }
+  .pos4{
+    top: 46.55783%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos5{
+    top: 47.9421%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+
+  .pos6 {
+    top: 56.385%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos7 {
+    top: 57.75%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos8 {
+    top: 60.1%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos9 {
+    top: 61.45%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos10 {
+    top: 66.7666%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos11 {
+    top: 68.1333%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos12 {
+    top: 70.85%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos13 {
+    top: 72.34%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos14 {
+    top: 77.44%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos15 {
+    top: 79.12%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos16 {
+    top: 80.9666%;
+    left: 3.122222%;
+    width: 2.2%;
+  }
+  .pos17 {
+    top: 31.2%;
+    left: 12.3%;
+    font-size: 10px;
+  }
+  .pos18 {
+    top: 65.3333%;
+    left: 15.2222%;
+    font-size: 10px;
+  }
+  .pos19 {
+    top: 81.2333%;
+    left: 11.1222%;
+
+  }
+  .pos20 {
+    top: 22.2%;
+    left: 25.3%;
+  }
+  .pos21 {
+    top: 22.2%;
+    left: 30.3%;
+  }
+  .pos22 {
+    top: 36.9%;
+    left: 28.3%;
+    font-size: 13px;
+  }
+  .pos23 {
+    top: 35.6%;
+    left: 32.9%;
+    font-size: 10px;
+  }
+  .pos24 {
+    top: 40.1%;
+    left: 23.2%;
+    font-size: 10px;
+  }
+  .pos25 {
+    top: 40.1%;
+    left: 28.5%;
+    font-size: 10px;
+  }
+  .pos26 {
+    top: 49.5%;
+    left: 34.2%;
+    font-size: 10px;
+  }
+  .pos27 {
+    top: 54.4%;
+    left: 23.9%;
+    font-size: 10px;
+  }
+  .pos28 {
+    top: 55.99%;
+    left: 28.2%;
+    font-size: 10px;
+  }
+  .pos29 {
+    top: 35.7%;
+    left: 38.2%;
+    font-size: 10px;
+  }
+  .pos30 {
+    top: 35.6%;
+    left: 42.4%;
+    font-size: 10px;
+   }
+  .pos31 {
+    top: 43.8%;
+    left: 40%;
+   }
+  .pos32 {
+    top: 43.67%;
+    left: 42.5%;
+    font-size: 10px;
+   }
+  .pos33 {
+    top: 53.7%;
+    left: 39%;
+    font-size: 10px;
+   }
+  .pos34 {
+    top: 56.1%;
+    left: 43%;
+  }
+  .pos35 {
+    top: 57.6%;
+    left: 43%;
+
+   }
+  .pos36 {
+    top: 65.1%;
+    left: 33%;
+    font-size: 10px;
+   }
+  .pos37 {
+    top: 65%;
+    left: 39%;
+    font-size: 10px;
+   }
+  .pos38 {
+    top: 66.9%;
+    left: 37.8%;
+    font-size: 10px;
+  }
+  .pos39 {
+    top: 73.9%;
+    left: 19.5%;
+    font-size: 10px;
+  }
+  .pos40 {
+    top: 74.3%;
+    left: 22%;
+    font-size: 10px;
+   }
+  .pos41 {
+    top: 79.4%;
+    left: 19.8%;
+    width: 2.2%;
+   }
+  .pos42 {
+    top: 73.8%;
+    left: 33%;
+    font-size: 12px;
+  }
+  .pos43 {
+    top: 76.5%;
+    left: 33%;
+    font-size: 12px;
+   }
+  .pos44 {
+    top: 26%;
+    left: 52.5%;
+    font-size: 10px;
+   }
+  .pos45 {
+    top: 29.5%;
+    left: 52.6%;
+    font-size: 10px;
+   }
+  .pos46 {
+    top: 76.9%;
+    left: 44.2%;
+    font-size: 10px;
+   }
+  .pos47 {
+    top: 79.6%;
+    left: 44.2%;
+    font-size: 10px;
+  }
+  .pos48 {
+    top: 81%;
+    left: 44.2%;
+    font-size: 11px;
+  }
+  .pos49 {
+    top: 77%;
+    left: 48.5%;
+    font-size: 10px;
+  }
+  .pos50 {
+    top: 79.6%;
+    left: 48.5%;
+    font-size: 10px;
+  }
+  .pos51 {
+    top: 63.2%;
+    left: 54.5%;
+    font-size: 10px;
+  }
+  .pos52 {
+    top: 70.1%;
+    left: 54.5%;
+    font-size: 10px;
+  }
+  .pos53 {
+    top: 60.2%;
+    left: 61%;
+    font-size: 10px;
+  }
+  .pos54 {
+    top: 60.3%;
+    left: 67.9%;
+  }
+  .pos55 {
+    top: 66.4%;
+    left: 64.3%;
+    width: 2%;
+  }
+  .pos56 {
+    top: 67.6%;
+    left: 64.3%;
+    width: 2%;
+  }
+  .pos57 {
+    top: 28.2%;
+    left: 80%;
+    font-size: 10px;
+  }
+  .pos58 {
+    top: 31.3%;
+    left: 80%;
+    font-size: 10px;
+  }
+  .pos59 {
+    top: 22.3%;
+    left: 85%;
+    font-size: 10px;
+  }
+  .pos60 {
+    top: 31.9%;
+    left: 86%;
+    font-size: 10px;
+  }
+  .pos61 {
+    top: 46.5%;
+    left: 86.7%;
+    font-size: 10px;
+  }
+  .pos62 {
+    top: 9.7%;
+    left: 52.4%;
+    width: 5.9%;
+  }
+  .pos63 {
+    top: 13.1%;
+    left: 52.4%;
+    width: 5.9%;
+  }
+  .pos64 {
+    top: 16.7%;
+    left: 52.4%;
+    width: 5.9%;
+  }
+
+  .pos65 {
+    top: 34.7%;
+    left: 49.4%;
+  }
+  .pos66 {
+    top: 34.7%;
+    left: 61.4%;
+  }
+  .pos67 {
+    top: 45.4%;
+    left: 49.4%;
+  }
+  .pos68 {
+    top: 45.4%;
+    left: 61.4%;
+  }
+  .pos69 {
+    top: 40%;
+    left: 70.4%;
+  }
+  .pos70 {
+    top: 53%;
+    left: 51.9%;
+    width: 2%;
+    letter-spacing: -1px;
+  }
+  .pos71 {
+    top: 53.3%;
+    left: 62.15%;
+    width: 2%;
+    letter-spacing: -1px;
+  }
+
+  .progress-bar{
+    width: 5.7778%;
+    position: absolute;
+    font-size: 9px;
+   &.pos1{
+     top: 39.05%;
+     left: 49.366666%;
+   }
+   &.pos2{
+         top: 38.76%;
+        left: 60.6444%;
+   }
+   &.pos3{
+     top: 49.315%;
+    left: 49.366666%;
+   }
+   &.pos4{
+      top: 49.54%;
+      left: 60.566666%;
+   }
+   &.pos5{
+      top: 43.98%;
+      left: 69.466666%;
+   }
+  }
+  .progress-bar1{
+      .progress-bar-inner{
+      background-color: #f87409;
+      height: 3px;
+      border-radius:3px;
+    }
+
+  }
+
+  .progress-bar2{
+      .progress-bar-inner{
+      background-color: #008aff;
+      height: 3px;
+      border-radius:3px;
+    }
+
+  }
+
+  .progress-bar-text{
+    background: url("../../assets/ethylene/btn.png");
+    width: 32px;
+    height: 26px;
+    background-size: 100% 100%;
+    line-height: 26px;
+    position: absolute;
+    top: -11px;
+  }
+}
+
+.arrow{
+  position: absolute;
+  width: 2.2%;
+  &.pos1{
+    top:70.9%;
+    left:19.4%;
+    img{
+      width: 50px;
+      height: 16px;
+      animation: heartBeat 3s infinite;
+    }
+  }
+  &.pos2{
+    top:35.5%;
+    left:82.5%;
+    img{
+      width: 10px;
+      height: 150px;
+      animation: heartBeat 3s infinite;
+    }
+  }
+
+  &.pos3{
+        top: 27.5%;
+    left: 10.7%;
+
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos4{
+        top: 23.9%;
+    left: 14.36%;
+
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos5{
+        top: 58%;
+    left: 30.8%;
+
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos6{
+        top: 55.5%;
+    left: 62.8%;
+
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos7{
+        top: 55.5%;
+    left: 69.5%;
+
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos8{
+         top: 23.5%;
+    left: 62.1%;
+
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos9{
+    top: 37%;
+    left: 11.1%;
+    transform: rotateX(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos10{
+     top: 21.5%;
+    left: 22.6%;
+    transform: rotateX(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos11{
+    top: 60.5%;
+    left: 43.4%;
+    transform: rotateX(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos12{
+     top: 29.5%;
+    left: 50.9%;
+    transform: rotateX(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos13{
+    top: 45.5%;
+    left: 12.2%;
+    transform: rotateX(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+      animation: float3D 2s ease-in-out infinite;
+    }
+  }
+  &.pos14{
+    top: 38.5%;
+    left: 5.2%;
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos15{
+    top: 46.77%;
+    left: 5.5%;
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos16{
+    top: 56.99%;
+    left: 5.5%;
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos17{
+    top: 60.77%;
+    left: 5.5%;
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos18{
+    top: 77.1%;
+    left: 7.1%;
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos19{
+    top: 67.3%;
+    left: 5.71%;
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos20{
+    top: 71.5%;
+    left: 5.71%;
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+
+  &.pos21{
+        top: 54.5%;
+    left: 43.2%;
+    transform: rotateY(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos22{
+    top: 68.2%;
+    left: 62.5%;
+    transform: rotateY(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos23{
+    top: 23.2%;
+    left: 92.5%;
+    transform: rotateY(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos24{
+        top: 34.7%;
+    left: 91.9%;
+    transform: rotateY(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+  &.pos25{
+        top: 47.5%;
+    left: 91.5%;
+    transform: rotateY(180deg);
+    img{
+      width: 10px;
+      height: 14px;
+      box-shadow: 0 5px 20px rgba(255, 255, 255, 0.8);
+      transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+      animation: float3D2 2s ease-in-out infinite;
+    }
+  }
+
+
+}
+
+@keyframes heartBeat {
+    0% {
+      transform: scale(0.8);
+    }
+    14% {
+      transform: scale(1);
+    }
+    28% {
+      transform: scale(0.8);
+    }
+    42% {
+      transform: scale(1);
+    }
+    70% {
+      transform: scale(0.8);
+    }
+  }
+
+  @keyframes heartBeat2 {
+    0% {
+      transform: scale(0.8);
+    }
+    14% {
+      transform: scale(1.2);
+    }
+    28% {
+      transform: scale(0.8);
+    }
+    42% {
+      transform: scale(1.2);
+    }
+    70% {
+      transform: scale(0.8);
+    }
+  }
+
+
+  @keyframes float3D {
+  0% {
+    transform: translateY(50px) rotateX(20deg) rotateY(20deg);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) rotateX(0) rotateY(0);
+    opacity: 1;
+  }
+}
+
+  @keyframes float3D2 {
+  0% {
+    transform: translateX(50px) rotateY(20deg) rotateX(20deg);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) rotateX(0) rotateY(0);
+    opacity: 1;
+  }
+}
+</style>

ui/src/views/monitor/bccHome/index.vue

@@ -43,16 +43,21 @@
         </div>
         <!-- 右侧 时间 -->
         <div style="width: 40%" class="d-flex">
+           <div class="react-left mr-3" @click="handleTab(4)" :style="tabIndex ===4 ? 'background-color: #1a5cd7;' : 'background-color: #0f1325;'">
+            <!-- <span class="text fw-b">{{ $t('北京时间') }}：</span> -->
+            <span class="text fw-b">乙烯平衡</span>
+          </div>
           <div class="react-left bg-color-blue mr-3" @click="toStop()">
             <!-- <span class="text fw-b">{{ $t('北京时间') }}：</span> -->
             <span class="text fw-b">{{swiperAutoText}}</span>
           </div>
+
           <div
-            class="react-left mr-4"
-            style="width: 6.25rem; background-color: #0f1325; text-align: right;"
+            class="react-left mr-3"
+            style=" background-color: #0f1325; text-align: right;"
           >
             <span class="react-after"></span>
-            <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
+            <span class="text" style="font-size: 11px;">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
           </div>
         </div>
       </div>
@@ -124,6 +129,13 @@
                   <steam-balance :dashboarddata = 'dashboarddata'/>
                 </el-row>
             </div>
+
+            <div class="swiper-slide">
+                <!-- 乙烯平衡 -->
+                <el-row class="zhengqi suofang" style="height: 100%;">
+                  <ethylene-balance :dashboarddata = 'dashboarddata'/>
+                </el-row>
+            </div>
         </div>
       </div>
 
@@ -186,6 +198,8 @@
   import frontTwo from "@/views/front/frontTwo";
   import materialBalance from "@/views/front/materialBalanceHome";
   import steamBalance from "@/views/front/steamBalance";
+
+  import ethyleneBalance from "@/views/front/ethyleneBalance";
   import chartRight from "@/views/front/ChartRight";
   import napTank from "@/views/front/napTank";
   import ethyleneTank from "@/views/front/ethyleneTank";
@@ -367,6 +381,7 @@
       annualOutput,
       energyConsumption,
       productProportion,
+      ethyleneBalance
     },
     computed: {
     },
@@ -460,9 +475,9 @@
             observer: true,
             observeParents: true,
             autoplay: {
-              disableOnInteraction: false,  //触碰后自动轮播也不会停止
-              delay: 10000,
-            },
+               disableOnInteraction: false,  //触碰后自动轮播也不会停止
+               delay: 10000,
+             },
             loop: false,
             on: {
               //滑动swiper使用的方法