调整card显示showLabels的样式. 修复bug

zhangzengfei

2021-03-25 f79294a7caf23962a464fdc605e426a87c577d15

调整card显示showLabels的样式. 修复bug

 src/components/subComponents/ModelCard.vue

@@ -12,16 +12,19 @@
            <p class="img-box-title">
              <b>全景图</b>
            </p>
            <!-- 人脸类型 -->
            <img-down
              v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
              :url="data.picMaxUrl[0]"
            ></img-down>
            <!-- 人脸类型 -->

            <!-- 普通yolo类 -->
            <img-down
              v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length == 1"
              :url="data.picMaxUrl[0]"
            ></img-down>
            <!-- 普通yolo类 -->

            <!-- 持续时间yolo类 -->
            <el-carousel
              v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length > 1"
              trigger="click"
@@ -32,20 +35,26 @@
                <img-down :url="item"></img-down>
              </el-carousel-item>
            </el-carousel>
            <!-- 持续时间yolo类 -->

            <!-- yolo类大图 -->
            <div
              class="describe"
              v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
            >
              <p>
                <span class="fontStyleForModel" style="font-weight:normal">{{ data.picDate | formatTime }}</span>
                <span
                  class="fontStyleForModel"
                  style="font-weight:normal"
                >{{ data.picDate | formatTime }}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
                <span
                  class="fontStyleForModel analyServer"
                  style="margin-left:20px;"
                >{{ data.analyServerName }}</span>
              </p>
              <p>
                
              </p>
              <p></p>
              <p style="width:100%">
                <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
                  <span class="fontStyleForModel">{{data.taskName}}</span>&nbsp;&nbsp;
@@ -58,13 +67,21 @@
                </span>
              </p>
            </div>
            <!-- yolo类大图 -->

            <!-- 人脸类大图  -->
            <div class="describeBigImage" v-else>
              <p>
                <span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
              </p>
              <p class="align-right">
                <span class="fontStyleForModel camera-addr" :title="data.cameraAddr">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
                <span
                  class="fontStyleForModel camera-addr"
                  :title="data.cameraAddr"
                >{{ data.cameraAddr }}</span>
                <span
                  class="fontStyleForModel analyServer"
                  style="margin-left:20px;"
                >{{ data.analyServerName }}</span>
              </p>
              <p style="width:100%">
                <span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -78,12 +95,15 @@
                </span>
              </p>
              <p style="width:100%">
                <span class="fontStyleForModel">{{data.showLabels}}</span>
                <span
                  style="white-space: nowrap;font-weight: 600;font-size: 13px;"
                >{{data.showLabels}}</span>
              </p>
            </div>
            <!-- 人脸类大图  -->
          </div>
        </div>

        <!-- 弹框右侧 -->
        <div
          v-if="data.targetInfo && data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
          class="model-card-box-right"
@@ -172,6 +192,7 @@
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="视频" name="video" class="video-tabs">
        <div
          class="model-card-box-left"
@@ -186,11 +207,6 @@
              style="margin-top: 12px;"
            >您的浏览器不支持 video 标签。</video>
          </div>
          <!-- <div class="merge">
            <el-button type="primary" @click="mergeVideo">合并视频</el-button>
            <a name="download" @click="downloadfile">下载</a>
            <a href="/httpImage/192.168.20.112:6081/31,02c86c199cd9b1" download="panlei.mp4">下载2</a>
          </div>-->
        </div>
        <div
          v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
@@ -494,7 +510,6 @@
            }
            text-align: left;
            margin: 4px 0;
            
          }
        }
        .describeBigImage {

 src/pages/desktop/index/components/ToolsEntry.vue

@@ -1,7 +1,12 @@
<template>

  <div class="tools-entry">

    <div class="entry-wrap">

      <el-carousel :height="rowSize==3?'600px':'770px'" :autoplay="false" arrow="never" :indicator-position="carousels.length==1?'none':''">

      <el-carousel

        :height="rowSize==3?'600px':'770px'"

        :autoplay="false"

        arrow="never"

        :indicator-position="carousels.length==1?'none':''"

      >

        <el-carousel-item v-for="(carousel,index) in carousels" :key="index">

          <div class="app-list clearFix sdk-list">

            <!-- <draggable v-model="carousel" @start="drag=true" @end="drag=false"> -->

@@ -68,7 +73,6 @@
import bus from '@/plugin/bus'

export default {

  name: 'toolsEntry',

  components: { draggable },

  data () {

    return {

      publicPath: process.env.BASE_URL,

@@ -87,7 +91,7 @@
        }

      ],

      //rowSize: 3,

      badgeNum: 0,

      // badgeNum: 0,

    }

  },

  computed: {

@@ -98,7 +102,6 @@
      let pages = 0;

      let tempArr = this.stateDocks.concat(this.installedSdk);

      let upgradeArr = tempArr.filter(item => item.isUpgrade);

      this.badgeNum = upgradeArr.length;

      let arr = null;

      //根据屏幕高度来判断是展示3排还是4排 阈值:970

      if (window.innerHeight >= 930) {

@@ -113,6 +116,10 @@
      console.log(arr)

      return arr

    },

    badgeNum() {

      let tempArr = this.stateDocks.concat(this.installedSdk);

      return tempArr.filter(item => item.isUpgrade).length;

    },

    rowSize (){

      if (window.innerHeight >= 930) {

        return 4;