From cb3a40b47b5309fcb4d4b0d7e1ab94263bc415a7 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: Fri, 08 Jul 2022 16:13:52 +0800
Subject: [PATCH] 添加作业申请页面组件
---
src/views/homeMenu/homeMenu.vue | 78 ++++++++++++++++++++++++---------------
1 files changed, 48 insertions(+), 30 deletions(-)
diff --git a/src/views/homeMenu/homeMenu.vue b/src/views/homeMenu/homeMenu.vue
index d6868bb..c16e22d 100644
--- a/src/views/homeMenu/homeMenu.vue
+++ b/src/views/homeMenu/homeMenu.vue
@@ -3,9 +3,9 @@
<div class="topPanel">
<div class="topPanelCont">
<div class="topTit">
- <div>新疆国泰新华安</div>
+ <div>新疆国泰新华</div>
<span></span>
- <div>全风险预警监测系统</div>
+ <div>安全风险预警监测系统</div>
</div>
<div class="userInfo">
<div class="avator">
@@ -20,22 +20,30 @@
<div class="menuGrid">
<div class="gridCont">
- <el-row :gutter="16">
- <el-col :span="6"><div class="grid-content"><div class="itemTit">安全风险综合<br>预警预报平台</div><img class="iconImg" src="../../assets/menu/icon1.png"><img class="bgImg" src="../../assets/menu/card1.png"></div></el-col>
- <el-col :span="6"><div class="grid-content"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col>
- <el-col :span="6"><div class="grid-content"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col>
- <el-col :span="6"><div class="grid-content"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col>
+ <el-row :gutter="20">
+ <el-col :span="6"><div class="grid-content" @click="renderMenu('2')"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content" @click="renderMenu('3')"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content" @click="renderMenu('4')"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col>
+ <el-col :span="6">
+ <div class="grid-content" @click="renderMenu('5')">
+ <div class="itemTit">安全风险综合
+ <br>预警预报平台
+ </div>
+ <img class="iconImg" src="../../assets/menu/icon1.png">
+ <img class="bgImg" src="../../assets/menu/card1.png">
+ </div>
+ </el-col>
</el-row>
- <el-row :gutter="16">
- <el-col :span="6"><div class="grid-content grid-content-2"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col>
- <el-col :span="6"><div class="grid-content grid-content-2"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col>
- <el-col :span="6"><div class="grid-content grid-content-2" @click="toSpecialWorkSys"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
- <el-col :span="6"><div class="grid-content grid-content-2"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col>
+ <el-row :gutter="20">
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('6')"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('7')"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('8')"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col>
+ <el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('9')"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col>
</el-row>
- <el-row :gutter="16">
- <el-col :span="6"><div class="grid-content grid-content-3"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col>
- <el-col :span="9"><div class="grid-content grid-content-3"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col>
- <el-col :span="9"><div class="grid-content grid-content-3"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col>
+ <el-row :gutter="20">
+ <el-col :span="6"><div class="grid-content grid-content-3" @click="renderMenu('10')"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col>
+ <el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('11')"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col>
+ <el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('1')"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col>
</el-row>
</div>
</div>
@@ -51,6 +59,8 @@
import { NextLoading } from '/@/utils/loading';
import {Session} from "/@/utils/storage";
import {useRoute, useRouter} from "vue-router";
+import {initBackEndControlRoutes} from "/@/router/backEnd";
+import {useUserInfo} from "/@/stores/userInfo";
// 定义接口来定义对象的类型
interface LoginState {
@@ -64,6 +74,8 @@
setup() {
const route = useRoute();
const router = useRouter();
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive<LoginState>({
@@ -78,10 +90,16 @@
const onLoginOut = () => {
console.log('退出登录')
};
- //点击进入特殊作业
- const toSpecialWorkSys = () => {
- router.push('/workReservation');
+ const renderMenu = async (value: string) => {
+ Session.set('projectId',value)
+ userInfos.value.projectId = value
+ await initBackEndControlRoutes();
+ router.push('/home')
};
+ // //点击进入特殊作业
+ // const toSpecialWorkSys = () => {
+ // router.push('/layoutPage');
+ // };
// 页面加载时
onMounted(() => {
NextLoading.done();
@@ -92,7 +110,7 @@
logoMini,
loginIconTwo,
getThemeConfig,
- toSpecialWorkSys,
+ renderMenu,
...toRefs(state),
};
},
@@ -104,7 +122,7 @@
width: 100%;
height: 100%;
position: relative;
- background: url("../../assets/menu/bg_home.jpg") no-repeat center;
+ background: url("../../assets/menu/bg_home1.jpg") no-repeat center;
.topPanel{
position: absolute;
width: 100%;
@@ -199,7 +217,7 @@
.gridCont{
width: 1200px;
.el-row {
- margin-bottom: 16px;
+ margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
@@ -209,11 +227,11 @@
}
.grid-content {
- border-radius: 8px;
+ border-radius: 10px;
height: 234px;
padding: 32px;
position: relative;
- background-image: linear-gradient(135deg,#00C0F5,#147AEA);
+ background-image: linear-gradient(135deg,#00C0F5,#44b1ff);
overflow: hidden;
cursor: pointer;
transition: .3s;
@@ -244,13 +262,13 @@
}
}
- .grid-content-2{
- background-image: linear-gradient(135deg,#0098F5,#1461EA);
- }
+ /*.grid-content-2{*/
+ /* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
+ /*}*/
- .grid-content-3{
- background-image: linear-gradient(135deg,#006DF5,#1450EA);
- }
+ /*.grid-content-3{*/
+ /* background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
+ /*}*/
}
}
--
Gitblit v1.9.2