<template>
  <div>
	<layout>
	  <layout-content >
		<div class="gva-table-box">
			<div style="display: flex; align-items: baseline; margin-bottom: 10px;">
			    <h1 style="margin: 0;">裁切完工报工</h1>
			</div>
		      <el-row :gutter="24">
		          <el-input v-model="add_searchInfo" placeholder="请扫描子订单编号" @keyup.enter="add_onSubmit"id="searchInput" 
				  style="width: 220px;height: 50px;margin-left: 10px;"></el-input>
			      <el-button type="primary" icon="search" @click="add_onSubmit" style="height: 50px;width: 80px;">查询</el-button>
					<el-form-item label="机台号" prop="jitaihao" class="mab" style="font-size: 30px;margin: 10px;" label-width="116px">
					    <el-input v-model="add_formData['机台号']" readonly style="width: 90px; height: 40px;" id="jitaihao" />
					</el-form-item>
					<el-form-item label="工序" prop="gongxu" class="mab" style="font-size: 30px; margin: 10px;" label-width="73px">
					    <el-input v-model="add_formData['工序']" readonly style="width: 100px; height: 40px;" id="gongxu" />
					</el-form-item>
					<el-form-item label="组别" prop="zubie" class="mab" style="font-size: 30px; margin: 10px;" label-width="73px">
					    <el-input v-model="add_formData['组别']" readonly style="width: 140px; height: 40px;" id="zubie" />
					</el-form-item>
					<el-form-item label="人员" prop="renyuan" class="mab" style="font-size: 30px; margin: 10px;" label-width="73px">
					    <el-input v-model="add_formData['人员']" readonly style="width: 110px; height: 40px;" id="renyuan" />
					</el-form-item>
		      </el-row>

			  <el-row :gutter="24">
		          <el-form-item label="尺码" class="mab"  prop="keyOrder" label-width="200" style="font-size: 28px;">
		              <el-input v-model="cmformdata.cm1"  id="cm1"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm2"  id="cm2"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm3"  id="cm3"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm4"  id="cm4"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm5"  id="cm5"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm6"  id="cm6"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm7"  id="cm7"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm8"  id="cm8"  readonly style="width: 70px;height: 40px;"/>
					        <el-input v-model="cmformdata.cm9"  id="cm9"  readonly style="width: 70px;height: 40px;"/>	
		              <el-input v-model="cmformdata.cm10" id="cm10" readonly style="width: 70px;height: 40px;"/>
					        <el-input v-model="cmformdata.cm11" id="cm11" readonly style="width: 70px;height: 40px;"/>
		          </el-form-item>
		      </el-row>

          <el-row :gutter="24">
		          <el-form-item label="制单数" class="mab"  prop="keyOrder" label-width="200" style="font-size: 28px;">
		              <el-input v-model="cmslformdata.cmsl1"  id="cmsl1"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmslformdata.cmsl2"  id="cmsl2"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmslformdata.cmsl3"  id="cmsl3"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmslformdata.cmsl4"  id="cmsl4"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmslformdata.cmsl5"  id="cmsl5"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmslformdata.cmsl6"  id="cmsl6"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmslformdata.cmsl7"  id="cmsl7"  readonly style="width: 70px;height: 40px;"/>
		              <el-input v-model="cmslformdata.cmsl8"  id="cmsl8"  readonly style="width: 70px;height: 40px;"/>
					        <el-input v-model="cmslformdata.cmsl9"  id="cmsl9"  readonly style="width: 70px;height: 40px;"/>	
		              <el-input v-model="cmslformdata.cmsl10" id="cmsl10" readonly style="width: 70px;height: 40px;"/>
					        <el-input v-model="cmslformdata.zdtotal" id="zdtotal" readonly style="width: 70px;height: 40px;"/>
		          </el-form-item>
		      </el-row>
		      
		      <el-row :gutter="24" >
		          <el-form-item label="新增实裁数" class="mab" prop="keyOrder" label-width="200" style="font-size: 28px;">
					<el-input  v-model="scsformdata.scs1"  id="scs1"  @input="updateTotal" style="width: 70px;height: 40px;"  @keydown="handleKeyDown($event, 'scs10', 'scs1', 'scs2')"/>
					<el-input  v-model="scsformdata.scs2"  id="scs2"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs1', 'scs2', 'scs3')"/>
					<el-input  v-model="scsformdata.scs3"  id="scs3"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs2', 'scs3', 'scs4')"/>
					<el-input  v-model="scsformdata.scs4"  id="scs4"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs3', 'scs4', 'scs5')"/>
					<el-input  v-model="scsformdata.scs5"  id="scs5"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs4', 'scs5', 'scs6')"/>
					<el-input  v-model="scsformdata.scs6"  id="scs6"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs5', 'scs6', 'scs7')"/>
					<el-input  v-model="scsformdata.scs7"  id="scs7"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs6', 'scs7', 'scs8')"/>
					<el-input  v-model="scsformdata.scs8"  id="scs8"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs7', 'scs8', 'scs9')"/>
					<el-input  v-model="scsformdata.scs9"  id="scs9"  @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs8', 'scs9', 'scs10')"/>
					<el-input  v-model="scsformdata.scs10" id="scs10" @input="updateTotal" style="width: 70px;height: 40px;" @keydown="handleKeyDown($event, 'scs9', 'scs10', 'scs1')"/>
					<el-input  v-model="scsformdata.sctotal" readonly style="width: 70px;height: 40px;" id="sctotal"/>
          <el-button type="primary" @click="add_Dialog" 	 style="width: 100px;height: 60px;font-size: 20px;margin-left: 10px">确认</el-button>
          <el-button type="primary" @click="gd_yulan" 	 style="width: 100px;height: 60px;font-size: 20px;">工单预览</el-button>
		          </el-form-item>
		      </el-row>
          

				<el-row :gutter="24" style="margin-bottom: 15px;">
					<el-table ref="multipleTable" style="width: 100%;height: 52vh" tooltip-effect="dark"
                      :row-style="{ height: '50px' }" :header-cell-style="{ padding: '5px', fontSize: '20px' }"
                      :cell-style="{ padding: '10px', fontSize: '20px' }" :header-row-style="{ height: '20px' }"
                      :data="add_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 type="selection" width="55" /> -->
			  <el-table-column  sortable  align="center" label="订单编号" prop="订单编号" width="120"/>
              <el-table-column  sortable align="left" label="订单子编号" prop="子订单编号"  width="130"/>
              <el-table-column  sortable  align="left" label="生产款号" prop="生产款号" width="120" />
              <el-table-column  sortable  align="left" label="款式" prop="款式" width="110" />
              <el-table-column  sortable  align="left" label="色系名称" prop="颜色" width="110"  />
              <el-table-column  sortable  align="left" label="制单总数" prop="zdtotal" width="110" />
              <el-table-column  sortable  align="left" label="实裁总数" prop="sctotal" width="110" />
              <el-table-column  sortable  align="left" label="单位" prop="单位" width="80" />
              <!-- <el-table-column  sortable  align="left" label="工序" prop="工序" width="80" /> -->
              <el-table-column  sortable  align="left" label="验片人" prop="Sys_id" width="100" />
              <el-table-column  sortable  align="left" label="日期" prop="Sys_rq" width="160" />
            </el-table>
			</el-row>

			</div>
  
			  <!-- 是否订单尾包确认弹窗 -->
			   <el-dialog v-model="DialogVisible" title="是否订单尾包" destroy-on-close width="30%" style="top: 20%;">
				  <h3>请再次确认是否该订单产品已全部报工，该批为订单尾包？</h3>
				 <div class="dialog-footer" style="text-align: right;">
					 <el-button @click="confirmDialogVisible">取消</el-button>
					 <el-button type="primary" @click="handleConfirm">确认</el-button>
				 </div>
			   </el-dialog>
  
         <el-dialog v-model="luckyexcelVisible" :before-close="luckyexcelCloseDialog" width="100%" top="0vh">
			  <div id="luckyexcel" style="width: 100%;height: 100vh;"></div>
			</el-dialog>

        </layout-content>
      </layout>

    <PrintPage ref="printPageRef" />
		  <!-- </el-main> -->
	</div>
  </template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formDataTest: {
        imageUrl: '' // 添加一个字段来保存上传的图片路径
      },
      rule: {} // 初始化rule对象
    };
  }, 
  methods: {
    handleKeyDown(event, prevId, currentId, nextId) {
      const currentElement = document.getElementById(currentId);
      const isEmpty = currentElement.value === '';
      const atStart = currentElement.selectionStart === 0;
      const atEnd = currentElement.selectionStart === currentElement.value.length;
      switch (event.keyCode) {
        case 13: // Enter
        case 40: // 向下箭头
          if (nextId) {
            document.getElementById(nextId).focus();
          }
          break;
        case 38: // 向上箭头
          if (prevId) {
            document.getElementById(prevId).focus();
          }
          break;
        case 8: // 删除键
          if (prevId && (isEmpty || atStart)) {
            document.getElementById(prevId).focus();
          }
          break;
        case 37: // 向左箭头
          if (prevId && atStart) {
            document.getElementById(prevId).focus();
          }
          break;
        case 39: // 向右箭头
          if (nextId && atEnd) {
            document.getElementById(nextId).focus();
          }
          break;
        default:
          break;
      }
    },

  },
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {ref, reactive} from 'vue';
import {getSpotList,getInfo,} from '@/api/mes/job';
import {getMachineMac} from '@/api/jixiaoguanli/jitairibaobiao'
import {getMac} from '@/api/jixiaoguanli/baogong'
import {ElMessage} from "element-plus";
import PrintPage from '../yunyin/shengchanguanli/components/print.vue';
defineOptions({name: 'Company'})
const printPageRef = ref()
const add_searchInfo = ref('')


//全局获取code，接口接收code
const _code = '裁切'
//全局接口接受的物理地址
const Machine = ref('')
//全局获取UniqId
const UniqId = ref('')

//物理地址获取机台编号
const getMachineMacdata = async () => {
  console.log("裁切页面获取物理地址",Machine.value)
  try {
    const data  = await getMachineMac({sys_sbID:Machine.value});
	// console.log(data)
	add_formData['机台号'] = data.data['机台号']
	add_formData['工序'] = data.data['生产工序']
	add_formData['组别'] = data.data['组别']
	add_formData['人员'] = data.data['组长']
  setTimeout(() => {
				const inputElement = document.getElementById('searchInput');
				if (inputElement) {
					inputElement.focus();		
				}
			}, 100); // 延迟100毫秒
  } catch (error) {
    console.error(error)
  }
}
//自动获取物理地址
const GetAddr =  () => {
  var xmlhttp = null;
  var res;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 2. 设置回调函数
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      res = eval('('+xmlhttp.response+')');
      let result = ''
      for (let i = 0; i < res.macAddress.length; i++) {
        if (i % 2 === 0 && i !== 0) {
          result += '-' // 根据实际需求修改分隔符
        }
        result += res.macAddress[i]
      }
	  Machine.value = result
    getMachineMacdata(Machine.value)
    }
  }
  // 3. 打开一个连接
  xmlhttp.open("get", "http://127.0.0.1:8090/init")
  //  5. 发送
   xmlhttp.send();
}
// getMachineMacdata();
GetAddr()

//全局调用获取当前日期
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要补零
const day = String(today.getDate()).padStart(2, '0');
const hours = String(today.getHours()).padStart(2, '0');
const minutes = String(today.getMinutes()).padStart(2, '0');
const seconds = String(today.getSeconds()).padStart(2, '0');
const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const currentDates = `${year}-${month}-${day}`;

const add_formData = reactive({
  机台号: '',	
  工序: '',
  组别: '',
  人员: '',	
  尺码: '',
  数量: '',
  是否订单尾包: '',
});
//清空对象的属性值
const gd_clearFormData = () => {
  Object.keys(add_formData).forEach(key => {
    add_formData[key] = '';
  });
};
// 尺码
const cmformdata = reactive({
  cm1:'',
  cm2:'',
  cm3:'',
  cm4:'',
  cm5:'',
  cm6:'',
  cm7:'',
  cm8:'',
  cm9:'',
  cm10:'',
  cm11:'合计',
});

// 制单数
const cmslformdata = reactive({
  cmsl1: '',  
  cmsl2: '',  
  cmsl3: '',  
  cmsl4: '',  
  cmsl5: '',  
  cmsl6: '',  
  cmsl7: '',  
  cmsl8: '',  
  cmsl9: '',  
  cmsl10: '',  
  zdtotal: '' 
});
// 实裁数
const scsformdata = reactive({
  scs1:'',
  scs2:'',
  scs3:'',
  scs4:'',
  scs5:'',
  scs6:'',
  scs7:'',
  scs8:'',
  scs9:'',
  scs10:'',
  sctotal:'',
});

//实裁相加
function updateTotal() {  
  // 直接指定要累加的属性名  
  const relevantKeys = ['scs1', 'scs2', 'scs3', 'scs4', 'scs5', 'scs6', 'scs7', 'scs8', 'scs9', 'scs10'];  
  const values = relevantKeys.map(key => parseInt(scsformdata[key], 10) || 0); // 使用 || 0 来处理可能的 NaN 或 undefined/null  
  scsformdata.sctotal = values.reduce((sum, value) => sum + value, 0);  
}  

const add_tableData = ref([]);
const _order = ref('');
const _UniqId = ref('');

//点击【查询】按钮
const add_onSubmit = async ()=>{
  if (!add_searchInfo.value.startsWith('DC')) {  
    // 如果没有以"DC"开头，则添加前缀  
    add_searchInfo.value = 'DC' + add_searchInfo.value;  
  }  
  if(add_searchInfo.value === '' || add_searchInfo.value === undefined){
    const WorkListdata = [];
    add_tableData.splice(0,add_tableData.length,...WorkListdata);
      ElMessage({type: 'warning',message: '搜索内容不能为空' })
  }else{
    const order =add_searchInfo.value;
	_order.value =add_searchInfo.value;
    const getSpotLists = await getSpotList({order:order,code:'裁切'});
    if(getSpotLists.data.total === 0){
      ElMessage({type: 'warning',message: '请先出库此订单再使用裁切报工' })
      return false
    }
	console.log(getSpotLists)
	add_tableData.value = getSpotLists.data.data;
  _UniqId.value = getSpotLists.data.list[0].UniqId
	const keys1 = ['cm1', 'cm2', 'cm3', 'cm4','cm5','cm6','cm7','cm8','cm9','cm10',];
	const keys2 = ['cmsl1', 'cmsl2', 'cmsl3', 'cmsl4','cmsl5','cmsl6','cmsl7','cmsl8','cmsl9','cmsl10','zdtotal',];
	if(order.includes('-')){
		for (let key of keys1) {  
			if (getSpotLists.data.list[0].hasOwnProperty(key)) { // 确保键存在于对象中  
				cmformdata[key] = getSpotLists.data.list[0][key];  
			}  
		}  
    for (let key of keys2) {  
			if (getSpotLists.data.list[0].hasOwnProperty(key)) { // 确保键存在于对象中  
				cmslformdata[key] = getSpotLists.data.list[0][key];  
			}  
		} 
		setTimeout(() => {
        const inputElement = document.getElementById('scs1');
        if (inputElement) {
            inputElement.focus();		
        }
    }, 100); // 延迟100毫秒
	}else{
		for (let key of keys1) {  
			cmformdata[key] = '';  
		}  
		for (let key of keys2) {  
			cmslformdata[key] = '';  
		}   
	}
    setTimeout(() => {
        const inputElement = document.querySelector('#searchInput');
        if (inputElement) {
            inputElement.focus();
        }
    }, 100); // 延迟100毫秒
  }
};

//表格行点击
const tableRowClick = async (row)=>{
  add_searchInfo.value = row.子订单编号
	console.log(row)
	_order.value = row.子订单编号
  add_onSubmit();
}

//复选框选择
const ckSelection = ref('')
const handleSelectionChange = (selection, type) => {
  const ids = selection.map(item => {
    return item.子订单编号
  })
  ckSelection.value = ids.join(',')
  console.log(ckSelection.value)
}

//确认出库按钮
const add_Dialog = async ()=>{
  if(_order.value === ''){
    ElMessage({type: 'warning',message: '请扫描子订单后，再操作此功能'})
  }else{
	if (_order.value.indexOf('-') !== -1) {
	    let params = {}
		params.scsl1 = scsformdata.scs1
		params.scsl2 = scsformdata.scs2
		params.scsl3 = scsformdata.scs3
		params.scsl4 = scsformdata.scs4
		params.scsl5 = scsformdata.scs5
		params.scsl6 = scsformdata.scs6
		params.scsl7 = scsformdata.scs7
		params.scsl8 = scsformdata.scs8
		params.scsl9 = scsformdata.scs9
		params.scsl10 = scsformdata.scs10
		params.sctotal = scsformdata['sctotal'];
		params.order_id = _order.value;//子订单编号
		params.rq = currentDates;//时间
		params.UniqId = _UniqId.value
	    console.log(params)
	    //裁切完工报工接口
	    const baogong_getInfo = await getInfo(params);
	    if (baogong_getInfo.code === 0) {
          ElMessage({type: 'success',message: '报工成功'});
          const getSpotToLists = await getSpotList({order:_order.value,code:_code});
          add_tableData.value = getSpotToLists.data.data;
	        add_searchInfo.value = ''
	    } else {
	      ElMessage({ type: 'error',message: '出库失败'})
	    }
	} else {
		ElMessage({type: 'warning',message: '请扫描子订单后，再操作此功能'})
	}
  }
}

const gd_yulan = () => {
  if(add_searchInfo.value === '' || add_searchInfo.value === null){
    ElMessage({type: 'warning',message: '请选择具体的工单后，再操作此功能'})
    return false;
  }else{
    const order = add_searchInfo.value.split('-')[0]
      printPageRef.value.open(order) 
  }
}

// =========== 分页 ===========
// 分页相关的响应式变量
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
// 分页
const handleCurrentChange = (val) => {
  page.value = val;
  _getStaffList();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
  page.value = 10;//默认显示
  pageSize.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; /* 调整左侧输入框的宽度 */
}

/* 媒体查询，根据需要调整断点 */
@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;
	margin-left: -10px !important;
}
.mab{
  margin-bottom: 5px;
}

/* 搜索样式 */
::v-deep .el-input__wrapper #searchInput {  
  font-size: 16px; 
} 
::v-deep .el-input__wrapper #jitaihao {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #gongxu {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #zubie {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #renyuan {  
  font-size: 18px; 
} 
::v-deep .el-input__wrapper #shuliang {  
  font-size: 18px; 
  color: red;
} 
::v-deep .el-input__wrapper #chima {  
  font-size: 18px; 
} 

/* 尺码/制单数合计样式 */
::v-deep .el-input__wrapper  #cm1{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm2{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm3{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm4{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm5{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm6{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm7{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm8{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm9{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm10{
	font-size: 20px; 
}
::v-deep .el-input__wrapper  #cm11{
	font-size: 20px; 
}
/* 本次实裁新增样式 */
::v-deep .el-input__wrapper  #cmsl1{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl2{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl3{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl4{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl5{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl6{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl7{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl8{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl9{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #cmsl10{
	font-size: 20px; 
	color: red !important;
}
::v-deep .el-input__wrapper  #zdtotal{
	font-size: 20px; 
  color: red !important;
}


</style>
