diantou/src_product/iam/audit/auditsjtx/xm-audit-tx-3-lclyfxhx.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="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-col :span="8" :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="24" :class="$style.col2">
            <div :class="$style.box">
              <a-card :bordered="false" :class="$style.cardBody">
                <div slot="title"> 风险情况 </div>
                <div class="tx3lclyfxhxdiv">
                  <a-row :gutter="24" type="flex">
                    <a-col
                      v-for="(one, index) in colspandata"
                      :key="index"
                      :class="{
                        ['audittxdiv1select']: selectindexdiv === index,
                        [$style.zcol]: true,
                      }"
                      :span="8"
                    >
                      <table>
                        <tr>
                          <td width="25%"
                            ><span>{{ one.title }}</span></td
                          >
                          <td width="25%"></td>
                          <td rowspan="2">
                            <iframe :class="$style.iframe" src=""></iframe>
                          </td> </tr
                        ><tr>
                          <td>
                            <div
                              ><span style="font-size: 24px;font-weight: bold;">{{ one.num }}</span
                              ><span style="font-size: 14px;color: #9a9a9a;">个</span></div
                            ><div><span style="font-size: 14px;color: #9a9a9a;">风险数</span></div>
                          </td>
                          <td
                            ><div style="margin-bottom:-20px;"
                              ><span style="font-size: 14px;color: #9a9a9a;">同比</span
                              ><span
                                :class="[
                                  one.tb.indexOf('+') > -1
                                    ? $style.spancolorred
                                    : $style.spancolorgreen,
                                ]"
                                >{{ one.tb }}</span
                              > </div
                            ><div
                              ><span style="font-size: 14px;color: #9a9a9a;">环比</span
                              ><span
                                :class="[
                                  one.hb.indexOf('+') > -1
                                    ? $style.spancolorred
                                    : $style.spancolorgreen,
                                ]"
                                >{{ one.hb }}</span
                              ></div
                            ></td
                          >
                        </tr>
                      </table>

                      <!-- <div :class="$style.title"
                        ><span>{{ one.title }}</span
                        ></div
                      > -->
                    </a-col>
                  </a-row>
                </div>
              </a-card>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import components from './_import-components/xm-audit-tx-3-lclyfxhx-import'

export default {
  name: 'XmAuditTx3Lclyfxhx',
  metaInfo: {
    title: '流程领域风险画像',
  },
  components,
  data() {
    return {
      colspandata: [
        { title: '目标与考核', num: '345', tb: '+0.5%', hb: '-0.2%' },
        { title: '投资发展管理', num: '256', tb: '+0.5%', hb: '-0.2%' },
        { title: '风险内控管理', num: '35', tb: '+0.5%', hb: '-0.2%' },
        { title: '经营生产管理', num: '201', tb: '+0.5%', hb: '-0.2%' },
        { title: '财务管理', num: '132', tb: '+0.5%', hb: '-0.2%' },
        { title: '公司治理', num: '10', tb: '+0.5%', hb: '-0.2%' },
      ],
      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(3) {
    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(3),
  .zcol:nth-child(6) {
    border-right: none;
  }
  .zcol:nth-child(4),
  .zcol:nth-child(5),
  .zcol:nth-child(6) :global(table) {
    border-bottom: none;
  }
  // .zcol:nth-child(3) {
  //   padding-top: 0 !important;
  // }
  .zcol {
    padding: 10px !important;
    border-right: 1px solid #ececec;
    :global(table) {
      margin-left: 20px;
      color: #000;
      border-bottom: 1px solid #ececec;
    }
    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;
      }
    }
  }
  .spancolorred {
    color: red;
  }
  .spancolorgreen {
    color: green;
  }
  .iframe {
    width: 100%;
    height: 99%;
    border: none;
  }
}
</style>