上仓下仓

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>

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>

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;