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

<template>
  <el-col :span="24" class="tongxingguanli modular">
    <el-col class="top" >
      <span class="biao"></span>
      <span class="title">通行管理</span>
    </el-col>
    <el-row class="wrap" :gutter="32">
      <el-col class="left" :span="12">
        <el-col class="top" :span="24">
          <el-col class="left" :span="6">
            <el-col class="top">今日总人流量</el-col>
            <el-col class="bottom" >
              <el-col class="num">{{data1.n1}}<span class="unit">人/次</span></el-col>
            </el-col>
          </el-col>
          <el-col class="middle middleRight" :span="9">
            <el-col class="top">
              <el-col class="attribute">今日考勤人数：<span class="num">{{data1.n2}}</span><span class="unit">人/次</span></el-col>
            </el-col>
            <el-col class="bottom" >
              <el-col class="attribute">今日访客通行：<span class="num">{{data1.n3}}</span><span class="unit">人/次</span></el-col>
            </el-col>
          </el-col>
          <el-col class="bottom middleRight" :span="9">
            <el-col class="top">
              <el-col class="attribute">无感考勤效率提升：<span class="num">{{data1.n4}}</span><span class="unit">%</span></el-col>
            </el-col>
            <el-col class="bottom" >
              <el-col class="attribute">访客通行效率提升：<span class="num">{{data1.n5}}</span><span class="unit">%</span></el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col class="bottom" :span="24">
          <el-col class="left" :span="6">
            <el-image :src="img9" fit="scale-down"/>
            <el-col class="title">人员通行</el-col>
          </el-col>
          <el-col class="right" ><lineE :resData="lineData"/></el-col>
        </el-col>
      </el-col>
      <el-col class="right" :span="12">
        <el-col class="top" :span="24">
          <el-col class="left" :span="6">
            <el-col class="top">今日总车流量</el-col>
            <el-col class="bottom" >
              <el-col class="num">{{data2.n1}}<span class="unit">辆/次</span></el-col>
            </el-col>
          </el-col>
          <el-col class="middle middleRight" :span="16">
            <el-col class="top" style="padding-left:0;">
              <el-col class="attribute">地下停车场流量：<span class="num">{{data2.n2}}</span><span class="unit">辆/次</span></el-col>
            </el-col>
            <el-col class="bottom" style="padding-left:0;">
              <el-col class="attribute">VIP停车场流量：<span class="num">{{data2.n3}}</span><span class="unit">辆/次</span></el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col class="bottom" :span="24">
          <el-col class="left" :span="6">
            <el-image :src="img10" fit="scale-down"/>
            <el-col class="title">无人值守车辆通行</el-col>
          </el-col>
          <el-col class="right" ><lineE2 :resData="lineData2"/></el-col>
        </el-col>
      </el-col>
    </el-row>
  </el-col>
</template>
<script>
import axios from 'axios'
import img9 from "@/assets/images/9.png";
import img10 from "@/assets/images/10.png";
import lineE from "@/components3/tongxingguanli/lineE.vue";
import lineE2 from "@/components3/tongxingguanli/lineE2.vue";
export default {
  name: "tongxingguanli",
  props:["resInfo"],
  components: {
    lineE,
    lineE2
  },
  data() {
    return {
      data1:{
        n1:0,
        n2:0,
        n3:0,
        n4:0,
        n5:0,
      },
      data2:{},
      img9:img9,
      img10:img10,
      lineData:[],
      lineData2:[],
    };
  },
  watch:{
    resInfo(val,old){
      // this.data1 = val.people.data
      this.data2 = val.car.data
      let data = [
        [],
        [],
        [],
        [],
      ]
      axios({
        method: 'get',
        url: 'http://10.21.39.6:8087/api/thirdparty/v1/openInterface/yunUserRequest',
        timeout: 10000,
      }).then(res =>{
          let total = 0

          if(res.data){
            for(let i=0;i<res.data.length;i++){
              data[0].push(res.data[i].access_time)
              data[1].push(res.data[i].card_number)
              data[2].push(val.people.line[0][i])
              data[3] = val.people.line[1]
              this.data1.n1 = this.data1.n1 + res.data[i].card_number
            }
          }
          this.lineData = data
      }).catch(err =>{
      })
      this.data1.n2 = val.people.data.n2
      this.data1.n3 = val.people.data.n3
      this.data1.n4 = val.people.data.n4
      this.data1.n5 = val.people.data.n5
      this.lineData2 = val.car.line
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/common.scss';
.wrap{
  color:$white;
  box-sizing: border-box;
  padding: 0 24px;
  >div{
    margin-top:10px;
  }
  >.left{
    >.top{
      height:90px;
      background: rgba(77,85,101,0.25);
      padding:16px 0 16px 0px !important;
      >.left{
        >.top{
          font-size: 16px;
          padding:0 !important;
        }
        >.bottom{
          margin-top:6px;
          font-weight: 700;
          padding:0 !important;
          .num{
            font-size: 24px;
            .unit{
              font-size: 20px;
            }
          }
        }
      }
      >.middle{
        border-left:1px solid #fff;
        border-right:1px solid #fff;
      }
      >.middleRight{
         padding:0 !important;
        >.top{
          font-size: 16px;
          padding:0 !important;
          // background: red;
          .attribute{
            .num{
              font-size: 20px;
              font-weight: 700;
            }
          }
        }
        >.bottom{
          padding:0 !important;
          margin-top:6px;
          font-size: 16px;
          .attribute{
            .num{
              font-size: 20px;
              font-weight: 700;
            }
          }
        }
      }
    }
    >.bottom{
      position: relative;
      >.left{
        height:100px;
        margin:12px 0  0 -16px !important;
        text-align: center;
        background-image: linear-gradient(180deg, rgba(77,85,101,0.00) 0%, #4D5565 100%);
        font-weight: 700;
        font-size: 14px;
        .el-image{
          margin:-4px 0 10px;
        }
      }
    }
  }
  >.right{
    >.top{
      height:90px;
      background: rgba(77,85,101,0.25);
      padding:16px 0 16px 16px;
      >.left{
        padding:0 !important;
        >.top{
          font-size: 16px;
          padding:0 !important;
        }
        >.bottom{
          margin-top:6px;
          font-weight: 700;
          padding:0 !important;
          .num{
            font-size: 26px;
            .unit{
              font-size: 20px;
            }
          }
        }
      }
      >.middle{
        border-left:1px solid #fff;
        padding:0 !important;
      }
      >.middleRight{
        padding:0 12px;
        >.top{
          font-size: 16px;
          .attribute{
            .num{
              font-size: 20px;
              font-weight: 700;
            }
          }
        }
        >.bottom{
          margin-top:6px;
          font-size: 16px;
          .attribute{
            .num{
              font-size: 20px;
              font-weight: 700;
            }
          }
        }
      }
    }
    >.bottom{
      position: relative;
      >.left{
        height:100px;
        margin:12px 0 0  -16px;
        text-align: center;
        background-image: linear-gradient(180deg, rgba(77,85,101,0.00) 0%, #4D5565 100%);
        font-weight: 700;
        font-size: 14px;
        padding:0 !important;

        .title{
          padding:0 !important;
        }
        .el-image{
          margin:-4px 0 10px;
        }
      }
    }
    .content{
      margin-top:40px;
      .attribute{
          margin-top:-70px;
          vertical-align: middle;
          font-size: 20px;
          margin-left: 78px;
          .num {
            font-size: 30px;
            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;
            }
          }
      }
    }

  }
}
.attribute{
  padding:0 0 0 16px !important;
}
.num{
    padding:0 !important;
  }
</style>