nuclear-detection-frontend/src/pages/index.vue

<template>
  <div class="home_container">
    <div class="header_container">
      <svg
        @click="clickLogo"
        class="logo"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="100"
        height="41.48149108886719"
        viewBox="0 0 100 41.48149108886719"
      >
        <defs>
          <pattern
            x="0"
            y="0"
            width="100"
            height="41.48149108886719"
            patternUnits="userSpaceOnUse"
            id="master_svg0_1_3167"
          >
            <image
              x="-0.000011580330983917975"
              y="0"
              width="100.00002316066197"
              height="41.48149108886719"
              xlink:href="data:image/png;base64,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
            />
          </pattern>
        </defs>
        <g>
          <rect
            x="0"
            y="0"
            width="100"
            height="41.48149108886719"
            rx="0"
            fill="url(#master_svg0_1_3167)"
            fill-opacity="1"
          />
        </g>
      </svg>
      <div class="menu_list">
        <div class="menu" @click="clickTaskTab">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="26"
            height="26"
            viewBox="0 0 26 26"
          >
            <g>
              <path
                d="M3.71475,0L22.2853,0C24.3368,0,26,1.66316,26,3.71475L26,22.2852C26,24.3368,24.3368,26,22.2852,26L3.71475,26C1.66316,26,0,24.3368,0,22.2852L0,3.71475C0,1.66316,1.66316,0,3.71475,0ZM22.2878,24.1444C23.3131,24.1466,24.1452,23.3156,24.1444,22.2903L24.1444,3.71653C24.1457,2.68992,23.3144,1.85669,22.2878,1.85565L3.71905,1.85565C2.69109,1.85611,1.8575,2.68858,1.85565,3.71653L1.85565,22.2903C1.85565,22.7869,2.05107,23.2511,2.40227,23.6023C2.75348,23.9536,3.22243,24.1444,3.71905,24.1444L22.2878,24.1444ZM7.19905,9.83403L10.2578,6.77537C10.6209,6.41722,11.2049,6.41921,11.5655,6.77984C11.9261,7.14046,11.9281,7.72451,11.5699,8.08753L7.85513,11.8023C7.49279,12.1646,6.90531,12.1646,6.54297,11.8023L4.68565,9.94485C4.32301,9.58256,4.32286,8.99484,4.68533,8.63237C5.0478,8.2699,5.63552,8.27004,5.99781,8.63269L7.19905,9.83403ZM13.6999,8.35581L21.1294,8.35581C21.6418,8.35581,22.0572,8.77121,22.0572,9.28363C22.0572,9.79605,21.6418,10.2115,21.1294,10.2115L13.6999,10.2115C13.1875,10.2115,12.7721,9.79605,12.7721,9.28363C12.7721,8.77121,13.1875,8.35581,13.6999,8.35581ZM4.87782,16.7178C4.87782,14.9231,6.33267,13.4678,8.12782,13.4678C9.92297,13.4678,11.3778,14.9231,11.3778,16.7178C11.3778,18.5126,9.92255,19.9678,8.12782,19.9678C6.33309,19.9678,4.87782,18.5126,4.87782,16.7178ZM6.92075,17.4148C7.37884,18.2089,8.46548,18.3524,9.11404,17.7045C9.37661,17.4436,9.52384,17.0885,9.52291,16.7183C9.52291,15.8014,8.65347,15.134,7.76802,15.3711C6.88243,15.6082,6.46266,16.6207,6.92075,17.4148ZM13.6999,15.7889L21.1294,15.7889C21.6418,15.7889,22.0572,16.2043,22.0572,16.7167C22.0572,17.2291,21.6418,17.6445,21.1294,17.6445L13.6999,17.6445C13.1875,17.6445,12.7721,17.2291,12.7721,16.7167C12.7721,16.2043,13.1875,15.7889,13.6999,15.7889Z"
                fill-rule="evenodd"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="title">任务管理中心</p>
        </div>
        <div
          class="menu"
          @click="accountStore.changePage(2)"
          v-if="role == 'ROLE_ADMIN'"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="30.133363723754883"
            height="25.885509490966797"
            viewBox="0 0 30.133363723754883 25.885509490966797"
          >
            <g>
              <path
                d="M2.16892,25.8855L24.069,25.8855C25.1625,25.8855,26.2349,24.7739,26.2319,23.6413L26.2439,8.84358L26.3523,8.73556L26.2955,8.67851L29.7384,5.03974C30.2655,4.48244,30.2655,3.58776,29.7354,3.04252L27.2441,0.418722C26.9911,0.153631,26.6296,0,26.253,0C25.8765,0,25.515,0.153631,25.2619,0.418722L20.1921,5.74162L2.16591,5.76271C0.966979,5.76271,0,6.99177,0,8.00996L0,23.6383C0,24.2076,0.250029,24.783,0.686826,25.2198C1.11157,25.6445,1.65079,25.8855,2.16892,25.8855ZM25.045,8.33916L25.0451,8.24794L28.8648,4.20229C28.9491,4.11192,28.9521,3.95527,28.8708,3.87394L28.8648,3.86792L26.3705,1.24412C26.3313,1.20797,26.2741,1.20496,26.253,1.20496C26.2289,1.20496,26.1747,1.20797,26.1355,1.25014L21.3025,6.32475L21.3336,6.35593L14.7003,12.9952C14.6732,13.0193,14.6582,13.0495,14.6491,13.0796L14.6401,13.1127L13.5508,16.25C14.7659,16.2318,15.9935,16.1717,16.5169,16.0436C16.7036,15.9984,16.8633,15.9593,17.0019,15.9262C17.276,15.8599,17.5381,15.7966,17.5863,15.7665Q17.5923,15.7635,17.6043,15.7514L17.6134,15.7424L25.045,8.33916ZM19.0383,6.94821L13.8508,12.1427C13.6701,12.3205,13.5436,12.5404,13.4833,12.7814L12.2743,16.2546L12.2634,16.2545L12.2423,16.2545L12.242,16.3472L11.9922,17.065L12.24,17.1509L12.2393,17.4595L12.2513,17.4595C12.3688,17.4625,12.5224,17.4625,12.7062,17.4625C13.7997,17.4625,15.9174,17.4354,16.806,17.2185C16.9898,17.1703,17.1495,17.1341,17.282,17.101C17.9146,16.9504,18.1797,16.8841,18.4629,16.5949L25.0436,10.0392L25.033,23.6353C25.033,24.1293,24.4606,24.6775,24.072,24.6775L2.17194,24.6775C1.79237,24.6775,1.21098,24.2106,1.21098,23.6353L1.21098,8.00695C1.21098,7.58521,1.71706,6.96466,2.17194,6.96466L19.0383,6.94821ZM20.4996,19.493L5.75994,19.493C5.53703,19.493,5.35327,19.3093,5.35327,19.0864L5.35327,18.6948C5.35327,18.4718,5.53703,18.2881,5.75994,18.2881L20.4996,18.2881C20.7225,18.2881,20.9063,18.4718,20.9063,18.6948L20.9063,19.0864C20.9063,19.3093,20.7225,19.493,20.4996,19.493Z"
                fill-rule="evenodd"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="title">发布任务</p>
        </div>
        <div
          class="menu"
          @click="accountStore.changePage(3)"
          v-if="role == 'ROLE_ADMIN'"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="26.02972984313965"
            height="26.029712677001953"
            viewBox="0 0 26.02972984313965 26.029712677001953"
          >
            <g>
              <path
                d="M17.867,6.55125C17.867,2.94281,14.9242,0,11.2808,0C7.63729,0,4.69448,2.94281,4.69448,6.55125C4.69448,8.54815,5.60535,10.44,7.21688,11.7012L7.63729,12.0165C7.67232,12.0515,7.67232,12.0865,7.67232,12.1216C7.67232,12.1566,7.63729,12.1916,7.60225,12.1916L7.11178,12.4018C2.80267,14.1185,0,18.1823,0,22.7717L0,25.0839C0,25.5043,0.350334,25.8196,0.770735,25.8196L13.1726,25.8196C12.8222,25.3642,12.5069,24.8387,12.2617,24.3132L1.64657,24.3132C1.5765,24.3132,1.54147,24.2782,1.54147,24.2081L1.54147,22.7367C1.54147,17.7269,5.32508,13.593,10.3349,13.1025L11.4209,13.1025C12.3668,13.0324,14.0484,12.7872,14.9242,12.0165L15.3446,11.7012C16.9562,10.44,17.867,8.54815,17.867,6.55125ZM11.2808,11.5961C8.47809,11.5961,6.20091,9.31889,6.20091,6.55125C6.20091,3.78361,8.47809,1.50644,11.2808,1.50644C14.0834,1.50644,16.3606,3.78361,16.3606,6.55125C16.3606,9.31889,14.0834,11.5961,11.2808,11.5961ZM25.8896,20.8798C25.8195,21.3352,25.5042,21.6505,25.1539,21.6505L25.1539,21.6856L25.0838,21.6856C24.243,21.6856,23.5424,22.3862,23.5424,23.227C23.5424,23.4022,23.5774,23.6124,23.6825,23.8226C23.8577,24.243,23.7526,24.7335,23.3672,24.9787L21.6506,25.9246C21.5104,25.9947,21.3703,26.0297,21.2302,26.0297C20.9499,26.0297,20.6346,25.9246,20.4594,25.7144C20.2842,25.5042,19.6536,24.9437,19.1982,24.9437C18.7428,24.9437,18.1472,25.4341,17.937,25.6794C17.6217,25.9947,17.1663,26.0998,16.7809,25.9246L15.0993,24.9787C14.7139,24.6984,14.5738,24.208,14.749,23.7876C14.784,23.6825,14.8891,23.4022,14.8891,23.192C14.8891,22.3512,14.1884,21.6505,13.3476,21.6505L13.2776,21.6505C12.8922,21.6505,12.6119,21.3703,12.5068,20.8798Q12.3667,20.1441,12.3667,19.5485Q12.3667,18.953,12.5068,18.2173C12.5769,17.7618,12.8922,17.4465,13.2425,17.4465L13.3126,17.4465C14.1534,17.4465,14.8541,16.7459,14.8541,15.9051Q14.8541,15.6248,14.7139,15.3095C14.5388,14.8891,14.6789,14.3986,15.0292,14.1534L16.7809,13.1724L16.8159,13.1724C17.2013,13.0323,17.6567,13.1024,17.972,13.4177C18.1472,13.5928,18.7428,14.1183,19.1982,14.1183C19.6186,14.1183,20.2142,13.6279,20.4244,13.4177C20.7397,13.1024,21.1951,13.0323,21.5805,13.1724L23.2971,14.1183C23.6825,14.3986,23.8226,14.8891,23.6475,15.3095C23.6475,15.3445,23.5073,15.6248,23.5073,15.9051C23.5073,16.7459,24.208,17.4465,25.0488,17.4465L25.1189,17.4465C25.5042,17.4465,25.7845,17.7618,25.8896,18.2173C25.9246,18.3224,26.0297,19.023,26.0297,19.5485C26.0297,19.7587,25.9947,20.1791,25.8896,20.8448L25.8896,20.8798ZM24.8036,20.5295L24.8036,20.4594C24.8386,20.2492,24.8736,19.8638,24.8736,19.5485C24.8736,19.2332,24.8386,18.8479,24.8036,18.6377L24.8036,18.5676L24.7335,18.5676C23.4022,18.3924,22.3863,17.2714,22.3863,15.9051C22.3863,15.6248,22.4213,15.3796,22.5264,15.0993L22.5614,15.0292L21.2302,14.2935L21.1951,14.3285C21.09,14.4336,20.9149,14.5738,20.7047,14.7139C20.1792,15.0642,19.6887,15.2394,19.2333,15.2394C18.7778,15.2394,18.2873,15.0292,17.7618,14.6789C17.5166,14.5037,17.3414,14.3285,17.2714,14.2585L17.2363,14.2234L15.835,14.9942L15.87,15.1343C15.9401,15.3095,16.0102,15.6248,16.0102,15.9401C16.0102,17.2714,14.9942,18.4275,13.6629,18.6026L13.5929,18.6026L13.5929,18.6727C13.5578,19.023,13.5228,19.3383,13.5228,19.5836C13.5228,19.8989,13.5578,20.2142,13.5929,20.4944L13.5929,20.5645L13.6629,20.5645C14.9942,20.7397,16.0102,21.8607,16.0102,23.227C16.0102,23.5423,15.9401,23.8226,15.87,24.0328L15.835,24.1029L17.1663,24.7685L17.2013,24.7335C17.3414,24.5933,17.5166,24.4532,17.6918,24.3131C18.2173,23.9627,18.7428,23.7525,19.1982,23.7525C19.6537,23.7525,20.1792,23.9627,20.7047,24.3481C20.9499,24.5233,21.1251,24.6984,21.1951,24.7685L21.2302,24.8035L22.5614,24.0678L22.5264,23.9978C22.4563,23.8226,22.3863,23.5073,22.3863,23.192C22.3863,21.8607,23.4022,20.7046,24.7335,20.5295L24.8036,20.5295ZM19.1632,17.0612C17.7969,17.0612,16.6759,18.1822,16.6759,19.5485C16.6759,20.9148,17.7969,22.0359,19.1632,22.0359C20.5295,22.0359,21.6506,20.9148,21.6506,19.5485C21.6506,18.1822,20.5295,17.0612,19.1632,17.0612ZM20.1091,20.4944C19.8639,20.7397,19.5136,20.8798,19.1632,20.8798C18.4275,20.8798,17.832,20.2842,17.832,19.5485C17.867,18.8128,18.4626,18.2523,19.1632,18.2523C19.8639,18.2523,20
                fill-rule="evenodd"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="title">用户管理</p>
        </div>
        <!-- <div class="menu" @click="accountStore.changePage(4)" v-if="role == 'ROLE_ADMIN'">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="26.271926879882812"
            height="21.392486572265625"
            viewBox="0 0 26.271926879882812 21.392486572265625"
          >
            <g>
              <path
                d="M19.2738,3.31288L23.8579,3.31288C25.1907,3.31288,26.2719,4.39406,26.2719,5.72692L26.2719,18.9784C26.2719,20.3113,25.1907,21.3925,23.8579,21.3925L2.41404,21.3925C1.08118,21.3925,0,20.3113,0,18.9784L0,5.72692C0,4.39406,1.08118,3.31288,2.41404,3.31288L6.99814,3.31288C7.2113,3.31288,7.38336,3.14082,7.38336,2.92766L7.38336,2.41404C7.38336,1.08118,8.46454,0,9.7974,0L16.4745,0C17.8074,0,18.8886,1.08118,18.8886,2.41404L18.8886,2.92766C18.8886,3.14082,19.0606,3.31288,19.2738,3.31288ZM23.8579,19.8516C24.3407,19.8516,24.7311,19.4613,24.7311,18.9784L24.7311,5.72692C24.7311,5.24411,24.3407,4.85376,23.8579,4.85376L18.1181,4.85376C17.6918,4.85376,17.3477,4.50963,17.3477,4.08332L17.3477,2.41404C17.3477,1.93123,16.9573,1.54088,16.4745,1.54088L9.7974,1.54088C9.31459,1.54088,8.92424,1.93123,8.92424,2.41404L8.92424,4.08332C8.92424,4.50963,8.58011,4.85376,8.1538,4.85376L2.41404,4.85376C1.93123,4.85376,1.54087,5.24411,1.54087,5.72692L1.54087,18.9784C1.54087,19.4613,1.93123,19.8516,2.41404,19.8516L23.8579,19.8516ZM21.3538,9.11679C22.2615,9.11679,22.9974,8.38093,22.9974,7.47319C22.9974,6.56545,22.2615,5.82959,21.3538,5.82959C20.4461,5.82959,19.7102,6.56545,19.7102,7.47319C19.7102,8.38093,20.4461,9.11679,21.3538,9.11679ZM9.09363,8.27185C10.1799,7.18553,11.6258,6.58716,13.1615,6.58716C14.6973,6.58716,16.1431,7.18553,17.2295,8.27185C18.3158,9.35817,18.9141,10.804,18.9141,12.3398C18.9141,13.8755,18.3158,15.3214,17.2295,16.4077C16.1431,17.494,14.6973,18.0924,13.1615,18.0924C11.6258,18.0924,10.1799,17.494,9.09363,16.4077C8.00731,15.3214,7.40894,13.8755,7.40894,12.3398C7.40894,10.804,8.00731,9.35817,9.09363,8.27185ZM8.94981,12.3398C8.94981,14.6613,10.84,16.5515,13.1615,16.5515C15.4831,16.5515,17.3733,14.6613,17.3733,12.3398C17.3733,10.0182,15.4831,8.12803,13.1615,8.12803C10.84,8.12803,8.94981,10.0182,8.94981,12.3398Z"
                fill-rule="evenodd"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="title">相机调试</p>
        </div> -->
        <div
          class="menu"
          @click="accountStore.changePage(5)"
          v-if="role == 'ROLE_ADMIN'"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="30"
            height="21.657630920410156"
            viewBox="0 0 30 21.657630920410156"
          >
            <g>
              <path
                d="M29.1848,20.0272L26.9564,20.0272L26.9564,17.9348C26.9564,17.9315,26.9553,17.9281,26.9553,17.9248C26.9547,17.8779,26.95,17.8309,26.9413,17.784C26.9393,17.7739,26.9369,17.7639,26.9349,17.7538C26.9322,17.7414,26.9302,17.729,26.9269,17.717L23.8118,6.47316L23.8118,3.30077C23.8118,2.85059,23.4468,2.48555,22.9966,2.48555L17.4825,2.48555C17.0323,2.48555,16.6673,2.85059,16.6673,3.30077L16.6673,6.47316L16.3787,7.51464L15.5729,4.88261L15.5729,0.81522C15.5729,0.36504,15.2078,0,14.7576,0L7.81727,0C7.36709,0,7.00206,0.36504,7.00206,0.81522L7.00206,4.88294L3.07917,17.6962C3.07348,17.7153,3.06945,17.7344,3.0651,17.7538C3.06308,17.7622,3.06074,17.7703,3.05906,17.7786C3.04968,17.8259,3.04565,17.8735,3.04465,17.9208C3.04465,17.9255,3.04331,17.9301,3.04331,17.9348L3.04331,20.0272L0.815214,20.0272C0.365036,20.0272,0,20.3922,0,20.8424C0,21.2926,0.365036,21.6576,0.815214,21.6576L29.1848,21.6576C29.635,21.6576,30,21.2926,30,20.8424C30,20.3922,29.635,20.0272,29.1848,20.0272ZM8.59662,5.24362C8.62041,5.16619,8.63248,5.08574,8.63248,5.00496L8.63248,1.63044L13.9428,1.63044L13.9428,5.00495C13.9428,5.08574,13.9548,5.16619,13.9786,5.24362L17.6143,17.1196L4.96067,17.1196L8.59662,5.24362ZM17.9012,20.0272L4.67407,20.0272L4.67407,18.7501L17.9012,18.7501L17.9012,20.0272ZM17.267,10.4162L18.2682,6.80233C18.288,6.7316,18.2977,6.65819,18.2977,6.58478L18.2977,4.11666L22.1814,4.11666L22.1814,5.95158L20.252,5.95158C19.9818,5.95158,19.7629,6.17047,19.7629,6.44064C19.7629,6.71082,19.9818,6.92971,20.252,6.92971L22.2461,6.92971L25.0692,17.12L19.3191,17.12L17.267,10.4162ZM25.3259,20.0272L19.5316,20.0272L19.5316,18.7501L25.3263,18.7501L25.3263,20.0272L25.3259,20.0272ZM10.4751,11.817C10.5488,11.6893,10.6491,11.5867,10.7644,11.5116L9.94045,10.0847C9.5708,10.307,9.26393,10.6199,9.04881,10.9937C8.82522,11.3812,8.71494,11.8026,8.70723,12.2206L10.3551,12.2206C10.3625,12.0828,10.4014,11.9447,10.4751,11.817ZM10.8495,13.077L10.0259,14.5033C10.8193,14.9415,11.7485,14.9136,12.4917,14.5043L11.6677,13.077C11.4184,13.2034,11.1147,13.2118,10.8495,13.077ZM12.5768,10.0853L11.7536,11.5116C12.0026,11.6739,12.1474,11.941,12.1628,12.2206L13.8107,12.2206C13.7933,11.3722,13.3531,10.5533,12.5768,10.0853ZM10.93,12.8394C11.2444,13.0211,11.6466,12.9131,11.8283,12.5987C12.01,12.2843,11.9021,11.882,11.5876,11.7003C11.2732,11.5187,10.871,11.6266,10.6893,11.941C10.5076,12.2555,10.6155,12.6577,10.93,12.8394ZM13.0887,9.1005C12.2423,8.6121,11.2561,8.48238,10.3119,8.73479C9.36758,8.98787,8.57852,9.59325,8.08979,10.44C7.08083,12.1874,7.68185,14.4299,9.42926,15.4389C9.99307,15.7644,10.6189,15.9306,11.2531,15.9306C11.5709,15.9306,11.891,15.8887,12.2061,15.8043C13.1504,15.5512,13.9394,14.9458,14.4281,14.0994C15.4368,12.352,14.8361,10.1095,13.0887,9.1005ZM13.8633,13.7736C13.4618,14.4691,12.8131,14.9669,12.0371,15.1748C11.2615,15.3822,10.451,15.276,9.75508,14.8741C9.05953,14.4725,8.56176,13.8239,8.35393,13.0482C8.1461,12.2725,8.2527,11.462,8.65427,10.7665C9.05585,10.0709,9.70446,9.57314,10.4805,9.36531C10.7396,9.29592,11.0024,9.26139,11.2635,9.26139C11.7844,9.26139,12.2989,9.39816,12.7622,9.66565C14.1985,10.4946,14.6923,12.3372,13.8633,13.7736Z"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="title">基本信息</p>
        </div>
      </div>
      <t-popup class="placement bottom center" overlayStyle>
        <template v-slot:content>
          <t-button @click="logout" size="large">退出登录</t-button>
        </template>
        <div class="account_wrap">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            fill="none"
            version="1.1"
            width="26"
            height="26.857648849487305"
            viewBox="0 0 26 26.857648849487305"
          >
            <g>
              <path
                d="M9.8113,14.263C7.26753,13.0661,5.50684,10.4817,5.50684,7.48634C5.50684,3.35175,8.86161,0,12.9999,0C17.1383,0,20.493,3.35175,20.493,7.48634C20.4902,10.4813,18.7289,13.0649,16.185,14.262C21.8249,15.6812,26,20.7823,26,26.8576L24.5659,26.8576C24.5659,20.4757,19.3877,15.3022,13,15.3022C6.61232,15.3022,1.43409,20.4757,1.43409,26.8576L0,26.8576C0,20.7836,4.17323,15.6834,9.8113,14.263ZM6.94092,7.48634C6.94092,4.14306,9.65364,1.43279,12.9999,1.43279C16.3446,1.43674,19.055,4.1447,19.059,7.48634C19.059,10.8296,16.3462,13.5399,12.9999,13.5399C9.65364,13.5399,6.94092,10.8296,6.94092,7.48634Z"
                fill-rule="evenodd"
                fill="#FFFFFF"
                fill-opacity="1"
              />
            </g>
          </svg>
          <p class="username">{{ nickname }}</p>
          <div class="triangle"></div>
        </div>
      </t-popup>
    </div>
    <div class="main_content" v-if="accountStore.activePage == 0">
      <div class="two_content_container">
        <Image />
        <Excel :excelData="taskStore.excelData" />
      </div>
      <div class="bottom_operation_container ignore-height">
        <div
          :class="
            taskStore.currentTaskId == null ? 'auto_btn cant_btn' : 'auto_btn'
          "
          @click="startAutoCheck"
        >
          <p class="title">
            {{ taskStore.checkStatus ? '[暂停]自动核查' : '[开启]自动核查' }}
          </p>
          <div class="icon_box">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              fill="none"
              version="1.1"
              width="38.99494552612305"
              height="52"
              viewBox="0 0 38.99494552612305 52"
            >
              <g>
                <path
                  d="M3.57351,0C1.43895,0,0,1.35711,0,3.37574L0,48.3583C0,50.4656,1.7663,52,4.19411,52C5.35345,52,6.43096,51.6386,7.18795,50.9975L37.5083,29.9043L37.5901,29.8292C38.4971,28.9972,38.9949,27.8925,38.9949,26.7127C38.9949,25.5329,38.4971,24.4281,37.5901,23.5961L37.4469,23.4801L7.21523,1.32302C6.28775,0.518295,4.87608,0.0000010406,3.57351,0Z"
                  fill="#FFFFFF"
                  fill-opacity="1"
                />
              </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div class="task_container" v-if="accountStore.activePage == 1">
      <Task />
    </div>
    <div
      class="publish_container"
      v-if="accountStore.activePage == 2 && role == 'ROLE_ADMIN'"
    >
      <Publish />
    </div>
    <div
      class="task_container"
      v-if="accountStore.activePage == 3 && role == 'ROLE_ADMIN'"
    >
      <User />
    </div>
    <div
      class="task_container"
      v-if="accountStore.activePage == 4 && role == 'ROLE_ADMIN'"
    >
      <Debug />
    </div>
    <div
      class="task_container"
      v-if="accountStore.activePage == 5 && role == 'ROLE_ADMIN'"
    >
      <Nuclear />
    </div>
  </div>
</template>

<script setup>
import { useAccountStore, useTaskStore } from '@/store'
import Cookie from '@/utils/cookie'
import { ref, onMounted, computed } from 'vue'
import Excel from 'cpns/Excel'
import Nuclear from 'cpns/Nuclear'
import Image from 'cpns/Image'
import Task from 'cpns/Task'
import Publish from 'cpns/Publish'
import User from 'cpns/User'
import Debug from 'cpns/Debug'
import { startAutoCheckApi, breakOffAutoCheckApi } from '@/api'
const accountStore = useAccountStore()
const taskStore = useTaskStore()

const startAutoCheck = async () => {
  if (taskStore.checkStatus) {
    taskStore.updateCheckStatus(false)
    const res = await breakOffAutoCheckApi(taskStore.currentTaskId)
  } else {
    // 更改核查按钮状态
    taskStore.updateCheckStatus(true)
    // 调用开始核查接口
    const res = await startAutoCheckApi(taskStore.currentTaskId)
  }
}

const role = computed(() => {
  return Cookie.getCookie('r')
})

const nickname = computed(() => {
  return Cookie.getCookie('u')
})

const clickLogo = () => {
  accountStore.changePage(0)
  taskStore.updateType(0)
}

const clickTaskTab = () => {
  accountStore.changePage(1)
  taskStore.updateType(1)
}

const logout = () => {
  accountStore.clearLoginInfo()
  Cookie.clearAllCookie()
  window.location.href = '/login'
}

onMounted(async () => {
  // taskStore.getExcelList(1)
})
</script>

<style lang="scss" scoped>
.home_container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 1200px;
  .header_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    background: #4c5ae0;
    .logo {
      cursor: pointer;
    }
    .menu_list {
      flex: 1;
      margin-left: 35px;
      border-left: 1px solid #ffffff;
      padding: 2px 38px;
      display: flex;
      align-items: center;
      .menu {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-right: 50px;
        &:last-child {
          margin-right: 0;
        }
        .title {
          font-size: 18px;
          font-weight: normal;
          letter-spacing: 0.07em;
          color: #ffffff;
          margin-left: 15px;
        }
      }
    }
    .account_wrap {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: 0.04em;
      cursor: pointer;
      color: #ffffff;
      .user_icon {
        font-size: 26px;
      }
      .username {
        margin: 0 18px;
      }
      .triangle {
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-top-color: #fff;
        margin-top: 8px;
      }
    }
  }
  .main_content {
    flex: 1;
    padding: 30px;
    background: #f4f2f8;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    .two_content_container {
      // flex: 1;
      height: calc(100vh - 250px);
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(1, 1fr);
      column-gap: 30px;
      box-sizing: border-box;
    }

    .bottom_operation_container {
      width: 100%;
      height: 120px;
      margin-top: 30px;

      box-sizing: border-box;
      display: flex;
      align-items: center;
      .auto_btn {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        padding: 12px 28px;
        border-radius: 6px;
        background: #3662ec;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
        .title {
          font-size: 28px;
          font-weight: bold;
          letter-spacing: 0.07em;
          color: #ffffff;
          margin-right: 26px;
          white-space: nowrap;
        }
        .icon_box {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #6573fb;
          width: 100px;
          height: 100px;
          border-radius: 6px;
        }
      }
      .cant_btn {
        background: #e8e8e8;
        .icon_box {
          background: #e2e2e2;
        }
      }
    }
    @media screen and (max-height: 1000px) {
      .bottom_operation_container {
        margin-top: 10px;
      }
    }
  }
  .task_container {
    flex: 1;
    padding: 30px;
    background: #f4f2f8;
    box-sizing: border-box;
  }
  .publish_container {
    flex: 1;
    padding: 30px 700px;
    background: #f4f2f8;
    box-sizing: border-box;
  }
}
</style>