zck 6 ماه پیش
والد
کامیت
c3a5aab5ac

+ 38 - 6
src/api/mes/job.js

@@ -990,20 +990,52 @@ export const Apibomlistarr = (params) => {
   })
 }
 
-//获取近期报工历史订单信息数据
-export const order_Patchwork = (params) => {
+
+
+
+//成品入仓合格率左侧菜单
+export const GetWfpDataLeft = (params) => {
+  return service({
+    url: '/mes_server/work_order/GetWfpDataLeft',
+    method: 'get',
+    params
+  })
+}
+
+
+//成品入仓订单列表
+export const GetWfpList = (params) => {
   return service({
-    url: '/mes_server/work_order/order_Patchwork',
+    url: '/mes_server/work_order/GetWfpList',
     method: 'get',
     params
   })
 }
-//补打小票
-export const Patchwork = (params) => {
+
+
+//成品入仓子订单列表
+export const GetSubOrderStats = (params) => {
   return service({
-    url: '/mes_server/work_order/Patchwork',
+    url: '/mes_server/work_order/GetSubOrderStats',
     method: 'get',
     params
   })
 }
 
+//查询设备列表和当前状态-左侧菜单
+export const Meter = (params) => {
+  return service({
+    url: '/mes_server/work_order/Meter',
+    method: 'get',
+    params
+  })
+}
+
+//查询电表当前状态数据
+export const StatisticEleDay = (params) => {
+  return service({
+    url: '/mes_server/work_order/StatisticEleDay',
+    method: 'get',
+    params
+  })
+}

+ 3 - 3
src/view/inventory/fabricsummary.vue

@@ -148,8 +148,8 @@
 					<el-table-column  align="left" label="定额门幅" prop="定额门幅" width="90" />
 					<el-table-column  align="left" label="实裁数量" prop="实裁数量" width="90" />
 					<el-table-column  align="left" label="出库数量" prop="出库数量" width="90" />
-					<el-table-column  align="left" label="领用数量" prop="领用数量" width="90" />
-					<el-table-column  align="left" label="入仓总量" prop="入仓总量" width="90" />
+					<el-table-column  align="left" label="出库总量" prop="领用数量" width="90" />
+					<!-- <el-table-column  align="left" label="入仓总量" prop="入仓总量" width="90" /> -->
 					<el-table-column  align="left" label="面料结余" prop="面料结余" width="90" />
 					<el-table-column  align="left" label="投料单位" prop="投料单位" width="90" />
 					<el-table-column  align="left" label="操作人员" prop="操作人员" width="90" />
@@ -341,7 +341,7 @@ const exportToExcel = ()=>{
 //自动聚焦光标input
 const getMachineMacdata = async () => {
   mlscgdformData['日期'] = currentDates
-  restableData.splice(0, restableData.length);//清空表格
+//   restableData.splice(0, restableData.length);//清空表格
   
 	setTimeout(() => {
 		const inputElement = document.getElementById('searchInput');

+ 5 - 72
src/view/inventory/tuihuan.vue

@@ -505,22 +505,7 @@ const search_onSubmit = async ()  => {
       restableData.splice(0, restableData.length);//清空表格
       //订单信息数据查询【接口】
       const orderSearchdata = await OutOrderSearch({search:add_searchInfo.value});
-      // if(orderSearchdata.data.length === 1){
-      //     _orderid.value = orderSearchdata.data[0]['订单编号']
-      //     add_searchInfo.value = orderSearchdata.data[0]['订单编号']
-      //     ddhformData.ddh = orderSearchdata.data[0]['订单编号']
-      //     ddhformData.kh = orderSearchdata.data[0]['客户编号']
-      //     ddhformData.sckh = orderSearchdata.data[0]['生产款号']
-      //     ddhformData.ks = orderSearchdata.data[0]['款式']
-      //     add_lysearchInfo.value = add_searchInfo.value
-          
-      //     const gitReceiptNumberdata = await gitReceiptNumber({number:'TH'});
-      //     danhao.value = gitReceiptNumberdata.data.number
-      //     chukuren.value = userStore.userInfo.nickName
-      //     riqi.value = currentDates 
-      // }else{
-      //     restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
-      // }
+
       if(orderSearchdata.code === 0){
 		    restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
 	  }
@@ -531,24 +516,7 @@ const search_onSubmit = async ()  => {
       //清空表格
       restableData.splice(0, restableData.length);
       const orderSearchdata = await OutOrderSearch({search:add_searchInfo.value});
-      // if(orderSearchdata.data.length === 1){
-      //     res_bomdialogFormVisible.value = true
-      //     _orderid.value = orderSearchdata.data[0]['订单编号']
-      //     add_searchInfo.value = orderSearchdata.data[0]['订单编号']
-      //     ddhformData.ddh = orderSearchdata.data[0]['订单编号']
-      //     ddhformData.kh = orderSearchdata.data[0]['客户编号']
-      //     ddhformData.sckh = orderSearchdata.data[0]['生产款号']
-      //     ddhformData.ks = orderSearchdata.data[0]['款式']
-      //     add_lysearchInfo.value = add_searchInfo.value
-          
-      //     const gitReceiptNumberdata = await gitReceiptNumber({number:'TH'});
-      //     console.log(gitReceiptNumberdata)
-      //     danhao.value = gitReceiptNumberdata.data.number
-      //     chukuren.value = userStore.userInfo.nickName
-      //     riqi.value = currentDates
-      // }else{
-      //     restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
-      // }
+
       if(orderSearchdata.code === 0){
 		    restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
 	  }
@@ -635,29 +603,7 @@ const search_onSubmit = async ()  => {
       实际门幅: Detailres.data.实际门幅,
     };
 
-    // // 获取 mianliaotabData 的物料名称和颜色
-    // const { 物料名称, 颜色 } = mianliaotabData.value;
-
-    // // 计算 danjutableData 中相同物料名称和颜色的退还数量总和
-    // const totalOutbound = danjutableData.value
-    //   .filter(
-    //     (item) =>
-    //       item.物料名称 === 物料名称 &&
-    //       item.颜色 === 颜色
-    //   )
-    //   .reduce((sum, item) => {
-    //     // 根据退还类型决定是加还是减
-    //     if (item.退还类型 === '退面料') {
-    //       return sum + Number(item.退还数量); // 退面料,增加退还数量
-    //     }
-		// // else if (item.退还类型 === '退厂商') {
-		// //   return sum - Number(item.退还数量); // 退厂商,减少退还数量
-		// // }
-    //     return sum; // 其他退还类型不处理
-    //   }, 0);
-
-    // // 更新 mianliaotabData 的库存数量
-    // mianliaotabData.value.库存数量 += totalOutbound;
+ 
   } else {
     console.error('获取详情数据失败:', Detailres.msg);
   }
@@ -715,11 +661,7 @@ const dj_Dialog = () => {
   // 计算总退还数量(danjutableData 中的总和 + mianliaotabData 中的退还数量)
   const totalOutboundQuantity = totalOutbound + Number(退还数量);
 
-  // // 判断总退还数量是否大于库存数量
-  // if (totalOutboundQuantity > 库存数量) {
-  //   ElMessage({ type: 'warning', message: '退还数量不能大于库存数量' });
-  //   return;
-  // }
+
 
   // 如果通过检查,将数据添加到 danjutableData
   danjutableData.value.push({
@@ -728,15 +670,6 @@ const dj_Dialog = () => {
 	退还类型:radio1.value
   });
   mianliaotabData.value.退还数量 = '';
-  if(radio1.value === '退面料'){
-	  // 更新 mianliaotabData 的库存数量
-    // mianliaotabData.value.库存数量 = +mianliaotabData.value.库存数量 + Number(退还数量);
-  }
-  // else if(radio1.value === '退厂商'){
-  // 	  // 更新 mianliaotabData 的库存数量
-  // 	 mianliaotabData.value.库存数量 = mianliaotabData.value.库存数量 - Number(退还数量);
-  // }
-  // mianliaotabData.value.库存数量 = mianliaotabData.value.库存数量 - Number(退还数量);
 };
   
   //操作移除按钮
@@ -961,7 +894,7 @@ const dj_Dialog = () => {
       console.error("数据获取失败");
     }
   };
-  records_onSubmit();
+  // records_onSubmit();
   
   
 const recorddialogFormVisible = ref(false)

+ 271 - 0
src/view/performance/MachineElectricity.vue

@@ -0,0 +1,271 @@
+<template>
+    <div>
+      <layout>
+        <layout-header>
+          <div class="">
+            <!--          按钮部分-->
+            <el-form ref="elSearchFormRef"   class="demo-form-inline" :rules="searchRule" >
+              <el-form-item>
+                <!-- <el-input v-model="searchInfo" placeholder="搜索工单编号" clearable style="width: 200px;margin: 5px"></el-input>
+                <el-button type="primary" class="bt" icon="download" @click="hzToExcel" >导出到Excel(汇总)</el-button>
+                <el-button type="primary" class="bt" icon="download" @click="mxToExcel" >导出到Excel(明细)</el-button> -->
+              </el-form-item>
+            </el-form>
+  
+        
+  
+          </div>
+        </layout-header>
+  
+        <layout>
+          <!--    左侧树侧形结构-->
+          <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
+            <div class="JKWTree-tree" style="height: 200px">
+              <h3>月份</h3>
+              <el-tree :data="treeData"  :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
+              </el-tree>
+            </div>
+          </layout-sider>
+  
+          <!-- 右侧区域 -->
+          <layout-content >
+          <el-main>
+            <div class="gva-table-box">
+              <!-- 表格数据 -->
+              <el-table ref="multipleTable" style="width: 100%;height: 78vh" tooltip-effect="dark"
+                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
+                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+                        :data="hztableData"  border row-key="ID"
+                        size="small"
+                        :cell-class-name="gxbgCellClass"
+                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
+                        @row-click="tableRowClick" :show-overflow-tooltip="true"
+                        @selection-change="handleSelectionChange">
+               <el-table-column  sortable align="center" label="日期" prop="日期"  width="120" />
+               <el-table-column  sortable align="center" label="电表ID" prop="电表ID"  width="120" />
+               <el-table-column   align="center" label="总电量" prop="总电量"  width="110" />
+               <el-table-column   align="center" label="尖电量" prop="尖电量"  width="110" />
+               <el-table-column   align="center" label="峰电量" prop="峰电量"  width="110" />
+               <el-table-column   align="center" label="平电量" prop="平电量"  width="110" />
+               <el-table-column   align="center" label="谷电量" prop="谷电量"  width="110" />
+               <el-table-column   align="center" label="起始总电量" prop="起始总电量"  width="110" />
+               <el-table-column   align="center" label="结束总电量" prop="结束总电量"  width="110" />
+               <el-table-column   align="center" label="开始时间" prop="开始时间"  width="200" />
+               <el-table-column   align="center" label="结束时间" prop="结束时间"  width="200" />
+              </el-table>
+  
+              <!-- 分页 -->
+              <div class="gva-pagination">
+                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
+                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+              </div>
+            </div>
+
+<!-- 
+            <div class="gva-table-box">
+              <el-table ref="multipleTable" style="width: 100%;height: 45vh" tooltip-effect="dark"
+                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
+                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+                        :data="mxtableData"  border row-key="ID"
+                        size="small"
+                        :cell-class-name="gxbgCellClass"
+                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
+                        @row-click="tableRowClick" :show-overflow-tooltip="true"
+                        @selection-change="handleSelectionChange">
+               <el-table-column  sortable align="center" label="机台编号" prop="机台编号"  width="120" />
+               <el-table-column  sortable align="center" label="开工时间" prop="开工时间"  width="120" />
+               <el-table-column  sortable align="center" label="主电表" prop="主电表"  width="200" />
+               <el-table-column  sortable align="center" label="辅电表" prop="辅电表"  width="100" />
+              </el-table>
+  
+              <div class="gva-pagination">
+                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
+                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+              </div>
+            </div> -->
+  
+          </el-main>
+        </layout-content>
+        </layout>
+      </layout>
+    </div>
+  </template>
+  <script setup>
+  // 全量引入格式化工具 请按需保留
+  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
+  
+  import {ref, reactive} from 'vue'
+  import { exportExcelFile } from '@/utils/excel'
+  import {ElMessage} from "element-plus";
+  import { Meter,StatisticEleDay,} from '@/api/mes/job'
+  defineOptions({name: 'Company'})
+
+  const today = new Date();
+const year = today.getFullYear();
+const month = String(today.getMonth() + 1).padStart(2, '0');
+
+// =========== 获取左侧树形结构 ===========
+const treeData = ref([])
+// 获取树形数据
+const getTree = async () => {
+  try {
+    // 调用API获取数据
+    const response = await Meter() 
+    const data = response.data 
+    
+    // 转换数据为el-tree需要的格式
+    if (data && data.length > 0) {
+      // 生成从当前月份到一月的所有月份
+      const months = [];
+      const currentYear = today.getFullYear();
+      const currentMonth = today.getMonth() + 1; // 1-12
+      
+      for (let i = currentMonth; i >= 1; i--) {
+        months.push({
+          year: currentYear,
+          month: i,
+          label: `${currentYear}年${i}月`
+        });
+      }
+      
+      // 为每个月创建树节点
+      treeData.value = months.map(monthItem => {
+        const formattedMonth = String(monthItem.month).padStart(2, '0');
+        const rqValue = `${monthItem.year}${formattedMonth}`;
+        return {
+          label: monthItem.label,
+          children: data.map(item => {
+            return {
+              label: item.collectorid || '未知电表',
+              mid: item.mid,
+              rq: rqValue
+            }
+          })
+        }
+      });
+    } else {
+      treeData.value = []
+    }
+  } catch (error) {
+    ElMessage.error('获取数据失败')
+    console.error('获取树形数据失败:', error)
+  }
+}
+
+// 调用函数获取数据
+getTree()
+
+  
+const hztableData = ref([])
+
+const handleNodeClick = async (node) => {
+    console.log('点击节点:', node)
+  if (!node.children) {
+    const res = await StatisticEleDay({mid: node.mid,collectorid: node.label,riqi: node.rq})
+    console.log('获取数据:', res)
+    if(res.code === 0){
+    hztableData.value = res.data
+  }
+  }
+
+}
+
+  
+
+  
+
+  
+
+  
+  
+  
+  
+  
+  </script>
+  
+  <style scoped>
+  .form-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .form-column {
+    /*flex: 1;*/
+    margin-right: 15px; /* 调整列之间的间距 */
+  }
+  
+  /* 左侧输入框宽度调整 */
+  .form-column .el-form-item .el-input {
+    width: 150px; /* 调整左侧输入框的宽度 */
+  }
+  
+  :deep(.hui-plan-usage-lows  div) {
+    color: #8c939d !important;
+  }
+  :deep(.lan-plan-usage-lows  div) {
+    color: blue !important;
+    font-weight: bold;
+  }
+  
+
+  /* 媒体查询,根据需要调整断点 */
+  @media screen and (max-width: 768px) {
+    .form-column {
+      flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
+      margin-right: 0;
+    }
+  }
+  /*:deep(.el-table td .cell) {*/
+  /*  line-height: 30px !important;*/
+  /*}*/
+  .JKWTree-container {
+    display: flex;
+  }
+  .JKWTree-tree {
+    /*width: 300px;*/
+    background-color: #fff;
+    padding: 10px;
+    margin-right: 20px;
+  }
+  .JKWTree-tree h3 {
+    font-size: 15px;
+    font-weight: 700;
+    margin: 10px 0;
+  }
+  .JKWTree-content {
+    flex: 1;
+  }
+
+  
+  /* 选中某行时的背景色 */
+  :deep(.el-table__body tr.current-row) > td {
+    background: #ff80ff !important;
+  }
+  </style>
+  <style scoped>
+  :deep(.el-table td .cell) {
+    line-height: 20px !important;
+  }
+  :deep(.el-tabs__header){
+    margin-bottom: 0;
+  }
+  .search{
+    margin-left: 0px !important;
+    margin-right: 10px !important;
+  }
+  .bt{
+    margin-left: 2px !important;
+    padding: 3px !important;
+    font-size: 12px;
+  }
+  .el-tabs__header{
+    margin: 0px !important;
+  }
+  .gva-table-box{
+    padding: 0px !important;
+  }
+  .mab{
+    margin-bottom: 5px;
+  }
+  </style>
+  

+ 274 - 0
src/view/performance/OrderElectricity.vue

@@ -0,0 +1,274 @@
+<template>
+    <div>
+      <layout>
+        <layout-header>
+          <div class="">
+            <!--          按钮部分-->
+            <el-form ref="elSearchFormRef"   class="demo-form-inline" :rules="searchRule" >
+              <el-form-item>
+                <!-- <el-input v-model="searchInfo" placeholder="搜索工单编号" clearable style="width: 200px;margin: 5px"></el-input>
+                <el-button type="primary" class="bt" icon="download" @click="hzToExcel" >导出到Excel(汇总)</el-button>
+                <el-button type="primary" class="bt" icon="download" @click="mxToExcel" >导出到Excel(明细)</el-button> -->
+              </el-form-item>
+            </el-form>
+  
+        
+  
+          </div>
+        </layout-header>
+  
+        <layout>
+          <!--    左侧树侧形结构-->
+          <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
+            <div class="JKWTree-tree" style="height: 200px">
+              <!-- <h3>客户编号</h3> -->
+              <el-tree :data="treeData"  :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
+              </el-tree>
+            </div>
+          </layout-sider>
+  
+          <!-- 右侧区域 -->
+          <layout-content >
+          <el-main>
+            <div class="gva-table-box">
+              <!-- 表格数据 -->
+              <el-table ref="multipleTable" style="width: 100%;height: 78vh" tooltip-effect="dark"
+                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
+                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+                        :data="hztableData"  border row-key="ID"
+                        size="small"
+                        :cell-class-name="gxbgCellClass"
+                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
+                        @row-click="tableRowClick" :show-overflow-tooltip="true"
+                        @selection-change="handleSelectionChange">
+               <el-table-column  sortable align="center" label="订单编号" prop="订单编号"  width="120" />
+               <el-table-column  sortable align="center" label="生产款号" prop="生产款号"  width="120" />
+               <el-table-column  sortable align="center" label="款式" prop="款式"  width="120" />
+               <el-table-column  sortable align="center" label="日期" prop="日期"  width="120" />
+               <el-table-column  sortable align="center" label="电表ID" prop="电表ID"  width="120" />
+               <el-table-column   align="center" label="总电量" prop="总电量"  width="110" />
+               <el-table-column   align="center" label="尖电量" prop="尖电量"  width="110" />
+               <el-table-column   align="center" label="峰电量" prop="峰电量"  width="110" />
+               <el-table-column   align="center" label="平电量" prop="平电量"  width="110" />
+               <el-table-column   align="center" label="谷电量" prop="谷电量"  width="110" />
+               <el-table-column   align="center" label="起始总电量" prop="起始总电量"  width="110" />
+               <el-table-column   align="center" label="结束总电量" prop="结束总电量"  width="110" />
+               <el-table-column   align="center" label="开始时间" prop="开始时间"  width="200" />
+               <el-table-column   align="center" label="结束时间" prop="结束时间"  width="200" />
+              </el-table>
+  
+              <!-- 分页 -->
+              <div class="gva-pagination">
+                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
+                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+              </div>
+            </div>
+
+<!-- 
+            <div class="gva-table-box">
+              <el-table ref="multipleTable" style="width: 100%;height: 45vh" tooltip-effect="dark"
+                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
+                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+                        :data="mxtableData"  border row-key="ID"
+                        size="small"
+                        :cell-class-name="gxbgCellClass"
+                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
+                        @row-click="tableRowClick" :show-overflow-tooltip="true"
+                        @selection-change="handleSelectionChange">
+               <el-table-column  sortable align="center" label="机台编号" prop="机台编号"  width="120" />
+               <el-table-column  sortable align="center" label="开工时间" prop="开工时间"  width="120" />
+               <el-table-column  sortable align="center" label="主电表" prop="主电表"  width="200" />
+               <el-table-column  sortable align="center" label="辅电表" prop="辅电表"  width="100" />
+              </el-table>
+  
+              <div class="gva-pagination">
+                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
+                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+              </div>
+            </div> -->
+  
+          </el-main>
+        </layout-content>
+        </layout>
+      </layout>
+    </div>
+  </template>
+  <script setup>
+  // 全量引入格式化工具 请按需保留
+  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
+  
+  import {ref, reactive} from 'vue'
+  import { exportExcelFile } from '@/utils/excel'
+  import {ElMessage} from "element-plus";
+//   import { Meter,StatisticEleDay,} from '@/api/mes/job'
+  defineOptions({name: 'Company'})
+
+//   const today = new Date();
+// const year = today.getFullYear();
+// const month = String(today.getMonth() + 1).padStart(2, '0');
+
+// // =========== 获取左侧树形结构 ===========
+// const treeData = ref([])
+// // 获取树形数据
+// const getTree = async () => {
+//   try {
+//     // 调用API获取数据
+//     const response = await Meter() 
+//     const data = response.data 
+    
+//     // 转换数据为el-tree需要的格式
+//     if (data && data.length > 0) {
+//       // 生成从当前月份到一月的所有月份
+//       const months = [];
+//       const currentYear = today.getFullYear();
+//       const currentMonth = today.getMonth() + 1; // 1-12
+      
+//       for (let i = currentMonth; i >= 1; i--) {
+//         months.push({
+//           year: currentYear,
+//           month: i,
+//           label: `${currentYear}年${i}月`
+//         });
+//       }
+      
+//       // 为每个月创建树节点
+//       treeData.value = months.map(monthItem => {
+//         const formattedMonth = String(monthItem.month).padStart(2, '0');
+//         const rqValue = `${monthItem.year}${formattedMonth}`;
+//         return {
+//           label: monthItem.label,
+//           children: data.map(item => {
+//             return {
+//               label: item.collectorid || '未知电表',
+//               mid: item.mid,
+//               rq: rqValue
+//             }
+//           })
+//         }
+//       });
+//     } else {
+//       treeData.value = []
+//     }
+//   } catch (error) {
+//     ElMessage.error('获取数据失败')
+//     console.error('获取树形数据失败:', error)
+//   }
+// }
+
+// // 调用函数获取数据
+// getTree()
+
+  
+// const hztableData = ref([])
+
+// const handleNodeClick = async (node) => {
+//     console.log('点击节点:', node)
+//   if (!node.children) {
+//     const res = await StatisticEleDay({mid: node.mid,collectorid: node.label,riqi: node.rq})
+//     console.log('获取数据:', res)
+//     if(res.code === 0){
+//     hztableData.value = res.data
+//   }
+//   }
+
+// }
+
+  
+
+  
+
+  
+
+  
+  
+  
+  
+  
+  </script>
+  
+  <style scoped>
+  .form-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .form-column {
+    /*flex: 1;*/
+    margin-right: 15px; /* 调整列之间的间距 */
+  }
+  
+  /* 左侧输入框宽度调整 */
+  .form-column .el-form-item .el-input {
+    width: 150px; /* 调整左侧输入框的宽度 */
+  }
+  
+  :deep(.hui-plan-usage-lows  div) {
+    color: #8c939d !important;
+  }
+  :deep(.lan-plan-usage-lows  div) {
+    color: blue !important;
+    font-weight: bold;
+  }
+  
+
+  /* 媒体查询,根据需要调整断点 */
+  @media screen and (max-width: 768px) {
+    .form-column {
+      flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
+      margin-right: 0;
+    }
+  }
+  /*:deep(.el-table td .cell) {*/
+  /*  line-height: 30px !important;*/
+  /*}*/
+  .JKWTree-container {
+    display: flex;
+  }
+  .JKWTree-tree {
+    /*width: 300px;*/
+    background-color: #fff;
+    padding: 10px;
+    margin-right: 20px;
+  }
+  .JKWTree-tree h3 {
+    font-size: 15px;
+    font-weight: 700;
+    margin: 10px 0;
+  }
+  .JKWTree-content {
+    flex: 1;
+  }
+
+  
+  /* 选中某行时的背景色 */
+  :deep(.el-table__body tr.current-row) > td {
+    background: #ff80ff !important;
+  }
+  </style>
+  <style scoped>
+  :deep(.el-table td .cell) {
+    line-height: 20px !important;
+  }
+  :deep(.el-tabs__header){
+    margin-bottom: 0;
+  }
+  .search{
+    margin-left: 0px !important;
+    margin-right: 10px !important;
+  }
+  .bt{
+    margin-left: 2px !important;
+    padding: 3px !important;
+    font-size: 12px;
+  }
+  .el-tabs__header{
+    margin: 0px !important;
+  }
+  .gva-table-box{
+    padding: 0px !important;
+  }
+  .mab{
+    margin-bottom: 5px;
+  }
+  </style>
+  

+ 4 - 3
src/view/performance/baozhuangbaogong.vue

@@ -297,7 +297,7 @@ const SubOrderPageRef = ref()
 //子订单详情页
 const gd_yulan = async () => {
 	if(add_searchInfo.value === '' || add_searchInfo.value === null){
-		ElMessage({ type: 'warning', message: '请扫描子订单(条码)后再查看' });
+		warningres('请扫描子订单(条码)后再查看'); 
 		return false;
 	}
 	console.log(add_searchInfo.value.split(',')[0])
@@ -448,7 +448,8 @@ const add_onSubmit = async ()=>{
 	 //获取下面报工历史记录
 	 const getSpotLists = await getSpotList({order:add_searchInfo.value,code:_code,sys_sbID:add_formData['机台号']});
 	 if(getSpotLists.data.code === 1){
-	 		 warningres(getSpotLists.msg)
+	 		 warningres(getSpotLists.msg);
+			 return false;
 	 }
 	 //获取尺码
 	 sizeDatas.splice(0, getSpotLists.data.headers.length, ...getSpotLists.data.headers); //型号数据
@@ -557,7 +558,7 @@ function baogongslpd() {
   const totalQuantity = parseInt(add_formData['剩余数量'], 10) || 0; 
   
   if (reportedQuantity > totalQuantity) {  
-    ElMessage({ type: 'warning', message: '上报数量不能大于剩余数量' });  
+    warningres('上报数量不能大于剩余数量');  
     add_Dialogonclick.value = false;  
   }else if(reportedQuantity === ''){
 	add_Dialogonclick.value = false;  

+ 1 - 2
src/view/performance/caiqiebaogong.vue

@@ -763,7 +763,6 @@ const add_Dialog = async () => {
 	    console.log(params)
 	    const baogong_getInfo = await getInfo(params);
 	   if (baogong_getInfo.code === 0) {
-	           ElMessage({ type: 'success', message: '报工成功' });
 			   successres('报工成功')
 			   //查询更新数据
 			   add_onSubmit()
@@ -782,7 +781,7 @@ const add_Dialog = async () => {
 	               console.error('scsformdata 未定义');
 	           }
 	       } else {
-	           ElMessage({ type: 'error', message: '报工失败' });
+			   errorres('报工失败')
 	       }
 	}
 }

+ 6 - 2
src/view/performance/chafengbaogong.vue

@@ -659,6 +659,10 @@ const showPdf = async (row) => {
 		} else {
 			//获取报工历史记录
 			const getSpotLists = await getSpotList({order: add_searchInfo.value,code: _code,sys_sbID: add_formData['机台号']});
+			if(getSpotLists.data.code === 1){
+				warningres(getSpotLists.msg);
+				return false;
+			}
 			// console.log(getSpotLists)
 			sizeDatas.splice(0, getSpotLists.data.headers.length, ...getSpotLists.data.headers); //型号数据
 			add_tableData.splice(0, add_tableData.length, ...getSpotLists.data.records); //表格数据
@@ -694,7 +698,7 @@ const showPdf = async (row) => {
 				'scsl8', 'scsl9','scsl10','scsl11','scsl12','scsl13','scsl14', 'sctotal',
 			];
 			//如果搜索是子订单编号
-			if (add_searchInfo.value.includes('-')) {
+			if (add_searchInfo.value.includes('-') && getSpotLists.data.list) {
 				for (let key of keys1) {
 					if (getSpotLists.data.list.hasOwnProperty(key)) { // 确保键存在于对象中  
 						cmformdata[key] = getSpotLists.data.list[key];
@@ -838,7 +842,7 @@ const add_Dialog = async () => {
 		}
 		console.log("新增报工",paramsList)
 		if (paramsList.length === 0) {
-			ElMessage({type: 'info',message: '请填写报工尺码数量'});
+			warningres('请填写报工尺码数量');
 			return;
 		}
 		let allSuccess = true;

+ 50 - 12
src/view/performance/datangbaogong.vue

@@ -297,7 +297,7 @@ const SubOrderPageRef = ref()
 //子订单详情页
 const gd_yulan = async () => {
 	if(add_searchInfo.value === '' || add_searchInfo.value === null){
-		ElMessage({ type: 'warning', message: '请扫描子订单(条码)后再查看' });
+		warningres('请扫描子订单(条码)后再查看');
 		return false;
 	}
 	console.log(add_searchInfo.value.split(',')[0])
@@ -424,7 +424,7 @@ const ddtableData = reactive([])
 // 查询按钮
 const add_onSubmit = async ()=>{
 	if(add_formData['机台号'] === ''){
-		ElMessage({type: 'warning',message: '未获取到机台'})
+		warningres('未获取到机台');
 		return false;
 	}
 	sizeDatas.length = 0;
@@ -432,7 +432,7 @@ const add_onSubmit = async ()=>{
 	if(add_searchInfo.value === '' || add_searchInfo.value === undefined){
 		const WorkListdata = [];
 		add_tableData.splice(0,add_tableData.length,...WorkListdata);
-		ElMessage({type: 'warning',message: '请扫描小票二维码' })
+		warningres('请扫描小票二维码');
 		return false;
 	}
   
@@ -447,10 +447,14 @@ const add_onSubmit = async ()=>{
 	 _order.value = add_searchInfo.value;
 	 //获取下面报工历史记录
 	 const getSpotLists = await getSpotList({order:add_searchInfo.value,code:_code,sys_sbID:add_formData['机台号']});
+	 if(getSpotLists.data.code === 1){
+		 warningres(getSpotLists.msg);
+		 return false;
+	 }
 	 //获取尺码
 	 sizeDatas.splice(0, getSpotLists.data.headers.length, ...getSpotLists.data.headers); //型号数据
 	 if(getSpotLists.data.result.ci_num === 0 || getSpotLists.data.result.ci_num === '0'){
-		 ElMessage({type: 'error',message: '已上报,无需再次报工' })
+		 errorres('已上报,无需再次报工')
 		 add_searchInfo.value = ''
 	 }
 	 console.log(getSpotLists)
@@ -552,7 +556,7 @@ function baogongslpd() {
   const totalQuantity = parseInt(add_formData['剩余数量'], 10) || 0; 
   
   if (reportedQuantity > totalQuantity) {  
-    ElMessage({ type: 'warning', message: '上报数量不能大于剩余数量' });  
+    warningres('上报数量不能大于剩余数量');  
     add_Dialogonclick.value = false;  
   }else if(reportedQuantity === ''){
 	add_Dialogonclick.value = false;  
@@ -565,16 +569,16 @@ const currentSlValue=ref('')
 //报工
 const add_Dialog = async ()=>{
 	if(add_formData['机台号'] === '测试机台'){
-		ElMessage({ type: 'warning', message: '测试机台禁止报工' });
+		warningres('测试机台禁止报工');
 		return;
 	}
  if(add_formData['上报数量'] === ''){
-    ElMessage({type: 'warning',message: '上报数量为空,请填写上报数量'})
+    warningres('上报数量为空,请填写上报数量');
 	return;
   }
   
   if(_order.value === ''){
-    ElMessage({type: 'warning',message: '请重新扫描小票二维码'})
+    warningres('请重新扫描小票二维码');
 	return;
   }else{
 		let params ={}
@@ -608,7 +612,7 @@ const add_Dialog = async ()=>{
 			add_formData['上报数量']=''
 			add_formData['剩余数量']=''
 		 add_searchInfo.value = ''
-			ElMessage({type: 'success', message: '报工成功'});  
+			successres('报工成功');  
 		}
 
   }
@@ -650,7 +654,7 @@ const add_xpSelectionChange = async (selection) => {
   console.log(selection.length)
   selectedRows.value = selection; 
   if (selection.length === 0) {
-	  ElMessage({type: 'warning', message: '请勾选打印的数据' });
+	  warningres('请勾选打印的数据');
 	  return false;
   }else if(selection.length>0){
 	  allPrintData.value = selection.map((row) => {
@@ -681,7 +685,7 @@ const add_xpSelectionChange = async (selection) => {
 const bgSelection = ref(null)
 const baogong_del = () => {
   if(bgSelection.value === null || bgSelection.value === ''){
-		ElMessage({type: 'warning',message: '请选择删除的数据' })
+		warningres('请选择删除的数据');
   }else{
 	   console.log(bgSelection.value)
   }
@@ -709,7 +713,7 @@ const del_delclick = async () => {
 	console.log(Selection.value)
 	console.log(add_formData['组别'])
 	const res1 = await spotcheckdel({UniqId:Selection.value,sys_id:add_formData['组别']})
-	res1.code === 0 && ElMessage.success('删除成功')
+	res1.code === 0 && successres('删除成功');
 	add_onSubmit()
 }
   
@@ -731,6 +735,40 @@ page.value = 10;//默认显示
 pageSize.value = val;
 _getStaffList();
 };
+
+
+// 成功
+const successres = (arr) => {
+    ElMessage({
+        type: '',
+        dangerouslyUseHTMLString: true,
+        // duration: 0,  // 不自动关闭
+        message: `<strong style="font-size: 60px; color: black; background-color: #80FA80; padding: 30px 280px; width: 482px; line-height: 60px; text-align: center; display: block;">${arr}</strong>`,
+        customClass: 'custom-warning-message'
+    });
+}
+
+// 失败
+const errorres = (arr) => {
+    ElMessage({
+        type: '',
+        dangerouslyUseHTMLString: true,
+        // duration: 0,  // 不自动关闭
+		message: `<strong style="font-size: 60px; color: white; background-color: red; padding: 30px 280px; width: 482px; line-height: 60px; text-align: center; display: block;">${arr}</strong>`,
+        customClass: 'custom-warning-message'
+    });
+}
+
+// 警告
+const warningres = (arr) => {
+    ElMessage({
+        type: '',
+        dangerouslyUseHTMLString: true,
+        // duration: 0,  // 不自动关闭
+		message: `<strong style="font-size: 60px; color: black; background-color: #f5ff2f; padding: 30px 280px; width: 482px; line-height: 60px; text-align: center; display: block;">${arr}</strong>`,
+        customClass: 'custom-warning-message'
+    });
+}
 </script>
 <style scoped>
 .form-container {

+ 7 - 4
src/view/performance/houdaoshougong.vue

@@ -451,6 +451,10 @@ const add_onSubmit = async ()=>{
 	 _order.value = add_searchInfo.value;
 	 //获取下面报工历史记录
 	 const getSpotLists = await getSpotList({order:add_searchInfo.value,code:_code,sys_sbID:add_formData['机台号']});
+	 if(getSpotLists.data.code === 1){
+		 warningres(getSpotLists.msg);
+		 return false;
+	 }
 	 //获取尺码
 	 sizeDatas.splice(0, getSpotLists.data.headers.length, ...getSpotLists.data.headers); //型号数据
 	 if(getSpotLists.data.result.ci_num === 0 || getSpotLists.data.result.ci_num === '0'){
@@ -593,8 +597,7 @@ const add_Dialog = async () => {
   }
   
   if(_order.value === ''){
-    ElMessage({type: 'warning',message: '请重新扫描小票二维码'})	
-	warningres('请重新扫描小票二维码')
+    warningres('请重新扫描小票二维码')
 	return;
   }else{
 		let params ={}
@@ -738,7 +741,7 @@ const del_delclick = async () => {
     const isAllMatch = selectedJtbhArray.every(机台号 => 机台号 === add_formData['机台号']); // 检查所有值是否匹配
 
     if (!isAllMatch) {
-        ElMessage({ type: 'warning', message: '请选择与机台号相同的记录' });
+        warningres('请选择与机台号相同的记录');
         return false;
     }
 
@@ -756,7 +759,7 @@ const del_delclick = async () => {
             console.log(add_formData['组别']);
             const res1 = await spotcheckdel({ UniqId: Selection.value, sys_id: add_formData['组别'] });
             if (res1.code === 0) {
-                ElMessage.success('删除成功');
+                successres('删除成功');
                 Selection.value = '';
                 add_onSubmit();
             }

+ 5 - 1
src/view/performance/zongjianbaogong.vue

@@ -432,7 +432,7 @@ const luckyexcelPageRef = ref()//pdf预览
 //子订单详情页
 const cp_gdprintonClick = async () => {
 	if(add_searchInfo.value === '' || add_searchInfo.value === null){
-		ElMessage({ type: 'warning', message: '请扫描子订单(条码)后再查看' });
+		warningres('请扫描子订单(条码)后再查看'); 
 		return false;
 	}
 	SubOrderPageRef.value.open(add_searchInfo.value,add_formData['工序']) 
@@ -663,6 +663,10 @@ const showPdf = async (row) => {
 		} else {		
 			//获取报工历史记录
 			const getSpotLists = await getSpotList({order: add_searchInfo.value,code: _code,sys_sbID: add_formData['机台号']});
+			if(getSpotLists.data.code === 1){
+				warningres(getSpotLists.msg);
+				return false;
+			}
 			// console.log(getSpotLists)
 			sizeDatas.splice(0, getSpotLists.data.headers.length, ...getSpotLists.data.headers); //型号数据
 			add_tableData.splice(0, add_tableData.length, ...getSpotLists.data.records); //表格数据

+ 259 - 0
src/view/yunyin/shengchanguanli/chengpinrucang.vue

@@ -0,0 +1,259 @@
+<template>
+    <div>
+      <layout>
+        <layout-header>
+          <div class="">
+            <!--          按钮部分-->
+            <el-form ref="elSearchFormRef"   class="demo-form-inline" :rules="searchRule" >
+              <el-form-item>
+                <el-input v-model="searchInfo" placeholder="搜索工单编号" clearable style="width: 200px;margin: 5px"></el-input>
+                <el-button type="primary" class="bt" icon="download" @click="hzToExcel" >导出到Excel(汇总)</el-button>
+                <el-button type="primary" class="bt" icon="download" @click="mxToExcel" >导出到Excel(明细)</el-button>
+              </el-form-item>
+            </el-form>
+  
+        
+  
+          </div>
+        </layout-header>
+  
+        <layout>
+          <!--    左侧树侧形结构-->
+          <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
+            <div class="JKWTree-tree" style="height: 200px">
+              <h3>成品入仓</h3>
+              <el-tree :data="treeData"  :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
+              </el-tree>
+            </div>
+          </layout-sider>
+  
+          <!-- 右侧区域 -->
+          <layout-content >
+          <el-main>
+            <div class="gva-table-box">
+              <!-- 表格数据 -->
+              <el-table ref="multipleTable" style="width: 100%;height: 33vh" tooltip-effect="dark"
+                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
+                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+                        :data="hztableData"  border row-key="ID"
+                        size="small"
+                        :cell-class-name="gxbgCellClass"
+                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
+                        @row-click="tableRowClick" :show-overflow-tooltip="true"
+                        @selection-change="handleSelectionChange">
+               <el-table-column  sortable align="center" label="订单编号" prop="订单编号"  width="120" />
+               <el-table-column  sortable align="center" label="生产款号" prop="生产款号"  width="120" />
+               <!-- <el-table-column   align="center" label="实裁数量" prop="实裁数量"  width="110" /> -->
+               <el-table-column   align="center" label="入仓数量" prop="入仓数量"  width="110" />
+               <el-table-column   align="center" label="裁剪总产量" prop="裁剪总产量"  width="200" />
+               <el-table-column   align="center" label="实际合格率" prop="裁剪合格率"  width="200" />
+               <!-- <el-table-column   align="center" label="车缝总产量" prop="车缝总产量"  width="200" />
+               <el-table-column   align="center" label="车缝合格率" prop="车缝合格率"  width="200" /> -->
+               <el-table-column   align="center" label="返工总数" prop="返工总数"  width="110" />
+               <el-table-column   align="center" label="次片总数" prop="次片总数"  width="110" />
+
+
+              </el-table>
+  
+              <!-- 分页 -->
+              <div class="gva-pagination">
+                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
+                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+              </div>
+            </div>
+
+
+            <div class="gva-table-box">
+              <!-- 表格数据 -->
+              <el-table ref="multipleTable" style="width: 100%;height: 45vh" tooltip-effect="dark"
+                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
+                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+                        :data="mxtableData"  border row-key="ID"
+                        size="small"
+                        :cell-class-name="gxbgCellClass"
+                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
+                        @row-click="tableRowClick" :show-overflow-tooltip="true"
+                        @selection-change="handleSelectionChange">
+               <el-table-column  sortable align="center" label="订单编号" prop="订单编号"  width="120" />
+               <el-table-column  sortable align="center" label="子订单编号" prop="子订单编号"  width="160" />
+               <el-table-column  sortable align="center" label="生产款号" prop="生产款号"  width="200" />
+               <el-table-column  sortable align="center" label="入仓数量" prop="入仓数量"  width="100" />
+               <el-table-column  sortable align="center" label="裁剪数量" prop="裁剪数量"  width="100" />
+               <el-table-column  sortable align="center" label="实际合格率" prop="裁剪合格率"  width="120" />
+               <!-- <el-table-column  sortable align="center" label="车缝数量" prop="车缝数量"  width="100" />
+               <el-table-column  sortable align="center" label="车缝合格率" prop="车缝合格率"  width="120" /> -->
+              </el-table>
+  
+              <!-- 分页 -->
+              <div class="gva-pagination">
+                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
+                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+              </div>
+            </div>
+  
+          </el-main>
+        </layout-content>
+        </layout>
+      </layout>
+    </div>
+  </template>
+  <script setup>
+  // 全量引入格式化工具 请按需保留
+  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
+  
+  import {ref, reactive} from 'vue'
+  import { exportExcelFile } from '@/utils/excel'
+  import {ElMessage} from "element-plus";
+  import { GetWfpList,GetWfpDataLeft,GetSubOrderStats} from '@/api/mes/job'
+  defineOptions({name: 'Company'})
+  // =========== 获取左侧树侧形结构 ===========
+  const treeData = ref('')
+// 获取树形数据
+const getTree = async () => {
+  try {
+    // 调用API获取数据 - 根据你的实际API调用方式调整
+    const response = await GetWfpDataLeft() 
+    const data = response.data 
+    
+    // 转换数据为el-tree需要的格式
+    treeData.value = Object.keys(data).map(yearMonth => {
+      return {
+        label: `${yearMonth}`,
+        children: data[yearMonth].map(customer => {
+          return {
+            label: `${customer.客户编号} (${customer.total}条)`,
+            yearMonth: yearMonth,
+            customerCode: customer.客户编号,
+            total: customer.total,
+          }
+        })
+      }
+    })
+  } catch (error) {
+    ElMessage.error('获取数据失败')
+    console.error('获取树形数据失败:', error)
+  }
+}
+getTree()
+  
+
+const hztableData = ref([])
+const _noderq = ref('')
+const _nodecode = ref('')
+const handleNodeClick = async (node) => {
+    _noderq.value = node.yearMonth
+    _nodecode.value = node.customerCode
+    console.log('点击节点:', node)
+  if (!node.children) {
+    const res = await GetWfpList({sys_rq: node.yearMonth,customer: node.customerCode,})
+    console.log('获取数据:', res)
+    if(res.code === 0){
+    hztableData.value = res.data.result
+  }
+  }
+
+}
+
+const mxtableData = ref([])
+const tableRowClick = async(row) => {
+    const res = await GetSubOrderStats({sys_rq: _noderq.value,customer:  _nodecode.value,order:row.订单编号})
+    console.log('获取数据:', res)  
+    if(res.code === 0){
+    mxtableData.value = res.data.result
+  }
+}
+  
+
+  
+  
+  
+  
+  
+  </script>
+  
+  <style scoped>
+  .form-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .form-column {
+    /*flex: 1;*/
+    margin-right: 15px; /* 调整列之间的间距 */
+  }
+  
+  /* 左侧输入框宽度调整 */
+  .form-column .el-form-item .el-input {
+    width: 150px; /* 调整左侧输入框的宽度 */
+  }
+  
+  :deep(.hui-plan-usage-lows  div) {
+    color: #8c939d !important;
+  }
+  :deep(.lan-plan-usage-lows  div) {
+    color: blue !important;
+    font-weight: bold;
+  }
+  
+
+  /* 媒体查询,根据需要调整断点 */
+  @media screen and (max-width: 768px) {
+    .form-column {
+      flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
+      margin-right: 0;
+    }
+  }
+  /*:deep(.el-table td .cell) {*/
+  /*  line-height: 30px !important;*/
+  /*}*/
+  .JKWTree-container {
+    display: flex;
+  }
+  .JKWTree-tree {
+    /*width: 300px;*/
+    background-color: #fff;
+    padding: 10px;
+    margin-right: 20px;
+  }
+  .JKWTree-tree h3 {
+    font-size: 15px;
+    font-weight: 700;
+    margin: 10px 0;
+  }
+  .JKWTree-content {
+    flex: 1;
+  }
+
+  
+  /* 选中某行时的背景色 */
+  :deep(.el-table__body tr.current-row) > td {
+    background: #ff80ff !important;
+  }
+  </style>
+  <style scoped>
+  :deep(.el-table td .cell) {
+    line-height: 20px !important;
+  }
+  :deep(.el-tabs__header){
+    margin-bottom: 0;
+  }
+  .search{
+    margin-left: 0px !important;
+    margin-right: 10px !important;
+  }
+  .bt{
+    margin-left: 2px !important;
+    padding: 3px !important;
+    font-size: 12px;
+  }
+  .el-tabs__header{
+    margin: 0px !important;
+  }
+  .gva-table-box{
+    padding: 0px !important;
+  }
+  .mab{
+    margin-bottom: 5px;
+  }
+  </style>
+