cac-fronted/src/views/homePage/index.vue

<template>
  <div class="homeBox">
    <div class="homeLeft">
      <div class="pageleftBox">
        <!-- <div class="divTop">我是上面</div> -->
        <oilChromatography @dataDispose="dataDispose"></oilChromatography>
        <clamp @dataDispose="dataDispose"></clamp>
        <windingTemperature @dataDispose="dataDispose"></windingTemperature>
      </div>
    </div>
    <div class="homeCenter">
      <div class="pagecenterBox">
        <div class="divTop">
          <homeChart :echartData="echartData"></homeChart>
        </div>
        <div class="divcenter">
          <partialDischarges @dataDispose="dataDispose"></partialDischarges>
        </div>
        <div class="divBottom">
          <warnMessage></warnMessage>
        </div>
      </div>
    </div>
    <div class="homeRight">
      <div class="pagerightBox">
        <div class="divTop">
          <monitoringDevice></monitoringDevice>
        </div>
        <div class="divcenter">
          <sf6 @dataDispose="dataDispose"></sf6>
        </div>
        <div class="divBottom">
          <arrester @dataDispose="dataDispose"></arrester>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import {
//   getTermStatistics,

// } from "@/utils/api/index";
// import pageLeft from "./components/pageLeft";
// import pageCenter from "./components/pageCenter";
import oilChromatography from "./oilChromatography/index.vue"; //油色谱
import clamp from "./clamp/index.vue"; //铁芯夹件
import windingTemperature from "./windingTemperature/index.vue"; //夹件
import homeChart from "./Echarts/index"; //折线图
import partialDischarges from "./partialDischarges/index.vue"; //局放

import monitoringDevice from "./monitoringDevice/index.vue"; //装置总数
import sf6 from "./sf6/index.vue"; //sf6环境
import arrester from "./arrester/index.vue"; //避雷器

import warnMessage from "./warnMessage/index.vue"; //告警列表
export default {
  name: "homepage",
  components: {
    oilChromatography,
    clamp,
    windingTemperature,
    partialDischarges,
    homeChart,
    monitoringDevice,
    sf6,
    arrester,
    warnMessage,
  },
  data() {
    return {
      echartData: {
        // 默认的图表数据
        legendData: [],
        xAxisData: [],
        tendencyChartTitle: "",
        seriesData: [],
      },
    };
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    dataDispose(legendData, xAxisData, seriesData, title) {
      console.log(legendData);
      console.log(xAxisData);
      console.log(seriesData);
      console.log(title);
      this.echartData = {
        legendData: legendData,
        xAxisData: xAxisData,
        seriesData: seriesData,
        tendencyChartTitle: title,
      };
      console.log(this.echartData);
    },
  },
};
</script>
<style lang="less">
.homeBox {
  width: 100%;
  height: 100%;

  display: flex;
  .homeLeft,
  .homeRight {
    width: 20%;
    height: 100%;
  }
  .homeCenter {
    padding: 0px 10px;
    width: 60%;
    .pagecenterBox {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      .divTop,
      .divcenter,
      .divBottom {
        position: relative;
      }
      .divTop {
        height: 380px;
        margin-bottom: 10px;
        background: rgba(8, 9, 36, 0.28);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: inset 0 4px 44px 0 #106cde;
      }
      .divcenter {
        height: 190px;
        margin-bottom: 10px;
        background: rgba(8, 9, 36, 0.28);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: inset 0 4px 44px 0 #106cde;
        //background: url(../../assets/card2Bg.png) no-repeat center;
        background-size: 100% 100%;
      }
      .divBottom {
        height: 248px;
        background: rgba(255, 27, 27, 0.2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: inset 0 4px 44px 0 rgba(235, 20, 20, 0.69);
        border: 1px solid #ff1b1b;
      }
    }
  }
  .pageleftBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // .divTop,
    // .divcenter,
    // .divBottom {
    //   background: url(../../assets/cardBg.png) no-repeat center;
    //   background-size: 100% 100%;
    //   position: relative;
    // }
    .divTop {
      height: 30%;
      margin-bottom: 10px;
    }
    .divcenter {
      height: 30%;
      margin-bottom: 10px;
    }
    .divBottom {
      height: 30%;
    }
  }
  .pagerightBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .divcenter,
    .divBottom {
      background: url(../../assets/card2Bg.png) no-repeat center;
      background-size: 100% 100%;
      position: relative;
    }
    .divTop {
      background: url(../../assets/card2Bg.png) no-repeat center;
      background-size: 100% 100%;
      height: 280px;
      margin-bottom: 10px;
    }
    .divcenter {
      height: 270px;
      margin-bottom: 10px;
    }
    .divBottom {
      height: 270px;
    }
  }
}
</style>