diantou/src_product/iam/audit/auditsjtx/xm-audit-tx-1-qyjyhx.vue

<template>
  <a-layout :class="$style.mainDiv">
    <a-layout-content :class="$style.contentDiv">
      <div :class="$style.mainWrap">
        <a-row :gutter="24" :class="$style.rowHeight" type="flex">
          <a-col :span="8" :class="$style.col">
            <div :class="$style.box">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title"> 企业基本信息</div>
                <div>
                  <a-row :gutter="24">
                    <a-col
                      v-for="(one, index) in colspandata"
                      :key="index"
                      :class="{
                        ['audittxdiv1select']: selectindexdiv === index,
                        [$style.zcol]: true,
                      }"
                      :span="12"
                    >
                      <div :class="$style.title" @click="fndivclick(index)"
                        ><span
                          style="
    padding-bottom: 9px;
    border-bottom: 3px solid #dadada;
"
                          >{{ one.title }}</span
                        ></div
                      >
                    </a-col>
                  </a-row>
                </div>
              </a-card>
            </div>
          </a-col>
          <a-col :span="16" :class="$style.col">
            <div :class="$style.box">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title">
                  发展指标
                </div>
                <iframe :class="$style.iframe" src=""></iframe>
              </a-card>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" :class="$style.rowHeight" type="flex">
          <a-col :span="8" :class="$style.col2">
            <div :class="$style.box">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title"> 企业收入情况<span style="font-size:14px">(万元)</span> </div>
                <div class="tx1qyjyhxtable">
                  <sd-table
                    size="middle"
                    :columns="configColumns"
                    sortable
                    :data-source="value"
                    :row-key="(record, index) => index"
                    :pagination="false"
                    :row-selection="readOnly"
                  >
                  </sd-table>
                </div>
              </a-card>
            </div>
          </a-col>
          <a-col :span="16" :class="$style.col2">
            <div :class="$style.box">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title">
                  经营指标
                </div>
                <iframe :class="$style.iframe" src=""></iframe>
              </a-card>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import components from './_import-components/xm-audit-tx-1-qyjyhx-import'

export default {
  name: 'XmAuditTx1Qyjyhx',
  metaInfo: {
    title: '企业经营画像',
  },
  components,
  data() {
    return {
      colspandata: [
        { title: '经营范围' },
        { title: '管控模式' },
        { title: '组织架构' },
        { title: '职责范围' },
        { title: '人员编制' },
        { title: '领导分工' },
        { title: '子公司数量规模' },
        { title: '管控模式' },
      ],
      selectindexdiv: '',

      configColumns: [
        {
          title: '分类',
          dataIndex: 'class',
          width: '40%',
        },
        {
          title: '金额',
          dataIndex: 'money',
        },
        {
          title: '占比',
          dataIndex: 'ratio',
        },
      ],
      value: [
        { class: '主营业务收入', money: '78838', ratio: '83.80%' },
        { class: '其他业务收入', money: '9552', ratio: '9.12%' },
        { class: '营业外收入', money: '4052', ratio: '3.87%' },
        { class: '利息收入', money: '3350', ratio: '3.21%' },
        { class: '总计', money: '104701', ratio: '100%' },
      ],
    }
  },
  methods: {
    fndivclick(id) {
      this.selectindexdiv = id
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.main-div {
  min-height: 100%;
  .row-height {
    height: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  :global .ant-row {
    height: 100%;
  }
}
.content-div {
  .main-wrap {
    height: 100%;
  }
  .row-height > .col:nth-child(2) {
    padding-right: 0 !important;
  }
  .row-height > .col2:nth-child(2) {
    padding-right: 0 !important;
  }
  .col {
    padding-right: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 0 !important;
    :global .ant-card {
      border-radius: 4px;
    }
  }
  .col2 {
    padding-right: 20px !important;
    padding-left: 0 !important;
    :global .ant-card {
      border-radius: 4px;
    }
  }
  .zcol:first-child {
    padding-top: 0 !important;
  }
  .zcol:nth-child(2) {
    padding-top: 0 !important;
  }
  .zcol {
    padding: 10px !important;
    div {
      height: 45px;
      padding: 10px 0;
      font-size: 16px;
      color: #000;
      text-align: center;
      background-color: #f3f3f3;
      border-radius: 4px;
    }
  }
  :global(.audittxdiv1select div) {
    box-sizing: border-box;
    border-bottom: 3px solid #ed2c2c;
    :global span {
      border-bottom: none !important;
    }
  }
  .box {
    height: 100%;
    overflow-y: auto;
    background: $card-background;
    background-color: #fff;
    border-radius: 4px;
    :global(.ant-card-head) {
      border-bottom: none !important;
    }
    :global(.ant-card-head-title) {
      padding-top: 0;
      padding-bottom: 0;
      padding-left: 24px;
      font-size: 18px;
      color: #000;
      :global(.anticon) {
        color: $primary-color;
      }
    }
    .card-body {
      :global(.ant-card-body) {
        padding: 10px 20px;
      }
      :global(.ant-card-head-wrapper) {
        margin-top: 20px;
        margin-bottom: 10px;
        margin-left: -24px;
        border-left: 4px solid red;
      }
    }
    :global(.tx1qyjyhxtable) {
      :global(td) {
        color: #9a9a9a;
        border: 1px solid #ebebeb;
      }
      :global(tr:last-child td) {
        color: #000;
      }
      :global(th) {
        background-color: #f5f6fa;
        border: 1px solid #ebebeb;
      }
    }
  }
  .iframe {
    width: 100%;
    height: 99%;
    border: none;
  }
}
</style>