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

<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="3">
        <el-col :span="24" class="pingfeng">
          <el-col class="attribute"><el-image :src="img7" fit="scale-down"/>本月消防评分<el-col class="num">{{pingfen}}<span class="unit">分</span></el-col></el-col>
        </el-col>
      </el-col>
      <el-col class="middle" :span="10">
        <div class="lineL1">
          <el-image :src="line1"></el-image>
        </div>
        <el-row class="content" >
          <el-col :span="16">
            <p class="title">本月消防事件</p>
            <pie :resData="pieData"/>
          </el-col>
          <el-col :span="8">
            <el-col class="listWrap">
              <el-col class="list">
                <el-image :src="img8" fit="scale-down"/>
                <el-col class="attribute"
                  >1楼消防水压<el-col class="num"
                    >{{shuiya}}<span class="unit">MPa</span></el-col
                  ></el-col
                >
              </el-col>
              <el-col class="list">
                <el-image :src="img8" fit="scale-down"/>
                <el-col class="attribute"
                  >总表线缆湿度<el-col class="num"
                    >{{shidu}}<span class="unit">℃</span></el-col
                  ></el-col
                >
              </el-col>
              <el-col class="list">
                <el-image :src="img8" fit="scale-down"/>
                <el-col class="attribute"
                  >基础消防设备数<el-col class="num"
                    >{{shebei}}<span class="unit">个</span></el-col
                  ></el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="right" :span="10">
        <div class="lineL2">
          <el-image :src="line1"></el-image>
        </div>
        <el-row class="content">
          <el-col :span="24">
            <p class="title">消防设备工况</p>
            <pie2 :resData="pie2Data"/>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-col>
</template>
<script>
import img7 from "@/assets/images/7.png";
import img8 from "@/assets/images/8.png";
import pie from "@/components3/xiaofangjiangkong/pie.vue";
import pie2 from "@/components3/xiaofangjiangkong/pie2.vue";
import line1 from "@/assets/images/line1.png";
export default {
  name: "nengyuan",
  props:["resInfo"],
  components: {
  	pie,
    pie2
  },
  data() {
    return {
      img7:img7,
      img8:img8,
      line1:line1,
      pieData:[],
      pie2Data:[],
      pingfen:null,
      shuiya:null,
      shidu:null,
      shebei:null,
    };
  },
  watch:{
    resInfo(val,old){
      this.pingfen = val.pingfen
      this.shuiya = val.event.shuiya
      this.shidu = val.event.shidu
      this.shebei = val.event.shebei
      this.pieData = val.event
      this.pie2Data = val.shebei
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
.wrap{
  color:$white;
  margin-top:50px;
  .left_{
    margin:20px 0 0 24px;
    .attribute{
        font-size: 14px;
        width:90px;
        height:102px;
        text-align: center;
        background:  linear-gradient(180deg, rgba(77,85,101,0.00) 0%, #4D5565 100%);
        position: relative;
        margin:80px auto 0;
        .el-image{
          margin:-50px auto -4px;
          display: block;
        }
        .num {
          font-size: 16px;
          font-family: "微软雅黑";
          font-weight: 700;
          margin: 0.7vh 0 0 -2px;
          .unit {
            font-size: 16px;
            width: auto;
            margin:10px 0 0 0px;
          }
        }
      }


  }
  >.middle,>.right{
    position: relative;
    .lineL1{
      height:240px;
      position: absolute;
      left:0px;
      top:-40px;
    }
    .lineL2{
      height:240px;
      position: absolute;
      left:25px;
      top:-40px;
    }
    .content{
      margin-top:20px;
      .title{
        width:100%;
        text-align: center;
        margin:-10px auto 10px;
        font-size: 20px;
        font-weight: 700;
      }
      .listWrap{
        margin-top:-20px;
        .list{
          margin-top:15px;
          .el-image{
            width:24px;
            vertical-align: top;
            display: inline-block;
          }
          .attribute{
              margin-top:-26px;
              font-size: 14px;
              margin-left: 30px;
              .num {
                font-size: 18px;
                font-family: "微软雅黑";
                font-weight: 700;
                margin: 0.7vh 0 0 -2px;
                .unit {
                  font-size: 18px;
                  width: auto;
                  margin:10px 0 0 0px;
                }
              }
          }
        }
      }


    }
    >.left{

    }

  }

}
</style>