{"remainingRequest":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/layout/components/Navbar.vue?vue&type=style&index=0&id=d16d6306&lang=scss&scoped=true","dependencies":[{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/layout/components/Navbar.vue","mtime":1708395041882},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/css-loader/dist/cjs.js","mtime":1708395146948},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1708395147772},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/postcss-loader/src/index.js","mtime":1708395147225},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/sass-loader/dist/cjs.js","mtime":1708395146389},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js","mtime":1708395147382}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoubmF2LWhlYWRlciB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIHdpZHRoOiAxMDAlOwogIGhlaWdodDogNTBweDsKICBwb3NpdGlvbjogZml4ZWQ7CiAgdG9wOiAwcHg7CiAgbGVmdDogMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjI1MGM4OwogIC8qIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCgxODdkZWcsICMwYjI0NGYgMCUsICMwNTQ0OGMgMTAwJSk7ICovCiAgY29sb3I6ICNmZmY7CiAgbGluZS1oZWlnaHQ6IDUwcHg7CiAgcGFkZGluZy1sZWZ0OiAxNXB4OwogIC5uYXYtaGVhbmRlci1uYW1lIHsKICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgIHotaW5kZXg6IDYwOwogICAgdGV4dC1pbmRlbnQ6IDYwcHg7CiAgICBmb250LXNpemU6IDIwcHg7CiAgICBsZXR0ZXItc3BhY2luZzogNHB4OwogICAgZm9udC13ZWlnaHQ6IDgwMDsKICB9CiAgLnRpdGxlSW1nIHsKICAgIGRpc3BsYXk6IGJsb2NrOwogICAgcG9zaXRpb246IGFic29sdXRlOwogICAgbGVmdDogLTE4M3B4OwogICAgdG9wOiAtMjRweDsKICAgIHotaW5kZXg6IDUwOwogIH0KICAubG9nbyB7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICB6LWluZGV4OiA1MDsKICB9Cn0KCi5uYXYtaGVhZGVycyB7CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiA1MHB4OwogIHBvc2l0aW9uOiBmaXhlZDsKICB0b3A6IDE1cHg7CiAgbGVmdDogMDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjI1MGM4OwogIC8qIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCgxODdkZWcsICMwYjI0NGYgMCUsICMwNTQ0OGMgMTAwJSk7ICovCiAgY29sb3I6ICNmZmY7CiAgbGluZS1oZWlnaHQ6IDUwcHg7CiAgcGFkZGluZy1sZWZ0OiA1NnB4Owp9CgouZWwtYmFkZ2VfX2NvbnRlbnQgewogIGJhY2tncm91bmQtY29sb3I6ICNmZjAwMDA7Cn0KCi5ob21lLWVsLXBvcG92ZXIgewogIGJhY2tncm91bmQ6IHRyYW5zcGFyZW50ICFpbXBvcnRhbnQ7CiAgYm9yZGVyOiBub25lOwogIHBhZGRpbmc6IDA7CiAgYm94LXNoYWRvdzogbm9uZTsKfQo="},{"version":3,"sources":["Navbar.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA","file":"Navbar.vue","sourceRoot":"src/layout/components","sourcesContent":["<template>\n  <div class=\"navbar\">\n    <div class=\"nav-header\">\n      <!-- <span class=\"nav-heander-name\">重载铁路线路环境机车远程监视系统</span> -->\n      <span class=\"nav-heander-name\">{{ projectName }}</span>\n      <img class=\"titleImg\" src=\"@/assets/表头背景.png\" />\n      <img class=\"logo\" src=\"@/assets/机车LOGO.png\" />\n      <div\n        class=\"right-menu\"\n        style=\"display: flex; align-items: center; line-height: 1em\"\n      >\n        <el-popover\n          v-model=\"allMessageShow\"\n          placement=\"bottom-end\"\n          width=\"500\"\n          trigger=\"click\"\n          ref=\"popoveraite\"\n          popper-class=\"home-el-popover\"\n          style=\"cursor: pointer\"\n        >\n          <!-- <img src=\"../../assets/tishi.png\" alt=\"\"> -->\n          <div class=\"msgAlarmMessage\">\n            <!-- <div\n              class=\"msgAlarmMessage-head\"\n              :class=\"{ 'no-home': isHome == false }\"\n            >\n              <div>\n                共{{ $store.state.app.warningSocket.list.length }}条消息\n              </div>\n              <div class=\"message\" @click=\"toMessageAll\">全部消息</div>\n            </div> -->\n            <div class=\"msgAlarmMessage-list\">\n              <div\n                class=\"msgAlarmMessage-head\"\n                :class=\"{ 'no-home': isHome == false }\"\n              >\n                <div>\n                  共{{ $store.state.app.warningSocket.list.length }}条消息\n                </div>\n                <div class=\"message\" @click=\"toMessageAll\">更多消息</div>\n              </div>\n              <div\n                v-for=\"item in $store.state.app.warningSocket.list\"\n                @click=\"linkClick(item)\"\n                class=\"msgAlarmMessage-item\"\n              >\n                <div class=\"item-title\">\n                  <div class=\"item-text1\">【报警】</div>\n                  <div class=\"item-text2\">{{ item.railwayName }}</div>\n                  <!-- <div class=\"item-text3\">{{ item.releasedTime }}</div> -->\n                </div>\n                <div class=\"item-content\">\n                  <span>{{ item.alarmTime }}</span>\n                  <span style=\"display: inline-block; margin-left: 5px\"\n                    >,里程位置{{ item.alarmMile }},</span\n                  >\n                  <span>{{ item.lineDir == 1 ? \"上行\" : \"下行\" }},</span>\n                  <span style=\"display: inline-block; margin-left: 5px\">{{\n                    item.alarmType == 1 ? \"泥石流\" : \"\"\n                  }}</span>\n\n                  <!-- {{ item.alarmType === 1 ? \"泥石流\" : \"\" }} -->\n                  <!-- {{ item.lineDirStr }} 里程位置 里程范围\n                  {{ item.beginMile }}-{{ item.endMile }} -->\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <el-badge\n            slot=\"reference\"\n            :value=\"$store.state.app.warningSocket.list.length==0?'':$store.state.app.warningSocket.list.length\"\n            class=\"item\"\n          >\n            <img\n              :src=\"\n                !isHome\n                  ? require('../../assets/xiaoxi-1.png')\n                  : require('../../assets/xiaoxi-1.png')\n              \"\n              alt=\"\"\n            />\n          </el-badge>\n        </el-popover>\n\n        <div\n          style=\"\n            width: 1px;\n            height: 60%;\n            background-color: none;\n            margin-left: 0px;\n            margin-right: 20px;\n          \"\n        />\n        <el-dropdown class=\"avatar-container\" trigger=\"click\">\n          <div class=\"avatar-wrapper\">\n            <img\n              :src=\"\n                !isHome\n                  ? require('../../assets/btn_cards1.png')\n                  : require('../../assets/btn_cards1.png')\n              \"\n              class=\"user-avatar\"\n            />\n            <div :style=\"{ color: isHome == true ? '#fff' : '#fff' }\">\n              {{ name }}\n            </div>\n            <i style=\"color: #fff\" class=\"el-icon-caret-bottom\" />\n          </div>\n          <el-dropdown-menu slot=\"dropdown\" class=\"user-dropdown\">\n            <!-- <router-link to=\"/\">\n            <el-dropdown-item>\n              Home\n            </el-dropdown-item>\n          </router-link> -->\n            <el-dropdown-item divided @click.native=\"logout\">\n              <span style=\"display: block\">退出登陆</span>\n            </el-dropdown-item>\n            <el-dropdown-item>\n              <span style=\"display: block\" @click=\"personalCenter()\"\n                >个人中心</span\n              >\n            </el-dropdown-item>\n            <el-dropdown-item>\n              <span style=\"display: block\" @click=\"updatePwd\">修改密码</span>\n            </el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n        <updatePwd\n          v-if=\"updatePwdData.dialogVisible\"\n          :updatePwdData=\"updatePwdData\"\n          @updatePwdBtn=\"updatePwdBtn\"\n        >\n        </updatePwd>\n      </div>\n    </div>\n    <hamburger\n      :is-active=\"sidebar.opened\"\n      class=\"hamburger-container\"\n      @toggleClick=\"toggleSideBar\"\n    />\n  </div>\n</template>\n\n<script>\nimport { mapGetters } from \"vuex\";\nimport Breadcrumb from \"@/components/Breadcrumb\";\nimport Hamburger from \"@/components/Hamburger\";\nimport store from \"@/store\";\nimport { msgAlarmWebAlarm, readById } from \"@/api/alarmList\";\nimport updatePwd from \"./updatePwd.vue\";\nimport { updatepwd } from \"@/api/sysManage\";\nimport { projectName } from '@/api/user'\nexport default {\n  components: {\n    Breadcrumb,\n    Hamburger,\n    updatePwd,\n  },\n  computed: {\n    ...mapGetters([\"sidebar\", \"avatar\", \"name\"]),\n    isHome() {\n      return this.$route.path == \"/dashboard\";\n    },\n  },\n  created() {    \n    projectName().then(res => {        \n      this.projectName = res      \n    })   \n  },\n  data() {\n    return {\n      updatePwdData: {\n        dialogVisible: false,\n      },\n      allMessageShow: false,\n      qrCodeData: {\n        dialogVisible: true,\n      },\n      projectName:'',\n    };\n  },\n  mounted() {\n    msgAlarmWebAlarm().then((res) => {\n      let data = res.data.webAlarm;\n      if (data.length > 0) {\n        data.forEach((element) => {\n          this.$store.commit(\"app/warningSocketAdd\", element);\n        });\n      }\n    });\n  },\n  methods: {\n    updatePwdBtn(payload) {\n      updatepwd(payload).then((res) => {\n        if (res.code == 200) {\n          this.$message({\n            type: \"success\",\n            message: \"修改成功!\",\n          });\n          this.updatePwdData.dialogVisible = false;\n        } else {\n          this.$message({\n            type: \"error\",\n            message: res.msg,\n          });\n        }\n      });\n    },\n    linkClick(item) {\n      readById({\n        pushId: item.pushId,\n      }).then((res) => {\n        if (res.code == \"200\") {\n          for (\n            var i = 0;\n            i < this.$store.state.app.warningSocket.list.length;\n            i++\n          ) {\n            if (item.id === this.$store.state.app.warningSocket.list[i].id) {\n              this.$store.state.app.warningSocket.list.splice(i, 1);\n            }\n          }\n        }\n      });\n      this.$router.push({ path: \"/alarmDetail?id=\" + item.id });\n    },\n    updatePwd() {\n      this.updatePwdData.dialogVisible = true;\n    },\n    showQrcode() {\n      this.qrCodeData.dialogVisible = true;\n    },\n    toggleSideBar() {\n      this.$store.dispatch(\"app/toggleSideBar\");\n    },\n    async logout() {\n      // await this.$store.dispatch('user/logout')\n      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)\n      store.dispatch(\"user/resetToken\").then(() => {\n        location.reload();\n      });\n    },\n    homeClearScreenClick() {\n      this.$store.commit(\"app/homeClearScreenClick\");\n    },\n    // 去全部消息\n    toMessageAll() {\n      this.allMessageShow = false;\n      this.$router.push(\"/message/list\");\n    },\n    //跳转个人中心\n    personalCenter() {\n      this.$router.push(\"/personalCenter/list\");\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.nav-header {\n  position: relative;\n  width: 100%;\n  height: 50px;\n  position: fixed;\n  top: 0px;\n  left: 0;\n  background-color: #2250c8;\n  /* background: linear-gradient(187deg, #0b244f 0%, #05448c 100%); */\n  color: #fff;\n  line-height: 50px;\n  padding-left: 15px;\n  .nav-heander-name {\n    position: absolute;\n    z-index: 60;\n    text-indent: 60px;\n    font-size: 20px;\n    letter-spacing: 4px;\n    font-weight: 800;\n  }\n  .titleImg {\n    display: block;\n    position: absolute;\n    left: -183px;\n    top: -24px;\n    z-index: 50;\n  }\n  .logo {\n    position: absolute;\n    z-index: 50;\n  }\n}\n\n.nav-headers {\n  width: 100%;\n  height: 50px;\n  position: fixed;\n  top: 15px;\n  left: 0;\n  background-color: #2250c8;\n  /* background: linear-gradient(187deg, #0b244f 0%, #05448c 100%); */\n  color: #fff;\n  line-height: 50px;\n  padding-left: 56px;\n}\n\n.el-badge__content {\n  background-color: #ff0000;\n}\n\n.home-el-popover {\n  background: transparent !important;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n}\n</style>\n<style lang=\"scss\" scoped>\n.navbar {\n  height: 0px;\n  overflow: hidden;\n  position: relative;\n  // background: #fff;\n  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);\n\n  .hamburger-container {\n    display: none;\n    line-height: 46px;\n    height: 100%;\n    float: left;\n    cursor: pointer;\n\n    transition: background 0.3s;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: rgba(0, 0, 0, 0.025);\n    }\n  }\n\n  .breadcrumb-container {\n    float: left;\n  }\n\n  .right-menu {\n    float: right;\n    height: 100%;\n    line-height: 50px;\n\n    .qrCode {\n      cursor: pointer;\n      margin-left: 10px;\n      border-radius: 3px;\n      font-size: 16px;\n      background: -webkit-linear-gradient(top, #0251af, #00c7fb);\n      line-height: 25px;\n      height: 25px;\n      width: 70px;\n      text-align: center;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    .cls {\n      width: 74px;\n      height: 24px;\n      // border: 1px solid #000000;\n      border-image: linear-gradient(\n          151deg,\n          rgba(0, 105, 237, 0.6),\n          rgba(0, 199, 251, 0.6)\n        )\n        3 3;\n      border-radius: 3px;\n      color: #fff;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-left: 10px;\n      background: -webkit-linear-gradient(top, #0251af, #00c7fb);\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    .right-menu-item {\n      display: inline-block;\n      padding: 0 8px;\n      height: 100%;\n      font-size: 18px;\n      color: #5a5e66;\n      vertical-align: text-bottom;\n\n      &.hover-effect {\n        cursor: pointer;\n        transition: background 0.3s;\n\n        &:hover {\n          background: rgba(0, 0, 0, 0.025);\n        }\n      }\n    }\n\n    .avatar-container {\n      margin-right: 30px;\n\n      .avatar-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n\n        .user-avatar {\n          cursor: pointer;\n          width: 28.5px;\n          height: 28.5px;\n          border-radius: 50%;\n          margin-right: 5px;\n        }\n\n        .el-icon-caret-bottom {\n          margin-left: 5px;\n          cursor: pointer;\n          font-size: 12px;\n          color: #0556db;\n        }\n      }\n    }\n  }\n}\n\n.msgAlarmMessage {\n  box-shadow: none;\n  margin-top: 5px;\n\n  .message {\n    cursor: pointer;\n    color: #4d85f4;\n  }\n\n  // .message:hover {\n  //   background: #4d85f4;\n  // }\n\n  // .message:active {\n  //   background: #144ebf;\n  // }\n\n  .msgAlarmMessage-head {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 8px;\n    margin-top: 5px;\n    border-bottom: 1px solid #f2f2f2;\n    color: #333333;\n    font-size: 12px;\n    // width: 100%;\n    // color: #fff;\n\n    &.no-home {\n      color: #000;\n    }\n  }\n\n  .msgAlarmMessage-list {\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    max-height: 412px;\n    overflow-y: auto;\n    background-color: #fff;\n    padding: 24px;\n    margin-top: 5px;\n    border-radius: 2px;\n    // box-shadow: 0px 2px 4px 0px rgba(221, 217, 217, 1);\n\n    .msgAlarmMessage-item {\n      padding-bottom: 8px;\n      margin-top: 5px;\n      border-bottom: 1px solid rgba(242, 242, 242, 1);\n      cursor: pointer;\n\n      // border: 1px solid rgba(242,242,242,1);\n      .item-title {\n        display: flex;\n        align-items: center;\n\n        .item-text1 {\n          flex-shrink: 0;\n          color: red;\n          // margin-right: 10px;\n        }\n\n        .item-text2 {\n          flex: 1;\n          color: #000000;\n          font-size: 14px;\n        }\n\n        .item-text3 {\n          flex-shrink: 0;\n        }\n      }\n\n      .item-content {\n        // padding: 5px 20px;\n        // width: 520px;\n        height: 33px;\n        line-height: 33px;\n        padding-left: 12px;\n        background: #f5f5f5;\n        margin-top: 5px;\n        border-radius: 5px;\n        color: #565656;\n        font-size: 12px;\n      }\n    }\n  }\n}\n</style>\n"]}]}