标定添加关联摄像机tab,绘制区域组件参数更新

hanbaoshan

2020-12-20 ecb6cadc3f016cf9968f48e0cc77479a1e56365b

 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"
@@ -38,10 +38,13 @@
              v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
            >
              <p>
                <span class="fontStyleForModel">{{ data.picDate }}</span>
                <span class="fontStyleForModel" style="font-weight:normal">{{ data.picDate | formatTime }}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
              </p>
              <p>
                
              </p>
              <p style="width:100%">
                <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -58,10 +61,10 @@
            <!-- 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>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
              </p>
              <p style="width:100%">
                <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -131,56 +134,39 @@
            </div>
          </div>
          <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
            <div class="baseInfo_left">
            <div class="baseInfo_list">
              <p>
                <span class="labelInfo">底库</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>
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
              </p>
              <p>
                <span class="labelInfo">手机号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
              </p>
            </div>
            <div class="baseInfo_right">
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].tableName"
                >{{ data.baseInfo[initialIndex].tableName }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].targetName"
                >{{ data.baseInfo[initialIndex].targetName }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].labels.split('/')[1]"
                >{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].labels.split('/')[2]"
                >{{ data.baseInfo[initialIndex].labels.split("/")[2] }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].labels.split('/')[0]"
                >{{ data.baseInfo[initialIndex].labels.split("/")[0] }}</span>
              </p>
              <p class="valueInfo">
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].monitorLevel"
                >{{ data.baseInfo[initialIndex].monitorLevel }}</span>
                >{{data.baseInfo[initialIndex].monitorLevel}}</span>
              </p>
            </div>
          </div>
@@ -255,56 +241,39 @@
            </div>
          </div>
          <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
            <div class="baseInfo_left">
            <div class="baseInfo_list">
              <p>
                <span class="labelInfo">底库</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>
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
              </p>
              <p>
                <span class="labelInfo">手机号</span>
                <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
              </p>
            </div>
            <div class="baseInfo_right">
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].tableName"
                >{{ data.baseInfo[initialIndex].tableName }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].targetName"
                >{{ data.baseInfo[initialIndex].targetName }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].labels.split('/')[1]"
                >{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].labels.split('/')[2]"
                >{{ data.baseInfo[initialIndex].labels.split("/")[2] }}</span>
              </p>
              <p class="valueInfo">
                <span
                  :title="data.baseInfo[initialIndex].labels.split('/')[0]"
                >{{ data.baseInfo[initialIndex].labels.split("/")[0] }}</span>
              </p>
              <p class="valueInfo">
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].monitorLevel"
                >{{ data.baseInfo[initialIndex].monitorLevel }}</span>
                >{{data.baseInfo[initialIndex].monitorLevel}}</span>
              </p>
            </div>
          </div>
@@ -314,6 +283,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"
@@ -334,15 +319,46 @@
    data: ""
  },
  filters: {
    formatTime(t) {
      return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
    },
    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() {
    this.VideoPhotoData.activeName = "pic"
    console.log('ModelCard data',this.data);
    console.log(this.data.baseInfo)
    console.log(this.initialIndex)
    //this.VideoPhotoData.activeName = "pic"
  },
  data() {
    return {
      activeName:'pic',
      initialIndex: 0,
    };
  },
@@ -393,6 +409,21 @@
      .baseInfo {
        margin-top: 5px;
        text-align: left;
        .baseInfo_list {
          p {
            display: flex;
            .labelInfo {
              width: 80px;
              color: #999;
            }
            .val {
              font-size: 12px;
              color: #101010;
              letter-spacing: 0.28px;
              line-height: 20px;
            }
          }
        }
        .baseInfo_left {
          float: left;
          width: 30%;
@@ -461,10 +492,9 @@
            b {
              //color: #e43933;
            }
            width: 40%;
            text-align: left;
            float: left;
            margin: 4px 0px;
            margin: 4px 0;
            
          }
        }
        .describeBigImage {