nz-card style=width 50; class=panel1 div class=panel-body style=margin-bottom 20px; div class=mycardchart div class=contenttitle

要按照HTML书写顺序从上往下渲染，可以使用Flex布局来实现。你可以将这两个nz-card包裹在一个父容器中，并设置该父容器为Flex布局，然后使用Flex属性来控制子元素的排列顺序。具体的解决方案如下：

<div class="container">
    <nz-card style="width: 50%;" class="panel1">
        <div class="panel-body" style="margin-bottom: 20px;">
            <div class="mycardchart">
                <div class="contenttitle">
                    <div>全部设备</div>
                </div>
                <div class="contentnumber"> 
                    总数:
                    <span style="font-size: 22px;">123</span>
                </div>
                <app-piechartofequipments [depId]="123"></app-piechartofequipments>
            </div>
        </div>
    </nz-card>

    <nz-card style="width: 50%;" class="panel1">
        <div class="panel-body" style="margin-bottom: 20px;">
            <div class="mycardchart">
                <div class="contenttitle">
                    <div>设备状态</div>
                </div>
                <div class="contentnumber">
                    在用设备总数:
                    <span style="font-size: 22px;">123</span>
                </div>
                <app-jjdqsb [depId]="123"></app-jjdqsb>
            </div>
        </div>
    </nz-card>
</div>

然后在CSS中添加以下样式：

.container {
    display: flex;
    flex-direction: column;
}

这样就可以实现按照HTML书写顺序从上往下渲染的效果