feat: 淮海水利项目综合管控升级改造项目 首页

god-ui/src/router/index.js

@@ -111,6 +111,11 @@ export const constantRoutes = [
     component: () => import('@/views/bigscreen7/index.vue'),
     hidden: true
   },
+  {
+    path: '/waterhome',
+    component: () => import('@/views/waterHome/index.vue'),
+    hidden: true
+  },
   {
     path: '',
     component: Layout,

god-ui/src/views/index.vue

@@ -8,6 +8,7 @@
     <cityManageMap v-else-if="port === '9180'" />
     <interface-home v-else-if="port === '9260'" />
     <panzhi-page v-else-if="port === '9270'" />
+    <water-home v-else-if="port === '9280'" style="width: 100%;height: calc(100vh - 84px);" />
     <construction-home v-else-if="port === '9290'" />
     <operate-home v-else-if="port === '80' || port === ''"></operate-home>
     <home-page v-else></home-page>
@@ -24,6 +25,7 @@ import cityManageMap from './cityManage/map/index.vue'
 import deviceInfo from './deviceInfo/home/index.vue'
 import interfaceHome from './interface/home/index.vue'
 import constructionHome from './constructionSiteData/analysis/index.vue'
+import waterHome from './waterHome/index.vue'
 
 export default {
   components: {
@@ -36,7 +38,8 @@ export default {
     deviceInfo,
     interfaceHome,
     PanzhiPage,
-    constructionHome
+    constructionHome,
+    waterHome
   },
   data() {
     return {

god-ui/src/views/login.vue

@@ -171,7 +171,7 @@ export default {
         case '9280':
           document.title = '淮海水利项目综合管控升级改造平台'
           loginDom.style.backgroundImage = 'url(/images/huaihai-bg.png)'
-          this.redirect = '/index'
+          this.redirect = '/waterhome'
           break;
         case '9290':
           document.title = '管仲远程视频监控平台'

god-ui/src/views/waterHome/index.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="water-home-wrapper">
+        <div class="top-water-wrapper">
+            <span class="main-title">淮海水利</span>
+            <el-button round size="mini" icon="el-icon-user" @click="logout">注销</el-button>
+        </div>
+        <div class="sub-title-wrapper">
+            <span class="sub-title">
+                淮海水利项目综合管控
+            </span>
+            <span class="wait-btn-wrapper">
+                <i class="wait-icon"></i>
+                <span class="wait-btn">我的待办</span>
+            </span>
+        </div>
+        <div class="center-content-wrapper">
+            <div class="center-content-row">
+                <div
+                    class="center-content-item icon-1"
+                    @click="$router.push('/hydraulicProject/project')"
+                >
+                    创新项目管理数据
+                </div>
+                <div
+                    class="center-content-item icon-2"
+                    @click="$router.push('/hydraulicManage')"
+                >
+                    项目实施管理数据
+                </div>
+            </div>
+            <div class="center-content-row">
+                <div
+                    class="center-content-item icon-3"
+                    @click="$router.push('/hydraulicRecord')"
+                >
+                    项目档案数据
+                </div>
+                <div
+                    class="center-content-item icon-4"
+                    @click="$router.push('/hydraulicCockpit')"
+                >
+                    管理决策驾驶舱
+                </div>
+            </div>
+        </div>
+        <div class="time-wrapper">
+            <div style="width: 18rem;">
+                <BigScreenTime />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import BigScreenTime from '@/utils/bigscreenTool/currentTime.vue'
+export default {
+    components: { BigScreenTime },
+    methods: {
+        async logout() {
+            this.$confirm('确定注销并退出系统吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$store.dispatch('LogOut').then(() => {
+                    let port = window.location.port;
+                    if (port === '9140') {
+                        location.href = '/species/home';
+                        return;
+                    }
+                    location.href = '/index';
+                })
+            });
+        },
+    }
+}
+</script>
+<style scoped lang="scss">
+@font-face {
+    font-family: 'HomeTitle';
+    src: url(../../assets/biaoti.ttf);
+}
+
+.water-home-wrapper {
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    background-image: url(./index.jpg);
+
+    .top-water-wrapper {
+        padding: 1rem 3rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .main-title {
+            font-family: 'HomeTitle';
+            font-size: 2rem;
+            background-image: linear-gradient(to right, #0000ff, rgb(183, 5, 183));
+            -webkit-background-clip: text;
+            color: transparent;
+        }
+    }
+    .sub-title-wrapper {
+        width: 90%;
+        margin-left: 5%;
+        background-color: #ffffff95;
+        padding: .8rem 1.6rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .sub-title {
+            font-family: 'HomeTitle';
+        }
+        .wait-btn-wrapper {
+            .wait-icon {}
+            .wait-btn {
+                font-size: .8rem;
+            }
+        }
+    }
+    .center-content-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - 12rem);
+        .center-content-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .center-content-item {
+                margin: 1rem;
+                width: 20rem;
+                height: 12rem;
+                background-size: 100% 100%;
+                transition: all .4s;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-family: 'HomeTitle';
+                font-size: 1.3rem;
+            }
+            .center-content-item:hover {
+                transform: scale(1.1);
+            }
+        }
+    }
+    .time-wrapper {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+
+
+@for $i from 1 through 4 {
+    .icon-#{$i} {
+        background-image: url(./assets/bg#{$i}.png);
+    }
+}
+</style>