<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-08-15 11:20:48
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-09-14 11:49:35
 * @FilePath: \xld-gis-admin\src\views\dashboard\workbench\index.vue
 * @Description: 数据监控
-->
<template>
  <div class="data-monitor">
    <div class="top-statistic">
      <top-card-statistic />
    </div>
    <div class="bottom-statistic">
      <div class="left-statistic">
        <div class="item-statistic" style="padding-bottom:1rem;">
          <div class="item" style="width: 100%;">
            <SourceAll />
          </div>
        </div>
        <div class="item-statistic" style="display: flex;">
          <div class="item" style="width: calc(50% - 0.5rem);margin-right: 1rem;">
            <spatial-annlysis/>
          </div>
          <div class="item" style="width: calc(50% - 0.5rem);">
            <interface-everyday/>
          </div>
        </div>
      </div>
      <div class="right-statistic">
        <!-- <div class="item-statistic" style="padding-right:1rem;padding-bottom: 1rem;">
          <div class="item">
            <spatial-annlysis/>
          </div>
        </div>
        <div class="item-statistic" style="padding-bottom: 1rem;">
          <div class="item">
            <interface-everyday/>
          </div>
        </div> -->
        <div class="item-statistic" style="padding-bottom:1rem;">
          <div class="item">
            <SourceClassify />
          </div>
        </div>
        <div class="item-statistic">
          <div class="item">
            <res-type-statistic/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onBeforeMount, reactive, ref, toRef } from 'vue';
import { USER_INFO_KEY } from '/@/enums/cacheEnum';
import { getAuthCache } from '/@/utils/auth';
import Moment from 'moment';
import TopCardStatistic from './component/TopCardStatistic.vue';
import UnstructuredStatistic from './component/UnstructuredStatistic.vue';
import SpatialAnnlysis from './component/SpatialAnnlysis.vue';
import InterfaceEveryday from './component/InterfaceEveryday.vue';
import InterfaceMonth from './component/InterfaceMonth.vue';
import ResTypeStatistic from './component/ResTypeStatistic.vue';
import SourceAll from './component/SourceAll.vue';
import SourceClassify from './component/SourceClassify.vue';
export default defineComponent({
  name: 'dataMonitor',
  components: { TopCardStatistic, UnstructuredStatistic, SpatialAnnlysis,InterfaceEveryday,InterfaceMonth,ResTypeStatistic, SourceAll, SourceClassify },
  setup() {
    const userInfo: any = getAuthCache(USER_INFO_KEY);
    const role: string = userInfo?.roles[0];
    let current = ref('数据监控');
    const moment = Moment;
    nextTick(() => {});

    onBeforeMount(async () => {});
    return {
      current,
      moment,
    };
  },
});
</script>
<style scoped lang="less">
.data-monitor {
  height: 100%;
  width: 100vw;
  padding: 1rem;
  // background-size: 100% 100%;
  // background-image: url(./数据监控.png);
  .top-statistic {
    height: 16vh;
    width: calc(100vw - 2rem);
    border-radius: 0.3112rem;
    background: #ffffff;
    margin-bottom: 1rem;
  }
  .bottom-statistic {
    display: flex;
    height: calc(84vh - 6rem);
    width: calc(100vw - 2rem);
    border-radius: 0.3112rem;
    .left-statistic {
      width: calc(64% - 1rem);
      height: 100%;
      // background: #ffffff;
      border-radius: 0.3112rem;
      margin-right: 1rem;

      .item-statistic {
        width: 100%;
        height: 50%;
        border-radius: 0.3112rem;

        .item{
          height:100%;
          background: #ffffff;
          border-radius: 0.3112rem;
        }
      }
    }
    .right-statistic {
      width: 36%;
      height: 100%;
      border-radius: 0.3112rem;
      .item-statistic {
        // float: left;
        height: 50%;
        // width: 50%;
        border-radius: 0.3112rem;
        .item{
          height:100%;
          width: 100%;
          background: #ffffff;
          border-radius: 0.3112rem;
        }
      }
    }
  }
}
</style>


