diff --git a/src/assets/img/liquid/1.png b/src/assets/img/liquid/1.png
new file mode 100644
index 0000000..24d9532
Binary files /dev/null and b/src/assets/img/liquid/1.png differ
diff --git a/src/assets/img/liquid/2.png b/src/assets/img/liquid/2.png
new file mode 100644
index 0000000..28c64a4
Binary files /dev/null and b/src/assets/img/liquid/2.png differ
diff --git a/src/assets/img/liquid/3.png b/src/assets/img/liquid/3.png
new file mode 100644
index 0000000..fab9d26
Binary files /dev/null and b/src/assets/img/liquid/3.png differ
diff --git a/src/assets/img/liquid/4.png b/src/assets/img/liquid/4.png
new file mode 100644
index 0000000..edb84d3
Binary files /dev/null and b/src/assets/img/liquid/4.png differ
diff --git a/src/assets/img/liquid/chart.png b/src/assets/img/liquid/chart.png
index 3365b5c..5125361 100644
Binary files a/src/assets/img/liquid/chart.png and b/src/assets/img/liquid/chart.png differ
diff --git a/src/assets/img/liquid/form.png b/src/assets/img/liquid/form.png
new file mode 100644
index 0000000..0e106bc
Binary files /dev/null and b/src/assets/img/liquid/form.png differ
diff --git a/src/assets/img/liquid/oper.png b/src/assets/img/liquid/oper.png
deleted file mode 100644
index cad9399..0000000
Binary files a/src/assets/img/liquid/oper.png and /dev/null differ
diff --git a/src/components/LiquidHandle.vue b/src/components/LiquidHandle.vue
index 3d02cc2..b58255c 100644
--- a/src/components/LiquidHandle.vue
+++ b/src/components/LiquidHandle.vue
@@ -1,121 +1,55 @@
 <template>
   <div class="liquid_contaienr">
-    <div class="header_wrap">
-      <div class="set_wrap" v-if="tabType == 1">
-        <van-field
-          type="number"
-          v-model="addLiquidVal"
-          :clickable="true"
-          :maxlength="4"
-          readonly
-          @click.stop="numberKeyboardShow = true"
-          class="add_liquid_input"
-        />
-        <p class="title">设置加液</p>
+    <div class="left_container">
+      <p class="status">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="155"
+          height="38"
+          viewBox="0 0 155 38"
+        >
+          <g>
+            <g>
+              <path
+                d="M60.872,11.72L60.872,32.0337L62.744,32.0337L62.744,30.102L67.788,30.102L67.788,31.8249L69.738,31.8249L69.738,11.72L60.872,11.72ZM62.744,28.23L62.744,13.618L67.788,13.618L67.788,28.23L62.744,28.23ZM51.07,8.82425L51.044,13.436L47.378,13.436L47.378,15.334L50.992,15.334C50.81,21.886,50.004,27.658,46.728,31.09C47.222,31.402,47.924,32,48.236,32.4461C51.746,28.62,52.656,22.38,52.89,15.334L56.842,15.334C56.634,25.344,56.4,28.906,55.854,29.66C55.62,29.998,55.36,30.102,54.97,30.076C54.502,30.076,53.384,30.076,52.162,29.972C52.5,30.518,52.682,31.35,52.734,31.922C53.903999999999996,32,55.1,32.0264,55.828,31.922C56.582,31.818,57.076,31.584,57.544,30.908C58.35,29.79,58.532,25.994,58.74,14.424C58.74,14.138,58.74,13.436,58.74,13.436L52.942,13.436L52.994,8.82425L51.07,8.82425ZM90.25200000000001,19.9636C91.162,20.8224,92.202,22.0452,92.644,22.8781L93.71000000000001,21.9412C93.268,21.1348,92.22800000000001,19.9636,91.292,19.1828L90.25200000000001,19.9636ZM75.926,10.3912C77.226,11.434,78.838,12.9684,79.566,13.9832L80.918,12.734C80.112,11.746,78.52600000000001,10.2607,77.2,9.26909L75.926,10.3912ZM74.652,17.3913C76.004,18.3277,77.668,19.7325,78.47399999999999,20.6693L79.72200000000001,19.3685C78.89,18.4317,77.226,17.1308,75.874,16.2204L74.652,17.3913ZM75.19800000000001,30.6074L76.888,31.6742C77.95400000000001,29.3326,79.176,26.1845,80.086,23.5569L78.55199999999999,22.4905C77.564,25.3261,76.186,28.6302,75.19800000000001,30.6074ZM88.146,8.93028C88.536,9.66072,88.926,10.5476,89.238,11.356L81.256,11.356L81.256,13.228L98.44200000000001,13.228L98.44200000000001,11.356L91.292,11.356C90.97999999999999,10.4432,90.434,9.2955,89.914,8.40825L88.146,8.93028ZM89.99199999999999,18.35L95.50399999999999,18.35C94.80199999999999,21.2128,93.606,23.6329,92.098,25.6105C90.824,23.9449,89.81,22.0192,89.108,19.9636C89.42,19.4172,89.706,18.8968,89.99199999999999,18.35ZM89.99199999999999,13.618C89.108,16.634,87.262,20.302,84.94800000000001,22.6181C85.312,22.8781,85.91,23.4765,86.22200000000001,23.8409C86.846,23.1905,87.47,22.4357,88.042,21.6292C88.822,23.5809,89.81,25.3761,90.97999999999999,26.9637C89.316,28.7593,87.366,30.0862,85.286,30.971C85.676,31.3094,86.17,31.9858,86.43,32.4282C88.536,31.4654,90.46000000000001,30.1382,92.124,28.3689C93.632,30.0602,95.374,31.4134,97.35,32.3762C97.662,31.9078,98.23400000000001,31.1794,98.65,30.841C96.622,29.9822,94.828,28.6809,93.294,27.0417C95.29599999999999,24.4917,96.804,21.2388,97.61,17.102L96.414,16.66L96.102,16.764L90.74600000000001,16.764C91.162,15.854,91.5,14.944,91.812,14.06L89.99199999999999,13.618ZM84.714,13.566C83.804,16.4,81.932,19.8856,79.826,22.1237C80.21600000000001,22.4097,80.84,22.9821,81.126,23.3465C81.77600000000001,22.6441,82.426,21.8112,83.024,20.9264L83.024,32.4022L84.76599999999999,32.4022L84.76599999999999,18.038C85.468,16.712,86.066,15.36,86.56,14.086L84.714,13.566ZM107.02199999999999,16.14L107.02199999999999,17.934L121.166,17.934L121.166,16.14L107.02199999999999,16.14ZM102.576,20.976L102.576,22.796L109.57,22.796C109.25800000000001,27.424,108.19200000000001,29.686,102.26400000000001,30.83C102.628,31.22,103.148,31.948,103.304,32.4461C109.804,31.064,111.182,28.23,111.572,22.796L116.148,22.796L116.148,29.322C116.148,31.402,116.746,32,119.164,32C119.658,32,122.622,32,123.142,32C125.222,32,125.768,31.09,126.002,27.528C125.482,27.372,124.65,27.06,124.208,26.748C124.13,29.738,123.974,30.206,122.986,30.206C122.31,30.206,119.866,30.206,119.346,30.206C118.28,30.206,118.098,30.076,118.098,29.322L118.098,22.796L125.638,22.796L125.638,20.976L102.576,20.976ZM112.066,8.82547C112.534,9.63431,113.028,10.6256,113.366,11.486L103.25200000000001,11.486L103.25200000000001,17.258L105.202,17.258L105.202,13.358L122.908,13.358L122.908,17.258L124.936,17.258L124.936,11.486L115.68,11.486C115.316,10.5212,114.64,9.21709,114.016,8.25184L112.066,8.82547ZM142.824,8.51184C142.824,9.99709,142.876,11.4827,142.954,12.916L132.00799999999998,12.916L132.00799999999998,20.222C132.00799999999998,23.602,131.774,28.1,129.61599999999999,31.298C130.084,31.532,130.916,32.208,131.25400000000002,32.6021C133.64600000000002,29.166,134.036,23.914,134.036,20.248L134.036,20.066L138.79399999999998,20.066C138.69,24.538,138.56,26.202,138.22199999999998,26.592C138.014,26.826,137.78,26.878,137.39,26.878C136.94799999999998,26.878,135.82999999999998,26.878,134.63400000000001,26.748C134.946,27.242,135.154,28.022,135.18,28.568C136.454,28.646,137.65,28.646,138.326,28.594C139.02800000000002,28.516,139.47,28.334,139.886,27.84C140.43200000000002,27.138,140.562,24.928,140.692,19.078C140.692,18.818,140.71800000000002,18.246,140.71800000000002,18.246L134.036,18.246L134.036,14.814L143.084,14.814C143.39600000000002,19.026,144.01999999999998,22.874,145.00799999999998,25.864C143.292,27.84,141.29000000000002,29.452,138.976,30.674C139.392,31.064,140.094,31.87,140.406,32.2868C142.40800000000002,31.09,144.202,29.66,145.788,27.944C146.98399999999998,30.622,148.54399999999998,32.234,150.546,32.234C152.548,32.234,153.276,30.934,153.614,26.488C153.094,26.306,152.36599999999999,25.864,151.924,25.422C151.768,28.88,151.45600000000002,30.232,150.702,30.232C149.376,30.232,148.20600000000002,28.75,147.244,26.202C149.168,23.706,150.702,20.742,151.82,17.336L149.87,16.842C149.038,19.468,147.92000000000002,21.834,146.51600000000002,23.914C145.84,21.392,145.346,18.298,145.06,14.814L153.406,14.814L153.406,12.916L144.95600000000002,12.916C144.878,11.4827,144.852,10.0235,144.852,8.51184L142.824,8.51184ZM146.126,9.78869C147.79000000000002,10.6487,149.792,11.978,150.78,12.916L152.002,11.5612C150.988,10.6747,148.934,9.39787,147.296,8.58984L146.126,9.78869Z"
+                fill="#81FC50"
+                fill-opacity="1"
+              />
+            </g>
+            <g>
+              <path
+                d="M15.0171,4Q18.13,4,20.8495,5.1748Q23.569,6.349600000000001,25.6043,8.39274Q27.6397,10.435870000000001,28.8198,13.16005Q30,15.8842,30,18.983Q30,22.0817,28.8198,24.8229Q27.6397,27.5641,25.6043,29.6073Q23.569,31.6504,20.8495,32.825199999999995Q18.13,34,15.0171,34Q11.9042,34,9.16762,32.825199999999995Q6.43101,31.6504,4.39567,29.6073Q2.36032,27.5641,1.18016,24.8229Q-0.00000305839,22.0817,0,18.983Q0.00000305839,15.8842,1.18016,13.16004Q2.36032,10.435870000000001,4.39567,8.39274Q6.43102,6.349600000000001,9.16762,5.1748Q11.9042,3.999999492583,15.0171,4ZM24.4242,16.1226Q25.0399,15.5096,25.0741,14.6073Q25.1083,13.70488,24.4926,13.09194Q23.8769,12.479,22.9875,12.49603Q22.0981,12.51305,21.4823,13.12599L11.8358,22.7287L8.51767,19.459699999999998Q7.90194,18.8468,7.01254,18.829700000000003Q6.12315,18.8127,5.50741,19.4257Q4.89168,20.0386,4.87457,20.8729Q4.85747,21.7072,5.4732,22.3201L10.2281,27.0874Q10.8438,27.7003,11.8358,27.6833Q12.8278,27.6663,13.4436,27.0533L13.3067,27.1896L24.4242,16.1226Z"
+                fill="#81FC50"
+                fill-opacity="1"
+              />
+            </g>
+          </g>
+        </svg>
+      </p>
+      <div class="vessel">
+        <div
+          class="liquid_column"
+          :style="{
+            '--height': `${
+              ((disinfectantCapacity <= 0 ? 0 : disinfectantCapacity) / 5000) *
+              472
+            }px`,
+          }"
+        >
+          <div class="indicator">
+            当前剩余
+            <p>{{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}g</p>
+          </div>
+        </div>
       </div>
-      <div
-        :class="
-          operatorStore.replenishingFluidsWorkState
-            ? 'btn mr active style-btn'
-            : 'btn mr '
-        "
-        v-if="tabType == 1"
-        @click="stopAdd"
-      >
-        停止加液
-      </div>
-      <div
-        :class="
-          operatorStore.replenishingFluidsWorkState
-            ? 'btn'
-            : 'btn active style-btn'
-        "
-        v-if="tabType == 1"
-        @click="startAdd"
-      >
-        开始加液
-      </div>
-      <div
-        :class="
-          operatorStore.drainingWorkState
-            ? 'btn mr active style-btn'
-            : 'btn mr '
-        "
-        v-if="tabType == 2"
-        @click="stopPop"
-      >
-        停止排液
-      </div>
-      <div
-        :class="
-          operatorStore.drainingWorkState ? 'btn' : 'btn active style-btn'
-        "
-        v-if="tabType == 2"
-        @click="startTabLiquid"
-      >
-        开始排液
-      </div>
-    </div>
-    <div
-      class="add_liquid"
-      v-if="operatorStore.replenishingFluidsWorkState == 1 && tabType == 1"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="29.999204635620117"
-        height="29.999876022338867"
-        viewBox="0 0 29.999204635620117 29.999876022338867"
-      >
-        <g>
-          <path
-            d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
-            fill="#FF9A2D"
-            fill-opacity="1"
-          />
-        </g>
-      </svg>
-      <p class="text">正在加液...</p>
-    </div>
-    <div
-      class="add_liquid"
-      v-if="operatorStore.drainingWorkState == 1 && tabType == 2"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        fill="none"
-        version="1.1"
-        width="29.999204635620117"
-        height="29.999876022338867"
-        viewBox="0 0 29.999204635620117 29.999876022338867"
-      >
-        <g>
-          <path
-            d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
-            fill="#FF9A2D"
-            fill-opacity="1"
-          />
-        </g>
-      </svg>
-      <p class="text">正在排液...</p>
     </div>
-    <div class="chart">
-      <div
-        class="liquid_column"
-        :style="{
-          '--height': `${
-            ((disinfectantCapacity <= 0 ? 0 : disinfectantCapacity) / 5000) *
-            427
-          }px`,
-        }"
-      >
-        <p class="indicator">
-          {{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}g
-        </p>
-      </div>
+    <div class="right_container">
+      <div class="add_liquid_wrap"></div>
+      <img class="btn mb" :src="StartLiquid" alt="" />
+      <img class="btn" :src="StartLiquidPause" alt="" />
     </div>
     <LiquidModal
       v-if="tabType == 2 && tipModalVisible"
@@ -131,6 +65,11 @@
 </template>
 
 <script setup>
+import StartLiquid from '@/assets/img/liquid/1.png'
+import StartLiquidPause from '@/assets/img/liquid/2.png'
+import StopLiquid from '@/assets/img/liquid/3.png'
+import StopLiquidPause from '@/assets/img/liquid/4.png'
+
 import LiquidModal from './dialogs/LiquidModal.vue'
 import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store'
 import { ref } from 'vue'
@@ -197,114 +136,88 @@ const { disinfectantCapacity } = storeToRefs(deviceStore)
   margin-bottom: 19px;
   height: 580px;
   box-sizing: border-box;
-  background: #ffffff;
   border-radius: 16px;
-  padding: 30px;
-  padding-bottom: 23px;
-  position: relative;
-  .header_wrap {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .left_container {
+    width: 766px;
+    height: 580px;
+    border-radius: 16px;
+    background: #ffffff;
+    box-sizing: border-box;
+    overflow: hidden;
     position: relative;
-    margin-bottom: 39px;
-    .set_wrap {
-      position: relative;
-      width: 227px;
-      height: 45px;
-      background: url(../assets/img/liquid/oper.png) no-repeat;
-      background-size: 227px 45px;
-      .title {
-        position: absolute;
-        left: 22px;
-        top: 12px;
-        font-family: Source Han Sans CN;
-        font-size: 14px;
-        font-weight: normal;
-        line-height: normal;
-        letter-spacing: 0.1em;
-        color: #0e0e0e;
-      }
-      .add_liquid_input {
+    .status {
+      position: absolute;
+      left: 116px;
+      top: 36px;
+    }
+    .vessel {
+      position: absolute;
+      width: 446px;
+      height: 472px;
+      left: 34px;
+      bottom: 23px;
+      background: url(../assets/img/liquid/chart.png) no-repeat;
+      background-size: 100% 100%;
+      .liquid_column {
         position: absolute;
-        left: 113px;
-        top: 11px;
-        width: 40px;
-        height: 20px;
-        padding: 0;
-        color: #0e0e0e;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        font-size: 14;
+        background: linear-gradient(270deg, #91cefb, #3fafff, #91cefb);
+        height: var(--height);
+        box-sizing: border-box;
+        border-radius: 3px 3px 20px 20px;
+        width: 300px;
+        right: 9px;
+        bottom: 9px;
+        .indicator {
+          position: absolute;
+          top: -16px;
+          right: -260px;
+          width: 220px;
+          font-family: Source Han Sans CN;
+          font-size: 24px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #06518b;
+          display: flex;
+          align-items: center;
+          p {
+            font-family: Source Han Sans CN;
+            font-size: 26px;
+            font-weight: 900;
+            line-height: normal;
+            letter-spacing: 0em;
+            color: #06518b;
+            margin-left: 9px;
+          }
+        }
       }
     }
+  }
+  .right_container {
+    width: 424px;
+    height: 580px;
+    border-radius: 16px;
+    box-sizing: border-box;
+    overflow: hidden;
+    background: #ffffff;
+    padding: 32px 42px 45px 42px;
     .btn {
-      width: 140px;
-      height: 45px;
-      border-radius: 23px;
-      background: #f6f6f6;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: Source Han Sans CN;
-      font-size: 14px;
-      font-weight: normal;
-      line-height: normal;
-      letter-spacing: 0.1em;
-      color: #d8d8d8;
+      width: 340px;
+      height: 108px;
     }
-    .mr {
-      margin: 0 16px;
-    }
-    .active {
-      background: #06518b;
-      color: #fff;
-    }
-  }
-  .add_liquid {
-    position: absolute;
-    left: 382px;
-    top: 33px;
-    display: flex;
-    align-items: center;
-    .text {
-      margin-left: 16px;
-      font-family: Source Han Sans CN;
-      font-size: 26px;
-      font-weight: normal;
-      line-height: normal;
-      letter-spacing: 0.06em;
-      color: #ff9a2d;
+    .mb {
+      margin-bottom: 18px;
     }
-  }
-  .chart {
-    position: absolute;
-    left: 310px;
-    bottom: 23px;
-    width: 600px;
-    height: 452px;
-    background: url(../assets/img/liquid/chart.png) no-repeat;
-    background-size: 600px 452px;
-    .liquid_column {
-      position: absolute;
-      left: 96px;
-      bottom: 13px;
-      width: 491px;
-      height: var(--height);
-      border-radius: 0px 12px 12px 0px;
-      background: linear-gradient(0deg, #06518b 0%, rgba(6, 81, 139, 0.7) 58%);
-      .indicator {
-        position: absolute;
-        top: -10px;
-        right: -50px;
-        font-family: Source Han Sans CN;
-        font-size: 12px;
-        font-weight: 500;
-        line-height: normal;
-        letter-spacing: 0.06em;
-
-        color: #06518b;
-      }
+    .add_liquid_wrap {
+      position: relative;
+      width: 340px;
+      height: 221px;
+      background-size: 100% 100%;
+      margin-bottom: 41px;
+      background: url(../assets/img/liquid/form.png);
     }
   }
 }
diff --git a/src/components/a.vue b/src/components/a.vue
new file mode 100644
index 0000000..5ba1ec9
--- /dev/null
+++ b/src/components/a.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="liquid_contaienr">
+    <div class="header_wrap">
+      <div class="set_wrap" v-if="tabType == 1">
+        <van-field
+          type="number"
+          v-model="addLiquidVal"
+          :clickable="true"
+          :maxlength="4"
+          readonly
+          @click.stop="numberKeyboardShow = true"
+          class="add_liquid_input"
+        />
+        <p class="title">设置加液</p>
+      </div>
+      <div
+        :class="
+          operatorStore.replenishingFluidsWorkState
+            ? 'btn mr active style-btn'
+            : 'btn mr '
+        "
+        v-if="tabType == 1"
+        @click="stopAdd"
+      >
+        停止加液
+      </div>
+      <div
+        :class="
+          operatorStore.replenishingFluidsWorkState
+            ? 'btn'
+            : 'btn active style-btn'
+        "
+        v-if="tabType == 1"
+        @click="startAdd"
+      >
+        开始加液
+      </div>
+      <div
+        :class="
+          operatorStore.drainingWorkState
+            ? 'btn mr active style-btn'
+            : 'btn mr '
+        "
+        v-if="tabType == 2"
+        @click="stopPop"
+      >
+        停止排液
+      </div>
+      <div
+        :class="
+          operatorStore.drainingWorkState ? 'btn' : 'btn active style-btn'
+        "
+        v-if="tabType == 2"
+        @click="startTabLiquid"
+      >
+        开始排液
+      </div>
+    </div>
+    <div
+      class="add_liquid"
+      v-if="operatorStore.replenishingFluidsWorkState == 1 && tabType == 1"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="29.999204635620117"
+        height="29.999876022338867"
+        viewBox="0 0 29.999204635620117 29.999876022338867"
+      >
+        <g>
+          <path
+            d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
+            fill="#FF9A2D"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      <p class="text">正在加液...</p>
+    </div>
+    <div
+      class="add_liquid"
+      v-if="operatorStore.drainingWorkState == 1 && tabType == 2"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="29.999204635620117"
+        height="29.999876022338867"
+        viewBox="0 0 29.999204635620117 29.999876022338867"
+      >
+        <g>
+          <path
+            d="M14.9997,0C6.7157,0,0,6.71555,0,14.9997C0,23.2839,6.7157,29.9999,14.9997,29.9999C19.1418,29.9999,22.8916,28.3208,25.606,25.6063C28.3204,22.8918,29.9992,19.1417,29.9992,14.9997C29.9992,6.7157,23.2838,0,14.9997,0ZM11.0395,23.4572L11.0395,6.54144L23.6346,14.9997L11.0395,23.4573L11.0395,23.4572Z"
+            fill="#FF9A2D"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      <p class="text">正在排液...</p>
+    </div>
+    <div class="chart">
+      <div
+        class="liquid_column"
+        :style="{
+          '--height': `${
+            ((disinfectantCapacity <= 0 ? 0 : disinfectantCapacity) / 5000) *
+            427
+          }px`,
+        }"
+      >
+        <p class="indicator">
+          {{ disinfectantCapacity <= 0 ? 0 : disinfectantCapacity }}g
+        </p>
+      </div>
+    </div>
+    <LiquidModal
+      v-if="tabType == 2 && tipModalVisible"
+      :hideTabLiquid="hideTabLiquid"
+    />
+    <van-number-keyboard
+      v-model="addLiquidVal"
+      :show="numberKeyboardShow"
+      :maxlength="4"
+      @blur="numberKeyboardShow = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import LiquidModal from './dialogs/LiquidModal.vue'
+import { useDeviceStore, useWebSocketStore, useOperatorStore } from '@/store'
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import {
+  startReplenishingFluidsJSON,
+  stopReplenishingFluidsJSON,
+  stopDrainingJSON,
+} from '@/mock/command'
+
+const numberKeyboardShow = ref(false)
+const operatorStore = useOperatorStore()
+
+const props = defineProps({
+  tabType: {
+    type: Number,
+  },
+})
+
+const addLiquidVal = ref(2000)
+const tipModalVisible = ref(false)
+const webSocketStore = useWebSocketStore()
+
+const isPopLiquidStatus = ref(false)
+
+const startAdd = () => {
+  if (!(operatorStore.replenishingFluidsWorkState == 1)) {
+    console.log(startReplenishingFluidsJSON(parseInt(addLiquidVal.value)))
+    webSocketStore.sendCommandMsg(
+      startReplenishingFluidsJSON(parseInt(addLiquidVal.value)),
+    )
+  }
+}
+
+const stopAdd = () => {
+  if (operatorStore.replenishingFluidsWorkState == 1) {
+    webSocketStore.sendCommandMsg(stopReplenishingFluidsJSON)
+  }
+}
+
+const stopPop = () => {
+  if (operatorStore.drainingWorkState == 1) {
+    webSocketStore.sendCommandMsg(stopDrainingJSON)
+  }
+}
+
+const startTabLiquid = () => {
+  if (!(operatorStore.drainingWorkState == 1)) {
+    tipModalVisible.value = true
+  }
+}
+
+const hideTabLiquid = () => {
+  tipModalVisible.value = false
+}
+
+const deviceStore = useDeviceStore()
+
+const { disinfectantCapacity } = storeToRefs(deviceStore)
+</script>
+
+<style lang="scss" scoped>
+.liquid_contaienr {
+  margin-bottom: 19px;
+  height: 580px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  // .header_wrap {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: flex-end;
+  //   position: relative;
+  //   margin-bottom: 39px;
+  //   .set_wrap {
+  //     position: relative;
+  //     width: 227px;
+  //     height: 45px;
+  //     background: url(../assets/img/liquid/oper.png) no-repeat;
+  //     background-size: 227px 45px;
+  //     .title {
+  //       position: absolute;
+  //       left: 22px;
+  //       top: 12px;
+  //       font-family: Source Han Sans CN;
+  //       font-size: 14px;
+  //       font-weight: normal;
+  //       line-height: normal;
+  //       letter-spacing: 0.1em;
+  //       color: #0e0e0e;
+  //     }
+  //     .add_liquid_input {
+  //       position: absolute;
+  //       left: 113px;
+  //       top: 11px;
+  //       width: 40px;
+  //       height: 20px;
+  //       padding: 0;
+  //       color: #0e0e0e;
+  //       font-family: Source Han Sans CN;
+  //       font-weight: 500;
+  //       font-size: 14;
+  //     }
+  //   }
+  //   .btn {
+  //     width: 140px;
+  //     height: 45px;
+  //     border-radius: 23px;
+  //     background: #f6f6f6;
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: center;
+  //     font-family: Source Han Sans CN;
+  //     font-size: 14px;
+  //     font-weight: normal;
+  //     line-height: normal;
+  //     letter-spacing: 0.1em;
+  //     color: #d8d8d8;
+  //   }
+  //   .mr {
+  //     margin: 0 16px;
+  //   }
+  //   .active {
+  //     background: #06518b;
+  //     color: #fff;
+  //   }
+  // }
+  // .add_liquid {
+  //   position: absolute;
+  //   left: 382px;
+  //   top: 33px;
+  //   display: flex;
+  //   align-items: center;
+  //   .text {
+  //     margin-left: 16px;
+  //     font-family: Source Han Sans CN;
+  //     font-size: 26px;
+  //     font-weight: normal;
+  //     line-height: normal;
+  //     letter-spacing: 0.06em;
+  //     color: #ff9a2d;
+  //   }
+  // }
+  // .chart {
+  //   position: absolute;
+  //   left: 310px;
+  //   bottom: 23px;
+  //   width: 600px;
+  //   height: 452px;
+  //   background: url(../assets/img/liquid/chart.png) no-repeat;
+  //   background-size: 600px 452px;
+  //   .liquid_column {
+  //     position: absolute;
+  //     left: 96px;
+  //     bottom: 13px;
+  //     width: 491px;
+  //     height: var(--height);
+  //     border-radius: 0px 12px 12px 0px;
+  //     background: linear-gradient(0deg, #06518b 0%, rgba(6, 81, 139, 0.7) 58%);
+  //     .indicator {
+  //       position: absolute;
+  //       top: -10px;
+  //       right: -50px;
+  //       font-family: Source Han Sans CN;
+  //       font-size: 12px;
+  //       font-weight: 500;
+  //       line-height: normal;
+  //       letter-spacing: 0.06em;
+
+  //       color: #06518b;
+  //     }
+  //   }
+  // }
+}
+</style>