From be79ce19df6ea881de516ae0b44bfe527e90e736 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 29 六月 2022 19:37:24 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut
---
src/views/homeMenu/homeMenu.vue | 277 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 277 insertions(+), 0 deletions(-)
diff --git a/src/views/homeMenu/homeMenu.vue b/src/views/homeMenu/homeMenu.vue
new file mode 100644
index 0000000..79c6862
--- /dev/null
+++ b/src/views/homeMenu/homeMenu.vue
@@ -0,0 +1,277 @@
+<template>
+ <div class="login-container">
+ <div class="topPanel">
+ <div class="topPanelCont">
+ <div class="topTit">
+ <div>新疆国泰新华安</div>
+ <span></span>
+ <div>全风险预警监测系统</div>
+ </div>
+ <div class="userInfo">
+ <div class="avator">
+ <img src="../../assets/menu/admin.png">
+ <div>admin</div>
+ </div>
+ <span></span>
+ <div class="loginOut" @click="onLoginOut">退出登录</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="menuGrid">
+ <div class="gridCont">
+ <el-row :gutter="16">
+ <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" @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" @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>
+ </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import logoMini from '/@/assets/logo-mini.svg';
+import loginIconTwo from '/@/assets/login-icon-two.svg';
+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 {
+ tabsActiveName: string;
+ isScan: boolean;
+}
+
+export default defineComponent({
+ name: 'loginIndex',
+ components: {},
+ 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>({
+ tabsActiveName: 'account',
+ isScan: false,
+ });
+ // 获取布局配置信息
+ const getThemeConfig = computed(() => {
+ return themeConfig.value;
+ });
+ // 下拉菜单点击时
+ const onLoginOut = () => {
+ console.log('退出登录')
+ };
+ const renderMenu = async (value: string) => {
+ Session.set('projectId',value)
+ userInfos.value.projectId = value
+ await initBackEndControlRoutes();
+ router.push('./')
+ };
+ //点击进入特殊作业
+ const toSpecialWorkSys = () => {
+ router.push('/workReservation');
+ };
+ // 页面加载时
+ onMounted(() => {
+ NextLoading.done();
+ // loginBg();
+ // loginApp()
+ });
+ return {
+ logoMini,
+ loginIconTwo,
+ getThemeConfig,
+ renderMenu,
+ toSpecialWorkSys,
+ ...toRefs(state),
+ };
+ },
+});
+</script>
+
+<style scoped lang="scss">
+.login-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ background: url("../../assets/menu/bg_home.jpg") no-repeat center;
+ .topPanel{
+ position: absolute;
+ width: 100%;
+ top: -100px;
+ left: 0;
+ height:100px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ box-shadow: 0 8px 32px rgba(0,0,0,.1);
+ animation: showDown .6s 1 ease forwards;
+
+ @keyframes showDown {
+ 100%{
+ position: absolute;
+ top: 0;
+ }
+ }
+ .topPanelCont{
+ width: 1200px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .topTit{
+ font-size: 24px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ color: #333;
+ line-height: 28px;
+
+ &>div:last-of-type{
+ color: #006DF5;
+ }
+
+ span{
+ width: 1px;
+ height: 28px;
+ background: #999;
+ margin: 0 15px;
+ }
+ }
+
+ .userInfo{
+ display: flex;
+ align-items: center;
+
+ .avator{
+ display: flex;
+ justify-content: right;
+
+ img{
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ }
+ div{
+ font-size: 15px;
+ color: #333333;
+ line-height: 20px;
+ margin-left: 6px;
+ }
+ }
+ span{
+ width: 1px;
+ height: 20px;
+ background: #999;
+ margin: 0 15px;
+ }
+ .loginOut{
+ font-size: 15px;
+ color: #333;
+ line-height: 20px;
+ cursor: pointer;
+
+ &:hover{
+ color: #006DF5;
+ }
+ }
+ }
+ }
+ }
+
+ .menuGrid{
+ width: 100%;
+ position: absolute;
+ top: 150px;
+ display: flex;
+ justify-content: center;
+ .gridCont{
+ width: 1200px;
+ .el-row {
+ margin-bottom: 16px;
+ }
+ .el-row:last-child {
+ margin-bottom: 0;
+ }
+ .el-col {
+ border-radius: 8px;
+ }
+
+ .grid-content {
+ border-radius: 8px;
+ height: 234px;
+ padding: 32px;
+ position: relative;
+ background-image: linear-gradient(135deg,#00C0F5,#147AEA);
+ overflow: hidden;
+ cursor: pointer;
+ transition: .3s;
+ border: none;
+
+ &:hover{
+ box-shadow: 0 8px 32px rgba(20,97,234,.4);
+ }
+
+ .itemTit{
+ font-size: 24px;
+ line-height: 36px;
+ height: 40%;
+ font-family: "PingFang SC";
+ font-weight: lighter;
+ color: #fff;
+ margin-bottom: 25px;
+ }
+ .iconImg{
+ width: 80px;
+ height: 80px;
+ }
+
+ .bgImg{
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+ }
+
+ .grid-content-2{
+ background-image: linear-gradient(135deg,#0098F5,#1461EA);
+ }
+
+ .grid-content-3{
+ background-image: linear-gradient(135deg,#006DF5,#1450EA);
+ }
+ }
+
+ }
+}
+</style>
--
Gitblit v1.9.2