index.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590
  1. <template>
  2. <div class="table-box">
  3. <el-image-viewer v-if="imgViewVisible" :url-list="['/api' + imageUrl]" @close="imgViewVisible = false" />
  4. <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listDataApi" :init-param="initParam">
  5. <template #yuan="scope">
  6. <el-image style=" width: 200px;height: 200px" :src="'/api' + scope.row.url" @click="loadImg(scope.row.url)"></el-image>
  7. <!-- <uploadImg :is-show-data="true" :disabled="true" :image-url="scope.row.url" @click="loadImg(scope.row.url)"/>-->
  8. <!-- <el-image style="width: 100px" :src="'/api' + scope.row.url" @click="markImg(scope.row)" />-->
  9. </template>
  10. <!-- 表格 header 按钮 -->
  11. <template #tableHeader="scope">
  12. <el-button type="primary" v-auth="['demo:data:add']" :icon="CirclePlus" @click="openDialog(1, '数据新增')"> 新增 </el-button>
  13. <el-button type="primary" v-auth="['demo:data:import']" :icon="Upload" plain @click="batchAdd"> 导入数据集 </el-button>
  14. <el-button type="primary" v-auth="['demo:data:export']" :icon="Download" plain @click="downloadFile(scope.selectedListIds)"> 导出 </el-button>
  15. <el-button
  16. type="danger"
  17. v-auth="['demo:data:remove']"
  18. :icon="Delete"
  19. plain
  20. :disabled="!scope.isSelected"
  21. @click="batchDelete(scope.selectedListIds)"
  22. >
  23. 批量删除
  24. </el-button>
  25. </template>
  26. <!-- 表格操作 -->
  27. <template #operation="scope">
  28. <!-- <el-button type="primary" link :icon="EditPen" v-auth="['demo:data:edit']" @click="openDialog(2, '数据标注', scope.row)"> 标注 </el-button> -->
  29. <el-button type="primary" link :icon="EditPen" v-auth="['demo:data:edit']" @click="markImg(scope.row)"> 标注 </el-button>
  30. <el-button type="primary" link :icon="EditPen" v-auth="['demo:data:edit']" @click="openDialog(2, '数据编辑', scope.row)"> 编辑 </el-button>
  31. <el-button type="primary" link :icon="View" v-auth="['demo:data:query']" @click="openDialog(3, '数据查看', scope.row)"> 查看 </el-button>
  32. <el-button type="primary" link :icon="Delete" v-auth="['demo:data:remove']" @click="deleteData(scope.row)"> 删除 </el-button>
  33. </template>
  34. </ProTable>
  35. <FormDialog ref="formDialogRef" />
  36. <ImportPicDataset ref="dialogRef" />
  37. <ImgDetect
  38. ref="imgDetect"
  39. :img="cover"
  40. :area="area"
  41. :width="width"
  42. :height="height"
  43. @success="handleImgSuccess"
  44. :classes="classes"
  45. :json-data="jsonData"
  46. >
  47. </ImgDetect>
  48. </div>
  49. </template>
  50. <script setup lang="tsx" name="Data">
  51. import { ref, reactive, toRefs, onMounted } from 'vue'
  52. import { useHandleData } from '@/hooks/useHandleData'
  53. import { useDownload } from '@/hooks/useDownload'
  54. import { ElMessage, ElMessageBox } from 'element-plus'
  55. import ProTable from '@/components/ProTable/index.vue'
  56. import FormDialog from '@/components/FormDialog/index.vue'
  57. import ImportPicDataset from '@/components/ImportPicDataset/index.vue'
  58. import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
  59. import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
  60. // import { fabric } from 'fabric'
  61. // import { useDrawArea } from '@/utils/fabric'
  62. import { getDictsApi } from '@/api/modules/system/dictData'
  63. import ImgDetect from '../components/img-detect.vue'
  64. import uploadImg from '@/components/Upload/Img.vue'
  65. import {
  66. listDataApi,
  67. delDataApi,
  68. addDataApi,
  69. updateDataApi,
  70. importTemplateApi,
  71. importDataDataApi,
  72. exportDataApi,
  73. getDataApi
  74. } from '@/api/modules/demo/data'
  75. import { listDataApi as listDictDataApi } from '@/api/modules/system/dictData'
  76. import { uploadPure } from '@/api/modules/upload'
  77. import http from '@/api'
  78. onMounted(() => {
  79. state.cacheData.url = 'http://localhost:9090/profile/upload/2024/08/08/144745610/test.png'
  80. // handleImgSuccess({
  81. // data: 'test change data',
  82. // jsonData: 'jsonData12345 test change',
  83. // url: 'testurl'
  84. // })
  85. })
  86. const imageUrl = ref('')
  87. const imgViewVisible = ref(false)
  88. const loadImg = url => {
  89. imageUrl.value = url
  90. imgViewVisible.value = true
  91. }
  92. const imgDetect = ref()
  93. const state = reactive({
  94. area: '' as string,
  95. width: 1920 as number,
  96. height: 1080 as number,
  97. cover: '',
  98. classes: [],
  99. // [
  100. // {
  101. // name: '飞机',
  102. // color: '#ea5413',
  103. // label: 'plane'
  104. // },
  105. // {
  106. // name: '汽车',
  107. // color: '#ff00ff',
  108. // label: 'car'
  109. // }
  110. // ],
  111. jsonData: [],
  112. cacheData: {}
  113. // '{"version":"5.3.0","objects":[{"type":"image","version":"5.3.0","originX":"left","originY":"top","left":0,"top":0,"width":918,"height":789,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.68,"scaleY":0.68,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"http://localhost:8848/api/profile/upload/2024/08/08/144745610/3-3.jpg","crossOrigin":null,"filters":[]},{"type":"rect","version":"5.3.0","originX":"left","originY":"top","left":181.38,"top":251.38,"width":244,"height":162,"fill":"rgba(255, 255, 255, 0)","stroke":"#E34F51","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":-25,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0}]}'
  114. })
  115. const { area, width, height, cover, classes, jsonData } = toRefs(state)
  116. // ProTable 实例
  117. const proTable = ref<ProTableInstance>()
  118. // const getImageUrl = name => {
  119. // return new URL(name, import.meta.url).href
  120. // }
  121. const initParam = reactive({ type: 1 })
  122. // 删除数据管理信息
  123. const deleteData = async (params: any) => {
  124. await useHandleData(delDataApi, params.id, `删除【${params.name}】数据`)
  125. proTable.value?.getTableList()
  126. }
  127. // 标注图片
  128. const markImg = data => {
  129. console.log('data is', data)
  130. state.cacheData = data
  131. state.jsonData = []
  132. if (!data.url || data.url.length === 0) {
  133. ElMessage.warning('缺失图像,暂时不能进行区域添加!')
  134. return
  135. }
  136. listDictDataApi({
  137. pageNum: 1,
  138. pageSize: 10,
  139. dictType: 'class_definition'
  140. })
  141. .then(res => {
  142. // console.log(res)
  143. state.classes = []
  144. for (let i = 0; i < res.data.list.length; i++) {
  145. state.classes.push({
  146. name: res.data.list[i].dictLabel,
  147. color: res.data.list[i].cssClass,
  148. label: res.data.list[i].dictValue
  149. })
  150. }
  151. if (state.cacheData.labelurl && state.cacheData.labelurl.length > 0) {
  152. console.log('get label jsonData', state.cacheData.labelurl)
  153. http
  154. .get<any>(state.cacheData.labelurl)
  155. .then(res => {
  156. state.jsonData = []
  157. console.log(res)
  158. let arr = res.replace('\r', '').split('\n')
  159. console.log(arr)
  160. for (let i = 0; i < arr.length; i++) {
  161. let subArr = arr[i].split(' ')
  162. // console.log(subArr)
  163. let cssVal = '#000000'
  164. let label = '-1'
  165. for (let j = 0; j < state.classes.length; j++) {
  166. if (state.classes[j].label === subArr[0]) {
  167. cssVal = state.classes[j].color
  168. label = state.classes[j].label
  169. break
  170. }
  171. }
  172. state.jsonData.push({
  173. subArr: subArr,
  174. pathString:
  175. 'M ' +
  176. subArr[1] * 1920 +
  177. ' ' +
  178. subArr[2] * 1080 +
  179. ' L ' +
  180. subArr[3] * 1920 +
  181. ' ' +
  182. subArr[4] * 1080 +
  183. ' L ' +
  184. subArr[5] * 1920 +
  185. ' ' +
  186. subArr[6] * 1080 +
  187. ' L ' +
  188. subArr[7] * 1920 +
  189. ' ' +
  190. subArr[8] * 1080 +
  191. ' z',
  192. // left: 0,
  193. // top: 0,
  194. fill: '',
  195. stroke: cssVal,
  196. strokeWidth: 5,
  197. label: label
  198. })
  199. }
  200. // console.log(state.jsonData)
  201. imgDetect.value.visible = true
  202. })
  203. .catch(err => {
  204. console.log(err)
  205. })
  206. } else {
  207. imgDetect.value.visible = true
  208. }
  209. })
  210. .catch(err => {
  211. console.log(err)
  212. })
  213. state.cover = '/api' + data.url
  214. // area 代表后端的传来的标注数据
  215. // console.log(state.cover)
  216. // const area = []
  217. // if (state.cover != '') {
  218. // if (area.length != 0) {
  219. // handleImgSuccess(area)
  220. // }
  221. //
  222. // console.log("true???")
  223. // } else {
  224. // ElMessage.warning('缺失图像,暂时不能进行区域添加!')
  225. // }
  226. }
  227. // const getList = () => {
  228. // useDrawArea({
  229. // src: state.cover,
  230. // width: state.width,
  231. // height: state.height,
  232. // area: state.area
  233. // })
  234. // .then(url => {
  235. // state.cover = url as string
  236. // })
  237. // .catch(error => {
  238. // console.log(error)
  239. // })
  240. // }
  241. const handleImgSuccess = data => {
  242. // console.log(data)
  243. state.jsonData = data['jsonData']
  244. state.cover = data['url']
  245. state.cacheData.labelurl = data['data']
  246. state.cacheData.increment = 'NONE'
  247. let arr = state.cacheData.url.split('upload')
  248. // console.log(arr)
  249. let filenames = arr[arr.length - 1].split('.')
  250. filenames[filenames.length - 1] = 'txt'
  251. // console.log(filenames.join('.'))
  252. let filename = filenames.join('.')
  253. filename = filename.replace(/\\/g, '/')
  254. if (filename.startsWith('/')) {
  255. filename = filename.substring(1)
  256. }
  257. // console.log(filename)
  258. labelFile(data['data'], filename).then(res => {
  259. // console.log(res)
  260. if (res.code === 200) {
  261. state.cacheData.labelurl = res.data.url
  262. updateDataApi(state.cacheData)
  263. .then(res => {
  264. // console.log(res)
  265. if (res.data) {
  266. ElMessage.success('操作成功')
  267. }
  268. })
  269. .catch(err => {
  270. console.log(err)
  271. })
  272. }
  273. })
  274. // data.forEach(item => {
  275. // if (item.startsWith('{')) {
  276. // return
  277. // }
  278. // const area = item.split(';')
  279. // // try=tly blx=tlx brx=trx bry=bly
  280. // // mark: 当前用的应该是左上角定点位置和长宽,应该替换为存储点
  281. // const tlx = Math.round(Number(area[0]) * 1920)
  282. // const tly = Math.round(Number(area[1]) * 1080)
  283. // const trx = tlx + Math.round(Number(area[2]) * 1920)
  284. // const bly = tly + Math.round(Number(area[3]) * 1080)
  285. // state.area += `${tlx};${tly};${trx};${tly};${trx};${bly};${tlx};${bly},`
  286. // })
  287. // // console.log('state.area', state.area)
  288. // state.area.slice(0, -1)
  289. // getList()
  290. }
  291. // 创建并提交标注txt文件
  292. const labelFile = (data, filename) => {
  293. // 创建Blob对象
  294. const blob = new Blob([data], { type: 'text/plain' })
  295. // 创建表单数据并添加文件
  296. const formData = new FormData()
  297. formData.append('file', blob, filename)
  298. return uploadPure(formData)
  299. }
  300. const labeledTypeData = [
  301. {
  302. label: '是',
  303. value: true
  304. },
  305. {
  306. label: '否',
  307. value: false
  308. }
  309. ]
  310. // 批量删除数据管理信息
  311. const batchDelete = async (ids: string[]) => {
  312. await useHandleData(delDataApi, ids, '删除所选数据信息')
  313. proTable.value?.clearSelection()
  314. proTable.value?.getTableList()
  315. }
  316. // 导出数据管理列表
  317. const downloadFile = async (ids: string[]) => {
  318. proTable.value.searchParam['selectedIds'] = ids
  319. ElMessageBox.confirm('确认导出数据管理数据?', '温馨提示', { type: 'warning' }).then(() =>
  320. useDownload(exportDataApi, '数据管理列表', proTable.value?.searchParam)
  321. )
  322. }
  323. // 批量添加数据管理
  324. const dialogRef = ref<InstanceType<typeof ImportPicDataset> | null>(null)
  325. const batchAdd = () => {
  326. const params = {
  327. title: '数据管理添加数据集',
  328. tempApi: importTemplateApi,
  329. importApi: importDataDataApi,
  330. getTableList: proTable.value?.getTableList
  331. }
  332. dialogRef.value?.acceptParams(params)
  333. }
  334. const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
  335. // 打开弹框的功能
  336. const openDialog = async (type: number, title: string, row?: any) => {
  337. let res = { data: {} }
  338. if (row?.id) {
  339. res = await getDataApi(row?.id || null)
  340. }
  341. // 重置表单
  342. setFormItems()
  343. const params = {
  344. title,
  345. width: 580,
  346. isEdit: type !== 3,
  347. itemsOptions: formItems,
  348. model: type == 1 ? {} : res.data,
  349. api: type == 1 ? addDataApi : updateDataApi,
  350. getTableList: proTable.value?.getTableList
  351. }
  352. formDialogRef.value?.openDialog(params)
  353. }
  354. // 表格配置项
  355. const columns = reactive<ColumnProps<any>[]>([
  356. { type: 'selection', fixed: 'left', width: 70 },
  357. { prop: 'yuan', label: '原图', width: 200 },
  358. {
  359. prop: 'batchNum',
  360. label: '批次号',
  361. search: {
  362. el: 'input'
  363. },
  364. width: 120
  365. },
  366. {
  367. prop: 'name',
  368. label: '名称',
  369. search: {
  370. el: 'input'
  371. },
  372. width: 120
  373. },
  374. {
  375. prop: 'objectType',
  376. label: '目标类型',
  377. search: {
  378. el: 'input'
  379. },
  380. width: 120
  381. },
  382. {
  383. prop: 'objectSubtype',
  384. label: '目标子类型',
  385. search: {
  386. el: 'input'
  387. },
  388. width: 120
  389. },
  390. {
  391. prop: 'scene',
  392. label: '场景',
  393. search: {
  394. el: 'input'
  395. },
  396. width: 120
  397. },
  398. {
  399. prop: 'dataSource',
  400. label: '数据源',
  401. search: {
  402. el: 'input'
  403. },
  404. width: 120
  405. },
  406. {
  407. prop: 'gatherSpot',
  408. label: '采集地点',
  409. search: {
  410. el: 'input'
  411. },
  412. width: 120
  413. },
  414. {
  415. prop: 'gatherTime',
  416. label: '采集时间',
  417. search: {
  418. el: 'date-picker',
  419. props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
  420. },
  421. width: 120
  422. },
  423. {
  424. prop: 'dataType',
  425. label: '数据类型',
  426. enum: () => getDictsApi('data_type'),
  427. search: {
  428. el: 'tree-select'
  429. },
  430. fieldNames: { label: 'dictLabel', value: 'dictValue' },
  431. width: 120
  432. },
  433. // {
  434. // prop: 'fileType',
  435. // label: '文件类型',
  436. // search: {
  437. // el: 'input'
  438. // },
  439. // width: 120
  440. // },
  441. // {
  442. // prop: 'increment',
  443. // label: '扩增方式',
  444. // search: {
  445. // el: 'input'
  446. // },
  447. // width: 120
  448. // },
  449. {
  450. prop: 'labeled',
  451. label: '是否标注',
  452. search: {
  453. el: 'input'
  454. },
  455. width: 120
  456. },
  457. { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
  458. ])
  459. // 表单配置项
  460. let formItems: ProForm.ItemsOptions[] = []
  461. const setFormItems = () => {
  462. formItems = [
  463. {
  464. label: '原图',
  465. prop: 'url',
  466. compOptions: {
  467. elTagName: 'img-upload',
  468. placeholder: '请选择上传原图'
  469. }
  470. },
  471. {
  472. label: '批次号',
  473. prop: 'batchNum',
  474. rules: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
  475. compOptions: {
  476. placeholder: '请输入批次号'
  477. }
  478. },
  479. {
  480. label: '名称',
  481. prop: 'name',
  482. rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  483. compOptions: {
  484. placeholder: '请输入名称'
  485. }
  486. },
  487. {
  488. label: '目标类型',
  489. prop: 'objectType',
  490. rules: [{ required: true, message: '目标类型不能为空', trigger: 'blur' }],
  491. compOptions: {
  492. placeholder: '请输入目标类型'
  493. }
  494. },
  495. {
  496. label: '目标子类型',
  497. prop: 'objectSubtype',
  498. rules: [{ required: true, message: '目标子类型不能为空', trigger: 'blur' }],
  499. compOptions: {
  500. placeholder: '请输入目标子类型'
  501. }
  502. },
  503. {
  504. label: '场景',
  505. prop: 'scene',
  506. rules: [{ required: true, message: '场景不能为空', trigger: 'blur' }],
  507. compOptions: {
  508. placeholder: '请输入场景'
  509. }
  510. },
  511. {
  512. label: '数据源',
  513. prop: 'dataSource',
  514. rules: [{ required: true, message: '数据源不能为空', trigger: 'blur' }],
  515. compOptions: {
  516. placeholder: '请输入数据源'
  517. }
  518. },
  519. {
  520. label: '采集地点',
  521. prop: 'gatherSpot',
  522. rules: [{ required: true, message: '采集地点不能为空', trigger: 'blur' }],
  523. compOptions: {
  524. placeholder: '请输入采集地点'
  525. }
  526. },
  527. {
  528. label: '采集时间',
  529. prop: 'gatherTime',
  530. rules: [{ required: true, message: '采集时间不能为空', trigger: 'change' }],
  531. compOptions: {
  532. elTagName: 'date-picker',
  533. type: 'datetime',
  534. valueFormat: 'YYYY-MM-DD HH:mm:ss',
  535. placeholder: '请选择采集时间'
  536. }
  537. },
  538. {
  539. label: '数据类型',
  540. prop: 'dataType',
  541. rules: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
  542. compOptions: {
  543. elTagName: 'select',
  544. labelKey: 'dictLabel',
  545. valueKey: 'dictValue',
  546. enum: () => getDictsApi('data_type'),
  547. placeholder: '请选择数据类型'
  548. }
  549. },
  550. {
  551. label: '是否标注',
  552. prop: 'labeled',
  553. rules: [{ required: true, message: '请选择是否标注' }],
  554. compOptions: {
  555. elTagName: 'radio-group',
  556. enum: labeledTypeData
  557. }
  558. }
  559. ]
  560. }
  561. </script>