<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
|
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 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">
|
<div class="item-car-no">
|
<div class="title">车号:</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 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>
|
-->
|
<!-- <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>
|
车号：{{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>-->
|
</div>
|
</template>
|
|
<script>
|
import Analysis from './components/Analysis.vue';
|
import {audioListApi,trainListApi,followAudioApi,processAudioApi,audioInfoApi} from '@/api';
|
export default {
|
name: "audioAnalysis",
|
components:{
|
Analysis
|
},
|
data(){
|
return {
|
lookAudio:{},
|
publicPath: process.env.BASE_URL,
|
modalAudio:false,
|
pageInfo:{
|
total:100,
|
audioList:[]
|
},
|
pageData:{page:1,pageSize:10},
|
trainPageData:{page:1,pageSize:500},
|
audioListType:'table',
|
carNoBtn:{
|
moreStatus:false,
|
manySel:false
|
},
|
carTimeBtn:false,
|
carStateBtn:false,
|
whereTrain:{
|
keyword:'',
|
// audioStatus:'',
|
isFollowed:0
|
},
|
searchDateTime:[],
|
tagList:[],
|
pickerOptions: {
|
shortcuts: [
|
{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
picker.$emit('pick', [start, end]);
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
picker.$emit('pick', [start, end]);
|
}
|
}]
|
},
|
carNoList:[],
|
carTimeList:[],
|
carStateList:[],
|
}
|
},
|
computed:{
|
lastPage(){
|
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);
|
}
|
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{
|
this.lookAudio={...audio};
|
}
|
},
|
handleSizeChange(pageSize){
|
this.pageData.pageSize=pageSize;
|
},
|
handleCurrentChange(page){
|
this.pageData.page=page;
|
},
|
manySelect(){
|
this.carNoBtn.manySel=true;
|
this.carNoBtn.moreStatus=true;
|
},
|
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;
|
this.carNoBtn.moreStatus=false;
|
},
|
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;
|
.tag-cla{
|
margin-left: 5px;
|
}
|
}
|
.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: 5px;
|
width: 10%;
|
color: #2d52d7;
|
font-weight: bold;
|
//background-color: lightgray;
|
}
|
.list{
|
display: flex;
|
width: 90%;
|
//border:1px solid lightgray ;
|
.default{
|
width: 80%;
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
color: deepskyblue;
|
div{
|
width: 10%;
|
text-align: center;
|
}
|
div:hover{
|
color: red;
|
cursor: pointer;
|
}
|
}
|
.btn{
|
text-align: right;
|
padding-right: 10px;
|
width: 20%;
|
}
|
}
|
}
|
}
|
.audio-filter{
|
margin-top: 20px;
|
display: flex;
|
justify-content: space-between;
|
.icon{
|
display: flex;
|
div{
|
width:24px;
|
height: 24px;
|
text-align: center;
|
line-height: 24px;
|
border: 1px solid lightgray;
|
margin-left:10px;
|
&:hover{
|
cursor: pointer;
|
}
|
}
|
.border-cla{
|
border: 1px solid blue;
|
}
|
}
|
}
|
.audio-list-table{
|
margin-top: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: start;
|
.item{
|
width: 25%;
|
margin-top: 10px;
|
.head{
|
position: relative;
|
.player{
|
position: absolute;
|
z-index: 5;
|
top:20px;
|
left:80px;
|
}
|
.time{
|
font-size: 12px;
|
position: absolute;
|
z-index: 5;
|
left:210px;
|
bottom:20px;
|
color: white;
|
background-color: gray;
|
width: 50px;
|
text-align: center;
|
line-height: 20px;
|
border-radius: 15px;
|
}
|
}
|
.body{
|
width: 278px;
|
border: 1px solid lightgray;
|
border-radius: 0px 0px 5px 5px;
|
border-top: none;
|
margin-top: -10px;
|
.carNo{
|
box-sizing: border-box;
|
padding-top: 10px;
|
padding-left: 10px;
|
display: flex;
|
font-size: 14px;
|
justify-content: space-between;
|
.status{
|
margin-right: 20px;
|
color: red;
|
}
|
}
|
.tag,.tag-no{
|
display: flex;
|
justify-content: start;
|
margin-bottom: 20px;
|
div{
|
width: 70px;
|
font-size: 12px;
|
margin-left: 10px;
|
text-align: center;
|
color: gray;
|
}
|
}
|
.tag{
|
div{
|
background-color: rgba(242, 242, 242, 1);
|
}
|
}
|
}
|
}
|
}
|
.audio-pagination{
|
display: flex;
|
justify-content: space-between;
|
margin-top: 30px;
|
.total{
|
color: gray;
|
}
|
}
|
</style>
|
