优化card时间显示和摄像机音频试听功能

zhangzengfei

2020-09-25 a88314bd5d59f1dde2d430899555a3a5730f2ef9

优化card时间显示和摄像机音频试听功能

 src/components/subComponents/CardItem.vue

@@ -88,7 +88,7 @@
        @mouseleave="cardMouseleave($event)"
      >
        <p>
          <span class="fontStyle color222">{{ data.picDate }}</span>
          <span class="fontStyle color222">{{ data.picDate | formatTime}}</span>
        </p>
        <p style="margin-bottom: 8px;">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
@@ -226,7 +226,7 @@
        @mouseleave="cardMouseleave($event)"
      >
        <p :title="data.picDate">
          <span class="fontStyle color222">{{ data.picDate }}</span>
          <span class="fontStyle color222">{{ data.picDate | formatTime }}</span>
        </p>
        <p :title="data.cameraAddr" style="margin-bottom: 8px;">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
@@ -316,7 +316,7 @@
          <span v-else>{{ data.baseInfo[0].compareScore | percentage}}</span>
        </p>
        <p :title="data.picDate">
          <span class="fontStyle color222">{{ data.picDate }}</span>
          <span class="fontStyle color222">{{ data.picDate | formatTime }}</span>
        </p>
        <p :title="data.cameraAddr" style="margin-bottom: 8px;">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
@@ -465,7 +465,7 @@
        >
          <div>
            <p :title="data.picDate">
              <span class="fontStyle color222">{{ data.picDate }}</span>
              <span class="fontStyle color222">{{ data.picDate | formatTime }}</span>
            </p>
            <p :title="data.cameraAddr" style="margin-bottom: 8px;">
              <span class="fontStyle color222">{{ data.cameraAddr }}</span>
@@ -484,6 +484,22 @@
</template>

<script>
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "H+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

export default {
  mounted() {
    window.addEventListener("resize", this.watchWindow);
@@ -504,6 +520,9 @@
    }
  },
  filters: {
    formatTime(t) {
      return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
    },
    percentage(score) {
      return score.toFixed(2) + "%"
    }
@@ -520,7 +539,6 @@
  watch: {
    data: {
      handler(val, oldVal) {
        console.log('数据发生变化')
        this.$forceUpdate()
      },
      deep: true
@@ -559,19 +577,16 @@
      this.$emit("detailsClick", ev);
    },
    toAdd(item) {
      console.log("触发加入底库")
      this.$emit("addToBase", item);
    },
    tosearch(item) {
      console.log('search')
      console.log(location.href)
      let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
      let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
      let compType = 1 //  数据来自于es
      if (!item.id || item.id == "") {
        compType = 0 // 数据来自于底库
      }
      

      let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '&timestamp=' + new Date().getTime();
      //let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType;
      window.parent.postMessage({

 src/components/subComponents/ModelCard.vue

@@ -38,7 +38,7 @@
              v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
            >
              <p>
                <span class="fontStyleForModel">{{ data.picDate }}</span>
                <span class="fontStyleForModel">{{ data.picDate | formatTime }}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
@@ -58,7 +58,7 @@
            <!-- yolo类大图 -->
            <div class="describeBigImage" v-else>
              <p>
                <span class="fontStyleForModel">{{ data.picDate }}</span>
                <span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
@@ -134,15 +134,21 @@
            <div class="baseInfo_list">
              <p>
                <span class="labelInfo">底库</span>
                <span class="val" :title="data.baseInfo[initialIndex].tableName">{{data.baseInfo[initialIndex].tableName}}</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].tableName"
                >{{data.baseInfo[initialIndex].tableName}}</span>
              </p>
              <p>
                <span class="labelInfo">姓名</span>
                <span class="val" :title="data.baseInfo[initialIndex].targetName">{{data.baseInfo[initialIndex].targetName}}</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].targetName"
                >{{data.baseInfo[initialIndex].targetName}}</span>
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val" >{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
@@ -154,7 +160,10 @@
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
                <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{data.baseInfo[initialIndex].monitorLevel}}</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].monitorLevel"
                >{{data.baseInfo[initialIndex].monitorLevel}}</span>
              </p>
            </div>
          </div>
@@ -232,15 +241,21 @@
            <div class="baseInfo_list">
              <p>
                <span class="labelInfo">底库</span>
                <span class="val" :title="data.baseInfo[initialIndex].tableName">{{data.baseInfo[initialIndex].tableName}}</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].tableName"
                >{{data.baseInfo[initialIndex].tableName}}</span>
              </p>
              <p>
                <span class="labelInfo">姓名</span>
                <span class="val" :title="data.baseInfo[initialIndex].targetName">{{data.baseInfo[initialIndex].targetName}}</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].targetName"
                >{{data.baseInfo[initialIndex].targetName}}</span>
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val" >{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
@@ -252,7 +267,10 @@
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
                <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{data.baseInfo[initialIndex].monitorLevel}}</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].monitorLevel"
                >{{data.baseInfo[initialIndex].monitorLevel}}</span>
              </p>
            </div>
          </div>
@@ -262,6 +280,22 @@
  </div>
</template>
<script>
Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "H+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

/* eslint-disable */
import CameraPlayer from "@/components/player";
import imgDown from "@/components/subComponents/imgDown"
@@ -282,6 +316,9 @@
    data: ""
  },
  filters: {
    formatTime(t) {
      return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
    },
    percentage(score) {
      return score.toFixed(2) + "%"
    }
@@ -343,21 +380,20 @@
      .baseInfo {
        margin-top: 5px;
        text-align: left;
        .baseInfo_list{
          p{
        .baseInfo_list {
          p {
            display: flex;
            .labelInfo{
            .labelInfo {
              width: 80px;
              color: #999;
            }
            .val{
            .val {
              font-size: 12px;
              color: #101010;
              letter-spacing: 0.28px;
              line-height: 20px;
            }
          }
          
        }
        .baseInfo_left {
          float: left;

 src/pages/cameraAccess/components/CameraInfo.vue

@@ -62,7 +62,7 @@
        <el-col :span="9" :offset="1">
          <el-form-item label="事件声音">
            <div class="flex-wrap" style="margin-left:-10px">
              <el-switch v-model="form.voiceEnable" active-color="#409eff" :width="50"></el-switch>
              <el-switch v-model="form.voiceEnable" :width="50"></el-switch>
              <el-select
                v-model="form.voiceId"
                placeholder="选择声音"
@@ -79,7 +79,13 @@
              </el-select>
              <span class="player-btn" @click="togglePlayer" style="cursor:pointer;">
                <i
                  v-if="togglePlay"
                  class="el-icon-video-play"
                  style="font-size:26px; vertical-align:middle; color:#409eff"
                ></i>
                <i
                  v-else
                  class="el-icon-video-pause"
                  style="font-size:26px; vertical-align:middle; color:#409eff"
                ></i>
              </span>
@@ -146,7 +152,6 @@
                <li style="width:100%">
                  <info-card
                    style="width:100%;min-width: 440px"
                   
                    :realtime="PollData.RealTimeValidCount"
                    :polling="PollData.PollValidCount"
                    :dataStack="PollData.stackChannelCount"
@@ -252,6 +257,11 @@
      this.visibilitychange();
    });
    this.getSounds();

    this.eventAudio.addEventListener("ended", () => {
      console.log("audio end")
      this.togglePlay = true
    })
  },
  methods: {
    getSounds() {
@@ -265,7 +275,10 @@
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.form.voiceId = sound.id
      this.form.voiceId = sound.id;
      this.togglePlay = true;
      this.eventAudio.pause()
      // this.eventAudio.
    },
    togglePlayer() {
      if (!this.soundPath) {
@@ -276,13 +289,14 @@
        return false;
      }
      this.eventAudio.src = this.soundPath;

      if (this.togglePlay) {
        this.eventAudio.play();
        this.togglePlay = false
      } else {
        this.eventAudio.pause()
        this.togglePlay = true
      }
      this.togglePlay = !this.togglePlay
      // this.togglePlay = !this.togglePlay
    },
    visibilitychange() {
      switch (document.visibilityState) {