修改页面

wxw

2024-08-30 73052b572c615e8cc84ed438755a82fed1130537

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

@@ -53,7 +53,7 @@
               <div class="grid-container">
                  <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 }]">
                        :class="['grid-item', { 'active': cell.IsUse === 1 }, { 'active2': cell.IsUse === 2 }, { 'active3': cell.IsUse === 3 }]">
                        <div>{{ cell.Code }}</div>
                     </div>
                  </div>
@@ -68,50 +68,6 @@
import { ref, reactive, onMounted } from 'vue';
import { listStatus } from '/@/api/wcs/wcsPlc';
import { signalR } from './signalR';
         </el-card>
         <el-card shadow="hover" :body-style="{ paddingBottom: '0', padding: '10px' }" class="card-line">
            <div 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">
                        {{cell.EndLocat}}
                     </div>
                     <div class="grid-item-line-box" :style="{ marginTop: cell.BoxHeight + 'px' }">
                        {{ cell.LineCode }}
                     </div>
                     <div class="grid-item-line-child"></div>
                  </div>
               </div>
            </div>
         </el-card>
         <el-card shadow="hover" :body-style="{ paddingBottom: '0', padding: '10px' }" class="card">
            <div class="grid-container">
               <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 }]"
                     >
                            <!-- 临时用的code需增加点位字段替换 -->
                     <div>{{ cell.Code }}</div>
                  </div>
               </div>
            </div>
         </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';
  import { Vue2 } from 'vue-demi';


const state = ref<any>({});
@@ -1954,7 +1910,7 @@


  //输送线数据
  let cellsData= ref(cellsDataOne);
let cellsData = ref(cellsDataOne);;

const isPlain1 = ref(false);//一层
const isPlain2 = ref(true);//二层
@@ -2102,34 +2058,6 @@
      background-color: #9c9c9c;
      border: 1px solid #797777;
      text-align: center;
      line-height: 35px;
      font-size: 12px;
      width: 30px;
      height: 35px;
      color: #fff;
      font-size: 14px;
   }
   .active {
      background-color: rgb(57, 141, 251); /* IsUse 为1时背景颜色为蓝色 */
      color: #f5f5f5;
   }
   .active2>div {
      display: none;
   }
   .active3 {
      background-color: #fff;
      border:1px solid red;
   }
   .active3>div {
      display: none;
   }
	
  </style>
  
.grid-item {
   background-color: #9c9c9c;
   border: 1px solid #797777;
   text-align: center;
   line-height: 1.4vw;
   /* 行高 */
   width: 100%;
@@ -2149,4 +2077,11 @@
.active2>div {
   display: none;
}
.active3 {
   background-color: #fff;
   border:1px solid red;
}
.active3>div {
   display: none;
}
</style>