index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. <template>
  2. <div class="table-box">
  3. <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listTargetDetectionApi">
  4. <!-- 表格 header 按钮 -->
  5. <template #tableHeader="scope">
  6. <el-button type="primary" v-auth="['demo:TargetDetection:add']" icon="CirclePlus" @click="openDialog(1, '目标检测新增')"> 新增 </el-button>
  7. <!-- <el-button type="primary" v-auth="['demo:TargetDetection:import']" icon="Upload" plain @click="batchAdd">-->
  8. <!-- 导入-->
  9. <!-- </el-button>-->
  10. <!-- <el-button type="primary" v-auth="['demo:TargetDetection:export']" icon="Download" plain @click="downloadFile">-->
  11. <!-- 导出-->
  12. <!-- </el-button>-->
  13. <el-button
  14. type="danger"
  15. v-auth="['demo:TargetDetection:remove']"
  16. icon="Delete"
  17. plain
  18. :disabled="!scope.isSelected"
  19. @click="batchDelete(scope.selectedListIds)"
  20. >
  21. 批量删除
  22. </el-button>
  23. </template>
  24. <!-- 表格操作 -->
  25. <template #operation="scope">
  26. <el-button type="primary" link icon="View" v-if="scope.row.algorithmModelId != null" @click="openModelDialog(scope.row)">
  27. <!--@click="openStartDialog(scope.row)" -->
  28. 模型
  29. </el-button>
  30. <el-button
  31. type="primary"
  32. link
  33. icon="View"
  34. v-auth="['demo:trackSequence:start']"
  35. v-if="scope.row.status == '0' || scope.row.status == '3' || scope.row.status == '4'"
  36. @click="startTargetDetection(scope.row)"
  37. >
  38. 开始
  39. </el-button>
  40. <el-popconfirm title="确定终止此任务吗?" v-if="scope.row.status == '1'" @confirm="stopTargetDetect(scope.row)">
  41. <template #reference>
  42. <el-button type="primary" link icon="Delete">终止</el-button>
  43. </template>
  44. </el-popconfirm>
  45. <el-button
  46. type="primary"
  47. link
  48. icon="View"
  49. v-auth="['demo:trackSequence:download']"
  50. v-if="scope.row.status == '2'"
  51. @click="dowloadTargetDetection(scope.row)"
  52. >
  53. 下载
  54. </el-button>
  55. <!-- <el-button-->
  56. <!-- type="primary"-->
  57. <!-- link-->
  58. <!-- icon="View"-->
  59. <!-- v-auth="['demo:TargetDetection:query']"-->
  60. <!-- @click="openDialog(3, '目标检测查看', scope.row)"-->
  61. <!-- >-->
  62. <!-- 查看-->
  63. <!-- </el-button>-->
  64. <!-- <el-button-->
  65. <!-- type="primary"-->
  66. <!-- link-->
  67. <!-- icon="EditPen"-->
  68. <!-- v-auth="['demo:TargetDetection:edit']"-->
  69. <!-- @click="openDialog(2, '目标检测编辑', scope.row)"-->
  70. <!-- >-->
  71. <!-- 编辑-->
  72. <!-- </el-button>-->
  73. <el-button type="primary" link icon="Delete" v-auth="['demo:TargetDetection:remove']" @click="deleteTargetDetection(scope.row)">
  74. 删除
  75. </el-button>
  76. </template>
  77. </ProTable>
  78. <FormDialog ref="formDialogRef" />
  79. <ImportExcel ref="dialogRef" />
  80. </div>
  81. </template>
  82. <script setup lang="tsx" name="TargetDetection">
  83. import { ref, reactive, onMounted } from 'vue'
  84. import { useHandleData } from '@/hooks/useHandleData'
  85. import { useDownload } from '@/hooks/useDownload'
  86. import { ElMessage, ElMessageBox } from 'element-plus'
  87. import ProTable from '@/components/ProTable/index.vue'
  88. import ImportExcel from '@/components/ImportExcel/index.vue'
  89. import FormDialog from '@/components/FormDialog/index.vue'
  90. import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
  91. import {
  92. listTargetDetectionApi,
  93. delTargetDetectionApi,
  94. addTargetDetectionApi,
  95. updateTargetDetectionApi,
  96. importTemplateApi,
  97. importTargetDetectionDataApi,
  98. exportTargetDetectionApi,
  99. getTargetDetectionApi,
  100. startTargetDetectionApi,
  101. dowloadTargetDetectionApi,
  102. stopTargetDetectionApi
  103. } from '@/api/modules/demo/TargetDetection'
  104. import { listDataSeqApi } from '@/api/modules/demo/DataSeq'
  105. import { enumAlgorithmModelTrackApi, getAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
  106. import { enumAlgorithmConfigTrackApi } from '@/api/modules/demo/AlgorithmConfigTrack'
  107. import { updateTrackSequenceApi } from '@/api/modules/demo/trackSequence'
  108. const stopTargetDetect = async (params: any) => {
  109. const res: any = await stopTargetDetectionApi(params.id)
  110. if (res.code === 200) {
  111. ElMessage.success('终止任务成功!')
  112. } else {
  113. ElMessage.error('终止任务失败,请检查!')
  114. }
  115. proTable.value?.getTableList()
  116. }
  117. import statusEnums from '@/utils/status'
  118. import { AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSystem } from '@/views/demo/utils'
  119. const dowloadTargetDetection = async (params: any) => {
  120. await useDownload(dowloadTargetDetectionApi, params.name, params.id, true, '.zip')
  121. }
  122. const startTargetDetection = async (params: any) => {
  123. const res: any = await startTargetDetectionApi(params.id)
  124. if (res.code === 200) {
  125. ElMessage.success('任务已开始,请等待完成!')
  126. } else {
  127. ElMessage.error('任务开始失败,请检查!')
  128. }
  129. proTable.value?.getTableList()
  130. }
  131. const enumsAlgorithmConfigTrack = ref<any>([])
  132. onMounted(async () => {
  133. const result = await enumAlgorithmConfigTrackApi()
  134. // console.log(result)
  135. // console.log(result['data'])
  136. enumsAlgorithmConfigTrack.value = result['data']
  137. return result['data']
  138. })
  139. const openModelDialog = async row => {
  140. const algorithmModelId = row.algorithmModelId
  141. const result: any = await getAlgorithmModelTrackApi(algorithmModelId)
  142. // console.log(result.data)
  143. setItemsOptionsModel()
  144. const params = {
  145. title: '模型',
  146. width: 580,
  147. isEdit: false,
  148. itemsOptions: itemsOptions,
  149. model: result.data,
  150. api: updateTrackSequenceApi,
  151. getTableList: proTable.value?.getTableList
  152. }
  153. formDialogRef.value?.openDialog(params)
  154. }
  155. // ProTable 实例
  156. const proTable = ref<ProTableInstance>()
  157. // 删除目标检测信息
  158. const deleteTargetDetection = async (params: any) => {
  159. await useHandleData(delTargetDetectionApi, params.id, '删除【' + params.id + '】目标检测')
  160. proTable.value?.getTableList()
  161. }
  162. // 批量删除目标检测信息
  163. const batchDelete = async (ids: string[]) => {
  164. await useHandleData(delTargetDetectionApi, ids, '删除所选目标检测信息')
  165. proTable.value?.clearSelection()
  166. proTable.value?.getTableList()
  167. }
  168. // 导出目标检测列表
  169. const downloadFile = async () => {
  170. ElMessageBox.confirm('确认导出目标检测数据?', '温馨提示', { type: 'warning' }).then(() =>
  171. useDownload(exportTargetDetectionApi, '目标检测列表', proTable.value?.searchParam)
  172. )
  173. }
  174. // 批量添加目标检测
  175. const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
  176. const batchAdd = () => {
  177. const params = {
  178. title: '目标检测',
  179. tempApi: importTemplateApi,
  180. importApi: importTargetDetectionDataApi,
  181. getTableList: proTable.value?.getTableList
  182. }
  183. dialogRef.value?.acceptParams(params)
  184. }
  185. const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
  186. // 打开弹框的功能
  187. const openDialog = async (type: number, title: string, row?: any) => {
  188. let res = { data: {} }
  189. if (row?.id) {
  190. res = await getTargetDetectionApi(row?.id || null)
  191. }
  192. // 重置表单
  193. setItemsOptions()
  194. const params = {
  195. title,
  196. width: 580,
  197. isEdit: type !== 3,
  198. itemsOptions: itemsOptions,
  199. model: type == 1 ? {} : res.data,
  200. api: type == 1 ? addTargetDetectionApi : updateTargetDetectionApi,
  201. getTableList: proTable.value?.getTableList
  202. }
  203. formDialogRef.value?.openDialog(params)
  204. }
  205. // 表格配置项
  206. const columns = reactive<ColumnProps<any>[]>([
  207. { type: 'selection', fixed: 'left', width: 70 },
  208. { prop: 'id', label: '主键ID', width: 180 },
  209. {
  210. prop: 'name',
  211. label: '任务名称',
  212. search: {
  213. el: 'input'
  214. },
  215. width: 150
  216. },
  217. {
  218. prop: 'status',
  219. label: '任务状态',
  220. search: {
  221. el: 'select'
  222. },
  223. tag: true,
  224. enum: statusEnums,
  225. width: 150
  226. },
  227. {
  228. prop: 'type',
  229. label: '类型',
  230. tag: true,
  231. enum: enumsAlgorithmType,
  232. width: 120
  233. },
  234. {
  235. prop: 'subsystem',
  236. label: '分系统',
  237. tag: true,
  238. enum: enumsSubSystem,
  239. width: 200
  240. },
  241. {
  242. prop: 'algorithmName',
  243. label: '算法名称',
  244. width: 200
  245. },
  246. {
  247. prop: 'modelName',
  248. label: '模型名称',
  249. width: 200
  250. },
  251. // {
  252. // prop: 'algorithmModelId',
  253. // label: '模型',
  254. // search: {
  255. // el: 'input'
  256. // },
  257. // width: 150
  258. // },
  259. {
  260. prop: 'startTime',
  261. label: '开始时间',
  262. width: 180
  263. },
  264. {
  265. prop: 'endTime',
  266. label: '结束时间',
  267. width: 180
  268. },
  269. {
  270. prop: 'costSecond',
  271. label: '耗时',
  272. width: 120
  273. },
  274. {
  275. prop: 'log',
  276. label: '日志',
  277. width: 120
  278. },
  279. {
  280. prop: 'outputPath',
  281. label: '输出路径',
  282. width: 120
  283. },
  284. {
  285. prop: 'remarks',
  286. label: '备注',
  287. search: {
  288. el: 'input'
  289. },
  290. width: 120
  291. },
  292. { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
  293. ])
  294. const getImageDataList = ref<any>([])
  295. onMounted(async () => {
  296. const qyery = {
  297. subsystem: SubSystem__['目标检测'],
  298. pageNum: 1,
  299. pageSize: 25
  300. }
  301. const result: any = await listDataSeqApi(qyery)
  302. const data = result['data']['list']
  303. for (const item of data) {
  304. getImageDataList.value.push({
  305. value: item['inputOssId'],
  306. label: item['name']
  307. })
  308. }
  309. })
  310. const enumsAlgorithmModelTrack = ref<any>([])
  311. onMounted(async () => {
  312. const result: any = await enumAlgorithmModelTrackApi()
  313. // console.log(result.data);
  314. enumsAlgorithmModelTrack.value = []
  315. for (const item of result.data) {
  316. if (SubSystem[item['subsystem']] === '目标检测') {
  317. item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']] + '-' + item['algorithmName']
  318. enumsAlgorithmModelTrack.value.push(item)
  319. }
  320. }
  321. })
  322. // 表单配置项
  323. let itemsOptions: ProForm.ItemsOptions[] = []
  324. const setItemsOptions = () => {
  325. itemsOptions = [
  326. {
  327. label: '任务名称',
  328. prop: 'name',
  329. rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
  330. compOptions: {
  331. placeholder: '请输入任务名称'
  332. }
  333. },
  334. {
  335. label: '选择数据集',
  336. prop: 'inputOssId',
  337. rules: [{ required: false, message: '数据集不能为空', trigger: 'blur' }],
  338. compOptions: {
  339. elTagName: 'select',
  340. placeholder: '请选择或者上传数据集',
  341. enum: getImageDataList,
  342. clearable: true
  343. }
  344. },
  345. {
  346. label: '上传数据集',
  347. prop: 'inputOssId',
  348. rules: [{ required: true, message: '数据集不能为空', trigger: 'blur' }],
  349. compOptions: {
  350. elTagName: 'file-upload',
  351. fileSize: 4096,
  352. fileType: ['zip'],
  353. placeholder: '请上传数据集'
  354. }
  355. },
  356. {
  357. label: '选择模型',
  358. prop: 'algorithmModelId',
  359. rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
  360. compOptions: {
  361. elTagName: 'select',
  362. placeholder: '请选择模型',
  363. enum: enumsAlgorithmModelTrack
  364. }
  365. },
  366. {
  367. label: '备注',
  368. prop: 'remarks',
  369. rules: [],
  370. compOptions: {
  371. placeholder: '请输入备注'
  372. }
  373. }
  374. ]
  375. }
  376. const setItemsOptionsModel = () => {
  377. itemsOptions = [
  378. {
  379. label: '算法ID',
  380. prop: 'algorithmId',
  381. rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
  382. compOptions: {
  383. disabled: true,
  384. placeholder: '请输入算法'
  385. }
  386. },
  387. {
  388. label: '算法类型',
  389. prop: 'algorithmType',
  390. rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
  391. compOptions: {
  392. disabled: true,
  393. elTagName: 'select',
  394. placeholder: '请输入算法',
  395. enum: enumsAlgorithmConfigTrack
  396. }
  397. },
  398. {
  399. label: '算法参数',
  400. prop: 'parameterConfig',
  401. rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
  402. compOptions: {
  403. placeholder: '请输入模型名称'
  404. }
  405. },
  406. {
  407. label: '模型ID',
  408. prop: 'id',
  409. rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
  410. compOptions: {
  411. placeholder: '请输入模型名称'
  412. }
  413. },
  414. {
  415. label: '模型名称',
  416. prop: 'modelName',
  417. rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
  418. compOptions: {
  419. placeholder: '请输入模型名称'
  420. }
  421. },
  422. {
  423. label: '模型保存路径',
  424. prop: 'modelAddress',
  425. rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
  426. compOptions: {
  427. placeholder: '请输入模型名称'
  428. }
  429. },
  430. {
  431. label: '备注',
  432. prop: 'remarks',
  433. rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
  434. compOptions: {
  435. placeholder: '请输入备注'
  436. }
  437. }
  438. ]
  439. }
  440. </script>