优化初始化，关机页面

6 months ago · e83c86b6c5
6 changed files with 160 additions and 22 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -15,8 +15,6 @@ declare module 'vue' {
    ElFooter: typeof import('element-plus/es')['ElFooter']
    ElHeader: typeof import('element-plus/es')['ElHeader']
    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ErrorModal: typeof import('./src/components/dialogs/ErrorModal.vue')['default']
    Keyboard: typeof import('./src/components/Keyboard.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
--- a/src/assets/close-device.svg
+++ b/src/assets/close-device.svg
@ -0,0 +1,22 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_447_4248)">
+<circle cx="54" cy="50" r="50" fill="url(#paint0_linear_447_4248)"/>
+<path d="M72.0426 33.9687L72.0427 33.9689C81.9858 43.9092 81.9857 60.0883 72.0427 70.031C69.6784 72.4061 66.8664 74.2891 63.7694 75.5711C60.6722 76.8532 57.3514 77.5088 53.9991 77.4999C50.6475 77.5091 47.3273 76.8538 44.2309 75.5718C41.134 74.2897 38.3223 72.4062 35.9587 70.0305C26.0137 60.0878 26.0137 43.9091 35.9591 33.9689L72.0426 33.9687ZM72.0426 33.9687C67.2213 29.1526 60.8158 26.5 53.9997 26.5C47.1837 26.5 40.7756 29.1525 35.9592 33.9688L72.0426 33.9687ZM53.9983 31.25L54.001 31.25C56.7285 31.2426 59.4303 31.7759 61.9501 32.8192C64.4699 33.8624 66.7576 35.3948 68.6808 37.3277L68.6818 37.3286C76.7734 45.4183 76.7734 58.5841 68.6818 66.6738L68.681 66.6746C66.7571 68.6065 64.4692 70.1381 61.9495 71.1809C59.4298 72.2237 56.7282 72.757 54.001 72.7499L53.9984 72.7499C51.2712 72.757 48.5696 72.2237 46.0499 71.1809C43.5302 70.1381 41.2422 68.6065 39.3184 66.6746L39.3176 66.6738C31.226 58.5841 31.226 45.4183 39.3176 37.3286L39.3186 37.3276C41.2417 35.3947 43.5294 33.8622 46.0492 32.819C48.569 31.7757 51.2708 31.2424 53.9983 31.25ZM63.8581 58.4937L57.3597 51.9987L63.8583 45.5036C64.079 45.283 64.254 45.0212 64.3735 44.7329C64.493 44.4447 64.5544 44.1357 64.5544 43.8237C64.5544 43.5117 64.493 43.2028 64.3735 42.9145C64.254 42.6263 64.079 42.3644 63.8583 42.1438C63.6376 41.9232 63.3756 41.7483 63.0872 41.6289C62.7989 41.5096 62.4899 41.4481 62.1778 41.4481C61.8658 41.4481 61.5568 41.5096 61.2684 41.6289C60.9801 41.7483 60.7181 41.9232 60.4974 42.1438L53.9984 48.6393L47.4995 42.1438C47.0537 41.6983 46.4493 41.4481 45.819 41.4481C45.1888 41.4481 44.5843 41.6983 44.1386 42.1438C43.6929 42.5893 43.4424 43.1936 43.4424 43.8237C43.4424 44.4539 43.6929 45.0581 44.1386 45.5036L50.6372 51.9987L44.1386 58.4938C43.6929 58.9393 43.4424 59.5435 43.4424 60.1737C43.4424 60.4857 43.5039 60.7946 43.6234 61.0829C43.7428 61.3711 43.9179 61.633 44.1386 61.8536C44.3593 62.0742 44.6213 62.2491 44.9096 62.3685C45.198 62.4878 45.507 62.5493 45.819 62.5493C46.4493 62.5493 47.0537 62.2991 47.4995 61.8536L53.9984 55.3581L60.4964 61.8525C60.4965 61.8527 60.4966 61.8528 60.4968 61.853C60.7171 62.0743 60.9789 62.25 61.2673 62.3699C61.5559 62.4898 61.8653 62.5516 62.1778 62.5516C62.4904 62.5516 62.7998 62.4898 63.0884 62.3699C63.3764 62.2501 63.638 62.0747 63.8581 61.8537C64.0789 61.6331 64.2541 61.3713 64.3736 61.083C64.4932 60.7947 64.5547 60.4857 64.5547 60.1737C64.5547 59.8616 64.4932 59.5526 64.3736 59.2644C64.2541 58.9762 64.079 58.7143 63.8583 58.4938C63.8582 58.4937 63.8582 58.4937 63.8581 58.4937Z" fill="white" stroke="white"/>
+</g>
+<defs>
+<filter id="filter0_d_447_4248" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.202062 0 0 0 0 0.442832 0 0 0 0 0.789146 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_447_4248"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_447_4248" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_447_4248" x1="30.5" y1="17" x2="84.5" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6DB1F7"/>
+<stop offset="1" stop-color="#317BEB"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/init-device.svg
+++ b/src/assets/init-device.svg
@ -0,0 +1,23 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_446_4242)">
+<circle cx="54" cy="50" r="50" fill="url(#paint0_linear_446_4242)"/>
+<path d="M57.3791 29.6668V24L46.6994 32.2822L57.3791 40.5644V35.5204C61.158 36.2595 64.5868 38.2266 67.1323 41.1158C69.6777 44.005 71.1972 47.6542 71.4544 51.4962C71.7116 55.3381 70.6921 59.1574 68.5545 62.3601C66.4169 65.5627 63.2809 67.9693 59.6342 69.2056C55.9875 70.4419 52.0345 70.4386 48.39 69.1961C44.7454 67.9537 41.6134 65.5419 39.4812 62.3356C37.3489 59.1293 36.3359 55.3084 36.5996 51.4669C36.8632 47.6254 38.3888 43.9787 40.9392 41.0938L36.5801 37.2329C33.1358 41.1068 31.0822 46.019 30.7447 51.1917C30.4072 56.3643 31.8051 61.5017 34.7168 65.7903C37.6285 70.0789 41.8878 73.2736 46.8201 74.8683C51.7523 76.4631 57.0756 76.3668 61.947 74.5947C66.8183 72.8227 70.9593 69.4761 73.714 65.085C76.4688 60.6939 77.6799 55.5093 77.1556 50.3523C76.6313 45.1952 74.4015 40.3604 70.8193 36.6136C67.2372 32.8668 62.5074 30.4222 57.3791 29.6668Z" fill="white"/>
+<path d="M43.8965 52.6771C43.8935 54.0079 44.1531 55.3262 44.6603 56.5565C45.1675 57.7869 45.9124 58.9051 46.8523 59.8472C47.7923 60.7892 48.9088 61.5366 50.1381 62.0466C51.3673 62.5566 52.685 62.8191 54.0158 62.8191C55.3466 62.8191 56.6643 62.5566 57.8935 62.0466C59.1227 61.5366 60.2392 60.7892 61.1792 59.8472C62.1191 58.9051 62.864 57.7869 63.3713 56.5565C63.8785 55.3262 64.138 54.0079 64.135 52.6771C64.138 51.3463 63.8785 50.028 63.3713 48.7977C62.864 47.5673 62.1191 46.4491 61.1792 45.507C60.2392 44.565 59.1227 43.8176 57.8935 43.3076C56.6643 42.7977 55.3466 42.5352 54.0158 42.5352C52.685 42.5352 51.3673 42.7977 50.1381 43.3076C48.9088 43.8176 47.7923 44.565 46.8523 45.507C45.9124 46.4491 45.1675 47.5673 44.6603 48.7977C44.1531 50.028 43.8935 51.3463 43.8965 52.6771Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_446_4242" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.906392 0 0 0 0 0.608473 0 0 0 0 0.253262 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_446_4242"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_446_4242" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_446_4242" x1="30.5" y1="17" x2="84.5" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F6C058"/>
+<stop offset="1" stop-color="#F29B42"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/user-cancel.svg
+++ b/src/assets/user-cancel.svg
@ -0,0 +1,22 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_447_4258)">
+<circle cx="54" cy="50" r="50" fill="url(#paint0_linear_447_4258)"/>
+<path d="M54 45.1119L71.1119 28L76 32.8881L58.8881 50L76 67.1119L71.1119 72L54 54.8881L36.8881 72L32 67.1119L49.1119 50L32 32.8881L36.8881 28L54 45.1119Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_447_4258" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.877278 0 0 0 0 0.28742 0 0 0 0 0.421121 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_447_4258"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_447_4258" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_447_4258" x1="30.5" y1="17" x2="84.5" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F08564"/>
+<stop offset="1" stop-color="#EA467D"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/assets/user-logout.svg
+++ b/src/assets/user-logout.svg
@ -0,0 +1,22 @@
+<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_447_4253)">
+<circle cx="54" cy="50" r="50" fill="url(#paint0_linear_447_4253)"/>
+<path d="M71.3306 29.3781C76.8322 34.3067 79.982 41.3379 80 48.7231C80 63.3028 68.1928 75 53.5001 75C38.8072 75 27 63.298 27 48.7267C27.0179 41.3414 30.1689 34.3103 35.6694 29.3816C36.8812 28.6627 38.5656 28.4204 40.2499 29.6167C41.9391 31.0475 42.1807 32.9597 40.9689 34.156C36.8812 37.7371 34.2302 42.7531 34.2302 48.7231C34.2302 59.2366 42.8996 67.8343 53.5001 67.8343C64.1003 67.8343 72.7696 59.2366 72.7696 48.7231C72.7696 42.9953 70.1186 37.737 66.031 34.156C65.5429 33.4365 65.0656 31.5284 66.75 29.6131C67.9691 28.3229 69.9872 28.2195 71.3306 29.3781ZM50.1838 25.5853V25.5811V48.4624C50.1838 50.3698 51.8681 52.0393 53.7993 52.0393C55.7229 52.0393 57.4108 50.3698 57.4108 48.4624V25.5811C57.4108 23.673 55.7264 22 53.7956 22C51.8717 22 50.1838 23.673 50.1838 25.5853Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_447_4253" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.425155 0 0 0 0 0.351313 0 0 0 0 0.909232 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_447_4253"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_447_4253" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_447_4253" x1="30.5" y1="17" x2="84.5" y2="100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AC85F8"/>
+<stop offset="1" stop-color="#7C6CF7"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/pages/Index/Index.vue
+++ b/src/pages/Index/Index.vue
@ -1,9 +1,26 @@
 <template>
  <div id="index-container">
-    <div class="loading-overlay" v-if="isLoading">
-      <div class="loading-content">
-        <div class="loading-spinner"></div>
-        <span class="loading-text">{{ shutdownMessage }}</span>
+    <div class="loading-overlay" v-if="isLoading" style="display: block;padding-top:40%">
+      <div class="loading-device">
+        <div class="loading-content" @click="onInitDevice">
+          <img :src="InitSvg" alt="Icon" width="100" />
+          <div style="color: #f5ce5f;">初始化设备</div>
+        </div>
+        <div class="loading-content" @click="onCloseDevice">
+            <img :src="CloseSvg" alt="Icon" width="100" />
+            <div style="color:rgb(42 143 229)">关闭设备</div>
+        </div>
+      </div>
+      <br/>
+      <div class="loading-user" style="margin-top:50px">
+        <div class="loading-content" @click="onLogout">
+          <img :src="LogoutSvg" alt="Icon" width="100" />
+          <div style="color: #9358df;">注销用户</div>
+        </div>
+        <div class="loading-content" @click="isLoading =false">
+          <img :src="CancelSvg" alt="Icon" width="100" />
+          <div style="color: #ea8864;">取消</div>
+        </div>
      </div>
    </div>
    <el-header class="nav-bar">
@ -84,8 +101,9 @@

    <!-- 底部操作信息 -->
    <el-footer class="footer-info">
-      <el-dropdown placement="top-start" style="margin-left: -10px">
-        <div class="user-card">
+
+      <el-dropdown placement="top-start" style="margin-left:-10px">
+        <div class="user-card"  @click="onTouchUserStart">
          <img class="user-logo" src="@/assets/Index/user.svg" />
          <div class="user-name">
            {{
@ -95,10 +113,10 @@
            }}
          </div>
        </div>
-        <template #dropdown>
-          <el-dropdown-menu style="width: 100px">
-            <el-dropdown-item>
-              <div @click="onInitDevice" style="display: flex">
+        <!-- <template #dropdown>
+          <el-dropdown-menu style="width:100px">
+            <el-dropdown-item >
+              <div @click="onInitDevice" style="display: flex;">
                <img :src="InitSvg" alt="Icon" width="15" />
                <div class="pd-5">初始化</div>
              </div>
@ -116,7 +134,7 @@
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
-        </template>
+        </template> -->
      </el-dropdown>

      <div class="equipment-status" @click="showRecentMsgDialog = true">
@ -377,9 +395,10 @@ import { useRunningStore } from '@/store/modules/running'
 import { formatDate } from '@/utils/formDate'
 import { eMessage } from './utils'

-import InitSvg from '@/assets/init.svg'
-import CloseSvg from '@/assets/close.svg'
-import LogoutSvg from '@/assets/logout.svg'
+import InitSvg from '@/assets/init-device.svg'
+import CloseSvg from '@/assets/close-device.svg'
+import LogoutSvg from '@/assets/user-logout.svg'
+import CancelSvg from '@/assets/user-cancel.svg'

 const selectedTab = ref(sessionStorage.getItem('selectedTab') || '常规')
 const lineWidth = ref(0)
@ -536,6 +555,7 @@ const onLogout = () => {
      path: '/login',
    })
    sessionStorage.setItem('token', '')
+    isLoading.value = false;
  })
 }

@ -562,20 +582,35 @@ const saveIdInfo = async () => {
    idCardInserted.value = false
  }
 }
-
+let isLoading = ref(false)
 //初始化设备
 const onInitDevice = () => {
  eventBus.emit('initDevice')
+  isLoading.value = false;
+}
+
+const onTouchUserStart = () => {
+  isLoading.value = true;
+  // touchTime = setTimeout(()=>{
+  //   //遮罩层显示 关机、初始化等功能
+  //   isLoading.value = true;
+  // },2000)
 }

+// const onTouchUserEnd = () => {
+//   clearTimeout(touchTime)
+// }
+
+
 //关机
-let isLoading = ref(false)
-const onCloseDevice = () => {
+
+const onCloseDevice = ()=> {
  // ElMessageBox.alert()
  //检查设备状态 设备运行时不可关机
-  const deviceState = deviceStore.deviceState.workState
-  if (deviceState == 'WORKING') {
-    showWarnModal.value = true
+  isLoading.value = false;
+  const deviceState = deviceStore.deviceState.workState;
+  if(deviceState == 'WORKING'){
+    showWarnModal.value = true;
    WarnMessage.value = '设备正在运行中，不能进行关机操作'
    return
  }
@ -1212,6 +1247,9 @@ watch(
  flex-direction: column;
  align-items: center;
  gap: 20px;
+  div{
+    font-size: 40px;
+  }
 }

 .loading-spinner {
@ -1236,4 +1274,17 @@ watch(
  border-radius: 3px;
  overflow: hidden;
 }
+
+.loading-device{
+  display: flex;
+  margin-left: 22%;
+  gap: 150px;
+}
+
+.loading-user{
+  display: flex;
+  margin-left: 24%;
+  gap: 12rem;
+}
+  
 </style>