From 3cd89b88edd913530062e13e20e7d6b866fd190f Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期五, 19 九月 2025 10:02:43 +0800
Subject: [PATCH] 更新
---
代码管理/WCS/WIDESEAWCS_Client/src/views/Login.vue | 1170 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 824 insertions(+), 346 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 c61c0e8..78a3fb9 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,386 +1,864 @@
<template>
- <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>
- <div>娆㈣繋鐧诲綍...</div>
- <div class="login-line"></div>
- </div>
- <div style="flex:1;"></div>
- </div>
- <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 class="item">
- <div class="input-icon el-icon-lock"></div>
- <input type="password" v-focus v-model="userInfo.password" placeholder="璇疯緭鍏ュ瘑鐮�" />
- </div>
- <div class="item">
- <div class="input-icon el-icon-mobile"></div>
-
- <input v-focus type="text" v-model="userInfo.verificationCode" placeholder="杈撳叆楠岃瘉鐮�" />
- <div class="code" @click="getVierificationCode">
- <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
- </div>
- </div>
+ <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="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 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 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="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>
+ <img class="user-header" :src="userImg" :onerror="errorImg" />
+ </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>
+ </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>
+ </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>
+ </div>
+ </el-drawer>
- <!-- 椤甸潰搴曢儴 -->
- <!-- <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" />
+ <el-drawer title="娑堟伅鍒楄〃" v-model="messageModel" direction="rtl" destroy-on-close size="40%">
+ <Message :list="messageList"></Message>
+ </el-drawer>
</div>
</template>
-
-
-<script >
+<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;
import {
defineComponent,
- ref,
reactive,
- toRefs,
- getCurrentInstance
-} from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import store from '../store/index';
-import http from '@/../src/api/http.js';
+ ref,
+ watch,
+ onMounted,
+ 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({
- setup(props, context) {
- store.commit('clearUserInfo', '');
- const loading = ref(false);
- const codeImgSrc = ref('');
- const userInfo = reactive({
- userName: '',
- password: '',
- verificationCode: '',
- UUID: undefined
- });
+ components: {
+ VolMenu,
+ loading,
+ Message
+ },
- 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 login = () => {
- if (!userInfo.userName) return $message.error('璇疯緭鍏ョ敤鎴峰悕');
- if (!userInfo.password) return $message.error('璇疯緭鍏ュ瘑鐮�');
- if (!userInfo.verificationCode) {
- return $message.error('璇疯緭鍏ラ獙璇佺爜');
- }
- 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);
- router.push({ path: '/' });
- });
- };
- const loginPress = (e) => {
- if (e.keyCode == 13) {
- login();
- }
- };
- const openUrl = (url) => {
- window.open(url, '_blank');
- };
+ data() {
return {
- loading,
- codeImgSrc,
- getVierificationCode,
- login,
- userInfo,
- loginPress,
- openUrl
+ allTabs: true,
+ leftTabs: true,
+ rightTabs: true,
+ otherTabs: true,
+ menuLeft: 0,
+ menuTop: 0
};
},
- directives: {
- focus: {
- inserted: function (el) {
- el.focus();
+ 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
+ });
+ 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;
+ 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 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;
+
+ // 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);
+ });
+ };
+ const close = path => {
+ let index = navigation.findIndex(x => {
+ return x.path == path;
+ });
+ if (index == -1) {
+ return _config.$Message.error("鏈壘鍒拌彍鍗�");
+ }
+ removeNav(index);
+ };
+ const setItem = item => {
+ localStorage.setItem(
+ window.location.origin + "_tabs",
+ JSON.stringify(item)
+ );
+ };
+ 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,
+ 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
+ };
+ },
+ /**
+ * 鎸傝浇閽╁瓙鍑芥暟
+ */
+ mounted() {
+ let _date = showTime();
+ $indexDate = document.getElementById("index-date");
+ $indexDate.innerText = _date;
+ $interval = setInterval(function() {
+ $indexDate.innerText = showTime();
+ }, 1000);
+
+ this.bindRightClickMenu(true);
+ },
+
+ 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;
+ });
+ });
+ }
+ },
+
+ /**
+ * 閿�姣侀挬瀛愬嚱鏁�
+ */
+ destroyed() {
+ $this = null;
+ clearInterval($interval);
+ // 鍏抽棴WebSocket杩炴帴
+ if (client && client.value) {
+ client.value.close();
}
}
});
+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])
+ );
+}
</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;
+.vol-container .vol-path ::v-deep(.el-tabs__content) {
+ padding: 0;
}
-.login-form {
- align-items: center;
- width: 50%;
- display: flex;
- flex-direction: column;
- // margin-right: 150px;
- z-index: 999;
-
- .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;
- }
- }
- }
-
- 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;
- }
+.item {
+ margin-top: -20px;
+ margin-right: 40px;
}
-.form-user,
-.loging-btn {
- width: 400px;
-}
-
-.loging-btn {
- box-shadow: 2px 4px 11px #a4c2ff;
- margin-top: 10px;
-
+.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 {
- 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);
- }
+.contextMenu li {
+ margin: 0;
+ padding: 5px 17px;
}
-.login-text-small {
- margin-bottom: 20px;
- font-size: 13px;
- color: #7d7c7c;
+.contextMenu li:hover {
+ background: #fafafa;
+ cursor: pointer;
}
-.login-bg {
- left: 0;
- position: absolute;
- height: 100%;
- width: 50%;
- z-index: 0;
+.contextMenu li button {
+ color: #626060;
+ font-size: 14px;
+ letter-spacing: 1px;
}
-.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;
+.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 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>
+.horizontal-collapse-transition {
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+ 0s padding-right ease-in-out;
}
</style>
-
-<style lang="less" scoped>
-@media screen and (max-width: 700px) {
-
- .login-bg,
- .account-info,
- .app-link,
- .login-footer,
- .project-name {
- display: none;
- }
-
- .login-container {
- padding: 2rem;
- justify-content: center;
- }
-
- .login-form {
- width: 100%;
- }
-
- .form-user,
- .loging-btn {
- width: 100%;
- }
-}
-</style>
\ No newline at end of file
--
Gitblit v1.9.3