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

<template>
  <div id="front" style="width: 100%; height: 100%">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="host-body bg">
      <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">
        <div class="d-flex" style="width: 40%">
          <div
            class="react-right ml-4"
            style="width: 3.25rem; text-align: left;background-color: #0f1325;"
            @click="changeDashboard(1)"
          >
            <span class="react-before"></span>
            <span class="text"></span>
          </div>
          <div class="react-right ml-3" style="background-color: #0f1325;" @click="changeDashboard(2)">
            <span class="text colorBlue"></span>
          </div>
          <div class="react-right ml-3" style="background-color: #0f1325;" @click="changeDashboard(3)">
            <span class="text colorBlue"></span>
          </div>
        </div>
        <div style="width: 40%" class="d-flex">
          <div class="react-left bg-color-blue mr-3">
            <span class="text fw-b">{{ $t('北京时间') }}：</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="body-box" v-if="dashboard === 1">
        <div class="three-content-box">
          <div>
            <material-balance />
          </div>
          <div>
            <chart-right/>
          </div>
        </div>
        <div class="three-bototm-box">
          <dv-border-box-12>
            <nap-tank />
          </dv-border-box-12>
          <dv-border-box-12>
            <ethylene-tank />
          </dv-border-box-12>
          <dv-border-box-12>
            <acrylic-tank />
          </dv-border-box-12>
          <dv-border-box-12>
            <product-tank />
          </dv-border-box-12>
        </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 bottomRight from "@/views/front/bottomRight";
  import frontTwo from "@/views/front/frontTwo";
  import materialBalance from "@/views/front/materialBalance";
  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 dayjs from "dayjs";
  import '@/common/flexible.js';
  import dataV from '@jiaminghi/data-view';

  export default {
    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
      };
    },
    components: {
      centerLeft1,
      centerLeft2,
      centerRight1,
      centerRight2,
      center,
      bottomLeft,
      bottomRight,
      frontTwo,
      materialBalance,
      chartRight,
      napTank,
      ethyleneTank,
      acrylicTank,
      productTank
    },
    mounted() {
      this.cancelLoading();
      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);
    },
    beforeDestroy(){
      if(this.timer){
        clearInterval(this.timer);
      }
    },
    methods: {
      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
        }
      }
    }
  };
</script>

<style lang="scss" scoped>

</style>

<!--
<template>
  <div id="elec-index"  ref="appRef">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <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">Electricity Power Plant Monitoring</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>

        &lt;!&ndash; 第二行 &ndash;&gt;
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 40%">
            <div
              class="react-right ml-4"
              style="width: 6.25rem; text-align: left;background-color: #0f1325;"
            >
              <span class="react-before"></span>
              <span class="text">数据分析1</span>
            </div>
            <div class="react-right ml-3" style="background-color: #0f1325;">
              <span class="text colorBlue">数据分析2</span>
            </div>
          </div>
          <div style="width: 40%" class="d-flex">
            <div class="react-left bg-color-blue mr-3">
              <span class="text fw-b">vue-big-screen</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="body-box">
          &lt;!&ndash; 第三行数据 &ndash;&gt;
          <div class="content-box">
            <div>
              <dv-border-box-12>
                <centerLeft1 />
              </dv-border-box-12>
            </div>
            <div>
              <dv-border-box-12>
                <centerLeft2 />
              </dv-border-box-12>
            </div>
            &lt;!&ndash; 中间 &ndash;&gt;
            <div>
              <center />
            </div>
            &lt;!&ndash; 中间 &ndash;&gt;
            <div>
              <centerRight2 />
            </div>
            <div>
              <dv-border-box-13>
                <centerRight1 />
              </dv-border-box-13>
            </div>
          </div>

          &lt;!&ndash; 第四行数据 &ndash;&gt;
          <div class="bototm-box">
            <dv-border-box-13>
              <bottomLeft />
            </dv-border-box-13>
            <dv-border-box-12>
              <bottomRight />
            </dv-border-box-12>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2";
import center from "./center";
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
import '@/assets/styles/index.scss' // global css
import '@/common/flexible.js';
import dayjs from "dayjs";

export default {
  data() {
    return {
      loading: true,
      dashboard: 1,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      timer:null
    };
  },
  components: {
    centerLeft1,
    centerLeft2,
    centerRight1,
    centerRight2,
    center,
    bottomLeft,
    bottomRight
  },
  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.setScale();
    window.addEventListener("resize", this.debounce(this.setScale, 100));
    // * 适配处理
    this.cancelLoading();
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },

    getScale() {
      let { width, height } = this;
      let wh = window.innerHeight / height;
      let ww = window.innerWidth / width;
      console.log(ww < wh ? ww : wh);
      return ww < wh ? ww : wh;
    },
    setScale() {
      if(window.innerHeight ==1080){
        this.height = 1080
      }else{
        this.height = 937

      }
      this.scale = this.getScale();
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty("&#45;&#45;scale", this.scale);
      }
    },
    debounce(fn, delay) {
      let delays = delay || 500;
      let timer;
      return function () {
        let th = this;
        let args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    },
  }
};
</script>

<style lang="scss">
#elec-index {
  color: #d3d6dd;
  background-color: #000000;
  width: 100%;
  height: 100vh;
  .bg {
    padding: 0.2rem 0.2rem 0 0.2rem;
    background-size: cover;
    background-position: center center;
    background-image: url("../../../assets/image/pageBg.png");
  }

  .host-body {
    .title {
      position: relative;
      width: 6.25rem;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 0.3rem;
        position: absolute;
        bottom: 0;
        left: 50%;
        top: 6%;
        transform: translate(-50%);
        font-weight: 900;
      }

      .title-bototm {
        position: absolute;
        bottom: -0.375rem;
        left: 50%;
        transform: translate(-50%);
      }
    }

    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(45deg);

      .react-before {
        position: absolute;
        left: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 0.2rem;
      display: flex;
      flex-direction: column;

      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
      }
      // 底部数据
      .bototm-box {
        margin-top: 0.125rem;
        display: grid;
        grid-template-columns: repeat(2, 50%);
      }
    }
  }
}
.fs-xl {
  font-size: 0.14rem;
}
</style>
-->