[FE] 视频监控布局问题、切换场景没有切换布局修复 识别记录下面图片跑马灯

security-protection-platform/src/modules/videoSurveillance/distinguishRecord/index.vue

        </div>
      </div>
      <div class="img-viewer">
        <div v-for="(item,index) in dataImg" :key="index" :src="item.idenPictureUrl" class="image-carousel">
          <img :src="'http://10.19.90.34:19000/ai-image/'+item.idenPictureUrl" class="img-viewer-size" @click="getParticularsData(item.aiIdenLogId,index)">
          <span :class="{'fileName' : index === fileNameIndex}" style="width: 132px;margin-right: 14px;text-align:center">{{ item.fileName }}</span>
        </div>
        <t-carousel dots="none" arrow="always" style="width: 100%">
          <t-carousel-item v-for="(item1,index1) in dataImgList" :key="index1" style="width: 100%;padding-left: 10%">
            <div v-for="(item, index) in item1" :key="index" :src="item.idenPictureUrl" class="image-carousel">
              <img :src="'http://10.19.90.34:19000/ai-image/'+item.idenPictureUrl" class="img-viewer-size" @click="getParticularsData(item.aiIdenLogId,index)">
              <span :class="{'fileName' : index === fileNameIndex}" style="width: 132px;margin-right: 14px;text-align:center">{{ item.fileName }}</span>
            </div>
          </t-carousel-item>
        </t-carousel>
      </div>
    </div>
  </div>
      devicePosition: '',
      distinguishUrl: '',
      dataImg: [],
      dataImgList: [],
      fileNameIndex: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
      }
      var flag = this.startreend(this.startDate, this.endDate)
      if (flag) {
        var data = { params: { beginDay: this.startDate, endDay: this.endDate, id: this.videoId }}
        var data = { params: { beginDay: this.startDate, endDay: this.endDate, id: this.videoId, pageNumber: 1, pageSize: 10000 }}
        sysapi.getDistinguishData(data).then(res => {
          console.log(res.data)
          this.dataImg = res.data.data
          if (res.data.data.length > 0) {
            this.getParticularsData(res.data.data[0].aiIdenLogId, 0)
            this.dataImgList = this.arrayGroup(res.data.data, 10)
          } else {
            this.devicePosition = ''
            this.defineResult = ''
        this.$Message.danger('开始时间不能在结束时间的后面')
      }
    },
    arrayGroup(array, subGroupLength) {
      let index = 0
      let newArray = []
      while(index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength))
      }
      return newArray
    },
    // 字符串更改为时间类型
    stringtodate (date) {
      date = date.substring(0, 19)
            display: flex;
            .image-carousel{
              display: flex;
              width: 9%;
              height: 80%;
              flex-direction: column;
              .img-viewer-size{
                cursor:pointer;
                width: 132px;
                height: 88px;
                width: 100%;
                height: 100%;
                margin-right: 14px;
                padding-left: 2%;
              }
            }
        }
    }
    .carousel-control-prev-icon{
      color: #009bf3;
    }
}
.fileName{
  color: #009bf3;

security-protection-platform/src/modules/videoSurveillance/index.vue

<template>
  <div class="page-main">
    <t-button-group class="top-btn">
      <t-button v-for="(item,index) in sceneList" :key="index" :value="item.monitorSceneId" :color="item.monitorSceneId === selectedMonitorScene ? 'primary' : 'secondary'" @click="tabClick(item.monitorSceneId)">
      <t-button v-for="(item,index) in sceneList" :key="index" :value="item.monitorSceneId" :color="item.monitorSceneId === selectedMonitorScene ? 'primary' : 'secondary'" @click="tabClick(item.monitorSceneId, item.monitorViewLayout)">
        {{ item.monitorSceneName }}
      </t-button>
    </t-button-group>
        if (element.id === this.gateFieldData) {
          sysapi.getMonitorScene(this.organizationList[index].id).then((resp) => {
            this.sceneList = resp.data.data || []
            if (resp.data.data[0].monitorViewLayout === '1X1') {
              this.viewLayoutSpan = 10
              this.videoPageSize = 1
            } else if (resp.data.data[0].monitorViewLayout === '2X2') {
              this.viewLayoutSpan = 6
              this.videoPageSize = 4
            } else if (resp.data.data[0].monitorViewLayout === '3X3') {
              this.viewLayoutSpan = 4
              this.videoPageSize = 9
            } else if (resp.data.data[0].monitorViewLayout === '4X4') {
              this.viewLayoutSpan = 3
              this.videoPageSize = 16
            }
            this.tabClick(this.sceneList[0].monitorSceneId)
            // if (resp.data.data[0].monitorViewLayout === '1X1') {
            //   this.viewLayoutSpan = 10
            //   this.videoPageSize = 1
            // } else if (resp.data.data[0].monitorViewLayout === '2X2') {
            //   this.viewLayoutSpan = 6
            //   this.videoPageSize = 4
            // } else if (resp.data.data[0].monitorViewLayout === '3X3') {
            //   this.viewLayoutSpan = 4
            //   this.videoPageSize = 9
            // } else if (resp.data.data[0].monitorViewLayout === '4X4') {
            //   this.viewLayoutSpan = 3
            //   this.videoPageSize = 16
            // }
            this.tabClick(this.sceneList[0].monitorSceneId, resp.data.data[0].monitorViewLayout)
          })
        }
      })
      this.showReplayDialog = true
    },
    // 切换场景
    async tabClick (id) {
    async tabClick (id, monitorViewLayout) {
      if (monitorViewLayout === '1X1') {
        this.viewLayoutSpan = 10
        this.videoPageSize = 1
      } else if (monitorViewLayout === '2X2') {
        this.viewLayoutSpan = 6
        this.videoPageSize = 4
      } else if (monitorViewLayout === '3X3') {
        this.viewLayoutSpan = 4
        this.videoPageSize = 9
      } else if (monitorViewLayout === '4X4') {
        this.viewLayoutSpan = 3
        this.videoPageSize = 16
      }
      this.selectedMonitorScene = id
      this.paramsObj.page = 0
      this.videoList = []
    },
    // 获得风场大门数据
    getVideoSurveillanceData () {
      this.videoList = []
      this.videoOptions = []
      var id = this.tabId
      this.paramsObj.page = this.videoCurrent
      sysapi.getVideoSurveillanceData({ params: { monitorSceneId: id } }).then(res => {
        this.videoList = res.data.data
        for (let i in res.data.data) {
      sysapi.getVideoSurveillanceDataForPage({ params: { monitorSceneId: id, pageNumber: this.videoCurrent, pageSize: this.videoPageSize } }).then(res => {
        this.videoList = res.data.data.data
        this.videoTotal = res.data.data.total
        for (let i in res.data.data.data) {
          let obj = {
            autoplay: true, // 如果true,浏览器准备好时开始回放。
            muted: true, // 默认情况下将会消除任何音频。
            sources: [{
              withCredentials: false,
              type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
              src: res.data.data[i].videoUrl // url地址
              src: res.data.data.data[i].videoUrl // url地址
            }],
            flash: { hls: { withCredentials: false } },
            html5: { hls: { withCredentials: false } },