From 006cedaa4188d5bd5f99ef0721572a24c89d7ce4 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期六, 20 八月 2022 17:19:08 +0800
Subject: [PATCH] Default Changelist
---
src/views/home/index.vue | 334 ++++++++++++++++++++++++++++---------------------------
1 files changed, 171 insertions(+), 163 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2923664..7e986cd 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,185 +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="6"
- :xl="6"
- 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.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%"></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%"></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">
- </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%"></div>
- </div>
- </el-col>
- </el-row>
- </div>
+ <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, ref, watch, nextTick, onActivated } from 'vue';
-import * as echarts from 'echarts';
+import { toRefs, reactive, defineComponent, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { initBackEndControlRoutes } from '/@/router/backEnd';
-import {Session} from "/@/utils/storage";
-
+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],
+ homeChartOne: null,
+ homeChartTwo: null,
+ homeCharThree: null,
+ dispose: [null, '', undefined]
};
interface stateType {
- projectId:string,
- homeOne: Array <type>
+ homeOne: Array<type>;
}
interface type {
- id:number,
- name: string
+ id: number;
+ name: string;
}
export default defineComponent({
- name: 'home',
- setup() {
- const homeLineRef = ref();
- const homePieRef = ref();
- const homeBarRef = ref();
- const storesTagsViewRoutes = useTagsViewRoutes();
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
- const state = reactive<stateType>({
- projectId:'',
- homeOne:[{id:1,name:'系统1'},{id:2,name:'系统2'},{id:3,name:'系统4'},{id:4,name:'系统4'}],
- });
- // 折线图
- const renderMenu = async() => {
- state.projectId = '1'
- Session.set('projectId','1')
- await initBackEndControlRoutes();
- };
- return {
- renderMenu,
- ...toRefs(state),
- };
- },
+ 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;
- }
- }
- }
- }
- }
- }
+ 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