From 963dc5dd7b480376e1da6893ee30183dbd5bef50 Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期二, 18 三月 2025 14:43:06 +0800
Subject: [PATCH] 大屏更改按钮样式

---
 UI-Project/src/views/Slicecage/slicecage.vue |  797 +++++++++++++++++++++++++-------------------------------
 1 files changed, 359 insertions(+), 438 deletions(-)

diff --git a/UI-Project/src/views/Slicecage/slicecage.vue b/UI-Project/src/views/Slicecage/slicecage.vue
index e2422ac..2233a63 100644
--- a/UI-Project/src/views/Slicecage/slicecage.vue
+++ b/UI-Project/src/views/Slicecage/slicecage.vue
@@ -3,24 +3,22 @@
 import {useRouter} from "vue-router"
 import request from "@/utils/request"
 import {host, WebSocketHost} from '@/utils/constants'
-import {computed, onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
+import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
 import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
 import {ElMessage, ElMessageBox} from 'element-plus'
-import PrintLabel from "@/views/UnLoadGlass/PrintCustomLabelSemi1.vue";
-const dialogFormVisibleaDownGlasss = ref(false)
 const scanGlass = ref([])
 const {t} = useI18n()
 let language = ref(localStorage.getItem('lang') || 'zh')
+import { inject } from 'vue';
 const router = useRouter()
-const dialogFormVisible = ref(false)
-const dialoglea = ref(false)
+const timeRange = ref([])
 const dialogFormVisiblea = ref(false)
-const dialogFormVisibleb = ref(false)
 const dialogFormVisiblec = ref(false)
 const dialogFormVisibled = ref(false)
 const dialogFormVisiblee = ref(false)
 const dialogFormVisiblef = ref(false)
 const dialogFormVisibles = ref(false)
+const blindb = ref(false)
 const inkageEntity = ref('#911005');
 const requestEntity = ref('#911005');
 const mesReplyEntity = ref('#911005');
@@ -33,51 +31,47 @@
 const tableDatad = ref([])
 const tableDataf = ref([])
 const tableDatae = ref([])
-const tableDatax = ref([])
 const tableDatas = ref([])
+const tableDatass = ref([])
+const tableDatax = ref([]);
 const tableDatalack = ref([])
 const tableDataspecify = ref([])
 const tableDatacagedetails = ref([])
+const selectValuesa = reactive([]);
 const carPosition = ref([])
 const ganghua = ref('')
 const diaodu = ref('')
 const flowCardId = ref('')
 const filmsId = ref('')
-const adjustedRects = ref([]);
-const project = ref([]);
 const adjust = ref([]);
 const adjusta = ref([]);
+const adjustedRects = ref([]);
 const adjustedRectsa = ref([]);
 const adjustedRectsb = ref([]);
 const adjustedRectsc = ref([]);
-const adjustedRectsd = ref([]);
-const adjustedRectse = ref([]);
-const adjustedRectsf = ref([]);
-const adjustedRectsg = ref([]);
-const adjustedRectsh = ref([]);
+const subRectsCounts = ref([]);
+const subRectsCountsa = ref([]);
+const subRectsCountsb = ref([]);
+const subRectsCountsc = ref([]);
 const currentRow = reactive({}); // 褰撳墠琛岀殑鏁版嵁 
 const currentPage2 = ref(1)
+const globalDate = inject('globalDate');
 const inputValuesa = reactive({});
 const add = ref(false)
 const gap = ref('');
 const glassId = ref('');
-const glassType = ref('');
-const height = ref('');
-const sequence = ref('');
-const state = ref('');
-const temperingFeedSequence = ref('');
-const temperingLayoutId = ref('');
+const startSlot = ref('');
+const targetSlot = ref('');
+const taskStateList = ref('');
+const taskTypeList = ref('');
+const beginDate = ref('');
+const endDate = ref('');
 const thickness = ref('');
 const width = ref('');
 const cell1=ref(true);
 const cell2=ref(true);
 const cell3=ref(true);
 const cell4=ref(true);
-const cell5=ref(true);
-const cell6=ref(true);
-const cell7=ref(true);
-const cell8=ref(true);
-const cell9=ref(true);
 const canEdit = ref(true);
 const selectedRow = ref(null);
 const temperingtotal = ref(0);
@@ -261,6 +255,12 @@
     console.error('鍙戠敓閿欒:', error);  
   }  
 }; 
+// 鍘嗗彶浠诲姟
+const iframeUrl = ref('');
+const handlehistorical = (row) => {
+  blindb.value = true;
+  iframeUrl.value = `${window.location.origin}/#/Slicecage/slicecagehistory`;
+};
  // 鎷胯蛋
  const brokec = async(row) => {  
   try {
@@ -375,10 +375,8 @@
         type: 'warning',  
       } 
     ); 
-    if (confirmResult === 'confirm') {  
-      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/appointTemperingEngineerId",{
-        engineerId: row.engineer_id
-    });
+    if (confirmResult === 'confirm') {
+      const response = await request.post("/cacheVerticalGlass/bigStorageCageDetails/appointTemperingEngineerId?engineerId=" + row.engineerId);
     if (response.code === 200) {
       ElMessage.success(response.message);
       } else {  
@@ -389,7 +387,7 @@
     console.error('鍙戠敓閿欒:', error);  
   }  
 }; 
-// 鎸囧畾宸ョ▼
+// 鍙栨秷鎸囧畾
 const broked = async() => {  
   try {
     const confirmResult = await ElMessageBox.confirm(  
@@ -553,10 +551,6 @@
   } catch (error) {
     console.error('鍙戠敓閿欒:', error);  
   }  
-}; 
-const handlezhiban = () => {
-  dialoglea.value = true;
-  fetchFlowCardId(); 
 };
 const handleganghua = () => {
   dialogFormVisiblec.value = true;
@@ -714,34 +708,6 @@
     console.error(error);
   }
 }
-// 鍊肩彮淇℃伅
-const fetchFlowCardId = async () => {
-  try  {
-    const response = await request.post('/cacheVerticalGlass/work_assignment/selectWorkAssignment',{
-      line: 4001,
-      workingProcedure : '閽㈠寲'
-    })
-    if (response.code == 200) {
-      ElMessage.success(response.message);
-      tableDatax.value = response.data;
-      console.log(tableDatax.value);
-    } else {
-      ElMessage.error(response.message);
-    }
-}
-catch (error) {
-    console.error(error);
-  }
-}
-const handleConfirm = async () => {
-  const response = await request.post("/cacheVerticalGlass/work_assignment/updateWorkAssignment", tableDatax.value)
-  if (response.code === 200) {
-    ElMessage.success(response.message);
-    dialoglea.value = false;
-  } else {
-    ElMessage.error(response.message);
-  }
-};
 function handleRowClick(row) {  
   selectedRow.value = row; // 鏇存柊閫変腑鐨勮鏁版嵁  
 }  
@@ -784,9 +750,38 @@
     console.error(error);
   }
 }
+// 浠诲姟閲嶇疆
+const handleptask = async() => { 
+  try {
+    const confirmResult = await ElMessageBox.confirm(  
+      t('searchOrder.partasks'), 
+      t('workOrder.prompt'),  
+      {  
+        confirmButtonText: t('workOrder.yes'), 
+        cancelButtonText: t('workOrder.cancel'),
+        type: 'warning',  
+      } 
+    );
+ if (confirmResult === 'confirm') {
+  const response = await request.post('/cacheVerticalGlass/bigStorageCage/resetCage')
+    if (response.code === 200) {
+      ElMessage.success(response.message);
+      } else {
+      ElMessage.error(response.msg);
+      }  
+    }  
+  } catch (error) { 
+    console.error('鍙戠敓閿欒:', error); 
+  }  
+}; 
 let socket = null;
 const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`;
 const handleMessage = (data) => {
+  if(data.bigStorageSummary!=null){
+    tableDatass.value = data.bigStorageSummary[0]
+  }else{
+    tableDatass.value = ''
+      }
   if (data.inkageEntity != null) {
     inkageEntity.value = data.inkageEntity[0] == true ? 'green' : '#911005';
   }
@@ -826,6 +821,11 @@
     adjusta.value = ''
   }
   if(data.bigStorageCageDetailsFeedTask!=null){
+    tableDatax.value = data.bigStorageCageDetailsFeedTask[0]
+  } else {
+    tableDatax.value = ''
+  }
+  if(data.bigStorageCageDetailsFeedTask!=null){
     tableDatad.value = data.bigStorageCageDetailsFeedTask[0]
     adjust.value = data.bigStorageCageDetailsFeedTask[0].filter(rect => rect.slot !== null && rect.slot !== undefined); 
   }else{
@@ -852,34 +852,182 @@
   ganghua.value = ''
   }
   if(data.bigStorageCageInfos!=null){
-    window.localStorage.setItem('length', data.bigStorageCageInfos[0][1].length)
-  let length = window.localStorage.getItem('length')
-  adjustedRects.value = data.bigStorageCageInfos[0][1].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          })); 
-adjustedRectsa.value = data.bigStorageCageInfos[0][2].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          })); 
-adjustedRectsb.value = data.bigStorageCageInfos[0][3].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          })); 
-adjustedRectsc.value = data.bigStorageCageInfos[0][4].map(rect => ({  
-            ...rect, 
-            height: 20/length,
-            top: 29/length
-          }));
+  adjustedRects.value = data.bigStorageCageInfos[0][1].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 53/55,
+  }));
+subRectsCounts.value = data.bigStorageCageInfos[0][1].map(rect => rect.count);
+adjustedRectsa.value = data.bigStorageCageInfos[0][2].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 53/55,
+  }));
+subRectsCountsa.value = data.bigStorageCageInfos[0][2].map(rect => rect.count);
+adjustedRectsb.value = data.bigStorageCageInfos[0][3].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 53/55,
+  }));
+subRectsCountsb.value = data.bigStorageCageInfos[0][3].map(rect => rect.count);
+adjustedRectsc.value = data.bigStorageCageInfos[0][4].map((rect, index) => ({
+    id: index + 1,
+    height: 20/55,
+    top: 53/55,
+  }));
+subRectsCountsc.value = data.bigStorageCageInfos[0][4].map(rect => rect.count);
   }else{
-    adjustedRects.value = ''
+    adjustedRects.value = '',
+    adjustedRectsa.value = '',
+    adjustedRectsb.value = '',
+    adjustedRectsc.value = ''
   }
 };
-onMounted(() => {
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStyle = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  right: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRects = (rectIndex) => {
+  const count = subRectsCounts.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStyle = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginRight = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
+  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginRight,
+    top: '0px',
+    backgroundColor: '#911005',
+    right,
+  };
+};
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStylea = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  right: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRectsa = (rectIndex) => {
+  const count = subRectsCountsa.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStylea = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginRight = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
+  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginRight,
+    top: '0px',
+    backgroundColor: '#911005',
+    right,
+  };
+};
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStyleb = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  right: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRectsb = (rectIndex) => {
+  const count = subRectsCountsb.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStyleb = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginRight = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
+  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginRight,
+    top: '0px',
+    backgroundColor: '#911005',
+    right,
+  };
+};
+// 璁$畻姣忎釜澶х煩褰㈢殑鏍峰紡
+const rectStylec = (rect, index) => ({
+  position: 'absolute',
+  width: '170px',
+  right: '0px',
+  top: `${index*rect.top}px`,
+  height: `${rect.height}px`,
+});
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡鍜屾暟閲�
+const getSubRectsc = (rectIndex) => {
+  const count = subRectsCountsc.value[rectIndex];
+  const subRects = [];
+  for (let i = 0; i < count; i++) {
+    subRects.push({});
+  }
+  return subRects;
+};
+// 璁$畻姣忎釜灏忕煩褰㈢殑鏍峰紡
+const subRectStylec = (rectIndex, subIndex) => {
+  const width = '18px';
+  const marginRight = '8px';
+  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
+  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
+  return {
+    position: 'absolute',
+    width,
+    height: '100%',
+    marginRight,
+    top: '0px',
+    backgroundColor: '#911005',
+    right,
+  };
+};
+// 鏍煎紡鍖栧悗绔椂闂村苟璁$畻涓�鍛ㄥ墠鐨勬椂闂�
+const defaultTime = ref<[Date, Date]>([new Date(), new Date()]);
+function parseAndSetTime() {
+  const backendTime = new Date(globalDate);
+  const oneWeekAgo = new Date(backendTime.getTime() - 7 * 24 * 60 * 60 * 1000); // 鍑忓幓7澶�
+  console.log(formatTimestamp(oneWeekAgo));
+  console.log(oneWeekAgo);
+  timeRange.value = [formatTimestamp(oneWeekAgo), formatTimestamp(backendTime)];
+  window.localStorage.setItem('startTime', formatTimestamp(oneWeekAgo))
+}
+  onMounted(() => {
   socket = initializeWebSocket(socketUrl, handleMessage);
+  parseAndSetTime();
 });
   onUnmounted(() => {
     if (socket) {
@@ -936,6 +1084,39 @@
     return t('searchOrder.waiting');
   }  
 }
+function getcasOnea(isSame) {  
+  switch (isSame) {  
+    case 1:
+      return 'danger';  
+    case 0: 
+      return 'info';  
+  }  
+}  
+function getStatuscasOnea(isSame) {
+  switch (isSame) {
+    case 1:  
+      return t('searchOrder.same');
+    case 0:  
+      return t('searchOrder.notsame'); 
+  }  
+}
+function tableRowClassName({ row }) {
+  if (row.isSame === 1) {
+    return 'row-red-background'; // 璁剧疆绾㈣壊鑳屾櫙
+  }
+  return '';
+}
+// 鏍煎紡鍖栨椂闂存埑涓哄勾鏈堟棩鏃堕棿瀛楃涓茬殑鍑芥暟
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 鏈堜唤浠�0寮�濮嬶紝闇�瑕佸姞1锛屽苟琛ラ浂
+  const day = String(date.getDate()).padStart(2, '0'); // 琛ラ浂
+  const hours = String(date.getHours()).padStart(2, '0'); // 琛ラ浂锛堝鏋滈渶瑕佹樉绀烘椂闂达級
+  const minutes = String(date.getMinutes()).padStart(2, '0'); // 琛ラ浂锛堝鏋滈渶瑕佹樉绀烘椂闂达級
+  const seconds = String(date.getSeconds()).padStart(2, '0'); // 琛ラ浂锛堝鏋滈渶瑕佹樉绀烘椂闂达級
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
 onBeforeUnmount(() => {
   closeWebSocket();
 });
@@ -943,15 +1124,12 @@
 <template>
   <div style="height: 600px;">
     <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="primary" @click="handlexiang">{{ $t('searchOrder.cageinformation') }}</el-button>
-    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="success" @click="dialogFormVisibleb = true">{{ $t('searchOrder.productionqueue') }}</el-button>
+    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="success" @click="handlehistorical">{{ $t('searchOrder.historicaltasks') }}</el-button>
     <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="warning" @click="handleganghua">{{ $t('searchOrder.temperingqueries') }}</el-button>
-    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="info" @click="handlezhiban">{{ $t('searchOrder.dutyinformation') }}</el-button>
     <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="info" @click="dialogFormVisibles=true;fetchFlows()">{{ $t('searchOrder.searchlayout') }}</el-button>
+    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="danger" @click="handleptask()">{{ $t('searchOrder.partask') }}</el-button>
     <el-switch style="margin-top: 7px;margin-left: 10px;" v-model="ganghua" class="mb-2" :inactive-text="$t('searchOrder.temperedswitch')" @change="handleChange" />
     <el-switch style="margin-top: 7px;margin-left: 10px;" v-model="diaodu" class="mb-2" :inactive-text="$t('searchOrder.Schedulingswitch')" @change="handlediaodu" />
-    <el-button style="margin-top: 7px;margin-left: 10px;" id="searchButton" type="primary"
-      @click="dialogFormVisibleaDownGlasss = true">{{ $t('searchOrder.Labelprinting') }}
-    </el-button>
     <div id="dotClass">
         <div>{{ $t('searchOrder.inkageEntity') }}</div>
         <i :style="{ marginTop: '2px', backgroundColor: inkageEntity, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>
@@ -968,6 +1146,29 @@
     <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
       <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 300px;">
        <el-table height="300px" ref="table" 
+        @selection-change="handleSelectionChange"
+        :row-class-name="tableRowClassName"
+        :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
+          <el-table-column prop="glassId" align="center" :label="$t('searchOrder.intoglassid')" min-width="140" />
+          <el-table-column prop="startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" />
+          <el-table-column prop="targetSlot" align="center" :label="$t('searchOrder.targetlocation')" min-width="120" />
+          <el-table-column prop="taskState" align="center" :label="$t('searchOrder.taskstatus')" min-width="120">
+          <template #default="scope">
+            <el-tag type="success" >{{ scope.row.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}</el-tag>
+          </template>
+          </el-table-column>
+          <el-table-column prop="isSame" align="center" :label="$t('searchOrder.whethersame')" min-width="120">
+          <template #default="scope">
+        <el-tag :type="getcasOnea(scope.row.isSame)">
+          {{ getStatuscasOnea(scope.row.isSame) }}
+        </el-tag>
+      </template>
+          </el-table-column>
+        </el-table>
+       </div>
+    </el-card>
+    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
+      <el-table height="300px" ref="table" 
        :data="tableDatac" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="glassId" align="center" :label="$t('searchOrder.outputglassID')" min-width="140" />
          <el-table-column prop="startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" />
@@ -978,21 +1179,6 @@
            </template>
          </el-table-column>
        </el-table>
-       </div>
-    </el-card>
-    <el-card style="flex: 1;margin-left: 10px;margin-top: 10px;" v-loading="loading">
-      <el-table height="300px" ref="table" 
-        @selection-change="handleSelectionChange"
-        :data="tableDatad" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
-          <el-table-column prop="glassId" align="center" :label="$t('searchOrder.intoglassid')" min-width="140" />
-          <el-table-column prop="startSlot" align="center" :label="$t('searchOrder.startposition')" min-width="120" />
-          <el-table-column prop="targetSlot" align="center" :label="$t('searchOrder.targetlocation')" min-width="120" />
-          <el-table-column prop="taskState" align="center" :label="$t('searchOrder.taskstatus')" min-width="120">
-          <template #default="scope">
-            <el-tag type="success" >{{ scope.row.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}</el-tag>
-          </template>
-          </el-table-column>
-        </el-table>
             </el-card>
   </div>
     <div style="padding: 10px;display: flex;height:130px;">
@@ -1009,7 +1195,7 @@
     </div>
 <!-- // 鐖剁骇妗� -->
 <div class="img-dlpl" >
-    <div class="img-car1" :style="'z-index:999;left:270px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
+    <div class="img-car1" :style="'z-index:999;left:290px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
       <div  
       v-for="(rect, index) in adjusta"  
       :key="rect.id"  
@@ -1023,7 +1209,7 @@
     >
     </div>
     </div>
-    <div class="img-car4" :style="'z-index:999;left:740px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
+    <div class="img-car4" :style="'z-index:999;left:735px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
       <div  
       v-for="(rect, index) in adjust"  
       :key="rect.id"  
@@ -1038,254 +1224,59 @@
     </div>
     </div>
     <div style="position: relative;">
-    <div v-show="cell1" style="width: 227px;height: 29px;position: relative;top:50px;left: 495px;">
-      <div  
-      v-for="(rect, index) in adjustedRects"  
-      :key="rect"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+    <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 525px;">
+      <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRects(rectIndex)"
+      :key="subIndex"
+      :style="subRectStyle(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
- <div v-show="cell2" style="width: 227px;height: 29px;position: relative;top:51px;left: 495px;">
-  <div  
-      v-for="(rect, index) in adjustedRectsa"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+ <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 525px;">
+    <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRectsa(rectIndex)"
+      :key="subIndex"
+      :style="subRectStylea(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
-  <div v-show="cell3" style="width: 227px;height: 29px;position: absolute;top:110px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsb"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+  <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 525px;">
+    <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRectsb(rectIndex)"
+      :key="subIndex"
+      :style="subRectStyleb(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
-  <div v-show="cell4" style="width: 227px;height: 29px;position: absolute;top:140px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsc"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell5" style="width: 227px;height: 29px;position: absolute;top:170px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsd"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell6" style="width: 227px;height: 29px;position: absolute;top:241px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectse"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell7" style="width: 227px;height: 29px;position: absolute;top:271px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsf"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell8" style="width: 227px;height: 29px;position: absolute;top:301px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsg"  
-      :key="rect.id"  
-      :style="{
-        // display:'flex',
-       position: 'absolute',
-       width: '227px',
-      //  backgroundColor: 'red',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-      // border:'1px solid black',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
-    </div>
-    </div>
-  <div v-show="cell9" style="width: 227px;height: 29px;position: absolute;top:332px;left: 495px;">
-    <div  
-      v-for="(rect, index) in adjustedRectsh"  
-      :key="rect.id"  
-      :style="{
-       position: 'absolute',
-       width: '227px',
-       left: '0px',
-       top: index*rect.top+`px`,
-       height: `${rect.height}px`,
-       }"  
-    >
-    <div  
-      v-for="(rects, index) in rect.bigStorageCageDetails"  
-      :key="rects"  
-      :style="{
-        float:'left',
-       width: '18px',
-       height: `${rect.height}px`,
-       backgroundColor: '#911005',
-       top: '0px',
-       marginRight: rects.gap/5000*227+'px'
-       }"  
-    >
-      </div>
+  <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 525px;">
+    <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)">
+    <div
+      v-for="(subRect, subIndex) in getSubRectsc(rectIndex)"
+      :key="subIndex"
+      :style="subRectStylec(rectIndex, subIndex)"
+    ></div>
     </div>
     </div>
 </div>
 </div>
+<el-card style="flex: 1;margin-left: 1220px;margin-top: -510px;" v-loading="loading">
+      <div style="width: 100%; height: calc(100% - 35px); overflow-y: auto;max-height: 420px;">
+       <el-table height="420px" ref="table" border 
+       :data="tableDatass" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
+         <el-table-column fixed prop="engineerId" align="center" :label="$t('Mounting.project')" min-width="100" />
+         <el-table-column prop="countTemp" align="center" :label="$t('searchOrder.totalfurnaces')" min-width="68" />
+         <el-table-column prop="countGlass" align="center" :label="$t('searchOrder.cagesnumber')" min-width="82" />
+         <el-table-column prop="area" align="center" :label="$t('large.are')" min-width="70" />
+         <el-table-column prop="fullTemp" align="center" :label="$t('searchOrder.fullfurnaces')" min-width="82" />
+         <el-table-column prop="countSlot" align="center" :label="$t('searchOrder.slotnumber')" min-width="96" />
+         <el-table-column prop="percent" align="center" :label="$t('searchOrder.progress')" min-width="80" />
+       </el-table>
+       </div>
+    </el-card>
+
   </div>
   <el-dialog v-model="add" top="10vh" width="70%" :title="$t('searchOrder.addcage')" >
     <div style="margin-bottom: 20px">
@@ -1452,46 +1443,18 @@
     </div>
   </div>
   </el-dialog>
-<el-dialog v-model="dialogFormVisibleb" top="5vh" width="85%" :title="$t('searchOrder.productionqueue')">
-    <el-table  ref="table" style="margin-top: 20px;height: 700px;"
-        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
-          <el-table-column prop="glassId" fixed align="center" :label="$t('searchOrder.glassID')" min-width="150"/>
-          <el-table-column prop="flowCardId" fixed align="center" :label="$t('searchOrder.processcards')" min-width="120" />
-          <el-table-column prop="width" align="center" :label="$t('searchOrder.width')"  min-width="80" />
-          <el-table-column prop="height" align="center" :label="$t('searchOrder.height')" min-width="80" />
-          <el-table-column prop="thickness" align="center" :label="$t('searchOrder.thickness')" min-width="80" />
-          <el-table-column prop="filmsid" align="center" :label="$t('searchOrder.coatingtypes')" min-width="80" />
-          <el-table-column
-            align="center"
-            :label="$t('searchOrder.acceptshorizontal')"
-            min-width="150"
-            prop="ishorizontal"
-          >
-          <template #default="scope">  
-        <el-tag :type="getStatusTypea(scope.row.ishorizontal)">  
-          {{ getStatusTexta(scope.row.ishorizontal) }}  
-        </el-tag>  
-      </template> 
-          </el-table-column>
-          <el-table-column prop="temperingLayoutId" align="center" :label="$t('searchOrder.layoutID')" min-width="120" />
-          <el-table-column prop="temperingFeedSequence" align="center" :label="$t('searchOrder.picturesequence')" min-width="120" />
-          <el-table-column prop="xCoordinate" align="center" :label="$t('searchOrder.xcoordinates')" min-width="80" />
-          <el-table-column prop="yCoordinate" align="center" :label="$t('searchOrder.ycoordinates')" min-width="80" />
-          <el-table-column prop="angle" align="center" :label="$t('searchOrder.rotationangle')" min-width="150" />
-          <el-table-column
-            align="center"
-            :label="$t('searchOrder.state')"
-            min-width="80"
-            prop="state"
-          >
-          <template #default="scope">  
-        <el-tag :type="getStatusTypeb(scope.row.state)">  
-          {{ getStatusTextb(scope.row.state) }}  
-        </el-tag>  
-      </template> 
-          </el-table-column>
-        </el-table>
-</el-dialog>
+<!-- 鍘嗗彶浠诲姟 -->
+<el-dialog v-model="blindb" top="10vh" width="95%">
+     <iframe 
+     :src="iframeUrl" 
+     marginwidth="2000px"
+     marginheight="2000px"
+     width="100%" 
+     height="750px" 
+     frameborder="0"
+     ></iframe>
+  </el-dialog>
+<!-- 閽㈠寲鏌ヨ -->
 <el-dialog v-model="dialogFormVisiblec" top="5vh" width="85%" :title="$t('searchOrder.temperingqueries')">
   <div style="margin-bottom: 20px">
       <el-form>
@@ -1677,31 +1640,7 @@
           <el-table-column prop="ycoordinate" align="center" :label="$t('searchOrder.ycoordinates')" min-width="80" />
         </el-table>
 </el-dialog>
-<el-dialog v-model="dialoglea" top="15vh" width="70%" :title="$t('searchOrder.dutyinformation')">
-    <el-table  ref="table" style="margin-top: 20px;height: 300px;"
-        :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
-          <el-table-column prop="line" fixed align="center" :label="$t('searchOrder.line')"/>
-          <el-table-column prop="workProcesses" fixed align="center" :label="$t('searchOrder.process')" />
-          <el-table-column prop="teamsGroupsName" align="center" :label="$t('searchOrder.team')">
-        <template #default="{ row }">  
-          <el-input v-model="row.teamsGroupsName" autocomplete="off" min-width="150"/>  
-        </template>  
-      </el-table-column>
-          <el-table-column prop="deviceName" align="center" :label="$t('searchOrder.basic')">
-            <template #default="{ row }">  
-          <el-input v-model="row.deviceName" autocomplete="off" min-width="150"/>  
-        </template>
-        </el-table-column>
-        </el-table>
-        <template #footer>
-      <div id="dialog-footer">
-        <el-button type="primary" @click="handleConfirm">
-          {{ $t('searchOrder.makesure') }}
-        </el-button>
-        <el-button @click="dialoglea = false">{{ $t('searchOrder.cancel') }}</el-button>
-      </div>
-    </template>
-</el-dialog>
+<!-- 闈為挗鍖� -->
 <el-dialog v-model="dialogFormVisibles" top="5vh" width="85%" :title="$t('searchOrder.searchlayout')">
   <el-table  ref="table" style="margin-top: 20px;height: 500px;"
         :data="tableDatas" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
@@ -1713,12 +1652,13 @@
           <el-table-column prop="realCount" align="center" :label="$t('searchOrder.numbercages')" min-width="150" />
           <el-table-column prop="lackCount" align="center" :label="$t('searchOrder.missingquantity')" min-width="150" />
           <el-table-column prop="damageCount" align="center" :label="$t('searchOrder.breakquantity')" min-width="150" />
-          <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center" width="250">
+          <el-table-column fixed="right" :label="$t('searchOrder.operate')" align="center" width="500">
             <template #default="scope">
               <el-button size="mini" type="text" plain @click="brokee(scope.row,1)">{{ $t('searchOrder.specifytempering') }}</el-button>
               <el-button size="mini" type="text" plain @click="brokee(scope.row,0)">{{ $t('searchOrder.specifyout') }}</el-button>
               <el-button size="mini" type="text" plain @click="brokek(scope.row)">{{ $t('searchOrder.specifyengineerid') }}</el-button>
               <el-button size="mini" type="text" plain @click="handlelack(scope.row)">{{ $t('hellow.missingnumber') }}</el-button>
+              <el-button size="mini" type="text" plain @click="handlecagedetails(scope.row)">{{ $t('searchOrder.cagedetails') }}</el-button>
             </template>
         </el-table-column>
         </el-table>
@@ -1734,34 +1674,12 @@
         </el-table-column>
         </el-table> -->
 </el-dialog>
-<el-dialog v-model="dialogFormVisibleaDownGlasss" top="2vh" width="97%" :title="$t('searchOrder.filminformation')">
-          <div style="display:flex;justify-content: space-around;">
-            <el-card
-              style="display: flex; justify-content: center; align-items: center; width: 800px; height: 800px;position: relative;">
-              <div
-                :style="{ width: scanGlass.width + 'px', height: scanGlass.height + 'px', backgroundColor: '#e1f3d8', transform: 'scale(' + 800 / (scanGlass.width > scanGlass.height ? scanGlass.width : scanGlass.height) + ')' }">
-
-              </div>
-              <div style="font-size: 50px; text-align: center;position: absolute;top:0px;left:200px;">
-                <div>{{ $t('searchOrder.currentglassinformation') }}</div>
-                <div>
-                  <el-button type="primary" @click="open1(scanGlass)">{{ $t('searchOrder.printlabels') }}</el-button>
-                </div>
-                <div>{{ scanGlass.flowCardId }}</div>
-                <div>{{ scanGlass.layer }}</div>
-                <div>{{ scanGlass.glassId }}</div>
-                <div>{{ scanGlass.width }}</div>
-                <div>{{ scanGlass.height }}</div>
-              </div>
-            </el-card>
-          </div>
-        </el-dialog>
         <el-dialog id="sizePrintCalrd1" v-model="dialogTableVisible1" destroy-on-close>
     <print-label id="printFlowCard" :printFlowCardId="printFlowCardId" :printLayer="printLayer"
                  :printGlassId="printGlassId" style=""/>
   </el-dialog>
 </template>
-<style scoped>
+<style>
 #dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
 #dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
 #dialog-footer{
@@ -1855,7 +1773,7 @@
 .img-dlpl{
   margin-left: 20px;
   margin-top: 0px;
-  background-image:url('../../assets/dlpl9.png');
+  background-image:url('../../assets/ganghuaqian.png');
   background-repeat: no-repeat;
   background-attachment: local;
   min-height: 400px;
@@ -1867,7 +1785,7 @@
 }
 .img-car1{
   display: flex;
-  background-image:url('../../assets/lp9.png');
+  background-image:url('../../assets/xiaoche.png');
   position: absolute;
   background-repeat: no-repeat;
   background-attachment: local;
@@ -1880,7 +1798,7 @@
 }
 .img-car4{
   display: flex;
-  background-image:url('../../assets/lpa9.png');
+  background-image:url('../../assets/xiaoche.png');
   position: absolute;
   background-repeat: no-repeat;
   background-attachment: local;
@@ -1907,4 +1825,7 @@
   margin-top: 20px;
   margin-bottom: 10px;
 }
+.row-red-background {
+  background-color: #CDAF95 !important;
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0