<template>
    <div class="zutai-dashboard" style="padding-top: 1px !important">
        <el-card class="board-view" body-style="padding:0 0 20px;background: none;" style="margin-bottom: 0">
            <div class="board-top flex-between">
                <el-card class="top-card" body-style="padding:0">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/zutai/card-icon01.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">组态数量</div>
                            <div class="card-value">37</div>
                        </div>
                    </div>
                </el-card>
                <el-card class="top-card" body-style="padding:0">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/zutai/card-icon02.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">图库数量</div>
                            <div class="card-value">37</div>
                        </div>
                    </div>
                </el-card>
                <el-card class="top-card" body-style="padding:0">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/zutai/card-icon03.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">模型数量</div>
                            <div class="card-value">37</div>
                        </div>
                    </div>
                </el-card>
                <el-card class="top-card" body-style="padding:0">
                    <div class="top-show">
                        <div class="card-icon">
                            <img src="@/assets/images/zutai/card-icon04.png" alt="" class="img-inner" />
                        </div>
                        <div>
                            <div class="card-name">组件数量</div>
                            <div class="card-value">37</div>
                        </div>
                    </div>
                </el-card>
            </div>
            <div class="board-center flex-between">
                <el-card class="center-pie" body-style="padding:0;height: 100%">
                    <div ref="card-pie" style="width: 100%; height: 100%"></div>
                </el-card>
                <el-card class="center-tree" body-style="padding:20px;background-color:#fff;height: 100%">
                    <el-table class="base-table" v-loading="loading" :data="dataList" border ref="multipleTable" tooltip-effect="dark" style="width: 100%">
                        <el-table-column label="排名" align="center" prop="serialNumber">
                            <template #default="scope">
                                <div class="flex-center" v-if="scope.row.index >= 5">
                                    {{ scope.row.index }}
                                </div>
                                <div v-else class="flex-center">
                                    <img width="27px" height="30px" :src="require(`../../../assets/icon/icon-rank-${scope.row.index}.png`)" alt="" />
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="组件" align="center" prop="name" />
                        <el-table-column label="数量" align="center" sortable prop="value" />
                    </el-table>
                </el-card>
            </div>
            <div class="main-card board-bottom">
                <el-card class="board-bar" body-style="padding:0;height: 100%">
                    <div ref="chart_line" style="width: 100%; height: 100%"></div>
                </el-card>
            </div>
        </el-card>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'Zhsf',
    data() {
        return {
            card_pie: null,
            chart_line: null,
            dataList: [
                {
                    index: 1,
                    name: '按钮',
                    value: '123',
                },
                {
                    index: 2,
                    name: '指示灯',
                    value: '123',
                },
                {
                    index: 3,
                    name: '泵',
                    value: '123',
                },
                {
                    index: 4,
                    name: '电机',
                    value: '123',
                },
                {
                    index: 5,
                    name: '电气符号',
                    value: '123',
                },
                {
                    index: 6,
                    name: '反应器',
                    value: '123',
                },
                {
                    index: 7,
                    name: '柱图',
                    value: '123',
                },
                {
                    index: 8,
                    name: '折线图',
                    value: '123',
                },
                {
                    index: 9,
                    name: '地图',
                    value: '123',
                },
                {
                    index: 10,
                    name: '热力图',
                    value: '123',
                },
            ],
        };
    },

    created() {},
    methods: {
        drawCardPie() {
            this.card_pie = new echarts.init(this.$refs['card-pie']);
            let option = {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    orient: 'vertical',
                    right: '0',
                    icon: 'circle',
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 2,
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            };
            this.card_pie.setOption(option);
        },
        drawCardBar() {
            this.chart_line = new echarts.init(this.$refs['chart_line']);
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    icon: 'roundRect',
                    data: ['组态', '图表', '模型', '组件'],
                    right: 80,
                    top: 60,
                },
                color: ['#00D0C9', '#4772FC', '#FF9D00', '#00A7FF'],
                grid: {
                    left: 80,
                    right: 80,
                    top: 140,
                    bottom: 80,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['10/05', '10/06', '10/07', '10/08', '10/09', '10/10', '10/11'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '组态',
                        type: 'line',
                        symbolSize: 10,
                        smooth: true,
                        data: [220, 182, 191, 234, 290, 430, 310],
                    },
                    {
                        name: '图表',
                        type: 'line',
                        symbolSize: 10,
                        smooth: true,
                        data: [150, 232, 201, 154, 190, 330, 410],
                    },
                    {
                        name: '模型',
                        type: 'line',
                        symbolSize: 10,
                        smooth: true,
                        data: [320, 332, 301, 334, 390, 330, 320],
                    },
                    {
                        name: '组件',
                        type: 'line',
                        symbolSize: 10,
                        smooth: true,
                        data: [420, 432, 401, 434, 490, 430, 220],
                    },
                ],
            };
            this.chart_line.setOption(option);
        },
    },
    mounted() {
        this.drawCardPie();
        this.drawCardBar();
    },
};
</script>
<style>
@import './zutai.scss';
</style>
