feat:完成接口联调

charles

2024-05-20 0d91757d82f4cfd1586ab39cbe37f12d739ddc43

feat:完成接口联调

 .env.development

@@ -2,7 +2,7 @@
NODE_ENV=development

## 2.基础路径 代理服务器拦截的路径
VUE_APP_BASE_API=/api-dev
VUE_APP_BASE_API=/api-sa

## 3.目标服务器地址
VUE_APP_BASE_URL=http://localhost:3001
VUE_APP_BASE_URL=http://smartai.com:7013/

 package.json

@@ -15,6 +15,7 @@
    "core-js": "^3.8.3",
    "element-ui": "^2.4.5",
    "hls.js": "^1.5.8",
    "moment": "^2.30.1",
    "vue": "^2.6.14",
    "vue-aplayer": "^1.6.1",
    "vue-router": "^3.5.1",

 src/api/index.js

@@ -1 +1,4 @@
export default {};
export * from './modules/text';
export * from './modules/audio';
export * from './modules/train';


 src/api/modules/audio.js

New file
@@ -0,0 +1,53 @@
import {request} from '@/utils'
//1.批量删除音频
export function batchDeleteAudioApi(ids) {
    return request({
        url:'/api-sa/v1/audio/batchDelete',
        method:'DELETE',
        data:{ids}
    });
}
//2. 批量处理音频
export function batchProcessAudioApi(ids){
    return request({
        url:'/api-sa/v1/audio/batchProcess',
        method:'POST',
        data:{ids}
    })
}
//3.删除音频 /api-sa/v1/audio/delete
export function deleteAudioApi(id) {
    return request({
        url:'/api-sa/v1/audio/delete',
        method:'DELETE',
        params:{id}
    })
}

//4. 关注，取消 /api-sa/v1/audio/follow
export function followAudioApi(id) {
    return request({
        url:'/api-sa/v1/audio/follow',
        method:'POST',
        data:{id}
    })
}
//5. 音频分析列表
export function audioListApi(params) {
    return request({
        url:'/api-sa/v1/audio/list',
        method:'GET',
        params
    })
}
//6.处理音频
export function processAudioApi(id) {
    return request({
        url:'/api-sa/v1/audio/process',
        method:'POST',
        data:{id}
    })
}




 src/api/modules/text.js

New file
@@ -0,0 +1,19 @@
import {request} from '@/utils'

//1.获取文字列表
export function getTextListApi(params) {
    return request({
        url:'/api-sa/v1/text/list',
        method:'GET',
        params
    });
}
//2.新增文字
export function addTextApi(data) {
    return request({
        url:'/api-sa/v1/text/add',
        method:'POST',
        data
    })
}


 src/api/modules/train.js

New file
@@ -0,0 +1,9 @@
import {request} from '@/utils'
//1. 获得火车列表信息
export function trainListApi(params) {
    return request({
        url:'/api-sa/v1/audio/trainInfoList',
        method:'GET',
        params
    });
}

 src/main.js

@@ -3,8 +3,9 @@
import router from './router'
import store from './store'
import './plugins/element.js'
import * as moment from 'moment';
Vue.config.productionTip = false;
console.log(process.env)
Vue.prototype.$moment=moment;
new Vue({
  router,
  store,

 src/router/index.js

@@ -1,8 +1,6 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../views/home/index.vue";
import AudioAnalysis from "../views/home/components/audioAnalysis/index.vue";
import TextManager from "../views/home/components/textManager/index.vue";
Vue.use(VueRouter);
const routes = [
    {
@@ -15,12 +13,16 @@
        children:[
            {
                path:"audioAnalysis",
                component:AudioAnalysis
                component:()=>import('@/views/home/components/audioAnalysis/index.vue')
            },
            {
                path:"textManager",
                component:TextManager
            }
                component:()=>import('@/views/home/components/textManager/index.vue')
            },
            {
                path:"uploadAudio",
                component:()=>import('@/views/home/components/uploadAudio/index.vue')
            },
        ]
    }
];

 src/utils/modules/axiosUtil.js

@@ -3,8 +3,8 @@
import router from "../../router";
//1.设置基础路径(能够统一管理接口的服务器地址) 配置接口的服务器地址
//http://localhost:3001:服务器地址（开发环境，测试环境，生产环境）
export const BASE_URL="http://localhost:3001";
axios.defaults.baseURL=process.env.VUE_APP_BASE_API;
//export const BASE_URL="http://localhost:3001";
//axios.defaults.baseURL=process.env.VUE_APP_BASE_API;
//2.统一拦截请求 往请求头中设置token(后端需要根据请求头中的token，进行身份验证之后才可以去访问接口)
//request 请求对象(用来给后端传递数据的)
axios.interceptors.request.use(request=>{
@@ -29,7 +29,6 @@
    }
    return data;//就是后端响应的数据
});

export const request=axios;



 src/views/home/components/audioAnalysis/components/Analysis.vue

@@ -13,7 +13,6 @@
                    <a-player
                            :music="audio[0]"
                            :list="audio"
                            autoplay
                    />
                </el-card>
            </div>
@@ -22,24 +21,33 @@
                    <el-card height="420px">
                        <h3>语音识别</h3>
                        <div class="status">
                            <span>异常</span>
                            <span v-if="lookAudio.audioStatus===0">上传中</span>
                            <span v-else-if="lookAudio.audioStatus===1" style="color: green">正常</span>
                            <span v-else-if="lookAudio.audioStatus===2">处理中</span>
                            <span v-else-if="lookAudio.audioStatus===3">异常</span>
                        </div>
                        <div class="title">
                        <!--<div class="title">
                            <div>时间</div>
                            <div>语音</div>
                        </div>
                        </div>-->
                        <div class="timeline-container">
                            <el-timeline style="margin-top: 20px">
                                <el-timeline-item v-for="i in 10"   placement="top">
                                    <div class="time-line">
                                        <div class="time">
                                            <div>2018/4/12 20:46</div>
                                            <div>2018/4/12 20:46</div>
                                        </div>
                                        <div class="description">车辆启动了</div>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                            <div v-if="lookAudio.audioText==''">
                                <el-empty description="暂无数据"></el-empty>
                            </div>
                            <div v-else>
                                {{lookAudio.audioText}}
                            </div>
                            <!--<el-timeline style="margin-top: 20px">-->
                                <!--<el-timeline-item v-for="i in 10"   placement="top">-->
                                    <!--<div class="time-line">-->
                                        <!--<div class="time">-->
                                            <!--<div>2018/4/12 20:46</div>-->
                                            <!--<div>2018/4/12 20:46</div>-->
                                        <!--</div>-->
                                        <!--<div class="description">车辆启动了</div>-->
                                    <!--</div>-->
                                <!--</el-timeline-item>-->
                            <!--</el-timeline>-->
                        </div>
                    </el-card>
                </div>
@@ -47,10 +55,10 @@
                    <el-card style="height: 420px">
                        <h3>音频详情</h3>
                        <div>
                            车号：SS4B115<br/>
                            车次：8040<br>
                            时间：2020-09-21 20:45:08<br/>
                            司机：A20<br>
                            车号：{{lookAudio.locomotiveNumber}}<br/>
                            车次：{{lookAudio.trainNumber}}<br>
                            时间：{{lookAudio.occurrenceTime}}<br/>
                            司机：{{lookAudio.driverNumber}}<br>
                        </div>
                    </el-card>
                </div>
@@ -68,7 +76,11 @@
            APlayer
        },
        props:{
            modalAudio:{type:Boolean,default:false}
            modalAudio:{type:Boolean,default:false},
            lookAudio:{
                type:Object,
                default:()=>({})
            }
        },
        data(){
            return {

 src/views/home/components/audioAnalysis/index.vue

@@ -3,11 +3,11 @@
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="">
                    <el-input v-model="whereCar.keyword" size="small" placeholder="请输入司机，车次，车号等关键字进行搜索" style="width: 300px"></el-input>
                    <el-input v-model="whereTrain.keyword" size="small" placeholder="请输入司机，车次，车号等关键字进行搜索" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-date-picker
                            v-model="whereCar.date"
                            v-model="searchDateTime"
                            type="daterange"
                            size="small"
                            align="right"
@@ -28,7 +28,7 @@
                已选条件:
                <span v-if="tagList.length>0">
                    <el-tag  class="tag-cla" effect="plain" closable v-for="(tag,index) in tagList" @close="closeTag(index)">
                        <span>{{tag.filterType}}:</span> <span style="color: red">{{tag.value}}</span>
                        <span>{{tag.label}}:</span> <span style="color: red">{{tag.value}}</span>
                    </el-tag>
                </span>
                <span v-else style="color: lightgray;font-size: 12px">还未选择筛选条件</span>
@@ -42,8 +42,8 @@
                <div class="title">车号:</div>
                <div class="list">
                    <div class="default">
                        <div v-for="(carNo,index) in carNoList" v-if="index<=(carNoBtn.moreStatus?carNoList.length-1:9)">
                            <el-checkbox v-show="carNoBtn.manySel" checked/>{{carNo}}
                        <div  @click="selTrain(carNo)" v-for="(carNo,index) in carNoList" v-if="index<=(carNoBtn.moreStatus?carNoList.length-1:9)">
                            <el-checkbox v-show="carNoBtn.manySel" checked/>{{carNo.name}}
                        </div>
                        <div style="width: 100%;text-align: center" v-show="carNoBtn.manySel">
                            <el-button type="primary" size="mini">确定</el-button>
@@ -51,8 +51,8 @@
                        </div>
                    </div>
                    <div class="btn">
                        <el-button size="mini" @click="carNoBtn.moreStatus=!carNoBtn.moreStatus">更多<i :class="carNoBtn.moreStatus?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                        <el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>
                        <el-button size="mini" :disabled="carNoList.length<=10" @click="carNoBtn.moreStatus=!carNoBtn.moreStatus">更多<i :class="carNoBtn.moreStatus?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                        <!--<el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>-->
                    </div>
                </div>
            </div>
@@ -60,12 +60,12 @@
                <div class="title">车次:</div>
                <div class="list" style="border-top: none">
                    <div class="default">
                        <div v-for="(carTime,index) in carTimeList" v-if="index<=(carTimeBtn?carTimeList.length-1:9)">
                            {{carTime}}
                        <div @click="selTrain(carTime)"  v-for="(carTime,index) in carTimeList" v-if="index<=(carTimeBtn?carTimeList.length-1:9)">
                            {{carTime.name}}
                        </div>
                    </div>
                    <div class="btn">
                        <el-button size="mini" @click="carTimeBtn=!carTimeBtn">更多<i :class="carTimeBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                        <el-button size="mini" :disabled="carTimeList.length<=10" @click="carTimeBtn=!carTimeBtn">更多<i :class="carTimeBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                    </div>
                </div>
            </div>
@@ -73,10 +73,10 @@
                <div class="title">车站号:</div>
                <div class="list" style="border-top: none">
                    <div class="default">
                        <div v-for="(carState,index) in carStateList" v-if="index<=(carStateBtn?carStateList.length-1:9)">{{carState}}</div>
                        <div @click="selTrain(carState)" v-for="(carState,index) in carStateList" v-if="index<=(carStateBtn?carStateList.length-1:9)">{{carState.name}}</div>
                    </div>
                    <div class="btn">
                        <el-button size="mini" @click="carStateBtn=!carStateBtn">更多<i :class="carStateBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                        <el-button size="mini" :disabled="carStateList.length<=10" @click="carStateBtn=!carStateBtn">更多<i :class="carStateBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
                    </div>
                </div>

@@ -84,16 +84,16 @@
        </div>
        <div class="audio-filter">
            <div>
                <el-select size="mini" v-model="whereAudio.isState">
                    <el-option value="0" label="未关注"></el-option>
                    <el-option value="1" label="已关注"></el-option>
                    <el-option value="2" label="全部"></el-option>
                <el-select size="mini" v-model="whereTrain.isFollowed">
                    <el-option :value="0" label="全部"></el-option>
                    <el-option :value="1" label="已关注"></el-option>
                    <el-option :value="2" label="未关注"></el-option>
                </el-select>
                <el-select size="mini" style="margin-left: 10px" v-model="whereAudio.status">
                    <el-option value="0" label="正常"></el-option>
                    <el-option value="1" label="异常"></el-option>
                    <el-option value="2" label="全部"></el-option>
                </el-select>
               <!-- <el-select size="mini" style="margin-left: 10px" v-model="whereTrain.audioStatus">
                    <el-option :value="0" label="全部"></el-option>
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="4" label="异常"></el-option>
                </el-select>-->
            </div>
            <div class="icon">
                <div @click="audioListType='table'" :class="{'border-cla':audioListType==='table'}">
@@ -105,8 +105,8 @@
            </div>
        </div>
        <div v-if="audioListType=='table'" class="audio-list-table">
            <div class="item"   v-for="i in 8">
                <div class="head" @click="modalAudio=true">
            <div class="item"   v-for="audio in pageInfo.audioList" :key="audio.ID">
                <div class="head" @click="processAudio(audio)">
                    <img :src="`${publicPath}images/audio/u230.png`"/>
                    <img :src="`${publicPath}images/audio/u231.png`" class="player"/>
                    <div class="time">06:20</div>
@@ -114,33 +114,56 @@
                <div class="body">
                    <div class="carNo">
                        <div>
                            车号：SS4B115<br/>
                            车次：8040<br>
                            时间：2020-09-21 20:45:08<br/>
                            司机：A20<br>
                            车号：{{audio.locomotiveNumber}}<br/>
                            车次：{{audio.trainNumber}}<br>
                            时间：{{audio.occurrenceTime}}<br/>
                            司机：{{audio.driverNumber}}<br>
                        </div>
                        <div class="status">异常</div>
                        <div class="status">
                            <span v-if="audio.audioStatus===0">上传中</span>
                            <span v-else-if="audio.audioStatus===1" style="color: green">正常</span>
                            <span v-else-if="audio.audioStatus===2">处理中</span>
                            <span v-else-if="audio.audioStatus===3">异常</span>
                        </div>
                    </div>
                    <div style="text-align: right;margin-right: 10px">
                        <el-rate :max="1"></el-rate>
                    <div style="text-align: right;margin-right: 10px;">
                        <el-rate :max="1" :value="audio.IsFollowed===1?1:0" @change="isFollowChange(audio)"></el-rate>
                    </div>
                    <div class="tag">
                        <div>火车到站</div>
                        <div>火车启动</div>
                        <div>火车鸣笛</div>
                    <div class="tag" v-if="Array.isArray(audio.words)">
                        <div v-for="item in audio.words">{{item}}</div>
                    </div>
                    <div class="tag-no" v-else>
                        <div>&nbsp;</div>
                        <div>&nbsp;</div>
                        <div>&nbsp;</div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="audio-list-menu">
            <el-table :data="audioList">
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <el-table-column prop="size" label="大小" align="center"></el-table-column>
                <el-table-column prop="tag" label="标签" align="center"></el-table-column>
                <el-table-column prop="editDate" label="修改时间" align="center"></el-table-column>
                <el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
            <el-table :data="pageInfo.audioList">
                <el-table-column prop="name" label="名称" align="center" min-width="220px"></el-table-column>
                <el-table-column prop="size" label="大小" align="center" width="100px"></el-table-column>
                <el-table-column prop="tag" label="标签" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.words">{{scope.row.words.join(',')}}</span>
                        <span v-else>暂无标签</span>
                    </template>
                </el-table-column>
                <el-table-column prop="UpdatedAt" label="修改时间" align="center">
                    <template slot-scope="scope">
                        {{$moment(scope.row.UpdateAt).format('YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column prop="CreatedAt" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{$moment(scope.row.CreateAt).format('YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column  label="操作" align="center">
                    <el-rate max="1"></el-rate>
                    <template slot-scope="scope">
                        <el-rate :max="1" :value="scope.row.IsFollowed===1?1:0" @change="isFollowChange(scope.row)"></el-rate>
                    </template>
                </el-table-column>
            </el-table>
        </div>
@@ -158,12 +181,13 @@
                </el-pagination>
            </div>
        </div>
        <Analysis :modal-audio.sync="modalAudio"></Analysis>
        <Analysis :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis>
    </div>
</template>

<script>
    import Analysis from './components/Analysis.vue';
    import {audioListApi,trainListApi,followAudioApi,processAudioApi} from '@/api';
    export default {
        name: "audioAnalysis",
        components:{
@@ -171,17 +195,15 @@
        },
        data(){
            return {
                lookAudio:{},
                publicPath: process.env.BASE_URL,
                modalAudio:false,
                pageInfo:{
                    total:100,
                    textList:[]
                    audioList:[]
                },
                pageData:{page:1,pageSize:10},
                whereAudio:{
                  status:'2',
                  isState:'2'
                },
                trainPageData:{page:1,pageSize:500},
                audioListType:'table',
                carNoBtn:{
                  moreStatus:false,
@@ -189,15 +211,13 @@
                },
                carTimeBtn:false,
                carStateBtn:false,
                whereCar:{
                whereTrain:{
                    keyword:'',
                    date:''
                   // audioStatus:'',
                    isFollowed:0
                },
                tagList:[
                    {filterType:'车次',value:'全部'},
                    {filterType:'车号',value:'全部'},
                    {filterType:'车站号',value:'全部'}
                ],
                searchDateTime:[],
                tagList:[],
                pickerOptions: {
                    shortcuts: [
                        {
@@ -226,18 +246,9 @@
                        }
                    }]
                },
                carNoList:['全部','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24'],
                carTimeList:['全部','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24'],
                carStateList:['全部','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24','K24'],
                audioList:[
                    {name: '王小虎1', size:'100MB', tag:'火车出站', createDate: '2016-05-02', editDate:'2016-05-02'},
                    {name: '王小虎2', size:'100MB', tag:'火车出站', createDate: '2016-05-02', editDate:'2016-05-02'},
                    {name: '王小虎3', size:'100MB', tag:'火车出站', createDate: '2016-05-02', editDate:'2016-05-02'},
                    {name: '王小虎4', size:'100MB', tag:'火车出站', createDate: '2016-05-02', editDate:'2016-05-02'},
                    {name: '王小虎5', size:'100MB', tag:'火车出站', createDate: '2016-05-02', editDate:'2016-05-02'},
                    {name: '王小虎6', size:'100MB', tag:'火车出站', createDate: '2016-05-02', editDate:'2016-05-02'},
                    {name: '王小虎7', size:'100MB', tag:'火车出站', createDate: '2016-05-02', editDate:'2016-05-02'}
                ]
                carNoList:[],
                carTimeList:[],
                carStateList:[],
            }
        },
        computed:{
@@ -245,7 +256,63 @@
                return Math.ceil(this.pageInfo.total/this.pageData.pageSize)
            }
        },
        watch:{
          pageData:{
              handler(){
                  this.searchCar();
              },
              deep:true,
              immediate:true
          }
        },
        mounted(){
            this.trainList();
        },
        methods:{
            isFollowChange(item){
                this.$confirm(`${item.IsFollowed===1?'确定取消关注吗?':'确定关注吗?'}`, `${item.IsFollowed===1?'是否取消关注?':'是否关注?'}`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: `${item.IsFollowed===1?'warning':'info'}`
                }).then(async () => {
                    const {code,data}=await followAudioApi(item.ID);
                    if(code===200){
                        if(item.IsFollowed===1){
                            this.$message.success('取消关注成功');
                        }else{
                            this.$message.success('关注成功');
                        }
                        this.searchCar();
                    }
                }).catch(()=>{});
            },
            selTrain(car){
                let searchIndex=-1;
                this.tagList.forEach((item,index)=>{
                   if((car.class===1&&item.label==='机车')||(car.class===2&&item.label==='车次')||(car.class===3&&item.label==='车站号')){
                       searchIndex=index;
                   }
                });
                const obj ={value:car.name}
                if(car.class===1){//机车号
                    obj.label='机车'
                }else if(car.class===2){//车次
                   obj.label='车次'
                }else if(car.class===3){//车站号
                    obj.label='车站号'
                }
                if(searchIndex==-1){
                    this.tagList.push(obj);
                }else{
                    this.tagList.splice(searchIndex,1,obj);
                }
            },
            async processAudio(audio){
                this.modalAudio=true;
                this.lookAudio={...audio};
                //const res=await processAudioApi(audio.ID);
                //console.log(res);
            },
            handleSizeChange(pageSize){
                this.pageData.pageSize=pageSize;
            },
@@ -256,8 +323,51 @@
              this.carNoBtn.manySel=true;
              this.carNoBtn.moreStatus=true;
            },
            searchCar(){

            async searchCar(){
                const params={...this.pageData,keyword:this.whereTrain.keyword}
                if(this.whereTrain.isFollowed){
                    params.isFollowed=this.whereTrain.isFollowed;
                }
                if(Array.isArray(this.searchDateTime)&&this.searchDateTime.length>1){
                    params.beginTime=this.$moment(this.searchDateTime[0]).format('YYYY-MM-DDTHH:mm:ss.ms+08:00');
                    params.endTime=this.$moment(this.searchDateTime[1]).format('YYYY-MM-DDTHH:mm:ss.ms+08:00');
                }
                // if(this.whereTrain.audioStatus){
                //     params.audioStatus=this.whereTrain.audioStatus;
                // }
                this.tagList.forEach(item=>{
                    if(item.label==='机车'){
                        params.locomotiveNumber=item.value;
                    }else if(item.label==='车次'){
                        params.trainNumber =item .value;
                    }else if(item.label === '车站号'){
                        params.stationNumber=item.value;
                    }
                })
                const {code,data,total}=await audioListApi(params)
                if(code===200){
                    this.pageInfo.audioList=data;
                    this.pageInfo.total=total;
                }
            },
            async trainList(){
              const {code,data} =await trainListApi({...this.trainPageData});
              if(code===200){
                  this.carNoList=[];
                  this.carTimeList=[];
                  this.carStateList=[];
                  if(Array.isArray(data)){
                      data.forEach(item=>{
                          if(item.class===1){//机车号
                              this.carNoList.push(item);
                          }else if(item.class===2){//车次
                              this.carTimeList.push(item);
                          }else if(item.class===3){//机车站
                              this.carStateList.push(item)
                          }
                      });
                  }
              }
            },
            cancelManySel(){
              this.carNoBtn.manySel=false;
@@ -389,19 +499,23 @@
                        color: red;
                    }
                }
                .tag{
                .tag,.tag-no{
                    display: flex;
                    justify-content: start;
                    margin-bottom: 30px;
                    margin-bottom: 20px;
                    div{
                        width: 70px;
                        font-size: 12px;
                        background-color: rgba(242, 242, 242, 1);
                        margin-left: 10px;
                        text-align: center;
                        color: gray;
                    }
                }
                .tag{
                    div{
                        background-color: rgba(242, 242, 242, 1);
                    }
                }
            }
        }
    }

 src/views/home/components/leftNav.vue

@@ -9,6 +9,7 @@
      <span v-show="!isCollapse" style="display:inline-block;width:180px;padding-left: 6px">语音智能分析应用</span>
    </h1>
    <div class="menu-btn" v-show="!isCollapse">
      <div :class="{item:true,'is-active':$route.path==='/home/uploadAudio'}"  @click="$router.push('/home/uploadAudio',()=>{})">音频上传</div>
      <div :class="{item:true,'is-active':$route.path==='/home/audioAnalysis'}"  @click="$router.push('/home/audioAnalysis',()=>{})">音频分析检索</div>
      <div :class="{item:true,'is-active':$route.path==='/home/textManager'}" @click="$router.push('/home/textManager',()=>{})">文字库管理</div>
    </div>

 src/views/home/components/textManager/index.vue

@@ -10,11 +10,11 @@
                :destroy-on-close="true"
                >
            <el-form  ref="textForm" class="demo-form-inline" label-width="120px" :model="textObj" :rules="textRules">
                <el-form-item label="文字内容：" prop="textContent">
                    <el-input v-model="textObj.textContent" placeholder="请输入文字内容"/>
                <el-form-item label="文字内容：" prop="content">
                    <el-input v-model="textObj.content" placeholder="请输入文字内容"/>
                </el-form-item>
                <el-form-item label="车号：">
                    <el-input v-model="textObj.carNo" placeholder="请输入车号"/>
                    <el-input v-model="textObj.locomotiveNumber" placeholder="请输入车号"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
@@ -41,10 +41,14 @@
        </div>
        <div>
            <el-table :data="pageInfo.textList" >
                <el-table-column prop="id" label="序号" align="center" />
                <el-table-column prop="textContent" label="文字内容" align="center" />
                <el-table-column prop="cid" label="车号" align="center" />
                <el-table-column prop="date" label="添加时间" align="center"  />
                <el-table-column prop="ID" label="序号" align="center" />
                <el-table-column prop="content" label="文字内容" align="center" />
                <el-table-column prop="locomotiveNumber" label="车号" align="center" />
                <el-table-column prop="CreatedAt" label="添加时间" align="center" >
                    <template slot-scope="scope">
                        {{$moment(scope.row.CreatedAt).format('YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <div class="total">共计{{pageInfo.total}}条记录 第{{pageData.page}}/{{lastPage}}页</div>
@@ -65,18 +69,19 @@
</template>

<script>
    import { getTextListApi,addTextApi} from '@/api';
    export default {
        name: "textManager",
        data(){
            return{
                textRules:{
                    textContent: [
                    content: [
                        { required: true, message: '内容不能为空', trigger: 'blur' },
                    ],
                },
                addModal:false,
                keyword:'',
                textObj:{textContent:'',carNo:''},
                textObj:{content:'',locomotiveNumber:''},
                pageInfo:{
                  total:100,
                  textList:[]
@@ -89,21 +94,22 @@
              return Math.ceil(this.pageInfo.total/this.pageData.pageSize)
          }
        },
        watch:{
          pageData:{
              handler(){
                  this.searchCar();
              },
              deep:true,
              immediate:true
          }
        },
        methods:{
            searchCar(){
                //搜索
                this.pageInfo.textList=[
                    {id:1, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:2, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:3, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:4, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:5, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:6, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:7, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:8, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:9, textContent: '火车启动', cid: 'k12', date: '2016-05-02'},
                    {id:10, textContent: '火车启动', cid: 'k12', date: '2016-05-02'}
                ];
            async searchCar(){
                const {code,data,total}=await getTextListApi({keyword:this.keyword,...this.pageData});
                if(code===200){
                    this.pageInfo.textList=data;
                    this.pageInfo.total=total;
                }
            },
            handleSizeChange(pageSize){
                this.pageData.pageSize=pageSize;
@@ -111,16 +117,25 @@
            handleCurrentChange(page){
                this.pageData.page=page;
            },
            resetFormData(){
              this.addModal=false;
              this.textObj={content:'',locomotiveNumber:''}
            },
            addText(){
                this.$refs.textForm.validate((valid) => {
                    if(valid){

                        addTextApi(this.textObj).then(({code})=>{
                            if(code===200){
                                this.$message.success('添加成功');
                                this.resetFormData();
                                this.searchCar();
                            }else{
                                this.$message.warning('添加失败')
                            }
                        });
                    }
                })
            }
        },
        mounted(){
            this.searchCar();
        }
    }
</script>

 src/views/home/components/uploadAudio/index.vue

New file
@@ -0,0 +1,264 @@
<template>
    <div class="upload-audio-container">
        <div class="left">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="">
                    <el-input v-model.lazy="keyword" placeholder="请输入搜索内容" suffix-icon="el-icon-search" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="manyAnalysisAudio" icon="el-icon-video-play"  plain size="mini">批量分析</el-button>
                    <el-button type="danger" @click="deleteManyAudio" icon="el-icon-delete" plain size="mini">批量删除</el-button>
                    <el-upload
                            style="display: inline-block;margin-left: 10px"
                            action="/api-sa/v1/audio/upload"
                            :on-change="selFile"
                            accept=".mp3,.wav"
                            :show-file-list="false"
                            :on-success="upSuccess"
                            >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>
        <div class="right">
            <el-tabs v-model="activeName">
                <el-tab-pane label="已上传" name="first">
                    <div>
                        <el-table :data="pageInfo.audioList" border @selection-change="selAudio">
                            <el-table-column label='全选' type="selection"  align="center" />
                            <el-table-column prop="name" label="文件名" min-width="200px" align="center" />
                            <el-table-column prop="size" label="大小" align="center" />
                            <el-table-column prop="occurrenceTime" label="上传时间" align="center" />
                            <el-table-column prop="audioStatus" label="处理状态" align="center" >
                                <template slot-scope="scope">
                                    <span v-if="scope.row.audioStatus===0" style="color:wheat">上传中</span>
                                    <span v-else-if="scope.row.audioStatus===1" style="color: blue">上传成功</span>
                                    <span v-else-if="scope.row.audioStatus===2" style="color: cyan">处理中</span>
                                    <span v-else-if="scope.row.audioStatus===3" style="color: green">处理完成</span>
                                    <span v-else-if="scope.row.audioStatus===4" style="color: red">处理失败</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" >
                                <template slot-scope="scope">
                                    <el-button icon="el-icon-video-play" @click="analysisAudio(scope.row.ID)" type="text"></el-button>
                                    <el-button icon="el-icon-delete" type="text" @click="deleteAudio(scope.row.ID)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <div class="total">共计{{pageInfo.total}}条记录 第{{pageData.page}}/{{lastPage}}页</div>
                            <div class="page">
                                <el-pagination
                                        background
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page.sync="pageData.page"
                                        :page-size="pageData.pageSize"
                                        layout="prev, pager, next,sizes, jumper"
                                        :total="pageInfo.total">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="正在上传" name="second">
                   <!-- <el-skeleton style="width: 100%" :loading="isUpload" animated>
                        <template slot="template">
                            <div style="padding: 14px;">
                                <el-skeleton-item variant="h3" style="width: 100%;height: 40px" />
                            </div>
                        </template>
                    </el-skeleton>-->
                    <div>
                        <el-skeleton  animated :loading="isUpload">
                            <template slot="template">
                                <div style="padding: 14px;">
                                    <el-skeleton-item  style="width: 100%;height: 40px" />
                                </div>
                            </template>
                        </el-skeleton>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import {audioListApi,processAudioApi,deleteAudioApi,batchProcessAudioApi,batchDeleteAudioApi} from '@/api';
    export default {
        name: "index",
        data(){
            return {
                isUpload:false,
                activeName:'first',
                keyword:'',
                pageInfo:{
                    audioList:[],
                    total:0
                },
                pageData:{page:1,pageSize:10},
                ids:[]
            }
        },
        watch:{
          pageData:{
              handler(){
                  this.queryAudioList();
              },
              deep:true,
              immediate:true
          },
          keyword:{
              handler(){
                  this.queryAudioList();
              }
          },
        },
        computed:{
            lastPage(){
                return Math.ceil(this.pageInfo.total/this.pageData.pageSize)
            }
        },
        methods:{
            upSuccess({code}){
               if(code===200){
                   this.$message.success('上传成功');
                   this.queryAudioList();
               }else{
                   this.$message.warning('上传失败');
               }
               this.$nextTick(()=>{
                   this.isUpload=false;
               });
            },
            selFile(file,fileList){
                this.activeName='second';
                this.isUpload=true;
            },
            selAudio(rows){
                this.ids=rows.map(item=>item.ID);
            },
            handleSizeChange(pageSize){
                this.pageData.pageSize=pageSize;
            },
            handleCurrentChange(page){
                this.pageData.page=page;
            },
            async queryAudioList(){
                // status  0 未配置规则   1 处理中  2 处理完成
                const {code,data,total}=await audioListApi({...this.pageData,keyword:this.keyword});
                if(code===200){
                    this.pageInfo.audioList=data;
                    this.pageInfo.total=total;
                }
                /*this.pageInfo.audioList=[
                    {filename:'0_20240519_xx_01.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:0},
                    {filename:'0_20240519_xx_02.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:1},
                    {filename:'0_20240519_xx_03.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:0},
                    {filename:'0_20240519_xx_04.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:1},
                    {filename:'0_20240519_xx_05.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:2},
                    {filename:'0_20240519_xx_06.mp3',size:'879.88k',uploadAt:'2024-05-10 10:10:10',status:2},
                ]*/
            },
            analysisAudio(id){
                this.$confirm('是否进行音频分析, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(async() => {
                    const {code}=await processAudioApi(id);
                    if(code===200){
                        this.$message.success('音频分析完成');
                        this.queryAudioList();
                    }else{
                        this.$message.success('音频分析失败');
                    }
                }).catch(() =>{});
            },
            deleteAudio(id){
                this.$confirm('是否删除音频, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(async() => {
                    const {code}=await deleteAudioApi(id);
                    if(code===200){
                        this.$message.success('音频删除成功');
                        this.queryAudioList();
                    }else{
                        this.$message.success('音频删除失败');
                    }
                }).catch(() =>{});
            },
            manyAnalysisAudio(){
                if(this.ids.length>0){
                    this.$confirm('是否进行批量分析, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'success'
                    }).then(async() => {
                        const {code}=await batchProcessAudioApi(this.ids);
                        if(code===200){
                            this.$message.success('批量分析成功');
                            this.queryAudioList();
                        }else{
                            this.$message.success('批量分析失败');
                        }
                    }).catch(() =>{});
                }else{
                    this.$message.warning('请先选择您要分析的音频!')
                }
            },
            deleteManyAudio(){
                if(this.ids.length>0){
                    this.$confirm('是否进行批量删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async() => {
                        const {code}=await batchDeleteAudioApi(this.ids);
                        if(code===200){
                            this.$message.success('批量删除成功');
                            this.queryAudioList();
                        }else{
                            this.$message.success('批量删除失败');
                        }
                    }).catch(() =>{});
                }else{
                    this.$message.warning('请先选择您要删除的音频!')
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .upload-audio-container{
        .left{
            position: relative;
            z-index: 100;
            width: 80%;
            text-align: right;
            margin-left: 20%;
        }
        .right{
            position: relative;
            top:-60px;
        }
        .pagination{
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            .total{
                color: gray;
            }
        }
    }
    ::v-deep{
        .el-tabs__nav-wrap::after{
            display: none;
        }
    }
</style>

 vue.config.js

@@ -1,6 +1,14 @@
const { defineConfig } = require('@vue/cli-service');
const buildConfig ={outputDir:"dist", publicPath:"./", assetsDir:"static"};
const path=require("path");
const config={
    configureWebpack:{
        resolve: {
            alias: {
                '@': path.join(__dirname,'./src')
            }
        }
    },
    transpileDependencies: true,
    devServer:{
        host:"localhost",
@@ -17,9 +25,9 @@
            [process.env.VUE_APP_BASE_API]:{
                target: process.env.VUE_APP_BASE_URL,
                changeOrigin: true,
                pathRewrite: {
                    ['^'+process.env.VUE_APP_BASE_API]: ''
                }
                // pathRewrite: {
                //     ['^'+process.env.VUE_APP_BASE_API]: ''
                // }
            }
        }
    }