disinfection_high_front_end/src/pages/Home.vue

<template>
  <div class="home_container">
    <div class="header_menu">
      <div
        :class="activeTab == 1 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(1)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="22"
          height="20.533334732055664"
          viewBox="0 0 22 20.533334732055664"
        >
          <g>
            <path
              d="M18.4054,13.9071L19.2136,14.3737L19.5229,13.8378C19.5736,13.7502,19.6857,13.7201,19.7734,13.7707L20.4085,14.1374C20.4961,14.188,20.5262,14.3002,20.4756,14.3878L19.3068,16.4122C19.2562,16.4998,19.1441,16.5299,19.0564,16.4793L18.4213,16.1126C18.3336,16.062,18.3036,15.9498,18.3542,15.8622L18.6636,15.3263L17.8545,14.8593C17.2544,15.7529,16.4862,16.5211,15.5926,17.1212L16.4263,18.5653L16.9622,18.2559C17.0479,18.2064,17.1575,18.234,17.2097,18.3181L17.2126,18.323L17.5793,18.9581C17.6288,19.0439,17.6012,19.1535,17.5171,19.2056L17.5122,19.2086L15.4878,20.3773C15.4021,20.4268,15.2925,20.3993,15.2403,20.3151L15.2374,20.3102L14.8707,19.6751C14.8212,19.5894,14.8488,19.4798,14.9329,19.4276L14.9378,19.4247L15.4737,19.1153L14.6404,17.6721C13.6978,18.1364,12.6535,18.426,11.55,18.4986L11.55,19.4333L12.1688,19.4333C12.2678,19.4333,12.3489,19.512,12.352,19.6109L12.3521,19.6167L12.3521,20.35C12.3521,20.449,12.2735,20.5301,12.1745,20.5332L12.1688,20.5333L9.83125,20.5333C9.73223,20.5333,9.6511,20.4547,9.64801,20.3557L9.64792,20.35L9.64792,19.6167C9.64792,19.5176,9.72655,19.4365,9.82552,19.4334L9.83125,19.4333L10.45,19.4333L10.45,18.4986C9.34649,18.426,8.30225,18.1364,7.35957,17.6721L6.52632,19.1153L7.06216,19.4247C7.14984,19.4753,7.17989,19.5874,7.12926,19.6751L6.7626,20.3102C6.71197,20.3979,6.59985,20.4279,6.51216,20.3773L4.48784,19.2086C4.40016,19.1579,4.37012,19.0458,4.42074,18.9581L4.78741,18.323C4.83803,18.2354,4.95016,18.2053,5.03784,18.2559L5.57368,18.5653L6.40739,17.1212C5.5138,16.5211,4.74555,15.7529,4.14547,14.8593L3.33644,15.3263L3.64581,15.8622C3.69527,15.9478,3.66787,16.0573,3.58389,16.1095L3.57871,16.1126L2.94362,16.4793C2.85798,16.5287,2.74854,16.5013,2.69628,16.4174L2.69319,16.4122L1.52444,14.3878C1.47498,14.3022,1.50237,14.1928,1.58634,14.1405L1.59154,14.1374L2.22663,13.7707C2.31227,13.7213,2.42169,13.7487,2.47395,13.8326L2.47706,13.8378L2.78644,14.3737L3.5946,13.9071C3.13028,12.9644,2.84068,11.9202,2.76804,10.8167L1.1,10.8167L1.1,11.4354C1.1,11.5367,1.01792,11.6188,0.916667,11.6188L0.183333,11.6188C0.0820812,11.6188,0,11.5367,0,11.4354L0,9.09792C0,8.99667,0.0820812,8.91458,0.183333,8.91458L0.916667,8.91458C1.01792,8.91458,1.1,8.99667,1.1,9.09792L1.1,9.71667L2.76804,9.71667C2.84068,8.61316,3.13028,7.56892,3.59459,6.62624L2.78644,6.15966L2.47706,6.6955C2.42762,6.78116,2.31914,6.81215,2.2319,6.76555L2.22663,6.7626L1.59154,6.39593C1.50589,6.34649,1.4749,6.23802,1.52148,6.15079L1.52444,6.14552L2.69319,4.12117C2.74263,4.03553,2.8511,4.00453,2.93833,4.05112L2.9436,4.05407L3.57871,4.42074C3.66435,4.47019,3.69534,4.57865,3.64875,4.66588L3.64581,4.67115L3.33644,5.20701L4.14547,5.67405C4.74556,4.78047,5.51382,4.01221,6.40741,3.41213L5.5737,1.96802L5.03784,2.27739C4.95016,2.32801,4.83804,2.29797,4.78741,2.21029L4.42074,1.5752C4.37012,1.48752,4.40016,1.3754,4.48784,1.32477L6.51216,0.156018C6.59985,0.105394,6.71197,0.135435,6.7626,0.223118L7.12926,0.858208C7.17989,0.945892,7.14985,1.05801,7.06216,1.10864L6.52633,1.41802L7.35958,2.86126C8.30228,2.39695,9.3465,2.10735,10.45,2.0347L10.45,1.1L9.83125,1.1C9.73,1.1,9.64792,1.01792,9.64792,0.916667L9.64792,0.183333C9.64792,0.0820811,9.73,0,9.83125,0L12.1688,0C12.27,0,12.3521,0.0820811,12.3521,0.183333L12.3521,0.916667C12.3521,1.01792,12.27,1.1,12.1688,1.1L11.55,1.1L11.55,2.0347C12.6535,2.10735,13.6977,2.39695,14.6404,2.86126L15.4737,1.41802L14.9378,1.10864C14.8521,1.05913,14.8211,0.950466,14.8679,0.863203L14.8707,0.858207L15.2374,0.223117C15.2869,0.137357,15.3956,0.106411,15.4828,0.153221L15.4878,0.156017L17.5122,1.32477C17.5979,1.37428,17.6289,1.48294,17.5821,1.5702L17.5793,1.5752L17.2126,2.21029C17.1631,2.29605,17.0544,2.327,16.9672,2.28019L16.9622,2.27739L16.4263,1.96802L15.5926,3.41213C16.4862,4.01222,17.2545,4.78049,17.8545,5.67408L18.6636,5.20704L18.3542,4.67117C18.3036,4.58349,18.3336,4.47137,18.4213,4.42074L19.0564,4.05407C19.1441,4.00345,19.2562,4.03349,19.3068,4.12117L20.4756,6.14549C20.5262,6.23318,20.4961,6.3453,20.4085,6.39593L19.7734,6.7626C19.6857,6.81322,19.5736,6.78318,19.5229,6.6955L19.2136,6.15966L18.4054,6.62624C18.8697,7.56894,19.1593,8.61318,19.232,9.71667L
              :fill="activeTab == 1 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">消毒</p>
      </div>
      <div
        :class="activeTab == 2 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(2)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <g>
            <path
              d="M10.0113,0Q12.0725,0,13.8958,0.782313Q15.7191,1.56463,17.0781,2.92517Q18.4371,4.28571,19.2186,6.11111Q20,7.93651,20,10Q20,12.0862,19.2186,13.9002Q18.4371,15.7143,17.0781,17.0748Q15.7191,18.4354,13.8958,19.2177Q12.0725,20,10.0113,20Q7.92752,20,6.10419,19.2177Q4.28086,18.4354,2.92186,17.0748Q1.56285,15.7143,0.781427,13.9002Q-2.53134e-7,12.0862,0,10Q0,7.93651,0.781427,6.11111Q1.56285,4.28571,2.92186,2.92517Q4.28086,1.56463,6.10419,0.782313Q7.92752,-5.91316e-7,10.0113,0ZM15.7191,11.3832Q16.308,11.3832,16.7157,10.9637Q17.1234,10.5442,17.1234,9.95465Q17.1234,9.36508,16.7157,8.95692Q16.308,8.54875,15.7191,8.54875L11.4609,8.54875L11.4609,4.28571Q11.4609,3.69615,11.0419,3.27664Q10.6229,2.85714,10.034,2.85714Q9.44507,2.85714,9.03737,3.27664Q8.62967,3.69615,8.62967,4.28571L8.62967,8.54875L4.37146,8.54875Q3.78256,8.54875,3.37486,8.95692Q2.96716,9.36508,2.96716,9.95465Q2.96716,10.5442,3.37486,10.9637Q3.78256,11.3832,4.37146,11.3832L8.62967,11.3832L8.62967,15.6236Q8.62967,16.2132,9.03737,16.6327Q9.44507,17.0522,10.034,17.0522Q10.6229,17.0522,11.0419,16.6327Q11.4609,16.2132,11.4609,15.6236L11.4609,11.3832L15.7191,11.3832Z"
              :fill="activeTab == 2 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">加液</p>
      </div>
      <div
        :class="activeTab == 3 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(3)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20"
          height="20"
          viewBox="0 0 20 20"
        >
          <g>
            <path
              d="M9.98885,0Q12.0624,0,13.8907,0.791527Q15.7191,1.58305,17.068,2.932Q18.4169,4.28094,19.2085,6.0981Q20,7.91527,20,9.98885Q20,12.0624,19.2085,13.8907Q18.4169,15.7191,17.068,17.068Q15.7191,18.4169,13.8907,19.2085Q12.0624,20,9.98885,20Q7.91527,20,6.0981,19.2085Q4.28094,18.4169,2.932,17.068Q1.58305,15.7191,0.791527,13.8907Q0.00000290714,12.0624,0,9.98885Q-0.00000290714,7.91527,0.791527,6.0981Q1.58306,4.28094,2.932,2.932Q4.28093,1.58305,6.0981,0.791528Q7.91528,0.00000332244,9.98885,0ZM14.961,11.3489Q15.6299,11.3489,16.165,11.0033Q16.7001,10.6577,16.7001,9.96655Q16.7001,9.29766,16.165,8.97436Q15.6299,8.65106,14.961,8.65106L5.10591,8.65106Q4.43701,8.65106,3.8796,8.97436Q3.32218,9.29766,3.32218,9.96655Q3.32218,10.6577,3.8796,11.0033Q4.43701,11.3489,5.10591,11.3489L14.961,11.3489Z"
              :fill="activeTab == 3 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">排液</p>
      </div>
      <div
        :class="activeTab == 4 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(4)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20.125"
          height="20.125"
          viewBox="0 0 20.125 20.125"
        >
          <g>
            <path
              d="M12.1038,9.50762C12.2878,10.2034,12.1081,10.9753,11.5618,11.5201C10.7467,12.3352,9.42425,12.3352,8.60919,11.5201C7.79413,10.7051,7.79413,9.38256,8.60919,8.5675C9.19856,7.97813,10.0539,7.81569,10.7913,8.07875L18.3669,1.19888C18.768,0.79925,19.274,0.656938,19.4307,0.812188C19.6233,1.00481,19.4436,1.47488,19.044,1.8745L12.1038,9.50762ZM10.0625,2.51562C5.89519,2.51562,2.51562,5.89519,2.51562,10.0625C2.51562,14.2298,5.89519,17.6094,10.0625,17.6094C14.2298,17.6094,17.6094,14.2298,17.6094,10.0625C17.6094,9.07206,17.4067,8.13194,17.0603,7.26513L18.8888,5.22819C19.6751,6.66425,20.125,8.31019,20.125,10.0625C20.125,15.6199,15.6199,20.125,10.0625,20.125C4.50513,20.125,0,15.6199,0,10.0625C0,4.50513,4.50513,0,10.0625,0C11.8623,0,13.5484,0.478687,15.0089,1.30669L13.0309,3.12656C12.1196,2.73556,11.1176,2.51562,10.0625,2.51562Z"
              :fill="activeTab == 4 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">测试</p>
      </div>
      <div
        :class="activeTab == 5 ? 'tab_btn active_btn' : 'tab_btn'"
        @click="changeTab(5)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="20"
          height="19.999309539794922"
          viewBox="0 0 20 19.999309539794922"
        >
          <g>
            <path
              d="M8.23213,0L7.81352,2.1951C7.2095,2.36438,6.62789,2.60276,6.07979,2.90611L4.29364,1.56408L1.67856,4.17917L2.93507,6.02807C2.62819,6.57288,2.38543,7.15217,2.21165,7.7549L0,8.07007L0,11.7679L2.19579,12.1865C2.36437,12.7898,2.60276,13.3714,2.90611,13.9195L1.56408,15.7057L4.17917,18.3207L6.02876,17.0642C6.57431,17.3717,7.15383,17.6144,7.75559,17.7877L8.07076,19.9993L11.7686,19.9993L12.1872,17.8035C12.792,17.6353,13.3726,17.3966,13.9202,17.0932L15.7064,18.4352L18.3214,15.8201L17.0649,13.9712C17.3723,13.4257,17.6151,12.8462,17.7884,12.2444L20,11.9292L20,8.23144L17.8042,7.81283C17.6359,7.20803,17.3973,6.62736,17.0939,6.07979L18.4359,4.29364L15.8208,1.67856L13.9719,2.93507C13.4271,2.62819,12.8485,2.38543,12.2451,2.21165L11.9299,0L8.23213,0ZM8.99969,3.33368L9.37209,1.37926L10.7327,1.37857L11.0107,3.33368L11.4762,3.43712C12.2384,3.60803,12.9648,3.91123,13.6223,4.33295L14.005,4.57846L15.6519,3.45988L16.6139,4.42192L15.4277,6.00117L15.6829,6.40392C16.1015,7.06339,16.4012,7.79117,16.5684,8.55419L16.6656,8.999L18.62,9.37209L18.62,10.7327L16.6649,11.0107L16.5615,11.4762C16.3906,12.2384,16.0874,12.9648,15.6657,13.6223L15.4202,14.005L16.5387,15.6519L15.5767,16.6139L13.9974,15.4277L13.5947,15.6829C12.9352,16.1015,12.2074,16.4012,11.4444,16.5684L10.9996,16.6656L10.6265,18.62L9.26658,18.62L8.98866,16.6649L8.52315,16.5615C7.76091,16.3906,7.03453,16.0874,6.37702,15.6657L5.99428,15.4202L4.34744,16.5387L3.3854,15.5767L4.57157,13.9974L4.3164,13.5947C3.8978,12.9352,3.5981,12.2074,3.43092,11.4444L3.33368,10.9996L1.37926,10.6265L1.37926,9.26658L3.33437,8.98865L3.43781,8.52315C3.60866,7.76091,3.91187,7.03453,4.33364,6.37702L4.57915,5.99428L3.46057,4.34744L4.42261,3.3854L6.00186,4.57157L6.40461,4.3164C7.06402,3.89769,7.79183,3.59797,8.55488,3.43092L8.99969,3.33368ZM5.86187,9.99965C5.86187,12.2849,7.71442,14.1374,9.99965,14.1374C12.2849,14.1374,14.1374,12.2849,14.1374,9.99965C14.1374,7.71442,12.2849,5.86187,9.99965,5.86187C7.71442,5.86187,5.86187,7.71442,5.86187,9.99965ZM12.7582,9.99965C12.7582,11.5231,11.5231,12.7582,9.99965,12.7582C8.47616,12.7582,7.24113,11.5231,7.24113,9.99965C7.24113,8.47616,8.47616,7.24113,9.99965,7.24113C11.5231,7.24113,12.7582,8.47616,12.7582,9.99965Z"
              fill-rule="evenodd"
              :fill="activeTab == 5 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">设置</p>
      </div>
    </div>
    <Operator v-if="activeTab == 1" />
    <!-- <Progress v-if="activeTab == 1" /> -->
    <LiquidHandle v-if="[2, 3].includes(activeTab)" />
    <Test v-if="activeTab == 4" />
    <Setting v-if="activeTab == 5" />
    <div class="other_info">
      <p>IP192.0.0.0.0</p>
      <p class="time">{{ nowTime }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import moment from 'moment'
import Operator from 'cpns/Operator'
import Progress from 'cpns/Progress'
import LiquidHandle from 'cpns/LiquidHandle'
import Setting from 'cpns/Setting'
import Test from 'cpns/Test'
const activeTab = ref(1)
const nowTime = ref('')
const timer = ref(null)

const changeTab = index => {
  activeTab.value = index
}

const getdateTime = () => {
  nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss')
}

onMounted(() => {
  getdateTime()
  timer.value = setInterval(() => {
    getdateTime()
  }, 1000)
})

onBeforeUnmount(() => {
  timer.value = null
})
</script>

<style lang="scss" scoped>
.home_container {
  background: $theme-color;
  width: 1280px;
  height: 800px;
  box-sizing: border-box;
  padding: 30px;
  .header_menu {
    width: 100%;
    height: 80px;
    background: #fff;
    box-sizing: border-box;
    padding: 11px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    .tab_btn {
      width: 239.5px;
      height: 58px;
      border-radius: 29px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 80px;
      font-family: Source Han Sans CN;
      font-size: 20px;
      font-weight: 350;
      letter-spacing: 0.12em;
      color: #3d3d3d;
      .text {
        margin-left: 9px;
        white-space: nowrap;
      }
    }
    .active_btn {
      background: linear-gradient(
        90deg,
        #06518b 0%,
        rgba(6, 81, 139, 0.7) 100%
      );
      color: #ffffff;
    }
  }
  .other_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.06em;
    color: #ffffff;
    padding: 0 30px;
    .time {
      width: 156px;
      white-space: nowrap;
    }
  }
}
</style>