web/src/views/dashboard-screen/index.vue

<template>
  <div class="dashboard-container">
    <div class="header"/>
    <div class="content-wrap">
      <div class="coner left">
        <div class="o-item map">
          1
        </div>
        <div class="o-item">
          <CardWrap>
            <span slot="title">试验计划兑现情况</span>
            <div slot="content">
              <SyjhdxqkChart/>
            </div>
          </CardWrap>
        </div>
        <div class="o-item">
          <CardWrap>

            <span slot="title">电力远动调试兑现情况</span>
            <div slot="content">
              <Dlydtssx/>
            </div>
          </CardWrap>
        </div>
        <div class="o-item b-r-3">
          <div class="t-1">

            <CardWrap>

              <span slot="title">电力受电线路</span>
              <div slot="content">
                <Dlsdxl/>
              </div>
            </CardWrap>
          </div>
          <div class="t-2">
            <CardWrap>

              <span slot="title">电力变配电所</span>
              <div slot="content">
                <Dlbpds/>
              </div>
            </CardWrap>
          </div>

        </div>
      </div>
      <div class="coner right">
        <div class="sop sop-1">
          <CardWrap>
            <span slot="title">重要待办事项</span>
            <div slot="content">
              <Zydbsx/>
            </div>
          </CardWrap>
        </div>
        <div class="sop sop-2">
          <CardWrap>
            <span slot="title">检修兑现情况</span>
            <div slot="content">
              <Jxdxqk/>
            </div>
          </CardWrap>

        </div>
        <div class="sop sop-3">
          <CardWrap>
            <span slot="title">牵变、电力设备巡视兑现（本月）</span>
            <div slot="content">
              <QbDlsbxjdx/>
            </div>
          </CardWrap>


        </div>
      </div>
    </div>

  </div>
</template>

<script>

import CardWrap from '@/views/dashboard-screen/chard-wrap/card-wrap.vue'
import SyjhdxqkChart from '@/views/dashboard-screen/syjhdxqk/index.vue'
import Dlydtssx from '@/views/dashboard-screen/dlydtssx/index.vue'
import Dlsdxl from '@/views/dashboard-screen/dlsdxl/index.vue'
import Dlbpds from '@/views/dashboard-screen/dlbpds/index.vue'
import Zydbsx from '@/views/dashboard-screen/zydbsx/index.vue'
import Jxdxqk from "@/views/dashboard-screen/jxdxqk/index.vue";
import QbDlsbxjdx from "@/views/dashboard-screen/qb-dlsbxjdx/index.vue";

export default {
  name: 'Dashboard',
  components: {QbDlsbxjdx, Jxdxqk, Zydbsx, Dlbpds, Dlsdxl, CardWrap, SyjhdxqkChart, Dlydtssx},
  data() {
    return {}
  },
  watch: {
    $route: {
      handler: (route) => {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  //min-height: 977px;
  //min-width: 1920px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-image: url("/static/images/bg.png");
  background-repeat: no-repeat;
  background-size: cover;

  .header {
    width: 100%;
    height: 88px;
    flex-shrink: 0;
    background-image: url("/static/images/header@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .content-wrap {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    display: flex;

    .coner {
      &.left {
        flex-grow: 1;
        height: 100%;
        display: grid;
        grid-template-rows: 2fr 1fr;
        grid-template-columns: 1fr 1fr 2fr;
        grid-auto-flow: row;

        .o-item {

          &.map {
            grid-column-start: 1;
            grid-column-end: 5;
          }

          &.b-r-3 {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;

            .t-1 {
              flex: 1.5;
              width: 100%;
              flex-shrink: 0;

            }

            .t-2 {
              flex: 1;
              width: 100%;
              flex-shrink: 0;
            }
          }
        }
      }

      &.right {
        width: 450px;
        height: 100%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;

        .sop {
          width: 100%;
          height: 100%;
          flex-direction: 0;
          overflow: hidden;
          border: 1px solid teal;

          &.sop-1 {
            flex: 1.5
          }

          &.sop-2 {
            flex: 1.2
          }

          &.sop-3 {
            flex: 2
          }
        }

      }
    }
  }
}
</style>