<template>
    <div style="background-color: #f8f8f8;">
        <div class="headers">
            <div class="headers-header">
                <div class="header-names">
                    <div><span class="header-number">9</span>个</div>
                    <div style="margin-top: 9px;">当前未结束的研发项目</div>
                </div>
            </div>
            <div class="headers-header">
                <div class="header-names">
                    <div><span class="header-number">21</span>个</div>
                    <div style="margin-top: 9px;">累计销售的产品(服务)</div>
                </div>
            </div>
            <div class="headers-header">
                <div class="header-names">
                    <div><span class="header-number">120</span>个</div>
                    <div style="margin-top: 9px;">专家库专家</div>
                </div>
            </div>
            <div class="headers-header">
                <div class="header-names">
                    <div><span class="header-number">16</span>个</div>
                    <div style="margin-top: 9px;">有效知识产权数量</div>
                </div>
            </div>
            <div class="headers-header">
                <div class="header-names">
                    <div><span class="header-number">19</span>个</div>
                    <div style="margin-top: 9px;">论文数量</div>
                </div>
            </div>
            <div class="headers-header">
                <div class="header-names">
                    <div><span class="header-number">23</span>个</div>
                    <div style="margin-top: 9px;">标准制定</div>
                </div>
            </div>
            <div class="headers-header">
                <div class="header-names">
                    <div><span class="header-number">36</span>个</div>
                    <div style="margin-top: 9px;">资质证书</div>
                </div>
            </div>
        </div>
        <div class="contents">
            <div class="contents-one">
                <div class="one-lefts" style="width: 48.6%;">
                    <div class="one-left">
                        <div class="one-left-left">
                            <div class="kechuang">科创评估 <span><i class="el-icon-info"></i></span> </div>
                            <div class="zuoyue-area">
                                <div style="position: relative;top: -9px;">
                                    <div class="zhuoy">卓越</div>
                                    <div class="dengji">科创等级 | 86 </div>
                                </div>
                            </div>
                        </div>

                        <div id="main" style="width: 407px;height:400px;"></div>
                    </div>
                </div>
                <div class="one-lefts" style="padding-left: 0.5%;width: 51%;">
                    <div class="one-right">
                        <div class="one-right">
                            <div class="right-header">
                                <div class="content-name">科创认定情况 <span><i class="el-icon-info"></i></span> </div>
                                <div class="ngakénan-area">
                                    <div style="padding-right: 30px;">
                                        <div class="wei"></div>
                                        <span>已认定</span>
                                    </div>
                                    <div>
                                        <div class="wei" style="background-color: #D6D8EA;"></div>
                                        <span>未认定</span>
                                    </div>
                                </div>


                            </div>
                            <div class="kechuang-area">
                                <div class="kechuangs">
                                    <div class="kechuan-name" v-for="(item, index) in listDate" :key="index"
                                        :class="{ 'active2': item.type === 0 }">
                                        {{ item.name }}
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="contents" style="position: relative;top: -28px;">
            <div class="contents-one">
                <div class="one-lefts" style="width:48.6%;">
                    <div class="one-left">
                        <div>
                            <div class="kechuang">经营情况 <span style="color: #3333;">(万元)</span> </div>

                        </div>

                        <div id="kahanan" style="width: 407px;height:400px;"></div>
                    </div>
                </div>
                <div class="one-lefts" style="padding-left: 0.5%;width: 51%;">
                    <div class="one-right">
                        <div class="one-right">
                            <div class="right-header">
                                <div class="content-name">近一年产品（服务）收入 <span><i class="el-icon-info"></i></span> </div>
                              


                            </div>
                            <div class="project-area">
                                <div class="project-header">
                                    <div>产品（服务）名称</div>
                                    <div>合计收入 <span>1300万元</span> </div>
                                </div>
                                <div class="projects-area">
                                    <div class="projects" v-for="(item, index) in fuwuDate" :key="index">
                                        <div class="biaozhi">{{ index + 1 }}</div>
                                        <div class="projects-name">{{ item.name }}</div>

                                        <div class="jindu"><el-progress :text-inside="true" :stroke-width="26"
                                                :percentage=item.percentage></el-progress></div>
                                        <div class="project-price">{{ item.price }}万元</div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div class="contents" style="position: relative;top: -56px;">
            <div class="contents-one">
                <div class="one-lefts" style="width: 48.5%;">
                    <div class="one-left">
                        <div>
                            <div class="kechuang">企业职工 <span style="color: #3333;">(个)</span> </div>

                        </div>

                        <div id="qiye" style="width: 607px;height:400px;"></div>
                    </div>
                </div>
                <div class="one-lefts" style="padding-left: 0.5%;width: 51%">
                    <div class="zhiwu-area">
                        <div class="zhiwu-left">
                            <div class="zhiwus">
                                <div class="kechuang" style="margin-top: 0;">职称分布</div>
                                <div>
                                    <div id="professionaltitle" style="width: 307px;height:320px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="zhiwu-left">
                            <div class="zhiwus2">
                                <div class="kechuang" style="margin-top: 0;">有效知识产权</div>
                                <div id="knowledges" style="width: 307px;height:320px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    name: 'dataoverview',
    data() {
        return {
            fuwuDate: [
                { name: 'AY-99802VOCR动态服务系统', price: 700, percentage: 51 },
                { name: 'CD-98832服务', price: 600, percentage: 41 },
                { name: 'AG-科技资讯服务', price: 500, percentage: 15 },
                { name: 'UY-09812', price: 400, percentage: 23 },
                { name: 'UT-09812JJ', price: 300, percentage: 12 },
                { name: '其他', price: 360, percentage: 18 },
            ],
            listDate: [
                { name: '雏鹰企业', type: 1 },
                { name: '高新技术企业', type: 1 },
                { name: '专精特新中小企业', type: 1 },
                { name: '独角兽企业', type: 1 },
                { name: '创新型中小企业', type: 0 },
                { name: '科技型中小企业', type: 0 },
                { name: '研究型机构', type: 0 },
                { name: '民营科技企业', type: 1 },
                { name: '工业互联网与云平台企业', type: 1 },
                { name: '绿色制造', type: 1 },
            ]
        }
    },
    mounted() {
        this.ones()
        this.getkahanan()
        this.getqiye()
        this.getprofessionaltitle()
        this.getknowledge()
    },
    methods: {
        //科创评估
        ones() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            let option = {
                graphic: {
                    type: 'text',
                    left: '39%',
                    top: '46%',
                    style: {
                        text: '86',
                        fontSize: 40,
                        fontWeight: 'bold',
                        fontFamily: 'Arial',
                        fill: '#ffffff', // 文字颜色
                        textAlign: 'center',
                        textVerticalAlign: 'middle'
                    },
                    z: 10
                },
                radar: [
                    {
                        indicator: [
                            { text: '成长性' },
                            { text: '研发实力' },
                            { text: '技术规模' },
                            { text: '科研成果' }
                        ],
                        center: ['45%', '50%'],
                        radius: 120,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: 'circle',
                        axisName: {
                            formatter: '{value}',
                            color: '#1c37ea'
                        },

                        splitArea: {
                            areaStyle: {
                                color: ['#b2bbf8', '#d1d7fc', '#dfe3fd', '#eef0fe']
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#b2bbf8', // 网状线颜色
                                width: 1
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        emphasis: {
                            lineStyle: {
                                width: 4
                            }
                        },
                        data: [
                            {
                                value: [60, 5, 0.3, -100, 1500],
                                name: 'Data B',
                                areaStyle: {
                                    color: 'rgba(116, 133, 248, 0.5)'
                                }
                            }
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        //经营情况
        getkahanan() {
            var kahanans = echarts.init(document.getElementById('kahanan'));
            const colors = ['#5070dd', '#b6d634',];
            let option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '5%'
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'Evaporation',
                        position: 'left', name: ''
                    },
                    {
                        type: 'value',
                        name: 'Precipitation',
                        position: 'right',
                        alignTicks: true,
                        offset: 80,
                    },
                    {
                        type: 'value',
                        name: '温度 (°C)',
                        position: 'left', // 左边纵坐标
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[2] // 颜色匹配 Temperature
                            }
                        },
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: 'Evaporation',
                        type: 'bar',
                        yAxisIndex: 0, // 绑定到右边的 yAxis (Evaporation)
                        data: [3.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: 'Temperature (Line 1)',
                        type: 'line',
                        yAxisIndex: 2, // 绑定到左边的 yAxis (温度)
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    },
                    {
                        name: 'Temperature (Line 2)',
                        type: 'line',
                        yAxisIndex: 2, // 也绑定到左边的 yAxis
                        data: [5.0, 3.2, 4.3, 5.5, 3.3, 15.2, 30.3, 13.4, 23.0, 26.5, 22.0, 16.2]
                    }
                ]
            };

            kahanans.setOption(option);
        },
        //企业职工
        getqiye() {
            var getqiyes = echarts.init(document.getElementById('qiye'));
            const colors = ['#5070dd', '#b6d634',];
            let option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '5%'
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: 'Evaporation',
                        position: 'left', name: ''
                    },
                    {
                        type: 'value',
                        name: 'Precipitation',
                        position: 'right',
                        alignTicks: true,
                        offset: 80,
                    },
                    {
                        type: 'value',
                        name: '温度 (°C)',
                        position: 'left', // 左边纵坐标
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[2] // 颜色匹配 Temperature
                            }
                        },
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name: 'Evaporation',
                        type: 'bar',
                        yAxisIndex: 0, // 绑定到右边的 yAxis (Evaporation)
                        data: [3.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: 'Temperature (Line 1)',
                        type: 'line',
                        yAxisIndex: 2, // 绑定到左边的 yAxis (温度)
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    },
                    {
                        name: 'Temperature (Line 2)',
                        type: 'line',
                        yAxisIndex: 2, // 也绑定到左边的 yAxis
                        data: [5.0, 3.2, 4.3, 5.5, 3.3, 15.2, 30.3, 13.4, 23.0, 26.5, 22.0, 16.2]
                    }
                ]
            };

            getqiyes.setOption(option);
        },
        //职称分布
        getprofessionaltitle() {
            var professional = echarts.init(document.getElementById('professionaltitle'));
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '高级职称' },
                            { value: 735, name: '中级职称' },
                            { value: 580, name: '初级职称' },
                           
                        ]
                    }
                ]
            }
            professional.setOption(option);
        },
        //有效知识产权
        getknowledge(){
            var knowledge = echarts.init(document.getElementById('knowledges'));
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        center: ['50%', '55%'],
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                           
                        ]
                    }
                ]
            }
            knowledge.setOption(option);
        }
    }
}
</script>
<style>
.el-progress-bar__inner {
    background-color: #8391F7 !important;
    color: white !important;
}

.el-progress-bar__innerText {
    color: white !important;
}

.el-progress-bar__outer {
    height: 20px !important;
}
</style>
<style lang="scss" scoped>
.zhiwu-left {
    flex: 1;
    height: 100%;
}

.zhiwus {
    width: 99%;
    background: white;
    border-radius: 8px;
    padding-top: 30px;
}

.zhiwus2 {
    width: 97%;
    margin-left: 3%;
    background: white;
    border-radius: 8px;
    padding-top: 30px;
}

.projects-area {}

.project-price {
    width: 100px;
    position: relative;
    left: 30px;
    top: 1px;
}

.projects-name {
    width: 264px;
    margin-left: 18px;
}

.jindu {
    width: 349px;
    position: relative;
    left: 20px;
}

.biaozhi {
    width: 20px;
    height: 20px;
    background: #EDEFFE;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
}

.projects {
    margin-top: 18px;
    display: flex;
}

.project-header {
    display: flex;
    margin-top: 24px;
    color: #5B5E72;
    justify-content: space-between;
}

.project-area {
    width: 90%;
    margin: 0 auto;
    margin-top: 12px;
    color: #202638;
}

.active2 {
    background: #8391F7 !important;
    color: white !important;
}

.kechuan-name {
    padding: 10px 12px 10px 12px;
    background: #F7F7FA;
    color: #979BBC;
    margin-left: 23px;
    margin-top: 12px;
    border-radius: 30px;
    margin-top: 14px;
}

.kechuangs {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    margin-top: 32px;
}

.kechuang-area {}

.ngakénan-area {
    display: flex;
    font-size: 14px;
    color: #979BBC;
    position: relative;
    top: 30px;
    margin-right: 28px;
}

.wei {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #8391F7;
    margin-right: 6px;

}

.right-header {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: space-between;
}

.one-rihgt {
    display: flex;
}

.dengji {
    position: relative;
    left: 90px;
    top: 42px;
}

.zhuoy {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    left: 6vw;
    top: 33px;
}

.zuoyue-area {
    width: 216px;
    height: 100px;
    background: #EDEFFE;
    margin-top: 96px;
}

.kechuang {
    font-size: 18px;
    font-weight: bold;
    margin-left: 31px;
    margin-top: 30px
}

.content-name {
    margin-left: 31px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 30px;
}

.one-left-left {
    flex: 1;
}

.header-number {
    font-size: 20px;
    color: black;
    padding-right: 5px;
    font-weight: bold;
}

.header-names {
    color: #979BBC;
    margin-left: 25px;
    margin-top: 32px;
    font-size: 12px;
}



.one-left {
    width: 99%;
    height: 92%;
    background: white;
    border-radius: 10px;
    display: flex;
}

.zhiwu-area {
    display: flex;
    height: 100%;
}

.one-right {
    width: 100%;
    height: 92%;
    background: white;
    border-radius: 10px;

}

.one-lefts {

}

.contents-one {
    display: flex;
    width: 100%;
    margin-top: 14px;
}

.contents {
    width: 100%;
    background: #f8f8f8;

}

.headers {
    background: #f8f8f8;
  
    position: relative;
    margin-left: -1.1%;
}

.headers-header {
    width: 13.1%;
    height: 100px;
    border-radius: 10px;
    background: white;
    margin-top: 12px;
    display: inline-block;
    margin-left: 1.1%;
}
</style>