feat:更新ui界面

charles

2024-06-05 fefe4a3011fb472788abb2e7ffdbbc5a4f58623c

 src/views/home/components/audioAnalysis/index.vue

@@ -1,5 +1,6 @@
<template>
    <div>
      <el-card class="top-container">
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="">
@@ -24,7 +25,7 @@
        </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>
@@ -36,9 +37,13 @@
                <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 class="title">车号:</div>
              <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)">
@@ -55,8 +60,15 @@
                    </div>
                </div>
            </div>
          </div>
          <div class="sel-filter">
            <div class="item-car-no">
                <div class="title">车次:</div>
              <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)">
@@ -68,7 +80,39 @@
                    </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">
@@ -79,8 +123,11 @@
                    </div>
                </div>

            </div>-->

            </div>
        </div>
      </el-card>
      <el-card class="bottom-container">
        <div class="audio-filter">
            <div>
                <el-select size="mini" v-model="whereTrain.isFollowed">
@@ -107,24 +154,30 @@
            <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>
<!--              <img :src="`${publicPath}images/audio/u231.png`" class="player"/>-->
<!--              <div class="time">06:20</div>-->
                </div>
                <div class="body">
                    <div class="carNo">
                        <div>
                <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">
                </div>-->
<!--                <div class="status">
                            <span>{{audio.score}}</span>
                            <!--<span v-if="audio.audioStatus===0">上传中</span>
                  <span v-if="audio.audioStatus===0">上传中</span>
                            <span v-else-if="audio.audioStatus===1" style="color: green">正常</span>
                            <span v-else-if="audio.audioStatus===2">处理中</span>
                            <span v-else-if="audio.audioStatus===3">异常</span>-->
                        </div>
                  <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>
@@ -182,6 +235,192 @@
            </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>
                        &lt;!&ndash;<el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>&ndash;&gt;
                    </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>
               &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'}">
                    <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>
                            &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" :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>-->
    </div>
</template>

@@ -306,12 +545,14 @@
                }else{
                    this.tagList.splice(searchIndex,1,obj);
                }
                this.searchCar();
            },
            async processAudio(audio){
                const {code,data} =await audioInfoApi(audio.ID);
                if(code===200){
                    this.$refs.analysis.audio[0].title=data.name;
                    this.$refs.analysis.audio[0].artist=data.driverNumber;
                    this.$refs.analysis.audio[0].url=`http://smartai.com:7013/api-sa/v1/audio/download?id=${audio.ID}`;
                    this.modalAudio=true;
                    this.lookAudio={...data};
                }else{
@@ -380,15 +621,50 @@
            },
            cancelSel(){
                this.tagList=[];
                this.searchCar();
            },
            closeTag(index){
                this.tagList.splice(index,1);
                this.searchCar();
            }
        }
    }
</script>

<style scoped lang="scss">
.top-container  {
  margin: 20px;
  min-height: 30vh
}
.search{
  ::v-deep .el-input-group__append button.el-button {
    background-color: #2d52d7;
    height: 34px;
  }
}
.bottom-container{
  margin: 20px;
  min-height: 40vh;
}
.carNo-body{
  margin-top: 10px;
}
.carNo-body div{
  margin-top: 3px;
}
.carNo-sty1{
  color:#95a0b9;
}
.carNo-sty2{
  color: #425277;
  font-weight: bold;
  padding-left: 6px;
}



    /*   */

    .show-sel-tag{
        display: flex;
        justify-content: space-between;
@@ -397,20 +673,24 @@
        }
    }
    .sel-filter{
      border-bottom: 1px solid lightgray;
      padding-bottom: 10px;
        margin-top: 20px;
        .item-car-no{
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            .title{
                padding-left: 20px;
                //padding-left: 5px;
                width: 10%;
                background-color: lightgray;
              color:  #2d52d7;
              font-weight: bold;
                //background-color: lightgray;
            }
            .list{
                display: flex;
                width: 90%;
                border:1px solid lightgray ;
                //border:1px solid lightgray ;
                .default{
                    width: 80%;
                    display: flex;