hi-ucs/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue

<template>
  <div class="application-associated-ability" v-if="flag">
    <detals-title title="来源应用" type="ASSOCIATED"></detals-title>
    <div
      class="application-associated-ability-main"
      v-if="dataFrom[0].dataList.length < 4"
    >
      <div
        class="associated-ability-card"
        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
        :key="dataListitem.id"
        @click="switchFunction(dataListitem.id)"
      >
        <a-tooltip>
          <template #title>{{ dataListitem.name }}</template>
          <div class="associated-ability-card-title">
            {{ dataListitem.name }}
          </div>
        </a-tooltip>
        <div class="associated-ability-card-content">
          <a-tooltip>
            <template #title>{{ dataListitem.description }}</template>
            <div class="associated-ability-card-content-font">
              {{ dataListitem.description }}
            </div>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div class="application-associated-ability-main" v-else>
      <swiper
        :slidesPerView="3"
        :spaceBetween="30"
        :pagination="{ clickable: true }"
        :modules="modules"
        class="mySwiper"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide
          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
          :key="dataListitem.id"
        >
          <div
            class="associated-ability-card"
            @click="switchFunction(dataListitem.id)"
          >
            <a-tooltip>
              <template #title>{{ dataListitem.name }}</template>
              <div class="associated-ability-card-title">
                {{ dataListitem.name }}
              </div>
            </a-tooltip>
            <div class="associated-ability-card-content">
              <a-tooltip>
                <template #title>{{ dataListitem.description }}</template>
                <div class="associated-ability-card-content-font">
                  {{ dataListitem.description }}
                </div>
              </a-tooltip>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineProps, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
  import 'swiper/swiper-bundle.min.css'
  const router = useRouter()
  const modules = ref([Pagination])
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const props = defineProps({
    associatedComponents: { type: Array, default: null },
  })
  const dataFrom = ref([])
  const flag = ref(true)
  const oldid = router.currentRoute.value.query.id
  //点击查看详情
  const switchFunction = (id) => {
    // router.push({
    //   path: '/details',
    //   query: {
    //     id: id,
    //   },
    // })
    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
    // alert(id)
  }
  console.log('这个是空值', props.associatedComponents[0])
  if (props.associatedComponents[0].dataList.length > 0) {
    console.log('这个是空值', props.associatedComponents)
    flag.value = true
    dataFrom.value = props.associatedComponents
    console.log('dataFrom.value', dataFrom.value)
  } else {
    flag.value = false
  }
  watch(
    () => props.associatedComponents,
    (val) => {
      if (val) {
        flag.value = true
        dataFrom.value = props.associatedComponents
        console.log('dataFrom.value', dataFrom.value)
      } else {
        flag.value = false
      }
    }
  )
  watch(
    () => router.currentRoute.value.query.id,
    (newValue, oldValue) => {
      if (oldid != router.currentRoute.value.query.id) {
        window.location.reload()
      }
    },
    { immediate: true }
  )
</script>

<style lang="less" scoped>
  .application-associated-ability {
    padding-top: 0.8rem;
    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .application-associated-ability-main {
      margin-top: 0.4rem;
      width: 13.3rem;
      display: flex;
      justify-content: space-around !important;
      :deep(.swiper) {
        padding-bottom: 0.6rem;
      }
      .associated-ability-card {
        width: 3.2rem;
        height: 2.78rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #e4e6f5;
        border-radius: 0.1rem;
        padding-bottom: 0.3rem;
        margin-right: 0.2rem;
        margin-top: 0.2rem;
        cursor: pointer;
        .associated-ability-card-title {
          width: 2.2rem;
          padding-top: 0.3rem;
          font-size: 0.22rem;
          text-align: center;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
        .associated-ability-card-content {
          width: 100%;
          margin-top: 0.25rem;
          padding-left: 0.3rem;
          .associated-ability-card-content-font {
            font-size: 0.18rem;
            color: #999;
            margin-right: 0.15rem;
            margin-top: 0.15rem;
            text-align: center;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
      }
      .associated-ability-card:hover {
        border-radius: 0.02rem;
        border: 0.01rem solid #0058e1;
        box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
      }
    }
  }
</style>