log close

src/components/Operator.vue

@@ -419,6 +419,7 @@
     <!-- <WarnModal /> -->
     <LogPicker
       v-if="logVisible"
+      :hiddenLogVisible="hiddenLogVisible"
       :changeLogVal="changeLogVal"
       :logVal="logVal"
     />
@@ -520,6 +521,10 @@ onMounted(() => {
     webSocketStore.sendCommandMsg(getStateJSON)
   }, 1000)
 })
+
+const hiddenLogVisible = () => {
+  logVisible.value = false
+}
 onUnmounted(() => {
   timer.value = null
 })

src/components/dialogs/LogPicker.vue

@@ -12,6 +12,25 @@
         />
       </div>
       <div class="ok_btn style-btn" @click="chooseLog">确定</div>
+      <svg
+        class="close"
+        @click="handleClickClose"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        fill="none"
+        version="1.1"
+        width="13.06049919128418"
+        height="13.062000274658203"
+        viewBox="0 0 13.06049919128418 13.062000274658203"
+      >
+        <g>
+          <path
+            d="M6.531,7.5915L12,13.062L13.0605,12.0015L7.5915,6.531L13.0605,1.062L12,3.57628e-7L6.531,5.4705L1.062,0L0,1.062L5.4705,6.531L0,12L1.062,13.062L6.531,7.5915Z"
+            fill="#323233"
+            fill-opacity="1"
+          />
+        </g>
+      </svg>
     </div>
   </div>
 </template>
@@ -25,6 +44,9 @@ const props = defineProps({
   logVal: {
     type: String,
   },
+  hiddenLogVisible: {
+    type: Function,
+  },
 })
 
 const columns = ref([
@@ -46,6 +68,10 @@ const chooseLog = () => {
   props.changeLogVal(selectedValues.value[0])
 }
 
+const handleClickClose = () => {
+  props.hiddenLogVisible()
+}
+
 const selectedValues = ref([localStorage.getItem('logVal') || '6'] || ['6'])
 
 watch(() => {
@@ -75,6 +101,12 @@ watch(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    position: relative;
+    .close {
+      position: absolute;
+      right: 24px;
+      top: 18px;
+    }
     .title {
       font-family: Source Han Sans CN;
       font-size: 22px;