lh_firm_former/src/views/system/jbdHome/board/component/middleCard.vue

<template>
    <div id="middle-card">
        <div :class="$style.chart_box">
            <div :class="$style.item">
                <!-- <div :class="$style.title">
                    <span>检测受理类型</span>
                </div> -->
                <div id="accept" style="width: 100%; height: 100%"></div>
            </div>
            <dv-decoration-2 :reverse="true" style="width:5px;height:100%;" />
            <div :class="$style.item">
                <!-- <div :class="$style.title">
                    <span>检测任务情况</span>
                </div> -->
                <div id="task" style="min-width: 300px; height: 100%"></div>
            </div>
            <dv-decoration-2 :reverse="true" :dur="10" style="width:5px;height:100%;" />
            <div :class="$style.item">
                <dv-scroll-board
                    v-if="tableData.data && tableData.data.length"
                    :config="tableData"
                    style="width: 100%; height: 100%"
                />
                <div v-else :class="$style.no_data">当前月份暂无已完成的检测项目数据</div>
            </div>
        </div>
        <dv-decoration-10 :dur="15"/>
    </div>
</template>
<script>
    import echarts from 'echarts'
    import { acceptOption, taskOption } from '../data'
    export default {
        name: 'topBar',
        props: {
            info: {
                type: Object,
                default: {}
            },
            list: {
                type: Object,
                default: {}
            }
        },
        components: {},
        watch: {
            info: {
                handler() {
                    this.init()
                },
                deep: true
            },
            list: {
                handler(value) {
                    console.log(value)
                    if ((!this.tableData.data || (value.data.length !== this.tableData.data.length))) {
                        if (this.tableData.data) {
                            console.log(value.data.length, this.tableData.data.length)
                        }
                        this.tableData = JSON.parse(JSON.stringify(value))
                    }
                },
                immediate: true,
                deep: true
            }
        },
        data() {
            return {
                tableData: {}
            }
        },
        created() {
            // this.init()
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                const accept = echarts.init(document.getElementById('accept'))
                const task = echarts.init(document.getElementById('task'))
                
                // 设置图表数据
                acceptOption.series[0].data = this.info.acceptData
                acceptOption.legend.data = this.info.config.option
                acceptOption.color = this.info.config.colorList
                taskOption.series[0].data = this.info.completionRate

                // taskOption.series[0].data = this.info.taskData
                // this.tableData = JSON.parse(JSON.stringify(this.tableData))

                //渲染
                accept.setOption(acceptOption)
                task.setOption(taskOption)
            }
        }
    }
</script>
<style lang="scss" module>
    .chart_box {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .item {
            width: 24%;
            height: 100%;
            background-color: rgba(6, 30, 93, 0.5);
            &:first-child, &:last-child {
                width: 36%;
            }
            .no_data {
                font-size: 20px;
                text-align: center;
                margin-top: 20px;
            }
            :global {
                .header {
                    background-color: #08153e !important;
                }
            }
        }
    }
    :global {
        #middle-card {
            width: 96%;
            height: calc((100% - 240px) / 2);
            padding: 0 2%;
            margin: 15px 0 30px;
            .dv-decoration-10 {
                width: 100%;
                margin: 12px 0;
                height: 5px;
            }
        }
    }
</style>