diantou/src_product/iam/kpi/monitor/duPont/kpi-du-pont-analysis.vue

<template>
  <div :class="$style.mainDiv">
    <a-card :class="$style.mainDiv">
      <div v-if="spinning" :class="$style.loadingDiv">
        <a-spin :spinning="spinning" tip="数据加载中..."></a-spin>
      </div>
      <div v-else>
        <div :class="$style.title">{{ title }}</div>
        <div :class="[$style.treeDiv, { [$style.isOnlyNode]: !duPontData[0].children }]">
          <vue-okr-tree :data="duPontData" :render-content="renderContent" />
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { message } from '@/common/one-ui'
import { VueOkrTree } from 'vue-okr-tree'
import 'vue-okr-tree/dist/vue-okr-tree.css'
import kpiDuPontAnalysisService from './kpi-du-pont-analysis-service'
import components from './_import-components/kpi-du-pont-analysis-import'

export default {
  name: 'KpiDuPontAnalysis',
  metaInfo: {
    title: '指标监测-杜邦分析',
  },
  components: {
    vueOkrTree: VueOkrTree,
    ...components,
  },
  data() {
    return {
      title: '', // 杜邦分析标题
      spinning: false,
      duPontData: [
        {
          label: '净资产收益率',
          content: '6%',
          children: [
            {
              label: '总资产净利率',
              content: '1.69%',
              children: [
                {
                  label: '销售净利率',
                  content: '0.03%',
                  children: [
                    {
                      label: '净利润',
                      content: '248010.00元',
                    },
                    {
                      label: '销售收入',
                      content: '972.68元',
                    },
                  ],
                },
                {
                  label: '总资产周转率',
                  content: '49.92%',
                  children: [
                    {
                      label: '销售收入',
                      content: '932.68元',
                    },
                    {
                      label: '资产总额',
                      content: '195,582.62元',
                    },
                  ],
                },
              ],
            },
            {
              label: '权益乘数',
              content: '3.54',
              children: [
                {
                  label: '负债',
                  content: '1,474.18元',
                },
                {
                  label: '资产',
                  content: '2053,62元',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  created() {
    // 加载数据
    this.fnLoadData()
  },
  methods: {
    // 获取基础数据和分析数据
    fnLoadData() {
      this.spinning = true
      this.title = this.$route.query.title
      // 获取监测数据
      return kpiDuPontAnalysisService
        .fnLoadData({
          indiId: parseFloat(this.$route.query.id),
        })
        .then((res) => {
          this.spinning = false
          this.duPontData = [res]
        })
        .catch(() => {
          message.error('获取检测数据接口错误，请联系管理员')
        })
    },
    // tree节点自定义渲染
    renderContent(h, node) {
      return (
        <div class='diy-wrapper'>
          <div class='diy-con-name'>{node.data.text}</div>
          <div class='diy-con-content'>{node.data.props.content}</div>
        </div>
      )
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-div {
  height: 100%;
  .title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
  }
  :global(.ant-card-body) {
    height: 100%;
  }
  .loading-div {
    text-align: center;
    margin-top: 18%;
  }
  .tree-div {
    margin: 50px 0;
    :global(.org-chart-container) {
      > :global(.org-chart-node-children) {
        display: inline-block;
      }
    }
    :global(.org-chart-node-label-inner) {
      width: 160px !important;
      border: 1px solid #d3d3d3;
    }
  }
  .is-only-node {
    :global(.is-leaf) {
      &:before {
        display: none;
      }
    }
  }
}
</style>