电路原理图的设计是PCB板设计中的一项重要内容，下面就浅谈一下pcb板设计电路原理图步骤和方法。
1、建立原理图文件。首先要创建新的Sch工程，在工程中建立原理图文件和PCB文件。 
2、设置工作环境。根据实际电路的复杂程度来设置图纸的大小，这是完成原理图设计的第一步。 
3、放置元器件。从元器件库中选取元器件，放置到图纸的合适位置，并对元器件的名称、封装进行定义和设定。 
4、原理图的布线。根据实际电路的需要，利用Sch提供的各种工具、指令进行布线，将工作平面上的元器件用具有电气意义的导线、符号连接起来。
5、建立网络报表。完成以上步骤后，可以看到一张完整的电路原理图，但是还需要生成一个网络报表文件。
6、电气规则检查。  检查原理图的电气是否符合设定规则。如果原理图已通过电气检查，那么原理图的设计就完成了。  
7、编译和调整。设置项目编译选项来编译当前的项目，利用Altium Designer 15提供的错误检查报告来修改原理图。    
8、存盘和报表输出。对设计好的原理图和各种报表进行存盘和输出打印，为印制板电路的设计做好准备。
以上便是我了解到的pcb板设计电路原理图步骤和方法~
大家可以多多交流哈哈哈~一起学习pcb相关内容~

+OrCAD CIS设计原理图

1、新建DSN

步骤：File -> New -> Design。并先保存到默认工作区路径+项目名字，如D:\SPB_Data\LevelShifter。

OrCAD CIS软件专门是设计原理图的，所生成的Netlist文件多款PCB设计软件都支持。PCB设计软件通过导入Netlist，可以将PCB封装导入到PCB中，并将焊盘加上具体的网络标号，以便元件与元件之间的连接。



一个dsn的目录包括有：SCHEMATIC（原理图）、Design Cache（原理图中的某些元件封装）、Library（原理图元件封装）、Output（输出文件如BOM表）。

需要注意的是，Design Cache文件是原理图中的某些元件封装，有时候在Library中修改了某些元件，但是实际原理图中对应的是Design Cache中的，原理图中的元件需要手动更新。方法是：右键选择Design Cache，按Cleanup Cache。

2、原理图封装

在项目中新建原理图，File -> New -> Library并输入名字。OrCAD本身带有官方的原理图库，然而，都是一些常用的基本元件。对于我来说，官方有用的是：DISCRETE（离散库，有电阻、电容、MOS管、三极管等常用的，至少不用自己画了）。CONNECTOR（连接器）。其他自己进行一个电子项目，会遇到一些IC是官方不提供库的，要自己绘制。

新建了一个原理图封装，右键选择New Part。自行输入元件名字。Parts Per Pkg是可以将元件划分多个部分进行绘制，这对于数百个引脚的IC使用多个Parts会很便于原理图绘制。

Package Type有Homogeneous（不同Parts有相同的封装）和Heterogeneous（不同Parts有不同的封装）。输入Name后点OK即可。PCB Footprint可以先不管，在原理图中再添加。



2.1 单独设计每个元件封装



在这里我绘制一个IC的封装，需要进行的操作有：

添加引脚：Place -> Pin

更改PIN的名字和标号：双击某个PIN

绘制矩形：Place -> Rectangle

添加PCB Footprint：双击页面空白地方 -> New -> 输入Name为PCB Footprint。Value空白->OK -> 双击PCB Footprint -> 选择Value Only。

这样就完成了IC的原理图封装绘制。



 

2.2 原理图设计

打开原理图：在SCHEMATIC目录中选择PAGE1双击打开。

点击键盘快捷键P，刚开始要Add library选择D:\Cadence\SPB_16.5\tools\capture\library\中的DISCRETE这个库。





善用搜索，双击库中的文件，可以用鼠标抓住。

用鼠标中键移动屏幕。用Ctrl+鼠标中键放大和缩小。



刚加入的原件是没有添加封装信息的，需要手动添加：左击选中元件->右键Edit part->在空白的地方双击左键->New ->输入PCB Footprint -> OK-> Display->Value Only ->关闭窗口->Update Current->双击<PCB Footprint>->输入0805R（封装文件名）。





3 生成Netlist



 

回到以上界面，点选本dsn文件->Tool->Create Netlist..出现以下界面。

 

 界面显示，软件会使用元件中的属性PCB Footprint，同时将Netlist生成到allegro目录内。点击确认，要注意下面的信息栏，如果有错误（刚开始容易忽略了元件的封装未添加），会在这栏内显示的。如果无误，则会提示” INFO(ORCAP-32005): *** Done ***”。接着开始下一款软件进行PCB设计。

 



 

 

参考资料有：

1. 一起来学Cadence Allegro高速PCB设计+一天学会用Allegro画电源板-4月28日更新

2. 其他网络资源

本系列其他链接：

Cadence 设计2层板PCB步骤1 OrCAD CIS设计原理图

Cadence 设计2层板PCB步骤2 焊盘设计

Cadence 设计2层板PCB步骤3 设计PCB封装

Cadence 设计2层板PCB步骤4 PCB设计

Cadence 设计2层板PCB步骤5 PCB制作资料生成（Gerber和钻孔文件）

时下，利用Keil C51和Proteus来进行单片机系统开发已成为众多单片机爱好者的首选。Keil C51和Proteus的结合可以进行单片机系统的软件设计和硬件的仿真调试，可大大缩短单片机系统的开发周期，也可降低开发调试成本。当仿真调试成功后，我们便可利用Proteus 6 Professional 中的ARES 6 Professional进行PCB设计与制作。有很多文章或书籍都谈及如何用Keil C51 + Proteus进行单片机应用系统的设计与仿真开发，但是，用Proteus来制作印制电路板(PCB)却少有提及。本文结合一个简单的广告灯的设计电路(如图1所示)为例，谈谈如何用Proteus 制作PCB。
用Proteus 制作PCB通常包括以下一些步骤：(1)绘制电路原理图并仿真调试；(2)加载网络表及元件封装；(3)规划电路板并设置相关参数；(4)元件布局及调整；(5)布线并调整；(6)输出及制作PCB。
图1 广告灯的设计电路
一、绘制电路原理图并仿真调试
在Proteus 6 Professional 中用ISIS 6 Professional 设计好电路原理图，并结合Keil C51进行软件编程和硬件的仿真调试，调试成功后，便可开始制作PCB。在此不再赘述调试过程。
二、加载网络表及元件封装
(一)加载网络表
在ISIS 6 Professional 界面中单击Design Toolbar中的图标或通过Tools菜单的Netlist to ARES 命令打开ARES 6 Professional 窗口如图2所示。可以看到，在图2中左下角的元器件选择窗口中列出了从原理图加载过来的所有元器件。若原理图中的某些器件没有自动加载封装或者封装库中没有合适的封装，那么在加载网络表时就会弹出一个要求选择封装的对话框，如图3所示。这时就需要根据具体的元件及其封装进行手动选择并加载。
图2 ARES 6 Professional 窗口
图3 要求选择封装的对话框
(二)设计元件封装
对于封装库中没有的封装或者是与实际的元件不符的封装，就需要自己画。那么，怎么画封装呢？这里以示例中的按钮开关为例，设计一个元件的封装。
1、放置焊盘
在图2所示的界面中根据按钮的引脚间距放置4个焊盘，并修改焊盘的标号，使之与原理图中的元件引脚标号一致，否则，会弹出没有网络连接的错误提示，或者加载后没有连线。
2、放置外边框 利用2D画图工具中的图标根据按钮的实际大小加一个外边框，如此便完成了按钮封装的设计(如图4所示)。
图4 完成后的按钮封装的设计
3、保存封装
选中封装，用左键单击图标，出现保存对话框(如图5示)，在New Package Name中键入要保存的元件封装名称(在此用KS)；在Package Category(保存范畴)中选中Miscellaneous；在Package Type(封装类型)中选中Through Hole；在Package Sub-Category(保存子范畴)中选中Switches；单击OK，就把按钮封装保存到了USERPKG(用户自建封装库)库中。
图5 保存封装对话框
4、加载封装
自建封装保存后，再到库中加载，就可以把自己制作的元件封装加载到PCB中了(如图6所示)
图6 加载封装对话框
按照上面的方法把需要的元件封装都画好以后，再从原理图单击Design Toolbar中的图标，重新加载网络表，这样，就把所有的元件都加载到了PCB中。
按照上面的方法把需要的元件封装都画好以后，再从原理图单击Design Toolbar中的图标，
重新加载网络表，这样，就把所有的元件都加载到了PCB中。
三、规划电路板并设置相关参数
(一)规划电路板
在ARES 6 Professional 窗口中选中2D画图工具栏的图标，在底部的电路层中选中Board Edge层(黄色)，即可以单击鼠标左键拖画出PCB板的边框了。边框的大小就是PCB板的大小，所以在画边框时应根据实际，用测量工具来确定尺寸大小(如图7所示)。
图7 规划电路板方框图图
图8 电路板相关参数的设定
(二)设置电路板的相关参数
PCB板边框画好以后，就要设置电路板的相关参数。单击System中的Set Default Rules项，在弹出的对话框中设置规则参数，有焊盘间距、线与焊盘间距、线与线间距等一些安全允许值。然后在Tools中选中(布线规则)项，在弹出的对话框中单击Edit Strategies项，出　一个对话框如图8所示。在左上Strategy栏中分别选中POWER和SIGNAL，在下面的Pair1中选同一层。这样，就完成了在单层板中布线的设置。到此，对一些主要的参数设置就完成了。别的系统参数设置，可以在System和Tools中去设置完成。
四、元件布局及调整
(一)元件布局
电路板的规则设计好以后，就可导入元件并布局。布局有自动布局和手动布局两种方式。若采用自动布局方式，只要在界面的菜单栏中选中项，弹出对话框，单击OK，就自动把元件布局于PCB板中了。而如果采用手动布局的方式，则在左下角的元件选择窗口中选中元件，在PCB板边框中适当位置单击左键，就可以把元件放入。
(二)元件调整
无论是自动布局还是手动布局，都需要对元件进行调整。主要是对元件的移动和翻转等操作。对元件的布局原则是：美观、便于布线、PCB板尽可能小。PCB的元件布局完成如图9所示。
图9 PCB的元件布局完成图
图10 布线完成图
五、布线并调整
同样，PCB的布线也是有自动布线和手动布线两种布线方式。一般，是先用自动布线，然后手工修改，也可以直接手工布线。布线规则的设置在上面已经描述，这里主要说明布线时用的导线的粗细设置以及焊盘大小的修改。首先，选中工具菜单栏中的选项，在左下角的导线选择窗口中选中想要的
导线粗细类型，也可以选择DEFAULT(默认)，再单击E按钮，在弹出的对话框中修改Width的值就可以了。在布线的过程中，如果需要改变某一根线的大小，可以双击右键，选择Trace Style选项中的合适类型；要删除该线，则左键单击Delete。如果要删除整个布线，那么就选中所有的连线，左键单击工具菜单栏中的图标即可。对于焊盘的修改，可以在布线完成之后进行。先选中工具菜单栏中的选项，然后在选择窗口中选中合适的焊盘，在需要改变的元件焊盘处单击鼠标左键即可。布线完成后的PCB板如图10所示。(说明：1000th = 1inch = 25.4mm)
六、输出及制作PCB
最后就是输出打印电路版图了。先单击Output选项中的Set Output Area选项，按住鼠标左键并拖动，选中要输出的版图。如图11所示。
图11 输出打印电路版图
图12 设置要打印的输出电路层
然后是设置要打印的输出电路层。在Output选项中单击Print/Plot Layout选项，出现设置对话框，如图12所示。在设置对话框中，单击选择Printer，可以选择打印机和设置打印纸张以及版图放置方向。在下面的Layers/Artworks栏中选择要打印的层。因为布线是在底层进行的，所以在打印布线层时，在BottoCopper和Board Edge选项前打勾，表示选中要打印输出；而在打印元件的布局层(丝印层)时，在Top Silk 和Board Edge选项前打勾(这一层在打印时注意需要选择镜象打印)；Scale选项是打印输出的图纸比例，选100%；Rotation 和ReflecTIon选项分别是横向/纵向输出和是否要镜象的设置。设置好以后就可以打印了。如图13和图14所示的分别为丝印层与布线层的打印效果图。
图13 丝印层的打印效果图
图14 布线层的打印效果图
到此，我们就完成了用Proteus制作印制电路板的全过程。

Vue中封装自定义步骤条 实现上下一步

效果图：



如上图：在VUE中实现效果，VUE+Element,ant都有封装好的UI,直接引用就好了；



这里，觉得样式不符合UI设计，所以自定义封装了一个步骤条组件；

设计原理：当点击下一步的，获取步骤的index, 通过绑定的class 给经过的步骤添加样式；

:class="index <= stepsIndex ? 'on' : ''"

定义步骤条的条数,数组定义在父组件，通过this.$parent 获取父组件的数组；

步骤条组件中只封装了步骤条的样式和dom,数据和方法均在父组件定义；

stepsData:[
      {name:'第一步'},
      {name:'第二步'},
      {name:'第三步'},
      {name:'第四步'}
]

循环渲染出步骤条

<div class="steps-box">
        <div
                v-for="(item, index) in stepsData"
                class="steps-card"
                :class="index <= stepsIndex ? 'on' : ''"
                :key="index">
            <span>{{ index + 1 }}</span>
            <span>{{ item.name }}</span>
        </div>
    </div>

以上是封装步骤条组件的代码；

如下是父组件引用步骤条组件和上下一步的方法！

 import steps from "../components/steps.vue";
    components:{
            steps
    }

引用

<!--步骤条-->
        <steps ref="stepsChild"></steps>

父组件定义的上下一步方法

 //下一步
            prevSteps(){
                this.stepsIndex --
                this.$refs.stepsChild.stepsFun()
            },
            nextSteps(){
                this.stepsIndex ++
               this.$refs.stepsChild.stepsFun()
            }

===========================================================================

完整代码

步骤条组件

<template>
    <div class="steps-box">
        <div
                v-for="(item, index) in stepsData"
                class="steps-card"
                :class="index <= stepsIndex ? 'on' : ''"
                :key="index">
            <span>{{ index + 1 }}</span>
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "steps",
        data: function () {
            return {
                stepsIndex: "",
                stepsData: [],
            };
        },
        created() {
            this.stepsIndex = this.$parent.stepsIndex;
            this.stepsData = this.$parent.stepsData;
        },
        methods: {
            //下一步
            stepsFun() {
                this.stepsIndex = this.$parent.stepsIndex;
            },
        },
    };
</script>

<style lang="scss" scoped>
    /*    steps-box*/
    .steps-box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        margin-top: 200px;
        .steps-card {
            width: 300px;
            cursor: pointer;
            display: flex;
            align-items: center;
            color: rgba(0, 0, 0, 0.25);
            position: relative;
            span:nth-of-type(1) {
                display: inline-block;
                width: 26px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 50%;
                margin-right: 10px;

                i {
                    font-style: normal;
                }
            }
        }
        .steps-card:before {
            width: 194px;
            height: 1px;
            content: "";
            background: #e9e9e9;
            margin: 0 15px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
        }
        .steps-card:last-of-type {
            width: auto;
        }
        .steps-card:last-of-type:before {
            width: 0;
        }
        .steps-card.on {
            display: flex;
            align-items: center;
            color: rgba(0, 0, 0, 0.85);

            span:nth-of-type(1) {
                display: inline-block;
                width: 26px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                background: #1d73f6;
                border: 1px solid #1d73f6;
                color: #fff;
                border-radius: 50%;
                margin-right: 10px;
            }
        }
        .steps-card.on:before {
            background: #1d73f6;
        }
    }
</style>


父组件

<template>
    <div class="addTask">
        <!--步骤条-->
        <steps ref="stepsChild"></steps>
        <!--内容区域-->
        <div class="task-main-box">
            <div v-if="stepsIndex == 0" class="task-con-box"><h1>第一步</h1></div>
            <div v-if="stepsIndex == 1" class="task-con-box"><h1>第二步</h1></div>
            <div v-if="stepsIndex == 2" class="task-con-box"><h1>第三步</h1></div>
            <div v-if="stepsIndex == 3" class="task-con-box"><h1>第四步</h1></div>


        </div>
        <!--操作按钮-->
        <div class="button-box">
            <div v-if="stepsIndex == 0">取消</div>
            <div v-if="stepsIndex == 3">完成</div>
            <div @click="prevSteps" v-if="stepsIndex != 0">上一步</div>
            <div @click="nextSteps" v-if="stepsIndex != 3">下一步</div>
        </div>
    </div>
</template>

<script>
    import steps from "../components/steps.vue";

    export default {
        name: "addTask",
        data() {
            return {
                //新建任务
                stepsIndex:0,
                stepsData:[
                    {name:'第一步'},
                    {name:'第二步'},
                    {name:'第三步'},
                    {name:'第四步'}
                ]
            };
        },
        methods: {
            //返回数据采集页面
            goback() {
                this.$parent.addTask = false;
            },
            //下一步
            prevSteps(){
                this.stepsIndex --
                this.$refs.stepsChild.stepsFun()
            },
            nextSteps(){
                this.stepsIndex ++
               this.$refs.stepsChild.stepsFun()
            }
        },
        components:{
            steps
        }
    };
</script>

<style lang="scss" scoped>
.addTask{
    width: 100%;
    height: 100%;
    overflow: hidden;
    .task-main-box{
        width: 100%;
        height:calc(100% - 45vh);
        .task-con-box{
            width: 100%;
            height:100%;

        }
    }
    .button-box{
        display: flex;
        justify-content: center;
        div{
            padding: 10px;
            background: #2F86FF;
            margin: 10px;
            border-radius:4px;
            cursor:pointer;
            color:#ffffff;
        }
    }

}



</style>


END!

Vue笔记：以上方法仅供参考！感谢阅读，欢迎点赞！