解决冲突

wxw

2024-08-30 d9e59ed2e947aff29b7c21a9b0e8b6e12d741692

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

@@ -1,32 +1,31 @@
<template>
   <div class="sys-user-container">
     <splitpanes>
      <pane size="22">
      <el-row>
         <el-col :span="5">
            <el-row style="display: flex;text-align: center;justify-content: center;height: 40px;">
                <el-button type="warning" style="width: 95%;height: 30px;">报警复位</el-button>
               <el-button type="warning" style="width: 95%;height: 30px;" @click="reset">报警复位</el-button>
            </el-row>
            <el-table :data="tableData" border style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
                <el-table-column prop="variable" label="变量" sortable width="80"></el-table-column>
                <el-table-column prop="desc" label="描述" width="120"></el-table-column>
                <el-table-column prop="address" label="位置" width="80"></el-table-column>
                <el-table-column prop="date" label="时间" sortable width="80"></el-table-column>
            <el-table :data="paginatedData" border style="width: 100%" v-loading="loading"
               :default-sort="{ prop: 'date', order: 'descending' }">
               <el-table-column prop="alarmCode" label="变量" align="center"></el-table-column>
               <el-table-column prop="alarmName" label="描述" align="center"></el-table-column>
               <el-table-column prop="stationNum" label="位置" align="center"></el-table-column>
               <el-table-column prop="alarmTime" label="时间" align="center"></el-table-column>
            </el-table>
      </pane>
      <pane size="78" style="position: relative;background-color: #fff;">
         <el-card shadow="hover" :body-style="{ paddingBottom: '0', padding: '10px' }">
            <el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
               :total="tableParams.total" :page-sizes="[10, 20, 50, 100, 200, 500]" size="small" background=""
               @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="prev, pager, next" />
         </el-col>
         <el-col :span="19">
            <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 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 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>
@@ -37,44 +36,80 @@
                  </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 }]"
                     >
                            <!-- 临时用的code需增加点位字段替换 -->
                  <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>
         </el-card>
      </pane>
     </splitpanes>
            </div>
         </el-col>
      </el-row>
   </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, onMounted, computed } from 'vue';
  import 'splitpanes/dist/splitpanes.css';
  import { Vue2 } from 'vue-demi';
import { listWcsAlarmInfo, resetWcsAlarmInfo } from '/@/api/wcs/wcsAlarmInfo';
import { signalR } from './signalR';
const tableParams = ref({
   page: 1,
   pageSize: 10,
   total: 0,
});
const loading = ref(false);
const tableData = ref<any>([]);
const handleQuery = async () => {
   loading.value = true;
   var res = await listWcsAlarmInfo({ status: 1 });
   tableData.value = res.data.result;
   tableParams.value.total = tableData.value.length;
   console.log(tableParams.value.total);
   loading.value = false;
};
handleQuery();

  const  tableData= [{
          variable:'MB100.0',
          desc:'报警描述',
          address: '205工位',
          date: '2024-08-29'          
        }, {
          variable:'MB102.0',
          desc:'报警描述',
          address: '202工位',
          date: '2024-08-28'
        }];
//复位报警
const reset = async () => {
   await resetWcsAlarmInfo();
}
//连接signalR 监听变更
onMounted(async () => {
   signalR.off('PublicAlarm');
   signalR.on('PublicAlarm', (data: any) => {
      console.log(data)
      var listAlarm = tableData.value.filter(t => t.id == data.id);
      if (listAlarm.length == 0) {
         tableData.value.unshift(data)
         tableParams.value.total = tableData.value.length;
      }
      else {
         //如果已经存在就更新数据
         const index = tableData.value.findIndex(t => t.id == data.id);
         tableData.value.splice(index, 1, data);
      }
   });
});

// 改变页面容量
const handleSizeChange = (val: number) => {
   tableParams.value.pageSize = val;
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
   tableParams.value.page = val;
};
//表格显示数据
const paginatedData = computed(() => {
   const start = (tableParams.value.page - 1) * tableParams.value.pageSize
   const end = start + tableParams.value.pageSize
   return tableData.value.slice(start, end)
})


  //堆垛机数据
  const cellsDataLine=[
@@ -100,7 +135,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:300 },
   { Id: 23, Code: '023', LineCode: '05', EndLocat: '', IsShow: 0, IsUse: 0, BoxHeight: 100 },
   { 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 },
@@ -1913,6 +1948,7 @@
      display: flex;
      align-items: center;
   }

   .card-page{
      width: 100%;
      height: 30px;
@@ -1922,28 +1958,40 @@
      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, 25px); /* 每列宽度 */
      grid-template-rows: repeat(1, 310px);  /* 每行高度 */
      gap: 0px; /* Gap between cells */
   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: 25px;
   line-height: 50px;
   /* Vertical center the content */
   font-size: 12px;
   /* Adjust font size */
   width: 30px;
      height: 100%;
      color: #fff;
      font-size: 14px;
@@ -1951,6 +1999,7 @@
      display: flex;
      justify-content: center;
   }

   .grid-item-line-end{
      width:80px;
      height: 25px;
@@ -1965,22 +2014,25 @@
       text-align: center;
       color: #fff;
   }

   .grid-item-line-box{
      width: 15px;
      height: 15px;
   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 */
   align-items: center;
   /* Added to vertically center the text */
       text-align: center;
       color: black;
   }

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

   .card{
@@ -1990,32 +2042,74 @@
      z-index: 90;
      margin-top: 310px;
   }

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

   .grid-item {
      background-color: #9c9c9c;
      border: 1px solid #797777;
      text-align: center;
      line-height: 35px;
      font-size: 12px;
      width: 25px;
      height: 30px;
   line-height: 1.4vw;
   /* 行高 */
   width: 100%;
   /* 自适应宽度 */
   height: 100%;
   /* 自适应高度 */
      color: #fff;
      font-size: 14px;
   font-size: 0.7vw;
   }

.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;
   border: 1px solid #797777;
   text-align: center;
   line-height: 1.4vw;
   /* 行高 */
   width: 100%;
   /* 自适应宽度 */
   height: 100%;
   /* 自适应高度 */
   color: #fff;
   font-size: 0.6vw;
}

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

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