TBA_GXPT/ruoyi-ui/src/views/standardization/resultsPresentation/index.vue

<template>
  <div class="knowledge-library">
    <div class="knowledge-library-container">
      <div :style="{ display: computedDisplay }"
           class="knowledge-empty">
        <div class="knowledge-empty-header">
          <div class="knowledge-empty-header-left">
            <div class="knowledge-empty-header-title">1分钟创建属于你的专属知识库📚</div>
            <div class="knowledge-empty-header-desc">新建你的专属领域知识，在应用中引用知识与你进行对话</div>
          </div>
        </div>
        <div class="knowledge-empty-body">
          <div class="knowledge-empty-body-showStep">
            <div class="knowledge-empty-body-top">
              <svg-icon class="file-svg" icon-class="file"/>
              <div>
                <div class="knowledge-empty-body-title">知识上传</div>
                <div class="knowledge-empty-body-subTitle">支持Docx、PDF、Xlsx、URL类型知识上传</div>
              </div>
            </div>
            <div class="knowledge-empty-body-bottom">
              <div class="knowledge-empty-body-step">1</div>
              <div class="knowledge-empty-body-line">
                <svg aria-hidden="true" class="svg_icon svg-icon knowledge-empty-body-icon">
                  <use xlink:href="#icon-wda-nextstep"></use>
                </svg>
              </div>
            </div>
          </div>
          <div class="knowledge-empty-body-showStep">
            <div class="knowledge-empty-body-top">
              <svg-icon class="file-svg" icon-class="file"/>
              <div>
                <div class="knowledge-empty-body-title">知识配置</div>
                <div class="knowledge-empty-body-subTitle">选择知识类型，精准解析知识，可供引用</div>
              </div>
            </div>
            <div class="knowledge-empty-body-bottom">
              <div class="knowledge-empty-body-step">2</div>
              <div class="knowledge-empty-body-line">
                <svg aria-hidden="true" class="svg_icon svg-icon knowledge-empty-body-icon">
                  <use xlink:href="#icon-wda-nextstep"></use>
                </svg>
              </div>
            </div>
          </div>
          <div class="knowledge-empty-body-showStep">
            <div class="knowledge-empty-body-top">
              <svg-icon class="file-svg" icon-class="file"/>
              <div>
                <div class="knowledge-empty-body-title">完成创建</div>
                <div class="knowledge-empty-body-subTitle">在应用中引用已创建的知识库与你进行对话</div>
              </div>
            </div>
            <div class="knowledge-empty-body-bottom">
              <div class="knowledge-empty-body-step">3</div>
              <div class="knowledge-empty-body-line last"><i class="iconfont  knowledge-empty-body-icon"></i></div>
            </div>
          </div>
        </div>
      </div>
      <div :style="{ display: !computedDisplay }" class="knowledge_library_list-content noHelp">
        <el-row :gutter="12">
          <el-col v-for="(item, index) in knowledgeList" :key="item.appId" :span="4">
            <div class="knowledge_library_item knowledge_library_item_background_blue">
              <div class="knowledge_library_item_action" style="display: none;">
                <el-dropdown>
                    <span class="el-dropdown-link el-dropdown-selfdefine">
                       <More style="width: 1em; height: 1em;color: #fff;"/>
                    </span>
                  <el-dropdown-menu slot="dropdown" class="knowledge_library_item_drop">
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="delete" style="color: #F56C6C;">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div style="width: 100%;height: 100%;" @click="jumpPage(`/standardization/map/${item.appId}`)">
                <div class="knowledge_library_item_icon">
                  <img :src="item.appIcon" class="icon_item_img" alt=""/>
                </div>
                <div class="knowledge_library_item_name">{{ item.appTitle }}</div>
                <div class="knowledge_library_item_desc">{{ item.appNote }}</div>
                <div class="knowledge_library_item_jump">
                  <div class="jump_statistic">
                    <Timer style="width: 1em; height: 1em;"/>&nbsp;
                    {{ item.createTime }}&nbsp;
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getModelingById, getModellist} from "@/api/standardization/modeling.js";
import {jumpPage} from "@/utils/page.js";

const knowledgeList = ref([])
const computedDisplay = ref('none')
const backgrounds = [
  {name: 'blue', value: 'linear-gradient(28.78deg, rgb(79, 110, 230) -14.87%, rgb(109, 106, 230) 109.41%)'},
  {name: 'red', value: 'linear-gradient(28.78deg, rgb(252, 34, 107) -14.87%, rgb(245, 48, 137) 109.41%)'},
  {name: 'orange', value: 'linear-gradient(28.78deg, rgb(255, 119, 89) -14.87%, rgb(250, 144, 73) 109.41%)'},
  {name: 'purple', value: 'linear-gradient(28.78deg, rgb(119, 93, 230) -14.87%, rgb(149, 75, 254) 109.41%)'},
  {name: 'sky', value: 'linear-gradient(28.78deg, rgb(12, 177, 210) -14.87%, rgb(0, 188, 225) 109.41%)'},
]
const icons = ref([
  'ai', 'algorithm', 'component', 'files', 'flood', 'international', 'monitor'
])

onMounted(() => {
  getList()
})

function getList() {
  getModellist().then(res => {
    knowledgeList.value = res.rows
    if (!knowledgeList.value || knowledgeList.value.length === 0) {
      computedDisplay.value = 'block'
    } else {
      computedDisplay.value = 'none'
    }
  })
}


</script>
<style lang="scss">
.knowledge-dialog .el-dialog__body {
  padding: 0 20px;
}

</style>
<style lang="scss" scoped>
.knowledge-library {
  width: 100%;
  height: 100%;

  .knowledge-library-container {
    width: 100%;
    height: 100%;
    padding: 40px 40px 0 40px;


    .knowledge-empty {
      width: 100%;
      min-height: 336px;
      border-radius: 8px;
      border: 1px solid hsla(0, 0%, 87.8%, .6);
      background: #f5f5f5;
      padding: 24px;
      text-align: left;
      box-sizing: border-box;

      .knowledge-empty-header {
        display: flex;
        justify-content: space-between;

        .knowledge-empty-header-title {
          color: #131212;
          font-size: 24px;
          line-height: 40px;
          margin-bottom: 8px;
        }

        .knowledge-empty-header-desc {
          color: #616161;
          font-size: 14px;
          line-height: 24px;
        }

      }

      .knowledge-empty-body {
        min-height: 188px;
        margin-top: 30px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        border-radius: 8px;
        background: #fff;
        padding: 50px 0 36px 5%;

        .knowledge-empty-body-showStep {


          display: -moz-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-right: 20px;

          .knowledge-empty-body-top {
            display: flex;
            align-items: center;

            .file-svg {
              font-size: 2rem;
              margin-right: 20px;
            }

            .knowledge-empty-body-title {
              color: #000;
              font-size: 1rem;
              font-weight: 500;
              line-height: 20px;
            }

            .knowledge-empty-body-subTitle {
              margin-top: 8px;
              color: #616161;
              font-size: 12px;
              font-weight: 400;
              line-height: 16px;
              max-width: 9.16667vw;
            }

          }

          .knowledge-empty-body-bottom {
            display: flex;
            align-items: center;

            .knowledge-empty-body-step {
              width: 26px;
              height: 26px;
              line-height: 26px;
              text-align: center;
              font-size: 14px;
              background-color: #e8e9eb;
              border-radius: 50%;
              margin-right: 22px;
              margin-left: 3px;
            }

            .knowledge-empty-body-line {
              background: linear-gradient(315deg, #d9d9d9, hsla(0, 0%, 85.1%, 0));
              flex: 1;
              height: 2px;
              position: relative;
            }
          }

        }


      }

    }

    .knowledge_library_item {
      height: 260px;
      border-radius: 12px;
      padding: 16px;
      position: relative;
      transition: all .2s ease-out;
      text-align: left;
      cursor: pointer;
      margin-bottom: 12px;

      &:hover {

        .knowledge_library_item_action {
          color: #fff;
          opacity: 1;
          background: rgba(0, 0, 0, .2);
          display: flex;
          align-items: center;
          justify-content: center;
        }


        .knowledge_library_item_name, .knowledge_library_item_desc, .knowledge_library_item_jump {
          color: #fff;
          fill: #fff;
        }
      }

      .knowledge_library_item_action {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 4px;
        transform: rotate(90deg);
        color: #fff;
        opacity: 0;
        z-index: 2;

        .el-icon-more {
          color: #fff;
        }

      }

      .knowledge_library_item_icon {
        width: 45px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
        border-radius: 6px;
        transition: all .2s ease-out;
        flex: none;
        color: #fff;

        .icon_item_img {
          width: 100%;
          height: 100%;
        }

      }

      .knowledge_library_item_name {
        font-weight: 500;
        font-size: 20px;
        line-height: 28px;
        color: #000;
        margin-bottom: 10px;
        transition: all .2s ease-out;
      }

      .knowledge_library_item_desc {
        font-size: 1rem;
        line-height: 20px;
        color: #131212;
        opacity: .8;
        transition: all .2s ease-out;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
      }

      .knowledge_library_item_jump {
        position: absolute;
        left: 16px;
        bottom: 16px;
        display: flex;
        gap: 16px;
        color: #5e5e66;
        font-size: 12px;
        fill: #5e5e66;

        .jump_statistic {
          display: flex;
          align-items: center;

        }

      }

    }

    .knowledge_library_item_background_blue {
      background-color: #e3edfd;
      background-image: radial-gradient(circle at 25% 0, #c2d8ff, rgba(227, 237, 253, 0) 70.75%), radial-gradient(circle at 75% 95%, #c2d8ff, rgba(227, 237, 253, 0) 50.75%);

      &:hover {
        background-color: #7eadff;
      }
    }

    .knowledge_library_item_background_red {
      background-color: #ffe9f0;
      background-image: radial-gradient(circle at 25% 0, #ffbdd1, rgba(255, 233, 240, 0) 70.75%), radial-gradient(circle at 75% 95%, #ffbdd1, rgba(255, 233, 240, 0) 50.75%);

      &:hover {
        background-color: #ff96b6;
      }
    }

    .knowledge_library_item_background_orange {
      background-color: #ffefeb;
      background-image: radial-gradient(circle at 25% 0, #ffd9d1, rgba(255, 239, 235, 0) 70.75%), radial-gradient(circle at 75% 95%, #ffd9d1, rgba(255, 239, 235, 0) 50.75%);

      &:hover {
        background-color: #ff9983;
      }
    }

    .knowledge_library_item_background_purple {
      background-color: #f3f0ff;
      background-image: radial-gradient(circle at 25% 0, #ccc7ff, rgba(243, 240, 255, 0) 70.75%), radial-gradient(circle at 75% 95%, #ccc7ff, rgba(243, 240, 255, 0) 50.75%);

      &:hover {
        background-color: #9897ff;
      }

    }

    .knowledge_library_item_background_sky {
      background-color: #ebf8ff;
      background-image: radial-gradient(circle at 25% 0, #c4efff, rgba(235, 248, 255, 0) 70.75%), radial-gradient(circle at 75% 95%, #c4efff, rgba(235, 248, 255, 0) 50.75%);

      &:hover {
        background-color: #74e1f7;
      }

    }

  }

}

.choose-icon {
  display: flex;
  gap: 14px;

  .choose-icon_left {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  .choose-icon_right {
    box-sizing: border-box;
    background: #f5f5f5;
    border-radius: 6px;
    height: 192px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;

    .icon_item_svg {
      color: #fff;
      fill: #fff;
    }

    .choose-icon_right_background {
      margin-bottom: 6px;
    }


    .choose-icon_title {
      font-weight: 600;
      font-size: 12px;
      height: 18px;
      line-height: 18px;
      color: #000;
    }

    .choose-icon_background, .choose-icon_icon {
      display: flex;
      gap: 24px;
      padding-top: 12px;

      .choose-icon_background_item, .choose-icon_icon_item {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        .choose-icon_background_choose, .choose-icon_icon_choose {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
        }

      }

    }

  }
}
</style>