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

<template>
  <div id="front" style="width: 100%; height: 100%; font-size: 12px" >
    <div  class="host-body bg bgNew">
      <div class="d-flex jc-center">
        <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
        <div class="d-flex jc-center">
          <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
          <div class="title">
            <span class="title-text">BCC {{ $t('生产运行总览') }}</span>
            <dv-decoration-6
              class="title-bototm"
              :reverse="true"
              :color="['#50e3c2', '#67a1e5']"
              style="width:3.125rem;height:.1rem;"
            />
          </div>
          <dv-decoration-8
            :reverse="true"
            :color="['#568aea', '#000000']"
            style="width:2.5rem;height:.625rem;"
          />
        </div>
        <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
      </div>

      <!-- 第二行 -->
      <div class="d-flex jc-between px-2">
        <!--左侧 tab切换 -->
        <div class="d-flex" style="width: 40%">
          <div
            class="react-right ml-4"
            :style="tabIndex === 1 ? 'background-color: #1a5cd7; width: 3.25rem; text-align: left;' : 'width: 3.25rem; text-align: left;background-color: #0f1325;'"
            @click="handleTab(1)"
          >
            <span class="text">运行总览</span>
          </div>
          <div class="react-right ml-3" :style="tabIndex === 2 ? 'background-color: #1a5cd7;' : 'background-color: #0f1325;'"  @click="handleTab(2)">
            <span class="text">物料平衡</span>
          </div>
          <div class="react-right ml-3" :style="tabIndex === 3 ? 'background-color: #1a5cd7;' : 'background-color: #0f1325;'"  @click="handleTab(3)">
            <span class="text">蒸汽平衡</span>
          </div>
        </div>
        <!-- 右侧 时间 -->
        <div style="width: 40%" class="d-flex">
          <div class="react-left bg-color-blue mr-3" @click="toStop()">
            <!-- <span class="text fw-b">{{ $t('北京时间') }}：</span> -->
            <span class="text fw-b">{{swiperAutoText}}</span>
          </div>
          <div
            class="react-left mr-4"
            style="width: 6.25rem; background-color: #0f1325; text-align: right;"
          >
            <span class="react-after"></span>
            <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
          </div>
        </div>
      </div>

      <div class="swiper-container swi_swiper body-box" ref="appRef" v-if="dashboard === 1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <dv-loading v-if="loading">Loading...</dv-loading>
                <!-- 运行总览 -->
                <el-row class="yunxing suofang" v-else>
                  <!-- 左侧 -->
                  <el-col :span="8" class="yunxing-left">
                    <div id="app-container-Right">
                      <div class="up">
                        <annual-output :dashboarddata = 'dashboarddata'/>
                      </div>
                      <div class="middle">
                        <dv-border-box-13>
                          <energy-consumption :monthData = 'monthData' :transformdata = 'transformdatabottomright'/>
                        </dv-border-box-13>
                      </div>
                      <div class="down">
                        <dv-border-box-13>
                          <product-proportion :dashboarddata = 'dashboarddata' :transformdata = 'transformdatabottomright'/>
                        </dv-border-box-13>
                      </div>

                      <dv-border-box-12 style="height: 260px;overflow: hidden;">
                        <bottom-right :dashboarddata = 'dashboarddata' :transformdata = 'transformdatabottomright'/>
                      </dv-border-box-12>
                    </div>
                  </el-col>
                  <!-- 中间 -->
                  <el-col :span="8" class="yunxing-middle">
                    <dv-border-box-12 style="width: 100%;height: 323px;">
                      <nap-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdatanaptank'/>
                    </dv-border-box-12>
                    <dv-border-box-12 style="width: 100%;height: 323px;">
                      <product-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdatanaptank'/>
                    </dv-border-box-12>
                    <dv-border-box-12 style="width: 100%;height: 323px;">
                      <bottom-left :monthData = 'monthData' :height = 'height'/>
                    </dv-border-box-12>
                  </el-col>
                  <!-- 右侧 -->
                  <el-col :span="8" class="yunxing-right">
                    <dv-border-box-12 style="width: 100%;height: 323px;">
                      <ethylene-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdataethylenetank'/>
                    </dv-border-box-12>
                    <dv-border-box-12 style="width: 100%;height: 323px;">
                      <acrylic-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdataacrylictank'/>
                    </dv-border-box-12>
                    <dv-border-box-12 style="width: 100%;height: 323px;">
                      <bottom-energy :monthData = 'monthData' :height = 'height'/>
                    </dv-border-box-12>
                  </el-col>

                </el-row>
            </div>
            <div class="swiper-slide">
                <!-- 物料平衡 -->
                <el-row class="wuliao suofang">
                  <material-balance :dashboarddata = 'dashboarddata'/>
                </el-row>
            </div>
            <div class="swiper-slide">
                <!-- 蒸汽平衡 -->
                <el-row class="zhengqi suofang">
                  <steam-balance :dashboarddata = 'dashboarddata'/>
                </el-row>
            </div>
        </div>
      </div>



    </div>

    <div class="body-box" v-if="dashboard === 2">
      <!-- 第三行数据 -->
      <div>
        <front-two />
      </div>
    </div>

    <div class="body-box" v-if="dashboard === 3">
      <!-- 第三行数据 -->
      <div class="frist-content-box">
        <div>
          <dv-border-box-12>
            <center-right2 />
          </dv-border-box-12>
        </div>
        <div>
          <dv-border-box-12>
            <center-left2 />
          </dv-border-box-12>
        </div>
        <!-- 中间 -->
        <div>
          <center-left1 />
        </div>
        <div>
          <dv-border-box-13>
            <center-right1 />
          </dv-border-box-13>
        </div>
      </div>
      <!-- 第四行数据 -->
      <div class="bototm-box">
        <dv-border-box-13>
          <bottom-left />
        </dv-border-box-13>
        <dv-border-box-12>
          <bottom-right />
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
  import centerLeft1 from "@/views/front/centerLeft1";
  import centerLeft2 from "@/views/front/centerLeft2";
  import centerRight1 from "@/views/front/centerRight1";
  import centerRight2 from "@/views/front/centerRight2";
  import center from "@/views/front/center";
  import bottomLeft from "@/views/front/bottomLeft";
  import bottomEnergy from "@/views/front/bottomEnergy";
  import bottomRight from "@/views/front/bottomRight";
  import frontTwo from "@/views/front/frontTwo";
  import materialBalance from "@/views/front/materialBalance";
  import steamBalance from "@/views/front/steamBalance";
  import chartRight from "@/views/front/ChartRight";
  import napTank from "@/views/front/napTank";
  import ethyleneTank from "@/views/front/ethyleneTank";
  import acrylicTank from "@/views/front/acrylicTank";
  import productTank from "@/views/front/productTank";
  import annualOutput from "@/views/front/annualOutput";
  import energyConsumption from "@/views/front/energyConsumption";
  import productProportion from "@/views/front/productProportion";
  import dayjs from "dayjs";
  import '@/common/flexible.js';
  import dataV from '@jiaminghi/data-view';
  import {selectLast, selectMonth} from "@/api/aspen/dashboarddata";
  import drawMixin from "../../../utils/drawMixin"; //自适应缩放

  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import 'swiper/dist/js/swiper.min.js'


  export default {
    mixins: [drawMixin],
    data() {
      return {
        loading: true,
        dashboard: 1,
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: [this.$t('周日'),this.$t('周一'),this.$t('周二'),this.$t('周三'),this.$t('周四'),this.$t('周五'),this.$t('周六')],
        timer:null,
        dashboarddata: {
          energyYixi: null,
          energyBingxi: null,
          energyQingqi: null,
          energyJiawan: null,
          energyCsi: null,
          energyBenzene: null,
          energyToluene: null,
          energyXylene: null,
          energyTanliu: null,
          energyWashoil: null,
          energyTanwu: null,
          energyIma: null,
          energyCjiu: null,
          energyRpg: null,
          energyfeedNap: null,
          energyfeedYiwan: null,
          energyfeedTanwu: null,
          energyfeedTanliu: null,
          energyfeedLpg: null,
          energyOffgas: null,
          energyLpg: null,
          steamSsinfur: null,
          steamSsoutlet: null,
          steamSsoutaeu: null,
          steamSsoutesi: null,
          steamSsoutksan: null,
          steamSsoutsc: null,
          steamHsinsub: null,
          steamHsinlet: null,
          steamHsinksan: null,
          steamHsoutpjiu: null,
          steamHsoutaeu: null,
          steamHsoutlet: null,
          steamHsoutesan: null,
          steamHsoutphyi: null,
          steamHsoutpher: null,
          steamHsouthwu: null,
          steamHsoutkliu: null,
          steamHsoutsc: null,
          steamHhpsub: null,
          steamMsinaeu: null,
          steamMsinlet: null,
          steamMsinphyi: null,
          steamMsinkliu: null,
          steamMsoutflare: null,
          steamMsoutaeu: null,
          steamMsoutsctu: null,
          steamMsouteer: null,
          steamMsoutfur: null,
          steamMsoutva: null,
          steamMsouttracing: null,
          steamLsinsub: null,
          steamLsinpjiu: null,
          steamLsinaeu: null,
          steamLsineer: null,
          steamLsinpher: null,
          steamLsoutsctu: null,
          steamLsoutvjiu: null,
          steamLsoutewuliu: null,
          steamLsoutewusan: null,
          steamLsouttracing: null,
          steamLsoutesan: null,
          steamLsoutesi: null,
          steamLsoutother: null,
          napOne: null,
          napTwo: null,
          napThree: null,
          ehtOne: null,
          ehtTwo: null,
          ehtThree: null,
          ehtFour: null,
          ehtFive: null,
          acrOne: null,
          acrTwo: null,
          acrThree: null,
          acrFour: null,
          acrZero: null,
          proTwo: null,
          proOne: null,
          proThree: null,
          proFour: null,
          ssBcc: null,
          ssSub: null,
          ssEu: null,
          ssPgu: null,
          hhpBcc: null,
          hhpSub: null,
          hsBcc: null,
          hsSub: null,
          hsEu: null,
          hsPgu: null,
          msBcc: null,
          msEu: null,
          msPgu: null,
          lsBcc: null,
          lsEu: null,
          lsPgu: null,
          totalBcc: null,
          totalEu: null,
          zongBcc: null,
          zongEu: null,
          zongPgu: null,
          outputYixi: null,
          outputBx: null,
          outputAnnual: null,
          instantaneous: null,
          cumulative: null,
          steamHsoutklz:null
        },
        monthData: {
          dailyYixi: null,
          dailyBingxi: null,
          lossRate: null,
          energyConsumption: null,
          productPutput: null,
          dataDate: null,
          dateDay: null
        },

        // 重构页面
        tabIndex:1,
        goodSwiper:null,
        swiperAutoText:"暂停轮播",
        transformdatabottomright:"1.25,1",
        transformdatanaptank:"1.35,1.35",
        transformdataethylenetank:"1.3,1.2",
        transformdataacrylictank:"1.4,1.3",
        height:"260px"
      };
    },
    components: {
      centerLeft1,
      centerLeft2,
      centerRight1,
      centerRight2,
      center,
      bottomLeft,
      bottomEnergy,
      bottomRight,
      frontTwo,
      materialBalance,
      steamBalance,
      chartRight,
      napTank,
      ethyleneTank,
      acrylicTank,
      productTank,
      annualOutput,
      energyConsumption,
      productProportion,
    },
    computed: {
    },
    updated() {

    },
    mounted() {



      this.timer = setInterval(()=>{
        const date= dayjs(new Date());
        this.dateDay = date.format('HH:mm:ss');
        this.dateYear = date.format('YYYY年MM月DD日');
        this.dateWeek = date.format(this.weekday[date.day()]);
      },1000);

      this.$nextTick(() => {
        this.instantSwiper();
      });
    },
    created() {
      this.getList();
      this.getMonthList()
      // 每隔30秒请求一次数据
      window.setInterval(() => {
          ///调取接口获取数据
          this.getList();
      }, 30000)

      // 一天请求一次数据
      window.setInterval(() => {
        setTimeout(() => {
          ///调取接口获取数据
          this.getMonthList();
        }, 0)
      }, 1000 * 10 * 6 * 60 * 6);

    },
    beforeDestroy(){
      if(this.timer){
        clearInterval(this.timer);
      }
    },
    methods: {
      /** 查询dashboard抓取数据列表 */
      getList()
      {
        selectLast(this.queryParams).then(response => {
          this.dashboarddata = response.data;
          this.cancelLoading();
        });
      },
      /** 查询dashboard抓取数据列表 */
      getMonthList()
      {
        selectMonth(this.queryParams).then(response => {
          this.monthData = response.data;
        });
      },
      cancelLoading() {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      },
      changeDashboard(val) {
        if (val === 1) {
          this.dashboard = 1
        }else if (val === 2) {
          this.dashboard = 2
        }else if (val === 3) {
          this.dashboard = 3
        }
      },
      openNewWindow() {
        let routeData = this.$router.resolve({
          path: "/BCCdashboardNew",
        });
        window.open('/cpms/index.html#/BCCdashboardNew', '_blank');
        // window.open('index.html#/bccHome?redirect=%2Findex');//path是文件的全路径地址cpms/index.html#/login?redirect=%2Findex
      },
      // 重构tab切换
      handleTab(id){
        this.tabIndex = id;

        this.goodSwiper.slideTo(id - 1, 1000, false);
        // this.goodSwiper.autoplay.start();
        // this.swiperAutoText = "暂停轮播";
      },
      instantSwiper() {
        let that = this;
          this.goodSwiper = new Swiper('.swi_swiper', {
            slidesPerView: 1,
            observer: true,
            observeParents: true,
            autoplay: {
              disableOnInteraction: false,  //触碰后自动轮播也不会停止
              delay: 10000,
            },
            loop: false,
            on: {
              //滑动swiper使用的方法
              transitionStart: function() {
                that.tabIndex = this.activeIndex + 1;
                },
          }
        });


      },
      toStop(){

        if(this.swiperAutoText === "暂停轮播"){
          this.goodSwiper.autoplay.stop();
          this.swiperAutoText = "启动轮播";
        }else if(this.swiperAutoText === "启动轮播"){
          this.goodSwiper.autoplay.start();
          this.swiperAutoText = "暂停轮播";
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  #front{
    overflow: scroll !important;
  }
  #front .host-body .react-right .text{
    width: 100%;
    display: block;
    text-align: center;
  }

  #front .bg.bgNew{
width: 100%;
  }
.body-box{
  color: #d3d6dd;
      width: 1920px;
      height: 1080px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: left top;
      overflow: hidden;
}
  .yunxing{
    display: flex;
    &-left{

    }


      #app-container-Right {
          width: 100%;
          height: 100%;
      .up {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
      .middle {
        padding: 0.07rem 0.05rem;
        padding-bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .down {
        padding: 0.07rem 0.05rem;
        padding-bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }


#front{
  overflow: unset !important;
}


.wuliao{
    transform: scale(1.4,1.3) translate(13%,10%) !important;

}
.zhengqi{
    transform: scale(1.55,1.2) translate(17%,8%) !important;

}

.yunxing-left #bottomRight .dv-scroll-board{
	width: 70%!important;
  margin:auto ;
}

</style>