csc-szls-vue/shanXiPlatform/src/components/Navebarnew/index.vue

<template>
  <div class="navbar_right">
    <div id="userinfo" class="userinfobox">
      <div class="topbox">
        <div class="imgbox">
          <img v-if="imageUrl != ''" :src="imageUrl" />
          <img v-else src="../../assets/images/mrtx.png" />
        </div>
        <div class="usename">
          <p class="myp">{{ userName }}</p>
          <p class="myp">{{ userInfo.personnelName }}</p>
        </div>
      </div>
      <div class="compbox">
        <p class="comp">公司: {{ userInfo.depotName }}</p>
        <p class="comp">所属部门: {{ this.$store.state.departmentName }}</p>
        <p class="comp">职位: {{ this.$store.state.ppost }}</p>
      </div>
    </div>
    <div></div>
    <div class="div_left" @mouseleave="cancelinfo" @mouseenter="getinfo">
      <img class="imgboxone" v-if="imageUrl != ''" :src="imageUrl" />
      <img class="imgboxone" v-else src="../../assets/images/mrtx.png" />
      欢迎登录，
      <span style="color: #fff">{{ userName }}</span>
    </div>
    <div class="div_right">
      <!-- 安卓二维码下载图标 -->
      <div
        class="androidQR"
        style="
          padding-top: 5px;
          line-height: 64px;
          float: left;
          position: relative;
        "
      >
        <span class="shouji"></span>
        <!-- <img src="../../assets/images/手机_h.png" alt /> -->
        <div class="androidQR_nr">
          <div class="arrow"></div>
          <img
            class="img-app"
            src="@/assets/images/QRcode.png"
            width="120px"
            height="120px"
          />
          <!-- <span class="text">下载Android App</span> -->
        </div>
      </div>

      <div
        style="
          padding-top: 5px;
          height: 64px;
          line-height: 64px;
          float: left;
          position: relative;
        "
        @click="goDban()"
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="待办"
          placement="bottom"
        >
          <span class="daiban"></span>
        </el-tooltip>

        <div class="daiBan_div" v-if="pendingCount > 0 && pendingCount < 100">
          {{ pendingCount }}
        </div>
        <div class="daiBan_divn" v-if="pendingCount > 99">99+</div>
      </div>

      <div
        style="
          padding-top: 5px;
          height: 64px;
          line-height: 64px;
          float: left;
          position: relative;
        "
        @click="informFn()"
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="通知"
          placement="bottom"
        >
          <span class="tongzhi"></span>
        </el-tooltip>
        <div class="news_div" v-if="informNum > 0 && informNum < 100">
          {{ informNum }}
        </div>
        <div class="news_divn" v-if="informNum > 99">99+</div>
        <!-- <div class="news_div">{{ informNum }}</div> -->
      </div>

      <div
        style="
          padding-top: 5px;
          height: 64px;
          line-height: 64px;
          float: left;
          position: relative;
        "
        @click="editPassword()"
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="修改密码"
          placement="bottom"
        >
          <span class="xgmm"></span>
        </el-tooltip>
      </div>
      <div
        style="
          padding-top: 5px;
          height: 64px;
          line-height: 64px;
          float: left;
          position: relative;
        "
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="退出"
          placement="bottom"
        >
          <span class="logout" @click="loginOut()"></span>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getToken,
  setToken,
  removeToken,
  getUser,
  setUser,
  removeUser,
} from "@/utils/auth"
import { informList } from "@/api/home"
import { pending } from "@/api/daiBan/index"
import { processed } from "@/api/daiBan/index"
import { getfilebyname } from "@/api/system/organizationalStructure/personnel"
import { closenewWebSocket,newWebSocket } from '@/api/sendMessageSocket'
export default {
  data() {
    return {
      userName: "",
      informNum: 0,
      //待办数量
      pendingCount: this.$store.state.pendingCount,
      //  pendingCount:0,
      proCount: 0,
      //待处理计时器
      pendingTime: null,

      homeType: "",
      userinfohover: "",
      userInfo: "",
      imageUrl: "",
    }
  },
  created() {
    this.userName = JSON.parse(getUser()).uname
    this.getInformListUnreadNum()
    this.homeType = JSON.parse(getUser()).homeType
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    if (this.userInfo.pheadPortrait != "") {
      getfilebyname(this.userInfo.pheadPortrait).then((res) => {
        this.imageUrl = window.URL.createObjectURL(res)
      })
    } else {
      this.imageUrl = ""
    }
  },
  computed: {
    PendingCount() {
      return this.$store.state.pendingCount
    },
    listeninformNum() {
      return this.$store.state.informNum
    },
     MessageData() {
      return this.$store.state.messageData
    },
  },
  watch: {
    PendingCount: function (val) {
      this.pendingCount = val
      console.log(this.pendingCount, " this.pendingCount ...")
    },
    listeninformNum: function (val) {
      this.informNum = val
    },
 MessageData(val) {
      console.log(val, "MessageData.....")
      this.getPending()
      if (
        this.$route.path .indexOf("/inform/unreadinform") != -1 ||
        this.$route.path .indexOf("/daiban/pending")  != -1 ||
        this.$route.path .indexOf("/reservesManagement/mechanicalVentilation")!= -1

      ) {
        this.$router.go(0)
      }

      console.log(this.$route.path, "this.$route.path")
    },
  },
  mounted() {
    console.log("abscd")
    // this.pendingTime = setInterval(() => {
    //   this.getPending()
    // }, 3000)
    var uid=JSON.parse(getUser()).uid
      // 调用websocket

    newWebSocket(uid)
    this.getPending()

    this.getProcessed()
    // this.socketApi.setCallback(this.receivedMsg)
  },

  //页面销毁
  // beforeDestroy() {
  //   window.clearInterval(this.pendingTime)
  // },

  methods: {
    //  receivedMsg(msg){
    //    console.log(msg,">>>>>>>>>????????");

    //     this.$store.commit({
    //         type: "changependingCount",
    //         pendingCount: this.$store.state.pendingCount,
    //     })
    //  },
    cancelinfo() {
      document.getElementById("userinfo").style.display = "none"
    },
    getinfo() {
      document.getElementById("userinfo").style.display = "block"
    },
    // 退出
    async loginOut() {
      await this.$store.dispatch("user/logout")
      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      this.$router.push(`/login`)
      closenewWebSocket(JSON.parse(getUser()).uid)
      removeToken()
      removeUser()
      sessionStorage.clear()
      localStorage.clear()
    },

    //待办
    goDban() {
      console.log("染回")
      let userInfo = JSON.parse(getUser())
      let homeType = userInfo.homeType
      if (homeType == 1) {
        this.$router.push({ path: "/dashboard/daiban/pending" }) //分公司
      } else if (homeType == 2) {
        this.$router.push({ path: "/dashboard/daiban/pending" })
      } else if (homeType == 3) {
        this.$router.push({ path: "/home/daiban/initiated" }) //员工
      }
      // this.$router.push({ path: "/daiban/initiated" })
    },

    getInformListUnreadNum() {
      let data = {
        pageIndex: 1,
        pageSize: 10,
        condition: JSON.stringify({ readStatus: false }),
      }
      informList(data).then((res) => {
        if (res.code == 200) {
          this.informNum = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    informFn() {
      let userInfo = JSON.parse(getUser())
      let homeType = userInfo.homeType
      if (homeType == 1) {
        this.$router.push({ path: "/dashboard/inform/unreadinform" }) //分公司
      } else if (homeType == 2) {
        this.$router.push({ path: "/dashboard/inform/unreadinform" })
      } else if (homeType == 3) {
        this.$router.push({ path: "/home/inform/unreadinform" }) //员工
      }
      // this.$router.push({ path: "/inform/unreadinform" })
    },

    editPassword() {
      let userInfo = JSON.parse(getUser())
      let homeType = userInfo.homeType
      if (homeType == 1) {
        this.$router.push({ path: "/dashboard/editPassword" }) //分公司
      } else if (homeType == 2) {
        this.$router.push({ path: "/dashboard/editPassword" })
      } else if (homeType == 3) {
        this.$router.push({ path: "/home/editPassword" }) //员工
      }
      // this.$router.push({ path: "/editPassword" })
    },

    //待处理列表数据
    getPending() {
      var condition = {
        userId: JSON.parse(getUser()).uid,
      }
      condition = JSON.stringify(condition)
      var data = {
        pageIndex: 1,
        pageSize: 10,
        condition: condition,
      }

      pending(data).then((res) => {
        if (res.code == 200) {
          this.$store.commit({
            type: "changependingCount",
            pendingCount: res.data.total,
          })
        }
      })
    },

    //已处理列表数据
    getProcessed() {
      var condition = {
        userId: JSON.parse(getUser()).uid,
      }
      // console.log(condition, "condition.....")
      condition = JSON.stringify(condition)
      var data = {
        pageIndex: 1,
        pageSize: 10,
        condition: condition,
      }
      processed(data).then((res) => {
        if (res.code == 200) {
          this.$store.commit({
            type: "changeproCount",
            proCount: res.data.total,
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar_right {
  float: right;
  margin-right: 20px;
  line-height: 64px;
  height: 64px;
  .userinfobox {
    font-size: 14px;
    width: 240px;
    height: 161px;
    background-color: #ffffff;
    display: none;
    position: fixed;
    right: 160px;
    top: 55px;
    z-index: 999;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #000402;
    padding: 15px;
    .topbox {
      width: 100%;
      height: 46px;
      .imgbox {
        width: 46px;
        height: 45px;
        float: left;
        // background-color: pink;
        border-radius: 50%;
        img {
          width: 46px;
          height: 45px;
          border-radius: 50%;
        }
      }
      .usename {
        float: left;
        width: 160px;
        height: 45px;
        padding-left: 10px;
        .myp {
          margin: 0;
          height: 20px;
          line-height: 20px;
          color: #037d41;
          font-weight: 700;
        }
      }
    }

    .compbox {
      width: 220px;
      height: 100px;
      .comp {
        margin: 0;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #555555;
        font-weight: 700;
      }
    }
  }
  .div_left {
    cursor: pointer;
    float: left;
    font-size: 14px;
    margin-right: 20px;
    line-height: 64px;
    font-weight: 500;
    .imgboxone {
      width: 28px;
      height: 27px;
      vertical-align: middle;
      border-radius: 50%;
      // display: inline-block;
    }
  }
  .div_right {
    cursor: pointer;
    float: left;
    height: 100%;
    line-height: 64px;
    img {
      // width: 25px;
      vertical-align: middle;
      margin-right: 15px;
    }

    // 下载app二维码显示
    .androidQR {
      text-align: center;
      position: relative;
      .androidQR_nr {
        width: 120px;
        height: 120px;
        padding: 10px 10px 0 10px;
        position: absolute;
        left: -49px;
        top: 58px;
        background: #fff;
        z-index: 5;
        display: none;
        .arrow {
          width: 0;
          height: 0;
          border-bottom: 10px solid #fff;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          position: absolute;
          left: 50px;
          top: -10px;
        }
        .img-app {
          height: 100px;
          width: 100px;
        }
        .text {
          color: black;
          font-size: 12px;
        }
      }
    }
    .androidQR:hover {
      .androidQR_nr {
        display: block;
      }
    }
    .shouji {
      width: 21px;
      height: 20px;
      margin-right: 15px;
      display: inline-block;
      background: url("../../assets/images/手机(1).png") no-repeat center;
    }
    .shouji:hover {
      background: url("../../assets/images/手机_h.png") no-repeat center;
    }
    .daiban {
      width: 21px;
      height: 20px;
      margin-right: 15px;
      display: inline-block;
      background: url("../../assets/images/db.png") no-repeat center;
    }
    .daiban:hover {
      background: url("../../assets/images/dbh.png") no-repeat center;
    }
    .tongzhi {
      width: 21px;
      height: 20px;
      margin-right: 15px;
      display: inline-block;
      background: url("../../assets/images/ntz.png") no-repeat center;
    }
    .tongzhi:hover {
      background: url("../../assets/images/ntzh.png") no-repeat center;
    }
    .xgmm {
      width: 21px;
      height: 20px;
      margin-right: 15px;
      display: inline-block;
      background: url("../../assets/images/sz.png") no-repeat center;
    }
    .xgmm:hover {
      background: url("../../assets/images/szh.png") no-repeat center;
    }
    .logout {
      width: 21px;
      height: 20px;
      margin-right: 15px;
      display: inline-block;
      background: url("../../assets/images/tc.png") no-repeat center;
    }
    .logout:hover {
      background: url("../../assets/images/tch.png") no-repeat center;
    }
    .daiBan_div,
    .news_div {
      width: 16px;
      height: 15px;
      color: #fff;
      border-radius: 50%;
      background: red;
      position: absolute;
      left: 14px;
      top: 8px;
      font-size: 8px;
      text-align: center;
      line-height: 15px;
    }
    .daiBan_divn,
    .news_divn {
      width: 25px;
      height: 15px;
      color: #fff;
      border-radius: 30%;
      background: red;
      position: absolute;
      left: 14px;
      top: 8px;
      font-size: 8px;
      text-align: center;
      line-height: 15px;
    }
  }
}
</style>