主营

hailu

2023-11-23 204cae9df06661ef0013cb64510777ed997cd8d3

 src/view/MacIndustryAnalysisroData/agriculture/comSearch.vue

@@ -1,15 +1,520 @@
<template>
    <div>
        <Card style="margin-top: 3px;">
            <div style="display: flex;flex-wrap: wrap;">
                <div style="width: 400px;height: 400px;" id="echarts1"></div>
                <div style="width: 400px;height: 400px;" id="echarts2"></div>
                <div style="width: 400px;height: 400px;" id="echarts3"></div>
            </div>

        </Card>
        <Card style="margin-top: 3px;">
            <CheckboxGroup v-model="exchangeCode">
                <Checkbox label="SH">上海证券交易所</Checkbox>
                <Checkbox label="SZ">深圳证券交易所</Checkbox>
                <Checkbox label="HK">香港联合交易所</Checkbox>
            </CheckboxGroup>
            <div class="rentScrollOut table" style="margin-top: 12px;">
                <Table border :columns="tableListColumns" :data="tableList" :loading="loading" max-height="600">
                    <template slot="CompanyName" slot-scope="params">
                        <div>
                            <Tag color="primary">{{ params.row.ExchangeCode }}</Tag>
                            {{ params.row.CompanyName }}
                        </div>

                    </template>
                </Table>
                <div style="margin-top: 12px">
                    <Page :current="pageIndex" :total="TotalItems" :page-size="pageSize" style="text-align: right"
                        @on-change="changePageIndex" show-elevator />
                </div>
            </div>
        </Card>

    </div>
</template>

<script>
    export default {
        
import * as echarts from 'echarts';

import axios from '@/libs/api.request'
export default {
    data() {
        return {
            pageIndex: 1,
            TotalItems: 0,
            pageSize: 10,
            tableList: [],
            exchangeCode: ['SH', 'SZ', 'HK'],
            loading: false,
            tableListColumns: [],
        }
    },
    mounted() {
        this.GetChainIncomeCostPage()
        this.setEcharts1()
        this.setEcharts2()
        this.setEcharts3()
    },
    methods: {
        //获取表格数据
        GetChainIncomeCostPage() {
            this.loading = true
            let data = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                exchangeCodes: this.exchangeCode,
            }
            axios.request({
                url: 'rcy/GetChainIncomeCostPage',
                method: 'POST',
                data: data
            }).then((res) => {
                if (res.data.Check) {
                    console.log(res.data);
                    this.tableList = res.data.Data.Items
                    this.TotalItems = res.data.Data.TotalItems
                    this.tableListColumns = this.setTableListColumns()
                    this.loading = false
                } else {
                    this.tableList = [{}]
                    this.TotalItems = 0
                    this.loading = false
                }
            }).catch((err) => {
                this.tableList = [{}]
                this.TotalItems = 0
                this.loading = false
                console.log(err);
            })
        },
        setTableListColumns() {
            let columns = []
            columns.push({
                title: '序号',
                key: 'Id',
                render: (h, params) => {
                    return h('span', params.index + this.pageIndex * 10 - 9)
                },
                width: 80,
                align: 'center',
                fixed: 'left'
            })
            columns.push({
                title: '企业名称',
                slot: 'CompanyName',
                // key: 'CompanyName',
                // render: (h, params) => {
                //     return h('span', params.row.CompanyName ? params.row.CompanyName : '--')
                // },
                minWidth: 120,
                align: 'left',
            })
            columns.push({
                title: '2023中报',
                align: 'center',
                children: [
                    {
                        title: '产品收入(亿元)',
                        key: 'Income2023',
                        render: (h, params) => {
                            return h('span', params.row.Income2023 ? this.CustomMethods.numTo$(params.row.Income2023) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品成本(亿元)',
                        key: 'Cost2023',
                        render: (h, params) => {
                            return h('span', params.row.Cost2023 ? this.CustomMethods.numTo$(params.row.Cost2023) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品毛利率(%)',
                        key: 'GrossMargin2023',
                        render: (h, params) => {
                            return h('span', params.row.GrossMargin2023 ? params.row.GrossMargin2023 : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    }
                ]
            })
            columns.push({
                title: '2022中报',
                align: 'center',
                children: [
                    {
                        title: '产品收入(亿元)',
                        key: 'Income2022',
                        render: (h, params) => {
                            return h('span', params.row.Income2022 ? this.CustomMethods.numTo$(params.row.Income2022) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品成本(亿元)',
                        key: 'Cost2022',
                        render: (h, params) => {
                            return h('span', params.row.Cost2022 ? this.CustomMethods.numTo$(params.row.Cost2022) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品毛利率(%)',
                        key: 'GrossMargin2022',
                        render: (h, params) => {
                            return h('span', params.row.GrossMargin2022 ? params.row.GrossMargin2022 : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    }
                ]
            })
            columns.push({
                title: '2021中报',
                align: 'center',
                children: [
                    {
                        title: '产品收入(亿元)',
                        key: 'Income2021',
                        render: (h, params) => {
                            return h('span', params.row.Income2021 ? this.CustomMethods.numTo$(params.row.Income2021) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品成本(亿元)',
                        key: 'Cost2021',
                        render: (h, params) => {
                            return h('span', params.row.Cost2021 ? this.CustomMethods.numTo$(params.row.Cost2021) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品毛利率(%)',
                        key: 'GrossMargin2021',
                        render: (h, params) => {
                            return h('span', params.row.GrossMargin2021 ? params.row.GrossMargin2021 : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    }
                ]
            })
            columns.push({
                title: '2020中报',
                align: 'center',
                children: [
                    {
                        title: '产品收入(亿元)',
                        key: 'Income2020',
                        render: (h, params) => {
                            return h('span', params.row.Income2020 ? this.CustomMethods.numTo$(params.row.Income2020) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品成本(亿元)',
                        key: 'Cost2020',
                        render: (h, params) => {
                            return h('span', params.row.Cost2020 ? this.CustomMethods.numTo$(params.row.Cost2020) : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    },
                    {
                        title: '产品毛利率(%)',
                        key: 'GrossMargin2020',
                        render: (h, params) => {
                            return h('span', params.row.GrossMargin2020 ? params.row.GrossMargin2020 : '--')
                        },
                        minWidth: 80,
                        align: 'center',
                    }
                ]
            })
            return columns






        },
        changePageIndex(e) {
            this.pageIndex = e
            this.GetChainIncomeCostPage()
        },
        setEcharts1() {
            var chartDom = document.getElementById('echarts1');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                title: {
                    text: '主营产品收入',
                    show: true,

                },
                legend: {
                    data: ['亿元', '百分比']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2023', '2022', '2021', '2020'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '亿元',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '%',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '亿元',
                        type: 'bar',
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //         return value + '';
                        //     }
                        // },
                        data: [
                            2.6, 5.9, 9.0, 26.4,
                        ]
                    },
                    {
                        name: '百分比',
                        type: 'line',
                        yAxisIndex: 1,
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //         return value + ' °C';
                        //     }
                        // },
                        data: [2.0, 2.2, 3.3, 4.5,]
                    }
                ]
            };
            option && myChart.setOption(option);

        },
        setEcharts2() {
            var chartDom = document.getElementById('echarts2');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                title: {
                    text: '主营产品成本',
                    show: true,

                },
                legend: {
                    data: ['亿元', '百分比']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2023', '2022', '2021', '2020'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '亿元',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '%',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '亿元',
                        type: 'bar',
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //         return value + '';
                        //     }
                        // },
                        data: [
                            2.6, 5.9, 9.0, 26.4,
                        ]
                    },
                    {
                        name: '百分比',
                        type: 'line',
                        yAxisIndex: 1,
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //         return value + ' °C';
                        //     }
                        // },
                        data: [2.0, 2.2, 3.3, 4.5,]
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        setEcharts3() {
            var chartDom = document.getElementById('echarts3');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                title: {
                    text: '主营产品毛利率',
                    show: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['2023', '2022', '2021', '2020',]
                },
                yAxis: {
                    name: '%',
                    type: 'value'
                },
                series: [
                    {
                        name: '百分比',
                        data: [120, 200, 150, 80,],
                        type: 'bar'
                    }
                ]
            }
            option && myChart.setOption(option);
        },
    },
    watch: {
        exchangeCode(newVal, oldVal) {
            this.changePageIndex(1)
        }
    },
    computed: {
        // tableListColumns() {
        //     let columns = []
        //     columns.push({
        //         title: '序号',
        //         key: 'Id',
        //         render: (h, params) => {
        //             return h('span', params.index + this.pageIndex * 10 - 9)
        //         },
        //         width: 80,
        //         align: 'center',
        //         fixed: 'left'
        //     })
        //     columns.push({
        //         title: '企业名称',
        //         key: 'CompanyName',
        //         render: (h, params) => {
        //             return h('span', params.row.CompanyName ? params.row.CompanyName : '--')
        //         },
        //         minWidth: 80,
        //         align: 'center',
        //         fixed: 'left'
        //     })
        //     columns.push({
        //         title: '2023中报',
        //         key: 'Qymc',
        //         children: [
        //             {
        //                 title: 'Age',
        //                 key: 'age',
        //                 align: 'center',
        //                 width: 200,
        //                 sortable: true
        //             },
        //         ]
        //     })
        //     columns.push({
        //         title: '2022中报',
        //         key: 'Ygs',
        //         children: [
        //             {
        //                 title: 'Age',
        //                 key: 'age',
        //                 align: 'center',
        //                 width: 200,
        //                 sortable: true
        //             },
        //         ]
        //     })
        //     return columns
        // },

    }


}
</script>

<style lang="less" scoped>

</style>
<style lang="less" scoped></style>