wxw
2024-08-21 ea7143b55e02d98efe1367e376d2a20f742b879c
Web/src/views/device/deviceInfo/index.vue
File was renamed from Web/src/views/device/index.vue
@@ -1,7 +1,7 @@
<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
@@ -53,7 +53,14 @@
         </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 
@@ -95,8 +102,8 @@
  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);
@@ -121,6 +128,7 @@
  ]);
  //堆垛机数据
  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 },
@@ -144,7 +152,7 @@
   { 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 },
@@ -175,10 +183,11 @@
   { 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 },
@@ -789,22 +798,66 @@
   { 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;
   }
@@ -853,12 +906,14 @@
   }
   .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);  /* 每行高度 */