问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/components/subComponents/CardItem.vue

@@ -7,7 +7,7 @@
        <div class="card-img-box-compear">
          <div class="card-img-box-compear-left" ref="firstImg">
            <img
              :src="'/httpImage/'+data.targetInfo[0].picSmUrl+'?width=160'"
              :src="data.targetInfo[0].picSmUrl | httpImage"
              :id="'/compear/'+data.targetInfo[0].picSmUrl"
              class="cursor-pointer"
              @click="detailsClick($event)"
@@ -22,7 +22,7 @@
          >
            <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
              <img
                :src="'/httpImage/'+item.targetPicUrl+'?width=160'"
                :src="item.targetPicUrl | httpImage"
                class="cursor-pointer"
                @click="detailsClick($event)"
              />
@@ -31,13 +31,12 @@
        </div>
        <div
          class="s-card-left-isCompare-div compareScore111"
          style
          :style="{
            bottom: getBottom(),
            bottom: '0',
            background: getUrl(data.baseInfo[initialIndex].bwType)
          }"
        >
          <b>{{ `${data.baseInfo[initialIndex].compareScore}%` }}</b>
          <b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
        </div>
      </div>
    </div>
@@ -54,30 +53,28 @@
          @change="changeCarousel"
        >
          <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'">
            <img
              :src="'/httpImage/'+item+'?width=160'"
              class="cursor-pointer"
              @click="detailsClick($event)"
            />
            <img :src="item | httpImage" class="cursor-pointer" @click="detailsClick($event)" />
          </el-carousel-item>
        </el-carousel>
        <!-- 暂时认为只有人脸抓拍的报警, 首页显示小图, 其他时间均显示大图 -->
        <img
          v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
          :src="'/httpImage/'+data.picMaxUrl[0]+'?width=160'"
          v-else-if="data.targetInfo == null || data.targetInfo[0].targetType !== 'FaceDetect'"
          :src="data.picMaxUrl[0] | httpImage"
          class="cursor-pointer"
          @click="detailsClick($event)"
        />
        <img
          v-else
          :src="'/httpImage/'+data.targetInfo[0].picSmUrl+'?width=160'"
          :src="data.targetInfo[0].picSmUrl | httpImage"
          class="cursor-pointer"
          @click="detailsClick($event)"
        />
      </div>
      <div class="s-card-left-box" v-else>
        <img :src="'/httpImage/'+data.baseInfo[0].targetPicUrl+'?width=160'" class="cursor-pointer" />
        <img :src="data.baseInfo[0].targetPicUrl | httpImage" class="cursor-pointer" />
      </div>
    </div>

    <!-- 右侧文字区域 -->
    <!-- 多张底图切换 -->
    <div class="s-card-right-isCompare" v-if="showType == 'compare'">
@@ -87,12 +84,8 @@
        @mouseenter="cardMouseenter($event)"
        @mouseleave="cardMouseleave($event)"
      >
        <!-- <p :title="data.baseInfo[0].compareScore" class="score">
          <span v-if="data.id">{{ data.compareScore }}%</span>
          <span v-else>{{ data.baseInfo[0].compareScore }}%</span>
        </p>-->
        <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>
@@ -137,7 +130,7 @@
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].labels"
              >/&nbsp;{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>&nbsp;
              >/&nbsp;{{ data.baseInfo[initialIndex].labels | idCard}}</span>&nbsp;
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].monitorLevel"
@@ -163,7 +156,7 @@
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].labels"
              >/&nbsp;{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>&nbsp;
              >/&nbsp;{{ data.baseInfo[initialIndex].labels | idCard}}</span>&nbsp;
              <span
                class="fontStyle"
                v-if="data.baseInfo[initialIndex].monitorLevel"
@@ -200,7 +193,7 @@
          class="score"
          style="font-family: PingFangSC-Medium;font-size: 20px;color: #3D68E1;letter-spacing: 0.4px;"
        >
          <span>{{ data.baseInfo[0].compareScore }}%</span>
          <span>{{ data.baseInfo[0].compareScore | percentage}}</span>
        </p>
        <p
          :style="data.baseInfo[0].bwType == '0' ? 'font-size:12px;line-height:20px' : 'color:red;font-size:12px;line-height:20px'"
@@ -209,7 +202,7 @@
          <span>{{ data.baseInfo[0].targetName }}</span>&nbsp;&nbsp;
          <span
            v-if="data.baseInfo[0].labels"
          >/&nbsp;{{ data.baseInfo[0].labels.split("/")[1] }}</span>
          >/&nbsp;{{ data.baseInfo[0].labels | idCard}}</span>
        </p>
      </div>
      <div class="card-icon-box">
@@ -230,7 +223,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>
@@ -302,7 +295,7 @@

    <!-- 没有底库，非比对，普通模式 一定有targetInfo，并且targetInfo个数为1-->
    <div
      v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== '' && data.targetInfo.length == 1"
      v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
      class="s-card-right-signal"
    >
      <div
@@ -316,11 +309,11 @@
          v-if="VideoPhotoData.uploadType"
          style="font-family: PingFangSC-Medium;font-size: 20px;color: #3D68E1;letter-spacing: 0.4px;"
        >
          <span v-if="data.id">{{ data.compareScore }}%</span>
          <span v-else>{{ data.baseInfo[0].compareScore }}%</span>
          <span v-if="data.id">{{ data.compareScore | percentage}}</span>
          <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>
@@ -362,15 +355,12 @@
          <div slot="content">
            <p v-for="(item,index) in data.baseInfo" :key="index+'base1'">
              <span class="fontStyle">{{item.tableName}}</span>&nbsp;
              <span class="fontStyle" v-if="item.targetName !== ''">/&nbsp;{{item.targetName}}</span>&nbsp;
              <span class="fontStyle" v-if="item.targetName.length">/&nbsp;{{item.targetName}}</span>&nbsp;
              <span
                class="fontStyle"
                v-if="item.labels !== '' && item.labels.split('/')[1] !== ''"
              >/&nbsp;{{item.labels.split("/")[1]}}</span>&nbsp;
              <span
                class="fontStyle"
                v-if="item.labels !== '' && item.labels.split('/')[0] !== ''"
              >/&nbsp;{{item.labels.split("/")[0]}}</span>
                v-if="item.labels.length"
              >/&nbsp;{{item.labels | idCard}}</span>&nbsp;
              <span class="fontStyle" v-if="item.labels.length">/&nbsp;{{item.labels | sex}}</span>
            </p>
          </div>
          <el-button
@@ -382,15 +372,12 @@
              :style="item.bwType == '1' ? 'color:red;font-size:12px;line-height:20px':'font-size:12px;line-height:20px'"
            >
              <span class="fontStyle">{{item.tableName}}</span>&nbsp;
              <span class="fontStyle" v-if="item.targetName !== ''">/&nbsp;{{item.targetName}}</span>&nbsp;
              <span class="fontStyle" v-if="item.targetName.length">/&nbsp;{{item.targetName}}</span>&nbsp;
              <span
                class="fontStyle"
                v-if="item.labels !== '' && item.labels.split('/')[1] !== ''"
              >/&nbsp;{{item.labels.split("/")[1]}}</span>&nbsp;
              <span
                class="fontStyle"
                v-if="item.labels !== '' && item.labels.split('/')[0] !== ''"
              >/&nbsp;{{item.labels.split("/")[0]}}</span>
                v-if="item.labels.length"
              >/&nbsp;{{item.labels | idCard}}</span>&nbsp;
              <span class="fontStyle" v-if="item.labels.length">/&nbsp;{{item.labels |sex }}</span>
            </span>
          </el-button>
        </el-tooltip>
@@ -469,7 +456,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>
@@ -488,9 +475,26 @@
</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);
    //window.addEventListener("resize", this.watchWindow);
    window.addEventListener("resize", this.getBottom)
  },
  props: {
    data: {
@@ -500,20 +504,46 @@
    showType: {
      type: String,
      default: "search"
    }
  },
  watch: {
    data: {
      handler(val, oldVal) {
        console.log('数据发生变化')
        this.$forceUpdate()
      },
      deep: true
    }
    },
    fromCluster: {
      type: Boolean,
      default: false
    },
    searchT: {}
  },
  computed: {
    isId() {
      return this.data.id
    }
  },
  filters: {
    formatTime(t) {
      return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
    },
    percentage(score) {
      return score.toFixed(2) + "%"
    },
    idCard(v) {
      try {
        let obj = JSON.parse(v)
        return obj.idCard
      } catch (error) {
        return v.split("/")[1]
      }
    },
    sex(v) {
      try {
        let obj = JSON.parse(v)
        return obj.sex
      } catch (error) {
        return v.split("/")[0]
      }
    },
    httpImage(url) {
      if (!url.length) {
        return ""
      }
      return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
    }
  },
  data() {
@@ -525,25 +555,24 @@
      overflowState: true
    };
  },
  watch: {
    data: {
      handler(val, oldVal) {
        this.$forceUpdate()
      },
      deep: true
    }
  },
  methods: {
    watchWindow() {
      // console.log('height')
      // this.$nextTick(() => {
      //   document.querySelectorAll('.compareScore111').forEach(ele => {
      //     ele.style.bottom = this.getBottom()
      //     console.log("元素的样式值：",ele.style.bottom)
      //   }); 
      //   this.$forceUpdate()
      // })
    },
    getBottom() {
      // let imgDom = document.getElementById(str)
      let imgDom = this.$refs.firstImg
      if (imgDom) {
        let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2
        return `${num}px`;
      }
      return `4px`;
      this.$nextTick(() => {
        let imgDom = this.$refs.firstImg
        if (imgDom) {
          let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2
          return `${num}px`;
        }
        return `4px`;
      })
    },
    getUrl(bwtype) {
      if (bwtype == 1) {
@@ -568,19 +597,22 @@
      this.$emit("detailsClick", ev);
    },
    toAdd(item) {
      console.log("触发加入底库")
      this.$emit("addToBase", item);
    },
    tosearch(item) {
      this.searchT
      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 // 数据来自于底库
      }
      // window.open(href + '?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + url + '&compType=' + compType)

      let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType;
      let message
      if (this.fromCluster) {
        message = 'toCluster?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '&timestamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1];
      } else {
        message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '&timestamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1];
      }
      window.parent.postMessage({
        msg: message
      }, "*")
@@ -593,15 +625,15 @@
  font-family: PingFangSC-Medium;
}
.color222 {
  font-size: 0.75rem;
  font-size: 12px;
  font-weight: 600;
  line-height: 1rem;
  line-height: 14px;
  color: #222222;
}
.color666 {
  color: #666666;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-size: 12px;
  line-height: 16px;
}
.box-card {
  cursor: default;
@@ -623,11 +655,11 @@
    .card-img-box {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      top: 50%;
      transform: translateY(-50%);
      .card-img-box-compear {
        height: 100%;
        width: 100%;
        display: flex;
        .card-img-box-compear-left {
@@ -636,8 +668,13 @@
          justify-content: center;
          align-items: Center;
          overflow: hidden;
          width: 100%;
          flex: 1;
          height: 100%;
        }
        .el-carousel {
          flex: 1;
          width: auto;
          height: auto !important;
        }
        .el-carousel__item {
          display: flex;
@@ -675,9 +712,10 @@
      }
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      //height: 100%;
      //object-fit: contain;
    }
    .s-card-left-isCompare-div {
      width: 60px;