yinchuan-community-all/mini-program/garden-wxapp/pages/agency/comps/data-service.vue

<template>
    <view class="">
        <!-- 园区数据统计 -->
        <view class="">
            <view class="title">
                <image src="../../../static/icon/tag1.png" mode=""></image>
                <text>园区数据统计</text>
            </view>
            <view class="data-statistics" v-if="loading">
                <view class="item" v-for="(item,index) in agencyStatistical" :key="index">
                    <view class="data">
                        <text>{{item.num}}</text>
                        <text>{{item.title}}</text>
                    </view>
                </view>
            </view>
            <view v-else class="flex justify-center align-center padding-50">
                <u-loading mode="flower" size="150"></u-loading>
            </view>
        </view>

        <!-- 分割线 -->
        <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>


        <!-- 园区当日动态  begin-->
        <!-- <view class="title">
            <image  src="../../../static/icon/tag1.png" mode=""></image>
            <text >园区当日动态</text>
        </view>
        <view class="desc">
            <view class="flex">
                <view class="bg-green progress"></view>
                <text class="padding-left-10">内部（人）</text>
            </view>
        </view>
        <view class="desc">
            <view class="flex">
                <view class="bg-red progress"></view>
                <text class="padding-left-10">外部（人）</text>
            </view>
        </view>

        <view class="today-statistics margin-top-20">
            <view  style="width: 30%;margin-top: 5rpx;">
                <text >驶入车辆：</text>
            </view>
            <view  class="cu-progress radius striped active margin-top-10">
                <view class="bg-green" :style="[{ width:loading?todayData.enterCarOfInsidePercen+'%':''}]">{{todayData.enterCarOfInside}}</view>
                <view v-if="todayData.enterCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.enterCarOfOutsidePercen+'%':''}]">{{todayData.enterCarOfOutside}}</view>
            </view>
        </view>
        <view class="today-statistics">
            <view  style="width: 30%;margin-top: 5rpx;">
                <text >驶出车辆：</text>
            </view>
            <view  class="cu-progress radius striped active margin-top-10">
                <view class="bg-green" :style="[{ width:loading?todayData.departCarOfInsidePercen+'%':''}]">{{todayData.departCarOfInside}}</view>
                <view v-if="todayData.departCarOfOutside!=0"  class="bg-red" :style="[{ width:loading?todayData.departCarOfOutsidePercen+'%':''}]">{{todayData.departCarOfOutside}}</view>
            </view>
        </view>
        <view class="today-statistics">
            <view  style="width: 30%;margin-top: 5rpx;">
                <text >人员统计：</text>
            </view>
            <view  class="cu-progress radius striped active margin-top-10">
                <view class="bg-green" :style="[{ width:loading?'100%':''}]">{{todayData.peopleNum}}</view>
            </view>
        </view>
        <pie :pieData="pieData" v-if="!$isEmpty(pieData)"></pie> -->
        <!-- 园区当日动态  begin-->

        <!-- 分割线 -->
        <!-- <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view> -->
        <view class="title">
            <image src="../../../static/icon/tag1.png" mode=""></image>
            <text>近10天用电量</text>
        </view>
        <line :lineJson="lineJson" v-if="!$isEmpty(lineJson)"></line>

        <!-- 分割线 -->
        <view class="" style="background-color: #F1F1F1;height: 20rpx;"></view>

        <view class="title">
            <image src="../../../static/icon/tag1.png" mode=""></image>
            <text>人员进出记录</text>
        </view>
        <in-out-records></in-out-records>


    </view>
</template>
<script>
    import pie from "./canvas/pie.vue"
    import inOutRecords from "./canvas/in-out-records.vue"
    import line from "./canvas/Line.vue"

    var that;
    export default {
        components: {
            pie, inOutRecords, line
        },
        data() {
            return {
                //园区
                agencyId: '',
                tenantId: '',

                loading: false,

                //园区数据统计
                agencyStatistical: [],
                //园区当日动态
                todayData: {},

                lineJson: {},
                pieData: {}
            };
        },
        created() {
            that = this;
            this.agencyId = this.$cache.get('agencyId')
            this.tenantId = this.$cache.get('agencyTenantId')
            //园区数据统计
            this.fetchAgencyData()
            this.fetchTodayData()
            this.fetchElectricMeter()


            setTimeout(function () {
                that.loading = true
            }, 500)
        },
        methods: {
            async fetchElectricMeter() {
                let aelectricMeterStaticgencyId = this.$cache.get('agencyId')
                let res = await this.$api.statistical.electricMeterStatic({agencyId: '1338406098847293442'})
                this.lineJson = {
                    "categories": res.data.dates.slice(0, 10),
                    series: [{
                        name: '电表用量(Kwh)',
                        data: res.data.values.slice(0, 10),
                        color: '#5064eb'
                    }]
                }
            },
            // 园区数据统计
            fetchAgencyData() {
                this.$api.statistical.agencyStatistical({id: this.agencyId}).then(res => {
                    this.agencyStatistical = [
                        {
                            title: '园区分区',
                            num: res.residentials.length
                        },
                        {
                            title: '楼宇总数',
                            num: res.buildingCount
                        },
                        {
                            title: '企业总数',
                            num: res.enterpriseCount
                        },
                        {
                            title: '员工总数',
                            num: res.staffCount
                        },
                        {
                            title: '正常设备',
                            num: res.safetyDeviceCount
                        },
                        {
                            title: '告警总数',
                            num: res.warningDeviceCount
                        },
                    ]
                })
            },
            //今日动态
            fetchTodayData() {
                let params = {
                    agencyId: this.agencyId,
                    tenantId: this.tenantId
                }
                this.$api.statistical.todayData(params).then(res => {
                    this.todayData = res.data

                    //驶入车辆总数
                    let enterTotal = this.todayData.enterCarOfInside + this.todayData.enterCarOfOutside
                    //内部驶入车辆百分比
                    this.todayData.enterCarOfInsidePercen = this.$util.keepTwoDecimalFull(this.todayData.enterCarOfInside / enterTotal) * 100
                    //外部驶入车辆百分比
                    this.todayData.enterCarOfOutsidePercen = 100 - this.todayData.enterCarOfInsidePercen

                    //驶出车辆总数
                    let departTotal = this.todayData.departCarOfOutside + this.todayData.departCarOfInside
                    //内部驶出车辆百分比
                    this.todayData.departCarOfInsidePercen = this.$util.keepTwoDecimalFull(this.todayData.departCarOfInside / departTotal) * 100
                    //外部驶出车辆百分比
                    this.todayData.departCarOfOutsidePercen = 100 - this.todayData.departCarOfInsidePercen

                    //内部与外部人车辆进出的比例

                    let insideTotal = this.todayData.departCarOfInside + this.todayData.enterCarOfInside
                    let outsideTotal = this.todayData.departCarOfOutside + this.todayData.enterCarOfOutside

                    let carTotal = this.todayData.departCarOfInside + this.todayData.departCarOfOutside +
                        this.todayData.enterCarOfInside + this.todayData.enterCarOfOutside

                    this.pieData = {
                        insideTotal,
                        outsideTotal,
                        carTotal,
                        peopleNum: this.todayData.peopleNum
                    }
                    console.log(this.pieData);
                })
            },
        }
    };
</script>

<style lang="scss">
    .bg-red {
        background-color: #d10000;
        color: #FFFFFF;
    }

    .bg-green {
        background-color: #11914d;
        color: #FFFFFF;
    }

    //描述
    .desc {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 30 rpx 0 50 rpx;

        .progress {
            margin-top: 15 rpx;
            margin-right: 10 rpx;
            width: 40 rpx;
            height: 10 rpx;
        }
    }

    //当日统计
    .today-statistics {
        padding: 20 rpx 40 rpx;
        display: flex;
    }


    //描述
    .title {
        padding: 30 rpx;
        display: flex;

        image {
            width: 45 rpx;
            height: 45 rpx;
            display: block;
            padding-top: 10 rpx;
            padding-right: 10 rpx;
        }

        text {
            font-size: 36 rpx;
            font-weight: 800;
        }
    }


    //园区数据统计

    .data-statistics {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        .item {
            box-shadow: 10 rpx 10 rpx 10 rpx #d1d1d1;
            width: 28%;
            height: 140 rpx;
            margin: 20 rpx 15 rpx;
            background-image: linear-gradient(to top right, #55aaff, #4759d0);
            border-radius: 10 rpx;
            color: #FFFFFF;

            .data {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                font-size: 28 rpx;
                height: 100%;

                text:first-child {
                    margin-bottom: 10 rpx;
                    font-size: 45 rpx;
                }
            }
        }

        .item:hover {
            box-shadow: 0 rpx 0 rpx 0 rpx #d1d1d1;
            background-color: $base-color;
        }

        .item:active {
            background-image: linear-gradient(to top right, #55aaff, #4759d0);
            box-shadow: 10 rpx 10 rpx 10 rpx #d1d1d1;
            transform: translateY(4px);
        }
    }

</style>