调整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 !== ''"
@@ -351,14 +367,14 @@
    }
  },
  mounted() {
    console.log('ModelCard data',this.data);
    console.log('ModelCard data', this.data);
    console.log(this.data.baseInfo)
    console.log(this.initialIndex)
    //this.VideoPhotoData.activeName = "pic"
  },
  data() {
    return {
      activeName:'pic',
      activeName: 'pic',
      initialIndex: 0,
    };
  },
@@ -494,7 +510,6 @@
            }
            text-align: left;
            margin: 4px 0;
            
          }
        }
        .describeBigImage {
@@ -503,9 +518,9 @@
          float: left;
          margin-top: 5px;
          p {
            &.align-right{
            &.align-right {
              text-align: right;
              .camera-addr{
              .camera-addr {
                display: inline-block;
                vertical-align: top;
                width: 90px;

 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"> -->

@@ -64,12 +69,11 @@
<script>

import draggable from "vuedraggable"

import { findAllSdk } from '@/api/taskMange';

import {chunkArr} from '@/scripts/util';

import { chunkArr } from '@/scripts/util';

import bus from '@/plugin/bus'

export default {

  name: 'toolsEntry',

  components: { draggable },

  data () {

  data() {

    return {

      publicPath: process.env.BASE_URL,

      loading: true,

@@ -87,18 +91,17 @@
        }

      ],

      //rowSize: 3,

      badgeNum: 0,

      // badgeNum: 0,

    }

  },

  computed: {

    stateDocks () {

    stateDocks() {

      return this.$store.state.desktop.docks

    },

    carousels () {

    carousels() {

      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,15 +116,19 @@
      console.log(arr)

      return arr

    },

    rowSize (){

    badgeNum() {

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

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

    },

    rowSize() {

      if (window.innerHeight >= 930) {

        return 4;

      }else{

      } else {

        return 3;

      }

    }

  },

  mounted () {

  mounted() {

    this.getAllSdk();

    //this.carousels = 

    window.addEventListener('message', e => {

@@ -153,7 +160,7 @@


  },

  methods: {

    chunk (arr, size) {

    chunk(arr, size) {

      size = Math.max(size, 0);

      const len = arr == null ? 0 : arr.length;

      if (!len || size < 1) {

@@ -167,15 +174,15 @@
      }

      return result

    },

    getAllSdk () {

    getAllSdk() {

      findAllSdk().then(res => {

        this.installedSdk = res.data.filter(item => item.installed)

      }).catch(e => {

        console.log(e)

      })

    },

   
    dockClick (dock) {



    dockClick(dock) {



      if (dock.type === '1') {

        window.open(dock.url);

@@ -206,7 +213,7 @@
        this.$store.commit('desktop/resetMinFrame', dock.id);

      }

    },

    resetDockItem () {

    resetDockItem() {

      const dockItems = document.getElementsByClassName('dock-item');

      const dockMask = document.getElementsByClassName('dock-mask')[0];

      for (let i = 0; i < dockItems.length; i++) {

@@ -217,7 +224,7 @@
      }

      dockMask.style.width = dockItems.length * 60 + 40 + 'px';

    },

    addFrameByName (name, params) {

    addFrameByName(name, params) {

      let dock = null;

      this.$store.state.desktop.docks.forEach(app => {

        if (app.name === name) {

@@ -244,15 +251,15 @@
        screenshot: ''

      });

    },

    addFrameByID (id, params) {

    
    addFrameByID(id, params) {



      let dock = null;

      let toClose = null

      this.$store.state.desktop.docks.forEach(app => {

        if (app.id == id) {

          dock = app;

        }

        if(app.name=="algorithmManage"){

        if (app.name == "algorithmManage") {

          toClose = app

        }

      });