Skip to content

W
web-project
Commit 60f70b9c authored by jiaxu.yan's avatar jiaxu.yan
Browse files
Options

feat: 修改home页面的展示错误

parent 140f5795
Show whitespace changes
Inline Side-by-side
Showing with 845 additions and 690 deletions
src/directive/dataSource.js 0 → 100644
View file @ 60f70b9c
import { ref } from "vue";
import http from "@/api/http";
let api = ref("");
let source = ref([]);
let total = ref(0);
const getData = (params = {}) => {
http.get(api.value, params).then((res) => {
source.value = res.data;
console.log(source.value);
});
};
export default {
install(app) {
app.directive("dataSource", {
mounted(el, binding) {
api.value = binding.value;
getData();
},
updated(el, binding) {
console.log("updated");
},
});
},
};
export { source, total, getData };
src/views/home.vue
View file @ 60f70b9c
...@@ -2,13 +2,32 @@ ...@@ -2,13 +2,32 @@
<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', paddingTop: 10 + 'px' }" <img
v-show="!$store.state.iscollapse" v-bind:src="amslogo" /> :style="{
<i @click="toggleLeft" class="collapse-menu" :style="{ width: 38 + 'px' }"> height: amslogo_style.height + 'px',
<el-icon v-if="!$store.state.iscollapse" size="20" style="vertical-align: middle"> width: amslogo_style.width + 'px',
paddingTop: 10 + '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 /> <Fold />
</el-icon> </el-icon>
<el-icon v-if="$store.state.iscollapse" size="20" style="vertical-align: middle"> <el-icon
v-if="$store.state.iscollapse"
size="20"
style="vertical-align: middle"
>
<Expand /> <Expand />
</el-icon> </el-icon>
</i> </i>
...@@ -18,64 +37,128 @@ ...@@ -18,64 +37,128 @@
</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: rgb(31, 63, 141);"> <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
@command="handleCommand" :trigger="(roleId > 2) ? 'contextmenu' : 'hover'"> size="'large'"
style="margin-left: 10px; margin-top: 5px; color: blue; width: 100%"
@command="handleCommand"
:trigger="roleId > 2 ? 'contextmenu' : 'hover'"
>
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<el-image style="padding-top:10px ; height: 40px " :src="currLogoUrl" :fit="'full'" /> <el-image
style="padding-top: 10px; height: 40px"
:src="currLogoUrl"
:fit="'full'"
/>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item style="font-size: 20px;" v-for="item in enterpriseList" <el-dropdown-item
:key="item.enterpriseName" :command="item.enterpriseName">{{ item.enterpriseName style="font-size: 20px"
}}</el-dropdown-item> v-for="item in enterpriseList"
:key="item.enterpriseName"
:command="item.enterpriseName"
>{{ item.enterpriseName }}</el-dropdown-item
>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<div class="header-weather" id=""> <div class="header-weather" id="">
<el-row style="left: 20%;widows: 60px;width: 80%;"> <el-row style="left: 20%; widows: 60px; width: 80%">
<el-col :span="4" style=""> <el-col :span="4" style="">
<div class="div-contain-titleAndText"> <div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" <el-image
src="/imgs/home/wendu.png" :fit="'fill'" /> style="
padding-top: 20px;
width: 30px;
height: 30px;
margin-right: 3px;
"
src="/imgs/home/wendu.png"
:fit="'fill'"
/>
<div> <div>
<div class="div-contain-title"> 室外温度</div> <div class="div-contain-title">室外温度</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature + '℃' }} <div class="div-contain-text-big">
{{
showWeatherData.weatherData
? showWeatherData.weatherData.temperature + "℃"
: "-"
}}
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<div class="div-contain-titleAndText" style="padding-left: 15px;"> <div class="div-contain-titleAndText" style="padding-left: 15px">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" <el-image
src="/imgs/home/guang.png" :fit="'fill'" /> style="
padding-top: 20px;
width: 30px;
height: 30px;
margin-right: 3px;
"
src="/imgs/home/guang.png"
:fit="'fill'"
/>
<div> <div>
<div class="div-contain-title">光照强度</div> <div class="div-contain-title">光照强度</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }} <div class="div-contain-text-big">
{{
showWeatherData.weatherData
? showWeatherData.weatherData.illumination
: ""
}}
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<div class="div-contain-titleAndText"> <div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" <el-image
src="/imgs/home/feng.png" :fit="'fill'" /> style="
padding-top: 20px;
width: 30px;
height: 30px;
margin-right: 3px;
"
src="/imgs/home/feng.png"
:fit="'fill'"
/>
<div> <div>
<div class="div-contain-title">风力等级</div> <div class="div-contain-title">风力等级</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.wind }}</div> <div class="div-contain-text-big">
{{
showWeatherData.weatherData
? showWeatherData.weatherData.wind
: ""
}}
</div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<div class="div-contain-titleAndText"> <div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" <el-image
src="/imgs/home/fengxiang.png" :fit="'fill'" /> style="
padding-top: 20px;
width: 30px;
height: 30px;
margin-right: 3px;
"
src="/imgs/home/fengxiang.png"
:fit="'fill'"
/>
<div> <div>
<div class="div-contain-title">风向</div> <div class="div-contain-title">风向</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }} <div class="div-contain-text-big">
{{
showWeatherData.weatherData
? showWeatherData.weatherData.windDirection
: ""
}}
</div> </div>
</div> </div>
</div> </div>
...@@ -83,11 +166,26 @@ ...@@ -83,11 +166,26 @@
<el-col :span="5"> <el-col :span="5">
<div class="div-contain-titleAndText"> <div class="div-contain-titleAndText">
<el-image <el-image
style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px; min-width: 30px;min-height: 30px;" style="
src="/imgs/home/time.png" :fit="'scale-down'" /> padding-top: 20px;
width: 30px;
height: 30px;
margin-right: 3px;
min-width: 30px;
min-height: 30px;
"
src="/imgs/home/time.png"
:fit="'scale-down'"
/>
<div> <div>
<div class="div-contain-title" style="">气象时间</div> <div class="div-contain-title" style="">气象时间</div>
<div class="div-contain-text-small" style="line-height: 15px;">{{showWeatherData.weatherData.gatherTime}}</div> <div class="div-contain-text-small" style="line-height: 15px">
{{
showWeatherData.weatherData
? showWeatherData.weatherData.gatherTime
: ""
}}
</div>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -96,22 +194,21 @@ ...@@ -96,22 +194,21 @@
<div class="header-info"> <div class="header-info">
<div class="h-link"> <div class="h-link">
<a href="javascript:void(0)" @click="openMap" title="可视化界面"> <a href="javascript:void(0)" @click="openMap" title="可视化界面">
<el-icon style="fontSize:30px;"> <el-icon style="fontsize: 30px">
<MapLocation color="rgb(255,255,255)"/> <MapLocation color="rgb(255,255,255)" />
</el-icon> </el-icon>
</a> </a>
</div> </div>
<div class="h-link" > <div class="h-link">
<a href="javascript:void(0)" :title="realName"> <a href="javascript:void(0)" :title="realName">
<el-icon style="fontSize:25px;"> <el-icon style="fontsize: 25px">
<UserFilled color="rgb(161,187,214)"/> <UserFilled color="rgb(161,187,214)" />
</el-icon> </el-icon>
</a> </a>
</div> </div>
<div class="h-link" > <div class="h-link">
<a href="javascript:void(0)" title="系统设置"> <a href="javascript:void(0)" title="系统设置">
<el-icon style="fontSize:25px;"> <el-icon style="fontsize: 25px">
<!-- <el-image src="/imgs/home/Sys.png" :fit="'fill'" /> --> <!-- <el-image src="/imgs/home/Sys.png" :fit="'fill'" /> -->
<Setting color="rgb(255,255,255)" /> <Setting color="rgb(255,255,255)" />
</el-icon> </el-icon>
...@@ -119,7 +216,7 @@ ...@@ -119,7 +216,7 @@
</div> </div>
<div class="h-link"> <div class="h-link">
<a href="javascript:void(0)" @click="logout" title="退出系统"> <a href="javascript:void(0)" @click="logout" title="退出系统">
<el-icon style="fontSize:25px;"> <el-icon style="fontsize: 25px">
<!-- <el-image src="/imgs/home/exit.png" :fit="'fill'" /> --> <!-- <el-image src="/imgs/home/exit.png" :fit="'fill'" /> -->
<SwitchButton color="rgb(255,255,255)" /> <SwitchButton color="rgb(255,255,255)" />
</el-icon> </el-icon>
...@@ -129,18 +226,29 @@ ...@@ -129,18 +226,29 @@
</div> </div>
<div class="ams-main"> <div class="ams-main">
<div> <div>
<el-tabs v-model="activeTable" type="border-card" class="demo-tabs mytab" @tab-remove="removeTab" <el-tabs
@tab-change="changeTabsHandle"> v-model="activeTable"
<el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs" type="border-card"
:key="item.path" :label="item.title" :name="item.path"> 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> </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 ref="componentView" :is="Component"></component> <component ref="componentView" :is="Component"></component>
...@@ -164,31 +272,30 @@ ...@@ -164,31 +272,30 @@
height: 46px; height: 46px;
} }
::v-deep .el-tabs--border-card>.el-tabs__header { ::v-deep .el-tabs--border-card > .el-tabs__header {
background-color: transparent; background-color: transparent;
border-bottom: none; border-bottom: none;
} }
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item { ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
margin-left: 8px; margin-left: 8px;
margin-top: 5px; margin-top: 5px;
border: none; border: none;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
background-color: #F3F7FE; background-color: #f3f7fe;
padding: 4px 20px; padding: 4px 20px;
color: #0065D5; color: #0065d5;
line-height: 22px; line-height: 22px;
height: 40px; height: 40px;
} }
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active { ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
background-color: #0065D5; background-color: #0065d5;
color: #ffffff; color: #ffffff;
} }
</style> </style>
<script lang="ts"> <script lang="ts">
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";
...@@ -198,22 +305,21 @@ import { ...@@ -198,22 +305,21 @@ import {
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,
SwitchButton, SwitchButton,
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 { ElNotification } from 'element-plus' import { ElNotification } from "element-plus";
//import {RoleEnum} from '../utils/enumData'; //import {RoleEnum} from '../utils/enumData';
var $this; var $this;
...@@ -222,7 +328,7 @@ var $interval; ...@@ -222,7 +328,7 @@ var $interval;
const enterpriseId = ref(); const enterpriseId = ref();
const componentView = ref(null); const componentView = ref(null);
localStorage.setItem('tabWidth',''); localStorage.setItem("tabWidth", "");
export default defineComponent({ export default defineComponent({
components: { components: {
...@@ -283,28 +389,29 @@ export default defineComponent({ ...@@ -283,28 +389,29 @@ export default defineComponent({
const router = useRouter(); const router = useRouter();
let _config = getCurrentInstance()!.appContext.config.globalProperties; let _config = getCurrentInstance()!.appContext.config.globalProperties;
var amslogo_url = new URL('/imgs/home/LOGO_index.png', import.meta.url).href; var amslogo_url = new URL("/imgs/home/LOGO_index.png", import.meta.url)
.href;
const amslogo = ref(amslogo_url); const amslogo = ref(amslogo_url);
var currLogoUrl = new URL('/imgs/home/PLATFORM.png', import.meta.url).href; 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 backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
var amslogo_style = reactive({ height: 40, width: 150 }); var amslogo_style = reactive({ height: 40, width: 150 });
//控制左侧导航菜单的展开和隐藏 //控制左侧导航菜单的展开和隐藏
const toggleLeft = async () => { const toggleLeft = async () => {
store.commit('setAsideWidth'); store.commit("setAsideWidth");
menuWidth.value = store.state.iscollapse ? 63 : 200; menuWidth.value = store.state.iscollapse ? 63 : 200;
amslogo_style.height = store.state.iscollapse ? 12 : 40; amslogo_style.height = store.state.iscollapse ? 12 : 40;
amslogo_style.width = store.state.iscollapse ? 40 : 150; amslogo_style.width = store.state.iscollapse ? 40 : 150;
mainWidth.value = window.innerWidth - menuWidth.value; mainWidth.value = window.innerWidth - menuWidth.value;
await EventBus.emit('changeValue', mainWidth.value); await EventBus.emit("changeValue", mainWidth.value);
localStorage.setItem('tabWidth',menuWidth.value); localStorage.setItem("tabWidth", menuWidth.value);
console.log('触发') console.log("触发");
// console.log(proxy.$refs.componentView); // console.log(proxy.$refs.componentView);
// console.log(proxy.$refs.componentView.resizeVideo); // console.log(proxy.$refs.componentView.resizeVideo);
if(proxy.$refs.componentView && proxy.$refs.componentView.showPlay){ if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) {
proxy.$refs.componentView.showPlay(); proxy.$refs.componentView.showPlay();
} }
} };
//开放手动折叠菜单方法 //开放手动折叠菜单方法
_config.menu = { _config.menu = {
...@@ -318,7 +425,9 @@ export default defineComponent({ ...@@ -318,7 +425,9 @@ export default defineComponent({
const created = () => { const created = () => {
mainHeight.value = window.innerHeight - 120; mainHeight.value = window.innerHeight - 120;
mainWidth.value = store.state.iscollapse ? window.innerWidth - 63 : window.innerWidth - 200; mainWidth.value = store.state.iscollapse
? window.innerWidth - 63
: window.innerWidth - 200;
let _userInfo = store.getters.getUserInfo(); let _userInfo = store.getters.getUserInfo();
if (_userInfo) { if (_userInfo) {
...@@ -330,58 +439,63 @@ export default defineComponent({ ...@@ -330,58 +439,63 @@ export default defineComponent({
//气象信息更新计时器 //气象信息更新计时器
getWeather(); getWeather();
}, 60000); // 每分钟执行一次 }, 60000); // 每分钟执行一次
} };
created(); created();
onBeforeMount(async () => { onBeforeMount(async () => {
// 在组件即将挂载之前加载数据 // 在组件即将挂载之前加载数据
await getData(); await getData();
}); });
const getWeather = async () => { const getWeather = async () => {
var result = await http.post("/api/weather/Real/", showWeatherData.supplyData.supplyId); var result = await http.post(
var temp = result.data "/api/weather/Real/",
showWeatherData.supplyData.supplyId
);
var temp = result.data;
var tempWeatherData = toRefs(showWeatherData); var tempWeatherData = toRefs(showWeatherData);
tempWeatherData.weatherData.value = temp; tempWeatherData.weatherData.value = temp;
} };
//企业选择函数 //企业选择函数
const handleCommand = (command: string | number | object) => { const handleCommand = (command: string | number | object) => {
showenterpriseName.value = command.toString(); showenterpriseName.value = command.toString();
} };
//const enterpriseId = ref(""); //const enterpriseId = ref("");
var enterpriseList = ref([{ var enterpriseList = ref([
"enterpriseId": "", {
"enterpriseName": "", enterpriseId: "",
"logo": "", enterpriseName: "",
"orderNum": 0, logo: "",
"supplyList": [{ orderNum: 0,
"supplyId": "", supplyList: [
"supplyName": "", {
"orderNum": 0 supplyId: "",
} supplyName: "",
] orderNum: 0,
}]); },
],
},
]);
//展示的企业名称 //展示的企业名称
var showenterpriseName = ref('天津市爱默森电气科技有限公司'); var showenterpriseName = ref("天津市爱默森电气科技有限公司");
//展示的气象的信息 //展示的气象的信息
var showWeatherData = reactive({ var showWeatherData = reactive({
supplyData: { supplyData: {
supplyId: "", supplyId: "",
supplyName: "" supplyName: "",
}, },
weatherData: { weatherData: {
"weatherId": "", weatherId: "",
"temperature": '-', temperature: "-",
"wind": '-', wind: "-",
"illumination": '-', illumination: "-",
"windDirection": "-", windDirection: "-",
"humidity": '-', humidity: "-",
"gatherTime": "-" gatherTime: "-",
} },
}) });
//标签 //标签
// const editableTabsValue = ref('1') // const editableTabsValue = ref('1')
...@@ -389,10 +503,10 @@ export default defineComponent({ ...@@ -389,10 +503,10 @@ export default defineComponent({
const activeTable = ref(route.path); const activeTable = ref(route.path);
const editableTabs = ref([ const editableTabs = ref([
{ {
title: '首页-实时热源', title: "首页-实时热源",
path: '/RealSupply', path: "/RealSupply",
} },
]) ]);
//初始化标签导航 //初始化标签导航
//初始化标签导航列表 //初始化标签导航列表
...@@ -402,28 +516,31 @@ export default defineComponent({ ...@@ -402,28 +516,31 @@ export default defineComponent({
istabList = null; istabList = null;
} }
if (istabList) { if (istabList) {
editableTabs.value = istabList editableTabs.value = istabList;
} }
activeTable.value = localStorage.getItem("activeTab")!; activeTable.value = localStorage.getItem("activeTab")!;
if (activeTable.value) { if (activeTable.value) {
router.push(activeTable.value) router.push(activeTable.value);
} else { } else {
router.push("/RealSupply") router.push("/RealSupply");
activeTable.value = "/RealSupply" activeTable.value = "/RealSupply";
} }
} }
initTabList(); initTabList();
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中 //todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数 //标签添加函数
function addTab(item) { function addTab(item) {
const notTab = editableTabs.value.findIndex(obj => obj.path == item.path) == -1; const notTab =
editableTabs.value.findIndex((obj) => obj.path == item.path) == -1;
if (notTab) { if (notTab) {
editableTabs.value.push(item) editableTabs.value.push(item);
//本地存储 //本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(editableTabs.value)) window.sessionStorage.setItem(
"tabList",
JSON.stringify(editableTabs.value)
);
} }
} }
...@@ -438,33 +555,38 @@ export default defineComponent({ ...@@ -438,33 +555,38 @@ export default defineComponent({
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 activeTable.value = isTabs;
localStorage.setItem("activeTab", isTabs); localStorage.setItem("activeTab", isTabs);
//从editableTabs数组删除选中的菜单 //从editableTabs数组删除选中的菜单
//filter是过滤，生成新数组 //filter是过滤，生成新数组
editableTabs.value = editableTabs.value.filter(item => item.path != path) editableTabs.value = editableTabs.value.filter(
(item) => item.path != path
);
//重新设定本地存储 //重新设定本地存储
window.sessionStorage.setItem("tabList", JSON.stringify(activeTable.value)) window.sessionStorage.setItem(
"tabList",
JSON.stringify(activeTable.value)
);
//路由跳转 //路由跳转
router.push(isTabs) 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) => {
...@@ -473,39 +595,47 @@ export default defineComponent({ ...@@ -473,39 +595,47 @@ export default defineComponent({
// } // }
//激活选中项 //激活选中项
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 () => { const getEnterprises = async () => {
enterpriseList.value = store.getters.getEnterprise(); enterpriseList.value = store.getters.getEnterprise();
//console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId); //console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId);
showenterpriseName.value = enterpriseList.value[0].enterpriseName; showenterpriseName.value = enterpriseList.value[0].enterpriseName;
if (enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司") { if (
showWeatherData.supplyData.supplyId = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId; enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司"
showWeatherData.supplyData.supplyName = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName; ) {
showWeatherData.supplyData.supplyId =
enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName =
enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName;
} else { } else {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].supplyList[0].supplyId; showWeatherData.supplyData.supplyId =
showWeatherData.supplyData.supplyName = enterpriseList.value[0].supplyList[0].supplyName; enterpriseList.value[0].supplyList[0].supplyId;
} showWeatherData.supplyData.supplyName =
currLogoUrl = new URL('/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href; enterpriseList.value[0].supplyList[0].supplyName;
}
currLogoUrl = new URL(
"/imgs/home/" + enterpriseList.value[0].logo,
import.meta.url
).href;
//console.log(currLogoUrl); //console.log(currLogoUrl);
await getWeather(); await getWeather();
} };
const getMenus = async () => { const getMenus = async () => {
//function getMenus() { //function getMenus() {
await http.post("/api/menu/GetCurrentMenu/").then((response) => { await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data; var jobj = response.data;
store.commit('setMenus', jobj); store.commit("setMenus", jobj);
}); });
} };
async function getData() { async function getData() {
await getEnterprises(); await getEnterprises();
...@@ -518,18 +648,14 @@ export default defineComponent({ ...@@ -518,18 +648,14 @@ export default defineComponent({
proxy.$refs.componentView.hidePlay(); proxy.$refs.componentView.hidePlay();
} }
//console.log('logout'); //console.log('logout');
const res = await ElMessageBox.confirm( const res = await ElMessageBox.confirm("是否退出登录？", "提示", {
'是否退出登录？', confirmButtonText: "确定",
'提示', cancelButtonText: "取消",
{ type: "warning",
confirmButtonText: '确定', }).catch((err) => {
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => {
return err; return err;
}) });
if (res == 'confirm') { if (res == "confirm") {
store.commit("clearUserInfo", ""); store.commit("clearUserInfo", "");
router.push({ path: "/login" }); router.push({ path: "/login" });
} else { } else {
...@@ -538,12 +664,11 @@ export default defineComponent({ ...@@ -538,12 +664,11 @@ export default defineComponent({
proxy.$refs.componentView.showPlay(); proxy.$refs.componentView.showPlay();
} }
} }
} };
function enterMenu(){ function enterMenu() {
var menuWidth=localStorage.getItem("tabWidth"); var menuWidth = localStorage.getItem("tabWidth");
if(menuWidth && menuWidth === '63'){ if (menuWidth && menuWidth === "63") {
// console.log('e'); // console.log('e');
//隐藏视频插件 //隐藏视频插件
if (proxy.$refs.componentView && proxy.$refs.componentView.hidePlay) { if (proxy.$refs.componentView && proxy.$refs.componentView.hidePlay) {
...@@ -552,9 +677,9 @@ export default defineComponent({ ...@@ -552,9 +677,9 @@ export default defineComponent({
} }
} }
function leaveMenu(){ function leaveMenu() {
var menuWidth=localStorage.getItem("tabWidth"); var menuWidth = localStorage.getItem("tabWidth");
if(menuWidth && menuWidth === '63'){ if (menuWidth && menuWidth === "63") {
// console.log('l'); // console.log('l');
//重置视频插件位置 //重置视频插件位置
if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) { if (proxy.$refs.componentView && proxy.$refs.componentView.showPlay) {
...@@ -563,9 +688,9 @@ export default defineComponent({ ...@@ -563,9 +688,9 @@ export default defineComponent({
} }
} }
function openMap(){ function openMap() {
const routePath = '/GisHome'; // 要导航到的路由路径 const routePath = "/GisHome"; // 要导航到的路由路径
router.push({ path: routePath}); router.push({ path: routePath });
// // 打开新窗口并导航到指定路由 // // 打开新窗口并导航到指定路由
// window.open( // window.open(
// `${routePath}`, // `${routePath}`,
...@@ -586,27 +711,29 @@ export default defineComponent({ ...@@ -586,27 +711,29 @@ export default defineComponent({
const sta = ref(0); const sta = ref(0);
const consta = ref(0); const consta = ref(0);
//获取用户信息 //获取用户信息
function getuser(){ function getuser() {
var user = store.getters.getUserInfo(); var user = store.getters.getUserInfo();
if(user){ if (user) {
enterpriseId.value = user.enterpriseId; enterpriseId.value = user.enterpriseId;
userId.value = user.userId; userId.value = user.userId;
roleIds.value = user.roleId; roleIds.value = user.roleId;
} }
} }
const AlarmInfo = ref({}); const AlarmInfo = ref({});
function getinfo(){ function getinfo() {
AlarmInfo.value = { AlarmInfo.value = {
"enterpriseId": enterpriseId.value, enterpriseId: enterpriseId.value,
"UserId": userId.value, UserId: userId.value,
"RoleId": roleIds.value RoleId: roleIds.value,
}; };
} }
function alarm(){ function alarm() {
http.post("/api/alarm/GetAlarmMsg", AlarmInfo.value).then((result) => { http
if(result.data !== null && sta.value === 0){ .post("/api/alarm/GetAlarmMsg", AlarmInfo.value, false)
console.log(result) .then((result) => {
if (result.data !== null && sta.value === 0) {
console.log(result);
sta.value = 1; sta.value = 1;
title.value = result.data[0].title; title.value = result.data[0].title;
msg.value = result.data[0].msg; msg.value = result.data[0].msg;
...@@ -614,32 +741,33 @@ export default defineComponent({ ...@@ -614,32 +741,33 @@ export default defineComponent({
ElNotification({ ElNotification({
title: title.value, title: title.value,
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
message: msg.value.replace('\n','<br />'), message: msg.value.replace("\n", "<br />"),
position: 'bottom-right', position: "bottom-right",
type: 'error', type: "error",
duration: 0, duration: 0,
onClick() { onClick() {
activeTable.value = '/Video' activeTable.value = "/Video";
localStorage.setItem("activeTab", '/Video'); localStorage.setItem("activeTab", "/Video");
//路由跳转 //路由跳转
this.$router.push({ //如果要是用 name 传参 就直接 携带一个 query 对象中包含参数 this.$router.push({
//如果要是用 name 传参 就直接 携带一个 query 对象中包含参数
path: "/Video", path: "/Video",
query:{ query: {
id:id.value id: id.value,
} },
}); });
}, },
onClose() { onClose() {
sta.value = 0; sta.value = 0;
}, },
}) });
} }
}); });
} }
function countalarm(){ function countalarm() {
http.post("/api/alarm/GetAlarmMsg", AlarmInfo.value).then((result) => { http.post("/api/alarm/GetAlarmMsg", AlarmInfo.value).then((result) => {
if(result.data !== null && consta.value === 0){ if (result.data !== null && consta.value === 0) {
console.log(result) console.log(result);
consta.value = 1; consta.value = 1;
counttitle.value = result.data[1].title; counttitle.value = result.data[1].title;
countmsg.value = result.data[1].msg; countmsg.value = result.data[1].msg;
...@@ -647,36 +775,36 @@ export default defineComponent({ ...@@ -647,36 +775,36 @@ export default defineComponent({
ElNotification({ ElNotification({
title: counttitle.value, title: counttitle.value,
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
message: countmsg.value.replace('\n','<br />'), message: countmsg.value.replace("\n", "<br />"),
position: 'bottom-right', position: "bottom-right",
type: 'error', type: "error",
duration: 0, duration: 0,
onClick() { onClick() {
activeTable.value = '/Video' activeTable.value = "/Video";
localStorage.setItem("activeTab", '/Video'); localStorage.setItem("activeTab", "/Video");
//路由跳转 //路由跳转
this.$router.push({ //如果要是用 name 传参 就直接 携带一个 query 对象中包含参数 this.$router.push({
//如果要是用 name 传参 就直接 携带一个 query 对象中包含参数
path: "/Video", path: "/Video",
query:{ query: {
id:countid.value id: countid.value,
} },
}); });
}, },
onClose() { onClose() {
consta.value = 0; consta.value = 0;
}, },
}) });
} }
}); });
} }
setInterval(() => { setInterval(() => {
getuser() getuser();
getinfo(); getinfo();
alarm(); alarm();
countalarm(); countalarm();
}, 10 * 1000); // 每分钟执行一次 }, 10 * 1000); // 每分钟执行一次
return { return {
menuWidth, menuWidth,
mainHeight, mainHeight,
...@@ -707,7 +835,7 @@ export default defineComponent({ ...@@ -707,7 +835,7 @@ export default defineComponent({
logout, logout,
openMap, openMap,
enterMenu, enterMenu,
leaveMenu leaveMenu,
//enterpriseId //enterpriseId
}; };
}, },
...@@ -741,8 +869,6 @@ export default defineComponent({ ...@@ -741,8 +869,6 @@ export default defineComponent({
clearInterval($interval); clearInterval($interval);
}, },
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -786,8 +912,12 @@ export default defineComponent({ ...@@ -786,8 +912,12 @@ export default defineComponent({
letter-spacing: 1px; letter-spacing: 1px;
} }
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child, .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) { > .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; padding: 0;
} }
......
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