生产管理看板+删不需要的文件

haoxuan

2023-08-31 401524fb5661d57ffb2229d683fe4de85b65fd1c

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

@@ -1,125 +1,413 @@
<template>

  <div class="tools-entry">

    <div class="entry-wrap">

      <div class="app-list clearFix">

          <div class="app" v-for="dock in this.$store.state.desktop.docks" :key="dock.id" @click="dockClick(dock)">

            <div class="wrap">

              <div class="app-icon">

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

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

            <div v-for="item in carousel" :key="item.id">

              <div

                class="app"

                v-if="item.url && !item.sdk_name"

                @click="dockClick(item)"

              >

                <div class="wrap">

                  <div class="app-icon">

                    <div

                      class="badge"

                      v-if="item.name == 'algorithmManage' && badgeNum > 0"

                    >

                      {{ badgeNum }}

                    </div>

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

                  </div>

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

                </div>

              </div>

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

            </div> 
              <div

                class="app sdk"

                v-if="item.sdk_name"

                @click="openSdkVideo(item)"

              >

                <div class="wrap">

                  <div class="app-icon">

                    <img

                      :src="

                        item.iconBlob.indexOf(',') > 0

                          ? item.iconBlob

                          : `data:image/png;base64,${item.iconBlob}`

                      "

                    />

                  </div>

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

                </div>

              </div>

            </div>

          </div>

        </el-carousel-item>

      </el-carousel>



      <div class="logo">

        <img :src="`${publicPath}images/desktop/desk-logo.png`" alt />

      </div>

    </div>



    <div class="videolist_appbox" v-if="showVideo">

      <div class="video_t">

        <video

          width="1164"

          height="655"

          :src="videoUrl"

          type="video/mp4"

          poster=""

          controls="controls"

          preload="none"

          autoplay="autoplay"

          controlslist="nodownload"

        ></video>

      </div>

      <!-- <div class="mask"></div> -->

      <div class="video_close" @click="showVideo = false">

        <!-- <img src="../../assets/img/about_dot18.png"> -->

        <!-- <span class="icon iconfont">&#xe70b;</span> -->

        <i class="el-icon-close"></i>



        
      </div>

    </div>

  </div>

</template>



<script>

import draggable from "vuedraggable";

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

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

import bus from "@/plugin/bus";

export default {

  name:'toolsEntry',

  data(){

  name: "toolsEntry",

  data() {

    return {

      publicPath: process.env.BASE_URL,

      // applist:[

      //   {src: `/images/app-mid/camera-access.png`, name:'摄像机接入'},

      //   {src: `/images/app-mid/datastack-config.png`, name:'数据栈配置'},

      //   {src: `/images/app-mid/DVR-access.png`, name:'硬盘录像机接入'},

      //   {src: `/images/app-mid/data-push.png`, name:'数据推送'},

      //   {src: `/images/app-mid/GB-config.png`, name:'GB28281配置'},

      //   {src: `/images/app-mid/scene-config.png`, name:'场景配置'},

      //   {src: `/images/app-mid/library.png`, name:'比对库管理'},

      //   {src: `/images/app-mid/poll.png`, name:'轮询管理'},

      //   {src: `/images/app-mid/algorithm-manage.png`, name:'算法管理'},

      //   {src: `/images/app-mid/algorithm-store.png`, name:'算法商城'},

      //   {src: `/images/app-mid/hashrate-manage.png`, name:'算力管理'},

      //   {src: `/images/app-mid/monitor.png`, name:'实时监控-在线播放'},

      //   {src: `/images/app-mid/search.png`, name:'检索-统计查询'},

      //   {src: `/images/app-mid/360.png`, name:'全景视频'},

      //   {src: `/images/app-mid/log-manage.png`, name:'日志管理'},

      //   {src: `/images/app-mid/device.png`, name:'设备管理'},

      //   {src: `/images/app-mid/settings.png`, name:'系统设置'},

      //   {src: `/images/app-mid/vindicate.png`, name:'系统维护'}

      // ]

    }

      loading: true,

      showVideo: false,

      localApps: [],

      installedSdk: [],

      videoUrl: "",

      sdkList: [

        
      ],

    };

  },

  methods:{

    
  computed: {

    stateDocks() {

      return this.$store.state.desktop.docks;

    },

    carousels() {

      let pages = 0;

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

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

      let arr = null;

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

      if (window.innerHeight >= 930) {

        //this.rowSize = 4;

        arr = this.chunk(tempArr, 24);

      } else {

        //this.rowSize = 3;

        arr = this.chunk(tempArr, 18);

      }

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

    this.getAllSdk();

    //this.carousels =

    window.addEventListener("message", (e) => {

      if (e.data && e.data.msg) {

        let msg = e.data.msg;

        // token 不合法, 退出

        if (msg === "logout") {

          location.assign("/");

          return;

        }

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

      size = Math.max(size, 0);

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

      if (!len || size < 1) {

        return [];

      }

      let index = 0;

      let resIndex = 0;

      const result = new Array(Math.ceil(len / size));

      while (index < len) {

        result[resIndex++] = arr.slice(index, (index += size));

      }

      return result;

    },

    getAllSdk() {

      findAllSdk()

        .then((res) => {

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

        })

        .catch((e) => {

          console.log(e);

        });

    },

    dockClick(dock) {

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

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

        window.open(dock.url);

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

        debugger

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

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

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

          id: dock.id,

          icon: dock.src,

          title: dock.name,

          url: dock.url

          title: dock.title,

          url: dock.url,

        });

      } else if (dock.type === '3') {

        this.$store.commit('desktop/resetMinFrame', dock.id);

        this.resetDockItem();

        this.$store.commit("desktop/addMinDock", {

          id: dock.id,

          src: dock.src,

          alt: dock.title,

          type: "3",

          highlight: true,

          url: dock.url,

          screenshot: "",

        });

        //打开应用后异步抓拍,之后的抓拍采用这张固定的

        //if(dock.name=='cameraVideo'||dock.name=='search'||dock.name=='library'||dock.name=='cameraAccess'||dock.name=='dataStack'){

        setTimeout(() => {

          this.$parent.screenShot(dock);

        }, 1500);

        //}

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

        this.$store.commit("desktop/resetMinFrame", dock.id);

      }

    },

    openSdkVideo(dock) {

      if (dock.url && dock.sdk_name) {

        this.videoUrl = dock.url;

        this.showVideo = true;

      }

    },

    resetDockItem() {

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

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

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

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

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

        dockItems[i].width = 60;

        if (dockItems[i].parentNode.nextElementSibling) {

          dockItems[i].parentNode.nextElementSibling.style.marginLeft = "-35px";

        }

      }

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

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

    },

  }

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

      }

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

        id: dock.id,

        icon: dock.src,

        title: dock.title,

        url: dock.url + "?" + params,

      });

      this.$store.commit("desktop/addMinDock", {

        id: dock.id,

        src: dock.src,

        alt: dock.title,

        type: "3",

        highlight: true,

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

    },

  },

};

</script>



<style lang="scss">

  .tools-entry{

    //margin-top: 130px;

    position: absolute;

    top: 142px;

    left: 50%;

    transform: translateX(-50%);

    .entry-wrap{

      width: 1180px;

      padding: 0 60px;

      margin: 0 auto;

      .app-list{

        .app{

          width: 16.6%;

          margin-bottom: 54px;

          float: left;

          .wrap{

            .app-icon{

              text-align: center;

              line-height: 110px;

              width: 110px;

              height: 110px;

              margin: auto;

              img{

                vertical-align: middle;

                margin-right: -3px;

              }

.el-carousel__arrow--left {

  left: 0 !important;

}

.el-carousel__arrow--right {

  right: 0 !important;

}

.el-carousel__button {

  width: 12px !important;

  height: 12px !important;

  border-radius: 50% !important;

}

.tools-entry {

  //margin-top: 130px;

  position: absolute;

  top: 142px;

  left: 50%;

  transform: translateX(-50%);

  .entry-wrap {

    width: 1180px;

    padding: 0 60px;

    margin: 0 auto;

    .app-list {

      .app {

        width: 16.6%;

        margin-bottom: 54px;

        float: left;

        .wrap {

          .app-icon {

            text-align: center;

            line-height: 110px;

            width: 110px;

            height: 110px;

            margin: auto;

            position: relative;

            border-radius: 10px;

            img {

              vertical-align: middle;

              margin-right: -3px;

              width: 82px;

              // height: 82px;

            }

            .app-name{

              padding-top: 10px;

              text-align: center;

              font: Bold 16px/16px Microsoft JhengHei;

            .badge {

              position: absolute;

              top: 13px;

              right: 8px;

              width: 22px;

              height: 22px;

              font-size: 14px;

              background-color: red;

              border-radius: 50%;

              color: #fff;

              line-height: 22px;

              text-align: center;

            }

          }

          
          &:hover{

            .app-icon{

              background: rgba(0,0,0,.4);

            }

          .el-loading-mask {

            border-radius: 8px;

          }

          
          .el-loading-spinner {

            top: 20px;

          }

          .el-loading-spinner .path {

            stroke: #78adf7;

          }

          .el-loading-spinner .el-loading-text {

            line-height: 1;

            margin-top: -30px;

            color: #78adf7;

          }

          .app-name {

            padding-top: 10px;

            text-align: center;

            font: Bold 16px/16px Microsoft JhengHei;

            color: #fff;

          }

        }



        &:hover {

          .app-icon {

            background: rgba(0, 0, 0, 0.4);

          }

        }

      }

    }

    .logo {

      text-align: right;

      padding-right: 50px;

      user-select: none;

      margin-top: -74px;

      img {

        user-select: none;

        -webkit-user-drag: none;

      }

    }

  }

  .videolist_appbox {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 9999999;

  }



  .videolist_appbox .video_t {

    z-index: 2;



  }



  .videolist_appbox .mask {

    position: absolute;

    z-index: 1;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

  }



  .video_close {

    position: absolute;

    top: 0;

    right: 0;

    cursor: pointer;

    z-index: 3;

    color: #fff;

    background: lightgray;

    padding: 10px;

    border-radius: 20px;

    i{

          font-size: 20px;

    }

  }

}

</style>