index.vue

<template>
    <div  style="width: 100vw;height: 100%vh;background: rgb(247, 247, 247);">
        <div class="entrance">
            <div class="entrance-l">
                <div class="entrance-l-t">
                    <div class="ent-l ent">
                        <span>人员出入</span>
                        <div class="ent-div"></div>
                        <div class="ent-ruchang">
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/Shape.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>入场</span>
                                    <div style="color: #0fb980;">{{importCount?importCount:0}}</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/11.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>出场</span>
                                    <div style="color: #f95f5f;">{{exportCount?exportCount:0}}</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/user.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>在场</span>
                                    <div style="color: #3a65ed">{{stayInCount?stayInCount:0}}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ent-l ent">
                        <span>车辆出入</span>
                        <div class="ent-div"></div>
                        <div class="ent-ruchang">
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/Group 1.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>入场</span>
                                    <div style="color: #0fb980;">{{importCars}}</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/Gr.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>出场</span>
                                    <div style="color: #f95f5f;">{{exportCars}}</div>
                                </div>
                            </div>
                            <div class="ent-ru-in">
                                <div class="ru-in-l">
                                    <img src="../../assets/img/Group.png" alt="">
                                </div>
                                <div class="ru-in-r">
                                    <span>在场</span>
                                    <div style="color: #3a65ed">{{stayInCars}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="entrance-l-a">
                    <div class="ent-b-car1">
                        <span>人员入场</span>
                        <div class="ent-div"></div>
                        <div class="ent-b-in">
                            <div class="a-in1">
                                <el-image style="height: 100%" :src="lastImportData.catchPic ? lastImportData.catchPic : require('@/assets/img/biguser.png')" :preview-src-list="[lastImportData.catchPic]" alt=""/>
                            </div>
                            <div class="a-in2">
                                <div>人员姓名：<span>{{lastImportData?lastImportData.personName:"-"}}</span> </div>
                                <div>员工ID：<span>{{lastImportData?lastImportData.personNum:"-"}}</span> </div>
                                <div>入场时间：<span>{{lastImportData?lastImportData.actionTime:"-"}}</span> </div>
                            </div>
                        </div>
                    </div>
                    <div class="ent-b-car1">
                        <div class="a-car-out">
                            <div>人员出场</div>
                            <!--<div style="color: #c5c6c7;font-size: 14px;">出入记录</div>-->
                        </div>
                        <div class="ent-div"></div>
                        <div class="ent-b-in">
                            <div class="a-in1">
                                <el-image style="height: 100%" :src="lastExportData.catchPic ? lastExportData.catchPic : require('@/assets/img/biguser.png')" :preview-src-list="[lastExportData.catchPic]" alt=""/>
                            </div>
                            <div class="a-in2">
                                <div>人员姓名：<span>{{lastExportData?lastExportData.personName:"-"}}</span> </div>
                                <div>员工ID：<span>{{lastExportData?lastExportData.personNum:"-"}}</span> </div>
                                <div>出场时间：<span>{{lastExportData?lastExportData.actionTime:"-"}}</span> </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="entrance-l-b">
                    <div class="ent-b-car1">
                        <span>车辆入场</span>
                        <div class="ent-div"></div>
                        <div class="ent-b-in">
                            <img src="../../assets/img/car.png" alt="">
                            <div>车辆类型：<span></span>{{lastImportCarData ? lastImportCarData.cName : "-"}}</div>
                            <div>车辆号牌：<span>{{lastImportCarData?lastImportCarData.plateNumber:"-"}}</span> </div>
                            <div>入场时间：<span>{{lastImportCarData?changeDateFormat(lastImportCarData.inParkTime):"-"}}</span> </div>
                        </div>
                    </div>
                    <div class="ent-b-car1">
                        <div class="a-car-out">
                            <div>车辆出场</div>
                            <!--<div style="color: #c5c6c7;font-size: 14px;">出入记录</div>-->
                        </div>
                        <div class="ent-div"></div>
                        <div class="ent-b-in">
                            <img src="../../assets/img/car.png" alt="">
                            <div>车辆类型：<span></span>{{lastExportCarData ? lastExportCarData.cName : "-"}}</div>
                            <div>车辆号牌：<span>{{lastExportCarData?lastExportCarData.plateNumber:"-"}}</span> </div>
                            <div>出场时间：<span>{{lastExportCarData?changeDateFormat(lastExportCarData.outParkTime):"-"}}</span> </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="entrance-r">
                <span>园区内车辆</span>
                <div class="ent-div"></div>
                <div class="ent-yuanqu">
                    <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="plateNumber"
                        label="车牌号"
                        width="170">
                    </el-table-column>
                    <el-table-column
                        prop="cName"
                        label="类型">
                    </el-table-column>
                    <el-table-column
                        prop="inParkTime"
                        label="入场时间"
                        width="200">
                    </el-table-column>
                    </el-table>
                    <!-- <el-pagination
                        layout="prev, pager, next"
                        :total="1000">
                    </el-pagination> -->
                </div>
            </div>

        </div>
    </div>

  </template>

  <script>
  import { getEntranceGuardPersonInfo,statisticsVehicles } from "@/api/entranceguard/entranceguardPerson"
  export default {
    name: "",
    data() {
        return {
          tableData: [],
          //入场人数
          exportCount:"",
          //出场人数
          importCount:"",
          //在场人数
          stayInCount:"",
          //最新入场信息
          lastImportData:{},
          //最新出场信息
          lastExportData:{},
          //出场车辆
          exportCars:"",
          //入场车辆数
          importCars:"",
          //在场人数
          stayInCars:"",
          //最新入场信息
          lastImportCarData:{},
          //最新出场信息
          lastExportCarData:{},
          timer:"",
          aaa:require("@/assets/img/biguser.png")
        }
      },
    created(){
      let that = this;
      that.initPersonData();
      that.initVehicleData();
      let timer = setInterval(() => {
        that.initPersonData();
        that.initVehicleData();
      }, 3000);
      this.$once('hook:beforeDestroy', () => {
          clearInterval(timer)
          timer = null
      })
    },
    methods:{
      initPersonData(){
        getEntranceGuardPersonInfo().then(res =>{
          //入场人数
          this.importCount = res.data.importCount;
          //出场人数
          this.exportCount = res.data.exportCount;
          //在场人数
          this.stayInCount = res.data.stayInCount;
          //最新入场信息
          this.lastImportData = res.data.lastImportData;
          //最新出场信息
          this.lastExportData = res.data.lastExportData;
        })
      },
      initVehicleData(){
        statisticsVehicles().then(res =>{
          //入场车辆数
          this.importCars = res.data.importCount;
          //出场车辆数
          this.exportCars = res.data.exportCount;
          //在场车辆数
          this.stayInCars = res.data.stayInCount;
          //在场车辆
          this.tableData = res.data.stayInCarsData;
          //最新入场信息
          this.lastImportCarData = res.data.lastImportData;
          //最新出场信息
          this.lastExportCarData = res.data.lastExportData;
        })
      },
      changeDateFormat(jsondate) {
        if(!jsondate){
          return;
        }
        return new Date(jsondate).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
      }
    }
  };
  </script>
  <style lang="scss" scoped>
    .entrance{
        width: 85%;
        height: calc(100vh - 50px);
        padding: 30px;
        display: flex;
        justify-content: space-between;
        .entrance-l{
            width: 60%;
            height: 100%;
            /* padding: 20px; */
            .entrance-l-t{
                width: 100%;
                height: 20%;
                display: flex;
                justify-content: space-between;
                .ent{
                    width: 48%;
                    height: 100%;
                    border-radius: 7px;
                    background: #fff;
                    padding: 20px;
                }
                .ent-l{
                    .ent-ruchang{
                        width: 100%;
                        height: 100%;
                        padding-top: 10px;
                        display: flex;
                        justify-content: space-between;

                        .ent-ru-in{
                            width: 100%;
                            height: 30%;
                            display: flex;
                            margin-top: 4%;
                            .ru-in-l{
                                width: 50px;
                                height: 50px;
                                border-radius: 50px;
                                background: rgb(247, 247, 247);
                                line-height: 55px;
                                text-align: center;
                                margin-top: 10px;
                                img{
                                    width: 35%;
                                }
                            }
                            .ru-in-r{
                                padding: 7px 0 0 10px;
                                span{
                                    font-size: 15px;
                                }
                                div{
                                    font-size: 25px;
                                    margin-top: 7px;
                                }
                            }
                        }
                    }
                }
                .ent-r{
                    .ent-r-car{
                        width: 100%;
                        height: 95%;
                        display: flex;
                        justify-content: space-around;
                        .r-car-in{
                            width: 25%;
                            height: 60%;
                            margin-top: 20%;
                            background-color: rgb(247, 247, 247);
                            border-radius: 15px;
                            text-align: center;
                            img{
                                margin-top: 40%;
                            }
                            p{
                                margin-top: 40%;
                                font-size: 30px;
                            }
                        }
                    }
                }
            }
            .entrance-l-a{
                width: 100%;
                height: 27%;
                margin-top: 2%;
                border-radius: 7px;
                background: #fff;
                display: flex;
                justify-content: space-between;
                .ent-b-car1{
                    width: 47%;
                    height: 90%;
                    padding: 20px;
                    .a-car-out{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                    }
                    .ent-b-in{
                        padding: 7% 20px 20px 20px;
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        height: 100%;
                        .a-in1{
                            width: 30%;
                            height: 100%;
                            img{
                                width: 100%;
                            }
                        }
                        .a-in2{
                            width: 65%;
                            height: 90%;
                            display: flex;
                            flex-direction:column;
                            align-content: flex-end;
                            div{
                                font-size: 15px;
                                span{
                                    color: #a39e9e;
                                }
                            }
                            div:nth-child(2){
                                margin-top: 35px;
                            }
                            div:last-child{
                                margin-top: 35px;
                            }

                        }

                    }
                }
            }
            .entrance-l-b{
                width: 100%;
                height: 49%;
                margin-top: 2%;
                border-radius: 7px;
                background: #fff;
                display: flex;
                justify-content: space-between;
                .ent-b-car1{
                    width: 47%;
                    height: 90%;
                    padding: 20px;
                    .a-car-out{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                    }
                    .ent-b-in{
                        padding: 30px 20px;
                        img{
                            width: 100%;
                        }
                        div{
                            margin-top: 20px;
                            span{
                                color: #a39e9e;
                            }
                        }
                    }
                }
            }
        }
        .entrance-r{
            width: 38%;
            height: 100%;
            background: #fff;
            border-radius: 7px;
            padding: 20px;
            .ent-yuanqu{
                width: 100%;
                height: 95%;
                padding: 10px;
                text-align: center;
            }
        }
    }

.ent-div{
   width: 100%;
   height: 1px;
   background-color: rgb(205, 207, 209);
   margin-top: 7px;
}
::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table tr td .cell {
    text-align: center;
}
  </style>