<template>
    <div>
        <img style="width:100%" src="/assets/CNAS/title.png" alt="">
        <div class="animotop" style="background:#FFFFFF;margin-bottom:30px">
            <div  class="animove cardPubClass">
                <div style="text-align:center;margin:50px 0">
                    <img src="/assets/CNAS/title1.png" alt="">
                </div>
                <div class="aboutCNAS"> 
                    <div>
                        <img src="/assets/CNAS/certificate.png" alt="">
                    </div>
                    <div class="aboutContent">
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;北京关键科技股份有限公司测评实验室隶属于北京关键科技股份有限公司，成立于2017年5月8日，接受北京关键科技股份有限公司等上级部门的指导，并于2017年8月23号获取中国合格评定国家认可委员会（CNAS）（注册号：CNAS L10233）和中国国防科技工业实验室认可委员（DILAC）。
                        </div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实验室在职职工40余人，其中具有软件测试及实验室管理经验人员9人，有丰富软件测试技术及实验室管理能力人员15人。拥有测试平台服务器、PC机等仪器设备以及各类软件测试工具，固定资产原值为人民币近600多万元。实验室工作及检测区域总面积200多平方米。
                        </div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实验室各部门按照“科学公正、诚信服务、准确高效、持续改进”的方针，按照“检测报告合格率大于95.2％、客户满意度大于96.5％、重大质量事故为0”的质量目标，独立开展承担的工作。
                        </div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认真执行国家有关政策、法令、条例、制度和各项标准，准确、公正地开展各类软件产品的检测活动，不利用客户产品的相关信息开展盈利性工作。
                        </div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键科技软件测评实验室具有独立开展试验、人员培训等业务工作的权力，所制定的规章制度，北京关键科技股份有限公司的各级领导予以尊重和支持，检测结果不受任何干预。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align:center;margin:50px 0">
            <img src="/assets/CNAS/title2.png" alt="">
        </div>
        <div class="animotop" style="background:#F5F5F7;padding-bottom: 90px;">
            <div  class="animove cardPubClass">
                <div class="rangeContent"> 
                    <p class="pubTitleDes">
                        实验室技术力量雄厚，拥有符合相关标准和规程要求的检测软件、设备、设施和环境条件
                    </p>
                    <div style="display:flex;justify-content: space-between;">
                        <div class="rangeBox" style="border-bottom: 4px solid #1371EC;">
                            <img src="/assets/CNAS/rangeImg1.png" alt="">
                            <p>军队、军工院所</p>
                        </div>
                        <div class="rangeBox" style="border-bottom: 4px solid #EC9D13;">
                            <img src="/assets/CNAS/rangeImg2.png" alt="">
                            <p>政府及下属事业单位</p>
                        </div>
                        <div class="rangeBox" style="border-bottom: 4px solid #3FCCD5">
                            <img src="/assets/CNAS/rangeImg3.png" alt="">
                            <p>银行、金融</p>
                        </div>
                        <div class="rangeBox" style="border-bottom: 4px solid #F45757">
                            <img src="/assets/CNAS/rangeImg4.png" alt="">
                            <p>轨道交通</p>
                        </div>
                        <div class="rangeBox" style="border-bottom: 4px solid #37A4F0">
                            <img src="/assets/CNAS/rangeImg5.png" alt="">
                            <p>互联网企业</p>
                        </div>
                    </div>
                    <div style="display:flex;justify-content: space-between;margin-top: 50px;">
                        <div class="rangeLeft">
                            <el-carousel indicator-position="none" height="307px" arrow="never" ref="rangeBanner">
                                <el-carousel-item v-for="item in rangeBannerList" :key="item.id">
                                    <img :src="item.imgurl" style="width: 457px;height: 307px;" alt="">
                                </el-carousel-item>
                            </el-carousel>
                            <div style="display:flex;justify-content: space-between;margin-top: 15px;">
                                <div style="font-size: 15px;font-weight: 400;color: #666;line-height: 30px;">软件测评实验室能力认可范围</div>
                                <div style="text-align: right;">
                                    <el-button class="arrowLeft arrowBtn" type="primary" @click="prev" icon="el-icon-arrow-left"></el-button>
                                    <el-button class="arrowRight arrowBtn" type="primary" @click="next" icon="el-icon-arrow-right"></el-button>
                                </div>
                            </div>
                        </div>
                        <div style="width: 700px;padding-top: 35px;">
                            <p style="font-size: 16px;font-weight: bold;color: #333333;">
                                主要从事通用应用软件领域、嵌入式软件领域以及可编程逻辑器件软件的软件检测活动
                            </p>
                            <div style="width: 34px;height: 4px;background: #0066EB;border-radius: 2px;"></div>
                            <p style="font-size: 15px;font-weight: 400;color: #333333;line-height: 32px;">
                                嵌入式软件检测活动包括：用户文档集要求、代码审查、静态分析、代码走查、功能测试、性能测试、接口测试、人机交互界面测试、强度测试、余量测试、安全性测试、恢复性测试、边界测试、安装性测试；通用应用软件检测活动包括：用户文档集要求、功能性、性能效率、兼容性、易用性、可靠性、信息安全性、维护性、可移植性；
可编程逻辑器件软件检测活动包括：文档审查、代码审查、逻辑测试、功能测试、性能测试、时序测试、接口测试、强度测试、余量测试、安全性测试、边界测试。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="animotop" style="background:#FFFFFF;margin-bottom:60px">
            <div  class="animove cardPubClass">
                <div style="text-align:center;margin:50px 0">
                    <img src="/assets/CNAS/title3.png" alt="">
                </div>
                <div class="consultingScheme"> 
                    <div>
                        <div class="consultingSchemeLeftTitle">
                            实验室建设实施流程
                        </div>
                        <img style="margin-top:20px;" src="/assets/CNAS/consultingSchemeLeftImg.png" alt="">
                    </div>
                    <div>
                        <div class="consultingSchemeRightTitle">
                            实验室建设咨询计划
                        </div>
                        <div style="margin-top:30px;font-size: 15px;font-weight: 400;color: #1A1A1A;line-height: 1.8;">
                            我公司计划用10个月左右的时间协助客户通过CNAS认证，全程为客户提供包括但不限于以下服务：现状分析、标准培训、质量体系文件编制、体系试运行指导、内部评审、能力验证、体系正式运行、体系改进、审核前准备、不符合项整改指导等服务。具体的咨询实施计划如下表：
                        </div>
                        <div class="tableClass">
                            <el-table
                                :header-cell-style="headFirst"
                                :cell-style="contentStyle"
                                :data="tableData"
                                border
                                header-align="center"
                                style="width: 100%">
                                <el-table-column
                                    label="序号"
                                    prop="no"
                                    width="67">
                                </el-table-column>
                                <el-table-column
                                    prop="name"
                                    label="实施阶段名称"
                                    width="115">
                                </el-table-column>
                                <el-table-column
                                    label="实施内容"
                                    prop="content"
                                    width="">
                                </el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="持续时间"
                                     width="92">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="background:#FFFFFF;">
            <div  class="animove successfulCases">
                <div style="text-align:center;padding:50px 0">
                    <img src="/assets/CNAS/title4.png" alt="">
                </div>
                <div style="width:1200px;margin:0 auto;display:flex;padding-bottom: 70px;">
                    <div style="display:flex">
                        <div>
                            <div style="margin-bottom: 25px;">
                                <img src="/assets/CNAS/cepingzhongxin.png" alt="">
                            </div>
                            <div style="margin-bottom: 25px;">
                                <img src="/assets/CNAS/bingqigongye.png" alt="">
                            </div>
                            <div>
                                <img src="/assets/CNAS/anchang.png" alt="">
                            </div>
                        </div>
                        <div style="margin-left:30px;margin-right:50px;">
                            <div style="margin-bottom: 25px;">
                                <img src="/assets/CNAS/hangtiankeji.png" alt="">
                            </div>
                            <div style="margin-bottom: 25px;">
                                <img src="/assets/CNAS/dianke.png" alt="">
                            </div>
                            <div>
                                <img src="/assets/CNAS/minshengyinhang.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div style="font-size: 15px;font-weight: 400;color: #FFFFFF;line-height: 32px;">
                        公司拥有众多大型软件测试项目的案例和经验，是中国人民解放军第6108工厂的战略合作软件测评支撑单位，先后为该单位提供陆军坦克装备系统测试20余项；是工业和信息化部计算机与微电子发展研究中心（中国软件评测中心）、航天二院二部、航天三院三部和中国兵器工业信息中心的战略合作人员技术支撑单位，长期为该单位提供专业软件测评人员和技术服务；是山东安畅物联网科技有限公司的战略合作软件测评支撑单位，先后为该公司提供软件测试、安全测评等10余项。其他部分成功合作客户有：中电11所、中电 14 所、中电 20 所、中电28所、中电 29 所、中电 30 所、中电 34 所、中电 54 所、航空 301 所、兵器 205 所、兵器206所、兵器测评中心、赛迪、航空 611 所、云南无线电、航天二院、航天三院、航天七院、哈工程、中国民生银行等。
                    </div>
                </div>
            </div>
        </div>
        <div class="animotop" style="background:#FFFFFF;width:1200px;margin:0 auto;">
            <div  class="animove">
                <div style="text-align:center;padding:50px 0">
                    <img src="/assets/CNAS/title5.png" alt="">
                </div>
                <div style="text-align:center;padding-bottom:50px">
                    <img src="/assets/CNAS/toolSupport.png" alt="">
                </div>
                <div style="display:flex;padding-bottom: 70px;">
                    <div>
                        <img src="/assets/CNAS/toolLeft.png" alt="">
                    </div>
                    <div style="font-size: 15px;font-weight: 400;color: #333;line-height: 32px;margin-left:36px;padding-top: 30px;">
                        <div>
                            软件测评CNAS实验室建设过程中为了支撑相关的能力范围，比如：通用软件检测能力范围中的性能效率、信息安全性以及嵌入式软件检测能力范围中的代码审查、静态分析、代码走查、功能测试、性能测试、接口测试等都需要有专业的测试工具进行支撑。
                        </div>
                        <img src="/assets/CNAS/toolLine.png" alt="">
                        <div>
                            北京关键科技有10余年的软件测试工具研发及测试服务经验，可以为贵单位实验室建设提供所需的测试工具，根据我们以往的实施以及自身实验室建设过程中的经验，汇总出了如下工具:
                        </div>
                    </div>
                </div>
                <div style="display:flex;justify-content: space-between;text-align:center;">
                    <div v-for="(item,index) in toolList" :key='index'>
                        <img :src="item.imgurl" style="margin-bottom:20px;" alt="">
                        <div class="toolName" @click="clickTool(item.id)" @mouseover="clickTool(item.id)" :class="{activeTool: activeTool == item.id}">{{item.title}}</div>
                        <div v-if="activeTool == item.id" style="margin-top:20px;width: 180px;height: 4px;background: #0066EB;"></div>
                    </div>
                </div>
                <div style="background:#F5F5F7;padding:40px 24px;font-size: 15px;font-weight: 400;color: #333;line-height: 26px;">
                    <div v-if="activeTool == 1">
                        通过词法分析、语法分析、控制流分析等技术对C++程序代码进行扫描，验证C++代码是否满足规范性、安全性、可靠性、可维护性等指标。发现代码中存在的开源项目许可证（License）、已知漏洞信息等，形成“开源风险清单”，量化分析代码中包含的开源代码成分及可能带来的风险（知识产权风险、安全漏洞风险等）。支持多种编程语言代码合规性检查，可准确量化软件代码组成，减少软件安全隐患，发现软件知识产权风险，科学评价软件自主化水平，帮助软件开发人员、软件测试人员、质量保证人员查找代码中存在的结构性错误、安全漏洞等问题，便于软件开发人员及时修补软件漏洞，从而保证软件的质量 。
                    </div>
                    <div v-if="activeTool == 2">
                        基于通信协议测试的基础软件测试工具，用于仿真大量虚拟用户对服务器进行并行访问，涉及电信系统、军用系统、电力系统、烟草系统、金融系统、电商系统、大数据、物联网、视频直播等大型应用，具有重要的应用场景和使用意义。
                    </div>
                    <div v-if="activeTool == 3">
                        实验室质量管理体系管理工具是一个面向测试全生命周期的协同管理平台。该平台基于B/S结构，集项目管理，测试计划管理、测试用例管理、测试执行管理、测试需求管理、测试环境管理、测试配置管理、缺陷故障库管理、文档管理、测试统计分析、被测件管理、测试过程质量管理、典型用例库管理等功能于一体，完整覆盖测试项目的全过程，可快速将测试管理体系本地化，提高测试效率与质量。
                    </div>
                    <div v-if="activeTool == 4">
                        嵌入式软件白盒测试工具是一款基于插桩、总线监听技术，实现嵌入式软件配置项及系统级源代码的测试与调试工具。该工具主要用于获取被测软件在目标机中SC、DC、MC/DC覆盖率，支持测试用例对应的函数调用及语句执行情况统计，也可用于软件整体性能、内存分配及代码调试跟踪等方面的系统集成测试。
                    </div>
                    <div v-if="activeTool == 5">
                        接口测试工具是一款针对自定义接口协议进行自动化的接口有效性验证工具，具备协议一致性检测能力和功能正确性验证能力。该工具集成多种用例生成算法，能够自动生成多种类型的测试数据，并可根据协议模型自动解析被测目标返回的数据。
                    </div>
                    <div v-if="activeTool == 6">
                        嵌入式软件虚拟验证平台是一个多节点、多核、多操作系统的系统级功能仿真与验证平台，利用虚拟化技术模拟真实硬件的物理行为，针对嵌入式系统构建CPU模型、构件模型和接口模型，能够实现处理器、内存、存储设备、外围接口设备、网络设备等虚拟化处理，形成一套完整的系统级嵌入式软件虚拟验证平台。
                    </div>
                </div>
                <div style="display:flex;justify-content: space-between;text-align:center;margin-bottom: 80px;">
                    <div>
                        <div>
                            <img src="/assets/CNAS/peopleSupport.png" style="margin:40px 0;" alt="">
                        </div>
                        <div style="width: 578px;height: 457px;background: #1A89F0;">
                            <img src="/assets/CNAS/peoopleImg.png" style="margin-top:27px;" alt="">
                            <div style="font-size: 15px;font-weight: 400;color: #FFFFFF;line-height: 28px;text-align:left;margin:23px;">
                                <div>
                                    北京关键科技股份有限公司软件测评实验室有专业测评人员40余人，其中高级职称人员占20%，中级职称人员占40%，在公司工作5年以上人员占15%。
                                </div>
                                <div>
                                    公司的软件测评人员参与过空军“XX导航软件、XX融合软件”几十万行级别的配置项测试、“XX机载平台软件”数万行级别的单元、部件测试，拥有丰富的测试经验，可以为客户单位提供软件测评技术以及测评流程的全方位指导。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <img src="/assets/CNAS/projectSupport.png" style="margin:40px 0;" alt="">
                        </div>
                        <div style="width: 578px;height: 457px;background: #5E71D3;">
                            <img src="/assets/CNAS/projectImg.png" style="margin-top:27px;" alt="">
                            <div style="font-size: 15px;font-weight: 400;color: #FFFFFF;line-height: 28px;text-align:left;margin:23px;">
                                <div>
                                    公司本身也进行产品的研发，研发的类型包括：通用软件和嵌入式软件两大类，可以为客户单位提供软件测评所需的测试项目。我公司有10多年的软件测试服务经验，积累了大量的客户，可以协助客户单位筹备相关的测试项目。
                                </div>
                                <div>
                                    另外，在客户单位准备实验室认证过程中，我们公司可以为客户提供被评价项目的人员支撑。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                activeTool: 1,
                rangeBannerList: [
                    {imgurl: '/assets/CNAS/smallBanner1.png'},
                    {imgurl: '/assets/CNAS/smallBanner2.png'},
                    {imgurl: '/assets/CNAS/smallBanner3.png'},
                    {imgurl: '/assets/CNAS/smallBanner4.png'},
                    {imgurl: '/assets/CNAS/smallBanner5.png'},
                ],
                tableData: [
                    {
                        no: '1',
                        name: '现状调研',
                        content: `我方咨询人员会对要申请CNAS实验室的客户单位进行现场调研，调研的内容为，组织机构、业务范围、能力分析、认可评审的项目参数、人员、仪器设备情况、已有的文件化体系，为正式咨询工作的开展，提供相应的依据。`,
                        time: '5天'
                    },
                    {
                        no: '2',
                        name: '标准培训',
                        content: `我方咨询人员对客户单位进参与实验室建设的全员宣贯培训(CNAS-CL01：2018)标准的内容与要求以及质量手册和程序文件的培训。`,
                        time: '5天'
                    },
                    {
                        no: '3',
                        name: '体系文件编制及发布',
                        content: `我方咨询人员根据贵实验室具体情况提供出质量手册、程序文件初稿，经与贵实验室各岗位人员讨论修订成稿，达到(CNAS-CL01：2018)标准要求的符合性，同时符合贵实验室的现状，具有可操作性。体系文件编制完成后，组织实验室领导、各岗位人员召开(CNAS-CL01：2018) 标准质量体系文件发布。`,
                        time: '20天'
                    },
                    {
                        no: '4',
                        name: '体系运行指导',
                        content: `我方咨询人员全程指导客户单位进行体系运行的指导工作。期间咨询人员会根据体系试运行的结果，协助客户完善体系文件。`,
                        time: '7个月'
                    },
                    {
                        no: '5',
                        name: '内部审核',
                        content: `我方咨询人员与质量负责人制定内审计划，经领导审批后提前2周左右下发，在质量负责人领导下进行内审全过程活动。`,
                        time: '10天'
                    },
                    {
                        no: '6',
                        name: '能力验证',
                        content: `在提交认证申请前，我方咨询人员协助客户单位进行能力验证。`,
                        time: '3天'
                    },
                    {
                        no: '7',
                        name: '审核前准备',
                        content: `我方咨询人员会协助客户单位进行认可评审前的准备工作，包括：体系文件审查、项目证据检查、管理人员培训等。`,
                        time: '5天'
                    },
                    {
                        no: '8',
                        name: '认可评审',
                        content: `根据规定咨询方不得参与正式认可评审。`,
                        time: '依据CNAS的认可审批时间'
                    },
                    {
                        no: '9',
                        name: '不符合项整改',
                        content: `评审组在评审结束时将评审发现的不符合项经实验室确认后，有咨询人员协助责任岗位人员按评审要求进行整改。`,
                        time: '10天'
                    },
                    {
                        no: '10',
                        name: '上报评审，整改材料，取得证书',
                        content: `我方咨询人员协助客户单位进行认可评审整改材料的修改完善，协助客户取得证书。`,
                        time: '3天'
                    },
                ],
                toolList: [
                    {id: 1, imgurl: '/assets/CNAS/tool1.png', title: '静态测试工具'},
                    {id: 2, imgurl: '/assets/CNAS/tool2.png', title: '性能测试工具'},
                    {id: 3, imgurl: '/assets/CNAS/tool3.png', title: '实验室质量体系管理工具'},
                    {id: 4, imgurl: '/assets/CNAS/tool4.png', title: '嵌入式软件白盒测试工具'},
                    {id: 5, imgurl: '/assets/CNAS/tool5.png', title: '接口测试工具'},
                    {id: 6, imgurl: '/assets/CNAS/tool6.png', title: '嵌入式软件虚拟验证平台'}
                ],
            }
        },
        methods: {
            prev () {
                this.$refs.rangeBanner.prev()
            },
            next () {
                this.$refs.rangeBanner.next()
            },
            headFirst({row, colunm, rowIndex, columnIndex}) {
                if (columnIndex == 0 || columnIndex == 2) {
                    return "background:#D4DDE6;text-align:center;font-size: 15px;"
                } else {
                    return "background:#E8EBEC;text-align:center;font-size: 15px;"
                }
            },
            contentStyle ({row, colunm, rowIndex, columnIndex}) {
                if (columnIndex == 0 || columnIndex == 1) {
                    return "text-align:center;"
                }
                if (columnIndex == 3) {
                    return "text-align:center;color:#DB3A3A;"
                }
            },

            clickTool (id) {
                this.activeTool = id
            }
        }
    }
</script>

<style scoped>
    .cardPubClass {
        width:1200px;margin:0 auto
    }
    .pubTitleDes {
        text-align: center;
        padding: 10px 0;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #082540;
        line-height: 60px;
    }
    .aboutCNAS {
        display: flex;
    }
    .aboutContent {
        padding: 62px 36px;
        background: #F5F5F7;
        font-size: 15px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1A1A1A;
        line-height: 1.8;
    }
    .rangeContent {
        background: #F5F5F7;
    }
    .rangeBox {
        text-align: center;
        width: 210px;
        height: 196px;
        padding: 20px 0;
        background: #FFFFFF;
        box-shadow: 0px 1px 8px 0px rgba(47, 48, 56, 0.27);
        
    }
    .rangeBox p{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 60px;
    }
    .rangeLeft {
        width: 457px;
        height: 307px;
    }
    .arrowBtn {
        width: 34px;
        height: 34px;
        color: #B0B0B0;
        font-size: 17px;
        background: #FFF;
        border-radius: 2px;
        padding: 6px 8px;
        border-color: #FFF;
    }
    .arrowBtn:hover {
        background: #0066EB;
        border-color: #0066EB;
    }

    .consultingScheme {
        display: flex;
        justify-content: space-between;
    }
    .consultingSchemeLeftTitle {
        width: 489px;
        height: 42px;
        background: #428ACC;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42px;
        margin: 0 auto;
        text-align: center;
    }
    .consultingSchemeRightTitle {
        width: 670px;
        height: 42px;
        background: #41BAA2;
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 42px;
        margin: 0 auto;
        text-align: center;
    }
    .tableClass /deep/ .el-table .el-table__cell {
        padding: 5px 0;
        color: #000;
    }
    .successfulCases {
        background-image: url('/assets/CNAS/caseBg.png');
        background-repeat: cover;
    }

    .toolName {
        width: 180px;
        height: 50px;
        background: #DBE0E6;
        line-height:50px;
        font-size:15px;
        cursor: pointer;
    }
    .activeTool {
        background: #0066EB;
        color: #FFFFFF;
    }
    .animotop{
	    position:relative;
        animation-name:fandtop;
        animation-duration:1s;
        -webkit-animation-name:fandtop;
        -webkit-animation-duration:1s; /* Safari 和 Chrome */
    }  
    @keyframes fandtop
    {
        from {top:500px;}
        to {top:0px;}
    }
    @-webkit-keyframes fandtop /* Safari and Chrome */
    {
        from {top:500px;}
        to {top:0px;}
    }
</style>