Navbar.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  1. <template>
  2. <div class="navbar">
  3. <hamburger
  4. :is-active="sidebar.opened"
  5. class="hamburger-container"
  6. @toggleClick="toggleSideBar"
  7. />
  8. <breadcrumb class="breadcrumb-container" v-if="showBreadcrumb" />
  9. <!-- <NavMenu class="navmenu" /> -->
  10. <div class="right-menu">
  11. <!-- <div class="right-menu-item hover-effect">
  12. <el-tooltip effect="dark" content="家用工程机登录" placement="bottom">
  13. <i
  14. class="el-icon-s-platform"
  15. style="font-size: 24px; line-height: 50px"
  16. @click="toEngine"
  17. ></i>
  18. </el-tooltip>
  19. </div> -->
  20. <div class="right-menu-item hover-effect" @click="toEngine">
  21. <i class="el-icon-s-platform" style="font-size: 18px;"></i>
  22. <span style="font-size: 16px; margin-left: 6px;">家用工程机登录</span>
  23. </div>
  24. <el-badge
  25. :value="noticeCount"
  26. :max="10"
  27. :hidden="!noticeVisible"
  28. class="right-menu-item hover-effect"
  29. >
  30. <el-tooltip effect="dark" content="系统消息" placement="bottom">
  31. <i
  32. class="el-icon-message-solid"
  33. @click="goNotice"
  34. style="font-size: 24px; line-height: 50px"
  35. ></i>
  36. </el-tooltip>
  37. <!-- <el-button icon="el-icon-message-solid" type="text" class="notice-icon" @click="goNotice"></el-button> -->
  38. </el-badge>
  39. <template v-if="device !== 'mobile'">
  40. <screenfull id="screenfull" class="right-menu-item hover-effect" />
  41. </template>
  42. <el-dropdown class="user-container" trigger="click">
  43. <div class="user right-menu-item hover-effect">
  44. <i class="el-icon-user-solid"></i>
  45. <span>{{ name }}</span>
  46. </div>
  47. <el-dropdown-menu slot="dropdown" class="user-dropdown">
  48. <router-link to="/setting/personal">
  49. <el-dropdown-item>个人信息</el-dropdown-item>
  50. </router-link>
  51. <el-dropdown-item divided @click.native="logout">
  52. <span style="display: block">退出登录</span>
  53. </el-dropdown-item>
  54. </el-dropdown-menu>
  55. </el-dropdown>
  56. </div>
  57. <el-dialog
  58. title="绑定工程机系统"
  59. :visible.sync="dialogFormVisible"
  60. :modal="false"
  61. width="30%"
  62. >
  63. <el-form ref="engineForm" :model="engineForm" :rules="engineFormRules">
  64. <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
  65. <el-input
  66. v-model="engineForm.account"
  67. placeholder="请输入账号"
  68. autocomplete="off"
  69. ></el-input>
  70. </el-form-item>
  71. <el-form-item
  72. label="密码"
  73. :label-width="formLabelWidth"
  74. prop="password"
  75. >
  76. <el-input
  77. v-model="engineForm.password"
  78. placeholder="请输入密码"
  79. autocomplete="off"
  80. show-password
  81. ></el-input>
  82. </el-form-item>
  83. </el-form>
  84. <div slot="footer" class="dialog-footer">
  85. <el-button @click="dialogFormVisible = false">取 消</el-button>
  86. <el-button type="primary" @click="submitForm">确 定</el-button>
  87. </div>
  88. </el-dialog>
  89. <!-- 工程机多帐号-->
  90. <!-- <el-dialog-->
  91. <!-- title="绑定工程机系统"-->
  92. <!-- :visible.sync="dialogFormVisible"-->
  93. <!-- :modal="false"-->
  94. <!-- width="60%"-->
  95. <!-- >-->
  96. <!-- <el-form ref="engineForm" :model="engineForm">-->
  97. <!-- <el-row v-for="(row, index) in engineForm.engineList" :key="row.id" :gutter="20">-->
  98. <!-- <el-col :span="8">-->
  99. <!-- <el-form-item-->
  100. <!-- :label="'账号' + (index+1)"-->
  101. <!-- :label-width="formLabelWidth"-->
  102. <!-- :prop="'engineList.' + index + '.enginUserName'"-->
  103. <!-- :rules="{required: true, message: '请输入工程机账号', trigger: 'blur'}"-->
  104. <!-- >-->
  105. <!-- <el-input v-model="row.enginUserName" placeholder="请输入账号" autocomplete="off"></el-input>-->
  106. <!-- </el-form-item>-->
  107. <!-- </el-col>-->
  108. <!-- <el-col :span="8">-->
  109. <!-- <el-form-item-->
  110. <!-- :label="'密码' + (index+1)"-->
  111. <!-- :label-width="formLabelWidth"-->
  112. <!-- :prop="'engineList.' + index + '.enginPassword'"-->
  113. <!-- :rules="{required: true, message: '请输入工程机密码', trigger: 'blur'}"-->
  114. <!-- >-->
  115. <!-- <el-input v-model="row.enginPassword" placeholder="请输入密码" autocomplete="off" show-password></el-input>-->
  116. <!-- </el-form-item>-->
  117. <!-- </el-col>-->
  118. <!-- <el-col :span="8">-->
  119. <!-- <template v-if="row.adminUserId">-->
  120. <!-- <el-button @click="submitForm(index)">重验</el-button>-->
  121. <!-- </template>-->
  122. <!-- <template v-else>-->
  123. <!-- <el-button @click="submitForm(index)">验证</el-button>-->
  124. <!-- </template>-->
  125. <!-- <el-button v-if="row.adminUserId" @click="toEngine(index)">打开</el-button>-->
  126. <!-- <el-button @click="delAccountForm(index)">删除</el-button>-->
  127. <!-- </el-col>-->
  128. <!-- </el-row>-->
  129. <!-- </el-form>-->
  130. <!-- <div slot="footer" class="dialog-footer">-->
  131. <!-- <el-button @click="addRowEngine">新增账号</el-button>-->
  132. <!-- <el-button @click="dialogFormVisible = false">取 消</el-button>-->
  133. <!-- </div>-->
  134. <!-- </el-dialog>-->
  135. </div>
  136. </template>
  137. <script>
  138. import { getRebateOrderMsg } from "@/api/dashboard";
  139. import { mapGetters } from "vuex";
  140. import Breadcrumb from "@/components/Breadcrumb";
  141. import Hamburger from "@/components/Hamburger";
  142. import Screenfull from "@/components/Screenfull";
  143. import NavMenu from "@/components/NavMenu";
  144. import { getNoticeListCount } from "@/api/notice";
  145. import {
  146. checkEngineAccount,
  147. bindEngineAccount,
  148. delEngineAccount,
  149. } from "@/api/setting";
  150. import request from "@/utils/request";
  151. import { getToken } from '@/utils/auth'
  152. export default {
  153. data() {
  154. return {
  155. intivalId: "",
  156. timer: "",
  157. noticeCount: 0,
  158. userInfo: "",
  159. engineForm: {
  160. account: "",
  161. password: "",
  162. // engineList: []
  163. },
  164. engineFormRules: {
  165. account: [
  166. { required: true, message: "请输入工程机账号", trigger: "blur" },
  167. ],
  168. password: [
  169. { required: true, message: "请输入工程机密码", trigger: "blur" },
  170. ],
  171. },
  172. formLabelWidth: "100px",
  173. dialogFormVisible: false,
  174. //websocket错误连接次数
  175. wsConnectErrorTime:1,
  176. websock: null,
  177. lockReconnect:false,
  178. };
  179. },
  180. mounted() {
  181. const that = this;
  182. // 开定时器轮询未读消息接口(写在全局vuex里比较好)
  183. // that.initNotice();
  184. that.tcMessage();
  185. this.intivalId = setInterval(function () {
  186. that.tcMessage();
  187. }, 5000);
  188. // this.timer = setInterval(function () {
  189. // that.initNotice();
  190. // }, 3000);
  191. // 长链接
  192. // this.initWebSocket();
  193. },
  194. created() {
  195. this.userInfo = JSON.parse(localStorage.getItem("supply_user"));
  196. },
  197. beforeDestroy() {
  198. window.clearInterval(this.intivalId);
  199. window.clearInterval(this.timer);
  200. console.log("退出清理定时器" + this.timer);
  201. this.websocketOnclose();
  202. },
  203. components: {
  204. Breadcrumb,
  205. Hamburger,
  206. Screenfull,
  207. NavMenu,
  208. },
  209. computed: {
  210. showBreadcrumb() {
  211. return this.$store.state.settings.breadcrumb;
  212. },
  213. noticeVisible() {
  214. return this.noticeCount > 0;
  215. },
  216. ...mapGetters(["sidebar", "avatar", "device", "name"]),
  217. },
  218. methods: {
  219. toggleSideBar() {
  220. this.$store.dispatch("app/toggleSideBar");
  221. },
  222. async logout() {
  223. await this.$store.dispatch("user/logout");
  224. // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
  225. location.reload()
  226. this.$router.push(`/login`);
  227. },
  228. initNotice() {
  229. getNoticeListCount().then((res) => {
  230. if (res.data > 0 && this.noticeCount !== res.data) {
  231. this.noticeCount = res.data;
  232. } else if (res.data === 0 && this.noticeCount !== res.data) {
  233. this.noticeCount = 0;
  234. }
  235. });
  236. },
  237. async tcMessage() {
  238. // 长链接
  239. // let data = {
  240. // type: 'RebateOrderMsg',
  241. // params: {
  242. // }
  243. // }
  244. // this.websocketSend(JSON.stringify(data))
  245. let res = await getRebateOrderMsg();
  246. if (res.data.hasMessage) {
  247. this.$notify.info({
  248. title: "消息",
  249. message: res.data.messages,
  250. position: "bottom-right",
  251. duration: 4000,
  252. showClose: false,
  253. });
  254. }
  255. },
  256. goNotice() {
  257. this.$router.push("/notice/index");
  258. },
  259. openEngineAccount() {
  260. this.engineForm.engineList = this.userInfo.bindEnginList;
  261. this.dialogFormVisible = true;
  262. },
  263. toEngine() {
  264. const userInfoCopy = this.userInfo;
  265. if (userInfoCopy && userInfoCopy.bindEngin) {
  266. checkEngineAccount().then((res) => {
  267. if (res.code === 200) {
  268. // this.$refs.engineSubmit.click()
  269. const { href } = this.$router.resolve({
  270. name: "open_engin",
  271. });
  272. window.open(href, "_blank");
  273. } else {
  274. this.$errorMsg("账号密码错误,请重新绑定");
  275. this.dialogFormVisible = true;
  276. }
  277. });
  278. } else {
  279. this.dialogFormVisible = true;
  280. }
  281. },
  282. // toEngine(index) {
  283. // 工程机多帐号
  284. // const { href } = this.$router.resolve({
  285. // name: "open_engin",
  286. // query: {
  287. // index: index
  288. // }
  289. // });
  290. // window.open(href, "_blank");
  291. // },
  292. // addRowEngine() {
  293. // this.engineForm.engineList.push({
  294. // adminUserId: '',
  295. // enginPassword: '',
  296. // enginUserName: '',
  297. // status: '',
  298. // })
  299. // },
  300. submitForm() {
  301. this.$refs.engineForm.validate((valid) => {
  302. if (valid) {
  303. const params = {
  304. enginUserName: this.engineForm.account,
  305. enginPassword: this.engineForm.password,
  306. };
  307. bindEngineAccount(params).then((res) => {
  308. if (res.code === 200) {
  309. this.$successMsg("绑定成功,正在打开工程机系统");
  310. this.dialogFormVisible = false;
  311. this.$store.dispatch("user/getInfo").then(() => {
  312. this.userInfo = JSON.parse(localStorage.getItem("supply_user"));
  313. const { href } = this.$router.resolve({
  314. name: "open_engin",
  315. });
  316. window.open(href, "_blank");
  317. });
  318. } else {
  319. this.$errorMsg(res.message);
  320. }
  321. });
  322. }
  323. });
  324. },
  325. // submitForm(index) {
  326. // 工程机多帐号
  327. // this.$refs.engineForm.validate((valid) => {
  328. // if (valid) {
  329. // const params = {
  330. // enginUserName: this.engineForm.engineList[index].enginUserName,
  331. // enginPassword: this.engineForm.engineList[index].enginPassword,
  332. // isReset: this.engineForm.engineList[index].adminUserId !== ''
  333. // };
  334. // bindEngineAccount(params).then((res) => {
  335. // if (res.code === 200) {
  336. // this.$successMsg("绑定成功,工程机系统");
  337. // this.$store.dispatch("user/getInfo").then(() => {
  338. // this.userInfo = JSON.parse(localStorage.getItem("supply_user"));
  339. // this.engineForm.engineList = this.userInfo.bindEnginList
  340. // });
  341. // } else {
  342. // this.$errorMsg(res.message);
  343. // }
  344. // });
  345. // }
  346. // });
  347. // },
  348. // delAccountForm(index) {
  349. // if (this.engineForm.engineList[index].id) {
  350. // this.$confirm('此操作将删除账号, 是否继续?', '提示', {
  351. // confirmButtonText: '确定',
  352. // cancelButtonText: '取消',
  353. // type: 'warning',
  354. // center: true
  355. // }).then(() => {
  356. // delEngineAccount({id: this.engineForm.engineList[index].id}).then(() => {
  357. // this.$store.dispatch("user/getInfo").then(() => {
  358. // this.userInfo = JSON.parse(localStorage.getItem("supply_user"));
  359. // this.engineForm.engineList = this.userInfo.bindEnginList
  360. // });
  361. // this.$successMsg("删除成功");
  362. // })
  363. // }).catch(() => {
  364. // });
  365. // } else {
  366. // this.engineForm.engineList.splice(index, 1)
  367. // }
  368. // }
  369. initWebSocket: function () {
  370. // WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
  371. // var userId = this.$store.getters.userid;
  372. //
  373. // var url = process.env.VUE_APP_BASE_API.replace("https://","wss://").replace("http://","ws://").replace("api","supply")+"websocket/"+userId;
  374. // console.debug(userId, url);
  375. // let token = getToken()
  376. // this.websock = new WebSocket(url, [token]);
  377. // this.websock.onopen = this.websocketOnopen;
  378. // this.websock.onerror = this.websocketOnerror;
  379. // this.websock.onmessage = this.websocketOnmessage;
  380. // this.websock.onclose = this.websocketOnclose;
  381. },
  382. websocketOnopen: function () {
  383. console.debug("WebSocket连接成功");
  384. //心跳检测重置
  385. //this.heartCheck.reset().start();
  386. },
  387. websocketOnerror: function (e) {
  388. console.debug("WebSocket连接发生错误,第%s次",this.wsConnectErrorTime);
  389. this.wsConnectErrorTime = this.wsConnectErrorTime + 1;
  390. if(this.wsConnectErrorTime>5){
  391. console.debug("WebSocket连接错误超过5次,就不再重新连了!");
  392. this.lockReconnect = true
  393. return;
  394. }
  395. this.reconnect();
  396. },
  397. websocketOnmessage: function (e) {
  398. console.debug("-----接收消息-------",e.data);
  399. let data = eval("(" + e.data + ")"); //解析对象
  400. if (data.type === 'RebateOrderMsg') {
  401. if (data.res.hasMessage) {
  402. this.$notify.info({
  403. title: "消息",
  404. message: res.data.messages,
  405. position: "bottom-right",
  406. duration: 4000,
  407. showClose: false,
  408. });
  409. }
  410. }
  411. },
  412. websocketOnclose: function (e) {
  413. console.debug("connection closed (" + e + ")");
  414. if(e){
  415. console.debug("connection closed (" + e.code + ")");
  416. }
  417. this.reconnect();
  418. },
  419. websocketSend(text) { // 数据发送
  420. try {
  421. this.websock.send(text);
  422. } catch (err) {
  423. console.debug("send failed (" + err.code + ")");
  424. }
  425. },
  426. reconnect() {
  427. var that = this;
  428. if(that.lockReconnect) return;
  429. that.lockReconnect = true;
  430. //没连接上会一直重连,设置延迟避免请求过多
  431. setTimeout(function () {
  432. console.debug("尝试重连...");
  433. that.initWebSocket();
  434. that.lockReconnect = false;
  435. }, 20000);
  436. },
  437. },
  438. };
  439. </script>
  440. <style lang="scss" scoped>
  441. @import "~@/styles/variables.scss";
  442. .navbar {
  443. width: 100%;
  444. height: 50px;
  445. overflow: hidden;
  446. background: #{$navbarBg};
  447. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  448. .hamburger-container {
  449. line-height: 46px;
  450. height: 100%;
  451. color: #{$navbarText};
  452. float: left;
  453. cursor: pointer;
  454. transition: background 0.3s;
  455. -webkit-tap-highlight-color: transparent;
  456. border-right: 1px solid #eaeaea;
  457. &:hover {
  458. background: rgba(0, 0, 0, 0.025);
  459. }
  460. }
  461. .navmenu {
  462. float: left;
  463. }
  464. .breadcrumb-container {
  465. float: left;
  466. }
  467. .right-menu {
  468. float: right;
  469. height: 100%;
  470. line-height: 50px;
  471. & > div {
  472. float: left;
  473. }
  474. &:focus {
  475. outline: none;
  476. }
  477. .user-container {
  478. height: 50px;
  479. .user {
  480. i {
  481. font-size: 18px;
  482. margin-right: 5px;
  483. }
  484. span {
  485. font-size: 16px;
  486. }
  487. }
  488. }
  489. .right-menu-item {
  490. display: inline-block;
  491. padding: 0 15px;
  492. height: 100%;
  493. font-size: 18px;
  494. color: #{$navbarText};
  495. vertical-align: text-bottom;
  496. border-left: 1px solid #eaeaea;
  497. &.hover-effect {
  498. cursor: pointer;
  499. transition: background 0.3s;
  500. &:hover {
  501. background: rgba(0, 0, 0, 0.025);
  502. }
  503. }
  504. .notice-icon {
  505. padding-top: 0;
  506. padding-bottom: 0;
  507. }
  508. }
  509. }
  510. }
  511. </style>
  512. <style lang="scss">
  513. .navbar {
  514. .right-menu {
  515. .right-menu-item {
  516. .notice-icon > i {
  517. font-size: 18px;
  518. }
  519. sup {
  520. top: 12px;
  521. right: 25px;
  522. }
  523. }
  524. }
  525. }
  526. </style>