log

src/components/Operator.vue

@@ -27,7 +27,7 @@
       </div>
       <div class="set_form">
         <input type="number" v-model="roomSize" class="room_size" />
-        <div class="log">12</div>
+        <div class="log" @click="showLogPicker">{{ logVal }}</div>
       </div>
       <div class="start" @click="startDisinfect">开始消毒</div>
       <div class="progress">
@@ -37,7 +37,11 @@
       </div>
     </div>
     <!-- <WarnModal /> -->
-    <!-- <LogPicker /> -->
+    <LogPicker
+      v-if="logVisible"
+      :changeLogVal="changeLogVal"
+      :logVal="logVal"
+    />
   </div>
 </template>
 
@@ -48,11 +52,22 @@ import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
 import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
 import { ref } from 'vue'
 
+const logVisible = ref(false)
+const logVal = ref(1)
 const roomSize = ref(0)
 
+const changeLogVal = val => {
+  logVal.value = val
+  logVisible.value = false
+}
+
 const startDisinfect = () => {
   console.log('开始消毒')
 }
+
+const showLogPicker = () => {
+  logVisible.value = true
+}
 </script>
 
 <style lang="scss" scoped>

src/components/dialogs/LogPicker.vue

@@ -11,14 +11,22 @@
           v-model="selectedValues"
         />
       </div>
-
-      <div class="ok_btn">确定</div>
+      <div class="ok_btn" @click="chooseLog">确定</div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+const props = defineProps({
+  changeLogVal: {
+    type: Function,
+  },
+  logVal: {
+    type: String,
+  },
+})
+
 const columns = ref([
   { text: '1 Log', value: '1' },
   { text: '2 Log', value: '2' },
@@ -34,7 +42,15 @@ const columns = ref([
   { text: '12 Log', value: '12' },
 ])
 
-const selectedValues = ref(['6'])
+const chooseLog = () => {
+  props.changeLogVal(selectedValues.value[0])
+}
+
+const selectedValues = ref([])
+
+watch(() => {
+  selectedValues.value = [props.logVal]
+})
 </script>
 
 <style lang="scss" scoped>