添加页面

Admin

2022-06-29 1eb0eed9133cc73fd06d0ee98d7cc19bc87de761

 src/views/specialWorkSystem/workPlan/departAppointStatistics/index.vue

@@ -1,13 +1,182 @@
<template>
    <div>各部门预约统计</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>
    export default {
        name: "index"
    }
<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>

<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>