feat: sort camera tree

zhangzengfei

2020-09-04 b23a2a35a14b010a3b97a1b61a02ec179dfab924

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

@@ -1,64 +1,65 @@
<template>
  <div class="tools">
    <div class="center">
      <div class="tools-left">
        <div
          :class="['tools-icon', {clicked:this.$store.state.desktop.preferenceVisiable}]"
          @click="togglePreference()"
        >
          <img class="system" :src="`${publicPath}images/header-icon/system.png`" />
          <!-- <span class="fa fa-apple"></span> -->
        </div>
        <div class="tools-icon" @click="openSafari()">
          <!-- <span class="fa fa-safari"></span> -->
          <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt="">
        </div>
    <div class="tools-left">
      <div
        :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
        @click="togglePreference()"
      >
        <img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
      </div>
      <div class="tools-middle"></div>
      <div class="tools-right">
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/search.png`" alt="">
        </div>
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/help.png`" alt="">
        </div>
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/notice.png`" alt="">
        </div>
        <div class="tools-icon">
          <!-- <span class="fa fa-battery-full"></span> -->
          <img :src="`${publicPath}images/header-icon/user.png`" alt="">
        </div>
        <!-- <timer></timer> -->
        <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
          <span
            :class="['fa', {'fa-list-ul':notificationCenterNoMessage()}, {'fa-comment-o on-new-msg':!notificationCenterNoMessage()},{'fa-commenting-o':notificationCenterMessageFlicker()}]"
          ></span>
        </div>
        <div class="tools-icon tools-show-desktop">
          <span>&nbsp;</span>
        </div>
      <div class="tools-icon no-hover-style">
        <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI.png`" alt />
      </div>
    </div>
    <div class="tools-middle">
      <div v-for="dock in $store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}" >
        <a @click="dockClick(dock)">
          <img class="dock-item" :src="dock.src" :alt="dock.alt" />
          <img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot"/>
          <!-- <iframe class="dock-shot" :src="dock.url"  ></iframe> -->
        </a>
      </div>
    </div>
    <div class="tools-right">
      <div class="tools-icon">
        <img :src="`${publicPath}images/desktop/header-icon/search.png`" alt />
      </div>
      <div class="tools-icon">
        <img :src="`${publicPath}images/desktop/header-icon/help.png`" alt />
      </div>
      <div class="tools-icon" @click="notificationCenterClick()">
        <img :src="`${publicPath}images/desktop/header-icon/notice.png`" alt />
      </div>
      <div class="tools-icon">
        <el-dropdown size="small" placement="bottom">
          <span class="el-dropdown-link">
            <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
          </span>
          <el-dropdown-menu slot="dropdown" style='top: 44px;'>
            <el-dropdown-item @click.native='toLogout'>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        
      </div>
    </div>
  </div>
</template>

<script>
import Timer from "./Timer";

import html2canvas from 'html2canvas';
import {logout} from "@/api/login";
export default {
  name: "Tools",
  components: {
    Timer
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
      notificationCenterVisible: false,
      notificationCenterMessageCount: 0
      notificationCenterMessageCount: 0,
      maxOrder: 0,
      maxOrderOne: ''
    };
  },
  created() {
@@ -67,33 +68,107 @@
      window.toolIntervalArr.forEach(item => clearInterval(item));
    }
    window.toolIntervalArr = [
      setInterval(function() {
      setInterval(function () {
        _that.notificationCenterMessageCount += 1;
      }, 600)
    ];
  },
  // watch:{
  //   '$store.state.desktop.frames':{
  //     handler(n,o){
  //       if(n){
  //         ;
  //         n.forEach((item,index) => {
  //           if(item.order >= this.maxOrder){
  //             this.maxOrderOne = item.id;
  //           }
  //         });
  //       }
  //     },
  //     deep: true
  //   }
  // },

  
  methods: {
    notificationCenterClick: function() {
    notificationCenterClick: function () {
      this.notificationCenterVisible = !this.notificationCenterVisible;
      this.$store.commit(
        "desktop/changeNotificationCenterVisible",
        this.notificationCenterVisible
      );
    },
    notificationCenterNoMessage: function() {
    notificationCenterNoMessage: function () {
      return this.$store.state.desktop.messageNotices.length === 0;
    },
    notificationCenterMessageFlicker: function() {
    notificationCenterMessageFlicker: function () {
      return (
        this.notificationCenterMessageCount % 2 === 0 &&
        !this.notificationCenterNoMessage()
      );
    },
    openSafari: function() {
      this.$store.commit("desktop/openSafari");

    togglePreference() {
      //this.$store.commit("desktop/togglePreference");
      //显示桌面,最小化已打开的应用
      ;
      this.$store.state.desktop.frames.forEach(frame => {
        this.$store.commit('desktop/addMinDock', {
          id: frame.id,
          src: frame.icon,
          alt: frame.title,
          type: "3",
          screenshot: ''
        });
      })
    },
    togglePreference: function() {
      this.$store.commit("desktop/togglePreference");
    dockClick(dock) {
      
      if (dock.type === "1") {
        window.open(dock.url);
      } else if (dock.type === "2") {
        this.$store.dispatch("desktop/addFrame", {
          id: dock.id,
          icon: dock.src,
          title: dock.name,
          url: dock.url
        });
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
        //点击的iframe置顶并高亮
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    toolHover(dock){
      //this.$parent.screenShot(dock)
    },

    toLogout(){
      this.$confirm("提示：确定退出吗？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
      }).then(_ => {
        logout().then(res => {
          if (res === "退出成功") {
            sessionStorage.removeItem("userInfo");
            location.assign('/view/index');
            this.$notify({
              title: "提示",
              type: "success",
              message: "退出成功！"
            });
          } else {
            this.$notify({
              title: "提示",
              type: "success",
              message: "退出失败!"
            });
          }
        });
      }).catch(_ => {
        console.log("退出失败");
      });
    }
  }
};
@@ -120,21 +195,73 @@
  width: 200px;
  height: 100%;
  float: left;
  margin-left: 8px;

  margin-left: 14px;
}
.tools .tools-middle {
  float: left;
  position: relative;
}

.tools .tools-middle::before {
  width: 1px;
  height: 20px;
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}
.tools .tools-middle .dock-item-wrap {
  display: inline-block;
  padding: 0 10px;
  height: 38px;
  line-height: 54px;
  margin-right: 1px;
  border-bottom: 2px solid transparent;
  position: relative;
}
.tools .tools-middle .dock-item-wrap:hover{
  color: white;
  background-color: #98aabe;
}
.tools-middle .dock-item-wrap.actived{
  border-color: #40c3ff;
  background-color: #98aabe;
}
.dock-item-wrap a {
  height: 100%;
}
.dock-item-wrap img {
  width: auto;
  height: 70%;
}
.dock-item-wrap .dock-shot {
  visibility: hidden;
  /* transform: scale(0.5); */
  width: 100px;
  height: 46px;
  position: absolute;
  top: 44px;
  left: -50%;
}
.tools .tools-middle .dock-item-wrap:hover .dock-shot,
.tools .tools-middle .dock-item-wrap.clicked .dock-shot {
  visibility: visible;
}
.tools-icon {
  text-align: center;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  line-height: 56px;
  margin-right: 28px;
  padding: 0 15px;
  
}

.tools .tools-icon:hover,
.tools .tools-icon.clicked {
.tools-icon img{
  -webkit-user-drag: none;
}
.tools .tools-icon:not(.no-hover-style):hover,
.tools .tools-icon:not(.no-hover-style).clicked {
  color: white;
  background-color: #98aabe;
  cursor: pointer;
@@ -143,11 +270,9 @@
.tools .tools-right {
  float: right;
  height: 100%;
  margin-right: 14px;
}

.tools .tools-right .tools-show-desktop {
  border-left: grey 1px solid;
  width: 5px;
  margin-left: 3px;
.el-dropdown-menu{
  top: 40px !important;
}
</style>