双重预防

Your Name

2022-08-01 ede67dc74f5ec5e491b102b1835d9cb5315dc6d5

 src/views/home/index.vue

@@ -1,182 +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>
    <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, } from 'vue';
import { toRefs, reactive, defineComponent, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import {useUserInfo} from "/@/stores/userInfo";
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 {
   homeOne: Array <type>
    homeOne: Array<type>;
}
interface type {
   id:number,
   name: string
    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();
      };
      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>