优化

src/api/mes/job.js

@@ -871,3 +871,41 @@ export const Apiorder = (params) => {
     params
   })
 }
+
+//查询子订单编号
+export const Apiorderids = (params) => {
+  return service({
+    url: '/mes_server/Facility/Apiorderids',
+    method: 'get',
+    params
+  })
+}
+
+//查询机台设备
+export const getMachineDeviceTypes = (params) => {
+  return service({
+    url: '/mes_server/Facility/getMachineDeviceTypes',
+    method: 'get',
+    params
+  })
+}
+
+
+//新增机台设备
+export const addMachineDeviceTypes = (data) => {
+  return service({
+    url: '/mes_server/Facility/addMachineDeviceTypes',
+    method: 'post',
+    data
+  })
+}
+
+//更新机台设备
+export const updateMachineDeviceTypes = (data) => {
+  return service({
+    url: '/mes_server/Facility/updateMachineDeviceTypes',
+    method: 'post',
+    data
+  })
+}
+

src/view/performance/Machinestatus.vue

@@ -1,8 +1,344 @@
 <template>
-</template>
+    <div>
+      <layout>
+        <layout-header>
+          <div class="gva-table-box" style="margin-left: 20px;">
+            <!--按钮部分-->
+            <el-form-item>
+              <el-button type="primary" icon="plus"  @click="addonclick" >新增</el-button>
+            </el-form-item>
+          </div>
+        </layout-header>
+  
+        <layout>
+  
+          <!-- 右侧区域 -->
+          <layout-content >
+          <el-main>
+            <div class="gva-table-box">
+              <!-- 表格数据 -->
+              <el-table ref="multipleTable" style="width: 100%;height: 65vh" tooltip-effect="dark"
+                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
+                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+                        :data="tableData"  border row-key="ID"
+                        size="small"
+                        highlight-current-row="true" @row-dblclick="updateCompanyFunc"
+                        @row-click="tableRowClick" :show-overflow-tooltip="true"
+                        @selection-change="handleSelectionChange">
+               <el-table-column  sortable align="center" label="MAC地址" prop="sys_sbID"  width="160" />
+               <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="100" />
+               <el-table-column prop="status" label="状态" align="center" width="120" sortable>
+                    <template #default="{ row }">
+                        <el-tag :type="row.status === '1' ? 'success' : 'danger'">
+                            {{ row.status === '1' ? '正常' : '异常' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="130">
+              <template #default="{ row, $index }">
+              <el-button @click="Status_change(row,$index)" type="primary" size="small" 
+              style="font-size: 16px;padding: 0px;width: 90px;">
+              更改状态
+              </el-button>
+              </template>
+              </el-table-column>
+              </el-table>
+  
+              <!-- 分页 -->
+              <div class="gva-pagination">
+                <el-pagination layout="total" :current-page="page" :page-size="pageSize"
+                 :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+  <!--              <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"-->
+  <!--                             :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />-->
+              </div>
+            </div>
+            <el-dialog
+            v-model="add_MachinedialogFormVisible"
+            :before-close="add_gdyjcloseDialog"
+            style="width: 66%; max-height: 80%; overflow-y: auto; margin-top: 4%;"
+            :title="'新增机台信息'"
+            destroy-on-close>
+            <el-form label-width="100px" :model="add_Machineformdata">
+              <el-row :gutter="24" class="form-row">
+                <el-col :span="10">
+                  <el-form-item label="MAC地址" class="mab" prop="keyOrder" id ='MAC地址' label-width='110'>
+                    <el-input v-model="add_Machineformdata.sys_sbID"  style="width: 250px;" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
 
-<script>
-</script>
+              <el-row :gutter="24" class="form-row">
+                <el-col :span="10">
+                  <el-form-item label="设备编号" class="mab" prop="keyOrder" id ='设备编号' label-width='110'>
+                    <el-input v-model="add_Machineformdata.设备编号"  style="width: 250px;" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="10">
+                  <el-form-item label="生产工序" class="mab" prop="keyOrder" id ='生产工序' label-width='110'>
+                    <el-select
+						v-model="add_Machineformdata.生产工序" style="width: 150px;" id="生产工序" 
+						@keydown="add_gdzlent($event, '', '色系名称', '款号:')">
+						<el-option 
+						  v-for="生产工序 in gxOptions" 
+                          :key="生产工序.value"
+                          :label="生产工序.label"
+                          :value="生产工序.value" 
+						  >
+						</el-option>
+					  </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
 
-<style>
-</style>
+              <el-row :gutter="24" class="form-row">
+                <el-col :span="10">
+                  <el-form-item label="设备编组" class="mab" prop="keyOrder" id ='设备编组' label-width='110'>
+                    <el-input v-model="add_Machineformdata.设备编组"  style="width: 250px;" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="10">
+                  <el-form-item label="组长" class="mab" prop="keyOrder" id ='组长' label-width='110'>
+                    <el-input v-model="add_Machineformdata.组长"  style="width: 250px;" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+        
+        
+            </el-form>
+        
+            <template #footer>
+              <div class="dialog-footer" style="display: flex; justify-content: flex-end; padding: 10px;">
+                <el-button type="primary" @click="add_MachinecloseDialog">取消</el-button>
+                <el-button type="primary" @click="add_MachineenterDialog">确定</el-button>
+              </div>
+            </template>
+            
+          </el-dialog>
+            
+          </el-main>
+        </layout-content>
+        </layout>
+      </layout>
+  
+    </div>
+  </template>
+  <script setup>
+  // 全量引入格式化工具 请按需保留
+  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
+  import { getMachineDeviceTypes,updateMachineDeviceTypes,addMachineDeviceTypes } from '@/api/mes/job'
+  import {ref, reactive} from 'vue'
+  import { useUserStore } from '@/pinia/modules/user'
+  import {ElMessage} from "element-plus";
+  defineOptions({name: 'Company'})
+  //获取登录用户信息
+    const userStore = useUserStore()
+    const _username = ref('')
+    _username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
+  // =========== 获取表格数据 ===========
+  const tableData = ref([])
+  const _gettabledata = async () => {
+    // 调用接口获取数据
+    const res = await getMachineDeviceTypes()
+    console.log(res)
+    if (res.code === 0) {
+      tableData.value = res.data.list;
+    }
+  }
+  _gettabledata();
+
+  const add_MachinedialogFormVisible = ref(false)
+  const add_Machineformdata = reactive({
+  sys_sbID: '',
+  工序: '',
+  设备编号: '',
+  生产工序: '',
+  设备编组: '',
+  组长: '',
+  sys_id: '',
+});
+const gxOptions = [
+  { label: '裁剪', value: '裁剪' },
+  { label: '车缝', value: '车缝' },
+  { label: '手工', value: '手工' },
+  { label: '大烫', value: '大烫' },
+  { label: '总检', value: '总检' },
+  { label: '包装', value: '包装' },
+]
+  // 新增
+  const addonclick = () => {
+    add_MachinedialogFormVisible.value = true;
+  }
+
+  const add_MachineenterDialog =  async  () => {
+	//必填
+	if(add_Machineformdata['sys_sbID'] === ''){
+		ElMessage({type: 'warning',message: 'Mac地址不能为空'})
+		return false;
+	}
+
+    const add_Machineparams = {
+      sys_sbID: add_Machineformdata.sys_sbID,
+      设备编号: add_Machineformdata.设备编号,
+      生产工序: add_Machineformdata.生产工序, 
+      设备编组: add_Machineformdata.设备编组,
+      组长: add_Machineformdata.组长,
+      sys_id: userStore.userInfo.nickName,
+    }
+    console.log(add_Machineparams)
+	const res = await addMachineDeviceTypes(add_Machineparams)
+	if (res.code === 0) {
+		ElMessage.success('新增成功')
+		add_MachinecloseDialog()
+		_gettabledata()
+	}
+}  
+
+  //新增颜色资料取消
+  const add_MachinecloseDialog = () => {
+    add_MachinedialogFormVisible.value = false
+}
+  
+
+  // 更改状态
+  const Status_change = async (row, index) => {
+    console.log(row.UniqId,index) 
+    const newStatus = row.status === '1' ? '0' : '1';
+    // 调用接口获取数据
+    const res = await updateMachineDeviceTypes({UniqId:row.UniqId,status:newStatus})
+    if (res.code === 0) {
+      ElMessage.success('更改状态成功')
+      _gettabledata();
+    }
+  }
+
+
+  // 分页相关的响应式变量
+  const page = ref(1)
+  const total = ref(0)
+  const pageSize = ref(10)
+  // 分页
+  const handleCurrentChange = (val) => {
+    page.value = val;
+    _getStaffList();
+  };
+
+  
+
+  
+  
+  
+  </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;
+  }
+  /* 图片上传 */
+  .upload-box {
+    width: 200px;
+    height: 200px;
+    border: 2px dashed #e2e2e2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+  }
+  .uploaded-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .upload-icon {
+    font-size: 40px;
+    color: #c0c4cc;
+  }
+  .file-input {
+    display: none;
+  }
+  .el-table .warning-row {
+    background: oldlace;
+  }
+  
+  /* 选中某行时的背景色 */
+  :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>
+  

src/view/performance/Suborderdetailspage.vue

@@ -1,8 +1,358 @@
+<!-- 子订单状态页面 -->
 <template>
+	   <br><br>
+	   <div class="order-info" style="margin-left: 10px;">
+		   <el-text style="font-size: 24px;">订单编号:&nbsp;</el-text>
+            <el-select style="width: 10%; height: 40px;"
+                v-model="orderform.订单编号"
+                placeholder="请输入或选择订单编号"
+                filterable
+                clearable
+                remote
+                :remote-method="searchOrder"
+                @change="handleOrderSelect"
+                >
+                <el-option
+                v-for="item in orderOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                />
+            </el-select>
+		   &nbsp;&nbsp;&nbsp;&nbsp;
+            <el-text style="font-size: 24px;">子订单编号:&nbsp;</el-text>
+                <el-select
+                v-model="orderform.子订单编号"
+                style="width: 10%; height: 40px;"
+                placeholder="请选择子订单编号"
+                :disabled="!orderform.订单编号"
+                @change="handleOrderSelect2"
+                >
+                <el-option
+                v-for="subItem in subOrderOptions"
+                :key="subItem.value"
+                :label="subItem.label"
+                :value="subItem.value"
+                />
+                </el-select>
+		   &nbsp;&nbsp;&nbsp;&nbsp;
+		   <el-text style="font-size: 24px;">客户编号:&nbsp;</el-text>
+		   <el-input v-model="orderform['客户编号']" disabled  style="width: 5%; height: 40px;" />
+		   &nbsp;&nbsp;&nbsp;&nbsp;
+		   <el-text style="font-size: 24px;">款号:&nbsp;</el-text>
+		   <el-input v-model="orderform['款号']" disabled  style="width: 10%; height: 40px;" />
+		   &nbsp;&nbsp;&nbsp;&nbsp;
+		   <el-text style="font-size: 24px;">款式:&nbsp;</el-text>
+		   <el-input v-model="orderform['款式']" disabled  style="width: 10%; height: 40px;" />
+		</div>
+		<br>
+		  <el-table  ref="multipleTable" 
+			style="width: 100%; height: 35vh; font-size: 16px;margin-left: 10px;" 
+			:row-style="{ height: '40px' }" :header-cell-style="{ padding: '0px'}"
+			:cell-style="{ padding: '0px', fontSize: '16px' }" 
+			 @row-click="orderlistclick" :cell-class-name="satusCellClass"
+			border  :data="orderdata" highlight-current-row="true"class="custom-table">
+			  <el-table-column align="center" label="工序名称" prop="工序名称"  width="90"/>
+			  <!-- 尺码列表 -->
+			  <template v-for="item in arr">
+				<el-table-column align="left" :label=item :prop=item  width="75"/> 
+			  </template>
+			  <el-table-column align="left" label="完成总数量" prop="total"  width="110"/>
+			  <el-table-column align="left" label="制单数" prop="制单数"  width="100"/>
+			  <el-table-column align="left" label="完成百分比" prop="scale"  width="100"/>
+			</el-table>
+			
+			<div style="display: flex; align-items: center;">
+				<el-tag type="info" style="width: 40px; height: 40px; margin-right: 10px;"><h2>包数</h2></el-tag>
+				<h2 style="margin: 0 20px 0 0;">白格子图标表示“已有包”</h2>
+				<el-tag type="success" style="width: 40px; height: 40px; margin-right: 10px;"><h2>包数</h2></el-tag>
+				<h2 style="margin: 0 20px 0 0;">绿格子图标表示“已完成包”</h2>
+				<el-tag type="danger" style="width: 40px; height: 40px; margin-right: 10px;"><h2>包数</h2></el-tag>
+				<h2 style="margin: 0;">红格子图标表示“废弃包”</h2>
+			</div>
+		<div class="number-container">
+		  <div 
+			v-for="(item, index) in Mabaolistform" 
+			:key="index" 
+			:class="getBoxClass(item)">
+			{{ typeof item === 'object' ? item.value : item }}
+		  </div>
+		</div>
 </template>
+<script setup>
+// 全量引入格式化工具 请按需保留
+// import $script from 'scriptjs'
+// import $ from 'jquery';
+// import LuckyExcel from 'luckyexcel';
+import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
+import { ElMessage, ElMessageBox, LAST_KEYS } from 'element-plus';
+import {ref, reactive} from 'vue';
+import {SubWorkOrderStatusList,Mabaolist,Apiorder,Apiorderids} from '@/api/mes/job';
+import { useUserStore } from '@/pinia/modules/user';
+defineOptions({name: 'Company'})
 
-<script>
+const SubWorkOrderStatusListlog = ref(false)
+// let baoshulist = []; // 确保在使用前已经声明
+
+const gx = ref('')
+const orderid = ref('')
+const orderdata = reactive([])
+const arr = reactive([])
+const orderform = ref({
+	"订单编号": '',
+	"子订单编号": '',
+	"客户编号": '',
+	"款号": '',
+	"款式": ''
+  });
+
+  const orderOptions = ref([]);     // 订单编号选项
+  const subOrderOptions = ref([]); // 子订单编号选项
+// 搜索订单（订单编号）
+const searchOrder = async (query) => {
+  if (!query.trim()) {
+    orderOptions.value = [];
+    return;
+  }
+  
+  try {
+    const res = await Apiorder({ search: query });
+    if (res.code === 0 && res.data?.list) {
+      orderOptions.value = res.data.list.map(item => ({
+        value: item.订单编号,
+        label: item.订单编号
+      }));
+    
+    }
+  } catch (error) {
+    console.error('搜索订单失败:', error);
+  }
+};
+
+// 选择订单编号时获取子订单编号
+const handleOrderSelect = async (orderNo) => {
+  if (!orderNo) {
+    subOrderOptions.value = [];
+    orderform.value.子订单编号 = '';
+    return;
+  }
+
+  try {
+    // 调用子订单接口
+    const res = await Apiorderids({ order:orderNo}); // 假设接口需要传订单编号
+    if (res.code === 0 && res.data?.list) {
+      subOrderOptions.value = res.data.list.map(item => ({
+        value: item.子订单编号,
+        label: item.子订单编号
+      }));
+      if (subOrderOptions.value.length === 1) {
+        orderform.value.子订单编号 = subOrderOptions.value[0].value;
+        const ress = await SubWorkOrderStatusList({ order:orderform.value.子订单编号}); 
+        if (ress.code === 0) {
+        orderform.value.客户编号 = ress.data.workOrderData['客户编号'];
+        orderform.value.款号 = ress.data.workOrderData['款号'];
+        orderform.value.款式 = ress.data.workOrderData['款式']; 
+        // 检查表单完整性（确保在数据更新后检查）
+        if (isFormValid()) {
+            await open(orderNo); // 执行后续操作
+        } else {
+        ElMessage.warning('请填写完整所有字段');
+        }
+    }
+    }
+
+    }
+  } catch (error) {
+    console.error('获取子订单失败:', error);
+    subOrderOptions.value = [];
+  }
+};
+
+// 选择子订单编号时获取订单信息
+const handleOrderSelect2 = async (orderNo) => {
+  if (!orderNo) {
+    resetFormFields(); // 清空表单字段
+    return;
+  }
+
+  try {
+    const res = await SubWorkOrderStatusList({ order: orderNo });
+    if (res.code === 0) {
+      // 更新表单数据
+      updateFormData(res.data.workOrderData);
+      
+      // 检查表单完整性（确保在数据更新后检查）
+      if (isFormValid()) {
+        open(orderNo); // 执行后续操作
+      } else {
+        ElMessage.warning('请填写完整所有字段');
+      }
+    }
+  } catch (error) {
+    console.error('获取订单信息失败:', error);
+  }
+};
+
+// 辅助函数：清空表单字段
+const resetFormFields = () => {
+  orderform.value.客户编号 = '';
+  orderform.value.款号 = '';
+  orderform.value.款式 = '';
+};
+
+// 辅助函数：更新表单数据
+const updateFormData = (data) => {
+  orderform.value.客户编号 = data['客户编号'] || '';
+  orderform.value.款号 = data['款号'] || '';
+  orderform.value.款式 = data['款式'] || '';
+};
+
+// 辅助函数：检查表单完整性
+const isFormValid = () => {
+  const requiredFields = ['客户编号', '款号', '款式']; // 明确需要检查的字段
+  return requiredFields.every(field => 
+    orderform.value[field]?.trim() !== ''
+  );
+};
+
+
+
+const open = async (ddzbh,gongxu) => {
+	console.log("orderid",ddzbh)
+	console.log("gx",gongxu)
+	orderid.value = ddzbh
+	gx.value = gongxu
+	
+	SubWorkOrderStatusListlog.value = true
+	const order = await SubWorkOrderStatusList({order:orderid.value});
+	console.log(order)
+	arr.length = 0
+	baoshulist(gx.value);
+	console.log(order.data.workOrderData)
+	orderform.value = order.data.workOrderData
+	orderdata.splice(0,order.data.data.length,...order.data.data);//表格数据
+	arr.splice(0,order.data.arr.length,...order.data.arr);//表格尺码投数据
+}
+
+	const satusCellClass = ({row, column, rowIndex, columnIndex}) =>{
+		if(row['工序名称'] === gx.value){
+		  return 'status-plan-usage-low';
+		}
+	}
+	
+   const multipleTable = ref(null);
+	const Mabaolistform = reactive([]);
+	// 表格点击事件
+	const orderlistclick = async (row) => {
+		baoshulist(row['工序名称']);
+		if(row['工序名称'] !== gx.value){
+			gx.value = null;
+		}
+	};
+	const baoshulist = async (gx) => {
+	  const orderMabaolist = await Mabaolist({ order: orderid.value, process:gx});
+	  console.log(orderMabaolist);
+	  // 初始化所有包的数据，将 chefeng 转换为对象以便标记状态
+	  Mabaolistform.splice(
+		0,
+		Mabaolistform.length,
+		...orderMabaolist.data.chefeng.map((item) => ({ value: item, status: 'default' }))
+	  );
+	  // 遍历完成包数，将状态标记为 complete
+	  orderMabaolist.data.complete.forEach((completed) => {
+		const target = Mabaolistform.find((item) => item.value === completed);
+		if (target) {
+		  target.status = 'complete';
+		}
+	  });
+	  // 遍历废掉包数，将状态标记为 deleted
+	  orderMabaolist.data.delete.forEach((deleted) => {
+		const target = Mabaolistform.find((item) => item.value === deleted);
+		if (target) {
+		  target.status = 'deleted';
+		}
+	  });
+	};
+	// 动态获取样式类
+	const getBoxClass = (item) => {
+	  if (item && item.status === 'complete') {
+	    return 'number-box green'; // 完成包数
+	  } else if (item && item.status === 'deleted') {
+	    return 'number-box red'; // 废弃包数
+	  }
+	  return 'number-box'; // 默认状态
+	};
+//退出
+	const SubWorkOrderClose = () => {
+		SubWorkOrderStatusListlog.value = false
+	}
+defineExpose({open})
 </script>
 
-<style>
+
+
+<style scoped>
+
+.custom-button-text {
+	font-size: 25px;
+	/* 或者你想要的任何大小 */
+}
+
+/* 自定义表格样式 */
+.custom-table >>> .el-table {
+  border: 2px solid #333; /* 表格整体边框加深 */
+}
+
+.custom-table >>> .el-table__header-wrapper th {
+  border-bottom: 2px solid #333; /* 表头底部边框加深 */
+}
+
+.custom-table >>> .el-table__body-wrapper td {
+  border: 1px solid #666; /* 表格单元格边框加深 */
+}
+
+.custom-table >>> .el-table__cell {
+  font-size: 20px; /* 单元格字体大小 */
+  font-weight: 600; /* 单元格字体加粗 */
+}
+.number-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 3px;
+}
+
+.number-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  background-color: #f2f2f2;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 18px;
+  color: #333;
+  font-weight: bold;
+  transition: background-color 0.3s;
+}
+
+:deep(.number-box.green) {
+	 /* 完成包数（绿色） */
+  background-color: palegreen !important;
+  color: #155724;
+  border-color: #c3e6cb;
+}
+
+:deep(.number-box.red) {
+  background-color: red !important;
+  color: #721c24;
+  border-color: #f5c6cb;
+}
+:deep(.el-table__body .status-plan-usage-low) {
+  background: #ff80ff !important;
+}
+:deep(.el-table__body .status-plan-usage-lows) {
+  background: white !important;
+}
 </style>