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

<template>
  <el-col :span="24" class="anquanjiance 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="13">
        <el-row class="content" >
          <el-col :span="12">
            <p class="title">本月安防事件</p>
            <pie :resData="pieData"/>
          </el-col>
          <el-col :span="12">
            <el-col class="listWrap">
              <el-col class="list">
                <el-image :src="img5" fit="scale-down"/>
                <el-col class="attribute"
                  >摄像头总数<el-col class="num"
                    >{{total}}<span class="unit">个</span></el-col
                  ></el-col
                >
              </el-col>
              <el-col class="list">
                <el-image :src="img5" fit="scale-down"/>
                <el-col class="attribute"
                  >本月安防巡更次数<el-col class="num"
                    >{{xungeng}}<span class="unit">次</span></el-col
                  ></el-col
                >
              </el-col>
              <el-col class="list">
                <el-image :src="img5" fit="scale-down"/>
                <el-col class="attribute"
                  >本月设备巡检次数<el-col class="num"
                    >{{xunjian}}<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="lineL">
          <el-image :src="line1"></el-image>
        </div>
        <el-row class="content">
          <el-col :span="16">
            <p class="title">巡更准时率</p>
            <pie2 :resData="pie2Data"/>
          </el-col>
          <el-col :span="8">
            <el-col class="listWrap" style="margin:20px 0 0 0px">
              <el-col class="list">
                <el-image :src="img6" fit="scale-down"/>
                <el-col class="attribute"
                  >巡更点位<el-col class="num"
                    >{{dianwei}}<span class="unit">个</span></el-col
                  ></el-col
                >
              </el-col>
              <el-col class="list">
                <el-image :src="img6" fit="scale-down"/>
                <el-col class="attribute"
                  >巡更任务<el-col class="num"
                    >{{renwu}}<span class="unit">个</span></el-col
                  ></el-col
                >
              </el-col>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-col>
</template>
<script>
import img5 from "@/assets/images/5.png";
import img6 from "@/assets/images/6.png";
import pie from "@/components3/anquanjiance/pie.vue";
import pie2 from "@/components3/anquanjiance/pie2.vue";
import line1 from "@/assets/images/line1.png";
export default {
  name: "nengyuan",
  props:["resInfo"],
  components: {
  	pie,
    pie2
  },
  data() {
    return {
      img5:img5,
      img6:img6,
      line1:line1,
      pieData:[],
      pie2Data:[],
      total:null,
      xungeng:null,
      xunjian:null,
      dianwei:null,
      renwu:null,
      month:null,
      day:null
    };
  },
  watch:{
    resInfo(val,old){
      this.month = new Date().getMonth() + 1
      this.day = new Date().getDate()
      this.total = val.af.total
      this.xungeng = val.af.xungeng * this.day
      this.xunjian = val.af.xunjian * this.day
      this.dianwei = val.xungeng.dianwei
      this.renwu = val.xungeng.renwu
      this.pieData = val.af
      this.pie2Data = val.xungeng
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
.wrap{
  color:$white;
  >.left,>.right{
    margin-left:24px;
    .content{
      margin-top:20px;
      .title{
        width:100%;
        text-align: center;
        margin:-10px auto 10px;
        font-size: 20px;
        font-weight: 700;
      }
      .listWrap{
        margin-top:-30px;
        .list{
          margin-top:15px;
          .el-image{
            width:24px;
            vertical-align: top;
            display: inline-block;
          }
          .attribute{
              margin-top:-26px;
              font-size: 20px;
              margin-left: 30px;
              .num {
                font-size: 25px;
                font-family: "微软雅黑";
                font-weight: 700;
                margin: 0.7vh 0 0 -2px;
                .unit {
                  font-size: 24px;
                  width: auto;
                  margin:10px 0 0 0px;
                  vertical-align: middle;
                }
              }
          }
        }
      }
    }
  }
  >.right{
    position: relative;
    .lineL{
      height:240px;
      position: absolute;
      left:-60px;
      top:-40px;
    }
  }
}
</style>