<template>
     <div class="main flex between">
            <div class="minLeft w60">
                <p class="fs28 tit b">创新窗口</p>
                <div class="mt20">
                    <div class="w100 flex around">
                        <div class="topLeft w48">
                            <p class="mtl8 fs24 b">核心技术</p>
                            <div class="mt30">
                                <div id="main1" style="max-width: 100%;height: 200px;"></div>
                            </div>
                            <div class="mt50">
                                <div id="main2" style="max-width: 100%;height: 320px;"></div>
                            </div>
                        </div>
                        <div class="w48">
                            <div class="topRight">
                                <p class="mtl8 fs24 b">平台载体</p>
                                <div class="mt20">
                                    <div id="main3" style="max-width: 100%;height: 200px;"></div>
                                </div>
                            </div>
                            <div class="topRight mt20">
                                <p class="mtl8 fs24 b">人才团队</p>
                                <div class="mt20">
                                    <div id="main4" style="max-width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w100 flex around mt20 mb12">
                        <div class="topLeft w48">
                            <p class="mtl8 fs24 b">科技企业</p>
                            <div class="mt30">
                                <div id="main5" style="max-width: 100%;height: 280px;"></div>
                            </div>
                        </div>
                        <div class="w48">
                            <div class="topRight">
                                <p class="mtl8 fs24 b">核心业务</p>
                                <div class="mt20 mb20">
                                    <div class="flex between">
                                        <div class="bg w48 flex acenter jcenter">
                                            <img src="../assets/images/backgroud.png" class="poab">
                                            <div class="flex acenter jcenter txt">
                                                <img src="../assets/images/1.png" class="img1">
                                                <p class="fs20">科技业务综合管理</p>
                                            </div>
                                        </div>
                                        <div class="bg w48 flex acenter jcenter">
                                            <img src="../assets/images/backgroud.png" class="poab">
                                            <div class="flex acenter jcenter txt">
                                                <img src="../assets/images/2.png" class="img1">
                                                <p class="fs20">科技金融服务</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex between">
                                        <div class="bg w48 flex acenter jcenter">
                                            <img src="../assets/images/backgroud.png" class="poab">
                                            <div class="flex acenter jcenter txt">
                                                <img src="../assets/images/3.png" class="img1">
                                                <p class="fs20">科技新政主要目标任务</p>
                                            </div>
                                        </div>
                                        <div class="bg w48 flex acenter jcenter">
                                            <img src="../assets/images/backgroud.png" class="poab">
                                            <div class="flex acenter jcenter txt">
                                                <img src="../assets/images/4.png" class="img1">
                                                <p class="fs20">科技创新支撑经济发展</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w39 ml20">
                <div class="minRight">
                    <div>
                        <div class="flex between tit pr20">
                            <p class="fs28 b">任务落实</p>
                            <p class="c149 fs18">详细></p>
                        </div>
                        <div>
                            <div class="flex around jcenter mt20">
                                <div class="flex column acenter">
                                    <div class="circle_bot bge7 flex acenter jcenter mb12">
                                        <div class="circle_mid bg15b fs20 flex acenter jcenter cf">10</div>
                                    </div>
                                    <p class="fs20">正常任务</p>

                                </div>
                                <div class="flex column acenter">
                                    <div class="circle_bot bgf29 flex acenter jcenter mb12">
                                        <div class="circle_mid bgff8 fs20 flex acenter jcenter cf">0</div>
                                    </div>
                                    <p class="fs20">预警任务</p>
                                </div>
                                <div class="flex column acenter">
                                    <div class="circle_bot bgfb flex acenter jcenter mb12">
                                        <div class="circle_mid bgd4 fs20 flex acenter jcenter cf">1</div>
                                    </div>
                                    <p class="fs20">滞后任务</p>
                                </div>
                            </div>
                            <div class="p20">
                                <div class="w100 flex between mt20">
                                    <div class="tiext">
                                        <p class="p20 fs20 c3 b">重点核心技术攻关</p>
                                        <div class="pl20 pr20">
                                            <div class="flex between">
                                                <p>共<span class="c149 b">4</span>项</p>
                                                <p>滞后<span class="cd4 b">1</span>项</p>
                                            </div>
                                            <div class="bgd4 h20 w100">
                                                <div class="bgs w75"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tiext">
                                        <p class="p20 fs20 c3 b">战略科技力量培养</p>
                                        <div class="pl20 pr20">
                                            <div class="flex between">
                                                <p>共<span class="c149 b">3</span>项</p>
                                                <p>滞后<span class="cd4 b">0</span>项</p>
                                            </div>
                                            <div class="bgd4 h20">
                                                <div class="bgs w100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w100 flex between mt20">
                                    <div class="tiext">
                                        <p class="p20 fs20 c3 b">科技企业倍增提质</p>
                                        <div class="pl20 pr20">
                                            <div class="flex between">
                                                <p>共<span class="c149 b">2</span>项</p>
                                                <p>滞后<span class="cd4 b">0</span>项</p>
                                            </div>
                                            <div class="bgd4 h20">
                                                <div class="bgs w100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tiext">
                                        <p class="p20 fs20 c3 b">科技人才团队建设</p>
                                        <div class="pl20 pr20">
                                            <div class="flex between">
                                                <p>共<span class="c149 b">2</span>项</p>
                                                <p>滞后<span class="cd4 b">0</span>项</p>
                                            </div>
                                            <div class="bgd4 h20">
                                                <div class="bgs w100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="minRight mt20 pb45">
                    <div class="flex between tit">
                        <p class="fs28 b">应用场景</p>
                    </div>
                    <div class="flex between p20">
                        <div class="w48">
                            <div class="flex acenter jcenter mb20">
                                <div class="lines"></div>
                                <p class="fs24 c3 b">产学研合作</p>
                                <div class="lines"></div>
                            </div>
                            <div class="txtLeft p20">
                                <div class="flex between lh70 fs18">
                                    <p>合作大院名校</p>
                                    <p>家</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>技术经纪人</p>
                                    <p>名</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>服务企业</p>
                                    <p>次</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>解决技术难题</p>
                                    <p>个</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>实现成果转化</p>
                                    <p>项</p>
                                </div>
                            </div>
                        </div>
                        <div class="w48 ml20">
                            <div class="flex acenter jcenter mb20">
                                <div class="lines"></div>
                                <p class="fs24 c3 b">科技特派员</p>
                                <div class="lines"></div>
                            </div>
                            <div class="txtLeft p20">
                                <div class="flex between lh70 fs18">
                                    <p>特派员数</p>
                                    <p>名</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>特派员数省级</p>
                                    <p>名</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>特派员数市级</p>
                                    <p>名</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>实施项目</p>
                                    <p>个</p>
                                </div>
                                <div class="flex between lh70 fs18">
                                    <p>引进成果</p>
                                    <p>项</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

</template>

<script>
  let one,two,three,four,five;
export default {
  data() {
    return {

    };
  },
  mounted() {
    let _this =this;
    this.init1();
    this.init2();
    this.init3();
    this.init4();
    this.init5();
    window.onresize = () => {
        return (() => {
          _this.init1();
          _this.init2();
          _this.init3();
          _this.init4();
          _this.init5();
        })();
    };
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
  },
  methods: {
    init1() {
      if (one != null && one != "" && one != undefined) {
              one.dispose();//销毁
      }
      one = this.$echarts.init(document.getElementById("main1"));
      one.setOption({
            color: ['#6590F2', '#83D9AD', '#EEBE45', '#E290B3'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                right: '15%',
                orient: 'vertical',
                top: 'center',
                icon: "circle",
            },
            series: [
                {
                    name: '核心技术',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold',
                            color: ['#6590F2', '#83D9AD', '#EEBE45', '#E290B3'],
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 16, name: '前言新兴领域' },
                        { value: 21, name: '生命健康' },
                        { value: 3, name: '环境保护' },
                        { value: 38, name: '农业领域' }
                    ],
                    left: '-40%'
                }
            ],

        });
    },
    init2() {
      if (two != null && two != "" && two != undefined) {
              two.dispose();//销毁
      }
      two = this.$echarts.init(document.getElementById("main2"));
      two.setOption({
            color: ['#3CCBCD', '#B7A3DD', '#62B4EF', '#FFB980'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['制造技术提升', '前沿新兴领域', '生命健康', '环境保护']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2016', '2017', '2018', '2019', '2020'],
                axisLine: {
                    lineStyle: {
                        color: '#008ACD',
                    },
                    show: true
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 25,
                splitNumber: 5,
                axisLine: {
                    lineStyle: {
                        color: '#008ACD',
                    },
                    show: true
                },
                axisTick: {
                    show: true
                },
                splitArea: {
                    show: true
                }
            },
            series: [
                {
                    name: '制造技术提升',
                    type: 'line',
                    data: [3, 6, 9, 12,],
                    smooth: true
                },
                {
                    name: '前沿新兴领域',
                    type: 'line',
                    data: [4, 7, 9, 15, 16],
                    smooth: true
                },
                {
                    name: '生命健康',
                    type: 'line',
                    data: [, , 7, 14, 21],
                    smooth: true
                },
                {
                    name: '环境保护',
                    type: 'line',
                    data: [, , 1, 2, 3],
                    smooth: true
                }
            ]
        });
    },
    init3() {
      if (three != null && three != "" && three != undefined) {
              three.dispose();//销毁
      }
      three = this.$echarts.init(document.getElementById("main3"));
      three.setOption({
            color: ['#6590F2', '#83D9AD', '#EEBE45', '#E290B3', '#8DD2F4'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                right: '5%',
                orient: 'vertical',
                top: 'center',
                icon: "circle",
            },
            series: [
                {
                    name: '平台载体',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold',
                            color: ['#8DC5F4', '#83D9AD', '#EEBE45', '#E290B3', '#8DD2F4']
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 16, name: '产业创新服务综合体' },
                        { value: 9, name: '孵化器' },
                        { value: 23, name: '众创空间' },
                        { value: 55, name: '企业研究院' },
                        { value: 183, name: '高新技术企业研发中心' }
                    ],
                    left: '-40%'
                }
            ],

        });
    },
    init4() {
      if (four != null && four != "" && four != undefined) {
              four.dispose();//销毁
      }
      four = this.$echarts.init(document.getElementById("main4"));
      four.setOption({
            color: ['#EEBE45', '#83D9AD', '#6590F2'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                right: '5%',
                orient: 'vertical',
                top: 'center',
                icon: "circle",
            },
            series: [
                {
                    name: '人才团队',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold',
                            color: ['#EEBE45', '#83D9AD', '#6590F2']
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 0, name: '领军型创新创业团队' },
                        { value: 0, name: '绿谷精英创新引领行动计划' },
                        { value: 0, name: '绿谷经营科技领军人才' }
                    ],
                    left: '-40%'
                }
            ],

        });
    },
    init5() {
      if (five != null && five != "" && five != undefined) {
              five.dispose();//销毁
      }
      five = this.$echarts.init(document.getElementById("main5"));
      five.setOption({
            color: ['#3CCBCD', '#B7A3DD', '#62B4EF'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                right: '15%',
                orient: 'vertical',
                top: 'center',
                icon: "circle",
            },
            series: [
                {
                    name: '科技企业',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '14',
                            fontWeight: 'bold',
                            color: ['#3CCBCD', '#B7A3DD', '#62B4EF'],
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 0, name: '规上企业' },
                        { value: 15, name: '高新技术企业' },
                        { value: 59, name: '科技型中小企业' }
                    ],
                    left: '-40%'
                }
            ],

        });
    },
   },
};

</script>

<style lang="scss" scoped>
@media screen and (max-width: 1800px) {
    .main {
        width: calc(100% - 40px);
        ;
        background-color: #F0F2F5;
        margin: 0px auto;
        padding: 20px 0;
    }
    .minLeft, .minRight {
        /* width: calc(100% - 40px); */
        box-sizing: border-box;
        border-radius: 4px;
        /* padding: 20px; */
        /* margin: 0px auto; */
        background: #fff;
    }
}

@media screen and (min-width: 1800px) {
    .main {
        width: 1760px;
        background-color: #F0F2F5;
        width: 1800px;
        margin: 0px auto;
        padding: 20px 0;
    }
    .minLeft, .minRight {
        /* width: 1160px; */
        border-radius: 4px;
        /* padding: 20px 20px 20px; */
        background: #fff;
    }
}

.w60 {
    width: 60%;
}

.w39 {
    width: 39%;
}

.w48 {
    width: 48%;
}

.w100 {
    width: 100%;
}

.fs28 {
    font-size: 28px;
}

.fs24 {
    font-size: 24px;
}

.mtl8 {
    margin-top: 8px;
    margin-left: 8px;
}

.mt50 {
    margin-top: 50px;
}

.tit {
    border-bottom: 1px solid #f0f2f5;
    padding-left: 14px;
    line-height: 60px;
}

.topLeft {
    width: 48%;
    border: 1px solid #f3f3f3;
    border-radius: 8px;
}

.topRight {
    border: 1px solid #f3f3f3;
    border-radius: 8px;
}

.bg {
    /* background: url('../common/images/backgroud.png') no-repeat;
    background-size: cover; */
    height: 140px;
    position: relative;
}

.bg div {
    z-index: 3;
}

.poab {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.img1 {
    margin-right: 20px;
}

.txt {
    width: 70%;
    margin: 0 auto;
}

.mb12 {
    margin-bottom: 12px;
}

.c149 {
    color: #1492f5;
}

.circle_bot {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 3;
}

.circle_mid {
    width: 30px;
    height: 30px;
    margin: 0 0 0px 0;
    border-radius: 50%;
    z-index: 5;
}

.bge7 {
    background: #e7f8ed;
}

.bgf29 {
    background: #FFF2E9;
}

.bgfb {
    background: #FBE9E9;
}

.bgd4 {
    background: #DA2626;
}

.tiext {
    width: 48%;
    height: 130px;
    background: #f7f8fa;
    border-radius: 6px;
}

.m20 {
    margin: 20px;
}

.h20 {
    height: 20px;
    position: relative;
}

.bgd4 {
    background: #d40000;
}

.bgs {
    height: 100%;
    position: absolute;
    left: 0;
    background: #15be50;
}

.w75 {
    width: 75%;
}

.lines {
    width: 59px;
    height: 2px;
    background: linear-gradient( 270deg, #4192f6, #fff);
}
.txtLeft {
    border-radius: 4px;
    background: #f7f8fa;
}
.lh70 {
    line-height: 70px;
}
.pb45 {
    padding-bottom: 45px;
}
.mb40 {
    margin-bottom: 40px;
}
</style>
