feat(transcode): bitrate and process

src/api/asset.js

@@ -430,3 +430,32 @@ export function updateDatasetAssetDuration (relationId, adDuration) {
     }
   })
 }
+
+export function getVideoBitrate () {
+  return request({
+    url: '/minio-data/videoBitRate',
+    method: 'GET'
+  })
+}
+
+export function setVideoBitrate (videoBitRate) {
+  return update({
+    url: '/minio-data/videoBitRate',
+    method: 'POST',
+    data: { videoBitRate }
+  })
+}
+
+export function cancelProcess (id) {
+  return confirmAndSend('取消', '转码', {
+    url: `/minio-data/mediaProcessTask/task/stop/${id}`,
+    method: 'DELETE'
+  })
+}
+
+export function cancelAllProcess () {
+  return confirmAndSend('取消', '全部转码任务', {
+    url: `/minio-data/mediaProcessTask/task/stop/all`,
+    method: 'DELETE'
+  })
+}

src/layout/components/Navbar/UploadDashboard/index.vue

@@ -56,6 +56,20 @@
                 :schema="subTagSelectSchema"
               />
             </div>
+            <div
+              class="l-flex--row c-sibling-item far"
+            >
+              <span class="c-sibling-item u-color--info">
+                码率
+              </span>
+              <el-input
+                v-model.trim="bitrate"
+                class="c-sibling-item u-width--2xs el-input--small"
+                placeholder="请输入码率"
+                maxlength="5"
+                @change="checkBitrate"
+              />
+            </div>
             <div class="l-flex--row c-sibling-item far">
               <span class="c-sibling-item u-color--info">
                 参与营销
@@ -129,7 +143,11 @@ import {
   removeListener,
   isUploading
 } from '@/utils/upload'
-import { getAssetSubTags } from '@/api/asset'
+import {
+  getAssetSubTags,
+  getVideoBitrate,
+  setVideoBitrate
+} from '@/api/asset'
 import FileProgress from './FileProgress'
 
 export default {
@@ -158,7 +176,8 @@ export default {
         label: 'name'
       },
       marketing: 0,
-      videoTranscode: true
+      videoTranscode: true,
+      bitrate: ''
     }
   },
   computed: {
@@ -173,6 +192,7 @@ export default {
   created () {
     addListener('change', this.check)
     EventBus.$on('upload', this.onShowByOption)
+    this.getVideoBitrate()
   },
   beforeDestroy () {
     removeListener('change', this.check)
@@ -212,6 +232,19 @@ export default {
     },
     onRefresh () {
       EventBus.$emit('directory-refresh', this.directoryOption)
+    },
+    checkBitrate () {
+      if (!/^\d+$/.test(this.bitrate) || this.bitrate <= 0) {
+        this.bitrate = this.$bitrate
+        this.$message.error('仅可输入正整数')
+        return
+      }
+      setVideoBitrate(this.bitrate)
+    },
+    getVideoBitrate () {
+      getVideoBitrate().then(({ data }) => {
+        this.$bitrate = this.bitrate = data.videoBitRate
+      })
     }
   }
 }

src/views/screen/material/media/index.vue

@@ -128,7 +128,9 @@ import {
   countByDay,
   treeLocation,
   secondaryTransList,
-  mediaList
+  mediaList,
+  cancelProcess,
+  cancelAllProcess
 } from '@/api/asset.js'
 import LineChart from './components/LineChart.vue'
 
@@ -246,8 +248,11 @@ export default {
     },
     mediaSchema () {
       return {
+        buttons: [
+          { label: '取消全部转码任务', on: this.onCancelAllProcess }
+        ],
         autoRefreshEachPage: true,
-        refreshInterval: 30000,
+        refreshInterval: 5000, // 转码进度更新
         list: mediaList,
         filters: [
           { key: 'originalName', type: 'search', placeholder: '资源名称' },
@@ -257,6 +262,7 @@ export default {
           { type: 'refresh' },
           { prop: 'originalName', label: '素材名称', 'align': 'center' },
           { label: '类型', 'align': 'center', render: ({ taskType }) => CourseTypeInfo[taskType] },
+          { label: '转码进度', 'align': 'center', render: ({ percent }) => percent === null ? '-' : percent ? `${percent}%` : 0 },
           {
             label: '执行结果', type: 'tag', render: ({ taskStatus }) => {
               return {
@@ -267,7 +273,8 @@ export default {
           },
           { prop: 'departmentName', label: '部门名', 'align': 'center' },
           { prop: 'username', label: '用户名', 'align': 'center' },
-          { prop: 'createTime', label: '上传时间', 'align': 'center' }
+          { prop: 'createTime', label: '上传时间', 'align': 'center' },
+          { type: 'invoke', render: [{ allow: ({ taskStatus }) => [1, 2].includes(taskStatus), label: '取消转码', on: this.onCancelProcess }] }
         ]
       }
     }
@@ -510,6 +517,16 @@ export default {
     },
     onUpload () {
       EventBus.$emit('upload', this.$directoryOption)
+    },
+    onCancelProcess ({ id }) {
+      cancelProcess(id).then(() => {
+        this.$refs.mediaDialog?.getTable()?.refreshCurrentPageOnBackground()
+      })
+    },
+    onCancelAllProcess () {
+      cancelAllProcess().then(() => {
+        this.$refs.mediaDialog?.getTable()?.refreshCurrentPageOnBackground()
+      })
     }
   }
 }