feat:更新ui界面

charles

2024-06-05 fefe4a3011fb472788abb2e7ffdbbc5a4f58623c

 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">&nbsp;&nbsp;机车号:</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">&nbsp;&nbsp;车次:</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">&nbsp;&nbsp;车站号:</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>&nbsp;</div>
                <div>&nbsp;</div>
                <div>&nbsp;</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>
                        &lt;!&ndash;<el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>&ndash;&gt;
                    </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>
               &lt;!&ndash; <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>&ndash;&gt;
            </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>
                            车号：SS4B115<br/>
                            车次：8040<br>
                            时间：2020-09-21 20:45:08<br/>
                            司机：A20<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>
                            &lt;!&ndash;<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>&ndash;&gt;
                        </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>&nbsp;</div>
                        <div>&nbsp;</div>
                        <div>&nbsp;</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);
                    }
                }
            }
        }
    }