index.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <template>
  2. <div class="table-box">
  3. <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listModelApi">
  4. <!-- 表格 header 按钮 -->
  5. <template #tableHeader="scope">
  6. <el-button type="primary" v-auth="['ag:model:add']" icon="CirclePlus" @click="openDialog(1, '算法模型配置新增')"> 新增 </el-button>
  7. <el-button type="primary" v-auth="['ag:model:import']" icon="Upload" plain @click="batchAdd"> 导入 </el-button>
  8. <el-button type="primary" v-auth="['ag:model:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button>
  9. <el-button
  10. type="danger"
  11. v-auth="['ag:model:remove']"
  12. icon="Delete"
  13. plain
  14. :disabled="!scope.isSelected"
  15. @click="batchDelete(scope.selectedListIds)"
  16. >
  17. 批量删除
  18. </el-button>
  19. </template>
  20. <!-- 表格操作 -->
  21. <template #operation="scope">
  22. <el-button type="primary" link icon="View" v-auth="['ag:model:query']" @click="openDialog(3, '算法模型配置查看', scope.row)">
  23. 查看
  24. </el-button>
  25. <el-button type="primary" link icon="EditPen" v-auth="['ag:model:edit']" @click="openDialog(2, '算法模型配置编辑', scope.row)">
  26. 编辑
  27. </el-button>
  28. <el-button type="primary" link icon="EditPen" @click="downloadPtFile(scope.row)"> 下载 </el-button>
  29. <el-button type="primary" link icon="Delete" v-auth="['ag:model:remove']" @click="deleteModel(scope.row)"> 删除 </el-button>
  30. </template>
  31. </ProTable>
  32. <FormDialog ref="formDialogRef" />
  33. <ImportExcel ref="dialogRef" />
  34. </div>
  35. </template>
  36. <script setup lang="tsx" name="Model">
  37. import { ref, reactive, onMounted } from 'vue'
  38. import { useHandleData } from '@/hooks/useHandleData'
  39. import { useDownload } from '@/hooks/useDownload'
  40. import { ElMessageBox } from 'element-plus'
  41. import ProTable from '@/components/ProTable/index.vue'
  42. import ImportExcel from '@/components/ImportExcel/index.vue'
  43. import FormDialog from '@/components/FormDialog/index.vue'
  44. import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
  45. import {
  46. listModelApi,
  47. delModelApi,
  48. addModelApi,
  49. updateModelApi,
  50. importTemplateApi,
  51. importModelDataApi,
  52. exportModelApi,
  53. getModelApi
  54. } from '@/api/modules/ag/model'
  55. import { getAlgorithmOptionApi } from '@/api/modules/task/task'
  56. import { listTaskConfigurationApi } from '@/api/modules/task/taskConfiguration'
  57. import http from '@/api'
  58. const downloadPtFile = function (row) {
  59. console.log(row)
  60. if (row.modelAddress && row.modelAddress.length > 0) {
  61. window.open('/api' + row.modelAddress, '_blank')
  62. }
  63. }
  64. // ProTable 实例
  65. const proTable = ref<ProTableInstance>()
  66. let allAgloData = ref([] as any[])
  67. // 删除算法模型配置信息
  68. const deleteModel = async (params: any) => {
  69. await useHandleData(delModelApi, params.id, '删除【' + params.id + '】算法模型配置')
  70. proTable.value?.getTableList()
  71. }
  72. // 批量删除算法模型配置信息
  73. const batchDelete = async (ids: string[]) => {
  74. await useHandleData(delModelApi, ids, '删除所选算法模型配置信息')
  75. proTable.value?.clearSelection()
  76. proTable.value?.getTableList()
  77. }
  78. // 导出算法模型配置列表
  79. const downloadFile = async () => {
  80. ElMessageBox.confirm('确认导出算法模型配置数据?', '温馨提示', { type: 'warning' }).then(() =>
  81. useDownload(exportModelApi, '算法模型配置列表', proTable.value?.searchParam)
  82. )
  83. }
  84. // 批量添加算法模型配置
  85. const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
  86. const batchAdd = () => {
  87. const params = {
  88. title: '算法模型配置',
  89. tempApi: importTemplateApi,
  90. importApi: importModelDataApi,
  91. getTableList: proTable.value?.getTableList
  92. }
  93. dialogRef.value?.acceptParams(params)
  94. }
  95. const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
  96. // 打开弹框的功能
  97. const openDialog = async (type: number, title: string, row?: any) => {
  98. let res = { data: {} }
  99. if (row?.id) {
  100. res = await getModelApi(row?.id || null)
  101. }
  102. // 重置表单
  103. setItemsOptions()
  104. const params = {
  105. title,
  106. width: 580,
  107. isEdit: type !== 3,
  108. itemsOptions: itemsOptions,
  109. model: type == 1 ? {} : res.data,
  110. api: type == 1 ? addModelApi : updateModelApi,
  111. getTableList: proTable.value?.getTableList
  112. }
  113. formDialogRef.value?.openDialog(params)
  114. }
  115. // 表格配置项
  116. const columns = reactive<ColumnProps<any>[]>([
  117. { type: 'selection', fixed: 'left', width: 70 },
  118. // { prop: 'id', label: '主键ID' },
  119. {
  120. prop: 'algorithmId',
  121. label: '算法',
  122. search: {
  123. el: 'input'
  124. }
  125. },
  126. {
  127. prop: 'modelName',
  128. label: '模型名称',
  129. search: {
  130. el: 'input'
  131. }
  132. },
  133. {
  134. prop: 'sampleNumber',
  135. label: '训练样本数',
  136. search: {
  137. el: 'input'
  138. },
  139. width: 120
  140. },
  141. {
  142. prop: 'cycleEpoch',
  143. label: '训练循环次数',
  144. search: {
  145. el: 'input'
  146. },
  147. width: 120
  148. },
  149. { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
  150. ])
  151. // 表单配置项
  152. let itemsOptions: ProForm.ItemsOptions[] = []
  153. const setItemsOptions = () => {
  154. itemsOptions = [
  155. {
  156. label: '算法',
  157. prop: 'algorithmId',
  158. rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
  159. compOptions: {
  160. elTagName: 'select',
  161. labelKey: 'name',
  162. valueKey: 'id',
  163. enum: allAgloData.value,
  164. placeholder: '请选择算法'
  165. }
  166. },
  167. {
  168. label: '模型名称',
  169. prop: 'modelName',
  170. rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
  171. compOptions: {
  172. placeholder: '请输入模型名称'
  173. }
  174. },
  175. // {
  176. // label: '模型',
  177. // prop: 'modelAddress',
  178. // rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
  179. // compOptions: {
  180. // elTagName: 'file-upload',
  181. // accept: '.pt',
  182. // fileSize: 4096,
  183. // fileType: ['pt']
  184. // // props: { fileSize: 4096, fileType: ['pt'] }
  185. // // props: { accept: '.pt' }
  186. // }
  187. // },
  188. {
  189. label: '模型',
  190. prop: 'modelAddress',
  191. rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
  192. compOptions: {
  193. elTagName: 'slot'
  194. }
  195. },
  196. {
  197. label: '训练样本数',
  198. prop: 'sampleNumber',
  199. compOptions: {
  200. placeholder: '请输入训练样本数'
  201. }
  202. },
  203. {
  204. label: '训练循环次数',
  205. prop: 'cycleEpoch',
  206. compOptions: {
  207. placeholder: '请输入训练循环次数'
  208. }
  209. },
  210. {
  211. label: '备注',
  212. prop: 'remarks',
  213. compOptions: {
  214. placeholder: '请输入备注'
  215. }
  216. }
  217. ]
  218. }
  219. onMounted(() => {
  220. listTaskConfigurationApi().then(res => {
  221. allAgloData.value = res.data.list
  222. })
  223. })
  224. </script>