<template>
    <div id="leftChart1">
        <div class="lc1-header">
            张三收费站
        </div>
        <div class="lc1-details">
            设备运行总数<span>430</span>
        </div>
        <!-- <dv-capsule-chart class="lc1-chart" :config="state.config" @click="selectChart" /> -->
        <dv-scroll-ranking-board :config="state.config" class="lc1-chart" @click="selectChart" />
        <dv-decoration2 style="height:10px;" />
    </div>
</template>
  
<script name="LeftChart1" setup lang="ts">
import { reactive } from 'vue'
const state = reactive({
    config: {
        data: [
            {
                name: '周口',
                value: 55,
            },
            {
                name: '南阳',
                value: 120,
            },
            {
                name: '西峡',
                value: 78,
            },
            {
                name: '驻马店',
                value: 66,
            },
            {
                name: '新乡',
                value: 80,
            },
            {
                name: '信阳',
                value: 45,
            },
            {
                name: '漯河',
                value: 29,
            },
        ],
        unit: '万元',
    },
})

function selectChart(a?: object) {
    console.log(a);
}

</script>
  
<style lang="scss" scoped>
#leftChart1 {
    width: 100%;
    height: 37%;
    display: flex;
    flex-grow: 0;
    flex-direction: column;

    .lc1-header {
        text-align: center;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        margin-bottom: 20px;
    }

    .lc1-details {
        height: 50px;
        font-size: 16px;
        display: flex;
        align-items: center;
        text-indent: 20px;

        span {
            color: #096dd9;
            font-weight: bold;
            font-size: 35px;
            margin-left: 20px;
        }
    }

    .lc1-chart {
        flex: 2;
    }
}
</style>