上仓温度

src/components/charts/UpperTemperature.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="upper_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>
+            <ellipse
+              cx="15"
+              cy="15"
+              rx="15"
+              ry="15"
+              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="#565EE4"
+              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>
+.upper_temperature_container {
+  width: 350px;
+  height: 240px;
+  border-radius: 16px;
+  background: #565ee4;
+  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: #4d54d0;
+    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>

src/components/operation/LiquidInjection.vue

@@ -1,14 +1,51 @@
 <template>
   <div class="liquid_injection_container">
     <div class="title_wrap">
-      <img class="water_icon" :src="Water" alt="" />
-      <p class="info">正在注入液氮</p>
+      <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 />
+      <UpperTank />
+    </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>
-import Water from '@/assets/img/water.png'
+import UpperTank from 'cpns/charts/UpperTank'
+import StartIcon from '@/assets/img/start.png'
+import StopIcon from '@/assets/img/stop.png'
+import UpperTemperature from 'cpns/charts/UpperTemperature'
 </script>
 
 <style lang="scss" scoped>
@@ -21,21 +58,139 @@ import Water from '@/assets/img/water.png'
   box-sizing: border-box;
   padding: 20px;
   .title_wrap {
-    padding: 13px 0 33px 14px;
+    width: 720px;
+    height: 62px;
+    border-radius: 16px;
+    background: #ffffff;
+    padding: 0 20px;
     display: flex;
     align-items: center;
-    .water_icon {
-      width: 47px;
-      height: 35px;
-      margin-right: 22px;
-    }
-    .info {
+    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: #3d3d3d;
+      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;
+        }
+      }
     }
   }
 }