bug746组件服务智能算法-算法优势

This commit is contained in:
851673013@qq.com 2022-08-03 14:27:57 +08:00
parent a9e500490d
commit fb2e57e756
2 changed files with 47 additions and 10 deletions

View File

@ -9,7 +9,7 @@
<div class="algorithm-advantage" v-if="flag"> <div class="algorithm-advantage" v-if="flag">
<detals-title title="算法优势" type="ADVANTGE"></detals-title> <detals-title title="算法优势" type="ADVANTGE"></detals-title>
<div class="main"> <div class="main">
<div class="top"> <div class="top" v-if="data.length < 3">
<div v-for="val in data" :key="val.id" class="item"> <div v-for="val in data" :key="val.id" class="item">
<div class="icon" :class="val.icon"></div> <div class="icon" :class="val.icon"></div>
<a-tooltip> <a-tooltip>
@ -22,17 +22,44 @@
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
<div class="top" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper2"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide v-for="val in data" :key="val.id" class="item">
<div class="icon" :class="val.icon"></div>
<a-tooltip>
<template #title>{{ val.title }}</template>
<div class="title">{{ val.title }}</div>
</a-tooltip>
<a-tooltip>
<template #title>{{ val.text }}</template>
<div class="text">{{ val.text }}</div>
</a-tooltip>
</swiper-slide>
</swiper>
</div>
<div class="bottom"></div> <div class="bottom"></div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const data = ref([]) const data = ref([])
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const modules = ref([Pagination])
const flag = ref(true) const flag = ref(true)
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
@ -43,10 +70,10 @@
} else { } else {
data.value = [] data.value = []
let arr = JSON.parse(obj.attrValue) let arr = JSON.parse(obj.attrValue)
if (arr.length > 3) { // if (arr.length > 3) {
// // //
arr = arr.splice(0, 3) // arr = arr.splice(0, 3)
} // }
arr.forEach((item, index) => { arr.forEach((item, index) => {
data.value.push({ data.value.push({
title: item.name, title: item.name,
@ -67,10 +94,10 @@
} else { } else {
data.value = [] data.value = []
let arr = JSON.parse(obj.attrValue) let arr = JSON.parse(obj.attrValue)
if (arr.length > 3) { // if (arr.length > 3) {
// // //
arr = arr.splice(0, 3) // arr = arr.splice(0, 3)
} // }
arr.forEach((item, index) => { arr.forEach((item, index) => {
data.value.push({ data.value.push({
title: item.name, title: item.name,
@ -90,6 +117,7 @@
.main { .main {
margin-top: 40px; margin-top: 40px;
.top { .top {
width: 13.14rem;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;

View File

@ -98,7 +98,16 @@
label="应用领域" label="应用领域"
name="detailsField" name="detailsField"
style="width: 6.93rem" style="width: 6.93rem"
:rules="[{ required: true, message: '请选择应用领域' }]" :rules="[
{
required:
formName.detailsType === '应用资源' ||
formName.detailsType === '组件服务'
? true
: false,
message: '请选择应用领域',
},
]"
> >
<a-select <a-select
:disabled=" :disabled="