You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

211 lines
5.8 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <script lang="ts" setup>
  2. import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts'
  3. import AddCraftDialog from '@/components/craft/AddCraftDialog.vue'
  4. import CraftStatus from '@/components/craft/CraftStatus.vue'
  5. import { ElMessage, ElMessageBox } from 'element-plus'
  6. import { onMounted, ref } from 'vue'
  7. import { useRoute, useRouter } from 'vue-router'
  8. const tableData = ref<CraftTypes.Craft[]>([])
  9. const addCraftRef = ref<CraftTypes.AddCraftType | null>(null)
  10. const selectable = ref()
  11. const multipleSelection = ref<CraftTypes.Craft[]>()
  12. const heatVisible = ref(false)
  13. const heatId = ref()
  14. const craftStatusRef = ref<CraftTypes.craftStatus | null>(null)
  15. const route = useRoute()
  16. const router = useRouter()
  17. const oresId = route.query.oreId as string
  18. onMounted(() => {
  19. queryCrafList()
  20. })
  21. // 加热区列表
  22. const heatList = [{
  23. id: 'heat_module_01',
  24. name: '加热区_01',
  25. }, {
  26. id: 'heat_module_02',
  27. name: '加热区_02',
  28. }, {
  29. id: 'heat_module_03',
  30. name: '加热区_03',
  31. }, {
  32. id: 'heat_module_04',
  33. name: '加热区_04',
  34. }, {
  35. id: 'heat_module_05',
  36. name: '加热区_05',
  37. }, {
  38. id: 'heat_module_06',
  39. name: '加热区_06',
  40. }]
  41. const queryCrafList = () => {
  42. const params = {
  43. oresId,
  44. }
  45. getCraftList(params).then((res) => {
  46. console.log('res---', res)
  47. tableData.value = res
  48. })
  49. }
  50. const onAddCraft = () => {
  51. if (addCraftRef.value) {
  52. addCraftRef.value.openDialog()
  53. }
  54. }
  55. const onEditCraft = () => {
  56. if (multipleSelection.value && multipleSelection.value.length !== 1) {
  57. ElMessage.warning('请选择一条数据进行编辑')
  58. return
  59. }
  60. if (addCraftRef.value && multipleSelection.value) {
  61. addCraftRef.value.editDialog(multipleSelection.value[0])
  62. }
  63. }
  64. const handleSelectionChange = (rows: CraftTypes.Craft[]) => {
  65. if (rows && rows.length) {
  66. multipleSelection.value = rows
  67. }
  68. }
  69. const onDelCraft = () => {
  70. if (!multipleSelection.value || !multipleSelection.value.length) {
  71. ElMessage.warning('请选择要删除的数据')
  72. return
  73. }
  74. ElMessageBox.confirm(
  75. '确认删除选中的数据吗?',
  76. '确认提示',
  77. {
  78. confirmButtonText: '确认',
  79. cancelButtonText: '取消',
  80. type: 'warning',
  81. },
  82. ).then(() => {
  83. if (multipleSelection.value && multipleSelection.value.length) {
  84. const ids = multipleSelection.value.map(item => item.id)
  85. delCraft(ids.join(',')).then((res) => {
  86. console.log('删除成功', res)
  87. ElMessage.success('删除成功')
  88. queryCrafList()
  89. })
  90. }
  91. })
  92. }
  93. const onSelectHeatId = () => {
  94. if (!multipleSelection.value || multipleSelection.value.length !== 1) {
  95. ElMessage.warning('每次只可执行一次工艺')
  96. return
  97. }
  98. heatVisible.value = true
  99. }
  100. const onShowState = () => {
  101. craftStatusRef.value?.showDialog()
  102. }
  103. // 开始执行工艺
  104. const onStart = () => {
  105. if (!heatId.value) {
  106. ElMessage.warning('请选择加热区')
  107. return
  108. }
  109. if (multipleSelection.value && multipleSelection.value.length && heatId) {
  110. const craft = multipleSelection.value[0]
  111. // 先进行配置
  112. const craftId = craft.id
  113. if (craftId && heatId.value) {
  114. const params = {
  115. craftId: craft.id,
  116. heatId: heatId.value,
  117. }
  118. setCraft(params).then(() => {
  119. console.log('配置成功==')
  120. startCraft({ heatId: heatId.value }).then(() => {
  121. console.log('开始执行')
  122. ElMessage.success('工艺已开始执行')
  123. heatVisible.value = false
  124. // 看执行状态
  125. craftStatusRef.value?.showDialog()
  126. })
  127. })
  128. }
  129. }
  130. }
  131. const returnOre = () => {
  132. router.push('/ore')
  133. }
  134. </script>
  135. <template>
  136. <div class="component-page">
  137. <section class="flex items-center h-20 gap-3 pl-3">
  138. <FtButton @click="onAddCraft">
  139. 添加工艺
  140. </FtButton>
  141. <FtButton @click="onEditCraft">
  142. 编辑工艺
  143. </FtButton>
  144. <FtButton @click="onDelCraft">
  145. 删除工艺
  146. </FtButton>
  147. <FtButton @click="onSelectHeatId">
  148. 执行工艺
  149. </FtButton>
  150. <FtButton @click="onShowState">
  151. 查看工艺步骤
  152. </FtButton>
  153. </section>
  154. <main class="craft-main">
  155. <el-table :data="tableData" style="width: 100%" size="small" @selection-change="handleSelectionChange">
  156. <el-table-column type="selection" width="55" :selectable="selectable" />
  157. <el-table-column prop="name" label="工艺名称" />
  158. <!-- <el-table-column prop="orgName" label="矿石名称">
  159. <template #default="scope">
  160. <span v-if="scope.row.oresId === 1">硫酸</span>
  161. <span v-else>硝酸</span>
  162. </template>
  163. </el-table-column> -->
  164. <el-table-column prop="createTime" label="创建日期" />
  165. <el-table-column prop="updateTime" label="更新日期" />
  166. </el-table>
  167. </main>
  168. <AddCraftDialog ref="addCraftRef" @ok="queryCrafList" />
  169. <!-- 执行工艺选择加热区 -->
  170. <el-dialog v-model="heatVisible" title="执行工艺" width="30vw">
  171. <div style="display: flex; justify-content: center;align-items: center;">
  172. <label>选择加热区</label>
  173. <el-select v-model="heatId" style="width:200px" size="small">
  174. <el-option v-for="el in heatList" :key="el.id" :label="`${el.name}`" :value="el.id" />
  175. </el-select>
  176. </div>
  177. <div style="display: flex; justify-content: center;align-items: center; height:100px">
  178. <FtButton @click="onStart">
  179. 开始执行
  180. </FtButton>
  181. </div>
  182. </el-dialog>
  183. <CraftStatus ref="craftStatusRef" />
  184. <div class="return-ore">
  185. <FtButton @click="returnOre">返回</FtButton>
  186. </div>
  187. </div>
  188. </template>
  189. <style lang="scss" scoped>
  190. .craft-main{
  191. margin-top: 20px;
  192. }
  193. .return-ore{
  194. position: absolute;
  195. bottom: 20px;
  196. display: flex;
  197. justify-content: center;
  198. width: 80vw;
  199. }
  200. </style>