lg_frontend/pages/peak-coal-monitoring/PeakCoalMonitoring.vue

<!--峰煤监控系统-->
<template>
  <div class="peak-coal-monitoring">

    <div class="center-panel">
      <Map type="middle" @pointClick="pointClick" />
    </div>

    <div class="header-panel show-top">
      <div class="header-content">
        <p class="_title">{{ title }}</p>
        <p class="_title sub">一体化平台</p>
      </div>
    </div>


    <div class="left-panel show-top">
      <div class="pollution-information-module">
        <pollution-information/>
      </div>
      <div class="atmospheric-module-module">
        <atmospheric-module />
      </div>
      <div class="device-online-rate">
        <device-online-rate />
      </div>
      <div class="monitor-data-module">
        <monitor-data/>
      </div>
    </div>

    <div class="right-panel show-top">
      <div class="energy-profile-module">
        <energy-profile/>
      </div>
      <div class="device-overview-module">
        <peak-energy-use/>
      </div>
      <div class="alarm-overview-module">
        <excessive-warning/>
      </div>
    </div>


    <div class="footer-panel show-top"></div>
  </div>
</template>

<script>
import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation";
import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
import WZDialog from "@/components/WZDialog";
import SDJCYDialog from "@/components/SDJCYDialog";
import ZKZDialog from "@/components/ZKZDialog";
import GBZDialog from "@/components/GBZDialog";
import CEMSDialog from "@/components/CEMSDialog";
import pointDialog from '@/components/PointDialog'
import {mapState} from "vuex";
import DeviceOnlineRate from "@/components/peak-coal-monitoring/DeviceOnlineRate";
import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
import ExcessiveWarning from "@/components/peak-coal-monitoring/ExcessiveWarning";
export default {
  name: "PeakCoalMonitoring",
  components: {
    ExcessiveWarning,
    PeakEnergyUse,
    DeviceOnlineRate,
    AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule},
  computed: {
    ...mapState({
      title: state => state.system.title,
    })
  },
  methods: {
    /**
     * 图层构造器
     * @param { object } props
     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } props.layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
     * @param { object } props.data 图层类型
     */
    pointClick ({layerType, data}) {
      // todo
      if(layerType == 'wz'){
        this.$open(WZDialog, {
          type: 'middle'
        }, {
          screenType: 'middle',
          title: '微站',
          width: 1100,
          onClose () {
            console.log(1);
          }
        })
      } else if(layerType === 'sdjcy'){
        this.$open(SDJCYDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '深度检测仪',
          width: 1100,
          onClose () {
            console.log(1);
          }
        })
      }else if(layerType === 'zkz'){
        this.$open(ZKZDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '质控站',
          width: 1100,
          onClose () {
            console.log(1);
          }
        })
      } else if(layerType === 'gbz'){
        this.$open(GBZDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '国标站',
          width: 1100,
          onClose () {
            console.log(1);
          }
        })
      } else if(layerType === 'cems'){
        this.$open(CEMSDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: 'CEMS',
          width: 1100,
          onClose () {
            console.log(1);
          }
        })
      } else if (layerType === 'jkd'){
        this.$open(pointDialog, {
          type: 'middle'
        }, {
          screenType: 'custommiddle',
          title: '监控点',
          width: 1100,
          onClose () {
            console.log(1);
          }
        })
      }
    },
  }
}
</script>

<style>
body, html, #__nuxt, #__layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #09151F;
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}

.list-enter, .list-leave-to
  /* .list-leave-active for below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(30px);
}
</style>

<style scoped lang="less">
@import "../../assets/styles/mixin";

.peak-coal-monitoring {
  width: 100%;
  height: 100%;
  position: relative;
  .show-top {
    z-index: 2;
  }

  .header-panel {
    position: absolute;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: center;
    background: url("~/assets/peakCoalMonitoring/header/header-shadow.png") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    height: 112px;

    .header-content {
      width: 100%;
      background: url("~/assets/peakCoalMonitoring/header/header-bg.png") no-repeat;
      background-size: 100% 100%;
      height: 112px;
      box-sizing: border-box;
      padding-top: 30px;
      ._title{
        width: 100%;
        font-family: AlimamaShuHeiTi-Bold;
        font-size: 25px;
        color: #D8F0FF;
        letter-spacing: 7.68px;
        text-align: center;
        text-shadow: 0 0 11px #000000;
        font-weight: 700;
        margin: 0;
        &.sub {
          font-size: 18px;
        }

      }
      .subtitle {
        width: 100%;
        font-family: AlimamaShuHeiTi-Bold;
        font-size: 16px;
        color: #D8F0FF;
        letter-spacing: 7.68px;
        text-align: center;
        text-shadow: 0 0 11px #000000;
        font-weight: 700;
      }
    }
  }

  .left-panel {
    width: 430px;
    position: absolute;
    left: 20px;
    height: 960px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    .flex-column;
    background: url("~/assets/peakCoalMonitoring/left/bg.png") left bottom no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 10px;
    padding-right: 0;

    .atmospheric-module-module{
      height: 230px;
      width: 100%;
    }
    .device-online-rate{
      height: 230px;
    }

    .pollution-information-module{
      height: 260px;
      width: 100%;
    }

    .monitor-data-module{
      flex: 1;
      height: 0;
      width: 100%;
    }
  }

  .right-panel {
    width: 430px;
    position: absolute;
    right: 20px;
    height: 960px;
    top: 50%;
    transform: translateY(-50%);
    background: url("~/assets/peakCoalMonitoring/right/bg.png") left bottom no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 0;
    .flex-column;
    pointer-events: auto;
    .energy-profile-module{
      height: 336px;
      width: 100%;
    }
    .device-overview-module{
      height: 260px;
      width: 100%;
    }
    .alarm-overview-module{
      flex: 1;
      height: 0;
      width: 100%;
    }
  }

  .center-panel{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
  }

  .footer-panel{
    width: 100%;
    height: 43px;
    background: url("~/assets/peakCoalMonitoring/footer/footer-bg.png") left bottom no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -6px;
    pointer-events: auto;
  }
}
</style>