From cb25acc46bf41863e068b6f968f1592b7a14d1c9 Mon Sep 17 00:00:00 2001
From: helongyang <647556386@qq.com>
Date: 星期六, 13 九月 2025 08:12:14 +0800
Subject: [PATCH] 功能更新优化
---
代码管理/WCS/WIDESEAWCS_Client/src/views/Index.vue | 297 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 212 insertions(+), 85 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Index.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Index.vue"
index e59ef4f..3fd3bd8 100644
--- "a/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Index.vue"
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WCS/WIDESEAWCS_Client/src/views/Index.vue"
@@ -3,20 +3,30 @@
<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="el-icon-s-fold collapse-menu" />
+ <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>
+ <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">WCS</div>
+ <div class="project-name">WMS</div>
<div class="header-text">
- <!-- <div class="h-link">
+ <div class="h-link">
<a
href="javascript:void(0)"
@click="to(item)"
@@ -25,19 +35,38 @@
})"
:key="index"
>
- <span v-if="!item.icon"> {{ item.text }}</span>
+ <span v-if="!item.icon">{{ item.text }}</span>
<i v-else :class="item.icon"></i>
</a>
- </div> -->
+ </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> {{ item.text }}</span>
+ <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" />
@@ -52,10 +81,23 @@
</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">
+ <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>
@@ -66,18 +108,23 @@
<el-button link @click="closeTabs()">
<i class="el-icon-close"></i>
{{
- navigation.length == 2 ? "鍏抽棴鑿滃崟" : "鍏抽棴鎵�鏈�"
- }}</el-button>
+ 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>
+ <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>
+ <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 link @click="closeTabs('other')">
+ <i class="el-icon-right"></i>鍏抽棴鍏朵粬
</el-button>
</li>
</ul>
@@ -88,26 +135,45 @@
<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'))" />
+ <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')" />
+ <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
+ @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>
- <el-drawer title="娑堟伅鍒楄〃" v-model="messageModel" direction="rtl" destroy-on-close>
+ <el-drawer title="娑堟伅鍒楄〃" v-model="messageModel" direction="rtl" destroy-on-close size="40%">
<Message :list="messageList"></Message>
</el-drawer>
</div>
@@ -131,15 +197,19 @@
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({
components: {
VolMenu,
loading,
- Message,
+ Message
},
data() {
@@ -149,11 +219,14 @@
rightTabs: true,
otherTabs: true,
menuLeft: 0,
- menuTop: 0,
+ menuTop: 0
+
// contextMenuVisible: false, // 鍙抽敭鍏抽棴鏄�/闅�
};
},
setup(props, context) {
+ let client = ref(null);
+
// 鑾峰彇鍏ㄥ眬灞炴�у拰鏂规硶
const { proxy } = getCurrentInstance();
@@ -173,31 +246,16 @@
{ 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" },
+ { name: "white", color: "#fff" }
]);
const links = ref([
- // {
- // text: "妗嗘灦瑙嗛",
- // path: "https://www.cctalk.com/m/group/90268531",
- // id: -3,
- // },
- // { text: "澶у睆鏁版嵁", path: "/bigdata", id: -3 },
- // {
- // text: "妗嗘灦鏂囨。",
- // path: "http://v2.volcore.xyz/document/guide",
- // id: -2,
- // }, {
- // text: "妗嗘灦浼佷笟鐗�",
- // path: "http://pro.volcore.xyz/",
- // id: 10,
- // },
{ text: "涓汉涓績", path: "/UserInfo", id: -1, icon: "el-icon-s-custom" },
{
text: "瀹夊叏閫�鍑�",
path: "/login",
id: -4,
- icon: "el-icon-switch-button",
- },
+ icon: "el-icon-switch-button"
+ }
]);
const errorImg = ref(
'this.src="' + require("@/assets/imgs/error-img.png") + '"'
@@ -208,16 +266,17 @@
//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,
+ other: false
});
const userImg = ref("");
const navigation = reactive([
- { orderNo: "0", id: "1", name: "棣栭〉", path: "/home" },
+ { orderNo: "0", id: "1", name: "棣栭〉", path: "/home" }
]);
const logo = ref(imgUrl);
const theme = ref("blue2");
@@ -237,23 +296,77 @@
},
hide() {
toggleLeft();
- },
+ }
};
- const changeTheme = (name) => {
+ const Store = useStore();
+ const s = ref(null);
+
+ const handleMessage = e => {
+ if (e) {
+ s.value = e.data;
+ console.log("WebSocket 鏀跺埌娑堟伅: ", e.data);
+ store.dispatch("sethomedata", s.value);
+ let data = JSON.parse(e.data);
+ messageList.push(data);
+ ElNotification({
+ title: data.title,
+ message: h("i", { style: "color: teal" }, data.message),
+ position: "bottom-right"
+ });
+ }
+ };
+
+ const createSocket = url => {
+ //console.log(url);
+
+ //鍒涘缓WebSocket杩炴帴
+ //"ws://127.0.0.1:9295/admin"
+ //client = new WebSocket("ws://192.168.0.250:9260/");
+ client = new WebSocket("ws:localhost:9260/");
+ client.onopen = function() {
+ //client.onmessage = handleMessage;
+ // store.commit("setWebsocket", client);
+ console.log("WebSocket 杩炴帴鎴愬姛");
+ };
+
+ client.onmessage = function(event) {
+ // console.log("WebSocket 鏀跺埌娑堟伅: ", event);
+
+ if (event != undefined) {
+ store.dispatch("sethomedata", JSON.parse(event.data));
+ }
+ // handleMessage(event);
+ };
+
+ client.onclose = function() {
+ console.log("WebSocket 杩炴帴鍏抽棴");
+ setTimeout(createSocket, 10000);
+ };
+
+ client.onerror = function(err) {
+ console.log("WebSocket 杩炴帴閿欒: ", err);
+ };
+ client.onmessage();
+ };
+
+ const changeTheme = name => {
if (theme.value != name) {
theme.value = name;
}
localStorage.setItem("vol3_theme", name);
};
- const to = (item) => {
+ const to = item => {
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
+ 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;
@@ -266,7 +379,7 @@
};
const open = (item, useRoute) => {
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
- let _index = navigation.findIndex((x) => {
+ let _index = navigation.findIndex(x => {
return x.path == item.path;
});
if (_index == -1) {
@@ -275,7 +388,7 @@
id: item.id + "",
name: item.name || item.text || "鏃犳爣棰�",
path: item.path,
- query: item.query, //2021.03.20淇鑷畾涔変簩娆℃墦寮�$tabs鏃跺弬鏁颁涪澶辩殑闂
+ query: item.query //2021.03.20淇鑷畾涔変簩娆℃墦寮�$tabs鏃跺弬鏁颁涪澶辩殑闂
});
//鏂版墦寮�鐨則ab绉昏嚦鏈�鍚庝竴涓�夐」
selectId.value = navigation.length - 1 + "";
@@ -290,13 +403,13 @@
}
currentMenuId.value = item.id * 1;
// tab鑿滃崟缁戝畾鍙抽敭浜嬩欢
- proxy.$nextTick(function (e) {
+ proxy.$nextTick(function(e) {
proxy.bindRightClickMenu(true);
});
};
- const close = (path) => {
+ const close = path => {
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
- let index = navigation.findIndex((x) => {
+ let index = navigation.findIndex(x => {
return x.path == path;
});
if (index == -1) {
@@ -304,7 +417,7 @@
}
removeNav(index);
};
- const setItem = (item) => {
+ const setItem = item => {
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
localStorage.setItem(
window.location.origin + "_tabs",
@@ -316,23 +429,23 @@
let nav = localStorage.getItem(window.location.origin + "_tabs");
return nav ? JSON.parse(nav) : null;
};
- const selectNav = (item) => {
+ const selectNav = item => {
//鍗囩骇element姝ｅ紡鐗堜慨鏀�
selectId.value = item.props.name;
let _path = navigation[item.index].path;
currentMenuId.value = (
- menuOptions.value.find((c) => {
+ menuOptions.value.find(c => {
return c.path == _path;
}) || { id: 0 }
).id;
router.push({
path: navigation[item.index].path,
- query: navigation[item.index].query,
+ query: navigation[item.index].query
});
};
- const removeNav = (_index) => {
+ const removeNav = _index => {
return new Promise(() => {
//鍏抽棴鐨勫綋鍓嶉」,璺宠浆鍒板墠涓�涓〉闈�
if (selectId.value == _index + "") {
@@ -341,7 +454,7 @@
router.push({
path: navigation[_index - 1].path,
//2022.06.27淇tabs浜屾鍒囨崲鍚庡弬鏁颁涪澶辩殑闂
- query: navigation[_index - 1].query,
+ query: navigation[_index - 1].query
});
navigation.splice(_index, 1);
selectId.value = selectId.value - 1 + "";
@@ -352,19 +465,19 @@
}
navigation.splice(_index, 1);
currentMenuId.value = (
- menuOptions.value.find((c) => {
+ menuOptions.value.find(c => {
return c.path == navigation[selectId.value * 1].path;
}) || { id: 0 }
).id;
});
};
- const getSelectMenuName = (id) => {
- return menuOptions.value.find(function (x) {
+ const getSelectMenuName = id => {
+ return menuOptions.value.find(function(x) {
return x.id == id;
});
};
- const onSelect = (treeId) => {
+ const onSelect = treeId => {
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
var item = getSelectMenuName(treeId);
open(item, false);
@@ -374,7 +487,7 @@
* 鏄剧ず鍙抽敭鑿滃崟
* @param {*} e 浜嬩欢瀵硅薄
*/
- const openTabsMenu = function (e) {
+ const openTabsMenu = function(e) {
e.preventDefault(); // 闃叉榛樿鑿滃崟寮瑰嚭
let tabId = e.target.id.split("-")[1] * 1;
@@ -417,14 +530,14 @@
const toHome = () => {
open({
text: navigation[0].name,
- path: navigation[0].path,
+ path: navigation[0].path
});
};
/**
* 鍏抽棴鍏跺畠鏍囩椤�
* @param {*} par 鍏抽棴绫诲瀷(left,right,other)
*/
- const closeTabs = (value) => {
+ const closeTabs = value => {
let _menuId = navigation[selectId.value * 1].id;
let currnetIndex = selectId.value * 1; // navigation.findIndex(c => { return c.id == selectId.value });
switch (value) {
@@ -463,7 +576,7 @@
}
}
selectId.value =
- navigation.findIndex((c) => {
+ navigation.findIndex(c => {
return c.id == _menuId;
}) + "";
closeTabsMenu();
@@ -493,28 +606,33 @@
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) => {
+ http.get("api/Sys_Menu/getTreeMenu", {}, true).then(data => {
data.push({ id: "1", name: "棣栭〉", url: "/home" }); // 涓轰簡鑾峰彇閫変腑id浣跨敤
- data.forEach((d) => {
+ 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;
//寮�鍚秷鎭帹閫侊紙main.js涓缃槸鍚﹀紑鍚痵ignalR锛�2022.05.05
if (_config.$global.signalR) {
- MessageConfig(http, (result) => {
+ MessageConfig(http, result => {
messageList.unshift(result);
// console.log(result)
});
@@ -523,12 +641,12 @@
//褰撳墠鍒锋柊鏄笉鏄椤�
if (router.currentRoute.value.path != navigation[0].path) {
//鏌ユ壘绯荤粺鑿滃崟
- let item = menuOptions.value.find((x) => {
+ let item = menuOptions.value.find(x => {
return x.path == router.currentRoute.value.path; //this.$route.path;
});
if (item) return onSelect(item.id);
//鏌ユ壘椤堕儴蹇嵎杩炴帴
- item = links.value.find((x) => {
+ item = links.value.find(x => {
return x.path == router.currentRoute.value.path; //this.$route.path;
});
//鏌ユ壘鏈�鍚庝竴娆¤烦杞殑椤甸潰
@@ -551,6 +669,7 @@
errorImg,
userInfo,
userName,
+ userTrueName,
userImg,
selectId,
selectMenuIndex,
@@ -574,7 +693,7 @@
visibleItem,
closeTabsMenu,
closeTabs,
- currentMenuId,
+ currentMenuId
};
},
/**
@@ -584,7 +703,7 @@
let _date = showTime();
$indexDate = document.getElementById("index-date");
$indexDate.innerText = _date;
- $interval = setInterval(function () {
+ $interval = setInterval(function() {
$indexDate.innerText = showTime();
}, 1000);
@@ -610,7 +729,7 @@
item.oncontextmenu = that.openTabsMenu;
});
});
- },
+ }
},
/**
@@ -619,7 +738,7 @@
destroyed() {
$this = null;
clearInterval($interval);
- },
+ }
});
const week = new Array(
"鏄熸湡涓�",
@@ -663,6 +782,11 @@
padding: 0;
}
+.item {
+ margin-top: -20px;
+ margin-right: 40px;
+}
+
.contextMenu {
width: 120px;
margin: 0;
@@ -676,7 +800,6 @@
font-size: 14px;
color: #333;
box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
-
i,
button {
font-size: 14px !important;
@@ -699,8 +822,12 @@
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) {
+.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;
}
--
Gitblit v1.9.3