new_irbs/irbs.frontend/src/views/custRating/company/content/ReportRating.vue

<template>
  <!-- <w-card-panel label="评级结果" :bordered="false">
    <div class="flex">
      <div class="flex-1 text-center">
        <div>模型名称</div>
        <div :class="valueClassComputed">
          <q-chip outline square size="md" :clickable="false" :ripple="false" :label="rating.ratingData.value['modelName']" />
        </div>
      </div>
      <div class="flex-1 text-center">
        <div>模型级别</div>
        <div :class="valueClassComputed">
          <q-chip outline square size="md" :clickable="false" :ripple="false" :label="rating.ratingData.value['modelLevel']" />
        </div>
      </div>
      <div class="flex-1 text-center">
        <div>调整后级别</div>
        <div v-if="rating.ratingData.value['adjLevel']" :class="valueClassComputed">
          <q-chip outline square size="md" :clickable="false" :ripple="false" :label="rating.ratingData.value['adjLevel']" />
        </div>
      </div>
      <div class="flex-1 text-center">
        <div>推翻级别</div>
        <div v-if="rating.ratingData.value['tf']" :class="valueClassComputed">
          <q-chip outline square size="md" :clickable="false" :ripple="false" :label="rating.ratingData.value['tf']" />
        </div>
      </div>
      <div class="flex-1 text-center">
        <div>最终认定级别</div>
        <div v-if="rating.ratingData.value['finalLevel']" :class="valueClassComputed">
          <q-chip outline square size="md" :clickable="false" :ripple="false" :label="rating.ratingData.value['finalLevel']" />
        </div>
      </div>
      <div class="flex-1 text-center">
        <div>客户经理</div>
        <div v-if="rating.ratingData.value['managerName']" :class="valueClassComputed">
          <q-chip outline square size="md" :clickable="false" :ripple="false" :label="rating.ratingData.value['managerName']" />
        </div>
      </div>
    </div>
  </w-card-panel> -->
  <div class="flex">
    <div class="flex-1">
      <div :class="classComputed">
        <div :class="itemClassComputed">
          <div :class="labelClassComputed">模型名称：</div>
          <div :class="valueClassComputed">{{ rating.ratingData.value['modelName'] }}</div>
        </div>
        <div :class="itemClassComputed">
          <div :class="labelClassComputed">模型评级等级：</div>
          <div :class="valueClassComputed" @mouseover="handleHover('.rr-modelLevel', rating.ratingData.value['modelLevel'])" @mouseout="handleOut">
            <span class="rr-modelLevel underline">{{ rating.ratingData.value['modelLevel'] }}</span>
          </div>
        </div>
        <div :class="itemClassComputed">
          <div :class="labelClassComputed">调整后级别：</div>
          <div :class="valueClassComputed" @mouseover="handleHover('.rr-adjLevel', rating.ratingData.value['adjLevel'])" @mouseout="handleOut">
            <span class="rr-adjLevel underline">{{ rating.ratingData.value['adjLevel'] }}</span>
          </div>
        </div>
        <div :class="itemClassComputed">
          <div :class="labelClassComputed">最终认定级别：</div>
          <div :class="valueClassComputed" @mouseover="handleHover('.rr-finalLevel', rating.ratingData.value['finalLevel'])" @mouseout="handleOut">
            <span class="rr-finalLevel underline">{{ rating.ratingData.value['finalLevel'] }}</span>
          </div>
        </div>
        <div :class="itemClassComputed">
          <div :class="labelClassComputed">客户经理：</div>
          <div :class="valueClassComputed">{{ rating.ratingData.value['managerName'] }}</div>
        </div>
        <template v-if="rating.showAllRatingInfoModel.value">
          <div :class="itemClassComputed">
            <div :class="labelClassComputed">初始级别：</div>
            <div :class="valueClassComputed" @mouseover="handleHover('.rr-initLevel', rating.ratingData.value['initLevel'])" @mouseout="handleOut">
              <span class="rr-initLevel underline">{{ rating.ratingData.value['initLevel'] }}</span>
            </div>
          </div>
          <div :class="itemClassComputed">
            <div :class="labelClassComputed">上一次建议级别：</div>
            <div :class="valueClassComputed" @mouseover="handleHover('.rr-spLevel', rating.ratingData.value['spLevel'])" @mouseout="handleOut">
              <span class="rr-spLevel underline">{{ rating.ratingData.value['spLevel'] }}</span>
            </div>
          </div>
          <div :class="itemClassComputed">
            <div :class="labelClassComputed">评级发起日期：</div>
            <div :class="valueClassComputed" v-html="Formater.dateOnly()(rating.ratingData.value['startTime'])"></div>
          </div>
          <div :class="itemClassComputed">
            <div :class="labelClassComputed">评级生效日期：</div>
            <div :class="valueClassComputed" v-html="Formater.dateOnly()(rating.ratingData.value['effectiveTime'])"></div>
          </div>
          <div :class="itemClassComputed">
            <div :class="labelClassComputed">评级到期日期：</div>
            <div :class="valueClassComputed" v-html="Formater.dateOnly()(rating.ratingData.value['matureTime'])"></div>
          </div>
          <div :class="itemClassComputed">
            <div :class="labelClassComputed">评级状态：</div>
            <div :class="valueClassComputed">{{ Formater.enum(rating.enum.ratingStatus)(rating.ratingData.value['ratingStatus']) }}</div>
          </div>
          <div :class="itemClassComputed">
            <div :class="labelClassComputed">流程状态：</div>
            <div :class="valueClassComputed">{{ Formater.enum(rating.enum.ratingProcessStatus)(rating.ratingData.value['processStatus']) }}</div>
          </div>
        </template>
      </div>
    </div>
    <div class="flex-none pr-1 pt-1">
      <q-btn
        flat
        round
        color="primary"
        size="sm"
        :icon="rating.showAllRatingInfoModel.value ? 'bi-arrow-up-circle-fill' : 'bi-arrow-down-circle-fill'"
        @click="rating.showAllRatingInfoModel.value = !rating.showAllRatingInfoModel.value"
      />
    </div>
    <q-popup-proxy v-model="ratingLevelShowModel" :target="ratingLevelTarget" no-parent-event>
      <div style="height: 80px; width: 650px; padding: 20px 10px 10px 20px">
        <RatingLevelSlider v-model="ratingLevel"></RatingLevelSlider>
      </div>
    </q-popup-proxy>
  </div>
</template>
<script setup lang="ts">
import { ref, inject, computed } from 'vue';
import { Formater } from 'platform-core';
import { Rating } from '../ts/Rating';
import RatingLevelSlider from '../../RatingLevelSlider.vue';

const ratingLevelShowModel = ref(false);
const ratingLevel = ref('');
const ratingLevelTarget = ref('');
const rating = <Rating>inject('rating');
const itemClassComputed = computed(() => {
  return 'flex items-center';
});
const labelClassComputed = computed(() => {
  return 'flex-none text-gray-500';
});
const valueClassComputed = computed(() => {
  return 'flex-1 text-2xl';
});
const classComputed = computed(() => {
  if (rating.showAllRatingInfoModel) {
    return 'grid grid-cols-5 gap-3 pl-3 pt-1';
  }
  return 'grid grid-cols-5 gap-x-3 pl-3 pt-1';
});
const handleHover = (target_, ratingLevel_: any) => {
  ratingLevel.value = ratingLevel_;
  ratingLevelTarget.value = target_;
  ratingLevelShowModel.value = true;
};
const handleOut = () => {
  ratingLevelShowModel.value = false;
};
</script>