taais-web/src/views/demo/data/index.vue

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listDataApi" :init-param="initParam">
      <template #yuan="scope">
        <el-image style="width: 100px" :src="'/api' + scope.row.url" @click="markImg(scope.row)" />
      </template>
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['demo:data:add']" :icon="CirclePlus" @click="openDialog(1, '数据新增')"> 新增 </el-button>
        <el-button type="primary" v-auth="['demo:data:import']" :icon="Upload" plain @click="batchAdd"> 导入数据集 </el-button>
        <el-button type="primary" v-auth="['demo:data:export']" :icon="Download" plain @click="downloadFile"> 导出 </el-button>
        <el-button
          type="danger"
          v-auth="['demo:data:remove']"
          :icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <!-- <el-button type="primary" link :icon="EditPen" v-auth="['demo:data:edit']" @click="openDialog(2, '数据标注', scope.row)"> 标注 </el-button> -->
        <el-button type="primary" link :icon="EditPen" v-auth="['demo:data:edit']" @click="openDialog(2, '数据编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="View" v-auth="['demo:data:query']" @click="openDialog(3, '数据查看', scope.row)"> 查看 </el-button>
        <el-button type="primary" link :icon="Delete" v-auth="['demo:data:remove']" @click="deleteData(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>

    <FormDialog ref="formDialogRef" />
    <ImportPicDataset ref="dialogRef" />
    <ImgDetect ref="imgDetect" :img="cover" :area="area" :width="width" :height="height" @success="handleImgSuccess"></ImgDetect>
  </div>
</template>

<script setup lang="tsx" name="Data">
import { ref, reactive, toRefs } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { ElMessage, ElMessageBox } from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import FormDialog from '@/components/FormDialog/index.vue'
import ImportPicDataset from '@/components/ImportPicDataset/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { Delete, EditPen, Download, Upload, View, CirclePlus } from '@element-plus/icons-vue'
// import { fabric } from 'fabric'
import { useDrawArea } from '@/utils/fabric'
import { getDictsApi } from '@/api/modules/system/dictData'
import ImgDetect from '../components/img-detect.vue'
import {
  listDataApi,
  delDataApi,
  addDataApi,
  updateDataApi,
  importTemplateApi,
  importDataDataApi,
  exportDataApi,
  getDataApi
} from '@/api/modules/demo/data'
const imgDetect = ref()
const state = reactive({
  area: '' as string,
  width: 1920 as number,
  height: 1080 as number,
  cover: ''
})
const { area, width, height, cover } = toRefs(state)

// ProTable 实例
const proTable = ref<ProTableInstance>()
// const getImageUrl = name => {
//   return new URL(name, import.meta.url).href
// }

const initParam = reactive({ type: 1 })
// 删除数据管理信息
const deleteData = async (params: any) => {
  await useHandleData(delDataApi, params.id, `删除【${params.name}】数据`)
  proTable.value?.getTableList()
}

// 标注图片
const markImg = data => {
  state.cover = '/api' + data.url
  // area 代表后端的传来的标注数据
  const area = []
  if (state.cover != '') {
    if (area.length != 0) {
      handleImgSuccess(area)
    }
    imgDetect.value.visible = true
  } else {
    ElMessage.warning('缺失图像,暂时不能进行区域添加！')
  }
}
const getList = () => {
  useDrawArea({
    src: state.cover,
    width: state.width,
    height: state.height,
    area: state.area
  })
    .then(url => {
      state.cover = url as string
    })
    .catch(error => {
      console.log(error)
    })
}
const handleImgSuccess = data => {
  data.forEach(item => {
    const area = item.split(';')
    // try=tly blx=tlx brx=trx bry=bly
    const tlx = Math.round(Number(area[0]) * 1920)
    const tly = Math.round(Number(area[1]) * 1080)
    const trx = tlx + Math.round(Number(area[2]) * 1920)
    const bly = tly + Math.round(Number(area[3]) * 1080)
    state.area += `${tlx};${tly};${trx};${tly};${trx};${bly};${tlx};${bly},`
  })
  // console.log('state.area', state.area)
  state.area.slice(0, -1)
  getList()
}

const labeledTypeData = [
  {
    label: '是',
    value: true
  },
  {
    label: '否',
    value: false
  }
]

// 批量删除数据管理信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delDataApi, ids, '删除所选数据信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 导出数据管理列表
const downloadFile = async () => {
  ElMessageBox.confirm('确认导出数据管理数据?', '温馨提示', { type: 'warning' }).then(() =>
    useDownload(exportDataApi, '数据管理列表', proTable.value?.searchParam)
  )
}

// 批量添加数据管理
const dialogRef = ref<InstanceType<typeof ImportPicDataset> | null>(null)
const batchAdd = () => {
  const params = {
    title: '数据管理添加数据集',
    tempApi: importTemplateApi,
    importApi: importDataDataApi,
    getTableList: proTable.value?.getTableList
  }
  dialogRef.value?.acceptParams(params)
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  let res = { data: {} }
  if (row?.id) {
    res = await getDataApi(row?.id || null)
  }
  // 重置表单
  setFormItems()
  const params = {
    title,
    width: 580,
    isEdit: type !== 3,
    itemsOptions: formItems,
    model: type == 1 ? {} : res.data,
    api: type == 1 ? addDataApi : updateDataApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'yuan', label: '原图', width: 200 },
  {
    prop: 'batchNum',
    label: '批次号',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'name',
    label: '名称',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'objectType',
    label: '目标类型',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'objectSubtype',
    label: '目标子类型',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'scene',
    label: '场景',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'dataSource',
    label: '数据源',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'gatherSpot',
    label: '采集地点',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'gatherTime',
    label: '采集时间',
    search: {
      el: 'date-picker',
      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
    },
    width: 120
  },
  {
    prop: 'dataType',
    label: '数据类型',
    enum: () => getDictsApi('data_type'),
    search: {
      el: 'tree-select'
    },
    fieldNames: { label: 'dictLabel', value: 'dictValue' },
    width: 120
  },
  // {
  //   prop: 'fileType',
  //   label: '文件类型',
  //   search: {
  //     el: 'input'
  //   },
  //   width: 120
  // },
  // {
  //   prop: 'increment',
  //   label: '扩增方式',
  //   search: {
  //     el: 'input'
  //   },
  //   width: 120
  // },
  {
    prop: 'labeled',
    label: '是否标注',
    search: {
      el: 'input'
    },
    width: 120
  },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
// 表单配置项
let formItems: ProForm.ItemsOptions[] = []
const setFormItems = () => {
  formItems = [
    {
      label: '原图',
      prop: 'url',
      compOptions: {
        elTagName: 'img-upload',
        placeholder: '请选择上传原图'
      }
    },
    {
      label: '批次号',
      prop: 'batchNum',
      rules: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入批次号'
      }
    },
    {
      label: '名称',
      prop: 'name',
      rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入名称'
      }
    },
    {
      label: '目标类型',
      prop: 'objectType',
      rules: [{ required: true, message: '目标类型不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入目标类型'
      }
    },
    {
      label: '目标子类型',
      prop: 'objectSubtype',
      rules: [{ required: true, message: '目标子类型不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入目标子类型'
      }
    },

    {
      label: '场景',
      prop: 'scene',
      rules: [{ required: true, message: '场景不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入场景'
      }
    },
    {
      label: '数据源',
      prop: 'dataSource',
      rules: [{ required: true, message: '数据源不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入数据源'
      }
    },
    {
      label: '采集地点',
      prop: 'gatherSpot',
      rules: [{ required: true, message: '采集地点不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入采集地点'
      }
    },
    {
      label: '采集时间',
      prop: 'gatherTime',
      rules: [{ required: true, message: '采集时间不能为空', trigger: 'change' }],
      compOptions: {
        elTagName: 'date-picker',
        type: 'datetime',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        placeholder: '请选择采集时间'
      }
    },
    {
      label: '数据类型',
      prop: 'dataType',
      rules: [{ required: true, message: '数据类型不能为空', trigger: 'change' }],
      compOptions: {
        elTagName: 'select',
        labelKey: 'dictLabel',
        valueKey: 'dictValue',
        enum: () => getDictsApi('data_type'),
        placeholder: '请选择数据类型'
      }
    },
    {
      label: '是否标注',
      prop: 'labeled',
      rules: [{ required: true, message: '请选择是否标注' }],
      compOptions: {
        elTagName: 'radio-group',
        enum: labeledTypeData
      }
    }
  ]
}
</script>