wang_zhuang_daping/src.mobile/views/reportMain.vue

<template>
    <div style="margin: 5px">
        <van-search
            v-model="value"
            input-align="center"
            left-icon=""
            readonly
            right-icon="arrow-down"
            @click="showPicker = true"
        />
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
            />
        </van-popup>
        <van-grid column-num="3" style="margin: 10px 0; font-size: 14px; color: #aaa">
            <van-grid-item :to="{ path: '/reportDetail', query: { type: 1 } }">
                <div>
                    <div>应到人数</div>
                    <div class="tt">{{ stat.yd }}</div>
                </div>
            </van-grid-item>
            <van-grid-item :to="{ path: '/reportDetail', query: { type: 2 } }">
                <div>
                    <div>签到人数</div>
                    <div class="tt">{{ stat.qd }}</div>
                </div>
            </van-grid-item>
            <van-grid-item :to="{ path: '/reportDetail', query: { type: 3 } }">
                <div>
                    <div>未到人数</div>
                    <div class="tt">{{ stat.wd }}</div>
                </div>
            </van-grid-item>
            <van-grid-item :to="{ path: '/reportDetail', query: { type: 4 } }">
                <div>
                    <div class="tt1">员工(应到/未到)</div>
                    <div class="tt">
                        {{ stat.yg }}/<span style="color: red">{{ stat.yg1 }}</span>
                    </div>
                </div>
            </van-grid-item>
            <van-grid-item :to="{ path: '/reportDetail', query: { type: 5 } }">
                <div>
                    <div class="tt1">第三方人员(应到/未到)</div>
                    <div class="tt">
                        {{ stat.dsfry }}/<span style="color: red">{{ stat.dsfry1 }}</span>
                    </div>
                </div>
            </van-grid-item>
            <van-grid-item :to="{ path: '/reportDetail', query: { type: 6 } }">
                <div>
                    <div class="tt1">访客(应到/未到)</div>
                    <div class="tt">
                        {{ stat.fk }}/<span style="color: red">{{ stat.fk1 }}</span>
                    </div>
                </div>
            </van-grid-item>
        </van-grid>
        <van-tabs v-model="active">
            <van-tab name="tab1" title="未到详情">
                <fire-table :query-type="7" :all-columns="false"></fire-table>
            </van-tab>
            <van-tab name="tab2" title="已到详情">
                <fire-table :query-type="8" :all-columns="true"></fire-table>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import FireTable from './FireTable'
import { mapGetters } from 'vuex'

export default {
    name: 'ReportMain',
    components: { FireTable },
    data() {
        return {
            value: '',
            showPicker: false,
            columns: [],
            active: 'tab1',
            interval: null,
            stat: {
                yd: '',
                qd: '',
                wd: '',
                yg: '',
                yg1: '',
                dsfry: '',
                dsfry1: '',
                fk: '',
                fk1: ''
            }
        }
    },
    computed: {
        ...mapGetters(['gValue'])
    },
    mounted() {
        this.$store.dispatch('layout/gValue', null)
        this.querySelect()
    },
    methods: {
        onConfirm(value) {
            this.$store.dispatch('layout/gValue', value.value)
            this.value = value.text
            this.showPicker = false
            this.queryStat()
        },
        queryStat() {
            const postData = {
                yxid: this.gValue
            }
            this.$apis.requestBase('stat', postData).then(res => {
                this.stat = res.data
            })
        },
        querySelect() {
            if (this.columns && this.columns.length > 0) {
                return
            }
            const postData = {}
            this.$apis.requestBase('select', postData).then(res => {
                this.columns = res.data
                if (this.columns[0]) {
                    this.onConfirm(this.columns[0])
                }
                const _this = this
                // 30s刷新界面数据
                if (this.interval) {
                    clearInterval(this.interval)
                }
                this.interval = setInterval(() => {
                    _this.queryStat()
                }, 30000)
            })
        }
    },
    destroyed() {
        if (this.interval) {
            clearInterval(this.interval)
        }
    }
}
</script>

<style>
.tt {
    text-align: center;
    color: #555;
    height: 40px;
    line-height: 40px;
}

.tt1 {
    font-size: 10px;
}
</style>