<template>
|
<div>
|
<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-form-item>
|
<el-form-item label="">
|
<el-date-picker
|
v-model="whereCar.date"
|
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>
|
<el-button @click="searchCar" size="mini" type="primary" style="border:none;background-color: rgba(24, 144, 255, 1)">搜索</el-button>
|
</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.filterType}}:</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 v-for="(carNo,index) in carNoList" v-if="index<=(carNoBtn.moreStatus?carNoList.length-1:9)">
|
<el-checkbox v-show="carNoBtn.manySel" checked/>{{carNo}}
|
</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" @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 v-for="(carTime,index) in carTimeList" v-if="index<=(carTimeBtn?carTimeList.length-1:9)">
|
{{carTime}}
|
</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>
|
</div>
|
</div>
|
</div>
|
<div class="item-car-no">
|
<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>
|
<div class="btn">
|
<el-button size="mini" @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="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>
|
<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>
|
</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="i in 8">
|
<div class="head" @click="modalAudio=true">
|
<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>
|
车号：SS4B115<br/>
|
车次：8040<br>
|
时间：2020-09-21 20:45:08<br/>
|
司机：A20<br>
|
</div>
|
<div class="status">异常</div>
|
</div>
|
<div style="text-align: right;margin-right: 10px">
|
<el-rate :max="1"></el-rate>
|
</div>
|
<div class="tag">
|
<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-column label="操作" align="center">
|
<el-rate max="1"></el-rate>
|
</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 :modal-audio.sync="modalAudio"></Analysis>
|
</div>
|
</template>
|
|
<script>
|
import Analysis from './components/Analysis.vue';
|
export default {
|
name: "audioAnalysis",
|
components:{
|
Analysis
|
},
|
data(){
|
return {
|
publicPath: process.env.BASE_URL,
|
modalAudio:false,
|
pageInfo:{
|
total:100,
|
textList:[]
|
},
|
pageData:{page:1,pageSize:10},
|
whereAudio:{
|
status:'2',
|
isState:'2'
|
},
|
audioListType:'table',
|
carNoBtn:{
|
moreStatus:false,
|
manySel:false
|
},
|
carTimeBtn:false,
|
carStateBtn:false,
|
whereCar:{
|
keyword:'',
|
date:''
|
},
|
tagList:[
|
{filterType:'车次',value:'全部'},
|
{filterType:'车号',value:'全部'},
|
{filterType:'车站号',value:'全部'}
|
],
|
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:['全部','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'}
|
]
|
}
|
},
|
computed:{
|
lastPage(){
|
return Math.ceil(this.pageInfo.total/this.pageData.pageSize)
|
}
|
},
|
methods:{
|
handleSizeChange(pageSize){
|
this.pageData.pageSize=pageSize;
|
},
|
handleCurrentChange(page){
|
this.pageData.page=page;
|
},
|
manySelect(){
|
this.carNoBtn.manySel=true;
|
this.carNoBtn.moreStatus=true;
|
},
|
searchCar(){
|
|
},
|
cancelManySel(){
|
this.carNoBtn.manySel=false;
|
this.carNoBtn.moreStatus=false;
|
},
|
cancelSel(){
|
this.tagList=[];
|
},
|
closeTag(index){
|
this.tagList.splice(index,1);
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.show-sel-tag{
|
display: flex;
|
justify-content: space-between;
|
.tag-cla{
|
margin-left: 5px;
|
}
|
}
|
.sel-filter{
|
margin-top: 20px;
|
.item-car-no{
|
display: flex;
|
justify-content: space-between;
|
line-height: 40px;
|
.title{
|
padding-left: 20px;
|
width: 10%;
|
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{
|
display: flex;
|
justify-content: start;
|
margin-bottom: 30px;
|
div{
|
width: 70px;
|
font-size: 12px;
|
background-color: rgba(242, 242, 242, 1);
|
margin-left: 10px;
|
text-align: center;
|
color: gray;
|
}
|
}
|
}
|
}
|
}
|
.audio-pagination{
|
display: flex;
|
justify-content: space-between;
|
margin-top: 30px;
|
.total{
|
color: gray;
|
}
|
}
|
</style>
|
