slibra-module-web/src/views/screen/ScreenViewBlack/components/dataBox.vue

<script setup>
import LayoutCard from './LayoutCard.vue';
import ChatText from '@/components/Chat/ChatText.vue';
defineProps({
  reportData: {
    type: Object,
    default: {}
  },
})
</script>

<template>
  <LayoutCard title="数据分析" class="data-box" name="data" width="100%">
    <template #headerRight>
      <RouterLink to="/work-order" class="flex items-center space-x-[4px] text-[14px]">
        <div class="jump-btn"></div>
      </RouterLink>
    </template>
    <div class="data-box-main">
      <div class="content">
        <h5 class="title">{{ reportData.showVal }}</h5>
        <div class="markdown-inner">
          <ChatText :content="reportData.answer" class="html-box"></ChatText>
        </div>
      </div>
    </div>
  </LayoutCard>
</template>

<style scoped lang="scss">
.jump-btn {
  display: inline-block;
  width: 50px;
  height: 20px;
}
.data-box {
  &-main {
    padding: 18px 25px 16px 40px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .content {
      width: 100%;
      .markdown-inner {
        width: 100%;
        height: 160px;
        overflow-y: scroll;

        &::-webkit-scrollbar-track {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }

      .title {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        text-shadow: 0px 0px 8px #C9FDF3;
      }

      .html-box {
        font-size: 14px;
        color: #fff;
      }

      .markdown-body {
        background: initial;
      }
    }

    .btn {
      width: 124px;
      height: 44px;
      background: linear-gradient(270deg, #59CCFA 0%, #3C97F7 100%);
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }
  }
}
</style>

<style>
.data-box .data-box-main .content .markdown-body .custom-table-wrapper {
  width: 450px !important;
}
</style>