首页修改

.env

@@ -1,5 +1,5 @@
-# VITE_BASE_WS1_URL=ws://192.168.8.10:19001/
-# VITE_BASE_WS2_URL=ws://192.168.8.10:19002/
+VITE_BASE_WS1_URL=ws://192.168.8.10:19001/
+VITE_BASE_WS2_URL=ws://192.168.8.10:19002/
 
-VITE_BASE_WS1_URL=ws://127.0.0.1:19001/
-VITE_BASE_WS2_URL=ws://127.0.0.1:19002/
+# VITE_BASE_WS1_URL=ws://127.0.0.1:19001/
+# VITE_BASE_WS2_URL=ws://127.0.0.1:19002/

src/components/info/AirSwitchConfig.vue

@@ -26,17 +26,31 @@
           :class="activeTab == '1' ? 'tab mb active' : 'tab mb'"
           @click="changeTab('1')"
         >
-          <p class="text">上管道</p>
-          <div class="percent">{{ topText }}</div>
-          <img :src="activeTab == 1 ? A2 : A1" class="icon" alt="" />
+          <p class="text">正压</p>
+          <!-- <div class="percent">{{ topText }}</div> -->
+          <img
+            :src="A2"
+            @click.prevent.stop="changeTab('0')"
+            v-if="activeTab == 1"
+            class="icon"
+            alt=""
+          />
+          <img :src="A1" v-else class="icon" alt="" />
         </div>
         <div
           :class="activeTab == '2' ? 'tab active' : 'tab'"
           @click="changeTab('2')"
         >
-          <p class="text">下管道</p>
-          <div class="percent">{{ bottomText }}</div>
-          <img :src="activeTab == 2 ? A2 : A1" class="icon" alt="" />
+          <p class="text">负压</p>
+          <!-- <div class="percent">{{ bottomText }}</div> -->
+          <img
+            :src="A2"
+            @click.prevent.stop="changeTab('0')"
+            v-if="activeTab == 2"
+            class="icon"
+            alt=""
+          />
+          <img :src="A1" v-else class="icon" alt="" />
         </div>
       </div>
       <div class="right_container">
@@ -58,6 +72,7 @@
           @change="bottomChange"
           v-model="selectedValuesBottom"
         />
+        <p class="tips" v-if="activeTab == 0">关闭</p>
       </div>
     </div>
   </div>
@@ -73,7 +88,7 @@ import {
   airInletProportionalValve_getStateJSON,
   AirOutletProportionalValve_getStateJSON,
 } from '@/mock/command'
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 
 const activeTab = ref('1')
 const sealStore = useSealStore()
@@ -81,7 +96,9 @@ const webSocketStore = useWebSocketStore()
 
 const changeTab = tab => {
   activeTab.value = tab
+  changeAir(tab)
 }
+
 const topText = ref('0%')
 const bottomText = ref('0%')
 const topChange = ({ selectedOptions, selectedValues }) => {
@@ -99,8 +116,32 @@ const bottomChange = ({ selectedOptions, selectedValues }) => {
   sealStore.updateAirOutletProportionalValue(parseInt(selectedValues[0]))
 }
 
+const changeAir = tab => {
+  //   选中正压:
+  //     入气阀设置成10%
+  //     出气阀设置成0
+  // 选中负压:
+  //     入气阀设置成0%
+  //     出气阀设置成10%
+  // 取消选中:
+  //     两个阀设置成0
+  if (tab == '0') {
+    webSocketStore.sendCommandMsg(AirInletProportionalValve_setStateJSON([0]))
+    webSocketStore.sendCommandMsg(AirOutletProportionalValve_setStateJSON([0]))
+  }
+  if (tab == '1') {
+    webSocketStore.sendCommandMsg(AirInletProportionalValve_setStateJSON([100]))
+    webSocketStore.sendCommandMsg(AirOutletProportionalValve_setStateJSON([0]))
+  }
+  if (tab == '2') {
+    webSocketStore.sendCommandMsg(AirInletProportionalValve_setStateJSON([0]))
+    webSocketStore.sendCommandMsg(
+      AirOutletProportionalValve_setStateJSON([100]),
+    )
+  }
+}
+
 const columns = ref([
-  { text: '0%', value: '0' },
   { text: '10%', value: '100' },
   { text: '20%', value: '200' },
   { text: '30%', value: '300' },
@@ -113,13 +154,35 @@ const columns = ref([
   { text: '100%', value: '1000' },
 ])
 
-const selectedValuesTop = ref(['0'])
-const selectedValuesBottom = ref(['0'])
+const selectedValuesTop = ref(['100'])
+const selectedValuesBottom = ref(['100'])
+
+const tabChange = () => {
+  console.log('airin', sealStore.airInletProportionalInitVal)
+  console.log('airout', sealStore.airOutletProportionalInitVal)
+  if (
+    sealStore.airInletProportionalInitVal == 0 &&
+    sealStore.airOutletProportionalInitVal == 0
+  ) {
+    activeTab.value = '0'
+    return
+  }
+  if (sealStore.airInletProportionalInitVal > 0) {
+    activeTab.value = '1'
+    return
+  }
+  if (sealStore.airOutletProportionalInitVal > 0) {
+    activeTab.value = '2'
+    return
+  }
+  activeTab.value = '0'
+}
 
 onMounted(() => {
   try {
     webSocketStore.sendCommandMsg(airInletProportionalValve_getStateJSON)
     webSocketStore.sendCommandMsg(AirOutletProportionalValve_getStateJSON)
+    tabChange()
   } catch (error) {
     setTimeout(() => {
       webSocketStore.sendCommandMsg(airInletProportionalValve_getStateJSON)
@@ -131,18 +194,18 @@ onMounted(() => {
 watch(
   () => sealStore.airInletProportionalInitVal,
   (newVal, oldVal) => {
-    console.log('airInletProportionalInitVal', newVal)
     selectedValuesTop.value = [newVal + '']
     topText.value = `${newVal / 10}%`
+    tabChange()
   },
 )
 
 watch(
   () => sealStore.airOutletProportionalInitVal,
   (newVal, oldVal) => {
-    console.log('airOutletProportionalInitVal', newVal)
     selectedValuesBottom.value = [newVal + '']
     bottomText.value = `${newVal / 10}%`
+    tabChange()
   },
 )
 </script>
@@ -227,6 +290,19 @@ watch(
       box-sizing: border-box;
       background: #fff;
       overflow: hidden;
+      .tips {
+        width: 339px;
+        height: 151px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: 思源黑体;
+        font-size: 28px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0.1em;
+        color: #000000;
+      }
     }
   }
 }