<template>
  <div class="app-container tenant-home">
    主页暂未开发
    <!-- <div class="top-wrap">
      <div v-for="(doctTop, index) in topOption" :Key="index">
        <div class="icon-wrap">
          <img :src="doctTop.leftImg" class="top-img" alt="dark" />
          <span :class="'jg-span ' +  doctTop.spanClass"></span>
        </div>
        <div class="info-block">
          <span>{{doctTop.title}}</span>
          <div class="info-wrap" :style="{'color': doctTop.valueColor}">{{topValue[doctTop.value]}}</div>
        </div>
      </div>
    </div>
    <div class="beas-wrap">
      <div>

      </div>
    </div> -->
  </div>
</template>
<script>
// import './rhea.js'
// var container = require('./rhea.js');
// var container = require('rhea');
export default {
  name: "tenantHome",
  data() {
    return {
      topValue: {
        farstValue: 158,
        twoValue: 5,
        threeValue: 159,
        lastVlaue: 1158
      },
      topOption: [
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "farstValue",
          title: "注册用户"
        },
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "twoValue",
          title: "项目总数"
        },
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "threeValue",
          title: "设备总数"
        },
        {
          leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
          spanClass: "span-bg1",
          valueColor: "#b176e9",
          value: "lastVlaue",
          title: "告警总数"
        }
        // {
        //   leftImg: "/images/quickStart_icon_subuserCounts.992898a.png",
        //   spanClass: "span-bg1",
        //   valueColor: "#b176e9",
        //   value: "lastVlaue",
        //   title: "注册用户 (单位: 人)"
        // }
      ]
    };
  },
  created(){
    // console.log(container)
    // var connection = container['__proto__'].websocket_connect({'host':'192.168.18.134','port':5672,'username':'admin','password':'fd2018'});
    // console.log(connection)
  }
};
</script>
<style lang="scss">
.tenant-home {
  .top-wrap {
    width: calc(100%);
    display: flex;
    justify-content: space-between;
    > div {
      width: calc((100% - 60px) / 4);
      height: 120px;
      display: flex;
      padding: 10px 10px;
      color: #f7f7f7;
      align-items: center;
      justify-content: space-around;
      box-shadow: 0px 0px 5px #a5a4a4;
      .icon-wrap {
        width: 35%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .top-img {
          width: 55%;
          height: 60%;
        }
        .jg-span {
          display: block;
          width: 3px;
          background: #c7c3c3;
          height: 70px;
          margin: 0 10px;
          background: -webkit-linear-gradient(
            bottom,
            #2196f36e,
            #b176e9 50%,
            #2196f36e
          );
        }
        .span-bg1 {
          background: -webkit-linear-gradient(
            bottom,
            #2196f36e,
            #b176e9 50%,
            #2196f36e
          );
        }
      }
      .info-block {
        width: calc(100% - 35%);
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 75%;
        align-items: center;
        justify-content: left;
        .info-wrap {
          color: #b176e9;
          font-size: 1.5vw;
          width: 100%;
          height: 70%;
          align-items: center;
          display: flex;
        }
        > span {
          color: #9c9c9c;
          font-size: 14px;
          display: block;
          height: 20px;
          text-align: left;
          padding-right: 10px;
          position: relative;
          top: 0px;
          left: -6px;
        }
      }
    }
    > div:hover{
      box-shadow: 0px 0px 5px #4db8f7;
    }
  }
  .beas-wrap {
    height: calc((100vh - 260px));
    width: 100%;
    border: 1px solid red;
    margin-top: 10px;
  }
}
</style>
