Skip to content

W
web-project
Commit 5085a844 authored by moonby's avatar moonby
Browse files
Options

20240715

parent 7823245b
Hide whitespace changes
Inline Side-by-side
Showing with 484 additions and 435 deletions
src/style/index.less
View file @ 5085a844
...@@ -30,7 +30,8 @@ html { ...@@ -30,7 +30,8 @@ html {
height: 60px; height: 60px;
position: relative; position: relative;
line-height: 70px; line-height: 70px;
background-color: rgb(82,107,171); //background-color: rgb(82,107,171);
background-color: rgb(31, 63, 141);
} }
.ams-aside .ams-menu { .ams-aside .ams-menu {
...@@ -169,18 +170,29 @@ html { ...@@ -169,18 +170,29 @@ html {
// padding-top: 1vh; // padding-top: 1vh;
/* padding-left: 2vw; */ /* padding-left: 2vw; */
text-align: center; // text-align: center;
color: white; color: white;
} }
.div-contain-title{
margin-top: 5px;
height: 25px;
}
.div-contain-titleAndText{
display: flex;
}
/* 气象信息文本--小文本 */ /* 气象信息文本--小文本 */
.div-contain-text-small { .div-contain-text-small {
font-size: 8pt; font-size: 8pt;
text-align:center; // text-align:center;
vertical-align: top; vertical-align: top;
width: 100px; width: 100px;
} }
/* 气象信息文本--大文本 */ /* 气象信息文本--大文本 */
.div-contain-text-big { .div-contain-text-big {
font-size: 14px; font-size: 14px;
......
src/views/home.vue
View file @ 5085a844
<template> <template>
<div id="ams-container" > <div id="ams-container">
<div class="ams-aside" :style="{ width: menuWidth + 'px'}"> <div class="ams-aside" :style="{ width: menuWidth + 'px' }">
<div class="header" :style="{ width: menuWidth - 1 + 'px'}"> <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
<img :style="{height:amslogo_style.height+'px',width: amslogo_style.width+'px'}" v-show="!$store.state.iscollapse" v-bind:src="amslogo" /> <img :style="{ height: amslogo_style.height + 'px', width: amslogo_style.width + 'px' }"
<i @click="toggleLeft" class="collapse-menu" :style="{width:38+ 'px'}"> v-show="!$store.state.iscollapse" v-bind:src="amslogo" />
<el-icon v-if="!$store.state.iscollapse" size="20" style="vertical-align: middle"><Fold /></el-icon> <i @click="toggleLeft" class="collapse-menu" :style="{ width: 38 + 'px' }">
<el-icon v-if="$store.state.iscollapse" size="20" style="vertical-align: middle"><Expand /></el-icon> <el-icon v-if="!$store.state.iscollapse" size="20" style="vertical-align: middle">
<Fold />
</el-icon>
<el-icon v-if="$store.state.iscollapse" size="20" style="vertical-align: middle">
<Expand />
</el-icon>
</i> </i>
</div> </div>
<div class="ams-menu"> <div class="ams-menu">
<DataMenu ></DataMenu> <DataMenu></DataMenu>
</div> </div>
</div> </div>
<div class="ams-container" :style="{ left: menuWidth-2 + 'px' }"> <div class="ams-container" :style="{ left: menuWidth - 2 + 'px' }">
<div class="ams-header" style=" background-color: #526bab;"> <div class="ams-header" style=" background-color: rgb(31, 63, 141);">
<div class="enterprise-name"> <div class="enterprise-name">
<el-dropdown size="'large'" style="margin-left: 10px;margin-top: 5px;color:blue; width: 100%;" <el-dropdown size="'large'" style="margin-left: 10px;margin-top: 5px;color:blue; width: 100%;"
@command="handleCommand" :trigger="(roleId > 2) ? 'contextmenu' : 'hover'"> @command="handleCommand" :trigger="(roleId > 2) ? 'contextmenu' : 'hover'">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<el-image style=" height: 60px " :src="currLogoUrl" :fit="'full'" /> <el-image style=" height: 60px " :src="currLogoUrl" :fit="'full'" />
</span> </span>
...@@ -30,62 +35,93 @@ ...@@ -30,62 +35,93 @@
</el-dropdown> </el-dropdown>
</div> </div>
<div class="header-weather" id=""> <div class="header-weather" id="">
<el-row style="left: 2.5%;widows: 60px;" > <el-row style="left: 42%;widows: 60px;width: 63%;">
<el-col :span="4"> <el-col :span="4" style="">
<div>温度 ℃
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature }}</div> <div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/wendu.png"
:fit="'fill'" />
<div>
<div class="div-contain-title"> 温度 ℃</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature }}
</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<div>光照 <div class="div-contain-titleAndText">
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }}</div> <el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/guang.png"
:fit="'fill'" />
<div>
<div class="div-contain-title">光照强度</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }}
</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="5">
<div>风力 <div class="div-contain-titleAndText">
<div class="div-contain-text-big">{{ showWeatherData.weatherData.wind }}</div> <el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/feng.png"
:fit="'fill'" />
<div>
<div class="div-contain-title">风力等级</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.wind }}</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="5">
<div>风向 <div class="div-contain-titleAndText">
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }}</div> <el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/fengxiang.png"
:fit="'fill'" />
<div>
<div class="div-contain-title">风向</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }}
</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="5" > <el-col :span="5">
<div> <div class="div-contain-titleAndText">
<div style="width: 100px; text-align: center;">采集时间</div> <el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/time.png"
<div class="div-contain-text-small" style="line-height: 15px;">{{ showWeatherData.weatherData.gatherTime }}</div> :fit="'fill'" />
<div>
<div class="div-contain-title" style="width: 100px;">气象时间</div>
<div class="div-contain-text-small" style="line-height: 15px;">{{
showWeatherData.weatherData.gatherTime
}}</div>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="header-info"> <div class="header-info">
<div class="h-link"> <div class="h-link">
<a href="javascript:void(0)" ><i>可视化界面</i></a> <a href="javascript:void(0)"><i>可视化界面</i></a>
</div> </div>
<div class="h-link"> <div class="h-link">
<a href="javascript:void(0)" > <a href="javascript:void(0)">
<el-icon> <el-icon>
<UserFilled color="rgb(161,187,214)"/> <UserFilled color="rgb(161,187,214)" />
</el-icon> </el-icon>
{{ realName }} {{ realName }}
</a> </a>
</div> </div>
<div class="h-link" style="padding-left: 20px; "> <div class="h-link" style="padding-left: 15px; ">
<a href="javascript:void(0)" > <a href="javascript:void(0)">
<el-icon > <el-icon>
<Setting color="rgb(0,0,0)" /> <Setting color="rgb(255,255,255)" />
</el-icon> </el-icon>
系统设置 系统设置
</a> </a>
</div> </div>
<div class="h-link" style="padding-left: 1px;" > <div class="h-link" style="padding-left: 1px;">
<a href="javascript:void(0)" @click="logout"> <a href="javascript:void(0)" @click="logout">
<el-icon> <el-icon>
<SwitchButton color="rgb(0,0,0)"/> <el-image src="/imgs/home/exit.png" :fit="'fill'" />
</el-icon>
退出系统 </el-icon>
</a> 退出系统
</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -93,21 +129,21 @@ ...@@ -93,21 +129,21 @@
<div> <div>
<el-tabs v-model="activeTable" type="border-card" class="demo-tabs mytab" @tab-remove="removeTab" <el-tabs v-model="activeTable" type="border-card" class="demo-tabs mytab" @tab-remove="removeTab"
@tab-change="changeTabsHandle"> @tab-change="changeTabsHandle">
<el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs" :key="item.path" :label="item.title" <el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs"
:name="item.path"> :key="item.path" :label="item.title" :name="item.path">
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div :style="{height: mainHeight + 'px'}"> <!--, width: mainWidth +'px' --> <div :style="{ height: mainHeight + 'px' }"> <!--, width: mainWidth +'px' -->
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<loading v-show="$store.getters.isLoading()"></loading> <loading v-show="$store.getters.isLoading()"></loading>
<!-- 主体内容 --> <!-- 主体内容 -->
<router-view v-slot="{Component}"> <router-view v-slot="{Component}">
<!-- 页面缓存 --> <!-- 页面缓存 -->
<keep-alive> <keep-alive>
<component :is="Component"></component> <component :is="Component"></component>
</keep-alive> </keep-alive>
</router-view> </router-view>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
...@@ -118,31 +154,34 @@ ...@@ -118,31 +154,34 @@
<style scoped> <style scoped>
@import "../style/index.less"; @import "../style/index.less";
::v-deep .el-tabs--border-card{ ::v-deep .el-tabs--border-card {
background: transparent; background: transparent;
border: none; border: none;
box-shadow: none; box-shadow: none;
-webkit-box-shadow:none; -webkit-box-shadow: none;
height: 46px; height: 46px;
} }
::v-deep .el-tabs--border-card > .el-tabs__header{
background-color: transparent; ::v-deep .el-tabs--border-card>.el-tabs__header {
border-bottom: none; background-color: transparent;
border-bottom: none;
} }
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item{
margin-left: 8px; ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
margin-top: 5px; margin-left: 8px;
border: none; margin-top: 5px;
border-radius: 8px 8px 0 0; border: none;
background-color: #F3F7FE; border-radius: 8px 8px 0 0;
padding: 4px 20px; background-color: #F3F7FE;
color:#0065D5; padding: 4px 20px;
line-height: 22px; color: #0065D5;
height: 40px; line-height: 22px;
height: 40px;
} }
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
background-color: #0065D5; ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
color: #ffffff; background-color: #0065D5;
color: #ffffff;
} }
</style> </style>
...@@ -151,18 +190,18 @@ ...@@ -151,18 +190,18 @@
import loading from "../components/basic/RouterLoading.vue"; import loading from "../components/basic/RouterLoading.vue";
//import message from "./Message.vue"; //import message from "./Message.vue";
import { ElMessage, ElMessageBox, scrollbarEmits } from "element-plus"; import { ElMessage, ElMessageBox, scrollbarEmits } from "element-plus";
import { import {
defineComponent, defineComponent,
ref, ref,
reactive, reactive,
toRefs, toRefs,
getCurrentInstance, getCurrentInstance,
onBeforeMount onBeforeMount
} from 'vue'; } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'; import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import store from "../store/index"; import store from "../store/index";
import http from '../api/http'; import http from '../api/http';
import { import {
Menu as IconMenu, Menu as IconMenu,
Location, Location,
Setting, Setting,
...@@ -170,7 +209,7 @@ import { ...@@ -170,7 +209,7 @@ import {
UserFilled UserFilled
} from '@element-plus/icons-vue'; } from '@element-plus/icons-vue';
import DataMenu from '../components/DataMenu.vue'; import DataMenu from '../components/DataMenu.vue';
import EventBus from '../utils/event-bus.js'; import EventBus from '../utils/event-bus.js';
//import {RoleEnum} from '../utils/enumData'; //import {RoleEnum} from '../utils/enumData';
...@@ -187,13 +226,13 @@ export default defineComponent({ ...@@ -187,13 +226,13 @@ export default defineComponent({
data() { data() {
return { return {
allTabs: true, allTabs: true,
leftTabs: true, leftTabs: true,
rightTabs: true, rightTabs: true,
otherTabs: true, otherTabs: true,
menuLeft: 0, menuLeft: 0,
menuTop: 0, menuTop: 0,
// contextMenuVisible: false, // 右键关闭显/隐 // contextMenuVisible: false, // 右键关闭显/隐
}; };
}, },
beforeDestroy() { beforeDestroy() {
...@@ -206,397 +245,395 @@ export default defineComponent({ ...@@ -206,397 +245,395 @@ export default defineComponent({
this.bindRightClickMenu(true); this.bindRightClickMenu(true);
}, },
setup(props, {emit}){ setup(props, { emit }) {
// 获取全局属性和方法 // 获取全局属性和方法
const { proxy } = getCurrentInstance()!; const { proxy } = getCurrentInstance()!;
// 菜单导航默认宽度 // 菜单导航默认宽度
const menuWidth = ref(200); const menuWidth = ref(200);
const contextMenuVisible = ref(false); const contextMenuVisible = ref(false);
const drawer_model = ref(false); const drawer_model = ref(false);
const messageModel = ref(false); const messageModel = ref(false);
const mainHeight = ref(800); const mainHeight = ref(800);
const mainWidth = ref(800); const mainWidth = ref(800);
const selectId = ref("1"); const selectId = ref("1");
// 【首页】标签序号(当前右键选中的菜单) // 【首页】标签序号(当前右键选中的菜单)
const selectMenuIndex = ref("0"); const selectMenuIndex = ref("0");
//tab选项与菜单联动功能 //tab选项与菜单联动功能
const currentMenuId = ref(0); const currentMenuId = ref(0);
let roleId = 8; let roleId = 8;
let realName = ref("--"); let realName = ref("--");
const userInfo = ref({}); const userInfo = ref({});
const visibleItem = reactive({ const visibleItem = reactive({
left: false, left: false,
right: false, right: false,
all: false, all: false,
other: false, other: false,
}); });
const route = useRoute();
const router = useRouter();
let _config = getCurrentInstance()!.appContext.config.globalProperties;
var amslogo_url =new URL('/imgs/home/LOGO_index.png',import.meta.url).href;
const amslogo = ref(amslogo_url);
var currLogoUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
//var backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
var amslogo_style=reactive({height:50,width:150});
//控制左侧导航菜单的展开和隐藏
const toggleLeft=()=>{
store.commit('setAsideWidth');
menuWidth.value =store.state.iscollapse ? 63 : 200;
amslogo_style.height=store.state.iscollapse ? 12 : 50;
amslogo_style.width=store.state.iscollapse ? 40 : 150;
mainWidth.value = window.innerWidth-menuWidth.value;
EventBus.emit('changeValue', mainWidth.value );
}
//开放手动折叠菜单方法 const route = useRoute();
_config.menu = { const router = useRouter();
show() { let _config = getCurrentInstance()!.appContext.config.globalProperties;
toggleLeft();
}, var amslogo_url = new URL('/imgs/home/LOGO_index.png', import.meta.url).href;
hide() { const amslogo = ref(amslogo_url);
toggleLeft(); var currLogoUrl = new URL('/imgs/home/PLATFORM.png', import.meta.url).href;
}, //var backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
}; var amslogo_style = reactive({ height: 50, width: 150 });
const created = () => { //控制左侧导航菜单的展开和隐藏
mainHeight.value = window.innerHeight - 120; const toggleLeft = () => {
mainWidth.value = store.state.iscollapse ? window.innerWidth- 63 : window.innerWidth-200; store.commit('setAsideWidth');
menuWidth.value = store.state.iscollapse ? 63 : 200;
let _userInfo = store.getters.getUserInfo(); amslogo_style.height = store.state.iscollapse ? 12 : 50;
if (_userInfo) { amslogo_style.width = store.state.iscollapse ? 40 : 150;
realName.value = _userInfo.realName; mainWidth.value = window.innerWidth - menuWidth.value;
roleId = _userInfo.roleId; EventBus.emit('changeValue', mainWidth.value);
} }
setInterval(() => { //开放手动折叠菜单方法
//气象信息更新计时器 _config.menu = {
getWeather(); show() {
}, 60000); // 每分钟执行一次 toggleLeft();
} },
created(); hide() {
toggleLeft();
onBeforeMount(async() => { },
// 在组件即将挂载之前加载数据 };
await getData();
});
const getWeather = async () =>{
var result = await http.post("/api/weather/Real/",showWeatherData.supplyData.supplyId);
var temp = result.data
var tempWeatherData = toRefs(showWeatherData);
tempWeatherData.weatherData.value = temp;
}
//企业选择函数 const created = () => {
const handleCommand = (command: string | number | object) => { mainHeight.value = window.innerHeight - 120;
showenterpriseName.value = command.toString(); mainWidth.value = store.state.iscollapse ? window.innerWidth - 63 : window.innerWidth - 200;
}
//const enterpriseId = ref(""); let _userInfo = store.getters.getUserInfo();
var enterpriseList = ref([{ if (_userInfo) {
"enterpriseId": "", realName.value = _userInfo.realName;
"enterpriseName": "", roleId = _userInfo.roleId;
"logo":"", }
"orderNum": 0,
"supplyList": [{ setInterval(() => {
"supplyId": "", //气象信息更新计时器
"supplyName": "", getWeather();
"orderNum": 0 }, 60000); // 每分钟执行一次
}
]
}]);
//展示的企业名称
var showenterpriseName = ref('天津市爱默森电气科技有限公司');
//展示的气象的信息
var showWeatherData = reactive({
supplyData: {
supplyId: "",
supplyName: ""
},
weatherData: {
"weatherId": "",
"temperature": '-',
"wind": '-',
"illumination": '-',
"windDirection": "-",
"humidity": '-',
"gatherTime": "-"
}
})
//标签
// const editableTabsValue = ref('1')
//当前激活的菜单选项
const activeTable = ref(route.path);
const editableTabs = ref([
{
title: '首页-实时热源',
path: '/RealSupply',
} }
]) created();
//初始化标签导航 onBeforeMount(async () => {
//初始化标签导航列表 // 在组件即将挂载之前加载数据
function initTabList() { await getData();
let istabList = JSON.parse(window.sessionStorage.getItem("tabList"));
if(!Array.isArray(istabList)){ });
istabList = null;
const getWeather = async () => {
var result = await http.post("/api/weather/Real/", showWeatherData.supplyData.supplyId);
var temp = result.data
var tempWeatherData = toRefs(showWeatherData);
tempWeatherData.weatherData.value = temp;
} }
if (istabList) {
editableTabs.value = istabList //企业选择函数
const handleCommand = (command: string | number | object) => {
showenterpriseName.value = command.toString();
} }
activeTable.value = localStorage.getItem("activeTab")!; //const enterpriseId = ref("");
if(activeTable.value){ var enterpriseList = ref([{
router.push(activeTable.value) "enterpriseId": "",
}else{ "enterpriseName": "",
router.push("/RealSupply") "logo": "",
activeTable.value = "/RealSupply" "orderNum": 0,
"supplyList": [{
"supplyId": "",
"supplyName": "",
"orderNum": 0
}
]
}]);
//展示的企业名称
var showenterpriseName = ref('天津市爱默森电气科技有限公司');
//展示的气象的信息
var showWeatherData = reactive({
supplyData: {
supplyId: "",
supplyName: ""
},
weatherData: {
"weatherId": "",
"temperature": '-',
"wind": '-',
"illumination": '-',
"windDirection": "-",
"humidity": '-',
"gatherTime": "-"
}
})
//标签
// const editableTabsValue = ref('1')
//当前激活的菜单选项
const activeTable = ref(route.path);
const editableTabs = ref([
{
title: '首页-实时热源',
path: '/RealSupply',
}
])
//初始化标签导航
//初始化标签导航列表
function initTabList() {
let istabList = JSON.parse(window.sessionStorage.getItem("tabList"));
if (!Array.isArray(istabList)) {
istabList = null;
}
if (istabList) {
editableTabs.value = istabList
}
activeTable.value = localStorage.getItem("activeTab")!;
if (activeTable.value) {
router.push(activeTable.value)
} else {
router.push("/RealSupply")
activeTable.value = "/RealSupply"
}
} }
initTabList();
}
initTabList(); //todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中 function addTab(item) {
//标签添加函数 const notTab = editableTabs.value.findIndex(obj => obj.path == item.path) == -1;
function addTab(item){ if (notTab) {
const notTab = editableTabs.value.findIndex(obj=> obj.path == item.path) == -1; editableTabs.value.push(item)
if (notTab) { //本地存储
editableTabs.value.push(item) window.sessionStorage.setItem("tabList", JSON.stringify(editableTabs.value))
//本地存储 }
window.sessionStorage.setItem("tabList", JSON.stringify(editableTabs.value))
} }
}
//标签删除函数 //标签删除函数
const removeTab = (path) => { const removeTab = (path) => {
console.log(path); console.log(path);
let isTabs = activeTable.value; let isTabs = activeTable.value;
const tabs = editableTabs.value; const tabs = editableTabs.value;
//删除的是 激活菜单,将激活选项设为 上一个或下一个标签的 path //删除的是 激活菜单,将激活选项设为 上一个或下一个标签的 path
if (path == isTabs) { if (path == isTabs) {
tabs.forEach((item, index) => { tabs.forEach((item, index) => {
if (item.path == path) { if (item.path == path) {
//找到了需要删除的菜单 //找到了需要删除的菜单
//获取上一个或下一个标签 //获取上一个或下一个标签
const nextTab = tabs[index + 1] || tabs[index - 1] const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) { if (nextTab) {
isTabs = nextTab.path isTabs = nextTab.path
}
} }
} })
}) }
activeTable.value = isTabs
localStorage.setItem("activeTab", isTabs);
//从editableTabs数组删除选中的菜单
//filter是过滤，生成新数组
editableTabs.value = editableTabs.value.filter(item => item.path != path)
//重新设定本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(activeTable.value))
//路由跳转
router.push(isTabs)
} }
activeTable.value = isTabs
localStorage.setItem("activeTab", isTabs);
//从editableTabs数组删除选中的菜单
//filter是过滤，生成新数组
editableTabs.value = editableTabs.value.filter(item => item.path != path)
//重新设定本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(activeTable.value))
//路由跳转
router.push(isTabs)
}
const changeTabsHandle=(path)=>{ const changeTabsHandle = (path) => {
console.log("changeTabsHandle:"+ path) console.log("changeTabsHandle:" + path)
//path 是标签name所设定的值，也就是需要跳转的路由地址 item.path //path 是标签name所设定的值，也就是需要跳转的路由地址 item.path
//设置激活选项 //设置激活选项
activeTable.value = path activeTable.value = path
localStorage.setItem("activeTab", path); localStorage.setItem("activeTab", path);
//路由跳转 //路由跳转
router.push(path) router.push(path)
} }
//监听当前路由发生变化 //监听当前路由发生变化
onBeforeRouteUpdate((to, from) => { onBeforeRouteUpdate((to, from) => {
// if(to.path === '/TransferArtwork'){ // if(to.path === '/TransferArtwork'){
// window.open('/TransferArt', '_blank') // window.open('/TransferArt', '_blank')
// } // }
//激活选中项 //激活选中项
activeTable.value = to.path activeTable.value = to.path
localStorage.setItem("activeTab", activeTable.value); localStorage.setItem("activeTab", activeTable.value);
addTab({ addTab({
title: to.meta.title, title: to.meta.title,
path: to.path path: to.path
})
}) })
})
const getEnterprises = async () =>{
enterpriseList.value = store.getters.getEnterprise();
//console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId);
showenterpriseName.value = enterpriseList.value[0].enterpriseName;
if(enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司"){
showWeatherData.supplyData.supplyId = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName;
}else{
showWeatherData.supplyData.supplyId = enterpriseList.value[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].supplyList[0].supplyName;
}
currLogoUrl =new URL('../assets/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href;
//console.log(currLogoUrl);
await getWeather(); const getEnterprises = async () => {
}
enterpriseList.value = store.getters.getEnterprise();
//console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId);
showenterpriseName.value = enterpriseList.value[0].enterpriseName;
if (enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司") {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName;
} else {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].supplyList[0].supplyName;
}
currLogoUrl = new URL('../assets/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href;
//console.log(currLogoUrl);
const getMenus = async () =>{ await getWeather();
//function getMenus() { }
await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data;
store.commit('setMenus', jobj);
});
}
async function getData() { const getMenus = async () => {
await getEnterprises(); //function getMenus() {
await getMenus(); await http.post("/api/menu/GetCurrentMenu/").then((response) => {
} var jobj = response.data;
store.commit('setMenus', jobj);
});
}
const logout = async() => { async function getData() {
//console.log('logout'); await getEnterprises();
const res = await ElMessageBox.confirm( await getMenus();
'是否退出登录？', }
'提示',
{ const logout = async () => {
confirmButtonText:'确定', //console.log('logout');
cancelButtonText:'取消', const res = await ElMessageBox.confirm(
type:'warning' '是否退出登录？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => {
return err;
})
if (res == 'confirm') {
store.commit("clearUserInfo", "");
router.push({ path: "/login" });
} }
).catch(err =>{ }
return err;
}) return {
if(res == 'confirm'){ menuWidth,
store.commit("clearUserInfo", ""); mainHeight,
router.push({path:"/login"}); mainWidth,
} drawer_model,
} userInfo,
roleId,
realName,
selectId,
selectMenuIndex,
toggleLeft,
messageModel,
contextMenuVisible,
visibleItem,
currentMenuId,
amslogo,
amslogo_style,
addTab,
//menuRoot,
handleCommand,
currLogoUrl,
enterpriseList,
showWeatherData,
removeTab,
editableTabs,
changeTabsHandle,
activeTable,
logout,
//enterpriseId
};
},
methods: {
/**
* 绑定右键事件
* @param {*} enable 是否启用右键事件[true:启用;false:禁用;]
* @param {*} $event 事件
*/
bindRightClickMenu(enable) {
if (!enable) return;
let that = this;
// 使用原生js 为单个dom绑定鼠标右击事件
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;
});
});
},
},
return {
menuWidth,
mainHeight,
mainWidth,
drawer_model,
userInfo,
roleId,
realName,
selectId,
selectMenuIndex,
toggleLeft,
messageModel,
contextMenuVisible,
visibleItem,
currentMenuId,
amslogo,
amslogo_style,
addTab,
//menuRoot,
handleCommand,
currLogoUrl,
enterpriseList,
showWeatherData,
removeTab,
editableTabs,
changeTabsHandle,
activeTable,
logout,
//enterpriseId
};
},
methods: {
/** /**
* 绑定右键事件 * 销毁钩子函数
* @param {*} enable 是否启用右键事件[true:启用;false:禁用;]
* @param {*} $event 事件
*/ */
bindRightClickMenu(enable) { destroyed() {
if (!enable) return; $this = null;
let that = this; clearInterval($interval);
// 使用原生js 为单个dom绑定鼠标右击事件
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);
},
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.vol-container .vol-path ::v-deep(.el-tabs__content) { .vol-container .vol-path ::v-deep(.el-tabs__content) {
padding: 0; padding: 0;
} }
.contextMenu { .contextMenu {
width: 120px; width: 120px;
margin: 0; margin: 0;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
background: #fff; background: #fff;
z-index: 30000; z-index: 30000;
position: absolute; position: absolute;
list-style-type: none; list-style-type: none;
padding: 5px 0; padding: 5px 0;
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%); box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
i,button{
font-size: 14px !important; i,
} button {
font-size: 14px !important;
}
} }
.contextMenu li { .contextMenu li {
margin: 0; margin: 0;
padding: 5px 17px; padding: 5px 17px;
} }
.contextMenu li:hover { .contextMenu li:hover {
background: #fafafa; background: #fafafa;
cursor: pointer; cursor: pointer;
} }
.contextMenu li button { .contextMenu li button {
color: #626060; color: #626060;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child,
> .el-tabs__header .el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) {
.el-tabs__item:last-child, padding: 0;
.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) { .header-navigation ::v-deep(.el-tabs__item.is-top) {
padding: 0 15px; padding: 0 15px;
} }
</style> </style>
<style> <style>
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out; 0s padding-right ease-in-out;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment