diff --git a/src/assets/img/login.png b/src/assets/img/login.png
new file mode 100644
index 0000000..9419c63
Binary files /dev/null and b/src/assets/img/login.png differ
diff --git a/src/assets/img/start_trans.png b/src/assets/img/start_trans.png
index 6c8f3e9..daddf1f 100644
Binary files a/src/assets/img/start_trans.png and b/src/assets/img/start_trans.png differ
diff --git a/src/components/charts/LowerTemperature.vue b/src/components/charts/LowerTemperature.vue
new file mode 100644
index 0000000..6fe101b
--- /dev/null
+++ b/src/components/charts/LowerTemperature.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="lower_temperature_container">
+    <div class="title_wrap">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="30"
+        height="30"
+        viewBox="0 0 30 30"
+      >
+        <g>
+          <g>
+            <path
+              d="M30,15C30,19.1421,28.3211,22.8921,25.6066,25.6066C22.8921,28.3211,19.1421,30,15,30C6.71573,30,0,23.2843,0,15C0,6.71573,6.71573,0,15,0C23.2843,0,30,6.71573,30,15Z"
+              fill="#FFFFFF"
+              fill-opacity="1"
+            />
+          </g>
+          <g>
+            <path
+              d="M15.155750000000001,16.849040000000002L15.155750000000001,12.557269999999999C15.155750000000001,12.29636,14.94327,12.08388,14.68236,12.08388L14.644860000000001,12.08388C14.3902,12.08388,14.18553,12.29011,14.18553,12.54321L14.18553,16.849040000000002C13.47935,17.0537,12.962209999999999,17.6849,12.962209999999999,18.4379C12.962209999999999,19.3582,13.7262,20.1034,14.671420000000001,20.1034C15.615079999999999,20.1034,16.37906,19.3566,16.37906,18.4379C16.3775,17.6849,15.86036,17.055300000000003,15.155750000000001,16.849040000000002ZM17.66956,14.947659999999999C17.56332,14.86017,17.50083,14.741430000000001,17.50083,14.61957L17.50083,9.766919999999999C17.50083,8.2405,16.23064,7,14.66986,7C13.10907,7,11.83888,8.2405,11.83888,9.766919999999999L11.83888,14.48208C11.83888,14.68675,11.75452,14.87579,11.60922,14.999220000000001C10.58588,15.8632,10,17.117800000000003,10,18.439500000000002C10,20.9533,12.09511,23,14.671420000000001,23C17.24773,23,19.342840000000002,20.954900000000002,19.342840000000002,18.439500000000002C19.341279999999998,17.0865,18.73196,15.8132,17.66956,14.947659999999999ZM14.66986,21.5517C12.904399999999999,21.5517,11.47017,20.155,11.47017,18.4379C11.47017,17.3677,12.02949,16.38346,12.96534,15.80695L13.19188,15.6679C13.26531,15.6226,13.31061,15.54136,13.31061,15.45543L13.31061,9.766919999999999C13.31061,9.03886,13.92149,8.44673,14.671420000000001,8.44673C15.42135,8.44673,16.03222,9.03886,16.03222,9.766919999999999L16.03222,15.45542C16.03222,15.54135,16.07753,15.6226,16.15096,15.6679L16.3775,15.80695C17.31335,16.38346,17.87111,17.3662,17.87111,18.4379C17.86954,20.155,16.43375,21.5517,14.66986,21.5517Z"
+              fill="#13C3F4"
+              fill-opacity="1"
+            />
+          </g>
+        </g>
+      </svg>
+      <p class="title">下仓温度</p>
+    </div>
+    <div class="temp_wrap">
+      <p class="num">-30</p>
+      <p class="unit">℃</p>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.lower_temperature_container {
+  width: 350px;
+  height: 240px;
+  border-radius: 16px;
+  background: #13c3f4;
+  box-sizing: border-box;
+  padding: 10px;
+  .title_wrap {
+    padding: 7px 0 20px 7px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    .title {
+      font-family: Source Han Sans CN;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      margin-left: 6px;
+      color: #ffffff;
+    }
+  }
+  .temp_wrap {
+    width: 330px;
+    height: 160px;
+    border-radius: 14px;
+    background: #10b3e1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .num {
+      font-family: Poppins;
+      font-size: 90px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0.02em;
+      color: #ffffff;
+      margin-right: 10px;
+    }
+    .unit {
+      font-family: Source Han Sans CN;
+      font-size: 88px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0.02em;
+      color: #ffffff;
+    }
+  }
+}
+</style>
diff --git a/src/components/charts/UpperTemperature.vue b/src/components/charts/UpperTemperature.vue
index ab80912..219f1a9 100644
--- a/src/components/charts/UpperTemperature.vue
+++ b/src/components/charts/UpperTemperature.vue
@@ -30,7 +30,7 @@
           </g>
         </g>
       </svg>
-      <p class="title">上仓制冷温度</p>
+      <p class="title">上仓温度</p>
     </div>
     <div class="temp_wrap">
       <p class="num">-30</p>
diff --git a/src/components/charts/Vacua.vue b/src/components/charts/Vacua.vue
new file mode 100644
index 0000000..3d33b11
--- /dev/null
+++ b/src/components/charts/Vacua.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="vacua_container">
+    <div class="title_wrap">
+      <div class="left_title">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          fill="none"
+          version="1.1"
+          width="30"
+          height="30"
+          viewBox="0 0 30 30"
+        >
+          <g>
+            <g>
+              <g>
+                <ellipse
+                  cx="15"
+                  cy="15"
+                  rx="15"
+                  ry="15"
+                  fill="#FFFFFF"
+                  fill-opacity="1"
+                />
+              </g>
+            </g>
+            <g transform="matrix(0,-1,1,0,-12,34)">
+              <g>
+                <path
+                  d="M11.441764384508133,25.129333972930908L26.30686438450813,25.129333972930908L26.30686438450813,29.258893972930906L11.441764384508133,29.258893972930906L11.441764384508133,25.129333972930908Z"
+                  fill="#98CAFF"
+                  fill-opacity="1"
+                />
+              </g>
+              <g>
+                <path
+                  d="M26.747,29.709686371421814L11,29.709686371421814L11,24.676836371421814L26.747,24.676836371421814L26.747,29.709686371421814ZM11.881858,28.806396371421812L25.865099999999998,28.806396371421812L25.865099999999998,25.580121371421814L11.881859,25.580121371421814L11.881858,28.806396371421812Z"
+                  fill="#2E91FA"
+                  fill-opacity="1"
+                />
+              </g>
+              <g>
+                <path
+                  d="M11.504228921167373,26.806514342269896C11.399118921167373,26.806514342269896,11.315386921167374,26.718924342269897,11.315386921167374,26.613084342269897L11.315386921167374,25.580235342269898C11.315386921167374,25.472571042269898,11.400900521167374,25.386804342269897,11.504228921167373,25.386804342269897L26.369386921167376,25.386804342269897C26.474486921167376,25.386804342269897,26.558186921167376,25.474395342269897,26.558186921167376,25.580235342269898L26.558186921167376,26.613084342269897C26.558186921167376,26.720744342269896,26.472686921167373,26.806514342269896,26.369386921167376,26.806514342269896L11.504228921167373,26.806514342269896Z"
+                  fill="#FFFFFF"
+                  fill-opacity="1"
+                />
+              </g>
+              <g>
+                <path
+                  d="M26.369455831933024,25.58006473399353L26.369455831933024,26.61291273399353L11.504340831933021,26.61291273399353L11.504340831933021,25.58006473399353L26.369455831933024,25.58006473399353ZM26.369455831933024,25.19320273399353L11.504340831933021,25.19320273399353C11.29590183193302,25.19320273399353,11.126655831933022,25.36656073399353,11.126655831933022,25.58006473399353L11.126655831933022,26.61291273399353C11.126655831933022,26.82641273399353,11.29590183193302,26.99977273399353,11.504340831933021,26.99977273399353L26.369455831933024,26.99977273399353C26.57785583193302,26.99977273399353,26.74715583193302,26.82641273399353,26.74715583193302,26.61291273399353L26.74715583193302,25.58006373399353C26.74715583193302,25.36655973399353,26.57785583193302,25.19320217710353,26.369455831933024,25.19320273399353Z"
+                  fill="#6EB2FA"
+                  fill-opacity="1"
+                />
+              </g>
+              <g>
+                <path
+                  d="M12.40563,31L11.106892,31C11.0481013,31,11,30.95073,11,30.89051L11,23.109489C11,23.0492703,11.0481013,23,11.106892,23L12.40563,23C12.46442,23,12.51252,23.0492703,12.51252,23.109489L12.51252,30.89051C12.51252,30.95073,12.46442,31,12.40563,31Z"
+                  fill="#2E91FA"
+                  fill-opacity="1"
+                />
+              </g>
+              <g>
+                <path
+                  d="M26.893108256225585,31L25.594370256225584,31C25.535579856225585,31,25.487478256225586,30.95073,25.487478256225586,30.89051L25.487478256225586,23.109489C25.487478256225586,23.0492703,25.535579856225585,23,25.594370256225584,23L26.893108256225585,23C26.951898256225586,23,26.999998256225584,23.0492703,26.999998256225584,23.109489L26.999998256225584,30.89051C26.999998256225584,30.95073,26.951898256225586,31,26.893108256225585,31Z"
+                  fill="#2E91FA"
+                  fill-opacity="1"
+                />
+              </g>
+            </g>
+          </g>
+        </svg>
+        <p class="title">真空管</p>
+      </div>
+      <p class="number">64Pa</p>
+    </div>
+    <div class="tube_wrap">
+      <div class="tube"></div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.vacua_container {
+  width: 720px;
+  height: 240px;
+  border-radius: 16px;
+  background: #2e91fa;
+  box-sizing: border-box;
+  padding: 10px;
+  .title_wrap {
+    padding: 12px 21px 18px 8px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left_title {
+      display: flex;
+      align-items: center;
+      .title {
+        margin-left: 6px;
+        font-family: Source Han Sans CN;
+        font-size: 24px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.04em;
+        color: #ffffff;
+      }
+    }
+    .number {
+      font-family: Poppins;
+      font-size: 24px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #ffffff;
+    }
+  }
+  .tube_wrap {
+    width: 700px;
+    height: 160px;
+    border-radius: 7px;
+    background: #2981df;
+    padding: 10px;
+    box-sizing: border-box;
+    .tube {
+      width: 417px;
+      height: 140px;
+      border-radius: 6px;
+      background: #1fedf4;
+    }
+  }
+}
+</style>
diff --git a/src/components/operation/ExtractionVacuum.vue b/src/components/operation/ExtractionVacuum.vue
index 548c829..aa37a3d 100644
--- a/src/components/operation/ExtractionVacuum.vue
+++ b/src/components/operation/ExtractionVacuum.vue
@@ -1,8 +1,48 @@
 <template>
-  <div class="extraction_vacuum_container"></div>
+  <div class="extraction_vacuum_container">
+    <div class="title_wrap">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="30"
+        height="30"
+        viewBox="0 0 30 30"
+      >
+        <g>
+          <path
+            d="M0.0282397,18.0005C0.659907,21.0473,2.21692,23.7884,4.52941,25.9259C4.83807,26.2117,5.26304,26.343,5.68283,26.2824C6.10292,26.2221,6.47186,25.9766,6.68442,25.6159L8.49036,22.5458C8.79194,22.0326,8.72173,21.3871,8.31659,20.948C7.37248,19.9224,6.68418,18.6955,6.30603,17.364C6.13904,16.7733,5.59146,16.3645,4.96732,16.3645L1.3891,16.3645C0.972064,16.3643,0.577098,16.5484,0.313663,16.8657C0.0493008,17.1825,-0.0555478,17.5993,0.0282397,18.0005ZM18.4044,24.3116C18.1027,23.7966,17.4957,23.5329,16.9045,23.6601C15.4084,23.9818,13.8532,23.9211,12.3879,23.4839C11.7695,23.2995,11.1032,23.5574,10.7796,24.1065L9.00669,27.1225C8.80232,27.4705,8.76465,27.8892,8.90373,28.267C9.04239,28.6451,9.34445,28.9435,9.72872,29.0821C11.4082,29.6911,13.1823,30,14.9995,30C16.502,30,17.9854,29.787,19.4073,29.3661C19.8132,29.2455,20.141,28.9499,20.2978,28.5631C20.4542,28.1757,20.4213,27.7394,20.2088,27.3787L18.4044,24.3116ZM24.7879,3.48287C24.5385,3.27825,24.2237,3.16611,23.8987,3.16603C23.8181,3.16603,23.736,3.17435,23.6554,3.18799C23.2521,3.25874,22.9012,3.50063,22.6966,3.84896L20.9197,6.86723C20.5973,7.41693,20.7027,8.11221,21.1743,8.54587C22.3831,9.65389,23.2549,11.0694,23.6927,12.6349C23.8587,13.227,24.4071,13.6373,25.0327,13.6374L28.6114,13.6374C29.0276,13.6371,29.4218,13.4537,29.6855,13.1377C29.9501,12.8214,30.0553,12.405,29.972,12.004C29.2891,8.68212,27.4482,5.65574,24.7879,3.48287ZM20.2978,1.43835C20.1414,1.05124,19.8134,0.755451,19.4073,0.63517C17.9776,0.213004,16.4925,-0.00099699,14.9995,0.00000317715C13.1823,0.00000317715,11.4082,0.308738,9.72872,0.917681C8.92141,1.21126,8.57699,2.14697,9.00669,2.87926L10.7796,5.89476C11.1032,6.44385,11.7695,6.70179,12.3879,6.51735C13.2345,6.26416,14.1147,6.13575,14.9997,6.13633C15.6355,6.13633,16.2769,6.20456,16.9045,6.33995C17.4953,6.4668,18.1018,6.2039,18.4044,5.68986L20.209,2.62234C20.4215,2.26177,20.4542,1.82558,20.2978,1.43835ZM28.6114,16.3643L25.0327,16.3643C24.407,16.3639,23.8583,16.7743,23.6927,17.3666C23.2547,18.9321,22.3829,20.3476,21.1743,21.4558C20.7026,21.8887,20.5971,22.5837,20.9197,23.1328L22.6966,26.1523C22.901,26.5009,23.252,26.7429,23.6554,26.8135C23.736,26.8271,23.8181,26.834,23.8987,26.834C24.2236,26.8344,24.5383,26.7228,24.7879,26.5186C27.4482,24.3443,29.2891,21.3192,29.972,17.9977C30.0554,17.5967,29.9502,17.1803,29.6855,16.864C29.4221,16.5475,29.0277,16.364,28.6114,16.3643ZM0.313446,13.136C0.576764,13.4532,0.971693,13.6372,1.38889,13.6372L4.96754,13.6372C5.59184,13.637,6.13939,13.2282,6.30625,12.6377C6.68424,11.3058,7.37255,10.0784,8.31681,9.05247C8.72199,8.61388,8.79222,7.96863,8.49058,7.45592L6.68464,4.38584C6.47177,4.02516,6.10308,3.77935,5.68305,3.71805C5.61622,3.70868,5.54877,3.70412,5.48126,3.7044C5.13067,3.7044,4.78833,3.83553,4.52963,4.07582C2.21692,6.21309,0.659907,8.95397,0.0282397,12.001C-0.0554526,12.4022,0.0492956,12.819,0.313446,13.136Z"
+            fill="#9395A0"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      <p class="title">操作运行状态</p>
+    </div>
+    <Vacua />
+    <div class="btns">
+      <div class="disable_wrap">
+        <div class="real_btn">
+          <img :src="StopIcon" class="icon" alt="" />
+          <p class="text">暂停抽取</p>
+        </div>
+      </div>
+      <div class="start_wrap">
+        <div class="real_btn">
+          <img :src="StartIcon" class="icon" alt="" />
+          <p class="text">抽取真空</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Vacua from 'cpns/charts/Vacua'
+import StartIcon from '@/assets/img/start.png'
+import StopIcon from '@/assets/img/stop.png'
+</script>
 
 <style lang="scss" scoped>
 .extraction_vacuum_container {
@@ -13,5 +53,134 @@
   margin: 20px 0;
   box-sizing: border-box;
   padding: 20px;
+  .title_wrap {
+    width: 720px;
+    height: 62px;
+    border-radius: 16px;
+    background: #ffffff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    .title {
+      margin-left: 17px;
+      font-family: Source Han Sans CN;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #9395a0;
+    }
+    .active {
+      color: #08092c;
+    }
+  }
+  .btns {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-top: 20px;
+    .disable_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      margin-right: 20px;
+      background: rgba(199, 204, 208, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #d8d8d8;
+        box-sizing: border-box;
+        border: 2px solid #c4c4c4;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+    .start_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      background: rgba(23, 241, 121, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #17f179;
+        box-sizing: border-box;
+        border: 2px solid #1ad66e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+    .stop_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      background: rgba(250, 28, 28, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #fa1c1c;
+        box-sizing: border-box;
+        border: 2px solid #b71212;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/operation/StartHeating.vue b/src/components/operation/StartHeating.vue
index 33ccb37..3089b14 100644
--- a/src/components/operation/StartHeating.vue
+++ b/src/components/operation/StartHeating.vue
@@ -1,8 +1,52 @@
 <template>
-  <div class="start_heating_container"></div>
+  <div class="start_heating_container">
+    <div class="title_wrap">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="30"
+        height="30"
+        viewBox="0 0 30 30"
+      >
+        <g>
+          <path
+            d="M0.0282397,18.0005C0.659907,21.0473,2.21692,23.7884,4.52941,25.9259C4.83807,26.2117,5.26304,26.343,5.68283,26.2824C6.10292,26.2221,6.47186,25.9766,6.68442,25.6159L8.49036,22.5458C8.79194,22.0326,8.72173,21.3871,8.31659,20.948C7.37248,19.9224,6.68418,18.6955,6.30603,17.364C6.13904,16.7733,5.59146,16.3645,4.96732,16.3645L1.3891,16.3645C0.972064,16.3643,0.577098,16.5484,0.313663,16.8657C0.0493008,17.1825,-0.0555478,17.5993,0.0282397,18.0005ZM18.4044,24.3116C18.1027,23.7966,17.4957,23.5329,16.9045,23.6601C15.4084,23.9818,13.8532,23.9211,12.3879,23.4839C11.7695,23.2995,11.1032,23.5574,10.7796,24.1065L9.00669,27.1225C8.80232,27.4705,8.76465,27.8892,8.90373,28.267C9.04239,28.6451,9.34445,28.9435,9.72872,29.0821C11.4082,29.6911,13.1823,30,14.9995,30C16.502,30,17.9854,29.787,19.4073,29.3661C19.8132,29.2455,20.141,28.9499,20.2978,28.5631C20.4542,28.1757,20.4213,27.7394,20.2088,27.3787L18.4044,24.3116ZM24.7879,3.48287C24.5385,3.27825,24.2237,3.16611,23.8987,3.16603C23.8181,3.16603,23.736,3.17435,23.6554,3.18799C23.2521,3.25874,22.9012,3.50063,22.6966,3.84896L20.9197,6.86723C20.5973,7.41693,20.7027,8.11221,21.1743,8.54587C22.3831,9.65389,23.2549,11.0694,23.6927,12.6349C23.8587,13.227,24.4071,13.6373,25.0327,13.6374L28.6114,13.6374C29.0276,13.6371,29.4218,13.4537,29.6855,13.1377C29.9501,12.8214,30.0553,12.405,29.972,12.004C29.2891,8.68212,27.4482,5.65574,24.7879,3.48287ZM20.2978,1.43835C20.1414,1.05124,19.8134,0.755451,19.4073,0.63517C17.9776,0.213004,16.4925,-0.00099699,14.9995,0.00000317715C13.1823,0.00000317715,11.4082,0.308738,9.72872,0.917681C8.92141,1.21126,8.57699,2.14697,9.00669,2.87926L10.7796,5.89476C11.1032,6.44385,11.7695,6.70179,12.3879,6.51735C13.2345,6.26416,14.1147,6.13575,14.9997,6.13633C15.6355,6.13633,16.2769,6.20456,16.9045,6.33995C17.4953,6.4668,18.1018,6.2039,18.4044,5.68986L20.209,2.62234C20.4215,2.26177,20.4542,1.82558,20.2978,1.43835ZM28.6114,16.3643L25.0327,16.3643C24.407,16.3639,23.8583,16.7743,23.6927,17.3666C23.2547,18.9321,22.3829,20.3476,21.1743,21.4558C20.7026,21.8887,20.5971,22.5837,20.9197,23.1328L22.6966,26.1523C22.901,26.5009,23.252,26.7429,23.6554,26.8135C23.736,26.8271,23.8181,26.834,23.8987,26.834C24.2236,26.8344,24.5383,26.7228,24.7879,26.5186C27.4482,24.3443,29.2891,21.3192,29.972,17.9977C30.0554,17.5967,29.9502,17.1803,29.6855,16.864C29.4221,16.5475,29.0277,16.364,28.6114,16.3643ZM0.313446,13.136C0.576764,13.4532,0.971693,13.6372,1.38889,13.6372L4.96754,13.6372C5.59184,13.637,6.13939,13.2282,6.30625,12.6377C6.68424,11.3058,7.37255,10.0784,8.31681,9.05247C8.72199,8.61388,8.79222,7.96863,8.49058,7.45592L6.68464,4.38584C6.47177,4.02516,6.10308,3.77935,5.68305,3.71805C5.61622,3.70868,5.54877,3.70412,5.48126,3.7044C5.13067,3.7044,4.78833,3.83553,4.52963,4.07582C2.21692,6.21309,0.659907,8.95397,0.0282397,12.001C-0.0554526,12.4022,0.0492956,12.819,0.313446,13.136Z"
+            fill="#9395A0"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      <p class="title">操作运行状态</p>
+    </div>
+    <div class="chart_container">
+      <UpperTemperature />
+      <LowerTemperature />
+    </div>
+    <div class="btns">
+      <div class="disable_wrap">
+        <div class="real_btn">
+          <img :src="StopIcon" class="icon" alt="" />
+          <p class="text">暂停加热</p>
+        </div>
+      </div>
+      <div class="start_wrap">
+        <div class="real_btn">
+          <img :src="StartIcon" class="icon" alt="" />
+          <p class="text">开始加热</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import StartIcon from '@/assets/img/start.png'
+import StopIcon from '@/assets/img/stop.png'
+import UpperTemperature from 'cpns/charts/UpperTemperature'
+import LowerTemperature from 'cpns/charts/LowerTemperature'
+</script>
 
 <style lang="scss" scoped>
 .start_heating_container {
@@ -13,5 +57,141 @@
   margin: 20px 0;
   box-sizing: border-box;
   padding: 20px;
+  .title_wrap {
+    width: 720px;
+    height: 62px;
+    border-radius: 16px;
+    background: #ffffff;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    box-sizing: border-box;
+    .title {
+      margin-left: 17px;
+      font-family: Source Han Sans CN;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #9395a0;
+    }
+    .active {
+      color: #08092c;
+    }
+  }
+  .chart_container {
+    width: 720px;
+    height: 240px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+    margin-bottom: 20px;
+  }
+  .btns {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    .disable_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      margin-right: 20px;
+      background: rgba(199, 204, 208, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #d8d8d8;
+        box-sizing: border-box;
+        border: 2px solid #c4c4c4;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+    .start_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      background: rgba(23, 241, 121, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #17f179;
+        box-sizing: border-box;
+        border: 2px solid #1ad66e;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+    .stop_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      background: rgba(250, 28, 28, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #fa1c1c;
+        box-sizing: border-box;
+        border: 2px solid #b71212;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/operation/TransferLiquid.vue b/src/components/operation/TransferLiquid.vue
index a18a79e..eac194d 100644
--- a/src/components/operation/TransferLiquid.vue
+++ b/src/components/operation/TransferLiquid.vue
@@ -24,17 +24,17 @@
       <img :src="startTrans" class="img_btn" alt="" />
     </div>
     <div class="double_chart">
-      <LowerTank />
       <UpperTank />
+      <LowerTank />
     </div>
     <div class="btns">
-      <div class="start_wrap" style="margin-right: 20px">
+      <div class="upper_wrap" style="margin-right: 20px">
         <div class="real_btn">
           <img :src="StartIcon" class="icon" alt="" />
           <p class="text">注入上仓液氮</p>
         </div>
       </div>
-      <div class="start_wrap">
+      <div class="lower_wrap">
         <div class="real_btn">
           <img :src="StartIcon" class="icon" alt="" />
           <p class="text">注入下仓液氮</p>
@@ -105,21 +105,54 @@ import UpperTank from 'cpns/charts/UpperTank'
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    .start_wrap {
+    .upper_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 350px;
+      height: 108px;
+      border-radius: 54px;
+      background: rgba(19, 195, 244, 0.2);
+      .real_btn {
+        width: 330px;
+        height: 88px;
+        border-radius: 44px;
+        background: #13c3f4;
+        box-sizing: border-box;
+        border: 2px solid #10b3e1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon {
+          width: 40px;
+          height: 40px;
+          margin-right: 13px;
+        }
+        .text {
+          font-family: Source Han Sans CN;
+          font-size: 36px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.04em;
+          color: #ffffff;
+        }
+      }
+    }
+    .lower_wrap {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 350px;
       height: 108px;
       border-radius: 54px;
-      background: rgba(23, 241, 121, 0.2);
+      background: rgba(86, 94, 228, 0.2);
       .real_btn {
         width: 330px;
         height: 88px;
         border-radius: 44px;
-        background: #17f179;
+        background: #565ee4;
         box-sizing: border-box;
-        border: 2px solid #1ad66e;
+        border: 2px solid #4d54d0;
         display: flex;
         align-items: center;
         justify-content: center;