disinfection_high_front_end/src/pages/Home.vue

<template>
  <div class="home_container">
    <div class="header_menu">
      <div
        :class="
          activeTab == 1 ? 'tab_btn style-btn active_btn' : 'style-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 style-btn active_btn' : 'style-btn tab_btn'
        "
        @click="changeTab(2)"
        v-if="operatorStore.disinfectStatus != 1"
      >
        <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 style-btn active_btn' : 'style-btn tab_btn'
        "
        @click="changeTab(3)"
        v-if="operatorStore.disinfectStatus != 1"
      >
        <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 style-btn active_btn' : 'style-btn tab_btn'
        "
        @click="changeTab(4)"
        v-if="
          userStore.loginUserPermission != 3 &&
          operatorStore.disinfectStatus != 1
        "
      >
        <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 style-btn active_btn' : 'style-btn tab_btn'
        "
        @click="changeTab(5)"
        v-if="userStore.loginUserPermission != 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="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
        :class="
          activeTab == 6 ? 'tab_btn style-btn active_btn' : 'style-btn tab_btn'
        "
        @click="changeTab(6)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="18.375"
          height="19.25"
          viewBox="0 0 18.375 19.25"
        >
          <g>
            <path
              d="M15.75,0C17.1997,7.82311e-8,18.375,1.17525,18.375,2.625L18.375,16.625C18.375,18.0747,17.1997,19.25,15.75,19.25L4.375,19.25C3.09406,19.2498,2.00016,18.3255,1.78631,17.0625L2.84375,17.0625C3.91298,17.0625,4.78675,16.2091,4.81194,15.1401C4.83714,14.0712,4.00455,13.1776,2.9365,13.1272L2.84375,13.125L1.75,13.125L1.75,11.5937L2.84375,11.5937C3.895,11.5937,4.76079,10.7678,4.81031,9.71775L4.8125,9.625C4.8125,8.57375,3.98658,7.70796,2.9365,7.65844L2.84375,7.65625L1.75,7.65625L1.75,6.125L2.84375,6.125C3.895,6.125,4.76079,5.29908,4.81031,4.249L4.8125,4.15625C4.8125,3.105,3.98658,2.23921,2.9365,2.18969L2.84375,2.1875L1.78631,2.1875C2.00035,0.924371,3.09425,1.56462e-7,4.375,0L15.75,0ZM2.84375,14.4375C3.20619,14.4375,3.5,14.7313,3.5,15.0937C3.5,15.4562,3.20619,15.75,2.84375,15.75L0.65625,15.75C0.293813,15.75,0,15.4562,0,15.0937C0,14.7313,0.293813,14.4375,0.65625,14.4375L2.84375,14.4375ZM15.2687,5.29375C14.7562,4.78108,13.925,4.78108,13.4124,5.29375L7.12469,11.5824C6.98921,11.7178,6.90191,11.8939,6.87619,12.0837L6.699,13.3927C6.65986,13.6818,6.90927,13.9275,7.19775,13.8841L8.48706,13.6898C8.6721,13.6621,8.84338,13.5757,8.97575,13.4435L15.2683,7.1505C15.7807,6.63797,15.7807,5.80716,15.2683,5.29462L15.2687,5.29375ZM2.84375,8.96875C3.20619,8.96875,3.5,9.26256,3.5,9.625C3.5,9.98744,3.20619,10.2812,2.84375,10.2812L0.65625,10.2812C0.293813,10.2812,0,9.98744,0,9.625C0,9.26256,0.293813,8.96875,0.65625,8.96875L2.84375,8.96875ZM2.84375,3.5C3.20619,3.5,3.5,3.79381,3.5,4.15625C3.5,4.51869,3.20619,4.8125,2.84375,4.8125L0.65625,4.8125C0.293813,4.8125,0,4.51869,0,4.15625C0,3.79381,0.293813,3.5,0.65625,3.5L2.84375,3.5Z"
              :fill="activeTab == 6 ? '#FFFFFF' : '#3D3D3D'"
              fill-opacity="1"
            />
          </g>
        </svg>
        <p class="text">审计</p>
      </div>
    </div>
    <Operator
      v-if="activeTab == 1 && showOpertor"
      :changeShowOperator="changeShowOperator"
      :handleShowKeyBoard="handleShowKeyBoard"
      :hideKeyBoard="hideKeyBoard"
      :input="input"
    />
    <Progress
      v-if="activeTab == 1 && !showOpertor"
      :changeShowOperator="changeShowOperator"
    />
    <LiquidHandle v-if="activeTab == 2" :tabType="1" />
    <LiquidHandle v-if="activeTab == 3" :tabType="2" />
    <Test v-if="activeTab == 4" />
    <Setting v-if="activeTab == 5 && operatorStore.disinfectStatus != 1" />
    <DisinfectionSetting
      v-if="activeTab == 5 && operatorStore.disinfectStatus == 1"
    />
    <Audit v-if="activeTab == 6" />
    <div class="other_info">
      <p class="ip">IP {{ settingStore.deviceIp }}</p>
      <div class="time_wrap">
        <div class="date_wrap">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="23"
            height="23"
            viewBox="0 0 23 23"
          >
            <g>
              <path
                d="M0.0000112331,21.1495C0.0000111223,22.1715,0.82871,23,1.85096,23L21.149,23C22.1713,23,23,22.1715,23,21.1495L23,8.16307L0.0000112331,8.16307L0.0000112331,21.1495ZM15.6071,11.5028L17.25,11.5028C17.702,11.5051,18.0671,11.8721,18.0671,12.324C18.0671,12.7759,17.702,13.1428,17.25,13.1452L15.6071,13.1452C15.1552,13.1428,14.79,12.7759,14.79,12.324C14.79,11.8721,15.1552,11.5051,15.6071,11.5028ZM10.6786,11.5028L12.3214,11.5028C12.7734,11.5051,13.1385,11.8721,13.1385,12.324C13.1385,12.7759,12.7734,13.1428,12.3214,13.1452L10.6786,13.1452C10.2266,13.1428,9.86145,12.7759,9.86145,12.324C9.86145,11.8721,10.2266,11.5051,10.6786,11.5028ZM10.6786,16.4849L12.3214,16.4849C12.7734,16.4872,13.1386,16.8542,13.1386,17.3061C13.1386,17.758,12.7734,18.125,12.3214,18.1274L10.6786,18.1274C10.2266,18.125,9.86138,17.758,9.86138,17.3061C9.86138,16.8542,10.2266,16.4872,10.6786,16.4849ZM5.75003,11.5028L7.3929,11.5028C7.84487,11.5051,8.21001,11.8721,8.21001,12.324C8.21001,12.7759,7.84487,13.1428,7.3929,13.1452L5.75003,13.1452C5.29805,13.1428,4.93291,12.7759,4.93291,12.324C4.93291,11.8721,5.29805,11.5051,5.75003,11.5028ZM5.75003,16.4849L7.3929,16.4849C7.8449,16.4872,8.21009,16.8542,8.21009,17.3061C8.21009,17.758,7.8449,18.125,7.3929,18.1274L5.75003,18.1274C5.29803,18.125,4.93284,17.758,4.93284,17.3061C4.93284,16.8542,5.29803,16.4872,5.75003,16.4849ZM23,3.49847C23,2.47646,22.1713,1.64796,21.1491,1.64796L18.0714,1.64796L18.0714,0.925278C18.0714,0.414274,17.6571,0.0000222804,17.146,0.0000222804C16.6348,0.0000222804,16.2205,0.414273,16.2205,0.925278L16.2205,1.64796L6.77952,1.64796L6.77952,0.925278C6.77952,0.414274,6.36517,0.0000226113,5.85405,0.0000226113C5.34292,0.0000226113,4.92857,0.414274,4.92857,0.925278L4.92857,1.64796L1.85096,1.64796C0.82871,1.64796,0.0000112442,2.47646,0.0000112331,3.49847L0.0000112331,6.37826L23,6.37826L23,3.49847Z"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="ml">{{ moment(nowTime).format('YYYY-MM-DD') }}</p>
        </div>
        <div class="min_wrap">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="22"
            height="22"
            viewBox="0 0 22 22"
          >
            <g>
              <path
                d="M11,22C17.075,22,22,17.075,22,11C22,4.92497,17.075,0,11,0C4.92497,0,0,4.92497,0,11C0,17.075,4.92497,22,11,22ZM6.29173,14.5417L10.175,10.6582L10.175,6.05C10.175,5.59436,10.5444,5.225,11,5.225C11.4556,5.225,11.825,5.59436,11.825,6.05L11.825,11C11.825,11.2188,11.738,11.4286,11.5833,11.5833L7.45828,15.7083C7.13785,16.0401,6.60764,16.0447,6.28149,15.7185C5.95534,15.3924,5.95995,14.8622,6.29173,14.5417Z"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="ml time_txt">{{ moment(nowTime).format('HH:mm:ss') }}</p>
        </div>
      </div>
      <div class="log_out_btn style-btn" @click="handleLogout">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="76"
          height="29"
          viewBox="0 0 76 29"
        >
          <g>
            <g>
              <path
                d="M34.9,7.65437C36.22,8.27594,37.86,9.23781,38.7,9.89937L39.480000000000004,8.77687C38.62,8.15563,36.92,7.25375,35.66,6.6725L34.9,7.65437ZM33.86,13.18C35.12,13.78,36.74,14.72,37.54,15.36L38.3,14.24C37.46,13.62,35.84,12.74,34.6,12.18L33.86,13.18ZM34.46,23.64L35.58,24.5628C36.76,22.7,38.18,20.16,39.24,18.04L38.28,17.16C37.12,19.44,35.54,22.1,34.46,23.64ZM43.96,6.81281C44.66,7.875,45.38,9.27812,45.68,10.18L46.96,9.63875C46.66,8.75687,45.88,7.39406,45.18,6.37187L43.96,6.81281ZM39.62,10.28L39.62,11.56L44.96,11.56L44.96,16.24L40.38,16.24L40.38,17.52L44.96,17.52L44.96,22.88L38.980000000000004,22.88L38.980000000000004,24.16L52.2,24.16L52.2,22.88L46.34,22.88L46.34,17.52L51,17.52L51,16.24L46.34,16.24L46.34,11.56L51.72,11.56L51.72,10.28L39.62,10.28ZM64.2,7.65625C65,8.84,65.82,10.4,66.16,11.38L67.28,10.8C66.94,9.8,66.06,8.29844,65.25999999999999,7.155L64.2,7.65625ZM73.24000000000001,7.03437C72.72,8.19812,71.78,9.84,71.08,10.84L72.1,11.32C72.82,10.36,73.72,8.86,74.42,7.57625L73.24000000000001,7.03437ZM59,6.51281C58.42,8.35844,57.4,10.14,56.22,11.34C56.44,11.62,56.8,12.26,56.9,12.54C57.519999999999996,11.88,58.120000000000005,11.06,58.66,10.16L63.58,10.16L63.58,8.9L59.34,8.9C59.66,8.23812,59.94,7.53594,60.18,6.85406L59,6.51281ZM56.68,16.4L56.68,17.64L59.6,17.64L59.6,21.7653C59.6,22.6262,59,23.1672,58.66,23.3672C58.879999999999995,23.6478,59.22,24.1884,59.32,24.5087C59.620000000000005,24.1884,60.120000000000005,23.8678,63.44,21.9856C63.34,21.7053,63.22,21.2047,63.18,20.8441L60.84,22.0856L60.84,17.64L63.7,17.64L63.7,16.4L60.84,16.4L60.84,13.56L63.239999999999995,13.56L63.239999999999995,12.34L57.519999999999996,12.34L57.519999999999996,13.56L59.6,13.56L59.6,16.4L56.68,16.4ZM65.7,16.88L72.62,16.88L72.62,19.18L65.7,19.18L65.7,16.88ZM65.7,15.7L65.7,13.44L72.62,13.44L72.62,15.7L65.7,15.7ZM68.6,6.43125L68.6,12.2L64.48,12.2L64.48,24.7819L65.7,24.7819L65.7,20.34L72.62,20.34L72.62,23.02C72.62,23.3,72.5,23.38,72.22,23.38C71.92,23.4,70.9,23.4,69.72,23.38C69.92,23.72,70.1,24.26,70.16,24.6C71.7,24.6,72.62,24.6,73.14,24.36C73.68,24.16,73.84,23.76,73.84,23.04L73.84,12.18L72.62,12.2L69.86,12.2L69.86,6.43125L68.6,6.43125Z"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
            <g>
              <path
                d="M12.8863,21.99L12.8863,24.6672C12.8863,24.6954,12.888,24.7,12.911,24.7L2.21645,24.7C2.23942,24.6994,2.2411,24.696,2.2411,24.6672L2.2411,6.33278C2.2411,6.304600000000001,2.23942,6.3,2.21645,6.3L12.911,6.3C12.888,6.30058,12.8863,6.30403,12.8863,6.33278L12.8863,11.778030000000001C12.8857,12.41359,13.3876,12.92915,14.0069,12.92915C14.6262,12.92915,15.128,12.41359,15.1274,11.778030000000001L15.1274,6.33278C15.1274,5.06203,14.1637,4,12.9328,4L2.1946,4C0.963674,4,0,5.06203,0,6.33278L0,24.6672C0,25.938,0.963674,27,2.1946,27L12.9328,27C14.1637,27,15.1274,25.938,15.1274,24.6672L15.1274,21.99C15.1274,21.3549,14.6257,20.84,14.0069,20.84C13.388,20.84,12.8863,21.3549,12.8863,21.99ZM21.6038,15.8428L18.8306,12.99639Q18.4344,12.5898,18.0383,12.5898Q17.6421,12.58981,17.2459,12.99639Q16.4536,13.80956,17.2459,14.6227L18.1007,15.5L9.52474,15.5Q8.40419,15.5,8.40419,16.65Q8.40419,17.8,9.52474,17.8L18.112,17.8L17.2459,18.6889Q16.4536,19.5021,17.2459,20.3152Q17.6421,20.7218,18.0383,20.7218Q18.4344,20.7218,18.8306,20.3152L21.6038,17.469099999999997Q22,17.0625,22,16.655900000000003Q22,16.249299999999998,21.6038,15.8428Z"
                fill-rule="evenodd"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </g>
        </svg>
      </div>
    </div>
    <!-- <van-overlay :show="settingStore.initLoading">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-loading />
          <p class="shutdown_text">初始化系统参数...</p>
        </div>
      </div>
    </van-overlay> -->
    <div class="key_wrap" v-if="showkeyboard">
      <SimpleKeyboard
        :hideKeyBoard="hideKeyBoard"
        @onChange="onChange"
        :input="input"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import SimpleKeyboard from 'cpns/SimpleKeyboard'
import moment from 'moment'
import Operator from 'cpns/Operator'
import Audit from 'cpns/Audit'
import DisinfectionSetting from 'cpns/DisinfectionSetting'
import Progress from 'cpns/Progress'
import LiquidHandle from 'cpns/LiquidHandle'
import Setting from 'cpns/Setting'
import Test from 'cpns/Test'
import { storeToRefs } from 'pinia'
import {
  useOperatorStore,
  useWebSocketStore,
  useSettingStore,
  useUserStore,
} from '@/store'
import { logoutJSON, getStateJSON, getAllSettingJSON } from '@/mock/command'

import { useRouter } from 'vue-router'

const router = useRouter()
const webSocketStore = useWebSocketStore()
const settingStore = useSettingStore()
const userStore = useUserStore()
const { socketCommandInstance } = storeToRefs(webSocketStore)
webSocketStore.initCommandSocket()
webSocketStore.initEventSocket()

const showkeyboard = ref(false)

const handleShowKeyBoard = () => {
  showkeyboard.value = true
}

const hideKeyBoard = () => {
  showkeyboard.value = false
}

const showOpertor = ref(true)

const operatorStore = useOperatorStore()
const activeTab = ref(1)
const nowTime = ref('')
const timer = ref(null)

const changeShowOperator = flag => {
  showOpertor.value = flag
}

const input = ref('0')
const onChange = a => {
  input.value = a
}

const changeTab = index => {
  activeTab.value = index
  if ([4, 5].includes(index)) {
    // getAllSetting
    webSocketStore.sendCommandMsg(getAllSettingJSON)
  }
}

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

onMounted(() => {
  getdateTime()
  timer.value = setInterval(() => {
    getdateTime()
  }, 1000)
  setTimeout(() => {
    webSocketStore.sendCommandMsg(getStateJSON)
    webSocketStore.sendCommandMsg(getAllSettingJSON)
  }, 1000)
  document.addEventListener('click', e => {
    let box = document.getElementById('keyboard')
    let room = document.getElementById('room_size')
    if (!box?.contains(e.target) && e.target != room) {
      hideKeyBoard()
    }
  })
})

onBeforeUnmount(() => {
  timer.value = null
})

const handleLogout = () => {
  webSocketStore?.sendCommandMsg(logoutJSON)
  window.location.href = 'http://127.0.0.1/#/login'
}
</script>

<style lang="scss" scoped>
.home_container {
  background: $theme-color;
  width: 1280px;
  height: 800px;
  box-sizing: border-box;
  padding: 30px;
  .key_wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 230px;
  }
  .header_menu {
    width: 100%;
    height: 80px;
    background: #fff;
    box-sizing: border-box;
    padding: 11px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 19px;
    .tab_btn {
      width: 199px;
      height: 58px;
      border-radius: 29px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      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: 20px;
    font-weight: bold;
    font-weight: normal;
    height: 45px;
    letter-spacing: 0.06em;
    color: #ffffff;
    padding: 0 10px;
    position: relative;
    box-sizing: border-box;
    .time_wrap {
      display: flex;
      align-items: center;
      margin-left: 30px;
      .date_wrap {
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-size: 20px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.06em;
        color: #ffffff;
        margin-left: 10px;
        margin-right: 24px;
        .ml {
          margin-left: 10px;
        }
      }
      .min_wrap {
        margin-right: 10px;
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-size: 20px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0.06em;
        color: #ffffff;
        .ml {
          margin-left: 10px;
        }
        .time_txt {
          width: 94px;
        }
      }
    }
    .log_out_btn {
      width: 124px;
      height: 45px;
      border-radius: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #064b81;
      right: 370px;
      top: 0px;
      position: absolute;
      z-index: 1;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 220px;
  height: 220px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  align-items: center;
  justify-content: center;
  .shutdown_text {
    margin-top: 24px;
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.06em;
    color: #fff;
  }
}
</style>