<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="el-icon-s-fold collapse-menu" />
|
</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">WCS</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> {{ item.text }}</span>
|
</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>
|
|
<el-drawer title="娑堟伅鍒楄〃" v-model="messageModel" direction="rtl" destroy-on-close>
|
<Message :list="messageList"></Message>
|
</el-drawer>
|
</div>
|
</template>
|
<style lang="less" scoped>
|
@import "./index/index.less";
|
</style>
|
<script>
|
import loading from "@/components/basic/RouterLoading.vue";
|
import VolMenu from "@/components/basic/VolElementMenu.vue";
|
import Message from "./index/Message.vue";
|
import MessageConfig from "./index/MessageConfig.js";
|
import imgUrl from "@/assets/imgs/wcs_x.png";
|
import errorImgSrc from "@/assets/imgs/error-img.png";
|
var $this;
|
var $interval;
|
var $indexDate;
|
import {
|
defineComponent,
|
reactive,
|
ref,
|
watch,
|
onMounted,
|
getCurrentInstance,
|
} from "vue";
|
import { useRouter, useRoute } from "vue-router";
|
import store from "../store/index";
|
import http from "@/../src/api/http.js";
|
export default defineComponent({
|
components: {
|
VolMenu,
|
loading,
|
Message,
|
},
|
|
data() {
|
return {
|
allTabs: true,
|
leftTabs: true,
|
rightTabs: true,
|
otherTabs: true,
|
menuLeft: 0,
|
menuTop: 0,
|
// contextMenuVisible: false, // 鍙抽敭鍏抽棴鏄?闅?
|
};
|
},
|
setup(props, context) {
|
// 鑾峰彇鍏ㄥ眬灞炴€у拰鏂规硶
|
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: "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",
|
},
|
]);
|
const errorImg = ref(
|
'this.src="' + errorImgSrc + '"'
|
);
|
const selectId = ref("1");
|
// 銆愰椤点€戞爣绛惧簭鍙?褰撳墠鍙抽敭閫変腑鐨勮彍鍗?
|
const selectMenuIndex = ref("0");
|
//2022.05.29澧炲姞tab閫夐」涓庤彍鍗曡仈鍔ㄥ姛鑳?
|
const currentMenuId = ref(0);
|
const userName = 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 changeTheme = (name) => {
|
if (theme.value != name) {
|
theme.value = name;
|
}
|
localStorage.setItem("vol3_theme", name);
|
};
|
const to = (item) => {
|
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
|
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) => {
|
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
|
let _index = navigation.findIndex((x) => {
|
return x.path == item.path;
|
});
|
if (_index == -1) {
|
navigation.push({
|
// orderNo: String(navigation.length),// 搴忓彿
|
id: item.id + "",
|
name: item.name || item.text || "鏃犳爣棰?,
|
path: item.path,
|
query: item.query, //2021.03.20淇鑷畾涔変簩娆℃墦寮€$tabs鏃跺弬鏁颁涪澶辩殑闂
|
});
|
//鏂版墦寮€鐨則ab绉昏嚦鏈€鍚庝竴涓€夐」
|
selectId.value = navigation.length - 1 + "";
|
} else {
|
selectId.value = _index + "";
|
}
|
if (useRoute === undefined) {
|
//闈炴爣鍑嗚彍鍗曪紝璁板綍鏈€鍚庝竴娆¤烦杞殑椤甸潰锛岀敤浜庡埛鏂?
|
setItem(item);
|
router.push(item);
|
// this.$router.push(item);
|
}
|
currentMenuId.value = item.id * 1;
|
// tab鑿滃崟缁戝畾鍙抽敭浜嬩欢
|
proxy.$nextTick(function (e) {
|
proxy.bindRightClickMenu(true);
|
});
|
};
|
const close = (path) => {
|
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
|
let index = navigation.findIndex((x) => {
|
return x.path == path;
|
});
|
if (index == -1) {
|
return _config.$Message.error("鏈壘鍒拌彍鍗?);
|
}
|
removeNav(index);
|
};
|
const setItem = (item) => {
|
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
|
localStorage.setItem(
|
window.location.origin + "_tabs",
|
JSON.stringify(item)
|
);
|
};
|
const getItem = () => {
|
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
|
let nav = localStorage.getItem(window.location.origin + "_tabs");
|
return nav ? JSON.parse(nav) : null;
|
};
|
const selectNav = (item) => {
|
//鍗囩骇element姝ｅ紡鐗堜慨鏀?
|
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 + "") {
|
console.log(navigation[_index - 1]);
|
setItem(navigation[_index - 1]);
|
router.push({
|
path: navigation[_index - 1].path,
|
//2022.06.27淇tabs浜屾鍒囨崲鍚庡弬鏁颁涪澶辩殑闂
|
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) => {
|
/* 2020.07.31澧炲姞鎵嬪姩鎵撳紑tabs*/
|
var item = getSelectMenuName(treeId);
|
open(item, false);
|
};
|
|
/**
|
* 鏄剧ず鍙抽敭鑿滃崟
|
* @param {*} e 浜嬩欢瀵硅薄
|
*/
|
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); //-e.target.clientWidth
|
proxy.menuTop = 36;
|
};
|
|
/**
|
* 鍏抽棴鍙抽敭鑿滃崟
|
*/
|
const closeTabsMenu = () => {
|
contextMenuVisible.value = false;
|
};
|
const toHome = () => {
|
open({
|
text: navigation[0].name,
|
path: navigation[0].path,
|
});
|
};
|
/**
|
* 鍏抽棴鍏跺畠鏍囩椤?
|
* @param {*} par 鍏抽棴绫诲瀷(left,right,other)
|
*/
|
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) {
|
case "left": {
|
// 鍒犻櫎宸︿晶tab鏍囩
|
navigation.splice(1, currnetIndex - 1); // 鍒犻櫎宸︿晶tab鏍囩
|
break;
|
}
|
case "right": {
|
// 鍒犻櫎鍙充晶tab鏍囩
|
if (selectMenuIndex.value == 0) {
|
navigation.splice(currnetIndex); // 鍒犻櫎鍙充晶tab鏍囩
|
toHome();
|
} else {
|
navigation.splice(currnetIndex + 1); // 鍒犻櫎鍙充晶tab鏍囩
|
if (selectMenuIndex.value < currnetIndex) {
|
navigation.splice(
|
selectMenuIndex.value,
|
currnetIndex - selectMenuIndex.value
|
);
|
}
|
}
|
break;
|
}
|
case "other": {
|
// 鍒犻櫎鍏朵粬鎵€鏈塼ab鏍囩
|
navigation.splice(currnetIndex + 1); // 鍒犻櫎鍙充晶tab鏍囩(杩欓噷蹇呴』鎸夌収鍙斥啋宸﹂『搴忓垹闄?
|
navigation.splice(1, currnetIndex - 1); // 鍒犻櫎宸︿晶tab鏍囩
|
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);
|
}
|
}
|
);
|
|
/**
|
* 绯荤粺鍒涘缓寮€濮?
|
*/
|
/**
|
* 方法目的：补齐后端菜单未配置时的新页面入口，避免新增页面无入口。
|
* 参数含义：data 为后端返回的菜单数组。
|
* 返回值：返回补齐后的菜单数组。
|
* 关键逻辑：仅在菜单中不存在相同 url 时追加默认菜单，避免覆盖已有配置。
|
* 异常处理：该方法仅操作内存数据，不涉及外部调用，异常由上层流程统一捕获。
|
*/
|
const ensureBuiltinMenus = (data) => {
|
const menus = Array.isArray(data) ? data : [];
|
const exists = (url) => menus.some((m) => (m.url || "") === url);
|
const maxId = menus.reduce((max, item) => {
|
const current = Number(item.id);
|
return Number.isFinite(current) ? Math.max(max, current) : max;
|
}, 0);
|
|
const defaultMenus = [
|
{
|
id: maxId + 1001,
|
name: "租户管理",
|
url: "/Sys_Tenant",
|
parentId: 0,
|
icon: "el-icon-office-building",
|
enable: 1,
|
tableName: "Sys_Tenant",
|
permission: ["Search", "Add", "Update", "Delete"],
|
},
|
{
|
id: maxId + 1002,
|
name: "任务历史",
|
url: "/taskHty",
|
parentId: 0,
|
icon: "el-icon-time",
|
enable: 1,
|
tableName: "taskHty",
|
permission: ["Search", "Export"],
|
},
|
{
|
id: maxId + 1003,
|
name: "调度控制",
|
url: "/scheduler",
|
parentId: 0,
|
icon: "el-icon-video-play",
|
enable: 1,
|
tableName: "scheduler",
|
permission: ["Search", "Update"],
|
},
|
];
|
|
defaultMenus.forEach((menu) => {
|
if (!exists(menu.url)) {
|
menus.push(menu);
|
}
|
});
|
return menus;
|
};
|
const created = () => {
|
let _theme = localStorage.getItem("vol3_theme");
|
if (_theme) {
|
theme.value = _theme;
|
}
|
|
let _userInfo = store.getters.getUserInfo();
|
if (_userInfo) {
|
userName.value = _userInfo.userName;
|
if (_userInfo.img) {
|
userImg.value = _config.base.getImgSrc(_userInfo.img, http.ipAddress);
|
}
|
}
|
Object.assign(_config.$tabs, { open: open, close: close });
|
|
http.get("api/Sys_Menu/getTreeMenu", {}, true).then((data) => {
|
data = ensureBuiltinMenus(data);
|
data.push({ id: "1", name: "棣栭〉", url: "/home" }); // 涓轰簡鑾峰彇閫変腑id浣跨敤
|
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锛?022.05.05
|
if (_config.$global.signalR) {
|
MessageConfig(http, (result) => {
|
messageList.unshift(result);
|
// console.log(result)
|
});
|
}
|
|
//褰撳墠鍒锋柊鏄笉鏄椤?
|
if (router.currentRoute.value.path != navigation[0].path) {
|
//鏌ユ壘绯荤粺鑿滃崟
|
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) => {
|
return x.path == router.currentRoute.value.path; //this.$route.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,
|
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: {
|
/**
|
* 缁戝畾鍙抽敭浜嬩欢
|
* @param {*} enable 鏄惁鍚敤鍙抽敭浜嬩欢[true:鍚敤;false:绂佺敤;]
|
* @param {*} $event 浜嬩欢
|
*/
|
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);
|
},
|
});
|
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) + //202.08.08淇鏃ユ湡澶╂暟灏忎簬10鏃舵坊鍔?
|
"" +
|
" " +
|
(hour < 10 ? "0" + hour : hour) +
|
":" +
|
(minutes < 10 ? "0" + minutes : minutes) +
|
":" +
|
(second < 10 ? "0" + second : second) +
|
" " + //2020.08.30淇棣栭〉鏃ユ湡鏄熸湡澶╀笉鏄剧ず鐨勯棶棰?
|
(week[date.getDay() - 1] || week[6])
|
);
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.vol-container .vol-path ::v-deep(.el-tabs__content) {
|
padding: 0;
|
}
|
|
.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;
|
}
|
}
|
|
.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>
|
