xiaoshi_system/src/views/project/patentCollection/components/views/Picture.vue

<template>
  <!-- 图片视图 -->
  <div class="pic">
    <div class="item">
      <el-card shadow="hover" v-for="(item, index) in tableData" style="width:200px;margin:5px" :key="index">
        <div slot="header"
          style="width: 100%; white-space: nowrap;overflow-x: hidden;text-overflow: ellipsis;font-size:12px;">
          <div>
            序号：{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}
            <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small" @click.native="openAddRemark(item)" v-if="noveltySearch && !noveltyIsRemark(item)">添加查新标注</el-tag>
            <el-tag class="margin-left_10" style="cursor: pointer;" type="primary" effect="plain" size="small"  v-if="noveltySearch && noveltyIsRemark(item)" @click.native="openAddRemark(item)">已标注</el-tag>
          </div>
          <el-divider></el-divider>
          <span v-if="refresh"> 
            <el-checkbox-group :value="patentNoList" >
              <el-checkbox :label="item.patentNo" @change="changeSelect(item)">
                  <el-link v-if="item.ifSearch" :type="item.read === 1 ? 'success' : 'danger'"
                    @click.native.prevent="handleClick(item, index)">
                    <span v-html="getView(item, 'patentNo')"></span>
                  </el-link>
                  <template v-else>
                      <span v-html="getView(item, 'patentNo')"></span>
                      <span>（未匹配到专利）</span>
                  </template>
                  </el-checkbox>
                </el-checkbox-group>
             </span>
          <myTooltip :content="getView(item, 'title')">
            <div class="noWrap" v-html="getView(item, 'title')"></div>
          </myTooltip>
          <div v-if="noveltySearch  && $c.env == 'development'">
            <span>相关度</span><span v-if="!item.score"><i class="el-icon-loading"></i></span><el-progress v-else style="display:inline-block;width:calc(100% - 50px);margin-left:10px;" :text-inside="true" :stroke-width="20"  :percentage="item.score"  :color="customColors" ></el-progress>
          </div>
        </div>
        <div class="picture text-align_center" style="height: 200px;width:100%;line-height:200px;">
          <el-image fit="contain" :src="outside?item.pictureGuid:$commonJS.checkViewer(item.pictureGuid)"
            :preview-src-list="[outside?item.pictureGuid:$commonJS.checkViewer(item.pictureGuid)]" style="margin:0 auto;vertical-align:middle;"
            :style="{ width: item.imgWidth ? item.imgWidth : '100%', height: item.imgHeight ? item.imgHeight : '100%' }">
            <div slot="error" class="image-slot">
              <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" style="">
            </div>
          </el-image>
          <!-- <el-image v-if="(!projectId && item.abstractPath2) || projectId"
            :src="item.abstractPath2 ? item.abstractPath2 : getImagePath1(item)" :preview-src-list="[item.abstractPath2]"
            style="margin:0 auto;vertical-align:middle;"
            :style="{ width: item.imgWidth ? item.imgWidth : '100%', height: item.imgHeight ? item.imgHeight : '100%' }">
            <div slot="error" class="image-slot">
              <el-image :src="getErrorImage(item)" :preview-src-list="[getErrorImage(item)]">
                <div slot="error" class="image-slot">
                  <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" style="">
                </div>
              </el-image>
            </div>
          </el-image> -->

        </div>
      </el-card>
      <!--      
      </el-col>
    </el-row> -->
    </div>
    <addRemark ref="addRemark" :projectId="projectId" v-on="$listeners"></addRemark>
  </div>
</template>

<script>
// import { commonMixins } from "../../articles/components/mixins"
// import { patentViewList, patentKeywordsHighlight } from '../mixins'
import { projectData, handleData } from '../mixins/index'
export default {
  mixins: [projectData, handleData],
  props: [],
  // mixins:[commonMixins,patentViewList, patentKeywordsHighlight ],
  data() {
    return {

    }
  },
  computed: {
    // records() {
    //   return this.$store.state.patent.records
    // }
  },
  watch: {
    records(val, oldval) {
      if (val != oldval) {
        this.$nextTick(() => {
          this.addRecords()
          this.refreshCheckBox()
        })
      }
    }
  },
  mounted() {

  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>
.item{
  padding:10px;
  display: flex;
  flex-wrap: wrap;
}
  .item:empty{
    padding: 0;
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 80px;
    &::after{
      content: '暂无数据';
      color: #909399;
    }
    
  }
</style>
<style lang="scss">
.pic {
  .el-divider {
    margin: 5px 0px;
  }

  .el-card__header {
    padding: 5px !important
  }

  .el-card__body {
    padding: 0px !important
  }
}
</style>