From 0d91757d82f4cfd1586ab39cbe37f12d739ddc43 Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期一, 20 五月 2024 11:03:19 +0800
Subject: [PATCH] feat:完成接口联调
---
src/views/home/components/audioAnalysis/index.vue | 256 +++++++++++++++++++++++++++++++++++++--------------
1 files changed, 185 insertions(+), 71 deletions(-)
diff --git a/src/views/home/components/audioAnalysis/index.vue b/src/views/home/components/audioAnalysis/index.vue
index c980ae0..bcc5651 100644
--- a/src/views/home/components/audioAnalysis/index.vue
+++ b/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>
- 杞﹀彿锛歋S4B115<br/>
- 杞︽锛�8040<br>
- 鏃堕棿锛�2020-09-21 20:45:08<br/>
- 鍙告満锛欰20<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> </div>
+ <div> </div>
+ <div> </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);
+ }
+ }
}
}
}
--
Gitblit v1.8.0