修改问题

wxw

9 天以前 423911c9dd6e202667a05c63c75b0e296a580519

 Web/src/views/device/deviceInfo/index.vue

@@ -16,14 +16,14 @@
                     <el-switch v-model="state.boRefresh" active-text="" inactive-text="自刷新"
                        @change="handleSwitchChange('boRefresh', $event)"></el-switch>
                  </el-card>
                  <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                  <!-- <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                     <el-switch v-model="state.boDemo" active-text="" inactive-text="演示模式"
                        @change="handleSwitchChange('boDemo', $event)"></el-switch>
                  </el-card>
                  <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                     <el-switch v-model="state.boDrumReversal" active-text="" inactive-text="滚动反转"
                        @change="handleSwitchChange('boDrumReversal', $event)"></el-switch>
                  </el-card>
                  </el-card> -->
                  <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                     <el-switch v-model="state.boOutLock" active-text="" inactive-text="出库锁定"
                        @change="handleSwitchChange('boOutLock', $event)"></el-switch>
@@ -56,12 +56,12 @@
               <el-button type="primary" :plain="floorStates.isPlain1"
                  @click="floorTogglePlain(1)">一层平面</el-button>
               <el-button type="primary" :plain="floorStates.isPlain2"
                  @click="floorTogglePlain(2)">二层平面</el-button>
               <el-button type="primary" :plain="floorStates.isPlain3"
                  @click="floorTogglePlain(3)">三层平面</el-button>
                  @click="floorTogglePlain(2)">四层平面</el-button>
               <!-- <el-button type="primary" :plain="floorStates.isPlain3"
                  @click="floorTogglePlain(3)">三层平面</el-button> -->
            </div>
            <div style="margin: 40px; height: 50%;">
               <div class="grid-container-line">
               <div v-if="floorNum === 1" class="grid-container-line">
                  <div v-for="cell in cellsDataLine" :key="cell.Id">
                     <div v-if="cell.IsShow === 0" class="grid-item-line">
                        <div class="grid-item-line-end">
@@ -70,11 +70,24 @@
                        <div class="grid-item-line-box" :style="{ marginTop: cell.BoxHeight + 'px' }">
                           {{ cell.LineCode }}
                        </div>
                        <div class="grid-item-line-child"></div>
                        <div :class="[{ 'grid-item-line-child2': cell.LineCode === '01' }, { 'grid-item-line-child': cell.LineCode !== '01' }]"></div>
                     </div>
                  </div>
               </div>
               <div class="grid-container">
               <div v-if="floorNum !== 1" class="grid-container-line">
                  <div v-for="cell in cellsDataLine" :key="cell.Id">
                     <div v-if="cell.IsShow === 0 && (cell.LineCode==='05' || cell.LineCode==='06')" class="grid-item-line">
                        <div class="grid-item-line-end">
                           {{ cell.EndLocat }}
                        </div>
                        <div class="grid-item-line-box" :style="{ marginTop: cell.BoxHeight + 'px' }">
                           {{ cell.LineCode }}
                        </div>
                        <div class="grid-item-line-child3"></div>
                     </div>
                  </div>
               </div>
               <div :class="[{ 'grid-container': floorNum === 1 }, { 'grid-container2': floorNum !== 1 }]">
                  <div v-for="cell in cellsData" :key="cell.Id">
                     <div v-if="cell.IsShow === 0"
                        :class="['grid-item', { 'active': cell.IsUse === 1 }, { 'active2': cell.IsUse === 2 }, { 'active3': cell.IsUse === 3 }]">
@@ -103,7 +116,7 @@
   var res = await listStatus();
   state.value = res.data.result.modService;
   stackers.value = res.data.result.listPlc.filter(s => s.type == 0);
   conveyors.value = res.data.result.listPlc.filter(s => s.type == 1);
   conveyors.value = res.data.result.listPlc.filter(s => (s.type == 1|| s.type == 4));

   var res2 = await listPosition();
   res2.data.result.forEach(s => {
@@ -233,11 +246,11 @@
   isPlain2: true,
   isPlain3: true
});

let floorNum=1;
//切换层平面
function floorTogglePlain(buttonNumber) {
   floorNum=buttonNumber;
   const floorData = [cellsDataOne.value, cellsDataTwo.value, cellsDataThree.value];
   debugger;
   if (buttonNumber >= 1 && buttonNumber <= 3) {
      const index = buttonNumber - 1;
      floorStates.value = {
@@ -283,7 +296,7 @@

.grid-container-line {
   display: grid;
   grid-template-columns: repeat(51, 1fr);
   grid-template-columns: repeat(42, 1fr);
   /* 自适应列宽 */
   grid-template-rows: 1fr;
   /* 自适应行高 */
@@ -340,7 +353,17 @@
}

.grid-item-line-child {
   height: 220px;
   height: 420px;
   width: 3px;
   background-color: #000000;
}
.grid-item-line-child2 {
   height: 620px;
   width: 3px;
   background-color: #000000;
}
.grid-item-line-child3{
   height: 260px;
   width: 3px;
   background-color: #000000;
}
@@ -350,19 +373,30 @@
   position: absolute;
   border-top: none;
   z-index: 90;
   margin-top: 310px;
   margin-top: 10px;
}

.grid-container {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(51, 1fr);
   grid-template-columns: repeat(42, 1fr);
   /* 每列宽度 */
   grid-template-rows: repeat(12, 1fr);
   grid-template-rows: repeat(17, 1fr);
   /* 每行高度 */
   gap: 0px;
   /* Gap between cells */
   margin-top: -20px
   margin-top: -400px
}
.grid-container2 {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(42, 1fr);
   /* 每列宽度 */
   grid-template-rows: repeat(17, 1fr);
   /* 每行高度 */
   gap: 0px;
   /* Gap between cells */
   margin-top: -30px
}

.grid-item {