BJYSYBZ/BJYSYBZ_C/src/views/components/HeaderCompBJ.vue

<template>
  <div class="NavContainer">
    <div class="navFlex">
      <div class="top_ban_box">
        <div class="list_box">
          <div class="weather">
            <!-- <div class="wea-left">
              <img src="@/assets/images/sun.png" alt="">
            </div> -->
            <div class="wea-right">
              <div class="top">{{ dateHour }}</div>
              <div class="bottom">
                <span>{{ dateSecond }}</span>
                <!-- <span>晴</span> -->
              </div>
            </div>
          </div>
        </div>
        <div class="titleBox" ref="titleBox">
          <div class="back1">
            <div class="ttl">
              <img src="@/assets/images/logo.png" />
              <span class="title">{{ bjTitle }}</span>
              <!-- <span class="line"></span> -->
              <span class="subtitle">{{ bjSTitle }}</span>
            </div>
            <div class="tts">- 滨江区 -</div>
          </div>
        </div>
        <div class="list_box"></div>
      </div>
      <div class="iconGroup">
        <!-- <div class="userIcon">
          <img src="@/assets/images/user.png" />
          <span>{{ syUserName||'管理员' }}</span>
        </div> -->

        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <img src="@/assets/images/user.png" />
            <span>{{ syUserName || '管理员' }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="xcryManage">巡查人员管理</el-dropdown-item>
            <el-dropdown-item command="updataPwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="clearLogin">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="back"></div>

    <UpdataPas ref="pasRef"></UpdataPas>
    <XcryDetail ref="xcryRef"></XcryDetail>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
import UpdataPas from './updataPassWord.vue';
import XcryDetail from './xcryDetail.vue';
export default {
  computed: {
    ...mapState({
      xzqName: (state) => state.BaseData.xzqState,
      mapDataOne: (state) => state.BaseData.TDG,
    }),
    ...mapGetters({
      xzqdm: 'BaseData/xzqCodeGetter',
      title: 'BaseData/titleGetter',
    }),
  },
  components: { UpdataPas, XcryDetail },
  data() {
    return {
      currentUrl: '',
      syUserName: '',
      orgRole: false,
      dateHour: '',
      dateSecond: '',
      topShow: false,
      bjTitle: '省域空间治理数字化平台',
      bjSTitle: '要素一本帐',
    };
  },
  props: {},
  mounted() {
    if (this.$route.fullPath.indexOf('manage-list') > 0) {
      this.bjTitle = '滨江区地块管理';
      this.bjSTitle = '';
    }
    this.syUserName = localStorage.getItem('ybz_syUser');
    this.$vm.$on('updateStorage', () => {
      this.syUserName = localStorage.getItem('ybz_syUser');
    });
    this.$vm.$on('orgRoleEvent', (boolean) => {
      this.orgRole = boolean;
    });

    let users = JSON.parse(localStorage.getItem('userInfo'));
    if (users) {
      this.syUserName = users.nickName;
    }
    setTimeout(() => {
      const showOrgRole = localStorage.getItem('ybz_showOrgRole');
      if (showOrgRole == '1') {
        this.orgRole = true;
      }
      const path = this.$router.history.current.path;
      this.currentUrl = path;
    }, 500);

    this.getDate();

    let routePath = this.$route.path;
    if (
      routePath == '/bzybz' ||
      routePath == 'bhybz' ||
      routePath == '/xyybz' ||
      routePath == '/tsyy' ||
      routePath == '/ysbzDetail' ||
      routePath == '/tsxz' ||
      routePath == '/xzll' ||
      routePath == '/wmqy' ||
      routePath == '/bdgj'
    ) {
      this.topShow = true;
    } else {
      this.topShow = false;
    }
  },
  methods: {
    handleCommand(command) {
      if (command == 'updataPwd') {
        this.$refs.pasRef.show();
      } else if (command == 'xcryManage') {
        this.$refs.xcryRef.show();
      } else {
        localStorage.clear();
        this.$router.push({
          path: '/login',
        });
      }
    },
    getDate() {
      var myDate = new Date();
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = this.add0(myDate.getMonth() + 1); //获取当前月份(0-11,0代表1月)
      let day = this.add0(myDate.getDate()); //获取当前日(1-31)
      let hour = this.add0(myDate.getHours()); //获取当前小时数(0-23)
      let min = this.add0(myDate.getMinutes()); //获取当前分钟数(0-59)
      let second = this.add0(myDate.getSeconds()); //获取当前秒数(0-59)
      this.dateHour = `${year}年${month}月${day}日`;
      this.dateSecond = `${hour}:${min}:${second}`;
      setTimeout(this.getDate, 1000);
    },
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    topClick() {
      // this.$router.push("/home")
      this.$router.push({
        path: '/',
        query: this.$route.query,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
$navHeight: 94px;
.NavContainer {
  height: $navHeight;
  position: relative;
  > img {
    position: relative;
    z-index: 99;
    width: 100%;
    height: 100%;
  }
  > .navFlex {
    z-index: 999;
    overflow: hidden;
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    .list_box {
      flex: 1;
      &:first-child {
        text-align: right;
      }
      &:last-child {
        text-align: left;
      }
      > span {
        display: inline-block;
        color: #fff;
        padding: 8px 20px;
        margin: 0px 10px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
        background-position: bottom;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        &:hover,
        &.active {
          color: #ffffff;
          background-image: url('~@/assets/images/item_active.png');
        }
      }
    }
    > .top_ban_box {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
      height: 78px;
      display: flex;
      align-items: center;
      .out-btn-wrapper {
        position: absolute;
        right: 150px;
        top: 23px;
        display: inline-block;
        line-height: 1.75rem;
        padding: 2px 10px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        border: 1px solid #468ec0;
        background: linear-gradient(0deg, #102a54 0%, #3d5a93 100%);
        border-radius: 0.25rem;
        cursor: pointer;
        &:hover {
          font-weight: bold;
          border: 2px solid #468ec0;
        }
      }
      > div {
        &.list_box {
          flex: 1;
          > span {
            font-size: 22px;
          }

          .weather {
            height: 100%;
            display: flex;
            margin-left: 30px;
            align-items: center;

            .wea-left {
              text-align: center;
              img {
                width: 50px;
              }
            }
            .wea-right {
              color: #fff;
              font-family: AlibabaPuHuiTiR;
              font-size: 1.25rem;
              margin-left: 20px;
              .top {
              }

              .bottom {
                display: flex;
                justify-content: space-between;
              }
            }
          }
        }
        &.titleBox {
          text-align: center;
          width: 860px;
          top: 0px;
          margin-top: 0px;
          cursor: pointer;
          img {
            width: 100%;
          }
        }
      }
    }
    > span {
      display: block;
      position: absolute;
      top: 25px;
      left: 0;
      right: 0;
      margin: auto;
      width: 420px;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    .iconGroup {
      position: absolute;
      right: 20px;
      top: 25px;
      > div {
        display: inline-block;
        margin-left: 20px;
        font-size: 16px;
        cursor: pointer;
        > img {
          margin-right: 6px;
          vertical-align: middle;
          width: 30px;
          height: 30px;
        }
        > span {
          color: #abd5ff;
        }
      }
    }
  }
  .back {
    height: 80px;
    position: relative;
    z-index: 9;
    background: url('~@/assets/images/top_nav_bg.png') no-repeat;
    background-size: 100% 100%;
  }
  .back1 {
    position: absolute;
    z-index: 999;
    text-align: center;
    bottom: 0px;
    top: 0px;
    height: $navHeight;
    width: 860px;
    font-weight: 700;
    background-image: url('~@/assets/images/nav_title_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .ttl {
      margin-top: 5px;
      width: 100%;
      text-align: center;
      text-shadow: 0 0.20833rem 0.20833rem #005d8b;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      > img {
        margin-right: 20px;
        width: 42px !important;
        height: 36px !important;
      }
      > .line {
        width: 30px;
        height: 4px;
        background: #fff;
        margin: 0px 10px;
      }
      > .title {
        font-family: AlibabaPuHuiTi-Medium-105;
        font-size: 38px;
      }
      > .subtitle {
        font-family: AlibabaPuHuiTi-Medium-65;
        font-size: 32px;
        font-weight: 500;
      }
    }
    .tts {
      width: 100%;
      font-size: 22px;
      bottom: 5px;
      position: absolute;
      color: #ffcd33;
      left: 0;
      text-align: center;
      font-family: AlibabaPuHuiTi-Medium-65;
    }
  }
}

::v-deep .iconGroup {
  .el-dropdown-link {
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
      margin-right: 5px;
    }
  }
}
</style>