|
|
@@ -1,224 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="login">
|
|
|
- <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="openNewWindow">
|
|
|
- <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 "./front/centerLeft1";
|
|
|
- import centerLeft2 from "./front/centerLeft2";
|
|
|
- import centerRight1 from "./front/centerRight1";
|
|
|
- import centerRight2 from "./front/centerRight2";
|
|
|
- import center from "./front/center";
|
|
|
- import bottomLeft from "./front/bottomLeft";
|
|
|
- import bottomRight from "./front/bottomRight";
|
|
|
- import frontTwo from "./front/frontTwo";
|
|
|
- import materialBalance from "./front/materialBalance";
|
|
|
- import chartRight from "./front/ChartRight";
|
|
|
- import napTank from "./front/napTank";
|
|
|
- import ethyleneTank from "./front/ethyleneTank";
|
|
|
- import acrylicTank from "./front/acrylicTank";
|
|
|
- import productTank from "./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,
|
|
|
- redirect: undefined
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- centerLeft1,
|
|
|
- centerLeft2,
|
|
|
- centerRight1,
|
|
|
- centerRight2,
|
|
|
- center,
|
|
|
- bottomLeft,
|
|
|
- bottomRight,
|
|
|
- frontTwo,
|
|
|
- materialBalance,
|
|
|
- chartRight,
|
|
|
- napTank,
|
|
|
- ethyleneTank,
|
|
|
- acrylicTank,
|
|
|
- productTank
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route: {
|
|
|
- handler: function(route) {
|
|
|
- this.redirect = route.query && route.query.redirect;
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- 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
|
|
|
- }
|
|
|
- },
|
|
|
- openNewWindow() {
|
|
|
- window.open('http://www.baidu.com');//path是文件的全路径地址
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- body {
|
|
|
- font-size: 12px !important;
|
|
|
- }
|
|
|
-</style>
|
