zhitan-cloud
2024-08-29 8eeb34c0adcaaa2b56311fc6d8fdf454d82ac700
energy_management_ui/src/views/index.vue
@@ -23,14 +23,16 @@
        </div>
      </div>
    </el-card> -->
    <el-row type="flex" class="data-indicator-overview">
      <el-col class="home-body-left">
        <el-card class="body-left-title" :bordered="false">
    <el-card
      class="body-left-title"
      :bordered="false"
      style="margin-bottom: 12px;"
    >
          <div slot="header" class="clearfix">
            <span>当日双控数据指标总览</span>
          </div>
          <el-row class="double-data-show-content">
            <el-col :span="4" class="total">
        <el-col :span="5" class="total">
              <img alt="" src="~@/assets/home/zonghe.svg" />
              <div class="left-title-style">
                <div>
@@ -44,7 +46,7 @@
              class="co2"
              v-for="(item, index) in energyStatistic"
              :key="index"
              style="border-left: 1px solid #e9e9e9;"
          style="border-left: 1px solid #999;"
            >
              <img
                v-if="item.item.includes('电')"
@@ -82,11 +84,7 @@
                </div>
              </div>
            </el-col>
            <el-col
              :span="5"
              class="total"
              style="border-left: 1px solid #e9e9e9;"
            >
        <el-col :span="5" class="total" style="border-left: 1px solid #999;">
              <img alt="" src="~@/assets/home/wen.png" />
              <div class="left-title-style">
                <div>
@@ -95,11 +93,7 @@
                </div>
              </div>
            </el-col>
            <el-col
              :span="5"
              class="total"
              style="border-left: 1px solid #e9e9e9;"
            >
        <el-col :span="5" class="total" style="border-left: 1px solid #999;">
              <img alt="" src="~@/assets/home/shi.png" />
              <div class="left-title-style">
                <div>
@@ -110,6 +104,8 @@
            </el-col>
          </el-row>
        </el-card>
    <el-row type="flex" class="data-indicator-overview">
      <el-col class="home-body-left">
        <el-card :bordered="false" class="body-left-title">
          <div slot="header" class="clearfix">
            <span>能源实时监测</span>
@@ -120,7 +116,7 @@
            }}</span>
            <BarChart class="line-content" :chartData="chartDataObj" />
          </div>
          <div class="chart-wrapper" style="border-top: 1px solid #e9e9e9">
          <div class="chart-wrapper" style="border-top: 1px solid #999">
            <span class="chart-left-unit">{{
              `水/单位${monitoringWaterUnit}`
            }}</span>
@@ -169,6 +165,7 @@
            class="second-chat"
            :chartData="secondPieData"
            pieTitle="能耗设备占比"
            height="280px"
          />
        </el-card>
      </el-col>
@@ -187,7 +184,6 @@
  getHomeOutdoorTemperature
} from "@/api/home/home";
import mixins from "@/layout/mixin/getHeight";
import moment from "moment";
import PieChart from "./dashboard/PieChart";
import LineChart from "./dashboard/LineChart";
import BarChart from "./dashboard/BarChart";
@@ -256,9 +252,9 @@
    clearInterval(this.timer);
    clearInterval(this.timer30);
    this.getHomeOutdoorTemperatureData();
    this.timer = setInterval(() => {
      this.getHomeOutdoorTemperatureData();
    }, 12000);
    // this.timer = setInterval(() => {
    //   this.getHomeOutdoorTemperatureData();
    // }, 12000);
    this.timer30 = setInterval(() => {
      // this.getEnergyType();
      this.getSummationData();
@@ -549,17 +545,16 @@
<style lang="scss" scoped>
.home-show {
  background: #f0f2f5;
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100vh - 90px);
  // height: calc(100vh - 88px);
  .home-head {
    display: flex;
    align-items: center;
    .home-select-label {
      margin-right: 10px;
      color: #000;
      color: #fff;
      font-weight: 600;
    }
@@ -567,37 +562,6 @@
      margin: 0 8px;
    }
  }
  .chart-wrapper {
    padding: 10px 24px;
    position: relative;
    .chart-left-unit {
      position: absolute;
      top: 16px;
      left: 24px;
      color: #333;
      font-size: 18px;
    }
    .line-content {
      margin: 4px 0 0 0;
      height: 300px;
    }
  }
  .data-indicator-overview {
    ::v-deep .el-card__body {
      padding: 0 !important;
    }
    .home-body-left {
      width: 66.3%;
      height: 100%;
      .body-left-title {
        margin: 0 16px 0px 0;
      }
      .double-data-show-content {
        display: flex;
        align-items: center;
@@ -625,15 +589,45 @@
          .unit {
            font-size: 22px;
            color: #000000;
        color: #fff;
            margin-top: 4px;
          }
        }
      }
  .chart-wrapper {
    padding: 10px 24px;
    position: relative;
    .chart-left-unit {
      position: absolute;
      top: 16px;
      left: 24px;
      color: #fff;
      font-size: 18px;
    }
    .line-content {
      margin: 4px 0 0 0;
      height: 300px;
    }
  }
  .data-indicator-overview {
    ::v-deep .el-card__body {
      padding: 0 !important;
    }
    .home-body-left {
      width: 66.3%;
      height: 100%;
      .body-left-title {
        margin: 0 16px 0px 0;
      }
      .left-line-style {
        padding: 24px;
        color: #000000;
        color: #fff;
        .radio-list {
          width: 122px;
@@ -656,7 +650,7 @@
            position: absolute;
            top: 16px;
            left: 0;
            color: #333;
            color: #fff;
          }
          .line-content {
@@ -700,7 +694,7 @@
                .number {
                  font-size: 24px;
                  color: #000000;
                  color: #fff;
                }
              }
            }
@@ -718,7 +712,7 @@
        .first-chat {
          margin: 10px 0 0 0;
          height: 340px;
          height: 300px;
        }
      }
@@ -727,7 +721,7 @@
        .second-chat {
          margin: 10px 0 0 0;
          height: 340px;
          height: 290px;
        }
        .bottom-description-list {
@@ -744,7 +738,7 @@
            .energy-cost-sum {
              font-size: 24px;
              color: #000000;
              color: #fff;
            }
          }