| | |
| | | <template> |
| | | <el-container> |
| | | <el-card shadow="hover" :body-style="{ paddingBottom: '0', padding: '10px' }" style="width: 100%;display: flex;align-items: center;justify-content: center;"> |
| | | <div class="card-page"> |
| | | <el-button type="primary" :plain="isPlain1" @click="floorTogglePlain(1)">1号码垛机器人</el-button> |
| | | <el-button type="primary" :plain="isPlain2" @click="floorTogglePlain(2)">2号码垛机器人</el-button> |
| | | <el-button type="primary" :plain="isPlain3" @click="floorTogglePlain(3)">3号码垛机器人</el-button> |
| | | </div> |
| | | </el-card> |
| | | </el-container> |
| | | <el-container> |
| | | <div class="card-container"> |
| | | <el-card class="other-box-card" v-for="deviceInfo in deviceList" :key="deviceInfo.id"> |
| | | <div slot="header" class="linefix"> |
| | |
| | | |
| | | <script lang="ts" setup> |
| | | import { ref, reactive } from 'vue'; |
| | | |
| | | const stackList=[ |
| | | |
| | | ]; |
| | | const isPlain1 = ref(false);//一层 |
| | | const isPlain2 = ref(true);//二层 |
| | | const isPlain3 = ref(true);//三层 |
| | | //切换层平面 |
| | | function floorTogglePlain(buttonNumber) { |
| | | if (buttonNumber === 1) { |
| | | isPlain1.value = !isPlain1.value; |
| | | isPlain2.value =true; |
| | | isPlain3.value =true; |
| | | |
| | | } else if (buttonNumber === 2) { |
| | | isPlain2.value = !isPlain2.value; |
| | | isPlain1.value =true; |
| | | isPlain3.value =true; |
| | | |
| | | } else if (buttonNumber === 3) { |
| | | isPlain3.value = !isPlain3.value; |
| | | isPlain1.value =true; |
| | | isPlain2.value =true; |
| | | } |
| | | } |
| | | |
| | | const deviceList=[ |
| | | { |
| | |
| | | } |
| | | .otherValuefix{ |
| | | width: 100%; |
| | | height: 600px; |
| | | height: 550px; |
| | | padding: 10px; |
| | | border-bottom: 1px solid rgb(197, 195, 195); |
| | | } |