index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. <template>
  2. <div class="home" v-if="showLogin">
  3. <div class="home-btn" @click="checkLoginType">
  4. <span v-if="type === 2">二维码登录</span>
  5. <span v-else>账号登录</span>
  6. </div>
  7. <div class="home-content">
  8. <div class="home-left">
  9. <div class="box">
  10. <img :src="parseImgUrl('ipdImages', 'logo.svg')" alt="" />
  11. <div class="logo-text">SagaCare</div>
  12. </div>
  13. </div>
  14. <div class="home-right">
  15. <div class="box" v-if="type === 1">
  16. <div class="qrcode-main">
  17. <qrcode-vue
  18. :value="codeValue"
  19. class="qrcode"
  20. foreground="#CE9F27"
  21. level="H"
  22. />
  23. <div class="qrcode-model" v-if="codeStatus.status">
  24. <span v-if="codeStatus.status === 1">已扫描</span>
  25. <!-- <span v-if="codeStatus.status === 2">已确认</span> -->
  26. <van-icon
  27. v-if="codeStatus.status === 2 || codeStatus.status === 3"
  28. class="code-replay"
  29. @click="refreshCode"
  30. name="replay"
  31. />
  32. </div>
  33. </div>
  34. <div class="qrcode-text">
  35. 请使用朵朵小程序,扫描上面二维码进行授权登录
  36. </div>
  37. </div>
  38. <div class="box" v-else>
  39. <van-form @submit="onSubmit" class="box-form">
  40. <van-cell-group inset>
  41. <van-field
  42. v-model="username"
  43. name="username"
  44. placeholder="用户名"
  45. :rules="[{ required: true, message: '请填写用户名' }]"
  46. />
  47. <van-field
  48. v-model="password"
  49. type="password"
  50. name="password"
  51. placeholder="密码"
  52. :rules="[{ required: true, message: '请填写密码' }]"
  53. />
  54. </van-cell-group>
  55. <div>
  56. <van-button round block native-type="submit"> 提交 </van-button>
  57. </div>
  58. </van-form>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="fotter">欢迎使用智能办公</div>
  63. </div>
  64. </template>
  65. <script lang="ts">
  66. import {
  67. defineComponent,
  68. reactive,
  69. toRefs,
  70. onBeforeMount,
  71. onMounted,
  72. ref,
  73. onBeforeUnmount,
  74. } from "vue";
  75. import QrcodeVue from "qrcode.vue";
  76. import { useRouter } from "vue-router";
  77. import {
  78. getUserInfo,
  79. newNumber,
  80. parseImgUrl,
  81. setLocalProjectId,
  82. setQueryConfig,
  83. } from "@/utils";
  84. import { UserActionTypes } from "@/store/modules/user/action-types";
  85. import { store, useStore } from "@/store";
  86. import { login } from "@/apis/user";
  87. import { Form, Field, CellGroup, Button, Toast } from "vant";
  88. import { getCookieMac, setToken } from "@/utils/cookies";
  89. import { getPadQrCodeStatus, queryWorkSpace } from "@/apis/envmonitor";
  90. import { getUrlParams } from "@/utils/https";
  91. import { UserMutationTypes } from "@/store/modules/user/mutation-types";
  92. import router from "@/router";
  93. export default defineComponent({
  94. components: {
  95. QrcodeVue,
  96. vanForm: Form,
  97. vanField: Field,
  98. CellGroup,
  99. vanButton: Button,
  100. },
  101. beforeRouteEnter(to, from, next) {
  102. try {
  103. let mac: any = getCookieMac();
  104. if (mac && mac != "null") {
  105. if (to.query.type !== "logoOut") {
  106. next((e: any) => {
  107. console.log(e);
  108. e.queryWorkSpace();
  109. });
  110. } else {
  111. next((e: any) => {
  112. e.showLogin = true;
  113. let mac: any = getCookieMac();
  114. console.log(mac);
  115. // to.query = { mac: mac};
  116. console.log(to);
  117. // console.log( e.showLogin )
  118. // router.push({ name: "home", query: { mac: mac } });
  119. });
  120. }
  121. } else {
  122. next("/error");
  123. }
  124. } catch (e: any) {
  125. next("/error");
  126. }
  127. // next()
  128. },
  129. setup(props) {
  130. let router: any = useRouter();
  131. const userInfo: any = getUserInfo();
  132. const store = useStore();
  133. const codeStatus: any = {};
  134. const timer: any = null;
  135. const orgin: any = location.origin;
  136. const proxyData = reactive({
  137. parseImgUrl: parseImgUrl,
  138. codeValue: `${orgin}/sgipad/home`,
  139. showLogin: false,
  140. size: 134,
  141. type: 1, // 1:二维码登录 2:用户密码登录
  142. userInfo: userInfo,
  143. checkLoginType() {
  144. if (proxyData.type === 1) {
  145. proxyData.type = 2;
  146. } else {
  147. proxyData.type = 1;
  148. }
  149. if (proxyData.type === 1) {
  150. proxyData.getPadQrCodeStatus();
  151. } else {
  152. if (proxyData.timer) {
  153. clearTimeout(proxyData.timer);
  154. proxyData.timer = null;
  155. }
  156. }
  157. },
  158. username: "",
  159. password: "",
  160. onSubmit(values: any) {
  161. console.log("submit", values);
  162. let params: any = values;
  163. login(params).then((res) => {
  164. let resData: any = res;
  165. if (resData.result === "success") {
  166. setToken(resData.token);
  167. router.push({ path: "/choice-project" });
  168. } else {
  169. Toast("登录失败!");
  170. }
  171. });
  172. },
  173. // 查询工作空间
  174. queryWorkSpace() {
  175. if (!proxyData.userInfo.mac) {
  176. proxyData.showLogin = true;
  177. } else {
  178. let params: any = {
  179. criteria: {
  180. macAddress: proxyData.userInfo.mac,
  181. isMajorSpace: 1,
  182. },
  183. orders: [
  184. {
  185. column: "createTime",
  186. asc: false,
  187. },
  188. ],
  189. page: 1,
  190. size: 1,
  191. };
  192. queryWorkSpace(params)
  193. .then((res: any) => {
  194. let resData: any = res;
  195. if (resData.result === "success") {
  196. let content: any = resData?.content ?? [];
  197. if (content && content.length) {
  198. proxyData.showLogin = false;
  199. let projectId: any = content[0].projectId;
  200. store.commit(UserMutationTypes.SET_PROJECT_ID, projectId);
  201. router.push({
  202. name: "envmonitor",
  203. query: { spaceId: content[0].spaceId },
  204. });
  205. } else {
  206. proxyData.showLogin = true;
  207. }
  208. } else {
  209. proxyData.showLogin = true;
  210. }
  211. })
  212. .catch(() => {
  213. proxyData.showLogin = true;
  214. });
  215. }
  216. },
  217. /**
  218. * 获取mac地址
  219. */
  220. getQrcode() {
  221. let mac: any = proxyData.userInfo.mac;
  222. const id: any = newNumber(0, 100000, mac);
  223. return id;
  224. },
  225. qrCodeId: "",
  226. setCodeUrl() {
  227. let mac: any = proxyData.userInfo.mac;
  228. let qrCodeId: any = proxyData.getQrcode();
  229. proxyData.qrCodeId = qrCodeId;
  230. proxyData.codeValue = `${orgin}/sgipad/home?type=ipad&id=${proxyData.qrCodeId}&mac=${mac}`;
  231. },
  232. // 定时器清楚
  233. clearTimer() {
  234. if (proxyData.timer) {
  235. clearTimeout(proxyData.timer);
  236. proxyData.timer = null;
  237. }
  238. },
  239. // 二维码刷新
  240. refreshCode() {
  241. proxyData.setCodeUrl();
  242. proxyData.clearTimer();
  243. proxyData.getPadQrCodeStatus();
  244. },
  245. /**
  246. *
  247. *获取二维码状态
  248. */
  249. codeStatus: codeStatus,
  250. timer: timer,
  251. getPadQrCodeStatus() {
  252. let params: any = setQueryConfig({ qrCodeId: proxyData.qrCodeId });
  253. getPadQrCodeStatus(params).then((res) => {
  254. let resData: any = res;
  255. proxyData.codeStatus = resData?.data ?? {};
  256. if (proxyData.codeStatus.status === 2) {
  257. // debugger
  258. let projectId: any = proxyData.codeStatus.projectId;
  259. let spaceId: any = proxyData.codeStatus.spaceId;
  260. if (projectId && spaceId) {
  261. // 直接去环境条件页面
  262. // setLocalProjectId(projectId)
  263. store.commit(UserMutationTypes.SET_PROJECT_ID, projectId);
  264. router.push({
  265. name: "choiceSpace",
  266. query: { id: projectId, spaceId: spaceId },
  267. });
  268. } else if (projectId) {
  269. // 去选择项目页面
  270. store.commit(UserMutationTypes.SET_PROJECT_ID, projectId);
  271. router.push({ name: "choiceSpace", query: { id: projectId } });
  272. }
  273. } else {
  274. if (proxyData.timer) {
  275. clearTimeout(proxyData.timer);
  276. proxyData.timer = null;
  277. }
  278. proxyData.timer = setTimeout(() => {
  279. proxyData.getPadQrCodeStatus();
  280. }, 1000);
  281. }
  282. });
  283. },
  284. });
  285. onBeforeUnmount(() => {
  286. if (proxyData.timer) {
  287. clearTimeout(proxyData.timer);
  288. proxyData.timer = null;
  289. }
  290. });
  291. onMounted(() => {
  292. // 设置二维码路径
  293. proxyData.setCodeUrl();
  294. proxyData.getPadQrCodeStatus();
  295. });
  296. return {
  297. ...toRefs(proxyData),
  298. };
  299. },
  300. });
  301. </script>
  302. <style lang="scss" scoped>
  303. .home {
  304. position: relative;
  305. width: 100%;
  306. height: 100%;
  307. background: #eceff4;
  308. padding: 20px;
  309. .home-btn {
  310. position: absolute;
  311. right: 0;
  312. top: 20px;
  313. width: 126px;
  314. height: 46px;
  315. line-height: 46px;
  316. background: #ffffff;
  317. border: 1px solid #e2d0a0;
  318. font-family: "Montserrat";
  319. font-style: normal;
  320. font-weight: 500;
  321. font-size: 16px;
  322. text-align: center;
  323. border-radius: 40px 0 0 40px;
  324. color: #4d5262;
  325. }
  326. .home-content {
  327. width: 75%;
  328. // min-width: 640px;
  329. display: flex;
  330. height: 232px;
  331. position: absolute;
  332. left: 50%;
  333. top: 45%;
  334. transform: translate(-50%, -50%);
  335. .home-left {
  336. position: relative;
  337. flex: 1;
  338. height: 100%;
  339. text-align: center;
  340. .box {
  341. top: 10px;
  342. position: absolute;
  343. width: 160px;
  344. right: 138px;
  345. }
  346. img {
  347. width: 160px;
  348. height: 160px;
  349. }
  350. .logo-text {
  351. padding-top: 17px;
  352. font-family: "Persagy";
  353. font-style: normal;
  354. font-weight: 700;
  355. font-size: 24px;
  356. line-height: 29px;
  357. text-align: center;
  358. text-transform: capitalize;
  359. color: #af810c;
  360. }
  361. }
  362. .home-right {
  363. position: relative;
  364. flex: 1;
  365. height: 100%;
  366. border-left: 1px solid #d9d9d9;
  367. .box {
  368. top: 10px;
  369. width: 308px;
  370. position: absolute;
  371. left: 80px;
  372. }
  373. .qrcode-main {
  374. position: relative;
  375. margin: 0 auto;
  376. width: 164px;
  377. height: 160px;
  378. padding: 15px;
  379. background: #ffffff;
  380. border: 1px solid #ce9f27;
  381. .qrcode {
  382. width: 100% !important;
  383. height: 100% !important;
  384. }
  385. }
  386. .qrcode-model {
  387. position: absolute;
  388. left: 50%;
  389. transform: translateX(-50%);
  390. top: 0;
  391. width: 164px;
  392. height: 160px;
  393. background: rgba(0, 0, 0, 0.3);
  394. span {
  395. display: block;
  396. line-height: 160px;
  397. text-align: center;
  398. font-size: 12px;
  399. color: #4d5262;
  400. }
  401. .code-replay {
  402. position: absolute;
  403. left: 50%;
  404. top: 50%;
  405. transform: translate(-50%, -50%);
  406. font-size: 32px;
  407. color: #fff;
  408. }
  409. }
  410. .qrcode-text {
  411. padding-top: 25px;
  412. font-family: "Noto Sans SC";
  413. font-style: normal;
  414. font-weight: 400;
  415. font-size: 14px;
  416. line-height: 20px;
  417. // margin-left: 13%;
  418. text-align: center;
  419. color: #af810c;
  420. }
  421. }
  422. }
  423. .fotter {
  424. position: fixed;
  425. left: 0;
  426. width: 100%;
  427. bottom: 80px;
  428. font-family: "Montserrat";
  429. font-style: normal;
  430. font-weight: 500;
  431. font-size: 24px;
  432. line-height: 29px;
  433. color: #4d5262;
  434. text-align: center;
  435. }
  436. }
  437. </style>
  438. <style lang="scss">
  439. .box-form {
  440. width: 280px;
  441. margin: 0 auto;
  442. padding: 0 !important;
  443. .van-cell {
  444. width: 100%;
  445. height: 48px;
  446. background: #ffffff;
  447. border: 1px solid #c3c7cb;
  448. border-radius: 16px;
  449. margin-bottom: 28px;
  450. font-family: "Microsoft YaHei UI";
  451. font-style: normal;
  452. font-weight: 400;
  453. font-size: 14px;
  454. line-height: 22px;
  455. color: #c3c7cb;
  456. }
  457. .van-button {
  458. width: 100%;
  459. height: 48px;
  460. background: #ce9f27;
  461. border-radius: 16px;
  462. font-family: "PingFang SC";
  463. font-style: normal;
  464. font-weight: 500;
  465. font-size: 20px;
  466. line-height: 24px;
  467. text-align: center;
  468. color: #ffffff;
  469. flex: none;
  470. order: 1;
  471. flex-grow: 0;
  472. }
  473. .van-field__error-message {
  474. position: absolute;
  475. top: 15px;
  476. }
  477. }
  478. </style>