<template>
  <div style="height: 100%">
    <div class="title" style="margin-left: 0px">
      <div class="item">
        <span class="font subWorkNameBox">挂网报工</span>
      </div>
      <div class="item">
        <span class="font"
          >{{ riqi }} &nbsp; &nbsp;{{ days }} &nbsp; {{ shijian }}</span
        >
      </div>
      <div class="item">
        <img class="top-bar__img" :src="info.avatar" />
        <span class="font">
          {{ info.name }}
        </span>
      </div>
    </div>
    <basic-container
      v-loading="pageLoading"
      element-loading-text="数据加载中..."
      element-loading-spinner="el-icon-loading"
    >
      <div class="container">
        <div class="top-row">
          <div class="task-dist-title">组网任务表</div>
          <!-- 合并挂网下发未报工排程详情列表 -->
          <el-table
            :data="taskDistTableData"
            border
            height="300"
            style="width: 100%"
            :header-row-style="headerRowStyle"
          >
            <el-table-column label="等级" prop="weight" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.weight | weightFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="高度"
              prop="height"
              align="center"
            ></el-table-column>
            <el-table-column
              label="长1+长2+长3"
              align="center"
              width="120"
              prop="length"
            ></el-table-column>
            <el-table-column
              label="余量"
              align="center"
              width="70"
              prop="allowance"
            ></el-table-column>
            <el-table-column
              label="模数"
              align="center"
              width="70"
              prop="moCount"
            ></el-table-column>
            <el-table-column
              label="片1+片2+片3"
              align="center"
              width="120"
              prop="blockCount"
            >
              <!-- <template slot-scope="scope">
                <span>{{
                  scope.row.meshNumber
                    ? scope.row.meshNumber.split(',').join('+')
                    : ''
                }}</span>
              </template> -->
            </el-table-column>
            <el-table-column
              label="产品名称"
              align="center"
              width="120"
              prop="productName"
            ></el-table-column>
            <el-table-column
              label="附加工艺"
              align="center"
              width="120"
              prop="slottingType"
            >
              <template slot-scope="scope">
                <span>{{
                  getDictValue('开槽类型', scope.row.slottingType + '')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="交货日期"
              align="center"
              prop="issuedTime"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.issuedTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="下发日期"
              align="center"
              prop="issuedTime"
              min-width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.issuedTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="teamName"
              label="班组"
            ></el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="showWorkReportDialog(scope.row)"
                  >报工</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 下面两个表格 -->
        <el-row class="bottom-row">
          <!-- 鞍架上剩余规格和数量 -->
          <el-col :span="12" class="left-col">
            <div style="border-bottom: 1px solid #fff; margin-right: 5px">
              <div class="saddle-table-title">鞍架余量表</div>

              <el-table
                :data="saddleTableData"
                border
                height="300"
                :header-row-style="headerRowStyle"
              >
                <el-table-column
                  label="高度"
                  align="center"
                  prop="height"
                  filterable
                  :filters="heightFilterArr1"
                  :filter-method="filterHeightMethod"
                ></el-table-column>
                <el-table-column
                  label="长1+长2+长3"
                  align="center"
                  prop="length"
                  min-width="120"
                ></el-table-column>
                <el-table-column
                  label="开槽类型"
                  align="center"
                  prop="slottingType"
                  width="100"
                  filterable
                  :filters="[
                    { text: '开槽', value: '开槽' },
                    { text: '不开槽', value: '不开槽' }
                  ]"
                  :filter-method="filterSlottingMethod"
                >
                  <template slot-scope="scope">
                    <span>{{
                      getDictValue('开槽类型', scope.row.slottingType + '')
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="片1+片2+片3"
                  align="center"
                  min-width="120"
                  prop="blockCount"
                >
                </el-table-column>
                <el-table-column
                  label="产品名称"
                  align="center"
                  width="120"
                  prop="productName"
                ></el-table-column>
                <el-table-column
                  label="模数"
                  align="center"
                  prop="ajSum"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleLower(scope.row)"
                      >下模</el-button
                    >
                    <el-button type="text" @click="handleSaveCutting(scope.row)"
                      >盘点/调整</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-dialog
              title="盘点/调整"
              :visible.sync="saveCuttingDialog"
              width="10%"
              :show-close="false"
              :close-on-click-modal="false"
              :close-on-press-escape="false"
            >
              <el-input
                v-model="saddleMargin"
                placeholder="请输入调整模数"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
              ></el-input>
              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="cancelSaddle">取 消</el-button>
                <el-button size="small" type="primary" @click="confirmSaddle"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </el-col>
          <el-col :span="12" class="right-col">
            <div style="border-bottom: 1px solid #fff; margin-left: 5px">
              <div class="product-schedule-title">组网排程表</div>
              <el-table
                :data="productScheduleTableData"
                border
                height="300"
                :header-row-style="headerRowStyle"
              >
                <!-- <el-table-column type="selection" width="50" align="center">
              </el-table-column> -->
                <el-table-column
                  label="高度"
                  align="center"
                  prop="height"
                  filterable
                  :filters="heightFilterArr2"
                  :filter-method="filterHeightMethod"
                ></el-table-column>
                <el-table-column
                  label="长1+长2+长3"
                  align="center"
                  prop="length"
                  min-width="120"
                ></el-table-column>
                <el-table-column
                  label="产品名称"
                  align="center"
                  width="120"
                  prop="productName"
                ></el-table-column>
                <el-table-column
                  label="开槽类型"
                  align="center"
                  prop="slottingType"
                  width="100"
                  filterable
                  :filters="[
                    { text: '开槽', value: '开槽' },
                    { text: '不开槽', value: '不开槽' }
                  ]"
                  :filter-method="filterSlottingMethod"
                >
                  <template slot-scope="scope">
                    <span>{{
                      getDictValue('开槽类型', scope.row.slottingType + '')
                    }}</span>
                  </template></el-table-column
                >
                <el-table-column
                  prop="weight"
                  label="等级"
                  align="center"
                  filterable
                  :filters="[
                    { text: 'A', value: 1 },
                    { text: 'B', value: 2 },
                    { text: 'C', value: 3 }
                  ]"
                  :filter-method="filterWeightMethod"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.weight | weightFilter }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qgSum"
                  label="切割余量"
                  align="center"
                  min-width="100"
                ></el-table-column>
                <el-table-column
                  prop="gwSum"
                  label="挂网数量"
                  align="center"
                  min-width="100"
                ></el-table-column>
                <el-table-column
                  prop="teamName"
                  label="班组"
                  align="center"
                  filterable
                  :filters="[
                    { text: '班组A', value: '班组A' },
                    { text: '班组B', value: '班组B' }
                  ]"
                  :filter-method="filterJobMethod"
                ></el-table-column>
                <el-table-column
                  prop="taskTime"
                  label="排产日期"
                  align="center"
                  min-width="100"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.taskTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注"
                  align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="recallProductSchedule(scope.row)"
                      >撤回</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 报工弹窗 -->
      <el-dialog
        :visible.sync="workReportDialog"
        width="50%"
        v-loading="dialogLoading"
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="handleCloseWorkReportDialog"
      >
        <el-table :data="workReportDialogData" border>
          <el-table-column label="等级" prop="weight" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.weight | weightFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="高度"
            prop="height"
            align="center"
          ></el-table-column>
          <el-table-column
            label="长1+长2+长3"
            align="center"
            width="120"
            prop="length"
          ></el-table-column>
          <el-table-column
            label="未挂网余量"
            align="center"
            width="110"
            prop="allowance"
          ></el-table-column>
          <el-table-column
            label="计划模数"
            align="center"
            width="100"
            prop="moCount"
          ></el-table-column>
          <el-table-column
            label="片1+片2+片3"
            align="center"
            width="120"
            prop="blockCount"
          >
          </el-table-column>
          <el-table-column
            label="附加工艺"
            align="center"
            width="120"
            prop="slottingType"
          >
            <template slot-scope="scope">
              <span>{{
                getDictValue('开槽类型', scope.row.slottingType + '')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="teamName"
            label="班组"
          ></el-table-column>
        </el-table>
        <div class="dialog1-footer">
          <el-button size="small" @click="handleCloseWorkReportDialog"
            >取消</el-button
          >
          <div class="spread-modulus">
            <span>挂网模数：</span>
            <el-input
              v-model="spreadModulus"
              @input="spreadModulusInput(spreadModulus)"
            ></el-input>
          </div>
          <el-button size="small" @click="handleWorkReport">确认</el-button>
        </div>
      </el-dialog>
      <!-- 下模弹窗 -->
      <el-dialog
        :visible.sync="lowerDieDialog"
        width="50%"
        v-loading="dialogLoading"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="handleCloseLowerDieDialog"

      >
        <el-table :data="lowerDieDialogData" border>
          <el-table-column label="等级" prop="weight" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.weight | weightFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="高度"
            prop="height"
            align="center"
          ></el-table-column>
          <el-table-column
            label="长1+长2+长3"
            align="center"
            width="120"
            prop="length"
          ></el-table-column>
          <el-table-column
            label="鞍架余量"
            align="center"
            width="100"
            prop="ajSum"
          ></el-table-column>
          <el-table-column
            label="计划模数"
            align="center"
            width="100"
            prop="qgSum"
          ></el-table-column>
          <el-table-column
            label="片1+片2+片3"
            align="center"
            width="120"
            prop="blockCount"
          >
          </el-table-column>
          <el-table-column
            label="附加工艺"
            align="center"
            width="120"
            prop="slottingType"
          >
            <template slot-scope="scope">
              <span>{{
                getDictValue('开槽类型', scope.row.slottingType + '')
              }}</span>
            </template></el-table-column
          >
          <el-table-column
            align="center"
            prop="teamName"
            label="班组"
          ></el-table-column>
        </el-table>
        <div class="dialog2-footer">
          <el-button size="small" @click="handleCloseLowerDieDialog"
            >取消</el-button
          >
          <div class="spud-modulus">
            <span>插钎模数：</span>
            <el-input
              v-model="spudModulus"
              @input="spudModulusInput(spudModulus)"
            ></el-input>
          </div>
          <el-button size="small" @click="handleLowerDie">确认</el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {
  getPutMeshWorkOrderByPage,
  putMesSubmit,
  saddleMarginDie,
  workFallback,
  getOnekeyWorkReportByPage,
  getPutMeshWorkOrderByGwPage,ListPageBG
} from '@/api/manufacture/spreadWorkOrder';
import { mapState } from 'vuex';
import basicContainer from '@/components/basic-container/main';
import dictMixins from '@/mixins/dictMixins';

export default {
  mixins: [dictMixins],
  components: {
    basicContainer
  },
  data() {
    return {
      headerRowStyle: {
        backgroundColor: ' #d0e4d5'
      },
      pageLoading: false,
      dialogLoading: false,
      taskDistTableData: [], // 下发未报工列表
      saddleTableData: [], // 鞍架上剩余规格和数量
      productScheduleTableData: [], // 生产排程列表数据
      workReportDialog: false, // 报工弹窗
      workReportDialogData: [], // 报工弹窗表格数据列表
      spreadModulus: '', // 报工弹窗挂网模数
      lowerDieDialog: false, // 下模弹窗
      lowerDieDialogData: [], // 下模弹窗表格数据列表
      spudModulus: '', // 下模弹窗插钎模数
      riqi: '',
      days: '',
      shijian: '',
      heightFilterArr1: [],
      heightFilterArr2: [],
      saveCuttingDialog: false, // 盘点调整弹窗
      saveCuttingRow: {},
      saddleMargin: '' // 调整模数
    };
  },
  computed: {
    ...mapState({
      info: (store) => store.user.info //用户数据
    })
  },
  filters: {
    weightFilter(value) {
      let weight = '';
      switch (value) {
        case 1:
          weight = 'A';
          break;
        case 2:
          weight = 'B';
          break;
        case 3:
          weight = 'C';
          break;
      }
      return weight;
    }
  },
  mounted() {
    this.gettime();
    this.newtime();
  },
  async created() {
    this.requestDict('开槽类型');

    this.pageLoading = true;
    try {
      await this.getWorkUnreport();
      await this.getSaddleData();
      await this.getProductSchedule();
      this.pageLoading = false;
    } catch (error) {
      this.pageLoading = false;
    }
  },
  methods: {
    gettime() {
      var date = new Date();
      let year = date.getFullYear();
      let mou = date.getMonth() + 1;
      let day = date.getDate();
      let days = date.getDay();
      switch (days) {
        case 1:
          days = '星期一';
          break;
        case 2:
          days = '星期二';
          break;
        case 3:
          days = '星期三';
          break;
        case 4:
          days = '星期四';
          break;
        case 5:
          days = '星期五';
          break;
        case 6:
          days = '星期六';
          break;
        case 0:
          days = '星期日';
          break;
      }
      let hou = date.getHours(); //获取当前小时数(0-23)
      let min = date.getMinutes(); //获取当前分钟数(0-59)
      let sec = date.getSeconds(); //获取当前秒数(0-59)
      if (mou < 10) mou = '0' + mou;
      if (day < 10) day = '0' + day;
      if (hou < 10) hou = '0' + hou;
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      this.riqi = year + '/' + mou + '/' + day;
      this.days = days;
      this.shijian = hou + ':' + min + ':' + sec;
    },
    newtime() {
      setInterval(() => {
        this.gettime();
      }, 1000);
    },
    // 获取组网任务表数据
    async getWorkUnreport() {
      this.pageLoading = true;
      try {
        let params = {
          // pageNum: 1,
          // pageSize: 100,
          listStatus: [1, 2]
          // artisanStatus: '0'
        };
        const res = await getPutMeshWorkOrderByGwPage(params);
        console.log('下发未报工数据:', res);
        this.pageLoading = false;
        this.taskDistTableData = res.data.data.list;

        // this.total = res.data.data.total
      } catch (error) {
        this.pageLoading = false;
      }
    },
    // 获取鞍架余量表数据
    async getSaddleData() {
      // return;
      this.pageLoading = true;
      this.heightFilterArr1 = [];
      const res = await getOnekeyWorkReportByPage({
        listStatus: [3]
      });
      this.pageLoading = false;
      this.saddleTableData = res.data.data.list;

      let tempHeight = [];
      this.saddleTableData.map((item) => {
        tempHeight.push(item.height);
      });
      tempHeight = [...new Set(tempHeight)];
      tempHeight.map((item) => {
        this.heightFilterArr1.push({
          value: item,
          text: item
        });
      });
    },
    // 获取组网排程表数据
    async getProductSchedule() {
      this.pageLoading = true;
      this.heightFilterArr2 = [];
      const res = await ListPageBG({
        listStatus: [3]
        // materialName: '板材',
        // pageSize: 1000,
        // pageNum: 1
      });
      this.pageLoading = false;
      this.productScheduleTableData = res.data.data.list;

      let tempHeight = [];
      this.productScheduleTableData.map((item) => {
        tempHeight.push(item.height);
      });
      tempHeight = [...new Set(tempHeight)];
      tempHeight.map((item) => {
        this.heightFilterArr2.push({
          value: item,
          text: item
        });
      });
    },
    // 报工按钮操作
    showWorkReportDialog(row) {
      this.workReportDialogData.push(JSON.parse(JSON.stringify(row)));
      this.workReportDialog = true;
    },
    // 关闭报工弹窗
    handleCloseWorkReportDialog() {
      this.workReportDialog = false;
      this.workReportDialogData = [];
      this.spreadModulus = '';
    },
    spreadModulusInput(val) {
      if (Number(val) > Number(this.workReportDialogData[0].allowance)) {
        this.spreadModulus = '';
        return this.$message.error('计划挂网模数不能大于未挂网余量！');
      }
    },
    spudModulusInput(val) {
      if (Number(val) > Number(this.lowerDieDialogData[0].ajSum)) {
        this.spudModulus = '';
        return this.$message.error('插钎模数不能大于鞍架余量！');
      }
    },
    // 确认报工操作
    handleWorkReport() {
      this.dialogLoading = true;
      let obj = {
        tid: this.workReportDialogData[0].id,
        // type: 0,
        allowance: this.spreadModulus
        // sjMeshSpecs: this.workReportDialogData[0].meshLength,
        // sjMeshSpecsTwo: '+'
      };
      putMesSubmit(obj)
        .then((res) => {
          this.workReportDialog = false;
          this.dialogLoading = false;
          this.workReportDialogData = [];
          this.spreadModulus = '';
          this.getWorkUnreport();
          this.getSaddleData();
          this.getProductSchedule();
          this.$message.success('报工成功!');
        })
        .catch(() => {
          this.dialogLoading = false;
        });
    },
    // 下模按钮操作
    handleLower(row) {
      console.log(row);
      this.lowerDieDialog = true;
      this.lowerDieDialogData.push(JSON.parse(JSON.stringify(row)));
    },
    // 盘点调整
    handleSaveCutting(row) {
      this.saveCuttingDialog = true;
      this.saveCuttingRow = row;
    },
    async confirmSaddle() {
      try {
        this.pageLoading = true;
        let query = {
          ajSum: this.saddleMargin,
          tid: this.saveCuttingRow.id,
          ajTrueFalse:2
        };
        const res = await saddleMarginDie(query);
        this.pageLoading = false;
        this.saveCuttingDialog = false;
        this.saddleMargin = '';
        this.getSaddleData();
        this.$message.success('操作成功！');
      } catch (error) {
        this.pageLoading = false;
        this.saveCuttingDialog = false;
        console.log(error);
      }
    },
    cancelSaddle() {
      this.saveCuttingDialog = false;
      this.saddleMargin = '';
    },
    // 关闭下模弹窗
    handleCloseLowerDieDialog() {
      this.lowerDieDialog = false;
      this.lowerDieDialogData = [];
      this.spudModulus = '';
    },
    // 确认下模操作
    handleLowerDie() {
      this.dialogLoading = true;
      let obj = {
        tid: this.lowerDieDialogData[0].id,
        ajSum: this.spudModulus,
        ajTrueFalse:1
      };
      saddleMarginDie(obj)
        .then((res) => {
          console.log(res);
          this.dialogLoading = false;
          this.lowerDieDialog = false;
          this.lowerDieDialogData = [];
          this.spudModulus = '';
          this.getSaddleData();
          this.$message.success('下模成功！');
        })
        .catch(() => {
          this.dialogLoading = false;
        });
    },
    // 撤回生产排程列表数据
    recallProductSchedule(row) {
      this.$confirm('确认撤回此条计划吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            let obj = {
              tid: row.id
              // type: 1,
              // modulus: row.cuttingMargin
            };
            await workFallback(obj);
            this.getWorkUnreport();
            this.getSaddleData();
            this.getProductSchedule();
            this.$message.success('撤回成功!');
          } catch (error) {
            this.pageLoading = false;
          }
        })
        .catch(() => {});
    },
    // 筛选高度
    filterHeightMethod(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 筛选开槽
    filterSlottingMethod(value, row, column) {
      if (value == '开槽') {
        return row['isSlotting'] === '是';
      } else {
        return row['isSlotting'] === '否';
      }
    },
    // 筛选等级
    filterWeightMethod(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 筛选班组
    filterJobMethod(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  padding: 0 20px;
  box-sizing: border-box;
  // color: #fff;
  height: 60px;
  width: 100%;
  background-color: #fff;
  font-size: 16px;
  .item:nth-child(1) {
    flex: 1;
  }
  .item:nth-child(2) {
    flex: 2;
    text-align: left;
  }
  .item:nth-child(3) {
    flex: 2;
    text-align: left;
  }
  .item:nth-child(4) {
    flex: 2;
    text-align: right;
  }
  .item:nth-child(5) {
    flex: 1;
  }
  .subWorkNameBox {
    font-size: 24px !important;
  }
}
:deep(.el-table) th.el-table__cell {
  background: none;
}
.basic-container {
  height: calc(100% - 66px);
}
:deep(.el-card.is-always-shadow) {
  height: calc(100%);
}
// :deep(.el-card.is-always-shadow),
// :deep(.el-table__empty-block),
// .basic-container,
// :deep(.el-table) {
//   // background-color: #080848;
// }
:deep(.el-table--border) {
  overflow: auto;
}

:deep(.el-table::before) {
  display: none;
}

:deep(.el-table) thead,
:deep(.el-table) tbody {
  // color: #fff !important;
}

:deep(.el-table) thead th,
:deep(.el-table) tbody td {
  // background-color: #080848 !important;
  font-size: 16px;
}
:deep(.el-table .cell) {
  line-height: 45px;
}

// 全局修改滚动条样式
:deep(::-webkit-scrollbar-thumb) {
  // background-color: #666aa1;
}

:deep(.el-button) {
  // background-color: #080848;
  // color: #fff;
}
:deep(.el-button.el-button--text) {
  font-size: 16px;
  &:hover {
    // color: red;
  }
}
.container {
  padding: 30px 0;
  box-sizing: border-box;
  .task-dist-title {
    // color: #fff;
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
  }
  .top-row {
    // border-bottom: 1px solid #fff;
    height: 50%;
  }
  .bottom-row {
    height: 50%;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    .left-col {
      .saddle-table-title {
        // color: #fff;
        font-size: 20px;
        align-self: center;
        flex: 1;
        text-align: center;
        margin-right: 10%;
        margin-bottom: 10px;
      }
    }
    .right-col {
      .product-schedule-title {
        font-size: 20px;
        // color: #fff;
        align-self: center;
        flex: 1;
        text-align: center;
        margin-right: 10%;
        margin-bottom: 10px;
      }
    }
  }
}
:deep(.el-table__column-filter-trigger) i {
  font-size: 14px;
  // color: #fff;
}
.dialog1-footer,
.dialog2-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  .spread-modulus,
  .spud-modulus {
    display: flex;
    align-items: center;
    margin: 0 50px;
    > span {
      width: 72px;
    }
    :deep(.el-input) {
      width: 120px;
    }
  }
}
</style>
