kd-aiot-frontend-aps/src/views/schedulingCalculation/mergePutMesh/index.vue

<template>
  <div class="mergePutMesh-container">
    <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 class="item">
        <div class="back" @click="$router.back()">
          <i class="icon-mes-fanhui"></i>
          <!-- <span class="font">返回</span> -->
        </div>
      </div>
    </div>
    <basic-container
      v-loading="pageLoading"
      element-loading-text="数据加载中..."
      element-loading-spinner="el-icon-loading"
    >
      <!-- 板材计划未合并挂网详情列表 -->
      <div class="unMerge-list">
        <div class="table-header-row">
          <el-button
            size="small"
            icon="el-icon-search"
            type="primary"
            class="screen"
            @click="searchDialogVisible = true"
            >筛选</el-button
          >
          <span class="table-title">板材计划未合并挂网详情列表</span>
        </div>
        <el-table
          :data="unMergeTableData"
          style="max-height: 300px"
          border
          v-loading="unMergeTableLoading"
          :header-row-style="headerRowStyle"
        >
          <el-table-column
            label="计划编号"
            align="center"
            prop="code"
            width="170"
          ></el-table-column>
          <el-table-column label="等级" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.row.weight | weightFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格型号"
            align="center"
            prop="specification"
          ></el-table-column>
          <el-table-column
            prop="productName"
            width="110"
            align="center"
            label="产品名称"
          ></el-table-column>
          <!-- <el-table-column
            label="是否开槽"
            align="center"
            prop="isSlotting"
          ></el-table-column> -->
          <el-table-column label="开槽类型" align="center" prop="slottingType">
            <template slot-scope="scope">
              <span>{{
                getDictValue('开槽类型', scope.row.slottingType + '')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="未排程块数"
            align="center"
            prop="noWordCount"
          ></el-table-column>
          <el-table-column
            label="计划块数"
            align="center"
            prop="blockCount"
          ></el-table-column>
          <el-table-column label="计划日期" align="center" prop="startTime">
            <template slot-scope="scope">
              <span>{{ scope.row.planDeliveryTime | subTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="交货期" align="center" prop="deliveryDate">
            <template slot-scope="scope">
              <span>{{ scope.row.reqMoldTime | subTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="项目名称"
            align="center"
            prop="projectName"
          ></el-table-column>
          <el-table-column label="首次排程" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | subTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            align="center"
            prop="remark"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="挂网"
                  placement="bottom"
                >
                  <el-button
                    type="text"
                    size="small"
                    class="handle-btn"
                    icon="el-icon-guide"
                    @click="handlePutMesh(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="bottom"
                >
                  <el-button
                    type="text"
                    size="small"
                    class="handle-btn"
                    icon="el-icon-delete"
                    @click="handleDeleteSchedule(scope.row)"
                  ></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 筛选弹窗 -->
        <el-dialog
          :visible.sync="searchDialogVisible"
          width="600px"
          append-to-body
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <span slot="title">查询条件</span>
          <el-form class="search-form" :model="searchForm" label-width="120px">
            <el-form-item label="项目名称：">
              <el-select v-model="searchForm.projectName" :clearable="true">
                <el-option
                  v-for="(item, index) in projectNameList"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称：">
              <el-select v-model="searchForm.productName" :clearable="true">
                <el-option
                  v-for="(item, index) in materialNameList"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格型号：">
              <el-input
                v-model="searchForm.specification"
                placeholder="请输入规格型号"
                style="width: 200px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="是否开槽：">
              <el-select v-model="searchForm.isSlotting" :clearable="true">
                <el-option value="1" label="是"></el-option>
                <el-option value="2" label="否"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="等级：">
              <el-select v-model="searchForm.weight" :clearable="true">
                <el-option :value="1" label="A"></el-option>
                <el-option :value="2" label="B"></el-option>
                <el-option :value="3" label="C"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="searchForm-btns">
            <el-button size="small" @click="reset">重置</el-button>
            <el-button size="small" type="success" @click="search"
              >查询</el-button
            >
          </div>
        </el-dialog>
      </div>

      <!-- 合并挂网(并模)图示 -->
      <div class="merge-pic-table-title">合并组网</div>
      <div class="merge-pic-table">
        <!-- 左边图示 -->
        <div class="merge-pic">
          <div
            v-for="(item, index) in editTableData"
            :key="index"
            class="pic-item"
            :style="{
              width: Number(item.specification.split('*')[0]) / 6 + '%'
            }"
          >
            <div>{{ item.specification }}</div>
            <div>{{ item.productName }}</div>
            <div>块数：{{ item.blockCount }}</div>
          </div>
          <div
            :style="{
              width: `${(surplusLength / 6.1).toFixed(2)}` + '%'
            }"
          >
            <span>剩余：</span>
            <span>{{ surplusLength }}</span>
            <div>{{ Number((surplusLength / 6.1).toFixed(2)) }}%</div>
          </div>
        </div>
        <div style="flex: 1; display: flex">
          <!-- 中间表格 -->
          <div class="merge-table">
            <el-table
              :data="editTableData"
              border
              :header-row-style="headerRowStyle"
            >
              <el-table-column
                label="规格"
                align="center"
                width="120"
                prop="specification"
              ></el-table-column>
              <el-table-column
                prop="productName"
                width="110"
                align="center"
                label="产品名称"
              ></el-table-column>
              <el-table-column
                label="块数"
                align="center"
                prop="blockCount"
              ></el-table-column>
              <el-table-column label="等级" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.weight | weightFilter }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="剩余模数"
                align="center"
                prop="surplusModulus"
              >
                <template slot-scope="scope">
                  <span>{{ getSurplusModulus(scope.row.specification) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="附加工艺"
                align="center"
                prop="slottingType"
              >
                <template slot-scope="scope">
                  <span>{{
                    getDictValue('开槽类型', scope.row.slottingType + '')
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="merge-btns">
              <el-button size="small" type="primary" @click="updateMerge"
                >确定</el-button
              >
              <el-button size="small" type="primary" @click="resetEditTable"
                >重置</el-button
              >
            </div>
          </div>
          <!-- 右边统计表 -->
          <div class="info-message">
            <div class="info-item">
              <span :style="headerRowStyle">班组</span>
              <span>*模数</span>
              <span>合计模数</span>
              <span>允许模数</span>
            </div>
            <div class="info-item">
              <span :style="headerRowStyle">网A</span>
              <el-input
                v-model="modulusNum1"
                placeholder="输入模数"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                @input="modulsNumInput"
              ></el-input>
              <span>{{ modulusSum }}</span>
              <span>{{ allowModulus }}</span>
            </div>
            <div class="info-item">
              <span :style="headerRowStyle">网B</span>
              <el-input
                v-model="modulusNum2"
                oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
                placeholder="输入模数"
                @input="modulsNumInput"
              ></el-input>
              <span>*任务日期</span>
              <el-date-picker
                v-model="taskDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
      </div>

      <!-- 任务未下发列表操作 && 下发未报工列表 -->
      <div class="task-distribution">
        <!-- 任务未下发列表 -->
        <div class="task-dist">
          <div class="task-btns">
            <div>
              <el-button
                size="small"
                @click="seletAll(taskDistTableData, 'taskDistTableData')"
                >全选</el-button
              >
              <!-- <el-button size="small">排序</el-button> -->
              <!-- <el-button size="small">筛选</el-button> -->
            </div>
            <div class="task-dist-title">组网过渡表</div>
            <div>
              <el-button
                size="small"
                @click="handleDeleteWorkOrder('取消', '0')"
                :disabled="taskDistSelection.length == 0"
                >取消</el-button
              >
              <el-button
                size="small"
                :disabled="taskDistSelection.length == 0"
                @click="taskDistribute"
                >任务下发</el-button
              >
            </div>
          </div>
          <el-table
            ref="taskDistTableData"
            :data="taskDistTableData"
            v-loading="taskDistTableLoading"
            style="max-height: 300px"
            border
            @selection-change="taskDistTableSelectionChange"
          >
            <el-table-column type="selection" width="45" align="center">
            </el-table-column>
            <el-table-column
              label="等级"
              align="center"
              width="70"
              prop="weight"
              filterable
              :filters="[
                { text: 'A', value: 1 },
                { text: 'B', value: 2 },
                { text: 'C', value: 3 }
              ]"
              :filter-method="filterWeightMethod1"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.weight | weightFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="70"
              label="高度"
              prop="height"
              filterable
              :filters="heightFilterArr1"
              :filter-method="filterHeightMethod1"
            ></el-table-column>
            <el-table-column
              label="长1+长2+长3"
              align="center"
              width="120"
              prop="length"
            ></el-table-column>
            <el-table-column
              prop="productName"
              width="110"
              align="center"
              label="产品名称"
            ></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"
            >
            </el-table-column>
            <!-- <el-table-column label="是否开槽" align="center"></el-table-column> -->
            <el-table-column
              align="center"
              width="115"
              prop="slottingType"
              filterable
              label="开槽类型"
              :filters="[
                { text: '开槽', value: '开槽' },
                { text: '不开槽', value: '不开槽' }
              ]"
              :filter-method="filterSlottingMethod1"
            >
              <template slot-scope="scope">
                <span>{{
                  getDictValue('开槽类型', scope.row.slottingType + '')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="日期" align="center" prop="taskTime">
              <template slot-scope="scope">
                <span>{{ scope.row.taskTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="85"
              prop="teamName"
              label="班组"
              filterable
              :filters="[
                { text: '班组A', value: '班组A' },
                { text: '班组B', value: '班组B' }
              ]"
              :filter-method="filterJobMethod1"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 任务下发未报工列表 -->
        <div class="work-unreport">
          <div class="unreport-btns">
            <div>
              <el-button
                size="small"
                @click="
                  seletAll(workUnreportTableData, 'workUnreportTableData')
                "
                >全选</el-button
              >
              <!-- <el-button size="small">排序</el-button> -->
              <!-- <el-button size="small">筛选</el-button> -->
            </div>
            <div class="work-unreport-title">组网任务表</div>
            <div>
              <el-button
                size="small"
                @click="handleDeleteWorkOrder('中止', '1')"
                :disabled="workUnreportSelection.length == 0"
                >人工中止</el-button
              >
              <el-button
                size="small"
                :disabled="workUnreportSelection.length == 0"
                @click="handleDeleteWorkOrder('撤回', '0')"
                >撤回</el-button
              >
            </div>
          </div>
          <el-table
            :data="workUnreportTableData"
            ref="workUnreportTableData"
            style="max-height: 300px"
            v-loading="workUnreportTableLoading"
            border
            @selection-change="workUnreportTableSelectionChange"
          >
            <el-table-column type="selection" width="45" align="center">
            </el-table-column>
            <el-table-column
              label="等级"
              align="center"
              width="70"
              prop="weight"
              filterable
              :filters="[
                { text: 'A', value: 1 },
                { text: 'B', value: 2 },
                { text: 'C', value: 3 }
              ]"
              :filter-method="filterWeightMethod1"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.weight | weightFilter }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="70"
              label="高度"
              prop="height"
              filterable
              :filters="heightFilterArr2"
              :filter-method="filterHeightMethod1"
            ></el-table-column>
            <el-table-column
              label="长1+长2+长3"
              align="center"
              prop="length"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="productName"
              width="110"
              align="center"
              label="产品名称"
            ></el-table-column>
            <el-table-column
              label="余量"
              align="center"
              width="70"
              prop="allowance"
            ></el-table-column>
            <el-table-column
              label="模数"
              align="center"
              prop="moCount"
              width="120"
            ></el-table-column>
            <el-table-column
              label="片1+片2+片3"
              align="center"
              prop="blockCount"
              width="120"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.blockCount }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="是否开槽" align="center"></el-table-column> -->
            <el-table-column
              align="center"
              width="115"
              prop="slottingType"
              filterable
              label="开槽类型"
              :filters="[
                { text: '开槽', value: '开槽' },
                { text: '不开槽', value: '不开槽' }
              ]"
              :filter-method="filterSlottingMethod1"
            >
              <template slot-scope="scope">
                <span>{{
                  getDictValue('开槽类型', scope.row.slottingType + '')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="任务日期" prop="taskTime" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.taskTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="下发日期" align="center" prop="issuedTime">
              <template slot-scope="scope">
                <span>{{ scope.row.issuedTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="85"
              prop="teamName"
              label="班组"
              filterable
              :filters="[
                { text: '班组A', value: '班组A' },
                { text: '班组B', value: '班组B' }
              ]"
              :filter-method="filterJobMethod1"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import basicContainer from '@/components/basic-container/main';
import {
  getScheduleWorkOrderByPage,
  updateMergeV2,
  getPutMeshWorkOrderByPage,
  issuedPutMeshWorkOrder,
  deletePutMeshWorkOrder,
  deleteScheduleWorkOrder
} from '@/api/mergePutMesh/mergePutMesh';
import { mapState } from 'vuex';
import dictMixins from '@/mixins/dictMixins';

export default {
  components: {
    basicContainer
  },
  mixins: [dictMixins],
  data() {
    return {
      permission: {},
      pageLoading: false,
      unMergeTableData: [], // 未合并挂网详情列表
      editTableData: [], // 合并挂网任务编辑详情列表
      taskDistTableData: [], // 任务未下发列表
      workUnreportTableData: [], // 任务已下发未报工列表
      taskDistSelection: [],
      workUnreportSelection: [],
      unMergeTableLoading: false,
      taskDistTableLoading: false,
      workUnreportTableLoading: false,
      searchDialogVisible: false, // 筛选弹窗
      headerRowStyle: {
        backgroundColor: ' #d0e4d5'
      },
      // 筛选弹窗表单
      searchForm: {
        projectName: '', // 项目名称下拉
        productName: '', // 产品名称下拉
        specification: '', // 规格型号
        weight: '', // 等级
        isSlotting: ''
      },
      projectNameList: [],
      materialNameList: [],
      modulusNum1: 0,
      modulusNum2: 0,
      taskDate: '', // 任务日期
      modulusLength: '',
      surplusLength: 610, // 剩余长度
      allowModulus: 0, // 允许模数
      modulusSum: 0, // 合计模数
      heightFilterArr1: [], // 高度筛选1表格
      heightFilterArr2: [], // 高度筛选2表格
      riqi: '',
      days: '',
      shijian: ''
    };
  },
  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;
    },
    subTime(value) {
      if (!value) return;
      let date = value.substr(0, value.indexOf(' '));
      return date;
    }
  },
  created() {
    this.requestDict('开槽类型');
    this.getScheduleWorkOrder({});
    this.getPutMeshWorkOrder();
    this.getWorkUnreport();
  },
  mounted() {
    this.gettime();
    this.newtime();
  },
  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);
    },
    // 获取未合并挂网数据列表
    getScheduleWorkOrder(params) {
      this.unMergeTableLoading = true;
      this.projectNameList = [];
      this.materialNameList = [];
      let pages = {
        pageNum: 1,
        pageSize: 100
      };
      let query = Object.assign(pages, params, {
        status: ['3', '2', '4']
      });
      getScheduleWorkOrderByPage(query)
        .then((res) => {
          this.unMergeTableLoading = false;
          console.log('未合并挂网数据列表:', res.data.data.list);
          this.unMergeTableData = res.data.data.list.filter((item) =>
            item.productName.includes('板材')
          );
          console.log(this.unMergeTableData, 'unMergeTableData');
          this.unMergeTableData.map((item) => {
            if (
              !this.projectNameList.includes(item.projectName) &&
              item.projectName
            ) {
              this.projectNameList.push(item.projectName);
            }
            if (!this.materialNameList.includes(item.productName)) {
              this.materialNameList.push(item.productName);
            }
          });
        })
        .catch(() => {
          this.unMergeTableLoading = false;
        });
    },
    // 获取任务未下发数据列表
    async getPutMeshWorkOrder() {
      this.taskDistTableLoading = true;
      this.heightFilterArr1 = [];
      let pages = {
        // pageNum: 1,
        // pageSize: 100,
        listStatus: [0]
        // artisanStatus: '0'
      };
      const res = await getPutMeshWorkOrderByPage(pages);
      console.log('任务未下发数据列表:', res.list);
      this.taskDistTableLoading = false;
      this.taskDistTableData = res.list;

      let tempHeight = [];
      this.taskDistTableData.map((item) => {
        tempHeight.push(item.height);
      });
      tempHeight = [...new Set(tempHeight)];
      tempHeight.map((item) => {
        this.heightFilterArr1.push({
          value: item,
          text: item
        });
      });
      // console.log(this.heightFilterArr1);
    },
    // 获取已下发未报工列表数据
    async getWorkUnreport() {
      this.workUnreportTableLoading = true;
      this.heightFilterArr2 = [];
      let pages = {
        // pageNum: 1,
        // pageSize: 100,
        listStatus: [1]
        // artisanStatus: '0'
      };
      const res = await getPutMeshWorkOrderByPage(pages);
      console.log('任务已下发数据列表:', res.list);
      // this.taskDistTableLoading = false
      this.workUnreportTableData = res.list;
      this.workUnreportTableLoading = false;

      let tempHeight = [];
      this.workUnreportTableData.map((item) => {
        tempHeight.push(item.height);
      });
      tempHeight = [...new Set(tempHeight)];
      tempHeight.map((item) => {
        this.heightFilterArr2.push({
          value: item,
          text: item
        });
      });
    },
    // 重置筛选表单
    reset() {
      this.searchForm = {
        projectName: '',
        productName: '',
        specification: '',
        weight: '',
        isSlotting: ''
      };
      this.searchDialogVisible = false;
      this.getScheduleWorkOrder({});
    },
    // 按表单查询
    search() {
      this.searchDialogVisible = false;
      this.getScheduleWorkOrder(this.searchForm);
    },
    // 挂网报工按钮操作
    handlePutMesh(row) {
      // 挂网判断
      // 1,只允许添加相同高度的计划
      // 2,只允许添加相同宽度的计划
      // 3,只允许添加相同工艺的计划
      // 4,长度加起来不能大610
      // 5,最多只能添加3条
      let rowModelArr = row.specification.split('*');
      // 要添加的规格的高度
      let addWide = Number(rowModelArr[1]);
      let addHeight = Number(
        rowModelArr[2].substr(0, rowModelArr[2].indexOf('cm'))
      );
      let allowSlotting = ''; // 已添加计划的工艺
      let allowWide = 0; // 已添加计划的高度
      let allowHeight = 0; // 已添加计划的高度
      let allowLong = 0; // 已添加计划的长度
      let addLong = Number(rowModelArr[0]); // 要添加计划的长度
      if (this.editTableData.length > 0) {
        allowSlotting = this.editTableData[0].slottingType;
        let modelArr = this.editTableData[0].specification.split('*');
        allowWide = Number(modelArr[1]);
        allowHeight = Number(modelArr[2].substr(0, modelArr[2].indexOf('cm')));

        // 计算已添加的长度的总和是否大610
        this.editTableData.map((item) => {
          allowLong += Number(item.specification.split('*')[0]);
        });
        if (this.editTableData.length == 3) {
          return this.$alert('最多只能添加三条计划！');
        }
        if (allowLong + addLong > 610) {
          return this.$alert('挂网并模总长度不能大于610！');
        }
        if (row.slottingType != allowSlotting) {
          return this.$alert(
            `请添加${this.getDictValue(
              '开槽类型',
              allowSlotting + ''
            )}工艺的计划！`
          );
        }
        if (addHeight != allowHeight) {
          return this.$alert(`请添加高度为${allowHeight}cm的计划！`);
        }
        if (addWide != allowWide) {
          return this.$alert(`请添加宽度为${allowWide}的计划！`);
        }
      }
      this.editTableData.push(JSON.parse(JSON.stringify(row)));

      let equalIdObj = {};
      this.editTableData.map((item) => {
        if (equalIdObj[item.id]) {
          equalIdObj[item.id]++;
        } else {
          this.$set(equalIdObj, item.id, 1);
        }
      });

      let longSum = 0;
      let surplusModulusArr = []; // 允许模数
      this.editTableData.map((item) => {
        item.equalIdNum = equalIdObj[item.id];
        let modelArr = item.specification.split('*');
        let modelHeight = modelArr[2];
        modelHeight = Number(modelHeight.substr(0, modelHeight.indexOf('cm')));
        longSum += Number(modelArr[0]);
        // 块数
        item.blockCount = Number(Math.floor(120 / modelHeight));
        // 剩余模数
        item.surplusModulus = Number(
          Math.ceil(item.noWordCount / item.blockCount / item.equalIdNum)
        );

        surplusModulusArr.push(item.surplusModulus);
      });
      // console.log(this.editTableData,'editTableData')
      // 获取允许模数 allowModulus
      this.allowModulus = Math.min(...surplusModulusArr);

      this.surplusLength = 610 - longSum;
      // 计算模数长度
      this.modulusLength =
        (100 - (this.surplusLength / 6.1).toFixed(2)) /
          this.editTableData.length +
        '%';
    },
    getSurplusModulus(specification) {
      return Math.min(
        ...this.editTableData
          .filter((item) => item.specification == specification)
          .map((item) => item.surplusModulus)
      );
    },
    // 输入模数
    modulsNumInput() {
      this.modulusSum = Number(this.modulusNum1) + Number(this.modulusNum2);
      if (this.modulusSum > this.allowModulus) {
        this.$alert('合计模数不能大于允许模数！');
        this.modulusSum = 0;
        this.modulusNum1 = 0;
        this.modulusNum2 = 0;
        return false;
      }
      return true;
    },
    // 重置合并挂网
    resetEditTable() {
      this.editTableData = [];
      this.modulusSum = 0;
      this.modulusNum1 = 0;
      this.modulusNum2 = 0;
      this.allowModulus = 0;
      this.taskDate = '';
      this.surplusLength = 610;
      this.modulusLength = '';
    },
    // 确定添加挂网并模
    updateMerge() {
      if (this.editTableData.length == 0)
        return this.$alert('请选择要挂网的计划列表！');
      if (Number(this.modulusNum1) + Number(this.modulusNum2) == 0)
        return this.$alert('请输入班组模数！');
      if (!this.taskDate) return this.$alert('请选择任务日期！');
      if (!this.modulsNumInput()) return;

      this.pageLoading = true;
      let ids = [];
      let meshSpecs = [];
      let meshNumber = [];
      let meshSpecsTwo = [];
      let meshNumberTwo = [];
      let numbersArr = [];
      // for (let i = 0; i < this.editTableData.length; i++) {
      //   ids.push(this.editTableData[i].id);
      //   meshSpecs.push(this.editTableData[i].model);
      //   meshNumber.push(this.editTableData[i].moCount);
      //   meshSpecsTwo.push('+');
      //   meshNumberTwo.push('+');
      //   numbersArr.push('1');
      // }

      let data = {
        mergeIds: this.editTableData.map((item) => item.id).toString(),
        meshNumber: this.editTableData.map((item) => item.blockCount).join('+'),
        modulus:
          this.modulusNum1 && this.modulusNum2
            ? this.modulusNum1 + ',' + this.modulusNum2
            : this.modulusNum1 || this.modulusNum2,
        job: this.modulusNum1 && this.modulusNum2 ? 2 : 1,
        endTime: this.taskDate
        // mergeId: ids.join(','),
        // numbers: numbersArr.join(','),
        // moduls: String(this.modulusSum), // 合计模数
        // meshSpecs: meshSpecs.join(','), // 网片尺寸
        // meshNumber: meshNumber.join(','), // 网片数量
        // meshSpecsTwo: meshSpecsTwo.join(','), // 网片尺寸2
        // meshNumberTwo: meshNumberTwo.join(','), // 网片数量2
        // meshType: '单网', // 网片类型
        // joba: '班组A',
        // jobb: '班组B',
        // endTime: this.taskDate + ' 00:00:00', // 任务日期
        // jobaModulus: Number(this.modulusNum1), // 网A数量
        // jobbModulus: Number(this.modulusNum2) // 网B数量
      };

      updateMergeV2(data)
        .then((res) => {
          this.pageLoading = false;
          this.$message.success('任务添加成功！');
          this.resetEditTable();
          this.getScheduleWorkOrder({});
          this.getPutMeshWorkOrder();
        })
        .catch((err) => {
          this.pageLoading = false;
          this.$message.success('任务添加失败！');
        });
    },
    // 筛选等级1
    filterWeightMethod1(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 筛选高度1
    filterHeightMethod1(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 筛选班组1
    filterJobMethod1(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    // 筛选开槽1
    filterSlottingMethod1(value, row, column) {
      if (value == '开槽') {
        return row['isSlotting'] == '1';
      } else {
        return row['isSlotting'] == '2';
      }
    },
    // 任务未下发列表多选
    taskDistTableSelectionChange(val) {
      this.taskDistSelection = val;
    },
    // 任务下发按钮操作
    taskDistribute() {
      this.$confirm('确认下发选中的任务吗？', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let ids = this.taskDistSelection.map((item) => item.id);
          const res = await issuedPutMeshWorkOrder({ id: ids, status: 1 });
          this.$message.success('任务下发成功！');
          this.getPutMeshWorkOrder();
          this.getWorkUnreport();
        })
        .catch(() => {});
    },
    // 任务下发未报工列表多选
    workUnreportTableSelectionChange(val) {
      this.workUnreportSelection = val;
    },
    // 按钮全选
    seletAll(data, tableName) {
      if (data) {
        data.forEach((row) => {
          this.$refs[tableName].toggleRowSelection(row, true);
        });
      }
    },
    // 批量删除挂网工单信息(取消、删除、撤回)
    handleDeleteWorkOrder(btnType, type) {
      this.$confirm(`确定${btnType}选中的任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.pageLoading = true;
          let ids = '';
          if (btnType == '取消') {
            ids = this.taskDistSelection.map((item) => item.id);
          } else if (btnType == '撤回' || btnType == '中止') {
            ids = this.workUnreportSelection.map((item) => item.id);
          }

          // let params = { type, ids };
          deletePutMeshWorkOrder({ id: ids }, type)
            .then((res) => {
              this.pageLoading = false;
              this.$message.success(res.data.msg);
              this.getScheduleWorkOrder({});
              this.getPutMeshWorkOrder();
              this.getWorkUnreport();
            })
            .catch(() => {
              this.pageLoading = false;
            });
        })
        .catch(() => {});
    },
    // 未合并挂网列表删除
    handleDeleteSchedule(row) {
      this.$confirm('确定删除选中的任务吗？', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.pageLoading = true;
          let ids = row.id;
          deleteScheduleWorkOrder({ ids })
            .then((res) => {
              this.pageLoading = false;
              this.$message.success(res.data.msg);
              this.getScheduleWorkOrder({});
            })
            .catch(() => {
              this.pageLoading = false;
            });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.avue-view {
  height: 100vh;
}
.title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  padding: 0 20px;
  box-sizing: border-box;
  // color: #000;
  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;
  }
}
:deep(.el-table) th.el-table__cell {
  background: none;
}
:deep(.el-card.is-always-shadow),
:deep(.el-table__empty-block),
.basic-container {
  // background-color: #fff;
  height: calc(100% - 66px);
}

:deep(.el-table--border) {
  overflow: auto;
}

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

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

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

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

:deep(.el-button) {
  // background-color: #080848;
  // color: #fff;
}

// 最上面一行
.unMerge-list {
  height: 50%;
  margin-bottom: 8px;
  // border: 1px solid #fff;
  .table-header-row {
    display: flex;
    .screen {
      padding: 9px 30px;
      margin: 5px 0 5px 5px;
    }
    .table-title {
      flex: 1;
      // color: #fff;
      text-align: center;
      font-size: 20px;
      padding-right: 10%;
      line-height: 43px;
    }
  }
  .handle-btn {
    font-size: 16px;
  }
}

// 筛选弹窗
.search-form {
  :deep(.el-input__inner) {
    width: 300px;
  }
}
// 筛选弹窗
.searchForm-btns {
  margin-top: 10px;
  text-align: center;
  padding-right: 30px;
  :deep(.el-button) {
    // background-color: #157a2c !important;
    padding: 9px 30px;
  }
}

// 第二行
.merge-pic-table-title {
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  // border: 1px solid #fff;
  border-bottom: 0;
}
.merge-pic-table {
  display: flex;
  height: 200px;
  .merge-pic {
    display: flex;
    width: 610px;
    height: 100%;
    margin-right: 8px;
    color: #fff;
    // border: 1px solid #fff;
    box-sizing: border-box;
    font-size: 14px;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 15px 0;
      &:nth-child(1) {
        background-color: #409eff;
      }
      &:nth-child(2) {
        background-color: #e6a23c;
      }
      &:nth-child(3) {
        background-color: #67c23a;
      }
      &:last-child {
        background-color: #191a23;
      }
    }
  }

  .merge-table {
    flex: 0.6;
    height: 100%;
    border: 1px solid #fff;
    box-sizing: border-box;
    :deep(.el-table__header-wrapper) {
      background-color: #080848;
    }
    :deep(.el-table) {
      // border: 0;
      height: calc(100% - 45px);
      // background-color: #080848;
    }
    :deep(.el-button--primary) {
      padding: 9px 30px;
      // border-color: #fff;
    }
    .merge-btns {
      padding: 5px;
      text-align: right;
    }
  }
  .info-message {
    flex: 0.4;
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed;
    margin-left: 8px;
    display: flex;
    // color: #fff;
    .info-item {
      flex: 1;
      border-right: 1px solid #ededed;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      > span,
      :deep(.el-input) {
        flex: 1;
        border-bottom: 1px solid #ededed;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      :deep(.el-input__inner) {
        padding: 0;
        padding-left: 10px;
        // border: 0;
        border-radius: 0;
        margin: 0 5px;
        // background-color: #ccc;
        // color: #fff;
      }
      :deep(.el-date-editor) {
        width: 100%;
      }
      :deep(.el-input__icon) {
        display: none;
      }
    }
  }
}

// 第三行 任务未下发列表 和下发未报工列表
.task-distribution {
  margin-top: 8px;
  display: flex;
  .task-dist {
    width: 45%;
    overflow: auto;
    margin-right: 8px;
    // border: 1px solid #fff;
    box-sizing: border-box;
    .task-btns {
      // border-bottom: 1px solid #fff;
      padding: 5px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .task-dist-title {
        font-size: 20px;
        // color: #fff;
        text-align: center;
        flex: 1;
        align-self: center;
      }
    }
  }

  .work-unreport {
    width: 55%;
    overflow: auto;
    // border: 1px solid #fff;
    box-sizing: border-box;
    .unreport-btns {
      padding: 5px;
      // border-bottom: 1px solid #fff;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .work-unreport-title {
        flex: 1;
        font-size: 20px;
        // color: #fff;
        text-align: center;
        line-height: 33px;
      }
    }
  }
}
:deep(.el-dropdown-selfdefine) {
  font-size: 16px;
  // color: #fff;
}
:deep(.el-dropdown-menu) {
  padding: 4px;
  box-sizing: border-box;
}
:deep(.el-dropdown-menu__item) {
  font-size: 16px !important;
}
:deep(.el-table__column-filter-trigger) i {
  font-size: 14px;
  // color: #fff;
}
// /deep/ .el-table__header tr,
// /deep/ .el-table__header th {
//   height: 42px;
// }
</style>