hanbaoshan
2020-10-20 98a6297b10a4b97c3022f84d3ba7908c178d9ee0
src/components/subComponents/CardItem.vue
@@ -37,7 +37,7 @@
            background: getUrl(data.baseInfo[initialIndex].bwType)
          }"
        >
          <b>{{ `${data.baseInfo[initialIndex].compareScore}%` }}</b>
          <b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
        </div>
      </div>
    </div>
@@ -87,12 +87,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>
@@ -200,7 +196,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'"
@@ -230,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,11 +312,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>
@@ -469,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>
@@ -488,14 +484,24 @@
</template>
<script>
import cardType from "../../mockData/cardType.ts";
import bus from "@/main";
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() {
    bus.$on('refreshCompareImg', () => {
      // this.tempShowType = false
    })
    window.addEventListener("resize", this.watchWindow);
  },
  props: {
@@ -508,41 +514,37 @@
      default: "search"
    }
  },
  watch: {
    data: {
      handler(val, oldVal) {
        console.log('数据发生变化')
        this.$forceUpdate()
      },
      deep: true
    }
  },
  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) + "%"
    }
  },
  data() {
    return {
      tempShowType: true,
      initialIndex: 0,
      cardType,
      carouselIndex: 0,
      dialogVisible: false,
      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
@@ -554,9 +556,9 @@
    },
    getUrl(bwtype) {
      if (bwtype == 1) {
        return `url(${require("@/assets/bg/red.png")})`
        return `url(${require("@/assets/img/red.png")})`
      } else {
        return `url(${require("@/assets/bg/green.png")})`
        return `url(${require("@/assets/img/green.png")})`
      }
    },
    changeInitialIndex(index) {
@@ -575,23 +577,21 @@
      this.$emit("detailsClick", ev);
    },
    toAdd(item) {
      console.log("触发加入底库")
      this.$emit("addToBase", item);
    },
    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"
      let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
      var url = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
      console.log("跳转地址", href, "url", url)
      var compType = 1 //  数据来自于es
      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 + '&timestamp=' + new Date().getTime();
      //let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType;
      window.parent.postMessage({
        msg: message
      }, "*")
    }
  }
};