| New file |
| | |
| | | <template> |
| | | <div class="sys-user-container"> |
| | | <splitpanes> |
| | | <pane size="15"> |
| | | <el-collapse v-model="activeName" accordion> |
| | | <el-collapse-item title="设备控制" name="1"> |
| | | <el-card |
| | | class="box-card" |
| | | shadow="hover" |
| | | body-style="height:40px; padding: 0 20px; display: flex; align-items: center;"> |
| | | <el-switch v-model="value1" active-text="" inactive-text="程序服务"></el-switch> |
| | | </el-card> |
| | | <el-card |
| | | class="box-card" |
| | | shadow="hover" |
| | | body-style="height:40px; padding: 0 20px; display: flex; align-items: center;" |
| | | style="margin-top: 5px;"> |
| | | <el-switch v-model="value2" active-text="" inactive-text="脱机模式"></el-switch> |
| | | </el-card> |
| | | <el-card |
| | | class="box-card" |
| | | shadow="hover" |
| | | body-style="height:40px; padding: 0 20px; display: flex; align-items: center;" |
| | | style="margin-top: 5px;"> |
| | | <el-switch v-model="value3" active-text="" inactive-text="自刷新"></el-switch> |
| | | </el-card> |
| | | </el-collapse-item> |
| | | |
| | | <el-collapse-item title="堆垛机" name="2"> |
| | | <div style="overflow-x: auto;white-space: nowrap;height: 400px;"> |
| | | <el-card |
| | | v-for="(stacker, index) in stackers" |
| | | :key="index" |
| | | class="box-card" |
| | | shadow="hover" |
| | | body-style="height:40px; padding: 0 20px; display: flex; align-items: center;" |
| | | style="margin-top: 5px;"> |
| | | <el-switch v-model="stacker.value" :inactive-text="`${index + 1}号堆垛机`"></el-switch> |
| | | </el-card> |
| | | </div> |
| | | </el-collapse-item> |
| | | |
| | | <el-collapse-item title="输送线" name="3"> |
| | | <el-card |
| | | v-for="(conveyor, index) in conveyors" |
| | | :key="index" |
| | | class="box-card" |
| | | shadow="hover" |
| | | body-style="height:40px; padding: 0 20px; display: flex; align-items: center;" |
| | | style="margin-top: 5px;"> |
| | | <el-switch v-model="conveyor.value" :inactive-text="`${index + 1}楼输送线`"></el-switch> |
| | | </el-card> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | </pane> |
| | | <pane size="85"> |
| | | <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"></el-card> |
| | | </pane> |
| | | </splitpanes> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { ref, reactive } from 'vue'; |
| | | import { Splitpanes, Pane } from 'splitpanes'; |
| | | import 'splitpanes/dist/splitpanes.css'; |
| | | |
| | | const activeName = ref('1'); |
| | | const value1 = ref(false); |
| | | const value2 = ref(false); |
| | | const value3 = ref(false); |
| | | const stackers = reactive([ |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | ]); |
| | | const conveyors = reactive([ |
| | | { value: false }, |
| | | { value: false }, |
| | | { value: false }, |
| | | ]); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* Add any custom styles here */ |
| | | </style> |
| | | |