industry-ui/src/views/work/resource/index.vue

<template>
  <div>
    <div class="hxjx_root">
      <!--产品信息-->
      <div>
        <div style="width:60%;">
          <span>产品信息:</span>
          <table class="table  table-hover table-bordered table-striped table-condensed text-nowrap">
            <thead class="hxjx_table_th">
            <tr>
              <th class="hxjx_table_th_width">序号</th>
              <th class="hxjx_table_th_width">钽靶批号</th>
              <th class="hxjx_table_th_width">规格</th>
              <th class="hxjx_table_th_width">工艺</th>
              <th class="hxjx_table_th_width">直径</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="dataList.length>0 " v-for="(item,index) in dataList" @click="getTechnologyInfo(index)">
              <td class="hxjx_table_btnColumn"
                  :class="{table_td_select:index===indexSelect && item.id!=null}"
              >{{ index + 1 }}
              </td>
              <td class="hxjx_table_btnColumn"
                  :class="{table_td_select:index===indexSelect && item.id!=null}"
              >{{ item.id }}
              </td>
              <td class="hxjx_table_btnColumn"
                  :class="{table_td_select:index===indexSelect && item.id!=null}"
              >{{ item.specification }}
              </td>
              <td class="hxjx_table_btnColumn"
                  :class="{table_td_select:index===indexSelect && item.id!=null}"
              >{{ item.technology }}
              </td>
              <td class="hxjx_table_btnColumn"
                  :class="{table_td_select:index===indexSelect && item.id!=null}"
              >{{ item.diameter }}
              </td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>

      <!--粗轧道次表-->
      <div style="width:60%;margin-left:1%;" id="rollingpass">
        <span>粗轧道次表:</span>
        <!-- 表1 -->
        <table class="table  table-hover table-bordered table-striped table-condensed text-nowrap"
               style="vertical-align: middle;"
        >
          <thead>
          <tr>
            <th class="hxjx_table_th_width table_tdth" colspan="5" rowspan="2">
              <span id="hxjx-table-title"></span>
              {{ technologyId }}轧制工艺单
            </th>
            <th class="hxjx_table_th_width table_tdth" colspan="4"></th>
          </tr>
          <tr>
            <th class="hxjx_table_th_width table_tdth">制作人：</th>
            <th class="hxjx_table_th_width table_tdth"></th>
            <th class="hxjx_table_th_width table_tdth">审核人：</th>
            <th class="hxjx_table_th_width table_tdth"></th>
          </tr>
          <tr>
            <th class="hxjx_table_th_width table_tdth" rowspan="2" style="vertical-align: middle;">道次</th>
            <th class="hxjx_table_th_width table_tdth" colspan="3">粗轧工艺设计</th>
            <th class="hxjx_table_th_width table_tdth" colspan="3">检移票号码：</th>
            <th class="hxjx_table_th_width table_tdth" colspan="2">粗轧操作记录</th>
          </tr>
          <tr>
            <th class="hxjx_table_th_width table_tdth">压下量</th>
            <th class="hxjx_table_th_width table_tdth">轧前厚度</th>
            <th class="hxjx_table_th_width table_tdth">轧后厚度</th>
            <th class="hxjx_table_th_width table_tdth">喂料角度</th>
            <th class="hxjx_table_th_width table_tdth">设定值</th>
            <th class="hxjx_table_th_width table_tdth">判定确认</th>
            <th class="hxjx_table_th_width table_tdth">程序设定员</th>
            <th class="hxjx_table_th_width table_tdth">备注</th>
          </tr>
          </thead>
          <tbody id="hxjx-tbody-one">
          <tr v-for="(item,index) in technologyInfoList">
            <td class="hxjx_table_btnColumn table_tdth">{{ item.step }}</td>
            <td class="hxjx_table_btnColumn table_tdth">{{ item.reduction }}</td>
            <td class="hxjx_table_btnColumn table_tdth">{{ item.thicknessFront }}</td>
            <td class="hxjx_table_btnColumn table_tdth">{{ item.thicknessBehind }}</td>
            <td class="hxjx_table_btnColumn table_tdth">{{ item.angle }}</td>
            <td class="hxjx_table_btnColumn table_tdth">{{ item.setValue }}</td>
            <td class="hxjx_table_btnColumn table_tdth"></td>
            <td class="hxjx_table_btnColumn table_tdth"></td>
            <td class="hxjx_table_btnColumn table_tdth"></td>
          </tr>


          </tbody>
          <thead>
          <tr>
            <th class="hxjx_table_th_width table_tdth" colspan="2">粗轧后厚度：</th>
            <th class="hxjx_table_th_width table_tdth" colspan="2"></th>
            <th class="hxjx_table_th_width table_tdth"></th>
            <th class="hxjx_table_th_width table_tdth">轧制员：</th>
            <th class="hxjx_table_th_width table_tdth" colspan="3"></th>
          </tr>
          </thead>
        </table>
        <!-- 表2 -->
        <table class="table  table-hover table-bordered table-striped table-condensed text-nowrap"
               style="vertical-align: middle;"
        >
          <thead>
          <tr>
            <th class="hxjx_table_th_width table_tdth" rowspan="2" style="vertical-align: middle;">道次</th>
            <th class="hxjx_table_th_width table_tdth" colspan="5">四辊精轧记录</th>
            <th class="hxjx_table_th_width table_tdth" colspan="3" rowspan="2" style="vertical-align: middle;">
              程序设定员
            </th>
            <th class="hxjx_table_th_width table_tdth" rowspan="2" style="vertical-align: middle;">备注</th>
          </tr>
          <tr>
            <th class="hxjx_table_th_width table_tdth" colspan="2">设定值范围(±0.2)</th>
            <th class="hxjx_table_th_width table_tdth" colspan="2">辊缝设定</th>
            <th class="hxjx_table_th_width table_tdth">判定</th>
          </tr>
          </thead>
          <tbody id="hxjx-tbody-two">
          <tr v-for="(item,index) in technologyInfoListByFour">
            <td class="hxjx_table_btnColumn table_tdth">{{ item.step }}</td>
            <td class="hxjx_table_btnColumn table_tdth" colspan="2">{{ item.setValue }}</td>
            <td class="hxjx_table_btnColumn table_tdth" colspan="2"></td>
            <td class="hxjx_table_btnColumn table_tdth"></td>
            <td class="hxjx_table_btnColumn table_tdth" colspan="2"></td>
            <td class="hxjx_table_btnColumn table_tdth"></td>
            <td class="hxjx_table_btnColumn table_tdth"></td>
          </tr>

          </tbody>
          <thead>
          <tr>
            <th class="hxjx_table_th_width table_tdth" colspan="3">
              厚度标准值：
              <span id="hxjx-table-thickness"></span>
            </th>
            <th class="hxjx_table_th_width table_tdth" colspan="2">精轧后厚度值：</th>
            <th class="hxjx_table_th_width table_tdth"></th>
            <th class="hxjx_table_th_width table_tdth" colspan="2">OK □ NG □</th>
            <th class="hxjx_table_th_width table_tdth"></th>
          </tr>
          <tr>
            <th class="hxjx_table_th_width table_tdth" colspan="3">轧制日期：</th>
            <th class="hxjx_table_th_width table_tdth" colspan="2">轧制人员签字确认：</th>
            <th class="hxjx_table_th_width table_tdth" colspan="5"></th>
          </tr>
          </thead>
        </table>
        <!-- 表3 -->
        <table class="table  table-hover table-bordered table-striped table-condensed text-nowrap"
               style="vertical-align: middle;"
        >
          <thead>
          <tr>
            <th class="hxjx_table_th_width table_tdth" colspan="9">
              精轧参数参考设定值，实际压下量根据产品厚度及厚度均匀性进行设定（精轧实际设定值在设定值范围内即可）
            </th>
          </tr>
          </thead>
        </table>
      </div>
    </div>

    <!-- 按钮操作 -->
    <div style="display: flex;justify-content: center;">

      <el-button  style="margin-right: 0;"
         @click="success"
      >确定</el-button>

      <el-button  style="margin-left: 20px;"
                  @click="clear"
      >初始化</el-button>
    </div>

    <div id="hxjx_popup" class="hxjx_popup" v-if="showFault">
      <!-- 表头-->
      <div class="hxjx_popup_header_danger">
        <span style="float:left">故障</span>
        <!-- <span id="hxjx_popup_header_close" style="float:right"><i class='fa fa-times' style="font-size: 20px;cursor: pointer;"></i></span> -->
      </div>
      <!-- body-->
      <div class="hxjx_popup_body_danger">
        <div style="width:100%;height:227px;">
          <table class="table table-borderless hxjx_table_text_left">
            <tbody>
            <tr>
              <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">时间:</td>
              <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">{{ messageData.createTime }}
              </td>
              <td class="hxjx_table_label_format hxjx_table_text_rule"
                  style="padding:0.25rem;vertical-align: middle;"
              ></td>
            </tr>
            <tr>
              <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">故障名称:</td>
              <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">{{ messageData.faultName }}
              </td>
              <td class="hxjx_table_label_format hxjx_table_text_rule"
                  style="padding:0.25rem;vertical-align: middle;"
              ></td>
            </tr>
            <tr>
              <td class="hxjx_table_label_format hxjx_table_label" style="padding:0.25rem;">故障信息:</td>
              <td class="hxjx_table_label_format hxjx_table_text" style="padding:0.25rem;">
                {{ messageData.faultMessage }}
              </td>
              <td class="hxjx_table_label_format hxjx_table_text_rule"
                  style="padding:0.25rem;vertical-align: middle;"
              ></td>
            </tr>
            </tbody>
          </table>
        </div>
        <!-- 按钮操作 -->
        <table class="table">
          <tr>
            <td style="padding: 20px 0 0 0;text-align: right; border-top:0px solid #dc3545">
              <div class="btn-group btn-group-sm">
                <a href="#" class="hxjx-button-ensure btn btn-danger btn-sm custom hxjx_foot_btn_custom"
                   style="margin-right: 0;" @click="ensure"
                >确定</a>
              </div>


            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  listMaterial1,
  listTechnology,
  materialClear,
  messageData,
  messageUpdate,
  updateResource
} from '@/api/system/resource'
import { getFaultMessage, newIP } from '@/api/system/common'

export default {
  name: 'index',
  data() {
    return {
      MessageParams: {
        state: 0
      },
      showFault: false,
      dataList: [],
      indexSelect: 0,
      technologyId: '',
      // 粗轧请求参数
      params: {
        state: 0,
        pageSize: 999
      },
      // 精轧请求参数
      params2: {
        state: 1,
        pageSize: 999
      },
      technologyInfoList: [],
      technologyInfoListByFour: [],
      messageData: {}
    }
  },
  methods: {
    success() {
      if (this.dataList.length === 0) {
        alert('钽靶原料列表为空，不可提交')
        return
        // TODO 考虑原料列表队列问题  及上一批材料未处理完毕 又来了一批材料
      }
      let data = {
        batchId: this.dataList[0].batchId,
        state: 0
      }
      updateResource(data).then(res => {
        if (res.data === 1) {
          // 提交成功 给个提醒
          // 列表制空
          alert('钽靶原料成功提交至轧制')
          this.dataList = []

        } else if(res.data===0){
          alert('提交失败，请检查工艺是否相同')
        }else if (res.data ===2){
          alert('提交失败，请检查此物料工艺是否存在于数据库中')
        }
      })

    },

    // 选择材料
    getTechnologyInfo(index) {
      this.indexSelect = index

      let params = this.params
      params.technologyId = this.dataList[index].technology
      this.technologyId = params.technologyId

      if (params.technologyId == null) {
        return
      }
      listTechnology(params).then(res => {
        this.technologyInfoList = res.rows
      })

      let params2 = this.params2
      params2.technologyId = this.dataList[index].technology
      listTechnology(params2).then(res => {
        this.technologyInfoListByFour = res.rows
      })
    },

    getDataList() {
      //state==0表示并未送进轧制页面的新进材料
      let params = {
        state: 0
      }
      listMaterial1(params).then(res => {
        this.dataList = res.rows
        console.log(res.rows)
        if (res.rows[0].id != null && this.indexSelect === 0) {
          this.getTechnologyInfo(0)
        }
      })
    },
    getFault() {

      getFaultMessage().then(res => {
        if (res.data !== 0) {
          this.showFault = true
          messageData(this.MessageParams).then(res => {
            this.messageData = res.data
          })
        }
      })
    },
    ensure() {
      let data = {
        state: 1
      }
      messageUpdate(data).then(res => {
        this.showFault = false
      })
    },

    clear() {
      materialClear().then(res => {
        alert('初始化成功')
      })
    }

  },
  mounted() {

    clearInterval(this.intervalTime)

    this.getDataList()  // 接口方法

    this.intervalTime = setInterval(() => {
      newIP()
      this.getFault()
      this.getDataList()  // 接口方法
    }, 3000)
  },
  created() {

  }
}
</script>

<style scoped>
.hxjx_root {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 0.875rem;
}

.hxjx_navigator_info {
  height: 40px;
  border-radius: 5px;
  position: relative;
  font-size: 1rem;
  font-weight: 700;
}

.hxjx_table_label_format {
  word-break: keep-all;
  white-space: nowrap;
}

.hxjx_table_text_rule {
  color: red;
}

.hxjx_table_text {
  width: 300px !important;
  text-align: left;
  padding: 6px;
}

.hxjx_table_label {
  padding: 0px !important;
  vertical-align: middle !important;
  width: 100px;
}

.hxjx_table_text_left {
  text-align: left;
}

.hxjx_btn_margin_right5 {
  margin-right: 5px;
}

.hxjx_footer_main {
  background-color: white;
  border: solid 1px transparent !important;
}

.hxjx_table_btnColumn {
  word-break: keep-all !important;
  white-space: nowrap !important;
}

.hxjx_foot_btn_custom {
  width: 90px !important;
  margin-right: 5px;
}

/* 后添加的样式 */
.hxjx_footer_main {
  text-align: center !important;
}

.hxjx_table_btnColumn {
  border-top: 0 !important;
}

.hxjx_table_btn {
  width: 50px !important;
  margin: 2px;
}

.hxix_table_border {
  border: 1px solid #CCC;
}

#product .table td, #product .table th {
  padding: 0.5rem;
}

.hxjx_table_th {
  background-color: rgb(91, 155, 213);
  color: #fff;
}

#rollingpass .table td, #rollingpass .table th {
  padding: 0;
}

.table_td_select {
  background-color: yellow;
}

.table_tdth {
  vertical-align: middle;
  text-align: center;
}


.hxjx_table_label_format {
  word-break: keep-all;
  white-space: nowrap;
}

.hxjx_table_text_rule {
  color: red;
}

.hxjx_table_text {
  width: 300px !important;
  text-align: left;
  padding: 6px;
}

.hxjx_table_label {
  padding: 0px !important;
  vertical-align: middle !important;
  width: 100px;
}

.hxjx_table_text_left {
  text-align: left;
}

.table td, .table th {
  padding: 0.5rem;
}

.hxjx_popup {
  position: fixed;
  left: 400px;
  top: 200px;
  width: 640px;
  height: 360px;
  font-size: 14px;
}

.hxjx_popup_header_danger {
  width: 100%;
  height: 40px;
  padding: 9px;
  background-color: #dc3545;
  color: #fff;
}

.hxjx_popup_body_danger {
  width: 100%;
  height: 320px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #dc3545;
}
</style>