From 06eb604f71605c47f015b88b1620b72b6f69df8c Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期一, 22 九月 2025 05:20:41 +0800
Subject: [PATCH] 功能增加，代码优化
---
代码管理/WCS/WIDESEAWCS_Client/src/views/Login.vue | 1182 ++++++++++++++++++----------------------------------------
1 files changed, 363 insertions(+), 819 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Login.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Login.vue"
index 78a3fb9..81243fa 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Login.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Login.vue"
@@ -1,864 +1,408 @@
<template>
- <div id="vol-container" :class="['vol-theme-' + theme]">
- <div class="vol-aside" :style="{ width: menuWidth + 'px' }">
- <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
- <img v-show="!isCollapse" v-bind:src="logo" />
- <i
- @click="toggleLeft"
- class="collapse-menu"
- :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
- />
- </div>
- <div class="vol-menu">
- <el-scrollbar style="height: 100%">
- <VolMenu
- :currentMenuId="currentMenuId"
- :on-select="onSelect"
- :enable="true"
- :open-select="false"
- :isCollapse="isCollapse"
- :list="menuOptions"
- ></VolMenu>
- </el-scrollbar>
- </div>
- </div>
- <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }">
- <div class="vol-header">
- <div class="project-name">WMS</div>
- <div class="header-text">
- <div class="h-link">
- <a
- href="javascript:void(0)"
- @click="to(item)"
- v-for="(item, index) in links.filter((c) => {
- return !c.icon;
- })"
- :key="index"
- >
- <span v-if="!item.icon">{{ item.text }}</span>
- <i v-else :class="item.icon"></i>
- </a>
- </div>
- </div>
- <div class="header-info">
- <div class="h-link">
- <a
- href="javascript:void(0)"
- @click="to(item)"
- v-for="(item, index) in links.filter((c) => {
- return c.icon;
- })"
- :key="index"
- >
- <span v-if="!item.icon">{{ item.text }}</span>
- <i v-else :class="item.icon"></i>
- </a>
- </div>
- <!--娑堟伅绠＄悊-->
- <div class="h-link" @click="messageModel = true">
- <a>
- <i class="el-icon-message-solid">
- <el-badge
- :value="messageList.length"
- :type="messageList.length > 0 ? 'danger' : 'success'"
- class="item"
- style="width: 10px"
- ></el-badge>
- </i>
- </a>
- </div>
+ <div class="login-container">
+ <div class="project-name">WIDESEA_WMS</div>
+ <div class="login-form">
+ <div class="form-user" @keypress="loginPress">
+ <div class="login-text">
<div>
- <img class="user-header" :src="userImg" :onerror="errorImg" />
+ <div>娆㈣繋鐧诲綍...</div>
+ <div class="login-line"></div>
</div>
- <div class="user">
- <span>{{ userName }}</span>
- <span id="index-date"></span>
- </div>
- <div class="settings">
- <i style="font-size: 20px" class="el-icon-s-tools" @click="drawer_model = true" />
- </div>
+ <div style="flex: 1"></div>
</div>
- </div>
- <div class="vol-path">
- <el-tabs
- @tab-click="selectNav"
- @tab-remove="removeNav"
- @contextmenu.prevent="bindRightClickMenu(false)"
- type="border-card"
- class="header-navigation"
- v-model="selectId"
- :strtch="false"
- >
- <el-tab-pane
- v-for="(item, navIndex) in navigation"
- type="card"
- :name="navIndex + ''"
- :closable="navIndex > 0"
- :key="navIndex"
- :label="item.name"
- >
- <span style="display: none">{{ navIndex }}</span>
- </el-tab-pane>
- </el-tabs>
- <!-- 鍙抽敭鑿滃崟 -->
- <div v-show="contextMenuVisible">
- <ul :style="{ left: menuLeft + 'px', top: menuTop + 'px' }" class="contextMenu">
- <li v-show="visibleItem.all">
- <el-button link @click="closeTabs()">
- <i class="el-icon-close"></i>
- {{
- navigation.length == 2 ? "鍏抽棴鑿滃崟" : "鍏抽棴鎵�鏈�"
- }}
- </el-button>
- </li>
- <li v-show="visibleItem.left">
- <el-button link @click="closeTabs('left')">
- <i class="el-icon-back"></i>鍏抽棴宸﹁竟
- </el-button>
- </li>
- <li v-show="visibleItem.right">
- <el-button link @click="closeTabs('right')">
- <i class="el-icon-right"></i>鍏抽棴鍙宠竟
- </el-button>
- </li>
- <li v-show="visibleItem.other">
- <el-button link @click="closeTabs('other')">
- <i class="el-icon-right"></i>鍏抽棴鍏朵粬
- </el-button>
- </li>
- </ul>
+ <div class="login-text-small">WELCOME TO LOGIN</div>
+ <div class="item">
+ <div class="input-icon el-icon-user"></div>
+ <input
+ type="text"
+ v-focus
+ v-model="userInfo.userName"
+ placeholder="璇疯緭鍏ヨ处鍙�"
+ />
</div>
- </div>
- <div class="vol-main" id="vol-main">
- <el-scrollbar style="height: 100%" v-if="permissionInited">
- <loading v-show="$store.getters.isLoading()"></loading>
- <router-view v-slot="{ Component }">
- <keep-alive>
- <component
- :is="Component"
- :key="$route.name"
- v-if="
- !$route.meta ||
- ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
- "
- />
- </keep-alive>
- <component
- :is="Component"
- :key="$route.name"
- v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"
- />
- </router-view>
- </el-scrollbar>
- </div>
- </div>
- <el-drawer title="閫夋嫨涓婚" v-model="drawer_model" direction="rtl" destroy-on-close>
- <div class="theme-selector">
- <div
- @click="changeTheme(item.name)"
- class="item"
- v-for="(item, index) in theme_color"
- :key="index"
- :style="{ background: item.color }"
- >
- <div
- v-show="item.leftColor"
- :style="{ background: item.leftColor }"
- style="height: 100%; width: 20px"
- class="t-left"
- ></div>
- <div class="t-right"></div>
+ <div class="item">
+ <div class="input-icon el-icon-lock"></div>
+ <input
+ type="password"
+ v-focus
+ v-model="userInfo.password"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ />
</div>
- </div>
- </el-drawer>
+ <div class="item">
+ <div class="input-icon el-icon-mobile"></div>
- <el-drawer title="娑堟伅鍒楄〃" v-model="messageModel" direction="rtl" destroy-on-close size="40%">
- <Message :list="messageList"></Message>
- </el-drawer>
+ <input
+ v-focus
+ type="text"
+ v-model="userInfo.verificationCode"
+ placeholder="杈撳叆楠岃瘉鐮�"
+ />
+ <div class="code" @click="getVierificationCode">
+ <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
+ </div>
+ </div>
+ </div>
+ <div class="loging-btn">
+ <el-button
+ size="large"
+ :loading="loading"
+ color="#3a6cd1"
+ :dark="true"
+ @click="login"
+ long
+ >
+ <span v-if="!loading">鐧诲綍</span>
+ <span v-else>姝ｅ湪鐧诲綍...</span>
+ </el-button>
+ </div>
+
+ <!-- 璐﹀彿淇℃伅 -->
+ <!-- <div class="account-info">
+ <p>婕旂ず璐﹀彿锛歛dmin666 瀵嗙爜:123456</p>
+ <p>鏈湴璐﹀彿锛歛dmin 瀵嗙爜:123456</p>
+ <p><a href="https://jq.qq.com/?_wv=1027&k=Sqstuy0M" style="text-decoration: none"
+ target="_blank">QQ3缇�:743852316</a>
+
+ <a href="http://v2.volcore.xyz/document/guide" style="text-decoration: none" target="_blank">妗嗘灦鏂囨。</a>
+ </p>
+ </div> -->
+ <!-- 閾炬帴浣嶇疆 -->
+ <!-- <div class="app-link" >
+ <a href="#" style="text-decoration: none">绉诲姩绔壂鐮�</a>
+ <a>
+ <i class="el-icon-chat-dot-round"></i> 灏忕▼搴�
+ <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/wechat.jpg" /></a>
+ <a>
+ <i class="el-icon-apple"></i>
+ Android
+ <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/Android.png" /></a>
+ <a>
+ <i class="el-icon-document"></i>
+ H5
+ <img src="https://app-1256993465.cos.ap-nanjing.myqcloud.com/H5.png" /></a>
+ </div> -->
+ </div>
+
+ <!-- 椤甸潰搴曢儴 -->
+ <!-- <div class="login-footer">
+ <a style="text-decoration: none" href="https://beian.miit.gov.cn/" target="_blank">浜琁CP澶�19056538鍙�-1</a>
+
+
+ <a href="https://dotnet9.com/" style="text-decoration: none" target="blank">Dotnet9</a>
+ <a href="https://space.bilibili.com/525836469" style="text-decoration: none" target="blank">NET瑙嗛鏁欑▼(寰蒋MVP-ACE褰曞埗)</a>
+ <a href="https://www.cctalk.com/m/group/90268531" style="text-decoration: none" target="blank">VOL妗嗘灦瑙嗛</a>
+ <a href="http://120.48.115.252:9990" style="text-decoration: none" target="blank">瑙嗛婕旂ず鍦板潃</a>
+ </div> -->
+
+ <img class="login-bg" src="/static/login_bg.png" />
</div>
</template>
-<style lang="less" scoped>
-@import "./index/index.less";
-</style>
-<script>
-import loading from "@/components/basic/RouterLoading";
-import VolMenu from "@/components/basic/VolElementMenu.vue";
-import Message from "./index/Message.vue";
-import MessageConfig from "./index/MessageConfig.js";
-var imgUrl = require("@/assets/imgs/wms_x.png");
-var $this;
-var $interval;
-var $indexDate;
+
+
+<script >
import {
defineComponent,
- reactive,
ref,
- watch,
- onMounted,
+ reactive,
+ toRefs,
getCurrentInstance,
- h
} from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index";
import http from "@/../src/api/http.js";
-import { ElNotification } from "element-plus";
-import { useStore } from "vuex";
-
export default defineComponent({
- components: {
- VolMenu,
- loading,
- Message
- },
-
- data() {
- return {
- allTabs: true,
- leftTabs: true,
- rightTabs: true,
- otherTabs: true,
- menuLeft: 0,
- menuTop: 0
- };
- },
setup(props, context) {
- let client = ref(null);
- // 鑺傛祦鐩稿叧鍙橀噺锛堝欢杩熸椂闂村缓璁�300-500ms锛屾牴鎹悗绔帹閫侀鐜囪皟鏁达級
- const THROTTLE_DELAY = 300; // 寤惰繜鏇存柊鏃堕棿锛堟绉掞級
- let lastUpdateTime = ref(0); // 涓婁竴娆℃洿鏂版椂闂�
- let latestWsData = ref(null); // 缂撳瓨鏈�鏂扮殑WebSocket鏁版嵁
- let throttleTimer = ref(null); // 鑺傛祦瀹氭椂鍣�
-
- // 鑾峰彇鍏ㄥ眬灞炴�у拰鏂规硶
- const { proxy } = getCurrentInstance();
-
- // 鑿滃崟瀵艰埅榛樿瀹藉害
- const menuWidth = ref(200);
- const contextMenuVisible = ref(false);
- const isCollapse = ref(false);
- const drawer_model = ref(false);
- const messageModel = ref(false);
- const theme_color = ref([
- { name: "blue", color: "rgb(45, 140, 240)" },
- { name: "blue2", color: "rgb(45, 140, 240)", leftColor: "#0068d6" },
- { name: "red", color: "rgb(237, 64, 20)" },
- { name: "red2", color: "rgb(237, 64, 20)", leftColor: "#a90000" },
- { name: "dark", color: "#272929" },
- { name: "orange", color: "#ff9900" },
- { name: "orange2", color: "#ff9900", leftColor: "rgb(232 141 5)" },
- { name: "green", color: "rgb(25, 190, 107)" },
- { name: "green2", color: "rgb(25, 190, 107)", leftColor: "#019e4f" },
- { name: "white", color: "#fff" }
- ]);
- const links = ref([
- { text: "涓汉涓績", path: "/UserInfo", id: -1, icon: "el-icon-s-custom" },
- {
- text: "瀹夊叏閫�鍑�",
- path: "/login",
- id: -4,
- icon: "el-icon-switch-button"
- }
- ]);
- const errorImg = ref(
- 'this.src="' + require("@/assets/imgs/error-img.png") + '"'
- );
- const selectId = ref("1");
- // 銆愰椤点�戞爣绛惧簭鍙�(褰撳墠鍙抽敭閫変腑鐨勮彍鍗�)
- const selectMenuIndex = ref("0");
- //2022.05.29澧炲姞tab閫夐」涓庤彍鍗曡仈鍔ㄥ姛鑳�
- const currentMenuId = ref(0);
- const userName = ref("--");
- const userTrueName = ref("--");
- const userInfo = ref({});
- const visibleItem = reactive({
- left: false,
- right: false,
- all: false,
- other: false
+ store.commit("clearUserInfo", "");
+ const loading = ref(false);
+ const codeImgSrc = ref("");
+ const userInfo = reactive({
+ userName: "",
+ password: "",
+ verificationCode: "",
+ UUID: undefined,
});
- const userImg = ref("");
- const navigation = reactive([
- { orderNo: "0", id: "1", name: "棣栭〉", path: "/home" }
- ]);
- const logo = ref(imgUrl);
- const theme = ref("blue2");
- const menuOptions = ref([]);
- const permissionInited = ref(false);
- const messageList = reactive([]);
- let _config = getCurrentInstance().appContext.config.globalProperties;
+
+ const getVierificationCode = () => {
+ http.get("/api/User/getVierificationCode").then((x) => {
+ codeImgSrc.value = "data:image/png;base64," + x.img;
+ userInfo.UUID = x.uuid;
+ });
+ };
+ getVierificationCode();
+
+ let appContext = getCurrentInstance().appContext;
+ let $message = appContext.config.globalProperties.$message;
let router = useRouter();
- const toggleLeft = () => {
- isCollapse.value = !isCollapse.value;
- menuWidth.value = isCollapse.value ? 63 : 200;
- };
- //2021.08.28寮�鏀炬墜鍔ㄦ姌鍙犺彍鍗曟柟娉�
- _config.menu = {
- show() {
- toggleLeft();
- },
- hide() {
- toggleLeft();
+
+ const login = () => {
+ if (!userInfo.userName) return $message.error("璇疯緭鍏ョ敤鎴峰悕");
+ if (!userInfo.password) return $message.error("璇疯緭鍏ュ瘑鐮�");
+ if (!userInfo.verificationCode) {
+ return $message.error("璇疯緭鍏ラ獙璇佺爜");
}
- };
- const Store = useStore();
- const s = ref(null);
-
- // 鑺傛祦澶勭悊WebSocket鏁版嵁锛堟牳蹇冮�昏緫锛�
- const handleThrottledWsData = (rawData) => {
- // 缂撳瓨鏈�鏂版暟鎹紙纭繚鏈�缁堟洿鏂扮敤鐨勬槸鏈�鏂板�硷級
- latestWsData.value = rawData;
- const now = Date.now();
-
- // 鎯呭喌1锛氳窛绂讳笂娆℃洿鏂拌秴杩囧欢杩熸椂闂达紝鐩存帴澶勭悊
- if (now - lastUpdateTime.value >= THROTTLE_DELAY) {
- processAndUpdateData();
- lastUpdateTime.value = now;
- }
- // 鎯呭喌2锛氭湭瓒呰繃寤惰繜鏃堕棿锛岀敤瀹氭椂鍣ㄥ欢杩熷鐞嗭紙閬垮厤閲嶅瑙﹀彂锛�
- else {
- if (throttleTimer.value) clearTimeout(throttleTimer.value);
- throttleTimer.value = setTimeout(() => {
- processAndUpdateData();
- lastUpdateTime.value = Date.now();
- }, THROTTLE_DELAY);
- }
- };
-
- // 缁熶竴澶勭悊骞舵洿鏂版暟鎹紙閬垮厤閲嶅浠ｇ爜锛�
- const processAndUpdateData = () => {
- if (!latestWsData.value) return;
- try {
- // 瑙ｆ瀽WebSocket鏁版嵁
- const parsedData = typeof latestWsData.value === 'string'
- ? JSON.parse(latestWsData.value)
- : latestWsData.value;
+ loading.value = true;
+ http.post("/api/User/login", userInfo, "姝ｅ湪鐧诲綍....").then((result) => {
+ if (!result.status) {
+ loading.value = false;
+ getVierificationCode();
+ return $message.error(result.message);
+ }
+ $message.success("鐧诲綍鎴愬姛,姝ｅ湪璺宠浆!");
+ store.commit("setUserInfo", result.data);
- // 1. 鏇存柊Vuex涓殑homedata
- store.dispatch("sethomedata", parsedData);
-
- // 2. 澶勭悊娑堟伅鍒楄〃
- if (parsedData.title && parsedData.message) {
- messageList.push(parsedData);
- // 鏄剧ず閫氱煡
- ElNotification({
- title: parsedData.title,
- message: h("i", { style: "color: teal" }, parsedData.message),
- position: "bottom-right"
- });
- }
- } catch (err) {
- console.error("WebSocket鏁版嵁澶勭悊澶辫触锛�", err);
- }
- };
-
- // WebSocket杩炴帴閫昏緫锛堜娇鐢ㄨ妭娴佸鐞嗘暟鎹級
- const createSocket = url => {
- // 鍏抽棴宸叉湁杩炴帴锛堥伩鍏嶉噸澶嶈繛鎺ワ級
- if (client.value) {
- client.value.close();
- }
-
- // 鍒涘缓WebSocket杩炴帴
- client.value = new WebSocket("ws:localhost:9260/");
-
- client.value.onopen = function() {
- console.log("WebSocket 杩炴帴鎴愬姛");
- };
-
- // 鏀跺埌娑堟伅鍚庝氦缁欒妭娴佸嚱鏁板鐞�
- client.value.onmessage = function(event) {
- if (event && event.data) {
- handleThrottledWsData(event.data);
- }
- };
-
- client.value.onclose = function() {
- console.log("WebSocket 杩炴帴鍏抽棴");
- // 閲嶈繛閫昏緫
- setTimeout(() => createSocket(url), 5000);
- };
-
- client.value.onerror = function(err) {
- console.log("WebSocket 杩炴帴閿欒: ", err);
- // 閿欒鍚庨噸杩�
- setTimeout(() => createSocket(url), 5000);
- };
- };
-
- const changeTheme = name => {
- if (theme.value != name) {
- theme.value = name;
- }
- localStorage.setItem("vol3_theme", name);
- };
- const to = item => {
- if (item.path == "#") {
- window.open("https://github.com/cq-panda/Vue.NetCore");
- return;
- }
- if (item.path.indexOf("http") != -1) {
- window.open(item.path);
- return;
- }
- if (typeof item == "string" || item.path == "/login") {
- if (item == "/login" || item.path == "/login") {
- store.commit("clearUserInfo", "");
- window.location.href = "/";
- return;
- }
- router.push({ path: item });
- return;
- }
- if (item.path == "#") return;
- open(item);
- };
- const open = (item, useRoute) => {
- let _index = navigation.findIndex(x => {
- return x.path == item.path;
- });
- if (_index == -1) {
- navigation.push({
- id: item.id + "",
- name: item.name || item.text || "鏃犳爣棰�",
- path: item.path,
- query: item.query
- });
- selectId.value = navigation.length - 1 + "";
- } else {
- selectId.value = _index + "";
- }
- if (useRoute === undefined) {
- setItem(item);
- router.push(item);
- }
- currentMenuId.value = item.id * 1;
- // tab鑿滃崟缁戝畾鍙抽敭浜嬩欢
- proxy.$nextTick(function(e) {
- proxy.bindRightClickMenu(true);
+ router.push({ path: "/" });
});
};
- const close = path => {
- let index = navigation.findIndex(x => {
- return x.path == path;
- });
- if (index == -1) {
- return _config.$Message.error("鏈壘鍒拌彍鍗�");
+ const loginPress = (e) => {
+ if (e.keyCode == 13) {
+ login();
}
- removeNav(index);
};
- const setItem = item => {
- localStorage.setItem(
- window.location.origin + "_tabs",
- JSON.stringify(item)
- );
+ const openUrl = (url) => {
+ window.open(url, "_blank");
};
- const getItem = () => {
- let nav = localStorage.getItem(window.location.origin + "_tabs");
- return nav ? JSON.parse(nav) : null;
- };
- const selectNav = item => {
- selectId.value = item.props.name;
- let _path = navigation[item.index].path;
- currentMenuId.value = (
- menuOptions.value.find(c => {
- return c.path == _path;
- }) || { id: 0 }
- ).id;
-
- router.push({
- path: navigation[item.index].path,
- query: navigation[item.index].query
- });
- };
-
- const removeNav = _index => {
- return new Promise(() => {
- //鍏抽棴鐨勫綋鍓嶉」,璺宠浆鍒板墠涓�涓〉闈�
- if (selectId.value == _index + "") {
- setItem(navigation[_index - 1]);
- router.push({
- path: navigation[_index - 1].path,
- query: navigation[_index - 1].query
- });
- navigation.splice(_index, 1);
- selectId.value = selectId.value - 1 + "";
- return;
- }
- if (_index < selectId.value) {
- selectId.value = selectId.value - 1 + "";
- }
- navigation.splice(_index, 1);
- currentMenuId.value = (
- menuOptions.value.find(c => {
- return c.path == navigation[selectId.value * 1].path;
- }) || { id: 0 }
- ).id;
- });
- };
-
- const getSelectMenuName = id => {
- return menuOptions.value.find(function(x) {
- return x.id == id;
- });
- };
- const onSelect = treeId => {
- var item = getSelectMenuName(treeId);
- open(item, false);
- };
-
- /**
- * 鏄剧ず鍙抽敭鑿滃崟
- */
- const openTabsMenu = function(e) {
- e.preventDefault();
- let tabId = e.target.id.split("-")[1] * 1;
-
- //璁板綍褰撳墠閫変腑鐨勮彍鍗昳ndex
- selectMenuIndex.value =
- document.getElementById("pane-" + tabId).children[0].textContent * 1;
- //鍙湁棣栭〉鏃朵笉鏄剧ず
- if (navigation.length == 1) {
- return;
- }
-
- //棣栭〉璁剧疆鏄剧ず鍏抽棴鍙宠竟鑿滃崟
- if (!selectMenuIndex.value) {
- visibleItem.all = false;
- visibleItem.right = true;
- visibleItem.left = false;
- visibleItem.other = false;
- } else {
- visibleItem.all = true;
- //涓嶆槸鏈�鍚庝竴涓樉绀哄叧闂彸杈硅彍鍗�
- visibleItem.right = selectMenuIndex.value != navigation.length - 1;
- //鍙湁涓や釜鑿滃崟鏃朵笉鏄剧ず鍏抽棴宸﹁竟
- visibleItem.left = navigation.length != 2;
- //鍙湁涓や釜鑿滃崟鏃朵笉鏄剧ず鍏抽棴鍏朵粬
- visibleItem.other = navigation.length != 2;
- }
- contextMenuVisible.value = true;
- // 璁剧疆鍙抽敭鑿滃崟鏄剧ず鐨勪綅缃�
- proxy.menuLeft =
- e.target.getBoundingClientRect().left - (isCollapse.value ? 63 : 198);
- proxy.menuTop = 36;
- };
-
- /**
- * 鍏抽棴鍙抽敭鑿滃崟
- */
- const closeTabsMenu = () => {
- contextMenuVisible.value = false;
- };
- const toHome = () => {
- open({
- text: navigation[0].name,
- path: navigation[0].path
- });
- };
- /**
- * 鍏抽棴鍏跺畠鏍囩椤�
- */
- const closeTabs = value => {
- let _menuId = navigation[selectId.value * 1].id;
- let currnetIndex = selectId.value * 1;
- switch (value) {
- case "left": {
- // 鍒犻櫎宸︿晶tab鏍囩
- navigation.splice(1, currnetIndex - 1);
- break;
- }
- case "right": {
- // 鍒犻櫎鍙充晶tab鏍囩
- if (selectMenuIndex.value == 0) {
- navigation.splice(currnetIndex);
- toHome();
- } else {
- navigation.splice(currnetIndex + 1);
- if (selectMenuIndex.value < currnetIndex) {
- navigation.splice(
- selectMenuIndex.value,
- currnetIndex - selectMenuIndex.value
- );
- }
- }
- break;
- }
- case "other": {
- // 鍒犻櫎鍏朵粬鎵�鏈塼ab鏍囩
- navigation.splice(currnetIndex + 1);
- navigation.splice(1, currnetIndex - 1);
- break;
- }
- default: {
- //鍏抽棴鎵�鏈�
- navigation.splice(1, navigation.length);
- toHome();
- break;
- }
- }
- selectId.value =
- navigation.findIndex(c => {
- return c.id == _menuId;
- }) + "";
- closeTabsMenu();
- };
-
- watch(
- () => contextMenuVisible.value,
- (newVal, oldVal) => {
- if (newVal) {
- document.body.addEventListener("click", closeTabsMenu);
- } else {
- document.body.removeEventListener("click", closeTabsMenu);
- }
- }
- );
-
- /**
- * 绯荤粺鍒涘缓寮�濮�
- */
- const created = () => {
- let _theme = localStorage.getItem("vol3_theme");
- if (_theme) {
- theme.value = _theme;
- }
-
- let _userInfo = store.getters.getUserInfo();
- if (_userInfo) {
- userName.value = _userInfo.userName;
- userTrueName.value = _userInfo.userTrueName;
- if (_userInfo.img) {
- userImg.value = _config.base.getImgSrc(_userInfo.img, http.ipAddress);
- }
- }
-
- createSocket(window.webConfig.webSocketUrl);
-
- Object.assign(_config.$tabs, { open: open, close: close });
-
- http.get("api/Sys_Menu/getTreeMenu", {}, true).then(data => {
- data.push({ id: "1", name: "棣栭〉", url: "/home" });
- data.forEach(d => {
- d.path = (d.url || "").replace("/Manager", "");
- d.to = (d.url || "").replace("/Manager", "");
- if (!d.icon || d.icon.substring(0, 3) != "el-") {
- d.icon = "el-icon-menu";
- }
- });
-
- store.dispatch("setPermission", data);
- menuOptions.value = data;
- permissionInited.value = true;
-
- //寮�鍚秷鎭帹閫�
- if (_config.$global.signalR) {
- MessageConfig(http, result => {
- messageList.unshift(result);
- });
- }
-
- //褰撳墠鍒锋柊鏄笉鏄椤�
- if (router.currentRoute.value.path != navigation[0].path) {
- //鏌ユ壘绯荤粺鑿滃崟
- let item = menuOptions.value.find(x => {
- return x.path == router.currentRoute.value.path;
- });
- if (item) return onSelect(item.id);
- //鏌ユ壘椤堕儴蹇嵎杩炴帴
- item = links.value.find(x => {
- return x.path == router.currentRoute.value.path;
- });
- //鏌ユ壘鏈�鍚庝竴娆¤烦杞殑椤甸潰
- if (!item) {
- item = getItem();
- }
- if (item) {
- return open(item, false);
- }
- }
- selectId.value = "1";
- });
- };
- created();
return {
- menuWidth,
- isCollapse,
- drawer_model,
- theme_color,
- errorImg,
+ loading,
+ codeImgSrc,
+ getVierificationCode,
+ login,
userInfo,
- userName,
- userTrueName,
- userImg,
- selectId,
- selectMenuIndex,
- navigation,
- links,
- onSelect,
- openTabsMenu,
- selectNav,
- getSelectMenuName,
- removeNav,
- logo,
- theme,
- menuOptions,
- permissionInited,
- changeTheme,
- to,
- toggleLeft,
- messageModel,
- messageList,
- contextMenuVisible,
- visibleItem,
- closeTabsMenu,
- closeTabs,
- currentMenuId
+ loginPress,
+ openUrl,
};
},
- /**
- * 鎸傝浇閽╁瓙鍑芥暟
- */
- mounted() {
- let _date = showTime();
- $indexDate = document.getElementById("index-date");
- $indexDate.innerText = _date;
- $interval = setInterval(function() {
- $indexDate.innerText = showTime();
- }, 1000);
-
- this.bindRightClickMenu(true);
+ directives: {
+ focus: {
+ inserted: function (el) {
+ el.focus();
+ },
+ },
},
+});
+</script>
+<style lang="less" scoped>
+.login-container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ background: rgb(246, 247, 252);
+ justify-content: flex-end;
+ align-items: center;
+}
- methods: {
- /**
- * 缁戝畾鍙抽敭浜嬩欢
- */
- bindRightClickMenu(enable) {
- if (!enable) return;
- let that = this;
- // 浣跨敤鍘熺敓js 涓哄崟涓猟om缁戝畾榧犳爣鍙冲嚮浜嬩欢
- that.$nextTick(() => {
- let tab_top_dom = Object.assign(
- [],
- document.getElementsByClassName("el-tabs__item is-top")
- );
- tab_top_dom.forEach((item, index) => {
- item.oncontextmenu = that.openTabsMenu;
- });
- });
- }
- },
+.login-form {
+ align-items: center;
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ // margin-right: 150px;
+ z-index: 999;
- /**
- * 閿�姣侀挬瀛愬嚱鏁�
- */
- destroyed() {
- $this = null;
- clearInterval($interval);
- // 鍏抽棴WebSocket杩炴帴
- if (client && client.value) {
- client.value.close();
+ .form-user {
+ // margin: 25px 0;
+
+ .item {
+ border-radius: 5px;
+ border: 1px solid #ececec;
+ display: flex;
+ margin-bottom: 30px;
+ background: #ffff;
+ height: 45px;
+ padding-left: 20px;
+ display: flex;
+
+ .code {
+ position: relative;
+ cursor: pointer;
+ width: 74px;
+ padding: 5px 10px 0 0;
+ }
+
+ .input-icon {
+ line-height: 45px;
+ color: #7a7a7a;
+ padding-right: 20px;
+ }
}
}
-});
-const week = new Array(
- "鏄熸湡涓�",
- "鏄熸湡浜�",
- "鏄熸湡涓�",
- "鏄熸湡鍥�",
- "鏄熸湡浜�",
- "鏄熸湡鍏�",
- "鏄熸湡鏃�"
-);
-function showTime() {
- let date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let day = date.getDate();
- let hour = date.getHours();
- let minutes = date.getMinutes();
- let second = date.getSeconds();
- return (
- year +
- "." +
- (month < 10 ? "0" + month : month) +
- "." +
- (day < 10 ? "0" + day : day) +
- "" +
- " " +
- (hour < 10 ? "0" + hour : hour) +
- ":" +
- (minutes < 10 ? "0" + minutes : minutes) +
- ":" +
- (second < 10 ? "0" + second : second) +
- " " +
- (week[date.getDay() - 1] || week[6])
- );
+ input:-webkit-autofill {
+ box-shadow: 0 0 0px 1000px white inset;
+ -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+ }
+
+ input {
+ background: white;
+ display: block;
+ box-sizing: border-box;
+ width: 100%;
+ min-width: 0;
+ margin: 0;
+ padding: 0;
+ color: #323233;
+ line-height: inherit;
+ text-align: left;
+ border: 0;
+ outline: none;
+ font-size: 16px;
+ line-height: 20px;
+ }
}
-</script>
+
+.form-user,
+.loging-btn {
+ width: 400px;
+}
+
+.loging-btn {
+ box-shadow: 2px 4px 11px #a4c2ff;
+ margin-top: 10px;
+
+ button {
+ padding: 21px;
+ font-size: 14px !important;
+ width: 100%;
+ }
+}
+
+.login-text {
+ font-weight: bolder;
+ font-size: 20px;
+ letter-spacing: 2px;
+
+ position: relative;
+ display: flex;
+
+ .login-line {
+ z-index: -1;
+ padding: 5px;
+ position: relative;
+ top: -8px;
+ width: 100%;
+ background-image: linear-gradient(to right, #6598ff, white);
+ }
+}
+
+.login-text-small {
+ margin-bottom: 20px;
+ font-size: 13px;
+ color: #7d7c7c;
+}
+
+.login-bg {
+ left: 0;
+ position: absolute;
+ height: 100%;
+ width: 50%;
+ z-index: 0;
+}
+
+.project-name {
+ position: absolute;
+ top: 40px;
+ left: 40px;
+ z-index: 9999;
+ font-weight: bolder;
+ background-image: linear-gradient(to right, #1850c1, #9c009c);
+ -webkit-background-clip: text;
+ color: transparent;
+ font-size: 25px;
+}
+</style>
+<style lang="less" scoped>
+.app-link {
+ // font-weight: bolder;
+ text-align: center;
+ padding-top: 5px;
+ font-size: 12px;
+ width: 400px;
+ padding-left: 40px;
+ display: flex;
+
+ a {
+ flex: 1;
+ position: relative;
+ cursor: pointer;
+ width: 70px;
+ color: #666666;
+ margin: 2px 10px 0 0;
+ }
+
+ img {
+ display: none;
+ }
+
+ a:hover {
+ color: #0545f6 !important;
+
+ img {
+ display: block;
+ position: absolute;
+ z-index: 999999999;
+ top: -130px;
+ width: 120px;
+ left: -22px;
+
+ border: 1px solid #b1b1b1;
+ }
+ }
+}
+
+.login-footer {
+ position: absolute;
+ width: 50%;
+ bottom: 0.5rem;
+ font-size: 12px;
+ text-align: center;
+ padding-bottom: 10px;
+ color: #4f4f4f;
+
+ a {
+ margin-right: 10px;
+ font-size: 12px;
+ color: #4f4f4f;
+ }
+
+ div {
+ margin-bottom: 5px;
+ }
+
+ a:hover {
+ cursor: pointer;
+ color: #0540e3 !important;
+ }
+}
+
+.account-info {
+ font-size: 12px;
+ color: #636363;
+ margin-top: 15px;
+}
+</style>
<style lang="less" scoped>
-.vol-container .vol-path ::v-deep(.el-tabs__content) {
- padding: 0;
-}
+@media screen and (max-width: 700px) {
+ .login-bg,
+ .account-info,
+ .app-link,
+ .login-footer,
+ .project-name {
+ display: none;
+ }
-.item {
- margin-top: -20px;
- margin-right: 40px;
-}
+ .login-container {
+ padding: 2rem;
+ justify-content: center;
+ }
-.contextMenu {
- width: 120px;
- margin: 0;
- border: 1px solid #eaeaea;
- background: #fff;
- z-index: 30000;
- position: absolute;
- list-style-type: none;
- padding: 5px 0;
- border-radius: 4px;
- font-size: 14px;
- color: #333;
- box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
- i,
- button {
- font-size: 14px !important;
+ .login-form {
+ width: 100%;
+ }
+
+ .form-user,
+ .loging-btn {
+ width: 100%;
}
}
-
-.contextMenu li {
- margin: 0;
- padding: 5px 17px;
-}
-
-.contextMenu li:hover {
- background: #fafafa;
- cursor: pointer;
-}
-
-.contextMenu li button {
- color: #626060;
- font-size: 14px;
- letter-spacing: 1px;
-}
-
-.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
- > .el-tabs__header
- .el-tabs__item:last-child,
-.el-tabs--top.el-tabs--border-card.header-navigation
- > .el-tabs__header
- .el-tabs__item:nth-child(2) {
- padding: 0;
-}
-
-.header-navigation ::v-deep(.el-tabs__item.is-top) {
- padding: 0 15px;
-}
-</style>
-<style>
-.horizontal-collapse-transition {
- transition: 0s width ease-in-out, 0s padding-left ease-in-out,
- 0s padding-right ease-in-out;
-}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3