settle_down_web/src/views/reportForms/components/parkRoomIndexDetail.vue

<template>
  <div>
    <el-row>
      <el-tabs v-model="activeName" style="font-size: 16px" @tab-click="handleClick">
        <el-tab-pane label="概览" name="概览">
          <park-room-index-edit ref="parkRoomIndexEdit" />
        </el-tab-pane>
        <el-tab-pane label="认购" name="认购">
          <el-row>
            <el-col :span="24">
              <el-table v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column type="index" width="60" />
                <el-table-column label="小区-分期" prop="groupDiscName" width="150" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="定金金额" prop="receivableMoney" width="100" />
                <el-table-column label="定金流水号" prop="serialNumber" width="100" />
                <el-table-column label="认购房屋" prop="houseName" />
                <el-table-column label="状态" prop="statusStr" width="110" />
                <el-table-column label="经办时间" prop="createdName" />
                <el-table-column label="经办人" prop="createdAt" />
                <el-table-column header-align="center" label="操作" width="180">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="depositView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="签约" name="签约">
          <el-row>
            <el-col :span="24">
              <el-table v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column type="index" width="60" />
                <el-table-column label="合同编号" prop="contractNumber" />
                <el-table-column label="网签备案号" prop="recordNumber" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="房屋" prop="houseName" width="200" />
                <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />
                <el-table-column label="买卖单价（㎡）" prop="housePrice" />
                <el-table-column label="买受人产权份额占比" prop="buyerProportionStr" />
                <el-table-column label="付款方式" prop="paymentMethodStr" />
                <el-table-column label="应收房款（元）" prop="buyerMoney" />
                <el-table-column label="应收专项维修资金（元）" prop="maintenanceTotalPrice" />
                <el-table-column label="合同状态" prop="contractStatusStr" width="110">
                  <template scope="scope">
                    <span
                      :style="{'color':scope.row.contractStatusStr==='已退房'?'red':scope.row.contractStatusStr==='已签约'?'green':'gray'}"
                    >
                      {{ scope.row.contractStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="签约日期" prop="signingDate" />
                <el-table-column header-align="center" label="操作" width="180">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="contractView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="房款" name="房款">
          <el-row>
            <el-col :span="24">
              <el-table ref="multipleTable" v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column label="合同编号" prop="contractNumber" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="房屋" prop="houseName" width="200" />
                <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />
                <el-table-column label="买卖单价（㎡）" prop="housePrice" />
                <el-table-column label="买受人产权份额占比" prop="buyerProportion" />
                <el-table-column label="付款方式" prop="paymentMethodStr" />
                <el-table-column label="应收房款（元）" prop="buyerMoney" />
                <el-table-column label="已收房款（元）" prop="receivedMoney" />
                <el-table-column label="尚欠房款（元）" prop="arrears" />
                <el-table-column label="收款状态" prop="collectionStatusStr" width="110">
                  <template scope="scope">
                    <span
                      :style="{'color':scope.row.collectionStatusStr==='已退款'?'red':scope.row.collectionStatusStr==='完全收款'?'green':'gray'}"
                    >
                      {{ scope.row.collectionStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="操作" width="200">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="payLogView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="专项维修资金" name="专项维修资金">
          <el-row>
            <el-col :span="24">
              <el-table ref="multipleTable" v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column type="index" width="60" />
                <el-table-column label="合同编号" prop="contractNumber" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="房屋" prop="houseName" width="200" />
                <el-table-column label="实测建筑面积（㎡）" prop="actualBuildArea" width="110" />
                <el-table-column label="专项维修资金单价（元/㎡）" prop="maintenanceFunds" />
                <el-table-column label="应收专项维修资金（元）" prop="maintenanceTotalPrice" />
                <el-table-column label="已收专项维修资金（元）" prop="receivedMoney" />
                <el-table-column label="收款状态" prop="fundCollectionStatusStr" width="110">
                  <template scope="scope">
                    <span
                      :style="{'color':scope.row.fundCollectionStatusStr==='已退款'?'red':scope.row.fundCollectionStatusStr==='已收款'?'green':'gray'}"
                    >
                      {{ scope.row.fundCollectionStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="操作" width="180">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="fundView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="退房退款" name="退房退款">
          <el-row>
            <el-col :span="24">
              <el-table ref="multipleTable" v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column type="index" width="60" />
                <el-table-column label="合同编号" prop="contractNumber" />
                <el-table-column label="申请人" prop="applicant" width="200" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="房屋" prop="houseName" width="200" />
                <el-table-column label="退房原因" prop="reasonStr" width="110" />
                <el-table-column label="应退（元）" prop="refundAmount" />
                <el-table-column label="实退（元）" prop="actualRefundAmount" />
                <el-table-column label="扣除" prop="deductible" />
                <el-table-column label="关联审批单号" prop="approvalNumber" />
                <el-table-column header-align="center" label="操作" width="200">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="refundView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="开票" name="开票">
          <el-row>
            <el-col :span="24">
              <el-table ref="multipleTable" v-loading="tabLoading" :data="tableData" style="width: 100%" size="mini">
                <el-table-column type="index" width="60" />
                <el-table-column label="合同编号" prop="contractNumber" />
                <el-table-column label="网签备案号" prop="recordNumber" />
                <el-table-column label="买受人" prop="buyerName" width="200" />
                <el-table-column label="房屋" prop="houseName" width="200" />
                <el-table-column label="应收（元）" prop="receivableMoney" width="100" />
                <el-table-column label="已收（元）" prop="receivedMoney" width="100" />
                <el-table-column label="收款状态" prop="collectionStatusStr" width="110">
                  <template scope="scope">
                    <span
                      :style="{'color':scope.row.collectionStatusStr==='已退款'?'red':scope.row.collectionStatusStr==='完全收款'?'green':'gray'}"
                    >
                      {{ scope.row.collectionStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="推送状态" prop="sendStatusStr">
                  <template scope="scope">
                    <span
                      style="color: green"
                    >
                      {{ scope.row.sendStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="开票状态" prop="invoiceStatusStr">
                  <template scope="scope">
                    <span
                      :style="{'color':scope.row.invoiceStatusStr==='已红冲'?'red':scope.row.invoiceStatusStr==='待开票'?'green':'gray'}"
                    >
                      {{ scope.row.invoiceStatusStr }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column header-align="center" label="操作" width="180">
                  <template scope="scope">
                    <el-button size="mini" type="text" @click="invoiceView(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-divider />
    <el-row>
      <el-col :span="24">
        <span class="card_title">交易历史</span>
        <el-steps class="mysteps" direction="vertical" :active="roomHistory.length"	>
          <el-step v-for="(item,index) in roomHistory" :title="item.buyerName+'  '+item.startDate+'     ~  '+item.endDate">
            <template slot="description">
              <div class="roomHistory-box">
                  <div v-for="(node,index) in item.parkRoomNodes" class="nodeBox-item">
                      <div :class="node.nodeName=='退房'?'end':'nodeName'">
                          {{ node.nodeName }}
                      </div>
                      <div v-if="index+1!=item.parkRoomNodes.length" style="margin-right: 20px">
                          <i class="el-icon-right" style="color: #0D2F76" size="48px"></i>

                      </div>
                  </div>

              </div>

            </template>
          </el-step>

        </el-steps>
      </el-col>
    </el-row>

    <!--定金查看-->
    <el-dialog
      :visible.sync="dialogDepositVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title=""
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <add-subscribe v-if="dialogDepositVisible" ref="addSubscribe" @cancel="cancel" />
    </el-dialog>

    <!--合同签约/修改-->
    <el-dialog
      :visible.sync="dialogContractVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialogContractTitle"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <contract-add ref="contractAdd" @cancel="cancel" />
    </el-dialog>

    <!-- 预收款登记 -->
    <el-dialog
      :visible.sync="dialogPayLogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title=""
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <payment-registration v-if="dialogPayLogVisible" ref="paymentRegistration" @cancel="cancel" />
    </el-dialog>

    <!-- 收款登记 -->
    <el-dialog
      :visible.sync="dialogFundVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title=""
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <add-funds v-if="dialogFundVisible" ref="addFunds" @cancel="cancel" />
    </el-dialog>

    <!-- 预收款登记 -->
    <el-dialog
      :visible.sync="dialogRefundVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title=""
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <add-refund v-if="dialogRefundVisible" ref="addRefund" @cancel="cancel" />
    </el-dialog>

    <!--正式开票-->
    <el-dialog
      :visible.sync="dialogFormalInvoiceVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialogTitle"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <formal-invoice-manage-edit v-if="dialogFormalInvoiceVisible" ref="editInvoice" @cancel="cancel" />
    </el-dialog>

    <!--新增预收款发票-->
    <el-dialog
      :visible.sync="dialogInvoiceVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="dialogTitle"
      width="90%"
      top="20px"
      class="statistic_base"
      :append-to-body="true"
      :modal-append-to-body="true"
      custom-class="tagdialog"
    >
      <add-invoice v-if="dialogInvoiceVisible" ref="addInvoice" @cancel="cancel" />
    </el-dialog>

  </div>
</template>

<script>
import ParkRoomIndexEdit from '@/views/reportForms/components/parkRoomIndexEdit.vue'
import Base from '@/views/base/base.vue'
import BaseData from '@/views/base/baseData.vue'
import ContractAdd from '@/views/signingManagement/contractManagement/contractAdd.vue'
import AddSubscribe from '@/views/customerManagement/subscribe/addSubscribe.vue'
import PaymentRegistration from '@/views/receiveRefundsManagement/paymentManagement/paymentRegistration.vue'
import AddFunds from '@/views/receiveRefundsManagement/maintenanceFundsManagement/addFunds.vue'
import AddRefund from '@/views/receiveRefundsManagement/refundManagement/addRefund.vue'
import FormalInvoiceManageEdit from '@/views/invoice/components/formalInvoiceManageEdit.vue'
import AddInvoice from '@/views/invoice/components/addInvoice.vue'

export default {
    name: 'ParkRoomIndexDetailVue',
    components: { ContractAdd, ParkRoomIndexEdit, AddSubscribe, PaymentRegistration, AddFunds, AddRefund,
        FormalInvoiceManageEdit, AddInvoice },
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: ['DEPOSIT_STATUS', 'PAYMENT_METHODS', 'CONTRACT_STATUS', 'HOUSE_PAYMENT_STATUS',
                'MAINTENANCE_FUNDS_STATUS', 'CHECK_OUT_REASON', 'INVOICE_STATUS', 'SEND_STATUS'],
            activeName: '概览',
            roomHistory: [],
            houseId: '',
            tableData: [],
            tabLoading: false,
            dialogTitle: '',
            dialogDepositVisible: false,
            dialogDepositTitle: '',
            dialogContractVisible: false,
            dialogContractTitle: '',
            dialogPayLogVisible: false,
            dialogFundVisible: false,
            dialogRefundVisible: false,
            dialogInvoiceVisible: false,
            dialogFormalInvoiceVisible: false

        }
    },
    methods: {
        initData(data) {
            this.initDict(this.dc_key).then((res) => {
                this.activeName = '概览'
                this.houseId = data.id
                if (data.activeName) {
                    this.activeName = data.activeName
                }
                this.$nextTick(() => {
                    this.$refs.parkRoomIndexEdit.initData(this.houseId)
                })
                this.getHistoryData()
            })
        },
        handleClick(tab, event) {
            this.tableData = []
            if (tab.name === '概览') {
                this.$nextTick(() => {
                    this.$refs.parkRoomIndexEdit.initData(this.houseId)
                })
            } else if (tab.name === '认购') {
                this.getDepositData()
            } else if (tab.name === '签约') {
                this.getContractData()
            } else if (tab.name === '房款') {
                this.getPaymentData()
            } else if (tab.name === '专项维修资金') {
                this.getFundData()
            } else if (tab.name === '退房退款') {
                this.getRefundData()
            } else if (tab.name === '开票') {
                this.getInvoiceData()
            }
        },
        getDepositData() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseDepositRequest('roomSelectionListAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getDepositItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getContractData: function() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseContractRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getContractItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getPaymentData: function() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                payType: '1',
                houseId: this.houseId
            }
            this.basePaymentRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getPaymentItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getFundData: function() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseFundRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getFundItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getRefundData() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseRefundRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getRefundItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getInvoiceData: function() {
            const _this = this
            _this.tabLoading = true
            const postData = {
                houseId: this.houseId
            }
            this.baseInvoiceRequest('listAll', postData).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const json = _this.getInvoiceItemJson(item)
                        _this.tableData.push(json)
                    })
                }
                _this.tabLoading = false
            }).catch((e) => {
                // console.log(e)
            })
        },
        getHistoryData: function() {
            const _this = this
            const postData = {
                houseId: this.houseId
            }
            this.baseRequest('roomHistory', postData).then((res) => {
                console.log(res.data)
                const roomHistory = []
                for (const key in res.data) {
                    console.log(res.data[key])
                    roomHistory.push(res.data[key])
                }
                this.roomHistory = roomHistory
            }).catch((e) => {
                // console.log(e)
            })
        },
        getDepositItemJson: function(item) {
            item.houseName = item.buildName + '-' + item.roomNo
            item.statusStr = this.dc_map.DEPOSIT_STATUS[item.status]
            return item
        },
        getContractItemJson: function(item) {
            if (item.buyerProportion) {
                item.buyerProportionStr = item.buyerProportion + '%'
            }
            item.paymentMethodStr = this.dc_map.PAYMENT_METHODS[item.paymentMethod]
            item.contractStatusStr = this.dc_map.CONTRACT_STATUS[item.contractStatus]
            return item
        },
        getPaymentItemJson: function(item) {
            item.paymentMethodStr = this.dc_map.PAYMENT_METHODS[item.paymentMethod]
            item.collectionStatusStr = this.dc_map.HOUSE_PAYMENT_STATUS[item.collectionStatus]
            return item
        },
        getFundItemJson: function(item) {
            item.fundCollectionStatusStr = this.dc_map.MAINTENANCE_FUNDS_STATUS[item.fundCollectionStatus]
            return item
        },
        getRefundItemJson: function(item) {
            item.reasonStr = this.dc_map.CHECK_OUT_REASON[item.reason]
            return item
        },
        getInvoiceItemJson: function(item) {
            if (item.type == '1') {
                item.invoiceStatusStr = this.dc_map.INVOICE_STATUS[item.invoiceStatus]
                item.sendStatusStr = this.dc_map.SEND_STATUS[item.sendStatus]
                item.collectionStatusStr = this.dc_map.HOUSE_PAYMENT_STATUS[item.collectionStatus]
            }
            if (item.type == '2') {
                item.invoiceStatusStr = this.dc_map.INVOICE_STATUS[item.invoiceStatus]
                item.sendStatusStr = this.dc_map.SEND_STATUS[item.sendStatus]
                if (item.paymentType === '1') {
                    item.collectionStatusStr = this.dc_map.HOUSE_PAYMENT_STATUS[item.collectionStatus]
                }
                if (item.paymentType === '2') {
                    item.collectionStatusStr = this.dc_map.MAINTENANCE_FUNDS_STATUS[item.fundCollectionStatus]
                }
                item.paymentTypeStr = item.paymentType === '1' ? '房款' : '专项维修资金'
            }
            return item
        },
        depositView(val) {
            this.dialogDepositVisible = true
            this.dialogDepositTitle = '查看'
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.addSubscribe.initData(val)
            })
        },
        contractView(val) {
            this.dialogContractVisible = true
            this.dialogContractTitle = '查看'
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.contractAdd.initData(val)
            })
        },
        payLogView(val) {
            this.dialogPayLogVisible = true
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.paymentRegistration.initData(val)
            })
        },
        fundView(val) {
            this.dialogFundVisible = true
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.addFunds.initData(val)
            })
        },
        refundView(val) {
            this.dialogRefundVisible = true
            val.isView = true
            // 新vue时调用的方法
            this.$nextTick(() => {
                this.$refs.addRefund.initData(val)
            })
        },
        invoiceView(val) {
            // 预收款发票
            if (val.type == '1') {
                this.dialogInvoiceVisible = true
                this.dialogTitle = ''
                val.isView = true
                // 新vue时调用的方法
                this.$nextTick(() => {
                    this.$refs.addInvoice.initData(val)
                })
            }
            // 正式发票
            if (val.type == '2') {
                this.dialogFormalInvoiceVisible = true
                this.dialogTitle = ''
                val.isView = true
                // 新vue时调用的方法
                this.$nextTick(() => {
                    this.$refs.editInvoice.initData(val)
                })
            }
        },
        cancel: function() {
            this.dialogContractVisible = false
            this.dialogDepositVisible = false
            this.dialogPayLogVisible = false
            this.dialogFundVisible = false
            this.dialogRefundVisible = false
            this.dialogInvoiceVisible = false
            this.dialogFormalInvoiceVisible = false
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('ParkRoomController', opUrl, postData, 'project')
        },
        baseDepositRequest(opUrl, postData) {
            return this.$channel.globeRequest('RoomSelectionInfoController', opUrl, postData, 'project')
        },
        baseContractRequest(opUrl, postData) {
            return this.$channel.globeRequest('ContractManageController', opUrl, postData, 'project')
        },
        basePaymentRequest(opUrl, postData) {
            return this.$channel.globeRequest('PayLogController', opUrl, postData, 'project')
        },
        baseFundRequest(opUrl, postData) {
            return this.$channel.globeRequest('MaintenanceFundsManagementController', opUrl, postData, 'project')
        },
        baseRefundRequest(opUrl, postData) {
            return this.$channel.globeRequest('RefundManageController', opUrl, postData, 'project')
        },
        baseInvoiceRequest(opUrl, postData) {
            return this.$channel.globeRequest('InvoiceManageController', opUrl, postData, 'project')
        }
    }
}
</script>

<style  lang="scss">
.mysteps{
    .is-finish{
        color: #0D2F76;
        border-color:  #0D2F76;
    }
    .is-text{
        border-color: #0D2F76;
    }
}
    .roomHistory-box{
        display: flex;
        .nodeBox-item{
            display: flex;
            align-items: center;
        }

        .end{
            margin-top: 20px;
            margin-bottom: 20px;
            height: 40px;
            width: 120px;
            background: #676767;
            text-align: center;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
            border-radius: 50%;
        }
        .nodeName{
            margin-top: 20px;
            margin-bottom: 20px;
            height: 40px;
            width: 120px;
            background: #0D2F76;
            text-align: center;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
        }
    }
</style>