fix: 需求

.history/src/views/map/MapButtons_20230724113600.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">急停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/map/MapButtons_20240116113405.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">快停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/map/MapButtons_20240116113821.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="stop" @dblclick="doSend">快停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="estop" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/map/MapButtons_20240116113827.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="estop" @dblclick="doSend">快停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/map/MapButtons_20240116113859.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="estop" @dblclick="doSend">快停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13,
+        estop:15,//快停
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/map/MapButtons_20240116114918.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="estop" @dblclick="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">快停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13,
+        estop:15,//快停
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/map/MapButtons_20240116114927.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="estop" @dblclick="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">快停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13,
+        estop:15,//快停
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/map/MapButtons_20240116114946.vue

+<template>
+    <div class="buttons">
+        <!-- TODO:只有单机循迹时显示 -->
+        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
+        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
+        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
+            '空车卸载' }}</span>
+        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
+        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
+            <p>卸 载</p>
+            <p>出 场</p>
+        </div>
+        <div type="info" class="large-btn stop-btn" data-name="estop" @dblclick="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">快停</div>
+        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
+        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
+        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
+        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
+        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
+            <p>{{ content }}</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { watch, ref } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { useMapStore } from '../../store/MapStore';
+    import { storeToRefs } from 'pinia';
+    import { Message } from 'view-ui-plus';
+
+    const mapping = {
+        unload: 10,
+        comeout: 11,
+        stop: 0,
+        run: 1,
+        slow: 2,
+        loadcomeout: 12,
+        single_preview: 13,
+        estop:15,//急停
+    }
+
+    const porps = defineProps({
+        singleTrackEnable: Boolean
+    })
+    const isLog = ref(true)
+    const isLoad = ref(true)
+    const isShow = ref(false)
+    const isShield = ref(false)
+    const currentName = ref('')
+    const content = ref('')
+    const vehicleStore = useVehicleStore()
+    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
+    const mapStore = useMapStore()
+    const { obstacleData } = storeToRefs(mapStore)
+
+    const emits = defineEmits('handleSend')
+    
+    function sendMsg(data) {
+        emits('handleSend', data)
+    }
+
+    function handleShield() {
+        // if (!isShield.value) return
+
+        isShow.value = true
+        content.value = '是否清除范围内的障碍物？'
+        currentName.value = 'obstacle'
+    }
+
+    function shieldObstacle() {
+        if (obstacleData && obstacleData.value.length) {
+            let msg = []
+            obstacleData.value.map(obstacle => {
+                let { typeColor, typeDescrip, ocoordinate } = obstacle
+                msg.push({
+                    typeColor,
+                    typeDescrip,
+                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
+                })
+            })
+            let data = {
+                timestamp: new Date().getTime(),
+                obstacle: msg
+            }
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: data
+            })
+        }else{
+            sendMsg({
+                type: '/setting/ignoreObstacles',
+                msg: {
+                    timestamp: new Date().getTime(),
+                    obstacle: []
+                }
+            })
+        }
+
+    }
+
+    function duSure() {
+        if (currentName.value === 'obstacle') {
+            shieldObstacle()
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {
+                    value: mapping[currentName.value]
+                }
+            })
+        }
+    }
+
+    function changeLoad() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLoad.value ? 7 : 6}
+        })
+    }
+
+    function changeLog() {
+        sendMsg({
+            type: '/command/debug',
+            msg: {value: isLog.value ? 8 : 9}
+        })
+    }
+
+    function doSend(e) {
+        const target = e.currentTarget
+        const { name } = target.dataset
+        currentName.value = name
+        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
+            let names = {
+                unload: '卸载',
+                comeout: '卸载出场',
+                loadcomeout: '装载出场',
+                run: '行驶'
+            }
+            isShow.value = true
+            content.value = `是否确定执行${names[name]}操作？`
+        } else {
+            sendMsg({
+                type: '/command/debug',
+                msg: {value: mapping[currentName.value]}
+            })
+        }
+    }
+
+    watch(loadSwitch, (value) => {
+        isLoad.value = value
+    }, {
+        deep: true
+    })
+
+    watch(logSwitch, (value) => {
+        isLog.value = !value
+    }, {
+        deep: true
+    })
+
+    watch(debugack, (data) => {
+        let value = data && data.value
+        if (!value) return
+        let tipsMap = {
+            0: 'stop',
+            1: 'run',
+            10: '卸载',
+            11: '出场'
+        }
+        let tips = tipsMap[value]
+        if (tips) {
+            Message.success(`执行${tips}成功！`)
+        } else {
+            switch(value) {
+                case 6:
+                    isLoad.value = true
+                    break
+                case 7:
+                    isLoad.value = false
+                    break
+                case 8:
+                    isLog.value = false
+                    break
+                case 9:
+                    isLog.value = true
+                    break
+            }
+        }
+        vehicleStore.setData('debugack', null)
+    }, {
+        deep: true
+    })
+
+    watch(obstacleData, (value) => {
+        isShield.value = value && value.length > 0
+    })
+</script>
+<style lang="less" scoped>
+    .buttons {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        .middle-btn {
+            width: 5.5vw !important;
+            height: 5.5vw !important;
+            min-width: 44px;
+            min-height: 44px;
+            background: url('/image/btn-unload.png') no-repeat;
+            background-size: 100% 100%;
+            font-weight: 600;
+            color: #000;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1vw;
+            cursor: pointer;
+        }
+
+        .smiddle-btn {
+            flex-direction: column;
+        }
+
+        .large-btn {
+            width: 5vw !important;
+            height: 5vw !important;
+            min-width: 50px;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
+            color: #fff;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+        }
+
+        .disable {
+            cursor: not-allowed;
+            opacity: .4;
+        }
+
+        .stop-btn {
+            background-image: url('/image/stop.png');
+        }
+
+        .slow-down-btn {
+            background-image: url('/image/slow-down.png');
+        }
+
+        .run-btn {
+            color: #4399FF;
+            background-image: url('/image/run.png');
+        }
+        .btn-span,
+        .btn-span-load {
+            display: inline-block;
+            padding: 5px 10px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .btn-span {
+            background-image: url('/image/btn-default.png');
+        }
+
+        .btn-span-load {
+            background-image: url('/image/btn-load.png');
+            min-width: 46px;
+        }
+
+        .btn-span-active {
+            opacity: .6;
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/set-tags/RunControl_20231230185155.vue

+<template>
+    <div class="run-control">
+        <div class="content">
+            <div v-for="item in topList" :key="item.index" class="c-box">
+                <Button type="primary" @click="handleSave(item.key, item.value)">{{item.btn}}</Button>
+                <p>
+                    <span class="desc">{{item.des}}</span>
+                    <InputNumber v-model="form[item.value]" controls-outside></InputNumber>
+                </p>
+            </div>
+        </div>
+        <div class="run-middle">
+            <div class="content" v-for="item in middleList" :key="item.index">
+                <p class="c-box" v-for="list in item" :key="list.key">
+                    <span>{{list.label}}</span>
+                    <i-switch size="large" v-model="form[list.key]" @on-change="handleChange($event, list.type)">
+                        <template #open>
+                            <span>开启</span>
+                        </template>
+                        <template #close>
+                            <span>关闭</span>
+                        </template>
+                    </i-switch>
+                </p>
+            </div>
+        </div>
+        <div class="content">
+            <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(10,'货箱回落')">货箱回落</Button>
+                <span>仅在0/1级故障下且货箱功能正常时点击</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(11,'单步倒车')">单步倒车</Button>
+                <span>发生两车或多车锁死时点击</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="handleSave(6)">解锁</Button>
+                <span>解锁上次异常退出导致的路权锁定</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="handleSave(7)">加载参数</Button>
+                <span>触发控制模块重新加载参数</span>
+            </p>
+        </div>
+        <Modal v-model="isShow"
+            title="提示"
+            :closable="true"
+            :mask-closable="false"
+            @on-ok="handleSave(codeValue)"
+            @on-cancel="boxCancel()">
+            <p style="text-align: center;">是否执行{{codeText}}指令</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { ref,reactive, toRefs, watch, markRaw } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { storeToRefs } from 'pinia';
+
+    const RUN_CONTROL_TOP = [
+        {
+            btn: '打火',
+            key: '1',
+            des: '打火持续时间',
+            value: 'engineStartTime'
+        },
+        {
+            btn: '熄火',
+            key: '2',
+            des: '熄火持续时间',
+            value: 'engineStallTime'
+        },
+        {
+            btn: '上电',
+            key: '3',
+            des: '上电持续时间',
+            value: 'powerOnTime'
+        },
+    ]
+    const RUN_CONTROL_MIDDLE = [
+        [
+            {
+                label: '举升',
+                key: 'liftSwitch',
+                type: 4
+            },
+            {
+                label: '防滑',
+                key: 'antiSlideSlip',
+                type: '5'
+            }
+        ],
+        [
+            // {
+            //     label: '感知屏蔽',
+            //     key: 'perceptionShielding',
+            //     type: 8
+            // },
+            {
+                label: '绕障',
+                key: 'obstaclesBypassingEnable',
+                type: 9
+            }
+        ]
+    ]
+
+    const topList = markRaw(RUN_CONTROL_TOP)
+    const middleList = markRaw(RUN_CONTROL_MIDDLE)
+    const data = reactive({
+        form: {}
+    })
+    const { form } = toRefs(data)
+    const vehicleStore = useVehicleStore()
+    const vehicleStoreToRefs = storeToRefs(vehicleStore)
+    const { controlInfo } = vehicleStoreToRefs
+
+    const isShow=ref(false);
+
+    const emits = defineEmits(['sendMsg'])
+
+    function handleSend(msg) {
+        emits('sendMsg', {
+            type: '/setting/controlSetting',
+            msg: JSON.parse(JSON.stringify(msg))
+        })
+    }
+
+    function handleChange(value, key) {
+        let data = value ? 1 : 2
+        handleSend({
+            value: data,
+            type: Number(key)
+        })
+    }
+
+    function handleSave(type, key) {
+        let value = 1
+        if (key) {
+            value = form.value[key] || 1
+        }
+        let data = {
+            type: Number(type),
+            value
+        }
+
+        handleSend(data)
+    }
+
+    let codeValue=ref('');
+    let codeText=ref('');
+    function boxDown(val,text){
+        codeValue.value=val;
+        codeText.value=text;
+        isShow.value=true;
+    }
+    function boxCancel(){
+        codeValue.value='';
+        isShow.value=false;
+    }
+    watch(controlInfo, (value) => {
+        data.form = {...value}
+    }, {
+        immediate: true,
+        deep: true
+    })
+</script>
+
+<style lang="less" scoped>
+    .run-control {
+        overflow: auto;
+        .content {
+            padding: 10px 20px;
+            background: #111521;
+            border-radius: 8px;
+            .c-box {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 10px 0;
+                border-bottom: 2px solid rgba(63,69,86,0.6);
+                &:nth-last-child(1) {
+                    border: 0;
+                }
+                .desc {
+                    margin-right: 5px;
+                }
+                /deep/.ivu-btn-primary {
+                    width: 88px;
+                }
+            }
+            .b-box {
+                justify-content: flex-start;
+                span {
+                    margin-left: 10px;
+                }
+            }
+        }
+        .run-middle {
+            display: flex;
+            margin: 10px 0;
+            .content {
+                width: 50%;
+                &:nth-child(1) {
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/set-tags/RunControl_20240116114351.vue

+<template>
+    <div class="run-control">
+        <div class="content">
+            <div v-for="item in topList" :key="item.index" class="c-box">
+                <Button type="primary" @click="handleSave(item.key, item.value)">{{item.btn}}</Button>
+                <p>
+                    <span class="desc">{{item.des}}</span>
+                    <InputNumber v-model="form[item.value]" controls-outside></InputNumber>
+                </p>
+            </div>
+        </div>
+        <div class="run-middle">
+            <div class="content" v-for="item in middleList" :key="item.index">
+                <p class="c-box" v-for="list in item" :key="list.key">
+                    <span>{{list.label}}</span>
+                    <i-switch size="large" v-model="form[list.key]" @on-change="handleChange($event, list.type)">
+                        <template #open>
+                            <span>开启</span>
+                        </template>
+                        <template #close>
+                            <span>关闭</span>
+                        </template>
+                    </i-switch>
+                </p>
+            </div>
+        </div>
+        <div class="content">
+            <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(10,'货箱回落')">货箱回落</Button>
+                <span>仅在0/1级故障下且货箱功能正常时点击</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(11,'单步倒车')">单步倒车</Button>
+                <span>发生两车或多车锁死时点击</span>
+            </p>
+             <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(12,'申请路径')">申请路径</Button>
+                <span>停车状态下重新申请路径</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="handleSave(6)">解锁</Button>
+                <span>解锁上次异常退出导致的路权锁定</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="handleSave(7)">加载参数</Button>
+                <span>触发控制模块重新加载参数</span>
+            </p>
+        </div>
+        <Modal v-model="isShow"
+            title="提示"
+            :closable="true"
+            :mask-closable="false"
+            @on-ok="handleSave(codeValue)"
+            @on-cancel="boxCancel()">
+            <p style="text-align: center;">是否执行{{codeText}}指令</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { ref,reactive, toRefs, watch, markRaw } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { storeToRefs } from 'pinia';
+
+    const RUN_CONTROL_TOP = [
+        {
+            btn: '打火',
+            key: '1',
+            des: '打火持续时间',
+            value: 'engineStartTime'
+        },
+        {
+            btn: '熄火',
+            key: '2',
+            des: '熄火持续时间',
+            value: 'engineStallTime'
+        },
+        {
+            btn: '上电',
+            key: '3',
+            des: '上电持续时间',
+            value: 'powerOnTime'
+        },
+    ]
+    const RUN_CONTROL_MIDDLE = [
+        [
+            {
+                label: '举升',
+                key: 'liftSwitch',
+                type: 4
+            },
+            {
+                label: '防滑',
+                key: 'antiSlideSlip',
+                type: '5'
+            }
+        ],
+        [
+            // {
+            //     label: '感知屏蔽',
+            //     key: 'perceptionShielding',
+            //     type: 8
+            // },
+            {
+                label: '绕障',
+                key: 'obstaclesBypassingEnable',
+                type: 9
+            }
+        ]
+    ]
+
+    const topList = markRaw(RUN_CONTROL_TOP)
+    const middleList = markRaw(RUN_CONTROL_MIDDLE)
+    const data = reactive({
+        form: {}
+    })
+    const { form } = toRefs(data)
+    const vehicleStore = useVehicleStore()
+    const vehicleStoreToRefs = storeToRefs(vehicleStore)
+    const { controlInfo } = vehicleStoreToRefs
+
+    const isShow=ref(false);
+
+    const emits = defineEmits(['sendMsg'])
+
+    function handleSend(msg) {
+        emits('sendMsg', {
+            type: '/setting/controlSetting',
+            msg: JSON.parse(JSON.stringify(msg))
+        })
+    }
+
+    function handleChange(value, key) {
+        let data = value ? 1 : 2
+        handleSend({
+            value: data,
+            type: Number(key)
+        })
+    }
+
+    function handleSave(type, key) {
+        let value = 1
+        if (key) {
+            value = form.value[key] || 1
+        }
+        let data = {
+            type: Number(type),
+            value
+        }
+
+        handleSend(data)
+    }
+
+    let codeValue=ref('');
+    let codeText=ref('');
+    function boxDown(val,text){
+        codeValue.value=val;
+        codeText.value=text;
+        isShow.value=true;
+    }
+    function boxCancel(){
+        codeValue.value='';
+        isShow.value=false;
+    }
+    watch(controlInfo, (value) => {
+        data.form = {...value}
+    }, {
+        immediate: true,
+        deep: true
+    })
+</script>
+
+<style lang="less" scoped>
+    .run-control {
+        overflow: auto;
+        .content {
+            padding: 10px 20px;
+            background: #111521;
+            border-radius: 8px;
+            .c-box {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 10px 0;
+                border-bottom: 2px solid rgba(63,69,86,0.6);
+                &:nth-last-child(1) {
+                    border: 0;
+                }
+                .desc {
+                    margin-right: 5px;
+                }
+                /deep/.ivu-btn-primary {
+                    width: 88px;
+                }
+            }
+            .b-box {
+                justify-content: flex-start;
+                span {
+                    margin-left: 10px;
+                }
+            }
+        }
+        .run-middle {
+            display: flex;
+            margin: 10px 0;
+            .content {
+                width: 50%;
+                &:nth-child(1) {
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file

.history/src/views/set-tags/RunControl_20240116114614.vue

+<template>
+    <div class="run-control">
+        <div class="content">
+            <div v-for="item in topList" :key="item.index" class="c-box">
+                <Button type="primary" @click="handleSave(item.key, item.value)">{{item.btn}}</Button>
+                <p>
+                    <span class="desc">{{item.des}}</span>
+                    <InputNumber v-model="form[item.value]" controls-outside></InputNumber>
+                </p>
+            </div>
+        </div>
+        <div class="run-middle">
+            <div class="content" v-for="item in middleList" :key="item.index">
+                <p class="c-box" v-for="list in item" :key="list.key">
+                    <span>{{list.label}}</span>
+                    <i-switch size="large" v-model="form[list.key]" @on-change="handleChange($event, list.type)">
+                        <template #open>
+                            <span>开启</span>
+                        </template>
+                        <template #close>
+                            <span>关闭</span>
+                        </template>
+                    </i-switch>
+                </p>
+            </div>
+        </div>
+        <div class="content">
+            <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(10,'货箱回落')">货箱回落</Button>
+                <span>仅在0/1级故障下且货箱功能正常时点击</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(11,'单步倒车')">单步倒车</Button>
+                <span>发生两车或多车锁死时点击</span>
+            </p>
+             <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(12,'申请路径')">申请路径</Button>
+                <span>停车状态下重新申请路径</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="handleSave(6)">解锁</Button>
+                <span>解锁上次异常退出导致的路权锁定</span>
+            </p>
+            <p class="c-box b-box">
+                <Button type="primary" @click="handleSave(7)">加载参数</Button>
+                <span>触发控制模块重新加载参数</span>
+            </p>
+        </div>
+        <Modal v-model="isShow"
+            title="提示"
+            :closable="true"
+            :mask-closable="false"
+            @on-ok="handleSave(codeValue)"
+            @on-cancel="boxCancel()">
+            <p style="text-align: center;">是否执行{{codeText}}指令</p>
+        </Modal>
+    </div>
+</template>
+
+<script setup>
+    import { ref,reactive, toRefs, watch, markRaw } from 'vue';
+    import { useVehicleStore } from '../../store/VehicleStore';
+    import { storeToRefs } from 'pinia';
+
+    const RUN_CONTROL_TOP = [
+        {
+            btn: '打火',
+            key: '1',
+            des: '打火持续时间',
+            value: 'engineStartTime'
+        },
+        {
+            btn: '熄火',
+            key: '2',
+            des: '熄火持续时间',
+            value: 'engineStallTime'
+        },
+        {
+            btn: '上电',
+            key: '3',
+            des: '上电持续时间',
+            value: 'powerOnTime'
+        },
+    ]
+    const RUN_CONTROL_MIDDLE = [
+        [
+            {
+                label: '举升',
+                key: 'liftSwitch',
+                type: 4
+            },
+            {
+                label: '防滑',
+                key: 'antiSlideSlip',
+                type: '5'
+            }
+        ],
+        [
+            // {
+            //     label: '感知屏蔽',
+            //     key: 'perceptionShielding',
+            //     type: 8
+            // },
+            {
+                label: '绕障',
+                key: 'obstaclesBypassingEnable',
+                type: 9
+            }
+        ]
+    ]
+
+    const topList = markRaw(RUN_CONTROL_TOP)
+    const middleList = markRaw(RUN_CONTROL_MIDDLE)
+    const data = reactive({
+        form: {}
+    })
+    const { form } = toRefs(data)
+    const vehicleStore = useVehicleStore()
+    const vehicleStoreToRefs = storeToRefs(vehicleStore)
+    const { controlInfo } = vehicleStoreToRefs
+
+    const isShow=ref(false);
+
+    const emits = defineEmits(['sendMsg'])
+
+    function handleSend(msg) {
+        emits('sendMsg', {
+            type: '/setting/controlSetting',
+            msg: JSON.parse(JSON.stringify(msg))
+        })
+    }
+
+    function handleChange(value, key) {
+        let data = value ? 1 : 2
+        handleSend({
+            value: data,
+            type: Number(key)
+        })
+    }
+
+    function handleSave(type, key) {
+        let value = 1
+        if (key) {
+            value = form.value[key] || 1
+        }
+        let data = {
+            type: Number(type),
+            value
+        }
+
+        handleSend(data)
+    }
+
+    let codeValue=ref('');
+    let codeText=ref('');
+    function boxDown(val,text){
+        codeValue.value=val;
+        codeText.value=text;
+        isShow.value=true;
+    }
+    function boxCancel(){
+        codeValue.value='';
+        isShow.value=false;
+    }
+    watch(controlInfo, (value) => {
+        data.form = {...value}
+    }, {
+        immediate: true,
+        deep: true
+    })
+</script>
+
+<style lang="less" scoped>
+    .run-control {
+        overflow: auto;
+        .content {
+            padding: 10px 20px;
+            background: #111521;
+            border-radius: 8px;
+            .c-box {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 10px 0;
+                border-bottom: 2px solid rgba(63,69,86,0.6);
+                &:nth-last-child(1) {
+                    border: 0;
+                }
+                .desc {
+                    margin-right: 5px;
+                }
+                /deep/.ivu-btn-primary {
+                    width: 88px;
+                }
+            }
+            .b-box {
+                justify-content: flex-start;
+                span {
+                    margin-left: 10px;
+                }
+            }
+        }
+        .run-middle {
+            display: flex;
+            margin: 10px 0;
+            .content {
+                width: 50%;
+                &:nth-child(1) {
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file

src/views/map/MapButtons.vue

@@ -10,7 +10,8 @@
             <p>卸 载</p>
             <p>出 场</p>
         </div>
-        <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">急停</div>
+        <div type="info" class="large-btn stop-btn" data-name="estop" @dblclick="doSend">急停</div>
+         <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">快停</div>
         <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
         <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
         <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
@@ -35,7 +36,8 @@
         run: 1,
         slow: 2,
         loadcomeout: 12,
-        single_preview: 13
+        single_preview: 13,
+        estop:15,//急停
     }
 
     const porps = defineProps({

src/views/set-tags/RunControl.vue

@@ -34,6 +34,10 @@
                 <span>发生两车或多车锁死时点击</span>
             </p>
              <p class="c-box b-box">
+                <Button type="primary" @click="boxDown(12,'申请路径')">申请路径</Button>
+                <span>停车状态下重新申请路径</span>
+            </p>
+            <p class="c-box b-box">
                 <Button type="primary" @click="handleSave(6)">解锁</Button>
                 <span>解锁上次异常退出导致的路权锁定</span>
             </p>