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

<template>
  <div class="dashboard-container" v-if="render">
    <div class="header">
      <div class="title">
        变电配电大数据可视化系统
      </div>
      <div class="r-title">
        {{ dateTitle }}
      </div>
    </div>
    <div class="content-wrap">
      <div class="coner left">
        <div class="o-item map">
          <ChartMap/>
          <div class="jryl-wrap">
            <CardWrap>
              <span slot="title" @click="openDrawer('变电-电力异常信息')">今日遗留</span>
              <div slot="content">
                <Jryl/>
              </div>
            </CardWrap>

          </div>
        </div>
        <div class="o-item">
          <CardWrap>
            <span slot="title" @click="openDrawer('试验计划本月兑现情况')">试验计划兑现情况</span>
            <div slot="content">
              <SyjhdxqkChart/>
            </div>
          </CardWrap>
        </div>
        <div class="o-item">
          <CardWrap>

            <span slot="title" @click="openDrawer('电力远动调试本月兑现情况')">电力远动调试兑现情况</span>
            <div slot="content">
              <Dlydtssx/>
            </div>
          </CardWrap>
        </div>
        <div class="o-item b-r-3">
          <div class="t-1">

            <CardWrap>

              <span slot="title" @click="openDrawer('电力远动调试本月兑现情况')">电力受电线路</span>
              <div slot="content">
                <Dlsdxl/>
              </div>
            </CardWrap>
          </div>
          <div class="t-2">
            <CardWrap>

              <span slot="title" @click="openDrawer('电力远动调试本月兑现情况')">电力变配电所</span>
              <div slot="content">
                <Dlbpds/>
              </div>
            </CardWrap>
          </div>

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

        </div>
        <div class="sop sop-3">
          <CardWrap>
            <span slot="title" @click="openDrawer('设备巡检兑现情况')">牵变、电力设备巡视兑现（本月）</span>
            <div slot="content">
              <QbDlsbxjdx/>
            </div>
          </CardWrap>

        </div>
      </div>
    </div>
    <el-drawer
      custom-class="drawer-wrap"
      :title="drawer.title"
      :visible.sync="drawer.visible"
      :with-header="true"
      size="100%"
      :direction="drawer.direction"
    >
      <component :is="drawer.comp"/>
    </el-drawer>
  </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'
import Jryl from '@/views/dashboard-screen/jryl/index.vue'
import ChartMap from '@/views/dashboard-screen/chart-map/chartMap.vue'
import dayjs from 'dayjs'
import ScreenBdDlYcxx from '@/views/dashboard-screen/screen/screen_Bd_Dl_Ycxx/ScreenBdDlYcxx.vue'
import ScreenJxdxqk from '@/views/dashboard-screen/screen/screenJxdxqk.vue'
import ScreenSyjhbydxqk from '@/views/dashboard-screen/screen/ScreenSyjhbydxqk.vue'
import ScreenDbsx from '@/views/dashboard-screen/screen/screenDbsx/ScreenDbsx.vue'
import ScreenDlts from '@/views/dashboard-screen/screen/screenDlts/screenDlts.vue'
import ScreenSbxjdxqk from '@/views/dashboard-screen/screen/screenSbxjdxqk/screenSbxjdxqk.vue'

import * as _ from 'lodash'

require('dayjs/locale/zh-cn')
export default {
  name: 'Dashboard',
  components: {ChartMap, Jryl, QbDlsbxjdx, Jxdxqk, Zydbsx, Dlbpds, Dlsdxl, CardWrap, SyjhdxqkChart, Dlydtssx},
  data() {
    return {
      render: true,
      dateTitle: dayjs().locale('zh-cn').format('YYYY年MM月DD日  d'),
      drawer: {
        title: '',
        visible: false,
        direction: 'btt',
        comp: null
      }
    }
  },
  watch: {
    $route: {
      handler: (route) => {
        // this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    const doResize = _.debounce(() => {
      console.log('doResize')
      this.render = false
      setTimeout(() => {
        this.render = true
      }, 100)
    }, 500)
    window.addEventListener('resize', doResize)
    setInterval(() => {
      this.dateTitle = dayjs().locale('zh-cn').format('YYYY年MM月DD日  星期dd')
    }, 1000)
  },
  methods: {

    openDrawer(title) {
      const map = {
        '检修兑现情况': ScreenJxdxqk,
        '变电-电力异常信息': ScreenBdDlYcxx,
        '试验计划本月兑现情况': ScreenSyjhbydxqk,
        '待办事项': ScreenDbsx,
        '电力远动调试本月兑现情况': ScreenDlts,
        '设备巡检兑现情况': ScreenSbxjdxqk
      }
      this.drawer.title = title
      this.drawer.visible = true
      this.drawer.comp = map[title]
      this.drawer = Object.assign({}, this.drawer)
    }
  }
}
</script>
<style>
::-webkit-scrollbar {

  background-color: transparent;

  width: 8px;

  height: 8px;

  background-clip: padding-box;

}

/*滚动条两端方向按钮*/

::-webkit-scrollbar-button {

  height: 0px;

  width: 0px;

}

/*滚动条中间滑动部分*/

::-webkit-scrollbar-thumb {

  background-color: #dbdbdb;

  border-radius: 4px;

}

/*滚动条右下角区域*/

::-webkit-scrollbar-corner {

  background-color: transparent;

}
</style>

<style lang="scss" scoped>

@font-face {
  font-family: "hxb";
  src: url("hxb.woff2") format('woff2'),;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "shr";
  src: url("shr.woff2") format('woff2'),;
  font-weight: 400;
  font-style: normal;
}

* {
  font: 400 auto shr;
}

.hxbFont {
  font: 400 auto hxb;
}

.dashboard-container {
  width: 100%;
  height: 100%;
  min-height: fit-content;
  //min-width: 1920px;
  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;
  padding-bottom: 7 vh;

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

    .title {
      width: 30%;
      height: 100%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      font-weight: bold;
      color: white;
    }

    .r-title {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      width: fit-content;
      padding-right: 3vw;
      font-size: 36px;
      font-weight: bold;
      color: white;
      font: normal 36px hxb;

    }
  }

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

    .coner {
      &.left {
        flex: 147;
        flex-shrink: 0;
        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;
            position: relative;

            .jryl-wrap {
              width: 25%;
              height: 20vh;
              position: absolute;
              z-index: 1;
              bottom: 0;
              left: 0;
            }
          }

          &.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 {
        flex: 43;
        flex-shrink: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

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

          &.sop-1 {
            flex: 1.5;

            ::v-deep {
              .card-wrap {
                .content {
                  height: calc(100% - 20px);
                  overflow-y: auto;
                }
              }
            }
          }

          &.sop-2 {
            flex: 1.2
          }

          &.sop-3 {
            flex: 2
          }
        }

      }
    }
  }
}

::v-deep {
  .drawer-wrap {
    background-image: url("/static/images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;

    .screen-common-wrap {
      max-height: calc(100vh - 100px);
      overflow: hidden;
      overflow-y: auto;

      height: fit-content;
      background-color: #fff;
      border-radius: 0.5vw;
    }

    header {
      color: #fff;
      font-size: 1.3vw;

      span {
        outline: none !important;
      }
    }

  }
}

</style>