yclw/src/views/groupPage/header/header.vue

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInDown"
    leave-active-class="animate__slideOutUp"
  >
    <div class="widget-bigScreenHeader">
      <div class="header">
        <div class="title">
          <div class="sysIcon"></div>
          <div class="titleInfo">
            <div class="maintitle">
              <div class="caption">{{ title }}</div>
              <div class="splitLine"></div>
              <el-select
                ref="stlectTree"
                v-model="treeSelectText"
                placeholder=""
                :popper-append-to-body="false"
                :title="treeSelectText"
              >
                <el-option
                  :value="treeValue.value"
                  :label="treeValue.label"
                  style="max-width: 260px; height: auto; padding: 0"
                >
                  <el-tree
                    :data="datas"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    default-expand-all=""
                    node-key="pbsTree"
                    highlight-current
                    @node-click="nodeClick"
                    ref="tree"
                  />
                </el-option>
              </el-select>
            </div>
            <div class="subtitle">{{ subtitle }}</div>
          </div>
        </div>
        <div class="menu" v-show="treeValue.pid === 2">
          <ul class="main">
            <li v-for="item in menuList" :key="item.name">
              <a
                :name="item.name"
                :class="currentProjectActive === item.name ? 'pick-on' : ''"
                @click="currentProjectActive = item.name"
                >{{ item.label }}</a
              >
            </li>
          </ul>
        </div>
        <div class="otherItem">
          <div class="specificTime">{{ specificTime }}</div>
          <div class="entrySys" @click="enterSys()">{{ operationName }}</div>
        </div>
      </div>
      <div class="underline"></div>
    </div>
  </transition>
</template>

<script>
import Config from './config.json'
import { getUserMenu } from '@/api/user'
export default {
  name: 'bigScreenHeader', //大屏头部菜单栏
  data() {
    return {
      title: null, //标题
      subtitle: null, //副标题
      menuList: [], //菜单栏配置
      currentActive: '', //当前激活模块版块
      currentProjectActive: '', //当前项目级激活功能模块
      specificTime: null, //系统当前时间
      operationName: null,
      //
      treeSelectText: '三峡发展',
      treeValue: {
        value: null,
        label: null
      },
      datas: [
        {
          name: '三峡发展',
          value: '1',
          pid: 0,
          children: [
            {
              name: '三峡分公司',
              value: '2',
              pid: 1,
              children: [
                {
                  name: '宜昌两网二期',
                  value: '3',
                  pid: 2
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {
    config() {
      return Config
    },
    routerData() {
      return this.$store.state.routeSetting.addRoutes
    },
    currentX() {
      return this.$store.state.bigScreen.currentActive
    }
  },
  mounted() {
    this.getUserActiveModule()
    this.title = this.config.title
    this.subtitle = this.config.subtitle
    this.showCurrentTime()
    this.getEnterText()
  },
  watch: {
    treeValue: {
      handler(val, oval) {
        const { label, pid } = val
        if (pid == 2) {
          this.$parent.showGroupPage = false
          this.$parent.showDistrictPage = true
        } else {
          this.$store.state.bigScreen.groupName = label
          this.$parent.showGroupPage = true
          this.$parent.showDistrictPage = false
        }
      },
      deep: true
    },
    currentProjectActive: {
      handler(n, o) {
        this.activeModule(n)
        this.$store.state.bigScreen.currentActive = n
      }
      // immediate:true
    },
    currentX: {
      handler(n, o) {
        this.currentProjectActive = n
      }
    }
  },
  methods: {
    captionClick() {
      this.currentProjectActive = ''
    },
    // 点击tree节点
    nodeClick(item) {
      const { name, value, pid } = item
      this.$set(this.treeValue, 'value', value)
      this.$set(this.treeValue, 'label', name)
      this.$set(this.treeValue, 'pid', pid)
      this.treeSelectText = name
      this.$refs.stlectTree.blur()
    },
    //获取用户激活模块
    getUserActiveModule() {
      const userId = sessionStorage.getItem('userId') || this.$store.state.user.userId
      getUserMenu(userId)
        .then((res) => {
          let arr = res.result.filter((item) => item.type === 'groupPage')
          let sort = 0
          arr[0].childrens.forEach((item) => {
            if (item.statusFlag === '1') {
              if (item.sort > sort) {
                this.menuList.push({
                  name: item.name,
                  label: item.label
                })
              } else {
                this.menuList.unshift({
                  name: item.name,
                  label: item.label
                })
              }
              sort = item.sort
            }
          })
          this.currentProjectActive = this.menuList[0].name
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //进入系统
    enterSys() {
      if (
        !this.routerData.some((item) => item.label === '首页') &&
        !this.routerData.some((item) => item.label === '地图')
      ) {
        this.logout()
      } else {
        this.$router.push({ path: '/' })
      }
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push('/login')
    },
    getEnterText() {
      if (
        !this.routerData.some((item) => item.label === '首页') &&
        !this.routerData.some((item) => item.label === '地图')
      ) {
        this.operationName = '退出系统'
      } else {
        this.operationName = '进入系统'
      }
    },
    //当前项目级页面激活模块
    activeModule(module) {},
    //系统时间显示
    showCurrentTime() {
      this.specificTime = getnow()
      //时间显示
      function getnow() {
        let mynow = new Date() //默认的获取的是当前时间
        //通过调用日期对象的方法来重新获取当前的日期时间
        //mynow.setFullYear(2016);
        let year = mynow.getFullYear() //获取年
        let month = mynow.getMonth() + 1 //获取月
        let day = mynow.getDate() //获取日
        let hour = mynow.getHours() //获取小时
        let minute = mynow.getMinutes() //获取分钟
        let second = mynow.getSeconds() //获取秒
        let strdate =
          year +
          '年' +
          (month < 0 ? '00' : ('0' + month).slice(-2)) +
          '月' +
          (day < 0 ? '00' : ('0' + day).slice(-2)) +
          '日 ' +
          (hour < 0 ? '00' : ('0' + hour).slice(-2)) +
          ':' +
          (minute < 0 ? '00' : ('0' + minute).slice(-2)) +
          ':' +
          (second < 0 ? '00' : ('0' + second).slice(-2)) +
          ''
        return strdate
      }
      //动态显示时间
      setInterval(() => {
        this.specificTime = getnow()
      }, 100)
    }
  }
}
</script>

<style lang='scss' scoped>
.animate__slideInDown,
.animate__slideOutUp {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-bigScreenHeader {
  width: 100%;
  position: absolute;
  z-index: 3;
  background: linear-gradient(#021a2a, rgba(2, 26, 42, 0.3));
  font-family: Source Han Sans CN;
  //public size
  $size30: 0.15625rem /* 30/192 */;
  $size28: 0.145833rem /* 28/192 */;
  $size20: 0.104167rem /* 20/192 */;
  $size17: 0.088542rem /* 17/192 */;
  $size16: 0.083333rem /* 16/192 */;
  $size14: 0.072917rem /* 14/192 */;
  $size10: 0.052083rem /* 10/192 */;
  $size8: 0.041667rem /* 8/192 */;
  $size3: 0.015625rem /* 3/192 */;
  $size1: 0.005208rem /* 1/192 */;
  .header {
    width: 100%;
    height: 0.375rem /* 72/192 */;
    display: flex;
    flex-flow: row nowrap;
    .title {
      padding: 0 $size20;
      display: flex;
      justify-content: center;
      align-items: center;
      filter: hue-rotate(0deg);
      transition: all 1s linear;
      .sysIcon {
        background: url('~@/views/groupPage/images/标题/sysIcon.png') no-repeat;
        background-size: 100% 100%;
        width: 0.239583rem /* 46/192 */;
        height: 0.239583rem /* 46/192 */;
        margin-right: 0.052083rem /* 10/192 */;
      }
      .titleInfo {
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        height: 60%;
        .maintitle {
          display: flex;
          align-items: center;
          .caption {
            white-space: nowrap;
            font-size: $size20;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(65, 105, 225, 0.3), 0 0 20px rgba(65, 105, 225, 0.3),
              0 0 30px rgba(65, 105, 225, 0.3), 0 0 40px rgba(65, 105, 225, 0.3);
          }
          .splitLine {
            width: 0.005208rem /* 1/192 */;
            height: 60%;
            background: #ffffff;
            opacity: 0.6;
            margin: 0 0.0625rem /* 12/192 */;
          }
          /deep/ .el-select {
            display: block;
            width: 0.78125rem /* 150/192 */;
            font-size: 0.104167rem /* 20/192 */;
            font-weight: 500;
            font-family: Source Han Sans CN-MEDIUM;
            .el-input__inner {
              font-family: Source Han Sans CN-MEDIUM;
              padding-left: 0;
              padding-right: 0.260417rem /* 50/192 */;
              background: transparent;
              border: none;
              color: #2ba7ff;
            }
            .el-input {
              font-size: inherit;
            }
            .el-input__suffix {
              right: 0.15625rem /* 30/192 */;
            }
            .el-select__caret {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .el-icon-arrow-up:before {
              content: '';
              display: block;
              width: 0;
              height: 0;
              border-top: 10px solid #2ba7ff;
              border-right: 7px solid transparent;
              border-left: 7px solid transparent;
              transform: rotate(180deg);
            }
          }
          /deep/ .el-tree {
            background: #023c5d;
            color: #f9fdff;
            .el-tree-node__content {
              background: transparent;
            }
            .el-tree-node__content:hover {
              background: transparent;
              color: #2ba7ff;
            }
          }
          /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            background: transparent;
            color: #2ba7ff;
          }
        }
        .subtitle {
          font-size: 0.057292rem /* 11/192 */;
          font-weight: 400;
          color: #feffff;
        }
      }
    }
    .menu {
      // width: 60%;
      white-space: nowrap;
      ul {
        list-style: none;
        padding: $size10;
        margin: 0 0 0 $size10;
      }
      .main {
        width: 100%;
        display: flex;
      }
      .main > li {
        margin: $size8 $size20;
        float: left;
      }
      .main > li a {
        text-align: center;
      }
      a {
        text-decoration: none;
        color: #fefefe;
        text-transform: capitalize;
        display: block;
        padding: $size10 0;
        transition: background-color 0.5s ease-in-out;
        font-size: $size16;
        font-weight: 400;
      }
      a:hover,
      .pick-on {
        cursor: pointer;
        color: #0ea7ff;
        font-weight: bold;
        border-bottom: 2px solid;
      }
    }
    .otherItem {
      width: 20%;
      height: 100%;
      font-size: $size14;
      font-weight: 400;
      display: flex;
      align-items: center;
      position: absolute;
      right: 20px;
      .specificTime {
        flex: 2;
        top: 25%;
        text-align: center;
        font-weight: 400;
        color: #a8d3f1;
      }
      .entrySys {
        flex: 0.6;
        color: #a8d3f1;
        background: url('~@/views/groupPage/images/entrySys.png') no-repeat;
        background-size: 100% 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      .entrySys:hover {
        cursor: pointer;
        color: #a8d3f1;
        background: url('~@/views/groupPage/images/entrySysHover.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .underline {
    width: 9.796875rem /* 1881/192 */;
    height: 0.010417rem /* 2/192 */;
    background: url('~@/views/groupPage/images/标题/顶部线.png') no-repeat center center;
    background-size: 100% 100%;
    margin: 0 $size20;
  }
}
</style>