问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/panoramicView/components/History.vue

@@ -18,32 +18,70 @@
    <div class="persons">
      <div class="board">
        <b>历史追踪人员</b>
        <span>共 10 条数据</span>
        <span>共 {{personList.length}} 条数据</span>
      </div>
      <div class="target-list">
        <div
          class="list-item"
          v-for="item in personList"
          :key="item.id"
          :style="selectedID == item.id ? 'border-color:#3D68E1': ''"
          :style="searching ? '' : item.selected ? 'border-color:#3D68E1': 'opacity: 0.3;'"
          @click="checkTarget(item)"
        >
          <!-- <img src alt :style="{backgroundColor:item.color}"/> -->
          <img :src="'/httpImage/' + item.picSmUrl" />
          <!-- <img :src="item.humanImg" fit="cover" /> -->
          <el-image
            style="width: 70px; height: 70px;border-radius: 50%;"
            :src="item.humanImg"
            fit="contain"
          ></el-image>
        </div>
      </div>
    </div>
    <div class="videos">
      <div class="video-item" v-for="v in videoList" :key="v.name">
        <video :src="'/httpImage/' + v.videoUrl" controls="controls" width="480px" height="270px"></video>
      <div class="video-item" v-for="v in videos" :key="v.id">
        <video
          :src="v.videoUrl"
          controls="controls"
          width="480px"
          height="270px"
          preload="none"
          :poster="v.videoPoster"
        ></video>
        <span>{{v.modTime}}</span>

        <div class="image-preview">
          <el-image
            src="/images/panoramicView/img-btn.png"
            :preview-src-list="[v.trackImg]"
            height="10px"
            class="td-img"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findTraceResult } from "@/api/panorama"

export default {
  name: "histroy",
  computed: {
    videos() {
      if (this.searching) {
        return this.videoList
      }

      // return this.videoList.filter(v => v.id == this.selectedID);
      return this.videoList.filter(v => v.selected);
    }
  },
  data() {
    return {
      searchTime: [
@@ -78,60 +116,19 @@
          }
        }]
      },
      selectedID: "",
      personList: [
        {
          id: "0",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "1",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "2",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "3",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "4",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "5",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "6",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
      ],
      search: "",
      personList: [],
      videoList: [
        {
          name: "1",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          name: "2",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          name: "3",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          name: "4",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
        // {
        //   id: "1",
        //   videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
        //   trackImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        // }
      ]
    }
  },
  mounted() {
    this.searchData();
  },
  methods: {
    checkTime() {
@@ -142,27 +139,32 @@
        });
        return;
      }
      clearInterval(this.timer);
      //判断是否是查历史数据
      if (Date.parse(this.searchTime[1]) < Date.now()) {
        this.filterData()
      } else {
        this.activeObjHashMap = {};
        //实时查
        this.searchData();
      }

      this.searchData();
    },
    checkTarget(item) {
      this.selectedID = item.id;
      this.searching = false;
      this.$set(item, 'selected', item.selected != undefined ? !item.selected : true);
    },
    searchData() {
      findTraceResult({ searchTime: this.searchTime }).then(rsp => {
        this.searching = true;

        this.videoList = this.personList = [];

        if (rsp && rsp.success && rsp.data) {
          this.videoList = rsp.data;
          this.personList = [...rsp.data];
        }
      })
    }
  }
}
</script>

<style lang="scss">
<style lang="scss" scoped>
.p-histroy {
  height: 800px;
  height: 1080px;
  background: inherit;
  background-color: rgba(240, 242, 245, 1);

@@ -174,11 +176,12 @@
  }

  .persons {
    width: 18%;
    height: 670px;
    width: 342px;
    height: 917px;
    background-color: #fff;
    margin: 10px 10px;
    float: left;
    overflow: auto;
    .board {
      height: 70px;
      line-height: 50px;
@@ -195,7 +198,7 @@
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      width: 375px;
      width: 335px;
      overflow: auto;
      height: auto;
      .list-item {
@@ -211,6 +214,7 @@
          height: 100%;
          display: block;
          border-radius: 50%;
          border: 0px;
        }
        &.deact {
          opacity: 0.5;
@@ -221,20 +225,43 @@
  }

  .videos {
    width: 80%;
    margin: 10px 10px;
    height: 88%;
    // width: 80%;
    margin: 0px 10px;
    height: 85%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    .video-item {
      width: 500px;
      height: 320px;
      margin-left: 10px;
      margin-top: 10px;
      background-color: #fff;

      span {
        display: inline-block;
        float: left;
        margin-left: 10px;
      }

      video {
        margin: 10px;
      }

      .image-preview {
        width: 25px;
        float: right;
        margin: -5px 10px;
        cursor: pointer;

        .el-image-viewer__close {
          color: #fff;
        }

        .td-img {
          color: #fff;
        }
      }
    }
  }
}