feat: 增加中间地图

刘嘉威

2022-10-25 19fe2c123c31b18566f36a2773b0f2ea0901df63

 src/views/index/index.vue

@@ -1,17 +1,88 @@
<script setup lang="ts">

import {currentGET} from "@/api"

currentGET("leftTop").then(res=>{

    console.log(res);

})

import ItemWrap from "@/components/item-wrap";

import LeftTop from "./left-top.vue";

import LeftCenter from "./left-center.vue";

import CenterMap from "./center-map.vue";





</script>



<template>

  <div class="index">



  <div class="index-box">

    <div class="contetn_left">

      <!-- <div class="pagetab">

        <div class="item">实时监测</div>

        <div class="item">统计分析</div>

      </div> -->

      <ItemWrap class="contetn_left-top contetn_lr-item" title="设备总览">

        <LeftTop />

      </ItemWrap>

      <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">

        <LeftCenter />

      </ItemWrap>

      <ItemWrap

        class="contetn_left-bottom contetn_lr-item"

        title="设备提醒"

        style="padding: 0 10px 16px 10px"

      >

        <!-- <LeftBottom /> -->

      </ItemWrap>

    </div>

    <div class="contetn_center">

      <CenterMap class="contetn_center_top" title="设备分布图"/>

      <ItemWrap class="contetn_center-bottom" title="安装计划">

        <!-- <CenterBottom /> -->

      </ItemWrap>

    </div>

    <div class="contetn_right">

      <!-- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="报警次数">

        <RightTop />

      </ItemWrap>

      <ItemWrap

        class="contetn_left-bottom contetn_lr-item"

        title="报警排名(TOP8)"

        style="padding: 0 10px 16px 10px"

      >

        <RightCenter />

      </ItemWrap>

      <ItemWrap class="contetn_left-bottom contetn_lr-item" title="数据统计图 ">

        <RightBottom />

      </ItemWrap> -->

    </div>

  </div>

</template>



<style scoped lang="scss">

.index{

.index-box {

  width: 100%;

  display: flex;

  min-height: calc(100% - 64px);

  justify-content: space-between;

}

//左边 右边 结构一样

.contetn_left,

.contetn_right {

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  position: relative;

  width: 540px;

  box-sizing: border-box;

  flex-shrink: 0;

}

.contetn_center {

  flex: 1;

  margin: 0 54px;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  .contetn_center-bottom {

    height: 315px;

  }

}



.contetn_lr-item {

  height: 310px;

}

</style>