消毒是否开始状态

src/components/Operator.vue

@@ -26,11 +26,16 @@
         <p>SET</p>
       </div>
       <div class="set_form">
-        <input type="number" v-model="roomSize" class="room_size" />
+        <input
+          type="number"
+          :disabled="operatorStore.disinfectStatus"
+          v-model="roomSize"
+          class="room_size"
+        />
         <div class="log" @click="showLogPicker">{{ logVal }}</div>
       </div>
       <div class="start" @click="startDisinfect">开始消毒</div>
-      <div class="progress">
+      <div class="progress" @click="toDetail">
         <p class="title">消毒进度</p>
         <div class="tube">
           <div
@@ -58,6 +63,22 @@ import WarnModal from 'cpns/dialogs/WarnModal'
 import DisinfectantLiquidInfo from 'cpns/info/DisinfectantLiquidInfo'
 import EnvironmentInfo from 'cpns/info/EnvironmentInfo'
 import { ref } from 'vue'
+import { useOperatorStore } from '@/store'
+
+const operatorStore = useOperatorStore()
+
+const props = defineProps({
+  changeShowOperator: {
+    type: Function,
+  },
+})
+
+const toDetail = () => {
+  // 判断当前消毒任务是否开始，如果开始时才生效 否则点击不生效
+  if (operatorStore.disinfectStatus) {
+    props.changeShowOperator(false)
+  }
+}
 
 const logVisible = ref(false)
 const logVal = ref(1)
@@ -69,12 +90,18 @@ const changeLogVal = val => {
 }
 
 const startDisinfect = () => {
-  console.log('开始消毒')
+  // 改变开始消毒状态 如果已经开始则不可点击
+  if (!operatorStore.disinfectStatus) {
+    operatorStore.updateDisinfectStatus(true)
+    props.changeShowOperator(false)
+  }
 }
 
 const showLogPicker = () => {
+  if (!operatorStore.disinfectStatus) {
     logVisible.value = true
   }
+}
 </script>
 
 <style lang="scss" scoped>

src/components/Progress.vue

@@ -14,8 +14,18 @@
         </div>
       </div>
       <div class="right_btns">
-        <div class="btn active">暂停消毒</div>
-        <div class="btn ml">继续消毒</div>
+        <div
+          :class="operatorStore.disinfectStatus ? 'btn active' : 'btn'"
+          @click="pauseDisinfect"
+        >
+          暂停消毒
+        </div>
+        <div
+          :class="operatorStore.disinfectStatus ? 'btn ml' : 'btn ml active'"
+          @click="continueDisinfect"
+        >
+          继续消毒
+        </div>
       </div>
     </div>
     <div class="echarts_wrap">
@@ -33,12 +43,35 @@
       </div>
     </div>
     <div class="detail_wrap">
-      <div class="detail">详情</div>
+      <div class="detail" @click="showDetail">详情</div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { useOperatorStore } from '@/store'
+const operatorStore = useOperatorStore()
+const props = defineProps({
+  changeShowOperator: {
+    type: Function,
+  },
+})
+const showDetail = () => {
+  props.changeShowOperator(true)
+}
+
+const pauseDisinfect = () => {
+  if (operatorStore.disinfectStatus) {
+    operatorStore.updateDisinfectStatus(false)
+  }
+}
+
+const continueDisinfect = () => {
+  if (!operatorStore.disinfectStatus) {
+    operatorStore.updateDisinfectStatus(true)
+  }
+}
+</script>
 
 <style lang="scss" scoped>
 .progress_container {

src/pages/Home.vue

@@ -118,8 +118,14 @@
         <p class="text">设置</p>
       </div>
     </div>
-    <!-- <Operator v-if="activeTab == 1" /> -->
-    <Progress v-if="activeTab == 1" />
+    <Operator
+      v-if="activeTab == 1 && showOpertor"
+      :changeShowOperator="changeShowOperator"
+    />
+    <Progress
+      v-if="activeTab == 1 && !showOpertor"
+      :changeShowOperator="changeShowOperator"
+    />
     <LiquidHandle v-if="[2, 3].includes(activeTab)" />
     <Test v-if="activeTab == 4" />
     <Setting v-if="activeTab == 5" />
@@ -138,10 +144,19 @@ import Progress from 'cpns/Progress'
 import LiquidHandle from 'cpns/LiquidHandle'
 import Setting from 'cpns/Setting'
 import Test from 'cpns/Test'
+import { useOperatorStore } from '@/store'
+
+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 changeTab = index => {
   activeTab.value = index
 }

src/store/index.js

@@ -1,7 +1,8 @@
 import { createPinia } from 'pinia'
 import { useTestStore } from './modules/test'
 import { useSettingStore } from './modules/setting'
+import { useOperatorStore } from './modules/operator'
 const store = createPinia()
 
 export default store
-export { useTestStore, useSettingStore }
+export { useTestStore, useSettingStore, useOperatorStore }

src/store/modules/operator.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+export const useOperatorStore = defineStore({
+  id: 'operator', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      // 是否开始消毒
+      disinfectStatus: false,
+    }
+  },
+  // actions
+  actions: {
+    updateDisinfectStatus(val) {
+      this.disinfectStatus = val
+    },
+  },
+})