对比新文件 |
| | |
| | | <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, } from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | | import { Session } from '/@/utils/storage'; |
| | | 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(); |
| | | }; |
| | | 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> |