index.vue

<template lang="pug">
card-warp(title="室内气象分析" height='45px' showBackground)
    div(slot="right")
        //- span 时间范围：
        //- el-date-picker.margin-lr-20(
        //-     size='mini'
        //-     v-model="dateValue",
        //-     type="daterange",
        //-     align="right",
        //-     unlink-panels,
        //-     range-separator="至",
        //-     start-placeholder="开始日期",
        //-     end-placeholder="结束日期",
        //-     :picker-options="pickerOptions"
        //- )
        //- el-button(size='mini' type='primary') 查询
        router-link.margin-lr-20(:to="{name:'kb-indoor'}")
             el-button(size='mini' type='primary') 图形 / 列表
        //- el-button(size='mini' type='primary' icon='el-icon-download') 下载

    div(slot="content", style="height: 90%")
        el-tabs.myTabs(v-model="activeName", @tab-click="tabClick")
            el-tab-pane(label="候车室区域", name="1")
            el-tab-pane(label="办公区域", name="2")
        el-form(:inline='true' size="mini" )
            el-form-item(label='时间范围：')
                el-date-picker.margin-lr-20(
                    size='mini'
                    v-model="dateValue",
                    type="daterange",
                    align="right",
                    unlink-panels,
                    range-separator="至",
                    start-placeholder="开始日期",
                    end-placeholder="结束日期",
                    :picker-options="pickerOptions"
                )
            el-form-item(label='')
                el-button(size='mini' type='primary') 查询
        .echartsWarp(width="100%", flex)
            div
                chart
            div
                chart2
            div
                chart3
            div
                pie4

</template>

<script>
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import pie4 from './pie4'
export default {
    components: {
        chart,
        chart2,
        chart3,
        pie4
    },
    data() {
        return {
            activeName: '1',
            dateValue: '',
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            )
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            )
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            )
                            picker.$emit('pick', [start, end])
                        }
                    }
                ]
            }
        }
    },
    methods: {
        tabClick(tab, event) {
            console.log(tab, event)
        },
        getDataList() {

        }
    }
}
</script>

<style lang="scss" scoped>
.myTabs {
    /deep/ .el-tabs__nav-wrap::after {
        height: 0;
    }
    /deep/.el-tabs__nav-wrap {
        background: #f2f4f5;

        .el-tabs__nav {
            // background: #E5E9EC;
            border-bottom: 1px solid #e5e9ec;
        }
    }
    /deep/ .el-tabs__header {
        border: 1px solid #e5e9ec;
    }
    /deep/ .el-tabs__item:nth-child(2) {
        padding: 0 20px;
    }
    /deep/ .el-tabs__item:last-child {
        padding: 0 20px;
    }
    /deep/ .el-tabs__item.is-active {
        background: #fff;
    }
}
.echartsWarp {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: calc(100vh - 350px);
    > div {
        width: 48%;
        height: calc(90% / 2);
        margin: 3px;
        padding: 13px;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        .title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 600;
            color: #000000;
            line-height: 40px;
            &::before {
                content: "";
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #0097ff;
                margin: 0 10px;
            }
        }
    }
}
</style>