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 | 557 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 478 insertions(+), 79 deletions(-)
diff --git a/src/views/home/components/audioAnalysis/index.vue b/src/views/home/components/audioAnalysis/index.vue
index c980ae0..89cb735 100644
--- a/src/views/home/components/audioAnalysis/index.vue
+++ b/src/views/home/components/audioAnalysis/index.vue
@@ -1,13 +1,246 @@
<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-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"
+ v-model="searchDateTime"
type="daterange"
size="small"
align="right"
@@ -18,17 +251,20 @@
: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 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.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>
@@ -37,13 +273,14 @@
<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 @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 +288,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 +297,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,27 +310,28 @@
<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>
</div>
</div>
- <div class="audio-filter">
+ -->
+<!-- <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 +343,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 +352,57 @@
<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>{{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"></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 +420,13 @@
</el-pagination>
</div>
</div>
- <Analysis :modal-audio.sync="modalAudio"></Analysis>
+ <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:{
@@ -171,17 +434,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 +450,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 +485,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 +495,70 @@
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;
},
@@ -256,8 +569,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;
@@ -265,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;
@@ -282,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;
@@ -389,19 +784,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