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.

370 lines
14 KiB

2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
  1. <script setup lang="ts">
  2. import { trayIn } from 'apis/home'
  3. import AddLiquid from 'components/home/AddLiquid/index.vue'
  4. import CheckCraft from 'components/home/CheckCraft/index.vue'
  5. import ExecuteCraft from 'components/home/ExecuteCraft/index.vue'
  6. import ExtractLiquid from 'components/home/ExtractLiquid/index.vue'
  7. import FillSolution from 'components/home/FillSolution/index.vue'
  8. import SetTemperature from 'components/home/SetTemperature/index.vue'
  9. import StartClean from 'components/home/StartClean/index.vue'
  10. import StartExperiment from 'components/home/StartExperiment/index.vue'
  11. import Tube from 'components/home/Tube/index.vue'
  12. import { ElMessageBox } from 'element-plus'
  13. import { FtMessage } from 'libs/message'
  14. import { socket } from 'libs/socket'
  15. import { cmdNameMap, formatDateTime } from 'libs/utils'
  16. import { useHomeStore } from 'stores/homeStore'
  17. import { useSystemStore } from 'stores/systemStore'
  18. import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
  19. const homeStore = useHomeStore()
  20. const systemStore = useSystemStore()
  21. onMounted(() => {
  22. socket.init(receiveMessage, 'cmd_debug')
  23. socket.init(receiveMessage, 'cmd_response')
  24. })
  25. onUnmounted(() => {
  26. socket.unregisterCallback(receiveMessage, 'cmd_debug')
  27. socket.unregisterCallback(receiveMessage, 'cmd_response')
  28. })
  29. let currentCommandId = ''
  30. const receiveMessage = (data: Socket.cmdData) => {
  31. data.commandId === currentCommandId && systemStore.pushSystemList(data)
  32. if (['start', 'success', 'fail'].includes(data.status)) {
  33. const cmdName = cmdNameMap[data.command as keyof typeof cmdNameMap] || data.command
  34. systemStore.insertLog({ cmdName, status: data.status as System.SystemLog['status'], time: formatDateTime() })
  35. }
  36. }
  37. const selectedHeatArea = computed(() => {
  38. return homeStore.heatAreaList.find(item => item.selected)
  39. })
  40. const startVisible = ref(false)
  41. const selectCraftVisible = ref(false)
  42. const executeCraftHandle = async () => {
  43. selectCraftVisible.value = true
  44. }
  45. const setTemperatureVisible = ref(false)
  46. const currentTemperatureData = ref<{ id: string, label: string | undefined }>({
  47. id: '',
  48. label: 'A-1',
  49. })
  50. provide('currentTemperatureData', currentTemperatureData)
  51. const setTemperature = (data: System.HeatArea) => {
  52. const craft = systemStore.systemStatus.trays?.find(item => item.heatModuleCode === data.moduleCode)?.crafts
  53. if (craft?.craft) {
  54. FtMessage.warning(`当前加热区已绑定工艺`)
  55. return
  56. }
  57. currentTemperatureData.value = {
  58. id: data.moduleCode,
  59. label: homeStore.heatAreaList.find(item => item.value === data.moduleCode)?.label,
  60. }
  61. setTemperatureVisible.value = true
  62. }
  63. const fillSolutionVisible = ref(false)
  64. const addLiquidVisible = ref(false)
  65. const cleanVisible = ref(false)
  66. const extractLiquidVisible = ref(false)
  67. const commandHandle = async (command: string, params?: unknown) => {
  68. currentCommandId = Date.now().toString()
  69. const data = {
  70. commandId: currentCommandId,
  71. command,
  72. params,
  73. }
  74. await homeStore.sendControl(data)
  75. }
  76. const move_to_liquid_area = async () => {
  77. if (!selectedHeatArea.value?.value) {
  78. await ElMessageBox.confirm(
  79. '是否要将上料区托盘移至加液位? ',
  80. '提示',
  81. {
  82. confirmButtonText: '确认',
  83. showClose: false,
  84. closeOnClickModal: false,
  85. closeOnPressEscape: false,
  86. type: 'warning',
  87. customClass: 'init-message',
  88. },
  89. )
  90. }
  91. await commandHandle('move_to_liquid_area', { heatModuleCode: selectedHeatArea.value?.value })
  92. }
  93. const move_to_feed_area = async () => {
  94. if (!selectedHeatArea.value?.value) {
  95. await ElMessageBox.confirm(
  96. '是否要将加液位托盘移至上料区? ',
  97. '提示',
  98. {
  99. confirmButtonText: '确认',
  100. showClose: false,
  101. closeOnClickModal: false,
  102. closeOnPressEscape: false,
  103. type: 'warning',
  104. customClass: 'init-message',
  105. },
  106. )
  107. }
  108. await commandHandle('move_to_feed_area', { heatModuleCode: selectedHeatArea.value?.value })
  109. }
  110. const move_to_anneal_area = async () => {
  111. if (!selectedHeatArea.value?.value) {
  112. await ElMessageBox.confirm(
  113. '是否要将加液位或上料区的托盘移至退火区? ',
  114. '提示',
  115. {
  116. confirmButtonText: '确认',
  117. showClose: false,
  118. closeOnClickModal: false,
  119. closeOnPressEscape: false,
  120. type: 'warning',
  121. customClass: 'init-message',
  122. },
  123. )
  124. }
  125. await commandHandle('move_to_anneal_area', { heatModuleCode: selectedHeatArea.value?.value })
  126. }
  127. const trayInHandle = async () => {
  128. await trayIn()
  129. FtMessage.success('设置放入托盘成功')
  130. }
  131. // const trayOutHandle = async () => {
  132. // await trayOut()
  133. // }
  134. const checkCraftVisible = ref(false)
  135. const moreVisible = ref(false)
  136. </script>
  137. <template>
  138. <div class="home-page">
  139. <div class="page-top">
  140. <Tube v-for="(item, index) in systemStore.systemStatus.heatModule" :key="item.moduleCode" :data="item" @select-change="homeStore.selectChange(index)" @set-temperature="setTemperature(item)" />
  141. </div>
  142. <div class="button-box">
  143. <el-row style="width: 100%; height: 100%" :gutter="20">
  144. <el-col :span="24">
  145. <div style="padding: 30px 0;display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(1, 1fr);height: 100%">
  146. <el-card>
  147. <ft-button type="primary" size="large" :click-handle="() => commandHandle('door_open')">
  148. 开门
  149. </ft-button>
  150. <ft-button type="primary" size="large" :click-handle="() => commandHandle('door_close')">
  151. 关门
  152. </ft-button>
  153. </el-card>
  154. <el-card>
  155. <ft-button type="primary" size="large" :click-handle="executeCraftHandle">
  156. 执行工艺
  157. </ft-button>
  158. <ft-button type="primary" size="large" :click-handle="() => checkCraftVisible = true">
  159. <el-icon v-if="systemStore.errorCraft" color="#DF1515" size="15" style="margin-right: 5px">
  160. <WarningFilled />
  161. </el-icon>
  162. 异常工艺
  163. </ft-button>
  164. </el-card>
  165. <el-card>
  166. <ft-button type="primary" size="large" :click-handle="trayInHandle">
  167. 放入托盘
  168. </ft-button>
  169. <ft-button type="primary" size="large" :click-handle="() => commandHandle('out_tray', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
  170. 取出托盘
  171. </ft-button>
  172. </el-card>
  173. <el-card>
  174. <el-popover
  175. :visible="moreVisible"
  176. placement="left-start"
  177. width="auto"
  178. trigger="click"
  179. >
  180. <template #reference>
  181. <ft-button type="primary" size="large" style="margin: auto 0;" class="manual-button" @click="moreVisible = !moreVisible">
  182. 手动操作
  183. </ft-button>
  184. </template>
  185. <template #default>
  186. <div class="container-box">
  187. <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('heater_start', { heatModuleCode: selectedHeatArea!.value })">
  188. 开始加热
  189. </ft-button>
  190. <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('heater_stop', { heatModuleCode: selectedHeatArea!.value })">
  191. 停止加热
  192. </ft-button>
  193. <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('fan_start', { heatModuleCode: selectedHeatArea!.value })">
  194. 开始降温
  195. </ft-button>
  196. <ft-button type="primary" size="large" :disabled="!selectedHeatArea" :click-handle="() => commandHandle('fan_stop', { heatModuleCode: selectedHeatArea!.value })">
  197. 停止降温
  198. </ft-button>
  199. <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_start', { heatModuleCode: selectedHeatArea!.value })">
  200. 开始烘干
  201. </ft-button>
  202. <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label === '退火区'" :click-handle="() => commandHandle('dry_stop', { heatModuleCode: selectedHeatArea!.value })">
  203. 停止烘干
  204. </ft-button>
  205. <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_start', { heatModuleCode: selectedHeatArea!.value })">
  206. 开始退火
  207. </ft-button>
  208. <ft-button type="primary" size="large" :disabled="!selectedHeatArea || selectedHeatArea?.label !== '退火区'" :click-handle="() => commandHandle('anneal_stop', { heatModuleCode: selectedHeatArea!.value })">
  209. 停止退火
  210. </ft-button>
  211. <ft-button type="primary" size="large" :click-handle="() => commandHandle('move_to_heat_area', { heatModuleCode: selectedHeatArea!.value })" :disabled="!selectedHeatArea">
  212. 移至加热位
  213. </ft-button>
  214. <ft-button type="primary" size="large" :click-handle="move_to_liquid_area">
  215. 移至加液位
  216. </ft-button>
  217. <ft-button type="primary" size="large" :click-handle="move_to_feed_area">
  218. 移至上料区
  219. </ft-button>
  220. <ft-button type="primary" size="large" :click-handle="move_to_anneal_area">
  221. 移至退火位
  222. </ft-button>
  223. <ft-button type="primary" size="large" @click="cleanVisible = true">
  224. 开始清洗
  225. </ft-button>
  226. <ft-button type="primary" size="large" @click=" fillSolutionVisible = true">
  227. 预充管路
  228. </ft-button>
  229. <ft-button type="primary" size="large" @click="addLiquidVisible = true">
  230. 添加溶液
  231. </ft-button>
  232. <ft-button type="primary" size="large" @click="extractLiquidVisible = true">
  233. 抽取溶液
  234. </ft-button>
  235. <ft-button type="primary" size="large" :click-handle="() => commandHandle('drain_liquid')">
  236. 关机排空
  237. </ft-button>
  238. <ft-button type="primary" size="large" :click-handle="() => commandHandle('liquid_motor_origin')">
  239. 加液臂回原点
  240. </ft-button>
  241. <ft-button type="primary" size="large" :click-handle="() => commandHandle('z_origin')">
  242. z轴回原点
  243. </ft-button>
  244. <ft-button type="primary" size="large" :click-handle="() => commandHandle('x_origin')">
  245. x轴回原点
  246. </ft-button>
  247. </div>
  248. </template>
  249. </el-popover>
  250. </el-card>
  251. </div>
  252. </el-col>
  253. </el-row>
  254. </div>
  255. <CheckCraft v-if="checkCraftVisible" @close="checkCraftVisible = false" />
  256. <StartExperiment v-if="startVisible" @ok="startVisible = false" @cancel="startVisible = false" />
  257. <StartClean v-if="cleanVisible" @ok="cleanVisible = false" @cancel="cleanVisible = false" />
  258. <ExecuteCraft v-if="selectCraftVisible" @ok="selectCraftVisible = false" @cancel="selectCraftVisible = false" />
  259. <SetTemperature v-if="setTemperatureVisible" @ok="setTemperatureVisible = false" @cancel="setTemperatureVisible = false" />
  260. <AddLiquid v-if="addLiquidVisible" @ok="addLiquidVisible = false" @cancel="addLiquidVisible = false" />
  261. <ExtractLiquid v-if="extractLiquidVisible" @ok="extractLiquidVisible = false" @cancel="extractLiquidVisible = false" />
  262. <FillSolution v-if="fillSolutionVisible" @ok="fillSolutionVisible = false" @cancel="fillSolutionVisible = false" />
  263. </div>
  264. </template>
  265. <style scoped lang="scss">
  266. .home-page {
  267. .page-top{
  268. height: 65%;
  269. border-radius: 8px;
  270. padding: 0 10px 10px;
  271. display: grid;
  272. grid-template-columns: repeat(4, 1fr); /* 创建3列等宽轨道 */
  273. grid-template-rows: repeat(1, auto); /* 创建2行自动高度 */
  274. gap: 10px;
  275. justify-content: center; /* 水平居中 */
  276. align-items: center;
  277. }
  278. .button-box {
  279. height: 35%;
  280. //display: grid;
  281. //grid-template-columns: repeat(6, 1fr); /* 创建3列等宽轨道 */
  282. //grid-template-rows: repeat(4, 1fr); /* 创建2行自动高度 */
  283. //gap: 10px 20px;
  284. .ft-button {
  285. //width: 100px;
  286. font-weight: bold;
  287. margin-right: 0;
  288. .my-button {
  289. padding: 0 !important;
  290. border: 3px solid #1989fa !important;
  291. }
  292. }
  293. }
  294. }
  295. .el-col {
  296. height: 100%;
  297. }
  298. .manual-box {
  299. width: 100%;
  300. height: 100%;
  301. display: flex;
  302. align-items: center;
  303. justify-content: center;
  304. }
  305. .container-box {
  306. width: 600px;
  307. display: grid;
  308. grid-template-columns: repeat(4, 1fr);
  309. grid-template-rows: repeat(2, 1fr);
  310. gap: 10px;
  311. }
  312. .manual-button {
  313. height: 80px;
  314. line-height: 80px;
  315. text-align: center;
  316. border-radius: 10px;
  317. :deep(.my-button) {
  318. height: 100%;
  319. }
  320. }
  321. :deep(.el-card__body){
  322. width: 100%;
  323. height: 100%;
  324. display: flex;
  325. flex-direction: column;
  326. justify-content: space-between;
  327. .ft-button {
  328. box-shadow: 0 0 25px rgba(0,0,0,0.2);
  329. }
  330. }
  331. </style>