<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>
|
|
