DX-LargeScreen/src/components3/zuhuguanli/index.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: wt
 * @Date: 2023-05-31 10:35:11
 * @LastEditors: wt
 * @LastEditTime: 2023-06-01 11:41:55
-->
<template>
  <el-col :span="24" class="xiaofangjiangkong modular modularTop">
    <el-col class="top" >
      <span class="biao"></span>
      <span class="title">租户管理</span>
    </el-col>
    <el-row class="wrap">
      <el-col class="left" :span="10">
          <el-col class="content" :span="24">
            <p class="title">出租区域清单</p>
          </el-col>
          <el-col class="contentTable" :span="24" >
            <seTable :resData="data1" />
          </el-col>
      </el-col>
      <el-col class="middle" :span="14">
        <el-col class="content" :span="12">
          <el-col>
            <p class="title">租户耗能情况（千瓦时）</p>
            <pie1 :resData="data2"/>
          </el-col>
        </el-col>
        <el-col class="content" :span="12">
          <el-col>
            <p class="title">租户缴费情况（元）</p>
            <pie2 :resData="data3"/>
          </el-col>
        </el-col>
        <div class="lineL">
           <el-image :src="line1"></el-image>
         </div>
      </el-col>
    </el-row>
  </el-col>
</template>
<script>
import pie1 from "@/components3/zuhuguanli/pie1.vue";
import pie2 from "@/components3/zuhuguanli/pie2.vue";
import line1 from "@/assets/images/line1.png";
import seTable from "@/components3/zuhuguanli/seTable.vue";
export default {
  name: "zhihuibangong",
  props:["resInfo"],
  components: {
  	pie1,
    pie2,
    seTable
  },
  data() {
    return {
      line1:line1,
      data1:{},
      data2:{},
      data3:{},
    };
  },
  watch:{
    resInfo(val,old){
      this.data1 = val.table
      this.data2 = val.pie1
      this.data3 = val.pie2
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
.wrap{
  color:$white;
  width:calc(100% - 54px);
  margin-left:24px;
  .left{
    margin-top:30px;
  }
  >.middle{
    padding-left:30px;
    margin-top:30px;
    position: relative;
    .lineL{
      height:240px;
      position: absolute;
      left:240px;
      top:-60px;
    };
  }
}
.content{
  .title{
    width:100%;
    text-align: center;
    margin:-20px auto 16px;
    font-size: 18px;
    font-weight: 700;
  }
}
</style>