cq

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

@@ -1,3 +1,215 @@
+<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>
@@ -24,7 +236,7 @@
           <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
@@ -53,7 +265,7 @@
         </div>
 
         <div class="body-box">
-          <!-- 第三行数据 -->
+          &lt;!&ndash; 第三行数据 &ndash;&gt;
           <div class="content-box">
             <div>
               <dv-border-box-12>
@@ -65,11 +277,11 @@
                 <centerLeft2 />
               </dv-border-box-12>
             </div>
-            <!-- 中间 -->
+            &lt;!&ndash; 中间 &ndash;&gt;
             <div>
               <center />
             </div>
-            <!-- 中间 -->
+            &lt;!&ndash; 中间 &ndash;&gt;
             <div>
               <centerRight2 />
             </div>
@@ -80,7 +292,7 @@
             </div>
           </div>
 
-          <!-- 第四行数据 -->
+          &lt;!&ndash; 第四行数据 &ndash;&gt;
           <div class="bototm-box">
             <dv-border-box-13>
               <bottomLeft />
@@ -162,7 +374,7 @@ export default {
       }
       this.scale = this.getScale();
       if (this.$refs.ScaleBox) {
-        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+        this.$refs.ScaleBox.style.setProperty("&#45;&#45;scale", this.scale);
       }
     },
     debounce(fn, delay) {
@@ -297,3 +509,4 @@ export default {
   font-size: 0.14rem;
 }
 </style>
+-->