数据栈目录树作响应式高度

hanbaoshan

2020-12-03 8ca3c7fe1f0476a3e2ea10cf4a7fe7c448e5581d

 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)"
              />
@@ -54,28 +54,24 @@
          @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'"
          :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] | httpImage" class="cursor-pointer" />
      </div>
    </div>
    <!-- 右侧文字区域 -->
@@ -133,7 +129,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"
@@ -159,7 +155,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"
@@ -205,7 +201,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">
@@ -358,15 +354,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
@@ -378,15 +371,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>
@@ -525,6 +515,25 @@
    },
    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) {
      return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
    }
  },
  data() {