<template>
    <div>
        <el-row style="margin-bottom: 20px;">
            
                <el-row style="height: 300px;">
                    <el-col :span="8" style="height: 100%;">
                        <fw-card2 title="景区实时客流量(单位:人)">

                            <el-row style="height: 220px;">
                                <el-col :span="24" style="height: 100%;display:flex;justify-content: center;align-items: center;">
                                    <div style="display: flex;align-items: center;justify-content: center; ">
                                        <div style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 126px;height: 126px;border-radius: 126px;border: 5px solid #85ce61;">
                                            <div style="font-size: 24px;font-weight: bold;">{{alljishuNum}}</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </fw-card2>
                    </el-col>
                    <el-col :span="16" style="height: 100%;padding-left: 20px;">
                        <fw-card2 title="景区预警次数">
                            <el-row style="width: 100%;height: 220px; display: flex;justify-content: center;align-items: center;">
                                <el-col :span="24" style="height: 100%;display: flex;justify-content: center;align-items: center;width: 80%;">
                                    <div style="width: 20%;display: inline;">
                                        <div style="display: flex;align-items: center;justify-content: center; ">
                                            <div style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 126px;height: 126px;border-radius: 126px;border: 5px solid #85ce61;">
                                                <div>一级/次</div>
                                                <div style="font-size: 24px;font-weight: bold;">{{oneNum}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="width: 20%;display: inline;">
                                        <div style="display: flex;align-items: center;justify-content: center; ">
                                            <div style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 126px;height: 126px;border-radius: 126px;border: 5px solid #85ce61;">
                                                <div>二级/次</div>
                                                <div style="font-size: 24px;font-weight: bold;">{{twoNum}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="width: 20%;display: inline;">
                                        <div style="display: flex;align-items: center;justify-content: center; ">
                                            <div style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 126px;height: 126px;border-radius: 126px;border: 5px solid #85ce61;">
                                                <div>三级/次</div>
                                                <div style="font-size: 24px;font-weight: bold;">{{threeNum}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="width: 20%;display: inline;">
                                        <div style="display: flex;align-items: center;justify-content: center; ">
                                            <div style="display: flex;flex-direction:column;align-items: center;justify-content: center;width: 126px;height: 126px;border-radius: 126px;border: 5px solid #85ce61;">
                                                <div>四级/次</div>
                                                <div style="font-size: 24px;font-weight: bold;">{{fourNum}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </fw-card2>
                    </el-col>
                </el-row>
        </el-row>


        <div style="clear: both;"></div>
        <el-row style="margin-bottom: 20px;margin-top: 20px;">
            <fw-card2 title="景区实时客流分析">
                <el-row style="height: 400px;">
                    <el-col :span="24" style="height: 90%;">
                        <fw-table :apiService="jishuInfoSumService" :grid-config="configData.gridConfig" :grid-btn-config="configData.gridBtnConfig"
                            :form-config="configData.formConfig" :form-data="configData.formModel" :grid-edit-width="200"
                            :grid-top-btn-config="configData.gridTopBtnConfig" form-title="景区实时客流分析" :is-async="true"
                            :query-config="configData.queryConfig" :query-model="configData.queryModel"
                            :grid-opera-btn-config="configData.gridOperaBtnConfig">
                        </fw-table>
                    </el-col>
                </el-row>
            </fw-card2>
        </el-row>

    </div>
</template>

<script>
    import {
        DATA_CONFIG
    } from './config/realtimeconfig.js'
    import {
        jishuInfoService,
        getallJiShuNumber,
        getselectOne,
        getselectTwo,
        getselectThree
    } from '../../../api/jishu/jishuInfo.js'
    import {getAlarmSumService} from '../../../api/jishu/jishuAlarmSum.js'
    import {
        jishuInfoSumService
    } from '../../../api/jishu/jishuInfoSum.js'
    

    export default {
        components: {

        },
        data() {
            return {
                testData: [],
                alljishuNum: '',
                oneNum: '',
                twoNum: '',
                threeNum: '',
                fourNum:'',
                configData: DATA_CONFIG,
                jishuInfoService: jishuInfoService,
                jishuInfoSumService:jishuInfoSumService

            }
        },

        mounted() {
            this.queryChartData()
        },
        methods: {
            queryChartData() {
                this.alljishuNum = null
                getallJiShuNumber().then((res) => {
                    if (res != null && res.length) {
                        for (let i = 0; i < res.length; i++) {
                            this.alljishuNum = res[i].realCount
                        }
                    }
                })
                this.oneNum = 0
                this.twoNum = 0
                this.threeNum = 0
                this.fourNum = 0
                getAlarmSumService().then((res)=>{
                    this.oneNum = res.one
                    this.twoNum = res.two
                    this.threeNum = res.three
                    this.fourNum = res.four
                })
                

            }

        }
    }
</script>

<style>
</style>
