<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, ref, watch, nextTick, onActivated } from 'vue';
|
import * as echarts from 'echarts';
|
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 {useRoutesList} from "/@/stores/routesList";
|
import pinia from "/@/stores";
|
|
let global: any = {
|
homeChartOne: null,
|
homeChartTwo: null,
|
homeCharThree: null,
|
dispose: [null, '', undefined],
|
};
|
|
interface stateType {
|
projectId:string,
|
homeOne: Array <type>
|
}
|
interface type {
|
id:number,
|
name: string
|
}
|
export default defineComponent({
|
name: 'home',
|
setup() {
|
const storesRoutesList = useRoutesList(pinia);
|
const { routesList } = storeToRefs(storesRoutesList);
|
// const storesTagsViewRoutes = useTagsViewRoutes();
|
// const storesThemeConfig = useThemeConfig();
|
const state = reactive<stateType>({
|
projectId:'',
|
homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'系统1'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}],
|
});
|
// 折线图
|
const renderMenu = async (value: string) => {
|
state.projectId = value
|
Session.set('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>
|
