double-rack/ruoyi-ui/src/views/mill/plan.vue

<template>
  <div class="plan-page">

    <!-- 左侧：钢卷队列列表 -->
    <div class="left-panel">
      <div class="panel-header">
        <span>轧制队列</span>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </div>

      <!-- 查询栏 -->
      <div class="search-bar">
        <el-input v-model="query.inMatNo" placeholder="钢卷编号" size="mini" clearable
          prefix-icon="el-icon-search" @input="loadList" />
        <el-checkbox v-model="query.hideFinished" size="mini" @change="loadList" style="margin-top:6px;font-size:11px">不显示完成</el-checkbox>
      </div>

      <!-- 列表 -->
      <div class="coil-list">
        <div v-for="p in planList" :key="p.id"
             :class="['coil-item', { active: selectedId === p.id }, prodItemClass(p.prodStatus)]"
             @click="handleSelect(p)">
          <div class="coil-item__no">
            <span>{{ p.sortNo }}. {{ p.inMatNo }}</span>
            <span :class="prodStatusClass(p.prodStatus)" class="coil-status-dot">{{ prodStatusLabel(p.prodStatus) }}</span>
          </div>
          <div class="coil-item__info">
            <span>{{ p.alloyNo }}</span>
            <span>{{ p.inMatThick }} → {{ p.outThick }} mm</span>
            <span v-if="p.recipeNo">{{ p.recipeNo }}</span>
          </div>
        </div>
        <div v-if="planList.length === 0" class="empty-tip">暂无计划</div>
      </div>
    </div>

    <!-- 右侧：详情 -->
    <div class="right-panel">
      <div v-if="!form.id && !isNew" class="no-select">
        <i class="el-icon-document"></i>
        <p>请在左侧选择钢卷</p>
      </div>

      <template v-else>
        <!-- 顶部操作栏 -->
        <div class="detail-header">
          <span>{{ isNew ? '新建钢卷计划' : form.inMatNo }}</span>
          <div class="btn-group">
            <el-button size="mini" type="primary" icon="el-icon-check"  @click="handleSave">保存</el-button>
            <el-button size="mini" icon="el-icon-refresh"               @click="handleReset">重置</el-button>
            <el-button v-if="!isNew" size="mini" icon="el-icon-top"     @click="handleMoveUp">上移</el-button>
            <el-button v-if="!isNew" size="mini" icon="el-icon-bottom"  @click="handleMoveDown">下移</el-button>
            <el-button v-if="!isNew" size="mini" type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
          </div>
        </div>

        <!-- 基本信息表单 -->
        <el-form :model="form" :rules="rules" ref="formRef" size="mini" label-width="88px" class="coil-form">
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="钢卷编号" prop="inMatNo">
                <el-input v-model="form.inMatNo" :disabled="!isNew" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="合金牌号" prop="alloyNo">
                <el-input v-model="form.alloyNo" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="工艺方案">
                <el-select v-model="form.recipeId" filterable clearable placeholder="可选" style="width:100%"
                           @change="onRecipeChange">
                  <el-option v-for="r in recipeOptions" :key="r.id"
                    :label="`${r.recipeNo}（${r.alloyNo}）`" :value="r.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="采料厚度" prop="inMatThick">
                <el-input v-model="form.inMatThick"><template slot="append">mm</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="成品厚度" prop="outThick">
                <el-input v-model="form.outThick"><template slot="append">mm</template></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="4">
              <el-form-item label="采料宽度">
                <el-input v-model="form.inMatWidth"><template slot="append">mm</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="采料长度">
                <el-input v-model="form.inMatLength"><template slot="append">m</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="采料重量">
                <el-input v-model="form.inMatWeight"><template slot="append">t</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="采料外径">
                <el-input v-model="form.inMatOd"><template slot="append">mm</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="采料内径">
                <el-input v-model="form.inMatId"><template slot="append">mm</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="备注">
                <el-input v-model="form.remark" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 轧制工艺道次（只读展示） -->
        <div class="pass-section">
          <div class="pass-header">
            <span>轧制工艺参数</span>
            <span v-if="form.recipeNo" class="recipe-tag">{{ form.recipeNo }}</span>
            <span v-else class="recipe-tag gray">未绑定工艺方案</span>
          </div>
          <el-table :data="passList" border size="mini" class="pass-table"
                    :row-class-name="passRowClass" height="calc(100vh - 400px)">
            <el-table-column label="道次" prop="passNo" width="50" align="center" fixed>
              <template slot-scope="{ row }"><b>{{ row.passNo }}</b></template>
            </el-table-column>
            <el-table-column label="入口厚度(mm)" prop="inThick"       width="100" align="right" />
            <el-table-column label="出口厚度(mm)" prop="outThick"      width="100" align="right" />
            <el-table-column label="宽度(mm)"    prop="width"          width="85"  align="right" />
            <el-table-column label="轧制力(kN)"  prop="rollForce"      width="85"  align="right" />
            <el-table-column label="入口张力(kN)" prop="inTension"     width="95"  align="right" />
            <el-table-column label="出口张力(kN)" prop="outTension"    width="95"  align="right" />
            <el-table-column label="最高速度(m/min)" prop="maxSpeed"   width="110" align="right" />
            <el-table-column label="入口单位张力" prop="inUnitTension"  width="100" align="right" />
            <el-table-column label="出口单位张力" prop="outUnitTension" width="100" align="right" />
            <el-table-column label="压下量(mm)"  prop="reduction"      width="90"  align="right">
              <template slot-scope="{ row }"><span class="calc-val">{{ row.reduction }}</span></template>
            </el-table-column>
            <el-table-column label="总压下量(mm)" prop="totalReduction" width="100" align="right">
              <template slot-scope="{ row }"><span class="calc-val">{{ row.totalReduction }}</span></template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 底部：当前/下一带卷信息栏 -->
        <div class="footer-bar">
          <div class="coil-info-block">
            <span class="coil-label">当前带卷</span>
            <span class="coil-field">卷号：<b>{{ currentCoil.inMatNo || '—' }}</b></span>
            <span class="coil-field">采料厚度：<b>{{ currentCoil.inMatThick || '—' }} mm</b></span>
            <span class="coil-field">成品厚度：<b>{{ currentCoil.outThick || '—' }} mm</b></span>
            <span class="coil-field">宽度：<b>{{ currentCoil.inMatWidth || '—' }} mm</b></span>
            <span class="coil-field">合金号：<b>{{ currentCoil.alloyNo || '—' }}</b></span>
          </div>
          <div class="coil-divider"></div>
          <div class="coil-info-block">
            <span class="coil-label next">下一带卷</span>
            <span class="coil-field">卷号：<b>{{ nextCoil.inMatNo || '—' }}</b></span>
            <span class="coil-field">采料厚度：<b>{{ nextCoil.inMatThick || '—' }} mm</b></span>
            <span class="coil-field">成品厚度：<b>{{ nextCoil.outThick || '—' }} mm</b></span>
            <span class="coil-field">宽度：<b>{{ nextCoil.inMatWidth || '—' }} mm</b></span>
            <span class="coil-field">合金号：<b>{{ nextCoil.alloyNo || '—' }}</b></span>
          </div>
        </div>
      </template>
    </div>

  </div>
</template>

<script>
import { listPlan, addPlan, updatePlan, delPlan, moveUpPlan, moveDownPlan } from '@/api/mill/plan'
import { listAllRecipe, getRecipeDetail } from '@/api/mill/recipe'

const emptyForm = () => ({
  id: null, inMatNo: '', alloyNo: '', recipeId: null, recipeNo: '',
  outThick: '', inMatThick: '', inMatWidth: '', inMatLength: '',
  inMatWeight: '', inMatOd: '', inMatId: '', passCount: 0, remark: ''
})

export default {
  name: 'MillPlan',
  data() {
    return {
      planList: [],
      selectedId: null,
      isNew: false,
      form: emptyForm(),
      passList: [],
      recipeOptions: [],
      query: { inMatNo: '', hideFinished: false },
      rules: {
        inMatNo:    [{ required: true, message: '请输入钢卷编号', trigger: 'blur' }],
        alloyNo:    [{ required: true, message: '请输入合金牌号', trigger: 'blur' }],
        inMatThick: [{ required: true, message: '请输入采料厚度', trigger: 'blur' }],
        outThick:   [{ required: true, message: '请输入成品厚度', trigger: 'blur' }],
      }
    }
  },
  computed: {
    currentCoil() {
      return this.planList.find(p => p.prodStatus === '1') || {}
    },
    nextCoil() {
      const idx = this.planList.findIndex(p => p.prodStatus === '1')
      if (idx >= 0 && idx + 1 < this.planList.length) return this.planList[idx + 1]
      return this.planList.find(p => p.prodStatus === '0') || {}
    }
  },
  mounted() {
    this.loadList()
    listAllRecipe({}).then(res => { this.recipeOptions = res.data || [] })
  },
  methods: {
    loadList() {
      const params = { inMatNo: this.query.inMatNo }
      if (this.query.hideFinished) params.hideProdStatus = '2'
      listPlan(params).then(res => {
        this.planList = res.data || []
      })
    },
    handleSelect(p) {
      this.selectedId = p.id
      this.isNew = false
      this.form = { ...p }
      if (p.recipeId) {
        getRecipeDetail(p.recipeId).then(res => {
          this.passList = (res.data && res.data.passList) || []
        })
      } else {
        this.passList = []
      }
    },
    handleAdd() {
      this.isNew = true
      this.selectedId = null
      this.form = emptyForm()
      this.passList = []
    },
    handleSave() {
      this.$refs.formRef.validate(valid => {
        if (!valid) return
        const matched = this.recipeOptions.find(r => r.id === this.form.recipeId)
        if (matched) { this.form.recipeNo = matched.recipeNo; this.form.passCount = matched.passCount }
        const api = this.isNew ? addPlan : updatePlan
        api(this.form).then(() => {
          this.$message.success('保存成功')
          this.loadList()
          this.isNew = false
        })
      })
    },
    handleReset() {
      if (this.isNew) { this.form = emptyForm(); this.passList = [] }
      else this.handleSelect({ ...this.form })
    },
    handleDelete() {
      this.$confirm(`确定删除钢卷「${this.form.inMatNo}」？`, '提示', { type: 'warning' }).then(() => {
        delPlan(this.form.id).then(() => {
          this.$message.success('删除成功')
          this.form = emptyForm(); this.passList = []
          this.selectedId = null; this.isNew = false
          this.loadList()
        })
      })
    },
    handleMoveUp() {
      moveUpPlan(this.form.id).then(() => this.loadList())
    },
    handleMoveDown() {
      moveDownPlan(this.form.id).then(() => this.loadList())
    },
    onRecipeChange(recipeId) {
      if (!recipeId) { this.passList = []; this.form.recipeNo = ''; return }
      const r = this.recipeOptions.find(x => x.id === recipeId)
      if (r) {
        if (!this.form.alloyNo) this.form.alloyNo = r.alloyNo
        if (!this.form.inMatThick) this.form.inMatThick = r.inThick
        if (!this.form.outThick) this.form.outThick = r.outThick
        if (!this.form.inMatWidth) this.form.inMatWidth = r.outWidth
        this.form.recipeNo = r.recipeNo
        getRecipeDetail(recipeId).then(res => {
          this.passList = (res.data && res.data.passList) || []
        })
      }
    },
    passRowClass({ rowIndex }) {
      return rowIndex % 2 === 0 ? '' : 'alt-row'
    },
    prodStatusLabel(s) {
      return { '0': '待轧', '1': '轧制中', '2': '已完成', '9': '异常' }[s] || '待轧'
    },
    prodStatusClass(s) {
      return { '0': 'dot-wait', '1': 'dot-rolling', '2': 'dot-done', '9': 'dot-err' }[s] || 'dot-wait'
    },
    prodItemClass(s) {
      return { '1': 'item-rolling', '2': 'item-done' }[s] || ''
    }
  }
}
</script>

<style scoped lang="scss">
.plan-page {
  display: flex;
  height: calc(100vh - 84px);
  background: #f0f2f5;
  padding: 10px 12px;
  box-sizing: border-box;
  gap: 0;
}

/* ── 左侧面板 ── */
.left-panel {
  width: 240px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #dde1e6;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  overflow: hidden;
}

.panel-header {
  background: #1c2b3a;
  color: #ecf0f1;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.search-bar {
  padding: 6px 8px;
  border-bottom: 1px solid #e4e7ed;
  flex-shrink: 0;
}

.coil-list {
  flex: 1;
  overflow-y: auto;
}

.coil-item {
  padding: 7px 10px;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  transition: background .15s;

  &:hover { background: #f7f9fc; }
  &.active { background: #e8f0fb; border-left: 3px solid #1d4e89; }
  &.item-rolling { background: #fff8ee; }
  &.item-done { opacity: 0.55; }

  &__no {
    font-size: 12px;
    font-weight: 700;
    color: #1c2b3a;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__info {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: #7f8c8d;
    margin-top: 2px;
  }
}

.coil-status-dot {
  font-size: 10px;
  font-weight: 400;
  &.dot-wait    { color: #909399; }
  &.dot-rolling { color: #d68910; font-weight: 700; }
  &.dot-done    { color: #2471a3; }
  &.dot-err     { color: #c0392b; font-weight: 700; }
}

.empty-tip {
  text-align: center;
  color: #bdc3c7;
  padding: 24px 0;
  font-size: 12px;
}

/* ── 右侧面板 ── */
.right-panel {
  flex: 1;
  background: #fff;
  border: 1px solid #dde1e6;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.no-select {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #bdc3c7;
  font-size: 13px;
  i { font-size: 48px; margin-bottom: 10px; }
}

.detail-header {
  background: #1c2b3a;
  color: #ecf0f1;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.btn-group { display: flex; gap: 6px; }

.coil-form {
  padding: 10px 12px 4px;
  flex-shrink: 0;
  border-bottom: 1px solid #e4e7ed;
}

/* ── 道次区域 ── */
.pass-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pass-header {
  padding: 6px 12px;
  background: #f7f9fc;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #1c2b3a;
  flex-shrink: 0;
}

.recipe-tag {
  font-size: 11px;
  font-weight: 400;
  color: #1d4e89;
  background: #e8f0fb;
  padding: 1px 6px;
  border-radius: 2px;
  &.gray { color: #909399; background: #f4f4f5; }
}

.pass-table {
  flex: 1;
  ::v-deep .el-table__row.alt-row td { background: #f7f9fc !important; }
}

.calc-val {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #1d4e89;
}

/* ── 底部状态栏 ── */
.footer-bar {
  background: #1c2b3a;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 11px;
}

.coil-info-block {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.coil-label {
  color: #a9bcd0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  &.next { color: #f0b429; }
}

.coil-field {
  color: #bdc3c7;
  white-space: nowrap;
  b { color: #ecf0f1; }
}

.coil-divider {
  width: 1px;
  height: 20px;
  background: #2e4057;
  margin: 0 20px;
}
</style>