neic-hefeng/src/components/CenterPage.vue

/* 中间页面 */
<template>
  <div class="center-bar">
    <el-row :gutter="10">
      <el-col :span="8">
        <ProblemArea ref="problempg" :problems="problems" />
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <ControlArea />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <CheckArea />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <RecommendedArea />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <LabelArea />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <AlarmArea />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  <WindturbineDetailPages v-model="dialogVisible"></WindturbineDetailPages>
  </div>
</template>
<script>
import AlarmArea from "./area/AlarmArea.vue";
import CheckArea from "./area/CheckArea.vue";
import ControlArea from "./area/ControlArea.vue";
import LabelArea from "./area/LabelArea.vue";
import ProblemArea from "./area/ProblemArea.vue";
import RecommendedArea from "./area/RecommendedArea.vue";
import WindturbineDetailPages from "./area/windturbine/WindturbineDetailPages.vue"
/* import wtbdp from './area/wtbDetailPages'; */

export default {
  data(){
    return{
      dialogVisible:false
    }
  },
  mounted(){
    /* var self=this;
    wtbdp.$on("evnt",function(){
      self.dialogVisible=true;
    }); */
  },
  components: {
    AlarmArea,
    CheckArea,
    ControlArea,
    LabelArea,
    ProblemArea,
    RecommendedArea,
    WindturbineDetailPages
  },
  props: {
    /* temp: {
      type: Onject | Array,
      default: [],
    }, */
  },
  created: function () {
      
  },
  computed: {
    problems: {
      get: function () {
        return this.datas;
      },
      set: function (params) {
        this.datas = params;
        this.$refs.problempg.problems = params;
      },
    },
  },
  methods: {

  },
  watch: {
    /* temp(res) {
      this.mapData = res;
    }, */
  },
};
</script>

<style scoped>
.center-bar {
  position: relative;
  box-sizing: border-box;
  height: 90vh;
  background-color: #000000;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 3px;
  margin-left: 0;
  display: flex;
  flex-direction: column;
}
</style>