add bhomebus api

zhangzengfei

2021-01-28 0f70bb5e95342e1c88e16b4c12609cd45dd1b103

 src/components/subComponents/ModelCard.vue

@@ -1,6 +1,6 @@
<template>
  <div class="model-card-box" :style="`height:${height};width:${width};`">
    <el-tabs style="height: 100%;" @before-leave="changeTabs" v-model="VideoPhotoData.activeName">
    <el-tabs style="height: 100%;" @before-leave="changeTabs" v-model="activeName">
      <el-tab-pane label="大图" name="pic">
        <div
          class="model-card-box-left"
@@ -12,16 +12,19 @@
            <p class="img-box-title">
              <b>全景图</b>
            </p>
            <!-- 人脸类型 -->
            <img-down
              v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
              :url="data.picMaxUrl[0]"
            ></img-down>
            <!-- 人脸类型 -->

            <!-- 普通yolo类 -->
            <img-down
              v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length == 1"
              :url="data.picMaxUrl[0]"
            ></img-down>
            <!-- 普通yolo类 -->

            <!-- 持续时间yolo类 -->
            <el-carousel
              v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length > 1"
              trigger="click"
@@ -32,20 +35,26 @@
                <img-down :url="item"></img-down>
              </el-carousel-item>
            </el-carousel>
            <!-- 持续时间yolo类 -->

            <!-- yolo类大图 -->
            <div
              class="describe"
              v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
            >
              <p>
                <span class="fontStyleForModel">{{ data.picDate | formatTime }}</span>
                <span
                  class="fontStyleForModel"
                  style="font-weight:normal"
                >{{ data.picDate | formatTime }}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
                <span
                  class="fontStyleForModel analyServer"
                  style="margin-left:20px;"
                >{{ data.analyServerName }}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.analyServerName }}</span>
              </p>
              <p></p>
              <p style="width:100%">
                <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
                  <span class="fontStyleForModel">{{data.taskName}}</span>&nbsp;&nbsp;
@@ -58,13 +67,22 @@
                </span>
              </p>
            </div>
            <!-- yolo类大图 -->

            <!-- 人脸类大图  -->
            <div class="describeBigImage" v-else>
              <p>
                <span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
              <p class="align-right">
                <span
                  class="fontStyleForModel text-overflow"
                  :title="data.cameraAddr"
                >{{ data.cameraAddr }}</span>
                <span
                  class="fontStyleForModel text-overflow"
                  :title="data.cameraAddr"
                  style="margin-left:20px;"
                >{{ data.analyServerName }}</span>
              </p>
              <p style="width:100%">
                <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -78,12 +96,15 @@
                </span>
              </p>
              <p style="width:100%">
                <span class="fontStyleForModel">{{data.showLabels}}</span>
                <span
                  style="white-space: nowrap;font-weight: 600;font-size: 13px;"
                >{{data.showLabels}}</span>
              </p>
            </div>
            <!-- 人脸类大图  -->
          </div>
        </div>

        <!-- 弹框右侧 -->
        <div
          v-if="data.targetInfo && data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
          class="model-card-box-right"
@@ -151,15 +172,15 @@
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[1]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
              </p>
              <p>
                <span class="labelInfo">手机号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[2]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
@@ -172,6 +193,7 @@
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="视频" name="video" class="video-tabs">
        <div
          class="model-card-box-left"
@@ -186,11 +208,6 @@
              style="margin-top: 12px;"
            >您的浏览器不支持 video 标签。</video>
          </div>
          <!-- <div class="merge">
            <el-button type="primary" @click="mergeVideo">合并视频</el-button>
            <a name="download" @click="downloadfile">下载</a>
            <a href="/httpImage/192.168.20.112:6081/31,02c86c199cd9b1" download="panlei.mp4">下载2</a>
          </div>-->
        </div>
        <div
          v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
@@ -258,15 +275,15 @@
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[1]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
              </p>
              <p>
                <span class="labelInfo">手机号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[2]}}</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
@@ -324,15 +341,41 @@
    },
    percentage(score) {
      return score.toFixed(2) + "%"
    },
    sex(v) {
      try {
        let obj = JSON.parse(v)
        return obj.sex
      } catch (error) {
        return v.split("/")[0]
      }
    },
    idCard(v) {
      try {
        let obj = JSON.parse(v)
        return obj.idCard
      } catch (error) {
        return v.split("/")[1]
      }
    },
    phoneNum(v) {
      try {
        let obj = JSON.parse(v)
        return obj.phone
      } catch (error) {
        return v.split("/")[2]
      }
    }
  },
  mounted() {
    console.log('ModelCard data', this.data);
    console.log(this.data.baseInfo)
    console.log(this.initialIndex)
    this.VideoPhotoData.activeName = "pic"
    //this.VideoPhotoData.activeName = "pic"
  },
  data() {
    return {
      activeName: 'pic',
      initialIndex: 0,
    };
  },
@@ -466,10 +509,8 @@
            b {
              //color: #e43933;
            }
            width: 40%;
            text-align: left;
            float: left;
            margin: 4px 0px;
            margin: 4px 0;
          }
        }
        .describeBigImage {
@@ -478,6 +519,17 @@
          float: left;
          margin-top: 5px;
          p {
            &.align-right {
              text-align: right;
              .text-overflow {
                display: inline-block;
                vertical-align: top;
                width: 90px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            b {
              //color: #e43933;
            }