newcpms/ui/src/views/monitor/elecNew/frontElecThree.vue

<template>
  <!-- 电厂大屏第三页：环保监控 -->
  <div id="frontThree">
      <!-- 第一排开始 -->
      <div id="rowOne">
        <!-- HRSG #1 -->
        <dv-border-box-1 class="outer-div">
          <div class="inner-div">
            <analysisTopLeft class="analysis-top" v-bind="$attrs"></analysisTopLeft>
          </div>
          <div class="inner-div">
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">烟尘</span>
              <dv-water-level-pond :config="configTopLeft1" class="analysis-percentage"/>
            </div>
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">SO2</span>
              <dv-water-level-pond :config="configTopLeft2" class="analysis-percentage"/>
            </div>
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">NOx</span>
              <dv-water-level-pond :config="configTopLeft3" class="analysis-percentage"/>
            </div>
          </div>
        </dv-border-box-1>
        <!-- HRSG #2 -->
        <dv-border-box-1 class="outer-div">
          <div class="inner-div">
            <analysisTopCenter class="analysis-top" v-bind="$attrs"></analysisTopCenter>
          </div>
          <div class="inner-div">
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">烟尘</span>
              <dv-water-level-pond :config="configTopCenter1" class="analysis-percentage"/>
            </div>
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">SO2</span>
              <dv-water-level-pond :config="configTopCenter2" class="analysis-percentage"/>
            </div>
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">NOx</span>
              <dv-water-level-pond :config="configTopCenter3" class="analysis-percentage"/>
            </div>
          </div>
        </dv-border-box-1>
        <!-- HRSG #3 -->
        <dv-border-box-1 class="outer-div">
          <div class="inner-div">
            <analysisTopRight class="analysis-top" v-bind="$attrs"></analysisTopRight>
          </div>
          <div class="inner-div">
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">烟尘</span>
              <dv-water-level-pond :config="configTopRight1" class="analysis-percentage"/>
            </div>
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">SO2</span>
              <dv-water-level-pond :config="configTopRight2" class="analysis-percentage"/>
            </div>
            <div class="analysis-percentage-box">
              <span class="analysis-percentage-span">NOx</span>
              <dv-water-level-pond :config="configTopRight3" class="analysis-percentage"/>
            </div>
          </div>
        </dv-border-box-1>
      </div>
      <!-- 第一排结束 -->
      <!-- 第二排开始 -->
      <div id="rowTwo">
        <dv-border-box-13 class="outer-div">
          <div class="analysis-bottom-box">
            <!-- PH 柱状图 -->
            <analysisBottomLeft1 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft1>
            <!-- COD 柱状图 -->
            <analysisBottomLeft2 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft2>
          </div>
          <div class="analysis-bottom-box">
            <!-- PH 折线图 -->
            <analysisBottomLeft3 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft3>
            <!-- COD 折线图 -->
            <analysisBottomLeft4 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft4>
          </div>
        </dv-border-box-13>
        <div id="scroll-board-box">
          <!-- 预警大屏 -->
          <dv-scroll-board :config="configBottomRight"/>
        </div>
      </div>
      <!-- 第二排结束 -->
  </div>
</template>

<script>
  import analysisBottomLeft1 from './analysisBottomLeft1.vue';
  import analysisBottomLeft2 from './analysisBottomLeft2.vue';
  import analysisBottomLeft3 from './analysisBottomLeft3.vue';
  import analysisBottomLeft4 from './analysisBottomLeft4.vue';
  import analysisTopLeft from './analysisTopLeft.vue';
  import analysisTopCenter from './analysisTopCenter.vue';
  import analysisTopRight from './analysisTopRight.vue';

  export default {
      name: "materialBalance",
      components: {
        analysisBottomLeft1, analysisBottomLeft2, analysisBottomLeft3, analysisBottomLeft4,
        analysisTopLeft, analysisTopCenter, analysisTopRight
      },
      props: ['dashboardelecdata', 'alarmList'],
      data() {
        return {
          // 第一排左上角水位图配置、基准值、实测值
          configTopLeft1: {}, configTopLeft2: {}, configTopLeft3: {},
          limitTopLeft1: 100, limitTopLeft2: 572, limitTopLeft3: 2050,
          dataTopLeft1: this.dashboardelecdata.hrsg1SmokeConvert,
          dataTopLeft2: this.dashboardelecdata.hrsg1So2Convert,
          dataTopLeft3: this.dashboardelecdata.hrsg1NoxConvert,
          // 第一排中间水位图配置、基准值、实测值
          configTopCenter1: {}, configTopCenter2: {}, configTopCenter3: {},
          limitTopCenter1: 100, limitTopCenter2: 572, limitTopCenter3: 2050,
          dataTopCenter1: this.dashboardelecdata.hrsg2SmokeConvert,
          dataTopCenter2: this.dashboardelecdata.hrsg2So2Convert,
          dataTopCenter3: this.dashboardelecdata.hrsg2NoxConvert,
          // 第一排右上角水位图配置、基准值、实测值
          configTopRight1: {}, configTopRight2: {}, configTopRight3: {},
          limitTopRight1: 100, limitTopRight2: 572, limitTopRight3: 2050,
          dataTopRight1: this.dashboardelecdata.hrsg3SmokeConvert,
          dataTopRight2: this.dashboardelecdata.hrsg3So2Convert,
          dataTopRight3: this.dashboardelecdata.hrsg3NoxConvert,
          // 第二排右下角轮播表表头、表数据、表配置
          tableHeaderBottomRight: ['时间', '值', '位号', '内容'],
          tableDataBottomRight: this.alarmList,
            // [
              // ['<span class="span-rw">2022-4-2 06:22</span>', 'someData', 'QT12001', ' leakage #1HRSG DUCT BURNRE'],
              // ['2022-4-2 13:43', 'someData', 'QT12501', ' CO leakage #1HRSG offgas system'],
              // ['2022-4-2 15:23', 'someData', '<span>QT12502<i class="icon icon-shang"></i></span>', ' CO leakage #1HRSG offgas system'],
              // ['2022-4-2 19:01', 'someData', 'QT22001', ' leakage #2HRSG DUCT BURNRE', ],
              // ['2022-4-3 01:00', 'someData', 'QT22501', ' CO leakage #2HRSG offgas system', ],
              // ['2022-4-3 04:50', 'someData', 'QT22502', ' CO leakage #2HRSG offgas system', ],
              // ['2022-4-3 12:21', 'someData', 'QT32001', ' leakage #3HRSG DUCT BURNRE', ],
              // ['2022-4-5 08:22', 'someData', 'AI82201', 'SC @ HRSG#1 HP DRUM BLOWDOWN', ],
              // ['2022-4-5 12:10', 'someData', 'AI82302', 'PH @ HRSG#2 HP DRUM BLOWDOWN', ],
              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE']
            // ],
          configBottomRight: {}
        };
      },
      methods: {
        /**
         * 第一排左上角水位图初始化
         */
      initTopLeft() {
        this.configTopLeft1 = {
          data: [ ( (this.dataTopLeft1/this.limitTopLeft1) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopLeft1 + ' mg/m3',
          shape: 'roundRect'
        };
        this.configTopLeft2 = {
          data: [ ( (this.dataTopLeft2/this.limitTopLeft2) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopLeft2 + ' mg/m3',
          shape: 'roundRect'
        };
        this.configTopLeft3 = {
          data: [ ( (this.dataTopLeft3/this.limitTopLeft3) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopLeft3 + ' mg/m3',
          shape: 'roundRect'
        };
      },
      /**
       * 第一排中间水位图初始化
       */
      initTopCenter() {
        this.configTopCenter1 = {
          data: [ ( (this.dataTopCenter1/this.limitTopCenter1) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopCenter1 + ' mg/m3',
          shape: 'roundRect'
        };
        this.configTopCenter2 = {
          data: [ ( (this.dataTopCenter2/this.limitTopCenter2) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopCenter2 + ' mg/m3',
          shape: 'roundRect'
        };
        this.configTopCenter3 = {
          data: [ ( (this.dataTopCenter3/this.limitTopCenter3) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopCenter3 + ' mg/m3',
          shape: 'roundRect'
        };
      },
      /**
       * 第一排右上角水位图初始化
       */
      initTopRight() {
        this.configTopRight1 = {
          data: [ ( (this.dataTopRight1/this.limitTopRight1) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopRight1 + ' mg/m3',
          shape: 'roundRect'
        };
        this.configTopRight2 = {
          data: [ ( (this.dataTopRight2/this.limitTopRight2) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopRight2 + ' mg/m3',
          shape: 'roundRect'
        };
        this.configTopRight3 = {
          data: [ ( (this.dataTopRight3/this.limitTopRight3) * 100 ).toFixed(1) ],
          waveHeight: 10,
          formatter: this.dataTopRight3 + ' mg/m3',
          shape: 'roundRect'
        };
      },
      /**
       * 第二排右下角轮播表配置初始化
       */
      initBottomRight() {
        this.configBottomRight = {
          data: this.tableDataBottomRight,
          header: this.tableHeaderBottomRight,
          rowNum: 8,
          headerBGC: '#00BAFF',
          oddRowBGC: '#003B51',
          evenRowBGC: '#0A2732',
          waitTime: 3000, // in ms
          align: ['center', 'center', 'center', 'center'],
          columnWidth: [300, 200, 200],
          headerHeight: 50,
          carousel: 'single'  // 'single' | 'page'
        };
      }      
    },
    mounted () {
      this.initBottomRight();
      this.initTopLeft();
      this.initTopCenter();
      this.initTopRight();
    }
  }
</script>

<style scoped>
  /* 外层盒子 */
  .outer-div{ height:5rem;width:33.3%;display:inline-block;float:left; }
    /* 第一排样式 */
    .inner-div{ width:6.6rem;margin:0px auto;margin-top:25px; }
    .analysis-top{ display:inline-block;float:left; }
    .analysis-percentage-box{ width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem; }
      .analysis-percentage-span{ width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px; }
      .analysis-percentage{ width: 2.1rem;height:1.4rem; }
    /* 第二排样式 */
    .analysis-bottom-box{ width:6.8rem;margin:0px auto;margin-top:25px; }
      .analysis-bottom{ display:inline-block;float:left; }
    #scroll-board-box{ height:4.8rem;width:66%;display:inline-block;float:left;margin:0.1rem 0px;margin-left:5px; }
      dv-scroll-board{ height:100%;width:100%; }
</style>