From 80f598be94097488b9bc8aad1f9f8153fea1a21b Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 21 Sep 2023 16:11:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BB=93=E4=B8=8B=E4=BB=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/lower_water.png        | Bin 0 -> 362 bytes
 src/assets/img/upper_water.png        | Bin 0 -> 352 bytes
 src/components/charts/LowerTank.vue   |  98 ++++++++++++++++++++++++++++++++++
 src/components/charts/UpperTank.vue   |  98 ++++++++++++++++++++++++++++++++++
 src/components/modals/EjectLiquid.vue |  42 ++++++++++++++-
 5 files changed, 237 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/img/lower_water.png
 create mode 100644 src/assets/img/upper_water.png
 create mode 100644 src/components/charts/LowerTank.vue
 create mode 100644 src/components/charts/UpperTank.vue

diff --git a/src/assets/img/lower_water.png b/src/assets/img/lower_water.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8a2f298659e7e530377bbd5ab52383984b39ccc
GIT binary patch
literal 362
zcmV-w0hRuVP)<h;3K|Lk000e1NJLTq000gE000XJ1^@s6Pldc<00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZq6iGxuR49?1k+D%iQ4mGX-A_dHatW{l?BG*@ko+-l
z5GtSq#uBVRF@s1tpaiXeKS}{F7T#L}{fsih=y;RexpU9mV5vsiO?CY`;DpBGP53^q
z#&2ac+HO>hw(ibE@-FB`;>n#-A_Dc-zIJDTc<{`N#C@x2He(IG_N1N{OdxkXStyF)
zHl<Wja92>oL@EIeV0K;Nlro|+Q?Muza!xZdYR}BF@-wjd0h)Z3q`Be2<-t%ql<qxP
zOVJ?ipm%i9riO>?3ZRfb?I;m31$W{eMer4XHDFuslf}H#cVn`A?3}l4cVSix8*ef1
z^q2FqVUt%i+PcIVs87A*NL_cz7JxhDAEATn_sD6m{s&io0LTS*?K+o@VE_OC07*qo
IM6N<$f_1i=tN;K2

literal 0
HcmV?d00001

diff --git a/src/assets/img/upper_water.png b/src/assets/img/upper_water.png
new file mode 100644
index 0000000000000000000000000000000000000000..622677ba4b21d9c0c1e396b0e706a539fb6bd60d
GIT binary patch
literal 352
zcmV-m0iXVfP)<h;3K|Lk000e1NJLTq000gE000XJ1^@s6Pldc<00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZq3Q0skR49>^k-<&FP!L4le3Sc^3=&6oKuT~4>42mH
zYM=xv06HKQU?o9Zp@O&rzQ7WP$bUE>2j>te%w?tBot@cT%1yT|SD!PEAU=P@aXept
z)#aw!s$6%*EF@R9t`&H~)P{s;$<zcI%uM3JnRmqf*=Tqpxyf16qF~`ZS2)DUq`2Mf
z`Z^Tc6`@GG+}8kqih(Ok4J3<7CRs!PnbxAhdc$5GD%wj0Jvuv*9g&helpKYU0x9=Q
z0ro@_Zpe<HNKkYJiDXEUq9HjeftLW3>(1q>n-5pJc<H9Y6)#`Et8osXTy^tu-T8M%
yXb|nOmmI)UKs{Kk@kz8j!vEUG#8WMfA=)1)(}GuZ433Qe0000<MNUMnLSTa6RF3}u

literal 0
HcmV?d00001

diff --git a/src/components/charts/LowerTank.vue b/src/components/charts/LowerTank.vue
new file mode 100644
index 0000000..a9f2b18
--- /dev/null
+++ b/src/components/charts/LowerTank.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="lower_tank_container">
+    <div class="title_wrap">
+      <div class="left_wrap">
+        <div class="icon_wrap">
+          <img :src="LowerWater" class="icon" alt="" />
+        </div>
+        <p class="text">下仓液氮液位</p>
+      </div>
+      <div class="right_wrap">2/3</div>
+    </div>
+    <div class="grid_water">
+      <div class="default"></div>
+      <div class="default active"></div>
+      <div class="default active"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import LowerWater from '@/assets/img/lower_water.png'
+</script>
+
+<style lang="scss" scoped>
+.lower_tank_container {
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  background: #565ee4;
+  box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  .title_wrap {
+    box-sizing: border-box;
+    padding: 9px 5px 21px 7px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left_wrap {
+      display: flex;
+      align-items: center;
+      .icon_wrap {
+        width: 30px;
+        height: 30px;
+        background: #ffffff;
+        margin-right: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        .icon {
+          width: 14px;
+          height: 11px;
+        }
+      }
+      .text {
+        font-family: Source Han Sans CN;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.04em;
+        color: #ffffff;
+      }
+    }
+    .right_wrap {
+      width: 68px;
+      height: 28px;
+      border-radius: 14px;
+      background: #4d54d0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: Source Han Sans CN;
+      font-size: 22px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #ffffff;
+    }
+  }
+  .grid_water {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .default {
+      border-radius: 7px;
+      height: 47px;
+      width: 100%;
+      background: #4d54d0;
+    }
+    .active {
+      background: #849dff;
+    }
+  }
+}
+</style>
diff --git a/src/components/charts/UpperTank.vue b/src/components/charts/UpperTank.vue
new file mode 100644
index 0000000..74a6c0a
--- /dev/null
+++ b/src/components/charts/UpperTank.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="upper_tank_container">
+    <div class="title_wrap">
+      <div class="left_wrap">
+        <div class="icon_wrap">
+          <img :src="UpperWater" class="icon" alt="" />
+        </div>
+        <p class="text">上仓液氮液位</p>
+      </div>
+      <div class="right_wrap">1/3</div>
+    </div>
+    <div class="grid_water">
+      <div class="default"></div>
+      <div class="default"></div>
+      <div class="default active"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UpperWater from '@/assets/img/upper_water.png'
+</script>
+
+<style lang="scss" scoped>
+.upper_tank_container {
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  background: #13c3f4;
+  box-sizing: border-box;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  .title_wrap {
+    box-sizing: border-box;
+    padding: 9px 5px 21px 7px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left_wrap {
+      display: flex;
+      align-items: center;
+      .icon_wrap {
+        width: 30px;
+        height: 30px;
+        background: #ffffff;
+        margin-right: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        .icon {
+          width: 14px;
+          height: 11px;
+        }
+      }
+      .text {
+        font-family: Source Han Sans CN;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.04em;
+        color: #ffffff;
+      }
+    }
+    .right_wrap {
+      width: 68px;
+      height: 28px;
+      border-radius: 14px;
+      background: #10b3e1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: Source Han Sans CN;
+      font-size: 22px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #ffffff;
+    }
+  }
+  .grid_water {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .default {
+      border-radius: 7px;
+      height: 47px;
+      width: 100%;
+      background: #10b3e1;
+    }
+    .active {
+      background: #1fedf4;
+    }
+  }
+}
+</style>
diff --git a/src/components/modals/EjectLiquid.vue b/src/components/modals/EjectLiquid.vue
index a4ec645..bdf199e 100644
--- a/src/components/modals/EjectLiquid.vue
+++ b/src/components/modals/EjectLiquid.vue
@@ -5,7 +5,16 @@
         <p class="title">排液氮</p>
         <img :src="Close" alt="关闭" class="close_img" />
       </div>
-      <div class="chart_container"></div>
+      <div class="chart_container">
+        <div class="title_wrap">
+          <img class="water_icon" :src="Water" alt="" />
+          <p class="info">正在注入液氮</p>
+        </div>
+        <div class="double_chart">
+          <UpperTank />
+          <LowerTank />
+        </div>
+      </div>
       <div class="btns">
         <div class="stop_wrap">
           <div class="stop_btn">
@@ -26,8 +35,11 @@
 
 <script setup>
 import Close from '@/assets/img/close.png'
+import Water from '@/assets/img/water.png'
 import StartIcon from '@/assets/img/start.png'
 import StopIcon from '@/assets/img/stop.png'
+import LowerTank from 'cpns/charts/LowerTank'
+import UpperTank from 'cpns/charts/UpperTank'
 </script>
 
 <style lang="scss" scoped>
@@ -78,6 +90,34 @@ import StopIcon from '@/assets/img/stop.png'
       border-radius: 16px;
       background: #f0f6fb;
       margin: 20px 20px 17px 20px;
+      box-sizing: border-box;
+      padding: 20px;
+      .title_wrap {
+        padding: 2px 0 21px 12px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        .water_icon {
+          width: 47px;
+          height: 35px;
+          margin-right: 15px;
+        }
+        .info {
+          font-family: Source Han Sans CN;
+          font-size: 24px;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #3d3d3d;
+        }
+      }
+      .double_chart {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        width: 620px;
+        height: 240px;
+        column-gap: 20px;
+      }
     }
     .btns {
       display: flex;