yiyunjianzhu-vue/src/App.vue

<!--
 * @Description: 项目入口组件
 * @version: V1.0
 * @Author: xzx
 * @Date: 2019-11-04 17:22:44
 * @LastEditors  : xzx
 * @LastEditTime : 2020-01-08 16:47:56
 -->
<template>
  <div id="app">
    <!-- <Header
      :v-show="header_show"
      ref="mychild"
      :showHelp="showHelpPage"
      :showIndexOption="showIndexOption"
      @closeShowOption="closeShowOption"
      @closeWorkSet="closeWorkSet"
      @searchName="getSearchName"
      :isShowOutWorkSpace="isShowOutWorkSpace"
      @outWorkSpace="getOutWorkSpace"
      id="bignav"
    ></Header> -->
    <!-- 
      
      @showOption="showOption"
      @showHelp="showHelp"
      :searchName="searchName"
      @isShowOutWorkSpace="getIsShowOutWorkSpace"
      :outWorkSpace="outWorkSpace"
     -->
    <router-view
      ref="mainpage"
      id="bigbody"
      class="mt-40"
      :class="{'mt-64': setMarginTop,
               'calc-height': setMarginTop,
               'workspace-bigbody': $route.path.indexOf('/workspace') >=0,
               'mt-76': $route.name == 'newproject' || $route.name == 'projdetail'}"
    ></router-view>
 
  </div>
</template>
<script>
// import Header from "@/views/components_web/head/head.vue";
import system from "@/services/system";
export default {
  components: {
    // Header,
  },
  name: "App",
  data() {
    return {
      header_show: true,
      companyName: "",
      mypath: "/",
      showIndexOption: false, //index.vue里的意见反馈
      showHelpPage: false, //index.vue里的帮助
      searchName: "",
      isShowOutWorkSpace: false,
      outWorkSpace: false,
      isClient: system.isClient,
      onlineStatus: false,//网关状态
      state: this.$store.state,
    };
  },
  created: function () {
    console.log('版本编译时间:', process.env.BUILD_TIME);
    if (
      document.getElementById("Loading") != null &&
      document.getElementById("Loading").nodeName != null &&
      document.getElementById("Loading").nodeName != ""
    ) {
      document.body.removeChild(document.getElementById("Loading"));
    }
    if (this.$route.name == "login" || this.$route.name == "notfound" || this.$route.name === 'platform') {
      this.header_show = false;
    }
    if(this.isClient) {
      system.keepLiveTest((status)=> {
        this.onlineStatus = status;
        this.$store.changeGatewayState(status);
        sessionStorage.setItem('isOnLine', String(status && navigator.onLine));
      }, (isMaxWindowSize) => {
        this.$store.state.isMaxWindowSize = isMaxWindowSize;
      });
      system.subscribeGatewayMessage();
    }
  },
  computed: {
    setMarginTop() {
      return this.isClient || this.$route.name == 'workspace';
    },
    currentRoutePath() {
      return this.$route.path;
    }
  },
  mounted: function () {
    // 监听滚动事件
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    /**
     * 检测bigbody滚动距离添加样式
     */
    handleScroll: function () {
      // let scrollBody = document.getElementById("bigbody");
      // let scrollnav = document.getElementById("bignav");
      // if (scrollBody.scrollTop > 0) {
      //   scrollnav.classList.add("scorllbaron");
      // } else {
      //   scrollnav.classList.remove("scorllbaron");
      // }
      // 项目列表首页
  
    },
    /**
     * @description: 打开意见反馈弹框
     * @param {type}
     * @return:
     */
    showOption: function () {
      this.showIndexOption = true;
    },
    /**
     * @description: 打开帮助弹框
     * @param {type}
     * @return:
     */
    showHelp: function () {
      this.showHelpPage = true;
    },
    /**
     * @description: 关闭意见反馈弹框
     * @param {type}
     * @return:
     */
    closeShowOption: function () {
      this.showIndexOption = false;
      this.showHelpPage = false;
    },
    closeWorkSet: function () {
      if (this.$route.name == "workspace") {
        this.$refs["mainpage"].closeAppManagePain();
      }
    },
    /**
     * 获取全局搜索的值
     * */
    getSearchName(data) {
      this.searchName = data;
    },
    /**
     * 获取是否显示 回到协作空间 的值
     * */
    getIsShowOutWorkSpace(data) {
      this.outWorkSpace = false;
      this.isShowOutWorkSpace = data;
    },
    /**
     * 获取 点击回到协作空间后的动作
     * */
    getOutWorkSpace(data) {
      this.outWorkSpace = data;
    },
  },
  beforeDestroy() {
    // 销毁监听
    window.removeEventListener("scroll", this.handleScroll);
  },
  watch: {
    $route(to) {
      this.mypath = to.path;
    },
    currentRoutePath(val) {
      if(val.indexOf('projdetail') >=0 ) {
        document.body.classList.add('set-bgc');
      } else {
        document.body.classList.remove('set-bgc');
      }
    }
  },
};
</script>

<style lang="scss">
jmnode {
  border: none;
  box-shadow: 0 1px 2px 0 rgba(#000, 0.2);
  border-radius: 4px;
  &:hover {
    box-shadow: none;
    border: 2px solid rgba(#7850FF, 1);
  }
  &.selected {
    box-shadow: none;
    border: 2px solid rgba(#7850FF, 1);
    background-color: #fff;
    color: #333;
  }
}

.workspace-bigbody {
  overflow: hidden !important;
}

::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  height: 10px;
  background-color: #adadad;
}

/*当前窗口失去焦点时的滑块样式*/
::-webkit-scrollbar-thumb:window-inactive {
  background-color: #adadad;
}
</style>

<style lang="scss" scoped>
  .mt-40 {
    margin: 40px 0 0 0;
  }
  .mt-60 {
    margin: 60px 0 0 0;
  }
  .mt-64 {
    margin: 64px 0 0 0;
  }
  .mt-76 {
    margin: 76px 0 0 0;
  }

</style>
<style>
 .calc-height {
    height: calc(100vh - 64px) !important;
  }

  .set-bgc {
    background-color: #ebebeb !important;
  }
</style>