Skip to content

W
web-project
Commit aa61b149 authored by 王亚晖's avatar 王亚晖
Browse files
Options

Merge branch 'master' of https://gitee.com/tj-wang-yahui/AMS_HeatSys_Vue_V10

parents 61d73dbc 91888d13
Hide whitespace changes
Inline Side-by-side
Showing with 663 additions and 369 deletions
src/style/index.less
View file @ aa61b149
......@@ -30,7 +30,8 @@ html {
height: 60px;
position: relative;
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 {
......@@ -169,18 +170,29 @@ html {
// padding-top: 1vh;
/* padding-left: 2vw; */
text-align: center;
// text-align: center;
color: white;
}
.div-contain-title{
margin-top: 5px;
height: 25px;
}
.div-contain-titleAndText{
display: flex;
}
/* 气象信息文本--小文本 */
.div-contain-text-small {
font-size: 8pt;
text-align:center;
// text-align:center;
vertical-align: top;
width: 100px;
}
/* 气象信息文本--大文本 */
.div-contain-text-big {
font-size: 14px;
......
src/views/RemotePage/TransferPumpPage.vue
View file @ aa61b149
<template>
换热站机组循环泵压差远程控制
</template>
\ No newline at end of file
<el-card style="max-width: 100%">
<template #header>
<div class="card-header">
<el-row>
<el-col :span="12">
<div class="grid-content">
请选择换热机组：
<el-cascader :options="options" :props="props" v-model="option" collapse-tags clearable
:show-all-levels="false" placeholder="请选择" style="min-width: 210px;" />
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-checkbox v-model="checked" label="循环泵自控功能启用" size="large" border />
</div>
</el-col>
</el-row>
</div>
</template>
<el-row>
<el-col :span="4">
<div class="grid-content">近N小时室外平均温度（℃）</div>
</el-col>
<el-col :span="3">
<div class="grid-content">室外平均T比较设定值（℃）</div>
</el-col>
<el-col :span="3">
<div class="grid-content">压差系数1</div>
</el-col>
<el-col :span="3">
<div class="grid-content">压差系数2</div>
</el-col>
<el-col :span="3">
<div class="grid-content">压差系数2是否投入</div>
</el-col>
<el-col :span="4">
<div class="grid-content">起始时间</div>
</el-col>
<el-col :span="4">
<div class="grid-content">结束时间</div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content">30</div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="3">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
<el-col :span="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
<el-row><el-col :span="24"></el-col></el-row>
</el-card>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import store from "../../store/index";
const options = reactive([]);
const option = reactive([]);
const enterpriseId = ref();
const checked = ref(true);
const num = ref(20);
getEnterprise();
function getEnterprise() {
var result = store.getters.getEnterprise();
if (result) {
enterpriseId.value = result[0].enterpriseId;
}
}
const props = { multiple: true, emitPath: false }
//获取换热机组列表
getSupplys();
function getSupplys() {
var result = store.getters.getEnterprise();
if (result) {
result.forEach(element => {
if (element.enterpriseId === enterpriseId.value) {
if (element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()) {
element.serviceCenterList.forEach(center => {
let c = [];
center.supplyList.forEach(supply => {
let chi = [];
supply.transferList.forEach(unit => {
chi.push({ value: unit.unitId, label: unit.unitName });
});
c.push({ children: chi, label: supply.supplyName });
});
options.push({ children: c, label: center.serviceCenterName });
})
} else {
element.supplyList.forEach(element => {
let chi = [];
element.transferList.forEach(unit => {
chi.push({ value: unit.unitId, label: unit.unitName });
})
options.push({ children: chi, label: element.supplyName });
})
}
}
});
}
option.push(options[0].children[0].children[0].value);
}
</script>
<style lang="scss">
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>
\ No newline at end of file
src/views/Video/VideoViewPage.vue
View file @ aa61b149
<template>
海康视频
</template>
\ No newline at end of file
</template>
\ No newline at end of file
src/views/home.vue
View file @ aa61b149
<template>
<div id="ams-container" >
<div class="ams-aside" :style="{ width: menuWidth + '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" />
<i @click="toggleLeft" class="collapse-menu" :style="{width:38+ 'px'}">
<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>
<div id="ams-container">
<div class="ams-aside" :style="{ width: menuWidth + '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" />
<i @click="toggleLeft" class="collapse-menu" :style="{ width: 38 + 'px' }">
<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>
</div>
<div class="ams-menu">
<DataMenu ></DataMenu>
<DataMenu></DataMenu>
</div>
</div>
<div class="ams-container" :style="{ left: menuWidth-2 + 'px' }">
<div class="ams-header" style=" background-color: #526bab;">
<div class="ams-container" :style="{ left: menuWidth - 2 + 'px' }">
<div class="ams-header" style=" background-color: rgb(31, 63, 141);">
<div class="enterprise-name">
<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">
<el-image style=" height: 60px " :src="currLogoUrl" :fit="'full'" />
</span>
......@@ -30,31 +35,61 @@
</el-dropdown>
</div>
<div class="header-weather" id="">
<el-row style="left: 2.5%;widows: 60px;" >
<el-col :span="4">
<div>温度 ℃
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature }}</div>
<el-row style="left: 37%;widows: 60px;width: 63%;">
<el-col :span="4" style="">
<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>
</el-col>
<el-col :span="5">
<div>光照
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }}</div>
<div class="div-contain-titleAndText">
<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>
</el-col>
<el-col :span="4">
<div>风力
<div class="div-contain-text-big">{{ showWeatherData.weatherData.wind }}</div>
<el-col :span="5">
<div class="div-contain-titleAndText">
<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>
</el-col>
<el-col :span="6">
<div>风向
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }}</div>
<el-col :span="5">
<div class="div-contain-titleAndText">
<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>
</el-col>
<el-col :span="5" >
<div>
<div style="width: 100px; text-align: center;">采集时间</div>
<div class="div-contain-text-small" style="line-height: 15px;">{{ showWeatherData.weatherData.gatherTime }}</div>
<el-col :span="5">
<div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/time.png"
:fit="'scale-down'" />
<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>
</el-col>
</el-row>
......@@ -64,28 +99,29 @@
<a href="javascript:void(0)" @click="openMap"><i>可视化界面</i></a>
</div>
<div class="h-link">
<a href="javascript:void(0)" >
<el-icon>
<UserFilled color="rgb(161,187,214)"/>
</el-icon>
{{ realName }}
</a>
<a href="javascript:void(0)">
<el-icon>
<UserFilled color="rgb(161,187,214)" />
</el-icon>
{{ realName }}
</a>
</div>
<div class="h-link" style="padding-left: 20px; ">
<a href="javascript:void(0)" >
<el-icon >
<Setting color="rgb(0,0,0)" />
<div class="h-link" style="padding-left: 15px; ">
<a href="javascript:void(0)">
<el-icon>
<Setting color="rgb(255,255,255)" />
</el-icon>
系统设置
</a>
</div>
<div class="h-link" style="padding-left: 1px;" >
<a href="javascript:void(0)" @click="logout">
<el-icon>
<SwitchButton color="rgb(0,0,0)"/>
</el-icon>
退出系统
</a>
<div class="h-link" style="padding-left: 1px;">
<a href="javascript:void(0)" @click="logout">
<el-icon>
<el-image src="/imgs/home/exit.png" :fit="'fill'" />
</el-icon>
退出系统
</a>
</div>
</div>
</div>
......@@ -93,21 +129,21 @@
<div>
<el-tabs v-model="activeTable" type="border-card" class="demo-tabs mytab" @tab-remove="removeTab"
@tab-change="changeTabsHandle">
<el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs" :key="item.path" :label="item.title"
:name="item.path">
<el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs"
:key="item.path" :label="item.title" :name="item.path">
</el-tab-pane>
</el-tabs>
</div>
<div :style="{height: mainHeight + 'px'}"> <!--, width: mainWidth +'px' -->
<div :style="{ height: mainHeight + 'px' }"> <!--, width: mainWidth +'px' -->
<el-scrollbar style="height: 100%">
<loading v-show="$store.getters.isLoading()"></loading>
<!-- 主体内容 -->
<router-view v-slot="{Component}">
<!-- 页面缓存 -->
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view>
<loading v-show="$store.getters.isLoading()"></loading>
<!-- 主体内容 -->
<router-view v-slot="{Component}">
<!-- 页面缓存 -->
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</router-view>
</el-scrollbar>
</div>
</div>
......@@ -118,31 +154,34 @@
<style scoped>
@import "../style/index.less";
::v-deep .el-tabs--border-card{
background: transparent;
border: none;
box-shadow: none;
-webkit-box-shadow:none;
height: 46px;
::v-deep .el-tabs--border-card {
background: transparent;
border: none;
box-shadow: none;
-webkit-box-shadow: none;
height: 46px;
}
::v-deep .el-tabs--border-card > .el-tabs__header{
background-color: transparent;
border-bottom: none;
::v-deep .el-tabs--border-card>.el-tabs__header {
background-color: transparent;
border-bottom: none;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item{
margin-left: 8px;
margin-top: 5px;
border: none;
border-radius: 8px 8px 0 0;
background-color: #F3F7FE;
padding: 4px 20px;
color:#0065D5;
line-height: 22px;
height: 40px;
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
margin-left: 8px;
margin-top: 5px;
border: none;
border-radius: 8px 8px 0 0;
background-color: #F3F7FE;
padding: 4px 20px;
color: #0065D5;
line-height: 22px;
height: 40px;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
background-color: #0065D5;
color: #ffffff;
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
background-color: #0065D5;
color: #ffffff;
}
</style>
......@@ -151,18 +190,18 @@
import loading from "../components/basic/RouterLoading.vue";
//import message from "./Message.vue";
import { ElMessage, ElMessageBox, scrollbarEmits } from "element-plus";
import {
defineComponent,
ref,
reactive,
toRefs,
import {
defineComponent,
ref,
reactive,
toRefs,
getCurrentInstance,
onBeforeMount
} from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import store from "../store/index";
import http from '../api/http';
import {
import {
Menu as IconMenu,
Location,
Setting,
......@@ -170,7 +209,7 @@ import {
UserFilled
} from '@element-plus/icons-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';
......@@ -187,13 +226,13 @@ export default defineComponent({
data() {
return {
allTabs: true,
leftTabs: true,
rightTabs: true,
otherTabs: true,
menuLeft: 0,
menuTop: 0,
// contextMenuVisible: false, // 右键关闭显/隐
allTabs: true,
leftTabs: true,
rightTabs: true,
otherTabs: true,
menuLeft: 0,
menuTop: 0,
// contextMenuVisible: false, // 右键关闭显/隐
};
},
beforeDestroy() {
......@@ -206,258 +245,258 @@ export default defineComponent({
this.bindRightClickMenu(true);
},
setup(props, {emit}){
// 获取全局属性和方法
const { proxy } = getCurrentInstance()!;
// 菜单导航默认宽度
const menuWidth = ref(200);
const contextMenuVisible = ref(false);
const drawer_model = ref(false);
const messageModel = ref(false);
const mainHeight = ref(800);
const mainWidth = ref(800);
const selectId = ref("1");
// 【首页】标签序号(当前右键选中的菜单)
const selectMenuIndex = ref("0");
//tab选项与菜单联动功能
const currentMenuId = ref(0);
let roleId = 8;
let realName = ref("--");
const userInfo = ref({});
const visibleItem = reactive({
left: false,
right: false,
all: 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 );
}
setup(props, { emit }) {
// 获取全局属性和方法
const { proxy } = getCurrentInstance()!;
// 菜单导航默认宽度
const menuWidth = ref(200);
const contextMenuVisible = ref(false);
const drawer_model = ref(false);
const messageModel = ref(false);
const mainHeight = ref(800);
const mainWidth = ref(800);
const selectId = ref("1");
// 【首页】标签序号(当前右键选中的菜单)
const selectMenuIndex = ref("0");
//tab选项与菜单联动功能
const currentMenuId = ref(0);
let roleId = 8;
let realName = ref("--");
const userInfo = ref({});
const visibleItem = reactive({
left: false,
right: false,
all: false,
other: false,
});
//开放手动折叠菜单方法
_config.menu = {
show() {
toggleLeft();
},
hide() {
toggleLeft();
},
};
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);
}
//开放手动折叠菜单方法
_config.menu = {
show() {
toggleLeft();
},
hide() {
toggleLeft();
},
};
const created = () => {
mainHeight.value = window.innerHeight - 120;
mainWidth.value = store.state.iscollapse ? window.innerWidth - 63 : window.innerWidth - 200;
const created = () => {
mainHeight.value = window.innerHeight - 120;
mainWidth.value = store.state.iscollapse ? window.innerWidth- 63 : window.innerWidth-200;
let _userInfo = store.getters.getUserInfo();
if (_userInfo) {
realName.value = _userInfo.realName;
roleId = _userInfo.roleId;
}
let _userInfo = store.getters.getUserInfo();
if (_userInfo) {
realName.value = _userInfo.realName;
roleId = _userInfo.roleId;
setInterval(() => {
//气象信息更新计时器
getWeather();
}, 60000); // 每分钟执行一次
}
created();
setInterval(() => {
//气象信息更新计时器
getWeather();
}, 60000); // 每分钟执行一次
}
created();
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;
}
onBeforeMount(async () => {
// 在组件即将挂载之前加载数据
await getData();
//企业选择函数
const handleCommand = (command: string | number | object) => {
showenterpriseName.value = command.toString();
}
});
//const enterpriseId = ref("");
var enterpriseList = ref([{
"enterpriseId": "",
"enterpriseName": "",
"logo":"",
"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 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 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
//企业选择函数
const handleCommand = (command: string | number | object) => {
showenterpriseName.value = command.toString();
}
activeTable.value = localStorage.getItem("activeTab")!;
if(activeTable.value){
router.push(activeTable.value)
}else{
router.push("/RealSupply")
activeTable.value = "/RealSupply"
//const enterpriseId = ref("");
var enterpriseList = ref([{
"enterpriseId": "",
"enterpriseName": "",
"logo": "",
"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();
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数
function addTab(item){
const notTab = editableTabs.value.findIndex(obj=> obj.path == item.path) == -1;
if (notTab) {
editableTabs.value.push(item)
//本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(editableTabs.value))
initTabList();
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数
function addTab(item) {
const notTab = editableTabs.value.findIndex(obj => obj.path == item.path) == -1;
if (notTab) {
editableTabs.value.push(item)
//本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(editableTabs.value))
}
}
}
//标签删除函数
const removeTab = (path) => {
console.log(path);
let isTabs = activeTable.value;
const tabs = editableTabs.value;
//删除的是 激活菜单,将激活选项设为 上一个或下一个标签的 path
if (path == isTabs) {
tabs.forEach((item, index) => {
if (item.path == path) {
//找到了需要删除的菜单
//获取上一个或下一个标签
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
isTabs = nextTab.path
//标签删除函数
const removeTab = (path) => {
console.log(path);
let isTabs = activeTable.value;
const tabs = editableTabs.value;
//删除的是 激活菜单,将激活选项设为 上一个或下一个标签的 path
if (path == isTabs) {
tabs.forEach((item, index) => {
if (item.path == path) {
//找到了需要删除的菜单
//获取上一个或下一个标签
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
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)=>{
console.log("changeTabsHandle:"+ path)
//path 是标签name所设定的值，也就是需要跳转的路由地址 item.path
//设置激活选项
activeTable.value = path
localStorage.setItem("activeTab", path);
//路由跳转
router.push(path)
}
const changeTabsHandle = (path) => {
console.log("changeTabsHandle:" + path)
//path 是标签name所设定的值，也就是需要跳转的路由地址 item.path
//设置激活选项
activeTable.value = path
localStorage.setItem("activeTab", path);
//路由跳转
router.push(path)
}
//监听当前路由发生变化
onBeforeRouteUpdate((to, from) => {
// if(to.path === '/TransferArtwork'){
// window.open('/TransferArt', '_blank')
// }
//激活选中项
activeTable.value = to.path
localStorage.setItem("activeTab", activeTable.value);
addTab({
title: to.meta.title,
path: to.path
//监听当前路由发生变化
onBeforeRouteUpdate((to, from) => {
// if(to.path === '/TransferArtwork'){
// window.open('/TransferArt', '_blank')
// }
//激活选中项
activeTable.value = to.path
localStorage.setItem("activeTab", activeTable.value);
addTab({
title: to.meta.title,
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 () =>{
//function getMenus() {
await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data;
store.commit('setMenus', jobj);
});
}
await getWeather();
}
async function getData() {
await getEnterprises();
await getMenus();
}
const getMenus = async () => {
//function getMenus() {
await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data;
store.commit('setMenus', jobj);
});
}
async function getData() {
await getEnterprises();
await getMenus();
}
const logout = async() => {
//console.log('logout');
......@@ -542,72 +581,70 @@ export default defineComponent({
},
},
/**
* 销毁钩子函数
*/
destroyed() {
$this = null;
clearInterval($interval);
},
/**
* 销毁钩子函数
*/
destroyed() {
$this = null;
clearInterval($interval);
},
});
</script>
<style lang="less" scoped>
.vol-container .vol-path ::v-deep(.el-tabs__content) {
padding: 0;
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;
}
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;
margin: 0;
padding: 5px 17px;
}
.contextMenu li:hover {
background: #fafafa;
cursor: pointer;
background: #fafafa;
cursor: pointer;
}
.contextMenu li button {
color: #626060;
font-size: 14px;
letter-spacing: 1px;
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;
.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;
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;
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
}
</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