|
@@ -4,8 +4,8 @@
|
|
<el-header height="45px" style="background-color: #fafafa; padding: 0 10px;">
|
|
<el-header height="45px" style="background-color: #fafafa; padding: 0 10px;">
|
|
<soft-header ref="headerRef" @update-soft="updateSoft()" @export-file="exportFile"></soft-header>
|
|
<soft-header ref="headerRef" @update-soft="updateSoft()" @export-file="exportFile"></soft-header>
|
|
</el-header>
|
|
</el-header>
|
|
- <el-main ref="el-main" style="background-color: #fafafa;">
|
|
|
|
- <div v-if="!menuIndex" style="padding: 30px 40px 0;">
|
|
|
|
|
|
+ <el-container ref="el-main" style="background-color: #fafafa;width: 100%;">
|
|
|
|
+ <div v-if="!menuIndex" style="width:100%; padding: 30px 40px 0;">
|
|
<div class="cmenu-item">
|
|
<div class="cmenu-item">
|
|
<el-row :gutter="40">
|
|
<el-row :gutter="40">
|
|
<el-col :span="8">
|
|
<el-col :span="8">
|
|
@@ -55,159 +55,155 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<template v-else>
|
|
<template v-else>
|
|
- <div class="content-top">
|
|
|
|
- <el-button-group>
|
|
|
|
- <el-button type="primary" size="mini" icon="el-icon-document"
|
|
|
|
- @click="pickFile()">添加文件</el-button>
|
|
|
|
- <el-button type="primary" size="mini" icon="el-icon-folder"
|
|
|
|
- @click="pickDir()">添加文件夹</el-button>
|
|
|
|
- <el-button type="primary" size="mini" icon="el-icon-delete"
|
|
|
|
- @click="clearList()">清空列表</el-button>
|
|
|
|
- </el-button-group>
|
|
|
|
- <el-row type="flex" class="row-bg">
|
|
|
|
- <el-col :span="1" style="text-align: right;">
|
|
|
|
- <el-button style="margin-top: 8px;" type="danger" size="mini"
|
|
|
|
- icon="el-icon-arrow-left" circle @click="menuIndex=''"></el-button>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="23" style="padding: 0 15px;">
|
|
|
|
- <el-tabs v-model="menuIndex">
|
|
|
|
- <el-tab-pane label="图片压缩" name="1"></el-tab-pane>
|
|
|
|
- <el-tab-pane label="音频压缩" name="2"></el-tab-pane>
|
|
|
|
- <el-tab-pane label="视频压缩" name="3"></el-tab-pane>
|
|
|
|
- <el-tab-pane label="PDF压缩" name="4"></el-tab-pane>
|
|
|
|
- <el-tab-pane label="WORD压缩" name="5"></el-tab-pane>
|
|
|
|
- <el-tab-pane label="PPT压缩" name="6"></el-tab-pane>
|
|
|
|
- </el-tabs>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div v-if="(menuIndex != '8' && audioList.length == 0) || (menuIndex == 8 && videoList.length == 0)" class="upload-area">
|
|
|
|
- <div class="file-area" @click="pickFile()" id="drag-audio" @dragover.prevent @drop="handleDrop">
|
|
|
|
- <div class="file-area-pos">
|
|
|
|
- <img v-if="menuIndex == '1'" src="../assets/image/a-img.png" class="upload-img"/>
|
|
|
|
- <img v-if="menuIndex == '2'" src="../assets/image/a-audio.png" class="upload-img"/>
|
|
|
|
- <img v-if="menuIndex == '3'" src="../assets/image/a-video.png" class="upload-img"/>
|
|
|
|
- <img v-if="menuIndex == '4'" src="../assets/image/a-pdf.png" class="upload-img"/>
|
|
|
|
- <img v-if="menuIndex == '5'" src="../assets/image/a-word.png" class="upload-img"/>
|
|
|
|
- <img v-if="menuIndex == '6'" src="../assets/image/a-ppt.png" class="upload-img"/>
|
|
|
|
- <p style="font-size: 16px; margin-top: 30px;">点击添加文件或拖拽文件到此</p>
|
|
|
|
- <div style="font-size: 12px; color: #999;padding-top:15px;">
|
|
|
|
- <p>加密或破损的文件格式不支持</p>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <el-aside width="100px" style="border-right: 1px solid #eee;">
|
|
|
|
+ <div style="text-align: center;">
|
|
|
|
+ <el-button style="margin-top: 16px;" type="danger" size="mini" icon="el-icon-s-home" circle @click="menuIndex=''"></el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu-list">
|
|
|
|
+ <div class="menu-item" :class="menuIndex == '1' ? 'active' : ''" @click="menuIndex = '1'">
|
|
|
|
+ <img src="../assets/image/a-img.png" class="menu-img"/>
|
|
|
|
+ <p>图片压缩</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu-item" :class="menuIndex == '2' ? 'active' : ''" @click="menuIndex = '2'">
|
|
|
|
+ <img src="../assets/image/a-audio.png" class="menu-img"/>
|
|
|
|
+ <p>音频压缩</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu-item" :class="menuIndex == '3' ? 'active' : ''" @click="menuIndex = '3'">
|
|
|
|
+ <img src="../assets/image/a-video.png" class="menu-img"/>
|
|
|
|
+ <p>视频压缩</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu-item" :class="menuIndex == '4' ? 'active' : ''" @click="menuIndex = '4'">
|
|
|
|
+ <img src="../assets/image/a-pdf.png" class="menu-img"/>
|
|
|
|
+ <p>PDF压缩</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu-item" :class="menuIndex == '5' ? 'active' : ''" @click="menuIndex = '5'">
|
|
|
|
+ <img src="../assets/image/a-word.png" class="menu-img"/>
|
|
|
|
+ <p>Word压缩</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu-item" :class="menuIndex == '6' ? 'active' : ''" @click="menuIndex = '6'">
|
|
|
|
+ <img src="../assets/image/a-ppt.png" class="menu-img"/>
|
|
|
|
+ <p>PPT压缩</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="soft-content" v-else>
|
|
|
|
- <div class="content-left">
|
|
|
|
- <div class="table-scroll" @dragover.prevent @drop="handleDrop">
|
|
|
|
- <vxe-table
|
|
|
|
- show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了!" :loading="tabLoading"
|
|
|
|
- :loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
|
|
|
|
- :edit-config="{trigger: 'click', mode: 'cell'}" :data="audioList" :scroll-y="{enabled: true}">
|
|
|
|
- <vxe-column field="name" :title="'文件名称'+'(' + audioList.length + ')'"></vxe-column>
|
|
|
|
- <vxe-column field="size" title="大小" width="140">
|
|
|
|
- <template #default="{ row }">
|
|
|
|
- <span>{{$utils.handleSize(row.size)}}</span>
|
|
|
|
- </template>
|
|
|
|
- </vxe-column>
|
|
|
|
- <vxe-column field="duration" title="时间" width="140">
|
|
|
|
- <template #default="{ row }">
|
|
|
|
- <span>{{formatSeconds(row.duration)}}</span>
|
|
|
|
- </template>
|
|
|
|
- </vxe-column>
|
|
|
|
- <vxe-column field="progress" title="转换进度" width="200">
|
|
|
|
- <template #default="{ row }">
|
|
|
|
- <el-progress :text-inside="true" :stroke-width="20" :percentage="row.percent"></el-progress>
|
|
|
|
- </template>
|
|
|
|
- </vxe-column>
|
|
|
|
- <vxe-column title="操作" width="90">
|
|
|
|
- <template #default="{ row, rowIndex }">
|
|
|
|
- <i class="el-icon-view cur-pointer" style="font-size: 20px; margin-right: 5px;" @click="showFile(rowIndex)"></i>
|
|
|
|
- <i class="el-icon-delete cur-pointer" style="font-size: 20px;" @click="delFile(rowIndex)"></i>
|
|
|
|
- </template>
|
|
|
|
- </vxe-column>
|
|
|
|
- </vxe-table>
|
|
|
|
-
|
|
|
|
|
|
+ </el-aside>
|
|
|
|
+
|
|
|
|
+ <el-main>
|
|
|
|
+ <div class="content-top">
|
|
|
|
+ <el-button-group>
|
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-document"
|
|
|
|
+ @click="pickFile()">添加文件</el-button>
|
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-folder"
|
|
|
|
+ @click="pickDir()">添加文件夹</el-button>
|
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-delete"
|
|
|
|
+ @click="clearList()">清空列表</el-button>
|
|
|
|
+ </el-button-group>
|
|
|
|
+ <div>
|
|
|
|
+ <span>保存目录:</span>
|
|
|
|
+ <el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:200px;" prefix-icon="el-icon-folder"></el-input>
|
|
|
|
+ <el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
|
|
|
|
+ <i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
|
|
|
|
+ </el-popover>
|
|
|
|
+ <el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <!-- 底部设置区域 -->
|
|
|
|
- <div class="img-footer-area" v-if="(menuIndex != '8' && audioList.length > 0) || (menuIndex == 8 && videoList.length > 0)">
|
|
|
|
- <div class="footer-line-between">
|
|
|
|
- <!-- 1格式转化 -->
|
|
|
|
- <div class="handle-item" v-if="menuIndex == '1' || menuIndex == '2'">
|
|
|
|
- <label class="handle-label">输出格式:</label>
|
|
|
|
- <el-select v-model="handleData.format" style="width:100px;" size="small">
|
|
|
|
- <el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <label class="handle-label">声道:</label>
|
|
|
|
- <el-select v-model="handleData.type" style="width:100px;" size="small">
|
|
|
|
- <el-option :value="1" label="同源音频"></el-option>
|
|
|
|
- <el-option :value="2" label="单声道"></el-option>
|
|
|
|
- <el-option :value="3" label="双声道"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <label class="handle-label">码率:</label>
|
|
|
|
- <el-select v-model="handleData.quality" style="width:100px;" size="small">
|
|
|
|
- <el-option value="1" label="同源音频"></el-option>
|
|
|
|
- <el-option value="8k" label="8 kbps"></el-option>
|
|
|
|
- <el-option value="16k" label="16 kbps"></el-option>
|
|
|
|
- <el-option value="24k" label="24 kbps"></el-option>
|
|
|
|
- <el-option value="32k" label="32 kbps"></el-option>
|
|
|
|
- <el-option value="40k" label="40 kbps"></el-option>
|
|
|
|
- <el-option value="48k" label="48 kbps"></el-option>
|
|
|
|
- <el-option value="56k" label="56 kbps"></el-option>
|
|
|
|
- <el-option value="64k" label="64 kbps"></el-option>
|
|
|
|
- <el-option value="80k" label="80 kbps"></el-option>
|
|
|
|
- <el-option value="96k" label="96 kbps"></el-option>
|
|
|
|
- <el-option value="112k" label="112 kbps"></el-option>
|
|
|
|
- <el-option value="128k" label="128 kbps"></el-option>
|
|
|
|
- <el-option value="144k" label="144 kbps"></el-option>
|
|
|
|
- <el-option value="160k" label="160 kbps"></el-option>
|
|
|
|
- <el-option value="192k" label="192 kbps"></el-option>
|
|
|
|
- <el-option value="224k" label="224 kbps"></el-option>
|
|
|
|
- <el-option value="256k" label="256 kbps"></el-option>
|
|
|
|
- <el-option value="320k" label="320 kbps"></el-option>
|
|
|
|
- <el-option value="512k" label="512 kbps"></el-option>
|
|
|
|
- <el-option value="1400k" label="1400 kbps"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
|
|
+
|
|
|
|
+ <div v-if="(menuIndex != '8' && audioList.length == 0) || (menuIndex == 8 && videoList.length == 0)" class="upload-area">
|
|
|
|
+ <div class="file-area" @click="pickFile()" id="drag-audio" @dragover.prevent @drop="handleDrop">
|
|
|
|
+ <div class="file-area-pos">
|
|
|
|
+ <img v-if="menuIndex == '1'" src="../assets/image/a-img.png" class="upload-img"/>
|
|
|
|
+ <img v-if="menuIndex == '2'" src="../assets/image/a-audio.png" class="upload-img"/>
|
|
|
|
+ <img v-if="menuIndex == '3'" src="../assets/image/a-video.png" class="upload-img"/>
|
|
|
|
+ <img v-if="menuIndex == '4'" src="../assets/image/a-pdf.png" class="upload-img"/>
|
|
|
|
+ <img v-if="menuIndex == '5'" src="../assets/image/a-word.png" class="upload-img"/>
|
|
|
|
+ <img v-if="menuIndex == '6'" src="../assets/image/a-ppt.png" class="upload-img"/>
|
|
|
|
+ <p style="font-size: 16px; margin-top: 30px;">点击添加文件或拖拽文件到此</p>
|
|
|
|
+ <div style="font-size: 12px; color: #999;padding-top:15px;">
|
|
|
|
+ <p>加密或破损的文件格式不支持</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <!-- 3音频压缩 -->
|
|
|
|
- <div class="handle-item" v-if="menuIndex == '3'">
|
|
|
|
- <label class="handle-label">压缩级别:</label>
|
|
|
|
- <el-select v-model="handleData.compressLevel" style="width:100px;" size="small">
|
|
|
|
- <el-option :value="1" label="1"></el-option>
|
|
|
|
- <el-option :value="2" label="2"></el-option>
|
|
|
|
- <el-option :value="3" label="3"></el-option>
|
|
|
|
- <el-option :value="4" label="4"></el-option>
|
|
|
|
- <el-option :value="5" label="5"></el-option>
|
|
|
|
- <el-option :value="6" label="6"></el-option>
|
|
|
|
- <el-option :value="7" label="7"></el-option>
|
|
|
|
- <el-option :value="8" label="8"></el-option>
|
|
|
|
- <el-option :value="9" label="9"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <span style="margin-left: 10px; font-size: 12px; color: #F56C6C;">等级越高压缩效果越好</span>
|
|
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="soft-content" v-else>
|
|
|
|
+ <div class="content-left">
|
|
|
|
+ <div class="table-scroll" @dragover.prevent @drop="handleDrop">
|
|
|
|
+ <vxe-table
|
|
|
|
+ show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了!" :loading="tabLoading"
|
|
|
|
+ :loading-config="{icon: 'vxe-icon-indicator roll', text: '文件加载中...'}" :row-config="{isHover: true}"
|
|
|
|
+ :edit-config="{trigger: 'click', mode: 'cell'}" :data="audioList" :scroll-y="{enabled: true}">
|
|
|
|
+ <vxe-column field="name" :title="'文件名称'+'(' + audioList.length + ')'"></vxe-column>
|
|
|
|
+ <vxe-column field="size" title="大小" width="140">
|
|
|
|
+ <template #default="{ row }">
|
|
|
|
+ <span>{{$utils.handleSize(row.size)}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </vxe-column>
|
|
|
|
+ <vxe-column field="duration" title="时间" width="140">
|
|
|
|
+ <template #default="{ row }">
|
|
|
|
+ <span>{{formatSeconds(row.duration)}}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </vxe-column>
|
|
|
|
+ <vxe-column field="progress" title="转换进度" width="200">
|
|
|
|
+ <template #default="{ row }">
|
|
|
|
+ <el-progress :text-inside="true" :stroke-width="20" :percentage="row.percent"></el-progress>
|
|
|
|
+ </template>
|
|
|
|
+ </vxe-column>
|
|
|
|
+ <vxe-column title="操作" width="90">
|
|
|
|
+ <template #default="{ row, rowIndex }">
|
|
|
|
+ <i class="el-icon-view cur-pointer" style="font-size: 20px; margin-right: 5px;" @click="showFile(rowIndex)"></i>
|
|
|
|
+ <i class="el-icon-delete cur-pointer" style="font-size: 20px;" @click="delFile(rowIndex)"></i>
|
|
|
|
+ </template>
|
|
|
|
+ </vxe-column>
|
|
|
|
+ </vxe-table>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <!-- 音频分割 -->
|
|
|
|
- <div class="handle-item" v-if="menuIndex == '4'">
|
|
|
|
- <label class="handle-label">分割格式:</label>
|
|
|
|
- <el-select v-model="handleData.format" style="width:100px;" size="small">
|
|
|
|
- <el-option v-for="(item,key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
-
|
|
|
|
- <label class="handle-label">分割模式:</label>
|
|
|
|
- <el-select v-model="handleData.split_type" style="width:100px;" size="small">
|
|
|
|
- <el-option :value="1" label="按份分割"></el-option>
|
|
|
|
- <!-- <el-option :value="2" label="截取分割"></el-option> -->
|
|
|
|
- <el-option :value="3" label="平均分割"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
-
|
|
|
|
- <template v-if="handleData.split_type == 1">
|
|
|
|
- <label class="handle-label">分割分数:</label>
|
|
|
|
- <el-select v-model="handleData.split_num" style="width:100px;" size="small">
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 底部设置区域 -->
|
|
|
|
+ <div class="img-footer-area" v-if="(menuIndex != '8' && audioList.length > 0) || (menuIndex == 8 && videoList.length > 0)">
|
|
|
|
+ <div class="footer-line-between">
|
|
|
|
+ <!-- 1格式转化 -->
|
|
|
|
+ <div class="handle-item" v-if="menuIndex == '1' || menuIndex == '2'">
|
|
|
|
+ <label class="handle-label">输出格式:</label>
|
|
|
|
+ <el-select v-model="handleData.format" style="width:100px;" size="small">
|
|
|
|
+ <el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <label class="handle-label">声道:</label>
|
|
|
|
+ <el-select v-model="handleData.type" style="width:100px;" size="small">
|
|
|
|
+ <el-option :value="1" label="同源音频"></el-option>
|
|
|
|
+ <el-option :value="2" label="单声道"></el-option>
|
|
|
|
+ <el-option :value="3" label="双声道"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <label class="handle-label">码率:</label>
|
|
|
|
+ <el-select v-model="handleData.quality" style="width:100px;" size="small">
|
|
|
|
+ <el-option value="1" label="同源音频"></el-option>
|
|
|
|
+ <el-option value="8k" label="8 kbps"></el-option>
|
|
|
|
+ <el-option value="16k" label="16 kbps"></el-option>
|
|
|
|
+ <el-option value="24k" label="24 kbps"></el-option>
|
|
|
|
+ <el-option value="32k" label="32 kbps"></el-option>
|
|
|
|
+ <el-option value="40k" label="40 kbps"></el-option>
|
|
|
|
+ <el-option value="48k" label="48 kbps"></el-option>
|
|
|
|
+ <el-option value="56k" label="56 kbps"></el-option>
|
|
|
|
+ <el-option value="64k" label="64 kbps"></el-option>
|
|
|
|
+ <el-option value="80k" label="80 kbps"></el-option>
|
|
|
|
+ <el-option value="96k" label="96 kbps"></el-option>
|
|
|
|
+ <el-option value="112k" label="112 kbps"></el-option>
|
|
|
|
+ <el-option value="128k" label="128 kbps"></el-option>
|
|
|
|
+ <el-option value="144k" label="144 kbps"></el-option>
|
|
|
|
+ <el-option value="160k" label="160 kbps"></el-option>
|
|
|
|
+ <el-option value="192k" label="192 kbps"></el-option>
|
|
|
|
+ <el-option value="224k" label="224 kbps"></el-option>
|
|
|
|
+ <el-option value="256k" label="256 kbps"></el-option>
|
|
|
|
+ <el-option value="320k" label="320 kbps"></el-option>
|
|
|
|
+ <el-option value="512k" label="512 kbps"></el-option>
|
|
|
|
+ <el-option value="1400k" label="1400 kbps"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 3音频压缩 -->
|
|
|
|
+ <div class="handle-item" v-if="menuIndex == '3'">
|
|
|
|
+ <label class="handle-label">压缩级别:</label>
|
|
|
|
+ <el-select v-model="handleData.compressLevel" style="width:100px;" size="small">
|
|
|
|
+ <el-option :value="1" label="1"></el-option>
|
|
<el-option :value="2" label="2"></el-option>
|
|
<el-option :value="2" label="2"></el-option>
|
|
<el-option :value="3" label="3"></el-option>
|
|
<el-option :value="3" label="3"></el-option>
|
|
<el-option :value="4" label="4"></el-option>
|
|
<el-option :value="4" label="4"></el-option>
|
|
@@ -216,52 +212,74 @@
|
|
<el-option :value="7" label="7"></el-option>
|
|
<el-option :value="7" label="7"></el-option>
|
|
<el-option :value="8" label="8"></el-option>
|
|
<el-option :value="8" label="8"></el-option>
|
|
<el-option :value="9" label="9"></el-option>
|
|
<el-option :value="9" label="9"></el-option>
|
|
- <el-option :value="10" label="10"></el-option>
|
|
|
|
</el-select>
|
|
</el-select>
|
|
- </template>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- 音频变速 -->
|
|
|
|
- <div class="handle-item" v-if="menuIndex == '5'">
|
|
|
|
- <label class="handle-label">播放速度:</label>
|
|
|
|
- <el-slider class="info-input" v-model="handleData.speed" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.speed}}倍
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- 音量调整 -->
|
|
|
|
- <div class="handle-item" v-if="menuIndex == '6'">
|
|
|
|
- <label class="handle-label">音量大小:</label>
|
|
|
|
- <el-slider class="info-input" v-model="handleData.volume" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.volume}}
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- 音频反转 -->
|
|
|
|
- <div class="handle-item" v-if="menuIndex == '7'">
|
|
|
|
- <label class="handle-label">输出格式:</label>
|
|
|
|
- <el-checkbox size="small" v-model="handleData.isOriginal">同原音频</el-checkbox>
|
|
|
|
- <el-select v-if="!handleData.isOriginal" v-model="handleData.format" style="width:100px;margin-left: 5px;" size="small">
|
|
|
|
- <el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <!-- 提取音频 -->
|
|
|
|
- <div class="handle-item" v-if="menuIndex == '8'">
|
|
|
|
- <label class="handle-label">提取格式:</label>
|
|
|
|
- <el-select v-model="videoFormat" style="width:100px;margin-left: 5px;" size="small">
|
|
|
|
- <el-option v-for="(item, key) in outputVideo" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div v-else></div>
|
|
|
|
-
|
|
|
|
- <div>
|
|
|
|
- <span>保存目录:</span>
|
|
|
|
- <el-input :title="handleData.newPath" ref="upload-input" @focus="pickPath" placeholder="请选择输出目录" size="small" v-model="handleData.newPath" readonly style="width:180px;" prefix-icon="el-icon-folder"></el-input>
|
|
|
|
- <el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
|
|
|
|
- <i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
|
|
|
|
- </el-popover>
|
|
|
|
- <el-button type="danger" style="margin-left: 20px;" @click="exportFile()" :loading="exportLoading">开始处理</el-button>
|
|
|
|
|
|
+ <span style="margin-left: 10px; font-size: 12px; color: #F56C6C;">等级越高压缩效果越好</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 音频分割 -->
|
|
|
|
+ <div class="handle-item" v-if="menuIndex == '4'">
|
|
|
|
+ <label class="handle-label">分割格式:</label>
|
|
|
|
+ <el-select v-model="handleData.format" style="width:100px;" size="small">
|
|
|
|
+ <el-option v-for="(item,key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+
|
|
|
|
+ <label class="handle-label">分割模式:</label>
|
|
|
|
+ <el-select v-model="handleData.split_type" style="width:100px;" size="small">
|
|
|
|
+ <el-option :value="1" label="按份分割"></el-option>
|
|
|
|
+ <!-- <el-option :value="2" label="截取分割"></el-option> -->
|
|
|
|
+ <el-option :value="3" label="平均分割"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+
|
|
|
|
+ <template v-if="handleData.split_type == 1">
|
|
|
|
+ <label class="handle-label">分割分数:</label>
|
|
|
|
+ <el-select v-model="handleData.split_num" style="width:100px;" size="small">
|
|
|
|
+ <el-option :value="2" label="2"></el-option>
|
|
|
|
+ <el-option :value="3" label="3"></el-option>
|
|
|
|
+ <el-option :value="4" label="4"></el-option>
|
|
|
|
+ <el-option :value="5" label="5"></el-option>
|
|
|
|
+ <el-option :value="6" label="6"></el-option>
|
|
|
|
+ <el-option :value="7" label="7"></el-option>
|
|
|
|
+ <el-option :value="8" label="8"></el-option>
|
|
|
|
+ <el-option :value="9" label="9"></el-option>
|
|
|
|
+ <el-option :value="10" label="10"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 音频变速 -->
|
|
|
|
+ <div class="handle-item" v-if="menuIndex == '5'">
|
|
|
|
+ <label class="handle-label">播放速度:</label>
|
|
|
|
+ <el-slider class="info-input" v-model="handleData.speed" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.speed}}倍
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 音量调整 -->
|
|
|
|
+ <div class="handle-item" v-if="menuIndex == '6'">
|
|
|
|
+ <label class="handle-label">音量大小:</label>
|
|
|
|
+ <el-slider class="info-input" v-model="handleData.volume" :min="0.5" :max="2.0" :step="0.05" style="margin-right: 10px;"></el-slider> {{handleData.volume}}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 音频反转 -->
|
|
|
|
+ <div class="handle-item" v-if="menuIndex == '7'">
|
|
|
|
+ <label class="handle-label">输出格式:</label>
|
|
|
|
+ <el-checkbox size="small" v-model="handleData.isOriginal">同原音频</el-checkbox>
|
|
|
|
+ <el-select v-if="!handleData.isOriginal" v-model="handleData.format" style="width:100px;margin-left: 5px;" size="small">
|
|
|
|
+ <el-option v-for="(item, key) in outputAudio" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 提取音频 -->
|
|
|
|
+ <div class="handle-item" v-if="menuIndex == '8'">
|
|
|
|
+ <label class="handle-label">提取格式:</label>
|
|
|
|
+ <el-select v-model="videoFormat" style="width:100px;margin-left: 5px;" size="small">
|
|
|
|
+ <el-option v-for="(item, key) in outputVideo" :key="key" :value="item" :label="item"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
|
|
+
|
|
|
|
+ </el-main>
|
|
|
|
+
|
|
|
|
+
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<!-- 文件信息弹窗 -->
|
|
<!-- 文件信息弹窗 -->
|
|
@@ -317,7 +335,7 @@
|
|
</el-descriptions-item>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-descriptions>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
- </el-main>
|
|
|
|
|
|
+ </el-container>
|
|
<el-footer height="48px">
|
|
<el-footer height="48px">
|
|
<!-- 更新 -->
|
|
<!-- 更新 -->
|
|
<soft-update ref="updateRef" :showDowload="dowloadModel"
|
|
<soft-update ref="updateRef" :showDowload="dowloadModel"
|
|
@@ -362,7 +380,7 @@ export default {
|
|
audioList: [],
|
|
audioList: [],
|
|
videoList: [],
|
|
videoList: [],
|
|
imgInfo: '',
|
|
imgInfo: '',
|
|
- menuIndex: '', // 选中菜单
|
|
|
|
|
|
+ menuIndex: '1', // 选中菜单
|
|
|
|
|
|
inputAudio: ['mp3', 'wav', 'ogg', 'flac', 'mp2', 'm4a', 'm4r', 'ac3', 'amr', 'wma', 'aiff','aifc','caf','aac','ape','mmf','wv','au','voc','3gpp','mka','mp4'],
|
|
inputAudio: ['mp3', 'wav', 'ogg', 'flac', 'mp2', 'm4a', 'm4r', 'ac3', 'amr', 'wma', 'aiff','aifc','caf','aac','ape','mmf','wv','au','voc','3gpp','mka','mp4'],
|
|
outputAudio: ['mp3', 'wav', 'ogg', 'flac', 'mp2', 'm4a', 'm4r', 'ac3', 'amr', 'wma', 'aiff','aifc','caf','aac','ape','mmf','wv','au','voc','3gpp','mka','mp4'],
|
|
outputAudio: ['mp3', 'wav', 'ogg', 'flac', 'mp2', 'm4a', 'm4r', 'ac3', 'amr', 'wma', 'aiff','aifc','caf','aac','ape','mmf','wv','au','voc','3gpp','mka','mp4'],
|
|
@@ -1370,20 +1388,6 @@ export default {
|
|
left: -13px;
|
|
left: -13px;
|
|
}
|
|
}
|
|
|
|
|
|
- .menu-item {
|
|
|
|
- padding: 8px 0;
|
|
|
|
- font-size: 14px;
|
|
|
|
-
|
|
|
|
- .iconfont {
|
|
|
|
- font-size: 32px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- &:hover,
|
|
|
|
- &.active {
|
|
|
|
- color: #ed4014;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
.ivu-progress-show-info .ivu-progress-outer {
|
|
.ivu-progress-show-info .ivu-progress-outer {
|
|
padding-right: 40px !important;
|
|
padding-right: 40px !important;
|
|
margin-right: -40px !important;
|
|
margin-right: -40px !important;
|