From 33802d74d2720e86c406f5ca9531ac9435b9ddd2 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 02 八月 2022 09:09:48 +0800
Subject: [PATCH] lct
---
src/views/home/index.vue | 193 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 193 insertions(+), 0 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..4a6a8fd
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,193 @@
+<template>
+ <div class="home-container">
+ <el-row :gutter="15" class="home-card-one mb15">
+ <el-col
+ :xs="24"
+ :sm="12"
+ :md="12"
+ :lg="4"
+ :xl="4"
+ v-for="(v, k) in homeOne"
+ :key="k"
+ :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
+ >
+ <div class="home-card-item flex">
+ <el-button @click="renderMenu(v.id)">{{ v.name }}</el-button>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="15" class="home-card-two mb15">
+ <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
+ <div class="home-card-item">
+ <div style="height: 100%">
+ <el-button @click="renderMenu('6')">{{ '应急管理系统' }}</el-button>
+ </div>
+ </div>
+ </el-col>
+ <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
+ <div class="home-card-item">
+ <div style="height: 100%">
+ <el-button @click="renderMenu('7')">{{ '目标责任管理系统' }}</el-button>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="15" class="home-card-three">
+ <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
+ <div class="home-card-item">
+ <el-button @click="renderMenu('8')">{{ '事故管理系统' }}</el-button>
+ </div>
+ </el-col>
+ <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
+ <div class="home-card-item">
+ <div style="height: 100%">
+ <el-button @click="renderMenu('9')">{{ '设备综合管控系统' }}</el-button>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { initBackEndControlRoutes } from '/@/router/backEnd';
+import { useUserInfo } from '/@/stores/userInfo';
+import { Session } from '/@/utils/storage';
+import { NextLoading } from '/@/utils/loading';
+let global: any = {
+ homeChartOne: null,
+ homeChartTwo: null,
+ homeCharThree: null,
+ dispose: [null, '', undefined]
+};
+
+interface stateType {
+ homeOne: Array<type>;
+}
+interface type {
+ id: number;
+ name: string;
+}
+export default defineComponent({
+ name: 'home',
+ setup() {
+ const userInfo = useUserInfo();
+ const { userInfos } = storeToRefs(userInfo);
+ const state = reactive<stateType>({
+ homeOne: [
+ { id: 1, name: '基础数据权限管理系统' },
+ { id: 2, name: '双重预防系统' },
+ { id: 3, name: '系统2' },
+ { id: 4, name: '系统3' },
+ { id: 5, name: '系统4' }
+ ]
+ });
+ // 折线图
+ const renderMenu = async (value: string) => {
+ Session.set('projectId', value);
+ userInfos.value.projectId = value;
+ await initBackEndControlRoutes();
+ };
+ onMounted(() => {
+ // loginBg();
+ // loginApp()
+ });
+ return {
+ renderMenu,
+ ...toRefs(state)
+ };
+ }
+});
+</script>
+
+<style scoped lang="scss">
+$homeNavLengh: 8;
+.home-container {
+ overflow: hidden;
+ .home-card-one,
+ .home-card-two,
+ .home-card-three {
+ .home-card-item {
+ width: 100%;
+ height: 130px;
+ border-radius: 4px;
+ transition: all ease 0.3s;
+ padding: 20px;
+ overflow: hidden;
+ background: var(--el-color-white);
+ color: var(--el-text-color-primary);
+ border: 1px solid var(--next-border-color-light);
+ &:hover {
+ box-shadow: 0 2px 12px var(--next-color-dark-hover);
+ transition: all ease 0.3s;
+ }
+ &-icon {
+ width: 70px;
+ height: 70px;
+ border-radius: 100%;
+ flex-shrink: 1;
+ i {
+ color: var(--el-text-color-placeholder);
+ }
+ }
+ &-title {
+ font-size: 15px;
+ font-weight: bold;
+ height: 30px;
+ }
+ }
+ }
+ .home-card-one {
+ @for $i from 0 through 3 {
+ .home-one-animation#{$i} {
+ opacity: 0;
+ animation-name: error-num;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+ animation-delay: calc($i/10) + s;
+ }
+ }
+ }
+ .home-card-two,
+ .home-card-three {
+ .home-card-item {
+ height: 400px;
+ width: 100%;
+ overflow: hidden;
+ .home-monitor {
+ height: 100%;
+ .flex-warp-item {
+ width: 25%;
+ height: 111px;
+ display: flex;
+ .flex-warp-item-box {
+ margin: auto;
+ text-align: center;
+ color: var(--el-text-color-primary);
+ display: flex;
+ border-radius: 5px;
+ background: var(--next-bg-color);
+ cursor: pointer;
+ transition: all 0.3s ease;
+ &:hover {
+ background: var(--el-color-primary-light-9);
+ transition: all 0.3s ease;
+ }
+ }
+ @for $i from 0 through $homeNavLengh {
+ .home-animation#{$i} {
+ opacity: 0;
+ animation-name: error-num;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+ animation-delay: calc($i/10) + s;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.2