graphite-digestion-web/src/views/craft/index.vue

<script lang="ts" setup>
import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts'
import AddCraftDialog from '@/components/craft/AddCraftDialog.vue'
import CraftStatus from '@/components/craft/CraftStatus.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const tableData = ref<CraftTypes.Craft[]>([])
const addCraftRef = ref<CraftTypes.AddCraftType | null>(null)
const selectable = ref()
const multipleSelection = ref<CraftTypes.Craft[]>()
const heatVisible = ref(false)
const heatId = ref()
const craftStatusRef = ref<CraftTypes.craftStatus | null>(null)
const route = useRoute()
const router = useRouter()
const oresId = route.query.oreId as string
onMounted(() => {
  queryCrafList()
})
// 加热区列表
const heatList = [{
  id: 'heat_module_01',
  name: '加热区_01',
}, {
  id: 'heat_module_02',
  name: '加热区_02',
}, {
  id: 'heat_module_03',
  name: '加热区_03',
}, {
  id: 'heat_module_04',
  name: '加热区_04',
}, {
  id: 'heat_module_05',
  name: '加热区_05',
}, {
  id: 'heat_module_06',
  name: '加热区_06',
}]
const queryCrafList = () => {
  const params = {
    oresId,
  }
  getCraftList(params).then((res) => {
    console.log('res---', res)
    tableData.value = res
  })
}

const onAddCraft = () => {
  if (addCraftRef.value) {
    addCraftRef.value.openDialog()
  }
}

const onEditCraft = () => {
  if (multipleSelection.value && multipleSelection.value.length !== 1) {
    ElMessage.warning('请选择一条数据进行编辑')
    return
  }
  if (addCraftRef.value && multipleSelection.value) {
    addCraftRef.value.editDialog(multipleSelection.value[0])
  }
}

const handleSelectionChange = (rows: CraftTypes.Craft[]) => {
  if (rows && rows.length) {
    multipleSelection.value = rows
  }
}

const onDelCraft = () => {
  if (!multipleSelection.value || !multipleSelection.value.length) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  ElMessageBox.confirm(
    '确认删除选中的数据吗？',
    '确认提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    if (multipleSelection.value && multipleSelection.value.length) {
      const ids = multipleSelection.value.map(item => item.id)
      delCraft(ids.join(',')).then((res) => {
        console.log('删除成功', res)
        ElMessage.success('删除成功')
        queryCrafList()
      })
    }
  })
}

const onSelectHeatId = () => {
  if (!multipleSelection.value || multipleSelection.value.length !== 1) {
    ElMessage.warning('每次只可执行一次工艺')
    return
  }
  heatVisible.value = true
}

const onShowState = () => {
  craftStatusRef.value?.showDialog()
}

// 开始执行工艺
const onStart = () => {
  if (!heatId.value) {
    ElMessage.warning('请选择加热区')
    return
  }
  if (multipleSelection.value && multipleSelection.value.length && heatId) {
    const craft = multipleSelection.value[0]
    // 先进行配置
    const craftId = craft.id
    if (craftId && heatId.value) {
      const params = {
        craftId: craft.id,
        heatId: heatId.value,
      }
      setCraft(params).then(() => {
        console.log('配置成功==')
        startCraft({ heatId: heatId.value }).then(() => {
          console.log('开始执行')
          ElMessage.success('工艺已开始执行')
          heatVisible.value = false
          // 看执行状态
          craftStatusRef.value?.showDialog()
        })
      })
    }
  }
}

const returnOre = () => {
  router.push('/ore')
}
</script>

<template>
  <div class="component-page">
    <section class="flex items-center h-20 gap-3 pl-3">
      <FtButton @click="onAddCraft">
        添加工艺
      </FtButton>
      <FtButton @click="onEditCraft">
        编辑工艺
      </FtButton>
      <FtButton @click="onDelCraft">
        删除工艺
      </FtButton>
      <FtButton @click="onSelectHeatId">
        执行工艺
      </FtButton>
      <FtButton @click="onShowState">
        查看工艺步骤
      </FtButton>
    </section>
    <main class="craft-main">
      <el-table :data="tableData" style="width: 100%" size="small" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="selectable" />
        <el-table-column prop="name" label="工艺名称" />
        <!-- <el-table-column prop="orgName" label="矿石名称">
          <template #default="scope">
            <span v-if="scope.row.oresId === 1">硫酸</span>
            <span v-else>硝酸</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建日期" />
        <el-table-column prop="updateTime" label="更新日期" />
      </el-table>
    </main>
    <AddCraftDialog ref="addCraftRef" @ok="queryCrafList" />
    <!-- 执行工艺，选择加热区 -->
    <el-dialog v-model="heatVisible" title="执行工艺" width="30vw">
      <div style="display: flex; justify-content: center;align-items: center;">
        <label>选择加热区：</label>
        <el-select v-model="heatId" style="width:200px" size="small">
          <el-option v-for="el in heatList" :key="el.id" :label="`${el.name}`" :value="el.id" />
        </el-select>
      </div>
      <div style="display: flex; justify-content: center;align-items: center; height:100px">
        <FtButton @click="onStart">
          开始执行
        </FtButton>
      </div>
    </el-dialog>
    <CraftStatus ref="craftStatusRef" />
    <div class="return-ore">
      <FtButton @click="returnOre">返回</FtButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .craft-main{
    margin-top: 20px;
  }
  .return-ore{
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
    width: 80vw;
  }
</style>