feat:更新ui界面

charles

2024-06-05 fefe4a3011fb472788abb2e7ffdbbc5a4f58623c

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

@@ -1,6 +1,242 @@
<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-date-picker
@@ -22,6 +258,7 @@
                </el-form-item>
            </el-form>
        </div>

        <div class="show-sel-tag">
            <div>
                已选条件:
@@ -36,6 +273,7 @@
                <el-button size="mini" @click="cancelSel">取消选择</el-button>
            </div>
        </div>

        <div class="sel-filter">
            <div class="item-car-no">
                <div class="title">车号:</div>
@@ -51,7 +289,7 @@
                    </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>-->
                        &lt;!&ndash;<el-button size="mini" @click="manySelect">多选<i class="el-icon-plus"></i></el-button>&ndash;&gt;
                    </div>
                </div>
            </div>
@@ -81,18 +319,19 @@

            </div>
        </div>
        <div class="audio-filter">
      -->
<!--        <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">
               &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>-->
                </el-select>&ndash;&gt;
            </div>
            <div class="icon">
                <div @click="audioListType='table'" :class="{'border-cla':audioListType==='table'}">
@@ -120,10 +359,10 @@
                        </div>
                        <div class="status">
                            <span>{{audio.score}}</span>
                            <!--<span v-if="audio.audioStatus===0">上传中</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>-->
                            <span v-else-if="audio.audioStatus===3">异常</span>&ndash;&gt;
                        </div>
                    </div>
                    <div style="text-align: right;margin-right: 10px;">
@@ -181,7 +420,7 @@
                </el-pagination>
            </div>
        </div>
        <Analysis ref="analysis" :modal-audio.sync="modalAudio" :look-audio="lookAudio"></Analysis>
        <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;