From fefe4a3011fb472788abb2e7ffdbbc5a4f58623c Mon Sep 17 00:00:00 2001
From: charles <981744753@qq.com>
Date: 星期三, 05 六月 2024 14:10:16 +0800
Subject: [PATCH] feat:更新ui界面
---
src/views/home/components/audioAnalysis/index.vue | 300 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 290 insertions(+), 10 deletions(-)
diff --git a/src/views/home/components/audioAnalysis/index.vue b/src/views/home/components/audioAnalysis/index.vue
index 89571d1..89cb735 100644
--- a/src/views/home/components/audioAnalysis/index.vue
+++ b/src/views/home/components/audioAnalysis/index.vue
@@ -1,6 +1,242 @@
<template>
<div>
+ <el-card class="top-container">
<div class="search">
+ <el-form :inline="true" class="demo-form-inline">
+ <el-form-item label="">
+ <el-date-picker
+ v-model="searchDateTime"
+ type="daterange"
+ size="small"
+ align="right"
+ unlink-panels
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ :picker-options="pickerOptions">
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item label="">
+ <el-input v-model="whereTrain.keyword" size="small" placeholder="璇疯緭鍏ュ徃鏈猴紝杞︽锛岃溅鍙风瓑鍏抽敭瀛楄繘琛屾悳绱�" style="width: 340px;position: relative;top:5px">
+ <el-button slot="append" @click="searchCar" icon="el-icon-search" type="primary"></el-button>
+ </el-input>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div class="show-sel-tag">
+ <div>
+ <span style="font-size: 14px">宸茬瓫閫夋潯浠�:</span>
+ <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.label}}:</span> <span style="color: red">{{tag.value}}</span>
+ </el-tag>
+ </span>
+ <span v-else style="color: lightgray;font-size: 12px">杩樻湭閫夋嫨绛涢�夋潯浠�</span>
+ </div>
+ <div>
+ <el-button size="mini" @click="cancelSel">鍙栨秷閫夋嫨</el-button>
+ </div>
+ </div>
+ <div class="sel-filter-body1">
+ <div class="sel-filter">
+ <div class="item-car-no">
+ <div>
+ <img src="@/assets/locomotiveNumber.svg" style="vertical-align: middle;width: 26px">
+ <span class="title"> 鏈鸿溅鍙�:</span>
+ </div>
+ <div class="list">
+ <div class="default">
+ <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>
+ <el-button size="mini" @click="cancelManySel">鍙栨秷</el-button>
+ </div>
+ </div>
+ <div class="btn">
+ <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>
+ </div>
+ <div class="sel-filter">
+ <div class="item-car-no">
+ <div class="title">
+ <div>
+ <img src="@/assets/locomotiveNumber.svg" style="vertical-align: middle;width: 26px">
+ <span class="title"> 杞︽:</span>
+ </div>
+ </div>
+ <div class="list" style="border-top: none">
+ <div class="default">
+ <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" :disabled="carTimeList.length<=10" @click="carTimeBtn=!carTimeBtn">鏇村<i :class="carTimeBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="sel-filter">
+ <div class="item-car-no">
+ <div class="title">
+ <div>
+ <img src="@/assets/locomotiveNumber.svg" style="vertical-align: middle;width: 26px">
+ <span class="title"> 杞︾珯鍙�:</span>
+ </div>
+ </div>
+ <div class="list" style="border-top: none">
+ <div class="default">
+ <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" :disabled="carStateList.length<=10" @click="carStateBtn=!carStateBtn">鏇村<i :class="carStateBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+<!-- <div class="item-car-no">
+ <div class="title">杞︽:</div>
+ <div class="list" style="border-top: none">
+ <div class="default">
+ <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" :disabled="carTimeList.length<=10" @click="carTimeBtn=!carTimeBtn">鏇村<i :class="carTimeBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
+ </div>
+ </div>
+ </div>-->
+<!-- <div class="item-car-no">
+ <div class="title">杞︾珯鍙�:</div>
+ <div class="list" style="border-top: none">
+ <div class="default">
+ <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" :disabled="carStateList.length<=10" @click="carStateBtn=!carStateBtn">鏇村<i :class="carStateBtn?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
+ </div>
+ </div>
+
+ </div>-->
+
+ </div>
+ </el-card>
+ <el-card class="bottom-container">
+ <div class="audio-filter">
+ <div>
+ <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="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'}">
+ <img :src="`${publicPath}images/audio/u167.png`" width="13px"/>
+ </div>
+ <div @click="audioListType='menu'" :class="{'border-cla':audioListType==='menu'}">
+ <img :src="`${publicPath}images/audio/u168.png`" />
+ </div>
+ </div>
+ </div>
+ <div v-if="audioListType=='table'" class="audio-list-table">
+ <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>-->
+ </div>
+ <div class="body">
+ <div class="carNo">
+ <div class="carNo-body">
+ <div><span class="carNo-sty1">杞﹀彿:</span><span class="carNo-sty2">{{audio.locomotiveNumber}}</span></div>
+ <div><span class="carNo-sty1">杞︽:</span><span class="carNo-sty2">{{audio.trainNumber}}</span></div>
+ <div><span class="carNo-sty1">鏃堕棿:</span><span class="carNo-sty2">{{audio.occurrenceTime}}</span></div>
+ <div><span class="carNo-sty1">鍙告満:</span><span class="carNo-sty2">{{audio.driverNumber}}</span></div>
+ </div>
+<!-- <div>
+ 杞﹀彿锛歿{audio.locomotiveNumber}}<br/>
+ 杞︽锛歿{audio.trainNumber}}<br>
+ 鏃堕棿锛歿{audio.occurrenceTime}}<br/>
+ 鍙告満锛歿{audio.driverNumber}}<br>
+ </div>-->
+<!-- <div class="status">
+ <span>{{audio.score}}</span>
+ <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" :value="audio.IsFollowed===1?1:0" @change="isFollowChange(audio)"></el-rate>
+ </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="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">
+ <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>
+ <div class="audio-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>
+ <Analysis ref="analysis" :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis>
+ </el-card>
+<!-- <div class="search">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="">
<el-date-picker
@@ -22,6 +258,7 @@
</el-form-item>
</el-form>
</div>
+
<div class="show-sel-tag">
<div>
宸查�夋潯浠�:
@@ -36,6 +273,7 @@
<el-button size="mini" @click="cancelSel">鍙栨秷閫夋嫨</el-button>
</div>
</div>
+
<div class="sel-filter">
<div class="item-car-no">
<div class="title">杞﹀彿:</div>
@@ -51,7 +289,7 @@
</div>
<div class="btn">
<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>-->
+ <!–<el-button size="mini" @click="manySelect">澶氶��<i class="el-icon-plus"></i></el-button>–>
</div>
</div>
</div>
@@ -81,18 +319,19 @@
</div>
</div>
- <div class="audio-filter">
+ -->
+<!-- <div class="audio-filter">
<div>
<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="whereTrain.audioStatus">
+ <!– <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>-->
+ </el-select>–>
</div>
<div class="icon">
<div @click="audioListType='table'" :class="{'border-cla':audioListType==='table'}">
@@ -120,10 +359,10 @@
</div>
<div class="status">
<span>{{audio.score}}</span>
- <!--<span v-if="audio.audioStatus===0">涓婁紶涓�</span>
+ <!–<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>-->
+ <span v-else-if="audio.audioStatus===3">寮傚父</span>–>
</div>
</div>
<div style="text-align: right;margin-right: 10px;">
@@ -181,7 +420,7 @@
</el-pagination>
</div>
</div>
- <Analysis ref="analysis" :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis>
+ <Analysis ref="analysis" :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis>-->
</div>
</template>
@@ -306,12 +545,14 @@
}else{
this.tagList.splice(searchIndex,1,obj);
}
+ this.searchCar();
},
async processAudio(audio){
const {code,data} =await audioInfoApi(audio.ID);
if(code===200){
this.$refs.analysis.audio[0].title=data.name;
this.$refs.analysis.audio[0].artist=data.driverNumber;
+ this.$refs.analysis.audio[0].url=`http://smartai.com:7013/api-sa/v1/audio/download?id=${audio.ID}`;
this.modalAudio=true;
this.lookAudio={...data};
}else{
@@ -380,15 +621,50 @@
},
cancelSel(){
this.tagList=[];
+ this.searchCar();
},
closeTag(index){
this.tagList.splice(index,1);
+ this.searchCar();
}
}
}
</script>
<style scoped lang="scss">
+.top-container {
+ margin: 20px;
+ min-height: 30vh
+}
+.search{
+ ::v-deep .el-input-group__append button.el-button {
+ background-color: #2d52d7;
+ height: 34px;
+ }
+}
+.bottom-container{
+ margin: 20px;
+ min-height: 40vh;
+}
+.carNo-body{
+ margin-top: 10px;
+}
+.carNo-body div{
+ margin-top: 3px;
+}
+.carNo-sty1{
+ color:#95a0b9;
+}
+.carNo-sty2{
+ color: #425277;
+ font-weight: bold;
+ padding-left: 6px;
+}
+
+
+
+ /* */
+
.show-sel-tag{
display: flex;
justify-content: space-between;
@@ -397,20 +673,24 @@
}
}
.sel-filter{
+ border-bottom: 1px solid lightgray;
+ padding-bottom: 10px;
margin-top: 20px;
.item-car-no{
display: flex;
justify-content: space-between;
line-height: 40px;
.title{
- padding-left: 20px;
+ //padding-left: 5px;
width: 10%;
- background-color: lightgray;
+ color: #2d52d7;
+ font-weight: bold;
+ //background-color: lightgray;
}
.list{
display: flex;
width: 90%;
- border:1px solid lightgray ;
+ //border:1px solid lightgray ;
.default{
width: 80%;
display: flex;
--
Gitblit v1.8.0