优化联动规则加载场景列表的操作

zhangzengfei

2021-06-11 fa7044f3ccc9a91bc2bc117d1a06f650d86554f2

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

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

@@ -23,33 +28,12 @@
                  <div class="app-icon">

                    <img

                      :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                      style="width:82%"

                    />

                  </div>

                  <div class="app-name">{{item.sdk_name}}</div>

                </div>

              </div>

            </div>

            <!-- </draggable> -->

            <!-- <div class="app" v-for="dock in stateDocks" :key="dock.id" @click="dockClick(dock)">

              <div class="wrap">

                <div class="app-icon">

                  <img :src="dock.src" :alt="dock.alt" />

                </div>

                <div class="app-name">{{dock.title}}</div>

              </div>

            </div>

            <div class="app sdk" v-for="(item,index) in sdkList" :key="index+'sdk'">

              <div class="wrap">

                <div class="app-icon">

                  <img

                    :src="item.iconBlob.indexOf(',')>0? item.iconBlob:`data:image/png;base64,${item.iconBlob}`"

                    style="width:82%"

                  />

                </div>

                <div class="app-name">{{item.sdk_name}}</div>

              </div>

            </div>-->

          </div>

        </el-carousel-item>

      </el-carousel>

@@ -64,10 +48,11 @@
<script>

import draggable from "vuedraggable"

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

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,

@@ -84,33 +69,42 @@
          title: '人员跟踪'

        }

      ],

      rowSize: 3,

      badgeNum: 0,

      //rowSize: 3,

      // 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) {

        this.rowSize = 4;

        //this.rowSize = 4;

        arr = this.chunk(tempArr, 24);

      } else {

        this.rowSize = 3;

        //this.rowSize = 3;

        arr = this.chunk(tempArr, 18);

      }

      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;

      } else {

        return 3;

      }

    }

  },

  mounted () {

  mounted() {

    this.getAllSdk();

    //this.carousels = 

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

@@ -121,18 +115,26 @@
          location.assign("/");

          return;

        }



        // 打开检索, toSearch?showType=findByPic&targetId=108ba0bc-b0a1-433d-8e1e-d5d2e712b53b&picSmUrl=192.168.20.10:6700/47628,7cc869f3a9c714&compType=1

        if (msg.indexOf("toSearch") >= 0) {

          let params = msg.substring(7);

          this.addFrameByName("search", params)

        }

        if (msg.indexOf("toCluster") >= 0) {

          let params = msg.substring(8);

          this.addFrameByName("searchForCluster", params)

        }



        if (msg.indexOf("toOpenApp") >= 0) {

          let id = msg.substring(10);

          console.log(id);

          this.addFrameByID(id)

        }

      }

    });



  },

  methods: {

    chunk (arr, size) {

    chunk(arr, size) {

      size = Math.max(size, 0);

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

      if (!len || size < 1) {

@@ -146,18 +148,17 @@
      }

      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);

      } else if (dock.type === '2' && !dock.isOpen) {



        this.$store.dispatch('desktop/addFrame', {

          id: dock.id,

          icon: dock.src,

@@ -182,8 +183,9 @@
      } else if (dock.type === '2' && dock.isOpen) {

        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++) {

@@ -194,15 +196,13 @@
      }

      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) {

          dock = app;

        }

      });



      if (dock.isOpen) {

        this.$store.dispatch('desktop/closeFrame', dock);

      }

@@ -221,6 +221,19 @@
        url: dock.url,

        screenshot: ''

      });

    },

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

          toClose = app

        }

      });

      this.dockClick(dock)

    }

  }

};

@@ -261,9 +274,12 @@
            height: 110px;

            margin: auto;

            position: relative;

            border-radius: 10px;

            img {

              vertical-align: middle;

              margin-right: -3px;

              width: 82px;

              // height: 82px;

            }

            .badge {

              position: absolute;