From 5831cde25165b775f3481c0ee7253ff9619c683a Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 7 Aug 2023 15:22:56 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=8E=AF=E5=A2=83=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Operator.vue                    | 18 +++--
 src/components/info/DisinfectantLiquidInfo.vue | 79 ++++++++++++++++++++++
 src/components/info/EnvironmentInfo.vue        | 91 ++++++++++++++++++++++++++
 3 files changed, 184 insertions(+), 4 deletions(-)
 create mode 100644 src/components/info/DisinfectantLiquidInfo.vue
 create mode 100644 src/components/info/EnvironmentInfo.vue

diff --git a/src/components/Operator.vue b/src/components/Operator.vue
index 3560650..ee2085f 100644
--- a/src/components/Operator.vue
+++ b/src/components/Operator.vue
@@ -2,10 +2,18 @@
   <div class="operator_main_content">
     <div class="left_contaienr">
       <div class="info_cards">
-        <div class="card"></div>
-        <div class="card"></div>
-        <div class="card"></div>
-        <div class="card"></div>
+        <div class="card">
+          <DisinfectantLiquidInfo />
+        </div>
+        <div class="card">
+          <EnvironmentInfo />
+        </div>
+        <div class="card">
+          <EnvironmentInfo />
+        </div>
+        <div class="card">
+          <EnvironmentInfo />
+        </div>
       </div>
       <div class="warn_wrap">
         <p class="warn_text">警报信息</p>
@@ -36,6 +44,8 @@
 <script setup>
 import LogPicker from 'cpns/dialogs/LogPicker'
 import WarnModal from 'cpns/dialogs/WarnModal'
+import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
+import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
 import { ref } from 'vue'
 
 const roomSize = ref(0)
diff --git a/src/components/info/DisinfectantLiquidInfo.vue b/src/components/info/DisinfectantLiquidInfo.vue
new file mode 100644
index 0000000..dc8f118
--- /dev/null
+++ b/src/components/info/DisinfectantLiquidInfo.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="disinfectant_liquid_container">
+    <div class="top_progress">
+      <svg
+        class="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="28"
+        height="28.00116729736328"
+        viewBox="0 0 28 28.00116729736328"
+      >
+        <g>
+          <path
+            d="M13.9994,0C6.26711,0,0,6.26827,0,14.0012C0,21.7329,6.26711,28.0012,13.9994,28.0012C21.7329,28.0012,28,21.7323,28,14.0012C28,6.26711,21.7329,0,13.9994,0ZM13.3306,2.65913L15.1107,2.65913L15.1107,6.15243L13.3306,6.15243L13.3306,2.65913ZM8.00532,9.19343L5.53538,6.72291L6.79393,5.46437L9.26387,7.93489L8.00532,9.19343ZM8.88432,3.93979L10.4945,3.18886L11.9713,6.35385L10.3594,7.10595L8.88432,3.93979ZM14.2445,24.2046C12.6966,24.2046,11.4433,22.9495,11.4433,21.4034C11.4433,20.1938,12.2088,19.1681,13.2828,18.7751L13.2828,10.7838L15.0612,10.7838L15.0612,18.7227C16.2091,19.0714,17.0462,20.139,17.0462,21.404C17.0462,22.9495,15.7923,24.2046,14.2445,24.2046ZM16.3302,6.35035L17.8071,3.1842L19.419,3.93688L17.9439,7.10304L16.3302,6.35035ZM20.2421,9.19343L18.9835,7.93489L21.4535,5.46437L22.712,6.72291L20.2421,9.19343Z"
+            fill="#FFFFFF"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      消毒液
+      <div class="progress"></div>
+    </div>
+    <div class="bottom">500 (g)</div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.disinfectant_liquid_container {
+  width: 353px;
+  height: 225px;
+  box-sizing: border-box;
+  border-radius: 17.5px;
+  overflow: hidden;
+  .top_progress {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    font-family: Source Han Sans CN;
+    font-size: 40px;
+    font-weight: bold;
+    letter-spacing: 0.1em;
+    color: #ffffff;
+    width: 353px;
+    height: 141px;
+    box-sizing: border-box;
+    .icon {
+      top: 15px;
+      left: 15px;
+      position: absolute;
+    }
+    .progress {
+      top: 19px;
+      right: 29px;
+      position: absolute;
+      width: 6px;
+      height: 100px;
+      border-radius: 3px;
+      background: #1f6397;
+    }
+  }
+  .bottom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #1f6397;
+    font-family: Source Han Sans CN;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 0.06em;
+    color: #ffffff;
+    height: 84px;
+  }
+}
+</style>
diff --git a/src/components/info/EnvironmentInfo.vue b/src/components/info/EnvironmentInfo.vue
new file mode 100644
index 0000000..57e0d44
--- /dev/null
+++ b/src/components/info/EnvironmentInfo.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="environment_container">
+    <div class="top_title">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="27.99883270263672"
+        height="28"
+        viewBox="0 0 27.99883270263672 28"
+      >
+        <g>
+          <path
+            d="M13.9988,0C6.26685,0,0,6.26801,0,14.0006C0,21.732,6.26685,28,13.9988,28C21.732,28,27.9988,21.7314,27.9988,14.0006C27.9988,6.26685,21.732,0,13.9988,0ZM13.33,2.65902L15.1101,2.65902L15.1101,6.15218L13.33,6.15218L13.33,2.65902ZM8.00499,9.19305L5.53515,6.72263L6.79364,5.46414L9.26348,7.93456L8.00499,9.19305ZM8.88395,3.93963L10.494,3.18872L11.9708,6.35358L10.359,7.10565L8.88395,3.93963ZM14.2439,24.2036C12.6961,24.2036,11.4428,22.9486,11.4428,21.4025C11.4428,20.1929,12.2083,19.1673,13.2823,18.7744L13.2823,10.7833L15.0606,10.7833L15.0606,18.722C16.2085,19.0706,17.0455,20.1382,17.0455,21.4031C17.0455,22.9486,15.7917,24.2036,14.2439,24.2036ZM16.3295,6.35009L17.8063,3.18407L19.4182,3.93672L17.9431,7.10274L16.3295,6.35009ZM20.2412,9.19305L18.9827,7.93456L21.4526,5.46414L22.7111,6.72263L20.2412,9.19305Z"
+            fill="#FFFFFF"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
+      <p class="title">仓内</p>
+    </div>
+    <div class="content">
+      <div class="line">
+        <p class="title">仓内温度</p>
+        <p class="num">000℃</p>
+      </div>
+      <div class="line">
+        <p class="title">仓内湿度</p>
+        <p class="num">000℃</p>
+      </div>
+      <div class="line">
+        <p class="title">仓内过氧化氢浓度</p>
+        <p class="num">1000 PPM</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.environment_container {
+  width: 353px;
+  height: 225px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 17.5px;
+  .top_title {
+    padding: 15px 16px;
+    display: flex;
+    align-items: center;
+    .title {
+      font-family: Source Han Sans CN;
+      font-size: 24px;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      margin-left: 8px;
+      color: #ffffff;
+    }
+  }
+  .content {
+    .line {
+      padding: 14px 26px;
+      width: 353px;
+      height: 56px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      &:nth-child(odd) {
+        background: #1f6397;
+      }
+      .title {
+        font-family: Source Han Sans CN;
+        font-size: 16px;
+        font-weight: normal;
+        letter-spacing: 0.06em;
+        color: #ffffff;
+      }
+      .num {
+        font-family: Source Han Sans CN;
+        font-size: 20px;
+        font-weight: bold;
+        letter-spacing: 0.06em;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>