解决冲突

wxw

2024-08-30 d9e59ed2e947aff29b7c21a9b0e8b6e12d741692

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

@@ -1,60 +1,73 @@
<template>
   <div class="sys-user-container">
     <splitpanes>
      <pane size="10">
        <el-collapse v-model="activeName">
         <el-collapse-item title="设备控制" name="1">
           <el-card
            class="box-card"
            shadow="hover">
            <el-switch v-model="value1" active-text="" inactive-text="程序服务"></el-switch>
           </el-card>
           <el-card
            class="box-card"
            shadow="hover"
            style="margin-top: 3px;">
            <el-switch v-model="value2" active-text="" inactive-text="脱机模式"></el-switch>
           </el-card>
           <el-card
            class="box-card"
            shadow="hover"
            style="margin-top: 3px;">
            <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: 380px;">
            <el-card
              v-for="(stacker, index) in stackers"
              :key="index"
              class="box-card"
              shadow="hover"
              style="margin-top: 3px;">
              <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"
            style="margin-top: 3px;">
            <el-switch v-model="conveyor.value" :inactive-text="`${index + 1}楼输送线`"></el-switch>
           </el-card>
         </el-collapse-item>
        </el-collapse>
      </pane>
      <pane size="90" style="position: relative;background-color: #fff;">
         <el-card shadow="hover" :body-style="{ paddingBottom: '0', padding: '10px' }">
      <el-row>
         <el-col :span="3">
            <el-collapse v-model="activeName">
               <el-collapse-item title="设备控制" name="1">
                  <el-card class="box-card" shadow="hover">
                     <el-switch v-model="state.boRunningState" active-text="" inactive-text="程序服务"></el-switch>
                  </el-card>
                  <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                     <el-switch v-model="state.boOffline" active-text="" inactive-text="脱机模式"></el-switch>
                  </el-card>
                  <el-card class="box-card" shadow="hover" style="margin-top: 3px;">
                     <el-switch v-model="state.boRefresh" 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;">
                     <el-card v-for="(stacker, index) in stackers" :key="index" class="box-card" shadow="hover">
                        <el-switch disabled  v-model="stacker.isConn" :inactive-text="`${stacker.text}`"></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">
                     <el-switch disabled  v-model="conveyor.isConn" :inactive-text="`${conveyor.text}`"></el-switch>
                  </el-card>
               </el-collapse-item>
            </el-collapse>
         </el-col>
         <el-col :span="21">
            <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>
            <div style="margin: 40px; height: 50%;">
               <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>
               <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 }]">
                        <div>{{ cell.Code }}</div>
                     </div>
                  </div>
               </div>
            </div>
         </el-col>
      </el-row>
   </div>
</template>

<script lang="ts" setup>
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">
@@ -101,87 +114,103 @@
  import { Vue2 } from 'vue-demi';


  const activeName = ['1', '2', '3'];
  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 },
  ]);
const state = ref<any>({});
const stackers = ref<any>({});
const conveyors = ref<any>({});
// 查询状态
const handleQuery = async () => {
   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 || s.type == 4);
};
handleQuery();

//连接signalR 监听变更
onMounted(async () => {
   signalR.off('PublicPlcConn');
   signalR.on('PublicPlcConn', (data: any) => {
      console.log(data)
      if (data.type === 0) {
         // 替换 stackers 中的相应项
         const index = stackers.value.findIndex(item => item.id === data.id);
         if (index !== -1) {
            stackers.value[index] = data;
         }
      } else if (data.type === 1 || data.type === 4) {
         // 替换 conveyors 中的相应项
         const index = conveyors.value.findIndex(item => item.id === data.id);
         if (index !== -1) {
            conveyors.value[index] = data;
         }
      }
      console.log(stackers.value[0].isConn)
   });
});

  //堆垛机数据
  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: 3, Code: '003', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 4, Code: '004', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 5, Code: '005', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 6, Code: '006', LineCode:'02',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:50 },
   { Id: 7, Code: '007', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 8, Code: '008', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 9, Code: '009', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 10, Code: '010', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 11, Code: '011', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 12, Code: '012', LineCode:'03',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:10 },
   { Id: 13, Code: '013', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 14, Code: '014', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 15, Code: '015', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 16, Code: '016', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 17, Code: '017', LineCode:'04',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:10 },
   { Id: 18, Code: '018', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 19, Code: '019', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { 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: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: 27, Code: '027', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 28, Code: '028', LineCode:'06',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:0 },
   { Id: 29, Code: '029', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 30, Code: '030', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 31, Code: '031', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 32, Code: '032', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 33, Code: '033', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 34, Code: '034', LineCode:'07',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:10 },
   { Id: 35, Code: '035', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 36, Code: '036', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 37, Code: '037', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 38, Code: '038', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 39, Code: '039', LineCode:'08',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:10 },
   { Id: 40, Code: '040', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 41, Code: '041', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 42, Code: '042', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 43, Code: '043', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 44, Code: '044', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 45, Code: '045', LineCode:'09',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:10 },
   { Id: 46, Code: '046', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 47, Code: '047', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 48, Code: '048', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 49, Code: '049', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
   { Id: 50, Code: '050', LineCode:'10',EndLocat:'',IsShow: 0, IsUse: 0,BoxHeight:10 },
   { Id: 51, Code: '051', LineCode:'',EndLocat:'',IsShow: 1, IsUse: 0,BoxHeight:10 },
  ];
const activeName = ['1', '2', '3'];
const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);

  //一层输送线数据
  const cellsDataOne = [
     { Id: 1, Code: '001', IsShow: 0, IsUse: 0 },
//堆垛机数据
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: 10 },
   { Id: 3, Code: '003', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 4, Code: '004', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 5, Code: '005', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 6, Code: '006', LineCode: '02', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 50 },
   { Id: 7, Code: '007', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 8, Code: '008', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 9, Code: '009', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 10, Code: '010', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 11, Code: '011', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 12, Code: '012', LineCode: '03', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 10 },
   { Id: 13, Code: '013', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 14, Code: '014', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 15, Code: '015', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 16, Code: '016', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 17, Code: '017', LineCode: '04', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 10 },
   { Id: 18, Code: '018', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 19, Code: '019', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { 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: 200 },
   { 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: 27, Code: '027', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 28, Code: '028', LineCode: '06', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 0 },
   { Id: 29, Code: '029', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 30, Code: '030', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 31, Code: '031', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 32, Code: '032', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 33, Code: '033', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 34, Code: '034', LineCode: '07', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 10 },
   { Id: 35, Code: '035', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 36, Code: '036', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 37, Code: '037', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 38, Code: '038', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 39, Code: '039', LineCode: '08', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 10 },
   { Id: 40, Code: '040', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 41, Code: '041', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 42, Code: '042', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 43, Code: '043', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 44, Code: '044', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 45, Code: '045', LineCode: '09', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 10 },
   { Id: 46, Code: '046', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 47, Code: '047', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 48, Code: '048', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 49, Code: '049', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
   { Id: 50, Code: '050', LineCode: '10', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 10 },
   { Id: 51, Code: '051', LineCode: '', EndLocat: '', IsShow: 1, IsUse: 0, BoxHeight: 10 },
];

//一层输送线数据
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 },
@@ -1927,124 +1956,147 @@
  //输送线数据
  let cellsData= ref(cellsDataOne);

  const isPlain1 = ref(false);//一层
  const isPlain2 = ref(true);//二层
  const isPlain3 = ref(true);//三层
  //切换层平面
  function floorTogglePlain(buttonNumber) {
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;
      isPlain2.value = true;
      isPlain3.value = true;

        cellsData.value=cellsDataOne;
      cellsData.value = cellsDataOne;
   } else if (buttonNumber === 2) {
      isPlain2.value = !isPlain2.value;
      isPlain1.value =true;
      isPlain3.value =true;
      isPlain1.value = true;
      isPlain3.value = true;

        cellsData.value=cellsDataTwo;
      cellsData.value = cellsDataTwo;
   } else if (buttonNumber === 3) {
      isPlain3.value = !isPlain3.value;
      isPlain1.value =true;
      isPlain2.value =true;
      isPlain1.value = true;
      isPlain2.value = true;

        cellsData.value=cellsDataThree;
      cellsData.value = cellsDataThree;
   }
  }
  </script>
  
  <style scoped>
   .box-card{
      height:30px;
      padding: 0;
      display: flex;
      align-items: center;
   }
   .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;
   }
   .grid-container-line{
      display: grid;
      grid-template-columns: repeat(51, 30px); /* 每列宽度 */
      grid-template-rows: repeat(1, 310px);  /* 每行高度 */
      gap: 0px; /* Gap between cells */
      margin-top: 25px;
   }
   .grid-item-line{
      text-align: center;
      line-height: 50px; /* Vertical center the content */
      font-size: 12px; /* Adjust font size */
      width: 30px;
      height: 100%;
      color: #fff;
      font-size: 14px;
		
      display: flex;
      justify-content: center;
   }
   .grid-item-line-end{
      width:80px;
      height: 25px;
      border: 2px solid #797777;
      background-color: rgb(182, 180, 180);
      position: absolute;
      margin-top: -25px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
       text-align: center;
       color: #fff;
   }
   .grid-item-line-box{
      width: 20px;
      height: 20px;
      background-color:rgb(97, 250, 145);
      position: absolute;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center; /* Added to vertically center the text */
       text-align: center;
       color: black;
   }
   .grid-item-line-child{
      height: 100%;
      width: 3px;
      background-color: #9c9c9c;
   }
}
</script>

   .card{
      width: 100%;
      position:absolute;
      border-top: none;
      z-index: 90;
      margin-top: 310px;
   }
     .grid-container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(51, 30px); /* 每列宽度 */
      grid-template-rows: repeat(12, 35px);  /* 每行高度 */
      gap: 0px; /* Gap between cells */
   }
<style scoped>
.box-card {
   height: 30px;
   padding: 0;
   display: flex;
   align-items: center;
   margin-top: 3px;
}

.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;
}

.grid-container-line {
   display: grid;
   grid-template-columns: repeat(51, 1fr);
   /* 自适应列宽 */
   grid-template-rows: 1fr;
   /* 自适应行高 */
   gap: 0;
   margin-top: 25px;
   width: 100%;
   /* 宽度自适应 */
   height: 1fr;
   /* 高度自适应 */
}

.grid-item-line {
   text-align: center;
   line-height: 50px;
   /* Vertical center the content */
   font-size: 12px;
   /* Adjust font size */
   width: 30px;
   height: 100%;
   color: #fff;
   font-size: 14px;

   display: flex;
   justify-content: center;
}

.grid-item-line-end {
   width: 80px;
   height: 25px;
   border: 2px solid #797777;
   background-color: rgb(182, 180, 180);
   position: absolute;
   margin-top: -25px;
   display: flex;
   text-align: center;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: #fff;
}

.grid-item-line-box {
   width: 20px;
   height: 20px;
   background-color: rgb(97, 250, 145);
   position: absolute;
   display: flex;
   text-align: center;
   justify-content: center;
   align-items: center;
   /* Added to vertically center the text */
   text-align: center;
   color: black;
}

.grid-item-line-child {
   height: 220px;
   width: 3px;
   background-color: #000000;
}

.card {
   width: 100%;
   position: absolute;
   border-top: none;
   z-index: 90;
   margin-top: 310px;
}

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

   .grid-item {
      background-color: #9c9c9c;
@@ -2073,4 +2125,28 @@
   }
   
  </style>
  
  
.grid-item {
   background-color: #9c9c9c;
   border: 1px solid #797777;
   text-align: center;
   line-height: 1.4vw;
   /* 行高 */
   width: 100%;
   /* 自适应宽度 */
   height: 100%;
   /* 自适应高度 */
   color: #fff;
   font-size: 0.7vw;
}

.active {
   background-color: rgb(57, 141, 251);
   /* IsUse 为1时背景颜色为蓝色 */
   color: #f5f5f5;
}

.active2>div {
   display: none;
}
</style>