<template>
    <div>
        <LHeader :text="text"></LHeader>
        <!-- 内容列表 -->
        <!-- 接口对接4 START -->
        <div class="con-list">
            <van-cell-group inset>
                <van-row gutte>
                    <van-col span="24">总巡查次数:85次</van-col>
                </van-row>
                <van-row gutte>
                    <van-col span="24">认定隐患数量: 25个</van-col>
                </van-row>

                <van-tabs @click="onClick" color="#2980f7">
                    <van-tab title="隐患上报统计">
                        <van-row gutte>
                            <van-col span="24" class="excel-title">
                                <span>月巡查</span>
                                <span>周巡查</span>
                            </van-col>
                        </van-row>
                        <!-- echarts图 -->
                        <van-row gutte>
                            <van-col span="24" class="excel-title">
                                <div id="box" style="width: 100%;height: 300px;"></div>
                            </van-col>
                        </van-row>
                    </van-tab>
                    <van-tab title="巡查时长统计">2</van-tab>
                </van-tabs>
            </van-cell-group>
        </div>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
import * as echarts from "echarts";
export default {
    name: "statistics",
    components: {
        LHeader,
        tabBar
    },
    data() {
        return {
            text: "巡查统计",
            messageList: [],
            isHaveNews: false
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.myEcharts();
        });
    },
    methods: {
        onClick(name, title) {
            console.log(title);
        },
        myEcharts() {
            console.log(echarts);
            var myChart = echarts.init(document.getElementById("box"));
            //配置图表
            var option = {
                xAxis: {
                    type: "category",
                    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: "bar"
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
#app {
    font-family: "";
    color: #2c3e50;
}
.con-list {
    padding: 0;
    background-color: #f0f1f5;
    .van-cell-group--inset {
        margin: 0;
        margin-bottom: 0.26667rem;
        padding: 0.25rem;
        font-size: 0.4rem;
        position: relative;
        border-radius: 4%;
        box-shadow: 0px 0px 10px 2px #f3f3f3;
        width: 90%;
        margin: 0.4rem auto;
        .van-row {
            font-size: 0.4rem;
            line-height: 0.8rem;
            margin-bottom: 0;
            .excel-title {
                display: flex;
                justify-content: space-evenly;
                margin-top: 15px;
            }
        }
    }
}
</style>
