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

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listVideoStableApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['demo:videoStable:add']" icon="CirclePlus" @click="openDialog(1, '视频去抖动新增')"> 新增 </el-button>
        <el-button type="primary" v-auth="['demo:videoStable:import']" icon="Upload" plain @click="batchAdd"> 导入</el-button>
        <el-button type="primary" v-auth="['demo:videoStable:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button>
        <el-button
          type="danger"
          v-auth="['demo:videoStable:remove']"
          icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link icon="View" @click="startVideoStable(scope.row)" v-if="scope.row.status !== '2'"> 开始去抖动 </el-button>
        <el-button type="primary" link icon="View" @click="compareVideoStable(scope.row)" v-if="scope.row.status == '2'"> 图片对比 </el-button>
        <el-button type="primary" link icon="View" v-auth="['demo:videoStable:query']" @click="openDialog(3, '视频去抖动查看', scope.row)">
          查看
        </el-button>
        <el-button type="primary" link icon="EditPen" v-auth="['demo:videoStable:edit']" @click="openDialog(2, '视频去抖动编辑', scope.row)">
          编辑
        </el-button>
        <el-button type="primary" link icon="Delete" v-auth="['demo:videoStable:remove']" @click="deleteVideoStable(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" />
    <ImportExcel ref="dialogRef" />
    <el-dialog v-model="dialogVisible" :title="'图片对比： ' + taskName + '第' + imageIdx + '张图片对比'" width="80%">
      <div class="image-dialog">
        <el-image :src="'data:image/png;base64,' + imageBase64List.origin" style="width: 45%"></el-image>
        <el-image :src="'data:image/png;base64,' + imageBase64List.stable" style="width: 45%"></el-image>
      </div>
      <div class="image-dialog-btn">
        <el-button type="primary" @click="pre_picture" :disabled="imageIdx === 1">上一个</el-button>
        <el-button type="primary" @click="next_picture">下一个</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx" name="VideoStable">
import { ref, reactive } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { ElMessageBox, ElMessage } from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import FormDialog from '@/components/FormDialog/index.vue'
import { ProTableInstance, ColumnProps, EnumProps } from '@/components/ProTable/interface'
import {
  listVideoStableApi,
  delVideoStableApi,
  addVideoStableApi,
  updateVideoStableApi,
  importTemplateApi,
  importVideoStableDataApi,
  exportVideoStableApi,
  getVideoStableApi,
  startVideoStableApi,
  getCompareImageApi
} from '@/api/modules/demo/videoStable'

const dialogVisible = ref(false)
const taskName = ref('')
const imageIdx = ref(1)
const imageBase64List = ref({
  origin: '',
  stable: ''
})

const startVideoStable = async (params: any) => {
  const res = await startVideoStableApi(params.id)
  if (res.code === 200) {
    ElMessage.success('开始去抖动成功')
  } else {
    ElMessage.error('开始去抖动失败')
  }
  proTable.value?.getTableList()
}

const loadImageData = async (taskName: string, imageIdx: number) => {
  const res: any = await getCompareImageApi(taskName, imageIdx)
  imageBase64List.value.origin = res.origin
  imageBase64List.value.stable = res.stable
}
const compareVideoStable = async (params: any) => {
  taskName.value = params.name
  imageIdx.value = 1
  await loadImageData(taskName.value, imageIdx.value)

  dialogVisible.value = true
}
const next_picture = async () => {
  imageIdx.value = imageIdx.value + 1
  await loadImageData(taskName.value, imageIdx.value)
}
const pre_picture = async () => {
  if (imageIdx.value > 1) {
    imageIdx.value = imageIdx.value - 1
    await loadImageData(taskName.value, imageIdx.value)
  }
}

// ProTable 实例
const proTable = ref<ProTableInstance>()

// 删除视频去抖动信息
const deleteVideoStable = async (params: any) => {
  await useHandleData(delVideoStableApi, params.id, '删除【' + params.id + '】视频去抖动')
  proTable.value?.getTableList()
}

// 批量删除视频去抖动信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delVideoStableApi, ids, '删除所选视频去抖动信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

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

// 批量添加视频去抖动
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '视频去抖动',
    tempApi: importTemplateApi,
    importApi: importVideoStableDataApi,
    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 getVideoStableApi(row?.id || null)
  }
  // 重置表单
  setItemsOptions()
  const params = {
    title,
    width: 580,
    isEdit: type !== 3,
    itemsOptions: itemsOptions,
    model: type == 1 ? {} : res.data,
    api: type == 1 ? addVideoStableApi : updateVideoStableApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}
const statusEnums: EnumProps[] = [
  {
    label: '未开始',
    value: '0',
    disabled: false,
    tagType: 'default'
  },
  {
    label: '进行中',
    value: '1',
    disabled: false,
    tagType: 'primary'
  },
  {
    label: '已结束',
    value: '2',
    disabled: false,
    tagType: 'success'
  },
  {
    label: '失败',
    value: '3',
    disabled: false,
    tagType: 'danger'
  }
]

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'id', label: '主键ID' },
  {
    prop: 'name',
    label: '视频名称',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'status',
    label: '任务状态',
    search: {
      el: 'input'
    },
    width: 120,
    tag: true,
    enum: statusEnums
  },
  {
    prop: 'startTime',
    label: '开始时间',
    search: {
      el: 'date-picker',
      props: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    },
    width: 120
  },
  {
    prop: 'endTime',
    label: '结束时间',
    search: {
      el: 'date-picker',
      props: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    },
    width: 120
  },
  {
    prop: 'costSecond',
    label: '耗时',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'log',
    label: '日志',
    search: {
      el: 'input'
    },
    width: 120
  },

  {
    prop: 'block_size',
    label: 'block_size',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'radius',
    label: 'radius',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'cornerquality',
    label: 'cornerquality',
    search: {
      el: 'input'
    },
    width: 130
  },
  {
    prop: 'cornerminDistance',
    label: 'cornerminDistance',
    search: {
      el: 'input'
    },
    width: 180
  },
  {
    prop: 'lklevel',
    label: 'lklevel',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'lkwinSiz',
    label: 'lkwinSiz',
    search: {
      el: 'input'
    },
    width: 120
  },

  {
    prop: 'remarks',
    label: '备注',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'operation',
    label: '操作',
    width: 230,
    fixed: 'right'
  }
])
// 表单配置项
let itemsOptions: ProForm.ItemsOptions[] = []
const setItemsOptions = () => {
  itemsOptions = [
    {
      label: '任务名称',
      prop: 'name',
      rules: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入视频名称'
      }
    },
    {
      label: '图片集压缩包',
      prop: 'inputOssId',
      rules: [{ required: true, message: '图片集压缩包不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'file-upload',
        fileSize: 4096,
        fileType: ['zip'],
        placeholder: '请输入视频名称'
      }
    },
    {
      label: 'block_size',
      prop: 'block_size',
      rules: [{ required: true, message: 'block_size不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 50
      }
    },
    {
      label: 'radius',
      prop: 'radius',
      rules: [{ required: true, message: 'radius不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 500
      }
    },
    {
      label: 'buffer_size',
      prop: 'buffer_size',
      rules: [{ required: true, message: 'buffer_size不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 200
      }
    },
    {
      label: 'cornerquality',
      prop: 'cornerquality',
      rules: [{ required: true, message: 'cornerquality不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 0.2
      }
    },
    {
      label: 'cornerminDistance',
      prop: 'cornerminDistance',
      rules: [{ required: true, message: 'cornerminDistance不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 5
      }
    },
    {
      label: 'lklevel',
      prop: 'lklevel',
      rules: [{ required: true, message: 'lklevel不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 3
      }
    },
    {
      label: 'lkwinSiz',
      prop: 'lkwinSiz',
      rules: [{ required: true, message: 'lkwinSiz不能为空', trigger: 'blur' }],
      compOptions: {
        type: 'input',
        clearable: true,
        placeholder: '请输入内容',
        value: 15
      }
    },
    {
      label: '备注',
      prop: 'remarks',
      rules: [
        {
          required: false,
          message: '备注不能为空',
          trigger: 'blur'
        }
      ],
      compOptions: {
        placeholder: '请输入备注'
      }
    }
  ]
}
</script>

<style lang="scss" scoped>
.image-dialog {
  display: flex;
  justify-content: center;
  .el-image {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
.image-dialog-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>