large_screen/src/views/gas/configImg/index.vue

<template>
  <div id="appp">
    <div id="index" ref="appRef">
      <div class="bg">
        <div class="host-body">
          <div class="d-flex jc-center">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
              <dv-decoration-8
                class="dv-dec-8"
                :color="['#568aea', '#000000']"
              />
              <div class="title">
                <span class="title-text"></span>
                <dv-decoration-6
                  class="dv-dec-6"
                  :reverse="true"
                  :color="['#50e3c2', '#67a1e5']"
                />
              </div>
              <dv-decoration-8
                class="dv-dec-8"
                :reverse="true"
                :color="['#568aea', '#000000']"
              />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
          <!-- 第二行 -->
          <div class="d-flex jc-between px-2">
            <div class="d-flex aside-width">
              <button
                @click="change"
                style="
                  background-color: rgba(16, 112, 255, 0.651);
                  border: 0.0125rem solid rgba(101, 255, 12, 0.377);
                  color: white;
                  width: 100px;
                "
              >
                返回
              </button>
              <div class="react-left ml-4 react-l-s">
                <span class="react-before"></span>
                <span class="text">数据看板</span>
              </div>
            </div>
            <div class="d-flex aside-width">
              <div class="react-right bg-color-blue mr-3">
                <span class="text fw-b"
                  >{{ this.$route.params.id }}#瓦斯泵</span
                >
              </div>
              <div class="react-right mr-4 react-l-s">
                <span class="react-after"></span>
                <span class="text"
                  >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
                >
              </div>
            </div>
          </div>

          <div class="body-box">
            <div class="content-box">
              <dv-border-box-12>
                <centerLeft1 />
              </dv-border-box-12>
              <dv-border-box-12>
                <center />
              </dv-border-box-12>
              <div>
                <dv-border-box-12>
                  <centerRight1 />
                </dv-border-box-12>
              </div>
            </div>

            <div class="bototm-box">
              <div style="flex: 1">
                <dv-border-box-12>
                  <bottomLeft />
                </dv-border-box-12>
              </div>
              <div style="flex: 1">
                <dv-border-box-12>
                  <!-- <bottomRight /> -->
                </dv-border-box-12>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index.js";
import centerLeft1 from "./centerLeft1";
import centerRight1 from "./centerRight1";
import center from "./center";
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
export default {
  data() {
    return {
      timing: null,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      int: 4,
      sum: 0,
      update: 0,
      oldres: [],
      res: [
        {
          GasPump1: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 114,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          GasPump2: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 110,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          CoolantPump1: {
            PumpEnabled: "false",
          },
          CoolantPump2: {
            PumpEnabled: "false",
          },
          CoolingTower: {
            TowerEnabled: "false",
          },
          HighPool: {
            Temperature: 45.1,
            WaterLevel: 19,
          },
          LowPool: {
            Temperature: 45.2,
            WaterLevel: 22,
          },
          PipeValves: {
            Pump1Enabled: "true",
            Pump2Enabled: "false",
            Pump3Enabled: "true",
            Pump4Enabled: "false",
            Pump5Enabled: "true",
            Pump6Enabled: "false",
          },
          Pipe: {
            PipeNegativePressure: 13.5,
            PumpingTemperature: 47.1,
            GasConcentration: 0.85,
            Flow: 999.1,
          },
        },
        {
          GasPump1: {
            PumpWaterSupply: "false",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 114,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          GasPump2: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 114,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          CoolantPump1: {
            PumpEnabled: "false",
          },
          CoolantPump2: {
            PumpEnabled: "false",
          },
          CoolingTower: {
            TowerEnabled: "false",
          },
          HighPool: {
            Temperature: 45.1,
            WaterLevel: 19,
          },
          LowPool: {
            Temperature: 45.2,
            WaterLevel: 22,
          },
          PipeValves: {
            Pump1Enabled: "true",
            Pump2Enabled: "false",
            Pump3Enabled: "true",
            Pump4Enabled: "false",
            Pump5Enabled: "true",
            Pump6Enabled: "false",
          },
          Pipe: {
            PipeNegativePressure: 13.5,
            PumpingTemperature: 47.1,
            GasConcentration: 0.85,
            Flow: 999.1,
          },
        },
        {
          GasPump1: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 96,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          GasPump2: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 114,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          CoolantPump1: {
            PumpEnabled: "false",
          },
          CoolantPump2: {
            PumpEnabled: "false",
          },
          CoolingTower: {
            TowerEnabled: "false",
          },
          HighPool: {
            Temperature: 45.1,
            WaterLevel: 19,
          },
          LowPool: {
            Temperature: 45.2,
            WaterLevel: 22,
          },
          PipeValves: {
            Pump1Enabled: "true",
            Pump2Enabled: "false",
            Pump3Enabled: "true",
            Pump4Enabled: "false",
            Pump5Enabled: "true",
            Pump6Enabled: "false",
          },
          Pipe: {
            PipeNegativePressure: 13.5,
            PumpingTemperature: 47.1,
            GasConcentration: 0.85,
            Flow: 999.1,
          },
        },
        {
          GasPump1: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 110,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          GasPump2: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 114,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          CoolantPump1: {
            PumpEnabled: "false",
          },
          CoolantPump2: {
            PumpEnabled: "false",
          },
          CoolingTower: {
            TowerEnabled: "false",
          },
          HighPool: {
            Temperature: 45.1,
            WaterLevel: 19,
          },
          LowPool: {
            Temperature: 45.2,
            WaterLevel: 22,
          },
          PipeValves: {
            Pump1Enabled: "true",
            Pump2Enabled: "false",
            Pump3Enabled: "true",
            Pump4Enabled: "false",
            Pump5Enabled: "true",
            Pump6Enabled: "false",
          },
          Pipe: {
            PipeNegativePressure: 13.5,
            PumpingTemperature: 47.1,
            GasConcentration: 0.85,
            Flow: 999.1,
          },
        },
        {
          GasPump1: {
            PumpWaterSupply: "false",
            PumpEnabled: "false",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 70,
            MotorVoltage: 514,
            InletValveEnabled: "false",
            OutletValveEnabled: "false",
            ReducerShaftTemperature: 14.5,
          },
          GasPump2: {
            PumpWaterSupply: "true",
            PumpEnabled: "true",
            PumpTemperature: 31.5,
            MotorFrontShaftTemperature: 31.5,
            MotorRearShaftTemperature: 31.5,
            MotorPhaseTemperatureA: 31.5,
            MotorPhaseTemperatureB: 31.5,
            MotorPhaseTemperatureC: 31.5,
            MotorCurrent: 114,
            MotorVoltage: 514,
            InletValveEnabled: "true",
            OutletValveEnabled: "true",
            ReducerShaftTemperature: 14.5,
          },
          CoolantPump1: {
            PumpEnabled: "true",
          },
          CoolantPump2: {
            PumpEnabled: "true",
          },
          CoolingTower: {
            TowerEnabled: "false",
          },
          HighPool: {
            Temperature: 45.1,
            WaterLevel: 19,
          },
          LowPool: {
            Temperature: 45.2,
            WaterLevel: 22,
          },
          PipeValves: {
            Pump1Enabled: "true",
            Pump2Enabled: "false",
            Pump3Enabled: "true",
            Pump4Enabled: "false",
            Pump5Enabled: "true",
            Pump6Enabled: "false",
          },
          Pipe: {
            PipeNegativePressure: 13.5,
            PumpingTemperature: 47.1,
            GasConcentration: 0.85,
            Flow: 999.1,
          },
        },
      ],
    };
  },
  components: {
    centerLeft1,
    centerRight1,
    center,
    bottomLeft,
    bottomRight,
  },
  mounted() {
    this.dateDay = formatTime(new Date(), "HH: mm: ss");
    this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
    this.dateWeek = this.weekday[new Date().getDay()];
    this.timeFn();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    change() {
      this.$router.push({
        path: "/gas/mainpage",
      });
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
@import "@/assets/scss/style.scss";
#appp {
  width: 1700px;
  height: 850px;
  overflow: hidden;
  background-image: linear-gradient(
    to right,
    rgb(6, 19, 60) 0%,
    rgb(1, 22, 105) 50%,
    rgb(6, 19, 60) 100%
  );
  position: relative;
}
</style>