有人切无人判断是否驻车

.history/src/views/SideBar_20231025170425.vue

+<template>
+    <div class="side-bar">
+        <ul class="side-list">
+            <li v-if="isBasic"
+                data-name="basic_message"
+                class="active"
+                @click="doCheck">
+                <i :style="`background-image: url('/image/Info_white.png')`"></i>
+                <span>基本信息</span>
+            </li>
+            <li v-else
+                data-name="mode_information"
+                class="active"
+                @click="doCheck">
+                <i :style="`background-image: url('/image/debug_white.png')`"></i>
+                <span>调试信息</span>
+            </li>
+            <li v-for="item in list" 
+                :key="item.index" 
+                :data-name="item.name" 
+                :class="active === item.name ? 'active' : ''"
+                @click="changeActive">
+                <i :class="item.name === 'mode_switch' ? isDisable : ''"
+                    :style="`background-image: url('/image/${item.icon}${active === item.name ? '_white' : '_blue'}.png')`"></i>
+                <span :class="item.name === 'mode_switch' ? isDisable : ''">{{item.label}}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+    import { markRaw, ref, computed } from 'vue';
+    import { useVehicleStore } from '@/store/VehicleStore.js'
+    import { storeToRefs } from 'pinia'
+    import { Message } from 'view-ui-plus'
+
+    const SIDE_BAR = [
+        {
+            name: 'mode_switch',
+            label: '模式切换',
+            icon: 'pattern'
+        },
+        {
+            name: 'log',
+            label: '终端信息',
+            icon: 'log'
+        },
+        {
+            name: 'set',
+            label: '设置',
+            icon: 'set'
+        },
+        {
+            name: 'logout',
+            label: '退出',
+            icon: 'quit'
+        },
+    ]
+
+    /**
+     * defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。
+     * 他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
+     * defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值
+     */
+    const emit = defineEmits(['changeTab'])
+
+    const list = markRaw(SIDE_BAR)
+    const active = ref('basic_message')
+    const isBasic = ref(true)
+    const vehicleStore = useVehicleStore()
+    const vehicleStoreToRefs = storeToRefs(vehicleStore)
+
+    const isDisable = computed(() => {
+        const {isError, pattern} = vehicleStoreToRefs
+        if (isError.value === 'fault' && pattern.value === 0) {
+            return 'disabled'
+        }
+        return ''
+    })
+
+    function doCheck(evt) {
+        isBasic.value = !isBasic.value
+        const target = evt.currentTarget
+        const {name} = target.dataset
+        active.value = name === 'basic_message' ? 'mode_information' : 'basic_message'
+        emit('changeTab', active.value)
+    }
+
+    function changeActive(evt) {
+        const target = evt.currentTarget
+        const {name} = target.dataset
+        const {debuginfo} = vehicleStoreToRefs
+        const {Current_Gear,loadBrakeStatus}=debuginfo.value;
+         if (name === 'mode_switch' && isDisable.value === 'disabled') {
+            return
+        }
+        if (['P', 126].includes(Current_Gear) || (['N', 0].includes(Current_Gear) && loadBrakeStatus != 0)) {
+            active.value = name
+            emit('changeTab', name)
+        } else {
+            Message.error('不能切换无人模式')
+        }
+    }
+
+    function changeMode() {
+        active.value = 'basic_message'
+    }
+
+    defineExpose({
+        changeMode
+    })
+</script>
+<style lang="less" scoped>
+.side-list {
+    background: #202634;
+    color: #5490D6;
+    height: 100%;
+    overflow: auto;
+    li {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: .1rem;
+        cursor: pointer;
+        i {
+            display: inline-block;
+            width: 2.5vw;
+            height: 2.5vw;
+            background-size: cover;
+        }
+        &.active {
+            color: #fff;
+        }
+    }
+    .disabled {
+        cursor: not-allowed;
+    }
+}
+</style>
\ No newline at end of file

src/views/SideBar.vue

@@ -94,19 +94,12 @@
          if (name === 'mode_switch' && isDisable.value === 'disabled') {
             return
         }
-        if(typeof Current_Gear==string){
-            if((Current_Gear!='P'||Current_Gear!='N')&&loadBrakeStatus==0){
-                Message.error('不能切换无人模式')
-                return
-            }
-        }else{
-            if((Current_Gear!=126||Current_Gear!=0)&&loadBrakeStatus==0){
-                Message.error('不能切换无人模式')
-                return
-            }
-        }
+        if (['P', 126].includes(Current_Gear) || (['N', 0].includes(Current_Gear) && loadBrakeStatus != 0)) {
             active.value = name
             emit('changeTab', name)
+        } else {
+            Message.error('不能切换无人模式')
+        }
     }
 
     function changeMode() {