jihe-hs/ruoyi-ui/src/layout/index.vue

<template>
  <div>
    <template v-if="sideTheme == 'theme-dark'|| sideTheme == 'theme-light'">
      <div :class="classObj" class="app-wrapper">
        <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
        <template v-if="topNav == false">
          <sidebar class="sidebar-container" />
          <div :class="{hasTagsView:needTagsView}" class="main-container" :style="topNav?'':'height:100vh;'">
            <div :class="{'fixed-header':fixedHeader}">
              <navbar />
              <tags-view v-if="needTagsView" />
            </div>
            <app-main />
            <right-panel>
              <settings />
            </right-panel>
          </div>
        </template>
        <template v-else>
          <div class="topNav_head" style="height:72px;">
            <div class="screen_view_top_l_left" style="width: 10%;height:100%;">{{ timeDate2 }}</div>
            <sidebar class="sidebar-container index_menu blue_index_menu" style="width: 80% !important;height:100%;position: relative;box-shadow:unset;" />
            <navbar :class="sideTheme=='theme-light'?'theme-light-navbar':'theme-dark-navbar'" style="width: 10%!important;height:100%;" />
            <div class="nav_top_img" style="width:24vw;height:100%;">
              <div class="screen_view_top_c_img">
                <img class="screen_view_top_c_img_log" src="@/assets/images/screen/log.png" alt="">
                <img class="screen_view_top_c_img_txt" src="@/assets/images/screen/toptxt.png" alt="">
              </div>
            </div>
          </div>
          <div :class="{hasTagsView:needTagsView}" class="main-container" :style="topNav?'margin-left:0;height:92.4vh;':''">
            <div :class="{'fixed-header':fixedHeader}"></div>
            <!-- 面包屑导航 -->
            <!-- <breadcrumb ref="Breadcrumb" id="breadcrumb-container" class="breadcrumb-container" style="margin-left:20px;" /> -->
            <app-main />
            <right-panel>
              <settings />
            </right-panel>
          </div>
        </template>
      </div>
    </template>
    <template v-else>
      <div :class="classObj" class="app-wrapper">
        <div class="topNavHeadBlue" :style="'background-image:url('+navBg+');'">
          <sidebarblue class="sidebar-container index_menu blue_index_menu" :style="is_weather == 'true'?'width: 90% !important;':'width: 90% !important;'" />

          <navbar class="theme-blue-navbar" style="width: 10%!important;height:78px;" />
        </div>
        <div :class="{hasTagsView:needTagsView}" class="main-container" style="margin-left:0;">
          <div :class="{'fixed-header':fixedHeader}"></div>
          <breadcrumb ref="Breadcrumb" id="breadcrumb-container" class="breadcrumb-container" style="margin-top:20px;margin-left:20px;" />
          <app-main style="min-height: calc(100vh - 125px);" />
          <right-panel>
            <settings />
          </right-panel>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import RightPanel from '@/components/RightPanel'
import TopNav from '@/components/TopNav'
import { AppMain, Navbar, Settings, Sidebar, TagsView, Sidebarblue } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'
import axios from 'axios'
import navBg from '@/assets/images/nav_bg.png'
export default {
  name: 'Layout',
  components: {
    Sidebarblue,
    Breadcrumb,
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView,
    TopNav
  },
  data() {
    return {
      // 天气
      weather_weather: '',
      // 天气图标
      weather_weatherimg: '',
      navBg: navBg,
      is_weather: null,
      timeDate1: '',
      timeDate2: '',
      timer: ''
    }
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    },
    topNav() {
      return this.$store.state.settings.topNav
    }
  },
  created() {
    this.currentTime()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    getWeather() {
      let city = 'city=济南'
      let word = 'tianqi'
      const key = 'key=0c7ebab2461621aeb2c34b3a82e4c702'
      const header = 'http://api.tianapi.com/txapi'
      const url = `${header}/${word}/?${key}&${city}`
      axios.get(url).then(res => {
        const data = res.data.newslist[0]
        this.weather_weather = data.area + ':' + data.weather + data.lowest + data.wind + data.windsc
        this.weather_weatherimg = require('@/assets/weather/' + data.weatherimg + '')
      })
    },
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    // 动态实时获取当前时间
    getTimeFn() {
      // const time = +new Date() // 获取当前时间戳
      // 传入时间
      const date = new Date()
      const Y = date.getFullYear() // 年
      const M = date.getMonth() + 1 // 月
      const D = date.getDate() // 日
      const h = date.getHours() // 小时
      const m = date.getMinutes() // 分钟
      const s = date.getSeconds() // 秒数
      this.timeDate1 = Y + '-' + getZero(M) + '-' + getZero(D)
      this.timeDate2 = getZero(h) + ': ' + getZero(m) + ': ' + getZero(s)
      function getZero(num) {
        // 个位数前补0
        if (parseInt(num) < 10) {
          num = '0' + num
        }
        return num
      }
    },

    currentTime() {
      this.timer = setInterval(this.getTimeFn, 1000)
    }
  },
  watch: {
    sideTheme(val) {
      document.getElementsByTagName('body')[0].className = val
    }
  },
  mounted() {
    //this.getWeather()
    document.getElementsByTagName('body')[0].className = this.sideTheme
    this.is_weather = systemConfig.navBarShow(systemConfig.systemType)['weather']
    //console.log(this.is_weather,'1231232131312312');
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/mixin.scss';
@import '~@/assets/styles/variables.scss';
// 区分不同主题下导航栏颜色
.theme-light-navbar {
  background-color: white;
}
.theme-dark-navbar {
  background-color: #1d58a9;
}
.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  // background-color: #11232a;
  // overflow: hidden;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
.index_menu {
  display: flex;
  height: 78px;
  position: relative;
  box-shadow: unset;
}
.blue_index_menu {
}
.theme-dark .topNav_head {
  display: flex;
  background-image: url('~@/assets/images/screen/screenTop.png') !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 1;
}
.theme-light .topNav_head {
  display: flex;
  background-color: #ffffff;
}
.topNavHeadBlue {
  display: flex;
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
  background-size: 100% 100%;
}
.topNavHeadBlue .index_menu .theme-blue {
  background-color: unset !important;
}
.theme-blue-navbar {
  box-shadow: unset;
}
.theme-blue-navbar {
  background: unset;
}
.weather p {
  color: white;
  height: 78px;
  line-height: 78px;
  text-indent: 10px;
  white-space: nowrap;
  font-size: 14px;
}
.weather img {
  width: 25px;
  height: 25px;
}
.weather {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15%;
}
.theme-blue-box {
  height: 100%;
}
.theme-light,
.theme-dark {
  .weather {
    margin-right: 2%;
  }
}
.theme-light {
  .weather {
    margin-right: 2%;
    p {
      color: #000000;
    }
  }
}
.nav_top_img {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
}
.screen_view_top_c_img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.screen_view_top_c_img_log {
  width: 3rem;
  height: 2.25rem;
}
.screen_view_top_c_img_txt {
  width: 23.2644rem;
  height: 1.4825rem;
  margin-left: 0.5rem;
}
.screen_view_top_l_left {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.25rem;
  padding-left: 2vw;
}
</style>