<template>
    <el-container class="container">
        <el-header class="header">
            <div class="header-left">
                <!-- <el-cascader
                    v-model="companyId"
                    :options="options"
                    :show-all-levels="false"
                    clearable
                    :props="{
                        expandTrigger: 'hover',
                        checkStrictly: true,
                        value: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    style="width: 190px; margin-right: 10px"
                    ref="cascader"
                    @change="handleCascaderChange"
                ></el-cascader> -->

                <!-- <el-date-picker
                    v-model="issueDate"
                    type="month"
                    placeholder="选择月"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    @change="handleTimeChange"
                    style="width: 120px"
                >
                </el-date-picker> -->
            </div>
            <div class="header-center">
                <div class="title" @click="goIndex">日常养护工单统计</div>
            </div>
            <div class="header-right">
                <div class="header-right-min">
                    <span>
                        <i></i>
                        <p>{{ nowDate && nowDate.split(' ')[1] }}</p>
                    </span>
                    <span class="icon-back" @click="back">
                        <el-tooltip effect="dark" content="返回" placement="bottom">
                            <i></i>
                        </el-tooltip>
                        <!-- <font>返回</font> -->
                    </span>
                </div>
            </div>
        </el-header>
        <el-main>
            <!-- <el-button
                type="primary"
                icon="el-icon-back"
                class="back_btn"
                @click="handleReset"
            >
                返回
            </el-button> -->
            <div
                class="table_box"
                v-loading="loading"
                element-loading-background="rgba(73, 93, 122, 0.3)"
            >
                <div class="bottom form_label">
                    <span class="item">名称</span>
                    <span class="item">已完成</span>
                    <span class="item">派单中</span>
                    <span class="item">施工中</span>
                    <span class="item">施工单位验收</span>
                    <span class="item">审核中</span>
                    <span class="item">已逾期</span>
                    <span class="item">总数</span>
                    <span class="item">已完成金额</span>
                </div>
                <div class="bottom" v-for="item in tableData" :key="item.id">
                    <span class="item">
                        {{ item.name }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.finishCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.distributionCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.constructionCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.checkCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.examineCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.overdueCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.allCount) }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(item.finishMoney) }}
                    </span>
                </div>
                <div class="bottom">
                    <span class="item">总数</span>
                    <span class="item">
                        {{ utils.thousandBit(total.finishCount) || 0 }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(total.distributionCount) || 0 }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(total.constructionCount) || 0 }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(total.checkCount) || 0 }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(total.examineCount) || 0 }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(total.overdueCount) || 0 }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(total.allCount) || 0 }}
                    </span>
                    <span class="item">
                        {{ utils.thousandBit(total.finishMoney) || 0 }}
                    </span>
                </div>
                <div class="charts">
                    <div class="pie">
                        <Title :text="'基础信息数量分析'" />
                        <div id="pie" style="height: 100%; width: 100%"></div>
                    </div>
                    <div class="column">
                        <Title :text="'各部门基础信息数量统计'" />
                        <div id="column" style="height: 100%; width: 100%"></div>
                    </div>
                </div>
                <!-- <div class="charts clumn-charts">
                    <Title :text="'日常养护金额统计'" />
                    <div id="column2" style="height: 100%; width: 100%"></div>
                </div> -->
            </div>
        </el-main>
    </el-container>
</template>

<script>
import _utils from '@/utils.js'
import orgData from './orgData.json'
import utils from '@/utils' // thousandBit格式化千分位
const BigNumber = require('bignumber.js')
import * as echarts from 'echarts'
import Title from './components/Title.vue'
export default {
    name: 'statisticsDailyMaintenanceAI',
    components: {
        Title,
    },
    data() {
        return {
            nowDate: null,
            options: orgData.list,
            year: new Date().getFullYear(),
            mouth: new Date().getMonth(),
            tableData: [],
            data: [],
            loading: false,
            cstatus: '',
            date: '',
            total: {},
            utils: utils,
            formInline: {
                companyIds: ['1419863231459102720', '1430734631036129280'],
                companyName: '',
                roadSegmentName: '',
            },
        }
    },
    created() {
        let endDate = utils.formatDate(new Date()).split(' ')[0]
        // 获取当前时间6个月前的时间
        let startDate = this.diffMonth(6).split(' ')[0]
        this.date = [startDate, endDate]
        this.loadData()
    },
    watch: {
        tableData(newVal) {
            this.total.finishCount = this.calculation('finishCount', newVal)
            this.total.distributionCount = this.calculation('distributionCount', newVal)
            this.total.constructionCount = this.calculation('constructionCount', newVal)
            this.total.checkCount = this.calculation('checkCount', newVal)
            this.total.examineCount = this.calculation('examineCount', newVal)
            this.total.overdueCount = this.calculation('overdueCount', newVal)
            this.total.allCount = this.calculation('allCount', newVal)
            this.total.finishMoney = this.calculation('finishMoney', newVal)
            this.pieCharts(this.total, newVal)
            this.cloumnCharts(newVal)
        },
    },
    mounted() {
        // this.companyChange(['1419863231459102720', '1430734631036129280'])
        let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(function () {
            _this.nowDate = _utils.formatDate(new Date()) //修改数据date
        }, 1000)
    },
    methods: {
        handleCascaderChange(val) {},
        handleTimeChange() {},
        back() {
            this.$router.go(-1)
        },
        companyChange(val) {
            this.formInline.companyIds = val
            let id = (val && val[val.length - 1]) || ''
            if (!id) return
            this.$http
                .get('${yhxt}/statisticalStatement/v1/findAllRoadIds?id=' + id)
                .then((res) => {
                    let ids = res.data.value.join(',') || id || ''
                    if (!ids) {
                        this.getAmountStatisticsChart([])
                    } else {
                        this.getCountMaintenanceData(ids)
                    }
                })
        },
        getCountMaintenanceData(roadSegmentId) {
            this.$http
                .post('${yhxt}/statisticalStatement/v1/countMaintenance/new', {
                    roadSegmentId,
                })
                .then((res) => {
                    this.data = res.data.maintenanceNewVos
                    this.format(this.data)
                    this.getAmountStatisticsChart(res.data.maintenanceNewVos)
                })
        },
        format(data) {
            let total = 0
            let money = 0
            data.forEach((item) => {
                total += Number(item.pnameCount)
                money += Number(item.everyMoney)
            })
            console.log(total)
            data.forEach((item) => {
                item.percentage = (item.pnameCount / total) * 100
                item.percent = Number(((item.everyMoney / money) * 100).toFixed(2))
                item.money = (Number(item.everyMoney) / 10000).toFixed(2)
            })
        },
        /**
         * @description: 获取当前日期n个月前的日期
         * @param {String} n 几个月（为负数则表示前面的日期）
         * @return: 日期
         */
        diffMonth(n) {
            var dt = new Date()
            dt.setMonth(dt.getMonth() - Number(n))
            return dt.toLocaleString().replace(/\//g, '-')
        },
        calculation(key, arr) {
            let total = 0
            if (!key || arr.length === 0) return total
            arr.forEach((item) => {
                total += parseInt(item[key])
            })
            return total
        },
        handleReset() {
            let length = this.data.length - 1
            if (length === 0) return
            this.tableData = this.data[this.data.length - 2]
            this.data.splice(length, 1)
        },
        hanldeRowClick(row) {
            if (row.chirldren.length == 0 && row.roadSegmentId) {
                return this.$router.push({
                    name: this.pathName,
                    params: {
                        value: row,
                        type: this.type,
                    },
                })
            }
            this.tableData = row.chirldren
            this.data.push(row.chirldren)
        },
        handleCellClick(row, column) {
            if (
                column.columnKey == '1' ||
                column.columnKey == '3' ||
                column.columnKey == '4'
            ) {
                this.type = column.columnKey
                this.pathName = 'roadsideFacilitiesManagement'
            } else {
                this.pathName = column.columnKey
            }
        },
        loadData() {
            this.loading = true
            let str = ''
            if (this.date) {
                str = `?startDate=${this.date[0]}&endDate=${this.date[1]}`
            }
            this.$http
                .post('${yhxt}/workOrderInformation/v1/getWorkCountVoAI' + str)
                .then((res) => {
                    this.tableData = (res && res.status == 200 && res.data) || []
                    this.data = []
                    this.data.push(this.tableData)
                    this.loading = false
                })
                .catch(() => {
                    this.loading = false
                })
        },
        pieCharts(obj, rows) {
            var chartDom = document.getElementById('pie')
            var myChart = echarts.init(chartDom)
            let data = [
                {
                    name: '已完成',
                    value: obj.finishCount || 0,
                },
                {
                    name: '派单',
                    value: obj.distributionCount || 0,
                },
                {
                    name: '施工',
                    value: obj.constructionCount || 0,
                },
                {
                    name: '验收',
                    value: obj.checkCount || 0,
                },
                {
                    name: '审核',
                    value: obj.examineCount || 0,
                },
                // {
                //   name: '已逾期',
                //   value: obj.overdueCount || 0
                // }
            ]
            let innerData = [
                {
                    name: '审核',
                    value: this.calculation('examineOverdue', rows),
                },
                {
                    name: '验收',
                    value: this.calculation('checkOverdue', rows),
                },
                {
                    name: '施工',
                    value: this.calculation('constructionOverdue', rows),
                },
                {
                    name: '派单',
                    value: this.calculation('distributionOverdue', rows),
                },
            ]
            innerData = innerData.sort((a, b) => b.value - a.value)
            innerData[0].selected = true
            var option
            let total = new BigNumber(0)
            data.forEach((item) => {
                total = total.plus(item.value)
            })
            let formatNumber = (num) => num.toString().replace(/(?=(\B)(\d{3})+$)/g, ',')
            option = {
                // title: [
                //   {
                //     text: `{name|总数/个}\n{val|${formatNumber(total)}}`,
                //     top: 'center',
                //     left: 'center',
                //     textStyle: {
                //       rich: {
                //         name: {
                //           fontSize: 14,
                //           color: '#fff',
                //           padding: [10, 0]
                //         },
                //         val: {
                //           fontSize: 32,
                //           fontWeight: 'bold',
                //           color: '#fff'
                //         }
                //       }
                //     }
                //   }
                // ],
                tooltip: {
                    trigger: 'item',
                    formatter: (a) => {
                        return `${a.marker} ${a.data.name} ${a.data.value}个 ${a.percent}%`
                    },
                },
                color: [
                    '#5b8ff9',
                    '#5ad8a6',
                    '#5d7092',
                    '#f6bd16',
                    '#6f5ef9',
                    '#6dc8ec',
                    '#945fb9',
                    '#ff9845',
                    '#1e9493',
                ],
                legend: {
                    icon: 'circle',
                    orient: 'vertical',
                    right: 50,
                    top: 'center',
                    bottom: 20,
                    textStyle: {
                        color: '#ccc',
                    },
                },
                series: [
                    {
                        type: 'pie',
                        selectedMode: 'single',
                        radius: ['50%', '78%'],
                        label: {
                            // show: false,
                            formatter: (a) => {
                                if (a.value > 0) {
                                    return `{name|${a.name}逾期}`
                                } else {
                                    return ''
                                }
                            },
                            rich: {
                                name: {
                                    fontSize: 12,
                                    color: '#fff',
                                },
                            },
                            position: 'inner',
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: (a) => {
                                return `${a.marker} ${a.data.name}逾期 ${a.data.value}个 ${a.percent}%`
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: innerData,
                    },
                    {
                        type: 'pie',
                        radius: ['50%', '78%'],
                        center: ['45%', '50%'],
                        data: data,
                        label: {
                            // alignTo: 'edge',
                            formatter: (a) => {
                                return `{percent|${a.percent}%}`
                            },
                            rich: {
                                percent: {
                                    fontSize: 15,
                                    color: '#fff',
                                },
                            },
                        },
                    },
                ],
            }

            option && myChart.setOption(option)
        },
        cloumnCharts(data) {
            var chartDom = document.getElementById('column')
            var myChart = echarts.init(chartDom)
            var option
            let xData = []
            let finishData = []
            let distributionData = []
            let constructionData = []
            let checkData = []
            let examineData = []
            let overdueData = []
            let allData = []
            data.forEach((item) => {
                xData.push(item.name)
                finishData.push(item.finishCount)
                distributionData.push(item.distributionCount)
                constructionData.push(item.constructionCount)
                checkData.push(item.checkCount)
                examineData.push(item.examineCount)
                overdueData.push(item.overdueCount)
                allData.push(item.allCount)
            })
            option = {
                title: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                grid: {
                    left: '6%'
                },
                legend: {
                    itemHeight: 10,
                    itemWidth: 10,
                    bottom: 'bottom',
                    bottom: 10,
                    textStyle: {
                        color: '#fff',
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                    },
                },
                color: [
                    '#5b8ff9',
                    '#5ad8a6',
                    '#5d7092',
                    '#f6bd16',
                    '#6f5ef9',
                    '#6dc8ec',
                    '#945fb9',
                    '#ff9845',
                    '#1e9493',
                ],
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        fontSize: 14,
                        color: '#cefff2',
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {show: true}, //去除网格线
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        //y轴刻度线
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                    axisLine: {
                        //y轴
                        show: false,
                        lineStyle: {
                            color: '#fff',
                        },
                    },
                },
                series: [
                    {
                        name: '已完成',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: finishData,
                    },
                    {
                        name: '派单中',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: distributionData,
                    },
                    {
                        name: '施工中',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: constructionData,
                    },
                    {
                        name: '施工单位验收',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: checkData,
                    },
                    {
                        name: '审核中',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: examineData,
                    },
                    {
                        name: '已逾期',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: overdueData,
                    },
                    {
                        name: '总数',
                        type: 'bar',
                        stack: 'Ad',
                        barWidth: '15%',
                        data: allData,
                    },
                ],
            }

            option && myChart.setOption(option)
        },
        getAmountStatisticsChart(data) {
            let chartDom = document.getElementById('column2')
            var myChart = echarts.init(chartDom)
            let data_ = []

            data.forEach((item) => {
                data_.push({
                    value: item.percent,
                    name: item.pname,
                    money: item.money,
                    count: item.pnameCount,
                })
            })
            let option = {
                title: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                legend: {
                    orient: 'vertical',
                    right: 30,
                    top: 'center',
                    bottom: 20,
                    show: false,
                    textStyle: {
                        color: '#fff',
                    },
                },
                tooltip: {
                    trigger: 'item',
                    formatter: (a) => {
                        return `${a.marker} ${a.data.name} 总额:${a.data.money}万元 占比:${a.data.value}%`
                    },
                },
                color: ['#16ffae', '#00e6f6', '#6255f8', '#0282b9'],
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: data_,
                        // width: '75%',
                        center: ['50%', '50%'],
                        minAngle: 10, // 设置每块扇形的最小占比
                        label: {
                            alignTo: 'edge',
                            // show: false,
                            // formatter: '{name|{b}}{money|{}}\n\n{percent|{c} %}',
                            formatter: (a) => {
                                return `{name|${a.data.name}} {count|${a.data.count} 个} {money|${a.data.money} 万元} {percent|${a.data.value} %}`
                            },
                            /* 延长显示线 */
                            // minMargin: 5,
                            // edgeDistance: 10,
                            //   lineHeight: 18,
                            rich: {
                                name: {
                                    fontSize: 18,
                                    color: '#fff',
                                },
                                money: {
                                    fontSize: 14,
                                    color: '#fff',
                                },
                                count: {
                                    fontSize: 14,
                                    color: '#fff',
                                },
                                percent: {
                                    fontSize: 10,
                                    color: '#fff',
                                },
                            },
                        },
                    },
                ],
            }

            option && myChart.setOption(option)
        },
        // 去首页
        goIndex() {
            window.location.href = 'http://183.64.175.153:20003/#/business'
        },
        //退出系统
        handleLogout() {
            this.$store.dispatch('menu/clearMenus')
            this.$store.dispatch('user/clearUser')
            this.$store.dispatch('menu/setCopyMenus', []) //菜单
            let loginRouthPath =
                localStorage.getItem(
                    this.$store.state.login.currentUser.account + 'loginRoutePath'
                ) || '/login'
            this.$store.dispatch('login/logoutAndCleanUp').then(() => {
                switch (window.ssoConfig.mode) {
                    case 'cas':
                    case 'oauth':
                        window.sessionStorage.removeItem('currentUser')
                        window.location.href =
                            window.ssoConfig.logout +
                            '?service=' +
                            window.location.href.split('?')[0]
                        break
                    default:
                        this.$router.push({
                            path: loginRouthPath,
                        })
                        break
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
@import './css/common.scss';
.header-center .title {
    cursor: pointer;
    font-family: 'fz_black_blod';
    font-size: 30px;
}
.icon-back {
    display: block;
    width: 40px;
    height: 34px;
    i {
        width: 100% !important;
        background: url('./img/icon_back.png') no-repeat !important;
        background-size: 100% 100%;
    }
}
.container {
    width: 100vw;
    height: 100vh;
    background: url('./img/bg_.png') no-repeat 100% 100%;
    //   background-color: rgba($color: #0f2a3f, $alpha: 1);
}
.el-main {
    background-color: transparent;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
}
.el-date-editor.el-input {
    margin-right: 0;
    margin-bottom: 0;
}
/deep/ .rowClassName:hover {
    cursor: pointer;
}
/deep/ .rowClassName .cell {
    font-size: 20px;
}
/deep/ .cellClassName .cell {
    font-size: 22px;
    font-weight: bold;
}
/deep/ .el-table tr {
    height: 60px;
}
/deep/ .el-table th.is-leaf {
    background-color: transparent !important;
}
/deep/ .el-table__row,
/deep/ .el-table tr {
    background-image: linear-gradient(to right, #0c1019, #495e7b, #080c15);
}
/deep/ .el-table__empty-block {
    background-color: #495e7b;
}
/deep/ .el-table__empty-text {
    color: #fff;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #495e7b !important;
}
/deep/ .el-table td {
    border-bottom: #495e7b !important;
}
/deep/ .el-table::before {
    background-color: transparent !important;
}
.back_btn {
    width: 100px;
    padding: 9px 15px;
    background-color: rgba(73, 93, 122, 0.7);
    border: none;
    &:hover {
        background-color: #495e7b;
    }
}
.table_box {
    padding-top: 10px;
    margin-top: 10px;
    flex: 1;
}
.form_label span.item {
    color: #2187ff;
    font-size: 18px;
    font-family: 'Microsoft Yahei';
}
.bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background-color: transparent;
    // background-image: linear-gradient(to right, #0c1019, #495e7b, #080c15);
    .item {
        margin: 10px;
        padding: 5px;
        background-color: rgba(23, 36, 51, 0.6);
        display: block;
        border-radius: 5px;
        flex: 1;
        text-align: center;
        margin-left: 10px;
        font-size: 16px;
        font-family: 'Microsoft Yahei';
    }
}
.charts {
    height: 450px;
    width: 100%;
    display: flex;
    margin-top: 60px;

    .column,
    .pie {
        height: 100%;
        flex: 1;
        padding: 0 20px;
    }
    .charts_top {
        display: flex;
        position: relative;
        height: 35px;
        margin-left: 30px;
        align-items: flex-end;
        background-image: linear-gradient(to right, #336da2, #1c3c60);
        p {
            position: absolute;
            left: -18px;
            top: -14px;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #6184ac;
            background-color: #304e7b;
            transform: rotate(45deg);
            border-radius: 5px;
            i {
                font-size: 25px;
                color: #91f5f3;
                transform: rotate(-45deg);
            }
        }
        h1 {
            margin-left: 25px;
            font-size: 24px;
            margin-bottom: 0px;
            font-weight: bold;
        }
    }
}
</style>
<style lang="scss">
.el-popper {
    background-color: rgba($color: #112b44, $alpha: 0.9) !important;
}
.el-cascader-menu {
    //   border: 1px solid #fff;
    &:nth-child(n + 1) {
        border-right: 1px solid #fff;
    }
    &:nth-child(n + 2) {
        border-left: none;
    }
    &:last-child {
        border-right: none;
    }
}
// .el-scrollbar {
//   background-color: transparent;
// }
.el-cascader-panel {
    border-radius: 5px;
    border: 1px solid #fff;
}
.el-select-dropdown .el-scrollbar {
    border: 1px solid #0283fc;
    //   padding-left: 10px;
    border-radius: 5px;
}
.in-active-path span {
    color: #0283fc;
}
.el-month-table td .cell {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}
.el-month-table td.current:not(.disabled) .cell {
    color: #d7ef05;
}
.el-date-picker__header--bordered {
    border-bottom-color: #0283da;
}

.el-cascader-node__label {
    font-size: 16px;
}
.el-radio.is-checked + .el-cascader-node__label {
    color: #409eff;
}
.el-scrollbar__view .el-cascader-node > .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: -8px;
}
.el-picker-panel__body {
    border-radius: 5px;
    background-color: rgba($color: #2c6d89, $alpha: 0.8);
}
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover,
.el-select-dropdown__item:hover {
    background: #fff !important;
}
.el-select-dropdown__item {
    padding-left: 10px;
}
.el-select-dropdown__item:hover span {
    color: #0283fc;
}
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-cascader-node__label,
.el-scrollbar__view .el-cascader-node:not(.is-disabled):hover .el-icon-arrow-right {
    color: #0283fc !important;
    font-weight: bold;
}
.el-cascader-node.is-selectable.in-active-path {
    color: #0283fc !important;
}
.clumn-charts {
    height: 500px;
    display: flex;
    flex-direction: column;
}
#column2 {
    margin: 30px 10px;
}
</style>
