File was renamed from Web/src/views/device/index.vue |
| | |
| | | <template> |
| | | <div class="sys-user-container"> |
| | | <splitpanes> |
| | | <pane size="10"> |
| | | <pane size="14"> |
| | | <el-collapse v-model="activeName"> |
| | | <el-collapse-item title="设备控制" name="1"> |
| | | <el-card |
| | |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | </pane> |
| | | <pane size="90" style="position: relative;background-color: #fff;"> |
| | | <pane size="86" style="position: relative;background-color: #fff;"> |
| | | <el-card shadow="hover" :body-style="{ paddingBottom: '0', padding: '10px' }"> |
| | | <div class="card-page"> |
| | | <el-button type="primary" :plain="isPlain1" @click="floorTogglePlain(1)">一层平面</el-button> |
| | | <el-button type="primary" :plain="isPlain2" @click="floorTogglePlain(2)">二层平面</el-button> |
| | | <el-button type="primary" :plain="isPlain3" @click="floorTogglePlain(3)">三层平面</el-button> |
| | | </div> |
| | | </el-card> |
| | | <el-card shadow="hover" :body-style="{ paddingBottom: '0', padding: '10px' }" class="card-line"> |
| | | <div class="grid-container-line"> |
| | | <div |
| | |
| | | import { ref, reactive } from 'vue'; |
| | | import { Splitpanes, Pane } from 'splitpanes'; |
| | | import 'splitpanes/dist/splitpanes.css'; |
| | | import { he } from 'element-plus/es/locale'; |
| | | import { LineEdge } from '@logicflow/core'; |
| | | import { Vue2 } from 'vue-demi'; |
| | | |
| | | |
| | | const activeName = ['1', '2', '3']; |
| | | const value1 = ref(false); |
| | |
| | | ]); |
| | | |
| | | |
| | | //堆垛机数据 |
| | | const cellsDataLine=[ |
| | | { Id: 1, Code: '001', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 }, |
| | | { Id: 2, Code: '002', LineCode:'01',EndLocat:'01010101',IsShow: 0, IsUse: 0,BoxHeight:190 }, |
| | |
| | | { Id: 20, Code: '020', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 }, |
| | | { Id: 21, Code: '021', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 }, |
| | | { Id: 22, Code: '022', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 }, |
| | | { Id: 23, Code: '023', LineCode:'05',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:315 }, |
| | | { Id: 23, Code: '023', LineCode:'05',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:300 }, |
| | | { Id: 24, Code: '024', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10}, |
| | | { Id: 25, Code: '025', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 }, |
| | | { Id: 26, Code: '026', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 }, |
| | |
| | | { Id: 51, Code: '051', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 }, |
| | | ]; |
| | | |
| | | const cellsData = [ |
| | | { Id: 1, Code: '001', IsShow: 0, IsUse: 0,PointCode:'147' }, |
| | | { Id: 2, Code: '002', IsShow: 1, IsUse: 0,PointCode:'' }, |
| | | { Id: 3, Code: '003', IsShow: 0, IsUse: 0,PointCode:'' }, |
| | | //一层输送线数据 |
| | | const cellsDataOne = [ |
| | | { Id: 1, Code: '001', IsShow: 0, IsUse: 0 }, |
| | | { Id: 2, Code: '002', IsShow: 1, IsUse: 0 }, |
| | | { Id: 3, Code: '003', IsShow: 0, IsUse: 0 }, |
| | | { Id: 4, Code: '004', IsShow: 1, IsUse: 0 }, |
| | | { Id: 5, Code: '005', IsShow: 0, IsUse: 0 }, |
| | | { Id: 6, Code: '006', IsShow: 1, IsUse: 0 }, |
| | |
| | | { Id:611 , Code: '611', IsShow: 1, IsUse: 0 }, |
| | | { Id:612 , Code: '612', IsShow: 1, IsUse: 0 }, |
| | | ]; |
| | | //二层输送线数据 |
| | | const cellsDataTwo = []; |
| | | //三层输送线数据 |
| | | const cellsDataThree = []; |
| | | |
| | | |
| | | //输送线数据 |
| | | let cellsData= ref(cellsDataOne);; |
| | | |
| | | 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; |
| | | |
| | | cellsData.value=cellsDataOne; |
| | | } else if (buttonNumber === 2) { |
| | | isPlain2.value = !isPlain2.value; |
| | | isPlain1.value =true; |
| | | isPlain3.value =true; |
| | | |
| | | cellsData.value=cellsDataTwo; |
| | | } else if (buttonNumber === 3) { |
| | | isPlain3.value = !isPlain3.value; |
| | | isPlain1.value =true; |
| | | isPlain2.value =true; |
| | | |
| | | cellsData.value=cellsDataThree; |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .card-page{ |
| | | width: 100%; |
| | | height: 30px; |
| | | display: flex; |
| | | text-align: center; |
| | | justify-content: center; |
| | | align-items: center; |
| | | text-align: center; |
| | | } |
| | | .card-page>button{ |
| | | width: 150px; |
| | | height: 30px; |
| | | } |
| | | .card-line{ |
| | | border: none; |
| | | background-color: transparent; |
| | | position:absolute; |
| | | z-index: 99; |
| | | margin-top: 10px; |
| | | } |
| | | .grid-container-line{ |
| | | display: grid; |
| | | grid-template-columns: repeat(51, 30px); /* 每列宽度 */ |
| | | grid-template-rows: repeat(1, 325px); /* 每行高度 */ |
| | | grid-template-rows: repeat(1, 310px); /* 每行高度 */ |
| | | gap: 0px; /* Gap between cells */ |
| | | margin-top: 25px; |
| | | } |
| | |
| | | } |
| | | |
| | | .card{ |
| | | width: 100%; |
| | | position:absolute; |
| | | border-top: none; |
| | | z-index: 90; |
| | | margin-top: 330px; |
| | | margin-top: 310px; |
| | | } |
| | | .grid-container { |
| | | width: 100%; |
| | | display: grid; |
| | | grid-template-columns: repeat(51, 30px); /* 每列宽度 */ |
| | | grid-template-rows: repeat(12, 35px); /* 每行高度 */ |