web/apsDashboard-1.git

<template>
  <div class="box-card">
    <!-- 左侧图片区域 -->
    <!-- 比对模式 -->
    <div class="s-card-left-isCompare" v-if="showType == 'compare'">
      <div class="card-img-box">
        <div class="card-img-box-compear">
          <div class="card-img-box-compear-left" ref="firstImg">
            <img
              :src="'/httpImage/'+data.targetInfo[0].picSmUrl"
              :id="'/compear/'+data.targetInfo[0].picSmUrl"
              class="cursor-pointer"
              @click="detailsClick($event)"
            />
          </div>
          <el-carousel
            @change="changeInitialIndex"
            :initial-index="initialIndex"
            :autoplay="false"
            indicator-position="none"
            :arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
          >
            <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
              <img
                :src="'/httpImage/'+item.targetPicUrl"
                class="cursor-pointer"
                @click="detailsClick($event)"
              />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div
          class="s-card-left-isCompare-div compareScore111"
          style
          :style="{
            bottom: getBottom(),
            background: getUrl(data.baseInfo[initialIndex].bwType)
          }"
        >
          <b>{{ `${data.baseInfo[initialIndex].compareScore}%` }}</b>
        </div>
      </div>
    </div>
    <!-- 普通模式 -->
    <div v-else class="s-card-left">
      <div class="s-card-left-box" v-if="data.targetInfo == null || data.targetInfo.length > 0">
        <el-carousel
          trigger="click"
          height="100%"
          indicator-position="none"
          v-if="data.picMaxUrl.length > 1"
          :autoplay="false"
          @change="changeCarousel"
        >
          <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'">
            <img :src="'/httpImage/'+item" class="cursor-pointer" @click="detailsClick($event)" />
          </el-carousel-item>
        </el-carousel>
        <img
          v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == '' || !data.targetInfo[0].picSmUrl"
          :src="'/httpImage/'+data.picMaxUrl[0]"
          class="cursor-pointer"
          @click="detailsClick($event)"
        />
        <img
          v-else
          :src="'/httpImage/'+data.targetInfo[0].picSmUrl"
          class="cursor-pointer"
          @click="detailsClick($event)"
        />
      </div>
      <div class="s-card-left-box" v-else>
        <img
          :src="'/httpImage/'+data.baseInfo[0].targetPicUrl"
          class="cursor-pointer"
          @click="detailsClick($event)"
        />
      </div>
    </div>
    <!-- 右侧文字区域 -->
      <!-- 多张底图切换 -->
    <div class="s-card-right-isCompare" v-if="showType == 'compare'">
      <div
        class="person" 
        :style="overflowState ? 'overflow: hidden' : 'overflow: auto'"
        @mouseenter="cardMouseenter($event)"
        @mouseleave="cardMouseleave($event)"
      >
        <p :title="data.baseInfo[0].compareScore" class="score" v-if="showType == 'findByPic'">
          <span v-if="data.id">{{ data.compareScore }}%</span>
          <span v-else>{{ data.baseInfo[0].compareScore }}%</span>
        </p>
        <p :title="data.picDate">
          <span class="fontStyle color222">{{ data.picDate }}</span>
        </p>
        <p :title="data.cameraAddr" style="margin-bottom: 0.5rem;">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
        </p>
        <el-tooltip placement="right">
          <div slot="content">
            <p v-for="(item,index) in data.alarmRules" :key="index+'rule'">
              <span >{{data.taskName}}</span>&nbsp;<span  v-if="item.alarmLevel !== '撤防'" :style="item.defenceState ? 'color:red':''">&nbsp;{{item.alarmLevel}}</span>&nbsp;<span v-if="item.isLink">&nbsp;联动任务</span>
            </p>
          </div>
          <el-button style="line-height:1.0625rem;border:none;padding:0;overflow:hidden;text-overflow:ellipsis;cursor:default;width:7.5rem;text-align:left">
            <span v-for="(item,index) in data.alarmRules" :key="index+'rule1'" style="text-overflow:ellipsis;max-width:6.25rem">
              <span class="fontStyle color666">{{data.taskName}}</span>&nbsp;<span class="fontStyle color666" v-if="item.alarmLevel !== '撤防'" :style="item.defenceState ? 'color:red':''">&nbsp;{{item.alarmLevel}}</span>&nbsp;<span class="fontStyle color666" v-if="item.isLink">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length-1">/&nbsp;</span>
            </span>
          </el-button>
        </el-tooltip>
        <el-tooltip placement="right">
          <div slot="content">
            <p>
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName">{{ data.baseInfo[initialIndex].tableName }}</span>&nbsp;<span class="fontStyle" v-if="data.baseInfo[initialIndex].personName">/&nbsp;{{ data.baseInfo[initialIndex].personName }}</span>&nbsp;<span class="fontStyle" v-if="data.baseInfo[initialIndex].sex">/&nbsp;{{ data.baseInfo[initialIndex].sex }}</span>&nbsp;<span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel">/&nbsp;{{ data.baseInfo[initialIndex].monitorLevel }}</span>
            </p>
          </div>
          <el-button style="line-height:1.0625rem;border:none;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;cursor:default;width:7.5rem;text-align:left">
            <span
            :style="data.baseInfo[initialIndex].bwType === '1'
              ? 'color: red;font-size:0.75rem;line-height:1.25rem'
              : 'font-size:0.75rem;line-height:1.25rem'">
              <span class="fontStyle" v-if="data.baseInfo[initialIndex].tableName">{{ data.baseInfo[initialIndex].tableName }}</span>&nbsp;<span class="fontStyle" v-if="data.baseInfo[initialIndex].personName">/&nbsp;{{ data.baseInfo[initialIndex].personName }}</span>&nbsp;<span class="fontStyle" v-if="data.baseInfo[initialIndex].sex">/&nbsp;{{ data.baseInfo[initialIndex].sex }}</span>&nbsp;<span class="fontStyle" v-if="data.baseInfo[initialIndex].monitorLevel">/&nbsp;{{ data.baseInfo[initialIndex].monitorLevel }}</span>
            </span>
          </el-button>
        </el-tooltip>
      </div>
      <div class="card-icon-box">
        <el-tooltip class="item" effect="dark" content="详情" placement="top">
          <i class="fontFamily systemmulu" @click="detailsClick($event)"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="查找此人" placement="top">
          <i class="fontFamily system1"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="加入地库" placement="top">
          <i class="fontFamily systemyonghutianjia"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="收藏" placement="top">
          <i class="fontFamily systemxing"></i>
        </el-tooltip>
      </div>
    </div>
    <!-- 底库人员模式 -->
    <div v-else-if="!data.id" class="s-card-right-isCompare">
      <div
        class="person"
        :style="overflowState ? 'overflow: hidden' : 'overflow: auto'"
        @mouseenter="cardMouseenter($event)"
        @mouseleave="cardMouseleave($event)"
      >
        <p :title="data.baseInfo[0].compareScore" class="score" style="font-family: PingFangSC-Medium;font-size: 1.25rem;color: #F53D3D;letter-spacing: 0.4px;">
          <span >{{ data.baseInfo[0].compareScore }}%</span>
        </p>
        <p :style="data.baseInfo[0].bwType == '0' ? 'font-size:0.75rem;line-height:1.25rem' : 'color:red;font-size:0.75rem;line-height:1.25rem'">
          {{ data.baseInfo[0].tableName }}
        </p>
        <p :style="data.baseInfo[0].bwType == '0' ? '' : 'color:red'">
          <span>{{ data.baseInfo[0].personName }}</span>&nbsp;&nbsp;<span v-if="data.baseInfo[0].sex">/&nbsp;{{ data.baseInfo[0].sex }}</span>
        </p>
      </div>
      <div class="card-icon-box">
          <el-tooltip class="item" effect="dark" content="查找此人" placement="top" style="margin-left:0.625rem">
            <i class="fontFamily system1" @click="tosearch(data)" title="查找此人"></i>
          </el-tooltip>
        </div>
    </div>
    <!-- 没有底图 16：9图片 -->
    <div v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" class="s-card-right-signal">
      <div
        class="signal-img-dev"
        :style="overflowState ? 'overflow: hidden' : 'overflow: auto'"
        @mouseenter="cardMouseenter($event)"
        @mouseleave="cardMouseleave($event)"
      >
        <p :title="data.picDate">
          <span class="fontStyle color222">{{ data.picDate }}</span>
        </p>
        <p :title="data.cameraAddr" style="margin-bottom: 8px;">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
        </p>
        <el-tooltip placement="right" popper-class="atooltip">
          <div slot="content">
            <p v-for="(item,index) in data.alarmRules" :key="index+'rule'">
              <span>{{data.taskName}}</span>&nbsp;&nbsp;
              <span
                v-if="item.alarmLevel !== '撤防'"
                :style="item.defenceState ? 'color:red':''"
              >{{item.alarmLevel}}</span>&nbsp;
              <span v-if="item.linkInfo == '联动任务'">&nbsp;联动任务</span>
            </p>
          </div>
          <el-button
            style="border:none;padding:0;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left;background:#0D1A45"
          >
            <span
              v-for="(item,index) in data.alarmRules"
              :key="index+'rule1'"
              style="text-overflow:ellipsis;max-width:100px"
            >
              <span class="fontStyle color666">{{data.taskName}}</span>&nbsp;&nbsp;
              <span
                class="fontStyle color666"
                v-if="item.alarmLevel !== '撤防'"
                :style="item.defenceState ? 'color:red':''"
              >{{item.alarmLevel}}</span>&nbsp;
              <span class="fontStyle color666" v-if="item.linkInfo == '联动任务'">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length-1">/&nbsp;</span>
            </span>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    
    <!-- 没有底库，非比对，普通模式 -->
        <div v-else-if="data.targetInfo && data.targetInfo !== null && data.targetInfo[0].picSmUrl !== '' && data.targetInfo.length <= 1" class="s-card-right-signal">
      <div
        class="signal-img-dev"
        :style="overflowState ? 'overflow: hidden' : 'overflow: auto'"
        @mouseenter="cardMouseenter($event)"
        @mouseleave="cardMouseleave($event)"
      >
        <p
          class="score"
          v-if="showType == 'findByPic'"
          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>
        </p>
        <p :title="data.picDate">
          <span class="fontStyle color222">{{ data.picDate }}</span>
        </p>
        <p :title="data.cameraAddr" style="margin-bottom: 8px;">
          <span class="fontStyle color222">{{ data.cameraAddr }}</span>
        </p>
        <el-tooltip placement="right" popper-class="atooltip" v-if="showType != 'findByPic'">
          <div slot="content">
            <p v-for="(item,index) in data.alarmRules" :key="index+'rule2'">
              <span class="fontStyle">{{data.taskName}}</span>&nbsp;&nbsp;
              <span
                class="fontStyle"
                v-if="item.alarmLevel !== '撤防'"
                :style="item.defenceState ? 'color:red':''"
              >{{item.alarmLevel}}</span>&nbsp;
              <span v-if="item.linkInfo == '联动任务'" class="fontStyle">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length-1">/&nbsp;</span>
            </p>
          </div>
          <el-button
            style="border:none;padding:0;margin:0px;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left;background:#0D1A45"
          >
            <span v-for="(item,index) in data.alarmRules" :key="index+'rule3'">
              <span class="fontStyle color666">{{data.taskName}}</span>&nbsp;&nbsp;
              <span
                class="fontStyle color666"
                v-if="item.alarmLevel !== '撤防'"
                :style="item.defenceState ? 'color:red':''"
              >{{item.alarmLevel}}</span>&nbsp;
              <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666">&nbsp;联动任务</span>
              <span v-if="index < data.alarmRules.length-1">/&nbsp;</span>
            </span>
          </el-button>
        </el-tooltip>
 
        <!-- <p>
          <span class="fontStyle color666">{{ data.sex }}</span>&nbsp;/&nbsp;<span class="fontStyle color666">{{ data.ageDescription }}</span>&nbsp;/&nbsp;<span class="fontStyle color666">{{ data.race }}</span>
        </p>-->
        <el-tooltip placement="right" popper-class="atooltip">
          <div slot="content">
            <p v-for="(item,index) in data.baseInfo" :key="index+'base1'">
              <span class="fontStyle">{{item.tableName}}</span>&nbsp;
              <span class="fontStyle">/&nbsp;{{item.targetName}}</span>&nbsp;
              <span class="fontStyle" >/&nbsp;{{item.labels.split("/")[1]}}</span>&nbsp;
              <span class="fontStyle" >/&nbsp;{{item.labels.split("/")[0]}}</span>
            </p>
          </div>
          <el-button
            style="border:none;padding:0;margin:0px;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left;background:#0D1A45"
          >
            <span
              v-for="(item,index) in data.baseInfo"
              :key="index+'base'"
              :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">/&nbsp;{{item.targetName}}</span>&nbsp;
              <span class="fontStyle" >/&nbsp;{{item.labels.split("/")[1]}}</span>&nbsp;
              <span class="fontStyle" >/&nbsp;{{item.labels.split("/")[0]}}</span>
            </span>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 持续时间模式，多张图 -->
    <div v-else class="s-card-right-double">
      <transition name="fade">
        <div
          class="double-person"
          :style="overflowState ? 'overflow: hidden' : 'overflow: auto'"
          @mouseenter="cardMouseenter($event)"
          @mouseleave="cardMouseleave($event)"
        >
          <div>
            <p :title="data.picDate">
              <span class="fontStyle color222">{{ data.picDate }}</span>
            </p>
            <p :title="data.cameraAddr" style="margin-bottom: 8px;">
              <span class="fontStyle color222">{{ data.cameraAddr }}</span>
            </p>
            <p v-for="(item,index) in data.alarmRules" :key="index+'rule'">
              <span class="fontStyle color666">{{data.taskName}}</span>&nbsp;/&nbsp;
              <span
                class="fontStyle color666"
                :style="item.defenceState ? 'color:red':''"
              >{{item.alarmLevel}}</span>&nbsp;/&nbsp;
              <span v-if="item.linkInfo == '联动任务'" class="fontStyle color666">联动任务</span>
              <span v-if="index < data.alarmRules.length-1">/&nbsp;</span>
            </p>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
  },
  props: {
    data: {
      type: Object,
      default: null
    },
    showType: {
      type: String,
      default: "search"
    }
  },
  data() {
    return {
      initialIndex: 0,
      carouselIndex: 0,
      overflowState: true
    };
  },
  methods: {
    changeInitialIndex(index) {
      this.initialIndex = index;
    },
    cardMouseenter(ev) {
      this.overflowState = false;
    },
    cardMouseleave(ev) {
      this.overflowState = true;
    },
    changeCarousel(index) {
      this.carouselIndex = index;
    },
    detailsClick(ev) {
      this.$emit("detailsClick", ev);
    },
    tosearch(item){
      var curWwwPath = window.document.location.href;
      var pathname= window.document.location.pathname;
      var pos = curWwwPath.indexOf(pathname);
      var localhostPath = curWwwPath .substring(0,pos); //ip+port
      var href = localhostPath+"/Layout/Searching"
      console.log("跳转地址",href)
      let captureId = item.id
      var url = item.picSmUrl? item.picSmUrl[0] : item.baseInfo[0].personPicUrl
      window.open(href+'?showType=findByPic&captureId=' + captureId + '&picSmUrl=' + url)
    }
  }
};
</script>
<style lang="scss" scoped>
.fontStyle {
  font-family: PingFangSC-Medium;
}
.color222 {
  font-family: PingFangSC-Regular;
  font-size: 0.625rem;
  color: #95B7FF;
  line-height: 1.125rem
}
.color666 {
  font-family: PingFangSC-Regular;
  font-size: 0.6875rem;
  color: #687BE3;
  line-height: 1.25rem
}
</style>
 
<style lang="scss" scoped>
.box-card {
  .el-carousel__arrow {
    height: 1.25rem;
    width: 1.25rem;
  }
  height: 100%;
  .el-card__body {
    height: 100%;
    padding: 0.3125rem;
    box-sizing: border-box;
  }
  .s-card-left-isCompare {
    float: left;
    height: 100%;
    width: 60%;
    .card-img-box {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      .card-img-box-compear {
        height: 100%;
        width: 100%;
        display: flex;
        .card-img-box-compear-left {
          display: inline-block;
          display: flex;
          justify-content: center;
          align-items: Center;
          overflow: hidden;
          width: 100%;
          height: 100%;
        }
        .el-carousel__item {
          display: flex;
          justify-content: center;
          align-items: Center;
          overflow: hidden;
        }
      }
    }
    .card-icon-box {
      width: 100%;
      text-align: left;
      position: absolute;
      bottom: 0px;
      i {
        font-size: 1.25rem !important;
        padding-right: 0.625rem;
        cursor: pointer;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .s-card-left-isCompare-div {
      width: 2.5rem;
      position: absolute;
      left: calc(50% - 2rem);
      bottom: 1rem;
      padding: 0px 0.5rem;
      height: 1.25rem;
      line-height: 1.25rem;
      color: white;
      background-color: red;
      z-index: 2;
      border-top-right-radius: 0.3125rem;
      border-top-left-radius: 0.3125rem;
    }
  }
  .s-card-left {
    float: left;
    height: 100%;
    width: 45%;
    .s-card-left-box {
      overflow: hidden;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-carousel__arrow {
        top: 50%;
        bottom: inherit;
      }
    }
    .card-icon-box {
      height: 1.875rem;
      width: 100%;
      text-align: left;
      margin-left: 0.625rem;
      padding-top: 0.625rem;
      i {
        color: #3D68E1;
        font-size: 1.25rem !important;
        padding-right: 0.625rem;
        cursor: pointer;
      }
    }
    .el-carousel {
      height: 100%;
      width: 100%;
      .el-carousel__container {
        height: 100 !important;
        width: 100%;
      }
      .el-carousel__item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .s-card-right-isCompare {
    width: 40%;
    height: 100%;
    float: left;
    padding-left: 10px;
    box-sizing: border-box;
    position: relative;
    .active-pull {
      height: 100% !important;
      overflow: auto !important;
      position: relative;
      z-index: 1;
    }
    .overflow {
      overflow: auto !important;
    }
    .person {
      height: calc(100% - 40px);
      overflow: hidden;
      text-align: left;
      .score {
        font-size: 1.5625rem;
      }
      p {
        width: 100%;
        overflow: hidden;
        padding: 3px 0px;
        text-overflow: ellipsis;
        white-space: nowrap;
        // cursor: pointer;
        b {
          display: inline-block;
          width: 3rem;
        }
      }
    }
    .card-icon-box {
      width: 100%;
      text-align: left;
      position: absolute;
      bottom: 0px;
      i {
        color: #3D68E1;
        font-size: 1.25rem !important;
        padding-right: 0.625rem;
        cursor: pointer;
      }
    }
  }
  .s-card-right-signal {
    //width: 55%;
    width: 50%;
    height: 100%;
    float: left;
    overflow: hidden;
    text-align: left;
    padding-left: 0.625rem;
    box-sizing: border-box;
    position: relative;
    p {
      width: 100%;
      overflow: hidden;
      padding: 3px 0px;
      text-overflow: ellipsis;
      // cursor: pointer;
      white-space: nowrap;
      b {
        display: inline-block;
        width: 3rem;
      }
    }
    .signal-img-dev {
      height: 100%;
      width: 100%;
      //overflow: auto;
    }
    .right-bottom {
      width: 100%;
      text-align: left;
      position: absolute;
      bottom: 0px;
      i {
        color: #3D68E1;
        font-size: 1.25rem !important;
        padding-right: 0.625rem;
        cursor: pointer;
      }
    }
  }
  .s-card-right-double {
    width: 50%;
    height: 100%;
    float: left;
    overflow: hidden;
    text-align: left;
    box-sizing: border-box;
    .double-person {
      padding: 0.625rem;
      box-sizing: border-box;
      overflow: auto;
      p {
        width: 100%;
        overflow: hidden;
        padding: 3px 0px;
        text-overflow: ellipsis;
        white-space: nowrap;
        // cursor: pointer;
        b {
          display: inline-block;
          width: 3rem;
        }
      }
    }
    .double-person,
    div {
      height: 100%;
      width: 100%;
    }
  }
}
</style>